/* The homepage hero (owner, 24 Oct 2026, round 5; js/home-hero.js): the first screen sits on the light page with the story
   beside the words; the report demo below keeps its dark card (.hh-report). Stage units are the review's design sizes
   (760 x 600, phone 343 x 534), scaled to fit by --hh-k. */
.nx-hero.hh-on{background:transparent;color:var(--nx-ink);width:100%;max-width:none;margin:0;padding:0;border-radius:0;min-height:0;overflow:visible}
.nx-hero.hh-on .hh-report{position:relative;margin:24px auto 0;width:calc(100% - 16px);border-radius:28px;overflow:clip;background:var(--nx-graphite);color:#fff;padding:40px 24px 28px;isolation:isolate}
.nx-hero-first.hh{min-height:calc(100svh - 8px);display:flex;flex-direction:column;position:relative;padding:16px 24px 20px}
/* The report demo's two middle source logos start above the phone and fall into it (an older rule put them on its top edge,
   over the report); on a phone none show, as there is no room beside it (homepage-next.css). */
.nx-hero.hh-on .hh-report .nx-float-4,.nx-hero.hh-on .hh-report .nx-float-5{--float-y:-64px}
/* A plain bar on the light page (owner, 24 Oct 2026): the wordmark and the links without boxes; Start free week is the
   only outlined control. */
.hh .nx-nav{justify-content:space-between;align-items:center;gap:12px;width:min(1344px,100%);margin:0 auto;min-height:52px}
.hh .nx-brand{width:auto;height:44px;padding:0 2px;border-radius:12px;background:none!important;box-shadow:none!important}
.hh .nx-brand>svg{width:112px;height:37px}
.hh .nx-brand path[fill="#FFFFFF"]{fill:#111111}
.hh .nx-nav nav{align-items:center;gap:2px;margin-inline-start:auto}
.hh .nx-nav nav>.nx-link{width:auto!important;height:auto;min-height:44px;padding:0 14px;border-radius:99px;background:none!important;box-shadow:none!important;color:var(--nx-ink);font-size:16px;font-weight:500}
.hh .nx-nav .nx-login{color:var(--nx-ink);font-size:16px;padding:0 14px}
.hh .nx-nav nav>.nx-link:hover,.hh .nx-nav .nx-login:hover{background:rgba(17,18,20,.06)!important}
.hh .nx-nav .nx-primary{margin-left:8px}
.hh-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.hh-grid{flex:1;display:grid;grid-template-columns:minmax(0,560px) minmax(0,760px);justify-content:center;align-items:center;gap:40px;width:min(1344px,100%);margin:0 auto;padding-top:20px}
.hh h1{font-size:52px;line-height:56px;letter-spacing:-.045em;font-weight:600}
.hh h1 span{display:block}
/* The page focuses its headline for screen readers (app.js); a heading is not a control, so no ring shows. */
.nx .hh h1[tabindex="-1"]:focus-visible,.ft-page h1[tabindex="-1"]:focus-visible{outline:none}
.hh-sub{margin-top:18px!important;font-size:19px;line-height:28px;font-weight:500;color:var(--nx-muted);max-width:500px}
.hh-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:26px}
/* Its pair stays quiet (the main button's rule, 24 Oct 2026): a soft fill, no edge. */
.hh-film{display:inline-flex;align-items:center;gap:11px;min-height:52px;padding:0 22px 0 4px;border-radius:999px;border:0!important;background:rgba(17,18,20,.06)!important;font-size:15px;font-weight:500;color:var(--nx-ink);white-space:nowrap}
.hh-film:hover{background:rgba(17,18,20,.1)!important}
.hh-film .hh-play{width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 1px #e1e2e5,0 2px 6px rgba(17,18,20,.08)}
.hh-film .hh-play .ic{width:18px;height:18px;margin-left:2px}
.hh-film .hh-dur{color:var(--nx-muted)}
/* The three things Tellz does, each with its line; the one playing carries the bar. */
.hh .hh-ideas{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:4px;max-width:500px}
.hh-ideas button{display:grid;grid-template-columns:40px 1fr;align-items:baseline;width:100%;padding:8px 0;text-align:left}
.hh-num{font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--nx-muted)}
.hh-ideas .hh-txt{font-size:20px;line-height:27px;font-weight:600;letter-spacing:-.02em;color:var(--nx-muted);transition:color .24s}
.hh-ideas .hh-desc{grid-column:2;font-size:15px;line-height:22px;color:var(--nx-muted);margin-top:2px}
.hh-ideas .hh-bar{grid-column:2;height:2px;margin-top:10px;background:var(--nx-line);border-radius:2px;overflow:hidden;opacity:0;transition:opacity .24s}
/* Each bar fills on its own layer, so a frame moves it without drawing the page again: drawn in the page every frame, the
   bars held about 160 MB of an iPhone's memory (1 Nov 2026). */
.hh-ideas .hh-bar i,.hh-segs i{display:block;height:100%;background:var(--nx-ink);transform-origin:0 50%;transform:scaleX(0);will-change:transform}
.hh-ideas [aria-pressed="true"] .hh-txt,.hh-ideas [aria-pressed="true"] .hh-num{color:var(--nx-ink)}
.hh-ideas [aria-pressed="true"] .hh-bar{opacity:1}
.hh-pause{display:inline-flex;align-items:center;gap:8px;margin-top:10px;min-height:44px;font-size:13px;font-weight:500;color:var(--nx-muted)}
.hh-pause .ic{width:16px;height:16px}

.hh-show{min-width:0;display:flex;flex-direction:column;align-items:center}
.hh-fit{position:relative;width:100%;display:flex;justify-content:center}
/* Under one column the steps sit over the story like a story's bars, with the step's words under them. */
.hh-line{display:none;width:min(100%,760px);margin-bottom:10px;position:relative}
.hh-segs{display:flex;gap:4px;margin-right:52px}
.hh-segs button{flex:1;padding:10px 0}
.hh-segs span{display:block;height:3px;border-radius:2px;background:rgba(17,18,20,.12);overflow:hidden}
.hh-say{display:grid;margin:4px 52px 0 0!important}
.hh-say span{grid-area:1/1;opacity:0;transition:opacity .3s;font-size:17px;line-height:23px;font-weight:600;letter-spacing:-.015em}
.hh-say b{color:var(--nx-muted);font-size:12px;letter-spacing:.08em;margin-right:8px}
.hh-say small{display:block;font-size:14px;line-height:20px;font-weight:400;letter-spacing:0;color:var(--nx-muted);margin-top:2px}
.hh[data-hh-step="0"] .hh-say span:nth-child(1),.hh[data-hh-step="1"] .hh-say span:nth-child(2),.hh[data-hh-step="2"] .hh-say span:nth-child(3){opacity:1}
.hh-pause-round{position:absolute;right:0;top:2px;width:44px;height:44px;border-radius:50%;background:#fff!important;display:grid;place-items:center;box-shadow:0 1px 2px rgba(17,18,20,.06),0 6px 16px rgba(17,18,20,.08)}
.hh-pause-round .ic{width:16px;height:16px}
/* Explore a real report (owner, 24 Oct 2026): a pill with the businesses' small logos that grows into the choice of
   industries; each row opens that real report full screen. */
.hh-rb-wrap{position:relative;display:flex;justify-content:center;margin-top:16px}
.hh-rb-wrap.is-open{z-index:5}
.hh-rb{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:6px 16px 6px 8px;border-radius:999px;background:#fff!important;color:var(--nx-ink);font-size:15px;font-weight:500;line-height:20px;white-space:nowrap;box-shadow:0 1px 2px rgba(17,18,20,.06),0 6px 16px rgba(17,18,20,.08)}
.hh-rb:hover{box-shadow:0 1px 2px rgba(17,18,20,.08),0 10px 24px rgba(17,18,20,.12)}
.hh-rb .ic{width:16px;height:16px;color:var(--nx-muted)}
.hh-rb-faces{display:flex}
.hh-rb-av{width:30px;height:30px;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 0 0 2px #fff;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:600;color:var(--nx-muted)}
.hh-rb-av+.hh-rb-av{margin-left:-8px}
.hh-reports{position:absolute;left:50%;bottom:0;width:min(420px,calc(100vw - 32px));margin-left:calc(min(420px,calc(100vw - 32px)) / -2);padding:16px 12px 12px;border-radius:24px;background:#fff;box-shadow:0 1px 2px rgba(17,18,20,.08),0 18px 40px rgba(17,18,20,.16),0 40px 80px rgba(17,18,20,.1);text-align:left}
.hh-rp-head{display:flex;align-items:center;justify-content:space-between;padding:0 4px 0 8px}
.hh-rp-head p{font-size:18px;line-height:24px;font-weight:600;letter-spacing:-.02em}
.hh-rp-close{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--nx-muted)}
.hh-rp-close .ic{width:18px;height:18px}
.hh-rp-close:hover{background:rgba(17,18,20,.06)}
.hh-rp-sub{padding:0 8px;margin-top:2px!important;font-size:13.5px;line-height:19px;color:var(--nx-muted)}
.hh-rp-list{display:grid;gap:2px;margin-top:10px}
.hh-rep{display:grid;grid-template-columns:44px minmax(0,1fr) auto 18px;grid-template-areas:"av kind faces go" "av name name go";column-gap:12px;row-gap:1px;align-items:center;width:100%;min-height:64px;padding:9px 8px;border-radius:16px;text-align:left;color:var(--nx-ink)}
.hh-rep:hover{background:#f4f4f6}
.hh-rep-av{grid-area:av;width:44px;height:44px;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #b44744;display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:600;color:var(--nx-muted)}
.hh-rep-kind{grid-area:kind;font-size:16px;line-height:21px;font-weight:600;letter-spacing:-.015em}
.hh-rep-name{grid-area:name;min-width:0;font-size:13px;line-height:18px;color:var(--nx-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hh-rep-faces{grid-area:faces;display:flex;align-items:center;justify-content:flex-end;gap:0}
.hh-rep-faces small{margin-left:7px;font-size:11px;line-height:15px;font-weight:600;color:#704398;white-space:nowrap}
.hh-rep-face{width:22px;height:22px;border-radius:50%;object-fit:cover;background:#f3edf8;box-shadow:0 0 0 1.5px #fff,0 0 0 2.75px #704398;display:grid;place-items:center;font-style:normal;font-size:8px;font-weight:700;color:#704398}
.hh-rep-face+.hh-rep-face{margin-left:-5px}
.hh-rep>.ic{grid-area:go;width:18px;height:18px;color:var(--nx-muted)}
.hh-rep:hover>.ic{color:var(--nx-ink)}
.hh-credit{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 14px;margin-top:14px!important;font-size:12px;line-height:18px;font-weight:500;color:var(--nx-muted);text-align:center}
.hh-link{min-height:32px;font-size:12px;font-weight:600;color:var(--nx-ink);text-decoration:underline;text-decoration-color:#92969f;text-underline-offset:3px}
.hh-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#286a5a;margin-right:8px;vertical-align:1px}

/* the stage */
/* A picture with nothing to tap: its hidden layers never catch a tap meant for the buttons around it. */
.hh-stage{position:relative;flex:none;width:760px;height:600px;transform:scale(var(--hh-k,1));transform-origin:top center;font-size:16px;line-height:1.4;pointer-events:none;user-select:none;color:var(--nx-ink)}
.hh-stage>*{position:absolute;left:0;top:0}
.hh-stage img{max-width:none}
.hh-stage .logo,.hh-stage .ic{display:block}
.hh-ring{left:152px;top:72px;width:456px;height:456px;border-radius:50%;border:1px solid var(--nx-line)}
.hh-lines{width:760px;height:600px;overflow:visible;fill:none}
.hh-lines path{stroke:#d3d4d8;stroke-width:1.25;stroke-dasharray:1 1;stroke-dashoffset:1;stroke-linecap:round}
.hh-lines path.is-move{stroke:#704398;stroke-width:1.6}
.hh-lines path.is-out{stroke:#c9cacf}
.hh-lines path.is-out.is-on{stroke:#286a5a;stroke-width:1.6}
.hh-label{font-size:11px;line-height:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--nx-muted);text-align:center;white-space:nowrap}
.hh-label-in{left:10px;top:106px;width:120px}
.hh-label-out{left:630px;top:122px;width:120px;height:14px}
.hh-label-out span{position:absolute;left:0;right:0;top:0}
.hh-label-out span+span{opacity:0}
.hh-dock{left:46px;top:132px;width:46px;display:grid;gap:12px}
.hh-dock i{display:block;width:46px;height:46px}
.hh-tile{width:56px;height:56px;border-radius:18px;background:#fff;display:grid;place-items:center;box-shadow:0 1px 2px rgba(17,18,20,.06),0 6px 16px rgba(17,18,20,.08);transform-origin:50% 50%}
.hh-tile .logo,.hh-tile .ic{width:26px;height:26px}
.hh-count{left:120px;top:2px;width:520px;text-align:center;font-size:15px;line-height:22px;font-weight:500;color:var(--nx-muted)}
.hh-count b{font-weight:700;color:var(--nx-ink);font-variant-numeric:tabular-nums}
.hh-count span+span::before{content:' '}
.hh-item{width:108px;height:135px;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(17,18,20,.08),0 10px 24px rgba(17,18,20,.14);transform-origin:50% 50%}
.hh-ipic{width:100%;height:100%;object-fit:cover;display:block}
.hh-net{position:absolute;top:7px;right:7px;width:26px;height:26px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--nx-ink);box-shadow:0 1px 2px rgba(17,18,20,.12)}
.hh-net .logo,.hh-net .ic{width:15px;height:15px}
.hh-iface{position:absolute;left:7px;bottom:7px;width:26px;height:26px;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #704398}
.hh-page,.hh-paper{position:absolute;inset:0;display:flex;flex-direction:column;padding:12px 10px 38px;text-align:left}
.hh-page{background:#ddece6}
.hh-paper{background:#eeeff1}
.hh-page small,.hh-paper small{font-size:10px;line-height:13px;font-weight:600;color:var(--nx-muted);padding-right:26px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hh-page b{font-size:36px;line-height:38px;font-weight:700;letter-spacing:-.04em;margin-top:10px}
.hh-page span{font-size:12px;line-height:15px;font-weight:600}
.hh-paper span{font-size:13px;line-height:17px;font-weight:600;letter-spacing:-.01em;margin-top:8px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.hh-mark{width:132px;height:132px;color:#111111;transform-origin:50% 50%}
.hh-mark svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.hh-body{fill:#111111}
.hh-pen{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:butt;stroke-dasharray:1 1;stroke-dashoffset:1}
.hh-rec{left:190px;top:586px;width:380px;text-align:center;font-size:10.5px;line-height:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--nx-muted)}

/* the report and the chat */
.hh-rcard,.hh-chat{left:190px;top:18px;width:380px;height:564px;border-radius:28px;background:#fff;overflow:hidden;box-shadow:0 1px 2px rgba(17,18,20,.06),0 10px 24px rgba(17,18,20,.08),0 28px 56px rgba(17,18,20,.07)}
.hh-rcard{display:flex;flex-direction:column;padding:18px 20px 16px}
.hh-rcard>*{flex:none}
.hh-rhead{display:flex;align-items:center;justify-content:space-between}
.hh-rhead b{font-size:19px;line-height:26px;letter-spacing:-.02em;font-weight:600}
.hh-rhead span{font-size:12px;line-height:16px;font-weight:600;color:var(--nx-muted);background:#f1f2f3;border-radius:99px;padding:5px 10px}
.hh-faces{display:flex;gap:4px;margin-top:14px}
.hh-face{width:54px;display:flex;flex-direction:column;align-items:center;gap:7px}
.hh-face img,.hh-face i{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 0 0 2px #fff,0 0 0 4px #704398}
.hh-face.is-you img{box-shadow:0 0 0 2px #fff,0 0 0 4px #b44744}
.hh-face i{display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:600;color:#704398;background:#f3edf8}
.hh-face b{font-size:10.5px;line-height:13px;font-weight:600;color:var(--nx-muted);max-width:54px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hh-brief{display:grid;grid-template-columns:30px 1fr;column-gap:8px;margin-top:16px}
.hh-quote{width:26px;height:26px;margin-top:1px}
.hh-bline{font-size:19px;line-height:26px;font-weight:600;letter-spacing:-.02em}
.hh-bsub{grid-column:2;font-size:13px;line-height:18px;color:var(--nx-muted);margin-top:3px!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hh-top{margin-top:14px!important;padding-bottom:4px;font-size:11px;line-height:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--nx-muted)}
.hh-row{display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:center;padding:7px 0;border-top:1px solid #edeef0}
.hh-th{position:relative;width:48px;height:60px;border-radius:9px;overflow:hidden;background:#e7e8ea}
.hh-th>img{width:100%;height:100%;object-fit:cover;display:block}
.hh-th .hh-net{top:3px;right:3px;width:18px;height:18px}
.hh-th .hh-net .logo,.hh-th .hh-net .ic{width:11px;height:11px}
.hh-thpage{display:flex;flex-direction:column;justify-content:flex-end;width:100%;height:100%;padding:0 0 7px 6px;background:#ddece6}
.hh-thpage b{font-size:15px;line-height:16px;font-weight:700;letter-spacing:-.03em}
.hh-thpage small{font-size:10px;line-height:11px;font-weight:600}
.hh-thpage:not(.is-web):has(.logo,.ic){align-items:center;justify-content:center;padding:0;background:#eeeff1}
.hh-thpage .logo,.hh-thpage .ic{width:20px;height:20px}
.hh-rtext{min-width:0}
.hh-rtext small{display:block;font-size:11px;line-height:15px;font-weight:600;color:#704398;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hh-rtext p{font-size:14.5px;line-height:19px;font-weight:600;letter-spacing:-.01em;margin-top:2px!important}
.hh-more{font-size:12px;line-height:16px;color:var(--nx-muted);padding-top:8px;border-top:1px solid #edeef0}
.hh-sections{display:flex;gap:5px;margin-top:auto}
.hh-sec{flex:1;text-align:center;font-size:12px;line-height:16px;font-weight:600;padding:8px 0;border-radius:99px}
.hh-sec-brief{background:#f9e6e2}.hh-sec-offers{background:#ddece6}.hh-sec-ads{background:#e9e1f5}.hh-sec-social{background:#faecdb}.hh-sec-news{background:#eeeff1}
.hh-sec.is-on{box-shadow:inset 0 0 0 1.5px #111214}

.hh-chat{display:flex;flex-direction:column;background:#efeae2}
.hh-chead{flex:none;display:flex;align-items:center;gap:10px;height:62px;padding:0 14px 0 8px;background:#fff;box-shadow:0 1px 0 #e9edef;position:relative;z-index:1}
.hh-back .ic{width:22px;height:22px;color:#027eb5}
.hh-av{width:38px;height:38px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px #e1e2e5;display:grid;place-items:center;flex:none}
.hh-av i{display:block;width:26px;height:26px}
.hh-who{min-width:0}
.hh-who b{display:block;font-size:15px;line-height:19px;font-weight:600}
.hh-who small{display:block;position:relative;height:16px;font-size:12px;line-height:16px;color:#667781}
.hh-who small span{position:absolute;left:0;top:0;white-space:nowrap}
.hh-typing{opacity:0;color:#157a3f}
.hh-wa{margin-left:auto}
.hh-wa .logo{width:22px;height:22px}
.hh-msgs{position:relative;flex:1;overflow:hidden}
.hh-scroll{padding:12px 12px 8px;display:flex;flex-direction:column;gap:8px}
.hh-day{align-self:center;font-size:11.5px;line-height:15px;font-weight:600;color:#54656f;background:#fff;border-radius:8px;padding:4px 10px;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.hh-bub{max-width:88%;border-radius:12px;padding:7px 10px 5px;font-size:14px;line-height:19px;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.hh-in{align-self:flex-start;background:#fff;border-top-left-radius:4px}
.hh-me{align-self:flex-end;background:#d9fdd3;border-top-right-radius:4px}
.hh-cover{display:grid;grid-template-columns:56px 1fr;gap:10px;align-items:center;background:#f5f6f6;border-radius:8px;padding:6px;margin-bottom:6px}
.hh-cover img{width:56px;height:70px;border-radius:6px;object-fit:cover}
.hh-cover small{display:block;font-size:10.5px;line-height:14px;font-weight:600;color:#54656f}
.hh-cover b{display:block;font-size:14px;line-height:18px;font-weight:600;margin-top:2px}
.hh-time{display:block;text-align:right;font-size:11px;line-height:14px;color:#54656f;margin-top:1px}
.hh-acts{display:flex;gap:6px;width:88%}
.hh-acts span{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;background:#fff;border-radius:10px;padding:8px 0;font-size:13px;line-height:17px;font-weight:500;color:#027eb5;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.hh-acts .ic{width:14px;height:14px}
.hh-srcchip{display:inline-flex;align-items:center;gap:6px;margin-top:7px;padding:5px 10px 5px 8px;border-radius:99px;background:#f3edf8;color:#704398;font-size:12px;line-height:16px;font-weight:600}
.hh-srcchip .logo,.hh-srcchip .ic{width:14px;height:14px}
.hh-srcchip i{font-style:normal}
.hh-compose{flex:none;display:flex;align-items:center;gap:10px;height:52px;padding:0 12px;background:#f6f5f3;color:#54656f;position:relative;z-index:1}
.hh-compose .ic{width:20px;height:20px}
.hh-compose span:nth-child(2){flex:1;height:36px;border-radius:99px;background:#fff;display:flex;align-items:center;padding:0 14px;color:#667781;font-size:14px}
.hh-outs,.hh-ais{left:666px;top:152px;display:grid;gap:14px}
.hh-ais{top:183px}
.hh-out{width:48px;height:48px;border-radius:16px;background:#fff;display:grid;place-items:center;box-shadow:0 1px 2px rgba(17,18,20,.06),0 6px 16px rgba(17,18,20,.08)}
.hh-out .logo{width:24px;height:24px;border-radius:6px}
.hh-out[data-out="whatsapp"]{box-shadow:0 0 0 2px #286a5a,0 6px 16px rgba(17,18,20,.08)}

/* the phone stage: the same story in one column, channels over the report and where it arrives under it */
.hh-stage.is-phone{width:343px;height:534px}
.is-phone .hh-ring{left:35.5px;top:136px;width:272px;height:272px}
.is-phone .hh-lines,.is-phone .hh-label-in{display:none}
.is-phone .hh-dock{left:0;width:343px;top:0;display:flex;justify-content:center;gap:10px}
.is-phone .hh-dock i{width:30px;height:30px}
.is-phone .hh-tile{width:44px;height:44px;border-radius:14px}
.is-phone .hh-tile .logo,.is-phone .hh-tile .ic{width:21px;height:21px}
.is-phone .hh-count{left:0;top:4px;width:343px;font-size:13.5px;line-height:19px}
.is-phone .hh-count span{display:block}
.is-phone .hh-count span+span::before{content:none}
.is-phone .hh-item{width:80px;height:100px;border-radius:11px}
.is-phone .hh-net{top:5px;right:5px;width:21px;height:21px}
.is-phone .hh-net .logo,.is-phone .hh-net .ic{width:12px;height:12px}
.is-phone .hh-iface{left:5px;bottom:5px;width:20px;height:20px;box-shadow:0 0 0 1.5px #fff,0 0 0 3px #704398}
.is-phone .hh-page,.is-phone .hh-paper{padding:9px 7px 28px}
.is-phone .hh-page small,.is-phone .hh-paper small{font-size:8.5px;line-height:11px;padding-right:20px}
.is-phone .hh-page b{font-size:26px;line-height:28px;margin-top:6px}
.is-phone .hh-page span{font-size:9.5px;line-height:12px}
.is-phone .hh-paper span{font-size:10px;line-height:13px;margin-top:5px;-webkit-line-clamp:3}
.is-phone .hh-mark{width:88px;height:88px}
.is-phone .hh-rcard,.is-phone .hh-chat{left:0;top:40px;width:343px;height:430px;border-radius:24px}
.is-phone .hh-rcard{padding:14px 14px 12px}
.is-phone .hh-rhead b{font-size:17px;line-height:22px}
.is-phone .hh-rhead span{font-size:11px;padding:4px 9px}
.is-phone .hh-faces{gap:2px;margin-top:12px}
.is-phone .hh-face{width:52px;gap:6px}
.is-phone .hh-face img,.is-phone .hh-face i{width:34px;height:34px}
.is-phone .hh-face i{font-size:11.5px}
.is-phone .hh-face b{font-size:10px;line-height:12px}
.is-phone .hh-brief{grid-template-columns:24px 1fr;column-gap:7px;margin-top:12px}
.is-phone .hh-quote{width:22px;height:22px}
.is-phone .hh-bline{font-size:16.5px;line-height:22px}
.is-phone .hh-bsub{display:none}
.is-phone .hh-top{margin-top:10px!important;font-size:10px}
.is-phone .hh-row{grid-template-columns:40px 1fr;gap:10px;padding:5px 0}
.is-phone .hh-th{width:40px;height:50px;border-radius:8px}
.is-phone .hh-thpage{padding:0 0 4px 5px}
.is-phone .hh-thpage b{font-size:12px;line-height:13px}
.is-phone .hh-thpage small{font-size:9px;line-height:10px}
.is-phone .hh-rtext small{font-size:10.5px;line-height:14px}
.is-phone .hh-rtext p{font-size:13.5px;line-height:18px}
.is-phone .hh-more{font-size:11px;line-height:15px;padding-top:6px}
.is-phone .hh-more span{display:none}
.is-phone .hh-sections{gap:4px}
.is-phone .hh-sec{font-size:11px;padding:7px 0}
.is-phone .hh-chead{height:54px;gap:8px;padding:0 12px 0 6px}
.is-phone .hh-av{width:34px;height:34px}
.is-phone .hh-av i{width:23px;height:23px}
.is-phone .hh-who b{font-size:14px;line-height:18px}
.is-phone .hh-who small{font-size:11.5px}
.is-phone .hh-scroll{padding:10px 10px 8px;gap:7px}
.is-phone .hh-bub{font-size:13.5px;line-height:18px}
.is-phone .hh-cover{grid-template-columns:48px 1fr;gap:8px}
.is-phone .hh-cover img{width:48px;height:60px}
.is-phone .hh-cover b{font-size:13px;line-height:17px}
.is-phone .hh-acts span{font-size:12.5px;padding:7px 0}
.is-phone .hh-compose{height:46px}
.is-phone .hh-label-out{left:0;top:489px;width:auto;text-align:left}
.is-phone .hh-label-out span{right:auto}
.is-phone .hh-outs,.is-phone .hh-ais{left:auto;right:0;top:480px;display:flex;gap:8px}
.is-phone .hh-out{width:32px;height:32px;border-radius:10px}
.is-phone .hh-out .logo{width:17px;height:17px;border-radius:4px}
.is-phone .hh-rec{left:auto;right:0;top:519px;width:auto;text-align:right;font-size:10px}

@media(max-width:1179px){
  .hh-grid{grid-template-columns:minmax(0,1fr);justify-items:center;gap:22px;padding-top:28px}
  .hh-copy{text-align:center;max-width:640px}
  .hh-sub{margin-inline:auto}
  .hh-ctas{justify-content:center}
  .hh .hh-ideas,.hh .hh-pause{display:none}
  .hh-line{display:block}
  .hh-show{width:100%}
}
@media(max-width:600px){
  .nx-hero-first.hh{padding:12px 16px 18px}
  .hh .nx-brand>svg{width:92px;height:31px}
  .hh .nx-nav nav>.nx-link,.hh .nx-nav .nx-login{padding:0 9px;font-size:14px}
  .hh .nx-nav .nx-primary{margin-left:4px}
  .hh-grid{padding-top:20px;gap:18px}
  .hh h1{font-size:32px;line-height:35px;letter-spacing:-.04em}
  .hh-sub{font-size:16px;line-height:22px;margin-top:10px!important}
  .hh-ctas{flex-direction:column;gap:4px;margin-top:16px}
  .hh-film{min-height:44px;border:0!important;background:none!important;padding:0 10px 0 4px;gap:9px}
  .hh-film .hh-play{width:32px;height:32px}
  .hh-film .hh-play .ic{width:14px;height:14px}
  .hh-line{width:min(100%,343px);text-align:left}
  .hh-say span{font-size:16px;line-height:22px}
  .hh-say small{font-size:13.5px;line-height:19px}
  .hh-link{min-height:44px}
}
@media(max-width:399px){.hh-rep-faces small{display:none}}
@media(max-width:389px){.hh .nx-nav nav>[data-target="nx-pricing"]{display:none}}
@media(max-width:374px){.hh h1{font-size:30px;line-height:33px}}
@media(min-width:1800px){.nx-hero-first.hh{min-height:calc((100svh - 8px) / 1.22)}}
@media(min-width:2300px){.nx-hero-first.hh{min-height:calc((100svh - 8px) / 1.55)}}
@media(prefers-reduced-motion:reduce){.hh-ideas .hh-txt,.hh-ideas .hh-bar,.hh-say span{transition:none}}

/* The longer film, immediately before the footer. Its picture and silent preview load only near the screen. */
.nx-film{--nx-page:var(--page);--nx-ink:var(--ink);--nx-muted:var(--text2)}
.nx-film .nx-section-head{margin-bottom:32px}
.nx-film .nx-section-head p{margin-top:16px;color:var(--nx-muted);font-size:18px;line-height:28px}
.hh-preview{position:relative;border-radius:24px;overflow:hidden;background:var(--nx-graphite)}
.nx .hh-preview-open{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;overflow:hidden;border-radius:inherit;text-align:start}
.nx .hh-preview-open:active{transform:none}
.hh-preview-poster,.hh-preview-loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hh-preview-poster:not([src]){visibility:hidden}
.hh-preview-loop{opacity:0;pointer-events:none}
.hh-preview.is-playing .hh-preview-loop{opacity:1}
.hh-preview-watch{position:absolute;bottom:24px;inset-inline-start:24px;display:flex;align-items:center;gap:12px;padding:8px 20px 8px 8px;border-radius:999px;background:var(--panel,#fff);color:var(--ink,#111214);font-size:16px;font-weight:500;line-height:24px;box-shadow:0 2px 12px #0002}
.hh-preview-play{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--page,#f1f2f3)}
.hh-preview-play .ic{width:20px;height:20px}
.hh-preview-duration{color:var(--text2,#5c6068);font-variant-numeric:tabular-nums}
.nx .hh-preview-pause{position:absolute;inset-inline-end:16px;top:16px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--panel,#fff);color:var(--ink,#111214);box-shadow:0 2px 12px #0002}
.hh-preview-open:focus-visible{outline-offset:-5px!important}
@media(max-width:699px) and (orientation:portrait){
  .nx .hh-preview-open{aspect-ratio:4/5}
  .hh-preview-watch{bottom:16px;inset-inline-start:16px;gap:8px;padding-inline-end:16px;font-size:14px}
  .hh-preview-play{width:36px;height:36px}
}
@media(prefers-reduced-motion:reduce){.hh-preview-loop{display:none}}

/* The shared film player, full screen over the page (outside the homepage's zoom). */
.hh-filmbox{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#fff;overflow:hidden}
.hh-filmbox[open]{display:grid;place-items:center}
.hh-filmbox::backdrop{background:#0b0b0c}
.hh-fb-stack{position:relative}
.hh-fb-frame{position:relative;width:min(1200px,90vw,calc((100vh - 140px) * 16 / 9));aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.hh-fb-frame video,.hh-fb-poster{position:absolute;inset:0;width:100%;height:100%;display:block;border:0}
.hh-fb-frame video{object-fit:contain;background:transparent}
.hh-fb-poster{object-fit:cover}
.hh-fb-poster:not([src]){visibility:hidden}
.hh-fb-error{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));inset-inline-start:16px;inset-inline-end:16px;text-align:center;font:500 16px/24px Manrope,sans-serif}
.hh-fb-error[hidden]{display:none}
.hh-fb-error p{margin:0 0 8px}
.hh-fb-error button{min-height:44px;padding:8px 24px;border:1px solid #fff;border-radius:999px;background:transparent;color:#fff;font:inherit;cursor:pointer}
.hh-fb-wait{position:absolute;left:50%;top:calc(100% + 18px);width:40px;height:40px;margin-left:-20px;display:none;color:#fff}
.hh-fb-wait svg{width:100%;height:100%;display:block}
.hh-filmbox.is-waiting .hh-fb-wait{display:block}
.hh-fb-say{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hh-fb-close{position:absolute;top:22px;right:22px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer}
.hh-fb-close svg{width:20px;height:20px;display:block}
.hh-fb-close:focus-visible{outline:3px solid #b17ac7;outline-offset:3px}
.hh-filmbox.is-tall .hh-fb-frame{width:min(100vw,calc((100dvh - 140px) * 4 / 5));aspect-ratio:4/5;border-radius:0;box-shadow:none}
.hh-filmbox.is-tall .hh-fb-close{top:max(14px,env(safe-area-inset-top));right:14px}

/* The phone bar on the home page and What's inside (owner, 4 Nov 2026: "Fix the mobile version the nav bar and the space
   before the logo"): one row. The wordmark starts on the page's own 16 px edge, Start free week and the menu button sit at
   the other end, and every link lives in the menu under the bar, so nothing falls to a second row. #nx-menu outranks the
   older bar rules by being an id, so the menu needs no !important. */
.nx-menu-btn{display:none}
@media(max-width:699px){
  .nx .nx-nav{display:flex;align-items:center;justify-content:flex-start;gap:4px;position:relative;z-index:20;width:100%;min-height:44px}
  .ft-page .nx-nav{width:calc(100% - 32px);margin:0 auto;padding:12px 0 0}
  .nx .nx-nav .nx-brand{order:1;display:flex;align-items:center;width:auto;height:44px;padding:0;margin-inline-end:auto}
  .nx .nx-nav .nx-brand>svg{margin-inline-start:-1px}  /* the letter t starts 1 px inside its artwork; this lands it on the edge */
  .nx .nx-nav .nx-primary{order:2;margin:0;width:auto;min-height:44px;height:44px;padding:0 16px!important}
  .nx .nx-nav .nx-primary span,.ft-page .nx-nav .nx-primary{font-size:14px!important;line-height:20px}
  .nx-menu-btn{order:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;flex:none;width:44px;height:44px;margin-inline-end:-12px;padding:0;border:0;border-radius:12px;background:none;color:var(--nx-ink)}
  .nx-menu-btn span{display:block;width:20px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s cubic-bezier(.23,1,.32,1)}
  .nx-menu-btn:active{transform:scale(.94)}
  .nx-menu-open .nx-menu-btn span:first-child{transform:translateY(4px) rotate(45deg)}
  .nx-menu-open .nx-menu-btn span:last-child{transform:translateY(-4px) rotate(-45deg)}
  #nx-menu{display:none;position:absolute;top:calc(100% + 8px);inset-inline:0;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:8px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--nx-line),0 16px 40px rgba(17,18,20,.16)}
  :root[data-scheme=dark] .ft-page #nx-menu{background:var(--panel);box-shadow:0 0 0 1px var(--nx-line),0 16px 40px rgba(0,0,0,.5)}
  .nx-menu-open #nx-menu{display:flex;transform-origin:top right;animation:nx-menu-in .2s cubic-bezier(.23,1,.32,1)}
  #nx-menu>*{display:flex;align-items:center;justify-content:flex-start;width:auto;height:auto;min-height:48px;padding:0 12px;border-radius:12px;background:none;color:var(--nx-ink);font:500 16px/24px Manrope,sans-serif;text-align:start}
  #nx-menu>[aria-current]{font-weight:600}
  #nx-menu>:active{background:rgba(17,18,20,.06)}
  :root[data-scheme=dark] .ft-page #nx-menu>:active{background:rgba(255,255,255,.08)}
}
@keyframes nx-menu-in{from{opacity:0;transform:translateY(-4px) scale(.98)}}
@media(prefers-reduced-motion:reduce){.nx-menu-btn span{transition:none}.nx-menu-open #nx-menu{animation:none}}