/* ==========================================================================
   markXpand — How It Works (/HowItWorks)

   Layered on top of landing-page.css (tokens, nav, footer) and product-page.css
   (.pr-page shell, display type, buttons, FAQ accordion, closing band). Nothing
   in here touches a selector either of those owns.

   Built on the V-Retail /conversational-analytics-ai layout: a centred hero
   whose key phrase sits in a solid highlight block, then a run of sections that
   each pair a poster-sized two-tone heading with ONE large rounded stage card
   holding a product mock. Their stage cards hold looping videos; ours holds a
   mock you can actually press, which is the whole point of the page.

   Two rules this file lives by:
     1. No animation carries meaning on its own. Every state the demo enters is
        also a class or an attribute, so a reduced-motion visitor sees the same
        end state without the travel.
     2. The demo degrades to a document. Screens are hidden with [hidden], never
        with opacity or transforms, so with JS off all eight stack and read.
   ========================================================================== */


/* Every screen, panel and row this page toggles carries an author `display`
   rule, and an author rule beats the UA stylesheet's `[hidden]{display:none}`
   every time. One sweep here rather than a `[hidden]` twin beside each of the
   fourteen rules that would otherwise need one. */
.hw-page [hidden] { display: none !important; }


/* ==========================================================================
   0. LOCAL TOKENS
   ========================================================================== */
.hw-page {
    --hw-ease: cubic-bezier(.16, 1, .3, 1);

    /* the mocked app's own palette — deliberately NOT the marketing page's */
    --hw-navy: #10203a;
    --hw-navy-2: #1a3252;
    --hw-app-bg: #f3f8fc;
    --hw-line: #e4edf5;
    --hw-line-2: #eef4f9;
    --hw-ink: #16283e;
    --hw-mut: #667b91;
    --hw-ok: #16a34a;
    --hw-warn: #d97706;

    /* The "press this" colour. Deliberately the one hue neither the marketing
       page nor the mocked app uses anywhere else: a blue ring on a blue button
       was invisible, which is exactly why nobody was pressing anything. */
    --hw-cue: #f59e0b;
    --hw-cue-ink: #7c3d02;
    --hw-cue-soft: rgba(245, 158, 11, .22);

    --hw-r: 12px;
    --hw-r-sm: 8px;

    /* the stage card the reference puts every demo inside */
    --hw-stage-bd: #e2ecf4;
    --hw-stage-sh: 0 2px 6px rgba(15, 31, 51, .04), 0 30px 70px -30px rgba(15, 31, 51, .18);
}

/* The reference floats soft off-axis blooms behind everything. Two, fixed, so
   they do not tile as the page scrolls. */
.hw-page::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(38% 34% at 88% 8%, rgba(67, 163, 221, .13), rgba(67, 163, 221, 0) 70%),
        radial-gradient(34% 30% at 6% 62%, rgba(67, 163, 221, .10), rgba(67, 163, 221, 0) 70%);
}


/* ==========================================================================
   1. HERO
   ========================================================================== */
.hw-hero { position: relative; isolation: isolate; }

/* Concentric rings behind the headline, straight off the reference's hero.
   Painted with repeating radial stops so it costs one element. */
.hw-rings {
    position: absolute;
    inset-inline-start: 50%;
    top: clamp(120px, 18vw, 250px);
    width: min(1180px, 130vw);
    aspect-ratio: 1;
    translate: -50% 0;
    z-index: -1;
    pointer-events: none;
    /* AUDIT 04: white, at a lower alpha — these were brand-blue hairlines drawn
       for the old white hero and were invisible once the ground went dark. */
    opacity: .55;
    background: repeating-radial-gradient(circle at 50% 50%,
        rgba(255, 255, 255, .16) 0 1px,
        rgba(255, 255, 255, 0) 1px 74px);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 26%, transparent 71%);
    mask-image: radial-gradient(circle at 50% 50%, #000 26%, transparent 71%);
}

/* AUDIT 04: on .pr-display's scale like every other hero on the site — this ran
   to 5.4rem where the rest cap at 3.5rem, which is most of why the page felt
   like a different property even before the ground changed. Only the margin and
   the two-line break survive here. */
.hw-hero-h1 { margin: 6px 0 24px; }

.hw-hero-l1 { display: block; }

/* AUDIT 04/07: was .hw-mark — the reference's key phrase set in a solid
   gradient block, a device nothing else on the site used, and the last home of
   the off-palette #5578c9. The hero is the shared blue band now, where a blue
   slab would read as nothing anyway, so the phrase is simply the accent every
   other headline on the site uses (.pr-grad, inverted on the band). */
.hw-hero-l2 { display: block; }

.hw-hero-lede { max-width: 66ch; margin-inline: auto; }

.hw-hero .pr-actions { justify-content: center; }

/* Four claims the demo below actually demonstrates — a contents list wearing
   the reference's floating-chip costume. */
.hw-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: clamp(38px, 5vw, 62px) 0 0;
    padding: 0;
    list-style: none;
}

.hw-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px 11px 12px;
    /* AUDIT 04: on the blue band now — a white hairline over a translucent
       white fill, the same on-dark chip language the landing page's hero uses,
       instead of the solid white glass these were on the old light hero. */
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-family: var(--font-b);
    font-size: .84rem;
    font-weight: 600;
    color: #fff;
}

.hw-chip i {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: #fff;
    font-size: .68rem;
}


/* ==========================================================================
   2. THE DEMO SECTION — head + stage card
   ========================================================================== */
.hw-demo { padding: var(--space-section) 0; }

.hw-demo-h { margin: 0 0 18px; }
/* AUDIT 02: margin-inline auto so the lede centres with the head above it. */
.hw-demo-lede { max-width: 74ch; margin: 0 auto clamp(30px, 4vw, 48px); }

/* The reference's stage: one big rounded card, hairline border, very soft
   shadow, generous padding, everything else lives inside it. */
.hw-rig {
    border: 1px solid var(--hw-stage-bd);
    /* AUDIT 05: on landing-page.css's radius scale, was clamp(20px,2.2vw,30px).
       The frame INSIDE this card keeps its own radii — that is the mocked app,
       a deliberately separate visual world. */
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: var(--hw-stage-sh);
    padding: clamp(16px, 2vw, 30px);
}

.hw-stage {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: clamp(18px, 2.2vw, 34px);
    align-items: start;
}


/* ==========================================================================
   3. THE PIPELINE RAIL
   The reference runs a dotted line with nodes between its cards. Turned
   vertical it is the step tracker: the spine is one element, the travelled
   part is a second one scaled from JS.
   ========================================================================== */
.hw-rail { position: relative; padding: 6px 0; }

.hw-rail-line {
    position: absolute;
    inset-block: 26px;
    inset-inline-start: 17px;
    width: 2px;
    border-radius: 2px;
    background: repeating-linear-gradient(180deg,
        rgba(67, 163, 221, .34) 0 5px, transparent 5px 10px);
}

/* Scaled rather than grown: --p (0→1) is the only thing JS writes, so the
   travelled length is a compositor transform instead of a per-frame layout. */
.hw-rail-fill {
    position: absolute;
    inset: 0;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
    transform: scaleY(var(--p, 0));
    transform-origin: top center;
    transition: transform .55s var(--hw-ease);
}

.hw-rail-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }

.hw-rail-btn {
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 10px 9px 0;
    border: 0;
    border-radius: var(--hw-r);
    background: transparent;
    text-align: start;
    cursor: pointer;
    transition: background .2s var(--hw-ease);
}

.hw-rail-btn:hover { background: rgba(67, 163, 221, .07); }
.hw-rail-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.hw-rail-node {
    position: relative;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 2px solid var(--hw-line);
    border-radius: 50%;
    background: #fff;
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 700;
    color: var(--hw-mut);
    transition: border-color .3s var(--hw-ease), background .3s var(--hw-ease), color .3s var(--hw-ease);
}

.hw-rail-node i { position: absolute; font-size: .72rem; opacity: 0; transition: opacity .2s; }
.hw-rail-no { transition: opacity .2s; }

.hw-rail-txt { display: grid; gap: 1px; min-width: 0; }

.hw-rail-txt b {
    font-family: var(--font-h);
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--hw-mut);
    transition: color .25s var(--hw-ease);
}

.hw-rail-txt em {
    font-family: var(--font-b);
    font-size: .72rem;
    font-style: normal;
    line-height: 1.35;
    color: var(--text-muted);
    opacity: .82;
}

/* ---- states ---- */
.hw-rail-item.is-done .hw-rail-node {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
}
.hw-rail-item.is-done .hw-rail-node i  { opacity: 1; }
.hw-rail-item.is-done .hw-rail-no      { opacity: 0; }
.hw-rail-item.is-done .hw-rail-txt b   { color: var(--text-body); }

.hw-rail-item.is-on .hw-rail-node {
    border-color: var(--brand);
    background: #fff;
    color: var(--brand-dark);
    box-shadow: 0 0 0 5px rgba(67, 163, 221, .14);
}
.hw-rail-item.is-on .hw-rail-txt b { color: var(--brand-dark); }
.hw-rail-item.is-on .hw-rail-btn   { background: rgba(67, 163, 221, .07); }


/* ==========================================================================
   4. THE FRAME — browser chrome, then the mocked app inside it
   ========================================================================== */
.hw-frame {
    position: relative;
    border: 1px solid var(--hw-stage-bd);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 31, 51, .05), 0 22px 50px -24px rgba(15, 31, 51, .22);
    overflow: hidden;
}

.hw-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--hw-line);
    background: linear-gradient(180deg, #fbfdff 0%, #f2f7fb 100%);
}

.hw-bar-dots { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.hw-bar-dots i { width: 9px; height: 9px; border-radius: 50%; background: #dbe5ee; }
.hw-bar-dots i:first-child { background: #f2b8b5; }
.hw-bar-dots i:nth-child(2) { background: #f7d99a; }
.hw-bar-dots i:last-child   { background: #b9e3c0; }

.hw-bar-url {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 430px;
    margin-inline: auto;
    padding: 5px 14px;
    border: 1px solid var(--hw-line);
    border-radius: var(--radius-pill);
    background: #fff;
    font-family: var(--font-mono);
    font-size: .66rem;
    color: var(--hw-mut);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hw-bar-url i { font-size: .58rem; color: var(--hw-ok); flex: 0 0 auto; }

.hw-bar-tag {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: rgba(217, 119, 6, .12);
    color: #a35c05;
    font-family: var(--font-mono);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ---- the app ---- */
/* grid-template-rows is the other half of the min-height:0 story below: with an
   auto row a tall screen sizes the row past the container's fixed height and
   overflows it, footer first. minmax(0,1fr) pins the row to the frame. */
.hw-app {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    min-height: 560px;
    background: var(--hw-app-bg);
    font-family: var(--font-b);
    font-size: 13px;
    line-height: 1.55;
    color: var(--hw-ink);
}

.hw-side {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 12px 0 16px;
    background: linear-gradient(180deg, var(--hw-navy) 0%, var(--hw-navy-2) 100%);
}

.hw-side-logo {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(140deg, var(--brand) 0%, var(--brand-dark) 100%);
    font-family: var(--font-h);
    font-size: .8em;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.03em;
}
.hw-side-logo b { font-weight: 800; }

.hw-side-nav { display: grid; gap: 6px; width: 100%; justify-items: center; }

.hw-side-nav i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 32px;
    border-radius: 9px;
    color: rgba(255, 255, 255, .42);
    font-size: .84em;
    transition: background .25s var(--hw-ease), color .25s var(--hw-ease);
}

.hw-side-nav i.is-on {
    background: rgba(67, 163, 221, .22);
    color: #fff;
    box-shadow: inset 2px 0 0 var(--brand-light);
}

.hw-side-me {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-top: auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: .66em;
    font-weight: 700;
    letter-spacing: .02em;
}

/* The screens are measured against THIS box, not the viewport — the frame is
   never as wide as the page, so a viewport media query would restack it far
   too late. The container is .hw-main rather than .hw-view because the type
   scale is one of the things that has to change, and an element cannot be
   restyled by a query on itself. */
.hw-main {
    container-type: inline-size;
    container-name: hwmain;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* min-height:0 on both is what lets .hw-scr take the overflow. Without it a
   tall screen (research, content, results) grows past the frame's fixed height
   and its own action row is clipped by the frame's overflow:hidden. */
.hw-view {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    font-size: 13px;
}

.hw-screen { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0; }

/* Entry is opacity + a short lift, and only for the screen JS just switched to.
   Nothing depends on it finishing. */
.hw-screen.is-in { animation: hwIn .42s var(--hw-ease) both; }

@keyframes hwIn {
    from { opacity: 0; translate: 0 8px; }
    to   { opacity: 1; translate: 0 0; }
}


/* ==========================================================================
   5. SCREEN FURNITURE — shared by all eight
   ========================================================================== */

/* ---- the annotation ----
   Deliberately NOT styled as part of the app. It is the demo talking over the
   product, so it gets the marketing page's blue tint and a dashed edge, sits
   above the app's own header bar, and stays put with JS off. */
.hw-say {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 11px 16px;
    border-bottom: 1px dashed rgba(67, 163, 221, .38);
    background: linear-gradient(180deg, rgba(67, 163, 221, .11) 0%, rgba(67, 163, 221, .05) 100%);
    font-size: .8em;
    line-height: 1.5;
    color: var(--text-body);
}

.hw-say-no {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: #fff;
    font-family: var(--font-mono);
    font-size: .66em;
    font-weight: 700;
}

.hw-say-t b { font-family: var(--font-h); font-weight: 700; color: var(--ink); }

.hw-say-cue {
    flex: 0 0 auto;
    padding: 5px 12px;
    border: 1px solid var(--hw-cue);
    border-radius: var(--radius-pill);
    background: var(--hw-cue-soft);
    font-size: .88em;
    font-weight: 600;
    white-space: nowrap;
    color: var(--hw-cue-ink);
}
.hw-say-cue b { font-weight: 800; }

/* ---- the app's own header strip ---- */
.hw-top {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--hw-line);
    background: #fff;
}

.hw-top > b {
    font-family: var(--font-h);
    font-size: 1.05em;
    font-weight: 700;
    color: var(--ink);
}

.hw-top-crumb {
    margin-inline-start: auto;
    font-family: var(--font-mono);
    font-size: .68em;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hw-mut);
}

.hw-pips { display: inline-flex; gap: 5px; }
.hw-pips i { width: 18px; height: 4px; border-radius: 2px; background: var(--hw-line); }
.hw-pips i.is-done { background: var(--brand-light); }
.hw-pips i.is-on   { background: var(--brand-dark); width: 26px; }

.hw-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 11px;
    border-radius: var(--radius-pill);
    background: rgba(22, 163, 74, .1);
    color: #157f3c;
    font-size: .74em;
    font-weight: 600;
}
.hw-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--hw-ok); animation: hwBlink 2s infinite; }
@keyframes hwBlink { 0%, 100% { opacity: 1 } 50% { opacity: .32 } }

/* ---- the screen body ---- */
.hw-scr {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 16px 18px;
    scrollbar-width: thin;
    scrollbar-color: #cfdce8 transparent;
}

.hw-scr::-webkit-scrollbar       { width: 8px; }
.hw-scr::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 8px; background: #cfdce8; background-clip: content-box; }
.hw-scr::-webkit-scrollbar-track { background: transparent; }

.hw-scr--center { align-content: center; justify-items: center; }

.hw-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.hw-grid-c { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 14px; align-items: start; }
.hw-gap    { gap: 14px; }

.hw-h3 { font-family: var(--font-h); font-size: 1.15em; font-weight: 700; color: var(--ink); margin: 2px 0 4px; }

/* ---- the action row pinned under every screen ---- */
.hw-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
    padding: 12px 18px;
    border-top: 1px solid var(--hw-line);
    background: #fff;
}
.hw-foot .hw-btn--ghost { margin-inline-end: auto; }

/* ---- cards ---- */
.hw-card {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--hw-line);
    border-radius: var(--hw-r);
    background: #fff;
}

.hw-card--accent { border-inline-start: 3px solid var(--brand); }

.hw-card-h {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--hw-line-2);
}

.hw-card-h > b {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-h);
    font-size: .95em;
    font-weight: 700;
    color: var(--ink);
}
.hw-card-h > b i { color: var(--brand-dark); font-size: .9em; }
/* Push from the TITLE, not onto the last child — on a header that carries only
   a title the last child IS the title, and it ended up flush right. */
.hw-card-h > b:first-child { margin-inline-end: auto; }

.hw-count {
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    background: rgba(67, 163, 221, .12);
    color: var(--brand-dark);
    font-family: var(--font-mono);
    font-size: .68em;
    font-weight: 700;
}

.hw-p { margin: 0; font-size: .92em; line-height: 1.62; color: var(--text-body); }

.hw-fineprint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: .76em;
    line-height: 1.55;
    color: var(--hw-mut);
}
.hw-fineprint i { margin-top: .28em; color: var(--brand); flex: 0 0 auto; }

.hw-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }

.hw-tag {
    padding: 3px 10px;
    border: 1px solid var(--hw-line);
    border-radius: var(--radius-pill);
    background: #f7fafd;
    font-size: .74em;
    font-weight: 600;
    color: var(--text-body);
}
.hw-tag--g { border-color: rgba(22, 163, 74, .3); background: rgba(22, 163, 74, .09); color: #157f3c; }

.hw-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: #f0f4f8;
    color: var(--hw-mut);
    font-size: .72em;
    font-weight: 600;
}
.hw-badge--ai { background: rgba(67, 163, 221, .12); color: var(--brand-dark); }
.hw-badge--ok { background: rgba(22, 163, 74, .1); color: #157f3c; }

.hw-flag {
    margin-inline-start: 8px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: rgba(217, 119, 6, .12);
    color: #a35c05;
    font-size: .78em;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.hw-icobtn {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--hw-line);
    border-radius: var(--hw-r-sm);
    background: #fff;
    color: var(--brand-dark);
    font-size: .8em;
}

/* the blue banner the real platform screens open on */
.hw-hd {
    display: grid;
    gap: 3px;
    padding: 13px 16px;
    border-radius: var(--hw-r);
    background: linear-gradient(115deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: #fff;
}
.hw-hd b  { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-h); font-size: 1.05em; font-weight: 700; }
.hw-hd em { font-style: normal; font-size: .84em; opacity: .9; }

/* ---- buttons ---- */
.hw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: var(--hw-r-sm);
    font-family: var(--font-b);
    font-size: .86em;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s var(--hw-ease), border-color .2s var(--hw-ease),
                color .2s var(--hw-ease), box-shadow .2s var(--hw-ease), transform .15s var(--hw-ease);
}

.hw-btn--primary {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(46, 123, 168, .22);
}
.hw-btn--primary:hover { box-shadow: 0 6px 16px rgba(46, 123, 168, .3); transform: translateY(-1px); }

.hw-btn--ghost {
    border-color: var(--hw-line);
    background: #fff;
    color: var(--text-body);
}
.hw-btn--ghost:hover { border-color: var(--brand); color: var(--brand-dark); }

.hw-btn--sm   { padding: 6px 12px; font-size: .78em; }
.hw-btn--wide { width: 100%; }

.hw-btn:disabled { opacity: .42; cursor: not-allowed; transform: none; box-shadow: none; }
.hw-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }


/* ==========================================================================
   6. THE CUE — what to press next
   Two signals, because one is never enough: a ring on the target and a pointer
   that travels to it. Both are decoration over a real, focusable button.
   ========================================================================== */
.hw-cue-on { position: relative; z-index: 3; }

/* The halo. This is the moving half of the signal — it travels outward and
   fades, which is what peripheral vision actually catches. */
.hw-cue-on::before {
    content: '';
    position: absolute;
    inset: -6px;
    border: 2px solid var(--hw-cue);
    border-radius: 14px;
    pointer-events: none;
    animation: hwRing 1.9s var(--hw-ease) infinite;
}

/* The ring. This is the half that NEVER fades: the old cue was one ring that
   spent 30% of every cycle at opacity 0, so at any given glance there was a
   fair chance the page was showing no affordance at all. */
.hw-cue-on::after {
    content: '';
    position: absolute;
    inset: -6px;
    border: 2px solid var(--hw-cue);
    border-radius: 14px;
    box-shadow: 0 0 0 4px var(--hw-cue-soft);
    pointer-events: none;
}

@keyframes hwRing {
    0%       { opacity: .9; scale: 1; }
    70%      { opacity: 0;  scale: 1.09; }
    100%     { opacity: 0;  scale: 1.09; }
}

/* Nothing pressed for a while: widen the glow and rock the ring, because a
   visitor who has not pressed by now is reading the frame as a screenshot. */
.hw-cue-on.is-urgent::after {
    box-shadow: 0 0 0 6px var(--hw-cue-soft), 0 0 26px 2px rgba(245, 158, 11, .5);
    animation: hwCueRock 1.1s var(--hw-ease) infinite;
}

@keyframes hwCueRock {
    0%, 100% { rotate: 0deg; }
    25%      { rotate: -.7deg; }
    75%      { rotate: .7deg; }
}


/* ---- the pin: the words "your turn", parked ON the thing to press --------
   The heading forty lines up already says "press the buttons", but the frame
   is tall enough that the heading has scrolled away by the time the button is
   on screen. So the instruction travels with the target instead of living at
   the top of the section. --px/--py are the target's centre and edge in frame
   coordinates; the percentage halves of the translate are the pin's own size,
   so it self-centres at any label length. Three placements, picked by whichever
   side has the room: beside the target first (it covers nothing), then above,
   then below. */
.hw-pin {
    position: absolute;
    left: 0;   /* physical, for the reason given on .hw-cursor above */
    top: 0;
    z-index: 8;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: var(--radius-pill);
    background: var(--hw-cue);
    color: var(--hw-cue-ink);
    font-family: var(--font-h);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    box-shadow: 0 10px 22px -10px rgba(15, 31, 51, .55);
    translate: calc(var(--px, 0px) - 50%) calc(var(--py, 0px) - 100% - 12px);
    transition: translate .6s var(--hw-ease), opacity .3s var(--hw-ease);
}

.hw-pin.is-on    { opacity: 1; }
.hw-pin.is-below { translate: calc(var(--px, 0px) - 50%) calc(var(--py, 0px) + 12px); }
.hw-pin.is-right { translate: calc(var(--px, 0px) + 12px)  calc(var(--py, 0px) - 50%); }
.hw-pin.is-left  { translate: calc(var(--px, 0px) - 100% - 12px) calc(var(--py, 0px) - 50%); }

/* the tail, so the pin points rather than floats. Physical sides throughout,
   to stay with the physical anchor above. */
.hw-pin::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -3px;
    width: 10px;
    height: 10px;
    background: var(--hw-cue);
    border-radius: 2px;
    translate: -50% 0;
    rotate: 45deg;
}
.hw-pin.is-below::after { bottom: auto; top: -3px; }
.hw-pin.is-right::after {
    left: -3px;
    bottom: auto;
    top: 50%;
    translate: 0 -50%;
}
.hw-pin.is-left::after {
    left: auto;
    right: -3px;
    bottom: auto;
    top: 50%;
    translate: 0 -50%;
}

/* translate is spoken for by the positioning above, so the bob rides on the
   icon rather than the pin */
.hw-pin i { animation: hwPinBob 1.6s var(--hw-ease) infinite; }
.hw-pin.is-urgent i { animation-duration: .8s; }

@keyframes hwPinBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(2.5px); }
}

.hw-cursor {
    position: absolute;
    /* left, not inset-inline-start: --x/--y are measured as physical offsets
       from the frame's left edge, and translate's X axis is physical too. Under
       dir=rtl the logical anchor put the pointer a frame-width off to the side. */
    left: 0;
    top: 0;
    z-index: 6;
    pointer-events: none;
    opacity: 0;
    translate: var(--x, 50%) var(--y, 50%);
    transition: translate .85s var(--hw-ease), opacity .35s var(--hw-ease);
    filter: drop-shadow(0 3px 6px rgba(15, 31, 51, .35));
}
.hw-cursor.is-on { opacity: 1; }
.hw-cursor svg   { display: block; }
.hw-cursor path  { fill: #fff; stroke: var(--hw-navy); stroke-width: 1.6; stroke-linejoin: round; }

/* the tap ripple under the pointer — a pointer that never taps reads as a
   sticker on a screenshot */
.hw-cursor::before {
    content: '';
    position: absolute;
    left: -9px;
    top: -9px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--hw-cue);
    opacity: 0;
}
.hw-cursor.is-on::before { animation: hwTap 1.9s var(--hw-ease) infinite; }

@keyframes hwTap {
    0%       { opacity: .85; scale: .35; }
    60%, 100%{ opacity: 0;   scale: 1.25; }
}


/* ==========================================================================
   7. SCREEN 01 — connect
   ========================================================================== */
.hw-connect {
    display: grid;
    justify-items: center;
    gap: 12px;
    width: min(430px, 100%);
    padding: 26px 24px 22px;
    border: 1px solid var(--hw-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 40px -26px rgba(15, 31, 51, .3);
    text-align: center;
}

.hw-connect-ic {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(140deg, rgba(67, 163, 221, .16) 0%, rgba(46, 123, 168, .18) 100%);
    color: var(--brand-dark);
    font-size: 1.15em;
}

.hw-connect h3 { margin: 0; font-family: var(--font-h); font-size: 1.25em; font-weight: 700; color: var(--ink); }
.hw-connect > p { margin: 0; font-size: .88em; line-height: 1.6; color: var(--text-body); }

.hw-field {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--hw-line);
    border-radius: var(--hw-r);
    background: #fbfdff;
    text-align: start;
    transition: border-color .3s var(--hw-ease), box-shadow .3s var(--hw-ease);
}
.hw-field.is-focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(67, 163, 221, .13); background: #fff; }
.hw-field > i { color: var(--hw-mut); font-size: .9em; }

.hw-field-v { font-family: var(--font-mono); font-size: .92em; color: var(--ink); }
.hw-field-v:empty::before { content: attr(data-placeholder); color: #a9b6c4; }

.hw-caret {
    width: 1.5px;
    height: 1.05em;
    margin-inline-start: -6px;
    background: var(--brand-dark);
    opacity: 0;
}
.hw-field.is-focus .hw-caret { opacity: 1; animation: hwCaret 1.05s steps(1) infinite; }
@keyframes hwCaret { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }

.hw-checks { display: grid; gap: 7px; width: 100%; margin: 2px 0 0; padding: 0; list-style: none; text-align: start; }

.hw-checks li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .82em;
    color: var(--hw-mut);
    opacity: .45;
    transition: opacity .3s var(--hw-ease), color .3s var(--hw-ease);
}
.hw-checks li i { width: 14px; text-align: center; font-size: .85em; }
.hw-checks li.is-run { opacity: 1; color: var(--brand-dark); }
.hw-checks li.is-run i { animation: hwSpin 1s linear infinite; }
.hw-checks li.is-ok { opacity: 1; color: #157f3c; }
.hw-checks li.is-ok i { animation: none; }
@keyframes hwSpin { to { rotate: 360deg } }


/* ==========================================================================
   8. SCREEN 02 — brand profile
   ========================================================================== */
.hw-brandhead { display: flex; align-items: center; gap: 12px; }

.hw-brandlogo {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(140deg, #e2231a 0%, #f9b000 130%);
    color: #fff;
    font-family: var(--font-h);
    font-size: .95em;
    font-weight: 800;
    letter-spacing: -.02em;
}

.hw-brandid { display: grid; gap: 1px; min-width: 0; }
.hw-brandid b  { font-family: var(--font-h); font-size: 1.05em; font-weight: 700; color: var(--ink); }
.hw-brandid em { font-style: normal; font-size: .82em; color: var(--hw-mut); }

.hw-kv { display: grid; gap: 11px; }
.hw-kv h6 { margin: 0 0 3px; font-family: var(--font-mono); font-size: .66em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hw-mut); }
.hw-kv p  { margin: 0; font-size: .86em; line-height: 1.6; color: var(--text-body); }

.hw-sw { display: flex; gap: 7px; }
.hw-sw i { width: 26px; height: 26px; border: 1px solid rgba(15, 31, 51, .1); border-radius: 7px; background: var(--c); }

.hw-prods { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }

.hw-prods li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    border: 1px solid var(--hw-line-2);
    border-radius: var(--hw-r-sm);
    background: #fbfdff;
}

.hw-prod-img {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    object-fit: cover;
    background: #fff;
    border: 1px solid var(--hw-line-2);
}
.hw-prod-b  { display: grid; gap: 0; min-width: 0; }
.hw-prod-b b  { font-size: .88em; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-prod-b em { font-style: normal; font-size: .74em; color: var(--hw-mut); }
.hw-prod-p  { font-family: var(--font-h); font-size: .92em; font-weight: 700; color: #157f3c; white-space: nowrap; }
.hw-prod-p i { font-style: normal; font-size: .72em; font-weight: 600; color: var(--hw-mut); }


/* ==========================================================================
   9. SCREEN 03 — objective
   ========================================================================== */
.hw-objs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }

.hw-obj {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 6px;
    padding: 18px 12px 16px;
    border: 1.5px solid var(--hw-line);
    border-radius: var(--hw-r);
    background: #fff;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s var(--hw-ease), box-shadow .2s var(--hw-ease), transform .2s var(--hw-ease);
}
.hw-obj:hover { border-color: var(--brand-light); transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(15, 31, 51, .3); }
.hw-obj:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.hw-obj-ic {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(67, 163, 221, .1);
    color: var(--brand-dark);
    font-size: 1.05em;
    transition: background .2s var(--hw-ease), color .2s var(--hw-ease);
}

.hw-obj b  { font-family: var(--font-h); font-size: .98em; font-weight: 700; color: var(--ink); }
.hw-obj em { font-style: normal; font-size: .76em; line-height: 1.45; color: var(--hw-mut); }

.hw-obj-tick {
    position: absolute;
    inset-block-start: 9px;
    inset-inline-end: 9px;
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: .58em;
    opacity: 0;
    scale: .6;
    transition: opacity .2s var(--hw-ease), scale .2s var(--hw-ease);
}

.hw-obj.is-on { border-color: var(--brand); background: rgba(67, 163, 221, .06); }
.hw-obj.is-on .hw-obj-ic   { background: linear-gradient(140deg, var(--brand) 0%, var(--brand-dark) 100%); color: #fff; }
.hw-obj.is-on .hw-obj-tick { opacity: 1; scale: 1; }

.hw-effect {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid rgba(67, 163, 221, .3);
    border-radius: var(--hw-r);
    background: rgba(67, 163, 221, .07);
    font-size: .86em;
    line-height: 1.6;
    color: var(--text-body);
}
.hw-effect i { margin-top: .22em; color: var(--brand-dark); }
.hw-effect b { color: var(--ink); }


/* ==========================================================================
   10. SCREEN 04 — research
   ========================================================================== */
.hw-comps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }

.hw-comps li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 10px;
    padding: 12px 14px;
    border: 1px solid var(--hw-line-2);
    border-inline-start: 3px solid var(--brand-light);
    border-radius: var(--hw-r-sm);
    background: #fbfdff;
}

.hw-comp-t    { font-family: var(--font-h); font-size: .98em; font-weight: 700; color: var(--brand-dark); }
.hw-comp-pill { grid-column: 2; grid-row: 1; align-self: start; padding: 2px 9px; border-radius: var(--radius-pill); background: rgba(67, 163, 221, .14); color: var(--brand-dark); font-size: .7em; font-weight: 700; white-space: nowrap; }
.hw-comps li em { grid-column: 1 / -1; font-style: normal; font-size: .78em; color: var(--hw-mut); }
.hw-comps li p  { grid-column: 1 / -1; margin: 4px 0 6px; font-size: .84em; line-height: 1.6; color: var(--text-body); }
.hw-comps li .hw-tags { grid-column: 1 / -1; }

.hw-age { display: flex; align-items: center; gap: 10px; }
.hw-age-lab { font-family: var(--font-mono); font-size: .66em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hw-mut); }
.hw-age-bar { position: relative; flex: 1 1 auto; height: 6px; border-radius: 3px; background: var(--hw-line); }
.hw-age-bar i { position: absolute; inset-block: 0; inset-inline-start: var(--a); width: var(--b); border-radius: 3px; background: linear-gradient(90deg, var(--brand) 0%, var(--brand-dark) 100%); }
.hw-age-val { font-family: var(--font-h); font-size: .88em; font-weight: 700; color: var(--ink); }

/* A map stands in for the real Leaflet canvas: a graticule, a soft landmass
   wash and three pins. It is aria-hidden — the emirates it stands for are
   listed as text right below it. */
.hw-map {
    position: relative;
    height: 118px;
    border: 1px solid var(--hw-line);
    border-radius: var(--hw-r-sm);
    overflow: hidden;
    background:
        radial-gradient(58% 76% at 46% 58%, rgba(212, 199, 170, .55) 0%, rgba(212, 199, 170, 0) 62%),
        radial-gradient(40% 52% at 74% 30%, rgba(196, 210, 176, .45) 0%, rgba(196, 210, 176, 0) 66%),
        repeating-linear-gradient(90deg, rgba(15, 31, 51, .05) 0 1px, transparent 1px 34px),
        repeating-linear-gradient(0deg,  rgba(15, 31, 51, .05) 0 1px, transparent 1px 34px),
        linear-gradient(160deg, #dcecf7 0%, #cfe3f2 100%);
}

.hw-map-pin {
    position: absolute;
    inset-inline-start: var(--x);
    top: var(--y);
    width: 11px;
    height: 11px;
    margin: -5.5px 0 0 -5.5px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--brand-dark);
    box-shadow: 0 0 0 5px rgba(67, 163, 221, .26);
}

.hw-geos { display: flex; flex-wrap: wrap; gap: 6px; }

.hw-geo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px;
    border: 1px solid var(--hw-line);
    border-radius: var(--radius-pill);
    background: #fff;
    font-size: .76em;
    color: var(--hw-mut);
}
.hw-geo.is-on { border-color: rgba(67, 163, 221, .42); background: rgba(67, 163, 221, .09); color: var(--brand-dark); font-weight: 600; }
.hw-geo i { font-size: .8em; opacity: .6; }


/* ==========================================================================
   11. SCREEN 05 — platforms + budget
   ========================================================================== */
.hw-money {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--hw-line);
    border-radius: var(--hw-r);
    background: #fff;
}

.hw-money > div { display: grid; gap: 1px; min-width: 0; }
.hw-money span  { font-family: var(--font-mono); font-size: .62em; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--hw-mut); }
.hw-money b     { font-family: var(--font-h); font-size: 1.02em; font-weight: 800; color: var(--brand-dark); white-space: nowrap; }
.hw-money-ok    { color: #157f3c !important; }
.hw-money-warn  { color: var(--hw-warn) !important; }

.hw-plats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }

.hw-plat {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 7px;
    padding: 16px 13px 13px;
    border: 1px solid var(--hw-line);
    border-radius: var(--hw-r);
    background: #fff;
    text-align: center;
    transition: box-shadow .25s var(--hw-ease), border-color .25s var(--hw-ease);
}
.hw-plat.is-hot { border-color: rgba(67, 163, 221, .55); box-shadow: 0 0 0 3px rgba(67, 163, 221, .12); }

.hw-plat-ic {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #fff;
    font-size: 1.15em;
}
.hw-plat-ic--ig { background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 46%, #6228d7 100%); }
.hw-plat-ic--fb { background: #1877f2; }
.hw-plat-ic--yt { background: #ff0000; }

.hw-plat > b { font-family: var(--font-h); font-size: 1em; font-weight: 700; color: var(--ink); }
.hw-plat > p { margin: 0; font-size: .78em; line-height: 1.55; color: var(--hw-mut); }

.hw-peak {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    background: rgba(67, 163, 221, .1);
    color: var(--brand-dark);
    font-size: .74em;
    font-weight: 600;
}
.hw-peak i { font-size: .85em; }

.hw-step {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--hw-line-2);
    width: 100%;
    justify-content: center;
}

.hw-stepbtn {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--hw-line);
    border-radius: var(--hw-r-sm);
    background: #fff;
    color: var(--brand-dark);
    font-size: 1em;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background .18s var(--hw-ease), border-color .18s var(--hw-ease), transform .12s var(--hw-ease);
}
.hw-stepbtn:hover  { background: rgba(67, 163, 221, .1); border-color: var(--brand); }
.hw-stepbtn:active { transform: scale(.92); }
.hw-stepbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.hw-stepv {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    min-width: 74px;
    justify-content: center;
    padding: 5px 8px;
    border: 1px solid var(--hw-line);
    border-radius: var(--hw-r-sm);
    background: #fbfdff;
}
.hw-stepv b { font-family: var(--font-h); font-size: 1em; font-weight: 800; color: var(--ink); }
.hw-stepv i { font-style: normal; font-size: .68em; font-weight: 700; color: var(--hw-mut); }

/* the one figure that proves the panel is live */
.hw-stepv.is-bump { animation: hwBump .3s var(--hw-ease); }
@keyframes hwBump {
    50% { scale: 1.07; border-color: var(--brand); background: rgba(67, 163, 221, .1); }
}

.hw-pct { font-size: .72em; color: var(--hw-mut); }
.hw-pct b { font-weight: 700; color: var(--brand-dark); }


/* ==========================================================================
   12. SCREEN 06 — content studio
   ========================================================================== */
.hw-card--pv { justify-items: center; }

.hw-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius-pill); background: #eff5fa; }

.hw-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    font-family: var(--font-b);
    font-size: .8em;
    font-weight: 600;
    color: var(--hw-mut);
    cursor: pointer;
    transition: background .2s var(--hw-ease), color .2s var(--hw-ease);
}
.hw-tab i { font-style: normal; font-family: var(--font-mono); font-size: .78em; opacity: .72; }
.hw-tab:hover  { color: var(--brand-dark); }
.hw-tab.is-on  { background: #fff; color: var(--brand-dark); box-shadow: 0 1px 3px rgba(15, 31, 51, .12); }
.hw-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Height is pinned so the card does not jump as the ratio changes; each
   placement fills it differently, which is exactly the point being made. */
.hw-phone {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 206px;
    max-width: 100%;
    min-height: 342px;
    border: 8px solid #1b2531;
    border-radius: 28px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 20px 44px -22px rgba(15, 31, 51, .55);
}

.hw-phone-notch {
    position: absolute;
    inset-inline-start: 50%;
    top: 6px;
    z-index: 3;
    translate: -50% 0;
    width: 58px;
    height: 13px;
    border-radius: 9px;
    background: #1b2531;
}

/* Reels furniture: the right-hand action rail and the caption block that sits
   over the bottom of the film. Painted only in the 9:16 placement. */
.hw-reels-ui { display: none; position: absolute; inset: 0; z-index: 3; pointer-events: none; }

.hw-reels-rail {
    position: absolute;
    inset-inline-end: 8px;
    bottom: 86px;
    display: grid;
    gap: 14px;
    color: #fff;
    font-size: .95em;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6));
}

.hw-reels-foot {
    position: absolute;
    inset-inline: 10px;
    bottom: 10px;
    display: grid;
    gap: 4px;
    padding-top: 34px;
    color: #fff;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .62) 78%);
}
.hw-reels-foot b  { font-size: .74em; font-weight: 700; }
.hw-reels-foot em { font-style: normal; font-size: .68em; line-height: 1.4; opacity: .92; }

.hw-reels-cta {
    margin-top: 5px;
    padding: 6px;
    border-radius: 7px;
    background: #0095f6;
    font-size: .7em;
    font-weight: 700;
    text-align: center;
}

.hw-post-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 26px 10px 8px;
    border-bottom: 1px solid #f0f2f5;
}
.hw-post-av { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(140deg, #e2231a 0%, #f9b000 130%); color: #fff; font-size: .58em; font-weight: 700; }
.hw-post-id { display: grid; gap: 0; }
.hw-post-id b  { font-size: .74em; font-weight: 700; color: #16283e; }
.hw-post-id em { font-style: normal; font-size: .64em; color: #8a94a1; }
.hw-post-head > i { margin-inline-start: auto; color: #8a94a1; font-size: .8em; }

.hw-media { position: relative; display: block; background: #0d1117; }
.hw-media img,
.hw-media video { display: block; width: 100%; height: auto; }

.hw-post-foot { display: grid; gap: 5px; padding: 9px 10px 12px; }
.hw-post-acts { display: flex; gap: 12px; color: #16283e; font-size: .95em; }
.hw-post-acts i:last-child { margin-inline-start: auto; }
.hw-post-foot > b { font-size: .72em; color: #16283e; }
.hw-post-cap { font-size: .7em; line-height: 1.45; color: #3d4859; }
.hw-post-cap b { color: #16283e; }

.hw-post-cta {
    margin-top: 4px;
    padding: 7px;
    border-radius: 7px;
    background: #0095f6;
    color: #fff;
    font-size: .72em;
    font-weight: 700;
    text-align: center;
    letter-spacing: .02em;
}

/* ---- reels: the film takes the whole screen ---- */
.hw-phone[data-place="reels"] .hw-post-head,
.hw-phone[data-place="reels"] .hw-post-foot { display: none; }
.hw-phone[data-place="reels"] .hw-reels-ui { display: block; }
.hw-phone[data-place="reels"] .hw-media { position: absolute; inset: 0; }
.hw-phone[data-place="reels"] .hw-media video { width: 100%; height: 100%; object-fit: cover; }

/* ---- display: a 16:9 banner drops into the same feed slot ---- */
.hw-phone[data-place="display"] .hw-media { background: #f0f2f5; }

.hw-copy { display: grid; gap: 11px; align-content: start; min-width: 0; }

.hw-lines { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }

.hw-lines li {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--hw-line-2);
    font-size: .86em;
    color: var(--text-body);
}
.hw-lines li:last-child { border-bottom: 0; padding-bottom: 0; }

.hw-lines b {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: rgba(67, 163, 221, .12);
    color: var(--brand-dark);
    font-family: var(--font-mono);
    font-size: .72em;
    font-weight: 700;
}

.hw-lines.is-new li { animation: hwIn .38s var(--hw-ease) both; }
.hw-lines.is-new li:nth-child(2) { animation-delay: .07s; }
.hw-lines.is-new li:nth-child(3) { animation-delay: .14s; }

.hw-hashes { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
.hw-hashes span { padding: 3px 9px; border-radius: var(--radius-pill); background: rgba(238, 42, 123, .1); color: #b81f5f; font-size: .72em; font-weight: 600; }

.hw-ac { justify-self: center; text-align: center; }


/* ==========================================================================
   13. SCREEN 07 — review + launch
   ========================================================================== */
.hw-sum { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0; margin: 0; }
.hw-sum dt {
    padding: 8px 0;
    border-bottom: 1px solid var(--hw-line-2);
    font-family: var(--font-mono);
    font-size: .64em;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--hw-mut);
    align-self: center;
}
.hw-sum dd {
    margin: 0;
    padding: 8px 0 8px 18px;
    border-bottom: 1px solid var(--hw-line-2);
    font-size: .86em;
    color: var(--ink);
    text-align: end;
}
[dir="rtl"] .hw-sum dd { padding: 8px 18px 8px 0; }
.hw-sum dt:last-of-type, .hw-sum dd:last-of-type { border-bottom: 0; }

.hw-appr {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border: 1px solid rgba(217, 119, 6, .3);
    border-radius: var(--hw-r-sm);
    background: rgba(217, 119, 6, .07);
}
.hw-appr-av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(140deg, var(--brand) 0%, var(--brand-dark) 100%); color: #fff; font-size: .72em; font-weight: 700; }
.hw-appr-b  { display: grid; gap: 0; }
.hw-appr.is-ok { border-color: rgba(22, 163, 74, .34); background: rgba(22, 163, 74, .07); }
.hw-appr.is-ok .hw-appr-b b { color: #12652f; }
.hw-appr-b b  { font-size: .88em; font-weight: 700; color: #a35c05; }
.hw-appr-b em { font-style: normal; font-size: .76em; color: var(--hw-mut); }

.hw-ship { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

.hw-ship li {
    display: grid;
    grid-template-columns: 30px auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid var(--hw-line-2);
    border-radius: var(--hw-r-sm);
    background: #fbfdff;
    transition: border-color .3s var(--hw-ease), background .3s var(--hw-ease);
}
.hw-ship li.is-live { border-color: rgba(22, 163, 74, .35); background: rgba(22, 163, 74, .05); }

.hw-ship-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: .82em; }
.hw-ship li > b { font-size: .86em; font-weight: 700; color: var(--ink); }

.hw-ship-beats { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.hw-ship-beats i {
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    background: #eef3f8;
    color: #9aa8b6;
    font-style: normal;
    font-size: .64em;
    font-weight: 600;
    transition: background .25s var(--hw-ease), color .25s var(--hw-ease);
}
.hw-ship-beats i.is-ok { background: rgba(22, 163, 74, .13); color: #157f3c; }
.hw-ship-beats i.is-run { background: rgba(67, 163, 221, .16); color: var(--brand-dark); }

.hw-ship-state {
    justify-self: end;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: #eef3f8;
    color: var(--hw-mut);
    font-family: var(--font-mono);
    font-size: .62em;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}
.hw-ship li.is-live .hw-ship-state { background: rgba(217, 119, 6, .14); color: #a35c05; }

.hw-done {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid rgba(22, 163, 74, .32);
    border-radius: var(--hw-r);
    background: rgba(22, 163, 74, .07);
    font-size: .86em;
    line-height: 1.6;
    color: var(--text-body);
    animation: hwIn .4s var(--hw-ease) both;
}
.hw-done i { margin-top: .18em; color: var(--hw-ok); font-size: 1.05em; }
.hw-done b { color: #12652f; }


/* ==========================================================================
   14. SCREEN 08 — results + optimization
   ========================================================================== */
.hw-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }

.hw-kpi {
    display: grid;
    gap: 2px;
    padding: 12px 13px;
    border: 1px solid var(--hw-line);
    border-radius: var(--hw-r);
    background: #fff;
}
.hw-kpi span { font-family: var(--font-mono); font-size: .6em; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--hw-mut); }
.hw-kpi b    { font-family: var(--font-h); font-size: 1.35em; font-weight: 800; color: var(--ink); line-height: 1.15; font-variant-numeric: tabular-nums; }
.hw-kpi em   { font-style: normal; font-size: .7em; color: var(--hw-mut); }

.hw-kpi--hero { border-color: rgba(67, 163, 221, .42); background: linear-gradient(145deg, rgba(67, 163, 221, .09) 0%, rgba(67, 163, 221, .02) 100%); }
.hw-kpi--hero b { color: var(--brand-dark); }
.hw-kpi--hero em { display: inline-flex; align-items: center; gap: 5px; color: #157f3c; font-weight: 700; }

.hw-chart { display: grid; gap: 8px; padding: 13px 14px; border: 1px solid var(--hw-line); border-radius: var(--hw-r); background: #fff; }
.hw-chart-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hw-chart-h b { font-family: var(--font-h); font-size: .95em; font-weight: 700; color: var(--ink); }
.hw-chart svg { display: block; width: 100%; height: clamp(108px, 11vw, 148px); }

.hw-legend { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 8px; font-size: .72em; color: var(--hw-mut); }
.hw-legend i { width: 9px; height: 9px; border-radius: 50%; }
.hw-legend .hw-l1 { background: var(--brand); }
.hw-legend .hw-l2 { background: #16a34a; }
.hw-legend .hw-l3 { background: #f59e0b; }

.hw-grid line { stroke: var(--hw-line); stroke-width: 1; vector-effect: non-scaling-stroke; }

.hw-line {
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* the viewBox is stretched to the card, so the stroke must not be */
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
}
.hw-line--1 { stroke: var(--brand); }
.hw-line--2 { stroke: #16a34a; }
.hw-line--3 { stroke: #f59e0b; }

.hw-line.is-drawn { stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s var(--hw-ease); }
.hw-line--2.is-drawn { transition-delay: .12s; }
.hw-line--3.is-drawn { transition-delay: .24s; }

.hw-recs { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }

.hw-recs li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid var(--hw-line-2);
    border-radius: var(--hw-r-sm);
    background: #fbfdff;
    transition: border-color .3s var(--hw-ease), background .3s var(--hw-ease), opacity .3s var(--hw-ease);
}
.hw-recs li.is-applied { border-color: rgba(22, 163, 74, .35); background: rgba(22, 163, 74, .06); }

.hw-rec-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(67, 163, 221, .12); color: var(--brand-dark); font-size: .9em; }
.hw-recs li.is-applied .hw-rec-ic { background: rgba(22, 163, 74, .14); color: #157f3c; }

.hw-rec-b  { display: grid; gap: 2px; min-width: 0; }
.hw-rec-b b  { font-size: .89em; font-weight: 700; color: var(--ink); }
.hw-rec-b em { font-style: normal; font-size: .8em; line-height: 1.55; color: var(--hw-mut); }

.hw-rec-x { justify-self: start; margin-top: 3px; padding: 2px 9px; border-radius: var(--radius-pill); background: rgba(67, 163, 221, .11); color: var(--brand-dark); font-size: .7em; font-weight: 600; }
.hw-rec-x i { font-style: normal; font-weight: 800; }


/* ==========================================================================
   15. CONTROLS + DISCLAIMER
   ========================================================================== */
.hw-ctl {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.hw-ctl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--hw-line);
    border-radius: var(--radius-pill);
    background: #fff;
    font-family: var(--font-b);
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-body);
    cursor: pointer;
    transition: border-color .2s var(--hw-ease), color .2s var(--hw-ease), background .2s var(--hw-ease);
}
.hw-ctl-btn:hover { border-color: var(--brand); color: var(--brand-dark); background: rgba(67, 163, 221, .07); }
.hw-ctl-btn:disabled { opacity: .4; cursor: not-allowed; }
.hw-ctl-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.hw-ctl-btn[aria-pressed="true"] { border-color: var(--brand); background: rgba(67, 163, 221, .12); color: var(--brand-dark); }

/* Forward is leftward in RTL, and Font Awesome's arrows do not mirror
   themselves. Every arrow inside the rig gets flipped, not just the two on the
   control bar. */
[dir="rtl"] .hw-rig .fa-arrow-left,
[dir="rtl"] .hw-rig .fa-arrow-right,
[dir="rtl"] .hw-rig .fa-play,
[dir="rtl"] .hw-rig .fa-rotate-left { scale: -1 1; }

.hw-ctl-read {
    margin: 0;
    padding: 0 6px;
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .04em;
    color: var(--text-muted);
    white-space: nowrap;
}
.hw-ctl-read b { color: var(--brand-dark); }

.hw-ctl-sep { width: 1px; height: 22px; background: var(--hw-line); }

.hw-disclaim {
    margin: 14px 0 0;
    text-align: center;
    font-family: var(--font-b);
    font-size: .78rem;
    line-height: 1.6;
    color: var(--text-muted);
}
.hw-disclaim b { color: var(--text-body); }


/* ==========================================================================
   16. THE DAILY LOOP + THE GUARDS
   ========================================================================== */
.hw-loop   { padding: var(--space-section) 0; }
.hw-guards { padding: 0 0 var(--space-section); }

/* AUDIT 02: margin-inline auto so the lede centres with the head above it. */
.hw-loop-lede { max-width: 70ch; margin: 18px auto clamp(30px, 4vw, 46px); }

.hw-loop-list { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }

/* the reference's dotted spine, running down the numbers */
.hw-loop-list::before {
    content: '';
    position: absolute;
    inset-block: 34px;
    inset-inline-start: 27px;
    width: 2px;
    background: repeating-linear-gradient(180deg, rgba(67, 163, 221, .42) 0 5px, transparent 5px 11px);
}

.hw-loop-item {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: clamp(16px, 2vw, 30px);
    padding: clamp(18px, 2vw, 26px) 0;
    border-bottom: 1px solid var(--hairline);
}
.hw-loop-item:last-child { border-bottom: 0; }

.hw-loop-no {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 2px solid rgba(67, 163, 221, .3);
    border-radius: 50%;
    background: #fff;
    font-family: var(--font-mono);
    font-size: .9rem;
    font-weight: 700;
    color: var(--brand-dark);
}

.hw-loop-b h3 { margin: 8px 0 6px; font-family: var(--font-h); font-size: clamp(1.05rem, 1.5vw, 1.35rem); font-weight: 700; color: var(--ink); }
.hw-loop-b p  { margin: 0; font-family: var(--font-b); font-size: clamp(.92rem, 1.05vw, 1rem); line-height: 1.7; color: var(--text-body); max-width: 72ch; text-wrap: pretty; }

.hw-loop-foot {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: clamp(22px, 3vw, 34px) 0 0;
    padding: 11px 18px;
    border: 1px solid var(--hw-line);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .72);
    font-family: var(--font-b);
    font-size: .88rem;
    font-weight: 600;
    color: var(--text-body);
}
.hw-loop-foot i { color: var(--brand); }

.hw-guard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); margin-top: clamp(8px, 1vw, 14px); }

.hw-guard {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: clamp(22px, 2.4vw, 32px);
    border: 1px solid var(--pr-glass-line, #dde7ef);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .74);
    -webkit-backdrop-filter: blur(6.5px);
    backdrop-filter: blur(6.5px);
    transition: transform .3s var(--hw-ease), box-shadow .3s var(--hw-ease);
}
.hw-guard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.hw-guard-ic {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(140deg, rgba(67, 163, 221, .16) 0%, rgba(46, 123, 168, .2) 100%);
    color: var(--brand-dark);
    font-size: 1.05rem;
}

.hw-guard h3 { margin: 0; font-family: var(--font-h); font-size: clamp(1.02rem, 1.3vw, 1.2rem); font-weight: 700; color: var(--ink); }
.hw-guard p  { margin: 0; font-family: var(--font-b); font-size: .93rem; line-height: 1.7; color: var(--text-body); text-wrap: pretty; }


/* ==========================================================================
   17. RESPONSIVE — the frame first, then the page

   The screens are measured against the FRAME (a container query on .hw-main),
   not the viewport: the frame is never as wide as the page, so a viewport
   query would restack its columns hundreds of pixels too late.
   ========================================================================== */

@container hwmain (max-width: 860px) {
    .hw-grid-2,
    .hw-grid-c   { grid-template-columns: minmax(0, 1fr); }
    .hw-plats    { grid-template-columns: minmax(0, 1fr); }
    .hw-kpis     { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hw-money    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hw-money > button { grid-column: 1 / -1; justify-self: start; }
    .hw-card--pv { justify-items: stretch; }
    .hw-phone    { margin-inline: auto; }
}

@container hwmain (max-width: 620px) {
    .hw-view  { font-size: 12px; }
    .hw-objs  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hw-kpis  { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* the annotation stops being a row and becomes a small stack */
    .hw-say { grid-template-columns: auto minmax(0, 1fr); }
    .hw-say-cue { grid-column: 2; justify-self: start; white-space: normal; }

    .hw-recs li { grid-template-columns: 30px minmax(0, 1fr); }
    .hw-recs li > .hw-btn { grid-column: 2; justify-self: start; }

    .hw-ship li { grid-template-columns: 28px minmax(0, 1fr) auto; }
    .hw-ship-beats { grid-column: 1 / -1; }

    .hw-top-crumb { display: none; }
    .hw-sum { grid-template-columns: minmax(0, 1fr); }
    .hw-sum dt { border-bottom: 0; padding-bottom: 0; }
    .hw-sum dd { padding: 2px 0 8px; text-align: start; }
    [dir="rtl"] .hw-sum dd { padding: 2px 0 8px; }
}

@container hwmain (max-width: 420px) {
    .hw-view { font-size: 11.5px; }
    .hw-objs { grid-template-columns: minmax(0, 1fr); }
    .hw-kpis { grid-template-columns: minmax(0, 1fr); }
    .hw-foot { flex-wrap: wrap; }
    .hw-foot .hw-btn { flex: 1 1 auto; }
}

/* ---- the rig: rail beside the frame → rail above it ---- */
@media (max-width: 1199.98px) {
    .hw-stage { grid-template-columns: minmax(0, 1fr); }

    .hw-rail {
        overflow-x: auto;
        overflow-y: hidden;
        padding: 4px 2px 8px;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        /* the run is wider than the phone; fade the trailing edge so it reads
           as scrollable rather than as eight steps that end at three */
        -webkit-mask-image: linear-gradient(to right, #000 0 88%, transparent 100%);
        mask-image: linear-gradient(to right, #000 0 88%, transparent 100%);
    }
    [dir="rtl"] .hw-rail {
        -webkit-mask-image: linear-gradient(to left, #000 0 88%, transparent 100%);
        mask-image: linear-gradient(to left, #000 0 88%, transparent 100%);
    }

    .hw-rail-line {
        inset: 22px 26px auto;
        width: auto;
        height: 2px;
        background: repeating-linear-gradient(90deg, rgba(67, 163, 221, .34) 0 5px, transparent 5px 10px);
    }

    .hw-rail-fill {
        inset: 0;
        width: 100%;
        height: 2px;
        transform: scaleX(var(--p, 0));
        transform-origin: left center;
        transition: transform .55s var(--hw-ease);
    }
    [dir="rtl"] .hw-rail-fill { transform-origin: right center; }

    .hw-rail-list { grid-auto-flow: column; grid-auto-columns: minmax(126px, 1fr); gap: 0; }

    .hw-rail-btn {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 8px;
        padding: 0 6px 4px;
        text-align: center;
    }

    .hw-rail-txt { justify-items: center; }
    .hw-rail-txt em { display: none; }
}

/* ---- below lg the frame stops pretending to be a fixed-height desktop app;
        it grows to its content and the page does the scrolling ---- */
@media (min-width: 992px) {
    .hw-app { height: 640px; }
}

@media (max-width: 991.98px) {
    .hw-app { min-height: 0; grid-template-rows: auto; }
    .hw-scr { overflow: visible; }
}

@media (max-width: 767.98px) {
    .hw-hero .pr-actions { width: 100%; }
    .hw-hero .pr-btn { flex: 1 1 220px; }
    .hw-chips { gap: 8px; }
    .hw-chip { font-size: .78rem; padding: 9px 14px 9px 10px; }
    .hw-guard-grid { grid-template-columns: minmax(0, 1fr); }
    .hw-loop-item { grid-template-columns: 44px minmax(0, 1fr); }
    .hw-loop-no { width: 44px; height: 44px; font-size: .8rem; }
    .hw-loop-list::before { inset-inline-start: 21px; }
    .hw-ctl-read { order: -1; width: 100%; text-align: center; }
}

@media (max-width: 575.98px) {
    /* The icon rail is charm, not information — every screen already says where
       it is in its own header. It goes first when width gets scarce. */
    .hw-side { display: none; }
    .hw-app  { grid-template-columns: minmax(0, 1fr); }
    .hw-bar-tag { display: none; }
    .hw-bar-url { max-width: none; }
    .hw-rig  { padding: 12px; }
    .hw-say  { padding: 10px 12px; }
    .hw-scr, .hw-top, .hw-foot { padding-inline: 12px; }
}


/* ==========================================================================
   18. MOTION + PRINT
   Every state the demo enters is also a class, so switching the travel off
   costs nothing but the travel.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .hw-screen.is-in,
    .hw-lines.is-new li,
    .hw-done { animation: none !important; }

    .hw-cue-on::before,
    .hw-cue-on::after,
    .hw-live i,
    .hw-checks li.is-run i,
    .hw-caret { animation: none !important; }

    /* the ring still has to be visible — it is the thing saying "press this" —
       so it settles on its first frame instead of pulsing. The halo has nothing
       left to say once it cannot travel, so it goes. */
    .hw-cue-on::before { display: none; }
    .hw-cue-on::after  { opacity: 1; scale: 1; }

    .hw-cue-on.is-urgent::after,
    .hw-pin i,
    .hw-cursor::before { animation: none !important; }

    .hw-cursor { display: none; }

    .hw-rail-fill,
    .hw-line.is-drawn,
    .hw-guard,
    .hw-obj,
    .hw-btn,
    .hw-plat,
    .hw-recs li,
    .hw-ship li,
    .hw-ship-beats i { transition: none !important; }

    .hw-guard:hover,
    .hw-obj:hover,
    .hw-btn--primary:hover { transform: none; }

    .hw-stepv.is-bump { animation: none; }
}

@media print {
    .hw-rings, .hw-ctl, .hw-cursor, .hw-pin, .pr-close, .lp-nav { display: none !important; }
    .hw-page::before { display: none; }
    .hw-rig { box-shadow: none; }
    .hw-app { height: auto; grid-template-rows: auto; }
    .hw-scr { overflow: visible; }
    .hw-screen[hidden] { display: flex !important; }
    .hw-guard, .hw-loop-item { break-inside: avoid; }
}


/* ==========================================================================
   19. MATCHED TO THE LANDING PAGE  +  SMALL-SCREEN PASS
   --------------------------------------------------------------------------
   The page already loads the same three faces as the rest of the site and
   sizes everything off --font-h / --font-b / --font-mono, so the type system
   was already right. What did not match was the buttons: .hw-btn was set in
   the BODY face at 600 with a small corner radius, against the site's CTA,
   which is the DISPLAY face at 700 in a full pill. Same tokens, different
   voice — so the demo's controls read as belonging to another product.

   (The four page-level buttons were a separate problem: they still carried the
   retired .pr-btn family, which product-page.css has since mapped onto
   .lp-btn-cta. Unstyled, they rendered 27px tall. Fixed in the markup.)
   ========================================================================== */

.hw-btn {
    font-family: var(--font-h);
    font-weight: 700;
    border-radius: var(--radius-pill);
}
/* the CTA's own two-layer brand shadow, so a primary control in the demo
   catches the light the same way the page's real CTA does */
.hw-btn--primary {
    box-shadow: 0 2px 6px rgba(46, 123, 168, .25),
                0 8px 20px rgba(67, 163, 221, .24),
                inset 0 1px 0 rgba(255, 255, 255, .22);
}
.hw-btn--primary:hover {
    box-shadow: 0 4px 10px rgba(46, 123, 168, .3),
                0 14px 30px rgba(67, 163, 221, .36),
                inset 0 1px 0 rgba(255, 255, 255, .22);
}
.hw-btn--ghost { border-radius: var(--radius-pill); }

@media (max-width: 991.98px) {
    /* ---- the demo panel's type ----
       The mock steps itself down the nesting — .hw-demo 16px → .hw-app 13 →
       .hw-scr 11.5 → .hw-say 9.2 → .hw-say-cue 8.1. On a wide screen that reads
       as a scaled-down application, which is the point. On a phone the panel is
       already narrow and the same ladder lands the deepest labels at eight
       pixels. Lifting the base does not fix it, because the ladder is a mix of
       em and rem rather than relative all the way down — so the rungs that fall
       below ~11px are restated in rem, which is root-relative and therefore
       immune to whatever the chain above them is doing. */
    .hw-say         { font-size: .8rem; }
    .hw-say-cue     { font-size: .74rem; }
    .hw-field-v     { font-size: .82rem; }
    .hw-fineprint   { font-size: .74rem; }
    .hw-connect p   { font-size: .8rem; }
    .hw-bar-url, .hw-bar-url span { font-size: .7rem; }
    .hw-bar-tag     { font-size: .7rem; }
    .hw-top-crumb   { font-size: .7rem; }
    .hw-ctl-read    { font-size: .78rem; }
    .hw-btn         { font-size: .82rem; }

    /* ---- targets ----
       9px of padding on a .86em label is a 32px control. The row keeps its
       height; only the tappable box grows. */
    .hw-btn { min-height: 44px; padding-inline: 20px; }
    .hw-btn--sm { min-height: 38px; }
    .hw-rail-btn { min-height: 44px; }
    .hw-ctl-btn, .hw-icobtn { min-width: 44px; min-height: 44px; }

    /* the step rail scrolls sideways; give it snap and let the last item clear
       the edge, so it reads as a rail rather than a row that got cut off */
    .hw-rail { scroll-snap-type: x proximity; scroll-padding-inline: 12px;
               -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .hw-rail::-webkit-scrollbar { display: none; }
    .hw-rail-item { scroll-snap-align: start; }
}

/* ---- phone: the hero's tail is redundant furniture ----
   The "roughly two minutes" note and the four claim chips are a contents list
   for the demo that sits immediately below them. Stacked one-per-row on a
   phone they push the demo — the page's whole reason for existing — a full
   screen further down for no information the demo itself does not give.
   Placed last on purpose: this file's later unmediated blocks would otherwise
   win over an earlier media query. */
@media (max-width: 767.98px) {
    .hw-hero .pr-hero-note,
    .hw-chips { display: none; }
}


/* ==========================================================================
   20. PHONE — THE DEMO, UNCLUTTERED
   --------------------------------------------------------------------------
   Measured at 390x844 before this block. Of the 684px the frame occupied,
   274px was furniture — a mock browser bar (50), the demo's narration (180,
   and 290 on step 05) and the app's own header (44) — leaving 408px for the
   product the page exists to show. The step rail was a 1010px run inside a
   324px window, so two and a half of the eight steps were visible and the
   third was cut mid-word.

   Nothing here fires above 767.98px: every rule is inside a query, and the
   block sits last in the file for the reason section 19 already gives — a
   media query adds no specificity, so a rule written mid-file loses to any
   later unmediated re-declaration of the same selector.
   ========================================================================== */

/* The disclosure that holds the narration's tail. Declared unmediated so it is
   off everywhere by default and only the phone query below can turn it on. */
.hw-say-more { display: none; }


@media (max-width: 767.98px) {

    /* ---- 1. the rail: eight cards behind a swipe → eight nodes in view ----
       The sideways run works on a tablet. On a phone it hides five sixths of
       the journey behind a gesture nothing announces, and a visitor who never
       swipes believes the demo is three steps long. Dropping the per-step
       labels fits all eight nodes across any phone; the one label that matters
       — the step you are standing on — is parked under the strip instead. */
    .hw-rail {
        overflow: visible;                       /* there is nothing left to scroll */
        padding: 2px 0 22px;                     /* the 22px is the parked label's row */
        -webkit-mask-image: none;
        mask-image: none;
    }
    [dir="rtl"] .hw-rail { -webkit-mask-image: none; mask-image: none; }

    .hw-rail-list { grid-auto-columns: minmax(0, 1fr); }

    /* 6.25% is one half of one eighth: the line starts and ends on the centre
       of the outer nodes at any width, without a magic pixel figure. */
    .hw-rail-line { inset: 23px 6.25% auto; }

    /* static, so the parked label below anchors to .hw-rail rather than to its
       own button — .hw-rail-btn is the only positioned box in between. */
    .hw-rail-btn { position: static; min-height: 44px; padding: 0; gap: 0; }
    .hw-rail-btn:hover { background: transparent; }

    .hw-rail-node { width: 30px; height: 30px; font-size: .58rem; }
    .hw-rail-item.is-on .hw-rail-node { box-shadow: 0 0 0 4px rgba(67, 163, 221, .16); }

    .hw-rail-txt { display: none; }
    .hw-rail-item.is-on .hw-rail-txt {
        display: block;
        position: absolute;
        inset-inline: 0;
        bottom: 0;
        text-align: center;
        pointer-events: none;                    /* the nodes keep the taps */
    }
    .hw-rail-item.is-on .hw-rail-txt b { font-size: .82rem; }


    /* ---- 2. the narration: the lead and the cue, the reasoning on request ----
       .hw-say is the demo talking over the product — a bold lead, four to six
       lines of reasoning, and the chip naming what to press. At this width
       that is a quarter to a third of the entire frame, and the visitor then
       scrolls past all of it to reach the button the chip just named. The lead
       and the chip stay put; the reasoning moves behind a disclosure.

       .is-foldable (on the rig) and .is-clamped (on each .hw-say) are written by
       JS, never by the markup: with scripting off neither class exists, so no
       button renders and nothing is hidden — the prose reads in full, exactly
       as it does today, instead of sitting behind a control that cannot open
       it. Unfolding is remembered across all eight screens. */
    .hw-say { padding: 10px 14px; row-gap: 8px; }

    .hw-say.is-clamped .hw-say-x { display: none; }

    /* .is-foldable, not .is-clamped: the button has to survive its own press,
       or the disclosure would open once and then vanish with no way back. */
    .is-foldable .hw-say-more {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 0;
        padding: 5px 0;                          /* a ~30px target on a text link */
        border: 0;
        background: none;
        font-family: var(--font-b);
        font-size: .74rem;
        font-weight: 600;
        line-height: 1.3;
        color: var(--brand-dark);
        cursor: pointer;
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }
    .hw-say-more:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
    .hw-say-more i { font-size: .62em; transition: rotate .25s var(--hw-ease); }
    .hw-say-more[aria-expanded="true"] i { rotate: 180deg; }


    /* ---- 3. the pointer ----
       A mouse arrow drawn on a touch screen contradicts the device in the
       visitor's hand. The ring on the target and the pin beside it say the
       same thing without borrowing a cursor nobody here has. */
    .hw-cursor { display: none; }


    /* ---- 4. the controls under the frame ----
       The rail now parks the step's name under its own node, so the readout
       was saying it a second time on a full-width row of its own. Hidden the
       screen-reader way, not with display:none: it is an aria-live region and
       is what announces the step change to a visitor who cannot see the rail. */
    .hw-ctl-read {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .hw-ctl-sep { display: none; }
    .hw-ctl { gap: 8px; margin-top: 12px; }
    .hw-disclaim { margin-top: 12px; font-size: .72rem; line-height: 1.55; }
}


@media (max-width: 575.98px) {
    /* ---- 5. the mock window chrome ----
       Three macOS traffic lights and a URL, on a phone. The dots are costume,
       and below ~500px the URL truncates mid-path ("…/campaigns/pla"), so it
       stops being information and becomes a broken string. The frame keeps its
       border, radius and shadow, and .hw-top below it still names the section,
       so the mock still reads as the product rather than as page furniture. */
    .hw-bar { display: none; }
}


/* The screens are measured against the FRAME, so the last two rules are
   container queries — same cascade, same reason for sitting at the end. */
@container hwmain (max-width: 420px) {
    /* Five cards one per row is ~500px of scrolling for five numbers that are
       four characters wide. Two columns fits them in 300px; the CPA card — the
       figure the optimizer is there to move — keeps the full width. */
    .hw-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hw-kpis .hw-kpi--hero { grid-column: 1 / -1; }
}