/* GTM-only additions. Kept separate from styles.css so that file stays a clean
   copy of mapily-static and can be diffed against it. */
/* ---------------------------------------------------------------------------
   Consistency overrides. styles.css is left byte-identical to mapily-static so
   it stays diffable, so the handful of values it hardcodes are corrected here.
--------------------------------------------------------------------------- */

/* One typeface across the landing page and the map pages. */
body, h1, h2, h3, h4, p, a, button, input, .btn, .logo, .footer-logo {
    font-family: var(--font-sans);
}

/* styles.css hardcodes these two; everything else flows through :root. */
.btn-primary { background: var(--color-action); }
.btn-primary:hover { background: var(--color-action-hover); }
.demo-close-button { color: var(--color-ink-muted); }

/* Shared radius scale (the landing used 14/16 where the app uses 12/16/24). */
.btn, .btn-large { border-radius: var(--radius-md); }
.live-map-card, .example, .step, .demo-map-container { border-radius: var(--radius-lg); }

/* The eyebrow pill and section labels were #007aff at 13px — 4.02:1, under AA.
   --color-accent is #c94a24 (4.68:1). */
.tagline { background: var(--color-accent-soft); }
.tagline-text { color: var(--color-accent-on-soft); }   /* on --color-accent-soft */
.section-label { color: var(--color-accent); }          /* on page background */
.step-number { color: var(--color-accent); }

/* ---- Join the beta ---------------------------------------------------- */
.beta-scrim { position: fixed; z-index: 1200; inset: 0; display: flex;
    align-items: center; justify-content: center; padding: var(--space-4);
    background: oklch(24% .018 55 / .34); overflow-y: auto; }
.beta-scrim[hidden] { display: none; }
.beta-sheet { width: 100%; max-width: 460px; max-height: 92dvh; display: flex;
    flex-direction: column; overflow: hidden; border-radius: var(--radius-xl);
    background: var(--color-surface); box-shadow: var(--shadow-float); }
.beta-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 18px; border-bottom: 1px solid var(--color-border); }
.beta-head h2 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.beta-close { width: 40px; height: 40px; border: 0; border-radius: var(--radius-sm);
    background: transparent; font-size: 26px; line-height: 1; color: var(--color-ink-muted); }
.beta-close:hover { background: var(--color-surface-muted); }
.beta-body { overflow-y: auto; padding: 18px calc(18px + env(safe-area-inset-right))
    calc(22px + env(safe-area-inset-bottom)) 18px; }
.beta-intro { margin: 0 0 16px; color: var(--color-ink-muted); font-size: 15px; line-height: 1.55; }
.beta-field { display: block; margin-bottom: 13px; }
.beta-field > span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.beta-field em { font-style: normal; font-weight: 400; color: var(--color-ink-faint); }
.beta-field input, .beta-field select, .beta-field textarea {
    width: 100%; min-height: 46px; padding: 11px 12px; font: inherit; font-size: 16px;
    color: var(--color-ink); background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.beta-field textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.beta-field input:focus, .beta-field select:focus, .beta-field textarea:focus {
    outline: 3px solid oklch(58% .16 25 / .22); border-color: var(--color-accent); }
.beta-field input[aria-invalid="true"] { border-color: var(--color-danger); }
.beta-row { display: flex; gap: 10px; }
.beta-platform { flex: 0 0 40%; } .beta-handle { flex: 1; }
.beta-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.beta-error { margin: 4px 0 10px; color: var(--color-danger); font-size: 13px; }
.beta-submit { width: 100%; margin-top: 4px; }
.beta-submit[disabled] { opacity: .6; }
.beta-small { margin: 12px 0 0; color: var(--color-ink-faint); font-size: 12px; line-height: 1.5; }
.beta-small a { color: var(--color-accent); }
.beta-done { text-align: center; padding: 12px 0 6px; }
.beta-tick { width: 52px; height: 52px; margin: 0 auto 14px; display: grid; place-items: center;
    border-radius: 50%; background: var(--color-accent-soft);
    color: var(--color-accent-on-soft); font-size: 24px; }
.beta-done h3 { margin: 0 0 8px; font-size: 19px; }
.beta-done p { margin: 0 0 18px; color: var(--color-ink-muted); line-height: 1.55; }
@media (max-width: 420px) { .beta-row { display: block; } .beta-platform, .beta-handle { flex: none; } }

/* ---- Why it matters ---------------------------------------------------- */
.story { padding-top: 8px; }
.story .section-intro { margin-bottom: 26px; }
.story-body { max-width: 62ch; }
.story-body p { margin: 0 0 16px; font-size: 18px; line-height: 1.65; color: var(--text-muted); }
.story-body p:last-child { margin-bottom: 0; }
.story-turn { color: var(--color-ink) !important; font-weight: 500; }
.story-turn em { font-style: normal; color: var(--color-accent); font-weight: 600; }
@media (max-width: 640px) { .story-body p { font-size: 17px; } }

/* ===========================================================================
   LANDING ELEVATION
   ---------------------------------------------------------------------------
   The lane: a paper map with real pins pushed into it. Every move below is that
   one idea — the page is the map's own paper, the accents are the pin red, the
   motion is pins dropping and the map travelling. Nothing decorative that a map
   would not do.

   Scoped to `body.landing` wherever a rule could otherwise reach the /@handle
   pages through the shared brand.css. The creator pages are signed off; this
   file must not move them.
   ======================================================================== */

/* ---- 1. Paper -----------------------------------------------------------
   styles.css hardcodes a blue body wash (rgba(0,122,255,.08) radial + #fcfdff
   to #f7f9fc). That was the old blue brand and it survived the red repaint, so
   the whole page sat cool while the map it is selling is warm cream. Replaced
   with the basemap's own paper plus a graticule so faint it reads as stock
   texture rather than a grid.                                              */
body.landing {
    /* Held in a variable because the sticky journey stage has to paint the exact
       same paper to disappear against it. Both are background-attachment: fixed,
       so the two are positioned against the viewport and line up to the pixel,
       graticule included. */
    --paper:
        repeating-linear-gradient(0deg, transparent 0 63px,
            oklch(72% 0.03 78 / 0.055) 63px 64px),
        repeating-linear-gradient(90deg, transparent 0 63px,
            oklch(72% 0.03 78 / 0.055) 63px 64px),
        radial-gradient(120% 80% at 82% -10%, oklch(88% 0.055 52 / 0.34), transparent 62%),
        linear-gradient(180deg, var(--color-canvas) 0%, oklch(97.2% 0.012 82) 100%);
    background: var(--paper);
    background-attachment: fixed;
}

/* ---- 2. Type ------------------------------------------------------------
   styles.css pins 56/40/22/19px with a 34px mobile step, so the scale is fixed
   at two sizes and the ratio between h1 and h2 is 1.4 at desktop but 1.0 at
   mobile — the hierarchy collapses on the device this is built for. Fluid
   throughout, and the h1/h2 step never falls below 1.25.                   */
body.landing .hero h1 {
    font-size: clamp(2.6rem, 1.15rem + 5.1vw, 4.75rem);
    line-height: 1.03;
    letter-spacing: -0.045em;
    max-width: 15ch;
}
body.landing .section-intro h2,
body.landing .product-copy h2,
body.landing .premium-strip h2,
body.landing .cta h2 {
    font-size: clamp(1.95rem, 1.1rem + 2.7vw, 3.1rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
}
body.landing .subtitle {
    font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.28rem);
    max-width: 46ch;
    line-height: 1.6;
}
body.landing .section-intro p,
body.landing .product-copy p,
body.landing .cta p { max-width: 58ch; }
body.landing .step h3,
body.landing .audience h3 {
    font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem);
    letter-spacing: -0.02em;
}

/* ---- 3. Reveal ----------------------------------------------------------
   One shared entrance. Opacity and transform only — never layout. The stagger
   index comes from --i so a group arrives as a group, not a queue.         */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 620ms var(--ease-out-quint) calc(var(--i, 0) * 80ms),
        transform 620ms var(--ease-out-quint) calc(var(--i, 0) * 80ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---- 4. Hero ------------------------------------------------------------ */
body.landing .hero { padding-block: clamp(24px, 4vw, 56px) 12px; }
body.landing .hero-layout { gap: clamp(32px, 4vw, 64px); }

/* The pill said "Preview the public map experience" above a live map. A caption
   explaining a visual is a caption apologising for it. */
body.landing .hero-visual .demo-indicator { display: none; }

body.landing .demo-map-container {
    height: clamp(420px, 52vw, 560px);
    border: 1px solid var(--color-border);
    box-shadow: 0 28px 60px oklch(38% 0.05 60 / 0.13), 0 2px 6px oklch(38% 0.05 60 / 0.07);
}

/* The hero map is live but reads as a screenshot until you touch it. A cursor
   affordance and a hairline that warms on hover say "this moves". */
body.landing .demo-map-container:hover { border-color: var(--color-border-strong); }
body.landing #demoMap { cursor: grab; }
body.landing #demoMap:active { cursor: grabbing; }

body.landing .cta-buttons { margin-block: clamp(24px, 3vw, 34px) 14px; }
body.landing .hero-cta-note { color: var(--color-ink-faint); }

/* ---- 5. Pin drop --------------------------------------------------------
   Leaflet writes translate3d onto the marker element itself, which is the same
   element that carries .mapily-pin — so animating transform here would fight
   the map's own positioning and the pins would land in the wrong place. The
   whole drop is therefore done inside the marker's 44px box, on background
   size and position: the pin starts larger and higher (further from the paper)
   and settles to its resting 28px at the bottom. Resting state is byte-identical
   to a creator page, which is the parity the maps have to keep. */
@keyframes mapily-pin-drop {
    0%   { opacity: 0; background-size: 52px 52px; background-position: center 26%; }
    55%  { opacity: 1; }
    78%  { background-size: 26px 26px; background-position: bottom center; }
    100% { opacity: 1; background-size: 28px 28px; background-position: bottom center; }
}
.mapily-pin.is-dropping {
    opacity: 0;
    animation: mapily-pin-drop 700ms var(--ease-drop) forwards;
}

/* ---- 6. The journey -----------------------------------------------------
   The story section was three grey paragraphs describing what a map does, next
   to 40% empty page. It is now the map doing it: the map is sticky, the three
   beats scroll past, and each beat flies the map. Same words, demonstrated.  */
.journey { margin-bottom: clamp(64px, 9vw, 108px); }
.journey .section-intro { margin-bottom: clamp(22px, 3vw, 40px); }

.journey-track {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
}

.journey-stage {
    position: sticky;
    top: clamp(16px, 5vh, 64px);
    order: 2;
}

.journey-map {
    height: clamp(360px, 56vh, 520px);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    overflow: hidden;
    background: var(--color-surface-muted);
    box-shadow: 0 28px 60px oklch(38% 0.05 60 / 0.13), 0 2px 6px oklch(38% 0.05 60 / 0.07);
}
.journey-map .leaflet-container { background: var(--color-surface-muted); }

.journey-readout {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 14px;
    min-height: 1.6em;
    font-size: var(--fs-sm);
    color: var(--color-ink-muted);
}
.journey-readout b {
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.journey-readout span { transition: opacity 260ms var(--ease-out-quint); }
.journey-readout[data-swapping="true"] span { opacity: 0; }

.journey-beats { order: 1; display: grid; }

/* Each beat is a full stage-height so exactly one is ever centred, which is what
   makes the observer's "most visible beat wins" unambiguous. */
.journey-beat {
    /* Sized so exactly one beat can cross the observer's centre band, which is a
       10% strip of the viewport. The beats used to be near-full-stage height,
       which was right when they were four lines each; after the copy trim that
       left a screen of empty paper between them. Anything comfortably above the
       band still guarantees one active beat at a time. */
    min-height: clamp(260px, 40vh, 380px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: clamp(12px, 3vh, 32px);
    /* Dimmed, not hidden: the beat you are not on is still readable if you
       stop and look at it. Below about 0.4 the red emphasis turns pink. */
    opacity: 0.45;
    transition: opacity 420ms var(--ease-out-quint);
}
.journey-beat[data-active="true"] { opacity: 1; }

.journey-beat .beat-index {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-ink-faint);
}
.journey-beat .beat-index::before {
    content: "";
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--color-border-strong);
    transition: background 420ms var(--ease-out-quint), box-shadow 420ms var(--ease-out-quint);
}
.journey-beat[data-active="true"] .beat-index { color: var(--color-accent); }
.journey-beat[data-active="true"] .beat-index::before {
    background: var(--color-accent-bright);
    box-shadow: 0 0 0 5px var(--color-accent-soft);
}

.journey-beat p {
    margin: 0;
    font-size: clamp(1.15rem, 0.95rem + 0.85vw, 1.6rem);
    line-height: 1.45;
    letter-spacing: -0.015em;
    color: var(--color-ink);
    max-width: 24ch;
}
.journey-beat p em {
    font-style: normal;
    color: var(--color-accent);
    font-weight: 600;
}
.journey-beat .beat-aside {
    margin-top: 14px;
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--color-ink-muted);
    max-width: 34ch;
}

@media (max-width: 900px) {
    .journey-track { grid-template-columns: 1fr; gap: 0; }
    .journey-beats { order: 2; }
    .journey-beat { min-height: 38dvh; opacity: 1; }
    .journey-beat p { max-width: none; }

    /* Stacked, the stage sticks to the top of the viewport and the beats run
       underneath it, so it needs opaque ground: left transparent, the beat text
       scrolls up through the map. Painting the page's own paper rather than a
       flat colour means the panel itself stays invisible. */
    .journey-stage {
        order: 1;
        top: 0;
        z-index: 2;
        padding-block: 10px 8px;
        background: var(--paper);
        background-attachment: fixed;
    }
    .journey-map { height: clamp(280px, 40dvh, 400px); }
}

/* ---- 7. How it works ----------------------------------------------------
   Was three columns with identical top borders — the card grid in disguise. The
   border becomes one continuous line across all three, drawn as you arrive, so
   the steps read as a sequence rather than a set.                          */
body.landing .how-it-works { position: relative; }
body.landing .steps-grid {
    position: relative;
    gap: clamp(22px, 3vw, 40px);
    padding-top: 26px;
}
body.landing .steps-grid::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 2px;
    transform-origin: left center;
    transform: scaleX(var(--draw, 0));
    background: var(--color-border-strong);
    transition: transform 1100ms var(--ease-out-quint);
}
body.landing .step { border-top: 0; padding-top: 22px; position: relative; }
body.landing .step::before {
    content: "";
    position: absolute;
    top: -5px; left: 0;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 2px solid var(--color-border-strong);
    transition: border-color 420ms var(--ease-out-quint) var(--dot, 0ms),
                background 420ms var(--ease-out-quint) var(--dot, 0ms);
}
body.landing .steps-grid.is-drawn .step::before {
    border-color: var(--color-accent-bright);
    background: var(--color-accent-bright);
}
body.landing .step .step-number {
    font-size: var(--fs-sm);
    margin-bottom: 12px;
}

/* ---- 8. Device ----------------------------------------------------------
   The old mockups were raster PNGs of the pre-red UI: blue pins, blue chrome,
   an edit-mode "Created: 29/01/2025" row a visitor never sees. The page argued
   for a red-pin map while showing a blue one. The frame is CSS now and the
   screen is a current capture, so the mockup cannot drift from the product
   again and it stays sharp at any density.                                 */
.device {
    position: relative;
    width: min(310px, 76vw);
    aspect-ratio: 390 / 844;
    padding: 9px;
    margin-inline: auto;
    border-radius: 46px;
    background: linear-gradient(150deg, oklch(38% 0.012 62), oklch(22% 0.010 62) 42%, oklch(30% 0.012 62));
    box-shadow:
        0 42px 70px oklch(34% 0.05 60 / 0.24),
        0 4px 10px oklch(34% 0.05 60 / 0.14),
        inset 0 0 0 1px oklch(58% 0.012 62 / 0.5);
    /* set by the pointer-tilt handler; the fallback keeps it flat */
    transform: perspective(1400px)
               rotateX(var(--rx, 0deg))
               rotateY(var(--ry, 0deg));
    transition: transform 640ms var(--ease-out-quint);
    will-change: transform;
}
.device[data-tilting="true"] { transition: transform 120ms linear; }
.device img {
    display: block;
    width: 100%; height: 100%;
    /* styles.css caps .product-visual img at 420px with object-fit: contain, at
       equal specificity to this rule. gtm.css wins on the properties it names,
       but max-height is not one of them, so the screen stopped 250px short of
       the bottom of its own frame and left a black band. */
    max-height: none;
    object-fit: cover;
    object-position: top center;
    border-radius: 38px;
    background: var(--color-surface-muted);
}
/* Speaker slot, not a full notch: a notch dates the mockup to one handset. */
.device::after {
    content: "";
    position: absolute;
    top: 19px; left: 50%;
    width: 58px; height: 5px;
    transform: translateX(-50%);
    border-radius: var(--radius-round);
    background: oklch(46% 0.012 62 / 0.85);
}

body.landing .product-story { gap: clamp(32px, 5vw, 72px); align-items: center; }
body.landing .product-visual { display: flex; justify-content: center; }
body.landing .product-list li,
body.landing .premium-list li { padding-left: 26px; }
body.landing .product-list li::before,
body.landing .premium-list li::before {
    top: 9px;
    width: 9px; height: 9px;
    background: var(--color-accent-bright);
}

/* ---- 9. Audiences -------------------------------------------------------
   Was three phone photos of the same food map under three different headings,
   which claimed customers that do not exist yet. Each audience now gets a
   drawn map motif instead: the shape a map takes for that kind of creator,
   honest as a diagram in a way a fake screenshot is not.                   */
body.landing .audiences-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: clamp(24px, 3.5vw, 44px);
}
.audience { display: flex; flex-direction: column; gap: 4px; }
.audience-motif {
    width: 100%;
    aspect-ratio: 16 / 10;
    margin-bottom: 18px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background:
        repeating-linear-gradient(0deg, transparent 0 21px, oklch(72% 0.03 78 / 0.10) 21px 22px),
        repeating-linear-gradient(90deg, transparent 0 21px, oklch(72% 0.03 78 / 0.10) 21px 22px),
        var(--color-surface);
    overflow: hidden;
}
.audience-motif svg { display: block; width: 100%; height: 100%; }
.audience-motif .motif-line {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 1.3;
    stroke-linecap: round;
}
.audience-motif .motif-route {
    fill: none;
    stroke: var(--color-accent-bright);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 5 7;
    opacity: 0.85;
}
.audience-motif .motif-pin { fill: var(--color-accent-bright); }
/* the highlight and the stem, matching pins/pin.png so the diagrams and the
   live maps are drawing the same object */
.audience-motif .motif-pin-dot { fill: oklch(100% 0 0 / 0.72); }
.audience-motif .motif-stem { fill: var(--color-ink); }
.audience h3 { margin-bottom: 8px; }

/* ---- 10. Premium + close ------------------------------------------------ */
body.landing .premium-strip {
    padding-block: clamp(28px, 4vw, 44px);
    gap: clamp(28px, 4vw, 56px);
}
body.landing .cta {
    position: relative;
    padding-block: clamp(28px, 5vw, 64px) clamp(16px, 3vw, 32px);
}
body.landing .cta h2 { margin-inline: auto; }
body.landing .cta p { margin-inline: auto; }

/* ---- 11. Chrome --------------------------------------------------------- */
body.landing nav { padding-block: clamp(18px, 2.5vw, 28px); }
body.landing footer {
    margin-top: clamp(48px, 7vw, 88px);
    background: var(--color-surface-muted);
    border-top: 1px solid var(--color-border);
}
body.landing .footer-links a { color: var(--color-ink-muted); }
body.landing .footer-links a:hover { color: var(--color-accent); }

/* ---- 12. Reduced motion -------------------------------------------------
   Everything above is an entrance or a camera move, so all of it is optional.
   The journey still switches views, just without the flight — the content is
   the pins, and a user who asked for less motion should still get them.    */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .mapily-pin.is-dropping { opacity: 1; animation: none; }
    body.landing .steps-grid::before { transform: scaleX(1); transition: none; }
    .device { transition: none; }
    .journey-beat { opacity: 1; }
    .btn:hover { transform: none; }
}

/* ---- 13. Nav action -----------------------------------------------------
   The page asked for the beta twice, both below the fold. One in the nav costs
   nothing and catches the visitor who has already decided. Hidden on small
   screens, where the nav stacks and the hero CTA is a thumb away anyway.   */
body.landing .nav-join { padding: 9px 16px; font-size: 14px; }
@media (max-width: 768px) {
    body.landing .nav-join { display: none; }
    body.landing nav { flex-direction: row; justify-content: center; }
}

/* ---- 14. The close ------------------------------------------------------
   The last fold was a headline and a button alone in about 400px of nothing,
   which is a weak note to end a page on. It ends on the product's own material
   instead: a panel of map paper with pins scattered clear of the text. The
   scatter is generated with a fixed seed and a spacing rule, so it never
   collides with itself and never lands under the words.                    */
body.landing .cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(48px, 7vw, 96px) clamp(20px, 4vw, 56px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background:
        repeating-linear-gradient(0deg, transparent 0 31px,
            oklch(72% 0.03 78 / 0.09) 31px 32px),
        repeating-linear-gradient(90deg, transparent 0 31px,
            oklch(72% 0.03 78 / 0.09) 31px 32px),
        var(--color-surface);
}
body.landing .cta-field {
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Below about 0.6 the red washes out to a pink that is not in the palette. */
    opacity: 0.78;
    pointer-events: none;
}
body.landing .cta-field svg { width: 100%; height: 100%; display: block; }
body.landing .cta-field .motif-pin { fill: var(--color-accent-bright); }
body.landing .cta-field .motif-stem { fill: var(--color-ink); }
body.landing .cta-inner { position: relative; }
body.landing .cta-inner h2 { max-width: 20ch; margin-inline: auto; }
body.landing .cta-inner p { margin-bottom: clamp(20px, 3vw, 30px); }

/* Under about 720px the panel is narrower than the scatter's clear centre, so
   pins start landing behind the headline. Drop them and keep the paper. */
@media (max-width: 720px) {
    body.landing .cta-field { display: none; }
}

/* ---- 15. Demo chip avatar ----------------------------------------------
   The chip used a Font Awesome user glyph, which was the only reason the whole
   icon CDN was on the page (privacy and tos linked it and used none of it).
   The real product shows an avatar disc here, so the demo shows one too, and
   the fit button now carries the app's own Icon.tsx path inline.           */
body.landing .demo-avatar {
    width: 26px; height: 26px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 50%;
    /* --color-accent, not --color-accent-bright: the bright is the pin red and
       is documented as large-fill-only at 3.81:1, so white on it fails AA for a
       12px letter. This is also what the product's own .creator-avatar uses. */
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}
body.landing .demo-username-container { padding: 8px 14px 8px 8px; }
body.landing .demo-button-container .floating-button:hover { color: var(--color-accent); }

/* ---- 16. FAQ ------------------------------------------------------------
   Sits immediately before the closing CTA on purpose: the objections get
   answered in the moment someone is deciding, not buried on another page.
   Five short pairs, all open. An accordion would hide five two-line answers
   behind five clicks and save nothing.                                     */
body.landing .faq { margin-bottom: clamp(48px, 7vw, 84px); }
body.landing .faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: clamp(20px, 3vw, 40px) clamp(28px, 4vw, 64px);
}
.faq-item h3 {
    font-size: 1.05rem;
    letter-spacing: -0.012em;
    margin-bottom: 7px;
}
.faq-item p {
    margin: 0;
    font-size: var(--fs-md);
    line-height: 1.62;
    color: var(--color-ink-muted);
    max-width: 46ch;
}

/* ---- 17. Footer trust line ---------------------------------------------- */
body.landing .footer-legal {
    width: min(1200px, calc(100% - 40px));
    margin: 22px auto 0;
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
}
body.landing .footer-legal p {
    margin: 0;
    font-size: var(--fs-xs);
    line-height: 1.55;
    /* --color-ink-faint clears AA on the page canvas but only reaches 4.38:1 on
       the footer's darker --color-surface-muted. One tier up fixes it. */
    color: var(--color-ink-muted);
}
body.landing .footer-links a { white-space: nowrap; }
@media (max-width: 768px) {
    body.landing .footer-legal { justify-content: center; text-align: center; }
}