/* 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 */
    --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-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;
}
.nav-wrap {
    padding: 28px 18px 0; /* Cadence-matched gap above the pill (12 Aug) */
}

.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 */
    /* 81% of the viewport, matched to Cadence's measured proportions
       (12 Aug) — proportional so the side gaps scale with the window
       instead of a fixed cap holding the pill narrow on big screens.
       Mobile overrides to full width. */
    width: min(81vw, 2000px);
    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-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: 46px; width: auto; display: block; } /* masthead scale, 12 Aug */

/* 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); }
.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-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);
}

.nav-sublinks { display: flex; flex-direction: column; }
.nav-sublink {
    display: block;
    text-decoration: none;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    border-bottom: 1px solid var(--border);
}
.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); display: block; line-height: 1.45; }

.nav-panel-demo {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: flex-end;
    padding-top: 6px;
}
.nav-panel-demo img {
    width: 96px; height: 96px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px;
}
.nav-panel-demo .t { font-size: 13px; 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: 7px 12px; border-radius: var(--radius-sm);
    background: var(--navy); color: var(--cream);
    font-size: 12px; font-weight: 600; text-decoration: none;
}
.nav-demo-open:hover { background: var(--navy-dark); }

/* 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; }

@media (max-width: 820px) {
    .nav-pill { width: auto; max-width: none; } /* full width inside the 14px wrap padding */
    .nav-wrap { padding: 20px 18px 0; }
    .nav-bar { min-height: 66px; padding: 0 12px; }
    .nav-links { display: none; }
    .nav-burger { display: block; }
    .nav-mark-link { margin-right: 0; }
    .nav-mark-link img { height: 26px; }
    .nav-logo-link { height: 66px; transform: translateX(2px); } /* tracks .nav-bar min-height */
    .nav-logo-link img { height: 32px; }
    .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: 11px 4px;
        border-bottom: 1px solid var(--border);
    }
    .nav-mobile-menu a.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; }
}

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

.hero {
    /* Flat block placeholder — see the comment in index.html for the
       intended photograph. 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.95rem; 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; }

/* Lead paragraph under the hero */
.lead-para {
    max-width: 420px; margin: 2.5rem auto 2rem; padding: 0 24px;
    text-align: center; font-size: 1rem; color: var(--text-light); line-height: 1.7;
}

/* Reserved photograph band */
.photo-band {
    max-width: 1024px; margin: 0 auto 5rem; padding: 0 24px;
}
.photo-band-inner {
    background: var(--panel-mid); border-radius: var(--radius-lg);
    height: 180px; display: flex; align-items: center; justify-content: center;
}

/* Steps 01–03: one bordered container, hairline dividers, no connectors */
.steps-row {
    max-width: 1024px; margin: 0 auto; padding: 0 24px;
}
/* No container, no dividers, no fill — three columns of text on the
   page; the grouping comes from the gutters. */
.steps-row-inner {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3rem;
}
.step-cell { text-align: center; }
.step-num { font-size: 0.8rem; font-weight: 600; color: var(--label); letter-spacing: 0.08em; margin-bottom: 0.5rem; }
.step-cell h3 { font-size: 1.05rem; font-weight: 500; margin-bottom: 0.3rem; }
.step-cell p { font-size: 0.9rem; 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). */
.step04-card {
    max-width: 300px; margin: 2.75rem auto 0;
    text-align: center;
}
.step04-card h3 { font-size: 1.05rem; font-weight: 500; margin-bottom: 0.3rem; }
.step04-card p { font-size: 0.9rem; color: var(--text-light); line-height: 1.65; }

/* The two markets — equal cards, neither featured, non-linking */
.market-cards {
    max-width: 1024px; margin: 5rem auto; padding: 0 24px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
.market-card {
    background: var(--panel); border-radius: var(--radius-lg);
    padding: 2.25rem 1.75rem; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
    /* Whole card is a link into its market's section */
    text-decoration: none; color: inherit;
    transition: transform 0.15s;
}
.market-card:hover { transform: translateY(-2px); }
/* De-chipped label: small letter-spaced navy caps, no fill (the old
   --navy-light chip read lilac on the warm page) */
.chip-label {
    font-size: 0.72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--navy);
}
.market-card h3 { font-size: 1.4rem; font-weight: 400; letter-spacing: -0.015em; }
.market-card p { font-size: 0.92rem; color: var(--text-light); line-height: 1.65; }
.dest-line { font-size: 0.88rem; color: var(--text-light); margin-top: 0.4rem; }

/* "And it isn't only reviews" — roomy full-width white card */
.notonly-card {
    max-width: 1024px; margin: 0 auto; padding: 0 24px;
}
.notonly-card-inner {
    background: var(--panel); border-radius: var(--radius-lg);
    padding: 4.5rem 2rem; text-align: center;
}
.notonly-card-inner h2 { font-size: clamp(1.7rem, 3.2vw, 2.35rem); font-weight: 400; letter-spacing: -0.02em; margin-bottom: 0.75rem; }
.notonly-card-inner > p { font-size: 1rem; color: var(--text-light); max-width: 560px; margin: 0 auto 1.5rem; line-height: 1.7; }
/* Examples, not links: plain muted text, middot-separated */
.example-line { font-size: 0.92rem; color: var(--text-light); max-width: 640px; margin: 0 auto; line-height: 1.8; }

/* Intelligence layer — full-bleed navy band, then a generous gap */
.navy-band {
    background: var(--navy); color: var(--cream);
    text-align: center; padding: 3rem 24px;
    margin: 5rem 0 84px;
}
.navy-band h2 { font-size: clamp(1.3rem, 2.8vw, 1.7rem); font-weight: 700; letter-spacing: -0.015em; margin-bottom: 0.5rem; }
.navy-band p { font-size: 0.98rem; color: rgba(255, 255, 255, 0.78); }

/* Two-weight headings ("Same method. Different use.") */
.h2-two-weight { text-align: center; font-size: clamp(1.7rem, 3.2vw, 2.35rem); 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: 880px; margin: 0 auto; padding: 0 24px 4.5rem; text-align: center; }
.uses-panel-ph {
    background: var(--panel-mid); border-radius: var(--radius-lg);
    height: 180px; display: flex; align-items: center; justify-content: center;
}
.uses-link { display: inline-block; margin-top: 1rem; font-size: 0.92rem; font-weight: 600; color: var(--navy); text-decoration: none; }
.uses-link:hover { 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 {
    max-width: 1024px; 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: 2rem 1.75rem;
    display: flex; flex-direction: column;
}
.why-tile-text { flex: 1; }
.why-tile h3 { font-size: 1.4rem; font-weight: 400; margin-bottom: 0.4rem; letter-spacing: -0.015em; }
.why-tile p { font-size: 0.9rem; color: var(--text-light); line-height: 1.65; }
.img-pending {
    margin-top: 1.25rem; background: var(--hero-flat); border-radius: var(--radius-sm);
    height: 120px; display: flex; align-items: center; justify-content: center;
}
.why-source { max-width: 1024px; margin: 0.75rem auto 0; padding: 0 24px; font-size: 0.68rem; color: var(--label); text-align: center; }

/* 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 */

@media (max-width: 700px) {
    .steps-row-inner { grid-template-columns: 1fr; gap: 2.25rem; }
    .market-cards, .why-tiles { grid-template-columns: 1fr; }
}

/* 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; }
/* All three pills share one footprint — same radius, padding, font,
   height, min-width, and NO border in either state (a border on the
   selected pill would make it physically bigger than its neighbours).
   Selection changes fill and text colour only, so the row never
   reflows as the selection moves. */
.seg-pill {
    font-family: inherit;
    font-size: 0.92rem; font-weight: 600;
    padding: 10px 20px; border-radius: var(--radius-sm);
    border: none; cursor: pointer;
    min-width: 176px;
    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; }
@media (max-width: 700px) { .seg-figures { grid-template-columns: 1fr; gap: 8px; } }

/* 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); }
@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; }
}

/* 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 */
}
@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%; }
}

/* 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 */
@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; }
}