/* ============================================================================
   GLOBAL OVERSEAS — DESIGN SYSTEM "MOLTEN STEEL" — BLUEPRINT EDITION
   v4.0 · blue-white-red light theme · hand-authored · zero dependencies
   ----------------------------------------------------------------------------
   Concept: engineering blueprint — 图纸白 ground, 钢蓝 structure, 老站红 action.
     · blueprint-white ground                #f5f6f8 → #ffffff
     · brand red, action only (CTA/active)   #e22e2b
     · steel blue, structure (labels/links)  #1f2d5e / #2f4a86
     · ink-navy type on white (editorial contrast)
     · hairline rules, corner brackets, tabular mono figures
   ----------------------------------------------------------------------------
   Sections
     01 tokens          06 hero              11 catalogue        16 footer
     02 reset/base      07 preloader         12 detail           17 utilities
     03 layout          08 buttons           13 editorial        18 reveal
     04 chrome (nav)    09 statistics        14 faq/forms        19 keyframes
     05 progress        10 cards             15 process/timeline 20 responsive
   ========================================================================= */

/* ============================================================ 01. TOKENS */
:root {
    /* --- ground (blueprint white) --- */
    --ink-900: #eceef2;
    --ink-850: #f5f6f8;
    --ink-800: #ffffff;
    --ink-700: #fafbfc;
    --ink-600: #e6e9ee;
    --ink-500: #d5dae2;

    /* --- action red (token names kept; hue is now brand red) --- */
    --amber-100: #fdeaea;
    --amber-200: #f3b8b6;
    --amber-300: #c22724;
    --amber-400: #e22e2b;
    --amber-500: #bf1f1c;
    --amber-600: #9c1a17;
    --amber-grad: linear-gradient(100deg, #d92b28 0%, #f0554f 46%, #e23a37 100%);
    --amber-sheen: linear-gradient(100deg, rgba(255,255,255,0) 18%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 82%);
    --on-accent: #ffffff;

    /* --- ink-navy text on white --- */
    --plat-000: #101a26;
    --plat-100: #22303f;
    --plat-200: #3f4a59;
    --plat-300: #55606f;
    --plat-400: #6e7987;
    --plat-500: #98a2b0;
    --plat-600: #b9c1cc;

    /* --- steel blue: structure, labels, links --- */
    --cyan-400: #2f4a86;
    --cyan-500: #1f2d5e;

    /* --- surfaces & lines --- */
    --surface-1: rgba(31, 45, 94, .028);
    --surface-2: rgba(31, 45, 94, .05);
    --surface-3: rgba(31, 45, 94, .09);
    --line-1: #e4e7ed;
    --line-2: #d5dae2;
    --line-3: #b7bfcc;
    --line-amber: rgba(226, 46, 43, .32);

    /* --- type --- */
    --font-display: "Inter Tight", "Inter", "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    --font-body: "Inter", "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    --font-mono: "JetBrains Mono", "Cascadia Mono", "SFMono-Regular", Consolas, ui-monospace, monospace;

    --fs-2xs: .6875rem;
    --fs-xs: .75rem;
    --fs-sm: .875rem;
    --fs-base: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.3125rem;
    --fs-2xl: 1.625rem;
    --fs-3xl: 2.125rem;
    --fs-4xl: 2.75rem;
    --fs-5xl: 3.5rem;
    --fs-6xl: 4.5rem;
    --fs-7xl: 6rem;
    --fs-8xl: 7.5rem;

    --lh-display: .96;
    --lh-tight: 1.12;
    --lh-snug: 1.34;
    --lh-body: 1.72;
    --lh-loose: 1.9;

    --ls-display: -.045em;
    --ls-tight: -.025em;
    --ls-label: .22em;
    --ls-label-wide: .34em;

    /* --- spacing --- */
    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;
    --sp-10: 8rem;

    /* --- layout --- */
    --shell: 1320px;
    --shell-wide: 1560px;
    --shell-narrow: 860px;
    --gutter: clamp(1.15rem, 4.2vw, 3rem);
    --nav-h: 74px;
    --topbar-h: 36px;

    /* --- radius: deliberately sharp, industrial --- */
    --r-1: 2px;
    --r-2: 3px;
    --r-3: 5px;
    --r-pill: 999px;

    /* --- depth --- */
    --sh-1: 0 1px 2px rgba(16, 26, 38, .06);
    --sh-2: 0 18px 44px -26px rgba(16, 26, 38, .28);
    --sh-3: 0 34px 80px -34px rgba(16, 26, 38, .32);
    --glow-amber: 0 0 0 1px rgba(226, 46, 43, .2), 0 18px 48px -20px rgba(226, 46, 43, .26);
    --glow-amber-lg: 0 0 0 1px rgba(226, 46, 43, .28), 0 26px 70px -24px rgba(226, 46, 43, .32);

    /* --- motion --- */
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --ease-snap: cubic-bezier(.34, 1.4, .64, 1);
    --t-1: 160ms var(--ease-out);
    --t-2: 380ms var(--ease-out);
    --t-3: 700ms var(--ease-out);
    --t-4: 1200ms var(--ease-out);
}

/* ======================================================== 02. RESET / BASE */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 1.5rem);
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    font-weight: 380;
    color: var(--plat-200);
    background: var(--ink-850);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* molten wash — fixed, behind everything */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(1200px 700px at 82% -10%, rgba(226, 46, 43, .07), transparent 62%),
        radial-gradient(900px 600px at 8% 8%, rgba(31, 45, 94, .06), transparent 60%),
        radial-gradient(1400px 900px at 50% 110%, rgba(31, 45, 94, .05), transparent 70%);
}

/* engineering grid, masked to the centre */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .5;
    background-image:
        linear-gradient(rgba(31, 45, 94, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31, 45, 94, .045) 1px, transparent 1px);
    background-size: 96px 96px;
    -webkit-mask-image: radial-gradient(circle at 50% 34%, #000 0%, transparent 80%);
    mask-image: radial-gradient(circle at 50% 34%, #000 0%, transparent 80%);
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; transition: color var(--t-1); }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

::selection { background: var(--amber-400); color: var(--on-accent); }

:focus-visible {
    outline: 2px solid var(--amber-300);
    outline-offset: 3px;
    border-radius: var(--r-1);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-900); }
::-webkit-scrollbar-thumb {
    background: var(--ink-500);
    border: 2px solid var(--ink-900);
    border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--amber-600); }

.skip-link {
    position: absolute;
    left: 50%;
    top: -100px;
    transform: translateX(-50%);
    z-index: 5000;
    padding: .7rem 1.5rem;
    background: var(--amber-400);
    color: var(--on-accent);
    font-weight: 600;
    transition: top var(--t-1);
}
.skip-link:focus { top: 0; }

/* ============================================================ 03. LAYOUT */
.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
    position: relative;
    z-index: 2;
}
.shell-wide { max-width: var(--shell-wide); }
.shell-narrow { max-width: var(--shell-narrow); }

/* alias kept for the guide/article layouts, which use .container-narrow to
   constrain long-form prose to a comfortable measure */
.container-narrow {
    width: 100%;
    max-width: var(--shell-narrow);
    margin-inline: auto;
    position: relative;
    z-index: 2;
}
.container-narrow.shell { padding-inline: var(--gutter); }

.band {
    position: relative;
    padding: clamp(3.5rem, 8vw, 7rem) 0;
    z-index: 2;
}
.band-tight { padding: clamp(3rem, 6vw, 5rem) 0; }
.band-ink { background: linear-gradient(180deg, var(--ink-900), var(--ink-850) 50%, var(--ink-900)); border-block: 1px solid var(--line-1); }
.band-raised { background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); }

/* section heading block */
.head { max-width: 780px; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.head-center { margin-inline: auto; text-align: center; }
.head-wide { max-width: 940px; }

.kicker {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-label-wide);
    text-transform: uppercase;
    color: var(--cyan-400);
    margin-bottom: 1.25rem;
}
.kicker::before {
    content: "";
    width: 30px;
    height: 1px;
    background: var(--cyan-400);
}
.head-center .kicker::after {
    content: "";
    width: 30px;
    height: 1px;
    background: var(--cyan-400);
}

.display {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 5.2vw, var(--fs-6xl));
    font-weight: 640;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-display);
    color: var(--plat-000);
    text-wrap: balance;
}
.display em {
    font-style: normal;
    background: var(--amber-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.display-sm { font-size: clamp(1.6rem, 3.4vw, var(--fs-4xl)); }

.lede {
    font-size: clamp(1.02rem, 1.5vw, 1.22rem);
    line-height: var(--lh-loose);
    color: var(--plat-300);
    max-width: 64ch;
}
.head-center .lede { margin-inline: auto; }

.label {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--plat-400);
}

/* hairline rule with a molten tip */
.rule {
    height: 1px;
    background: linear-gradient(90deg, var(--line-2), var(--line-1) 60%, transparent);
    position: relative;
}
.rule::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: -1px;
    width: 62px;
    height: 3px;
    background: var(--amber-grad);
}

/* ===================================================== 04. CHROME / NAV */
.progress-bar {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    height: 2px;
    width: 0;
    z-index: 1200;
    background: var(--amber-grad);
    box-shadow: 0 0 18px rgba(226, 46, 43, .5);
    transition: width 80ms linear;
}

.topbar {
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--line-1);
    font-size: var(--fs-2xs);
    letter-spacing: .06em;
    color: var(--plat-400);
    overflow: hidden;
    transition: height var(--t-2), opacity var(--t-2);
}
.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.topbar ul { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.topbar li { display: flex; align-items: center; gap: .45rem; }
.topbar a:hover { color: var(--amber-300); }
.topbar b { color: var(--plat-200); font-weight: 500; }
.live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--amber-400);
    box-shadow: 0 0 0 0 rgba(226, 46, 43, .6);
    animation: pulse-ring 2.4s var(--ease-in-out) infinite;
}

.nav {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 1100;
    transition: transform 480ms var(--ease-out), background var(--t-2), border-color var(--t-2), backdrop-filter var(--t-2);
    border-bottom: 1px solid transparent;
}
.nav.scrolled {
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-bottom-color: var(--line-1);
}
.nav.scrolled .topbar { height: 0; opacity: 0; border-color: transparent; }
.nav.hidden { transform: translateY(-102%); }

.nav-inner {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.4vw, 2.5rem);
    min-height: var(--nav-h);
}

.brand { display: inline-flex; align-items: center; gap: .8rem; flex-shrink: 0; }
.brand-mark {
    width: 34px;
    height: 34px;
    color: var(--amber-400);
    flex-shrink: 0;
}
.brand-mark path, .brand-mark circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
}
.brand-img { height: 40px; width: auto; filter: drop-shadow(0 2px 8px rgba(16,26,38,.18)); transition: filter var(--t-2); }
.brand:hover .brand-img { filter: drop-shadow(0 0 14px rgba(226,46,43,.35)); }
.brand-name {
    font-family: var(--font-display);
    font-size: var(--fs-base);
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--plat-000);
    line-height: 1.1;
}
.brand-name i {
    display: block;
    font-family: var(--font-mono);
    font-style: normal;
    font-size: .56rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--amber-300);
    margin-top: .22rem;
}

.menu { display: flex; align-items: center; gap: .1rem; }
.menu > li { position: relative; }
.menu a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .65rem .85rem;
    font-size: var(--fs-sm);
    color: var(--plat-300);
    position: relative;
    transition: color var(--t-1);
}
.menu a::after {
    content: "";
    position: absolute;
    inset-inline: .85rem;
    bottom: .3rem;
    height: 1px;
    background: var(--amber-400);
    transform: scaleX(0);
    transform-origin: inline-start;
    transition: transform var(--t-2);
}
.menu a:hover, .menu a[aria-current] { color: var(--plat-000); }
.menu a:hover::after, .menu a[aria-current]::after { transform: scaleX(1); }

.sub {
    position: absolute;
    top: calc(100% + .5rem);
    inset-inline-start: -.4rem;
    min-width: 272px;
    padding: .45rem;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid var(--line-2);
    border-radius: var(--r-2);
    box-shadow: var(--sh-3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--t-2), transform var(--t-2), visibility var(--t-2);
}
.menu > li:hover .sub, .menu > li:focus-within .sub { opacity: 1; visibility: visible; transform: translateY(0); }
.sub a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .62rem .8rem;
    font-size: var(--fs-sm);
    border-radius: var(--r-1);
}
.sub a::after { display: none; }
.sub a::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    width: 2px;
    height: 0;
    background: var(--amber-400);
    transform: translateY(-50%);
    transition: height var(--t-1);
}
.sub a:hover { background: var(--surface-2); color: var(--plat-000); }
.sub a:hover::before { height: 60%; }

.nav-tail { margin-inline-start: auto; display: flex; align-items: center; gap: .8rem; }

.langs {
    display: flex;
    align-items: center;
    gap: .1rem;
    padding: .2rem;
    border: 1px solid var(--line-2);
    border-radius: var(--r-pill);
}
.langs a {
    display: grid;
    place-items: center;
    min-width: 32px;
    height: 26px;
    padding-inline: .45rem;
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: .06em;
    color: var(--plat-400);
    border-radius: var(--r-pill);
    transition: all var(--t-1);
}
.langs a:hover { color: var(--plat-000); background: var(--surface-3); }
.langs a[aria-current] {
    color: var(--on-accent);
    background: var(--amber-grad);
    font-weight: 600;
}

.burger {
    display: none;
    width: 44px;
    height: 44px;
    position: relative;
    border: 1px solid var(--line-2);
    border-radius: var(--r-2);
}
.burger span {
    position: absolute;
    inset-inline: 11px;
    height: 1.5px;
    background: var(--plat-100);
    transition: transform var(--t-2), opacity var(--t-1);
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; width: 13px; }
.burger span:nth-child(3) { top: 27px; }
.menu-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-open .burger span:nth-child(2) { opacity: 0; }
.menu-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ========================================================= 05. PRELOADER */
.loader {
    position: fixed;
    inset: 0;
    z-index: 6000;
    background: var(--ink-900);
    display: grid;
    place-items: center;
    transition: opacity .8s var(--ease-out), visibility .8s;
}
.loader.done { opacity: 0; visibility: hidden; }
body.locked { overflow: hidden; }

.loader-inner { width: min(420px, 78vw); text-align: center; }

.loader-mark {
    width: 148px;
    height: auto;
    margin: 0 auto 30px;
    display: block;
    overflow: visible;
    filter: drop-shadow(0 0 28px rgba(226, 46, 43, .18));
}
.loader-mark .lm-ring {
    fill: none;
    stroke: var(--line-2);
    stroke-width: .8;
    opacity: 0;
    animation: lm-ring .29s var(--ease-out) .03s forwards;
}
.loader-mark .lm-p {
    fill-rule: evenodd;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    fill-opacity: 0;
    animation: lm-draw .41s var(--ease-out) forwards,
               lm-fill .21s ease forwards;
}
.loader-mark .lm-red   { stroke: #e22e2b; fill: #e22e2b; animation-delay: .03s, .29s; }
.loader-mark .lm-blue  { stroke: #2f4a86; fill: #2f4a86; animation-delay: .09s, .35s; }
.loader-mark .lm-inner { stroke: #22303f; fill: #22303f; animation-delay: .15s, .41s; }

.loader-name {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--plat-000);
    margin-bottom: .35rem;
}
.loader-sub {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-label-wide);
    text-transform: uppercase;
    color: var(--plat-400);
    margin-bottom: 26px;
}
.loader-meter {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
}
.loader-status { color: var(--plat-400); letter-spacing: .1em; }
.loader-pct { color: var(--amber-300); font-size: var(--fs-lg); }
.loader-bar {
    height: 2px;
    background: var(--line-1);
    overflow: hidden;
}
.loader-bar i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--amber-grad);
    box-shadow: 0 0 14px rgba(226, 46, 43, .55);
}
.loader-steps {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: .58rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--plat-600);
}
.loader-steps span.on { color: var(--amber-300); }

/* ============================================================ 06. HERO */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: calc(var(--nav-h) + var(--topbar-h) + 4rem) 0 clamp(4rem, 8vw, 7rem);
    overflow: hidden;
    isolation: isolate;
    background: var(--ink-900);
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .16;
    filter: grayscale(.85);
    transform: scale(1.06);
    will-change: transform;
}
.hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(96deg, rgba(245,246,248,.97) 0%, rgba(245,246,248,.9) 34%, rgba(245,246,248,.55) 60%, rgba(245,246,248,.92) 100%),
        radial-gradient(900px 560px at 84% 26%, rgba(226,46,43,.12), transparent 62%);
}
.hero-media::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 52%;
    z-index: 1;
    background: linear-gradient(180deg, transparent, var(--ink-900) 90%);
}

.hero-canvas {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    width: min(52vw, 1180px);
    height: 100%;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity .9s ease .1s;
}
.hero-canvas.is-ready { opacity: 1; }
.hero-strand-poster {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    width: min(52vw, 1180px);
    height: 100%;
    z-index: 3;
    pointer-events: none;
}
.hero-strand-poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.hero-strand-poster[hidden] { display: none; }
.hero-scan {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: .5;
    background: repeating-linear-gradient(180deg, rgba(31,45,94,.03) 0 1px, transparent 1px 5px);
}

.hero-body { position: relative; z-index: 4; max-width: 1000px; }

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem 1.1rem .5rem .65rem;
    border: 1px solid var(--line-amber);
    border-radius: var(--r-pill);
    background: rgba(255,255,255,.68);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--amber-300);
    margin-bottom: 2rem;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 8vw, var(--fs-8xl));
    /* Height-aware cap on top of the width-aware one.
       The headline's first span wraps in every language ("PC strand
       manufacturer." needs 1226px at 120px type, the body only offers 904px),
       so the hero renders three lines and stands 1042-1220px tall. That pushes
       the primary CTA below the fold at 1366x768 (EN, ES) and 1440x900 (AR).
       12vh is the largest cap that brings the CTA back above 768px while
       keeping the type large; it only engages on viewports flatter than
       2:3, so phones and 1080p+ screens are unaffected. */
    font-size: clamp(2.6rem, min(8vw, 12vh), var(--fs-8xl));
    font-weight: 700;
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    color: var(--plat-000);
    margin-bottom: 1.75rem;
    text-shadow: 0 18px 50px rgba(16,26,38,.14);
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .molten {
    background: linear-gradient(96deg, #1f2d5e 0%, #2f4a86 26%, #e22e2b 72%, #f0554f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero-lede {
    font-size: clamp(1.04rem, 1.6vw, 1.28rem);
    line-height: var(--lh-loose);
    color: var(--plat-200);
    max-width: 58ch;
    margin-bottom: 2.5rem;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }

.hero-strip {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    margin-top: clamp(3rem, 6vw, 5rem);
    background: var(--line-1);
    border: 1px solid var(--line-1);
}
.hero-strip > div {
    padding: 1.5rem 1.35rem;
    background: rgba(255,255,255,.74);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background var(--t-2);
}
.hero-strip > div:hover { background: rgba(226,46,43,.06); }
.hero-strip b {
    display: block;
    font-family: var(--font-mono);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -.03em;
    color: var(--plat-000);
    font-variant-numeric: tabular-nums;
}
.hero-strip b i { font-style: normal; color: var(--amber-400); font-size: .58em; margin-inline-start: .1em; }
.hero-strip div > span {
    display: block;
    margin-top: .5rem;
    font-family: var(--font-mono);
    font-size: .6rem;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--plat-400);
}

.hero-scroll {
    position: absolute;
    inset-inline-start: 50%;
    bottom: 1.75rem;
    transform: translateX(-50%);
    z-index: 5;
    display: grid;
    place-items: center;
    gap: .6rem;
    font-family: var(--font-mono);
    font-size: .58rem;
    letter-spacing: var(--ls-label-wide);
    color: var(--plat-500);
}
.hero-scroll i {
    display: block;
    width: 1px;
    height: 52px;
    background: linear-gradient(180deg, var(--amber-400), transparent);
    animation: cue 2.6s var(--ease-in-out) infinite;
}

/* =========================================================== 07. BUTTONS */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    padding: 1.05rem 2.1rem;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: var(--r-1);
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    white-space: nowrap;
    transition: transform var(--t-1), box-shadow var(--t-2), border-color var(--t-2), color var(--t-2);
}
.btn > * { position: relative; z-index: 2; }
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.btn svg path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn .ico { transition: transform var(--t-2); }
.btn:hover .ico { transform: translateX(5px); }

.btn-molten {
    color: var(--on-accent);
    background: var(--amber-grad);
    background-size: 220% 100%;
    box-shadow: 0 16px 44px -18px rgba(226, 46, 43, .55);
}
.btn-molten::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--amber-sheen);
    transform: translateX(-130%) skewX(-18deg);
    transition: transform 900ms var(--ease-out);
}
.btn-molten:hover {
    transform: translateY(-2px);
    background-position: 100% 0;
    box-shadow: 0 24px 60px -18px rgba(226, 46, 43, .6);
}
.btn-molten:hover::before { transform: translateX(130%) skewX(-18deg); }

.btn-steel {
    color: var(--plat-100);
    border-color: var(--line-3);
    background: var(--surface-1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.btn-steel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--surface-3);
    transform: translateY(101%);
    transition: transform var(--t-2);
}
.btn-steel:hover { transform: translateY(-2px); border-color: var(--plat-300); color: var(--plat-000); }
.btn-steel:hover::before { transform: translateY(0); }

.btn-line {
    color: var(--amber-300);
    border-color: var(--line-amber);
}
.btn-line:hover { color: var(--on-accent); background: var(--amber-grad); border-color: transparent; transform: translateY(-2px); }

.btn-lg { padding: 1.2rem 2.6rem; font-size: var(--fs-sm); }
.btn-sm { padding: .7rem 1.3rem; font-size: var(--fs-2xs); }
.btn-block { width: 100%; }

.arrow-link {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--amber-300);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--line-amber);
    transition: gap var(--t-2), color var(--t-1), border-color var(--t-1);
}
.arrow-link:hover { gap: .95rem; color: var(--amber-500); border-color: var(--amber-400); }

/* ======================================================== 08. STATISTICS */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1px;
    background: var(--line-1);
    border: 1px solid var(--line-1);
}
.stat {
    position: relative;
    padding: clamp(1.8rem, 3.4vw, 3rem) clamp(1.2rem, 2.4vw, 2rem);
    background: var(--ink-800);
    overflow: hidden;
    transition: background var(--t-2);
}
.stat::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 2px;
    background: var(--amber-grad);
    transform: scaleX(0);
    transform-origin: inline-start;
    transition: transform var(--t-3);
}
.stat:hover { background: rgba(226,46,43,.045); }
.stat:hover::before { transform: scaleX(1); }
.stat b {
    display: block;
    font-family: var(--font-mono);
    font-size: clamp(2.1rem, 4.4vw, var(--fs-6xl));
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.045em;
    color: var(--plat-000);
    font-variant-numeric: tabular-nums;
    margin-bottom: .7rem;
}
.stat b i { font-style: normal; color: var(--amber-400); font-size: .5em; }
.stat > span {
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--plat-400);
    line-height: 1.6;
}

/* ============================================================ 09. CARDS */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: clamp(1rem, 2vw, 1.6rem);
}
.card-grid-fit { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
.card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(168deg, var(--ink-800), var(--ink-700));
    border: 1px solid var(--line-1);
    border-radius: var(--r-2);
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--t-2), border-color var(--t-2), box-shadow var(--t-2);
}
.card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--t-2);
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(226,46,43,.07), transparent 58%);
}
.card:hover {
    transform: translateY(-8px);
    border-color: var(--line-amber);
    box-shadow: var(--sh-3), var(--glow-amber);
}
.card:hover::after { opacity: 1; }

/* corner brackets — engineering drawing feel */
.card::before,
.bracket::before,
.bracket::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border: 1px solid var(--amber-400);
    opacity: 0;
    transition: opacity var(--t-2);
    pointer-events: none;
    z-index: 5;
}
.card::before { top: 8px; inset-inline-start: 8px; border-inline-end: 0; border-bottom: 0; }
.card:hover::before { opacity: .85; }

.card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-700); }
.card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.95) contrast(1.02);
    transition: transform 1.1s var(--ease-out), filter var(--t-2);
}
.card:hover .card-media img { transform: scale(1.08); filter: saturate(1.06) contrast(1.05); }
.card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16,26,38,.04), rgba(16,26,38,0) 42%, rgba(16,26,38,.14));
}

.card-tag {
    position: absolute;
    top: .85rem;
    inset-inline-start: .85rem;
    z-index: 2;
    padding: .35rem .75rem;
    font-family: var(--font-mono);
    font-size: .58rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--amber-500);
    background: rgba(255,255,255,.86);
    border: 1px solid var(--line-amber);
    border-radius: var(--r-pill);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: .7rem;
    padding: clamp(1.2rem, 2vw, 1.7rem);
    position: relative;
    z-index: 2;
}
.card h3 {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--plat-000);
    transition: color var(--t-1);
}
.card:hover h3 { color: var(--amber-500); }
.card p {
    font-size: var(--fs-sm);
    color: var(--plat-300);
    line-height: var(--lh-snug);
    flex: 1;
}
.card .arrow-link { margin-top: .35rem; align-self: flex-start; }


/* application cards — image-led, 2-up grid */
.app-card { background: linear-gradient(168deg, var(--ink-800), var(--ink-700)); }
.app-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--ink-700);
}
.app-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.95) contrast(1.03) brightness(1);
    transition: transform 1.2s var(--ease-out), filter var(--t-3);
}
.app-card:hover .app-media img { transform: scale(1.06); filter: saturate(1.05) contrast(1.05) brightness(1.01); }
.app-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16,26,38,0) 0%, rgba(16,26,38,.05) 62%, rgba(16,26,38,.16) 100%);
    pointer-events: none;
}
.app-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: clamp(1.3rem, 2.2vw, 1.9rem);
}
.app-index {
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: var(--ls-label);
    color: var(--cyan-400);
}
.app-card h3 {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 600;
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--plat-000);
}
.app-card p {
    font-size: var(--fs-sm);
    line-height: 1.65;
    color: var(--plat-300);
    max-width: 46ch;
}

/* ========================================================= 10. CATALOGUE */
.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
.chip {
    padding: .6rem 1.2rem;
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--plat-300);
    background: var(--surface-1);
    border: 1px solid var(--line-1);
    border-radius: var(--r-pill);
    transition: all var(--t-1);
}
.chip:hover { color: var(--plat-000); border-color: var(--line-3); background: var(--surface-2); }
.chip.on {
    color: var(--on-accent);
    background: var(--amber-grad);
    border-color: transparent;
    box-shadow: 0 10px 26px -12px rgba(226,46,43,.5);
}

/* data table */
.table-scroll { overflow-x: auto; border: 1px solid var(--line-1); border-radius: var(--r-2); background: var(--surface-1); }
table.specs { width: 100%; border-collapse: collapse; min-width: 680px; }
table.specs caption {
    padding: 1.1rem 1.3rem;
    text-align: start;
    font-size: var(--fs-sm);
    color: var(--plat-300);
    border-bottom: 1px solid var(--line-1);
}
table.specs th, table.specs td {
    padding: .95rem 1.3rem;
    font-size: var(--fs-sm);
    text-align: start;
    border-bottom: 1px solid var(--line-1);
}
table.specs thead th {
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--cyan-500);
    background: rgba(31,45,94,.05);
    font-weight: 500;
    white-space: nowrap;
}
table.specs tbody td { color: var(--plat-200); font-family: var(--font-mono); font-size: .82rem; }
table.specs tbody td:first-child { color: var(--plat-000); font-weight: 500; }
table.specs tbody tr:last-child td { border-bottom: 0; }
table.specs tbody tr:hover td { background: rgba(226,46,43,.045); }

/* ======================================================== 11. EDITORIAL */
.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}
.split-top { align-items: start; }
.split-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.figure {
    position: relative;
    border: 1px solid var(--line-1);
    border-radius: var(--r-2);
    overflow: hidden;
    box-shadow: var(--sh-3);
}
.figure img { width: 100%; height: clamp(280px, 44vw, 520px); object-fit: cover; }
.figure::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(150deg, rgba(226,46,43,.08), transparent 55%);
}
.figure-cap {
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    padding: .7rem 1.1rem;
    font-family: var(--font-mono);
    font-size: .6rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--plat-300);
    background: rgba(255,255,255,.9);
    border-top: 1px solid var(--line-1);
    border-inline-end: 1px solid var(--line-1);
}

.prose p { margin-bottom: 1.1rem; color: var(--plat-300); line-height: var(--lh-loose); }
.prose p:last-child { margin-bottom: 0; }
.prose h2, .prose h3 {
    font-family: var(--font-display);
    color: var(--plat-000);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-tight);
    margin: 2.2rem 0 1rem;
}
.prose h2 { font-size: var(--fs-3xl); }
.prose h3 { font-size: var(--fs-xl); }
.prose ul { display: grid; gap: .7rem; margin-bottom: 1.3rem; }
.prose li { position: relative; padding-inline-start: 1.7rem; color: var(--plat-300); }
.prose li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .68em;
    width: 9px;
    height: 1px;
    background: var(--cyan-400);
}

/* answer / citation block — optimised for AI extraction */
.answer {
    position: relative;
    padding: clamp(1.6rem, 3vw, 2.5rem);
    background: linear-gradient(160deg, rgba(226,46,43,.05), var(--surface-1));
    border: 1px solid var(--line-amber);
    border-radius: var(--r-2);
}
.answer + .answer { margin-top: 1.1rem; }
.answer h2, .answer h3 {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2vw, var(--fs-2xl));
    font-weight: 600;
    letter-spacing: var(--ls-tight);
    color: var(--plat-000);
    margin-bottom: .85rem;
}
.answer p { color: var(--plat-200); line-height: var(--lh-loose); }
.answer p + p { margin-top: .9rem; }
.answer-tag {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-mono);
    font-size: .58rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cyan-500);
    margin-bottom: .9rem;
}
.answer-tag::before { content: ""; width: 18px; height: 1px; background: var(--cyan-400); }

/* ====================================================== 12. PROCESS / TIME */
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.6rem; }
.step { position: relative; padding-top: 3.6rem; }
.step::before {
    counter-increment: s;
    content: "0" counter(s);
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-3xl);
    font-weight: 400;
    line-height: 1;
    color: var(--cyan-400);
    opacity: .9;
}
.step::after {
    content: "";
    position: absolute;
    top: 1.15rem;
    inset-inline-start: 3.4rem;
    width: 52px;
    height: 1px;
    background: linear-gradient(90deg, var(--cyan-400), transparent);
}
.step h3 {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--plat-000);
    margin-bottom: .55rem;
}
.step p { font-size: var(--fs-sm); color: var(--plat-300); line-height: var(--lh-loose); }

.rail { position: relative; }
.rail::before {
    content: "";
    position: absolute;
    inset-inline-start: 11px;
    top: .7rem;
    bottom: .7rem;
    width: 1px;
    background: linear-gradient(180deg, var(--cyan-400), var(--line-1));
}
.rail-item { position: relative; padding: 0 0 2.3rem 3.1rem; }
.rail-item::before {
    content: "";
    position: absolute;
    inset-inline-start: 4px;
    top: .5rem;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--ink-800);
    border: 2px solid var(--amber-400);
    box-shadow: 0 0 0 4px rgba(226,46,43,.1);
}
.rail-year {
    font-family: var(--font-mono);
    font-size: var(--fs-xl);
    color: var(--cyan-500);
    margin-bottom: .3rem;
}
.rail-item h3 { font-family: var(--font-display); font-size: var(--fs-base); color: var(--plat-000); margin-bottom: .3rem; }
.rail-item p { font-size: var(--fs-sm); color: var(--plat-300); line-height: var(--lh-loose); }

/* =========================================================== 13. MARQUEE */
.marquee {
    position: relative;
    overflow: hidden;
    padding: 1.35rem 0;
    border-block: 1px solid var(--line-1);
    background: var(--ink-800);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track { display: flex; width: max-content; align-items: center; gap: 0; animation: slide 44s linear infinite; }
/* Spacing lives on each item (not on the flex gap) so every item carries its own
   trailing gap. That makes two identical halves of the track exactly half its width,
   so the -50% slide lands on the seam with no jump or empty stretch. */
.marquee-track > * { margin-inline-end: 2.6rem; }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* The partner strip carries 82 px tiles instead of short text, so its track is
   1687 px per copy against ~1330 px before. Scaling the duration with the
   width keeps the original ~30 px/s pace - at the shared 44 s the tiles would
   drift 27% faster and feel hurried. Scoped via .band-tight because the
   standards marquee (inside the hero) stays on the shared timing. */
.band-tight .marquee-track { animation-duration: 56s; }
.marquee-track span {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    letter-spacing: .14em;
    color: var(--plat-300);
    white-space: nowrap;
}
.marquee-track i { color: var(--amber-400); font-size: .5rem; font-style: normal; }
/* Partner logos inside the brand marquee. The source artwork is white-ground
   with no alpha, so each logo ships as a fixed white tile (220x156, see
   .workbuddy\prep-partner-logos.py) and the CSS only sets the height - the
   tiles keep their own even padding, which is what makes the row look evenly
   weighted. They sit slightly muted and recover full colour on hover, so the
   strip reads as texture rather than ten competing brand palettes. */
.marquee-track .plogo {
    display: block;
    height: 54px;
    width: auto;
    border-radius: 4px;
    /* platinum off-white, not #fff - pure white tiles read as stickers against
       the ink ground; the tint plus a slightly lower resting opacity lets the
       row sit back as texture and step forward on hover. */
    background: #f2f3f5;
    opacity: .93;
    filter: saturate(.85) brightness(.97);
    transition: filter var(--t-2), opacity var(--t-2), transform var(--t-2);
}
.marquee-track .plogo:hover { filter: none; opacity: 1; transform: translateY(-2px); }
/* Brands we have no artwork for yet: same tile, name set in the mono face so
   the row stays uniform until the real logo arrives. */
.marquee-track .plogo.is-text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: .1em;
    color: var(--plat-300);
    opacity: .88;
}
.marquee-track .plogo.is-text:hover { opacity: 1; }
@media (max-width: 640px) {
    .marquee-track .plogo { height: 42px; }
    .marquee-track .plogo.is-text { width: 74px; font-size: .55rem; }
}

/* ============================================================= 14. FAQ */
.faq { display: grid; gap: .7rem; }
.qa {
    background: linear-gradient(160deg, var(--surface-2), var(--surface-1));
    border: 1px solid var(--line-1);
    border-radius: var(--r-2);
    overflow: hidden;
    transition: border-color var(--t-2), box-shadow var(--t-2);
}
.qa:hover { border-color: var(--line-2); }
.qa.on { border-color: var(--line-amber); box-shadow: var(--glow-amber); }
.qa-q {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
    padding: 1.3rem 1.5rem;
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.5vw, var(--fs-lg));
    font-weight: 500;
    letter-spacing: var(--ls-tight);
    color: var(--plat-000);
    text-align: start;
    transition: color var(--t-1);
}
.qa-q:hover { color: var(--amber-500); }
.qa-q::after {
    content: "";
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    margin-top: .35em;
    border-inline-end: 1.6px solid var(--amber-400);
    border-bottom: 1.6px solid var(--amber-400);
    transform: rotate(45deg);
    transition: transform var(--t-2);
}
.qa.on .qa-q::after { transform: rotate(-135deg); }
.qa-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--t-2);
    color: var(--plat-300);
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
}
.qa-a > div { overflow: hidden; }
.qa-a p { padding: 0 1.5rem 1.45rem; }
.qa.on .qa-a { grid-template-rows: 1fr; }

/* ============================================================ 15. FORMS */
.form-panel {
    position: relative;
    padding: clamp(1.6rem, 3vw, 2.7rem);
    background: linear-gradient(165deg, var(--ink-800), var(--ink-700));
    border: 1px solid var(--line-1);
    border-radius: var(--r-3);
    box-shadow: var(--sh-3);
    overflow: hidden;
}
.form-panel::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 2px;
    background: var(--amber-grad);
}
.field { margin-bottom: 1rem; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.field label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--plat-400);
    margin-bottom: .45rem;
}
.field input, .field textarea, .field select {
    width: 100%;
    padding: .95rem 1.05rem;
    font-size: var(--fs-sm);
    color: var(--plat-000);
    background: var(--ink-800);
    border: 1px solid var(--line-2);
    border-radius: var(--r-1);
    transition: border-color var(--t-1), box-shadow var(--t-1), background var(--t-1);
    -webkit-appearance: none;
    appearance: none;
}
.field input::placeholder, .field textarea::placeholder { color: var(--plat-600); }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--plat-500); }
.field input:focus, .field textarea:focus, .field select:focus {
    outline: none;
    background: var(--ink-800);
    border-color: var(--amber-400);
    box-shadow: 0 0 0 3px rgba(226,46,43,.14);
}
.field textarea { min-height: 140px; resize: vertical; }
.field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239aa7b8' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.05rem center;
    padding-inline-end: 2.5rem;
}
.field select option { background: var(--ink-700); color: var(--plat-000); }
.form-note { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--plat-500); margin-top: .9rem; line-height: 1.7; }

/* =========================================================== 16. FOOTER */
.footer {
    position: relative;
    z-index: 2;
    padding: clamp(3.5rem, 7vw, 6rem) 0 2rem;
    background: linear-gradient(180deg, var(--ink-850), var(--ink-900));
    border-top: 1px solid var(--line-1);
}
.footer::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-amber), transparent);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1.15fr;
    gap: clamp(1.8rem, 3.5vw, 3.5rem);
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.footer-brand p { margin-top: 1.2rem; max-width: 38ch; font-size: var(--fs-sm); color: var(--plat-400); line-height: var(--lh-loose); }
.footer-badges { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.4rem; }
.footer-badges span {
    padding: .32rem .72rem;
    font-family: var(--font-mono);
    font-size: .58rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--amber-500);
    background: rgba(226,46,43,.06);
    border: 1px solid var(--line-amber);
    border-radius: var(--r-pill);
}
.footer h2 {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    font-weight: 500;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--plat-000);
    margin-bottom: 1.3rem;
}
.footer-links { display: grid; gap: .68rem; }
.footer-links a {
    font-size: var(--fs-sm);
    color: var(--plat-400);
    display: inline-block;
    transition: color var(--t-1), padding-inline-start var(--t-1);
}
.footer-links a:hover { color: var(--amber-400); padding-inline-start: .45rem; }
.footer-links li { font-size: var(--fs-sm); color: var(--plat-400); }
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.8rem;
    border-top: 1px solid var(--line-1);
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .05em;
    color: var(--plat-500);
}

/* ======================================================= 17. FLOATING UI */
.floats {
    position: fixed;
    inset-inline-end: clamp(1rem, 2.4vw, 2rem);
    bottom: clamp(1rem, 2.4vw, 2rem);
    z-index: 1000;
    display: grid;
    gap: .55rem;
}
.float-btn {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    color: var(--plat-100);
    background: rgba(255,255,255,.92);
    border: 1px solid var(--line-2);
    border-radius: 50%;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--sh-2);
    transition: transform var(--t-1), box-shadow var(--t-2), background var(--t-2), color var(--t-2);
}
.float-btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: var(--glow-amber); }
.float-btn svg { width: 22px; height: 22px; fill: currentColor; }
.float-btn.wa { background: linear-gradient(150deg, #25d366, #128c7e); border-color: transparent; }
.float-btn.mail { background: var(--amber-grad); color: var(--on-accent); border-color: transparent; }
.float-btn.top { opacity: 0; visibility: hidden; }
.float-btn.top.show { opacity: 1; visibility: visible; }
@media (max-width: 1560px) {
    .floats { inset-inline-end: .55rem; bottom: .55rem; gap: .4rem; }
    .float-btn { width: 40px; height: 40px; }
    .float-btn svg { width: 17px; height: 17px; }
}

/* ======================================================= 18. CTA BANNER */
.cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(3.2rem, 6.5vw, 6rem) 0;
    background: linear-gradient(112deg, #1f2d5e 0%, #2f4a86 52%, #22336a 100%);
    border-block: 1px solid var(--line-1);
}
.cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(760px 400px at 86% 50%, rgba(226,46,43,.38), transparent 64%);
}
.cta-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}
.cta h2 {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3.6vw, var(--fs-4xl));
    font-weight: 650;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-display);
    color: #ffffff;
    max-width: 24ch;
}
.cta p { color: rgba(255,255,255,.78); margin-top: .8rem; max-width: 54ch; }
/* secondary buttons sit on the navy band — flip them to light */
.cta .btn-steel { color: #ffffff; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); }
.cta .btn-steel::before { background: rgba(255,255,255,.14); }
.cta .btn-steel:hover { border-color: #ffffff; color: #ffffff; }
.cta .btn-line { color: #f3b8b6; border-color: rgba(226,46,43,.55); }
.cta .btn-line:hover { color: var(--on-accent); }

/* ========================================================= 19. PAGE HEAD */
.page-head {
    position: relative;
    padding: calc(var(--nav-h) + var(--topbar-h) + clamp(4rem, 9vw, 7.5rem)) 0 clamp(3rem, 6.5vw, 5rem);
    overflow: hidden;
    isolation: isolate;
    border-bottom: 1px solid var(--line-1);
    background: linear-gradient(180deg, var(--ink-800), var(--ink-900)),
                radial-gradient(900px 460px at 84% 0%, rgba(226,46,43,.1), transparent 62%);
}
.page-head::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .55;
    background-image:
        linear-gradient(rgba(31,45,94,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31,45,94,.05) 1px, transparent 1px);
    background-size: 68px 68px;
    -webkit-mask-image: radial-gradient(circle at 22% 42%, #000, transparent 74%);
    mask-image: radial-gradient(circle at 22% 42%, #000, transparent 74%);
}
.page-head .shell { position: relative; z-index: 2; }
.page-head h1 {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 6vw, var(--fs-7xl));
    font-weight: 700;
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    color: var(--plat-000);
    margin-bottom: 1.1rem;
    text-wrap: balance;
}
.page-head h1 em {
    font-style: normal;
    background: var(--amber-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.page-head p { font-size: clamp(1rem, 1.5vw, var(--fs-lg)); color: var(--plat-300); max-width: 68ch; line-height: var(--lh-loose); }
.page-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.9rem; }
.page-meta span {
    padding: .4rem .85rem;
    font-family: var(--font-mono);
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--plat-300);
    background: var(--surface-1);
    border: 1px solid var(--line-1);
    border-radius: var(--r-pill);
}

/* breadcrumb */
.crumbs { position: relative; z-index: 3; padding-top: 1.1rem; margin-top: var(--nav-h); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .06em; color: var(--plat-500); }
.crumbs a { color: var(--plat-400); }
.crumbs a:hover { color: var(--amber-400); }
.crumbs li[aria-current] { color: var(--amber-400); }

/* product detail */
.pd { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(2rem, 4.5vw, 4.5rem); align-items: start; }
.pd-gallery { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.pd-main {
    position: relative;
    border: 1px solid var(--line-1);
    border-radius: var(--r-2);
    overflow: hidden;
    background: var(--ink-700);
    box-shadow: var(--sh-3);
}
.pd-main img { width: 100%; height: clamp(280px, 42vw, 520px); object-fit: cover; }
.pd-main::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(150deg, rgba(255,255,255,.06), transparent 44%);
}
.pd-info h1 {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3.4vw, var(--fs-4xl));
    font-weight: 700;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-display);
    color: var(--plat-000);
    margin-bottom: .9rem;
}
.pd-lead { font-size: var(--fs-lg); color: var(--plat-300); line-height: var(--lh-loose); margin-bottom: 1.6rem; }
.pd-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.9rem; }
.pd-chips span {
    padding: .4rem .85rem;
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--amber-500);
    background: rgba(226,46,43,.06);
    border: 1px solid var(--line-amber);
    border-radius: var(--r-pill);
}
.pd-table { margin: 1.9rem 0; border: 1px solid var(--line-1); border-radius: var(--r-2); overflow: hidden; background: var(--surface-1); }
.pd-table table { width: 100%; border-collapse: collapse; }
.pd-table th, .pd-table td { padding: .9rem 1.2rem; font-size: var(--fs-sm); text-align: start; border-bottom: 1px solid var(--line-1); }
.pd-table tr:last-child th, .pd-table tr:last-child td { border-bottom: 0; }
.pd-table th {
    width: 42%;
    font-family: var(--font-mono);
    font-size: .64rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--plat-400);
    background: rgba(31,45,94,.04);
    font-weight: 500;
}
.pd-table td { color: var(--plat-000); font-family: var(--font-mono); }
.pd-table tr:hover td { background: rgba(226,46,43,.045); }
.pd-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* =========================================================== 20. UTILITY */
.center { text-align: center; }
.start { text-align: start; }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.gold { color: var(--amber-300); }
.muted { color: var(--plat-400); }
.mono { font-family: var(--font-mono); }
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ======================================================= 21. SCROLL FX */
[data-fx] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
    transition-delay: var(--fx-delay, 0ms);
    will-change: opacity, transform;
}
[data-fx].in { opacity: 1; transform: none; }
[data-fx="left"] { transform: translateX(-38px); }
[data-fx="right"] { transform: translateX(38px); }
[data-fx="zoom"] { transform: scale(.94); }
[data-fx="clip"] { opacity: 1; clip-path: inset(0 0 100% 0); transform: none; }
[data-fx="clip"].in { clip-path: inset(0 0 0 0); }

[data-words] .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
[data-words] .w > i {
    display: inline-block;
    font-style: normal;
    transform: translateY(108%);
    opacity: 0;
    transition: transform 1000ms var(--ease-out), opacity 700ms var(--ease-out);
    transition-delay: var(--wd, 0ms);
}
[data-words].in .w > i { transform: none; opacity: 1; }

/* ========================================================= 22. KEYFRAMES */
@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(226,46,43,.55); }
    70% { box-shadow: 0 0 0 12px rgba(226,46,43,0); }
    100% { box-shadow: 0 0 0 0 rgba(226,46,43,0); }
}
@keyframes lm-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes lm-fill { from { fill-opacity: 0; } to { fill-opacity: 1; } }
@keyframes lm-ring { to { opacity: 1; } }
@keyframes slide { to { transform: translateX(-50%); } }
@keyframes cue {
    0% { transform: scaleY(.15); opacity: 0; }
    45% { opacity: 1; }
    100% { transform: scaleY(1); opacity: 0; }
}
@keyframes float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes breathe { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ======================================================= 23. RESPONSIVE */
@media (max-width: 1180px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .pd { grid-template-columns: 1fr; }
    .pd-gallery { position: static; }
}

@media (max-width: 1240px) {
    :root { --nav-h: 66px; }
    .topbar { display: none; }
    .burger { display: block; }

    .menu {
        position: fixed;
        inset: var(--nav-h) 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 1.2rem var(--gutter) 2.2rem;
        background: rgba(255,255,255,.97);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        border-bottom: 1px solid var(--line-2);
        max-height: calc(100dvh - var(--nav-h));
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-12px);
        transition: opacity var(--t-2), transform var(--t-2), visibility var(--t-2);
    }
    .menu-open .menu { opacity: 1; visibility: visible; transform: translateY(0); }
    .menu a { padding: 1rem .5rem; font-size: var(--fs-base); border-bottom: 1px solid var(--line-1); width: 100%; }
    .menu a::after { display: none; }
    .sub {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        margin: .3rem 0 .6rem;
        background: var(--surface-1);
        box-shadow: none;
    }
    .nav-tail { gap: .5rem; }
}

@media (max-width: 1000px) {
    .hero { min-height: auto; padding: calc(var(--nav-h) + 3rem) 0 4rem; }
    .hero-scroll { display: none; }
    .hero-strip { grid-template-columns: repeat(2, 1fr); }
    .hero { flex-direction: column; align-items: stretch; }
    .hero-canvas, .hero-strand-poster {
        position: relative;
        inset: auto;
        flex: 0 0 auto;
        width: 100%;
        height: clamp(150px, 42vw, 300px);
        margin-bottom: 1rem;
    }
    .hero-strand-poster img { object-fit: cover; object-position: 38% 40%; }
}

@media (max-width: 640px) {
    .stat-grid { grid-template-columns: 1fr 1fr; }
    .card-grid, .steps, .split, .split-2, .card-grid-2 { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .hero-cta { flex-direction: column; align-items: stretch; }
    .hero-cta .btn { width: 100%; }
    .pd-actions { flex-direction: column; }
    .pd-actions .btn { width: 100%; }
    .cta-inner { flex-direction: column; align-items: flex-start; }
    .cta-inner .btn { width: 100%; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    .qa-q { padding: 1.1rem 1.2rem; }
    .qa-a p { padding: 0 1.2rem 1.2rem; }
    .floats { inset-inline-end: .85rem; bottom: .85rem; }
    .float-btn { width: 46px; height: 46px; }
    .figure-cap { position: static; border-inline-end: 0; }
}

/* ============================================ 23c. PHONE AND TABLET HEADER (2026-10)
   The full desktop menu needs about 1,215px once the Spanish labels are in, and
   between 1001px and 1240px it ran past the screen edge and took the language
   switch with it. From 1240px down the header uses the menu button instead.
   Under 640px the header's "Get a Quote" button goes (Contact stays in the
   menu) and long button labels wrap rather than pushing past the screen
   edge. The logo steps down below 380px and again below 340px so the header
   still fits a 320px phone. */
@media (max-width: 640px) {
    .nav-tail > .btn { display: none; }
    .btn { white-space: normal; max-width: 100%; text-align: center; }
}
@media (max-width: 380px) {
    .brand-img { height: 34px; }
}
@media (max-width: 340px) {
    .brand-img { height: 30px; }
}

/* ============================================ 23b. IMAGERY PASS (2026-09) */
/* The application-card images are duotone illustrations, not photographs of
   projects we are claiming to have built. Say so, quietly. */
.app-note {
    margin-top: var(--sp-5);
    font-size: var(--fs-xs);
    color: var(--plat-400);
    letter-spacing: .02em;
}

/* Abstract light texture over the closing CTA band. Purely decorative: it is a
   CSS background with no alt text, and it blends as light rather than as a
   picture of anything. Replaces the AI "photographs" the site used to place in
   evidence-bearing slots. */
.cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("/assets/img/tex/ambient.jpg") center / cover no-repeat;
    opacity: .28;
    mix-blend-mode: screen;
    pointer-events: none;
}

/* ================================================== 24. MOTION / PRINT */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    [data-fx], [data-words] .w > i { opacity: 1 !important; transform: none !important; clip-path: none !important; }
    .loader { display: none !important; }
    .marquee-track { animation: none; }
}

@media print {
    body { background: #fff; color: #000; }
    body::before, body::after, .nav, .floats, .progress-bar, .hero-canvas, .hero-scroll, .loader, .marquee, .cta::after { display: none !important; }
    .band, .page-head { padding: 1rem 0; }
    .display, .hero-title, .page-head h1, .card h3, .stat b, .cta h2 {
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;
    }
}

/* ============================================================ 19. SELF-HOSTED FONTS
   Replaces the Google Fonts link chain (css request -> font request = two extra
   cross-origin round trips before any glyph renders). Self-hosted + preloaded in
   the page head, the hero fonts arrive while the HTML is still parsing, which
   removes the late font-swap reflow that measured CLS 0.21 on the Spanish home
   under Slow 4G. Variable fonts: one file per family covers every weight in use,
   including the 380/640/650 axes the old static instances had to approximate. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/inter-var.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("/assets/fonts/inter-tight-var.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: italic; font-weight: 600 700; font-display: swap; src: url("/assets/fonts/inter-tight-italic-var.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/assets/fonts/jetbrains-mono-var.woff2") format("woff2"); }
/* ==================================================== 25. LEAD-CAPTURE CHAT
   Right-bottom chat panel injected by /assets/js/chat-widget.js. It reuses the
   token set above — same radii, same red accent, same three typefaces — so it
   reads as part of the interface rather than a third-party widget bolted on.
   Authored entirely with logical properties: /ar/ mirrors without extra rules.
   ------------------------------------------------------------------------ */

/* --- viewport budget -------------------------------------------------------
   A `position: fixed` box is laid out against the LAYOUT viewport. On phones,
   and in a zoomed desktop window, that is taller than the area the visitor can
   actually see (measured: a 390x844 phone reports innerHeight 888; a 462x816
   desktop window reports 850), so anything pinned to the bottom edge ends up
   under the browser toolbar.

     --gcw-vh      the honest visible height, measured by chat-widget.js from
                   visualViewport.height. It already excludes the mobile toolbar
                   AND the on-screen keyboard, and it follows browser zoom too:
                   at 200% the CSS viewport really is half as tall. So this —
                   not 100vh — is the height budget.
     --gcw-kb      on-screen keyboard inset. Used only to lift the panel's
                   bottom edge; the height budget above already excludes it, so
                   it must NOT be subtracted twice.
     --gcw-chrome  toolbar clearance. Zero once the script has measured the
                   honest height; the 3.25rem fallback only applies on browsers
                   without visualViewport, where 100dvh may still include it.
     --gcw-float-h measured height of the .floats button column, so the panel
                   always sits just above the buttons instead of relying on a
                   guessed button height that differs per breakpoint.

   Every one has a plain-CSS fallback, so the panel is already correct before
   the script has run. */
:root {
    --gcw-vh: 100vh;
    --gcw-kb: 0px;
    --gcw-chrome: 3.25rem;
    --gcw-float-h: 210px;
}
@supports (height: 100dvh) {
    /* dvh already excludes the mobile toolbar; the JS measurement only has to
       refine it for zoom and the on-screen keyboard. */
    :root { --gcw-vh: 100dvh; }
}

/* The launcher normally lives inside the page's .floats column, so it inherits
   that column's placement. .gcw-independent is the fallback for pages that have
   no such column: then it pins itself to the same corner and clears the three
   buttons (WhatsApp + enquiry + back-to-top) above it.

   On the Arabic pages the fixed column must be laid out LTR: an RTL root with
   horizontal overflow (the partner marquee is deliberately ~3x viewport wide)
   resolves fixed inset-inline-end against a wider scroll area, which pushes the
   whole column off the left edge of a 390px screen. Pinning the column's own
   direction puts it back on the visual right, where the Arabic design expects
   it. The Arabic label inside keeps its own correct bidi rendering. */
.floats { direction: ltr; }
.gcw-launch {
    cursor: pointer;
    overflow: visible;
    padding: 0;
    transition: transform var(--t-1), box-shadow var(--t-2), background var(--t-2),
                color var(--t-2), opacity var(--t-2), visibility var(--t-2);
}
.gcw-launch.gcw-independent {
    position: fixed;
    inset-inline-end: clamp(1rem, 2.4vw, 2rem);
    bottom: calc(clamp(1rem, 2.4vw, 2rem) + 3 * 52px + 2 * .55rem + .6rem);
    z-index: 1001;
}
.gcw-launch svg path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gcw-launch:hover { transform: translateY(-3px) scale(1.05); }
.gcw-launch.is-hidden { opacity: 0; visibility: hidden; transform: scale(.82); pointer-events: none; }
.gcw-launch.is-done { background: var(--amber-grad); color: var(--on-accent); border-color: transparent; }

/* attention ping — one soft ring, not a bounce loop */
.gcw-ping {
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(226, 46, 43, .5);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}
.gcw-launch.is-ping .gcw-ping { animation: gcw-ping 2.4s var(--ease-out) 2; }
@keyframes gcw-ping {
    0%   { opacity: .9; transform: scale(.9); }
    70%  { opacity: 0;  transform: scale(1.35); }
    100% { opacity: 0;  transform: scale(1.35); }
}

/* teaser bubble above the launcher */
.gcw-teaser {
    position: fixed;
    inset-inline-end: clamp(1rem, 2.4vw, 2rem);
    /* Same measured column as the panel, plus the teaser's own clearance. */
    bottom: calc(clamp(1rem, 2.4vw, 2rem) + var(--gcw-float-h) + 1.2rem);
    z-index: 1002;
    width: min(280px, calc(100vw - 2rem));
    padding: 1rem 1.1rem 1.1rem;
    background: linear-gradient(165deg, var(--ink-800), var(--ink-700));
    border: 1px solid var(--line-1);
    border-radius: var(--r-3);
    box-shadow: var(--sh-3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(.96);
    transform-origin: bottom right;
    transition: opacity var(--t-2), transform var(--t-2), visibility var(--t-2);
}
[dir="rtl"] .gcw-teaser { transform-origin: bottom left; }
.gcw-teaser.on { opacity: 1; visibility: visible; transform: none; }
.gcw-teaser::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 2px;
    background: var(--amber-grad);
}
.gcw-teaser b {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 640;
    letter-spacing: var(--ls-tight);
    color: var(--plat-000);
    margin-bottom: .3rem;
}
.gcw-teaser p {
    font-size: var(--fs-sm);
    line-height: 1.65;
    color: var(--plat-300);
}
.gcw-teaser-cta {
    margin-top: .85rem;
    padding: .6rem 1.3rem;
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--on-accent);
    background: var(--amber-grad);
    border: 0;
    border-radius: var(--r-1);
    cursor: pointer;
    transition: transform var(--t-1), box-shadow var(--t-2);
}
.gcw-teaser-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -18px rgba(226, 46, 43, .55); }
.gcw-teaser-close {
    position: absolute;
    top: .5rem;
    inset-inline-end: .5rem;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: var(--plat-400);
    background: transparent;
    border: 0;
    border-radius: var(--r-1);
    cursor: pointer;
    transition: color var(--t-1), background var(--t-1);
}
.gcw-teaser-close:hover { color: var(--plat-000); background: var(--surface-3); }
.gcw-teaser-close svg { width: 13px; height: 13px; }
.gcw-teaser-close svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* panel */
/* panel: header / progress / transcript / composer / footer.
   The composer is a fixed row rather than part of the transcript, so the
   question being asked is always visible no matter how long the history gets. */
.gcw-panel {
    position: fixed;
    inset-inline-end: clamp(1rem, 2.4vw, 2rem);
    /* Clear the whole .floats column (launcher + WhatsApp + enquiry + to-top)
       using its measured height rather than 4x a guessed button size — the
       column is 40px per button at one breakpoint and 46px at another. */
    bottom: calc(clamp(1rem, 2.4vw, 2rem) + var(--gcw-float-h) + .9rem);
    z-index: 1002;
    display: none;
    /* header / progress / transcript / "earlier" / composer / footer.
       Only the transcript flexes; the composer caps itself against
       --gcw-panel-max below, so the rows can never add up to more than the
       panel — which is what used to push the footer outside the box. */
    grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
    /* The height budget the composer also caps itself against. */
    --gcw-panel-max: min(680px, calc(var(--gcw-vh) - var(--gcw-float-h) - 5rem));
    width: min(392px, calc(100vw - 2rem));
    max-height: var(--gcw-panel-max);
    /* Nothing may spill outside the panel. Overflowing content used to slide
       under the page instead of becoming scrollable, which is exactly what
       reads as "the message is cut off / covered". */
    overflow: hidden;
    background: linear-gradient(165deg, var(--ink-800), var(--ink-700));
    border: 1px solid var(--line-2);
    border-radius: var(--r-3);
    box-shadow: var(--sh-3), 0 0 0 1px rgba(255, 255, 255, .6) inset;
    opacity: 0;
    transform: translateY(14px) scale(.985);
    transform-origin: bottom right;
    transition: opacity var(--t-2), transform var(--t-2);
}
[dir="rtl"] .gcw-panel { transform-origin: bottom left; }
.gcw-panel.on { display: grid; opacity: 1; transform: none; }

/* header */
.gcw-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: .95rem 1rem .9rem;
    background: linear-gradient(112deg, var(--cyan-500) 0%, var(--cyan-400) 100%);
    border-radius: var(--r-3) var(--r-3) 0 0;
}
.gcw-id { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.gcw-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    color: var(--on-accent);
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--r-2);
}
.gcw-avatar svg { width: 19px; height: 19px; }
.gcw-avatar svg path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.gcw-idtext { display: flex; flex-direction: column; min-width: 0; }
.gcw-idtext b {
    font-family: var(--font-display);
    font-size: var(--fs-base);
    font-weight: 640;
    letter-spacing: var(--ls-tight);
    color: #fff;
    line-height: 1.25;
}
.gcw-idtext i {
    font-family: var(--font-mono);
    font-style: normal;
    font-size: var(--fs-2xs);
    color: rgba(255, 255, 255, .72);
    line-height: 1.5;
}
.gcw-online {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex: 0 0 auto;
    margin-top: .2rem;
    padding: .28rem .55rem;
    font-family: var(--font-mono);
    font-size: .625rem;
    letter-spacing: .06em;
    color: #fff;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--r-pill);
    white-space: nowrap;
}
.gcw-online s {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6ee7a8;
    box-shadow: 0 0 0 0 rgba(110, 231, 168, .7);
    animation: gcw-live 2.2s ease-out infinite;
}
@keyframes gcw-live {
    0%   { box-shadow: 0 0 0 0 rgba(110, 231, 168, .65); }
    70%  { box-shadow: 0 0 0 6px rgba(110, 231, 168, 0); }
    100% { box-shadow: 0 0 0 0 rgba(110, 231, 168, 0); }
}
.gcw-head-tools { display: flex; gap: .3rem; flex: 0 0 auto; }
.gcw-iconbtn {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: rgba(255, 255, 255, .8);
    background: transparent;
    border: 0;
    border-radius: var(--r-1);
    cursor: pointer;
    transition: color var(--t-1), background var(--t-1);
}
.gcw-iconbtn:hover { color: #fff; background: rgba(255, 255, 255, .18); }
.gcw-iconbtn svg { width: 15px; height: 15px; }
.gcw-iconbtn svg path { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* progress */
.gcw-bar { height: 2px; background: var(--line-1); }
.gcw-bar i { display: block; height: 100%; width: 0; background: var(--amber-grad); transition: width var(--t-2); }

/* transcript — finished exchanges only */
.gcw-log {
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Must be able to shrink to nothing. This sits in the minmax(0,1fr) row and
       is the element that yields when the composer needs the space; a
       min-height here would push the footer outside the panel on a short
       viewport (e.g. 200% browser zoom). */
    min-height: 0;
    padding: 1rem 1rem .9rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    background: var(--ink-850);
    /* The topmost line is usually clipped mid-scroll: fade it so that reads as
       "there is more above" instead of as broken/truncated text. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
}

/* Retired exchanges collapse to a one-line summary so a long session stays
   readable instead of filling the panel with scrollback. */
.gcw-ask.gcw-collapsed > .gcw-msg-bot,
.gcw-ask.gcw-collapsed > .gcw-actions {
    display: none;
}
.gcw-mini {
    display: none;
    align-items: baseline;
    gap: .5rem;
    padding: .4rem .75rem;
    background: var(--ink-800);
    border: 1px solid var(--line-1);
    border-radius: var(--r-2);
}
.gcw-ask.gcw-collapsed .gcw-mini { display: flex; }
.gcw-mini i {
    flex: 0 1 auto;
    font-family: var(--font-mono);
    font-style: normal;
    font-size: var(--fs-2xs);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--plat-500);
    white-space: nowrap;
}
.gcw-mini b {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--plat-200);
    text-align: end;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* A completed text step keeps its answer readable under the summary row. */
.gcw-ask.gcw-collapsed > .gcw-msg-me { margin-top: .2rem; }

/* "earlier answers" affordance: appears only when the transcript is scrolled,
   so a half-visible top line reads as history rather than as clipped text */
.gcw-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    width: 100%;
    padding: .35rem 1rem;
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cyan-400);
    background: var(--ink-700);
    border: 0;
    border-bottom: 1px solid var(--line-1);
    cursor: pointer;
    transition: color var(--t-1), background var(--t-1);
}
.gcw-more[hidden] { display: none; }
.gcw-more:hover { color: var(--amber-400); background: var(--surface-2); }
.gcw-more svg { width: 12px; height: 12px; }
.gcw-more svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* composer — the question being asked right now */
.gcw-composer {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .85rem 1rem 1rem;
    background: var(--ink-850);
    border-top: 1px solid var(--line-1);
    /* The question + hint + a nine-option chip list + input + button is easily
       the tallest row in the grid. Cap it against the panel height and let it
       scroll internally, so a long question can never squeeze the transcript to
       nothing and push the footer off the bottom of the box. */
    max-height: min(21rem, calc(var(--gcw-panel-max) * .46));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
.gcw-composer[hidden] { display: none; }
.gcw-q .gcw-msg-bot { max-width: 100%; }
.gcw-composer .gcw-actions { margin-top: .1rem; }
.gcw-composer .gcw-btn-go { width: 100%; }
.gcw-msg { display: flex; flex-direction: column; max-width: 100%; animation: gcw-in var(--t-2) both; }
@keyframes gcw-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.gcw-msg p {
    font-size: var(--fs-sm);
    line-height: 1.65;
    color: var(--plat-100);
}
.gcw-msg small {
    display: block;
    margin-top: .3rem;
    font-size: var(--fs-xs);
    line-height: 1.6;
    color: var(--plat-400);
}
.gcw-msg-bot {
    position: relative;
    overflow: hidden;
    align-self: flex-start;
    max-width: 92%;
    padding: .62rem .8rem;
    background: var(--ink-800);
    border: 1px solid var(--line-1);
    border-radius: 2px var(--r-3) var(--r-3) var(--r-3);
    box-shadow: var(--sh-1);
}
[dir="rtl"] .gcw-msg-bot { border-radius: var(--r-3) 2px var(--r-3) var(--r-3); }
.gcw-msg-bot::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: 2px;
    height: 100%;
    background: var(--amber-grad);
    border-radius: 2px 0 0 2px;
}
.gcw-msg-bot.gcw-past { opacity: .55; }
.gcw-msg-bot.gcw-past small { display: none; }
.gcw-msg-me {
    align-self: flex-end;
    max-width: 86%;
    padding: .62rem .85rem;
    color: var(--on-accent);
    background: var(--cyan-500);
    border-radius: var(--r-3) 2px var(--r-3) var(--r-3);
}
[dir="rtl"] .gcw-msg-me { border-radius: 2px var(--r-3) var(--r-3) var(--r-3); }
.gcw-msg-me p { color: inherit; word-break: break-word; }
.gcw-done b {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 640;
    letter-spacing: var(--ls-tight);
    color: var(--plat-000);
}
.gcw-done p { margin-top: .25rem; }

/* ask block: the question plus its control */
.gcw-ask { display: flex; flex-direction: column; gap: .65rem; }
.gcw-ask.gcw-past { opacity: .55; }
.gcw-ask.gcw-past small { display: none; }
.gcw-field { display: flex; flex-direction: column; gap: .35rem; }
.gcw-input {
    width: 100%;
    padding: .85rem .95rem;
    font-family: inherit;
    font-size: var(--fs-sm);
    color: var(--plat-000);
    background: var(--ink-800);
    border: 1px solid var(--line-2);
    border-radius: var(--r-1);
    transition: border-color var(--t-1), box-shadow var(--t-1);
}
textarea.gcw-input { min-height: 84px; resize: vertical; line-height: 1.6; }
.gcw-input::placeholder { color: var(--plat-500); }
.gcw-input:hover { border-color: var(--plat-500); }
.gcw-input:focus {
    outline: none;
    border-color: var(--amber-400);
    box-shadow: 0 0 0 3px rgba(226, 46, 43, .14);
}
.gcw-field.is-bad .gcw-input { border-color: var(--amber-400); box-shadow: 0 0 0 3px rgba(226, 46, 43, .12); }
.gcw-err {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: .04em;
    color: var(--amber-500);
}
.gcw-err[hidden] { display: none; }

/* quick-reply chips */
.gcw-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.gcw-chip {
    padding: .5rem .85rem;
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--plat-200);
    background: var(--ink-800);
    border: 1px solid var(--line-2);
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: all var(--t-1);
}
.gcw-chip:hover { color: var(--plat-000); border-color: var(--amber-400); transform: translateY(-1px); }
.gcw-chip.on { color: var(--on-accent); background: var(--amber-grad); border-color: transparent; }
.gcw-other { margin-top: .1rem; }
.gcw-other[hidden] { display: none; }
.gcw-other input {
    width: 100%;
    padding: .8rem .9rem;
    font-family: inherit;
    font-size: var(--fs-sm);
    color: var(--plat-000);
    background: var(--ink-800);
    border: 1px solid var(--line-2);
    border-radius: var(--r-1);
}
.gcw-other input:focus { outline: none; border-color: var(--amber-400); box-shadow: 0 0 0 3px rgba(226, 46, 43, .14); }

/* buttons */
.gcw-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.gcw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8rem 1.4rem;
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: var(--r-1);
    cursor: pointer;
    white-space: nowrap;
    transition: transform var(--t-1), box-shadow var(--t-2), border-color var(--t-2), color var(--t-2), background var(--t-2);
}
.gcw-btn-go { color: var(--on-accent); background: var(--amber-grad); box-shadow: 0 14px 34px -18px rgba(226, 46, 43, .55); }
.gcw-btn-go:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -18px rgba(226, 46, 43, .6); }
.gcw-btn-go[disabled] { opacity: .6; cursor: default; transform: none; box-shadow: none; }
.gcw-btn-ghost { color: var(--plat-100); background: var(--surface-1); border-color: var(--line-3); }
.gcw-btn-ghost:hover { border-color: var(--plat-500); transform: translateY(-2px); }
.gcw-btn-send { width: 100%; }
.gcw-note p { color: var(--plat-400); }
.gcw-err-box { max-width: 100%; }
.gcw-err-box b { color: var(--amber-500); }

/* review summary */
.gcw-summary {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 0;
    padding: .3rem 0;
    background: var(--ink-800);
    border: 1px solid var(--line-1);
    border-radius: var(--r-3);
    overflow: hidden;
}
.gcw-srow {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: baseline;
    gap: .55rem;
    padding: .6rem .85rem;
    border-top: 1px solid var(--line-1);
}
.gcw-srow:first-child { border-top: 0; }
.gcw-skey {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--plat-400);
    line-height: 1.5;
}
.gcw-sval {
    font-size: var(--fs-sm);
    color: var(--plat-000);
    text-align: end;
    word-break: break-word;
}
.gcw-sedit {
    font-family: var(--font-mono);
    font-size: .625rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cyan-400);
    background: transparent;
    border: 0;
    border-bottom: 1px solid currentColor;
    padding: 0 0 1px;
    cursor: pointer;
    transition: color var(--t-1);
}
.gcw-sedit:hover { color: var(--amber-400); }

/* footer */
.gcw-foot {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem 1rem .85rem;
    border-top: 1px solid var(--line-1);
    background: var(--ink-700);
    border-radius: 0 0 var(--r-3) var(--r-3);
}
.gcw-back {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--plat-300);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color var(--t-1);
}
.gcw-back[hidden] { display: none; }
.gcw-back:hover { color: var(--amber-400); }
.gcw-back svg { width: 13px; height: 13px; }
.gcw-back svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .gcw-back svg { transform: scaleX(-1); }
.gcw-privacy {
    flex: 1 1 auto;
    font-size: var(--fs-2xs);
    font-style: italic;
    line-height: 1.7;
    color: var(--plat-400);
}

/* --- narrow viewports: bottom sheet, full width ------------------------- */
@media (max-width: 640px) {
    /* Deliberately NOT using --gcw-float-h here. That variable measures OUR
       .floats column; on an independent launcher there is no such column, just
       the three standalone buttons underneath, so the clearance stays explicit. */
    .gcw-launch.gcw-independent {
        inset-inline-end: .85rem;
        bottom: calc(.85rem + 3 * 46px + 2 * .4rem + .5rem);
    }
    .gcw-teaser {
        inset-inline-end: .85rem;
        /* --gcw-float-h is the whole measured column (buttons AND their gaps),
           so only the clearance on top of it is added here. */
        bottom: calc(.85rem + var(--gcw-float-h) + 1rem);
        width: min(270px, calc(100vw - 1.7rem));
    }
    /* Bottom sheet. --gcw-vh is the honest visible height (visualViewport.height,
       maintained by chat-widget.js) and --gcw-kb is the on-screen keyboard
       inset, so the sheet never hides its footer under the toolbar or the
       keyboard. Both fall back to 100vh / 0px before the script runs. */
    .gcw-panel {
        inset-inline: 0;
        bottom: calc(var(--gcw-chrome) + var(--gcw-kb) + env(safe-area-inset-bottom, 0px));
        width: 100vw;
        /* Reserve a hair of top clearance so the header is never clipped by the
           status bar / notch. --gcw-vh already excludes the keyboard, so it is
           NOT subtracted again here. The rows inside are capped so the footer
           stays visible. */
        max-height: calc(
            var(--gcw-vh)
            - var(--gcw-chrome)
            - env(safe-area-inset-bottom, 0px)
            - .75rem
        );
        border-radius: var(--r-3) var(--r-3) 0 0;
        border-bottom: 0;
        transform-origin: bottom center;
    }
    .gcw-panel.on { transform: none; }
    .gcw-head { border-radius: var(--r-3) var(--r-3) 0 0; }
    .gcw-log { padding-bottom: 1rem; }
    .gcw-foot {
        padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
        /* The footer is the last row and must never be shoved out of the panel
           by long content above it. */
        position: sticky;
        bottom: 0;
        z-index: 2;
    }
}

/* Very narrow phones (<=340px: 320px-class devices, or a 360px phone in a
   zoomed/split view). The header's min-content width — avatar + title + the
   decorative "online" pill — is about 324px, which would be clipped by the
   panel's overflow:hidden. The pill steps aside and long words may break. */
@media (max-width: 340px) {
    .gcw-head { gap: .5rem; padding: .8rem .75rem; }
    .gcw-online { display: none; }
    .gcw-id { gap: .5rem; }
    .gcw-idtext b,
    .gcw-idtext i { overflow-wrap: anywhere; }
    .gcw-chip { overflow-wrap: anywhere; }
    .gcw-foot { gap: .4rem; padding-inline: .75rem; }
}

/* Between the two float-button breakpoints the column shrinks to 40px. Same
   browser-chrome clearance as the phone breakpoint, for the shorter column;
   --gcw-float-h carries the measured height here too. */
@media (max-width: 1560px) and (min-width: 641px) {
    .gcw-launch.gcw-independent { inset-inline-end: .55rem; bottom: calc(.55rem + 3 * 40px + 2 * .4rem + .5rem); }
    .gcw-teaser { inset-inline-end: .55rem; bottom: calc(.55rem + var(--gcw-float-h) + 1rem); }
    .gcw-panel {
        inset-inline-end: .55rem;
        bottom: calc(var(--gcw-kb) + 2.5rem + env(safe-area-inset-bottom, 0px));
        max-height: min(680px, calc(var(--gcw-vh) - 4rem));
    }
}

/* Test-mode marker. Only rendered while CONFIG.testMode is true in
   chat-widget.js; it lets whoever is testing see at a glance that submissions
   are going to the local sink rather than the public Formspree endpoint. */
.gcw-testbar {
    position: fixed;
    inset-inline-start: .75rem;
    bottom: .75rem;
    z-index: 1003;
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    max-width: calc(100vw - 1.5rem);
    padding: .3rem .55rem;
    border-radius: 4px;
    background: #f59e0b;
    color: #1c1206;
    font-family: var(--font-mono);
    font-size: .5625rem;
    letter-spacing: .07em;
    line-height: 1.3;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
    pointer-events: none;
}
.gcw-testbar b { font-weight: 700; }
.gcw-testbar span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: .78;
}

@media print {
    .gcw-panel, .gcw-teaser, .gcw-launch, .gcw-testbar { display: none !important; }
}