/* Copyright © 2026 GetSilk Limited (trading as JustSay). All rights reserved. */
/* Shared stylesheet for all JustSay pages. The nav, footer and contact
   popover markup are injected by site.js — one source of truth. */

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

:root {
    /* Bright neutral palette (12 Aug 2026 — replaced the warm cream/
       camel set; the site was reading dull and brownish against navy).
       NAMES ARE HISTORICAL: --cream is now pure white and --warm is no
       longer warm. Kept to avoid a rename touching every file;
       renaming is optional cleanup for another day. */
    --cream: #FFFFFF;
    --warm: #FCFCFC;
    --pale: #FBFBFA;          /* panel hover fill + fact strip */
    --panel: #FBFBFA;         /* content boxes (market cards, tiles) — the
                                 lightest grey step */
    --panel-mid: #F7F7F7;     /* middle step: photo band + Uses placeholder
                                 panels, so the greys read as a ladder, not
                                 one repeated tone */
    --step-top: #F3F3F2;      /* stacked-sheet card: grey at the top edge (softened 19 Aug — near the vanishing limit; if still left-weighted, shorten the 44px stop, do NOT lighten further) */
    --step-mid: #FAFAFA;      /* stacked-sheet card: midpoint of the falloff */
    /* Intelligence heatmap scale. --heat-1 deliberately matches the
       dashboard's NEG_COLOR (ThemeBreakdownBar.vue) — if a prospect
       sees both, they must agree. */
    --heat-5: var(--green);
    --heat-4: #5FA183;
    --heat-3: #E8B04B;
    --heat-2: #D9834E;
    --heat-1: #B84A3E;
    --neutral-bar: #C9CFD4;
    --hero-flat: #F3F3F3;     /* hero placeholder block (was the camel band) */
    --text: #1A1A1A;
    --text-light: #5A5A5A;
    --nav-link: #4A5A6B;
    --navy: #1B3A5C;
    --navy-dark: #14304D;
    --navy-light: #EDF1F5;
    --label: #5E7082;         /* darkened from #7A8A9A for the bright palette —
                                 lightest value passing WCAG AA 4.5:1 on --pale
                                 (4.68) and on white (5.1) */
    --border: #E9E9E7;
    --green: #1F7A5C;
    /* Nav sublink rows are a FIXED height so all three drop-down
       panels are identical regardless of item count or how many
       descriptions wrap. Row = 9px top pad + 13px title line
       + 2 lines of 12px/1.45 description + 9px bottom pad.
       The column always reserves FOUR rows, even for the
       three-item Why JustSay panel.
       If you change .nav-sublink padding or the .d font-size,
       recompute this. Do not "fix" a mismatch by nudging it. */
    --nav-sub-row: 72px;
    --nav-clear: 118px;       /* nav-wrap top pad (28) + pill height (72+2 border) + 16 overshoot — keeps the hero headline's distance from the pill constant; recompute if either changes */
    /* The ONLY two corner radii on the site (plus 50% for true circles).
       One shape language: containers vs controls. Do not add others. */
    --radius-lg: 12px;        /* containers: nav pill, cards, panels, QR tiles */
    --radius-sm: 8px;         /* controls: buttons, segmented pills, small tiles */
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--cream);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ============================== NAV ==============================
   Floating white pill, modelled on usecadence.com. Sticky with 14px
   of page background visible on top/left/right. Hovering "How it
   works" / "Why JustSay" expands THIS pill downwards — the panel is
   inside the pill element, so the pill itself grows. */

/* Stickiness lives on the HEADER (the nav's parent in page markup),
   not on .nav-wrap: a sticky element can only travel within its
   parent's height, and .nav-wrap's parent is the header itself — so
   sticky on .nav-wrap had nowhere to go and silently never stuck
   (found 12 Aug). The wrap's 14px top padding is what keeps the
   load-time gap above the pill constant while stuck. */
#site-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    /* FIXED flow height = closed nav (28 wrap pad + 72 bar + 2 border
       = 102; the same number --nav-clear's arithmetic assumes). Joe,
       28 Aug: an open panel must OVERLAY the page, not push it down -
       the pill still grows visually, but its growth overflows this
       fixed box instead of moving the hero. z-index 100 already
       paints the nav above the content it now overlaps. */
    height: 102px;
}
.nav-wrap {
    /* 40px sides (16 Aug, revised): arithmetic equality (28px) READ
       unequal against the photograph, so this is set by eye — the
       gap from pill edge to photo edge should LOOK like the gap from
       photo to page edge. If 40 overshoots, 34-36 is the range. */
    padding: 28px 40px 0;
}

.nav-pill {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 16px rgba(26, 26, 26, 0.10); /* deepened for the white page — the shadow, not a tint, keeps the pill defined on scroll */
    /* Fills the space inside .nav-wrap's 28px side padding (16 Aug)
       — the pill's width is now defined by the hero proportion rule
       in .nav-wrap, not by a viewport percentage. */
    width: auto;
    max-width: none;
    margin: 0 auto;
    overflow: hidden; /* fact strip inherits the rounded bottom corners */
}

.nav-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 72px;
    padding: 0 18px;
}

/* Left column — small supporting links, pushed hard left */
.nav-links {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nav-links a {
    font-size: 13px;
    font-weight: 500;
    color: var(--nav-link);
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
}

.nav-links a:hover { color: var(--navy); }

.nav-links .chev {
    width: 8px; height: 8px;
    display: inline-block;
    transition: transform 0.15s ease;
}
.nav-pill.open-hiw .nav-trigger-hiw .chev,
.nav-pill.open-who .nav-trigger-who .chev,
.nav-pill.open-why .nav-trigger-why .chev { transform: rotate(180deg); }

/* Far-left mark — the bubble alone (favicon cut: three bars, two
   dots, drawn for small sizes). Links home, sits before the links. */
.nav-mark-link { display: flex; align-items: center; margin-right: 16px; }
.nav-mark-link img { height: 30px; width: auto; display: block; }

/* Centre column — the WORDMARK alone (bubble split off to the far
   left, decided 10 Aug 2026), largest element in the bar.
   OPTICAL CENTRING — DELIBERATE, DO NOT "FIX".
   With the bubble gone most of the old asymmetry went with it (this
   was translateX(14px) for the full lockup). What remains: the "J"'s
   heavy vertical stem against the "y"'s open descender tail makes a
   geometrically centred wordmark read a hair left; +2px balances it. */
.nav-logo-link {
    display: flex;
    align-items: center;
    height: 72px;
    transform: translateX(2px);
}
.nav-logo-link img { height: 55px; width: auto; display: block; } /* masthead scale; +20% 21 Aug (46 -> 55). Bar min-height 72 still governs pill height, so --nav-clear is UNCHANGED. */

/* Right column — actions */
.nav-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}
.nav-actions .nav-contact {
    font-size: 13px;
    font-weight: 500;
    color: var(--nav-link);
    text-decoration: none;
}
.nav-actions .nav-contact:hover { color: var(--navy); }
/* Login (19 Aug): a real control, deliberately not wired yet — Joe
   will point it at the dashboard login. It is a BUTTON, never
   <a href="#"> (a dead anchor scrolls the page to the top).
   Full-strength colour: it does visual work balancing the pill.
   44px hit target around the 21px glyph. */
.nav-login {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0;
    background: none; border: none; cursor: pointer;
    /* Now an <a> (27 Aug): text-decoration off, and colour declared
       here wins over generic link colour rules - pixel parity with
       the old <button> rendering. */
    color: var(--navy);
    text-decoration: none;
}
.nav-login:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.nav-demo-btn {
    font-size: 13px;
    font-weight: 600;
    color: var(--cream);
    background: var(--navy);
    text-decoration: none;
    padding: 9px 16px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}
.nav-demo-btn:hover { background: var(--navy-dark); }

/* Drop-down panels — children of the pill so it expands, not a
   separate floating box */
.nav-panel { display: none; }
.nav-pill.open-hiw .nav-panel-hiw { display: block; }
.nav-pill.open-who .nav-panel-who { display: block; }
.nav-pill.open-why .nav-panel-why { display: block; }

.nav-panel-body {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 28px;
    padding: 10px 18px 18px;
    border-top: 1px solid var(--border);
    /* Belt and braces with .nav-sublinks below: the body can never
       collapse under four rows even if the left column is emptied. */
    min-height: calc(var(--nav-sub-row) * 4);
}

/* Four rows ALWAYS reserved - the three-item Why JustSay panel
   carries one empty row at the foot of its column deliberately; the
   200px QR block on the right balances it. */
.nav-sublinks { display: flex; flex-direction: column; min-height: calc(var(--nav-sub-row) * 4); }
.nav-sublink {
    display: block;
    text-decoration: none;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    border-bottom: 1px solid var(--border);
    min-height: var(--nav-sub-row);
}
.nav-sublink:last-child { border-bottom: none; }
.nav-sublink:hover { background: var(--pale); border-bottom-color: transparent; }
.nav-sublink .t { font-size: 13px; font-weight: 600; color: var(--text); display: block; }
.nav-sublink .d {
    font-size: 12px; color: var(--text-light); line-height: 1.45;
    /* two lines is the CEILING - a third breaks the fixed row */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

.nav-panel-demo {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: flex-end;
    padding-top: 6px;
}
.nav-panel-demo img {
    /* 200px display, fetched at 400 (data-qr-size) - a 96px PNG
       stretched here would blur, and a blurry QR scans badly */
    width: 200px; height: 200px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px;
}
.nav-panel-demo .t { font-size: 15px; font-weight: 600; color: var(--text); }
.nav-panel-demo .d { font-size: 12px; color: var(--text-light); max-width: 240px; line-height: 1.5; }
.nav-demo-open {
    display: inline-block; margin: 6px 0 4px;
    padding: 9px 16px; border-radius: var(--radius-sm);
    background: var(--navy); color: var(--cream);
    font-size: 13px; font-weight: 600; text-decoration: none;
}
.nav-demo-open:hover { background: var(--navy-dark); }

/* Staggered left-to-right reveal (21 Aug, ref Cadence): the panel
   opens INSTANTLY - only the contents cascade. A keyframe ANIMATION,
   never a transition: elements coming out of display:none cannot
   transition, but animations restart on every open. Default opacity
   of every element stays 1, so with animations off (reduced motion,
   old browser, blocked stylesheet) the nav still shows everything.
   Total settle 230ms delay + 180ms = 410ms - keep under 0.42s. */
@keyframes navPanelIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
.nav-sublink, .nav-panel-demo, .nav-fact, .nav-facts-source {
    animation: navPanelIn 180ms ease-out both;
}
.nav-sublink:nth-child(1) { animation-delay: 0ms; }
.nav-sublink:nth-child(2) { animation-delay: 30ms; }
.nav-sublink:nth-child(3) { animation-delay: 60ms; }
.nav-sublink:nth-child(4) { animation-delay: 90ms; }
.nav-panel-demo { animation-delay: 120ms; }
.nav-fact:nth-child(1) { animation-delay: 150ms; }
.nav-fact:nth-child(2) { animation-delay: 180ms; }
.nav-fact:nth-child(3) { animation-delay: 210ms; }
.nav-facts-source { animation-delay: 230ms; }

/* Fact strip — full-width foot of the panel, slightly darker */
.nav-facts {
    background: var(--pale);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    padding: 12px 18px 10px;
}
.nav-fact { font-size: 12px; color: var(--text-light); line-height: 1.5; }
.nav-fact strong { color: var(--text); font-weight: 600; display: block; }
.nav-facts-source {
    background: var(--pale);
    padding: 0 18px 10px;
    font-size: 10px;
    color: var(--label);
}

/* Mobile nav — hamburger left, logo centred, actions right */
.nav-burger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    width: 38px; height: 38px;
    color: var(--nav-link);
}

.nav-mobile-menu { display: none; }

/* ============================== PAGE BASICS ============================== */

.hero {
    /* HOSPITALITY page hero (the homepage moved to .split-hero,
       16 Aug). Flat block; sits UNDER the sticky nav via the negative
       margin so the pill has something to float over. */
    background: var(--hero-flat);
    margin-top: calc(-1 * var(--nav-clear));
    padding: calc(var(--nav-clear) + 72px) 24px 84px;
    text-align: center;
}
.hero {
    padding-top: calc(var(--nav-clear) + 96px);
    padding-bottom: 104px;
}
.hero h1 {
    /* Sits UNDER the logo, not over it — reduced ~1/3, 10 Aug review */
    font-size: clamp(1.45rem, 3.4vw, 2.15rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.025em;
    max-width: 640px;
    margin: 0 auto 1.1rem;
}
.hero p {
    font-size: 1.02rem;
    color: var(--text-light);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Inner-page header (no photo block).
   Headings and intro lines are CENTRED site-wide (the Cadence axis —
   it is what makes the centred wordmark read as intentional). Body
   copy inside cards stays left-aligned. */
.page-head { padding: 4rem 24px 1rem; max-width: 820px; margin: 0 auto; text-align: center; }
.page-head h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin-bottom: 1rem;
}
.page-head > p { font-size: 1.1rem; color: var(--text-light); max-width: 680px; margin: 0 auto; line-height: 1.7; }

.section { padding: 2.5rem 24px; max-width: 820px; margin: 0 auto; }
.section-label {
    font-size: 0.8rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--label); margin-bottom: 0.75rem;
    text-align: center;
}
.section h2 {
    font-size: clamp(1.5rem, 3.2vw, 2rem);
    font-weight: 700; letter-spacing: -0.02em;
    line-height: 1.2; margin-bottom: 1rem;
    text-align: center;
}
.section p { font-size: 1rem; color: var(--text-light); line-height: 1.7; margin-bottom: 1.1rem; max-width: 680px; }
.section p:last-child { margin-bottom: 0; }

/* QR band — full width, cream, hairlines top and bottom */
.qr-band { background: var(--cream); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
/* Centred restack (round 3): QR tile, then heading, then copy —
   everything on the site's centre axis, line length capped at 620px. */
.qr-band-inner {
    max-width: 820px; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: 20px;
    padding: 2.5rem 24px;
}
.qr-band-inner img {
    width: 104px; height: 104px; flex-shrink: 0;
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 8px;
}
.demo-open-btn {
    display: inline-block; padding: 0.8rem 1.8rem;
    background: var(--navy); color: var(--cream); text-decoration: none;
    border-radius: var(--radius-sm); font-size: 0.95rem; font-weight: 600;
}
.demo-open-btn:hover { background: var(--navy-dark); }
.qr-alt { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.qr-alt-caption { font-size: 0.82rem; color: var(--label); }
.qr-band-inner h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 0.4rem; }
.qr-band-inner p { font-size: 0.9375rem; color: var(--text-light); line-height: 1.6; max-width: 620px; margin: 0 auto; }
.qr-band-inner .small { font-size: 0.8rem; color: var(--label); margin-top: 0.4rem; }

/* ====================== HOMEPAGE (12 Aug build) ======================
   Visual language (refined 12 Aug, benchmarked against Cadence):
   - ONE panel signal: --panel fill. No borders, no shadows on content.
     White is reserved for the nav pill (+ the QR plate, so it scans).
   - --navy-light must NOT appear here (cool blue on a warm page).
   - Panels at --radius-lg, small chips at --radius-sm.
   - Hierarchy from SIZE and SPACE: big light headings (400) with a
     700 emphasised half, not small bold labels in ruled boxes. */

.ph-label { font-size: 0.82rem; color: var(--label); text-align: center; }

/* ============== SPLIT HERO (homepage, 16 Aug) ==============
   Photograph left, quiet panel right, filling the first screen.
   100svh not 100vh — vh is wrong on mobile browsers with a dynamic
   address bar. Slides under the sticky nav via --nav-clear; the nav
   pill's shadow is what keeps it legible over the photograph. */
.split-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Hairline frame, 14px inset at sides and bottom (16 Aug, ref
       Aime Leon Dore); TOP is full-bleed since 19 Aug, matching
       mobile — no top gap, no top hairline. margin-top = -(nav flow)
       = -(--nav-clear - 16px overshoot) puts the frame at y=0.
       Square corners, no radius, no shadow. min-height: only the
       14px bottom margin remains in the height sum. */
    min-height: calc(100svh - 14px);
    margin: calc(-1 * var(--nav-clear) + 16px) 14px 14px;
    border: 1px solid var(--border);
    border-top: none;
}
.split-hero-photo {
    position: relative; overflow: hidden; /* no divider — outer frame only */
}
.hero-frame {
    /* 4px breath of background between photograph and hairline at
       sides and bottom (ALD-style inset picture); TOP inset is 0 —
       the photo's pixels run to the screen edge (19 Aug). */
    position: absolute; inset: 0 4px 4px;
    width: calc(100% - 8px); height: calc(100% - 4px);
    object-fit: cover;
    opacity: 0;
    transition: opacity 2s ease;
}
.hero-frame.is-active { opacity: 1; }
.hero-dots {
    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 8px;
}
/* Real buttons: the visible bar is 24x8 but the hit area is 24x24
   (transparent padding) — a 8px-tall touch target is unhittable. */
.hero-dot {
    width: 24px; height: 24px; padding: 0; border: none;
    background: transparent; cursor: pointer;
    display: flex; align-items: center;
}
.hero-dot::after {
    content: ''; width: 24px; height: 8px; border-radius: var(--radius-sm);
    background: var(--cream); opacity: 0.25;
    transition: opacity 2s ease; /* fades in step with the crossfade */
}
.hero-dot.is-active::after { opacity: 0.9; }
.hero-dot:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
/* Panel content centred WITHIN ITS COLUMN — one alignment logic with
   the centred sections below. Three-part vertical spread (16 Aug,
   ref ALD): eyebrow top, headline+notification centre, QR bottom.
   Top padding derives from --nav-clear so the eyebrow always lands
   BELOW the floating pill, whatever the nav's dimensions become. */
.split-hero-panel {
    background: var(--cream);
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    text-align: center; gap: 1.5rem;
    /* +47 not +32: the hero rose by 15px (14 top margin + 1 top
       border reclaimed by the full-bleed top), absorbed here so the
       eyebrow/headline stay pixel-fixed. */
    padding: calc(var(--nav-clear) + 47px) 32px 40px;
}
.split-hero-panel h1 {
    /* Type-scale rebuild (19 Aug): the hero must be the LARGEST text
       on the page and "Your customers will tell you." must stay on
       ONE line at every width. Above 900px the panel is 50vw, so the
       size runs on a solved curve: 27px at 901 (measured one-line max
       there is 29.3px in Inter 700), 44px at 1440+. Below 900px the
       media block pins 25px — the spec's 26px target renders 343px
       against a 335px panel at 375 (real font metrics) and WRAPS, so
       25 is the honest maximum; reported to Joe. */
    font-size: clamp(26px, calc(3.154vw - 1.42px), 44px);
    font-weight: 700; line-height: 1.18; letter-spacing: -0.025em;
    max-width: 660px;
}
/* The second line is the turn, not part of one flat sentence —
   same weight/leading/tracking, only the size differs. */
.h1-sub { font-size: 0.82em; }
/* One small-caps style for the eyebrow and the QR caption (the
   .chip-label treatment, in --label) */
.hero-smallcaps {
    font-size: clamp(11px, 0.8vw, 11.5px); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--label);
}
.hero-centre { display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.hero-bottom { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.hero-qr { width: 104px; height: 104px; background: #fff; border-radius: var(--radius-sm); padding: 6px; } /* white so it scans */
.hero-demo-btn { display: none; } /* mobile-only — a QR is useless on the device displaying it */
/* Notification card — the one product moment on the page, rendered in
   HTML so there is no screenshot to keep current. */
.notif-card {
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--pale); border-radius: var(--radius-sm);
    padding: 12px 14px; max-width: 380px; text-align: left;
}
.notif-avatar {
    width: 38px; height: 38px; flex-shrink: 0;
    background: var(--navy); border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
}
.notif-avatar img { width: 24px; height: auto; display: block; }
.notif-sender { font-size: 0.78rem; color: var(--text-light); }
.notif-sender strong { color: var(--text); font-weight: 600; }
.notif-msg { font-size: 0.9375rem; line-height: 1.45; color: var(--text); margin-top: 2px; }

/* Lead line under the hero — a statement, not supporting copy */
.lead-para {
    max-width: 720px;                 /* must not wrap to three lines */
    margin: 2.5rem auto 2rem;         /* spacing UNCHANGED */
    padding: 0 24px;
    text-align: center;
    font-size: clamp(18px, 1.667vw, 24px);
    color: var(--text);
    line-height: 1.35;
    font-weight: 400;
}
/* Underline on the platform word only (JustSay's navy rule removed,
   18 Aug) — WhatsApp's own green, the value the WA glyphs across the
   site already use. Span, not a link: no href, no hover state. */
.lead-wa { border-bottom: 3px solid #25D366; padding-bottom: 2px; }

/* Steps 01–03: one bordered container, hairline dividers, no connectors */
.steps-row {
    max-width: 1024px; margin: 0 auto; padding: 0 24px;
}
/* Two cells, no numerals, no container (18 Aug: steps 03/04 deleted
   — their substance lives in the REVIEWS panel below; numbering a
   two-item sequence was labelling the self-evident). Headings carry
   the site's two-weight treatment: light subject, bold action —
   weight is the ONLY difference, never colour. */
.steps-row-inner {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem;
}
.step-cell { text-align: center; }
.step-cell h3 { font-size: clamp(19px, 1.806vw, 26px); font-weight: 400; margin-bottom: 0.3rem; }
.step-cell h3 strong { font-weight: 700; }
.step-cell p { font-size: 0.9375rem; color: var(--text-light); line-height: 1.65; }

/* Step 04 — centred, noticeably narrower. Separation by white space
   only: NO connecting lines, arrows or chevrons (an earlier draft
   read as a flowchart). */
/* Industry tiles, unboxed (19 Aug, ref Cadence "Explore The Range"):
   no fill, no radius, no hover lift — a near-black hairline above
   each item anchors it the way Cadence's product photo does, and the
   only hover affordance is the link underline. The class NAME is
   historical (it once styled the deleted market cards) and is kept
   deliberately — renaming touches markup for no visual gain. */
.market-card {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    border-top: 1px solid var(--text);   /* the anchor */
    padding-top: 15px;
    display: flex;
    flex-direction: column;
    text-align: center;
    text-decoration: none;
    color: inherit;
}
.market-card h3 { font-size: clamp(17px, 1.458vw, 21px); font-weight: 400; letter-spacing: -0.015em; }
/* Spec pills under each heading. border-radius 20px is a DELIBERATE
   exception to the two-radius rule — these are true pills, like the
   reference's spec chips. Do not "correct" to 8px.
   flex:1 + align-content:flex-start is what keeps all four "Read
   more" links on ONE baseline: the pill wrapper absorbs the spare
   column height (tiles stretch equal), pills stay tight under the
   heading, and the arrows stay level even when Hospitality's four
   pills wrap to two rows around 1000px. Never a fixed min-height. */
.tile-pills {
    display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
    margin-top: 10px;
    flex: 1; align-content: flex-start;
}
.tile-pills span {
    font-size: 0.9375rem; /* body row of the type table — pills at 15px */
    padding: 3px 9px;
    border-radius: 20px;
    background: var(--panel-mid);
    color: var(--text-light);
}
/* One conversation. Multiple functions. — Cadence Shop-By-Function
   pattern (18 Aug). Pills reuse .seg-pill; rows are an always-visible
   accordion; each row's chat renders beside its text on desktop and
   beneath it on mobile. */
/* Wider than the 1024px prose sections DELIBERATELY: this is a
   two-column panel, and each column needs ~650px. Stops short of
   Cadence's full-bleed because our right side is text in bubbles,
   not a photograph. Every other section stays at 1024px. */
.fn-block { max-width: min(94vw, 1680px); margin: 8rem auto 0; padding: 0 24px; text-align: center; }
/* Scoped gap opens for THIS section's heading/pills — .h2-two-weight
   is shared with other sections and must not move globally */
.fn-block .h2-two-weight { margin-bottom: 3rem; }
.fn-rows { margin-top: 3rem; text-align: left; display: flex; flex-direction: column; gap: 12px; }
.fn-tagline { margin: 1.25rem 0 0; }
.fn-tagline + .fn-rows { margin-top: 1.75rem; } /* tagline belongs to the heading group */
/* Stacked-sheet card (18 Aug, ref Cadence): a narrow grey band at the
   top edge dissolving into white within ~40px — reads as the shadow
   the card above would cast. Stops are in PIXELS deliberately: with
   percentages the band would scale with the row and an expanded panel
   would wear a grey wash across its top third. The gradient lives on
   the whole ROW, not the head, so an open panel shows no seam. */
.fn-row {
    /* L-shaped edge (19 Aug): the fill ends at page white, so a tall
       open row had no edge below 44px. The LEFT gradient (listed
       FIRST = painted on top, ending TRANSPARENT so it never covers
       the base layer) runs the full card height; the TOP gradient is
       the base. Pixel stops on both — percentages would render
       collapsed (~64px) and open (600px+) rows as different
       treatments, the 18 Aug trap. Fill stays var(--cream). */
    background:
        linear-gradient(90deg,
            var(--step-top) 0px,
            var(--step-mid) 14px,
            transparent 44px),
        linear-gradient(180deg,
            var(--step-top) 0px,
            var(--step-mid) 14px,
            var(--cream) 44px);
    border-radius: var(--radius-lg);
    border: none;
}
.fn-row-headwrap { display: flex; align-items: center; }
/* 44px arrow target, kept clear of the + : the button's 1.75rem right
   padding plus this margin puts ~36px between the two hit areas
   (~28px on mobile) - a mis-tap that navigates when someone meant to
   expand is the worst outcome here. */
.fn-row-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin: 0 6px 0 8px; flex-shrink: 0;
    color: var(--label); text-decoration: none; font-size: 1.05rem;
}
.fn-row-link:hover { color: var(--navy); }
.fn-row-link:focus-visible { color: var(--navy); outline: 2px solid var(--navy); outline-offset: 2px; border-radius: var(--radius-sm); }
.fn-row-head {
    flex: 1;
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    background: none; border: none; cursor: pointer; font-family: inherit;
    font-size: clamp(16px, 1.32vw, 19px); font-weight: 500; color: var(--text);
    text-transform: uppercase; letter-spacing: 0.04em;
    padding: 1.4rem 1.75rem; text-align: left;
}
.fn-row-head:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.fn-plus { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.fn-plus::before, .fn-plus::after { content: ''; position: absolute; background: var(--label); }
.fn-plus::before { left: 0; right: 0; top: 6.25px; height: 1.5px; }
.fn-plus::after { top: 0; bottom: 0; left: 6.25px; width: 1.5px; transition: transform 0.2s; }
.fn-row.is-open .fn-plus::after { transform: scaleY(0); } /* + becomes a true − */
/* Animated accordion (19 Aug): row height is a grid track transitioning
   0fr -> 1fr. display:none cannot transition, so the old [hidden]
   guard is REPLACED by this mechanism — deleted only because this
   supersedes what it was doing. */
.fn-row-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.32s ease;
}
.fn-row.is-open .fn-row-panel { grid-template-rows: 1fr; }
.fn-row-content {
    display: grid; grid-template-columns: 1fr 1.15fr; gap: 3.5rem;
    padding: 0.25rem 1.75rem 3.75rem;
    /* min-height:0 is ESSENTIAL — grid items default min-height:auto
       and refuse to shrink below content; without it every row
       renders open. overflow on THIS element, not the wrapper. */
    overflow: hidden;
    min-height: 0;
    transition: padding 0.32s ease;
}
/* border-box floors an element's used height at its padding, so a
   0fr-collapsed row would still show a padding-tall strip. Vertical
   padding goes to 0 when shut, transitioned in step with the track.
   0,3,0 specificity deliberately outweighs the mobile padding
   override (0,1,0) even though that rule comes later. */
.fn-row:not(.is-open) .fn-row-content { padding-top: 0; padding-bottom: 0; }
.fn-sub {
    font-size: 0.8rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text); /* full-strength: a second title, not a caption */
}
/* 2.3 Outlined-circle numbering — ol/li semantics kept, only the
   marker is drawn. 50% is the sanctioned true-circle radius. */
.fn-detail ol {
    list-style: none; margin: 0.9rem 0 0; padding-left: 0;
    counter-reset: fnpt; display: flex; flex-direction: column; gap: 0.7rem;
}
.fn-detail ol li {
    counter-increment: fnpt; position: relative;
    padding-left: 32px; font-size: 0.9375rem; color: var(--text-light); line-height: 1.6;
}
.fn-detail ol li::before {
    content: counter(fnpt);
    position: absolute; left: 0; top: 1px;
    width: 19px; height: 19px;
    border: 1px solid var(--navy); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem; color: var(--navy);
}
/* 2.4 The rule above the strips — NEAR-BLACK deliberately. A --border
   grey here disappears and the panel reads as undifferentiated text;
   this hairline separates the argument from the specifics. */
.fn-rule { height: 1px; background: var(--text); margin: 2.1rem 0 1.35rem; }
.fn-strip-label {
    display: block; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.09em; font-size: clamp(11px, 0.8vw, 11.5px); color: var(--text);
    margin: 1.35rem 0 0.75rem;
}
/* 2.5 Treatment A — underlined cells (measurements/outcomes).
   NO invented figures in these: names only. */
.strip-cells { display: grid; gap: 12px; }
.strip-cells.cols-4 { grid-template-columns: repeat(4, 1fr); }
.strip-cells.cols-3 { grid-template-columns: repeat(3, 1fr); }
/* Weight 300 (loaded in index.html's Inter request), colour
   DELIBERATELY unchanged — "lighter in weight, not lighter in
   colour" (Joe). Boxes below stay full weight: lightening bordered
   controls reads as disabled. */
.strip-cells div { font-size: 0.95rem; font-weight: 300; color: var(--text); border-bottom: 1px solid var(--text); padding-bottom: 7px; }
/* Treatment B — bordered boxes (moments) */
.strip-boxes { display: grid; gap: 8px; }
.strip-boxes.cols-4 { grid-template-columns: repeat(4, 1fr); }
.strip-boxes.cols-3 { grid-template-columns: repeat(3, 1fr); }
.strip-boxes div {
    border: 1px solid var(--text); border-radius: var(--radius-sm);
    padding: 9px 6px; text-align: center; font-size: 0.82rem; color: var(--text);
}

/* The rendered conversation — HTML, never a screenshot */
.fn-chat {
    background: var(--panel-mid); border-radius: var(--radius-lg);
    padding: 1.9rem; display: flex; flex-direction: column; gap: 10px;
    /* Holds shape on the short PHOTOS thread. Desktop only — the
       mobile block zeroes it. Empty lower space is deliberate: no
       invented messages to fill it (Joe: "we can fill the space
       shortly"). */
    min-height: 460px;
}
.msg-in, .msg-out {
    font-size: 0.9375rem; line-height: 1.5; padding: 11px 15px;
    border-radius: var(--radius-lg); max-width: 88%;
}
.msg-in { background: #fff; align-self: flex-start; border-top-left-radius: 2px; color: var(--text); }
.msg-out { background: rgba(27, 58, 92, 0.08); align-self: flex-end; border-top-right-radius: 2px; color: var(--text); }
.msg-quote {
    display: block; margin-top: 7px; padding-left: 10px;
    border-left: 2px solid var(--border); color: var(--text-light);
}
.voice { display: inline-flex; align-items: center; gap: 8px; }
.voice-play { font-size: 0.7rem; color: var(--navy); }
.voice-bars { display: inline-flex; align-items: center; gap: 2px; }
.voice-bars i { width: 3px; border-radius: 2px; background: var(--navy); opacity: 0.65; }
.voice-bars i:nth-child(odd) { height: 12px; }
.voice-bars i:nth-child(even) { height: 7px; }
.voice-bars i:nth-child(3n) { height: 16px; }
.voice-time { font-size: 0.72rem; color: var(--text-light); }
.photo-bubble {
    display: flex; align-items: center; justify-content: center;
    width: 92px; height: 66px; border-radius: var(--radius-sm);
    background: rgba(27, 58, 92, 0.06); color: var(--label);
}
.msg-btns { display: inline-flex; gap: 8px; }
.msg-btn-solid {
    background: var(--navy); color: var(--cream); border-radius: var(--radius-sm);
    font-size: 0.8rem; font-weight: 600; padding: 7px 14px;
}
.msg-btn-line {
    border: 1px solid var(--navy); color: var(--navy); border-radius: var(--radius-sm);
    font-size: 0.8rem; font-weight: 600; padding: 6px 13px;
}
.msg-btns-wrap { background: none; padding: 2px 0; }
.fn-chat-caption { text-align: center; margin-top: 0.75rem; }
.example-line { text-align: center; font-size: 0.9375rem; color: var(--text-light); max-width: 640px; margin: 2rem auto 0; line-height: 1.8; }

/* Intelligence heading on white (navy band deleted 19 Aug; underline
   removed same day — plain two-weight matching the other sections). */
.intel-block .h2-two-weight { margin-bottom: 0.9rem; }
.intel-sub { font-size: 0.9375rem; color: var(--text-light); max-width: 520px; margin: 0 auto 3.25rem; line-height: 1.65; }

/* ============ INTELLIGENCE DASHBOARD (illustrative) ============
   Width matches .fn-block so the page's two big sections agree.
   Figures are fixed by the 18 Aug spec — never regenerate them. */
.intel-block { max-width: min(94vw, 1680px); margin: 9.5rem auto 0; padding: 0 24px; text-align: center; }
.intel-panel { margin-top: 2.5rem; text-align: left; }
.intel-panel[hidden] { display: none; } /* same guard discipline as the accordion */
.dash-frame { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.dash-top {
    background: var(--panel); border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 18px;
}
.dash-brand { font-size: 0.72rem; font-weight: 600; }
.dash-periods { display: flex; gap: 4px; }
.dash-periods span { font-size: 0.68rem; color: var(--label); padding: 3px 8px; } /* decorative spans, not buttons */
.dash-periods .p-sel { background: var(--navy); color: #fff; border-radius: var(--radius-sm); }
.dash-body { padding: 1.5rem 1.5rem 1.75rem; }
.dash-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dash-card { background: var(--panel); border-radius: var(--radius-sm); padding: 12px 14px; }
.dash-card-label { font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--label); }
.dash-card-fig { font-size: 1.35rem; font-weight: 300; margin: 2px 0; }
.dash-card-sub { font-size: 0.63rem; color: var(--text-light); }
.tone-up { color: var(--green) !important; }
.tone-down { color: var(--heat-1) !important; }
.dash-label {
    font-size: 0.62rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.09em; color: var(--label); margin: 1.4rem 0 0.6rem;
}
.dash-themes { display: grid; grid-template-columns: 150px 44px 1fr; gap: 7px 12px; align-items: center; }
.dash-theme-name { font-size: 0.78rem; }
.dash-theme-count { font-size: 0.72rem; color: var(--label); text-align: right; }
.dash-bar { display: flex; height: 12px; border-radius: 3px; overflow: hidden; }
.b-pos { background: var(--heat-5); }
.b-neu { background: var(--neutral-bar); }
.b-neg { background: var(--heat-1); }
/* Basket reasons are COUNTS, not sentiment — navy on navy-light,
   never the red-green scale (a count carries no judgement). */
.dash-track { height: 12px; border-radius: 3px; background: var(--navy-light); overflow: hidden; }
.dash-fill { display: block; height: 100%; background: var(--navy); border-radius: 3px; }
.dash-heat { display: grid; grid-template-columns: 126px repeat(7, 1fr) 10px repeat(4, 1fr); gap: 3px; align-items: center; }
.heat-h { font-size: 0.58rem; font-weight: 600; color: var(--label); text-align: center; }
.heat-name { font-size: 0.74rem; padding-right: 6px; }
.heat-c { height: 19px; border-radius: 3px; }
.h5 { background: var(--heat-5); } .h4 { background: var(--heat-4); }
.h3 { background: var(--heat-3); } .h2 { background: var(--heat-2); }
.h1 { background: var(--heat-1); }
.dash-insight {
    background: var(--panel); border-radius: var(--radius-sm);
    padding: 10px 14px; margin-top: 1.2rem; font-size: 0.8rem; line-height: 1.6;
}
.ins-neg { color: var(--heat-1); }
.ins-pos { color: var(--heat-5); }
.dash-bottom { display: grid; grid-template-columns: 1fr 1.35fr; gap: 12px; margin-top: 1.4rem; }
.dash-mini { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px 14px; }
.dash-mini .dash-label { margin-top: 0; }
.dash-mini-cells { display: flex; gap: 18px; }
.mini-cell { flex: 1; }
.mini-fig { font-size: 1.1rem; font-weight: 300; }
.mini-sub { font-size: 0.62rem; color: var(--text-light); }
/* Numberless mobile composition (ReviewPro pattern) — decorative,
   aria-hidden; the navy band above carries the argument. ONE
   composition on mobile (19 Aug): the two markets' twins were the
   same structure in different colours, so the toggle hides <900 and
   only the first panel's graphic shows. */
.dash-mobile { display: none; }
.intel-mobile-note { display: none; } /* mobile-only, shown in the 900px block */

/* Two-weight headings ("Same method. Different use.") */
.h2-two-weight { text-align: center; font-size: clamp(22px, 2.362vw, 34px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 2rem; }
.h2-two-weight .w-reg { font-weight: 400; }
.h2-two-weight .w-med { font-weight: 700; }

/* Uses section — reuses the .seg-pill tab pattern from /hospitality */
.uses-block { max-width: 1024px; margin: 8rem auto 0; padding: 0 24px 4.5rem; text-align: center; }
.industry-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; align-items: stretch; }

.uses-link { display: inline-block; margin-top: 12px; font-size: 0.88rem; font-weight: 600; color: var(--navy); text-decoration: none; }
.market-card:hover .uses-link { text-decoration: underline; }
/* Panel-foot read-more (21 Aug): same .uses-link treatment, its own
   hover (the original only underlines under .market-card) and the
   agreed 1.5rem above. */
.fn-read-link { margin-top: 1.5rem; }
.fn-read-link:hover, .fn-read-link:focus-visible { text-decoration: underline; }

/* Why JustSay — three equal tiles on --pale.
   CRITICAL LAYOUT: each tile is flex-column with the text wrapped in
   a single flex:1 div and the image placeholder after it. The tiles
   are grid children (stretched to equal height), so flex:1 on the
   text pins ALL THREE image blocks to one shared baseline no matter
   how many lines each tile's copy runs to. Do not fake this with
   fixed heights or margins — that broke the moment copy changed. */
.why-tiles {
    /* 1610 = the 1400 baseline widened 15% by Joe on sight (19 Aug):
       more words per line, shorter tiles. Near the big sections' 1680
       but deliberately its own width. */
    max-width: min(94vw, 1610px); margin: 0 auto; padding: 0 24px;
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem;
}
.why-tile {
    background: var(--panel); border-radius: var(--radius-lg);
    padding: 2.25rem 2rem;
    display: flex; flex-direction: column;
}
.why-tile-text { flex: 1; }
.why-tile h3 { font-size: clamp(17px, 1.528vw, 22px); font-weight: 400; line-height: 1.25; margin-bottom: 0.4rem; letter-spacing: -0.015em; }
.why-tile p { font-size: 0.9375rem; color: var(--text-light); line-height: 1.65; }
.img-pending {
    margin-top: 1.25rem; background: var(--hero-flat); border-radius: var(--radius-sm);
    /* Sized for the real photograph — in the reference the image
       dominates the card */
    height: 260px; display: flex; align-items: center; justify-content: center;
}
/* Mobile carousel arrows — display:none is the unconditional
   default; the media block at the END of the file flips it to flex,
   so it wins at narrow widths (the 18 Aug ordering rule). Pill
   radius is the tile-pills exception, not a third token. */
.why-nav { display: none; }
.why-arrow {
    width: 64px; height: 44px; /* 44px min touch target */
    border: none; border-radius: 22px;
    background: var(--panel-mid); color: var(--text);
    font-size: 1.1rem; cursor: pointer;
}
.why-arrow:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.why-arrow[aria-disabled="true"] { opacity: 0.35; }
.why-source { max-width: min(94vw, 1610px); margin: 0.75rem auto 0; padding: 0 24px; font-size: 0.68rem; color: var(--label); text-align: center; } /* must track the row it captions */

/* Demo band variant: doubled QR BESIDE the button, vertically centred */
.demo-row { display: flex; align-items: center; justify-content: center; gap: 2rem; flex-wrap: wrap; }
.demo-row img { width: 208px; height: 208px; background: #fff; border-radius: var(--radius-sm); padding: 10px; } /* white ONLY so the QR scans */

/* Placeholder marker for unpublished copy (the /ecommerce skeleton) —
   obviously unfinished on purpose, so a half-written page can never
   pass as done. */
.copy-pending {
    color: var(--label) !important;
    outline: 1px dashed var(--label);
    outline-offset: 3px;
}

/* Segmented control (index) — Cadence "Shop By Function" pattern.
   Centred heading, three pills, one swapping panel. */
.seg-block { max-width: 880px; margin: 0 auto; padding: 4rem 24px 3rem; text-align: center; }
.seg-block > h2 {
    font-size: clamp(1.7rem, 3.5vw, 2.3rem);
    font-weight: 700; letter-spacing: -0.02em;
    margin-bottom: 1.75rem;
}
.seg-pills { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 1.75rem; }
/* Pills size to their own content (min-width removed 18 Aug — it
   forced every pill to a fixed footprint far wider than its label).
   Width stability across selection still holds WITHOUT it because
   [aria-selected="true"] changes only background and colour — never
   weight, padding or border. If a pill ever shifts width when
   selected, fix the changing property; do not reinstate min-width.
   Shared with /hospitality's segmented control. */
.seg-pill {
    font-family: inherit;
    font-size: 0.9375rem; font-weight: 600;
    padding: 9px 22px; border-radius: var(--radius-sm);
    border: none; cursor: pointer;
    box-sizing: border-box;
    background: var(--pale); color: var(--text);
    transition: background 0.15s, color 0.15s;
}
.seg-pill[aria-selected="true"] { background: var(--navy); color: var(--cream); }
.seg-pill:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.seg-panel {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 2rem 2.25rem; text-align: left;
}
.seg-panel[hidden] { display: none; }
.seg-sub { font-size: 0.95rem; font-weight: 600; color: var(--label); text-align: center; margin-bottom: 1.25rem; }
.seg-panel ol { margin: 0; padding-left: 1.4rem; }
.seg-panel ol li { font-size: 0.98rem; color: var(--text-light); line-height: 1.65; padding: 0.35rem 0; }
.seg-figures {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px;
    background: var(--pale); border-radius: var(--radius-sm);
    padding: 14px 18px; margin-top: 1.5rem;
}
.seg-figure { font-size: 0.85rem; color: var(--text-light); line-height: 1.5; }
.seg-figure strong { color: var(--text); font-weight: 600; display: block; }
.seg-source { font-size: 0.68rem; color: var(--label); margin-top: 0.6rem; text-align: center; }

/* Steps (how-it-works) */
.steps { display: flex; flex-direction: column; gap: 1.25rem; }
.step { display: flex; gap: 1.25rem; padding: 1.4rem; background: #fff; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.step-number {
    flex-shrink: 0; width: 38px; height: 38px;
    background: var(--green); color: #fff; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.95rem;
}
.step-content h3 { font-size: 1.02rem; font-weight: 600; margin-bottom: 0.3rem; }
.step-content p { font-size: 0.94rem; color: var(--text-light); line-height: 1.6; }

/* Feature cards (why-justsay) */
.features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.5rem; }
.feature-card { padding: 1.4rem; background: #fff; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.feature-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.4rem; }
.feature-card p { font-size: 0.9rem; color: var(--text-light); line-height: 1.6; }

/* Navy callout (your-reputation, whatsapp note) */
.navy-callout { background: var(--navy); border-radius: var(--radius-lg); padding: 2.25rem; margin-top: 1.25rem; }
.navy-callout p { color: rgba(255, 255, 255, 0.95); font-size: 1.02rem; line-height: 1.7; margin-bottom: 1rem; max-width: none; }
.navy-callout p:last-child { margin-bottom: 0; }
.navy-callout p.sub { color: rgba(255, 255, 255, 0.72); font-size: 0.95rem; }

.soft-callout {
    background: var(--navy-light); border-radius: var(--radius-lg);
    padding: 1.4rem 1.75rem; display: flex; align-items: center; gap: 1rem;
}
.soft-callout p { font-size: 0.95rem; color: var(--text); line-height: 1.6; margin: 0; }

/* Offer columns (founding-venues) */
.offer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.5rem; }
.offer-col { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.6rem; }
.offer-col h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.9rem; letter-spacing: -0.01em; }
.offer-col ul { list-style: none; }
.offer-col li {
    font-size: 0.94rem; color: var(--text-light); line-height: 1.55;
    padding: 0.45rem 0 0.45rem 1.2rem; position: relative;
}
.offer-col li::before {
    content: ''; position: absolute; left: 0; top: 0.95rem;
    width: 6px; height: 6px; background: var(--navy); border-radius: 50%;
}
.offer-col li strong { color: var(--text); }

/* Trust line + contact */
.trust-line {
    text-align: center; font-size: 0.85rem; color: var(--text-light);
    padding: 0.5rem 24px 2rem; max-width: 820px; margin: 0 auto;
}
.contact-section { text-align: center; padding: 2.5rem 24px 3rem; }
.contact-section h2 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.contact-section p { font-size: 0.95rem; color: var(--text-light); margin-bottom: 1.25rem; }
.contact-line { font-size: 0.95rem; color: var(--text-light); margin-bottom: 1.1rem; }
.contact-line a { color: var(--navy); text-decoration: none; }
.contact-line a:hover { text-decoration: underline; }
.contact-email-btn {
    display: inline-block; padding: 0.85rem 1.9rem;
    background: var(--navy); color: #fff; text-decoration: none;
    border-radius: var(--radius-sm); font-size: 1rem; font-weight: 600;
}
.contact-email-btn:hover { background: var(--navy-dark); }

/* ============================== LEGAL PAGES ==============================
   Long-form document styling for privacy.html and acceptable-use.html.
   Ported from those pages' old inline styles; scoped under .legal so the
   marketing-page rules (centred headings etc.) don't leak in. */

main.legal { padding: 3rem 1.5rem 4rem; max-width: 760px; margin: 0 auto; }
.legal .doc-header { margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border); }
.legal .doc-header h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: -0.03em; margin-bottom: 0.5rem; }
.legal .doc-header p { color: var(--text-light); font-size: 0.95rem; }
.legal h2 { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; margin: 2.75rem 0 1rem; }
.legal h3 { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; margin: 1.75rem 0 0.75rem; }
.legal p, .legal ul, .legal ol { font-size: 1rem; color: var(--text); margin-bottom: 1rem; line-height: 1.7; }
.legal ul, .legal ol { padding-left: 1.25rem; }
.legal li { margin-bottom: 0.4rem; }
.legal a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--navy-dark); }
.legal strong { font-weight: 600; color: var(--text); }
.legal .callout {
    background: var(--navy-light); border-radius: var(--radius-sm);
    padding: 0.9rem 1.1rem; margin: 1rem 0; font-size: 0.95rem;
}
.legal .callout strong { color: var(--navy); }
.legal .table-wrap {
    overflow-x: auto; margin: 1rem 0 1.5rem;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: #fff;
}
.legal table { width: 100%; border-collapse: collapse; min-width: 520px; font-size: 0.92rem; }
.legal thead { background: var(--warm); }
.legal th, .legal td { padding: 0.75rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.legal th { font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--label); }
.legal tbody tr:last-child td { border-bottom: none; }
.legal tbody tr:nth-child(even) { background: rgba(245, 240, 235, 0.35); }
.legal .divider-rule { height: 1px; background: var(--border); border: 0; margin: 2.25rem 0; }
.legal .legal-note { font-size: 0.82rem; color: var(--label); }

/* Footer — full-bleed navy with the oversized reversed lockup
   (12 Aug homepage build). Injected on every page from site.js.
   NO overflow:hidden anywhere in here — it would silently crop the
   y descender of the lockup. The navy sliver under the lettering
   comes from padding-bottom, never a negative margin. */
/* Footer padding lives on .footer-content, NOT the footer itself, so
   the lockup row below it can bleed to the true page edge. The 8px
   bottom padding on the footer is the navy sliver under the lockup. */
footer { background: var(--navy); color: var(--cream); padding: 0 0 8px; }
.footer-content { padding: 3.5rem 24px 0; }
.footer-cols {
    max-width: 1120px; margin: 0 auto 2rem;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;
}
.footer-col h4 {
    font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--cream); margin-bottom: 0.75rem;
}
.footer-col a {
    display: block; font-size: 0.9rem; color: rgba(255, 255, 255, 0.75);
    text-decoration: none; padding: 0.22rem 0;
}
.footer-col a:hover { color: var(--cream); }
.footer-base {
    max-width: 1120px; margin: 0 auto 2.5rem;
    font-size: 0.78rem; color: rgba(255, 255, 255, 0.55);
}
/* Full-bleed lockup row: lockup hard against the LEFT PAGE EDGE
   (x=0 — the trimmed-viewBox asset puts the J's ink within ~3px of
   the edge), company line bottom-right. The company line keeps its
   Legal-column alignment via the calc() inset: when the viewport is
   wider than the 1120px container, the inset equals the container's
   right gutter; below that it falls back to the 24px page padding. */
.footer-lockup-row {
    display: flex; align-items: flex-end; gap: 1.5rem;
    padding-right: max(24px, calc((100vw - 1120px) / 2));
}
.footer-lockup {
    display: block;
    flex: 0 1 auto;
    width: min(72vw, 1080px);
    height: auto;
}
.footer-company {
    /* Alpha colour, not `opacity` — composites predictably on navy
       and fades nothing else in the element. */
    margin-left: auto;
    font-size: 11.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.45);
    text-align: right;
    padding-bottom: 4px; /* level with / fractionally above the lettering's bottom */
}

/* Contact popover */
.contact-backdrop {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    z-index: 200; display: none; align-items: center; justify-content: center;
    padding: 1.5rem;
}
.contact-backdrop.active { display: flex; }
.contact-popover {
    position: relative; background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    padding: 2rem; max-width: 480px; width: 100%;
}
.contact-close {
    position: absolute; top: 0.75rem; right: 0.75rem;
    width: 32px; height: 32px; border: none; background: transparent;
    color: var(--text-light); font-size: 1.5rem; line-height: 1;
    border-radius: var(--radius-sm); cursor: pointer;
}
.contact-close:hover { background: var(--warm); color: var(--text); }
/* Two email cards side by side. stretch + shared min-height keeps the
   row level even though card 2's two-line title is taller than card 1's. */
.contact-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; align-items: stretch; }
.contact-option {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; min-height: 132px;
    padding: 1.25rem 1rem; background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius-lg); text-decoration: none; color: inherit;
    transition: border-color 0.2s, transform 0.15s;
}
.contact-option:hover { border-color: var(--navy); transform: translateY(-1px); }
.contact-option-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; }
.contact-option-title { font-size: 0.95rem; font-weight: 600; color: var(--text); }
.contact-option-sub { font-size: 0.8rem; color: var(--text-light); margin-top: 0.2rem; }
.contact-divider {
    display: flex; align-items: center; gap: 0.75rem; margin: 1.5rem 0 1rem;
    color: var(--text-light); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em;
}
.contact-divider::before, .contact-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
/* Contact-WhatsApp QR — deliberately a DIFFERENT object from the demo
   QR: smaller, horizontal, WhatsApp glyph alongside, no bordered tile. */
.contact-qr-wrap { display: flex; align-items: center; justify-content: center; gap: 18px; }
.contact-qr-img { width: 120px; height: 120px; border-radius: var(--radius-sm); }
.contact-wa-info { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; }
.contact-wa-title { font-size: 0.95rem; font-weight: 600; color: var(--text); text-decoration: none; }
.contact-wa-title:hover { color: var(--navy); text-decoration: underline; }
.contact-wa-sub { font-size: 0.82rem; color: var(--text-light); }

/* Responsive */

/* ============ DETAIL-PAGE SHELL (.pg-*, 20 Aug) ============
   Reusable across all ten detail pages (spec-website-detail-pages).
   Panels are the stacked-sheet card: the SAME two layered gradients
   as .fn-row, PIXEL stops - the panels differ in height, and
   percentage stops would render four different treatments. */
.pg-main { max-width: 1000px; margin: 0 auto; padding: 0 24px; }
.pg-next-row { display: flex; justify-content: flex-end; margin-top: 1.75rem; }
.pg-next-bottom { margin-top: 3rem; }
.pg-next { display: inline-flex; align-items: baseline; gap: 10px; font-size: 13px; font-weight: 500; color: var(--text); text-decoration: none; }
.pg-next:hover { color: var(--navy); }
.pg-next .pg-next-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--label); }
.pg-head { text-align: center; margin-top: 3.25rem; }
.pg-h1 { margin-top: 0.9rem; }
.pg-standfirst { max-width: 38em; margin: 1.1rem auto 0; font-size: 0.9375rem; color: var(--text-light); line-height: 1.65; }
.pg-framing { max-width: 38em; margin: 3rem auto 0; text-align: center; font-size: 0.9375rem; line-height: 1.75; }
.pg-blocks { margin-top: 4.5rem; }
.pg-block { display: grid; grid-template-columns: 1fr 1fr; gap: 2.25rem; align-items: center; margin-bottom: 3.5rem; text-align: left; }
.pg-text h2 { font-size: clamp(19px, 1.806vw, 26px); font-weight: 400; letter-spacing: -0.015em; line-height: 1.25; margin-bottom: 0.7rem; }
.pg-text p { font-size: 0.9375rem; color: var(--text-light); line-height: 1.7; max-width: 34em; }
/* One navy-underlined word per heading - the word carrying the
   claim. A mark, not a link: border-bottom, never text-decoration. */
.pg-mark { border-bottom: 2px solid var(--navy); padding-bottom: 1px; }
.pg-panel {
    background:
        linear-gradient(90deg,
            var(--step-top) 0px,
            var(--step-mid) 14px,
            transparent 44px),
        linear-gradient(180deg,
            var(--step-top) 0px,
            var(--step-mid) 14px,
            var(--cream) 44px);
    border-radius: var(--radius-lg);
    padding: 2rem 1.9rem;
}
.pg-fig-big { font-size: 52px; font-weight: 300; color: var(--navy); line-height: 1.05; letter-spacing: -0.02em; }
.pg-fig-mid { font-size: 26px; font-weight: 300; color: var(--navy); line-height: 1.15; }
.pg-cap { font-size: 0.8rem; color: var(--label); margin-top: 3px; line-height: 1.45; }
.pg-squares { display: flex; gap: 4px; margin-top: 1.2rem; }
.pg-squares i { width: 14px; height: 14px; border-radius: 3px; background: var(--navy); }
.pg-squares .sq-off { background: var(--border); }
.pg-rule { height: 1px; background: var(--border); margin: 1.5rem 0; }
.pg-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.pg-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--label); margin-bottom: 1.1rem; }
.pg-ticks { list-style: none; display: grid; gap: 0.75rem; }
.pg-ticks li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
/* The tick square is an oversized BULLET - the only fill. No pill
   behind the text. */
.pg-tick { width: 17px; height: 17px; border-radius: var(--radius-sm); background: var(--navy); color: var(--cream); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pg-bar-row { display: grid; grid-template-columns: 118px 1fr 46px; align-items: center; gap: 12px; }
.pg-bar-row + .pg-bar-row { margin-top: 1rem; }
.pg-bar-label { font-size: 12.5px; color: var(--text-light); }
.pg-bar-track { height: 14px; background: var(--step-top); border-radius: 3px; overflow: hidden; }
.pg-bar-fill { display: block; height: 100%; background: var(--navy); border-radius: inherit; }
.pg-bar-grey { background: #9A9A98; }
.pg-bar-fig { font-size: 13px; font-weight: 600; text-align: right; }
.pg-bar-cap { font-size: 9.5px; color: var(--label); margin-top: 1.1rem; letter-spacing: 0.02em; }
.pg-sources { max-width: 46em; margin: 1.5rem auto 0; font-size: 0.8rem; color: var(--label); line-height: 1.7; text-align: center; }
/* ---- How-it-works screen mocks (21 Aug): the approval page and the
   settings screen, built in HTML inside .dash-frame so they read as
   product screenshots like the dashboard. Labels are the real
   product's own wording. ---- */
.appr-frame { padding: 1.6rem 1.5rem; text-align: center; background: var(--cream); }
.appr-head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--label); }
.appr-review { background: var(--panel-mid); border-radius: var(--radius-sm); padding: 1rem 1.1rem; font-size: 0.9rem; line-height: 1.6; color: var(--text); margin: 0.9rem 0; text-align: left; }
.appr-assure { font-size: 0.85rem; font-weight: 600; color: var(--text); margin-bottom: 0.9rem; }
.appr-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.appr-powered { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--label); margin-top: 1.1rem; }
.set-frame { background: var(--cream); }
.set-body { padding: 1rem 1.5rem 1.25rem; }
.set-add { font-size: 11.5px; font-weight: 600; color: var(--navy); }
.set-tabs { display: flex; gap: 6px; margin-bottom: 0.5rem; }
.set-tab { font-size: 11.5px; padding: 3px 10px; border-radius: 20px; background: var(--panel-mid); color: var(--text-light); }
.set-tab.on { background: var(--navy); color: var(--cream); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.set-row:last-child { border-bottom: none; }
.set-toggle { width: 32px; height: 18px; border-radius: 9px; background: var(--navy); position: relative; flex-shrink: 0; }
.set-toggle::after { content: ''; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.set-toggle.off { background: var(--border); }
.set-toggle.off::after { right: auto; left: 2px; }
.set-val { font-size: 12px; color: var(--text-light); background: var(--panel-mid); padding: 2px 8px; border-radius: var(--radius-sm); }
/* the compact dashboard crop: 2x2 cards fit the half-width column */
.hiw-dash .dash-cards { grid-template-columns: 1fr 1fr; }

/* Homepage entry points (20 Aug): .lead-wa and the first why-tile are
   anchors now - keep their existing look, the green underline / the
   tile itself IS the affordance. No colour change, no new hover. */
a.lead-wa { color: inherit; text-decoration: none; }
a.why-tile { color: inherit; text-decoration: none; }

/* ---- Block kit (20 Aug): before/after, three-up cards, statement,
   theme pills, steps, conversation wrapper, TODO marker. ---- */
/* Before/after: the RIGHT side must look resolved and the left must
   not - the left is deliberately flatter and greyer. Never give both
   columns the same treatment. */
.pg-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 3.5rem; text-align: left; }
.pg-ba-before { background: var(--panel-mid); border-radius: var(--radius-lg); padding: 1.9rem; color: var(--text-light); }
.pg-ba-after {
    background:
        linear-gradient(90deg,
            var(--step-top) 0px,
            var(--step-mid) 14px,
            transparent 44px),
        linear-gradient(180deg,
            var(--step-top) 0px,
            var(--step-mid) 14px,
            var(--cream) 44px);
    border-radius: var(--radius-lg);
    padding: 1.9rem;
}
.pg-ba-label { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--label); margin-bottom: 0.9rem; }
.pg-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 3.5rem; text-align: left; }
.pg-card {
    background:
        linear-gradient(90deg,
            var(--step-top) 0px,
            var(--step-mid) 14px,
            transparent 44px),
        linear-gradient(180deg,
            var(--step-top) 0px,
            var(--step-mid) 14px,
            var(--cream) 44px);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.5rem;
}
.pg-card h3 { font-size: 1.05rem; font-weight: 500; margin-bottom: 0.5rem; }
.pg-card p { font-size: 0.9375rem; color: var(--text-light); line-height: 1.6; }
/* Statement: white space as much as text - no card, border or fill
   behind it, its whole job is to be a pause. */
.pg-statement { max-width: 22em; margin: 4.5rem auto; text-align: center; font-size: clamp(21px, 1.944vw, 28px); font-weight: 400; line-height: 1.35; letter-spacing: -0.015em; color: var(--text); }
.pg-statement .w-reg { font-weight: 400; }
.pg-statement .w-med { font-weight: 700; }
/* Theme pills: the industry-tile pill treatment (20px radius is the
   documented tile-pills exception, not a third radius token). */
.pg-themes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 3.5rem; }
.pg-themes span { font-size: 0.9375rem; padding: 3px 9px; border-radius: 20px; background: var(--panel-mid); color: var(--text-light); }
/* Steps reuse the functions-panel numbered circles: .fn-detail ol is
   ancestor-scoped, so the wrapper carries fn-detail too. */
.pg-steps { max-width: 560px; margin: 0 auto 3.5rem; text-align: left; }
.pg-conv { max-width: 560px; margin: 0 auto 3.5rem; text-align: left; }
/* TODO marker: impossible to miss BY DESIGN - it exists so nothing
   placeholder ever ships unnoticed. Grep for pg-todo before any
   page is un-noindexed. */
.pg-todo { background: #FFF8E1; border-left: 3px solid #E8B04B; padding: 0.75rem 1rem; font-size: 0.85rem; color: #7A5C00; }
.pg-panel p, .pg-ba-before p, .pg-ba-after p { font-size: 0.9375rem; line-height: 1.65; }
.pg-panel p, .pg-ba-before p { color: var(--text-light); }
.pg-themes-note { text-align: center; font-size: 0.8rem; color: var(--label); margin-bottom: 0.9rem; }
/* E-commerce before/after: the whole abandoned-basket pitch in two
   short lines - sized up so the pair reads as the block's headline. */
.pg-ba-big { font-size: clamp(18px, 1.5vw, 22px); font-weight: 500; line-height: 1.35; }
.pg-ba-after .pg-ba-big { color: var(--text); }

/* ============ BREAKPOINTS ============
   ALL media queries live here, at the END of the file, widest first.
   A media query placed above an unconditional rule LOSES to it at equal
   specificity — that is what broke mobile on 18 Aug. Never add a
   @media block anywhere else in this file. */

@media (max-width: 1024px) { .industry-tiles { grid-template-columns: 1fr 1fr; } }

@media (max-width: 900px) {
    /* Stack: photo on top (~56svh), panel beneath — headline must
       stay above the fold. Portrait images crop squarer here; adjust
       object-position per image if subjects get lost, not the layout.
       The frame holds; the divider turns horizontal. */
    .split-hero { grid-template-columns: 1fr; }
    /* Full-bleed TOP (19 Aug): the photograph runs to the very top
       edge of the page — no 14px gap, no top hairline, no top inset.
       Sides and bottom keep the frame exactly as on desktop.
       GEOMETRY: margin-top = -(nav flow) = -(--nav-clear - 16px
       overshoot) puts the frame at y=0; the photo row grows by the
       15px of reclaimed top chrome (14 margin + 1 border) so the
       photo's BOTTOM edge and the panel beneath do not move; the
       photo's own top inset is zeroed so pixels start at y=0.
       min-height loses the same 14px so the fold is unchanged. */
    .split-hero {
        margin: calc(-1 * var(--nav-clear) + 16px) 0 14px;
        /* min-height arithmetic: top margin is 0, bottom is 14px, and
           side margins never entered the height sum — 100svh - 14px
           still fills the first screen exactly. */
        min-height: calc(100svh - 14px);
        /* Full-bleed (19 Aug): no borders at all on mobile. The
           bottom hairline is drawn by the ::after below, inset 24px
           to align with the nav pill — the element's own
           border-bottom would run edge to edge. */
        border: none;
        position: relative;
    }
    /* position:absolute takes this out of flow, so it is NOT a grid
       item of .split-hero — a static ::after would become one and
       land as a phantom row. */
    .split-hero::after {
        content: '';
        position: absolute;
        left: 24px; right: 24px; bottom: 0;
        height: 1px;
        background: var(--border);
    }
    .split-hero-photo { height: calc(52svh + 15px); } /* 50-55% share + reclaimed chrome */
    /* width: 100% overrides the base calc(100% - 8px) that paired
       with the 4px side insets — both go together. */
    .hero-frame { inset: 0 0 4px; width: 100%; height: calc(100% - 4px); }
    /* Hero at a FIXED size below 900 (full-width panel): 25px is
       the one-line maximum at 375 by real font metrics; the spec's
       26 target wraps by 8px there. */
    .split-hero-panel h1 { font-size: 25px; }
    /* Centred stack, normal spacing — the three-part spread would
       leave the stacked panel far too tall. Button replaces the QR
       (you can't scan the phone you're holding); no caption — the
       button already says what it does. */
    /* space-between across the four flattened children: the panel
       is stretched by the grid to the remaining viewport, so the
       free height distributes into three EQUAL gaps — notification
       exactly centred between the headline and the button, button
       pushed toward the bottom. gap acts as the minimum spacing on
       short screens. */
    .split-hero-panel { padding: 2rem 20px 2.5rem; gap: 2rem; justify-content: space-between; }
    /* Functions panel: single column — the conversation drops beneath
       the expanded row's text; collapsed rows stay visible around it */
    /* Detail-page shell: one column. In flipped blocks the text must
       still introduce the panel - visual reorder only, acceptable
       because text and panel are independent blocks. Two-figure
       .pg-duo grids deliberately STAY two-up (they fit at 375, and
       stacked they make the panels very tall). */
    .pg-main { padding: 0 16px; }
    .pg-block { grid-template-columns: 1fr; gap: 1.4rem; margin-bottom: 3rem; }
    .pg-block-flip .pg-text { order: -1; }
    /* Kit blocks: before stacks ON TOP (DOM order - a left-right
       comparison read top-to-bottom still works, right-left doesn't).
       Cards go to ONE column, never two - a 2+1 orphan looks like a
       mistake. */
    .pg-ba { grid-template-columns: 1fr; gap: 1rem; }
    .pg-cards { grid-template-columns: 1fr; }
    .pg-statement { margin: 3rem auto; }
    .pg-head { margin-top: 2.5rem; }
    .pg-blocks { margin-top: 3.25rem; }
    .fn-row-content { grid-template-columns: 1fr; gap: 1.5rem; padding: 0.25rem 1.25rem 2.5rem; }
    .fn-row-head { padding: 1.2rem 1.25rem; } /* size from the base clamp (floors at 16px) */
    /* Desktop enlargements scale back down on phones: no 460px empty
       panel above the fold, spacing at the previous rhythm */
    /* Conversation leads on mobile — the product shot goes first.
       order goes on .fn-chat-WRAP: it, not .fn-chat, is the direct
       grid child of .fn-row-content, and order only works between
       siblings (first attempt on .fn-chat was a silent no-op).
       VISUAL order only: DOM, reading and tab order unchanged. The
       two blocks are independent — do not copy this pattern anywhere
       sequence matters. */
    .fn-chat-wrap { order: -1; }
    .fn-chat { min-height: 0; padding: 1.25rem; }
    .fn-rule { margin: 1.4rem 0 0.9rem; }
    .fn-strip-label { margin: 0.9rem 0 0.5rem; }
    /* 16px gutter (19 Aug): max-width:none is REQUIRED — the base
       min(94vw, 1680px) would cap at 94vw and defeat the padding. */
    .fn-block { margin-top: 5rem; max-width: none; padding: 0 16px; }
    .fn-block .h2-two-weight { margin-bottom: 2rem; }
    .fn-rows { margin-top: 2rem; }
    /* Flatten the group wrappers (checked: they carry layout props
       only — nothing visual is lost) so eyebrow, headline,
       notification and button are all direct flex children and the
       panel's single 2rem gap spaces them EVENLY. Desktop's
       three-part spread depends on these wrappers, so this lives
       only in this media block. */
    .hero-centre, .hero-bottom { display: contents; }
    .notif-card { max-width: 100%; } /* full width minus the side padding */
    .hero-qr, .hero-qr-caption { display: none; }
    .hero-demo-btn { display: inline-block; }
}

@media (max-width: 900px) {
    /* Below 900px the dashboard becomes the numberless composition —
       the real one is unreadable at this width and the figures are
       the first thing to fail. .dash-mobile contains its OWN
       .dash-frame, hence the third rule: hiding .dash-frame globally
       would hide the mobile twin too. */
    .intel-panel > .dash-frame { display: none; }
    .dash-mobile { display: block; }
    .dash-mobile .dash-frame { display: block; }
    .dashm-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 0.4rem; }
    .dashm-themes { display: grid; grid-template-columns: 84px 1fr; gap: 8px 10px; align-items: center; margin-top: 1.2rem; }
    .dash-heat-m { grid-template-columns: 84px repeat(7, 1fr); margin-top: 1.2rem; }
    .ph-bar { display: block; height: 7px; border-radius: 3px; background: var(--border); }
    .ph-bar.ph-navy { height: 15px; background: var(--navy); }
    .w30 { width: 30%; } .w40 { width: 40%; } .w50 { width: 50%; } .w60 { width: 60%; }
    .dash-card .ph-bar + .ph-bar { margin-top: 8px; }
    /* 16px gutter, matching .fn-block; max-width:none required for
       the same reason. (Was two rules — the 2rem margin was dead,
       the 4rem line below always won.) */
    .intel-block { margin-top: 4rem; max-width: none; padding: 0 16px; }
    .uses-block { margin-top: 3rem; }
    /* Hybrid mobile dashboard (19 Aug): real figures on cards,
       periods and bottom panels; grey placeholders only where text
       genuinely can't be read at 375px (theme names, heat labels).
       The toggle is back — the two markets' figures now differ. */
    .dashm-periods span { font-size: 0.53rem; padding: 2px 5px; }
    .dash-mobile .dash-card-label { font-size: 0.53rem; }
    .dash-mobile .dash-card-fig { font-size: 1.2rem; }
    .dash-mobile .dash-card-sub { font-size: 0.6rem; }
    .dashm-bottom { display: grid; gap: 10px; margin-top: 1.2rem; }
    .dash-mobile .dash-mini-cells { gap: 10px; }
    .dash-mobile .mini-fig { font-size: 1rem; }
    .dash-mobile .mini-sub { font-size: 0.56rem; }
    .dash-mobile .dash-top { padding: 8px 12px; }
    .intel-mobile-note {
        display: block;
        font-size: 0.9375rem; color: var(--text-light); line-height: 1.6;
        max-width: 420px; margin: 1.25rem auto 0; text-align: center;
    }
}

@media (max-width: 820px) {
    /* Phone nav (16 Aug): tight 10px frame, modest 56px pill, wordmark
       at nav scale not masthead scale. --nav-clear is recomputed for
       this pill: flow = 20 top pad + 56 bar + 2 border = 78, + the
       16px overshoot = 94. Both the hero underlap and the eyebrow
       clearance read this variable. (A 44px pill drop was tried and
       reverted 19 Aug — scrolled, the pill read as mid-page.) */
    :root { --nav-clear: 94px; }
    .nav-pill { width: auto; max-width: none; }
    .nav-wrap { padding: 20px 24px 0; } /* 24px sides: pill inset INSIDE the full-bleed photo, aligned with the hero's bottom line */
    /* Fixed flow height, mobile arithmetic: 20 pad + 56 bar + 2 border
       = 78. The open burger menu now overlays the page too. */
    #site-nav { height: 78px; }
    .nav-bar { min-height: 56px; padding: 0 10px; }
    .nav-links { display: none; }
    .nav-burger { display: block; }
    .nav-mark-link { margin-right: 0; }
    .nav-mark-link img { height: 26px; }
    .nav-logo-link { height: 56px; transform: translateX(2px); } /* tracks .nav-bar min-height */
    .nav-logo-link img { height: 28px; } /* +20% 21 Aug (23 -> 28); bar min-height 56 still governs, --nav-clear unchanged */
    .nav-actions .nav-contact { display: none; }
    .nav-pill.mobile-open .nav-mobile-menu { display: block; }
    .nav-mobile-menu { border-top: 1px solid var(--border); padding: 8px 14px 14px; }
    .nav-mobile-menu a.m-link {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: var(--text);
        text-decoration: none;
        padding: 13px 4px; /* 44px minimum touch target */
        border-bottom: 1px solid var(--border);
    }
    .nav-mobile-menu a.m-link:last-of-type { border-bottom: none; }
    /* Grouped, collapsible (21 Aug): three <details> groups matching
       the top-level items - eleven flat links is too many. Native
       details/summary: keyboard-accessible with no extra JS. */
    .m-group { border-bottom: 1px solid var(--border); }
    .m-group summary {
        list-style: none; cursor: pointer;
        font-size: 14px; font-weight: 600; color: var(--text);
        padding: 13px 4px; /* 44px minimum touch target */
        display: flex; align-items: center; justify-content: space-between;
    }
    .m-group summary::-webkit-details-marker { display: none; }
    .m-group summary::after { content: '+'; color: var(--label); font-weight: 500; }
    .m-group[open] summary::after { content: '\2212'; }
    .m-group .m-link { padding-left: 16px; font-weight: 500; }
    .m-group .m-link:last-of-type { border-bottom: none; }
    .nav-mobile-demo { display: flex; align-items: center; gap: 14px; padding-top: 12px; }
    .nav-mobile-demo img {
        width: 84px; height: 84px;
        background: #fff; border: 1px solid var(--border);
        border-radius: var(--radius-sm); padding: 5px;
    }
    .nav-mobile-demo .t { font-size: 12px; font-weight: 600; }
    .nav-mobile-demo .d { font-size: 11px; color: var(--text-light); line-height: 1.5; }
}

@media (max-width: 700px) {
    .steps-row-inner, .industry-tiles { grid-template-columns: 1fr; }
    .steps-row-inner { gap: 2.25rem; }
    /* Why tiles: swipe carousel (ref Cadence mobile). The peek must
       show CONTENT, not margin — hence the tighter mobile padding
       below, and 11vw + 78vw + 11vw = 100vw so snap-align:center
       gives SYMMETRICAL slivers of the neighbours (~41px each at
       375px). No fades, masks or swipe hints — the fix is showing
       more of something interesting, not decorating the edge.
       Deliberately the opposite of the industry tiles (navigation,
       stays stacked). */
    .why-tiles {
        display: flex;
        grid-template-columns: none;      /* cancel the desktop grid */
        /* The scroller MUST be full-bleed. The desktop max-width of
           94vw clips the peek and leaves 3vw of white page each side,
           which reads as a bug rather than as "swipe me". The
           11vw + 78vw + 11vw arithmetic only works against a 100vw
           container. Do not delete in a tidy-up. */
        max-width: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 10px;
        padding: 0 11vw;
        scrollbar-width: none;            /* Firefox */
    }
    .why-tiles::-webkit-scrollbar { display: none; }
    .why-tile {
        flex: 0 0 78vw;
        scroll-snap-align: center;
        /* Mobile only — desktop keeps 2.25rem 2rem. This is what puts
           the image into the peek instead of 32px of blank card.
           Never below 1rem — the heading starts falling off the card. */
        padding: 1.15rem;
    }
    .why-nav { display: flex; justify-content: space-between; max-width: 78vw; margin: 1.25rem auto 0; }
    /* The image bleeds half-way into the tile padding: picture-to-
       edge gap is half the text-to-edge gap (Joe, 19 Aug). Negative
       margins rather than cutting the tile padding further — the
       text keeps its 1.15rem so the heading doesn't fall off the
       card. */
    .img-pending { height: 200px; margin-left: -0.575rem; margin-right: -0.575rem; } /* 260px empty x3 is too much scroll */
    /* Single column: dividers BETWEEN tiles only — none above the
       first, none below the last (three lines for four items), and in
       --border not --text: a near-black rule between every item down
       a phone screen is far heavier than one above a column. */
    .market-card { border-top: none; padding-top: 0; padding-bottom: 17px; }
    .market-card + .market-card { border-top: 1px solid var(--border); padding-top: 17px; }
    .market-card:last-child { padding-bottom: 0; }
}

@media (max-width: 700px) { .seg-figures { grid-template-columns: 1fr; gap: 8px; } }

@media (max-width: 700px) {
    main.legal { padding: 2rem 1.2rem 3rem; }
    .legal h2 { font-size: 1.3rem; margin-top: 2.25rem; }
    .legal h3 { font-size: 1.05rem; }
}

@media (max-width: 700px) {
    .footer-cols { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    /* No room beside the lockup — company line moves ABOVE it,
       left-aligned with the page content (24px), never overlapping.
       The lockup itself stays full-bleed edge to edge. */
    .footer-lockup-row { flex-direction: column; align-items: flex-start; gap: 0.75rem; padding-right: 0; }
    .footer-company { order: -1; margin-left: 0; text-align: left; padding: 0 24px 0 24px; }
    .footer-lockup { width: 100%; }
}

@media (max-width: 700px) {
    .features-grid, .offer-grid, .contact-options { grid-template-columns: 1fr; }
    .step { flex-direction: column; gap: 0.75rem; }
    .nav-facts { grid-template-columns: 1fr; gap: 8px; }
    .hero { padding: calc(var(--nav-clear) + 40px) 20px 56px; }
}

@media (max-width: 600px) {
    .strip-cells.cols-4, .strip-boxes.cols-4 { grid-template-columns: 1fr 1fr; }
    .strip-cells.cols-3, .strip-boxes.cols-3 { grid-template-columns: 1fr; }
}

/* Reduced motion: the accordion still opens and closes — instantly.
   (prefers-reduced-motion carries no max-width, so it sits after the
   width ladder without breaking the widest-first ordering rule.) */
@media (prefers-reduced-motion: reduce) {
    .fn-row-panel, .fn-row-content { transition: none; }
    .nav-sublink, .nav-panel-demo, .nav-fact, .nav-facts-source { animation: none; }
}