/* plattar.com - 2026 redesign. Premium, technical, quietly confident.
   Warm-neutral light base; deep charcoal "show" panels for the configurator,
   analytics and closing bands. One product, one CTA. */
:root {
  /* ================= Plattar brand ramps =================
     Figma: Design System 2.0 -> Blippar, color/primary + color/secondary (plattar column).
     These eleven-step ramps are the source of truth. Everything below is mapped from them,
     so a brand change is a change to these values only. */
  --teal-50:#E6FBF6;  --teal-100:#C3F6EA; --teal-200:#8FEDD6; --teal-300:#4EE0BE;
  --teal-400:#1DD4B0; --teal-500:#00C9A7; --teal-600:#00A88C; --teal-700:#008A74;
  --teal-800:#046B5B; --teal-900:#075747; --teal-950:#04332B;
  --coral-50:#FFF1EF;  --coral-100:#FFDDD8; --coral-200:#FFBFB6; --coral-300:#FF9A8C;
  --coral-400:#FF8272; --coral-500:#FF6B5B; --coral-600:#E04E3E; --coral-700:#BC3A2C;
  --coral-800:#942E23; --coral-900:#76281F; --coral-950:#411310;

  /* ================= Semantic roles - light (the site base) =================
     Neutrals are NOT from the supplied guide (only the two colour ramps were shared),
     so they remain the warm-neutral set and are flagged for replacement. */
  --lt-bg: #faf9f7; --lt-surface: #ffffff; --lt-surface-alt: #f2f0ec; --lt-surface-hover: #f7f5f1;
  --app-dark-bg: #1c1c1a; --app-dark-surface: #242424; --app-dark-edge: #333331; /* the software's dark mode, sampled */
  --lt-border: #e6e2db; --lt-border-hover: #cfc9be; --lt-text-secondary: #4a5a56; --lt-text-tertiary: #63726F;
  --bg: var(--lt-bg);          --bg-rgb: 250,249,247;
  --surface: var(--lt-surface); --surface-alt: var(--lt-surface-alt); --surface-hover: var(--lt-surface-hover);
  --border: var(--lt-border);  --border-hover: var(--lt-border-hover);
  --text: var(--teal-950);                                  /* 14.9:1 on bg */
  --text-secondary: var(--lt-text-secondary);               /* 6.91:1 */
  --text-tertiary: var(--lt-text-tertiary);                 /* 4.79:1 - AA for small labels */

  /* Accent is split by job: a text-safe step for type and a vivid step for fills.
     teal-500 is the brand signature but only 2.0:1 on white, so it never carries text. */
  --accent: var(--teal-800);        --accent-rgb: 4,107,91;        /* 6.12:1 - links, eyebrows, icons */
  --accent-hover: var(--teal-900);
  --accent-vivid: var(--teal-500);  --accent-vivid-rgb: 0,201,167; /* fills, rings, glows only */
  --accent-2: var(--coral-700);     --accent-2-rgb: 188,58,44;     /* 5.28:1 */
  --accent-2-vivid: var(--coral-500);

  /* Primary button: vivid teal fill with the darkest teal as the label = 6.55:1,
     which keeps the signature colour without failing contrast the way white-on-teal does. */
  --btn-bg: var(--teal-500); --btn-bg-hover: var(--teal-400); --btn-fg: var(--teal-950);

  --ink: var(--teal-950);      --ink-rgb: 4,51,43;        --on-ink: var(--teal-50);
  --success: var(--teal-700);  --error: #B3261E;  --warning: #b45309;
  /* Type system (Plattar typography sheet, 25 Sep): Hanken Grotesk for display and headings,
     Source Sans 3 for everything else. Only these two families - labels that used a mono face
     now use Source Sans 3 too (--font-mono is kept as an alias so no rule breaks). */
  --font-display: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: var(--font-body);
  --shadow-soft: 0 2px 12px -4px rgba(4,51,43,.10);
  --shadow-lift: 0 18px 44px -16px rgba(4,51,43,.20);
  /* Two gradients: vivid for fills, deeper for anything sitting on text (>=3:1 at display sizes) */
  --grad: linear-gradient(120deg, var(--teal-400), var(--teal-600));
  --grad-text: linear-gradient(120deg, var(--teal-700), var(--coral-700));
  --code-bg: var(--teal-950); --code-border: #0A4B3F;
  /* Chart series - validated on the dark panel surface for lightness band, chroma,
     colour-blind separation (worst adjacent 12.5) and contrast. Do not substitute. */
  --series-1: var(--teal-600); --series-2: var(--coral-600); --series-3: #8b5cf6;
  /* Material swatches: these are PRODUCT colours for the configurator demo, not brand. */
  --sw-natural: #c9bda9; --sw-sage: #5c6f66; --sw-charcoal: #3d4852; --sw-tan: #7a5c43;
  /* Ten-fact donut. Metals are a cool steel neutral with a hint of the brand hue - inferred,
     not from the supplied guide. The neon is the brand teal; swap --neon/--neon-rgb here for a
     truer green if wanted. */
  --metal-50: #f6f9f8;  --metal-100: #e4ebe9; --metal-200: #cbd5d2; --metal-300: #aab7b3; --metal-400: #869490;
  --metal-500: #65736f; --metal-600: #4a5653; --metal-700: #323c39; --metal-800: #1f2826;
  --neon: var(--teal-400);  --neon-rgb: 29,212,176;
  --neon-hot: var(--teal-100); --neon-hot-rgb: 195,246,234;
  --scrim-rgb: 5,9,8;  --on-dark-rgb: 230,251,246;   /* the store hero */
  --tile-bg: #eef6f3; --tile-edge: #c5d6d0; --tile-edge-deep: #aebfb9; --tile-inner: rgba(255,255,255,.75);
  --sw-oak: #b08d5f;     --sw-walnut: #5e4632; --sw-steel: #2b2f33;  --sw-bone: #e5e0d6;
}

/* Dark "show" panels: redefine tokens so every shared component inherits the right skin */
.dark-panel {
  /* Ground is teal-950 itself; surfaces are interpolated toward teal-800 so the
     whole dark theme sits on the brand hue rather than a neutral charcoal. */
  --bg: var(--teal-950);       --bg-rgb: 4,51,43;
  --surface: #043A31;          --surface-alt: #043E35;   --surface-hover: #044338;
  --border: #04463B;           --border-hover: #044F43;
  --text: var(--teal-50);                                   /* 11.8:1 */
  --text-secondary: #76CCB7;                                /* 6.70:1 */
  --text-tertiary: #60AE9C;                                 /* 4.85:1 - AA, still clearly muted */
  --accent: var(--teal-400);        --accent-rgb: 29,212,176;   /* 6.71:1 on surface */
  --accent-hover: var(--teal-300);
  --accent-vivid: var(--teal-400);  --accent-vivid-rgb: 29,212,176;
  --accent-2: var(--coral-400);     --accent-2-rgb: 255,130,114; /* 5.25:1 */
  --accent-2-vivid: var(--coral-400);
  --btn-bg: var(--teal-400); --btn-bg-hover: var(--teal-300); --btn-fg: var(--teal-950);
  --warning: #fbbf24;
  --shadow-soft: 0 2px 12px -2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
  --shadow-lift: 0 20px 48px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);
  background: var(--bg); color: var(--text);
}
.dark-panel .btn-secondary { color: var(--text); border-color: rgba(240,245,243,.26); }
.dark-panel .btn-secondary:hover { background: rgba(240,245,243,.07); border-color: rgba(240,245,243,.5); }
.dark-panel .btn-primary { color: var(--btn-fg); }

/* ---------- Identity ---------- */
.wordmark { font-family: var(--font-display); font-weight: 600; font-size: 23px; letter-spacing: -0.025em; color: var(--text); text-transform: lowercase; }
.wordmark .dot { color: var(--accent-vivid); }
/* The real logo (type sheet), with a light version for the nav over the store photo */
.wordmark { display: inline-flex; align-items: center; }
.wordmark img { display: block; height: 34px; width: auto; }
.footer .wordmark img { height: 52px; }
.wordmark .logo-light { display: none; }
html.nav-on-dark .nav .wordmark .logo-dark { display: none; }
html.nav-on-dark .nav .wordmark .logo-light { display: block; }
.eyebrow { font-family: var(--font-body); font-weight: 600; letter-spacing: .08em; font-size: 14px; line-height: 20px; }  /* Body / Base / Medium */
.grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* button skin comes from --btn-bg / --btn-fg tokens in base.css; no override here */
.nav .btn-primary { box-shadow: 0 1px 2px rgba(4,51,43,.14); }
.btn-primary:hover { box-shadow: 0 10px 30px -8px rgba(var(--accent-vivid-rgb), .45); }

/* one-monthly-fee line, used under CTAs - never a number (brief 9.1) */
.fee-line { font-family: var(--font-body); font-size: 12.5px; color: var(--text-tertiary); letter-spacing: .02em; font-weight: 600; }

/* ---------- HERO: the store, then the donut ----------
   Default (no JS, or reduced motion): the store photo full screen with the headline, and the
   donut as the next block. intro.js adds .is-live to pin the section and drive the scroll-in. */
.intro { position: relative; }
.intro-pin { position: relative; }
.intro-view { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--metal-800); }
.intro-scene { position: absolute; inset: 0; }
.intro-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 51.3% 60%; }
.intro-img-blur { opacity: 0; }
.intro-shade, .intro-glow, .intro-bezel { display: none; }

/* Headline over the dark ceiling, with its own scrim so it reads over any crop */
.intro-copy { position: absolute; inset: 0 0 auto 0; z-index: 3; padding: clamp(92px, 12.5vh, 124px) clamp(20px, 4vw, 48px) clamp(48px, 8vh, 90px); text-align: center;
  background: linear-gradient(to bottom, rgba(var(--scrim-rgb), .78), rgba(var(--scrim-rgb), .5) 60%, transparent); }
.intro-copy .eyebrow { color: var(--teal-200); }
.intro-copy .eyebrow::before { background: var(--teal-200); }
/* Two lines, sized to both axes, so the copy always ends above the laptop */
.intro-copy .h1 { max-width: 1120px; margin: 0 auto 22px; font-size: min(clamp(30px, 4.6vw, 66px), 7vh); line-height: 1.04; color: var(--teal-50); }
.intro-copy .grad-text { background: linear-gradient(120deg, var(--teal-300), var(--coral-300)); -webkit-background-clip: text; background-clip: text; }
.intro-copy .lead { max-width: 660px; margin: 0 auto 28px; color: rgba(var(--on-dark-rgb), .84); }
.intro-copy .fee-line { color: rgba(var(--on-dark-rgb), .7); }
.hero-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.intro-cue { position: absolute; left: 50%; bottom: clamp(18px, 3.5vh, 34px); z-index: 3; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--on-dark-rgb), .8); font-weight: 600; }
.intro-cue i { position: relative; width: 1px; height: 38px; overflow: hidden; background: rgba(var(--on-dark-rgb), .22); }
.intro-cue i::after { content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--teal-200); animation: cueDrop 1.8s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes cueDrop { to { top: 100%; } }
/* The second cue: on the arrived screen the zoom stops but the pin holds a little longer, so say the page goes on.
   Only in the live (pinned) intro; intro.js fades it in on arrival and out as the page moves on. */
.intro-more { display: none; }
.intro.is-live .intro-more { position: absolute; left: 50%; bottom: clamp(14px, 2.6vh, 28px); z-index: 3; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 10px 14px 8px; border-radius: 14px; background: rgba(var(--bg-rgb), .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: var(--font-body); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 700;
  opacity: 0; pointer-events: none; }
.im-mouse { position: relative; display: block; width: 28px; height: 44px; border: 2.5px solid var(--accent); border-radius: 15px; }
.im-mouse b { position: absolute; left: 50%; top: 7px; width: 4px; height: 9px; margin-left: -2px; border-radius: 2px; background: var(--accent-vivid); animation: wheelRoll 1.6s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes wheelRoll { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(13px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
.im-chev { display: none; width: 28px; height: 28px; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; animation: chevBob 1.6s ease-in-out infinite; }
@keyframes chevBob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
/* Touch screens have no mouse wheel: an arrow instead */
@media (hover: none) { .im-mouse { display: none; } .im-chev { display: block; } }
@media (prefers-reduced-motion: reduce) { .im-mouse b, .im-chev { animation: none; } }

/* The screen, static: the donut as the next block on the page */
.intro-screen { position: relative; padding: clamp(56px, 9vh, 100px) clamp(20px, 4vw, 48px); background: var(--bg); }

/* Live: pinned, and driven by intro.js */
.intro.is-live { height: 360vh; }
.intro.is-live .intro-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--metal-800); }
.intro.is-live .intro-view { position: absolute; inset: 0; height: auto; min-height: 0; }
.intro.is-live .intro-scene { inset: auto; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.intro.is-live .intro-img { object-fit: fill; }
.intro.is-live .intro-img-blur { will-change: opacity; }
.intro.is-live .intro-shade { display: block; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 60%), transparent var(--sr0, 80px), rgba(var(--scrim-rgb), .88) var(--sr1, 420px)); }
.intro.is-live .intro-glow { display: block; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 60%), rgba(var(--neon-hot-rgb), .5), rgba(var(--neon-hot-rgb), .12) var(--sr0, 80px), transparent var(--sr1, 420px)); }
/* A crisp vector lid, so the laptop never goes soft as the photo is magnified */
.intro.is-live .intro-bezel { display: block; position: absolute; left: 0; top: 0; border-radius: 6px; background: var(--metal-800);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 10px 40px -10px rgba(0,0,0,.6); }
.intro-bezel i { position: absolute; left: 50%; top: 1.6%; width: 1.1%; aspect-ratio: 1; min-width: 2px; translate: -50% 0; border-radius: 50%; background: var(--metal-600); }
/* The display: a clipping window (moved and sized per frame) holding a viewport-sized layer
   that is scaled into it. Clipping by overflow, not an animated clip-path, keeps the donut from
   repainting every frame; it is rasterised once at full size and only ever scaled down. */
.intro.is-live .intro-screen-clip { position: absolute; left: 0; top: 0; overflow: hidden; z-index: 2; background: var(--bg); }
.intro.is-live .intro-screen { position: absolute; left: 0; top: 0; padding: 84px 24px 24px; transform-origin: 0 0; will-change: transform;
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.intro.is-live.arrived .intro-screen-clip { border-radius: 0 !important; }
/* The spread: donut and offering side by side - the image the zoom lands on */
.spread { display: flex; align-items: center; justify-content: center; gap: clamp(28px, 3vw, 56px); width: 100%; }
.spread .donut-stage { flex: none; width: auto; margin: 0; height: min(100%, calc((100vw - 48px) * .54 / 1.1)); }
.spread .offer { flex: 0 1 700px; min-width: 0; margin: 0; transform-origin: left center; transform: scale(var(--offer-fit, 1)); }
.intro:not(.is-live) .spread { height: min(86vh, 900px); }
.intro.is-live .spread { height: 100%; }
.donut-facts-home:empty { display: none; }
.donut-facts-home { padding-top: 8px; padding-bottom: clamp(40px, 7vh, 72px); }

/* On the dark store, the nav reads light */
html.nav-on-dark .nav { --text: var(--teal-50); --text-secondary: rgba(var(--on-dark-rgb), .8); --nav-rgb: var(--scrim-rgb); --border: rgba(255,255,255,.08); --surface-hover: rgba(255,255,255,.08); }

.hero-halo { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(760px 520px at 50% 14%, rgba(var(--accent-rgb), .09), transparent 66%),
    radial-gradient(620px 480px at 84% 76%, rgba(var(--accent-2-rgb), .06), transparent 66%); }
/* The ten-fact donut - the screen you arrive at. Laid out on a 1600 x 1000 frame (the laptop's
   16:10 display): a static machined ring centred, ten cards on an ellipse around it, each wired
   to its own neon tube. Not interactive - every fact is on screen at once. The ONLY motion in
   it is the neon surge. */
/* container-type: card type is sized in cqi, so the whole diagram scales like an image and
   the copy wraps identically at every width - no card can grow into its neighbour. */
.donut-stage { position: relative; width: min(900px, 100%); margin-inline: auto; aspect-ratio: 1100 / 1000; container-type: inline-size; }
.donut-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dw-lines path { fill: none; stroke: var(--metal-400); stroke-width: 1.4; stroke-linejoin: round; }
.dw-plug { fill: var(--metal-100); stroke: var(--metal-400); stroke-width: 1; }

.donut-ring-wrap { position: absolute; left: 31.82%; top: 30%; width: 36.36%; aspect-ratio: 1; container-type: inline-size; }
.donut-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Gradient stops read from the tokens so no colour lives in the markup */
.rs-m50 { stop-color: var(--metal-50); }   .rs-m100 { stop-color: var(--metal-100); } .rs-m200 { stop-color: var(--metal-200); }
.rs-m300 { stop-color: var(--metal-300); } .rs-m400 { stop-color: var(--metal-400); } .rs-m500 { stop-color: var(--metal-500); }
.rs-m600 { stop-color: var(--metal-600); } .rs-m700 { stop-color: var(--metal-700); } .rs-m800 { stop-color: var(--metal-800); }
.rs-t50 { stop-color: var(--teal-50); }    .rs-white { stop-color: var(--surface); }
.rn-shadow { fill: rgba(var(--ink-rgb), .22); }
.rn-rim { fill: none; stroke: url(#rnChrome); stroke-width: 18; }
.rn-channel { fill: none; stroke: url(#rnChannel); stroke-width: 52; }
.rn-lip { fill: none; stroke: var(--metal-200); stroke-width: 3; }
.rn-glow { fill: none; stroke: var(--neon); stroke-width: 26; stroke-linecap: round; opacity: .4; filter: url(#rnBlur); }
.rn-tube { fill: none; stroke: var(--neon); stroke-width: 18; stroke-linecap: round; opacity: .78; }
.rn-core { fill: none; stroke: var(--neon-hot); stroke-width: 6; stroke-linecap: round; opacity: .6; }
.rn-bracket { fill: url(#rnChrome); stroke: var(--metal-400); stroke-width: 1; }
.rn-node { fill: var(--surface); stroke: var(--metal-400); stroke-width: 2.5; }
.rn-node-dot { fill: var(--metal-300); }
.rn-band { fill: none; stroke: url(#rnSteel); stroke-width: 48; }
/* 140 teeth: period = circumference / 140 */
.rn-teeth { fill: none; stroke: var(--metal-800); stroke-width: 16; stroke-dasharray: 3.6 6.45; opacity: .85; }
.rn-lip-in { fill: none; stroke: url(#rnChrome); stroke-width: 9; }
.rn-glass { fill: url(#rnGlass); }
.rn-glass-hi { fill: none; stroke: rgba(255,255,255,.7); stroke-width: 2; }
.rn-reflect { fill: none; stroke: rgba(255,255,255,.75); stroke-width: 5; stroke-linecap: round; }

/* The neon surge: a conic comet rotating under a mask of the ten tubes, plus a blurred
   bloom copy. Transform-only, so it runs on the compositor; reduced motion freezes it. */
.donut-surge { position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 700'%3E%3Cpath d='M285.6 81.6A276 276 0 0 1 414.4 81.6' fill='none' stroke='white' stroke-width='22' stroke-linecap='round'/%3E%3Cpath d='M455.6 95A276 276 0 0 1 559.9 170.8' fill='none' stroke='white' stroke-width='22' stroke-linecap='round'/%3E%3Cpath d='M585.3 205.8A276 276 0 0 1 625.1 328.3' fill='none' stroke='white' stroke-width='22' stroke-linecap='round'/%3E%3Cpath d='M625.1 371.7A276 276 0 0 1 585.3 494.2' fill='none' stroke='white' stroke-width='22' stroke-linecap='round'/%3E%3Cpath d='M559.9 529.2A276 276 0 0 1 455.6 605' fill='none' stroke='white' stroke-width='22' stroke-linecap='round'/%3E%3Cpath d='M414.4 618.4A276 276 0 0 1 285.6 618.4' fill='none' stroke='white' stroke-width='22' stroke-linecap='round'/%3E%3Cpath d='M244.4 605A276 276 0 0 1 140.1 529.2' fill='none' stroke='white' stroke-width='22' stroke-linecap='round'/%3E%3Cpath d='M114.7 494.2A276 276 0 0 1 74.9 371.7' fill='none' stroke='white' stroke-width='22' stroke-linecap='round'/%3E%3Cpath d='M74.9 328.3A276 276 0 0 1 114.7 205.8' fill='none' stroke='white' stroke-width='22' stroke-linecap='round'/%3E%3Cpath d='M140.1 170.8A276 276 0 0 1 244.4 95' fill='none' stroke='white' stroke-width='22' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 700'%3E%3Cpath d='M285.6 81.6A276 276 0 0 1 414.4 81.6' fill='none' stroke='white' stroke-width='22' stroke-linecap='round'/%3E%3Cpath d='M455.6 95A276 276 0 0 1 559.9 170.8' fill='none' stroke='white' stroke-width='22' stroke-linecap='round'/%3E%3Cpath d='M585.3 205.8A276 276 0 0 1 625.1 328.3' fill='none' stroke='white' stroke-width='22' stroke-linecap='round'/%3E%3Cpath d='M625.1 371.7A276 276 0 0 1 585.3 494.2' fill='none' stroke='white' stroke-width='22' stroke-linecap='round'/%3E%3Cpath d='M559.9 529.2A276 276 0 0 1 455.6 605' fill='none' stroke='white' stroke-width='22' stroke-linecap='round'/%3E%3Cpath d='M414.4 618.4A276 276 0 0 1 285.6 618.4' fill='none' stroke='white' stroke-width='22' stroke-linecap='round'/%3E%3Cpath d='M244.4 605A276 276 0 0 1 140.1 529.2' fill='none' stroke='white' stroke-width='22' stroke-linecap='round'/%3E%3Cpath d='M114.7 494.2A276 276 0 0 1 74.9 371.7' fill='none' stroke='white' stroke-width='22' stroke-linecap='round'/%3E%3Cpath d='M74.9 328.3A276 276 0 0 1 114.7 205.8' fill='none' stroke='white' stroke-width='22' stroke-linecap='round'/%3E%3Cpath d='M140.1 170.8A276 276 0 0 1 244.4 95' fill='none' stroke='white' stroke-width='22' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.donut-surge span { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg 190deg,
    rgba(var(--neon-rgb), .35) 280deg,
    rgba(var(--neon-hot-rgb), .95) 345deg,
    rgba(255,255,255,1) 357deg,
    transparent 360deg);
  animation: surge 4.2s linear infinite; }
.donut-bloom { opacity: .9; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 700'%3E%3Ccircle cx='350' cy='350' r='276' fill='none' stroke='white' stroke-width='70'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 700'%3E%3Ccircle cx='350' cy='350' r='276' fill='none' stroke='white' stroke-width='70'/%3E%3C/svg%3E"); }
.donut-bloom span { filter: blur(12px); }
@keyframes surge { to { transform: rotate(360deg); } }

/* Centre statement, sized in container units so it always fits the glass */
.donut-core { position: absolute; left: 50%; top: 50%; width: 52%; transform: translate(-50%, -50%); text-align: center; }
.donut-core .core-logo { display: block; width: 36cqi; height: auto; margin: 0 auto 3cqi; }
.donut-core b { display: block; font-family: var(--font-body); font-size: max(12px, 4.4cqi); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--text); }
.donut-core .core-sub { display: block; margin-top: 2.4cqi; font-size: max(10px, 2.7cqi); line-height: 1.5; color: var(--text-secondary); }

/* The ten facts - an ordered list, so it reads correctly with no CSS at all */
.donut-facts { list-style: none; margin: 0; padding: 0; }
/* Slim, long cards: number and title on one line, a one-line description beneath */
.df { position: absolute; z-index: 2; width: 27.27%; transform: translate(-50%, -50%); padding: 1.3cqi 1.5cqi 1.4cqi; border-radius: 1.2cqi;
  background: var(--tile-bg); border: 2px solid var(--tile-edge);
  box-shadow: inset 0 0 0 3px var(--tile-inner), 0 3px 0 var(--tile-edge-deep), 0 20px 36px -20px rgba(var(--ink-rgb), .4); }
.df-num { margin-right: .5em; font-family: var(--font-body); font-weight: 600; color: var(--accent); }
.df b { display: block; font-family: var(--font-body); font-size: 1.82cqi; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; color: var(--text); }
.df p { margin-top: .45cqi; font-size: 1.5cqi; line-height: 1.4; color: var(--text-secondary); }
.df-1  { left: 50.00%; top: 7.50%; }
.df-2  { left: 80.00%; top: 20.50%; }
.df-3  { left: 86.36%; top: 39.50%; }
.df-4  { left: 86.36%; top: 60.50%; }
.df-5  { left: 80.00%; top: 79.50%; }
.df-6  { left: 50.00%; top: 92.50%; }
.df-7  { left: 20.00%; top: 79.50%; }
.df-8  { left: 13.64%; top: 60.50%; }
.df-9  { left: 13.64%; top: 39.50%; }
.df-10 { left: 20.00%; top: 20.50%; }


/* ---------- The offering: the pamphlet beside the donut ----------
   A one-glance explanation of the whole business: what it is, the ten areas grouped into the
   four jobs they do (numbers match the ring), what is included, and the one CTA. Static and
   below 1080px it is a normal block after the donut. */
.offer { position: relative; max-width: 1180px; margin: clamp(40px, 6vh, 64px) auto 0; text-align: left; }
/* The opening statement and the title read as one bold block: same face, size and weight (Josh, 25 Sep) */
.offer-kicker, .offer-title { font-family: var(--font-display); font-size: clamp(18px, 2.55vh, 23px); line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.offer-lead { margin-top: clamp(10px, 1.6vh, 16px); font-size: clamp(14px, 1.9vh, 16.5px); line-height: 1.55; color: var(--text-secondary); }
.offer-groups { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.6vh, 16px); margin-top: clamp(16px, 2.6vh, 26px); }
.og { padding: clamp(12px, 1.9vh, 18px) clamp(14px, 1.6vw, 20px); border-radius: 14px; background: var(--tile-bg); border: 1px solid var(--tile-edge);
  box-shadow: inset 0 0 0 2px var(--tile-inner), 0 12px 26px -18px rgba(var(--ink-rgb), .35); }
.og h3 { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: clamp(15px, 2vh, 18px); font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.og h3::before { content: ''; width: 18px; height: 5px; border-radius: 3px; background: var(--neon); box-shadow: 0 0 10px rgba(var(--neon-rgb), .7); }
.og p { margin-top: 6px; font-size: clamp(12.5px, 1.65vh, 14px); line-height: 1.45; color: var(--text-secondary); }
.og-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: clamp(8px, 1.2vh, 12px); }
.og-tags li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 5px; border-radius: 999px; background: var(--surface); border: 1px solid var(--tile-edge);
  font-size: clamp(11px, 1.45vh, 12.5px); font-weight: 500; color: var(--text); }
.og-tags i { display: grid; place-items: center; min-width: 22px; height: 18px; padding: 0 4px; border-radius: 999px; font-style: normal; font-family: var(--font-body); font-size: 10.5px; font-weight: 600; color: var(--teal-950); background: rgba(var(--neon-rgb), .35); }
.offer-foot { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: start; gap: 14px clamp(20px, 2vw, 28px); margin-top: clamp(14px, 2.4vh, 24px);
  padding-top: clamp(12px, 2vh, 18px); border-top: 1px solid var(--border); }
.offer-incl { list-style: none; display: grid; gap: 8px; font-family: var(--font-body); font-size: clamp(14px, 1.8vh, 15.5px); line-height: 1.3; color: var(--text); font-weight: 600; }
.offer-incl li { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.offer-incl li::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 8px rgba(var(--neon-rgb), .6); }
.offer-kicker { margin-bottom: clamp(10px, 1.6vh, 16px); }
.offer-foot .btn-lg { padding: 19px 30px; font-size: 17px; white-space: nowrap; }

/* Short screens: tighten the pamphlet's rhythm before intro.js has to scale it */
@media (max-height: 820px) {
  .offer-kicker, .offer-title { font-size: clamp(17px, 2.45vh, 22px); }
  .offer-lead { font-size: 14px; line-height: 1.45; }
  .offer-groups { gap: 10px; margin-top: 14px; }
  .og { padding: 10px 14px 12px; }
  .og p { font-size: 12.5px; margin-top: 4px; }
  .og-tags { margin-top: 7px; }
  .offer-foot { margin-top: 12px; padding-top: 10px; }
}

/* ---------- Mini donut scroll indicator ---------- */
.donut-mini { position: fixed; left: 18px; bottom: 18px; z-index: 95; display: flex; align-items: center; gap: 11px;
  padding: 9px 15px 9px 9px; border-radius: 999px; background: rgba(255,255,255,.92); border: 1px solid var(--border);
  box-shadow: var(--shadow-lift); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .4s, transform .4s; }
.donut-mini.visible { opacity: 1; transform: none; pointer-events: auto; }
.donut-mini svg { flex: none; }
.donut-mini .dm-track { fill: none; stroke: var(--border); stroke-width: 4; }
.donut-mini .dm-fill { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset .45s cubic-bezier(.22,1,.36,1); }
.donut-mini .dm-label { font-family: var(--font-body); font-size: 11px; letter-spacing: .04em; color: var(--text-secondary); white-space: nowrap; font-weight: 600; }
.donut-mini .dm-label b { display: block; font-family: var(--font-body); font-size: 12.5px; letter-spacing: -0.01em; color: var(--text); font-weight: 600; }

/* ---------- Panel scaffolding ---------- */
.panel { position: relative; padding-block: clamp(84px, 12vh, 136px); }
.panel-grid { display: grid; grid-template-columns: 1fr 1.12fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.panel-grid.flip .panel-copy { order: 2; }
.panel-tag { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; font-family: var(--font-body); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.panel-tag i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: rgba(var(--accent-rgb), .1); border: 1px solid rgba(var(--accent-rgb), .22); font-style: normal; font-size: 10.5px; font-weight: 600; }
.panel-copy .h2 { margin-bottom: 18px; }
.panel-copy .lead { margin-bottom: 22px; }
.mech { padding: 18px 20px; border-radius: 14px; background: var(--surface-alt); border: 1px solid var(--border); }
.mech b { display: block; font-family: var(--font-body); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; font-weight: 600; }
.mech p { font-size: 14.8px; color: var(--text-secondary); }
.point-list { display: grid; gap: 13px; margin-top: 22px; }
.point-list li { list-style: none; display: flex; gap: 12px; font-size: 15px; color: var(--text-secondary); }
.point-list li svg { flex: none; margin-top: 4px; color: var(--accent); }
.point-list li b { color: var(--text); font-weight: 600; }

/* ---------- Panel 2: hybrid 3D modelling ---------- */

.qc-strip { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 15px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.qc-seal { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); border: 2px dashed rgba(var(--accent-rgb), .5); }
.qc-strip p { font-size: 14px; color: var(--text-secondary); }
.qc-strip p b { color: var(--text); }
.macro-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.macro { border-radius: 12px; overflow: hidden; aspect-ratio: 1; background-size: cover; background-position: center; border: 1px solid var(--border); position: relative; }
.macro span { position: absolute; inset: auto 0 0 0; padding: 7px 10px; font-family: var(--font-body); font-size: 10px; letter-spacing: .04em; color: #fff; background: linear-gradient(transparent, rgba(11,21,18,.82)); font-weight: 600; }

/* ---------- Panel 3: configurator (dark show pony) ---------- */
.cfg-shell { border-radius: 22px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-lift); }
.cfg-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.cfg-top b { font-family: var(--font-body); font-size: 15px; font-weight: 600; }
.cfg-top .cfg-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.cfg-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
/* studio backdrop: graduated lighting band, no user-uploaded backgrounds (brief 9.4) */
.cfg-stage { position: relative; aspect-ratio: 16 / 11;
  background:
    radial-gradient(120% 62% at 50% 0%, rgba(255,255,255,.09), transparent 62%),
    linear-gradient(180deg, #1c2b26 0%, #16221e 52%, #101a17 100%); }
.cfg-stage model-viewer { position: relative; z-index: 1; width: 100%; height: 100%; --poster-color: transparent; background: transparent; }
.cfg-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(180deg, transparent, rgba(255,255,255,.045)); }
/* baked/faked soft contact shadow under the product (brief 5.3) */
.cfg-shadow { position: absolute; left: 50%; bottom: 15%; transform: translateX(-50%); width: 54%; height: 8%; border-radius: 50%; z-index: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.62), rgba(0,0,0,.22) 52%, transparent 74%); filter: none; }
.cfg-ar { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
  background: rgba(240,245,243,.95); color: #0b1512; font-size: 13px; font-weight: 600; box-shadow: 0 10px 26px -10px rgba(0,0,0,.6); }
.cfg-ar:hover { background: #fff; }
.cfg-hint { position: absolute; left: 14px; top: 14px; z-index: 2; font-family: var(--font-body); font-size: 10.5px; letter-spacing: .05em; color: var(--text-tertiary); border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px; background: rgba(11,21,18,.5); font-weight: 600; }
.cfg-panel { padding: 18px 20px 20px; display: grid; gap: 17px; }
.cfg-row { display: grid; gap: 9px; }
.cfg-row-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-family: var(--font-body); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; }
.cfg-row-label output { font-family: var(--font-body); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--text-secondary); }
.swatch-row { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { width: 36px; height: 36px; border-radius: 50%; border: 2px solid transparent; box-shadow: 0 0 0 1.5px var(--border-hover); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.swatch:hover { transform: scale(1.1); }
.swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.swatch.active { box-shadow: 0 0 0 2px var(--accent); border-color: var(--surface); }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cfg-chip { padding: 8px 15px; border-radius: 999px; border: 1px solid var(--border-hover); font-size: 13px; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.cfg-chip:hover { border-color: var(--accent); color: var(--text); }
.cfg-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cfg-chip.active { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), .12); }
.cfg-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 13px 20px; border-top: 1px solid var(--border); font-family: var(--font-body); font-size: 11px; color: var(--text-tertiary); font-weight: 600; }
.cfg-foot .ok { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); }

/* ---------- Panel 4: the platform ---------- */
.tm-name { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 8px; border: 1px dashed var(--border-hover); font-family: var(--font-body); font-size: 11.5px; color: var(--text-secondary); font-weight: 600; }
.tm-name b { color: var(--text); font-weight: 600; }
.ui-mock { border-radius: 18px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-lift); }
.ui-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface-alt); }
.ui-bar .ui-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-hover); }
.ui-bar .ui-title { margin-left: 6px; font-family: var(--font-body); font-size: 11px; letter-spacing: .06em; color: var(--text-tertiary); font-weight: 600; }
.ui-body { display: grid; grid-template-columns: 148px 1fr; min-height: 320px; }
.ui-side { border-right: 1px solid var(--border); padding: 14px 12px; display: grid; gap: 4px; align-content: start; background: var(--surface-alt); }
.ui-nav { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; font-size: 12.5px; color: var(--text-secondary); }
.ui-nav svg { flex: none; opacity: .75; }
.ui-nav.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-soft); }
.ui-main { padding: 16px; }
.ui-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.ui-head b { font-family: var(--font-body); font-size: 14.5px; font-weight: 600; }
.ui-btn { padding: 6px 13px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 600; }
.asset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.asset { border-radius: 10px; border: 1px solid var(--border); overflow: hidden; background: var(--surface-alt); }
.asset-img { aspect-ratio: 4/3; background-size: cover; background-position: center; position: relative; }
.asset-meta { padding: 7px 9px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.asset-meta span { font-size: 10.5px; color: var(--text-tertiary); }
.asset-pill { font-family: var(--font-body); font-size: 9px; letter-spacing: .04em; padding: 2px 6px; border-radius: 5px; font-weight: 600; }
.asset-pill.ready { color: var(--accent); background: rgba(var(--accent-rgb), .12); }
.asset-pill.work { color: var(--warning); background: rgba(180,83,9,.12); }
.rails { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 26px; }
.rail-step { position: relative; padding: 16px 16px 16px 18px; border-radius: 13px; background: var(--surface); border: 1px solid var(--border); }
.rail-step::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 3px; background: var(--grad); }
.rail-step b { display: block; font-family: var(--font-body); font-size: 10.5px; letter-spacing: .1em; color: var(--accent); margin-bottom: 7px; font-weight: 600; }
.rail-step span { font-size: 13.5px; color: var(--text-secondary); }

/* ---------- Panel 5: agentic + integrations ---------- */
.mcp-widget { border-radius: 18px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-soft); }
.mcp-head { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid var(--border); }
.mcp-head b { font-family: var(--font-body); font-size: 15px; font-weight: 600; }
.mcp-head .mcp-badge { margin-left: auto; font-family: var(--font-body); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: rgba(var(--accent-rgb), .1); border: 1px solid rgba(var(--accent-rgb), .22); border-radius: 999px; padding: 4px 10px; font-weight: 600; }
.mcp-body { padding: 18px; display: grid; gap: 14px; }
.mcp-qa { display: grid; gap: 6px; }
.mcp-qa dt { font-family: var(--font-body); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; }
.mcp-qa dd { font-size: 14.5px; color: var(--text-secondary); }
.mcp-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--font-body); font-size: 11.5px; font-weight: 600; }
.mcp-node { padding: 8px 12px; border-radius: 9px; background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-secondary); }
.mcp-node.hot { border-color: rgba(var(--accent-rgb), .4); color: var(--accent); background: rgba(var(--accent-rgb), .08); }
.mcp-arrow { color: var(--text-tertiary); }
.int-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; margin-top: 24px; }
.int { display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-radius: 13px; background: var(--surface); border: 1px solid var(--border); }
.int-mark { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-alt); border: 1px solid var(--border); font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--text-secondary); }
.int b { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.int span { font-family: var(--font-body); font-size: 10.5px; letter-spacing: .04em; color: var(--text-tertiary); font-weight: 600; }
.int.live { border-color: rgba(var(--accent-rgb), .45); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .12); }
.int.live .int-mark { background: rgba(var(--accent-rgb), .12); border-color: rgba(var(--accent-rgb), .3); color: var(--accent); }
.int.live span { color: var(--accent); }
.int.soon { opacity: .82; }

/* ---------- Panel 6: data (dark) ---------- */
.dash { border-radius: 20px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-lift); }
.dash-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.dash-bar b { font-family: var(--font-body); font-size: 14.5px; font-weight: 600; }
.dash-range { display: flex; gap: 6px; }
.dash-range button { padding: 5px 11px; border-radius: 7px; font-family: var(--font-body); font-size: 10.5px; color: var(--text-tertiary); border: 1px solid transparent; cursor: pointer; font-weight: 600; }
.dash-range button:hover { color: var(--text); }
.dash-range button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dash-range button.on { color: var(--text); background: var(--surface-alt); border-color: var(--border); }
.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--border); }
.kpi { padding: 17px 18px; border-right: 1px solid var(--border); }
.kpi:last-child { border-right: 0; }
.kpi-label { font-family: var(--font-body); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; }
.kpi-val { margin-top: 7px; font-family: var(--font-display); font-size: clamp(23px, 2.4vw, 30px); font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--text); }
.kpi-delta { margin-top: 7px; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--accent); }
.spark { display: block; margin-top: 11px; width: 100%; height: 30px; overflow: visible; }
.spark path { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linecap: round; }
.dash-plot { padding: 18px; }
.plot-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.plot-head b { font-family: var(--font-body); font-size: 13.5px; font-weight: 600; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-secondary); }
.legend i { width: 9px; height: 9px; border-radius: 2px; }
.bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; align-items: end; height: 168px; padding-top: 6px; }
.bar-col { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; height: 100%; }
/* flex: none is load-bearing - without it flex-shrink normalises every column to the
   same height and the stack no longer represents the data. 2px gaps separate the
   fills; only the free end is rounded, the baseline segment stays anchored square. */
.bar-col .seg { flex: none; border-radius: 0; }
.bar-col .seg:first-child { border-radius: 4px 4px 0 0; }
.bar-col .x { margin-top: 9px; text-align: center; font-family: var(--font-body); font-size: 10px; color: var(--text-tertiary); font-weight: 600; }
.plot-note { margin-top: 14px; font-size: 12.5px; color: var(--text-tertiary); }
.plot-table { margin-top: 12px; }
.plot-table summary { font-family: var(--font-body); font-size: 11px; letter-spacing: .06em; color: var(--text-secondary); cursor: pointer; padding: 6px 0; font-weight: 600; }
.plot-table summary:hover { color: var(--text); }
.plot-table summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.plot-table table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12.5px; }
.plot-table th, .plot-table td { text-align: right; padding: 6px 10px; border-bottom: 1px solid var(--border); color: var(--text-secondary); }
.plot-table th:first-child, .plot-table td:first-child { text-align: left; }
.plot-table th { font-family: var(--font-body); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; }

/* ---------- Closing band ---------- */
.closing { position: relative; overflow: hidden; text-align: center; }
.closing-halo { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(720px 420px at 50% 108%, rgba(var(--accent-rgb), .14), transparent 66%); }
.closing .h2 { max-width: 1180px; margin: 0 auto 20px; }
.closing .closing-sub { margin-bottom: 0; font-family: var(--font-display); }
.closing .lead { max-width: 1000px; margin: 0 auto 20px; }
.closing-rail { max-width: 1180px; margin: clamp(36px, 5vh, 52px) auto; font-family: var(--font-display); font-size: clamp(21px, 2.1vw, 26px); line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.closing-rail .grad-text { background: linear-gradient(120deg, var(--teal-300), var(--coral-300)); -webkit-background-clip: text; background-clip: text; }
.closing .hero-cta { margin-top: 32px; }
.closing-demo { max-width: 900px; margin: 24px auto 0; font-size: 16px; line-height: 1.5; color: var(--text-secondary); }
.closing .closing-fee { margin-top: 40px; font-size: 14px; color: var(--text); }
.pioneer { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb), .32); font-family: var(--font-body); font-size: 11.5px; letter-spacing: .06em; color: var(--accent); font-weight: 600; }

/* ---------- Demo request form ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; }
.field.wide { grid-column: 1 / -1; }
.field label { font-family: var(--font-body); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; padding: 13px 15px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: var(--font-body); font-size: 15px; transition: border-color .2s, box-shadow .2s; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--border-hover); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); }
.field textarea { min-height: 104px; resize: vertical; }
.form-note { margin-top: 16px; font-size: 13.5px; color: var(--text-tertiary); }
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }  /* bots fill it, people never see it */
.field [aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 3px rgba(179, 38, 30, .12); }
.form-status:empty { display: none; }
.form-status { margin-top: 14px; font-size: 14.5px; font-weight: 600; }
.form-status.is-error { color: var(--error); }
.form-done { padding: 20px 22px; border-radius: 14px; background: rgba(var(--accent-vivid-rgb), .12); border: 1px solid rgba(var(--accent-vivid-rgb), .4); }
.form-done b { display: block; font-family: var(--font-display); font-size: 19px; color: var(--text); }
.form-done p { margin-top: 6px; font-size: 15px; color: var(--text-secondary); }
.form-done:focus { outline: none; }
.expect { display: grid; gap: 14px; }
.expect li { list-style: none; display: flex; gap: 14px; padding: 16px 18px; border-radius: 13px; background: var(--surface); border: 1px solid var(--border); }
.expect .n { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: rgba(var(--accent-rgb), .1); color: var(--accent); font-family: var(--font-body); font-size: 11.5px; font-weight: 600; }
.expect b { display: block; margin-bottom: 4px; font-size: 15px; }
.expect p { font-size: 14px; color: var(--text-secondary); }

/* ---------- Cards / verticals / misc ---------- */
.hero-lite { position: relative; padding: 136px 0 clamp(40px, 6vh, 64px); overflow: hidden; }
.hero-lite .hero-halo { position: absolute; inset: 0; }
.hero-lite .h1 { max-width: 880px; margin-bottom: 20px; }
.hero-lite .lead { max-width: 660px; }
.vert-card { padding: 0; overflow: hidden; }
.vert-img { aspect-ratio: 16/10; background-size: cover; background-position: center; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.vert-card:hover .vert-img { transform: scale(1.045); }
.vert-body { padding: 22px 24px 26px; }
.vert-body .h3 { font-size: 19px; margin-bottom: 8px; }
.vert-body .link-arrow { margin-top: 15px; }
.badge-10 { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; font-family: var(--font-body); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); border: 1px solid var(--border); font-weight: 600; }
.badge-20 { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; font-family: var(--font-body); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: rgba(var(--accent-rgb), .1); border: 1px solid rgba(var(--accent-rgb), .24); font-weight: 600; }
.logo-band .marquee-track span { font-family: var(--font-body); font-weight: 600; font-size: 19px; color: var(--text-tertiary); }
.pull { max-width: 860px; margin-inline: auto; padding: 34px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); text-align: center; }
.pull p { font-family: var(--font-body); font-size: clamp(18px, 2.1vw, 24px); font-weight: 400; line-height: 1.45; color: var(--text); }
.pull footer { margin-top: 16px; font-size: 13px; color: var(--text-tertiary); }
/* sitemap deliverable */
.map-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.map-table th, .map-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.map-table th { font-family: var(--font-body); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; }
.map-table td code { font-family: var(--font-body); font-size: 12.5px; color: var(--accent); font-weight: 600; }
.map-table tr:hover td { background: var(--surface-hover); }
.map-scroll { overflow-x: auto; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); }

@media (max-width: 1080px) {
  /* donut -> ring on top, the ten facts as a grid beneath it */
  .donut-stage { aspect-ratio: auto; max-width: 760px; }
  .donut-wires { display: none; }
  .donut-ring-wrap { position: relative; left: auto; top: auto; width: min(100%, 460px); margin-inline: auto; }
  .donut-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
  .spread { flex-direction: column; height: auto !important; }
  .spread .donut-stage { width: 100%; height: auto; }
  .offer { margin-top: 8px; }
  .offer-groups { grid-template-columns: 1fr; }
  .df { position: static; width: auto; transform: none; padding: 15px 17px 17px; border-radius: 16px; }
  .df-num { font-size: 13px; }
  .df b { margin: 5px 0 6px; font-size: 16.5px; }
  .df p { font-size: 14px; }
  .panel-grid { grid-template-columns: 1fr; }
  .panel-grid.flip .panel-copy { order: 0; }
  .ui-body { grid-template-columns: 1fr; }
  .ui-side { display: none; }
  .rails { grid-template-columns: 1fr 1fr; }
  .donut-mini { display: none; }
}
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: 1fr; }
  .kpi { border-right: 0; border-bottom: 1px solid var(--border); }
  .rails { grid-template-columns: 1fr; }
  .macro-row { grid-template-columns: repeat(3, 1fr); }
  .asset-grid { grid-template-columns: repeat(2, 1fr); }
  .bars { grid-template-columns: repeat(6, 1fr); gap: 7px; }
  .hero-cta .btn { width: 100%; }
  .donut-facts { grid-template-columns: 1fr; }
}

/* ---------- Value inventory: "for one monthly fee you get all of this" ----------
   Brief §2 asks the site to convey scale of value with named, trademark-quality
   components. Dense enough to read as volume, ordered enough to read as a system. */
.incl { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.incl-col { display: flex; flex-direction: column; padding: 22px 20px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-soft); }
.incl-num { font-family: var(--font-body); font-size: 10.5px; letter-spacing: .12em; color: var(--accent); font-weight: 600; }
.incl-col h3 { margin: 7px 0 4px; font-family: var(--font-body); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.incl-tm { display: block; margin-bottom: 12px; font-family: var(--font-body); font-size: 9.5px; letter-spacing: .05em; color: var(--text-tertiary); font-weight: 600; }
.incl-list { list-style: none; display: grid; gap: 9px; margin-top: 4px; }
.incl-list li { position: relative; padding-left: 24px; font-size: 13.5px; line-height: 1.45; color: var(--text-secondary); }
/* A tick, drawn as a mask so its colour still comes from the accent token */
.incl-list li::before { content: ''; position: absolute; left: 0; top: 2px; width: 15px; height: 15px; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.incl-foot { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 26px;
  padding: 20px 26px; border-radius: 16px; background: var(--surface-alt); border: 1px solid var(--border); text-align: center; }
.incl-foot b { font-family: var(--font-body); font-size: 17px; font-weight: 600; color: var(--text); }
.incl-foot span { font-family: var(--font-body); font-size: 12px; color: var(--text-tertiary); font-weight: 600; }
.incl-count { display: inline-flex; align-items: baseline; gap: 7px; }
/* One line, one size, one face (Josh, 25 Sep) */
.incl-line { margin: 0; font-family: var(--font-body); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.4; font-weight: 600; color: var(--text); text-align: center; }
.incl-count i { font-family: var(--font-display); font-style: normal; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--accent); }

/* named-component callout inside a panel (the rules engine, component two) */
.named-block { margin-top: 22px; padding: 20px 22px; border-radius: 16px; border: 1px solid var(--border);
  background: var(--surface); box-shadow: var(--shadow-soft); }
.named-block .nb-head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; flex-wrap: wrap; }
.named-block .nb-head b { font-family: var(--font-body); font-size: 15.5px; font-weight: 600; }
.named-block .nb-tag { font-family: var(--font-body); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); background: rgba(var(--accent-rgb), .1); border: 1px solid rgba(var(--accent-rgb), .24); border-radius: 999px; padding: 4px 10px; font-weight: 600; }
.named-block p { font-size: 14.5px; color: var(--text-secondary); }

@media (max-width: 1080px) { .incl { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .incl { grid-template-columns: 1fr; } }


/* ---------- Photo-to-3D slider: site skin ----------
   The component ships brand-neutral; this maps it onto the Plattar tokens.
   Component source of truth: /deliverables/photo-to-3d-slider/ */
.p3d-site {
  --p3d-accent: var(--teal-600);
  --p3d-on-accent: var(--teal-950);
  --p3d-backdrop: #ffffff;
  --p3d-surface: var(--surface);
  --p3d-ink: var(--text);
  --p3d-border: var(--border);
  --p3d-radius: 20px;
  --p3d-shadow: var(--shadow-lift);
  --p3d-font: var(--font-body);
  --p3d-label-bg: rgba(4,51,43,.78);
  --p3d-label-ink: var(--teal-50);
}
.p3d-site .p3d-mode { font-family: var(--font-body); }
.p3d-site .p3d-hint { font-family: var(--font-body); font-size: 11.5px; letter-spacing: .04em; font-weight: 600; }

/* ============ 24 Sep section rebuild ============ */
/* Section head with the title left and the lead right */
.sh-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(20px, 4vw, 64px); align-items: end; max-width: none; margin-bottom: clamp(30px, 5vh, 52px); }
.sh-split .h2 { margin: 0; }
.sh-split .lead { margin: 0; }
.lead-stack { display: grid; gap: 14px; }

/* Light product UIs (a retailer's page, the Plattar app) keep light tokens inside dark panels */
.browser, .app {
  --bg: var(--lt-bg); --surface: var(--lt-surface); --surface-alt: var(--lt-surface-alt); --surface-hover: var(--lt-surface-hover);
  --border: var(--lt-border); --border-hover: var(--lt-border-hover); --text: var(--teal-950);
  --text-secondary: var(--lt-text-secondary); --text-tertiary: var(--lt-text-tertiary);
  --accent: var(--teal-800); --accent-rgb: 4,107,91; --accent-vivid: var(--teal-500); --accent-vivid-rgb: 0,201,167;
  --shadow-soft: 0 2px 12px -4px rgba(4,51,43,.10); color: var(--text); }
.browser { border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 40px 90px -40px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.06); }
.browser-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--surface-alt); border-bottom: 1px solid var(--border); }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-hover); }
.browser-url { margin-left: 12px; flex: 0 1 440px; min-width: 0; padding: 5px 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border);
  font-family: var(--font-body); font-size: 11.5px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.browser img { display: block; width: 100%; height: auto; }
/* Frames around the software's dark-mode screens */
.browser.is-dark { --surface: var(--app-dark-surface); --surface-alt: var(--app-dark-bg); --border: var(--app-dark-edge); --border-hover: var(--app-dark-edge); background: var(--app-dark-bg); }
.browser.is-dark .browser-url { color: rgba(var(--on-dark-rgb), .6); }

/* The configurator, as a retailer's desktop product page */
.pdp { display: grid; grid-template-columns: 1.65fr 1fr; background: var(--surface); }
.pdp .cfg-stage { aspect-ratio: auto; min-height: clamp(380px, 44vw, 560px); background: radial-gradient(110% 85% at 50% 30%, var(--surface) 0%, var(--surface-alt) 100%); }
.pdp .cfg-floor { background: linear-gradient(180deg, transparent, rgba(4,51,43,.05)); }
.pdp .cfg-shadow { background: radial-gradient(closest-side, rgba(4,51,43,.28), transparent); }
.pdp .cfg-hint { color: var(--text-tertiary); }
.pdp-side { display: flex; flex-direction: column; gap: 16px; padding: clamp(20px, 2.4vw, 32px); border-left: 1px solid var(--border); }
.pdp-crumb { font-size: 12px; color: var(--text-tertiary); }
.pdp-title { font-family: var(--font-body); font-size: clamp(20px, 2vw, 26px); font-weight: 400;  color: var(--text); margin-top: -8px; }
.pdp-live { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--text-secondary); margin-top: -6px; }
.pdp-live .cfg-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.pdp .cfg-panel { padding: 0; }
.pdp-actions { display: flex; gap: 10px; margin-top: auto; }
.pdp-buy { flex: 1; display: grid; place-items: center; padding: 13px 16px; border-radius: 10px; background: var(--teal-950); color: var(--teal-50); font-size: 14px; font-weight: 600; }
.pdp-ar { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--border-hover); background: var(--surface);
  font-size: 13.5px; font-weight: 600; color: var(--text); cursor: pointer; transition: border-color .2s, color .2s; }
.pdp-ar:hover, .pdp-ar:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.pdp-rule { display: flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 11px; letter-spacing: .02em; color: var(--accent); font-weight: 600; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
.trio-item { padding: 20px 22px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.trio-item b { display: block; margin-bottom: 8px; font-family: var(--font-body); font-size: 16.5px; font-weight: 600; color: var(--text); }
.trio-item p { font-size: 14.2px; line-height: 1.55; color: var(--text-secondary); }

/* The platform: rule of three, screenshot and blurb */
.stack { display: grid; gap: clamp(36px, 6vh, 64px); margin-top: clamp(20px, 3vh, 32px); }
.stack-row { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: clamp(24px, 2.8vw, 40px); align-items: center; }
/* Mirrored rows mirror the columns too, so the screenshot always gets the wide one */
.stack-row.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); }
.stack-row.flip .shot { order: 2; }
.stack-row.flip .stack-copy { justify-self: end; }
.shot { margin: 0; }
.stack-num { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 10px; font-family: var(--font-body); font-weight: 600; color: var(--teal-950); background: rgba(var(--accent-vivid-rgb), .3); }
.stack-copy h3 { margin-bottom: 12px; font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 32px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--text); }
.stack-copy p { max-width: 44ch; font-size: 18px; line-height: 1.556; color: var(--text-secondary); }
.stack-foot { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(24px, 4vw, 48px); align-items: start; margin-top: clamp(40px, 6vh, 64px); padding-top: 32px; border-top: 1px solid var(--border); }
/* H3 size and up takes the display face (type sheet) */
.stack-feel { font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 30px); font-weight: 600; letter-spacing: -0.02em; color: var(--text); line-height: 1.2; }
.stack-foot .point-list { margin-top: 0; }

/* Hybrid 3D modelling: four photos, then the model */
.p2m { padding: clamp(18px, 2.6vw, 30px); border-radius: 22px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lift); }
.p2m-cap { margin-bottom: 12px; font-family: var(--font-body); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; }
.p2m-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.p2m-photos figure { position: relative; margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--lt-surface); }
.p2m-photos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.p2m-photos figcaption { position: absolute; left: 8px; top: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(var(--ink-rgb), .74); color: var(--teal-50);
  font-family: var(--font-body); font-size: 10px; letter-spacing: .06em; font-weight: 600; }
.p2m-flow { position: relative; display: flex; justify-content: center; padding: 16px 0; }
.p2m-flow::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; translate: -50% 0; background: linear-gradient(var(--border-hover), var(--accent-vivid)); }
.p2m-flow span { position: relative; padding: 7px 15px; border-radius: 999px; background: var(--surface); border: 1px solid rgba(var(--accent-vivid-rgb), .55);
  box-shadow: 0 0 0 4px var(--surface); font-size: 12.5px; font-weight: 600; color: var(--accent); }
.p2m-model { position: relative; aspect-ratio: 16 / 7; border-radius: 16px; overflow: hidden; border: 1px solid var(--border);
  background: radial-gradient(110% 90% at 50% 30%, var(--lt-surface), var(--surface-alt)); }
.p2m-model model-viewer { width: 100%; height: 100%; --poster-color: transparent; background: transparent; }
.p2m-label { position: absolute; left: 14px; top: 14px; padding: 5px 12px; border-radius: 999px; background: var(--teal-600); color: var(--teal-950);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.p2m-interact { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; pointer-events: none;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-soft); font-size: 12.5px; font-weight: 600; color: var(--text); }
/* Step track - a stand-in for Jeremy's train-tracks graphic */
.tracks { position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: clamp(30px, 4.5vh, 44px) 0 0; padding-top: 30px; }
.tracks::before { content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 15px; height: 4px; border-radius: 4px; opacity: .6;
  background: repeating-linear-gradient(90deg, var(--accent-vivid) 0 16px, transparent 16px 24px); }
.tracks li { position: relative; padding: 0 6px; text-align: center; }
.tr-num { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; margin: -30px auto 14px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--accent-vivid); font-family: var(--font-body); font-weight: 600; color: var(--text); }
.tracks b { display: block; margin-bottom: 6px; font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--text); }
.tracks p { font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); }
.truth-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 14px; margin-top: clamp(30px, 4.5vh, 44px); }
.truth { padding: 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.truth b { display: block; margin-bottom: 8px; font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--text); }
.truth p { font-size: 13.8px; line-height: 1.55; color: var(--text-secondary); }
.truth-lead { background: var(--teal-950); border-color: var(--teal-950); }
.truth-lead b { font-size: 19px; color: var(--teal-50); }
.truth-lead p { color: rgba(var(--on-dark-rgb), .82); }
#modelling .macro-row { margin-top: 14px; }

/* Agentic-native */
.agentic-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items: stretch; }
.agent-explain { padding: clamp(22px, 3vw, 32px); border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-soft); }
.agent-explain h3 { margin-bottom: 10px; font-family: var(--font-body); font-size: clamp(20px, 1.9vw, 24px); font-weight: 400; color: var(--text);  line-height: 1.333;}
.agent-explain > p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.agent-steps { list-style: none; counter-reset: st; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 20px 0; }
.agent-steps li { counter-increment: st; padding: 14px; border-radius: 13px; background: var(--surface-alt); border: 1px solid var(--border); }
.agent-steps li::before { content: counter(st); display: grid; place-items: center; width: 24px; height: 24px; margin-bottom: 10px; border-radius: 50%;
  font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--teal-950); background: rgba(var(--accent-vivid-rgb), .35); }
.agent-steps b { display: block; margin-bottom: 5px; font-size: 14px; color: var(--text); }
.agent-steps span { display: block; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.agent-note { padding-top: 16px; border-top: 1px dashed var(--border-hover); font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.agent-note b { color: var(--text); }
.agent-urgency { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 3vw, 36px); border-radius: 20px;
  background: var(--teal-950); color: var(--teal-50); }
.agent-urgency::after { content: ''; position: absolute; right: -30%; bottom: -40%; width: 90%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--neon-rgb), .22), transparent); }
.au-kicker { margin-bottom: 12px; font-family: var(--font-body); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--coral-300); font-weight: 600; }
.agent-urgency b { margin-bottom: 14px; font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -0.02em; }
.agent-urgency p { position: relative; z-index: 1; font-size: 15px; line-height: 1.6; color: rgba(var(--on-dark-rgb), .82); }
.agent-urgency p.au-close { margin-top: 16px; font-weight: 700; color: var(--teal-300); }
.logo-rows { display: grid; gap: 14px; margin-top: clamp(28px, 4vh, 40px); }
.logo-row { display: grid; grid-template-columns: 210px 1fr; gap: 20px; align-items: center; padding: 16px 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.logo-row-label { font-family: var(--font-body); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; }
.logo-row ul { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.logo-row li { display: flex; align-items: center; gap: 11px; }
.logo-row svg { flex: none; width: 26px; height: 26px; fill: var(--text-secondary); }
.logo-row li span { display: flex; flex-direction: column; font-size: 14px; font-weight: 600; color: var(--text); }
.logo-row em { font-style: normal; font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: .04em; color: var(--text-tertiary); }
.logo-row svg.wide { width: 46px; }
.logo-row li.live svg { fill: var(--accent); }
.logo-row li.live em { color: var(--accent); }

/* Data & analytics: the dashboard open on an iMac */
.imac { max-width: 1180px; margin: 0 auto; }
.imac-screen { padding: clamp(10px, 1.3vw, 16px); border-radius: 22px 22px 0 0; background: var(--metal-800); border: 1px solid rgba(255,255,255,.08); border-bottom: 0;
  box-shadow: 0 60px 120px -50px rgba(0,0,0,.85); }
.imac-chin { height: clamp(36px, 5vw, 60px); border-radius: 0 0 22px 22px; background: linear-gradient(var(--metal-100), var(--metal-300)); }
.imac-stand { position: relative; width: 20%; height: clamp(54px, 8vw, 104px); margin: 0 auto; background: linear-gradient(90deg, var(--metal-300), var(--metal-100) 50%, var(--metal-300));
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); }
.imac-stand::after { content: ''; position: absolute; left: -18%; right: -18%; bottom: 0; height: 10px; border-radius: 4px; background: var(--metal-200); }
/* The Plattar app, open on Analytics - chrome as the real software: a company switcher over a
   floating sidebar card, a top bar with centred search, the page on an off-white canvas.
   A 16:10 screen that grows if its content needs it. */
.app { display: grid; grid-template-columns: 158px 1fr; grid-template-rows: auto 1fr; gap: 10px 14px; aspect-ratio: 16 / 10; padding: 10px 14px 12px 10px;
  border-radius: 4px; background: var(--surface-alt); font-size: 11px; }
.ai { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.app-co { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(4,51,43,.05); }
.app-co b { flex: 1; min-width: 0; font-size: 11.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-co .ai { width: 12px; height: 12px; color: var(--text-tertiary); }
.app-co-tile { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--coral-600); color: var(--lt-surface);
  font-size: 11px; font-weight: 700; }
.app-top { display: grid; grid-template-columns: 1fr minmax(0, 300px) 1fr; align-items: center; gap: 10px; }
.app-search { grid-column: 2; display: flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); font-size: 10.5px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; }
.app-search .ai { width: 12px; height: 12px; }
.app-top-r { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; }
.app-bell { position: relative; display: grid; place-items: center; width: 26px; height: 26px; color: var(--text-secondary); }
.app-bell .ai { width: 15px; height: 15px; }
.app-bell i { position: absolute; top: -1px; right: -4px; min-width: 15px; padding: 1px 4px; border-radius: 999px; background: var(--coral-600); color: var(--lt-surface);
  font-style: normal; font-size: 8.5px; font-weight: 700; line-height: 1.3; text-align: center; }
.app-admin { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--accent); color: var(--lt-surface);
  font-size: 10px; font-weight: 600; }
.app-admin .ai { width: 11px; height: 11px; }
.app-user { display: inline-flex; align-items: center; gap: 4px; color: var(--text-tertiary); }
.app-user .ai { width: 11px; height: 11px; }
.app-avatar { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--teal-100); color: var(--accent); font-size: 9.5px; font-weight: 700; }
.app-side { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(4,51,43,.05); }
.app-side-head { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 14px 8px; color: var(--text-tertiary); }
.app-logo { width: 66px; height: auto; }
.app-nav { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; font-size: 11.5px; font-weight: 500; color: var(--text-secondary); }
.app-nav .ai { color: var(--text-tertiary); }
.app-nav.on { background: var(--teal-50); color: var(--accent); font-weight: 600; }
.app-nav.on .ai { color: var(--accent); }
.app-rule { height: 1px; margin: 7px 6px; background: var(--border); }
.app-side-foot { display: grid; gap: 2px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); }
.app-main { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.app-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app-head b { display: block; font-size: 17px; font-weight: 600; color: var(--text); }
.app-scope { font-size: 10.5px; color: var(--text-tertiary); }
.app-head-actions { display: flex; align-items: center; gap: 8px; }
.app .dash-range button { padding: 4px 9px; font-size: 10px; }
.app-export { padding: 5px 11px; border-radius: 7px; background: var(--accent); color: var(--lt-surface); font-size: 10.5px; font-weight: 600; }
/* Six headline figures */
.dk-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.dk { position: relative; display: flex; flex-direction: column; padding: 9px 10px 8px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.dk-label { font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-val { margin-top: 3px; font-size: clamp(15px, 1.5vw, 21px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; color: var(--text); }
.dk-delta { position: absolute; right: 9px; top: 26px; font-size: 9.5px; font-weight: 600; color: var(--accent); }
.dk-spark { width: 100%; height: 15px; margin: 4px 0 3px; overflow: visible; }
.dk-spark path { fill: none; stroke: var(--series-1); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dk-sub { font-size: 9.5px; line-height: 1.3; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Chart cards on a 12-column grid */
.dg { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; flex: 1; min-height: 0; }
.dc { display: flex; flex-direction: column; min-width: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.dc-funnel { grid-column: span 7; } .dc-channels { grid-column: span 5; }
.dc-trend { grid-column: span 5; } .dc-devices { grid-column: span 3; } .dc-countries { grid-column: span 4; }
.dc-options { grid-column: span 4; } .dc-events { grid-column: span 4; } .dc-products { grid-column: span 4; }
.dc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.dc-head b { font-size: 11.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.dc-head span { font-size: 9.5px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-foot { margin-top: auto; padding-top: 7px; border-top: 1px solid var(--border); font-size: 10px; color: var(--text-secondary); }
.dc-foot b { color: var(--accent); }
/* Funnel */
.fn { list-style: none; display: grid; gap: 5px; margin-bottom: 8px; }
.fn li { display: grid; grid-template-columns: 112px 1fr 52px 38px; align-items: center; gap: 8px; }
.fn-name { font-size: 10.5px; color: var(--text-secondary); white-space: nowrap; }
.fn-bar { height: 12px; border-radius: 4px; background: var(--surface-alt); overflow: hidden; }
.fn-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--series-1), var(--teal-400)); }
.fn-val { font-size: 10.5px; font-weight: 600; color: var(--text); text-align: right; }
.fn-step { font-size: 9.5px; color: var(--text-tertiary); text-align: right; }
/* Horizontal bar lists (channels, countries) */
.hb { list-style: none; display: grid; gap: 6px; }
.hb li { display: grid; grid-template-columns: 86px 1fr 30px auto; align-items: center; gap: 7px; }
.dc-countries .hb li { grid-template-columns: 86px 1fr 30px; }
.hb-name { font-size: 10.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-bar { height: 8px; border-radius: 4px; background: var(--surface-alt); overflow: hidden; }
.hb-bar i { display: block; height: 100%; border-radius: 4px; background: var(--series-1); }
.dc-countries .hb-bar i { background: var(--series-3); }
.hb-val { font-size: 10.5px; font-weight: 600; color: var(--text); text-align: right; }
.hb-sub { min-width: 30px; font-size: 9.5px; color: var(--text-tertiary); text-align: right; }
/* Trend */
.dc-key { display: inline-flex; align-items: center; gap: 5px; }
.dc-key i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; }
.dc-key .k1 { background: var(--series-1); } .dc-key .k2 { background: var(--series-2); margin-left: 6px; }
.trend { display: block; width: 100%; height: 92px; flex: none; overflow: visible; }
.trend-area { fill: rgba(var(--accent-vivid-rgb), .12); }
.trend-u, .trend-s { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.trend-u { stroke: var(--series-1); } .trend-s { stroke: var(--series-2); }
.trend-x { display: flex; justify-content: space-between; margin-top: 4px; font-size: 9px; color: var(--text-tertiary); }
/* Devices */
.donut-wrap { display: flex; align-items: center; gap: 10px; flex: 1; }
.donut-chart { flex: none; width: 76px; height: 76px; transform: rotate(-90deg); }
.donut-key { list-style: none; display: grid; gap: 5px; font-size: 10.5px; color: var(--text-secondary); }
.donut-key li { display: flex; align-items: center; gap: 6px; }
.donut-key i { width: 8px; height: 8px; border-radius: 2px; }
.donut-key b { margin-left: 4px; font-weight: 600; color: var(--text); }
/* Materials chart reuse */
.dc-options .legend { margin-bottom: 6px; gap: 10px; }
.dc-options .legend span { font-size: 10px; }
.dc-options .bars { height: auto; flex: 1; min-height: 70px; gap: 8px; }
.dc-options .bar-col .x { margin-top: 5px; font-size: 9px; }
.dc-options .plot-table { display: none; }
/* Events */
.evl { list-style: none; display: grid; gap: 0; }
.evl li { display: grid; grid-template-columns: 1fr auto 36px; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 10.5px; color: var(--text-secondary); }
.evl li:last-child { border-bottom: 0; }
.evl b { font-weight: 600; color: var(--text); }
.evl em { font-style: normal; font-size: 9.5px; font-weight: 600; color: var(--accent); text-align: right; }
/* Products table */
.app-table { width: 100%; border-collapse: collapse; font-size: 10.5px; }
.app-table th, .app-table td { padding: 5px 3px; border-bottom: 1px solid var(--border); text-align: right; color: var(--text-secondary); font-weight: 400; }
.app-table tr:last-child th, .app-table tr:last-child td { border-bottom: 0; }
.app-table th:first-child { text-align: left; color: var(--text); font-weight: 600; }
.app-table thead th { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; }
.app-table th span { display: block; font-size: 9.5px; font-weight: 400; color: var(--text-tertiary); }

@media (max-width: 1080px) {
  .sh-split, .pdp, .stack-row, .stack-foot, .agentic-grid { grid-template-columns: 1fr; }
  .stack-row.flip .shot { order: 0; }
  .stack-row.flip { grid-template-columns: 1fr; }
  .stack-row.flip .stack-copy { justify-self: start; }
  .pdp-side { border-left: 0; border-top: 1px solid var(--border); }
  .trio { grid-template-columns: 1fr; }
  .p2m-photos, .tracks { grid-template-columns: repeat(2, 1fr); }
  .tracks { row-gap: 40px; }
  .tracks::before { display: none; }
  .truth-grid { grid-template-columns: 1fr 1fr; }
  .truth-lead { grid-column: 1 / -1; }
  .agent-steps { grid-template-columns: 1fr; }
  .logo-row { grid-template-columns: 1fr; }
  .logo-row ul { grid-template-columns: repeat(2, 1fr); }
  .p2m-model { aspect-ratio: 4 / 3; }
  .app { grid-template-columns: 1fr; aspect-ratio: auto; }
  .app-co, .app-side { display: none; }
  .dk-row { grid-template-columns: repeat(3, 1fr); }
  .dg { grid-template-columns: 1fr 1fr; }
  .dg > .dc { grid-column: auto; }
  .dc-funnel, .dc-trend { grid-column: 1 / -1 !important; }
}
@media (max-width: 640px) {
  .truth-grid { grid-template-columns: 1fr; }
  .dk-row { grid-template-columns: 1fr 1fr; }
  .dg { grid-template-columns: 1fr; }
  .app-head { flex-wrap: wrap; }
  .app-top { grid-template-columns: 1fr auto; }
  .app-search { grid-column: 1; }
  .app-top-r { grid-column: 2; }
  .app-bell, .app-user .ai { display: none; }
  .imac-stand { display: none; }
}

/* ============ Typography - the Plattar type sheet (25 Sep) ============
   Hanken Grotesk: Display 2XL 95/96, XL 72/72, L 60/60 (Bold); Heading H1 48/48, H2 32/40,
   H3 30/36 (Semi-Bold). Source Sans 3: H4 and H5 (Regular), Body Large 18/28, Base 16/24,
   Small 14/20 (Regular), Base Medium 14/20 (Semi-Bold). Sizes are the desktop values and
   scale down on small screens; line-heights keep the sheet's ratios. H5 is 24/32, as labelled. */
body { font-size: 16px; line-height: 1.5; }                                                        /* Body / Base */
.display-2xl { font-family: var(--font-display); font-size: clamp(48px, 6.6vw, 95px); line-height: 1.01; font-weight: 700; letter-spacing: -0.01em; }
.display-xl  { font-family: var(--font-display); font-size: clamp(40px, 5vw, 72px);   line-height: 1;    font-weight: 700; letter-spacing: -0.01em; }
.display-l, .h1 { font-family: var(--font-display); font-size: clamp(38px, 4.2vw, 60px); line-height: 1; font-weight: 700; letter-spacing: -0.01em; }
.h2 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1; font-weight: 600; letter-spacing: -0.01em; }       /* Heading / H1 */
.h3 { font-size: clamp(24px, 2.3vw, 32px); line-height: 1.25; font-weight: 600; letter-spacing: 0; }        /* Heading / H2 */
.heading-h3 { font-family: var(--font-display); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; font-weight: 600; }
.heading-h4 { font-family: var(--font-body); font-size: clamp(20px, 1.9vw, 24px); line-height: 1.333; font-weight: 400; }
.heading-h5 { font-family: var(--font-body); font-size: clamp(20px, 1.9vw, 24px); line-height: 1.333; font-weight: 400; }  /* 24/32 per the sheet */
.lead { font-size: clamp(17px, 1.3vw, 18px); line-height: 1.556; }                                            /* Body / Large */
.body-sm, .plot-note, .footer-meta { font-size: 14px; line-height: 1.43; }                                    /* Body / Small */
.point-list li, .card p, .faq-a p { font-size: 16px; line-height: 1.5; }                                      /* Body / Base */
.btn { font-family: var(--font-body); font-weight: 600; }
.nav-link { font-weight: 600; font-size: 16px; padding: 9px 14px; white-space: nowrap; }
.nav-link[aria-current="page"]::after { left: 14px; right: 14px; }
@media (max-width: 1100px) { .nav-link { font-size: 15px; padding: 8px 9px; } .nav-link[aria-current="page"]::after { left: 9px; right: 9px; } }
/* The hero over the store is Display XL, capped by height so it always clears the laptop */
.intro-copy .h1 { font-size: min(clamp(32px, 5vw, 72px), 7.6vh); line-height: 1; font-weight: 700; letter-spacing: -0.01em; }
/* Code keeps a system monospace - it is not brand type, and code needs fixed width */
.codeblock pre, pre, code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; }

/* ============ The configurator - Plattar configurator design, furniture (25 Sep) ============
   Off-white stage with a preset label, expand and a floating view toolbar; a white panel of
   square swatches, textures, pills and a size grid. No prices - availability sits in that slot. */
.cfg2 { display: grid; grid-template-columns: 1fr minmax(360px, 43%); gap: 20px; padding: clamp(14px, 1.6vw, 22px);
  min-height: clamp(540px, 50vw, 700px); background: radial-gradient(120% 90% at 38% 40%, var(--lt-bg), var(--lt-surface-alt)); }
.cfg2-stage { position: relative; min-height: 460px; container-type: inline-size; }
.cfg2-stage model-viewer { position: absolute; left: 0; right: 0; top: 48px; bottom: 84px; width: 100%; height: auto; --poster-color: transparent; background: transparent; }
.cfg2-stage model-viewer[hidden] { display: none; }
.cfg2-expand { position: absolute; right: 6px; top: 2px; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--lt-surface); color: var(--text-secondary); box-shadow: 0 6px 18px -6px rgba(4,51,43,.22), 0 0 0 1px rgba(4,51,43,.04); cursor: pointer; }
.cfg2-expand:hover, .cfg2-expand:focus-visible { color: var(--text); outline: none; }
.cfg2-toolbar { position: absolute; left: 50%; bottom: 6px; z-index: 3; translate: -50% 0; width: max-content; display: flex; align-items: center; gap: 4px; padding: 6px; white-space: nowrap;
  border-radius: 999px; background: var(--lt-surface); box-shadow: 0 14px 34px -14px rgba(4,51,43,.28), 0 0 0 1px rgba(4,51,43,.05); }
.cfg2-tool { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid transparent; background: transparent;
  font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1; color: var(--text); cursor: pointer; transition: background .2s, color .2s; }
/* flex: none is load-bearing - flex-shrink otherwise collapses the icons to a sliver */
.cfg2-tool svg, .cfg2-expand svg { flex: none; width: 17px; height: 17px; }
.cfg2-tool:hover { background: var(--lt-surface-alt); }
.cfg2-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cfg2-tool.on { background: var(--text); color: var(--lt-surface); }
/* Not yet available: full-contrast label plus a 'Soon' tag, rather than faded text that reads as broken */
.cfg2-tool.off { color: var(--text-secondary); cursor: default; }
.cfg2-soon { padding: 3px 7px; border-radius: 999px; background: var(--lt-surface-alt); font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.cfg2-tool.off:hover { background: transparent; }
.cfg2-tool.icon { width: 42px; padding: 0; justify-content: center; }
.cfg2-tool.icon[aria-pressed="true"] { background: var(--lt-surface-alt); color: var(--accent); }
.cfg2-tool.outline { border-color: var(--border-hover); }
.cfg2-sep { width: 1px; height: 26px; margin: 0 4px; background: var(--border); }
.cfg2-photos { position: absolute; left: 0; right: 0; top: 48px; bottom: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.cfg2-photos[hidden] { display: none; }
.cfg2-photo-main { max-width: 88%; max-height: calc(100% - 72px); object-fit: contain; mix-blend-mode: multiply; }
.cfg2-thumbs { display: flex; gap: 8px; }
.cfg2-thumbs button { width: 66px; height: 50px; padding: 0; overflow: hidden; border-radius: 8px; border: 2px solid transparent; background: var(--lt-surface); cursor: pointer; }
.cfg2-thumbs button.on { border-color: var(--text); }
.cfg2-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cfg2-dims { position: absolute; left: 50%; bottom: 72px; z-index: 2; translate: -50% 0; padding: 6px 14px; border-radius: 999px; background: var(--lt-surface);
  border: 1px solid var(--border); font-size: 14px; font-weight: 600; color: var(--text); }
.cfg2-dims[hidden] { display: none; }
.cfg2-loading { position: absolute; left: 50%; top: 50%; z-index: 2; translate: -50% -50%; display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px;
  border-radius: 999px; background: var(--lt-surface); box-shadow: var(--shadow-soft); font: 600 13px var(--font-body); color: var(--lt-text, var(--teal-950)); }
.cfg2-loading[hidden] { display: none; }
/* AR on a computer: a QR code that opens this exact sofa on a phone */
.cfg2-qr { position: absolute; right: 16px; bottom: 84px; z-index: 3; width: 236px; padding: 18px 18px 16px; border-radius: 16px; background: var(--lt-surface);
  border: 1px solid var(--lt-border); box-shadow: var(--shadow-lift); text-align: center; }
.cfg2-qr[hidden] { display: none; }
.cfg2-qr-title { margin: 0 0 12px; font: 600 15px var(--font-body); color: var(--teal-950); }
.cfg2-qr-code { display: grid; place-items: center; width: 168px; height: 168px; margin: 0 auto; }
.cfg2-qr-code img, .cfg2-qr-code canvas { display: block; width: 168px; height: 168px; }
.cfg2-qr-text { margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: var(--lt-text-secondary); }
.cfg2-qr-close { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--lt-text-secondary); cursor: pointer; }
.cfg2-qr-close:hover, .cfg2-qr-close:focus-visible { background: var(--lt-surface-alt); color: var(--teal-950); }
.cfg2-loading i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--lt-border); border-top-color: var(--accent-vivid); animation: cfg-spin .8s linear infinite; }
.cfg2-panel { display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 38px); border-radius: 18px; background: var(--lt-surface);
  box-shadow: 0 24px 50px -30px rgba(4,51,43,.30), 0 0 0 1px rgba(4,51,43,.05); }
/* Head: a big product title, the collection line and the running summary, with the cart top-right (Plattar configurator, Oct 2026) */
.cfg2-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: clamp(10px, 1.4vw, 18px); }
.cfg2-title { font-family: var(--font-display); font-size: clamp(26px, 2.3vw, 34px); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.cfg2-sub { margin-top: 6px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.4; color: var(--text-secondary); }
.cfg2-summary { margin-top: 4px; font-size: 14px; line-height: 1.43; color: var(--text-tertiary); }
.cfg2-cart { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--lt-border);
  background: var(--lt-surface); font: 600 15px var(--font-body); color: var(--text); cursor: pointer; box-shadow: 0 6px 16px -10px rgba(4,51,43,.25); transition: border-color .2s; }
.cfg2-cart:hover, .cfg2-cart:focus-visible { border-color: var(--text); outline: none; }
.cfg2-cart-n { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--accent-vivid); font-size: 12px; font-weight: 700; color: var(--teal-950); }
.cfg2-cart-n[hidden] { display: none; }
.cfg2-cart.bump { animation: cfg2-bump .45s ease; }
@keyframes cfg2-bump { 40% { transform: scale(1.08); } }
.cfg2-group { margin-top: clamp(16px, 1.9vw, 26px); }
.cfg2-label { margin-bottom: 12px; font-size: 17px; font-weight: 600; color: var(--text); }
.cfg2-label span { margin-left: 8px; font-size: 14px; font-weight: 400; color: var(--text-tertiary); }
.cfg2-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.cfg2-sw { width: 56px; height: 56px; padding: 0; border-radius: 10px; background: var(--c); border: 3px solid var(--lt-surface); box-shadow: 0 0 0 1px var(--border);
  cursor: pointer; transition: box-shadow .2s, transform .2s; }
.cfg2-sw:hover { transform: translateY(-1px); }
.cfg2-sw:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cfg2-sw.on { box-shadow: 0 0 0 2px var(--text); }
.tex-linen { background: repeating-linear-gradient(45deg, var(--sw-natural) 0 6px, var(--sw-bone) 6px 12px); }
.tex-boucle { background: radial-gradient(circle at 30% 30%, var(--lt-surface) 0 2px, transparent 2.6px) 0 0 / 8px 8px,
  radial-gradient(circle at 75% 70%, var(--lt-border-hover) 0 1.6px, transparent 2.2px) 0 0 / 8px 8px, var(--sw-bone); }
.tex-leather { background: linear-gradient(135deg, var(--sw-tan), var(--sw-walnut)); }
/* Equal-width options, as many across as fit (3 in a wide panel) */
.cfg2-pills { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.cfg2-pills[aria-label="Size"] { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cfg2-pills[aria-label="Size"] .cfg2-pill { padding: 6px 4px; font-size: 14px; }
.cfg2-pills.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cfg2-pills.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cfg2-pill { min-height: 42px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--lt-border); background: var(--lt-surface);
  font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--text); cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.cfg2-pill:hover { border-color: var(--text); }
.cfg2-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cfg2-pill.on { background: var(--text); border-color: var(--text); color: var(--lt-surface); }
.cfg2-pill[hidden] { display: none; }
.cfg2-rule { margin-top: 8px; font-size: 14px; line-height: 1.43; color: var(--accent); }
.cfg2-rule[hidden] { display: none; }
.cfg2-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 22px; border-top: 1px solid var(--lt-border); }
.cfg2-group:has(+ .cfg2-foot) { margin-bottom: 28px; }  /* keeps a gap above the foot when the panel is full */
.cfg2-avail b { display: block; font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.cfg2-avail span { font-size: 14px; color: var(--text-tertiary); }
.cfg2-stock { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--text); }
.cfg2-stock i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-vivid); }
/* Quantity, Add to cart, Buy now - the store's own controls, working in the demo (they fill the cart, nothing more) */
.cfg2-buyrow { display: grid; grid-template-columns: auto 1fr 1fr; gap: 10px; margin-top: 16px; }
.cfg2-qty { display: flex; align-items: center; height: 50px; border: 1px solid var(--lt-border); border-radius: 10px; }
.cfg2-qty button { display: grid; place-items: center; width: 40px; height: 100%; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; }
.cfg2-qty button:disabled { color: var(--lt-border-hover); cursor: default; }
.cfg2-qty output { min-width: 24px; text-align: center; font-size: 17px; font-weight: 600; color: var(--text); }
.cfg2-add, .cfg2-now { height: 50px; padding: 0 10px; border-radius: 10px; font: 600 16px var(--font-body); white-space: nowrap; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.cfg2-add { border: 1px solid var(--lt-border-hover); background: var(--lt-surface); color: var(--text); }
.cfg2-add:hover { border-color: var(--text); }
.cfg2-now { border: 1px solid var(--text); background: var(--text); color: var(--lt-surface); }
.cfg2-now:hover { background: var(--teal-900); }
.cfg2-qty button:focus-visible, .cfg2-add:focus-visible, .cfg2-now:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.cfg2:fullscreen { min-height: 100vh; border-radius: 0; }
@media (max-width: 1080px) {
  .cfg2 { grid-template-columns: 1fr; }
  .cfg2-stage { min-height: 440px; }
}
@container (max-width: 440px) {
  .cfg2-tool span, .cfg2-soon { display: none; }
  .cfg2-tool { width: 42px; padding: 0; justify-content: center; }
}
@media (max-width: 640px) {
  /* the size pills are four short numbers, so they stay four across */
}

/* Supporting points under the full-width configurator (home-furnishings) */
.hf-points { margin-top: clamp(32px, 5vh, 48px); }
.point-list-2 { grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 44px); margin-top: 0; }
@media (max-width: 760px) { .point-list-2 { grid-template-columns: 1fr; } }

/* Checkout options under the configurator: your own Shopify cart, or your own Stripe account */
.sell-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.sell-item { display: flex; align-items: flex-start; gap: 16px; padding: 20px 22px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.sell-logo { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(var(--accent-rgb), .12); }
.sell-logo svg { width: 24px; height: 24px; fill: var(--accent); }
.sell-item b { display: block; margin-bottom: 6px; font-size: 16.5px; font-weight: 600; color: var(--text); }
.sell-item p { font-size: 14.2px; line-height: 1.55; color: var(--text-secondary); }
@media (max-width: 1080px) { .sell-row { grid-template-columns: 1fr; } }

/* Hero statement (25 Sep copy): two sentences, one line each on desktop, then the ecosystem line */
.intro-copy .h1 { max-width: 1360px; font-size: min(clamp(30px, 3.75vw, 60px), 6.6vh); line-height: 1.08; }
.intro-copy .intro-lead { max-width: 760px; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.45; color: rgba(var(--on-dark-rgb), .94); text-shadow: 0 1px 14px rgba(0,0,0,.55); }
@media (max-width: 640px) {
  .offer-foot { grid-template-columns: 1fr; }
  .offer-foot .btn-lg { width: 100%; }
}
@media (max-width: 640px) { .offer-incl li { white-space: normal; } }

/* Hybrid 3D modelling: the heading's first line stays whole (Josh, 25 Sep) */
/* Hybrid 3D modelling: the three statements each hold one line on desktop, so the heading takes the
   full width and the two paragraphs sit side by side beneath it (Josh, 29 Sep) */
@media (min-width: 1081px) {
  #modelling .sh-split { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  #modelling .lead-stack { grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px); max-width: 1040px; }
}
@media (min-width: 1081px) { .nowrap-d { white-space: nowrap; } }
/* The flow label carries a full phrase now: centred, wraps cleanly on a phone */
.p2m-flow span { max-width: calc(100% - 32px); text-align: center; }
/* Closing band runs wider than the page container so each statement sits on one line on desktop */
.closing .container { max-width: 1440px; }
.closing .closing-strong { color: var(--text); }
.closing-demo + .closing-demo { margin-top: 10px; }

/* Crispness on arrival: will-change pins the screen as a GPU layer for the zoom, which can keep a
   raster from mid-zoom (and blurs the half-pixel-centred fact cards). Once arrived the layer is at
   scale 1 and static, so release it and let the donut render as ordinary sharp page content. */
.intro.is-live.arrived .intro-screen { will-change: auto; }
#data .plot-note { text-align: center; }

/* ============ Mobile pass (25 Sep) ============ */
/* Menu open: the overlay is light, so the nav goes back to its dark logo and icon even over the hero */
html.nav-locked .nav { --text: var(--teal-950); --nav-rgb: var(--bg-rgb); background: var(--bg); box-shadow: 0 1px 0 var(--border); }
html.nav-locked .nav .wordmark .logo-dark { display: block; }
html.nav-locked .nav .wordmark .logo-light { display: none; }
@media (max-width: 1080px) {
  /* Mid-zoom the nav turns light but sits over pale blurred photo: give it a dark scrim so it reads */
  html.nav-on-dark .nav { background: rgba(var(--scrim-rgb), .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  /* A shorter pinned zoom: the same journey in fewer thumb swipes */
  .intro.is-live { height: 280vh; }
  /* The ring's legend reads as a compact list, not ten big cards */
  .donut-facts-home .donut-facts { gap: 8px; margin-top: 0; margin-bottom: 36px; }
  .donut-facts-home .df { padding: 12px 14px 13px; }
  .donut-facts-home .df b { font-size: 15px; }
  .donut-facts-home .df p { font-size: 14px; margin-top: 3px; }
  /* Tap targets on touch screens: 44px minimum for the logo, nav button and footer links */
  .nav .wordmark { padding-block: 5px; }
  .nav .btn { min-height: 44px; padding-inline: 16px; }
  .footer ul { gap: 0; }
  .footer ul a, .footer-meta a { display: inline-block; padding-block: 11px; }
}
@media (max-width: 640px) {
  /* Labels on photos and logos: nothing under 11.5px */
  .p2m-photos figcaption, .p2m-cap, .p2m-label, .logo-row-label, .logo-row li em, .au-kicker { font-size: 11.5px; }
  .macro span { font-size: 12px; padding: 8px 10px; }
  .p2m-flow span { font-size: 13px; }
}
/* Keep compound words whole when a heading wraps */
.nowrap { white-space: nowrap; }
/* Menu open wins over the mid-zoom scrim (same specificity, so it must come after it) */
html.nav-locked .nav { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ============ Agentic-native, rewritten (29 Sep) ============ */
.agentic-head { max-width: 920px; }
.agentic-statement { margin: 20px 0 26px; font-family: var(--font-display); font-size: clamp(20px, 2vw, 26px); line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.agentic-head .lead + .lead { margin-top: 14px; }
.agentic-claim { margin-top: 24px; padding-left: 16px; border-left: 3px solid var(--accent-vivid); font-family: var(--font-display); font-size: clamp(19px, 1.8vw, 23px); line-height: 1.3; font-weight: 600; color: var(--accent); }
.agent-explain > p { font-size: 16px; }
.agent-steps-2 { grid-template-columns: 1fr 1fr; gap: 14px; }
.agent-steps-2 li { padding: 18px; }
.agent-steps-2 b { font-size: 16px; margin-bottom: 8px; }
.agent-steps-2 span { font-size: 14.5px; line-height: 1.55; }
/* The green box: same words, bigger */
.agent-urgency-lg .au-kicker { font-size: 13px; }
.agent-urgency-lg b { font-size: clamp(30px, 3vw, 40px); margin-bottom: 18px; }
.agent-urgency-lg p { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; }
.agent-urgency-lg p.au-close { margin-top: 20px; font-size: clamp(18px, 1.5vw, 21px); }
@media (max-width: 1080px) { .agent-steps-2 { grid-template-columns: 1fr; } }
/* Without the zoom (reduced motion, ?static=1) the offer is not scaled to fit, so let its footer wrap */
.intro:not(.is-live) .offer-foot { grid-template-columns: minmax(0, 1fr) auto; }
.intro:not(.is-live) .offer-incl li { white-space: normal; }
@media (max-width: 1280px) { .intro:not(.is-live) .offer-foot { grid-template-columns: 1fr; } }
/* A package column without a sub-label keeps its list level with its neighbours */
.incl-col > h3 + .incl-list { margin-top: 30px; }

/* ============ Industry landing pages (Oct 2026 brief) ============
   Seven frames, rendered by tools/industries/build.py: hero, text + image, configurator,
   logos + stats, agentic, text + image, summary + CTA. */
/* 1 - hero: full-bleed bespoke media under a shade, copy bottom-left */
.ind-hero { position: relative; min-height: min(92vh, 860px); display: flex; align-items: flex-end; overflow: hidden; background: var(--teal-950); color: var(--teal-50); }
.ind-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ind-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--scrim-rgb), .55) 0%, rgba(var(--scrim-rgb), .1) 30%, rgba(var(--scrim-rgb), .25) 55%, rgba(var(--scrim-rgb), .82) 100%); }
.ind-hero-copy { position: relative; z-index: 1; width: 100%; padding-top: 140px; padding-bottom: clamp(48px, 9vh, 96px); }
.ind-hero-copy .panel-tag { color: var(--teal-200); }
.ind-hero-copy .h1 { max-width: 19ch; margin: 10px 0 18px; color: var(--teal-50); text-wrap: balance; }
.ind-hero-copy .lead { max-width: 640px; color: rgba(var(--on-dark-rgb), .9); text-shadow: 0 1px 14px rgba(0,0,0,.4); }
.ind-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 28px; }
.ind-hero-link { font-weight: 600; color: var(--teal-100); text-decoration: underline; text-underline-offset: 4px; }
.ind-hero-link:hover { color: var(--teal-50); }
/* nav sits on the hero photo */
.ind-page .nav:not(.scrolled) { --text: var(--teal-50); --text-secondary: rgba(var(--on-dark-rgb), .82); }
.ind-page .nav:not(.scrolled) .wordmark .logo-dark { display: none; }
.ind-page .nav:not(.scrolled) .wordmark .logo-light { display: block; }
html.nav-locked .ind-page .nav .wordmark .logo-dark, html.nav-locked body.ind-page .nav .wordmark .logo-dark { display: block; }
html.nav-locked body.ind-page .nav .wordmark .logo-light { display: none; }
html.nav-locked body.ind-page .nav { --text: var(--teal-950); }

/* 2 and 6 - text + media */
.ind-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.ind-split.flip { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.ind-split-copy .h2 { margin: 10px 0 18px; }
.ind-para { margin-top: 14px; font-size: 17px; line-height: 1.6; color: var(--text-secondary); }
.ind-media { margin: 0; border-radius: 22px; overflow: hidden; background: var(--surface-alt); box-shadow: var(--shadow-lift); }
.ind-media > img, .ind-media > video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.ind-media:has(> .ind-phone), .ind-media:has(> .ind-mockup) { display: grid; place-items: center; padding: clamp(24px, 4vw, 48px); background: radial-gradient(110% 90% at 50% 30%, var(--lt-surface), var(--surface-alt)); }
.ind-watch { position: relative; }
.ind-watch-link { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; padding: 16px; border-radius: inherit; }
.ind-watch-badge { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgba(var(--scrim-rgb), .62); color: var(--teal-50);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 600 14px/1 var(--font-body); transition: background .2s, transform .2s; }
.ind-watch-link:hover .ind-watch-badge, .ind-watch-link:focus-visible .ind-watch-badge { background: var(--btn-bg); color: var(--btn-fg); transform: translateY(-1px); }
.ind-watch-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ind-mockup { width: min(300px, 70%); }
.ind-mockup img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(4,51,43,.28)); }
.ind-phone { width: min(300px, 70%); aspect-ratio: 9 / 19.5; padding: 9px; border-radius: 42px; background: var(--metal-800); box-shadow: 0 30px 60px -24px rgba(4,51,43,.45), inset 0 0 0 1px rgba(255,255,255,.08); }
.ind-phone video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 34px; background: var(--teal-950); }
.ind-qs { display: grid; gap: 14px; margin-top: 24px; }
.ind-qs div { padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.ind-qs dt { font-weight: 600; font-size: 17px; color: var(--text); }
.ind-qs dd { margin: 4px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--text-secondary); }
.ind-quote { margin: 26px 0 0; padding: 22px 24px; border-radius: 16px; background: var(--surface-alt); border-left: 3px solid var(--accent-vivid); }
.ind-quote p { font-size: 17px; line-height: 1.6; color: var(--text); }
.ind-quote cite { display: block; margin-top: 12px; font-style: normal; font-size: 14px; color: var(--text-secondary); }
.ind-quote cite b { display: block; color: var(--text); font-weight: 600; }
.ind-quote-sm p { font-size: 15px; }

/* 3 - configurator */
.ind-showcase { margin: 0; }
.ind-showcase-img img, .ind-showcase-video video { display: block; width: 100%; height: auto; border-radius: 20px; box-shadow: var(--shadow-lift); }
.ind-showcase-video video { aspect-ratio: 16 / 9; object-fit: cover; background: var(--teal-950); }
.ind-browser img { display: block; width: 100%; height: auto; }
.ind-caption { margin: 14px 0 0; font-size: 14px; color: var(--text-tertiary); text-align: center; }
.ind-caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: clamp(36px, 5vh, 56px); }
.ind-cap { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); }
.ind-cap-media { aspect-ratio: 4 / 3; background: var(--surface-alt); overflow: hidden; }
.ind-cap-media > img, .ind-cap-media > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ind-cap-media .ind-phone { width: 42%; margin: 14px auto; aspect-ratio: 9 / 19.5; padding: 5px; border-radius: 22px; }
.ind-cap-media .ind-phone video { border-radius: 18px; }
.ind-cap-body { padding: 20px 20px 22px; }
.ind-cap h3 { font-family: var(--font-body); font-size: 18px; font-weight: 600; color: var(--text); }
.ind-cap p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.ind-cap:not(.has-media) { justify-content: flex-end; min-height: 200px; background: linear-gradient(160deg, var(--surface), var(--tile-bg)); }
.ind-cap:not(.has-media) .ind-cap-body::before { content: ''; display: block; width: 28px; height: 4px; margin-bottom: 14px; border-radius: 2px; background: var(--accent-vivid); }

/* 3 - live client configurator (Plattar's hosted configurator, loaded when the page opens; site.js "Live configurators")
   The configurator is a side panel at 1024px and up, stacked below that. site.js renders it at a minimum of
   1024px and scales it down on tablets, so tablets get the side panel too; phones keep the stacked layout.
   A poster of the same configurator sits on top until the 3D model has had time to load, then crossfades away.
   Heights here are the no-JS fallback - site.js sets the exact box height. */
.ind-cfg { position: relative; height: 660px; overflow: hidden; border-radius: 22px; background: var(--lt-surface); border: 1px solid var(--border); box-shadow: var(--shadow-lift); }
.ind-cfg-stage { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; transform-origin: 0 0; }
.ind-cfg-stage iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--lt-surface); }
.ind-cfg-poster { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: opacity .7s ease; }
.ind-cfg-poster-stacked, .ind-cfg[data-layout="stacked"] .ind-cfg-poster-side { display: none; }
.ind-cfg[data-layout="stacked"] .ind-cfg-poster-stacked { display: block; }
.ind-cfg.is-loading .ind-cfg-poster { cursor: pointer; }
.ind-cfg.is-live .ind-cfg-poster { opacity: 0; pointer-events: none; }
.ind-cfg-loading { position: absolute; left: 50%; bottom: 24px; z-index: 3; translate: -50% 0; display: none; align-items: center; gap: 10px; margin: 0; padding: 10px 16px;
  border-radius: 999px; background: var(--lt-surface); box-shadow: var(--shadow-soft); font-weight: 600; font-size: 14px; color: var(--text); white-space: nowrap; cursor: pointer; }
.ind-cfg.is-loading .ind-cfg-loading { display: flex; }
.ind-cfg-loading i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent-vivid); animation: cfg-spin .8s linear infinite; }
@keyframes cfg-spin { to { rotate: 360deg; } }
/* Our own full screen, so covers travel with the configurator (CSS fallback where the Fullscreen API is missing, e.g. iPhone) */
.ind-cfg.is-full { position: fixed; inset: 0; z-index: 3000; width: 100vw; height: 100vh !important; height: 100dvh !important; border: 0; border-radius: 0; box-shadow: none; }
html.cfg-full-lock, html.cfg-full-lock body { overflow: hidden; }
.ind-caption .ind-cfg-open { margin-left: 6px; font-weight: 600; color: var(--accent); white-space: nowrap; }

/* "See it on every device" under the configurator: one image, the client's configurator across devices */
.ind-gallery { margin-top: clamp(40px, 6vh, 64px); }
.ind-gallery figure { margin: 0; overflow: hidden; border-radius: 18px; background: var(--lt-surface); border: 1px solid var(--border); box-shadow: var(--shadow-lift); }
.ind-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* Covers for a scene that still carries a client's branding (data-cfg-mask). Positions are in the configurator's
   own pixels, measured on Plattar's layout (Oct 2026): side panel - logo at 49,49 (118 x 42), full-screen button
   right edge at W-392, title at W-343 / 48, total at H-121, buttons at H-88; stacked - logo at 16,16, full-screen
   button at W-52 / 16, title, total and buttons in the last 124px. check.cjs --live re-measures them. */
.cfg-mask { position: absolute; z-index: 2; }
.cfg-mask-logo { display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 16px; background: var(--lt-surface); box-shadow: var(--shadow-soft);
  font: 600 13px/1.2 var(--font-body); letter-spacing: .02em; color: var(--teal-950); white-space: nowrap; }
.cfg-mask-logo i { flex: none; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-vivid); box-shadow: 0 0 0 4px rgba(var(--accent-vivid-rgb), .2); }
.cfg-mask-fs { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; background: none; cursor: pointer; }
.cfg-mask-fs span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--lt-surface); color: var(--teal-950); box-shadow: var(--shadow-soft); }
.cfg-mask-fs:hover span, .cfg-mask-fs:focus-visible span { color: var(--accent); }
.cfg-mask-fs:focus-visible { outline: none; }
.cfg-mask-fs:focus-visible span { outline: 2px solid var(--accent); outline-offset: 2px; }
.cfg-mask-title { display: flex; align-items: center; padding-left: 16px; background: var(--lt-surface); font: 400 26px/1.2 var(--font-body); letter-spacing: -.01em; color: var(--teal-950); }
.cfg-mask-foot { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 0 8px 12px 16px; background: var(--lt-surface); }
.cfg-mask-foot .btn { justify-content: center; width: 100%; }
.cfg-mask-foot-title { display: none; font: 600 15px/1.3 var(--font-body); color: var(--teal-950); }
.ind-cfg[data-layout="side"] .cfg-mask-logo { left: 41px; top: 41px; width: 134px; height: 58px; }
.ind-cfg[data-layout="side"] .cfg-mask-fs { right: 384px; top: 41px; }
.ind-cfg[data-layout="side"] .cfg-mask-title { right: 24px; top: 40px; width: 335px; height: 48px; }
.ind-cfg[data-layout="side"] .cfg-mask-foot { right: 24px; bottom: 36px; width: 335px; height: 100px; }
.ind-cfg[data-layout="stacked"] .cfg-mask-logo { left: 8px; top: 8px; width: 134px; height: 58px; }
.ind-cfg[data-layout="stacked"] .cfg-mask-fs { right: 8px; top: 8px; }
.ind-cfg[data-layout="stacked"] .cfg-mask-title { display: none; }
.ind-cfg[data-layout="stacked"] .cfg-mask-foot { left: 0; right: 0; bottom: 0; height: 136px; padding: 16px; border-top: 1px solid var(--border); }
.ind-cfg[data-layout="stacked"] .cfg-mask-foot-title { display: block; }
@media (max-width: 640px) { .ind-cfg { height: 680px; } }

/* 4 - logos + stats */
.ind-proof-head { max-width: 860px; }
.ind-logos { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: clamp(28px, 4vh, 40px) 0 0; padding: 0; }
.ind-logos li { display: grid; place-items: center; height: 92px; padding: 16px 20px; border-radius: 14px; background: var(--lt-surface); border: 1px solid var(--border); }
.ind-logos img { max-width: 100%; max-height: 52px; width: auto; height: auto; object-fit: contain; }
.ind-logos li.is-tall { padding-block: 8px; }
.ind-logos li.is-tall img { max-height: 76px; }  /* a portrait logo (Seventy Squares) needs the height to stay legible */
.ind-wordmark span { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.ind-stats { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0 0; padding: 0; }
.ind-stats li { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; min-height: 232px; padding: 24px 24px 22px; border-radius: 18px;
  background: radial-gradient(120% 90% at 100% 0%, rgba(var(--accent-vivid-rgb), .16), transparent 55%), var(--teal-950); color: var(--teal-50);
  box-shadow: inset 0 0 0 1px rgba(var(--on-dark-rgb), .07); }
.ind-stat-label { font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--on-dark-rgb), .62); }
.ind-stats b { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; padding-bottom: 16px; border-bottom: 1px solid rgba(var(--on-dark-rgb), .14);
  font-family: var(--font-display); font-size: clamp(44px, 4.4vw, 66px); line-height: 1; font-weight: 700; letter-spacing: -0.03em; color: var(--teal-300); white-space: nowrap; }
.ind-stats b small { font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--teal-200); }
.ind-stats li > span { margin-top: 14px; font-size: 15.5px; line-height: 1.45; color: rgba(var(--on-dark-rgb), .9); }
.ind-stats em { margin-top: auto; padding-top: 12px; font-style: normal; font-size: 12.5px; letter-spacing: .04em; color: var(--teal-300); }  /* 'Source: BROSA', set as written, at the foot */

/* 5 - agentic */
.ind-agent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ind-agent-card { padding: clamp(22px, 2.6vw, 32px); border-radius: 20px; background: var(--surface); border: 1px solid var(--border); }
.ind-agent-n { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 16px; border-radius: 50%; background: rgba(var(--accent-vivid-rgb), .18); color: var(--accent); font-weight: 700; font-size: 14px; }
.ind-agent-card h3 { font-family: var(--font-display); font-size: clamp(21px, 1.9vw, 25px); font-weight: 600; line-height: 1.25; color: var(--text); }
.ind-agent-card p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.ind-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; }
.ind-chips li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-hover); font-size: 13.5px; font-weight: 600; color: var(--text); }
.ind-agent-note { max-width: 760px; margin: 22px 0 0; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }

/* 7 - summary */
.ind-built { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 980px; margin: 18px auto clamp(36px, 5vh, 56px); padding: 0; }
.ind-built li { padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); font-size: 14px; color: var(--teal-50); }

@media (max-width: 1080px) {
  .ind-split, .ind-split.flip { grid-template-columns: 1fr; }
  .ind-split.flip .ind-media { order: 2; }
  .ind-stats { grid-template-columns: 1fr 1fr; }
  .ind-agent-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ind-hero { min-height: 88vh; }
  /* Phones put the copy over most of the image: a deeper shade keeps it readable on bright photos */
  .ind-hero-shade { background: linear-gradient(180deg, rgba(var(--scrim-rgb), .6) 0%, rgba(var(--scrim-rgb), .35) 18%, rgba(var(--scrim-rgb), .72) 42%, rgba(var(--scrim-rgb), .9) 100%); }
  .ind-stats li { min-height: 0; padding: 20px 18px 18px; }
  .ind-stat-label { font-size: 11px; letter-spacing: .07em; white-space: nowrap; }
  .ind-stats b { font-size: clamp(30px, 9vw, 40px); gap: 6px; margin-top: 12px; padding-bottom: 12px; }
  .ind-stats b small { font-size: 12.5px; }
  .ind-stats li > span { font-size: 14.5px; }
  .ind-logos { grid-template-columns: repeat(2, 1fr); }
}

/* ============ About: the group (Oct 2026) ============ */
.about-group { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.about-group-copy .h2 { margin-bottom: 18px; }
.group-map { position: relative; margin: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: clamp(150px, 14vw, 190px) 20px; padding: 8px 0; }
.group-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.group-lines path { fill: none; stroke: var(--accent-vivid); stroke-dasharray: 1.4 1.4; vector-effect: non-scaling-stroke; stroke-width: 2; opacity: .55; }
.group-hub { position: absolute; left: 50%; top: 50%; z-index: 2; translate: -50% -50%; display: grid; place-items: center; align-content: center; width: clamp(120px, 13vw, 160px); aspect-ratio: 1; border-radius: 50%;
  background: var(--teal-950); color: var(--teal-50); text-align: center; box-shadow: 0 0 0 10px rgba(var(--accent-vivid-rgb), .14), 0 24px 50px -20px rgba(4,51,43,.5); }
.group-hub span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-200); }
.group-hub b { font-family: var(--font-display); font-size: clamp(20px, 2vw, 26px); font-weight: 700; line-height: 1.1; }
.group-co { position: relative; z-index: 1; padding: 22px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-soft); }
.group-co b { display: block; font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.group-co img { display: block; height: 32px; width: auto; }
.group-co p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--text-secondary); }
.gc-plattar { border-color: rgba(var(--accent-vivid-rgb), .6); box-shadow: 0 0 0 4px rgba(var(--accent-vivid-rgb), .12), var(--shadow-soft); }
@media (max-width: 1080px) { .about-group { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .group-map { grid-template-columns: 1fr; gap: 12px; padding-top: 0; }
  .group-lines { display: none; }
  .group-hub { position: static; translate: none; width: 100%; aspect-ratio: auto; padding: 16px; border-radius: 16px; grid-auto-flow: column; gap: 6px; }
}
/* About: history with the Times Square photo */
.about-history { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.about-history-copy .h2 { margin: 10px 0 18px; }
.about-photo { margin: 0; }
.about-photo img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: var(--shadow-lift); }
.about-photo figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--text-tertiary); }
@media (max-width: 1080px) { .about-history { grid-template-columns: 1fr; } }
.group-hub img { display: block; width: 74%; height: auto; margin: 4px 0 2px; }
.group-co img { max-width: 70%; }
@media (max-width: 640px) { .group-hub img { width: 96px; margin: 0; } }
/* Blippar Studios' logo is white by design, so its card is dark (as the group hub is) */
.gc-studios { background: var(--teal-950); border-color: var(--teal-950); }
.gc-studios img { height: 46px; max-width: 75%; }
.gc-studios p { color: rgba(var(--on-dark-rgb), .82); }

/* ============ Nav: Industries dropdown (Oct 2026) ============ */
.nav-drop { position: relative; }
.nav-drop-btn { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; font-family: inherit; line-height: inherit; cursor: pointer; }
.nav-drop-chev { transition: transform .2s; }
.nav-drop.open .nav-drop-chev { transform: rotate(180deg); }
.nav-drop-menu { position: absolute; top: calc(100% + 12px); left: 50%; z-index: 120; width: 580px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 10px;
  border-radius: 16px; background: var(--lt-surface); border: 1px solid var(--lt-border); box-shadow: 0 26px 52px -18px rgba(4,51,43,.32);
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .18s, transform .18s, visibility .18s; }
.nav-drop-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }   /* hover bridge to the menu */
.nav-drop.open .nav-drop-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (hover: hover) { .nav-drop:hover .nav-drop-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .nav-drop:hover .nav-drop-chev { transform: rotate(180deg); } }
.nav-drop-menu a { display: block; padding: 12px 14px; border-radius: 10px; text-decoration: none; transition: background .15s; }
.nav-drop-menu a:hover, .nav-drop-menu a:focus-visible { background: var(--lt-surface-alt); outline: none; }
.nav-drop-menu a[aria-current="page"] { background: var(--teal-50); }
.nav-drop-menu b { display: block; font-size: 15px; font-weight: 600; color: var(--teal-950); }
.nav-drop-menu span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--lt-text-secondary); }

/* ============ Case studies (Oct 2026) - built by tools/industries/case_studies.py ============ */
.cs-feature { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 60px); align-items: center; padding: clamp(22px, 3vw, 40px);
  border-radius: 26px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lift); }
.cs-feature-media { display: grid; place-items: center; min-height: 100%; padding: clamp(18px, 3vw, 36px); border-radius: 20px; background: radial-gradient(110% 90% at 50% 30%, var(--lt-surface), var(--surface-alt)); }
.cs-feature-logo { height: 26px; width: auto; }
.cs-feature-body .h2 { margin: 14px 0 6px; }
.cs-stat { display: flex; align-items: baseline; gap: 14px; margin-top: 22px; padding: 18px 20px; border-radius: 16px; background: var(--teal-950); color: var(--teal-50); }
.cs-stat b { font-family: var(--font-display); font-size: clamp(30px, 3vw, 42px); line-height: 1; font-weight: 700; color: var(--teal-300); white-space: nowrap; }
.cs-stat span { font-size: 15.5px; line-height: 1.45; color: rgba(var(--on-dark-rgb), .86); }
.cs-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0; }
.cs-client { font-weight: 700; font-size: 15px; color: var(--text); }
.cs-ind { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--teal-50); color: var(--accent); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.cs-ind:hover { background: var(--teal-100); }
.cs-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.cs-chip { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--border-hover); background: var(--surface); font: 600 14px var(--font-body); color: var(--text); cursor: pointer; }
.cs-chip:hover { border-color: var(--accent); }
.cs-chip.on { background: var(--teal-950); border-color: var(--teal-950); color: var(--teal-50); }
.cs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.cs-grid[hidden], .cs-card[hidden], .cs-more-title[hidden] { display: none; }
.cs-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); }
.cs-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-alt); }
.cs-media > img, .cs-media > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-media-phone { position: relative; background: radial-gradient(110% 90% at 50% 30%, var(--lt-surface), var(--surface-alt)); }
/* pinned top and bottom so the frame takes the card's height and its width follows from the phone's proportions */
.cs-media-phone .ind-phone { position: absolute; top: 7%; bottom: 7%; left: 50%; translate: -50% 0; width: auto; height: auto; padding: 6px; border-radius: 26px; }
.cs-media-phone .ind-phone video { border-radius: 21px; }
.cs-media-phone .cs-tablet { position: absolute; top: 9%; bottom: 9%; left: 50%; translate: -50% 0; width: auto; height: auto; padding: 7px; border-radius: 16px; }
.cs-media-phone .cs-tablet video { border-radius: 10px; }
.cs-body { padding: 22px 24px 26px; }
.cs-card h3 { margin-top: 12px; font-family: var(--font-display); font-size: clamp(20px, 1.7vw, 24px); font-weight: 600; line-height: 1.25; color: var(--text); }
.cs-story { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--text-secondary); }
.cs-card .ind-quote { margin-top: 18px; }
.cs-more-title { margin: clamp(40px, 6vh, 64px) 0 16px; font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--text); }
.cs-grid-sm { grid-template-columns: repeat(4, 1fr); }
.cs-grid-sm .cs-media { aspect-ratio: 4 / 3; }
.cs-grid-sm .cs-card h3 { font-size: 18px; }
.cs-grid-sm .cs-story { font-size: 14.5px; }
.cs-grid-sm .cs-card-quote { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; }
.cs-card-main { display: flex; flex-direction: column; min-width: 0; }
.cs-card-side { display: flex; padding: 18px 18px 18px 0; min-width: 0; }
.cs-card-side .ind-quote { margin: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 640px) {
  .cs-grid-sm .cs-card-quote { grid-column: auto; grid-template-columns: 1fr; }
  .cs-card-side { padding: 0 22px 22px; }
}
.cs-logo-tile { display: grid; place-items: center; width: 100%; height: 100%; padding: 28px; background: var(--lt-surface); }
.cs-logo-tile img { max-width: 70%; max-height: 60%; object-fit: contain; }
.cs-wordmark-tile span { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.cs-empty { margin-top: 20px; color: var(--text-secondary); }
@media (max-width: 1080px) { .cs-feature { grid-template-columns: 1fr; } .cs-grid-sm { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cs-grid, .cs-grid-sm { grid-template-columns: 1fr; } .cs-stat { flex-direction: column; gap: 6px; } }
/* Index cards that open a story: the title link stretches over the whole card, the industry tag stays clickable above it */
.cs-card-link { position: relative; transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .3s; }
.cs-card-link:hover { transform: translateY(-4px); border-color: var(--border-hover); box-shadow: var(--shadow-lift); }
.cs-card-link:focus-within { border-color: var(--accent); }
.cs-card-link h3 a { color: inherit; text-decoration: none; }
.cs-card-link h3 a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.cs-card-link h3 a:focus-visible { outline: none; }
.cs-card-link .cs-ind { position: relative; z-index: 1; }
.cs-card-link .cs-body { display: flex; flex-direction: column; flex: 1; }
.cs-card-stat { margin-top: 14px; font-size: 14.5px; line-height: 1.45; color: var(--text-secondary); }
.cs-card-stat b { font-family: var(--font-display); font-size: 20px; color: var(--accent); }
.cs-read { margin-top: auto; padding-top: 16px; font-weight: 600; font-size: 15px; color: var(--accent); }
.cs-read::after { content: ' \2192'; }
.cs-card-link:hover .cs-read { text-decoration: underline; text-underline-offset: 4px; }
.cs-feature-cta { margin-top: 22px; }
.cs-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cs-grid-3 .cs-media { aspect-ratio: 4 / 3; }

/* ============ Case study pages (Oct 2026) - case-studies/<slug>.html ============ */
.cs-hero { padding: clamp(110px, 15vh, 150px) 0 clamp(36px, 5vh, 56px); }
.cs-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.cs-hero-client { margin: 18px 0 0; }
.cs-hero-copy .h1 { margin: 10px 0 18px; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.04; text-wrap: balance; }
.cs-hero-media { margin: 0; border-radius: 22px; overflow: hidden; background: var(--surface-alt); box-shadow: var(--shadow-lift); }
.cs-hero-media > img, .cs-hero-media > video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
/* Device loops stand on a soft studio stage instead of filling the box */
.cs-stage { display: grid; place-items: center; padding: clamp(22px, 3.5vw, 44px); background: radial-gradient(110% 90% at 50% 30%, var(--lt-surface), var(--surface-alt)); box-shadow: none; border: 1px solid var(--border); }
.cs-hero-media.cs-stage { min-height: min(62vh, 560px); }
.cs-stage .ind-phone { width: auto; height: min(52vh, 480px); }
.cs-tablet { width: min(360px, 82%); aspect-ratio: 3 / 4; padding: 14px; border-radius: 28px; background: var(--metal-800); box-shadow: 0 30px 60px -24px rgba(4,51,43,.45), inset 0 0 0 1px rgba(255,255,255,.08); }
.cs-tablet video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; background: var(--teal-950); }
.cs-stage .cs-tablet { width: auto; height: min(52vh, 480px); }
.cs-glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 2fr); gap: 0; margin: clamp(32px, 5vh, 48px) 0 0; border-top: 1px solid var(--border); }
.cs-glance > div { padding: 18px 20px 4px 0; }
.cs-glance dt { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); }
.cs-glance dd { margin: 6px 0 0; font-size: 16px; line-height: 1.45; color: var(--text); }
.cs-glance dd a { color: var(--accent); font-weight: 600; text-decoration: none; }
.cs-glance dd a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cs-glance .ind-chips { margin: 2px 0 0; }
.cs-glance .ind-chips li { font-size: 13px; padding: 5px 11px; }
/* Results: the dark stat tiles from the industry pages, one row */
.cs-results-band { padding: 0 0 clamp(8px, 2vh, 16px); }
.cs-stats { margin: 0; grid-template-columns: repeat(auto-fit, minmax(220px, 340px)); }
.cs-stats li { aspect-ratio: auto; min-height: 168px; }
/* The story */
.cs-article { max-width: 760px; margin: 0 auto; padding: clamp(36px, 6vh, 64px) clamp(20px, 4vw, 48px) clamp(56px, 8vh, 96px); }
.cs-sec .panel-tag { margin: 0; font-size: 13px; }
.cs-sec h2 { margin-top: 8px !important; }
.cs-sec + .cs-sec, .cs-gallery + .cs-sec { margin-top: 2.6em; }
.cs-sec > * + * { margin-top: 1.1em; }
.cs-sec h2 + * { margin-top: .6em; }
.cs-gallery { display: grid; gap: 16px; margin: 2.4em calc(-1 * clamp(0px, 8vw, 140px)) 0; }
.cs-gallery-2 { grid-template-columns: 1fr 1fr; }
.cs-figure { margin: 0; }
.cs-figure > img, .cs-figure > video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 20px; background: var(--surface-alt); box-shadow: var(--shadow-soft); }
.cs-gallery-1 .cs-figure > video { aspect-ratio: 16 / 9; }
/* A lone still keeps its own proportions (the live results tiles are 800px squares - never upscale them) */
.cs-gallery-1 .cs-figure > img { width: auto; max-width: 100%; max-height: 560px; aspect-ratio: auto; margin-inline: auto; }
.cs-figure.cs-stage { border-radius: 20px; padding-bottom: 14px; }
.cs-figure.cs-stage .ind-phone, .cs-figure.cs-stage .cs-tablet { height: min(56vh, 520px); }
.cs-figure figcaption { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--text-tertiary); text-align: center; }
.cs-pull { margin: 2em 0 0; padding: 0 0 0 26px; border-left: 3px solid var(--accent-vivid); }
.cs-pull p { font-family: var(--font-display); font-size: clamp(21px, 2vw, 26px); line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; color: var(--text) !important; }
.cs-pull cite { display: block; margin-top: 14px; font-style: normal; font-size: 15px; color: var(--text-secondary); }
.cs-pull cite b { display: block; color: var(--text); }
.cs-pull + .cs-pull { margin-top: 1.6em; }
.cs-related-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.cs-related-head .h3 { margin: 0; font-family: var(--font-display); }
.cs-all { font-weight: 600; color: var(--accent); }
.cs-all::after { content: ' \2192'; }
@media (max-width: 1080px) {
  .cs-hero-grid { grid-template-columns: 1fr; }
  .cs-hero-media.cs-stage { min-height: 0; }
  .cs-glance { grid-template-columns: 1fr 1fr; }
  .cs-glance > div:last-child { grid-column: 1 / -1; }
  .cs-gallery { margin-inline: 0; }
  .cs-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .cs-grid-3 > :nth-child(3) { display: none; }
}
@media (max-width: 640px) {
  .cs-glance { grid-template-columns: 1fr; }
  .cs-gallery-2 { grid-template-columns: 1fr; }
  .cs-grid-3 { grid-template-columns: 1fr; }
  .cs-grid-3 > :nth-child(3) { display: flex; }
  .cs-stage .ind-phone, .cs-stage .cs-tablet, .cs-figure.cs-stage .ind-phone, .cs-figure.cs-stage .cs-tablet { height: 440px; }
  .cs-pull { padding-left: 18px; }
}

/* ============ Blog (Oct 2026) - built by tools/blog/build.py ============ */
/* Index */
.blog-feature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); overflow: hidden; border-radius: 24px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lift); text-decoration: none; color: inherit; }
.blog-feature-img { display: block; min-height: 340px; background: var(--surface-alt); }
.blog-feature-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-feature-body { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: clamp(24px, 3.5vw, 48px); }
.blog-feature-body b { font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.blog-feature-cta { margin-top: 6px; font-weight: 600; color: var(--accent); }
.blog-feature:hover .blog-feature-cta { text-decoration: underline; text-underline-offset: 4px; }
.blog-topic { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.blog-dek { font-size: 16px; line-height: 1.55; color: var(--text-secondary); }
.blog-meta { font-size: 13.5px; color: var(--text-tertiary); }
.blog-tools { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 32px; margin-bottom: 20px; }
.blog-tools .h2 { margin: 0; }
.blog-search { display: flex; align-items: center; gap: 10px; flex: 0 1 380px; padding: 0 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border-hover); color: var(--text-tertiary); }
.blog-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-vivid-rgb), .2); }
.blog-search input { flex: 1; min-width: 0; height: 48px; border: 0; background: none; font: 16px var(--font-body); color: var(--text); outline: none; }
.blog-count { margin: 0 0 16px; font-size: 14px; color: var(--text-tertiary); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.blog-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s, border-color .2s; }
.blog-card:hover, .blog-card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--border-hover); outline: none; }
.blog-card[hidden] { display: none; }
.blog-card-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-alt); }
.blog-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-card-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 20px 22px 22px; }
.blog-card-body b { font-family: var(--font-display); font-size: 20px; line-height: 1.25; font-weight: 600; color: var(--text); }
.blog-card .blog-dek { font-size: 15px; }
.blog-card .blog-meta { margin-top: auto; padding-top: 8px; }
.blog-empty { margin-top: 18px; color: var(--text-secondary); }
.link-btn { padding: 0; border: 0; background: none; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }
.blog-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.blog-path { padding: 26px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); }
.blog-path h3 { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--text); }
.blog-path > p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--text-secondary); }
.blog-path ol { list-style: none; counter-reset: bp; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.blog-path li { counter-increment: bp; display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: baseline; padding-top: 10px; border-top: 1px solid var(--border); }
.blog-path li::before { content: counter(bp); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--teal-50); color: var(--accent); font-size: 13px; font-weight: 700; }
.blog-path li a { font-weight: 600; line-height: 1.35; color: var(--text); text-decoration: none; }
.blog-path li a:hover { color: var(--accent); text-decoration: underline; }
.blog-path li span { font-size: 13px; color: var(--text-tertiary); white-space: nowrap; }
.gloss { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0; }
.gloss-item { padding: 18px 20px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.gloss-item[hidden] { display: none; }
.gloss-item dt { font-weight: 700; font-size: 16px; color: var(--text); }
.gloss-item dd { margin: 4px 0 0; font-size: 15px; line-height: 1.55; color: var(--text-secondary); }

/* Post */
.read-progress { position: fixed; inset: 0 0 auto 0; z-index: 130; height: 3px; pointer-events: none; }
.read-progress i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--accent-vivid); }
.post-hero { padding: clamp(110px, 15vh, 150px) 0 0; }
.post-col { max-width: 820px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.post-crumbs { display: flex; gap: 10px; font-size: 14px; font-weight: 600; }
.post-crumbs a { color: var(--accent); text-decoration: none; }
.post-crumbs a:hover { text-decoration: underline; }
.post-crumbs span { color: var(--text-tertiary); }
.post-title { margin: 16px 0 14px; font-family: var(--font-display); font-size: clamp(32px, 4.2vw, 52px); line-height: 1.08; font-weight: 700; letter-spacing: -0.01em; color: var(--text); text-wrap: balance; }
.post-dek { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--text-secondary); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 22px; font-size: 14px; color: var(--text-tertiary); }
.post-meta > span + span::before { content: ''; display: inline-block; width: 4px; height: 4px; margin: 0 14px 2px 0; border-radius: 50%; background: var(--border-hover); vertical-align: middle; }
.post-copy { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-hover); background: var(--surface); font: 600 14px var(--font-body); color: var(--text); cursor: pointer; }
.post-copy:hover { border-color: var(--accent); }
.post-figure { max-width: 1100px; margin: clamp(28px, 4vh, 44px) auto 0; padding: 0 clamp(20px, 4vw, 48px); }
.post-figure img { display: block; width: 100%; max-height: 560px; object-fit: cover; border-radius: 22px; box-shadow: var(--shadow-lift); }
.post-layout { display: grid; grid-template-columns: 220px minmax(0, 720px); justify-content: center; gap: clamp(32px, 5vw, 72px); padding: clamp(40px, 6vh, 64px) clamp(20px, 4vw, 48px) clamp(48px, 7vh, 80px); }
.post-toc { position: sticky; top: 100px; align-self: start; }
.post-toc p { margin-bottom: 12px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); }
.post-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border); }
.post-toc a { display: block; margin-left: -2px; padding: 7px 0 7px 14px; border-left: 2px solid transparent; font-size: 14.5px; line-height: 1.35; color: var(--text-secondary); text-decoration: none; }
.post-toc a:hover { color: var(--text); }
.post-toc a.on { border-left-color: var(--accent-vivid); color: var(--text); font-weight: 600; }
.post-body { font-size: 18px; line-height: 1.7; color: var(--text); }
.post-body > * + * { margin-top: 1.1em; }
.post-body h2 { margin-top: 2em; font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 32px); line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; scroll-margin-top: 96px; }
.post-body h3 { margin-top: 1.6em; font-family: var(--font-display); font-size: 21px; line-height: 1.3; font-weight: 600; scroll-margin-top: 96px; }
.post-body h2 + *, .post-body h3 + * { margin-top: .6em; }
.post-body p, .post-body li { color: var(--text-secondary); }
.post-body b { color: var(--text); }
.post-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.post-body ul, .post-body ol { padding-left: 1.3em; }
.post-body li + li { margin-top: .45em; }
.post-body li::marker { color: var(--accent); }
.post-body .ind-quote { margin-top: 1.6em; }
.post-takeaways { margin: 0; padding: 22px 26px; border-radius: 18px; background: var(--teal-950); color: var(--teal-50); }
.post-takeaways p { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-300); }
.post-takeaways ul { margin: 0; }
.post-takeaways li { color: rgba(var(--on-dark-rgb), .9); font-size: 16.5px; line-height: 1.55; }
.post-takeaways li::marker { color: var(--teal-300); }
.post-callout { padding: 18px 22px; border-radius: 14px; background: var(--teal-50); border-left: 3px solid var(--accent-vivid); color: var(--text) !important; font-weight: 600; }
.post-end { margin-top: 2.6em !important; padding: 28px; border-radius: 20px; background: var(--surface-alt); border: 1px solid var(--border); }
.post-end b { display: block; font-family: var(--font-display); font-size: 24px; }
.post-end p { margin: 8px 0 18px; font-size: 16px; line-height: 1.55; }
.post-pns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.post-pn { display: block; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--border); text-decoration: none !important; }
.post-pn:hover { border-color: var(--accent); }
.post-pn.next { grid-column: 2; text-align: right; }
.post-pn span { display: block; font-size: 13px; font-weight: 600; color: var(--text-tertiary); }
.post-pn b { display: block; margin-top: 4px; font-size: 16px; line-height: 1.35; color: var(--text); }
.post-related { background: var(--surface-alt); }
.post-related .h3 { margin-bottom: 20px; font-family: var(--font-display); }
.post-back { margin-top: 24px; text-align: center; }
.post-back a { font-weight: 600; color: var(--accent); }
@media (max-width: 1080px) {
  .blog-grid, .blog-paths { grid-template-columns: repeat(2, 1fr); }
  .blog-feature { grid-template-columns: 1fr; }
  .blog-feature-img { min-height: 0; aspect-ratio: 16 / 9; }
  .post-layout { grid-template-columns: minmax(0, 720px); }
  .post-toc { position: static; padding: 16px 18px; border-radius: 14px; background: var(--surface-alt); }
}
@media (max-width: 640px) {
  .blog-grid, .blog-paths, .gloss, .post-pns { grid-template-columns: 1fr; }
  .post-pn.next { grid-column: auto; }
  .post-body { font-size: 17px; }
  .post-copy { margin-left: 0; }
}

/* ============ Phone menu: Industries opens a second panel (Oct 2026) ============ */
.nav-overlay-more { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 16px; border: 0; border-radius: 12px; background: none; text-align: left; cursor: pointer;
  font-family: var(--font-display); font-size: clamp(24px, 6.4vw, 36px); font-weight: 700; color: var(--text);
  transform: translateY(14px); opacity: 0; transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .45s; }
.nav-overlay.open .nav-overlay-more { transform: none; opacity: 1; }
.nav-overlay-more svg { flex: none; color: var(--accent); }
.nav-sub { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; gap: 2px; padding: 92px 24px 32px; overflow-y: auto; background: var(--bg);
  transform: translateX(100%); visibility: hidden; transition: transform .35s cubic-bezier(.22,1,.36,1), visibility 0s linear .35s; }
.nav-sub.open { transform: none; visibility: visible; transition: transform .35s cubic-bezier(.22,1,.36,1), visibility 0s; }
.nav-sub-back { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: 0 0 6px 6px; padding: 8px 10px; border: 0; border-radius: 10px; background: none; font: 600 16px var(--font-body); color: var(--accent); cursor: pointer; }
.nav-sub-title { margin: 0 16px 8px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); }
.nav-overlay .nav-sub a { font-size: clamp(22px, 5.8vw, 30px); }
.nav-overlay .nav-sub a span { display: block; margin-top: 2px; font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--text-secondary); }

/* ============ Industry logo banner (Oct 2026): scrolls left to right, pauses on hover ============ */
.ind-marquee { position: relative; overflow: hidden; margin-top: clamp(28px, 4vh, 40px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ind-marquee-track { display: flex; width: max-content; animation: ind-marquee var(--dur, 40s) linear infinite; }
.ind-marquee:hover .ind-marquee-track { animation-play-state: paused; }
.ind-marquee .ind-logos { display: flex; flex: none; gap: 12px; margin: 0; padding: 0 12px 0 0; }
.ind-marquee .ind-logos li { flex: none; width: 180px; }
@keyframes ind-marquee { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .ind-marquee { -webkit-mask-image: none; mask-image: none; }
  .ind-marquee-track { animation: none; width: auto; }
  .ind-marquee .ind-logos { flex-wrap: wrap; flex: 1; }
  .ind-marquee .ind-logos[aria-hidden="true"], .ind-marquee .ind-logos li[aria-hidden="true"] { display: none; }
}
html.reduce-motion .ind-marquee-track { animation: none; width: auto; }
html.reduce-motion .ind-marquee { -webkit-mask-image: none; mask-image: none; }
html.reduce-motion .ind-marquee .ind-logos { flex-wrap: wrap; flex: 1; }
html.reduce-motion .ind-marquee .ind-logos[aria-hidden="true"], html.reduce-motion .ind-marquee .ind-logos li[aria-hidden="true"] { display: none; }
@media (max-width: 640px) { .ind-marquee .ind-logos li { width: 140px; height: 76px; } .ind-logos li.is-tall { padding-block: 6px; } .ind-logos li.is-tall img { max-height: 62px; } }
/* About: the closing sign-off line under the history */
.about-sign { margin-top: 22px; padding-left: 16px; border-left: 3px solid var(--accent-vivid); font-family: var(--font-display); font-size: clamp(19px, 1.7vw, 22px); line-height: 1.35; font-weight: 600; color: var(--accent); }

/* Industry heroes: a client's tablet sits right of centre (its edge at 42.9% of the image) with clear space on the
   left, and the copy column ends ~40px short of it at every width. The copy starts at the container's edge
   ((100vw - 1200px) / 2 + 48px above 1200px, the 4vw gutter below), so its width is the tablet edge minus that:
   512px - 7.1vw above 1200px, 42.9vw - 88px below; never more than 470px. */
@media (min-width: 1081px) {
  .ind-page .ind-hero-copy { --hero-copy: min(470px, 512px - 7.1vw, 42.9vw - 88px); }
  .ind-page .ind-hero-copy .h1 { max-width: var(--hero-copy); font-size: clamp(40px, 3.7vw, 58px); }
  .ind-page .ind-hero-copy .lead { max-width: var(--hero-copy); font-size: 17px; }
}

/* ============ About: every brand (Oct 2026) - three scrolling rows, alternate directions ============ */
.about-brand-rows { display: grid; gap: 12px; margin-top: clamp(24px, 4vh, 36px); }
.about-brand-rows .ind-marquee { margin-top: 0; }
.ind-marquee.rev .ind-marquee-track { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) { .about-brand-rows { padding-inline: clamp(20px, 4vw, 48px); } }
html.reduce-motion .about-brand-rows { padding-inline: clamp(20px, 4vw, 48px); }
/* The animated number is a span inside <b>; keep it styled as the big stat, not as the caption span */
.ind-stats b span, .cs-stat b span { display: inline; margin: 0; font: inherit; letter-spacing: inherit; line-height: inherit; color: inherit; }

/* ---------- Phones: the mobile pass (8 Oct) ----------
   The homepage ring stands alone: "the best business decision you'll ever make", then straight into the offer. The
   ten-area legend is a desktop idea (it labels the ring's segments) and is dropped here. Forms stay at 16px so iOS
   does not zoom on focus, the five fabrics sit on one row, small inline links get a full-height tap area and the
   footer's link groups pair up instead of running two screens long. */
@media (max-width: 760px) {
  .donut-facts-home .donut-facts { display: none; }
  .field input, .field select, .field textarea { font-size: 16px; }
  .cfg2-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .cfg2-sw { width: auto; height: auto; aspect-ratio: 1; }
  .post-crumbs a, .post-back a, .cs-glance a { display: inline-block; padding-block: 11px; margin-block: -11px; }
  .ind-cfg-open { padding-block: 12px; margin-block: -12px; }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 8px 20px; }
  .footer-grid > :first-child { grid-column: 1 / -1; margin-bottom: 12px; }
}

/* Always two columns (2 x 2 for four cards) rather than as many as fit; one column on phones */
.grid-2-even { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .grid-2-even { grid-template-columns: 1fr; } }

/* ---------- Contact (9 Oct): intro + routes beside the form, as on Request a Demo ---------- */
.ct-grid { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.ct-intro .lead { margin-bottom: 28px; }
.ct-routes { display: grid; gap: 10px; }
.ct-route { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 16px 18px; text-align: left; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-soft); cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.ct-route .card-icon { flex: none; margin: 0; }
.ct-route b { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--text); }
.ct-route small { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.45; color: var(--text-secondary); }
.ct-route:hover { border-color: var(--border-hover); transform: translateY(-1px); }
.ct-route.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-soft); }
.ct-route:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ct-side { display: grid; gap: 14px; }
.ct-form { padding: clamp(24px, 3vw, 34px); border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lift); }
.ct-form .body-sm { margin: 8px 0 22px; }
.ct-demo { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; border-radius: 18px; background: var(--bg); }
.ct-demo b { font-family: var(--font-display); font-size: 18px; color: var(--text); }
.ct-demo p { margin-top: 4px; font-size: 14.5px; color: var(--text-secondary); }
.ct-demo .btn { flex: none; }
.ct-clients { padding-block: clamp(36px, 6vh, 64px); }
.ct-clients-label { text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-tertiary); }
.ct-faq { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.ct-faq .section-head { margin-bottom: 0; }
@media (max-width: 960px) {
  .ct-grid, .ct-faq { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ct-demo { flex-direction: column; align-items: flex-start; }
  .ct-demo .btn { width: 100%; }
}
.ct-marquees { margin-top: clamp(24px, 3vh, 32px); display: grid; gap: 12px; }
.ct-marquees .ind-marquee { margin-top: 0; }

/* ---------- Industry frame 1b: the two markets (prefabricated buildings: modular and manufactured homes) ---------- */
.ind-market-top { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.ind-market-media { margin: 0; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-lift); }
.ind-market-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.ind-market-strands { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(36px, 5vh, 56px); }
.ind-market-strand { padding: clamp(22px, 2.6vw, 32px); border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-soft); }
.ind-market-strand h3 { font-family: var(--font-display); font-size: clamp(22px, 2vw, 27px); font-weight: 600; line-height: 1.2; color: var(--text); }
.ind-market-strand p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.ind-market-ai { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; margin-top: 16px;
  padding: clamp(24px, 3vw, 36px); border-radius: 20px; background: radial-gradient(120% 140% at 100% 0%, rgba(var(--accent-vivid-rgb), .16), transparent 55%), var(--bg); }
.ind-market-ai h3 { font-family: var(--font-display); font-size: clamp(22px, 2vw, 27px); font-weight: 600; line-height: 1.2; color: var(--text); }
.ind-market-ai p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.ind-market-ai .ind-chips { margin: 0; justify-content: flex-end; }
@media (max-width: 960px) {
  .ind-market-top, .ind-market-ai { grid-template-columns: 1fr; }
  .ind-market-ai .ind-chips { justify-content: flex-start; }
}
@media (max-width: 640px) { .ind-market-strands { grid-template-columns: 1fr; } }
.ind-market-copy .h2 { margin-bottom: 18px; }

/* ---------- Footer legal links ---------- */
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer-legal a { color: var(--text-tertiary); }
.footer-legal a:hover, .footer-legal a:focus-visible { color: var(--text); }
@media (max-width: 640px) { .footer-legal a { display: inline-block; padding-block: 8px; } }

/* ---------- Legal pages (privacy, terms, cookies) ---------- */
.legal-meta { margin-top: 6px; font-size: 15px; color: var(--text-secondary); }
.legal-switch { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.legal-switch-link { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border-hover); background: var(--surface); font-size: 14px; font-weight: 600; color: var(--text); transition: border-color .2s; }
.legal-switch-link:hover, .legal-switch-link:focus-visible { border-color: var(--accent); }
.legal { padding-top: clamp(16px, 3vh, 32px); }
.legal-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.legal-toc { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow: auto; padding-right: 8px; }
.legal-toc-title { font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 12px; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 1px solid var(--border); }
.legal-toc a { display: block; padding: 5px 0 5px 14px; margin-left: -1px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.4; color: var(--text-secondary); }
.legal-toc a:hover, .legal-toc a:focus-visible { color: var(--text); border-left-color: var(--accent); }
.legal-body { max-width: 760px; font-size: 16.5px; line-height: 1.7; color: var(--text-secondary); }
.legal-body h2 { margin: 48px 0 14px; scroll-margin-top: 96px; font-family: var(--font-display); font-size: clamp(22px, 2vw, 27px); font-weight: 600; line-height: 1.25; color: var(--text); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { margin: 28px 0 10px; font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--text); }
.legal-body h4 { margin: 18px 0 6px; font-size: 15px; font-weight: 600; color: var(--text); }
.legal-body p { margin: 0 0 14px; }
.legal-body b { color: var(--text); font-weight: 600; }
.legal-body ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.legal-body li { padding-left: 20px; }
.legal-body li.sub { padding-left: 44px; }
.legal-body a { overflow-wrap: anywhere; }
@media (max-width: 960px) {
  .legal-layout { grid-template-columns: minmax(0, 1fr); }
  .legal-toc { position: static; max-height: none; padding: 18px 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
  .legal-toc ol { border-left: 0; }
  .legal-toc a { padding-left: 0; border-left: 0; }
}

/* ---------- 404 ---------- */
.nf-hero { padding-bottom: clamp(24px, 4vh, 40px); }
.nf-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.nf-hero .hero-cta { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px; margin-top: 30px; }
.nf-mark { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.5vw, 18px); font-family: var(--font-display); font-weight: 700;
  font-size: clamp(110px, 15vw, 210px); line-height: 1; letter-spacing: -0.04em; color: var(--text); }
.nf-ring { width: .78em; height: .78em; border-radius: 50%; border: .13em solid var(--accent-vivid);
  box-shadow: 0 0 0 .05em rgba(var(--accent-vivid-rgb), .18), 0 20px 50px -18px rgba(var(--accent-vivid-rgb), .55); }
.nf-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(24px, 4vw, 56px); }
.nf-title { margin-bottom: 14px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-tertiary); }
.nf-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.nf-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: 14px; background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-soft); font-weight: 600; color: var(--text); transition: border-color .2s, transform .2s; }
.nf-link i { font-style: normal; color: var(--accent); transition: transform .2s; }
.nf-link:hover, .nf-link:focus-visible { border-color: var(--accent); transform: translateY(-1px); }
.nf-link:hover i { transform: translateX(3px); }
@media (max-width: 860px) { .nf-grid, .nf-cols { grid-template-columns: 1fr; } .nf-mark { justify-content: flex-start; font-size: 96px; } }
.form-legal { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--text-tertiary); }
.legal-table { margin: 6px 0 20px; overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.legal-table table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.legal-table th, .legal-table td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.legal-table th { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); background: var(--surface-alt); }
.legal-table tr:last-child td { border-bottom: 0; }
.legal-table td:first-child { font-weight: 600; color: var(--text); white-space: nowrap; }

/* ---------- Campaign landing page (lp/furniture-configurator.html): the lp-5 structure in the site's design ---------- */
.lp-center { text-align: center; margin-inline: auto; }
.section-head.lp-center { max-width: 860px; }
.section-head.lp-center .lead { margin-inline: auto; }
.lp-cta-row { display: flex; justify-content: center; margin-top: clamp(28px, 4vh, 40px); }
.lp-rating { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.lp-stars { display: inline-flex; gap: 2px; color: var(--accent-vivid); }
.lp-stars svg { width: 15px; height: 15px; fill: currentColor; }
.lp-page .ind-hero-copy .lp-rating { color: rgba(var(--on-dark-rgb), .9); }
@media (min-width: 1081px) { .lp-page .ind-hero-copy { --hero-copy: 640px; } }
.lp-hero { min-height: min(94vh, 880px); }
.lp-hero .ind-hero-copy .h1 { max-width: 16ch; }
.lp-hero-card { position: absolute; right: clamp(20px, 4vw, 48px); bottom: clamp(48px, 9vh, 96px); display: grid; gap: 4px; max-width: 220px;
  padding: 16px 18px; border-radius: 16px; background: rgba(var(--scrim-rgb), .55); border: 1px solid rgba(var(--on-dark-rgb), .18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--teal-50); }
.lp-hero-card b { font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--teal-300); }
.lp-hero-card span { font-size: 13.5px; line-height: 1.4; color: rgba(var(--on-dark-rgb), .85); }

.lp-trusted { padding-block: clamp(40px, 6vh, 64px); }
.lp-trusted-title { text-align: center; font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; color: var(--text); }
.lp-trusted-title span { display: block; margin-top: 4px; font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--text-secondary); }

.lp-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: clamp(8px, 2vh, 16px); }
.lp-way { display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 2.6vw, 32px); border-radius: 22px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-soft); }
.lp-way-new { border-color: rgba(var(--accent-vivid-rgb), .55); box-shadow: 0 0 0 1px rgba(var(--accent-vivid-rgb), .35), var(--shadow-lift); }
.lp-way-tag { align-self: flex-start; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.lp-way-old .lp-way-tag { background: var(--surface-alt); color: var(--text-secondary); }
.lp-way-new .lp-way-tag { background: var(--btn-bg); color: var(--btn-fg); }
.lp-way .h3 { margin: 0; }
.lp-way-media { border-radius: 14px; overflow: hidden; background: var(--surface-alt); aspect-ratio: 16 / 10; }
.lp-way-media img { width: 100%; height: 100%; object-fit: cover; }
.lp-way-old .lp-way-media img { filter: saturate(.75); }
.lp-way-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.lp-way-new .lp-way-list { grid-template-columns: 1fr 1fr; gap: 9px 16px; }
.lp-way-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.45; color: var(--text); }
.lp-way-list i { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; }
.lp-way-list svg { width: 12px; height: 12px; }
.lp-x { background: rgba(var(--accent-2-rgb), .12); color: var(--accent-2); }
.lp-tick { background: rgba(var(--accent-vivid-rgb), .18); color: var(--accent); }
.lp-way-result { margin-top: auto; padding: 14px 16px; border-radius: 12px; font-size: 15px; color: var(--text-secondary); background: var(--surface-alt); }
.lp-way-new .lp-way-result { background: rgba(var(--accent-vivid-rgb), .1); }
.lp-way-result b { color: var(--text); }

.lp-stage { position: relative; max-width: 980px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 20%, var(--lt-surface), var(--surface-alt)); border: 1px solid var(--border); }
.lp-stage model-viewer { width: 100%; height: 100%; --poster-color: transparent; background: transparent; }
.lp-stage-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 7px 14px; border-radius: 999px; font-size: 13px; color: var(--text-secondary);
  background: rgba(var(--bg-rgb), .85); border: 1px solid var(--border); white-space: nowrap; }
.lp-stats { margin-top: clamp(28px, 4vh, 40px); }
.lp-stats li { min-height: 0; }

.lp-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding-block: clamp(28px, 5vh, 52px); }
.lp-feature + .lp-feature { border-top: 1px solid var(--border); }
.lp-feature.flip .lp-feature-copy { order: 2; }
.lp-chip { display: inline-flex; padding: 6px 12px; border-radius: 999px; background: rgba(var(--accent-vivid-rgb), .14); color: var(--accent); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.lp-feature-copy .h3 { margin: 16px 0 12px; }
.lp-feature-copy p:last-child { font-size: 17px; line-height: 1.6; color: var(--text-secondary); max-width: 52ch; }
.lp-frame { border-radius: 20px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-lift); }
.lp-viewer { position: relative; aspect-ratio: 1 / 1.12; background: radial-gradient(110% 90% at 50% 30%, var(--lt-surface), var(--surface-alt)); }
.lp-viewer::before { content: 'Loading the 3D viewer'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; color: var(--text-tertiary); }
.lp-viewer iframe { position: relative; }
.lp-viewer iframe { display: block; width: 100%; height: 100%; border: 0; }
.lp-builder video { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--lt-surface); }
.lp-phone-wrap { display: grid; place-items: center; padding: clamp(24px, 4vw, 48px); background: radial-gradient(110% 90% at 50% 30%, var(--lt-surface), var(--surface-alt)); }

.lp-zero .h2 { max-width: 22ch; margin: 0 auto; }

.lp-case-list { display: grid; gap: 18px; }
.lp-case { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); border-radius: 22px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-soft); }
.lp-case-media { position: relative; min-height: 340px; background: var(--teal-950); }
.lp-case-media video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }  /* the media takes the card's height, set by the text */
.lp-case-body { padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; gap: 12px; }
.lp-case-logo { height: 34px; width: auto; max-width: 180px; object-fit: contain; object-position: left center; }
.lp-case-body > p:not(.lp-case-results) { font-size: 16.5px; line-height: 1.6; color: var(--text-secondary); }
.lp-case-results { margin-top: 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-tertiary); }
.lp-case-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lp-case-stats li { padding: 14px 16px; border-radius: 14px; background: var(--surface-alt); }
.lp-case-stats b { display: block; font-family: var(--font-display); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.05; color: var(--accent); }
.lp-case-stats span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--text-secondary); }
.lp-case-link { margin-top: auto; padding-top: 6px; font-weight: 600; color: var(--accent); }
.lp-case-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.lp-review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-review { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: clamp(22px, 2.4vw, 28px); border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-soft); }
.lp-review blockquote { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--text); }
.lp-review figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.lp-review figcaption b { display: block; font-size: 15px; color: var(--text); }
.lp-review figcaption span:last-child { font-size: 14px; color: var(--text-secondary); }
.lp-avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--surface-alt); }
.lp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lp-avatar-initials { display: grid; place-items: center; width: 100%; height: 100%; background: var(--teal-950); color: var(--teal-300); font-weight: 600; font-size: 15px; }
.lp-review-metric { padding-top: 14px; border-top: 1px solid var(--border); font-size: 14px; color: var(--text-secondary); }
.lp-review-metric b { margin-right: 8px; font-family: var(--font-display); font-size: 22px; color: var(--accent); }

.lp-platforms { padding-block: clamp(48px, 7vh, 80px); }
.lp-platform-logos { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 24px 0 0; padding: 0; }
.lp-platform-logos li { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); font-weight: 600; color: var(--text); }
.lp-platform-logos svg { width: 30px; height: 30px; fill: var(--text-secondary); }
.lp-platform-logos svg.wide { width: 52px; }

.lp-start { position: relative; overflow: hidden; }
.lp-start-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.lp-start .h2 { margin: 6px 0 16px; }
.lp-start .hero-cta { flex-direction: row; justify-content: flex-start; margin-top: 28px; }
.lp-start .lp-rating { color: rgba(var(--on-dark-rgb), .85); }
.lp-collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; aspect-ratio: 1.2; }
.lp-collage img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.lp-collage img:first-child { grid-row: span 2; }

.lp-footer { padding-block: 32px; }
.lp-footer .footer-meta { border-top: 0; padding-top: 0; }
.lp-footer .wordmark img { width: 120px; height: auto; }

@media (max-width: 1080px) {
  .lp-hero-card { display: none; }
  .lp-review-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .lp-compare, .lp-feature, .lp-case, .lp-start-grid { grid-template-columns: 1fr; }
  .lp-feature.flip .lp-feature-copy { order: 0; }
  .lp-case-media { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .lp-way-new .lp-way-list, .lp-review-grid { grid-template-columns: 1fr; }
  .lp-case-stats { grid-template-columns: 1fr; }
  .lp-stage { aspect-ratio: 1; }
  .lp-platform-logos li { padding: 12px 16px; }
}