/* ============================================================================
   GroupWire landing page — page-level layout only.

   Ported from the Claude Design canvas "GroupWire Landing.dc.html"
   (project 06720769-1dd7-446e-a0da-90eff8173a37).

   Every colour, weight, radius and space here comes from groupwire-ds.css.
   No hex values: if something needs a new value, add a token to the design
   system package (groupwire-ds/src/tokens.css) and rebuild.
   ========================================================================= */

html { scroll-behavior: smooth; }

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--gw-dark);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--gw-accent); text-decoration: none; }
a:hover { color: var(--gw-ink); }

/* --- Scroll reveal -------------------------------------------------------- */
[data-reveal="pending"] { opacity: 0; transform: translateY(20px); }

[data-reveal="in"] {
    opacity: 1;
    transform: none;
    transition:
        opacity 780ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--gw-d, 0s),
        transform 780ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--gw-d, 0s);
}

/* --- Fixed nav ------------------------------------------------------------ */
/* The nav is fixed, so the first panel must clear it. Both read this token —
   change it once and the hero offset follows. */
:root { --gw-nav-h: 86px; }
@media (max-width: 880px) { :root { --gw-nav-h: 86px; } }

#gw-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 60;
    background: var(--gw-ground);
    border-bottom: 1px solid transparent;
    transition: border-color 280ms ease;
}

#gw-nav > div {
    max-width: var(--gw-measure);
    margin: 0 auto;
    padding-inline: var(--gw-gutter);
    padding-block: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gw-space-6);
    transition: padding-block 280ms ease;
}

#gw-nav[data-condensed="true"] { border-bottom-color: var(--gw-hairline); }
#gw-nav[data-condensed="true"] > div { padding-block: 11px; }

#gw-nav .gw-nav__brand {
    display: flex;
    align-items: center;
    gap: var(--gw-space-3);
    color: var(--gw-ink);
}

#gw-nav .gw-nav__brand .gw-icon-mark { width: 26px; height: auto; display: block; color: var(--gw-ink); }
#gw-nav .gw-nav__brand .gw-word-mark { width: 122px; height: auto; display: block; color: var(--gw-ink); }

#gw-nav .gw-nav__right {
    display: flex;
    align-items: center;
    gap: clamp(var(--gw-space-4), 2.4vw, var(--gw-space-8));
}

#gw-nav nav {
    display: flex;
    align-items: center;
    gap: clamp(var(--gw-space-4), 2.4vw, var(--gw-space-8));
    font-family: var(--gw-font-display);
    font-weight: var(--gw-weight-bold);
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

#gw-nav nav a { color: var(--gw-ink-muted); transition: color 160ms ease; }
#gw-nav nav a:hover { color: var(--gw-ink); }

#gw-nav-cta .gw-btn { padding: 0.7rem 1.4rem; font-size: 0.75rem; }

@media (max-width: 880px) { #gw-nav nav { display: none; } }

/* --- Hero ----------------------------------------------------------------- */
/* The hero's MetaRow sits in the narrower left column, so it needs a smaller
   track minimum than the design system default or "How" wraps to a second row. */
#gw-hero .gw-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gw-space-4); }
@media (max-width: 560px) { #gw-hero .gw-meta { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }

#gw-hero {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    grid-template-columns: 1fr;
    padding-top: var(--gw-space-8);
}

@media (min-width: 1000px) {
    #gw-hero { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
}

#gw-screens { display: flex; align-items: center; justify-content: center; }

.gw-plate { flex: none; width: 190px; height: 414px; position: relative; }
.gw-plate > div {
    position: absolute;
    top: 0; left: 0;
    width: 340px;
    transform: scale(0.559);
    transform-origin: top left;
}

.gw-plate--a { transform: rotate(-7deg) translateY(16px); z-index: 1; }
.gw-plate--a > div { border: 1px solid var(--gw-hairline); }
.gw-plate--b { margin-inline: -20px; transform: rotate(2deg); z-index: 3; }
.gw-plate--c { transform: rotate(8deg) translateY(20px); z-index: 2; }

@media (max-width: 780px) {
    #gw-screens > .gw-plate--a,
    #gw-screens > .gw-plate--c { display: none; }
    #gw-screens > .gw-plate { transform: none; margin-inline: 0; }
}

/* The artboards are decorative here — their own icon would double up. */
#gw-screens .gw-screen__icon,
#gw-walk .gw-screen__icon,
#gw-features .gw-screen__icon { display: none; }

/* --- Audience strip ------------------------------------------------------- */
#gw-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--gw-space-6) var(--gw-space-8);
}

#gw-strip p {
    margin: var(--gw-space-2) 0 0;
    color: var(--gw-ink-muted);
    font-size: 0.875rem;
}

/* --- Numbers -------------------------------------------------------------- */
#gw-numbers .gw-stat { font-size: clamp(3rem, 6.6vw, 5.5rem); line-height: 0.9; }

#gw-numbers .gw-numbers__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: clamp(var(--gw-space-8), 4vw, var(--gw-space-12));
}

.gw-note {
    color: var(--gw-ink-muted);
    font-family: var(--gw-font-display);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* --- How it works --------------------------------------------------------- */
#gw-how .gw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 640px) { #gw-how .gw-steps { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1040px) { #gw-how .gw-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --- Features: alternating rows ------------------------------------------- */
#gw-features [data-feat] {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(var(--gw-space-6), 4vw, var(--gw-space-12));
    align-items: center;
    padding-block: clamp(var(--gw-space-8), 4vw, var(--gw-space-12));
    border-top: 1px solid var(--gw-hairline);
}

@media (min-width: 900px) {
    #gw-features [data-feat] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
    #gw-features [data-feat]:nth-child(even) [data-plate] { order: 2; }
}

#gw-features [data-plate] { display: flex; justify-content: center; }

#gw-features .gw-feat__plate { width: 180px; height: 391px; position: relative; flex: none; }
#gw-features .gw-feat__plate > div {
    position: absolute;
    top: 0; left: 0;
    width: 340px;
    transform: scale(0.529);
    transform-origin: top left;
    border: 1px solid var(--gw-hairline);
}

#gw-features .gw-feat__num {
    display: block;
    font-family: var(--gw-font-display);
    font-size: 0.6875rem;
    font-weight: var(--gw-weight-bold);
    letter-spacing: 0.14em;
    color: var(--gw-accent-text);
    margin-bottom: var(--gw-space-4);
}

#gw-features [data-feat] p {
    margin: var(--gw-space-4) 0 0;
    color: var(--gw-ink-muted);
    font-size: 1.0625rem;
    max-width: 42ch;
    text-wrap: pretty;
}

/* --- Walkthrough ---------------------------------------------------------- */
.gw-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(var(--gw-space-8), 5vw, var(--gw-space-16));
    align-items: center;
}

.gw-split--end { align-items: end; }

#gw-walk { display: flex; justify-content: center; }
#gw-walk > div { width: 340px; max-width: 100%; border: 1px solid var(--gw-hairline); }

.gw-dots { display: flex; gap: var(--gw-space-3); }

.gw-dot {
    appearance: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gw-hairline);
    transition: background-color 200ms ease;
}

/* The active dot is the only thing that says which step you are on, so it has
   to read against the ground, not just against its siblings. --gw-accent-text
   is the role that stays legible on every ground; --gw-accent is Green Pop,
   which on Brand Light is 1.23:1 and disappears. */
.gw-dot[aria-current="true"] { background: var(--gw-accent-text); }

.gw-faq__q {
    appearance: none;
    background: transparent;
    border: 0;
    width: 100%;
    padding: var(--gw-space-6) 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gw-space-4);
    cursor: pointer;
    text-align: left;
    color: var(--gw-ink);
    font-family: var(--gw-font-display);
    font-weight: var(--gw-weight-display);
    font-size: clamp(1rem, 1.5vw, 1.1875rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.gw-faq__q:hover span:first-child { opacity: 0.62; }

.gw-faq__sign { flex: none; color: var(--gw-accent-text); font-size: 1.375rem; line-height: 1; }

[data-answer] {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 250ms ease, opacity 250ms ease;
}

[data-answer="true"] { grid-template-rows: 1fr; opacity: 1; }

[data-answer] > div { overflow: hidden; }

[data-answer] p {
    margin: 0 0 var(--gw-space-6);
    color: var(--gw-ink-muted);
    font-size: 0.9375rem;
    max-width: 44ch;
    text-wrap: pretty;
}

/* --- Signup --------------------------------------------------------------- */
#gw-signup { position: relative; max-width: 520px; }

#gw-signup .gw-field__input {
    border-radius: var(--gw-radius-pill);
    height: 68px;
    padding: 0 1.75rem;
    padding-right: 15rem;
}

#gw-signup-btn {
    position: absolute;
    right: 5px;
    bottom: 5px;
    height: 58px;
    display: flex;
    align-items: stretch;
}

#gw-signup-btn .gw-btn { display: flex; align-items: center; padding: 0.95rem 1.9rem; }

@media (max-width: 620px) {
    #gw-signup .gw-field__input { padding-right: 1.75rem; }
    #gw-signup-btn { position: static; margin-top: var(--gw-space-4); }
    #gw-signup-btn .gw-btn { display: block; width: 100%; }
}

#gw-close .gw-field__input:focus-visible,
#gw-close .gw-field__input:focus {
    box-shadow: none;
    border-color: var(--gw-green);
    outline: 2px solid var(--gw-green);
    outline-offset: 0;
}

/* --- Sitemap -------------------------------------------------------------- */
#gw-sitemap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--gw-space-8);
}

#gw-sitemap h3 {
    margin: 0 0 var(--gw-space-4);
    font-family: var(--gw-font-display);
    font-size: 0.6875rem;
    font-weight: var(--gw-weight-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gw-ink-muted);
}

#gw-sitemap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gw-space-3); }
#gw-sitemap a { color: var(--gw-ink); font-size: 0.9375rem; }
#gw-sitemap a:hover { color: var(--gw-accent-text); }

.gw-colophon {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gw-space-4) var(--gw-space-8);
    justify-content: space-between;
    align-items: baseline;
    color: var(--gw-ink-muted);
    font-family: var(--gw-font-display);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* --- Shared interaction --------------------------------------------------- */
.gw-btn { transition: filter 150ms ease, transform 120ms ease; }
.gw-btn:active { transform: translateY(1px); }

.gw-chip:hover { box-shadow: inset 0 0 0 1px var(--gw-ink); }
.gw-chip[aria-pressed="true"]:hover { box-shadow: none; filter: brightness(1.04); }

[data-step-panel] { animation: gwStepIn 300ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }

@keyframes gwStepIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* --- Legal + support pages ------------------------------------------------ */
.gw-prose { max-width: 68ch; }
.gw-prose h2 {
    font-family: var(--gw-font-display);
    font-weight: var(--gw-weight-display);
    font-size: clamp(1.25rem, 2.4vw, 1.625rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    margin: var(--gw-space-12) 0 var(--gw-space-3);
}
.gw-prose h3 {
    font-family: var(--gw-font-display);
    font-weight: var(--gw-weight-bold);
    font-size: 1.0625rem;
    margin: var(--gw-space-8) 0 var(--gw-space-2);
}
.gw-prose p, .gw-prose ul { color: var(--gw-ink-muted); margin: 0 0 var(--gw-space-4); }
.gw-prose ul { padding-left: 1.15rem; }
.gw-prose li { margin: 0 0 var(--gw-space-2); }
.gw-prose strong { color: var(--gw-ink); font-weight: var(--gw-weight-bold); }
.gw-prose a { border-bottom: 1px solid color-mix(in srgb, var(--gw-green) 50%, transparent); }
.gw-prose .gw-callout {
    border-left: 2px solid var(--gw-accent);
    padding: var(--gw-space-1) 0 var(--gw-space-1) var(--gw-space-6);
    margin: var(--gw-space-8) 0;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-reveal="pending"] { opacity: 1; transform: none; }
    *, *::before, *::after {
        animation-duration: 1ms !important;
        transition-duration: 1ms !important;
    }
}

/* ============================================================================
   Mobile refinements.

   Measured at 390px in Chrome, not guessed. The port from the design canvas
   already reflowed correctly (no horizontal overflow, signup and FAQ collapse
   properly) — these fix density and touch targets, which a desktop-first
   design canvas does not surface.
   ========================================================================= */

/* The hero is the only panel underneath the fixed nav. Its own padding happens
   to clear the nav at desktop sizes, but not once mobile tightens it — so pin a
   floor rather than relying on the coincidence. */
#gw-top > .gw-panel { padding-top: calc(var(--gw-nav-h) + var(--gw-space-6)); }

@media (max-width: 640px) {
    /* The step number carries 3rem of air so it reads as a column header on
       desktop. Stacked on mobile that made every step ~205px tall, most of it
       empty, and pushed the section well past a screen height. */
    .gw-step__num { margin-bottom: var(--gw-space-4); }

    #gw-how .gw-step,
    .gw-steps .gw-step { padding-block: var(--gw-space-6); }

    /* Panels sit tighter — the desktop rhythm reads as dead space on a phone. */
    .gw-panel { padding-block: clamp(2.75rem, 11vw, 4rem); }
}

@media (max-width: 560px) {
    /* Three metadata columns fall to 2 + 1, orphaning the last pair. A single
       column reads as the spec list it is. */
    #gw-hero .gw-meta { grid-template-columns: minmax(0, 1fr); gap: var(--gw-space-4); }

    /* The split rule's gap is a desktop device — it reads as a broken line at
       this width. */
    .gw-rule--split { background: var(--gw-hairline); }

    /* One decorative artboard at 414px tall is a lot of empty screen when it
       carries no content. Scale it back rather than dropping the visual. */
    #gw-screens .gw-plate { height: 300px; width: 165px; }
    #gw-screens .gw-plate > div { transform: scale(0.485); }
}

@media (max-width: 780px) {
    /* 9px dots are well under a comfortable touch target. Grow the dot and give
       it a taller hit area without changing the horizontal rhythm much. */
    .gw-dots { gap: var(--gw-space-4); }
    .gw-dot {
        width: 12px;
        height: 12px;
        padding-block: 15px;
        box-sizing: content-box;
        background-clip: content-box;
    }

    /* Keep the carousel arrows and their label from crowding on one line. */
    .gw-carousel-head { gap: var(--gw-space-4); }
}

/* ============================================================================
   Mobile navigation.

   The inline nav hides below 880px. Without this the section links are
   unreachable on a phone — the design canvas hid them and offered nothing in
   their place. Full-bleed panel with display-scale links, which is how the
   identity sets a list of destinations.
   ========================================================================= */

.gw-menu-btn {
    display: none;
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--gw-ink);
    position: relative;
    flex: none;
}

/* Two bars that cross into an X. The middle bar of a three-bar burger just
   fades, which reads as a glitch at this stroke weight. */
.gw-menu-btn__bars,
.gw-menu-btn__bars::before,
.gw-menu-btn__bars::after {
    position: absolute;
    left: 50%;
    width: 22px;
    height: 2px;
    background: currentColor;
    transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 160ms ease;
}

.gw-menu-btn__bars { top: 50%; margin-left: -11px; background: transparent; }

.gw-menu-btn__bars::before,
.gw-menu-btn__bars::after { content: ""; left: 0; margin-left: 0; }
.gw-menu-btn__bars::before { transform: translateY(-5px); }
.gw-menu-btn__bars::after { transform: translateY(5px); }

.gw-menu-btn[aria-expanded="true"] .gw-menu-btn__bars::before { transform: rotate(45deg); }
.gw-menu-btn[aria-expanded="true"] .gw-menu-btn__bars::after { transform: rotate(-45deg); }

.gw-menu {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: var(--gw-ground);
    padding-top: var(--gw-nav-h);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.gw-menu[hidden] { display: none; }

.gw-menu__inner {
    max-width: var(--gw-measure);
    margin: 0 auto;
    padding: var(--gw-space-8) var(--gw-gutter) var(--gw-space-16);
    display: flex;
    flex-direction: column;
}

.gw-menu__inner a:not(.gw-btn) {
    display: block;
    padding: var(--gw-space-6) 0;
    border-bottom: 1px solid var(--gw-hairline);
    color: var(--gw-ink);
    font-family: var(--gw-font-display);
    font-weight: var(--gw-weight-display);
    /* Wayfinding, not a statement. Display-size nav items look striking but push
       the last link and the CTA toward the fold on a phone. */
    font-size: clamp(1.25rem, 5vw, 1.5rem);
    line-height: 1;
    letter-spacing: var(--gw-tracking-display);
    text-transform: uppercase;
}

.gw-menu__inner a:not(.gw-btn):hover,
.gw-menu__inner a:not(.gw-btn):focus-visible { color: var(--gw-accent-text); }

.gw-menu__cta { margin-top: var(--gw-space-8); }

/* Keep the page behind the open panel from scrolling. */
body.gw-menu-open { overflow: hidden; }

@media (max-width: 880px) {
    .gw-menu-btn { display: block; }
    /* The header CTA duplicates the one inside the panel and crowds the bar. */
    #gw-nav-cta { display: none; }
}

@media (min-width: 881px) {
    /* Never leave the panel open when the inline nav comes back. */
    .gw-menu { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .gw-menu-btn__bars,
    .gw-menu-btn__bars::before,
    .gw-menu-btn__bars::after { transition: none; }
}

/* --- Walkthrough stage ----------------------------------------------------
   The four event screens occupy the same grid cell and cross-fade. Height is
   released from the artboard's fixed aspect ratio here: these carry real copy
   from 03 Templates, and at 340px wide the content is taller than 1080:2348.
   ------------------------------------------------------------------------ */
.gw-walk__stage {
    display: grid;
    width: 340px;
    max-width: 100%;
}

.gw-walk__stage > .gw-screen {
    grid-area: 1 / 1;
    aspect-ratio: auto;
    min-height: 560px;
    border: 1px solid var(--gw-hairline);
}

.gw-walk__stage .gw-screen__body { gap: var(--gw-space-4); }

/* The stacked screens cross-fade. JS owns [data-fade]; this is what makes it
   visible. visibility, not just opacity, so the three inactive screens cannot
   take focus or be read out while they are behind the active one. */
.gw-walk__stage > .gw-screen {
    transition: opacity 320ms ease, visibility 320ms;
}

.gw-walk__stage > .gw-screen[data-fade="false"] {
    opacity: 0;
    visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .gw-walk__stage > .gw-screen { transition: none; }
}

.gw-screen__note {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--gw-ink-muted);
}

/* The chips inside the artboard are a picture of the UI, not controls. */
.gw-walk__stage .gw-chip { cursor: default; }
.gw-walk__stage .gw-btn { cursor: default; }

/* ============================================================================
   Composition fixes.

   The page had run to nine structurally identical panels — eyebrow, headline,
   content, hard-left, same padding. These give three sections a shape of their
   own, which is how the pack's own pieces differ from each other.
   ========================================================================= */

/* --- Proof: the number and the claim as one object ------------------------
   The poster fills its frame with the figure. Adrift in a wide panel it read
   as small, so it now sits against the statement at poster scale. */
.gw-proof {
    display: grid;
    gap: clamp(var(--gw-space-6), 4vw, var(--gw-space-12));
    align-items: center;
}

@media (min-width: 860px) {
    .gw-proof { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
}

.gw-proof .gw-stat {
    font-size: clamp(6rem, 20vw, 15rem);
    line-height: 0.76;
    margin: 0;
}

.gw-proof__claim { max-width: 22ch; }

.gw-panel--proof { padding-block: clamp(4rem, 10vw, 8rem); }

/* --- Campaign strip: the poster artboards ---------------------------------
   A horizontally scrolling rail of 3:4 artboards. Deliberately a different
   shape from every other section on the page. */
.gw-campaign__head {
    display: grid;
    gap: var(--gw-space-6);
    max-width: 62ch;
    margin-bottom: clamp(var(--gw-space-8), 4vw, var(--gw-space-12));
}

@media (min-width: 900px) {
    .gw-campaign__head {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: end;
        max-width: none;
        gap: clamp(var(--gw-space-8), 5vw, var(--gw-space-16));
    }
}

.gw-campaign__rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 1fr);
    gap: var(--gw-space-6);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--gw-space-4);
    /* bleed the rail to the panel edge so it reads as a shelf, not a card row */
    margin-inline: calc(var(--gw-gutter) * -1);
    padding-inline: var(--gw-gutter);
}

.gw-campaign__rail > .gw-poster {
    scroll-snap-align: start;
    max-width: none;
    width: 100%;
    /* A poster paints its own ground, so the Brand Light one lands invisibly on
       a Brand Light panel. The hairline gives all three the same artboard edge
       — the same device the walkthrough stage uses. */
    border: 1px solid var(--gw-hairline);
}

@media (min-width: 900px) {
    .gw-campaign__rail { grid-auto-columns: minmax(300px, 1fr); overflow-x: visible; }
}

/* Poster type is set for a 1080px artboard; these render around 300px. */
.gw-campaign__rail .gw-display--sm { font-size: clamp(0.9rem, 1.5vw, 1.15rem); }
.gw-campaign__rail .gw-stat { font-size: clamp(3rem, 7vw, 5rem); line-height: 0.8; }
.gw-campaign__rail .gw-caption { font-size: 0.5625rem; letter-spacing: 0.1em; }
.gw-campaign__rail .gw-quote__mark { width: 30px; height: 17px; }

/* --- How it works and Questions used only the left half of the page ------- */
@media (min-width: 1040px) {
    #gw-how .gw-panel__inner > .gw-display,
    #gw-questions .gw-panel__inner > .gw-display { max-width: 18ch; }
}

/* --- Store links -----------------------------------------------------------
   Secondary to the OneLink button: same row on a wide screen, stacked under it
   on a phone. Underlined rather than buttoned so they never compete with the
   primary action.
   ------------------------------------------------------------------------ */
.gw-cta-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gw-space-6);
}

.gw-cta-group__stores {
    display: flex;
    gap: var(--gw-space-6);
}

.gw-cta-group__stores a {
    color: var(--gw-ink-muted);
    text-decoration: underline;
    text-underline-offset: 4px;
    font-size: 0.9375rem;
    /* 44px tap target without pushing the row taller than the button */
    padding: var(--gw-space-3) 0;
}

.gw-cta-group__stores a:hover,
.gw-cta-group__stores a:focus-visible { color: var(--gw-ink); }