/* The home page and the guided onboarding (docs/kb/26), in the register locked 8 Oct 2026 (docs/kb/24, section 7). Every
   colour, face and shape is a token from app.css; nothing is defined here. Namespaces: .hm- the home page, .gd- the guided
   stages, .sp- the sample brief, and the register's shared parts (.mention, .pen, .ktile, .stchip, .nchip, .dtab,
   .masthead, .sring, .ntile, .mcheck, .pill-b). The pens here draw the sample only; the reader's own pens arrive with the
   register branch and replace them. */

/* ---------- layout: the home page runs the full width, the stages in a wider column ---------- */
html[data-screen="guided"] .col { max-width: 760px; }
html[data-screen="guided"] .bottom { width: min(760px, 100% - var(--rail)); }
html[data-screen="guided"] .bottom .btnrow { display: flex; gap: 8px; }
html[data-screen="guided"] .bottom .btnrow .btn { flex: 1; min-width: 0; }

/* ---------- the register's parts ---------- */
.mono { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text3); white-space: nowrap; }
.mono.lc { text-transform: none; letter-spacing: 0.02em; }
.mono.wrap { white-space: normal; line-height: 1.5; }
.hm .plabel, .gd .plabel { padding: 0; }
.hm .plabel .mbmark, .gd .plabel .mbmark, .gd-a .mbmark { width: 14px; height: 14px; border-radius: 4px; } .gd-a .mbmark { width: 22px; height: 22px; border-radius: 7px; margin-top: 4px; }
.hm-lk { display: inline-flex; align-items: center; } .hm-lk .lockup { height: var(--h, 20px); }
.mention { display: inline-flex; align-items: center; gap: 0.3em; vertical-align: -0.12em; font-weight: 600; color: var(--violet); white-space: nowrap; }
.mention .mtile { display: inline-flex; align-items: center; justify-content: center; width: 1.35em; height: 1.35em; border-radius: 0.36em; background: var(--panel); border: 1px solid var(--rule); color: var(--ink); flex-shrink: 0; }
.mention .mtile.you { background: var(--marker); border-color: transparent; color: var(--on-marker); }
.mention .mtile .ic { width: 0.78em; height: 0.78em; } .mention .mtile svg:not(.ic) { width: 0.76em; height: 0.76em; }
/* The home page's own pens (js/screens-home.js); the report's pens carry data-pen (U.rich) and wrap with their line: an
   unscoped rule here made a marked line in the report run off a phone screen (9 Oct 2026). */
.pen:not([data-pen]) { position: relative; display: inline-block; z-index: 0; white-space: nowrap; } /* a decorated phrase never breaks across lines */
.nb { white-space: nowrap; } /* a mark and the punctuation after it stay on one line */
.pen.swipe, .pen.pink { padding: 0 0.12em; margin: 0 -0.12em; }
.pen > svg { position: absolute; display: block; z-index: -1; pointer-events: none; }
.pen.swipe > svg, .pen.pink > svg { left: -2px; top: 6%; width: calc(100% + 4px); height: 90%; transform: rotate(-1.2deg); opacity: var(--pen-alpha); }
.pen.swipe > svg path { fill: var(--pen-swipe); } .pen.pink > svg path { fill: var(--pen-pink); }
.pen.two > svg, .pen.one > svg { left: 0; bottom: -0.3em; width: 100%; height: 0.34em; }
.pen.one > svg { height: 0.18em; bottom: -0.2em; }
.pen.two > svg path, .pen.one > svg path { fill: var(--pen-ink); }
.pen .pt { position: relative; }
.ktile { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; color: var(--ink); flex-shrink: 0; }
.ktile .ic { width: 14px; height: 14px; }
.ktile.big { width: 56px; height: 56px; border-radius: 14px; } .ktile.big .ic { width: 24px; height: 24px; }
.k-offer { --tab: var(--k-offer); background: var(--k-offer); } .k-story { --tab: var(--k-story); background: var(--k-story); } .k-ad { --tab: var(--k-ad); background: var(--k-ad); }
.k-press { --tab: var(--k-press); background: var(--k-press); } .k-collab { --tab: var(--k-collab); background: var(--k-collab); } .k-mention { --tab: var(--k-mention); background: var(--k-mention); }
.k-post { --tab: var(--k-post); background: var(--k-post); } .k-page { --tab: var(--k-page); background: var(--k-page); } .k-top { --tab: var(--k-top); background: var(--k-top); }
.stchip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); flex-shrink: 0; white-space: nowrap; }
.stchip.new { background: var(--marker); color: var(--on-marker); } .stchip.live { background: var(--marker-soft); color: var(--ink); } .stchip.you { background: var(--pen-pink); color: #202123; }
.stchip.done { background: var(--pen-green); color: #202123; } .stchip.seen { background: var(--wash); color: var(--text2); } .stchip.off { border: 1px solid var(--rule); color: var(--text3); }
.nchip { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 0 6px 6px 6px; margin-top: 4px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); background: var(--tab, var(--wash)); flex-shrink: 0; }
.nchip::before { content: ""; position: absolute; left: 0; top: -4px; width: 14px; height: 4px; background: var(--tab, var(--wash)); border-radius: 3px 3px 0 0; }
.nchip .ic { width: 11px; height: 11px; }
.ntile { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: var(--panel); border: 1px solid var(--rule); color: var(--ink); flex-shrink: 0; }
.ntile .ic, .ntile svg.logo { width: 20px; height: 20px; display: block; }
.ntile.s30 { width: 30px; height: 30px; border-radius: 8px; } .ntile.s30 .ic, .ntile.s30 svg.logo { width: 15px; height: 15px; }
.ntile.s22 { width: 22px; height: 22px; border-radius: 6px; } .ntile.s22 .ic, .ntile.s22 svg.logo { width: 12px; height: 12px; }
.mcheck { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: var(--marker); color: var(--on-marker); flex-shrink: 0; }
.mcheck .ic { width: 13px; height: 13px; }
.sring { display: inline-flex; width: 44px; height: 44px; border-radius: 999px; padding: 3px; background: var(--rule); flex-shrink: 0; }
.sring.new { background: var(--ring-aurora); } .sring.you { background: var(--marker); }
.sring .sring-in { width: 100%; height: 100%; border-radius: 999px; background: var(--panel); padding: 3px; display: flex; }
.sring img, .sring .ini, .ini { width: 100%; height: 100%; border-radius: 999px; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #202123; }
.ini { background: var(--p-sky); }
.dtab { display: flex; align-items: flex-end; align-self: stretch; --tab: var(--wash); background: none; }
.dtab .dtab-l { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px 0 12px; background: var(--tab); border-radius: 10px 0 0 0; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.dtab .dtab-l i { font-style: normal; font-weight: 500; color: var(--text2); }
.dtab .dtab-l .ic { width: 13px; height: 13px; }
.dtab svg.diag { width: 16px; height: 30px; display: block; flex-shrink: 0; } .dtab svg.diag path { fill: var(--tab); }
.dtab .dtab-rule { flex: 1; height: 3px; background: var(--tab); }
.masthead { display: flex; flex-direction: column; gap: 10px; }
.masthead .m-rule { height: 3px; background: var(--ink); } .masthead .m-rule.thin { height: 1px; } .masthead .m-rule.soft { height: 1px; background: var(--rule); }
.masthead h2 { font-family: var(--font-display); font-weight: 600; font-size: 34px; line-height: 1.04; letter-spacing: -0.02em; margin: 0; }
.masthead .m-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text2); }
.masthead .m-meta .dl { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); } .masthead .m-meta .dl i { width: 7px; height: 7px; border-radius: 999px; background: var(--ink); }
.pill-b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; font-size: 15px; font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.pill-b.ink { background: var(--done-bg); color: var(--done-fg); }
.pill-b.white { background: var(--panel); color: var(--ink); border: 1px solid var(--rule); }
.pill-b.mark { background: var(--marker); color: var(--on-marker); font-weight: 600; }
.pill-b.sm { height: 36px; padding: 0 16px; font-size: 13px; }

/* Approved home round 6. All surface and text colours follow the portal's theme. */
html[data-screen="home"] .col { max-width: none; padding: 0; min-height: 0; }
html[data-screen="home"] .col.no-tabs { padding-block-end: 0; }
html[data-screen="home"] .shell { background: var(--page); }
.hm { max-width: 1280px; margin: auto; padding: 0 16px 40px; color: var(--ink); font-family: var(--font-ui); line-height: 1.5; }
.hm *, .hm *::before, .hm *::after { box-sizing: border-box; }
.hm [hidden] { display: none !important; }
.hm h1, .hm h2, .hm h3, .hm h4, .hm p { margin: 0; }
.hm button, .hm input { font-family: inherit; }
.hm :is(button, input, summary, a, [tabindex]):focus-visible { outline: 2px solid var(--ember-ink); outline-offset: 3px; }
/* The page's own heading takes focus on arrival for screen readers; it never draws a ring (app.css does the same). */
.hm [tabindex="-1"]:focus { outline: none; }
.hm :is(button, a, input) { max-width: 100%; }
.hm :is(.logo, .ic) { width: 20px; height: 20px; flex: none; }
.hm-sec { padding-top: 64px; scroll-margin-top: 80px; }
.hm-split { display: grid; gap: 32px; align-items: center; }
.hm-split > *, .hm-hero > * { min-width: 0; }
.hm-h2 { font-size: 30px; line-height: 1.2; letter-spacing: -.03em; font-weight: 600; max-width: 24ch; text-wrap: balance; }
.hm-sub { margin-top: 16px !important; font-size: 17px; line-height: 1.55; color: var(--text2); max-width: 56ch; }
.hm-note { font-size: 13px; line-height: 20px; color: var(--text2); margin-top: 16px !important; }
.hm .pill-b.mark { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; padding: 12px 20px; border-radius: 999px; background: var(--ember); color: var(--on-marker); font-size: 15px; font-weight: 600; white-space: normal; height: auto; }
/* Before screens-guided.js gives it the shared markup, an .hm-primary already reads as the Gradient edge (owner, 24 Oct 2026):
   white inside, ink words, an Ember edge. No flat Ember fill. */
.hm-primary { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; padding: 12px 20px; border-radius: 999px; background: var(--ti-btn-surface, #FFFFFF); color: var(--ti-btn-ink, #1D1D1F); box-shadow: inset 0 0 0 1.5px #E38B7D; font-size: 15px; font-weight: 500; white-space: normal; height: auto; }
.hm-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 12px; border-radius: 999px; font-size: 14px; line-height: 20px; background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.hm-pill:hover { background: var(--wash); }
.hm-pill[aria-selected="true"], .hm-pill[aria-checked="true"], .hm-watch-channels .hm-pill[aria-pressed="true"] { background: var(--wash); box-shadow: inset 0 0 0 2px var(--orchid-ink); }
.hm-top { position: sticky; top: 0; z-index: 40; margin: 0 -16px; padding: 0 16px; background: var(--page); border-bottom: 1px solid var(--rule); }
.hm-nav { min-height: 56px; display: flex; align-items: center; gap: 12px; }
.hm-lk { display: inline-flex; flex: none; }
.hm-lk .lockup svg { height: var(--h, 24px); width: auto; }
.hm-lk .lockup { display: inline-flex; }
.hm-navr { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hm-navr > .hm-pill { background: transparent; box-shadow: none; padding-inline: 8px; }
.hm-links { display: none; align-items: center; gap: 8px; }
.hm-links .hm-pill { background: transparent; box-shadow: none; padding-inline: 8px; text-decoration: none; }
.hm-nav-start { display: none; }
.hm-menu { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; }
/* Three bars drawn here: the portal's icon set has no menu glyph. */
.hm-bars { display: grid; gap: 4px; width: 20px; } .hm-bars i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
.hm-hero { display: grid; gap: 32px; padding-top: 32px; }
.hm-herotext h1 { font-size: 36px; font-weight: 600; line-height: 1.17; letter-spacing: -.035em; text-wrap: balance; }
.hm-watch { margin-top: 16px !important; font-size: clamp(17px, 4.8vw, 22px); line-height: 30px; min-height: 60px; }
.hm-flip-w { color: var(--orchid-ink); }
.hm-box { margin-top: 24px; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 24px; }
.hm-box-lab { font-size: 14px; font-weight: 600; }
.hm-sentence { display: grid; gap: 10px; margin: 16px 0; }
.hm-fld { display: flex; align-items: center; min-width: 0; }
.hm-fld .lw { flex: 0 0 48px; color: var(--text2); font-size: 18px; }
.hm-fld .lw:last-child { flex: none; padding-left: 4px; }
.hm-blank { position: relative; flex: 1; min-width: 0; }
/* The title blank is also .role (MB.sentence's name); app.css's .role chip must not draw a pill around the field. */
.hm-blank.role { display: block; height: auto; padding: 0; border-radius: 0; background: none; color: inherit; font: inherit; }
.hm-blank input { display: block; width: 100%; min-width: 0; height: 52px; border: 0; border-radius: 14px; background: var(--page); color: var(--ink); padding: 0 12px; font-size: 16px; font-weight: 500; }
.hm-blank input::placeholder { color: var(--text2); font-weight: 400; }
.hm-blank.bad input { outline: 2px solid var(--alert); }
.hm-ac { position: absolute; z-index: 50; top: calc(100% + 8px); left: 0; width: 100%; padding: 8px; margin: 0; border-radius: 16px; list-style: none; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.hm-ac li { min-height: 44px; padding: 8px; border-radius: 8px; font-size: 14px; overflow-wrap: anywhere; cursor: pointer; }
.hm-ac li[aria-selected="true"] { background: var(--wash); }
.hm-errs { display: grid; gap: 6px; }
.hm-errs:empty { display: none; }
.hm-err { display: flex; align-items: flex-start; gap: 6px; color: var(--alert); font-size: 13px; padding-bottom: 8px; }
.hm-box-foot { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 12px; }
.hm-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; color: var(--text2); font-size: 12px; }
.hm-channels, .hm-channels > span { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hm-channels { margin-top: 24px; font-size: 14px; color: var(--text2); }
.hm-channels > span > span { display: inline-flex; }
.hm .hm-arrival-tile .brandtile { width: 24px; height: 24px; border-radius: 6px; }
.hm .hm-arrival-tile .brandtile :is(.logo, .ic) { width: 14px; height: 14px; }
.hm .hm-delivery-tile .brandtile { width: 22px; height: 22px; border-radius: 6px; }
.hm .hm-delivery-tile .brandtile :is(.logo, .ic) { width: 14px; height: 14px; }
.hm-delivery-tile { display: inline-flex; flex: none; }
.hm-stage { background: var(--ember-soft); padding: 24px 16px; margin-inline: -16px; min-width: 0; }
.hm-phone { position: relative; width: min(100%, 390px); aspect-ratio: 390 / 806; margin: auto; border-radius: 36px; outline: 6px solid var(--charcoal); background: var(--panel); box-shadow: var(--shadow); overflow: hidden; }
.hm-phone > iframe { display: block; width: 390px; height: 806px; max-width: none; border: 0; transform-origin: top left; pointer-events: none; }
.hm-explore { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; width: 100%; }
.hm-explore span { margin-top: 60%; background: var(--panel); color: var(--ink); border-radius: 999px; padding: 12px 20px; box-shadow: var(--shadow); font-size: 15px; font-weight: 600; }
.hm-pack-controls { display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: center; gap: 8px; margin: 24px auto 0; width: fit-content; max-width: 100%; }
#hm-pack-switch { min-width: 0; }
#hm-pack-switch .seg { flex-wrap: nowrap; gap: 2px; padding: 0; height: 36px; border-radius: 999px; }
#hm-pack-switch .seg button { flex: 0 1 auto; height: 36px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.hm-reset { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 399px) { #hm-pack-switch .seg button { font-size: 13px; padding-inline: 7px; } }
.hm-phone.hm-demo-open { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; width: 100%; height: 100dvh; max-width: none; border-radius: 0; outline: 0; aspect-ratio: auto; margin: 0; }
.hm-demo-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: max(4px, env(safe-area-inset-top)) 4px 4px; border-bottom: 1px solid var(--line); }
.hm-demo-bar .hm-pill { padding-inline: 8px; font-size: 12px; box-shadow: none; flex: none; }
.hm-demo-bar > span { min-width: 0; text-align: center; font-size: 12px; color: var(--text2); }
.hm-demo-open > iframe { flex: 1; width: 100%; height: 100%; min-height: 0; pointer-events: auto; }
.hm-saved-title { margin-top: 24px !important; font-size: 15px; color: var(--text2); font-weight: 600; }
.hm-saved { display: grid; gap: 12px; padding: 0; list-style: none; }
.hm-saved li { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.hm-saved .ic { color: var(--ember-ink); }
.hm-watch-stage { width: 100%; max-width: 560px; margin: auto; padding: 16px; border-radius: 32px; background: var(--wash); overflow: clip; }
.hm-watch-label { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.hm-watch-label h3 { flex: 1; min-width: 0; font-size: 16px; line-height: 22px; font-weight: 700; }
.hm-stepn { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--ember); color: var(--on-marker); font-size: 13px; font-weight: 700; }
.hm-watch-label .hm-pill { font-size: 13px; }
.hm-watch-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 0; }
.hm-watch-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; min-height: 44px; padding: 2px 0; border-radius: 10px; }
.hm-watch-tile-face { position: relative; display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; }
.hm-watch-tile-face .brandtile { width: 40px; height: 40px; border-radius: 10px; }
.hm-watch-tile-face .hm-net-snapchat { color: #111214; }
.hm-watch-tile-face .hm-net-reviews { box-shadow: inset 0 0 0 1px var(--line); }
/* The shared YouTube path supplies red; this brand tile uses its white reverse. */
.hm-watch-tile-face .hm-net-youtube path { fill: #fff; }
.hm-watch-tile.now .hm-watch-tile-face { outline: 2px solid var(--ember); outline-offset: 2px; }
.hm-watch-tile small { display: none; font-size: 10px; line-height: 14px; overflow-wrap: anywhere; }
.hm-watch-tick { display: none; position: absolute; right: -1px; bottom: -1px; width: 14px; height: 14px; place-items: center; border-radius: 50%; background: var(--jade); color: var(--on-marker); }
.hm-watch-tick .ic { width: 10px; height: 10px; }
.hm-watch-tile.read .hm-watch-tick { display: grid; }
.hm-soon { font-size: 9px; line-height: 14px; color: var(--text2); }
.hm-watch-counter { text-align: center; font-size: 13px; color: var(--text2); font-variant-numeric: tabular-nums; padding: 12px 0; }
.hm-watch-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; min-height: 137px; padding: 12px; border-radius: 18px; background: var(--panel); color: var(--ink); overflow-wrap: anywhere; }
.hm-watch-media { width: 112px; height: 112px; border-radius: 12px; background: var(--page); overflow: hidden; }
.hm-watch-media.portrait { width: 84px; }
.hm-watch-media.wide { position: relative; width: 128px; height: 72px; }
.hm-watch-media > img { width: 100%; height: 100%; object-fit: cover; }
.hm-watch-play { position: absolute; inset: 0; display: grid; place-items: center; }
.hm-watch-play .logo { width: 32px; height: 24px; background: var(--white); border-radius: 6px; }
.hm-watch-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; line-height: 18px; }
.hm-watch-card-head b { color: var(--orchid-ink); flex: 1; }
.hm-watch-card-head time { font-size: 12px; color: var(--text2); }
.hm-watch-avatar { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--orchid-soft); color: var(--orchid-ink); object-fit: cover; font-size: 10px; }
.hm-watch-kind { font-size: 12px; line-height: 18px; color: var(--text2); margin-top: 4px !important; }
.hm-watch-card h4 { font-size: 15px; font-weight: 600; line-height: 21px; margin-top: 4px; }
.hm-watch-caption { font-size: 13px; line-height: 19px; color: var(--text2); margin-top: 4px !important; }
.hm-watch-card h4, .hm-watch-caption { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.hm-web, .hm-news, .hm-rating { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px; gap: 6px; font-size: 12px; }
.hm-web s { color: var(--text3); }
.hm-web b { padding: 4px; border-radius: 8px; background: var(--ember-soft); color: var(--ember-ink); }
.hm-news { text-align: center; }
.hm-news .ic { width: 28px; height: 28px; }
.hm-rating b { font-size: 30px; line-height: 34px; }
.hm-rating span { color: var(--ember-ink); letter-spacing: -1px; }
.hm-rating small { color: var(--ember-ink); font-weight: 700; }
.hm-connector { position: relative; height: 48px; width: 20px; margin: auto; color: var(--text3); }
.hm-connector::before { content: ''; position: absolute; left: 9px; top: 0; width: 2px; height: 30px; background: repeating-linear-gradient(to bottom, var(--text3) 0 2px, transparent 2px 8px); }
.hm-connector > .ic { position: absolute; bottom: 0; }
.hm-watch-orbit { position: relative; display: grid; place-items: center; width: 150px; height: 150px; margin: 16px auto 0; border-radius: 50%; background: var(--panel); box-shadow: 0 0 0 10px color-mix(in oklab, var(--ember) 8%, transparent); }
.hm-watch-mark { width: 88px; height: 88px; color: var(--ink); }
.hm-watch-signal { position: absolute; inset: 0; border: 2px solid var(--ember); border-radius: 50%; opacity: 0; pointer-events: none; }
.hm-watch-signal.signal { animation: hm-signal 800ms ease-out both; }
@keyframes hm-signal { from { opacity: .7; transform: scale(.9); } to { opacity: 0; transform: scale(1.25); } }
.hm-watch-stage.paused * { animation-play-state: paused !important; }
.hm-watch-stage:not(.still):not(.paused) .hm-watch-card { animation: hm-card-in 320ms var(--ease-out) both; }
.hm-watch-stage:not(.still):not(.paused) .hm-noticed li:first-child { animation: hm-card-in 320ms ease-out both, hm-highlight 1920ms ease-out both; }
.hm-watch-stage:not(.still):not(.paused):is([data-phase="scanning"], [data-phase="thinking"]) .hm-connector-in::before { animation: hm-flow 800ms linear infinite; }
@keyframes hm-card-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes hm-highlight { 0%, 80% { background: var(--ember-soft); } 100% { background: transparent; } }
@keyframes hm-flow { to { background-position: 0 8px; } }
.hm-watch-status { min-height: 90px; padding-top: 16px; text-align: center; }
.hm-watch-status strong { display: block; font-size: 16px; font-weight: 600; }
.hm-watch-status span { display: block; font-size: 14px; line-height: 22px; color: var(--text2); }
.hm-watch-stage:is([data-phase="found"], [data-phase="ready"]) .hm-watch-status span { color: var(--ink); font-weight: 600; }
.hm-hour { border-radius: 999px; padding: 4px 8px; font-size: 13px; background: var(--panel); }
.hm-watch-channels { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-watch-channels .hm-pill { font-size: 13px; padding-inline: 10px; }
.hm-delivery { margin-top: 16px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; }
.hm-delivery-top { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
.hm-delivery-place { min-width: 0; overflow-wrap: anywhere; }
.hm-delivery-status { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; flex: none; white-space: nowrap; font-size: 11px; color: var(--text2); font-variant-numeric: tabular-nums; }
.hm-writing-dots { display: inline-flex; gap: 3px; }
.hm-writing-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: hm-writing 900ms ease-in-out infinite; }
.hm-writing-dots i:nth-child(2) { animation-delay: 150ms; }
.hm-writing-dots i:nth-child(3) { animation-delay: 300ms; }
.hm-watch-stage.still .hm-writing-dots i { animation: none; }
@keyframes hm-writing { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
.hm-delivery-body { position: relative; }
.hm-delivered { padding: 14px; }
.hm-delivery-sender { display: flex; justify-content: space-between; font-size: 14px; }
.hm-delivery-sender time { font-size: 12px; color: var(--text2); }
.hm-delivery-content, .hm-delivery #hm-delivery-content { display: grid; gap: 12px; }
.hm-delivery h3 { font-size: 16px; line-height: 22px; font-weight: 600; }
.hm-delivery h4, .hm-noticed h4 { font-size: 13px; }
.hm-delivery :is(ol, ul) { padding-left: 20px; margin: 0; font-size: 13px; line-height: 20px; }
.hm-delivery li + li { margin-top: 8px; }
.hm-cover { background: var(--ember-g); border-radius: 16px; padding: 12px; color: var(--ink); }
.hm-cover.square { max-width: 300px; }
.hm-cover-panel { padding: 12px; border-radius: 12px; background: var(--panel); }
.hm-cover-verdict { font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; }
.hm-cover-lines { margin-top: 8px; display: grid; gap: 4px; font-size: 10px; line-height: 1.4; }
.hm-cover-lines b { color: var(--orchid-ink); }
.hm-cover-pictures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 12px; }
.hm-cover-pictures > div { position: relative; min-width: 0; }
.hm-cover-pictures img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.hm-cover-pictures span { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; background: var(--panel); border-radius: 50%; padding: 3px; }
.hm-cover-pictures .logo, .hm-cover-pictures .ic { width: 10px; height: 10px; }
.hm-cover-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-top: 8px; font-size: 9px; color: var(--cover-ink); }
.hm-cover-footer .lockup svg { width: 36px; height: 12px; }
.hm-cover-footer b { margin-left: auto; }
.hm-cover.square .hm-cover-pictures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hm-bubble { background: var(--wash); border-radius: 16px; padding: 12px; font-size: 14px; }
.hm-noticed { padding: 12px; border-radius: 12px; background: var(--page); margin-top: 12px; }
.hm-noticed ul { list-style: none; padding: 0; min-height: 76px; margin-top: 8px; }
.hm-watch-ask { display: flex; align-items: center; margin-top: 12px; border-radius: 999px; background: var(--page); padding: 0 6px 0 12px; }
.hm-watch-ask input { width: 100%; min-width: 0; height: 44px; border: 0; background: transparent; color: var(--ink); font-size: 16px; }
.hm-watch-ask button { display: grid; place-items: center; width: 44px; height: 44px; flex: none; color: var(--orchid-ink); }
.hm-watch-result { display: flex; gap: 8px; align-items: center; padding-top: 16px; font-size: 16px; font-weight: 600; }
.hm-watch-result .ic { color: var(--jade-ink); }
.hm-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.hm-ai-panel, .hm-rolecard { border-radius: 24px; background: var(--panel); border: 1px solid var(--line); padding: 20px; }
.hm-ai-head { display: flex; align-items: center; gap: 8px; font-size: 14px; padding-bottom: 20px; }
.hm-ai-head > span { margin-left: auto; font-size: 12px; color: var(--jade-ink); }
.hm-question { padding: 12px 16px; background: var(--wash); border-radius: 16px 16px 4px 16px; font-size: 15px; margin: 16px 0 16px auto !important; width: fit-content; max-width: 90%; }
.hm-answer { font-size: 15px; line-height: 1.55; margin-top: 16px; }
.hm-answer .hm-note .ic, .hm-ai-panel .hm-note .ic { display: inline; vertical-align: middle; margin-right: 6px; }
.hm-evidence { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.hm-evidence span { display: inline-flex; align-items: center; gap: 6px; background: var(--orchid-soft); color: var(--orchid-ink); border-radius: 999px; padding: 6px 10px; font-size: 11px; }
.hm-evidence .ic { width: 14px; height: 14px; }
.hm-parts-layout { display: grid; gap: 24px; }
.hm-part-panel { max-width: 390px; width: 100%; margin: auto; border-radius: 24px; border: 6px solid var(--charcoal); background: var(--panel); overflow: hidden; }
.hm-part-panel img { display: block; width: 100%; min-height: 380px; aspect-ratio: 390 / 806; object-fit: cover; object-position: top; }
.hm-part-tabs { justify-content: center; }
.hm-part-tabs [data-part="brief"] { background: var(--s-brief); }
.hm-part-tabs [data-part="offers"] { background: var(--s-offers); }
.hm-part-tabs [data-part="ads"] { background: var(--s-ads); }
.hm-part-tabs [data-part="social"] { background: var(--s-social); }
.hm-part-tabs [data-part="news"] { background: var(--s-news); }
.hm-viewer { width: min(100%, 340px); min-height: 380px; aspect-ratio: 390 / 806; object-fit: cover; object-position: top; border-radius: 28px; border: 6px solid var(--charcoal); margin: auto; }
.hm-steps { display: grid; gap: 24px; list-style: none; padding: 0; margin: 32px 0 0; }
.hm-step { display: flex; align-items: flex-start; gap: 16px; }
.hm-step h3 { font-size: 17px; font-weight: 600; }
.hm-step p { font-size: 15px; line-height: 1.5; color: var(--text2); margin-top: 6px; }
.hm-faces { display: flex; gap: 20px; padding: 12px 6px; margin-top: 24px; overflow-x: auto; }
.hm-face { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 72px; flex: none; font-size: 12px; line-height: 18px; text-align: center; color: var(--orchid-ink); }
.hm-face-ring { position: relative; display: grid; place-items: center; width: 64px; height: 64px; padding: 4px; border: 2px solid var(--orchid); border-radius: 50%; }
.hm-face-ring > img, .hm-face-ring > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--panel); object-fit: cover; color: var(--ink); font-size: 16px; font-weight: 600; }
.hm-face-ring > b { position: absolute; bottom: -4px; right: -4px; display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 50%; background: var(--orchid); color: var(--on-marker); border: 2px solid var(--page); }
.hm-face.own { color: var(--ember-ink); }
.hm-face.own .hm-face-ring { border-color: var(--ember); }
.hm-face.own .hm-face-ring > b { background: var(--ember); }
.hm-face.quiet .hm-face-ring { opacity: .4; border-color: var(--text3); }
.hm-face.quiet { color: var(--text2); }
.hm-face small { font-size: 10px; }
.hm-ask-band { padding-bottom: 32px; }
.hm-chat { max-width: 760px; margin-top: 32px; background: var(--orchid-soft); border-radius: 24px; padding: 20px; }
.hm-ask-head { display: flex; align-items: center; gap: 10px; }
.hm-ask-head .mbmark { width: 36px; height: 36px; flex: none; background: transparent; color: var(--orchid-ink); }
.hm-ask-head > span:last-child { display: grid; font-size: 15px; }
.hm-ask-head small { font-size: 12px; color: var(--text2); }
.hm-chat .hm-question, .hm-chat .hm-answer { background: var(--panel); padding: 14px; border-radius: 16px; }
.hm-srcrow { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; margin: 32px 0 0; padding: 0; }
.hm-srcrow li { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; width: 72px; text-align: center; overflow-wrap: break-word; }
/* Each source is an icon tile and its name; app.css's .tile box belongs to the icon, never to the whole item. */
.hm-srcrow li.tile { height: auto; border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0; justify-content: flex-start; }
@media (max-width: 599px) { .hm-srcrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 8px; } .hm-srcrow li { width: auto; } }
.hm-rolecard { margin-top: 20px; max-width: 760px; font-size: 22px; line-height: 1.4; }
.hm-plans { display: grid; gap: 12px; }
.hm-plan { padding: 20px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel); }
.hm-plan.trial { margin-top: 24px; background: var(--ember-soft); }
.hm-plan-top { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 16px; }
.hm-plan p { font-size: 14px; color: var(--text2); margin-top: 12px; }
.hm-faq { margin-top: 24px; max-width: 860px; }
.hm-q { border-bottom: 1px solid var(--line); }
.hm-q summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; list-style: none; font-size: 16px; font-weight: 600; cursor: pointer; }
.hm-q summary::-webkit-details-marker { display: none; }
.hm-q[open] summary .ic { transform: rotate(180deg); }
.hm-q p { padding-bottom: 20px; color: var(--text2); font-size: 15px; }
.hm-closing { padding-top: 48px; margin-top: 64px; border-top: 1px solid var(--line); }
.hm-closing .hm-primary { margin-top: 24px; }
.hm-foot { padding-top: 24px; margin-top: 64px; border-top: 1px solid var(--line); }
.hm-foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: 16px; }
.hm-links.foot { display: flex; flex-wrap: wrap; gap: 12px 20px; font-size: 13px; }
.hm-links.foot :is(button, a) { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.hm-foot .hm-sub { max-width: 100%; font-size: 13px; }
.hm-sub-row { display: flex; gap: 8px; margin-top: 8px; }
.hm-sub-row input { width: 220px; min-width: 0; flex: 1; height: 44px; padding: 0 12px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); }
.hm-sub-row .pill-b { padding-inline: 12px; min-height: 44px; }
.hm-suberr { color: var(--alert); font-size: 12px; }
.hm-foot-note { font-size: 13px; color: var(--text2); }
/* Six doors on a phone are a strip (Design bible 6): it fades at its open end like the row of faces, and the padding lets the
   last door scroll clear of the fade. */
@media (max-width: 599px) {
  .hm-watch-channels { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-inline-end: 40px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .hm-watch-channels::-webkit-scrollbar { display: none; }
  .hm-watch-channels .hm-pill { flex: none; }
}
@media (max-width: 359px) {
  .hm-watch-media { width: 80px; height: 90px; }
  .hm-watch-media.portrait { width: 68px; }
  .hm-watch-media.wide { width: 88px; height: 50px; }
  .hm-watch-card { gap: 8px; padding: 8px; }
  .hm-watch-card-head time { flex-basis: 100%; }
  .hm-demo-bar > span { font-size: 10px; }
  .hm-cover { padding: 8px; }
}
@media (min-width: 600px) {
  .hm-watch-mark { width: 102px; height: 102px; }
  .hm-watch-stage { padding: 24px; }
  .hm-watch-tabs { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .hm-watch-tile small { display: block; }
  .hm-watch { min-height: 30px; }
}
@media (min-width: 768px) {
  .hm { padding-inline: 32px; }
  .hm-top { margin-inline: -32px; padding-inline: 32px; }
  .hm-stage { margin-inline: 0; border-radius: 32px; }
}
@media (min-width: 1024px) {
  .hm-links { display: flex; }
  .hm-nav { height: 72px; }
  .hm-nav-start { display: inline-flex; }
  .hm-menu { display: none; }
  .hm-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-top: 48px; }
  .hm-herotext h1 { font-size: clamp(44px, 4.45vw, 64px); line-height: 1.125; letter-spacing: -.04em; }
  .hm-h2 { font-size: 40px; line-height: 48px; }
  .hm-sub { font-size: 18px; line-height: 28px; }
  .hm-box { padding: 24px; }
  .hm-stage { padding: 32px 24px; }
  .hm-phone > iframe { pointer-events: auto; }
  .hm-explore { display: none; }
  .hm-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  .hm-sec { padding-top: 96px; }
  #hm-busy { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); align-items: start; gap: 48px; }
  #hm-busy > .hm-copy { position: sticky; top: 96px; }
  .hm-parts-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .hm-part-tabs { justify-content: flex-start; }
  #hm-how .hm-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .hm * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* B2 lower page. Scoped so the shipped hero and night watch keep their layout. */
.hm-lower { padding-top: 64px; min-width: 0; }
.hm-lower .hm-h2 { font-size: 36px; line-height: 1.15; font-weight: 600; text-wrap: balance; }
.hm-lower .hm-sub { font-size: 17px; color: var(--text2); }
.hm-lower-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.hm-lower-split > * { min-width: 0; }
.hm-ask-choices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hm-ask-choices .hm-pill { text-align: left; justify-content: flex-start; white-space: normal; }
.hm-ask-choices [aria-pressed="true"] { background: var(--orchid-soft); color: var(--orchid-ink); box-shadow: inset 0 0 0 2px var(--orchid-ink); }
.hm-lower .hm-chat, .hm-lower .hm-ai-panel { width: 100%; max-width: none; margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: 24px; background: var(--panel); }
.hm-lower .hm-ask-head { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.hm-lower .hm-ask-head small { font-size: 13px; margin-top: 4px; }
.hm-lower .hm-question { background: var(--wash); border-radius: 16px 16px 4px 16px; padding: 14px; font-size: 16px; line-height: 1.55; }
.hm-lower .hm-answer { padding: 0; background: transparent; font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
.hm-sources { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hm-source { display: inline-flex; align-items: flex-start; gap: 6px; max-width: 100%; border-radius: 16px; padding: 6px 10px; background: var(--orchid-soft); color: var(--orchid-ink); font-size: 13px; line-height: 20px; }
.hm-source > span[role="img"] { display: inline-flex; flex: none; }
.hm-lower .hm-source .brandtile { width: 16px; height: 16px; min-width: 16px; border-radius: 4px; flex: none; margin-top: 2px; }
.hm-lower .hm-source .brandtile :is(.ic, .logo) { width: 11px; height: 11px; }
.hm-lower .hm-source .logotile { background: #fff !important; }
.hm-ask-input { display: flex; align-items: center; gap: 8px; padding: 8px; margin-top: 24px; border: 1px solid var(--line); border-radius: 24px; background: var(--page); }
.hm-ask-input input { width: 100%; min-width: 0; height: 44px; padding: 0 6px; border: 0; background: transparent; color: var(--ink); font-size: 16px; }
.hm-ask-input input::placeholder { color: var(--text2); }
.hm-ask-input button { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--orchid-soft); color: var(--orchid-ink); }
.hm-lower .hm-tabs { margin: 0 0 16px; gap: 8px; }
.hm-lower .hm-tabs .hm-pill { padding: 8px 10px; flex: 1 1 auto; }
.hm-lower .hm-tabs .brandtile { width: 24px; height: 24px; border-radius: 6px; }
.hm-lower .hm-tabs .logo { width: 16px; height: 16px; }
.hm-lower .hm-ai-head { flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--line); font-size: 16px; }
.hm-lower .hm-ai-head > .brandtile { width: 32px; height: 32px; margin: 0; flex: none; color: #fff; border-radius: 8px; }
.hm-ai-status { display: grid; gap: 2px; margin-left: auto; font-size: 13px; color: var(--jade-ink); }
.hm-ai-status small { font-size: 13px; color: var(--text2); }
.hm-tool { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text2); }
.hm-features { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 32px; }
.hm-feature { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--panel); }
.hm-feature > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; background: var(--panel); }
.hm-feature > img[data-crop="faces"] { object-position: center 6%; }
.hm-feature > img[data-crop="viewer"] { object-position: bottom; }
.hm-feature > div { padding: 24px; }
.hm-feature h3 { font-size: 20px; line-height: 1.3; font-weight: 600; }
.hm-feature p { margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--text2); }
.hm-lower .hm-stepn { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--orchid-soft); color: var(--orchid-ink); font-size: 16px; font-weight: 600; }
#hm-how .hm-step { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--line); border-radius: 24px; background: var(--panel); }
#hm-how .hm-primary { margin-top: 32px; }
@media (min-width: 1024px) {
  .hm-lower { padding-top: 96px; }
  .hm-lower .hm-h2 { font-size: 48px; }
  .hm-lower .hm-sub { font-size: 18px; }
  .hm-lower-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
  .hm-lower .hm-chat, .hm-lower .hm-ai-panel { padding: 28px; }
  .hm-features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- the guided stages ---------- */
.gd { display: flex; flex-direction: column; gap: 16px; padding-top: 10px; }
.gd-head { display: flex; align-items: center; gap: 10px; }
.gd-head .circle { background: var(--panel); border: 1px solid var(--rule); }
.gd-head .gd-lk { display: inline-flex; } .gd-head .lockup { height: 18px; } .gd-head .gd-stage { margin-left: auto; }
.gd-sentence { padding: 4px 2px 0; }
.gd-sent { margin: 0; font-size: 15px; line-height: 2.1; color: var(--ink); }
.gd-chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 8px; vertical-align: middle; font-size: 14px; line-height: 1; white-space: nowrap; font-family: var(--font-ui); }
.gd-chip.on { background: var(--wash); color: var(--violet); font-weight: 600; }
.gd-chip.off { background: var(--panel); border: 1px solid var(--rule); color: var(--text3); font-weight: 400; }
button.gd-chip { cursor: pointer; } button.gd-chip.off:hover, button.gd-chip.off:focus-visible { border-color: var(--ink); color: var(--ink); }
button.gd-chip.on:hover { background: var(--rule); }
.gd-chip .gd-tile { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; background: var(--panel); border: 1px solid var(--rule); color: var(--ink); flex-shrink: 0; }
.gd-chip .gd-tile .ic { width: 11px; height: 11px; }
.gd-rule { border: 0; height: 1px; background: var(--rule); margin: 0; width: 100%; }
.gd-title { font-size: 22px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.gd-lead { font-size: 14px; color: var(--text2); line-height: 1.6; margin: 0; }
.gd-ind { display: inline-flex; align-items: center; position: relative; vertical-align: middle; }
.gd-ind select { appearance: none; -webkit-appearance: none; border: 1px solid var(--rule); background: var(--panel); border-radius: 8px; height: 30px; padding: 0 24px 0 9px; font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); cursor: pointer; }
.gd-ind .ic { position: absolute; right: 7px; pointer-events: none; color: var(--text3); }
/* the proposals being collected: skeleton rows, then the rows land */
.gd-skel { display: flex; align-items: center; gap: 12px; padding-block: 10px; }
.gd-skel-pic { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; }
.gd-skel-tx { flex: 1; display: flex; flex-direction: column; gap: 7px; } .gd-skel-tx i { display: block; height: 11px; border-radius: 6px; }
.gd-skel-pic, .gd-skel-tx i { background: linear-gradient(90deg, var(--wash) 0%, var(--rule) 50%, var(--wash) 100%); background-size: 200% 100%; animation: gd-shimmer 1.2s linear infinite; }
@keyframes gd-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
#gd-looking .typing { padding: 0 2px; }
.gd-land { animation: gd-land 380ms var(--ease-out) both; }
@keyframes gd-land { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gd-skel-pic, .gd-skel-tx i, .gd-land { animation: none; } }
.gd-ini { display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #202123; border-radius: 12px; }
.gd-group { display: flex; flex-direction: column; gap: 10px; }
.gd-cap { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text3); margin: 0; padding: 0 4px; }
.gd-more { border: 1px solid var(--rule); border-radius: 14px; background: var(--panel); padding: 0 14px; }
.gd-more summary { padding: 12px 0; font-size: 14px; font-weight: 500; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gd-more summary::-webkit-details-marker { display: none; }
.gd-more summary .ic { color: var(--text2); transition: transform 200ms var(--ease-out); } .gd-more[open] summary .ic { transform: rotate(180deg); }
.gd-more > .stack { padding-bottom: 14px; }
.gd-ask { display: flex; flex-direction: column; gap: 10px; padding: 8px 0 14px; }
.gd-q { align-self: flex-end; max-width: 85%; background: var(--marker); color: var(--on-marker); border-radius: 16px 16px 4px 16px; padding: 10px 14px; font-size: 14px; }
.gd-a { display: flex; gap: 10px; align-items: flex-start; } .gd-a > div { display: flex; flex-direction: column; gap: 6px; background: var(--wash); border-radius: 4px 16px 16px 16px; padding: 10px 14px; }
.gd-a p { margin: 0; font-size: 14px; line-height: 1.45; }

/* the sample brief */
.sp { display: flex; flex-direction: column; gap: 18px; }
.sp-note { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; color: var(--text2); line-height: 1.45; }
.sp-nut { display: flex; flex-direction: column; gap: 12px; }
.sp-verdict { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.32; letter-spacing: -0.01em; margin: 0; }
.sp-counts { display: flex; gap: 18px; flex-wrap: wrap; }
.sp-count { display: flex; flex-direction: column; } .sp-count b { font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1.1; } .sp-count span { font-size: 11.5px; color: var(--text2); }
.sp-moves { display: flex; flex-direction: column; gap: 8px; }
.sp-move { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; font-weight: 500; line-height: 1.45; }
.sp-why { font-size: 13px; color: var(--text2); line-height: 1.45; margin: 0; }
.sp-things { display: flex; flex-direction: column; gap: 10px; }
.sp-thing { display: flex; gap: 14px; background: var(--panel); border-radius: 16px; padding: 14px; box-shadow: var(--shadow); align-items: flex-start; }
.sp-thing .pic { width: 72px; height: 90px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.sp-thing .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sp-thing .n { font-family: var(--font-mono); font-size: 11px; color: var(--text3); letter-spacing: 0.06em; text-transform: uppercase; }
.sp-thing h3 { font-family: var(--font-display); font-weight: 500; font-size: 18px; line-height: 1.3; margin: 0; letter-spacing: -0.005em; }
.sp-thing p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text2); }
.sp-thing .mv { color: var(--ink); font-weight: 500; display: flex; gap: 6px; align-items: flex-start; } .sp-thing .mv .ic { margin-top: 2px; flex-shrink: 0; }
.sp-folder { display: flex; flex-direction: column; gap: 12px; }
.sp-body { display: flex; flex-direction: column; gap: 12px; }
.sp-row { display: flex; gap: 12px; align-items: flex-start; } .sp-row.page { align-items: center; }
.sp-row .pic { width: 56px; height: 70px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.sp-row .tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; } .sp-row .t1 { font-size: 14px; font-weight: 600; } .sp-row .t2, .sp-stories .t2, .sp-ad .t2 { font-size: 12.5px; color: var(--text2); line-height: 1.4; }
.sp-who { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; } .sp-who i { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.sp-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sp-stories { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sp-line { margin: 0; font-size: 13.5px; line-height: 1.45; }
.sp-says { background: var(--page); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.sp-ads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sp-ad { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sp-ad .pic { width: 100%; aspect-ratio: 1; border-radius: 12px; object-fit: cover; }
.sp-ad .ktile.big { width: 100%; aspect-ratio: 1; height: auto; border-radius: 12px; }
.sp-foot { font-size: 12px; color: var(--text3); line-height: 1.45; margin: 0; }
@media (max-width: 480px) { .sp-ads { grid-template-columns: 1fr 1fr; } .masthead h2 { font-size: 28px; } .sp-verdict { font-size: 19px; } }

/* The six shapes Tellz is made for (KB 29 section 3c), under the roles headline. */

/* Shared register backgrounds retained for guided screens. */
.g-dawn { background: var(--dawn); }
.g-coral { background: var(--coral-aurora); }
.g-mist { background: var(--mist-aurora); }

/* Restoration compatibility: retain the shared action and current phone field minimum. */
.hm .hm-nav-start.ti-primary { display: none; }
.hm .hm-box-foot .hm-primary { margin-left: auto; }
.hm input { font-size: max(16px, 1em); }
@media (min-width: 900px) { .hm .hm-nav-start.ti-primary { display: inline-flex; } }