/* contextos.si (v6): one stylesheet on top of Daylight (assets/daylight.css = packages/design/classic.css; its
   components, type and spacing tokens stay). v6 is the colour and spacing system: the ContextOS palette as tokens
   (an electric indigo-blue brand, the coral of the logo's core, sky / sand / mint / indigo tints for the section bands,
   the navy engine room), an 8-pt spacing scale with 120 px sections on desktop and 72 px on a phone, 24 / 48 px
   gutters, 32-40 px cards, and every component finished: radii, layered tinted shadows, hover and focus, coloured
   icon containers, filled brand buttons and outlined secondary ones. Light, colourful, never black-on-white.
   Mobile first. The drawings (src/art.mjs .a-*), the screens (src/ui.mjs .app/.ph/.doc/.bpx) and the canvas scene
   (src/site.js, --scene-*) take their colours from here too. */

/* =====================================================================================================================
   1. Tokens: the palette (hsl triplets, so hsl(var(--x) / a) works), spacing, radii, shadows, type
   ================================================================================================================== */
:root {
  /* the brand hues */
  --brand: 228 88% 54%;            /* electric indigo-blue: links, primary buttons, the core of every diagram */
  --brand-deep: 231 72% 42%;       /* hover, pressed, the deep end of the gradients */
  --brand-sky: 203 96% 46%;        /* the family's electric sky (innovate.si), the lighter end of the gradients */
  --brand-soft: 226 100% 95%;      /* icon containers, chips */
  --coral: 12 96% 59%;             /* the warm accent: the logo's red core, the exceptions, the person */
  --coral-deep: 9 78% 46%;
  --coral-soft: 16 100% 94%;
  --mint: 162 70% 34%;             /* done, running, success */
  --mint-soft: 160 56% 93%;
  --amber: 34 96% 46%;             /* a medium risk, a waiting item */
  --amber-soft: 42 100% 91%;
  --violet: 262 70% 58%;           /* the fourth hue of the diagrams */
  --violet-soft: 262 100% 96%;
  --navy: 231 44% 11%;             /* the engine room, never pure black */
  --navy-2: 230 38% 17%;
  /* section tints */
  --tint-sky: 212 100% 97%;
  --tint-indigo: 230 100% 97%;
  --tint-sand: 32 80% 96%;
  --tint-mint: 160 55% 96%;
  /* Daylight's tokens, re-aimed at the palette (site.css loads after daylight.css) */
  --background: 222 50% 98.5%;
  --background-elevated: 224 44% 96%;
  --foreground: 231 30% 11%;
  --card: 0 0% 100%;
  --card-foreground: 231 30% 11%;
  --muted: 224 40% 96%;
  --muted-foreground: 229 14% 40%;
  --accent: var(--brand);
  --accent-foreground: 0 0% 100%;
  --accent-soft: var(--brand-soft);
  --primary: var(--brand);
  --primary-foreground: 0 0% 100%;
  --primary-hover: var(--brand-deep);
  --border: 226 30% 90%;
  --border-strong: 226 24% 82%;
  --input: 227 16% 62%;
  --ring: var(--brand);
  --success: var(--mint);
  --success-soft: var(--mint-soft);
  --warning: var(--amber);
  --warning-soft: var(--amber-soft);
  --destructive: var(--coral-deep);
  --destructive-soft: var(--coral-soft);
  --innovate-red: 3 100% 61%;
  --aurora-1: var(--brand-sky);
  --aurora-2: var(--coral);
  --aurora-3: var(--violet);
  /* layered, tinted shadows (the hue of the page, never grey-black) */
  --shadow-card: 0 1px 2px hsl(231 40% 20% / 0.05), 0 2px 8px -2px hsl(231 40% 20% / 0.06);
  --shadow-lift: 0 2px 6px -1px hsl(231 40% 20% / 0.06), 0 16px 36px -12px hsl(231 50% 30% / 0.18);
  --shadow-float: 0 1px 2px hsl(231 40% 20% / 0.05), 0 24px 60px -24px hsl(231 50% 30% / 0.28), 0 60px 120px -48px hsl(231 50% 30% / 0.2);
  --shadow-brand: 0 1px 2px hsl(var(--brand-deep) / 0.2), 0 10px 24px -8px hsl(var(--brand) / 0.45);
  --shadow-device: var(--shadow-float);
  /* spacing (8-pt) and the frame */
  --site-max: 1200px;
  --gutter: 24px;
  --s-section: 72px;
  --s-card: 28px;
  --radius-tile: 20px;
  --radius-card: 16px;
  --radius-device: 20px;
  --radius-button: 12px;
  --radius-input: 12px;
  --radius-nav: 10px;
  --ease-reveal: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* type */
  --font-display: 'Bricolage Grotesque', 'Bricolage Fallback', 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
  --t-display: clamp(2.5rem, 1.5rem + 3.2vw, 4.25rem);
  --t-h2: clamp(1.875rem, 1.3rem + 1.8vw, 2.75rem);
  --t-h3: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  --t-body: 1.0625rem;
  --t-caption: 0.8125rem;
  /* the canvas scene reads these */
  --scene-ink: hsl(var(--foreground)); --scene-muted: hsl(var(--muted-foreground)); --scene-line: hsl(var(--border-strong)); --scene-card: hsl(var(--card));
  --scene-accent: hsl(var(--brand)); --scene-accent-soft: hsl(var(--brand-soft)); --scene-red: hsl(var(--coral)); --scene-green: hsl(var(--mint));
  --scene-accent-rgb: 43 93 240; --scene-red-rgb: 252 107 59;
}
@media (min-width: 640px) { :root { --s-card: 32px; } }
@media (min-width: 960px) { :root { --gutter: 48px; --s-section: 120px; --s-card: 36px; } }
@media (min-width: 1280px) { :root { --s-section: 128px; --s-card: 40px; } }

@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500 800; font-display: swap; src: url('./fonts/bricolage/bricolage-grotesque-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500 800; font-display: swap; src: url('./fonts/bricolage/bricolage-grotesque-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bricolage Fallback'; src: local('Helvetica Neue'), local('Arial'); size-adjust: 97%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }

/* =====================================================================================================================
   2. Base, the frame, browser surfaces
   ================================================================================================================== */
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; caret-color: hsl(var(--brand)); scrollbar-color: hsl(var(--border-strong)) transparent; scrollbar-width: thin; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { position: relative; overflow-x: hidden; display: flex; flex-direction: column; background: hsl(var(--background)); color: hsl(var(--foreground)); font-size: 1rem; line-height: 1.6rem; }
body > main { flex: 1 0 auto; position: relative; }
/* the backdrop: a slow colour mesh behind the whole page, sky top-left, coral top-right, violet below */
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background:
  radial-gradient(60% 50% at 8% 0%, hsl(var(--brand-sky) / 0.16), transparent 70%),
  radial-gradient(50% 40% at 96% 8%, hsl(var(--coral) / 0.13), transparent 70%),
  radial-gradient(45% 40% at 60% 100%, hsl(var(--violet) / 0.1), transparent 70%);
  animation: mesh 28s ease-in-out infinite alternate; }
@keyframes mesh { to { transform: translate3d(-3%, 2%, 0) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }
::selection { background: hsl(var(--brand) / 0.2); color: hsl(var(--foreground)); }
.wrap { width: 100%; max-width: calc(var(--site-max) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.icon { flex: none; }
p, h1, h2, h3 { margin: 0; }
a { color: hsl(var(--brand)); text-decoration: none; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 3px; border-radius: 6px; }
.tabular, .run-time, .eng-time, .eng-stat strong, .app-stat strong { font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: 16px; top: 12px; z-index: 50; padding: 10px 14px; border-radius: var(--radius-button); background: hsl(var(--card)); color: hsl(var(--foreground)); transform: translateY(-200%); }
.skip:focus { transform: none; box-shadow: var(--shadow-lift); }
.text-muted { color: hsl(var(--muted-foreground)); }
.hero > *, .split > *, .step-row > *, .case-head > *, .duo > *, .bpx > *, .story3-grid > *, .trust > * { min-width: 0; }

/* buttons: primary filled brand, secondary outlined, both with a real press */
.btn { gap: 10px; min-height: 44px; padding: 0 20px; border-radius: var(--radius-button); font-weight: 600; letter-spacing: -0.005em; box-shadow: var(--shadow-brand); transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform 0.25s var(--ease-out), color var(--dur-fast) var(--ease-out); will-change: transform; }
.btn:hover { background: hsl(var(--brand-deep)); border-color: hsl(var(--brand-deep)); box-shadow: 0 2px 4px hsl(var(--brand-deep) / 0.2), 0 14px 30px -10px hsl(var(--brand) / 0.55); text-decoration: none; }
.btn:active { transform: translateY(1px) scale(0.99); box-shadow: 0 1px 2px hsl(var(--brand-deep) / 0.3); }
.btn .icon { width: 18px; height: 18px; transition: transform var(--dur) var(--ease-out); }
.btn:hover .icon { transform: translateX(3px); }
.btn-lg { min-height: 52px; padding: 0 26px; font-size: 1rem; }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 0.875rem; }
.btn-secondary, .btn.secondary { border: 1.5px solid hsl(var(--border-strong)); background: hsl(var(--card)); color: hsl(var(--foreground)); box-shadow: var(--shadow-card); }
.btn-secondary:hover, .btn.secondary:hover { border-color: hsl(var(--brand)); background: hsl(var(--brand-soft)); color: hsl(var(--brand-deep)); box-shadow: var(--shadow-card); }

/* =====================================================================================================================
   3. The mark, the header, the phone menu
   ================================================================================================================== */
.mark { display: block; flex: none; }
.mark-ring { fill: none; stroke: hsl(var(--foreground)); }
.mark-core { fill: hsl(var(--innovate-red)); }
.brand { display: inline-flex; align-items: center; gap: 10px; padding: 4px; margin: -4px; border-radius: 10px; color: hsl(var(--foreground)); font-weight: 700; letter-spacing: -0.02em; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 30px; height: 30px; transition: transform var(--dur) var(--ease-out); }
.brand:hover .brand-mark { transform: rotate(-8deg); }
.signin-brand { display: flex; justify-content: center; }
.signin-brand .brand-mark, .signin .signin-brand .mark { width: 56px; height: 56px; }

.site-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid transparent; background: hsl(var(--background) / 0.72); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); view-transition-name: site-header; }
.site-header.is-scrolled { border-bottom-color: hsl(var(--border)); background: hsl(var(--background) / 0.86); box-shadow: 0 8px 30px -20px hsl(231 50% 30% / 0.25); }
.header-row { display: flex; align-items: center; gap: var(--space-4); min-height: 72px; }
.header-nav { display: none; flex: 1; gap: 2px; justify-content: center; }
@media (min-width: 1024px) { .header-nav { display: flex; } }
.nav-link { position: relative; display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; white-space: nowrap; border-radius: var(--radius-nav); color: hsl(var(--foreground) / 0.74); font-size: 0.9375rem; font-weight: 500; text-decoration: none; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.nav-link:hover { background: hsl(var(--brand-soft)); color: hsl(var(--brand-deep)); text-decoration: none; }
.nav-link[aria-current="page"] { color: hsl(var(--brand-deep)); font-weight: 600; }
.header-nav .nav-link[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 1px; background: hsl(var(--brand)); }
.header-end { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.lang { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid hsl(var(--border)); border-radius: var(--radius-nav); background: hsl(var(--card)); box-shadow: var(--shadow-card); }
.lang-opt { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 28px; padding: 0 7px; border-radius: 7px; color: hsl(var(--muted-foreground)); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.lang-opt:hover { background: hsl(var(--brand-soft)); color: hsl(var(--brand-deep)); text-decoration: none; }
.lang-opt[aria-current="true"] { background: hsl(var(--brand)); color: #fff; }
.signin-link { display: none; padding: 6px 8px; color: hsl(var(--foreground)); font-size: 0.9375rem; font-weight: 500; text-decoration: none; border-radius: var(--radius-nav); }
.signin-link:hover, .signin-link[aria-current="page"] { color: hsl(var(--brand-deep)); text-decoration: none; }
.header-cta { display: none; }
@media (min-width: 560px) { .signin-link { display: inline-flex; } }
@media (min-width: 760px) { .header-cta { display: inline-flex; } }
.nav-drawer { position: relative; }
@media (min-width: 1024px) { .nav-drawer { display: none; } }
.nav-burger { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px; border: 1px solid hsl(var(--border)); border-radius: var(--radius-nav); background: hsl(var(--card)); font-size: 0.875rem; font-weight: 600; cursor: pointer; list-style: none; user-select: none; box-shadow: var(--shadow-card); }
.nav-burger::-webkit-details-marker { display: none; }
.nav-drawer > summary:not(.btn)::before { content: none; }
.burger { position: relative; width: 16px; height: 10px; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 1px; background: hsl(var(--brand)); transition: transform var(--dur) var(--ease-out); }
.burger::before { top: 0; } .burger::after { bottom: 0; }
.nav-drawer[open] .burger::before { transform: translateY(4px) rotate(45deg); }
.nav-drawer[open] .burger::after { transform: translateY(-4px) rotate(-45deg); }
.burger-label { display: none; }
@media (min-width: 420px) { .burger-label { display: inline; } }
.drawer { position: absolute; right: 0; top: calc(100% + 12px); z-index: 50; display: grid; gap: 2px; min-width: 280px; padding: 12px; border: 1px solid hsl(var(--border)); border-radius: 18px; background: hsl(var(--card)); box-shadow: var(--shadow-lift); }
.drawer .nav-link { min-height: 44px; font-size: 1rem; }
.drawer .btn { margin-top: 10px; }

/* =====================================================================================================================
   4. Type and the small shared pieces
   ================================================================================================================== */
.hero-title, .section-title, .statement-title, .cta-title, .step-title, .bpx-panel h3, .signin-title, .story3-step h3, .next-title { font-family: var(--font-display); font-variation-settings: 'opsz' 96; }
.hero-title { max-width: 15ch; font-size: var(--t-display); font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
.hero-lead { max-width: 52ch; margin-top: var(--space-6); color: hsl(var(--muted-foreground)); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.6; }
.section-title { max-width: 22ch; font-size: var(--t-h2); font-weight: 700; line-height: 1.1; letter-spacing: -0.028em; text-wrap: balance; }
.section-lead { max-width: 60ch; margin-top: var(--space-5); color: hsl(var(--muted-foreground)); font-size: var(--t-body); line-height: 1.65; }
.section-head { max-width: 760px; margin-bottom: var(--space-12); }
.section-more { margin-top: var(--space-10); }
h3 { font: 600 var(--t-h3)/1.3 var(--font-sans); letter-spacing: -0.015em; }
/* the eyebrow: brand-coloured, a quiet caption that names the page or the section */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--space-4); color: hsl(var(--brand-deep)); font: 600 var(--t-caption)/1.25rem var(--font-sans); letter-spacing: 0.01em; }
.eyebrow-chip { padding: 6px 12px; border-radius: 999px; background: hsl(var(--brand-soft)); color: hsl(var(--brand-deep)); }
.line-icon { display: inline-flex; flex: none; color: hsl(var(--brand)); }
.line-icon .icon { width: 22px; height: 22px; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; color: hsl(var(--brand)); font-weight: 600; text-decoration: none; }
.link-arrow .icon { width: 18px; height: 18px; transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover { color: hsl(var(--brand-deep)); text-decoration: none; } .link-arrow:hover .icon { transform: translateX(4px); }
.link-arrow[href^="http"]::after { content: "↗"; margin-left: -2px; font-size: 0.85em; }
.link-arrow[href^="http"] .icon { display: none; }
/* icon containers: a coloured tile, the hue rotating through the palette */
.tile-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: hsl(var(--brand-soft)); color: hsl(var(--brand)); margin-bottom: var(--space-3); }
.tile-icon .icon { width: 22px; height: 22px; }
.tile:nth-child(3n+2) .tile-icon { background: hsl(var(--coral-soft)); color: hsl(var(--coral-deep)); }
.tile:nth-child(3n) .tile-icon { background: hsl(var(--mint-soft)); color: hsl(var(--mint)); }
.tile-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: hsl(var(--brand)); color: #fff; font-size: 0.9375rem; font-weight: 700; margin-bottom: var(--space-3); box-shadow: var(--shadow-brand); }
.tile:nth-child(3n+2) .tile-num { background: hsl(var(--coral)); box-shadow: 0 10px 24px -8px hsl(var(--coral) / 0.5); }
.tile:nth-child(3n) .tile-num { background: hsl(var(--mint)); box-shadow: 0 10px 24px -8px hsl(var(--mint) / 0.5); }
.tile:nth-child(4) .tile-num { background: hsl(var(--violet)); box-shadow: 0 10px 24px -8px hsl(var(--violet) / 0.5); }
.chip, .tag { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; background: hsl(var(--brand-soft)); color: hsl(var(--brand-deep)); font-size: 0.75rem; font-weight: 600; }

/* =====================================================================================================================
   5. Sections: the rhythm of tinted bands, the reveal
   ================================================================================================================== */
.section, .hero { padding-top: var(--s-section); padding-bottom: var(--s-section); }
.js .reveal { transform: translateY(14px); transition: transform 0.7s var(--ease-reveal); }
.js .reveal.is-in { transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { transform: none; transition: none; } }
/* a tone is a full-bleed tinted band behind a .wrap section */
.tone-sky, .tone-indigo, .tone-sand, .tone-mint, .tone-card { position: relative; }
.tone-sky::before, .tone-indigo::before, .tone-sand::before, .tone-mint::before, .tone-card::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; pointer-events: none; }
.tone-sky::before { background: linear-gradient(180deg, hsl(var(--tint-sky)), hsl(212 100% 98.5%)); }
.tone-indigo::before { background: linear-gradient(180deg, hsl(var(--tint-indigo)), hsl(230 100% 98.5%)); }
.tone-sand::before { background: linear-gradient(180deg, hsl(var(--tint-sand)), hsl(32 80% 98.5%)); }
.tone-mint::before { background: linear-gradient(180deg, hsl(var(--tint-mint)), hsl(160 55% 98.5%)); }
.tone-card::before { background: hsl(var(--card) / 0.7); }
/* a .band is the old name of the same thing */
.band { position: relative; }
.band::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: linear-gradient(180deg, hsl(var(--tint-indigo)), hsl(230 100% 98.5%)); }

/* =====================================================================================================================
   6. Heroes
   ================================================================================================================== */
.hero { position: relative; display: grid; gap: var(--space-12); }
@media (min-width: 960px) { .hero-split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); align-items: center; } .hero-split .hero-copy { grid-column: 1 / span 6; } .hero-split .hero-visual { grid-column: 7 / span 6; } }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); margin-top: var(--space-8); }
@media (max-width: 479px) { .hero-ctas .btn { width: 100%; } }
.hero-visual { position: relative; max-width: 560px; margin: 0 auto; will-change: transform; }
@media (min-width: 960px) { .hero-visual { max-width: none; margin: 0; } }
/* a soft tinted wash behind every sub-page hero, sky at the left, coral at the right */
.hero:not(.hero-v4)::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; pointer-events: none; background:
  radial-gradient(70% 90% at 0% 0%, hsl(var(--brand-sky) / 0.14), transparent 60%),
  radial-gradient(50% 80% at 100% 100%, hsl(var(--coral) / 0.12), transparent 60%),
  linear-gradient(180deg, hsl(var(--tint-indigo)), hsl(var(--background))); }
.hero-contact { grid-template-columns: 1fr; }
@media (min-width: 960px) { .hero-contact { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; column-gap: var(--space-16); } }
.contact-panel { padding: var(--s-card); border: 1px solid hsl(var(--border)); border-radius: var(--radius-tile); background: hsl(var(--card)); box-shadow: var(--shadow-float); }
.contact-panel.glass { background: hsl(var(--card) / 0.92); }
.contact-photo { max-width: 440px; aspect-ratio: 16 / 10; margin-top: var(--space-10); }
.hero-photo-wrap { position: relative; }
.hero-photo { position: relative; aspect-ratio: 5 / 4; overflow: hidden; border-radius: var(--radius-tile); box-shadow: var(--shadow-float); max-width: 620px; }
.hero-photo .photo, .hero-photo img { height: 100%; }
@media (min-width: 960px) { .hero-photo { aspect-ratio: 4 / 3; max-width: none; } }
.hero-photo img { transform: scale(1.04); transition: transform 1.2s var(--ease-out); }
.hero-photo:hover img { transform: scale(1); }
.hero-photo-wrap + .hero-ctas, .split-visual.hero-photo-wrap { margin-bottom: 32px; }

/* the home hero: the hall behind a coloured scrim, the words left, the live scene right */
.hero-v4 { position: relative; display: flex; align-items: center; min-height: 0; margin-top: -72px; padding: 136px 0 var(--s-section); overflow: hidden; }
@media (min-width: 960px) { .hero-v4 { min-height: min(78vh, 760px); padding: 168px 0 var(--s-section); } }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg .photo-bg, .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero-bg img { animation: kenburns 28s ease-out both; transform-origin: 60% 45%; filter: saturate(0.9) contrast(1.04); }
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .hero-bg img { animation: none; } }
.hero-bg::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, hsl(var(--tint-indigo) / 0.96) 0%, hsl(var(--tint-indigo) / 0.84) 36%, hsl(var(--tint-sky) / 0.42) 64%, hsl(var(--tint-sky) / 0.28) 100%),
  linear-gradient(180deg, hsl(var(--background) / 0.55) 0%, hsl(var(--background) / 0) 26%, hsl(var(--background) / 0) 74%, hsl(var(--background)) 100%); }
.hero-bg::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  radial-gradient(50% 60% at 12% 20%, hsl(var(--brand-sky) / 0.22), transparent 65%),
  radial-gradient(40% 50% at 90% 10%, hsl(var(--coral) / 0.2), transparent 65%),
  radial-gradient(40% 40% at 70% 95%, hsl(var(--violet) / 0.14), transparent 65%); }
.hero-grid { position: relative; z-index: 1; display: grid; gap: var(--space-12); align-items: center; }
@media (min-width: 960px) { .hero-b .hero-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); } .hero-b .hero-copy { grid-column: 1 / span 6; } .hero-b .hero-scene { grid-column: 7 / span 6; } }
.hero-v4 .hero-copy { max-width: 620px; }
.js .hero-v4 .hero-copy > * { animation: kw-in 0.9s var(--ease-reveal) both; }
.js .hero-v4 .hero-copy > :nth-child(1) { animation-delay: 0.05s; } .js .hero-v4 .hero-copy > :nth-child(2) { animation-delay: 0.15s; } .js .hero-v4 .hero-copy > :nth-child(3) { animation-delay: 0.3s; } .js .hero-v4 .hero-copy > :nth-child(4) { animation-delay: 0.45s; }
@keyframes kw-in { from { opacity: 0; transform: translateY(0.35em); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .hero-v4 .hero-copy > * { animation: none; opacity: 1; transform: none; } }
/* the scene: the canvas in a glass panel over a faint brand grid */
.hero-scene { position: relative; width: 100%; aspect-ratio: 760 / 560; max-width: 760px; margin: 0 auto; padding: 10px; border: 1px solid hsl(var(--card) / 0.9); border-radius: 24px; background: hsl(var(--card) / 0.62); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: var(--shadow-float), inset 0 1px 0 hsl(var(--card)); will-change: transform; }
.hero-scene::before { content: ""; position: absolute; inset: 10px; border-radius: 16px; pointer-events: none; background-image: linear-gradient(hsl(var(--brand) / 0.07) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--brand) / 0.07) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent); -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent); }
@media (min-width: 960px) { .hero-scene { max-width: none; margin: 0; } }
@media (max-width: 599px) { .hero-scene { aspect-ratio: 1 / 1; } }
.scene { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); display: block; opacity: 0; transition: opacity 0.8s var(--ease-out); }
.scene.is-live { opacity: 1; }
.scene-fallback { position: absolute; inset: 10px; display: flex; align-items: center; justify-content: center; }
.scene-fallback .art { width: 78%; height: auto; }
.js .scene.is-live + .scene-fallback { display: none; }

/* =====================================================================================================================
   7. Surfaces: tiles, duo cards, the before/after columns, the glass, the cursor light
   ================================================================================================================== */
.bento { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } }
@media (min-width: 1024px) { .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bento-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--s-card); border: 1px solid hsl(var(--border)); border-radius: var(--radius-tile); background: hsl(var(--card)); color: hsl(var(--foreground)); text-decoration: none; box-shadow: var(--shadow-card); transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.tile p { color: hsl(var(--muted-foreground)); line-height: 1.6; }
a.tile:hover { border-color: hsl(var(--brand) / 0.4); box-shadow: var(--shadow-lift); transform: translateY(-3px); text-decoration: none; }
.tile-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: var(--space-3); color: hsl(var(--brand)); font-size: 0.9375rem; font-weight: 600; }
.tile-more .icon { width: 18px; height: 18px; transition: transform var(--dur) var(--ease-out); }
a.tile:hover .tile-more .icon { transform: translateX(3px); }
/* industry photo tiles */
.tile-photo { padding: 0; overflow: hidden; }
.tile-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: hsl(var(--background-elevated)); }
.tile-img .photo, .tile-img img { height: 100%; }
.tile-img img { transition: transform 1s var(--ease-out); }
.tile-photo:hover .tile-img img { transform: scale(1.04); }
.tile-photo h3 { padding: var(--space-6) var(--s-card) 0; }
.tile-photo p { padding: 0 var(--s-card) var(--s-card); }
/* the duo */
.duo { display: grid; gap: var(--space-6); }
@media (min-width: 860px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.duo-card { position: relative; display: flex; flex-direction: column; gap: var(--space-5); padding: var(--s-card); border: 1px solid hsl(var(--border)); border-radius: var(--radius-tile); background: hsl(var(--card)); box-shadow: var(--shadow-card); }
.duo-card .section-title { font-size: clamp(1.375rem, 1rem + 1.2vw, 1.875rem); }
.duo-card .section-lead { margin-top: 0; }
.duo-muted { background: linear-gradient(180deg, hsl(var(--tint-sand)), hsl(var(--card))); border-color: hsl(var(--amber) / 0.2); }
.duo-accent { background: linear-gradient(160deg, hsl(var(--brand-soft)), hsl(var(--card)) 70%); border-color: hsl(var(--brand) / 0.25); }
.data-text { font-size: var(--t-body); line-height: 1.65; }
/* the before / after columns */
.story { display: grid; gap: var(--space-5); }
@media (min-width: 760px) { .story { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } }
.story-col { position: relative; padding: var(--s-card); border: 1px solid hsl(var(--border)); border-radius: var(--radius-tile); background: hsl(var(--card)); box-shadow: var(--shadow-card); }
.story-before { background: linear-gradient(180deg, hsl(var(--tint-sand)), hsl(var(--card)) 60%); border-color: hsl(var(--amber) / 0.25); }
.story-after { border-color: hsl(var(--brand) / 0.3); background: linear-gradient(180deg, hsl(var(--brand-soft)), hsl(var(--card)) 60%); }
.story-label { display: inline-flex; margin-bottom: var(--space-5); padding: 5px 12px; border-radius: 999px; background: hsl(var(--amber-soft)); color: hsl(var(--amber)); font-size: var(--t-caption); font-weight: 700; }
.story-after .story-label { background: hsl(var(--brand)); color: #fff; }
.story-steps { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.story-steps li { display: flex; gap: var(--space-3); align-items: flex-start; line-height: 1.55rem; }
.story-num { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; background: hsl(var(--amber-soft)); color: hsl(var(--amber)); font-size: 0.75rem; font-weight: 700; }
.story-after .story-num { background: hsl(var(--brand)); color: #fff; }
.story-note { max-width: 70ch; margin-top: var(--space-8); padding: var(--space-5) var(--space-6); border-radius: var(--radius-card); background: hsl(var(--brand-soft) / 0.7); border: 1px solid hsl(var(--brand) / 0.15); color: hsl(var(--foreground)); line-height: 1.6; }
/* glass and the cursor light */
.glass { position: relative; border: 1px solid hsl(var(--card) / 0.9); border-radius: var(--radius-tile); background: hsl(var(--card) / 0.72); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: var(--shadow-lift), inset 0 1px 0 hsl(var(--card)); }
.tile, .glass, .duo-card, .story-col { --mx: 50%; --my: 50%; }
.tile::after, .glass::after, .duo-card::after, .story-col::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(280px circle at var(--mx) var(--my), hsl(var(--brand) / 0.1), transparent 60%); transition: opacity var(--dur) var(--ease-out); }
.tile:hover::after, .glass:hover::after, .duo-card:hover::after, .story-col:hover::after { opacity: 1; }
/* the page transition */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 0.18s ease-out both vt-out; }
::view-transition-new(root) { animation: 0.32s var(--ease-reveal) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* =====================================================================================================================
   8. Compositions: split, steps, what you get, lists, Q&A, cases, FAQ
   ================================================================================================================== */
.split { display: grid; gap: var(--space-10); align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); } .split-copy { grid-column: 1 / span 6; } .split-visual { grid-column: 8 / span 5; max-width: none; } .split-prob .split-copy { grid-column: 1 / span 6; } .split-prob .split-visual { grid-column: 7 / span 6; max-width: none; } }
.split-copy > * + * { margin-top: var(--space-6); }
.split-copy .section-title { margin-top: 0; }
.split-copy .section-lead { margin-top: var(--space-5); }
.split-visual { max-width: 560px; margin: 0 auto; width: 100%; }
/* the steps of how it works */
.steps-list { display: grid; gap: var(--space-16); padding-top: var(--space-12); padding-bottom: var(--space-8); }
@media (min-width: 960px) { .steps-list { gap: 120px; padding-top: 88px; } }
.step-row { display: grid; gap: var(--space-10); align-items: center; }
@media (min-width: 960px) { .step-row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); } .step-copy { grid-column: 1 / span 5; } .step-visual { grid-column: 7 / span 6; max-width: none; } .step-row.is-flipped .step-copy { grid-column: 8 / span 5; order: 2; } .step-row.is-flipped .step-visual { grid-column: 1 / span 6; order: 1; } }
.step-label { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); color: hsl(var(--brand-deep)); font: 600 var(--t-caption)/1.25rem var(--font-sans); }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: hsl(var(--brand)); color: #fff; font-size: 0.8125rem; font-weight: 700; box-shadow: var(--shadow-brand); }
.step-row:nth-child(2) .step-num, .step-row:nth-child(2) .step-label { background-color: hsl(var(--coral)); color: hsl(var(--coral-deep)); } .step-row:nth-child(2) .step-num { color: #fff; box-shadow: 0 10px 24px -8px hsl(var(--coral) / 0.5); } .step-row:nth-child(2) .step-label { background: none; }
.step-row:nth-child(3) .step-num { background: hsl(var(--violet)); box-shadow: 0 10px 24px -8px hsl(var(--violet) / 0.5); } .step-row:nth-child(3) .step-label { color: hsl(var(--violet)); }
.step-row:nth-child(4) .step-num { background: hsl(var(--mint)); box-shadow: 0 10px 24px -8px hsl(var(--mint) / 0.5); } .step-row:nth-child(4) .step-label { color: hsl(var(--mint)); }
.step-title { font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.375rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; }
.step-copy > p + p { margin-top: var(--space-4); }
.step-copy .section-lead { margin-top: var(--space-5); }
.step-visual { max-width: 560px; margin: 0 auto; width: 100%; }
.step-own { margin-top: var(--space-6); padding: var(--space-4) var(--space-5); border-radius: var(--radius-card); background: hsl(var(--mint-soft)); color: hsl(var(--mint)); font-weight: 600; }
.flow-art { margin: var(--space-2) 0 0; padding: var(--space-6); border: 1px solid hsl(var(--border)); border-radius: var(--radius-tile); background: hsl(var(--card)); box-shadow: var(--shadow-card); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.flow-art .art { display: block; width: 100%; min-width: 680px; height: auto; }
.art-box { padding: var(--s-card); border: 1px solid hsl(var(--border)); border-radius: var(--radius-tile); background: linear-gradient(180deg, hsl(var(--card)), hsl(var(--tint-indigo))); box-shadow: var(--shadow-card); }
.art-box .art { display: block; width: 100%; height: auto; }
/* what you get */
.gets { display: grid; gap: var(--space-8) var(--space-10); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .gets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .gets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.get-item { display: flex; gap: var(--space-4); }
.get-item .line-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: hsl(var(--brand-soft)); color: hsl(var(--brand)); }
.get-item:nth-child(3n+2) .line-icon { background: hsl(var(--coral-soft)); color: hsl(var(--coral-deep)); }
.get-item:nth-child(3n) .line-icon { background: hsl(var(--mint-soft)); color: hsl(var(--mint)); }
.get-item h3 { margin-bottom: var(--space-2); }
.get-item p { line-height: 1.6; }
/* checks and crosses */
.checks, .crosses { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.checks li, .crosses li { display: flex; gap: var(--space-3); align-items: flex-start; line-height: 1.55rem; }
.checks .line-icon, .crosses .line-icon { width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 50%; }
.checks .line-icon { background: hsl(var(--mint-soft)); color: hsl(var(--mint)); }
.checks .line-icon .icon, .crosses .line-icon .icon { width: 16px; height: 16px; }
.crosses .line-icon { background: hsl(var(--coral-soft)); color: hsl(var(--coral-deep)); }
/* Q&A, where */
.qas { display: grid; gap: var(--space-5); }
.qa { padding: var(--space-6); border: 1px solid hsl(var(--border)); border-radius: var(--radius-card); background: hsl(var(--card)); box-shadow: var(--shadow-card); }
.qa h3 { margin-bottom: var(--space-2); }
.wheres { display: grid; gap: var(--space-6); }
@media (min-width: 760px) { .wheres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* solutions */
.cases { display: grid; gap: var(--space-16); padding-top: var(--space-4); padding-bottom: var(--s-section); }
@media (min-width: 960px) { .cases { gap: 112px; } }
.case-head { display: grid; gap: var(--space-6); margin-bottom: var(--space-8); align-items: center; }
@media (min-width: 760px) { .case-head { grid-template-columns: 260px minmax(0, 1fr); column-gap: var(--space-10); } }
.case-art { padding: var(--space-4); border: 1px solid hsl(var(--border)); border-radius: var(--radius-tile); background: linear-gradient(160deg, hsl(var(--brand-soft)), hsl(var(--card))); }
.case:nth-child(2) .case-art { background: linear-gradient(160deg, hsl(var(--coral-soft)), hsl(var(--card))); }
.case:nth-child(3) .case-art { background: linear-gradient(160deg, hsl(var(--mint-soft)), hsl(var(--card))); }
.case:nth-child(4) .case-art { background: linear-gradient(160deg, hsl(var(--violet-soft)), hsl(var(--card))); }
.case-art .art { display: block; width: 100%; height: auto; }
.case-tag { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-4); color: hsl(var(--muted-foreground)); font-size: var(--t-caption); font-weight: 500; }
/* FAQ */
.faq { max-width: 820px; display: grid; gap: var(--space-3); }
.faq-item { border: 1px solid hsl(var(--border)); border-radius: var(--radius-card); background: hsl(var(--card)); box-shadow: var(--shadow-card); transition: border-color var(--dur) var(--ease-out); }
.faq-item[open] { border-color: hsl(var(--brand) / 0.35); }
.faq-item summary { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6); font-size: 1.0625rem; font-weight: 600; cursor: pointer; list-style: none; border-radius: var(--radius-card); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item > summary:not(.btn)::before { content: none; }
.faq-item summary > span { flex: 1; text-align: left; }
.faq-item summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; background: hsl(var(--brand-soft)); color: hsl(var(--brand-deep)); text-align: center; line-height: 28px; font-weight: 600; transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); }
.faq-item[open] summary::after { transform: rotate(45deg); background: hsl(var(--brand)); color: #fff; }
.faq-item p { max-width: 68ch; padding: 0 var(--space-6) var(--space-6); line-height: 1.65; }

/* =====================================================================================================================
   9. The closing band, the guided path, the footer
   ================================================================================================================== */
.cta-band { position: relative; display: grid; gap: var(--space-8); padding: var(--s-card); border-radius: var(--radius-tile); color: #fff; background: linear-gradient(120deg, hsl(var(--brand-deep)) 0%, hsl(var(--brand)) 55%, hsl(var(--brand-sky)) 100%); box-shadow: 0 30px 70px -30px hsl(var(--brand) / 0.6); overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 80% at 100% 0%, hsl(var(--coral) / 0.55), transparent 60%), radial-gradient(40% 60% at 0% 100%, hsl(0 0% 100% / 0.12), transparent 60%); }
.cta-band > * { position: relative; }
@media (min-width: 860px) { .cta-band { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; padding: 56px; } }
.cta-title { max-width: 20ch; font-size: var(--t-h2); font-weight: 700; line-height: 1.1; letter-spacing: -0.028em; text-wrap: balance; }
.cta-lead { max-width: 48ch; margin-top: var(--space-4); color: hsl(0 0% 100% / 0.82); font-size: var(--t-body); line-height: 1.6; }
.cta-actions { display: grid; gap: var(--space-5); justify-items: start; }
@media (min-width: 860px) { .cta-actions { justify-items: end; text-align: right; } }
@media (max-width: 479px) { .cta-actions .btn { width: 100%; } }
.cta-band .btn { background: #fff; border-color: #fff; color: hsl(var(--brand-deep)); box-shadow: 0 10px 30px -10px hsl(231 60% 10% / 0.5); }
.cta-band .btn:hover { background: hsl(var(--brand-soft)); border-color: hsl(var(--brand-soft)); color: hsl(var(--brand-deep)); }
.cta-mails { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); }
.cta-band .contact-mail { color: #fff; font-weight: 500; text-decoration: underline; text-decoration-color: hsl(0 0% 100% / 0.4); }
.cta-band .contact-mail:hover { text-decoration-color: #fff; }
.contact-mail { color: hsl(var(--brand)); font-weight: 600; }
.next-link { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: 0; padding: var(--space-6) var(--s-card); border: 1px solid hsl(var(--border)); border-radius: var(--radius-tile); background: hsl(var(--card)); color: hsl(var(--foreground)); text-decoration: none; box-shadow: var(--shadow-card); transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.next-link:hover { border-color: hsl(var(--brand) / 0.4); box-shadow: var(--shadow-lift); transform: translateY(-2px); text-decoration: none; }
.next-kicker { color: hsl(var(--brand-deep)); font: 600 var(--t-caption)/1.25rem var(--font-sans); }
.next-title { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; }
.next-link .icon { width: 24px; height: 24px; color: hsl(var(--brand)); transition: transform var(--dur) var(--ease-out); }
.next-link:hover .icon { transform: translateX(4px); }

.site-footer { position: relative; margin-top: var(--s-section); padding: var(--space-16) 0 var(--space-10); background: linear-gradient(180deg, hsl(var(--tint-indigo)), hsl(var(--background-elevated))); }
.site-footer { border-top: 1px solid hsl(var(--brand) / 0.16); }
@media (min-width: 960px) { .site-footer { padding-top: 80px; } }
.footer-grid { display: grid; gap: var(--space-10); }
@media (min-width: 760px) { .footer-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); } }
.footer-brand { display: grid; gap: var(--space-3); justify-items: start; max-width: 42ch; }
.footer-brand .text-muted { line-height: 1.55; }
.footer-mails { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-2); }
.footer-mails a { color: hsl(var(--brand)); font-weight: 600; }
.footer-col { display: grid; gap: var(--space-3); align-content: start; }
.footer-col a { color: hsl(var(--foreground)); font-weight: 500; width: fit-content; }
.footer-col a:hover { color: hsl(var(--brand-deep)); }
.footer-title { margin-bottom: var(--space-2); color: hsl(var(--brand-deep)); font: 700 var(--t-caption)/1.25rem var(--font-sans); letter-spacing: 0.02em; text-transform: uppercase; }
.footer-end { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid hsl(var(--brand) / 0.14); }
.footer-end a { color: hsl(var(--brand)); font-weight: 500; }

/* =====================================================================================================================
   10. Sign-in, the result pages, the 404
   ================================================================================================================== */
.signin { display: flex; justify-content: center; padding-top: var(--s-section); padding-bottom: var(--s-section); }
.signin-col { display: grid; gap: var(--space-6); width: 100%; max-width: 480px; }
.signin-title { font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.25rem); font-weight: 700; letter-spacing: -0.025em; text-align: center; }
.signin-panel { display: grid; gap: var(--space-5); padding: var(--s-card); border-radius: var(--radius-tile); box-shadow: var(--shadow-float); }
.signin-panel p { line-height: 1.6; }
.signin-note { margin: 0; padding: var(--space-4) var(--space-5); border-radius: var(--radius-card); border-color: hsl(var(--brand) / 0.25); background: hsl(var(--brand-soft)); }
.notice-icon { display: inline-flex; color: hsl(var(--brand)); padding-top: 1px; }
.signin-mark { margin: 0 auto var(--space-2); }
main, .site-footer { position: relative; }

/* =====================================================================================================================
   11. Device frames and the product screens (the portal, the phone, the proposal)
   ================================================================================================================== */
.device { margin: 0; }
.device-browser { border-radius: var(--radius-device); background: hsl(var(--card)); box-shadow: var(--shadow-float); overflow: hidden; border: 1px solid hsl(var(--border)); }
.device-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--background-elevated)); }
.device-dots { display: inline-flex; gap: 6px; }
.device-dots i { width: 10px; height: 10px; border-radius: 50%; background: hsl(var(--coral)); }
.device-dots i:nth-child(2) { background: hsl(var(--amber)); } .device-dots i:nth-child(3) { background: hsl(var(--mint)); }
.device-url { flex: 1; max-width: 240px; padding: 4px 10px; border-radius: 6px; background: hsl(var(--card)); color: hsl(var(--muted-foreground)); font-size: 0.6875rem; text-align: center; }
.device-caption { padding: 8px 14px; border-top: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); font-size: 0.6875rem; text-align: right; }
.device-phone { width: 300px; max-width: 100%; margin: 0 auto; padding: 10px; border: 1px solid hsl(var(--border-strong)); border-radius: 44px; background: hsl(var(--card)); box-shadow: var(--shadow-float); }
.device-phone .device-screen { border-radius: 34px; overflow: hidden; background: hsl(var(--background)); }
.device-notch { width: 96px; height: 24px; margin: 0 auto 2px; border-radius: 0 0 14px 14px; background: hsl(var(--navy)); }
.device-phone .device-caption { border-top: 0; text-align: center; padding-bottom: 2px; }

.app { display: grid; grid-template-columns: 1fr; min-height: 330px; font-size: 0.8125rem; line-height: 1.25rem; container-type: inline-size; }
@media (min-width: 480px) { .app { grid-template-columns: 148px minmax(0, 1fr); } }
.app-side { display: none; flex-direction: column; gap: 14px; padding: 16px 12px; border-right: 1px solid hsl(var(--border)); background: hsl(var(--tint-indigo)); }
@media (min-width: 480px) { .app-side { display: flex; } }
.app-mark { width: 22px; height: 22px; margin-left: 4px; }
.app-nav { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.app-nav li { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; color: hsl(var(--muted-foreground)); font-weight: 500; }
.app-nav li.is-on { background: hsl(var(--card)); color: hsl(var(--brand-deep)); box-shadow: 0 0 0 1px hsl(var(--brand) / 0.2), var(--shadow-card); }
.app-badge { margin-left: auto; min-width: 18px; padding: 0 5px; border-radius: 9px; background: hsl(var(--coral)); color: #fff; font-size: 0.6875rem; font-weight: 700; text-align: center; line-height: 18px; }
.app-main { padding: 18px 18px 16px; display: grid; gap: 14px; align-content: start; }
.app-head h3 { font-size: 1.0625rem; }
.app-head p { color: hsl(var(--muted-foreground)); }
.app-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.app-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; align-items: start; padding: 10px 12px; border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--card)); }
@container (min-width: 620px) { .app-row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; } }
.app-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: hsl(var(--brand)); }
.app-dot.is-warn { background: hsl(var(--coral)); }
.app-row-text { display: grid; gap: 1px; min-width: 0; }
.app-row-text strong { font-weight: 600; }
.app-row-text small { color: hsl(var(--muted-foreground)); font-size: 0.6875rem; }
.app-row-actions { display: inline-flex; gap: 6px; grid-column: 2; }
@container (min-width: 620px) { .app-row-actions { grid-column: auto; } }
.app-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 28px; padding: 0 10px; border: 1px solid hsl(var(--border-strong)); border-radius: 8px; background: hsl(var(--card)); color: hsl(var(--foreground)); font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.app-btn-primary { border-color: hsl(var(--brand)); background: hsl(var(--brand)); color: #fff; }
.app-btn-block { width: 100%; min-height: 40px; font-size: 0.8125rem; }
.app-today { padding-top: 12px; border-top: 1px solid hsl(var(--border)); }
.app-today-label { margin-bottom: 8px; color: hsl(var(--brand-deep)); font-size: 0.6875rem; font-weight: 600; }
.app-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.app-stat { display: grid; gap: 0; padding: 8px 10px; border-radius: 10px; background: hsl(var(--brand-soft)); }
.app-stat:nth-child(2) { background: hsl(var(--mint-soft)); } .app-stat:nth-child(3) { background: hsl(var(--coral-soft)); }
.app-stat strong { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: hsl(var(--brand-deep)); }
.app-stat:nth-child(2) strong { color: hsl(var(--mint)); } .app-stat:nth-child(3) strong { color: hsl(var(--coral-deep)); }
.app-stat span { color: hsl(var(--muted-foreground)); font-size: 0.6875rem; line-height: 1rem; }

.ph { display: grid; gap: 12px; padding: 18px 18px 22px; font-size: 0.8125rem; line-height: 1.25rem; }
.ph-top { display: flex; align-items: center; gap: 8px; color: hsl(var(--muted-foreground)); font-weight: 500; }
.ph-step { color: hsl(var(--brand-deep)); font-size: 0.75rem; font-weight: 600; }
.ph-progress { height: 4px; border-radius: 2px; background: hsl(var(--border)); overflow: hidden; }
.ph-progress i { display: block; width: 44%; height: 100%; border-radius: 2px; background: linear-gradient(90deg, hsl(var(--brand-sky)), hsl(var(--brand))); }
.ph-q { font-size: 1.125rem; line-height: 1.5rem; letter-spacing: -0.02em; }
.ph-hint { color: hsl(var(--muted-foreground)); }
.ph-answer { position: relative; min-height: 64px; padding: 10px 12px; border: 1px solid hsl(var(--brand)); border-radius: 10px; background: hsl(var(--card)); color: hsl(var(--foreground)); box-shadow: 0 0 0 3px hsl(var(--brand) / 0.15); }
.ph-caret { display: inline-block; width: 1.5px; height: 14px; margin-left: 2px; vertical-align: -2px; background: hsl(var(--brand)); animation: ph-blink 1.1s steps(1) infinite; }
@keyframes ph-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ph-caret { animation: none; } }

.doc { padding: 18px; display: grid; gap: 14px; font-size: 0.8125rem; line-height: 1.25rem; }
.doc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.doc-kicker { font-size: 1rem; font-weight: 700; letter-spacing: -0.015em; }
.doc-table { width: 100%; border-collapse: collapse; }
.doc-table th, .doc-table td { padding: 9px 8px; border-bottom: 1px solid hsl(var(--border)); text-align: left; vertical-align: top; }
.doc-table thead th { color: hsl(var(--brand-deep)); font-size: 0.6875rem; font-weight: 600; }
.doc-table tbody th { font-weight: 600; }
.doc-table td:last-child { color: hsl(var(--coral-deep)); font-weight: 600; }
.doc-note { color: hsl(var(--muted-foreground)); font-size: 0.75rem; }

/* =====================================================================================================================
   12. The Blueprint explorer (radio buttons, no script)
   ================================================================================================================== */
.bpx { display: grid; gap: var(--space-6); }
@media (min-width: 860px) { .bpx { grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-8); align-items: start; } }
.bpx-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bpx-tabs { display: grid; gap: 8px; }
.bpx-tab { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid hsl(var(--border)); border-radius: 14px; background: hsl(var(--card)); font-weight: 600; cursor: pointer; box-shadow: var(--shadow-card); transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); }
.bpx-tab:hover { border-color: hsl(var(--brand) / 0.4); background: hsl(var(--brand-soft) / 0.6); }
.bpx-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: hsl(var(--brand-soft)); color: hsl(var(--brand-deep)); font-size: 0.8125rem; font-weight: 700; flex: none; transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.bpx-panels { position: relative; }
.bpx-panel { display: none; padding: var(--s-card); border: 1px solid hsl(var(--border)); border-radius: var(--radius-tile); background: hsl(var(--card)); box-shadow: var(--shadow-card); }
.bpx-panel h3 { font-size: 1.5rem; letter-spacing: -0.025em; margin-bottom: var(--space-3); }
.bpx-count { color: hsl(var(--brand)); font-weight: 600; font-size: 0.875em; margin-right: 4px; }
.bpx-desc { max-width: 56ch; color: hsl(var(--muted-foreground)); font-size: var(--t-body); line-height: 1.6; margin-bottom: var(--space-6); }
.bpx-findings { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bpx-findings li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--background)); }
.bpx-finding { flex: 1 1 240px; font-weight: 500; }
.bpx-src { padding: 3px 9px; border-radius: 999px; background: hsl(var(--brand-soft)); color: hsl(var(--brand-deep)); font-size: 0.75rem; font-weight: 600; font-style: normal; }
.bpx-risk { padding: 3px 9px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.bpx-risk.is-high { background: hsl(var(--coral-soft)); color: hsl(var(--coral-deep)); }
.bpx-risk.is-mid { background: hsl(var(--amber-soft)); color: hsl(var(--amber)); }
.bpx-risk.is-low { background: hsl(var(--mint-soft)); color: hsl(var(--mint)); }
.bpx-input:nth-of-type(1):checked ~ .bpx-tabs .bpx-tab:nth-child(1), .bpx-input:nth-of-type(2):checked ~ .bpx-tabs .bpx-tab:nth-child(2), .bpx-input:nth-of-type(3):checked ~ .bpx-tabs .bpx-tab:nth-child(3), .bpx-input:nth-of-type(4):checked ~ .bpx-tabs .bpx-tab:nth-child(4), .bpx-input:nth-of-type(5):checked ~ .bpx-tabs .bpx-tab:nth-child(5) { border-color: hsl(var(--brand)); background: hsl(var(--brand-soft)); box-shadow: 0 0 0 3px hsl(var(--brand) / 0.14); }
.bpx-input:nth-of-type(1):checked ~ .bpx-tabs .bpx-tab:nth-child(1) .bpx-num, .bpx-input:nth-of-type(2):checked ~ .bpx-tabs .bpx-tab:nth-child(2) .bpx-num, .bpx-input:nth-of-type(3):checked ~ .bpx-tabs .bpx-tab:nth-child(3) .bpx-num, .bpx-input:nth-of-type(4):checked ~ .bpx-tabs .bpx-tab:nth-child(4) .bpx-num, .bpx-input:nth-of-type(5):checked ~ .bpx-tabs .bpx-tab:nth-child(5) .bpx-num { background: hsl(var(--brand)); color: #fff; }
.bpx-input:nth-of-type(1):checked ~ .bpx-panels .bpx-panel:nth-child(1), .bpx-input:nth-of-type(2):checked ~ .bpx-panels .bpx-panel:nth-child(2), .bpx-input:nth-of-type(3):checked ~ .bpx-panels .bpx-panel:nth-child(3), .bpx-input:nth-of-type(4):checked ~ .bpx-panels .bpx-panel:nth-child(4), .bpx-input:nth-of-type(5):checked ~ .bpx-panels .bpx-panel:nth-child(5) { display: block; animation: bpx-in 0.35s var(--ease-reveal); }
.bpx-input:focus-visible ~ .bpx-tabs { outline: 2px solid hsl(var(--ring)); outline-offset: 4px; border-radius: 16px; }
@keyframes bpx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bpx-panel { animation: none !important; } }

/* =====================================================================================================================
   13. The drawings (src/art.mjs): tokens and the page font
   ================================================================================================================== */
.art { font-family: var(--font-sans); overflow: visible; }
.a-card { fill: hsl(var(--card)); stroke: hsl(var(--border-strong)); stroke-width: 1; }
.a-paper-card { fill: hsl(var(--tint-indigo)); stroke: hsl(var(--brand) / 0.2); stroke-width: 1; }
.a-ink { fill: hsl(var(--navy)); }
.a-paper { fill: hsl(var(--background)); }
.a-pill { fill: hsl(0 0% 100% / 0.14); }
.a-soft { fill: hsl(var(--brand-soft)); }
.a-accent { fill: hsl(var(--brand)); }
.a-red { fill: hsl(var(--coral)); }
.a-red-soft { fill: hsl(var(--coral-soft)); }
.a-amber { fill: hsl(var(--amber)); }
.a-green { fill: hsl(var(--mint)); }
.a-bar { fill: hsl(var(--border-strong)); }
.a-bar-strong { fill: hsl(var(--brand) / 0.55); }
.a-layer { fill: hsl(var(--card)); stroke: hsl(var(--brand) / 0.25); }
.a-tag { fill: hsl(var(--brand-soft)); }
.a-outline { fill: hsl(var(--card)); stroke: hsl(var(--border-strong)); stroke-width: 1.25; }
.a-line { stroke: hsl(var(--border)); stroke-width: 1; }
.a-flow { fill: none; stroke: hsl(var(--brand) / 0.45); stroke-width: 1.5; stroke-linecap: round; }
.a-flow-dashed { stroke: hsl(var(--coral)); stroke-dasharray: 4 5; animation: a-dash 1.6s linear infinite; }
@keyframes a-dash { to { stroke-dashoffset: -18; } }
@media (prefers-reduced-motion: reduce) { .a-flow-dashed { animation: none; } }
.a-icon { fill: none; stroke: hsl(var(--foreground)); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.a-icon-accent { stroke: hsl(var(--brand)); }
.a-icon-red { stroke: hsl(var(--coral-deep)); }
.a-icon-green { stroke: hsl(var(--mint)); }
.a-tick { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.a-tick.a-paper { stroke: #fff; fill: none; }
.a-tick.a-ink { stroke: hsl(var(--foreground)); fill: none; }
.a-tick.a-icon-green { stroke: hsl(var(--mint)); }
.a-tick-lg { stroke-width: 3.5; transform: scale(1.7); transform-origin: 0 0; transform-box: fill-box; }
.a-t { fill: hsl(var(--foreground)); font-size: 13px; font-weight: 400; }
.a-t-strong { font-weight: 600; }
.a-t-lg { font-size: 15px; }
.a-t-sm { font-size: 12px; }
.a-t-small { font-size: 11.5px; fill: hsl(var(--muted-foreground)); }
.a-t-tiny { font-size: 10px; fill: hsl(var(--muted-foreground)); }
.a-t-paper { fill: #fff; }
.a-t-red { fill: hsl(var(--coral-deep)); }
.a-t-center { text-anchor: middle; }
.a-t-end { text-anchor: end; }
.a-ring { fill: none; stroke: #fff; }
.a-ring.a-ink { stroke: hsl(var(--foreground)); }

/* =====================================================================================================================
   14. The home: today, the statement, the scroll story and its stage, the day, the engine room, trust
   ================================================================================================================== */
.split-prob .split-visual { max-width: 520px; }
.split-prob .photo-frame { aspect-ratio: 4 / 3; }
.prob-list { display: grid; gap: 10px; margin: var(--space-8) 0 0; padding: 0; list-style: none; }
.prob-list li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid hsl(var(--coral) / 0.2); border-radius: 14px; background: hsl(var(--card)); line-height: 1.5rem; box-shadow: var(--shadow-card); }
.prob-num { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; background: hsl(var(--coral-soft)); color: hsl(var(--coral-deep)); font-size: 0.75rem; font-weight: 700; }

.statement { padding: 0; color: hsl(var(--foreground)); }
.statement.glass { border: 0; background: transparent; backdrop-filter: none; box-shadow: none; }
.statement.glass::after { display: none; }
.statement-title { max-width: 24ch; font-size: var(--t-h2); font-weight: 700; line-height: 1.1; letter-spacing: -0.028em; text-wrap: balance; }
.statement-plain { max-width: 62ch; margin: var(--space-5) 0 var(--space-8); color: hsl(var(--muted-foreground)); font-size: var(--t-body); line-height: 1.65; }
.statement .link-arrow { color: hsl(var(--brand)); }
.os-steps { display: grid; gap: 12px; max-width: 960px; margin: 0 0 var(--space-8); padding: 0; list-style: none; }
@media (min-width: 760px) { .os-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.os-step { position: relative; display: grid; gap: 4px; padding: 20px 20px 20px 60px; border: 1px solid hsl(var(--border)); border-radius: 16px; background: hsl(var(--card)); box-shadow: var(--shadow-card); }
.os-step strong { font-weight: 600; }
.os-step span:last-child { color: hsl(var(--muted-foreground)); font-size: 0.9375rem; line-height: 1.4rem; }
.os-step-num { position: absolute; left: 20px; top: 20px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9px; background: hsl(var(--brand-soft)); color: hsl(var(--brand-deep)); font-size: 0.8125rem; font-weight: 700; }
.os-step.is-os { border-color: transparent; background: linear-gradient(135deg, hsl(var(--brand-deep)), hsl(var(--brand)) 60%, hsl(var(--brand-sky))); color: #fff; box-shadow: var(--shadow-brand); }
.os-step.is-os span:last-child { color: hsl(0 0% 100% / 0.8); }
.os-step.is-os .os-step-num { background: hsl(var(--coral)); color: #fff; }
@media (min-width: 760px) { .os-step:not(:last-child)::after { content: "→"; position: absolute; right: -16px; top: 50%; transform: translateY(-50%); color: hsl(var(--brand)); font-size: 1.125rem; font-weight: 600; z-index: 1; } }

.story3-grid { display: grid; gap: var(--space-8); overflow-x: clip; }
@media (min-width: 960px) { .story3-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); align-items: start; } .story3-steps { grid-column: 1 / span 5; } .story3-stage { grid-column: 6 / span 7; } }
.story3-grid > *, .story3-step { min-width: 0; max-width: 100%; box-sizing: border-box; }
.story3-steps { display: grid; gap: var(--space-16); margin: 0; padding: 0; list-style: none; }
@media (min-width: 960px) { .story3-steps { gap: 14vh; padding: 4vh 0 8vh; } }
.story3-step { max-width: min(100%, 44ch); transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-reveal); }
.story3-step h3 { margin-bottom: var(--space-3); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.025em; }
.story3-step p:not(.eyebrow) { color: hsl(var(--foreground) / 0.78); font-size: var(--t-body); line-height: 1.65; }
.story3-step .eyebrow { margin-bottom: var(--space-3); }
@media (min-width: 960px) { .js .story3-step { opacity: 0.55; } .js .story3-step.is-active { opacity: 1; } }
.story3-stage { position: relative; }
@media (min-width: 960px) { .story3-stage { position: sticky; top: 96px; } }
.story3-hint { display: none; align-items: center; gap: 6px; margin-top: var(--space-4); color: hsl(var(--muted-foreground)); font-size: 0.8125rem; }
@media (min-width: 960px) { .js .story3-hint { display: inline-flex; } }
.story3-hint .icon { width: 16px; height: 16px; animation: hint-bob 1.6s ease-in-out infinite; }
@keyframes hint-bob { 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .story3-hint .icon { animation: none; } }
.stage { position: relative; min-height: 460px; }
.stage-panel { padding: var(--s-card); border: 1px solid hsl(var(--border)); border-radius: var(--radius-tile); background: hsl(var(--card)); box-shadow: var(--shadow-float); }
.stage-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-5); color: hsl(var(--muted-foreground)); font: 600 var(--t-caption)/1.25rem var(--font-sans); }
.stage-kicker small { font-weight: 400; }
.stage-tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: hsl(var(--brand-soft)); color: hsl(var(--brand-deep)); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; }
.stage-tag-os { background: hsl(var(--brand)); color: #fff; }
.layers { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.layer { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid hsl(var(--border)); border-radius: 14px; background: hsl(var(--background)); transition: opacity 0.5s var(--ease-reveal), transform 0.6s var(--ease-reveal), border-color 0.4s, box-shadow 0.4s; }
.layer-num { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: hsl(var(--brand)); color: #fff; font-size: 0.75rem; font-weight: 700; }
.layer-body { display: grid; gap: 6px; min-width: 0; }
.layer-body strong { font-weight: 600; }
.layer-lines { display: grid; gap: 4px; }
.layer-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: hsl(var(--muted-foreground)); font-size: 0.8125rem; line-height: 1.2rem; }
.layer-line .bpx-src { font-size: 0.6875rem; padding: 2px 7px; }
.stage-plan, .stage-run { display: none; }
.js .stage-doc .layer { opacity: 0.5; transform: translateX(-6px); }
.js .stage[data-step="1"] .layer:nth-child(-n+1), .js .stage[data-step="2"] .layer:nth-child(-n+2), .js .stage[data-step="3"] .layer:nth-child(-n+3), .js .stage[data-step="4"] .layer:nth-child(-n+4), .js .stage[data-step="5"] .layer:nth-child(-n+5) { opacity: 1; transform: none; }
.js .stage[data-step="1"] .layer:nth-child(1), .js .stage[data-step="2"] .layer:nth-child(2), .js .stage[data-step="3"] .layer:nth-child(3), .js .stage[data-step="4"] .layer:nth-child(4), .js .stage[data-step="5"] .layer:nth-child(5) { border-color: hsl(var(--brand)); background: hsl(var(--brand-soft) / 0.6); box-shadow: 0 0 0 3px hsl(var(--brand) / 0.12); }
.js .stage[data-step="6"] .stage-doc, .js .stage[data-step="7"] .stage-doc { display: none; }
.js .stage[data-step="6"] .stage-plan, .js .stage[data-step="7"] .stage-run { display: block; animation: bpx-in 0.5s var(--ease-reveal); }
html:not(.js) .stage-plan, html:not(.js) .stage-run { display: block; margin-top: var(--space-5); }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--mint)); box-shadow: 0 0 0 0 hsl(var(--mint) / 0.5); animation: live 1.6s ease-out infinite; }
@keyframes live { to { box-shadow: 0 0 0 10px hsl(var(--mint) / 0); } }
.run-log { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; }
.run-line { display: flex; gap: 12px; padding: 8px 10px; border-radius: 10px; background: hsl(var(--mint-soft) / 0.6); line-height: 1.25rem; }
.run-line.is-wait { background: hsl(var(--coral-soft)); }
.run-time { flex: none; color: hsl(var(--muted-foreground)); }
.js .stage[data-step="7"] .run-line { opacity: 0; animation: run-in 0.5s var(--ease-reveal) forwards; }
.js .stage[data-step="7"] .run-line:nth-child(1) { animation-delay: 0.1s; } .js .stage[data-step="7"] .run-line:nth-child(2) { animation-delay: 0.35s; } .js .stage[data-step="7"] .run-line:nth-child(3) { animation-delay: 0.6s; } .js .stage[data-step="7"] .run-line:nth-child(4) { animation-delay: 0.85s; } .js .stage[data-step="7"] .run-line:nth-child(5) { animation-delay: 1.1s; } .js .stage[data-step="7"] .run-line:nth-child(6) { animation-delay: 1.35s; } .js .stage[data-step="7"] .run-line:nth-child(7) { animation-delay: 1.6s; } .js .stage[data-step="7"] .run-line:nth-child(8) { animation-delay: 1.85s; }
@keyframes run-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } .js .stage[data-step="7"] .run-line { animation: none; opacity: 1; } .layer, .story3-step { transition: none; } }

/* one ordinary day */
.day { display: grid; gap: var(--space-6); }
@media (min-width: 760px) { .day { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); } }
.day-col { display: grid; gap: var(--space-5); }
.photo-wide { aspect-ratio: 16 / 9; }
.day .story-col { height: 100%; }
.day-wrap { margin-bottom: 30px; }

/* the engine room: the one dark section, strictly monochrome. Near-black, white and grey type, a monospace console,
   hairline borders, no glow and no gradient. The one accent: a coral mark on the lines that wait for a person. */
.engine { position: relative; margin: 0; padding: var(--s-section) 0; color: #fff; overflow: hidden; background: hsl(240 6% 7%); }
.engine .wrap { position: relative; z-index: 1; }
.engine .eyebrow { color: hsl(0 0% 100% / 0.55); }
.engine .section-title { color: #fff; }
.engine .section-lead { color: hsl(0 0% 100% / 0.68); }
.eng { display: grid; gap: var(--space-6); }
@media (min-width: 960px) { .eng { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); align-items: start; } }
.engine .glass { border: 1px solid hsl(0 0% 100% / 0.14); border-radius: var(--radius-card); background: hsl(240 6% 9%); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.engine .glass::after { display: none; }
.eng-console { padding: 0; overflow: hidden; }
.eng-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid hsl(0 0% 100% / 0.12); font: 500 0.75rem/1.25rem var(--font-code); color: hsl(0 0% 100% / 0.7); }
.eng-dots { display: inline-flex; gap: 6px; } .eng-dots i { width: 8px; height: 8px; border-radius: 50%; background: hsl(0 0% 100% / 0.28); }
.eng-note { margin-left: auto; color: hsl(0 0% 100% / 0.42); font-size: 0.6875rem; }
.eng-feed { display: grid; gap: 0; margin: 0; padding: 8px 0; list-style: none; font: 400 0.8125rem/1.25rem var(--font-code); }
.eng-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 9px 16px; border-radius: 0; border-top: 1px solid hsl(0 0% 100% / 0.06); color: hsl(0 0% 100% / 0.86); }
.eng-line:first-child { border-top: 0; }
.eng-line.is-new { animation: eng-in 0.5s var(--ease-reveal); background: hsl(0 0% 100% / 0.05); }
.eng-time { color: hsl(0 0% 100% / 0.45); }
.eng-text { font-family: var(--font-code); font-weight: 400; }
.eng-tag { padding: 2px 9px; border: 1px solid hsl(0 0% 100% / 0.22); border-radius: 999px; color: hsl(0 0% 100% / 0.7); font: 500 0.6875rem/1rem var(--font-code); white-space: nowrap; }
.eng-line.is-wait .eng-tag { display: inline-flex; align-items: center; gap: 6px; color: #fff; border-color: hsl(0 0% 100% / 0.4); }
.eng-line.is-wait .eng-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--coral)); }
@keyframes eng-in { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 479px) { .eng-line { grid-template-columns: auto minmax(0, 1fr); } .eng-tag { grid-column: 2; justify-self: start; } }
.eng-side { display: grid; gap: var(--space-5); }
.eng-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.eng-stat { display: grid; gap: 4px; padding: 20px 22px; }
.eng-stat strong { font: 500 2.5rem/1 var(--font-code); letter-spacing: -0.02em; color: #fff; }
.eng-stat span { color: hsl(0 0% 100% / 0.58); font-size: 0.8125rem; }
.eng-rules { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid hsl(0 0% 100% / 0.14); border-radius: var(--radius-card); }
.eng-rules li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid hsl(0 0% 100% / 0.1); color: hsl(0 0% 100% / 0.9); font-weight: 500; }
.eng-rules li:first-child { border-top: 0; }
.eng-rule-dot { width: 6px; height: 6px; border-radius: 50%; background: hsl(0 0% 100% / 0.55); flex: none; }

/* trust: the rules beside the servers */
.trust { display: grid; gap: var(--space-10); align-items: center; }
@media (min-width: 960px) { .trust { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); } .trust-copy { grid-column: 1 / span 5; } .trust-visual { grid-column: 6 / span 7; } }
.trust-copy > * + * { margin-top: var(--space-6); }
.trust-copy .section-title { margin-top: 0; }
.trust .data-text { font-size: 1rem; color: hsl(var(--muted-foreground)); }

/* the isometric servers */
.iso-box { position: relative; padding: var(--space-6); border: 1px solid hsl(var(--border)); border-radius: var(--radius-tile); background: linear-gradient(180deg, hsl(var(--card)), hsl(var(--tint-sky))); box-shadow: var(--shadow-card); overflow: hidden; }
.iso-box .art { display: block; width: 100%; height: auto; }
.art-iso .a-t { font-size: 16px; } .art-iso .a-t-small { font-size: 13px; }
.iso-shadow { fill: hsl(var(--brand) / 0.08); }
.iso-ink .iso-top { fill: hsl(230 30% 32%); } .iso-ink .iso-left { fill: hsl(var(--navy)); } .iso-ink .iso-right { fill: hsl(230 36% 20%); }
.iso-paper .iso-top { fill: hsl(var(--card)); } .iso-paper .iso-left { fill: hsl(var(--brand-soft)); } .iso-paper .iso-right { fill: hsl(226 60% 88%); }
.iso path { stroke: hsl(var(--navy) / 0.1); stroke-width: 0.5; }
.iso-slot { fill: hsl(230 30% 26%); }
.iso-led { fill: hsl(160 70% 55%); animation: led 2.4s steps(1) infinite; }
.iso-led:nth-of-type(2) { animation-delay: 0.6s; } .iso-led:nth-of-type(3) { animation-delay: 1.2s; }
.iso-led-red { fill: hsl(var(--coral)); animation: none; }
@keyframes led { 50% { opacity: 0.35; } }
.iso-win { fill: hsl(var(--brand-sky) / 0.35); stroke: hsl(var(--brand) / 0.3); }
.iso-laptop { fill: hsl(var(--border-strong)); } .iso-screen { fill: hsl(var(--card)); stroke: hsl(var(--brand) / 0.4); }
.iso-link { fill: none; stroke: hsl(var(--brand)); stroke-width: 2; stroke-dasharray: 6 8; stroke-linecap: round; animation: a-dash 1.4s linear infinite; }
.iso-link-glow { stroke: hsl(var(--brand) / 0.25); stroke-width: 10; stroke-dasharray: none; animation: none; }
.iso-thin { fill: none; stroke: hsl(var(--brand) / 0.45); stroke-width: 1.25; stroke-dasharray: 2 5; }
.iso-lock rect { fill: hsl(var(--card)); stroke: hsl(var(--brand)); stroke-width: 1.5; } .iso-lock path { stroke: hsl(var(--brand)); stroke-width: 1.5; }
@media (prefers-reduced-motion: reduce) { .iso-led, .iso-link { animation: none; } }

/* =====================================================================================================================
   15. Photographs: one grade in the palette, the floating UI past the photo's corner, the before/after pair
   ================================================================================================================== */
.photo { display: block; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.88) contrast(1.05) brightness(1.02); }
.photo-frame { position: relative; overflow: hidden; border-radius: var(--radius-tile); box-shadow: var(--shadow-float); background: hsl(var(--background-elevated)); }
.photo-frame .photo, .photo-frame img { height: 100%; }
/* the grade: a cool brand wash from the top, a touch of coral from below, so every photograph sits in the palette */
.photo-frame::after, .tile-img::after, .hero-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(170deg, hsl(var(--brand) / 0.16), hsl(var(--brand-sky) / 0.06) 50%, hsl(var(--coral) / 0.12)); mix-blend-mode: multiply; }
.photo-frame::before, .tile-img::before, .hero-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px hsl(var(--navy) / 0.08); }
.float-card { position: absolute; left: -16px; bottom: -24px; z-index: 2; display: flex; align-items: center; gap: 12px; max-width: min(92%, 420px); padding: 14px 16px; border: 1px solid hsl(var(--card)); border-radius: 16px; background: hsl(var(--card) / 0.9); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); box-shadow: var(--shadow-lift), inset 0 1px 0 hsl(var(--card)); font-size: 0.8125rem; line-height: 1.25rem; }
@media (min-width: 960px) { .float-card { left: -40px; bottom: -30px; } }
@media (max-width: 599px) { .float-card { left: 16px; right: 16px; bottom: -20px; max-width: none; } }
.float-card .app-row-text { display: grid; gap: 2px; min-width: 0; }
.float-card strong { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.float-card small { color: hsl(var(--muted-foreground)); font-size: 0.75rem; line-height: 1.1rem; }
.float-card .float-accent { color: hsl(var(--brand)); font-weight: 600; }
.float-card .app-row-actions { display: inline-flex; gap: 6px; }
.float-card .app-dot { width: 8px; height: 8px; margin: 0; border-radius: 50%; background: hsl(var(--coral)); flex: none; }
.float-card .layer-num { flex: none; }
.float-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.float-chips .chip:nth-child(2) { background: hsl(var(--coral-soft)); color: hsl(var(--coral-deep)); } .float-chips .chip:nth-child(3) { background: hsl(var(--mint-soft)); color: hsl(var(--mint)); } .float-chips .chip:nth-child(4) { background: hsl(var(--amber-soft)); color: hsl(var(--amber)); } .float-chips .chip:nth-child(5) { background: hsl(var(--violet-soft)); color: hsl(var(--violet)); }
.float-stack { display: grid; gap: 6px; }
.float-layer { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.float-layer .layer-num { width: 22px; height: 22px; font-size: 0.6875rem; }
.float-log strong .live-dot { margin-right: 2px; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: end; }
.pair .photo-frame { aspect-ratio: 4 / 5; }
.pair .photo-frame:first-child { transform: translateY(24px); }
.pair-label { position: absolute; left: 14px; bottom: 14px; z-index: 2; padding: 5px 12px; border-radius: 999px; background: hsl(var(--card) / 0.92); color: hsl(var(--amber)); font-size: 0.75rem; font-weight: 700; backdrop-filter: blur(8px); }
.pair-label-after { background: hsl(var(--brand)); color: #fff; }

/* the contact page is the warm one: a coral chip on its hero, the addresses as mint pills (live, answered by a person) */
.eyebrow-chip.eyebrow-coral { background: hsl(var(--coral-soft)); color: hsl(var(--coral-deep)); }
.hero-contact .cta-mails .contact-mail { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; background: hsl(var(--mint-soft)); color: hsl(var(--mint)); font-weight: 600; }
.hero-contact .cta-mails .contact-mail:hover { background: hsl(var(--mint) / 0.16); text-decoration: none; }
.hero-contact .cta-mails { margin-top: var(--space-6); }
/* sign-in: the note is a note, amber */
.signin-note { border-color: hsl(var(--amber) / 0.35); background: hsl(var(--amber-soft)); }
.signin-note .notice-icon, .signin-note strong { color: hsl(var(--amber)); }
.iso-win-r { fill: hsl(var(--brand) / 0.22); }
.iso-inside .iso-ink .iso-left { fill: hsl(var(--navy-2)); }
/* on a phone the words sit over the photograph: a stronger vertical scrim, the photo shows through below the copy */
@media (max-width: 959px) { .hero-bg::after { background: linear-gradient(180deg, hsl(var(--tint-indigo) / 0.97) 0%, hsl(var(--tint-indigo) / 0.9) 58%, hsl(var(--tint-sky) / 0.5) 82%, hsl(var(--background)) 100%); } }

/* ---- about: the Innovate brand and the community tools ---- */
.brand-split { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 960px) { .brand-split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); } .brand-card { grid-column: 1 / span 5; } .brand-beliefs { grid-column: 7 / span 6; } }
.brand-card { display: grid; gap: var(--space-4); padding: var(--s-card); border: 1px solid hsl(var(--border)); border-radius: var(--radius-tile); background: hsl(var(--card)); box-shadow: var(--shadow-float); }
.brand-card .wordmark { display: block; width: min(100%, 300px); height: auto; margin: var(--space-2) 0 var(--space-3); }
.brand-tagline { font-family: var(--font-display); font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.brand-beliefs .section-title { margin-bottom: var(--space-8); }
.brand-beliefs .tile { padding: var(--space-6); gap: var(--space-2); }
.brand-beliefs .tile-num { width: 32px; height: 32px; font-size: 0.8125rem; margin-bottom: var(--space-2); }
.float-innovate { padding: 16px 18px; }
.float-wordmark { width: 128px; height: auto; flex: none; }
.tool-card .tile-icon img { width: 28px; height: 28px; image-rendering: pixelated; image-rendering: crisp-edges; }
.tool-card h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.chip-free { padding: 3px 9px; background: hsl(var(--mint-soft)); color: hsl(var(--mint)); font-size: 0.6875rem; }
.tools .tile:nth-child(4) .tile-icon { background: hsl(var(--amber-soft)); } .tools .tile:nth-child(5) .tile-icon { background: hsl(var(--violet-soft)); } .tools .tile:nth-child(6) .tile-icon { background: hsl(var(--brand-soft)); }
.tool-card .tile-more { text-transform: lowercase; }

/* ---- the journey: four stages shown, not labelled, on one flowing path; a vertical timeline on a phone ---- */
.journey { position: relative; margin-top: var(--space-2); --j-1: var(--brand); --j-2: var(--coral); --j-3: var(--violet); --j-4: var(--mint); }
.journey-path { display: none; position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 60px; overflow: visible; }
@media (min-width: 960px) { .journey-path { display: block; } }
.journey-track { fill: none; stroke: hsl(var(--border-strong)); stroke-width: 2; }
.journey-flow { fill: none; stroke: hsl(var(--brand)); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.js .is-in .journey-flow { animation: journey-draw 2.2s var(--ease-reveal) 0.3s forwards; }
html:not(.js) .journey-flow { stroke-dashoffset: 0; }
@keyframes journey-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .journey-flow { animation: none !important; stroke-dashoffset: 0; } }
.jsteps { position: relative; display: grid; gap: var(--space-8); margin: 0; padding: 0 0 0 44px; list-style: none; }
.jsteps::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 2px; border-radius: 1px; background: linear-gradient(180deg, hsl(var(--j-1)), hsl(var(--j-2)) 35%, hsl(var(--j-3)) 65%, hsl(var(--j-4))); }
@media (min-width: 960px) { .jsteps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); padding: 0; } .jsteps::before { display: none; } }
.jstep { position: relative; display: grid; gap: var(--space-4); min-width: 0; }
.jnum { position: absolute; left: -44px; top: 0; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: hsl(var(--brand)); color: #fff; font-size: 0.8125rem; font-weight: 700; box-shadow: 0 0 0 4px hsl(var(--background)); }
@media (min-width: 960px) { .jnum { position: static; justify-self: center; width: 36px; height: 36px; margin-bottom: var(--space-2); } }
.jstep-blueprint .jnum { background: hsl(var(--j-2)); } .jstep-solution .jnum { background: hsl(var(--j-3)); } .jstep-running .jnum { background: hsl(var(--j-4)); }
.jcard { position: relative; display: grid; gap: 10px; min-height: 232px; padding: 18px; border: 1px solid hsl(var(--border)); border-radius: var(--radius-card); background: hsl(var(--card)); box-shadow: var(--shadow-lift); font-size: 0.8125rem; line-height: 1.25rem; }
.jstep-people .jcard { border-top: 3px solid hsl(var(--j-1)); } .jstep-blueprint .jcard { border-top: 3px solid hsl(var(--j-2)); } .jstep-solution .jcard { border-top: 3px solid hsl(var(--j-3)); } .jstep-running .jcard { border-top: 3px solid hsl(var(--j-4)); }
.jcap { display: grid; gap: 2px; }
.jcap strong { font-weight: 700; }
.jcap span { color: hsl(var(--muted-foreground)); font-size: 0.9375rem; }
.jchip { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 5px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.jchip-doc { background: hsl(var(--brand-soft)); color: hsl(var(--brand-deep)); }
.jchip-site { background: hsl(var(--mint-soft)); color: hsl(var(--mint)); }
/* 1: the question card */
.jq { display: grid; gap: 6px; padding: 12px; border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--background)); }
.jq-step { color: hsl(var(--brand-deep)); font-size: 0.6875rem; font-weight: 700; }
.jq-q { font-weight: 600; line-height: 1.2rem; }
.jq-a { padding: 8px 10px; border: 1px solid hsl(var(--brand) / 0.5); border-radius: 8px; background: hsl(var(--card)); color: hsl(var(--foreground)); box-shadow: 0 0 0 3px hsl(var(--brand) / 0.12); }
/* 2: the layered map */
.jmap { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.jmap-layer { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 8px; border: 1px solid hsl(var(--coral) / 0.22); border-radius: 8px; background: linear-gradient(90deg, hsl(var(--coral-soft)), hsl(var(--card)) 70%); font-weight: 500; font-size: 0.75rem; line-height: 1rem; }
.jmap-layer:nth-child(2) { margin-left: 6px; } .jmap-layer:nth-child(3) { margin-left: 12px; } .jmap-layer:nth-child(4) { margin-left: 18px; } .jmap-layer:nth-child(5) { margin-left: 24px; }
.jmap-num { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; background: hsl(var(--coral)); color: #fff; font-size: 0.625rem; font-weight: 700; }
.jmap-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jmap-risk { display: inline-block; flex: none; width: 10px; height: 10px; margin-left: auto; border-radius: 50%; box-shadow: 0 0 0 3px hsl(var(--card)); }
.jmap-risk.is-high { background: hsl(var(--coral)); } .jmap-risk.is-mid { background: hsl(var(--amber)); } .jmap-risk.is-low { background: hsl(var(--mint)); }
.jmap-legend { display: flex; align-items: center; gap: 8px; color: hsl(var(--muted-foreground)); font-size: 0.75rem; }
.jmap-legend .jmap-risk { margin: 0; }
/* 3: the proposal rows and the gate */
.jtab { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.6875rem; line-height: 0.95rem; overflow-wrap: anywhere; }
.jtab col:nth-child(1), .jtab th:first-child { width: 30%; }
.jtab th, .jtab td { padding: 6px 4px; border-bottom: 1px solid hsl(var(--border)); text-align: left; vertical-align: top; }
.jtab thead th { color: hsl(var(--violet)); font-weight: 700; font-size: 0.625rem; }
.jtab tbody th { font-weight: 600; }
.jtab td:last-child { color: hsl(var(--coral-deep)); font-weight: 600; }
.jgate { position: absolute; right: -12px; top: -16px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 2px solid hsl(var(--violet)); border-radius: 10px; background: hsl(var(--card)); color: hsl(var(--violet)); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; transform: rotate(-6deg); box-shadow: 0 10px 24px -10px hsl(var(--violet) / 0.6); }
.jgate .icon, .jchip svg { width: 14px; height: 14px; }
@media (min-width: 960px) { .jgate { right: -22px; top: -18px; } }
.jstep-solution .jcard { padding-top: 26px; }
/* 4: the running log */
.jlog { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; font: 500 0.6875rem/0.95rem var(--font-code); }
.jlog-line { display: flex; gap: 8px; padding: 7px 9px; border-radius: 8px; background: hsl(var(--mint-soft) / 0.7); color: hsl(var(--foreground)); }
.jlog-line.is-wait { background: hsl(var(--coral-soft)); }
.jlog-time { flex: none; color: hsl(var(--muted-foreground)); }
.jtab th, .jtab td { white-space: normal; overflow-wrap: anywhere; hyphens: auto; padding: 6px 3px; }
.jtab thead th { font-size: 0.5625rem; line-height: 0.8rem; }
.jtab tbody th { font-weight: 600; width: 27%; }
@media (max-width: 959px) { .jgate { right: 12px; top: -14px; } }
.signin-note p { display: grid; gap: 6px; }
.signin-note .link-arrow { color: hsl(var(--amber)); width: fit-content; }

/* ---- kaj dobite: the colleague analogy, the eight things, the agents panel ---- */
.analogy { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; counter-reset: an; }
.analogy-step { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 16px; align-items: center; padding: 18px 20px; border: 1px solid hsl(var(--border)); border-radius: var(--radius-card); background: hsl(var(--card)); box-shadow: var(--shadow-card); }
.analogy-step .tile-icon { grid-row: 1 / span 2; margin: 0; }
.analogy-step strong { font-weight: 700; }
.analogy-step > span:last-child { color: hsl(var(--muted-foreground)); font-size: 0.9375rem; }
.analogy-step.is-mint .tile-icon { background: hsl(var(--mint-soft)); color: hsl(var(--mint)); }
.analogy-step.is-amber .tile-icon { background: hsl(var(--amber-soft)); color: hsl(var(--amber)); }
.analogy-step.is-coral .tile-icon { background: hsl(var(--coral-soft)); color: hsl(var(--coral-deep)); }
.analogy-step + .analogy-step::before { content: ""; position: absolute; left: 43px; top: -13px; width: 2px; height: 12px; background: hsl(var(--border-strong)); }
.haves { margin: 0; padding: 0; list-style: none; }
@media (min-width: 1024px) { .bento-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.haves .tile:nth-child(4n+1) .tile-icon { background: hsl(var(--brand-soft)); color: hsl(var(--brand)); } .haves .tile:nth-child(4n+2) .tile-icon { background: hsl(var(--coral-soft)); color: hsl(var(--coral-deep)); } .haves .tile:nth-child(4n+3) .tile-icon { background: hsl(var(--mint-soft)); color: hsl(var(--mint)); } .haves .tile:nth-child(4n) .tile-icon { background: hsl(var(--violet-soft)); color: hsl(var(--violet)); }
.agent-row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; }
.agent-row .eng-tag { border-color: hsl(var(--mint) / 0.5); color: hsl(var(--mint)); }
.agent-row .eng-tag.is-wait { color: hsl(var(--coral-deep)); border-color: hsl(var(--coral) / 0.5); }
.agent-row .eng-tag.is-wait::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--coral)); }
.agent-limit { color: hsl(var(--coral-deep)) !important; }
.agent-add { justify-content: center; border-style: dashed; background: transparent; }
.agent-add .app-btn { border-style: dashed; color: hsl(var(--brand-deep)); }
.duo-accent .checks { margin-top: var(--space-2); }

/* ---- the film ---- */
.film { margin: 0; }
.film-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-tile); background: hsl(var(--navy)); box-shadow: var(--shadow-float); outline: 0; }
.film-video:focus-visible { outline: 3px solid hsl(var(--ring)); outline-offset: 4px; }
.film-video::cue { background: hsl(240 6% 7% / 0.8); color: #fff; font-family: var(--font-sans); font-size: 1.05rem; }
.film-caption { margin-top: var(--space-4); color: hsl(var(--muted-foreground)); font-size: var(--t-caption); text-align: right; }

/* The contact form (S-992): only what the form itself needs on top of Daylight's .field / input / .btn rules. */
.contact-form { display: grid; gap: var(--space-4); width: 100%; }
.contact-form .btn { justify-self: start; }
@media (max-width: 479px) { .contact-form .btn { justify-self: stretch; } }
.contact-form .check { display: flex; align-items: flex-start; gap: var(--space-3); font-weight: 400; line-height: 1.4rem; cursor: pointer; }
.contact-form .check input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: hsl(var(--foreground)); }
.contact-form .trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.contact-form .form-status { margin: 0; }
.contact-form .form-status.is-error { color: hsl(var(--destructive)); font-weight: 500; }
.contact-form .contact-direct a { margin-right: var(--space-2); }
.contact-done { display: grid; gap: var(--space-2); padding: var(--space-5); border: 1px solid hsl(var(--success)); border-radius: var(--radius-card); background: hsl(var(--success-soft)); }
.contact-done h3 { margin: 0; }
.result-errors { margin: 0; padding-left: 18px; }
.result-errors li[hidden] { display: none; }