/* Loes wordmark only: the four-letter subset keeps her own brand face lightweight. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/plus-jakarta-sans-loes-800.woff2') format('woff2');unicode-range:U+4C,U+65,U+6F,U+73}
/*
 * Source: Figma HostYourAI X Loes, page 'HostYourAI · brand'. Change Figma first, then these tokens.
 *
 * HostYourAI brand layer. One stylesheet that carries the brand through every public
 * HostYourAI page without touching page markup: it is linked LAST in the <head> of every
 * public layout (partials.brand-css: layouts.site, layouts.legal, components.site.layout,
 * contact, the homepage). It is never linked on a Loes page, so Loes keeps its own brand.
 *
 * Structure
 *   1. Fonts      self-hosted Inter Tight and Fragment Mono (OFL, /fonts). The old family
 *                 names (Figtree, JetBrains Mono) are aliased to the same files, so every
 *                 inline font-family in the existing templates lands on the brand fonts.
 *   2. Tokens     the brand block (--b-*), then the names the existing templates use
 *                 (--background, --accent, ...) and the homepage theme (--hy-*) mapped onto it.
 *                 A brand change is an edit in the --b-* block only.
 *   3. Base       type, headings scale, links, selection.
 *   4. Shared site classes from partials.site-head (buttons, tags, cards, panels, windows,
 *                 illustrations), nav and footer.
 *   5. Tailwind   colour, radius, shadow and gradient utilities mapped onto the brand.
 *   6. Prose, tables, forms.
 *
 * Rules (Figma): flat. No shadows, glows, lines or accent stripes, no round status dots, no
 * gradient text, no tinted fill with a coloured border. Depth comes from the surfaces. The one
 * atmosphere is the gradient panel (calm aurora: three soft glows along one edge, text on the
 * quiet part). Radii: panel 24, card 12, control 8, tag 6, logo mark 7.
 *
 * Specificity: component rules start with :root so they win over the shared site classes and
 * over the Tailwind Play CDN, which injects its styles after this file. Tokens for the existing
 * templates sit in :where(:root), so a page that redefines them on :root (the dark /code page)
 * keeps its own palette.
 */

/* ===================================================================== */
/* 1. Fonts                                                              */
/* ===================================================================== */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-tight-latin-400-normal.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:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-tight-latin-ext-400-normal.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:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-tight-latin-500-normal.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:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-tight-latin-ext-500-normal.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:'Inter Tight';font-style:normal;font-weight:600 800;font-display:swap;src:url(/fonts/inter-tight-latin-600-normal.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:'Inter Tight';font-style:normal;font-weight:600 800;font-display:swap;src:url(/fonts/inter-tight-latin-ext-600-normal.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:'Fragment Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/fragment-mono-latin-400-normal.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:'Fragment Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/fragment-mono-latin-ext-400-normal.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}
/* aliases: the templates name Figtree and JetBrains Mono inline; both now resolve to the brand files */
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 400;font-display:swap;src:url(/fonts/inter-tight-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-tight-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:600 800;font-display:swap;src:url(/fonts/inter-tight-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/fragment-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter Tight Fallback';src:local('Arial'),local('Helvetica Neue'),local('Helvetica');size-adjust:96.5%;ascent-override:100.4%;descent-override:25%;line-gap-override:0%}

/* ===================================================================== */
/* 2. Tokens                                                             */
/* ===================================================================== */
:root{
  /* --- the brand block; edit here, nowhere else ---
     Since 4 Nov 2026 the values follow option C (resources/views/x/home-e/c.blade.php), the house
     style of the public site: where option C and the Figma page differed (paper, muted, the
     hairlines, ok green, headline weight 600, the measure), option C won. */
  --b-paper:#F8F4EC;        /* page */
  --b-card:#FFFDF8;         /* cards, cells, plans */
  --b-band:#F1EBE0;         /* bands, tags, chips, wells inside a card */
  --b-raised:#EBE4D8;       /* pressed, secondary controls */
  --b-raised-h:#E2D9CA;     /* hover on a raised control */
  --b-ink:#15110C;          /* text, dark canvas */
  --b-muted:#6B6156;        /* muted ink: labels, the quiet second line (4 Nov 2026: was #746A5E, now about 5:1 on the band) */
  --b-faint:#A39888;        /* placeholders, masked values, empty marks */
  --b-accent:#4F46E5;       /* indigo, the one accent */
  --b-accent-light:#6366F1; /* indigo light: accent on dark */
  --b-glow-sand:#E0B482;    /* aurora, warm */
  --b-glow-peri:#A5B4FC;    /* aurora, cool */
  /* gradient panel, light and dark */
  --b-panel:#F3EEE6;
  --b-panel-dark:#1B1712;
  --b-aurora-1:rgb(224 180 130 / .36); /* #E0B482 at 36% */
  --b-aurora-2:rgb(165 180 252 / .32); /* #A5B4FC at 32% */
  --b-aurora-3:rgb(147 184 230 / .30); /* #93B8E6 at 30% */
  --b-aurora-dark-1:rgb(201 139 82 / .30);  /* #C98B52 at 30% */
  --b-aurora-dark-2:rgb(124 134 232 / .28); /* #7C86E8 at 28% */
  --b-aurora-dark-3:rgb(63 127 200 / .30);  /* #3F7FC8 at 30% */
  /* shape: one corner scale (5 Nov 2026, Jantine: "trek alles recht door").
     Every visible filled shape is a rounded rectangle; nothing is sharp, nothing is a circle.
     panel 24 big cards and cells · card 12 windows, tables, frames · ctl 8 buttons, inputs, tabs, photos
     tag 6 chips, pills, badges, small avatars · px 3 icon tiles and cells · bar 3 bars and meters
     (6px and taller; thinner ones take tick) · tick 2 tiny square marks up to 8px (bullets,
     legend squares, packets, carets) · mark 7 the logo mark */
  --b-r-panel:24px;
  --b-r-card:12px;
  --b-r-ctl:8px;
  --b-r-tag:6px;
  --b-r-px:3px;
  --b-r-bar:3px;
  --b-r-tick:2px;
  --b-r-mark:7px;
  /* type */
  --b-font:'Inter Tight','Inter Tight Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  --b-mono:'Fragment Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --b-head-weight:600;      /* every heading (option C) */
  --b-track:-0.045em;       /* display headlines (h1) */
  --b-track-2:-0.03em;      /* section headings (h2) */
  --b-leading:1.55;         /* body */
  /* type scale (option C) */
  --b-t-display:clamp(52px,8.4vw,120px); /* the centred homepage hero */
  --b-t-title:clamp(44px,5.6vw,80px);    /* a page title in a chapter hero */
  --b-t-long:clamp(38px,4.8vw,64px);     /* a page title that runs long, the closing title */
  --b-t-h2:clamp(30px,3.6vw,44px);       /* every section heading (.sec-title) */
  --b-t-h3:clamp(21px,1.9vw,25px);       /* cell and card headings */
  --b-t-lead:clamp(17px,1.6vw,19px);     /* the lead under a heading */
  /* rhythm: one section gap (80 on phones) */
  --b-sec:120px;

  /* derived */
  --b-ink-2:#3A332B;        /* body text on paper: leads, card text */
  --b-line:rgb(21 17 12 / .10);   /* the hairline between rows */
  --b-line-2:rgb(21 17 12 / .16); /* the hairline around cells, plans and windows */
  --b-on-accent:#FFFDF8;
  --b-accent-hover:#4338CA;
  --b-ok:#2F7A4A;
  /* on the ink band (fixed: the band stays ink in both themes) */
  --b-ink-band:#15110C;
  --b-on-ink:#F8F4EC;
  --b-ink-line:rgb(248 244 236 / .12);
  --b-ink-mute:#A39A8C;
  --b-ink-soft:#D9D1C4;     /* body text on ink */
  --b-ink-fill:rgb(248 244 236 / .08);

  /* the gradient panel variants: panel (glows along the bottom edge), side (right edge),
     sideR (left edge), full (all over). Text sits on the quiet part. */
  --b-aurora-panel:
    radial-gradient(60% 90% at 12% 118%,var(--b-aurora-1) 0%,transparent 70%),
    radial-gradient(55% 85% at 52% 122%,var(--b-aurora-2) 0%,transparent 70%),
    radial-gradient(60% 90% at 92% 116%,var(--b-aurora-3) 0%,transparent 70%),
    var(--b-panel);
  --b-aurora-side:
    radial-gradient(60% 70% at 112% 92%,var(--b-aurora-1) 0%,transparent 70%),
    radial-gradient(55% 70% at 116% 46%,var(--b-aurora-2) 0%,transparent 70%),
    radial-gradient(55% 60% at 108% 4%,var(--b-aurora-3) 0%,transparent 70%),
    var(--b-panel);
  --b-aurora-sideR:
    radial-gradient(60% 70% at -12% 92%,var(--b-aurora-1) 0%,transparent 70%),
    radial-gradient(55% 70% at -16% 46%,var(--b-aurora-2) 0%,transparent 70%),
    radial-gradient(55% 60% at -8% 4%,var(--b-aurora-3) 0%,transparent 70%),
    var(--b-panel);
  --b-aurora-full:
    radial-gradient(50% 60% at 10% 90%,var(--b-aurora-1) 0%,transparent 70%),
    radial-gradient(50% 60% at 55% 105%,var(--b-aurora-2) 0%,transparent 70%),
    radial-gradient(50% 60% at 95% 70%,var(--b-aurora-3) 0%,transparent 70%),
    var(--b-panel);
  --b-aurora-dark:
    radial-gradient(60% 90% at 12% 118%,var(--b-aurora-dark-1) 0%,transparent 70%),
    radial-gradient(55% 85% at 52% 122%,var(--b-aurora-dark-2) 0%,transparent 70%),
    radial-gradient(60% 90% at 92% 116%,var(--b-aurora-dark-3) 0%,transparent 70%),
    var(--b-panel-dark);

  /* --- the homepage theme (public/css/site-theme.css) follows the same block --- */
  --hy-paper:var(--b-paper);
  --hy-cream:var(--b-card);
  --hy-band:var(--b-band);
  --hy-raise:var(--b-raised);
  --hy-ink:var(--b-ink);
  --hy-ink-2:var(--b-ink-2);
  --hy-muted:var(--b-ink-2);   /* secondary text (leads, card text) reads in ink-2, as in option C */
  --hy-muted-2:var(--b-muted); /* labels */
  --hy-subtle:var(--b-muted);  /* the quiet second line of a heading */
  --hy-graphic:var(--b-muted);
  --hy-faint:var(--b-faint);
  --hy-raise-2:var(--b-raised-h);
  --hy-ok:var(--b-ok);
  --hy-line:var(--b-line);
  --hy-t-display:var(--b-t-title);
  --hy-t-h1:var(--b-t-long);
  --hy-t-h2:var(--b-t-h2);
  --hy-t-h3:var(--b-t-h3);
  --hy-sec:var(--b-sec);
  --hy-accent:var(--b-accent);
  --hy-accent-strong:var(--b-accent);
  --hy-accent-hover:var(--b-accent-hover);
  --hy-on-accent:var(--b-on-accent);
  --hy-font:var(--b-font);
  --hy-mono:var(--b-mono);
  --hy-r-panel:var(--b-r-panel);
  --hy-r-card:var(--b-r-card);
  --hy-r-ctl:var(--b-r-ctl);
  --hy-r-tag:var(--b-r-tag);
  --hy-r-mark:var(--b-r-mark);
  --hy-r-dot:var(--b-r-tick);
  --hy-r-bar:var(--b-r-bar);
  --hy-grad:var(--b-aurora-side);
  --hy-grad-stack:var(--b-aurora-panel);
}
/* the names the existing templates use; a page may redefine them on :root (the dark /code page) */
:where(:root){
  --background:var(--b-paper);
  --foreground:var(--b-ink);
  --card:var(--b-card);
  --panel:var(--b-band);
  --muted:var(--b-band);
  --muted-foreground:var(--b-muted);
  --border:var(--b-line);
  --border-strong:var(--b-line-2);
  --ink:var(--b-ink);
  --ink-hover:var(--b-ink-2);
  --ink-muted:var(--b-band);
  --raised:var(--b-raised);
  --raised-2:var(--b-raised-h);
  --primary:var(--b-accent);
  --accent:var(--b-accent);
  --accent-hover:var(--b-accent-hover);
  --accent-ink:var(--b-accent);
  --accent-soft:var(--b-band);
  --grad:var(--b-accent);
  --grad-ink:var(--b-accent);
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-t:.16s;            /* one duration for hover and state changes (4 Nov 2026) */
  --shadow-card:none;
  --shadow-lift:none;
  --noise:none;
}
/* --- the dark theme (3 Nov 2026) -------------------------------------------------------------
   The same names, remapped, on <html data-theme="dark">. The public site stays light: no page
   sets data-theme and nothing follows the OS; only /brand has a toggle. Every component reads
   these tokens, so the whole page renders dark through them.
   From Figma ('HostYourAI · brand'): ink canvas #15110C, text on ink #F8F4ED, muted on ink #A89D8C,
   dark panel #1B1712, dark band #221D17, indigo light #6366F1 (accent on dark), the dark glows.
   Derived (not in Figma): card, raised, line, ink-2, the hover and the support tones. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --b-paper:#15110C;
  --b-card:#1D1813;
  --b-band:#221D17;
  --b-raised:#2C251E;
  --b-ink:#F8F4ED;
  --b-ink-2:#E7E0D4;
  --b-muted:#A89D8C;
  --b-accent:#6366F1;
  --b-accent-light:#A5B4FC;
  --b-accent-hover:#7C83F3;
  --b-on-accent:#FFFDF8;
  --b-ok:#3FB68B;
  --b-raised-h:#342D25;
  --b-faint:#6E6457;
  --b-line:rgb(248 244 236 / .10);
  --b-line-2:rgb(248 244 236 / .16);
  --b-panel:#1B1712;
  --b-aurora-1:var(--b-aurora-dark-1);
  --b-aurora-2:var(--b-aurora-dark-2);
  --b-aurora-3:var(--b-aurora-dark-3);
  /* the homepage theme tokens that site-theme.css sets on its own (not mapped above) */
  --hy-deep:#1A1510;
  --hy-deep-2:#201A15;
  --hy-raise-2:#342D25;
  --hy-faint:#4A4137;
  --hy-graphic:#9C907F;
  --hy-muted-2:#B3A898;
  --hy-ink-press:#E7E0D4;
  --hy-chip-core:#3E3C8A;
  --hy-accent-tint:#26244A;
  --hy-accent-tint-2:#2E2B5C;
  --hy-selection:#3A3A8C;
  --hy-ok:#3FB68B;
  --hy-danger:#E0765A;
  --hy-danger-ink:#F09A7E;
  /* template names that carry a literal light value */
  --border-strong:#463C32;
}
:root[data-theme="dark"] ::selection{background:var(--hy-selection);color:var(--b-ink)}
:root[data-theme="dark"] .hd-flag{outline-color:rgb(248 244 237 / .16)}
/* logos and the Loes glyph are drawn in ink (filter, fill); on dark they are drawn in paper */
:root[data-theme="dark"] :is(.home-logo:not(.home-logo--loes),.home-logo--loes svg){filter:brightness(0) invert(.96)}
/* the illustrations (partials/illus, styled in partials.site-head) carry literal light colours: on dark they read the tokens */
:root[data-theme="dark"] :is(.code,.code .c4){color:var(--b-ink)}
:root[data-theme="dark"] :is(.code .c1,.cv-node .r2,.mock-head .t){color:var(--b-muted)}
:root[data-theme="dark"] :is(.code .c2,.code .c3){color:var(--b-accent-light)}
:root[data-theme="dark"] .cv-link{stroke:var(--hy-faint)}

/* ===================================================================== */
/* 3. Base                                                               */
/* ===================================================================== */
:root body{font-family:var(--b-font);line-height:var(--b-leading);letter-spacing:-.01em;background:var(--background);color:var(--foreground);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
:root .font-sans{font-family:var(--b-font)}
:root .font-mono,:root code,:root kbd,:root samp,:root pre{font-family:var(--b-mono);letter-spacing:0}
:root ::selection{background:#C7D2FE;color:var(--b-ink)}
:root :focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* the hidden attribute always hides, also on a component that sets its own display */
:root [hidden]:not([hidden="until-found"]){display:none!important}

/* headings: weight 600 (option C, 4 Nov 2026), tight tracking, one scale */
:root :is(h1,h2,h3,h4){font-family:var(--b-font);font-weight:var(--b-head-weight);text-wrap:balance}
/* tracking for every heading; the page title (h1) also takes the brand title scale. Section and
   card headings keep the size their template gives them, so a heading in a document stays a
   document heading. Component headings (hy-*, home-*, any BEM class with "__", .sec-title)
   carry their own scale. */
:root h1:not([class*="hy-"]):not([class*="home-"]):not([class*="__"]):not(.sec-title){font-size:var(--b-t-long);line-height:1.04}
:root :is(h1,h2):not([class*="hy-"]):not([class*="home-"]):not([class*="__"]):not(.sec-title){letter-spacing:-.04em}
:root h2:not([class*="hy-"]):not([class*="home-"]):not([class*="__"]):not(.sec-title){letter-spacing:var(--b-track-2);line-height:1.1}
:root :is(h3,h4):not([class*="hy-"]):not([class*="home-"]):not([class*="__"]){letter-spacing:-.02em;line-height:1.25}
:root :is(b,strong){font-weight:500}
:root .font-bold,:root .font-semibold,:root .font-extrabold{font-weight:500}
/* the quiet second line: the old gradient phrase in a heading is now muted ink */
:root .grad-text{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--muted-foreground);-webkit-text-fill-color:currentColor}
:root .sub{color:var(--muted-foreground);line-height:1.5}

/* the page frame: no side rules on the shell, a calm background */
:root .shell{border-left:0;border-right:0;background:var(--background)}
:root .sec-border{border-top-color:var(--border)}
:root .band{background:var(--panel)}
:root .band::before,:root .noise-veil,:root .hero-bg::after{display:none}
:root .hero-bg{display:none}

/* ===================================================================== */
/* 4. Shared site classes                                                */
/* ===================================================================== */
/* --- buttons: solid, control radius, no lift, no shine ------------------ */
:root .btn-primary,:root .btn-ghost{height:44px;padding:0 20px;border-radius:var(--b-r-ctl);font:500 15px/1 var(--b-font);letter-spacing:-.01em;box-shadow:none;transform:none}
:root .btn-primary{background:var(--b-accent);color:var(--b-on-accent)!important;border:0}
:root .btn-primary:hover{background:var(--b-accent-hover);transform:none;box-shadow:none}
:root .btn-ghost{background:var(--raised);color:var(--foreground);border:0}
:root .btn-ghost:hover{background:var(--foreground);color:var(--background);transform:none;box-shadow:none}
:root .shine::after{display:none}
:root .tab-btn{border-radius:var(--b-r-ctl)}
:root .tab-btn.active{background:var(--foreground);color:var(--background)}

/* --- tags, eyebrows, chips: mono, tag radius, flat band fill ------------- */
:root .pill,:root .eyebrow:not(:has(> .eyebrow__l)){border:0;border-radius:var(--b-r-tag);background:var(--panel);color:var(--foreground);box-shadow:none;font:400 13px/1.2 var(--b-mono);letter-spacing:0;padding:5px 9px;text-transform:none}
:root .pill::after,:root .brand-chip::after{display:none}
:root .brand-chip{border:0;border-radius:var(--b-r-ctl);background:var(--panel);box-shadow:none;color:var(--foreground)}
:root .brand-chip:hover{background:var(--raised);color:var(--foreground)}
:root .mchip{border:0;border-radius:var(--b-r-ctl);background:var(--panel);box-shadow:none;color:var(--foreground)}
:root .mchip:hover{background:var(--raised);color:var(--foreground)}
:root .mchip .d,:root .gp-dot{border-radius:var(--b-r-tick);box-shadow:none}
:root .chip{border-radius:var(--b-r-tag);font-family:var(--b-mono)}
:root .chip.eu{color:var(--b-ink);background:var(--panel)}
:root .ins-pill,:root .fl-tag,:root .cv-tag,:root .wf-no,:root .dep-chip,:root .gp-chip{border-radius:var(--b-r-tag);border:0;box-shadow:none}
:root .ins-pill.blue,:root .ins-pill.sky{color:var(--b-ink);background:var(--panel)}
:root .ins-pill.amber{color:var(--foreground);background:var(--panel)}
:root .lg-mono{border-radius:var(--b-r-tag);font-family:var(--b-mono)}
/* checks: a plain accent tick, no circle */
:root .check{border-radius:0;background:none;box-shadow:none}
:root .check::after{border-color:var(--accent)}
:root .step-no,:root .fl-ico,:root .gp-name .mk,:root .cv-bi{border-radius:var(--b-r-ctl);border:0;background:var(--panel);color:var(--b-ink);box-shadow:none}
:root .fl-ico.amber{background:var(--raised);color:var(--b-ink)}

/* --- cards and panels: flat surfaces, hairline at most, brand radii ------ */
:root .noise-card,:root .glass,:root .ins-card,:root .mock,:root .itile,:root .wf-card,:root .wf-step,:root .fl-step,:root .fl-leaf,:root .cm-a{box-shadow:none;transform:none}
:root .cv-node{box-shadow:none}
:root .noise-card{border-radius:var(--b-r-card);background:var(--card);border:1px solid var(--border)}
:root .noise-card:hover{transform:none;box-shadow:none;border-color:var(--border-strong)}
:root .noise-card::after,:root .glass::after,:root .noise-dark::after,:root .wf-island::after,:root .cta-island::after,:root .mb::after{display:none}
:root .glass{border-radius:var(--b-r-card);border:1px solid var(--border);background:var(--card)}
:root .ins-card{border-radius:var(--b-r-card)}
:root .mock{border-radius:var(--b-r-card)}
:root .itile{border-radius:var(--b-r-ctl);border:0;background:var(--panel)}
:root .itile.lit{background:var(--raised)}
:root .itile:hover{transform:none;box-shadow:none;background:var(--raised)}
:root .wf-card,:root .wf-step,:root .fl-step,:root .fl-leaf,:root .cv-node,:root .gp-stat,:root .gp-endpoint,:root .dep-field,:root .fl-code{border-radius:var(--b-r-ctl);background:var(--card)}
:root .fl-step.amber{border-color:var(--b-accent);box-shadow:none}
:root .cv-wrap,:root .emb-plot{border-radius:var(--b-r-card);box-shadow:none}
:root .cv-pulse,:root .cv-glow{animation:none;box-shadow:none;border-color:var(--b-accent)}
:root .cv-pkt,:root .cv-pkt.warm{filter:none}
:root .emb-q{box-shadow:none}
:root .wf-dot{border-radius:var(--b-r-tick);box-shadow:none}
:root .open-item{border-top-color:var(--border)}
:root .open-num{font-weight:500;letter-spacing:var(--b-track)}
:root .toc-box,:root .prose-table{border-radius:var(--b-r-card);box-shadow:none}
/* meters and bars: one flat accent, square ends */
:root .gp-fill,:root .bar i,:root .emb-bar i,:root .dep-track i,:root .ins-seg{background:var(--b-accent);border-radius:var(--b-r-tick)}
:root .gp-track,:root .bar,:root .emb-bar,:root .dep-track,:root .ins-bar{border-radius:var(--b-r-tick)}
:root .cm-b{border-radius:var(--b-r-card)}
:root .cm-u{background:var(--b-accent)}

/* the pastel frames around illustrations: the gradient panel (side glows), no blur, no border */
:root .mb{border:0;border-radius:var(--b-r-panel);box-shadow:none;background:var(--b-aurora-side)}
:root .mb::before{display:none}
:root .mb.mb-sm{border-radius:var(--b-r-card)}
:root .mb--cool,:root .mb--amber{background:var(--b-aurora-sideR)}
:root .mb--clean{background:var(--b-aurora-panel)}

/* statement panels */
:root .noise-dark{border-radius:var(--b-r-panel);border:0;box-shadow:none;background:var(--b-aurora-dark)}
:root .noise-dark::before{display:none}
:root .wf-island{border-radius:var(--b-r-panel);border:0;box-shadow:none;background:var(--card)}
:root .wf-island::before{display:none}
:root .cta-island{border-radius:var(--b-r-panel);border:0;box-shadow:none}
:root .cta-panel{background:var(--b-aurora-panel)}

/* --- nav (partials.site-nav): option C's bar (4 Nov 2026) ---------------------
   A 64px paper bar with a soft blur and one hairline, the 28px indigo mark and a 16px wordmark,
   14px links in ink-2 that take the band on hover, the accent "get started" at 36px, dropdowns
   as card surfaces with a hairline (no shadow). Every link, dropdown, the language switch and
   the login stay as they were; only the look changed. */
:root header.sticky{border-bottom:1px solid var(--b-line)!important;background:rgb(248 244 236 / .92)!important;-webkit-backdrop-filter:saturate(1.2) blur(10px)!important;backdrop-filter:saturate(1.2) blur(10px)!important}
:root[data-theme="dark"] header.sticky{background:rgb(21 17 12 / .92)!important}
:root header.sticky{transition:border-color .2s ease}
:root header.sticky.is-top{border-bottom-color:transparent!important}
:root header.sticky > div:first-child{height:64px}
:root .hyai-mark{border-radius:var(--b-r-mark);background:var(--b-accent);box-shadow:none}
:root .hy-sitenav .hyai-mark{width:28px;height:28px}
:root .hy-sitenav .hyai-mark svg{width:18px;height:13px}
:root .hy-sitenav__word{font:600 16px/1 var(--b-font);letter-spacing:-.01em;color:var(--b-ink)}
:root .hd-link,:root .nav-link{padding:8px 12px;font-size:14px;font-weight:400;line-height:1.2;border-radius:var(--b-r-ctl);color:var(--b-ink-2);cursor:pointer;transition:background-color .15s var(--ease),color .15s var(--ease)}
:root .hd-link:hover,:root .nav-link:hover{background:var(--b-band);color:var(--b-ink)}
:root .hd-link[aria-current="page"]{background:var(--b-band);color:var(--b-ink)}
:root .hy-sitenav .hy-sitenav__cta{height:36px;min-height:36px;padding:0 14px;border-radius:var(--b-r-ctl);font:500 14px/1 var(--b-font);background:var(--b-accent);color:var(--b-on-accent)!important}
:root .hy-sitenav .hy-sitenav__cta:hover{background:var(--b-accent-hover)}
:root .hd-card{border:1px solid var(--b-line-2);border-radius:var(--b-r-card);background:var(--b-card);box-shadow:none;padding:8px}
:root .hd-a{border-radius:var(--b-r-ctl);color:var(--b-ink);font-size:14px}
:root .hd-a:hover{background:var(--b-band);color:var(--b-ink)}
:root .hd-head,:root .hd-mhead{font-family:var(--b-mono);font-weight:400;font-size:12px;letter-spacing:0;color:var(--b-muted);text-transform:none}
:root .hd-flag{border-radius:var(--b-r-tick);box-shadow:none;outline:1px solid rgb(21 17 12 / .12);outline-offset:-1px}
:root .hd-mobile{background:var(--b-paper);border-bottom:1px solid var(--b-line);box-shadow:none}
:root .hd-mobile summary{color:var(--b-ink)}
:root .hd-mobile .hd-mrow{padding:14px 4px;border-top:1px solid var(--b-line);border-radius:0;font-size:16px}
:root .hd-mlangs{border-top:1px solid var(--b-line)}
:root .hd-mlang{border-radius:var(--b-r-ctl);color:var(--b-muted)}
:root .hd-mlang.is-on{background:var(--b-band);color:var(--b-ink);font-weight:500}
:root .hd-mtoggle{border-radius:var(--b-r-ctl)!important;border:0!important;background:var(--b-band)!important;color:var(--b-ink)}
:root #hd-menu-toggle[hidden]{display:none}
:root #hd-menu-toggle:focus-visible{outline:2px solid var(--b-accent);outline-offset:3px}
/* dropdown columns (Solutions has two, Resources three) */
:root .hd-card.cols2,:root .hd-card.cols3{display:grid;gap:4px 8px;min-width:0;width:max-content}
:root .hd-card.cols2{grid-template-columns:repeat(2,minmax(180px,auto))}
:root .hd-card.cols3{grid-template-columns:repeat(3,minmax(180px,auto))}
/* Products: the four layers as a 2x2 grid (whole tile clickable), the platform pages beside it */
:root .hd-prod{display:grid;grid-template-columns:auto auto;align-items:start;gap:8px;width:max-content}
:root .hd-prod__grid{display:grid;grid-template-columns:300px;gap:4px}
:root .hd-prod__item{display:grid;grid-template-columns:auto 1fr;column-gap:10px;row-gap:2px;align-content:start;padding:10px 14px;border-radius:var(--b-r-ctl);background:var(--panel);color:var(--foreground)}
:root .hd-prod__item:hover,:root .hd-prod__item:focus-visible{background:var(--b-raised)}
:root .hd-prod__num{grid-row:span 2;font:400 11px/22px var(--b-mono);color:var(--b-muted)}
:root .hd-prod__name{font-size:15px;font-weight:500;line-height:22px;letter-spacing:-.01em}
:root .hd-prod__line{font-size:13px;line-height:1.4;color:var(--muted-foreground);white-space:normal}
:root .hd-prod__side{display:grid;grid-template-columns:repeat(2,minmax(176px,auto));align-content:start;gap:0 4px;padding-left:4px}
:root .hd-prod__side .hd-head{grid-column:1 / -1}
:root .hd-prod__side .hd-a{padding:7px 10px}
:root .hd-a.hd-prod__mitem{display:grid;gap:2px;padding:10px 12px}
/* an open dropdown darkens its label; the phone menu rows are straight rows */
:root .hd-item:hover > .hd-link,:root .hd-item:focus-within > .hd-link{color:var(--foreground)}
:root .hd-mobile > a.hd-a{border-radius:0}
:root .hd-a.hd-prod__mitem .hd-prod__name{font-size:15px;line-height:1.3}

/* --- footer (partials.site-footer): option C's quiet paper footer (4 Nov 2026) ---
   Paper under one hairline instead of the band; every column, the newsletter, the legal line and
   the trust marks stay. Labels are muted mono, links 14px ink. */
/* The band runs edge to edge; its content lines up with the nav (the shell width minus the
   nav's 16/32px padding). The shell stops clipping sideways on pages with this footer, and
   every other direct child of the shell clips itself instead, so nothing else changes. */
:root html:has(footer.hy-foot){overflow-x:clip}
:root .shell:has(> footer.hy-foot){overflow-x:visible}
:root .shell:has(> footer.hy-foot) > :not(footer):not(header){overflow-x:clip}
:root .hy-foot{--hy-foot-pad:16px;margin-inline:calc(50% - 50vw);padding:64px calc(50vw - 50% + var(--hy-foot-pad)) 40px;background:var(--b-paper);border-top:1px solid var(--b-line);color:var(--b-ink);font-family:var(--b-font)}
@media (min-width:768px){:root .hy-foot{--hy-foot-pad:32px}}
:root .hy-foot a{color:inherit;text-decoration:none}
:root .hy-foot__top{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,5fr);gap:40px 48px}
:root .hy-foot__logo{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:600;letter-spacing:-.01em}
:root .hy-foot__logo .hyai-mark{width:28px;height:28px}
:root .hy-foot__logo .hyai-mark svg{width:18px;height:13px}
:root .hy-foot__line{margin:12px 0 0;max-width:24em;font-size:14px;line-height:1.5;color:var(--muted-foreground)}
:root .hy-foot__news{margin-top:24px;max-width:300px}
:root .hy-foot__news .hy-foot__head{display:block;margin-bottom:8px}
:root .hy-foot__form{display:flex;gap:4px}
:root .hy-foot__form input{flex:1;min-width:0;min-height:40px;padding:0 12px;border-radius:var(--b-r-ctl);background:var(--b-band)!important;font-size:14px;color:var(--foreground)}
:root .hy-foot__form button{display:inline-grid;place-items:center;width:40px;min-height:40px;flex:none;border:0;border-radius:var(--b-r-ctl);background:var(--foreground);color:var(--background);cursor:pointer}
:root .hy-foot__fine{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--muted-foreground)}
:root .hy-foot__social{display:flex;align-items:center;gap:12px;margin-top:20px;font-size:13px}
:root .hy-foot .social{display:inline-grid;place-items:center;width:32px;height:32px;border:0;border-radius:var(--b-r-ctl);background:var(--b-band);color:var(--foreground)}
:root .hy-foot .social svg{width:15px;height:15px}
:root .hy-foot__social .hy-foot__a{color:var(--muted-foreground);padding:0}
:root .hy-foot__social{flex-direction:column;align-items:flex-start;gap:8px}
:root .hy-foot__social .hy-foot__soc{display:inline-flex;align-items:center;gap:10px}
:root .hy-foot .social .hy-icon{width:14px;height:14px}
:root .hy-foot__cols{display:grid;grid-template-columns:.8fr 1.25fr 1fr .9fr 1.25fr .8fr;gap:32px 24px}
:root .hy-foot__head{font:400 12px/1.3 var(--b-mono);letter-spacing:0;color:var(--muted-foreground);text-transform:none}
:root .hy-foot__col > summary{display:block;list-style:none;margin-bottom:10px;pointer-events:none}
:root .hy-foot__col > summary::-webkit-details-marker{display:none}
:root .hy-foot__chev{display:none;width:14px;height:14px;transition:transform .2s}
:root .hy-foot__list{display:grid;justify-items:start}
:root .hy-foot__sub{margin:14px 0 4px;font:400 11px/1.3 var(--b-mono);color:var(--muted-foreground);text-transform:none}
:root .hy-foot__a{display:inline-block;padding:4px 0;font-size:14px;line-height:1.4;color:var(--b-ink-2)}
:root .hy-foot__a:hover{color:var(--b-accent);text-decoration:none!important}
:root .hy-foot__bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px;margin-top:48px;padding-top:24px;border-top:1px solid var(--b-line);font-size:13px;color:var(--b-muted)}
:root .hy-foot__legal{display:grid;gap:6px}
:root .hy-foot__reg{font:400 12px/1.5 var(--b-mono);color:var(--b-muted)}
:root .hy-foot__links{display:flex;flex-wrap:wrap;gap:4px 20px}
:root .hy-foot__links .hy-foot__a{font-size:13px;color:var(--muted-foreground)}
:root .hy-foot__links .hy-foot__a:hover{color:var(--foreground)}
:root .hy-trust{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;font-size:13px}
:root .hy-trust__item{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
:root .hy-trust__item svg{display:block;flex:none;border-radius:var(--b-r-tick);overflow:hidden}
:root .hy-flag__eu-blue{fill:#003399}
:root .hy-flag__eu-gold{fill:#FFCC00}
:root .hy-flag__nl-blue{fill:#21468B}
:root .hy-flag__nl-white{fill:#FFFFFF}
:root .hy-flag__nl-red{fill:#AE1C28}
/* the site nav (partials/site-nav): the hidden sprite of flag symbols, the language menu at the
   right edge, the phone menu icon */
.hy-svg-defs{position:absolute}
:root .hd-menu.hd-menu--end{left:auto;right:0}
:root .hd-card.hd-card--lang{min-width:170px}
:root .hd-mtoggle__icon{color:var(--foreground)}
:root .hy-eu{color:var(--foreground)}
@media (max-width:1180px){
  :root .hy-foot__top{grid-template-columns:1fr}
  :root .hy-foot__brand{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);column-gap:48px;align-items:start}
  :root .hy-foot__news{grid-column:2;grid-row:1 / span 3;margin-top:0}
}
@media (max-width:900px){:root .hy-foot__cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:767px){
  :root .hy-foot{padding-top:40px}
  :root .hy-foot__brand{display:block}
  :root .hy-foot__news{margin-top:20px;max-width:none}
  :root .hy-foot__top{gap:28px}
  /* phones: each column folds; the links stay in the HTML */
  :root .hy-foot__cols{grid-template-columns:1fr;gap:0}
  :root .hy-foot__col > summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;margin:0;pointer-events:auto;cursor:pointer;font-size:13px;color:var(--foreground)}
  :root .hy-foot__chev{display:block}
  :root .hy-foot__col[open] .hy-foot__chev{transform:rotate(180deg)}
  :root .hy-foot__col[open] .hy-foot__list{padding-bottom:12px}
  :root .hy-foot__a{padding:8px 0}
  :root .hy-foot__bar{margin-top:32px;flex-direction:column;align-items:flex-start}
  :root .hy-trust{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ===================================================================== */
/* 5. Tailwind utilities on the brand                                    */
/* ===================================================================== */
/* no shadows, no gradients, no gradient text */
:root [class*="shadow"]:not(.shadow-none){box-shadow:none}
:root [class*="bg-gradient-"]{background-image:none}
:root .bg-clip-text.text-transparent{color:var(--foreground);-webkit-text-fill-color:currentColor;background:none}
:root [class*="backdrop-blur"]{-webkit-backdrop-filter:none;backdrop-filter:none}
/* radii: controls 8, cards 12, panels 24; a "full" circle becomes a control (and a tiny dot a 2px square) */
:root .rounded-full{border-radius:min(var(--b-r-ctl),25%)}
:root :is(.rounded-sm,.rounded){border-radius:var(--b-r-tag)}
:root :is(.rounded-md,.rounded-lg){border-radius:var(--b-r-ctl)}
:root :is(.rounded-xl,.rounded-2xl){border-radius:var(--b-r-card)}
:root .rounded-3xl{border-radius:var(--b-r-panel)}
:root [class*="rounded-[2"]{border-radius:var(--b-r-panel)}
/* colours: indigo, blue and violet are the accent; gray, slate, zinc are ink and paper */
:root :is([class*=" text-indigo-"],[class^="text-indigo-"],[class*=" text-blue-"],[class^="text-blue-"],[class*=" text-violet-"],[class^="text-violet-"]){color:var(--accent)}
:root :is([class*=" bg-indigo-"],[class^="bg-indigo-"],[class*=" bg-blue-"],[class^="bg-blue-"]){background-color:var(--panel)}
:root :is(.bg-indigo-500,.bg-indigo-600,.bg-indigo-700,.bg-blue-500,.bg-blue-600,.bg-blue-700){background-color:var(--accent)}
:root :is([class*=" border-indigo-"],[class^="border-indigo-"],[class*=" border-blue-"],[class^="border-blue-"]){border-color:var(--border)}
:root :is([class*=" text-gray-"],[class^="text-gray-"],[class*=" text-slate-"],[class^="text-slate-"],[class*=" text-zinc-"],[class^="text-zinc-"]){color:var(--muted-foreground)}
:root :is(.text-gray-800,.text-gray-900,.text-slate-800,.text-slate-900,.text-zinc-800,.text-zinc-900){color:var(--foreground)}
:root :is([class*=" bg-gray-"],[class^="bg-gray-"],[class*=" bg-slate-"],[class^="bg-slate-"]){background-color:var(--panel)}
:root :is([class*=" border-gray-"],[class^="border-gray-"],[class*=" border-slate-"],[class^="border-slate-"]){border-color:var(--border)}

/* ===================================================================== */
/* 6. Prose, tables, forms                                               */
/* ===================================================================== */
:root .prose-site h2{font-size:clamp(24px,2.4vw,32px);font-weight:500;letter-spacing:-.035em;line-height:1.12}
:root .prose-site h2::before{display:none}
:root .prose-site h3{font-size:19px;font-weight:500;letter-spacing:-.02em}
:root .prose-site :is(p,li){line-height:1.6}
:root .prose-site ul li::before{border-radius:var(--b-r-tick);background:var(--b-muted);width:7px;height:7px;top:.62em}
:root .prose-site a{color:var(--accent);text-decoration-thickness:1px}
:root .prose-site code{border-radius:var(--b-r-tag);background:var(--panel);font-family:var(--b-mono)}
:root .prose-site pre{border:0;border-radius:var(--b-r-card);background:var(--panel);box-shadow:none}
:root .prose-site th{background:var(--panel);font-weight:500}
:root .prose-site .prose-table{background:var(--card);box-shadow:none}
:root .prose-site .prose-table tbody tr:hover td{background:var(--panel)}
:root .faq-item summary{font-weight:500}
:root .faq-item summary::after,:root .toc-box summary::after{color:var(--accent)}
:root .toc-box summary{font-family:var(--b-mono);font-weight:400;letter-spacing:0;text-transform:none}
:root :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){border-radius:var(--b-r-ctl)}
:root .code{font-family:var(--b-mono)}
:root .code .c2{color:var(--accent-ink)}

/* ===================================================================== */
/* 7. Page families (review round 1 with Codex)                          */
/* ===================================================================== */
/* document pages (legal layout, pricing, DPA): a document title, a calm reading rhythm */
:root :is(.prose-site,.prose-trust) :is(p,li){font-size:16px;line-height:1.55}
:root .prose-trust p{margin-block:0 1em}
:root .prose-trust h2{margin-block:32px 12px;font-size:22px;font-weight:500;line-height:1.2;letter-spacing:-.02em}
:root .prose-trust h3{font-size:18px;font-weight:500;line-height:1.25}
/* tables: surfaces instead of a spreadsheet grid */
:root :is(.prose-site,.prose-trust) :is(th,td){border:0;padding:12px;font-variant-numeric:tabular-nums}
:root :is(.prose-site,.prose-trust) th{background:var(--panel);color:var(--foreground);font-family:var(--b-mono);font-size:12px;font-weight:400}
:root :is(.prose-site,.prose-trust) tbody tr:nth-child(even) td{background:var(--panel)}
:root .prose-table{border:0}
@media (max-width:640px){
  :root .prose-trust table{display:block;max-width:100%;overflow-x:auto}
  :root .prose-trust :is(th,td){min-width:110px}
}

/* depth from surfaces: no outlines on cards and windows, no section rules */
:root :is(.noise-card,.glass,.mock,.ins-card,.toc-box){border:0}
:root .sec-border{border-top:0}
:root .prose-site h2{border-top:0;padding-top:0;margin-top:40px}
:root :is(.faq-item,.faq-list){border:0}
:root .faq-item + .faq-item{margin-top:8px}
:root .faq-item summary{padding:16px;border-radius:var(--b-r-ctl);background:var(--card)}
:root .faq-a{padding:4px 16px 16px}

/* contact form */
:root form:has(.input-field) .btn-primary{border-radius:var(--b-r-ctl)!important}
:root form:has(.input-field) label{font-family:var(--b-mono);font-size:12px;font-weight:400;letter-spacing:0}
:root .input-field{background:var(--panel);border:0;font-size:16px;border-radius:var(--b-r-ctl)}
:root .input-field:focus{box-shadow:none;outline:2px solid var(--accent);outline-offset:3px}
:root .hero-space{background:var(--background)}
:root .hero-space::before{content:none}

/* filters and jump links: controls, one solid accent for the selected one */
:root .mg-chip{border:0;border-radius:var(--b-r-ctl);background:var(--panel);color:var(--foreground);box-shadow:none}
:root .mg-chip:hover{background:var(--raised)}
:root :is(.mg-chip.active,.mg-chip[aria-pressed="true"]){background:var(--b-accent);color:var(--b-on-accent)}
/* metadata tags: one neutral system */
:root .mtag{border:0;border-radius:var(--b-r-tag);background:var(--panel);color:var(--foreground);font-family:var(--b-mono);font-weight:400;letter-spacing:0;box-shadow:none}
/* catalogue and news cards: flat, no lift, no zoom */
:root .mcard{border:0;border-radius:var(--b-r-card);background:var(--card);box-shadow:none}
:root .mcard:hover{background:var(--panel);transform:none;box-shadow:none}
:root .mcard-name{font-weight:500}
:root .mcard-mk{border-radius:var(--b-r-ctl);background:var(--panel);color:var(--b-ink)}
:root .mg-toolbar{background:var(--background);-webkit-backdrop-filter:none;backdrop-filter:none;border:0}
:root .mg-search{border:0;border-radius:var(--b-r-ctl)}
:root .mg-search:focus-within{box-shadow:none;outline:2px solid var(--accent);outline-offset:3px}

/* router diagram: surfaces, no outlines, no pulse */
:root .cv-wrap{background:var(--card);border:0}
:root .cv-node{background:var(--panel);border:0;border-radius:var(--b-r-card)}
:root .cv-node .r2{color:var(--muted-foreground)}
/* status: a neutral tag and a small accent square, never a green glowing dot */
:root :is(.gp-chip,.chip.warm,.chip.up){background:var(--panel);color:var(--foreground);border:0;border-radius:var(--b-r-tag);font-family:var(--b-mono);font-weight:400}
:root :is(.gp-dot,.mcard-name .v){background:var(--accent);border-radius:var(--b-r-tick);box-shadow:none}

/* ------------------------------------------------------------------ */
/* Review round 2                                                      */
/* ------------------------------------------------------------------ */

/* document and editorial titles get their own scale; the display scale stays for marketing heroes */
:root body:has(.hero-space) h1:not([class*="hy-"]):not([class*="home-"]){font-size:clamp(34px,4vw,52px);line-height:1.08}

/* contact: less air between the introduction and the form, a flat card */
:root .hero-space{padding-block:64px 24px}
:root .hero-space + section{padding-block:40px 80px}
:root .hero-space + section .card{border:0;box-shadow:none;border-radius:var(--b-r-card)}
@media(max-width:640px){
  :root .hero-space{padding-block:40px 16px}
  :root .hero-space + section{padding-block:24px 48px}
}

/* guides: a readable measure and clear chapter breaks */
:root article.prose-site{max-inline-size:880px;margin-inline:auto}
:root article.prose-site > :is(p,ul,ol){max-inline-size:72ch}
:root article.prose-site h2{margin-block:64px 20px;padding:0}
:root article.prose-site > h2:first-child{margin-top:0}
@media(max-width:640px){:root article.prose-site h2{margin-top:40px}}

/* nested illustration parts: a surface instead of an outline */
:root :is(.gp-stat,.gp-endpoint,.dep-field,.fl-code){border:0;background:var(--panel);border-radius:var(--b-r-ctl)}
:root .mock-head{border-bottom:0;background:var(--panel)}
:root .mock-head::after{content:none}
:root .fl-step.amber{border:0;box-shadow:none}

/* an opened FAQ stays one surface */
:root .faq-item{background:var(--card);border-radius:var(--b-r-card)}
:root .faq-item summary{background:transparent;padding:18px 20px}
:root .faq-item[open] summary{border-radius:var(--b-r-card) var(--b-r-card) 0 0}
:root .faq-a{padding:0 20px 20px}

/* controls: a 44px floor that grows with longer translations */
:root :is(.btn-primary,.btn-ghost){height:auto;min-height:44px;padding:12px 20px;line-height:1.25;white-space:normal;text-align:center}
:root :is(#news-hero-email,#newsletter-email){min-height:44px;font-size:16px;background:var(--panel)!important;border:0!important}
:root :is(#news-hero-btn,#newsletter-btn){min-height:44px}
@media(max-width:640px){
  :root .hd-mtoggle{min-width:44px;min-height:44px}
  :root .mg-chip{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  /* catalogue filters scroll sideways with a visible track instead of looking clipped */
  :root .mg-chips{min-width:0;overflow-x:auto;padding-block:4px 8px;scrollbar-width:thin;scrollbar-color:var(--muted-foreground) var(--panel)}
  :root .mg-chips::-webkit-scrollbar{display:block;height:4px}
  :root .mg-chips::-webkit-scrollbar-thumb{background:var(--muted-foreground);border-radius:var(--b-r-tick)}
  :root .mg-chip{flex:none}
}

/* router diagram: icons on a surface, no packets (they are SVG circles) */
:root .cv-bi{background:var(--raised)!important;color:var(--b-ink)!important}
:root .cv-pkt{display:none}

/* footer: the newsletter field sits on the card colour so it reads on the band (the rule above sets the band) */
:root .hy-foot #newsletter-email{background:var(--b-band)!important}
:root .hy-foot #newsletter-email:focus{background:var(--b-raised)!important}
:root .hy-foot #newsletter-btn{min-height:44px;width:44px}

/* final review (Codex, 2 Nov 2026): last cross-page inconsistencies */
:root h1{letter-spacing:var(--b-track)!important}
:root h2{letter-spacing:var(--b-track-2)!important}
:root .home-plan__layers a{background:var(--b-card);color:var(--b-muted);outline:0}
:root .home-plan__layers a.is-on{background:var(--b-raised);color:var(--b-ink)}
:root .home-plan__layers a:hover{background:var(--b-raised);color:var(--b-ink)}
:root .gw-banner{border:0;border-radius:var(--b-r-card);background:var(--b-band)}
:root .gw-banner .ic{border-radius:var(--b-r-ctl)}
:root .prose-trust ul{list-style-type:square}
:root .prose-trust ul li::marker{color:var(--b-muted)}
:root .hy-notice:not(.hy-notice--ok):not(.hy-notice--error)::before{background:var(--b-ink)}
:root .prose-trust code{background:var(--panel);border-radius:var(--b-r-tag);font-family:var(--b-mono)}

/* mobile: nothing clipped (chapter tag, window head with tabs, segmented controls) */
@media (max-width:600px){
  :root .hy-chapter__line{flex-wrap:wrap;row-gap:8px}
  :root .hy-chapter__line .hy-label{white-space:normal;max-width:100%}
  :root .hy-win__head{flex-wrap:wrap;row-gap:8px;height:auto}
  :root .hy-win__crumb{min-width:0}
  :root .home-router .hy-seg{flex-wrap:wrap;max-width:100%}
}

/* ------------------------------------------------------------------ */
/* No borders or rings on fields and buttons (Jantine, 3 Nov 2026)     */
/* ------------------------------------------------------------------ */
/* fields: a flat band surface; on focus the surface steps up, never a ring or a coloured border */
:root :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){border:0!important;box-shadow:none!important;outline:0!important;background-color:var(--b-band)}
:root :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea):focus{background-color:var(--b-raised)!important;outline:0!important;box-shadow:none!important}
:root :is(.mg-search,.hy-field__control):focus-within{outline:0!important;box-shadow:none!important}
:root .mg-search{background:var(--b-band)}
:root .mg-search input{background:transparent!important}
:root .mg-search:focus-within{background:var(--b-raised)}
:root .mg-search:focus-within input{background:transparent!important}
/* buttons and button-like tags: a fill, never an outline */
:root :is(button,[role=button],.hy-btn,.btn-primary,.btn-ghost,[class*="-btn"],.mg-select,.mtag,.gw-talk-btn){border:0!important;box-shadow:none!important}
:root .gw-talk-btn{background:var(--b-band);color:var(--b-ink)}
:root .gw-talk-btn:hover{background:var(--b-raised)}
:root .mtag.gw-eu{background:var(--b-band);color:var(--b-ink)}
:root .gw-panel{border:0;box-shadow:none;border-radius:var(--b-r-card)}
:root .gw-talk{border:0;background:var(--b-band);border-radius:var(--b-r-card)}
/* keyboard focus on buttons and links stays visible for keyboard users only, and quiet */
:root :is(a,button,[role=button],summary):focus{outline:0}
:root :is(a,button,[role=button],summary):focus-visible{outline:2px solid var(--b-accent);outline-offset:2px}
/* model garden: "popular" tag on the ten most used models (owner: resources/views/models, 3 Nov 2026) */
:root .mtag.mtag-pop{background:var(--b-accent);color:var(--b-on-accent);font:400 11.5px/1.2 var(--b-mono);letter-spacing:0;text-transform:none}
/* end model garden */

/* ------------------------------------------------------------------ */
/* Motion (3 Nov 2026): the movement of the production homepage, in    */
/* the brand. Driven by public/js/brand-motion.js; html.hy-motion is   */
/* only set when motion is allowed.                                    */
/* ------------------------------------------------------------------ */
html.hy-motion .hy-rv{opacity:0;transform:translateY(10px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--rv-i,0) * 80ms)}
html.hy-motion .hy-rv.is-in{opacity:1;transform:none}
/* live activity: rows fill in one by one, a new request lands on top with a short raised wash */
html.hy-motion .home-activity tbody tr.hy-row-wait{opacity:0}
html.hy-motion .home-activity tbody tr.hy-row-in{animation:hy-row-in .45s cubic-bezier(.2,.7,.2,1) both}
html.hy-motion .home-activity tbody tr.hy-row-new{animation:hy-row-in .45s cubic-bezier(.2,.7,.2,1) both}
html.hy-motion .home-activity tbody tr.hy-row-new > *{animation:hy-row-wash 2.4s ease-out both}
@keyframes hy-row-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes hy-row-wash{0%,25%{background:var(--b-raised)}100%{background:transparent}}
/* search boxes that wrap an input: the box is the surface, it steps up on focus, no ring */
:root .home-models__q:focus-within{outline:0!important;background:var(--b-raised)}
:root .home-models__q input{background:transparent!important}

/* ------------------------------------------------------------------ */
/* Page frame and grid (3 Nov 2026)                                     */
/* ------------------------------------------------------------------ */
/* THE GRID. Five rules for every public page, measured headless at 1440, 1100 and 390.
   1. One frame. The content edge is the nav logo and the footer logo at every width: option C's
      measure since 4 Nov 2026, a 1176px frame (1240 with its gutter) centred, a 32px gutter, 24px
      below 901px, 16px on phones. Nothing that reads as content starts anywhere else by accident.
   2. Content sits on the frame edge. Inside a surface it sits on that surface's ONE padding
      token: card 24 (20 on phones), panel 48 (32 below 1181). A surface that holds main text
      is visibly a surface: a gradient panel carries the band fill under its glow, and on phones
      it drops the surface altogether, so its content goes to the frame edge.
   3. A band is full bleed, edge to edge, with its content on the frame; never a block cut off
      at the shell. Cards inside a band take the card fill, so they read as cards.
   4. A centred section (pricing hero, plan grid) is centred on the frame, never offset.
   5. Reading pages (pricing, legal, articles): one reading column (--b-read), centred in the
      frame.
   Only spacing, alignment and surfaces change here: markup, copy, headings and structured
   data stay as they are. */
:root{
  --b-frame:1176px;               /* the frame (option C's measure: 1240 with its 32px gutter) */
  --b-gutter:32px;                /* side gutter: 32, 24 below 901, 16 below 561 (option C) */
  --b-read:880px;                 /* the reading column for documents and articles */
  --b-pad-card:24px;              /* inner padding of a card */
  --b-pad-panel:48px;             /* inner padding of a panel */
  --hy-w:var(--b-frame);          /* the homepage parts use the same frame */
  --hy-sx:var(--b-gutter);
  --hy-grad-pad:64px var(--b-pad-panel);
  --b-frame-pad:max(var(--b-gutter),calc((100% - var(--b-frame)) / 2));
}
@media (max-width:1180px){:root{--b-pad-panel:32px;--hy-grad-pad:48px var(--b-pad-panel)}}
@media (max-width:900px){:root{--b-gutter:24px}}
@media (max-width:720px){:root{--b-pad-card:20px;--hy-grad-pad:0}}
@media (max-width:560px){:root{--b-gutter:16px;--b-sec:80px}}
/* the frame is measured against the viewport: no body inset, no capped shell (bands reach the edges) */
:root body{padding-inline:0}
:root .shell{max-width:none}
/* 1. the frame: every top-level block spans the page, its content keeps to the frame */
:root body:not(.hy-home) .shell > :is(section,article,main,header.relative:not(.sticky),.mg-toolbar):not(:has(> .hy-wrap)){padding-inline:var(--b-frame-pad)}
:root body:not(.hy-home) .shell > :is(section,article,main,header.relative:not(.sticky)) > .px-6{padding-inline:0}
/* 2. wide inner wrappers fill the frame */
:root body:not(.hy-home) .shell > :is(section,article,main,header.relative:not(.sticky)) :is(.max-w-\[920px\],.max-w-\[1000px\],.max-w-\[1080px\],.max-w-\[1100px\],.max-w-\[1200px\],.max-w-5xl,.max-w-6xl,.max-w-7xl){max-width:none}
/* 3. narrow wrappers (hero text, section heads, FAQ, closing lines) start on the frame edge */
:root body:not(.hy-home) .shell > :is(section,article,main,header.relative:not(.sticky)) > .mx-auto{margin-inline:0}
:root body:not(.hy-home) .shell > :is(section,article,main,header.relative:not(.sticky)).text-center,
:root body:not(.hy-home) .shell > :is(section,article,main,header.relative:not(.sticky)) > .text-center{text-align:left}
:root body:not(.hy-home) .shell > :is(section,article,main,header.relative:not(.sticky)) > .mx-auto > .mx-auto{margin-inline:0}
/* section heads inside a wide wrapper (/code, /savings, /gpu-pool) */
:root body:not(.hy-home) .shell > :is(section,article,main,header.relative:not(.sticky)) > .mx-auto > .text-center{text-align:left}
:root body:not(.hy-home) .shell > :is(section,article,main,header.relative:not(.sticky)) > .mx-auto > :is(.text-center,.wf-island) > :is(.mx-auto,.text-center > .mx-auto){margin-inline:0}
:root body:not(.hy-home) .shell > :is(section,article,main,header.relative:not(.sticky)) > .mx-auto > .wf-island > .text-center{text-align:left}
:root body:not(.hy-home) .shell > :is(section,article,main,header.relative:not(.sticky)) > .justify-center,
:root body:not(.hy-home) .shell > :is(section,article,main,header.relative:not(.sticky)) > .mx-auto > .justify-center{justify-content:flex-start}
:root body:not(.hy-home) .shell > :is(section,article,main,header.relative:not(.sticky)) > .mx-auto.flex-col.items-center{align-items:flex-start}
/* 5. long text: one reading column, centred in the frame (legal, articles, news, prose blocks) */
/*    section-level narrow blocks (FAQ lists, hero text) keep to the frame edge: they are not documents */
:root body:not(.hy-home) .shell > :is(section,main,header.relative:not(.sticky)) > :is(.max-w-4xl,.max-w-3xl,.max-w-\[840px\]){max-width:var(--b-read)}
/*    documents centre: the legal layout (pricing, legal, DPA), a prose block, a news article */
:root body:not(.hy-home) .shell > :is(section,header.relative:not(.sticky)):has(> .max-w-3xl > article.prose-site) > .max-w-3xl,
:root body:not(.hy-home) .shell > :is(article,header.relative:not(.sticky)):is(article) > .mx-auto{max-width:var(--b-read);margin-inline:auto}
:root body article.prose-site{max-inline-size:var(--b-read);margin-inline:auto}

/* nav and footer on the frame edge */
:root header.sticky > div:first-child{padding-inline:var(--b-frame-pad)!important}
:root .hy-foot{margin-inline:0;padding-inline:0!important}
:root .hy-foot__in{padding-inline:var(--b-frame-pad)}
/* pages built from homepage parts (layer pages: chapter + sections inside main): main adds no
   padding of its own, the chapter brings the frame, plain sections get the frame edge */
:root body:not(.hy-home) .shell > main:has(> :is(.hy-chapter,.hy-hero)){padding-inline:0!important}
:root body:not(.hy-home) .shell > main:has(> :is(.hy-chapter,.hy-hero)) > section:not(:has(> .hy-wrap)){padding-inline:var(--b-frame-pad)!important}

/* 2. gradient panels (homepage hero, closing block): the band fill under the glow, one panel
   padding; on phones no surface, the content on the frame edge */
:root :is(.hy-grad,[data-finish="warm"] :is(.hy-cta:not(.hy-cta--compact) .hy-cta__box,.hy-cm-cta)){background-color:var(--b-band)}
/*    the illustration frame (.mb) is a gradient panel too: the band fill under its glow */
:root .mb{background-color:var(--b-band)}
@media (max-width:720px){
  :root :is(.hy-grad,[data-finish="warm"] :is(.hy-cta:not(.hy-cta--compact) .hy-cta__box,.hy-cm-cta)){background:transparent;border-radius:0;overflow:visible}
  :root :is(.home-hero__panel,.home-close__box){padding:0;border-radius:0;grid-template-columns:minmax(0,1fr)}
  :root :is(.hy-grad,[data-finish="warm"] :is(.hy-cta:not(.hy-cta--compact) .hy-cta__box,.hy-cm-cta))::before,
  :root :is(.hy-grad,[data-finish="warm"] :is(.hy-cta:not(.hy-cta--compact) .hy-cta__box,.hy-cm-cta))::after{display:none}
}
/* 3. inside a band, cards and tags take the card fill, so they read as surfaces on the band */
:root :is(.band,.hy-section--band) :is(.hy-layer,.hy-win,.pill,.eyebrow,.hy-label:not(.hy-label--accent)){background:var(--b-card)}
/* the walking sprite above the hero starts on the frame edge on phones, where the hero has no surface */
@media (max-width:720px){:root .home-walker{left:0}}

/* on the gradient panel: tags and window heads need one more step of contrast (3 Nov 2026),
   so the labels read and the walker visibly stands on the top edge of the window */
:root .hy-grad .hy-label:not(.hy-label--accent){background:var(--b-card)}
/* the closing call to action shown inside another block (the brand page specimen): no own frame */
:root .hy-close--inline{padding:0}
:root .hy-close--inline > .hy-wrap{max-width:none;padding:0}
:root .home-close__box--solo{grid-template-columns:minmax(0,1fr)}

/* Command button (3 Nov 2026): x-site.button with prompt="hyai" reads as a command, "$ hyai get your API key",
   so the hero says in one line that setup is one step. Same solid accent button, mono label. */
:root .hy-btn--code{font-family:var(--hy-mono);font-size:14px;font-weight:500;letter-spacing:0;gap:8px}
:root .hy-btn__prompt{opacity:.72}

/* ------------------------------------------------------------------ */
/* SEO pages and shared section blocks (seo/show.blade.php, 3 Nov 2026) */
/* ------------------------------------------------------------------ */
/* cards, figures and steps inside a band take the card fill (grid rule 3) */
:root .hy-section--band :is(.hy-card,.hy-stat,.hy-step,.hy-chip:not(.hy-chip--accent)){background:var(--b-card)}
:root .hy-section--band .hy-step__no{background:var(--b-band)}
/* a body section's opening text above its card grid */
:root .hy-seo-block__lead{max-width:var(--b-read);margin:-16px 0 32px}
:root .hy-cm-split__body .hy-seo-block__lead{margin:0 0 24px}
/* card bodies written as article HTML: card type, no prose spacing above the first line */
:root .hy-card .prose-site{font-size:14.5px;line-height:1.55;color:var(--hy-muted)}
:root .hy-card .prose-site > :first-child{margin-top:0}
:root .hy-card .prose-site > :last-child{margin-bottom:0}
:root .hy-card .prose-site :is(p,ul,ol){margin:0 0 10px}
/* FAQ answers written as article HTML */
:root .hy-faq__a.prose-site > :first-child{margin-top:0}
:root .hy-faq__a.prose-site > :last-child{margin-bottom:0}
/* security block: trust tags above the figures */
:root .hy-seo-badges{margin-bottom:32px}
:root .hy-seo-badges .hy-chip svg{width:16px;height:16px;flex:none}
/* integrations block: tool tiles */
:root .hy-seo-tools{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
:root .hy-seo-tools li{display:grid;place-items:center;aspect-ratio:1;background:var(--b-band);border-radius:var(--b-r-ctl)}
:root .hy-section--band .hy-seo-tools li{background:var(--b-card)}
:root .hy-seo-tools img{width:24px;height:24px;opacity:.82}
:root .hy-seo-tools__cta{margin-top:24px}
@media (max-width:720px){:root .hy-seo-tools{grid-template-columns:repeat(5,minmax(0,1fr))}}
/* company page: careers row under the team */
:root .hy-seo-callout{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:24px;align-items:center;margin-top:56px;padding:var(--b-pad-card);background:var(--b-band);border-radius:var(--b-r-card)}
:root .hy-section--band .hy-seo-callout{background:var(--b-card)}
:root .hy-seo-callout__bot{display:grid;place-items:center;width:56px;aspect-ratio:1;background:var(--b-raised);border-radius:var(--b-r-ctl)}
:root .hy-seo-callout__title{margin:0;font-weight:500;font-size:20px;line-height:1.25;letter-spacing:-.02em}
:root .hy-seo-callout__text{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--hy-muted)}
@media (max-width:720px){:root .hy-seo-callout{grid-template-columns:1fr}}
/* closing block: a long translated button wraps instead of widening the column past the phone edge */
:root .home-close__box > *{min-width:0}
@media (max-width:720px){:root .home-close__ctas .hy-btn{white-space:normal;height:auto;min-height:44px;padding-block:10px;text-align:left}}
/* SEO pages: after a paper section the closing panel follows at the section rhythm, not with a double gap */
:root .hy-seo-page > .hy-section:not(.hy-section--band) + .home-close{padding-top:0}
/* end SEO pages */

/* Model pages in the layer pattern (owner: resources/views/models, 3 Nov 2026) */
:root .hy-model-page .mp-kicker--gap{margin-top:28px}
:root .hy-model-page :is(.mp-card,.mp-price,.mg-advice,.hy-model){border-radius:var(--b-r-panel)}
:root .hy-model-page :is(.mp-usage,.mp-stat){border-radius:var(--b-r-card)}
:root .hy-model-page .mp-bench{margin-top:28px}
:root .hy-model-page .mp-details .hy-table-wrap{margin:10px 0 0;background:var(--b-card)}
:root .hy-model-page .mp-meters--tasks{margin-top:12px;align-items:start}
:root .hy-model-page .mp-view{font:400 12.5px var(--b-mono);color:var(--b-accent)}
:root .hy-model-page .hy-model__badges .hy-badge{border-radius:var(--b-r-tag)}
:root .hy-model-page .mg-hero + .gw-overlay + .mg-sec,:root .hy-model-page .mg-hero + .mg-sec{padding-top:24px}
:root .hy-model-page .mg-sec .hy-model{padding:18px 18px 16px;gap:12px}
/* both columns may shrink; the curl column is wide enough for the request line, the code scrolls inside its window (5 Nov 2026) */
@media (min-width:1181px){:root .hy-model-page .mp-duo{grid-template-columns:minmax(0,460px) minmax(0,1fr)}}
/* end model pages */

/* ------------------------------------------------------------------ */
/* Accent text becomes ink (Jantine, 3 Nov 2026: "thick blue text,     */
/* just black"). Labels, kickers, numbers, chips and selected tabs     */
/* with accent-coloured text on a light fill read in ink. The accent   */
/* stays for links, the solid accent badge and button (on-accent text),*/
/* icons and ticks, and code colouring. Overrides the rules in         */
/* site-theme.css and the page <style> blocks in one place.            */
/* ------------------------------------------------------------------ */
:root :is(
  .hy-label:not(.hy-label--accent) b,.hy-layer__cmd b,.home-tools code b,.home-lab__run b,.mp-score b,
  .hy-cmd__p,.hy-cmd__done,.hy-model__state,.mp-verified,
  .hy-stat__num,.hy-cm-fig__value.is-accent,.hy-cm-step__num,.home-lab__row.is-measured .home-lab__bd,
  .gw-adv-sum,.gw-val,
  .sv-s.win,.sv-row .pct,.sv-table .pct,.sv-case-pct,.sv-case-p,
  .home-models__filters button.is-on,.home-lab__tabs button[aria-selected="true"],.home-sizer__presets button.is-on,
  .hy-game__pn small,.hy-game__disc > span,.hy-game__disc a b,
  .vac-listhead,
  .hy-win--term .hy-win__body .p,.home-console__out .p,.home-console__in .p
){color:var(--b-ink)}
/* the same accent written inline in a page (a heading phrase, a hint line); links and icon tiles keep it */
:root :is(span,p,div)[style*="color:var(--accent-ink)"]:not(:has(svg)){color:var(--b-ink)!important}
/* the mission line "AI on our own terms." keeps the indigo (Jantine 3 Nov 2026) */
:root .home-why__text em{color:var(--b-accent)}
/* end accent text */
/* Hero alignment (3 Nov 2026): the copy starts at the top of the panel, and the eyebrow is as tall as the
   "how it works" window head, so its line sits on the same height as that head. */
:root .home-hero__copy{align-self:start}
:root .home-hero__eyebrow{min-height:44px;margin-top:0}
:root .home-hero__eyebrow.hy-chapter__line{margin-bottom:36px;font-size:13px}
:root .home-hero__eyebrow .hy-label--accent{background:var(--b-accent);color:var(--b-on-accent);font-size:13px;padding:5px 9px}
/* The window head in the hero takes the raised tone, so Loes visibly walks on its top edge against the panel. */
:root .home-hero__flow .home-flow__head{background:var(--b-raised)}
/* Loes walker tip (3 Nov 2026): beside Loes instead of above her, so the sticky nav never covers it. */
:root .home-walker::after,:root .home-walker.is-tip-l::after,:root .home-walker.is-tip-r::after{left:calc(100% + 10px);right:auto;bottom:auto;top:50%;transform:translateY(-50%)}
:root .home-walker.is-tip-r::after{left:auto;right:calc(100% + 10px)}
/* Review fixes (3 Nov 2026): nothing on a phone is cut off. The hero buttons wrap onto their own row
   when both do not fit; the "how it works" footer puts its live status line under the key. */
@media (max-width:720px){
  :root .home-hero__ctas{display:flex;flex-wrap:wrap;gap:12px}
  :root .home-hero__ctas > *{flex:1 1 auto}
  :root .home-flow__foot{flex-wrap:wrap;row-gap:4px;padding:10px 16px}
  :root .home-flow__key{white-space:nowrap}
  :root .home-flow__status{order:3;flex:1 0 100%;white-space:normal;line-height:1.5}
}
/* terminal windows wrap their lines: spaces first, a long URL wherever it must; never a hidden scroll */
:root .hy-win--term .hy-win__body{white-space:pre-wrap;overflow-wrap:anywhere;overflow-x:visible}
@media (max-width:600px){:root .hy-win--term .hy-win__body{padding:16px 14px;font-size:11.5px;line-height:1.75}}
@media (max-width:420px){:root .hy-win--term .hy-win__body{padding:14px 12px;font-size:11px}}
/* the Control mock's toggle is square like every other control */
:root .home-toggle{border-radius:var(--b-r-tag)}
:root .home-toggle::after{border-radius:var(--b-r-tick)}

/* ------------------------------------------------------------------ */
/* Document pages (3 Nov 2026): layouts.legal on the shared blocks.     */
/* Security, disclosure, DPA, sub-processors, pricing, the API docs     */
/* and status: the chapter hero (long), an optional block under it      */
/* (the pricing plans), the text in x-site.document. One table style    */
/* for every document table, raw <table> and x-site.table alike.        */
/* ------------------------------------------------------------------ */
:root .hy-chapter--long .hy-h1{font-size:var(--hy-t-h1);line-height:1.02}
:root .hy-doc{padding:0 0 104px}
:root .hy-doc__body{max-width:var(--b-read)}
:root .hy-doc__body .hy-doc__meta{margin:0 0 32px;font:400 12.5px/1.6 var(--b-mono);color:var(--b-muted)}
:root .hy-doc__body .hy-doc__fine{font-size:14px;line-height:1.55;color:var(--b-muted)}
:root .hy-doc__block{margin-bottom:40px}
:root .hy-doc-lead{padding:0 0 80px}
/* a surface in the text (the sub-processors summary) and an information notice (the DPA template) */
:root .hy-doc__body .hy-doc__panel{margin:0 0 24px;padding:var(--b-pad-card)!important;background:var(--b-band);border-radius:var(--b-r-card)}
:root .hy-doc__body .hy-doc__panel > p{color:var(--b-ink)}
:root .hy-doc__body .hy-doc__panel ul{margin:14px 0 0}
:root .hy-doc__body .hy-doc__notice{margin:16px 0 24px;padding:16px var(--b-pad-card)!important;background:var(--b-band);border-radius:var(--b-r-card);font-size:14.5px;line-height:1.6;color:var(--b-ink)}
:root .hy-doc__body .hy-doc__notice p{margin:0;color:var(--b-ink)}
:root .hy-doc__body hr{margin:40px 0;border:0;border-top:1px solid var(--b-line)}
/* tables: one band surface, mono heads, hairline rows, no zebra */
:root .hy-doc__body table{width:100%;margin:16px 0 20px;border-collapse:separate;border-spacing:0;background:var(--b-band);border-radius:var(--b-r-card);overflow:hidden;font-size:14px}
:root .hy-doc__body :is(th,td){padding:12px 18px;border:0;border-top:1px solid var(--b-line);background:transparent;color:var(--b-ink-2);font-size:14px}
:root .hy-doc__body thead th{padding:14px 18px 10px;border-top:0;background:transparent;font:400 11px/1.3 var(--b-mono);color:var(--b-muted);text-align:left;white-space:nowrap;text-transform:none}
:root .hy-doc__body tbody tr:nth-child(even) :is(td,th){background:transparent}
:root .hy-doc__body tbody tr:hover :is(td,th){background:var(--b-raised)}
/* every table wrapper scrolls sideways on a phone, inside a document or not */
:root .hy-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* a wrapped table stays a table (the wrapper scrolls); a bare document table scrolls itself */
:root .hy-table-wrap > table{display:table;max-width:none;overflow:visible}
@media (max-width:640px){:root .prose-trust.hy-doc__body table:not(.hy-table-wrap > table){overflow-x:auto}}
:root .hy-doc__body :is(.hy-table-wrap,.hy-doc__scroll){margin:16px 0 20px;overflow-x:auto;background:var(--b-band);border-radius:var(--b-r-card)}
:root .hy-doc__body :is(.hy-table-wrap,.hy-doc__scroll) table{margin:0;border-radius:0}
:root .hy-doc__body .hy-doc__scroll table{min-width:640px}
:root .hy-doc__body .hy-table .is-num{text-align:right}
/* cards with a number tag (the pricing plans) */
:root .hy-card__num{align-self:flex-start;padding:3px 8px;border-radius:var(--b-r-tag);background:var(--b-card);font:400 12px/1.3 var(--b-mono);color:var(--b-muted)}
:root .hy-card__num + .hy-card__title{margin-top:12px}
:root .hy-doc-lead .hy-card{min-height:168px}
@media (max-width:720px){
  :root .hy-doc{padding-bottom:72px}
  :root .hy-doc-lead{padding-bottom:40px}
  :root .hy-doc-lead .hy-card{min-height:0}
}
/* document headings: a section rhythm a reader can scan */
:root .hy-doc__body h2{margin:56px 0 14px;font-size:26px;line-height:1.15;letter-spacing:-.03em;scroll-margin-top:96px}
:root .hy-doc__body h3{margin:32px 0 10px}
@media (max-width:720px){:root .hy-doc__body h2{margin-top:44px;font-size:23px}}

/* end document pages */

/* ------------------------------------------------------------------ */
/* News (3 Nov 2026): news.blade.php and news-item.blade.php on the     */
/* chapter hero; x-site.news-card in .hy-news-grid; filter chips.       */
/* ------------------------------------------------------------------ */
/* a chip that is a toggle (aria-pressed): the selected one is the solid accent */
:root .hy-chip[aria-pressed]{border:0;cursor:pointer;font-family:inherit}
:root .hy-chip[aria-pressed="false"]:hover{background:var(--b-raised)}
:root .hy-chip[aria-pressed="true"]{background:var(--b-accent);color:var(--b-on-accent)}
:root .hy-news-filters{margin-bottom:32px}
:root .hy-news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense;gap:12px}
:root .hy-news-card{display:flex;flex-direction:column;gap:16px;height:100%;min-width:0;padding:16px;background:var(--b-band);border-radius:var(--b-r-card);color:var(--b-ink);text-decoration:none;transition:background-color .15s var(--ease)}
:root a.hy-news-card:hover{background:var(--b-raised)}
:root .hy-news-card--wide{grid-column:span 2}
:root .hy-news-card__img{width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:var(--b-r-ctl);background:var(--b-raised)}
:root .hy-news-card--wide .hy-news-card__img{aspect-ratio:21/9}
:root :is(.hy-news-card__img,.hy-readcol__media) svg{display:block;width:100%;height:100%}
:root .hy-news-card__body{display:flex;flex:1;flex-direction:column;gap:10px}
:root .hy-news-card__tags{display:flex;flex-wrap:wrap;gap:6px}
:root .hy-news-card__title{margin:0;font-size:18px;font-weight:500;line-height:1.3}
:root .hy-news-card--wide .hy-news-card__title{font-size:clamp(22px,2.6vw,28px);line-height:1.25}
:root .hy-news-card__text{margin:0;font-size:14.5px;line-height:1.55;color:var(--b-muted)}
:root .hy-news-card__meta{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:6px;font-size:13px;color:var(--b-muted)}
:root .hy-news-card__meta .hy-icon{flex:none}
:root .hy-news-more{margin-top:40px}
@media (max-width:1024px){:root .hy-news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  :root .hy-news-grid{grid-template-columns:minmax(0,1fr)}
  :root .hy-news-card--wide{grid-column:span 1}
  :root .hy-news-card--wide .hy-news-card__img{aspect-ratio:16/9}
}
/* an article: the back link above the title, badges and the date line above the tile */
:root .hy-chapter__before{margin-bottom:24px}
:root .hy-chapter__before .hy-back{margin:0}
:root .hy-news-article__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:24px;font-size:13px;color:var(--b-muted)}
:root .hy-readcol__media{border-radius:var(--b-r-card)}
/* a working state inside a button: a small square that turns */
:root .hy-spin{display:inline-block;flex:none;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:var(--b-r-tick);animation:hy-spin .8s linear infinite}
@keyframes hy-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){:root .hy-spin{animation:none;border-right-color:currentColor;opacity:.6}}
/* end news */

/* ------------------------------------------------------------------ */
/* FAQ (3 Nov 2026): faq.blade.php, groups of x-site.seo-faq under     */
/* jump-link chips.                                                     */
/* ------------------------------------------------------------------ */
:root .hy-faq-toc__title{margin:0 0 12px}
/* x-site.section minor: a group inside a page takes a smaller h2 */
:root .hy-section--minor .hy-section__title{font-size:clamp(26px,2.6vw,34px);line-height:1.1;letter-spacing:-.03em}
:root .hy-section--minor .hy-section__head{margin-bottom:24px}
:root .hy-faq-group{scroll-margin-top:calc(var(--hy-nav) + 24px)}
/* end faq */

/* ------------------------------------------------------------------ */
/* Shared small parts (3 Nov 2026)                                      */
/* ------------------------------------------------------------------ */
/* a quiet line under actions or a list (gpu-pool) */
:root .hy-honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* a long command in a document wraps inside its chip instead of running off a phone screen */
:root .hy-doc__body .hy-cmd{max-width:100%;height:auto;min-height:44px;margin:4px 0 12px}
:root .hy-doc__body .hy-cmd > span:first-child{min-width:0;text-align:left;white-space:normal;overflow-wrap:break-word;line-height:1.4;padding:6px 0}
/* long hashes and paths in a document break where they must */
:root .hy-doc__body code{overflow-wrap:anywhere}
:root .hy-note{margin:16px 0 0;max-width:760px;font-size:13.5px;line-height:1.6;color:var(--b-muted)}
/* x-site.steps: the optional mono word next to the number */
:root .hy-step__label{margin-left:12px;font:400 13px/1.2 var(--b-mono);color:var(--b-ink)}
/* the track cards on gpu-pool: the mono num is a label, the list sits in the card text */
:root .hy-card .hy-card__text ul{margin-top:12px}
/* a <br> that only breaks on a wide screen */
@media (max-width:767px){:root .hy-br-wide{display:none}}
/* end shared small parts */

/* ------------------------------------------------------------------ */
/* Dialogs and careers (3 Nov 2026): x-site.dialog-card opens           */
/* x-site.dialog; vacatures.blade.php.                                  */
/* ------------------------------------------------------------------ */
:root .hy-dialog-card{width:100%;height:100%;border:0;font:inherit;text-align:left;cursor:pointer;transition:background-color .15s var(--ease)}
:root .hy-dialog-card:hover{background:var(--b-raised)}
:root .hy-section--band .hy-dialog-card:hover{background:var(--b-band)}
:root .hy-dialog-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
:root .hy-dialog-card__num{font:400 13px/1.2 var(--b-mono);color:var(--b-muted)}
:root .hy-dialog-card__tags{display:flex;flex-wrap:wrap;gap:6px}
:root .hy-dialog-card__text{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
:root .hy-dialog{width:min(980px,calc(100vw - 32px));max-height:calc(100vh - 32px);margin:auto;padding:0;border:0;border-radius:var(--b-r-card);background:var(--b-card);color:var(--b-ink);overflow:auto}
:root .hy-dialog:focus,:root .hy-dialog:focus-visible{outline:none}
:root .hy-dialog::backdrop{background:color-mix(in srgb,var(--b-ink) 45%,transparent)}
:root .hy-dialog__body{padding:clamp(24px,4vw,40px)}
:root .hy-dialog__head{display:flex;align-items:flex-start;gap:16px}
:root .hy-dialog__head .hy-card__icon{margin:0;flex:none}
:root .hy-dialog__title-block{flex:1;min-width:0}
:root .hy-dialog__label{margin:0 0 4px;font:400 13px/1.2 var(--b-mono);color:var(--b-ink)}
:root .hy-dialog__title{margin:0;font-size:clamp(22px,2.4vw,28px);font-weight:500;line-height:1.15;letter-spacing:-.03em}
:root .hy-dialog__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
:root :is(.hy-dialog__tags,.hy-dialog-card__tags) .hy-badge{max-width:100%;white-space:normal}
@media (max-width:640px){:root .hy-dialog__head > .hy-card__icon{display:none}}
:root .hy-dialog__close{flex:none;width:34px;padding:0;justify-content:center}
:root .hy-dialog__intro{max-width:760px;margin:24px 0 0;font-size:15.5px;line-height:1.6;color:var(--b-muted)}
:root .hy-dialog__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:36px}
:root .hy-dialog__listhead{max-width:100%;margin:0 0 14px;white-space:normal}
:root .hy-dialog__intro + .hy-dialog__listhead{margin-top:32px}
:root .hy-dialog__foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:20px clamp(24px,4vw,40px);background:var(--b-band)}
:root .hy-dialog__hint{flex:1;min-width:220px;margin:0;font-size:13.5px;line-height:1.55;color:var(--b-muted)}
:root .hy-check-list--quiet li{font-size:13.5px;line-height:1.55;color:var(--b-muted)}
:root .hy-check-list--quiet .hy-tick{background:var(--b-raised);color:var(--b-ink)}
:root .hy-check-list--two{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
@media (max-width:900px){:root .hy-dialog__cols{grid-template-columns:minmax(0,1fr);gap:28px}}
@media (max-width:640px){:root .hy-check-list--two{grid-template-columns:minmax(0,1fr)}}
:root .hy-careers__group{margin:0 0 16px}
:root .hy-careers__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;text-align:left}
:root .hy-careers__grid + .hy-careers__group{margin-top:48px}
:root .hy-careers__roles{scroll-margin-top:calc(var(--hy-nav) + 24px)}
@media (max-width:1024px){:root .hy-careers__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){:root .hy-careers__grid{grid-template-columns:minmax(0,1fr)}}
/* the team next to the careers hero: square photos, the open seat on the band */
:root .hy-team{display:flex;align-items:center;justify-content:center;gap:14px}
:root .hy-avatars{display:flex}
:root .hy-avatar{display:grid;place-items:center;width:46px;height:46px;margin-left:-8px;border-radius:var(--b-r-ctl);object-fit:cover;background:var(--b-band);font-size:13px;font-weight:500;color:var(--b-ink)}
:root .hy-avatar:first-child{margin-left:0}
/* a photo avatar has no fill, so no band colour shows in the anti-aliased corner where photos overlap */
:root img.hy-avatar{background:none}
:root .hy-avatar--you{background:var(--b-raised)}
:root .hy-team__note{margin:0;font-size:13.5px;line-height:1.35;color:var(--b-muted)}
/* end dialogs and careers */

/* ------------------------------------------------------------------ */
/* Savings check (3 Nov 2026): savings.blade.php; the check, report,    */
/* cases and when-cards use the sv-* rules in site-theme.css.           */
/* ------------------------------------------------------------------ */
:root .sv-hero__text{max-width:620px;margin:0 0 24px;font-size:16px;line-height:1.6;color:var(--b-muted)}
:root .sv-panel{max-width:960px}
:root .sv-check > .hy-wrap > .sv-note{max-width:960px}
:root .sv-grid--row{margin-bottom:10px}
:root .sv-flow{max-width:1000px;margin:0 auto}
:root .sv-flow .sv-note{text-align:center}
/* node positions in the flow figure (viewBox 1000 x 440) */
:root .sv-flow__app{left:16%;top:50%}
:root .sv-flow__router{left:48%;top:50%}
:root .sv-flow__shared{left:80%;top:17.5%}
:root .sv-flow__dedicated{left:80%;top:50%}
:root .sv-flow__self{left:80%;top:82.5%}
:root .sv-flow__tag-dropin{left:32%;top:59.5%}
:root .sv-flow__tag-warm{left:80%;top:6.4%}
:root .sv-when-card .cv-bi{flex:none}
/* fields sit on the panel band: they take the card fill */
:root .sv-panel :is(input,select){background-color:var(--b-card)!important}
/* the cheaper tile is marked in ink, accent stays on buttons and links */
:root .sv-tile.win::before{background:var(--b-ink)}
:root .sv-s.win{color:var(--b-ink)}
/* a printed report shows the report only */
@media print{body:has(.hy-savings) :is(header,nav,.hy-foot){display:none!important}}
/* end savings */

/* ------------------------------------------------------------------ */
/* Model garden (3 Nov 2026): models/index.blade.php, the catalogue    */
/* toolbar and the advice wizard. Grid and wizard base rules live in   */
/* site-theme.css (gw-*, mg-*, hy-model); these cover the ids and      */
/* classes the wizard script writes.                                   */
/* ------------------------------------------------------------------ */
.mg-search{display:flex;align-items:center;gap:10px;flex:1;min-width:0;height:44px;padding:0 14px;background:var(--hy-band);border-radius:var(--hy-r-ctl)}
.mg-search svg{flex:none;color:var(--hy-muted-2)}
@media (max-width:720px){.mg-row>.mg-search{flex:1 1 100%}}
.mg-search input{flex:1;min-width:0;height:100%;padding:0;background:none;border:0;outline:none;color:var(--hy-ink);font:400 15px var(--hy-font)}
.mg-search input::placeholder{color:var(--hy-muted-2)}
.mg-select,.mg-chips{border-radius:var(--hy-r-ctl)}
.mg-chip{border-radius:var(--hy-r-ctl)}
.mg-sec .hy-model{border-radius:var(--hy-r-card)}
.mg-sec .hy-model__badges .hy-badge,.mtag{border-radius:var(--hy-r-tag)}
.mg-advice{border-radius:var(--hy-r-card)}
.mg-advice .gw-btn{flex:none;display:inline-flex;align-items:center;gap:8px}
.gw-ico,.gw-chev{width:16px;height:16px;flex:none}
.gw-panel{border:0;border-radius:var(--hy-r-panel)}
.gw-head{padding:14px 20px}
.gw-head-row{display:flex;align-items:center;gap:12px;flex:1}
.gw-head-row h3{flex:1;margin:0;font-weight:500;font-size:16px;letter-spacing:-.02em;color:var(--hy-ink)}
.gw-text,.gw-input{border:0;border-radius:var(--hy-r-ctl)}
.gw-err{border-radius:var(--hy-r-ctl)}
.gw-dots span{width:7px;height:7px;border-radius:var(--b-r-tick);background:var(--hy-accent-strong);animation:gw-blink 1s steps(2,end) infinite}
.gw-dots span:nth-child(2){animation-delay:.2s}
.gw-dots span:nth-child(3){animation-delay:.4s}
@media (prefers-reduced-motion:reduce){.gw-dots span{animation:none}}
.gw-avatar{border-radius:var(--hy-r-ctl)}
.gw-avatar-md{width:40px;height:40px;font-size:15px}
.gw-avatar-lg{width:48px;height:48px;font-size:18px}
.gw-opt,.gw-talk,.gw-pick,.gw-sent{border-radius:var(--hy-r-card)}
.gw-rank{border-radius:var(--hy-r-tag)}
.gw-badge{display:inline-flex;align-items:center;height:20px;margin-left:8px;padding:0 6px;border-radius:var(--hy-r-tag);background:var(--hy-accent-strong);color:var(--hy-on-accent);font:400 10.5px var(--hy-mono);vertical-align:middle}
.mtag{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 7px;background:var(--hy-raise);color:var(--hy-ink-2);font:400 11px var(--hy-mono);white-space:nowrap}
.mtag svg{width:12px;height:12px}
.gw-price .small{font-size:11.5px;color:var(--hy-muted-2)}
.gw-btns a{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:var(--hy-r-ctl);font-size:13px;font-weight:500;text-decoration:none}
.gw-btns .pri{background:var(--hy-accent-strong);color:var(--hy-on-accent)}
.gw-btns .sec{background:var(--hy-raise);color:var(--hy-ink)}
.gw-talk-btn{flex:none;height:34px;padding:0 14px;border:0;border-radius:var(--hy-r-ctl);background:var(--hy-raise);color:var(--hy-ink);font:500 13px var(--hy-font);cursor:pointer;white-space:nowrap}
.gw-link.gw-back{display:inline-flex;margin:6px 0 4px}
/* wizard spacing modifiers (were inline styles) */
:root .gw-help--lead{margin:10px 0 14px}
:root .gw-help--sub{display:block;margin-top:2px}
:root .gw-help--flush{margin-top:0}
:root .gw-block{margin-bottom:20px}
:root .gw-grow{flex:1;min-width:0}
:root .gw-why--lead{margin-top:0;color:var(--hy-ink)}
:root .gw-why--tight{margin-top:4px}
:root #gw-contact-back{margin-top:0}
:root .gw-field{display:block;margin-top:12px}
:root .gw-field textarea{resize:vertical}
:root #gw-c-share-row{margin-top:12px}
:root .gw-label--plain{margin:0;font-weight:400}
/* errors read as ink text on cream, no accent edge */
:root .gw-err{border-left:0}
/* the recommended option is marked in ink, accent stays on buttons and links */
:root .gw-opt.rec{border-left-color:var(--b-ink)}
/* contact fields sit on the panel band: they take the card fill, like the textarea */
:root .gw-panel .gw-input{background-color:var(--b-card)!important}
/* end model garden */

/* ------------------------------------------------------------------ */
/* Decision models (3 Nov 2026): jev/landing.blade.php on x-site       */
/* chapter, window, cards, steps, model-card, split and seo-faq. These */
/* cover the interactive example, the scores and the Loes Beslis panel. */
/* ------------------------------------------------------------------ */
:root .hy-jev-preview{margin:0;padding:8px var(--b-frame-pad,24px);background:var(--b-band);font:400 12px var(--b-mono);color:var(--b-ink);text-align:center}
:root .hy-jev-fine{margin:12px 0 0;font-size:12.5px;line-height:1.6;color:var(--b-muted)}
:root .hy-chapter__actions .hy-jev-fine{flex-basis:100%;max-width:520px}
:root .hy-jev-hero .hy-chapter__head{align-items:start}
:root .hy-chapter__actions .hy-jev-demo{flex-basis:100%;min-width:0;margin-top:20px}
:root .hy-jev-switch{margin:0 0 18px}
:root .hy-jev-state{margin:8px 0 0;min-height:3.2em;font-size:15px;line-height:1.55;color:var(--b-ink)}
:root .hy-jev-question{margin:20px 0 10px;font-size:13.5px;font-weight:500;color:var(--b-ink)}
:root .hy-jev-option{margin:10px 0}
:root .hy-jev-option__text{display:flex;justify-content:space-between;gap:10px;margin-bottom:5px;font-size:12.5px;color:var(--b-ink)}
:root .hy-jev-option__text output{font:400 11.5px var(--b-mono)}
:root .hy-jev-track{height:6px;background:var(--b-raised);border-radius:var(--b-r-tag);overflow:hidden}
:root .hy-jev-bar{height:100%;background:var(--b-ink);transition:width .3s}
:root .hy-jev-rule{margin-top:20px}
:root .hy-jev-rule label{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--b-ink)}
:root .hy-jev-rule input[type=range]{width:100%;height:6px;margin:16px 0;-webkit-appearance:none;appearance:none;background:var(--b-raised);border:0;border-radius:var(--b-r-tag)}
:root .hy-jev-rule input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--b-ink);border:0;border-radius:3px;cursor:pointer}
:root .hy-jev-rule input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--b-ink);border:0;border-radius:3px;cursor:pointer}
:root .hy-jev-result{padding:10px 12px;background:var(--b-card);border-radius:var(--b-r-ctl);font-size:12.5px;color:var(--b-ink)}
:root .hy-jev-result--review{background:var(--b-raised)}
@media (prefers-reduced-motion:reduce){:root .hy-jev-bar{transition:none}}
:root .hy-jev-strip .hy-chips{margin:0}
:root .hy-jev-example{margin-top:14px;padding:12px 14px;background:var(--b-band);border-radius:var(--b-r-ctl);font-size:12.5px}
:root .hy-jev-example strong{display:block;margin-top:4px;font-weight:500;color:var(--b-ink)}
:root .hy-jev-explain{margin-top:28px}
:root .hy-jev-bench{max-width:760px;margin:0 0 24px;font-size:14.5px;line-height:1.6;color:var(--b-muted)}
:root .hy-jev-bench strong{color:var(--b-ink);font-weight:500}
:root .hy-jev-score{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
:root .hy-jev-score span{font-size:44px;line-height:1.05;letter-spacing:-.04em;font-weight:500;font-variant-numeric:tabular-nums;color:var(--b-ink)}
:root .hy-jev-score small{font-size:12px;color:var(--b-muted)}
:root .hy-jev-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin:14px 0 0;font-size:13px}
:root .hy-jev-ref{grid-column:1/-1}
:root .hy-jev-ref__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;font:400 12px var(--b-mono);color:var(--b-muted)}
:root .hy-jev-ref .hy-card__title{margin:0}
:root .hy-jev-models-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;margin-top:20px}
:root .hy-jev-models-foot .hy-note{margin:0}
:root .hy-jev-loes{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}
:root .hy-jev-loes .hy-label{display:inline-flex;align-items:center;gap:10px}
:root .hy-jev-loes__title{margin:14px 0;font-size:var(--hy-t-h2);line-height:1.12;letter-spacing:-.025em;font-weight:500;color:var(--b-ink)}
:root .hy-jev-loes__text{max-width:660px;font-size:15px;line-height:1.6;color:var(--b-muted)}
:root .hy-jev-loes__text strong{color:var(--b-ink);font-weight:500}
:root .hy-jev-loes .hy-model__badges{margin-top:18px}
:root .hy-jev-loes__action{display:flex;flex-direction:column;align-items:flex-end;gap:16px}
:root .hy-jev-loes__result{display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin:0;text-align:right}
:root .hy-jev-loes__result strong{font-size:56px;line-height:1;letter-spacing:-.04em;font-weight:500;color:var(--b-ink)}
:root .hy-jev-loes__result span,:root .hy-jev-loes__result small{font-size:12.5px;color:var(--b-muted)}
@media (max-width:760px){:root .hy-jev-loes{grid-template-columns:1fr}:root .hy-jev-loes__action,:root .hy-jev-loes__result{align-items:flex-start;text-align:left}}
:root .hy-jev-api p{font-size:15px;line-height:1.65;color:var(--b-muted)}
:root .hy-jev-api p + p{margin-top:16px}
:root .hy-jev-api h3{margin:28px 0 10px;font-size:18px;font-weight:500;color:var(--b-ink)}
:root .hy-jev-code{margin-top:28px;min-width:0}
:root .hy-jev-code__path{margin:0;padding:12px 18px;font:400 12px var(--b-mono);color:var(--b-muted)}
:root .hy-jev-code__path b{font-weight:400;color:var(--b-ink)}
:root .hy-jev-code__pre{margin:0;padding:4px 18px 18px;overflow-x:auto;font:400 12px/1.7 var(--b-mono);color:var(--b-ink)}
:root .hy-jev-code__more summary{padding:12px 18px;cursor:pointer;font-size:12.5px;color:var(--b-ink)}
:root .hy-jev-pilot{margin:-8px 0 36px}
/* end decision models */
/* the pricing calculator's controls sit on its band surface: they take the card fill */
:root .rk-calc :is(.rk-select,.rk-input){background-color:var(--b-card)!important}

/* ------------------------------------------------------------------ */
/* Hero route (3 Nov 2026): x-site.home-route, the hero variant at     */
/* /x/home-flow (x-site.home-hero visual="route"). The route from the  */
/* brand skill, top to bottom on one card surface: four layers with    */
/* their number and name on the left, tiles on the right, wires drawn  */
/* by the script. Accent only for the packet and the active node; the  */
/* route taken stays in muted ink. Flat: no shadow, no tint, square.   */
/* ------------------------------------------------------------------ */
:root .home-hero__flow > .home-route{flex:1}
:root .home-route{position:relative;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:32px 24px;background:var(--b-card);border-radius:var(--b-r-card)}
:root .home-route__map{position:relative;z-index:2;display:grid;gap:48px;margin:0;padding:0;list-style:none}
:root .home-route__layer{display:grid;grid-template-columns:128px minmax(0,1fr);gap:18px;align-items:center}
:root .home-route__label{display:flex;align-items:flex-start;gap:10px;margin:0}
:root .home-route__num{display:grid;place-items:center;flex:none;width:28px;height:28px;background:var(--b-band);border-radius:var(--b-r-tag);font:400 12px/1 var(--b-mono);color:var(--b-ink);transition:background-color .2s,color .2s}
:root .home-route__layer.is-on .home-route__num{background:var(--b-ink);color:var(--b-paper)}
:root .home-route__name{display:flex;flex-direction:column;gap:2px;padding-top:4px;min-width:0}
:root .home-route__name b{white-space:nowrap;font-size:15px;font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--b-ink)}
:root .home-route__name span{font:400 12px/1.35 var(--b-mono);color:var(--b-muted)}
:root .home-route__nodes{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:8px}
:root .home-route__node{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:0;height:76px;padding:8px 6px;background:var(--b-band);border-radius:var(--b-r-ctl);color:var(--b-ink);transition:background-color .2s,color .2s}
:root .home-route__node > b{max-width:100%;overflow:hidden;font:400 12px/1.2 var(--b-mono);text-overflow:ellipsis;white-space:nowrap}
:root .home-route__glyph{display:grid;place-items:center;width:20px;height:20px;line-height:0}
:root .home-route__glyph .home-logo{width:20px;height:20px}
:root .home-route__node.is-path{background:var(--b-raised)}
:root .home-route__node.is-hit{background:var(--b-accent);color:var(--b-on-accent)}
:root .home-route__node.is-hit .home-logo{filter:brightness(0) invert(1)}
/* the key: one wide node with its three checks */
:root .home-route__hub{flex-direction:row;flex-wrap:wrap;justify-content:space-between;gap:10px 16px;height:auto;min-height:76px;padding:12px 16px}
:root .home-route__hub.is-hit{background:var(--b-raised);color:var(--b-ink)}
:root .home-route__brand{display:flex;align-items:center;gap:10px;min-width:0}
:root .home-route__brand b{font-size:15px;font-weight:500;letter-spacing:-.01em}
:root .home-route__brand > span:not(.hy-mark){font:400 12px var(--b-mono);color:var(--b-muted)}
:root .home-route__checks{display:flex;flex-wrap:wrap;gap:6px}
:root .home-route__ck{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;background:var(--b-card);border-radius:var(--b-r-tag);font:400 12px/1 var(--b-mono);color:var(--b-muted);transition:color .2s}
:root .home-route__ck .hy-icon{opacity:0;transition:opacity .2s}
:root .home-route__ck.is-ok{color:var(--b-ink)}
:root .home-route__ck.is-ok .hy-icon{opacity:1}
/* wires and the packet */
:root .home-route__wires{position:absolute;inset:0;z-index:1;overflow:visible;pointer-events:none}
:root .home-route__wire{fill:none;stroke:var(--border-strong);stroke-width:2;shape-rendering:crispEdges}
:root .home-route__wire.is-path{stroke:var(--b-muted)}
:root .home-route__pkt{position:absolute;left:0;top:0;z-index:3;width:8px;height:8px;border-radius:var(--b-r-tick);background:var(--b-accent);opacity:0;pointer-events:none}
:root .home-route__pkt.is-on{opacity:1}
@media (max-width:1340px) and (min-width:1181px){:root .home-route__layer{grid-template-columns:108px minmax(0,1fr);gap:16px}}
@media (max-width:720px){
  :root .home-route{padding:20px var(--b-pad-card)}
  :root .home-route__map{gap:22px}
  :root .home-route__layer{grid-template-columns:minmax(0,1fr);gap:16px}
  /* the label sits above the tiles and leaves a lane on the right, where the wires run down */
  :root .home-route__label{align-items:center;max-width:calc(100% - 28px)}
  :root .home-route__name{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding-top:0}
  :root .home-route__node{height:auto;min-height:62px;gap:6px}
  :root .home-route__node > b{font-size:11px;white-space:normal;text-align:center;overflow-wrap:anywhere}
  :root .home-route__hub{height:auto}
}
@media (prefers-reduced-motion:reduce){:root :is(.home-route__num,.home-route__node,.home-route__ck,.home-route__ck .hy-icon){transition:none}}
/* end hero route */

/* ------------------------------------------------------------------ */
/* Hero route 2 (3 Nov 2026): x-site.home-route2, the hero variant at  */
/* /x/home-flow-2 (x-site.home-hero visual="route2"). The second       */
/* version of the route: one tile grid on every row, the label column  */
/* aligned to the top of its tiles, one rhythm between rows, 1px wires */
/* on a bus, the route drawn in accent under the packet. Active = the  */
/* solid accent on on-accent text (tile, number, tick); nothing dark,  */
/* nothing translucent, no shadow, no glow.                            */
/* ------------------------------------------------------------------ */
:root .home-hero__flow > .home-route2{flex:1}
:root .home-route2{position:relative;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:28px 24px;background:var(--b-card);border-radius:var(--b-r-card)}
:root .home-route2__map{position:relative;z-index:2;display:grid;gap:44px;margin:0;padding:0;list-style:none}
:root .home-route2__layer{display:grid;grid-template-columns:116px minmax(0,1fr);gap:16px;align-items:start}
:root .home-route2__label{display:flex;align-items:flex-start;gap:10px;margin:0;min-width:0}
:root .home-route2__num{display:grid;place-items:center;flex:none;width:24px;height:24px;background:var(--b-band);border-radius:var(--b-r-tag);font:400 11px/1 var(--b-mono);color:var(--b-ink);transition:background-color .25s ease,color .25s ease}
:root .home-route2__layer.is-on .home-route2__num{background:var(--b-accent);color:var(--b-on-accent)}
:root .home-route2__name{display:flex;flex-direction:column;gap:3px;min-width:0}
:root .home-route2__name b{font-size:14px;font-weight:500;line-height:24px;letter-spacing:-.01em;color:var(--b-ink);white-space:nowrap}
:root .home-route2__name span{font:400 11.5px/1.35 var(--b-mono);color:var(--b-muted)}
/* every row on the same four columns: three models take the middle of the row, the key the whole row */
:root .home-route2__nodes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
:root .home-route2__nodes[style*="--n:3"]{grid-template-columns:repeat(3,calc((100% - 24px) / 4));justify-content:center}
:root .home-route2__nodes--hub{grid-template-columns:minmax(0,1fr)}
:root .home-route2__node{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-width:0;height:64px;padding:6px;background:var(--b-band);border-radius:var(--b-r-ctl);color:var(--b-ink);transition:background-color .25s ease,color .25s ease}
:root .home-route2__node > b{max-width:100%;overflow:hidden;font:400 11.5px/1.2 var(--b-mono);text-overflow:ellipsis;white-space:nowrap}
:root .home-route2__glyph{display:grid;place-items:center;width:18px;height:18px;line-height:0}
:root .home-route2__glyph .home-logo{width:18px;height:18px}
:root .home-route2__node.is-path{background:var(--b-raised)}
:root .home-route2__node.is-hit{background:var(--b-accent);color:var(--b-on-accent)}
:root .home-route2__node.is-hit .home-logo{filter:brightness(0) invert(1)}
/* the key: one wide node, the brand on the left and its three checks on the right */
:root .home-route2__hub{flex-direction:row;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;height:auto;min-height:64px;padding:12px 16px}
:root .home-route2__hub.is-hit{background:var(--b-raised);color:var(--b-ink)}
:root .home-route2__brand{display:flex;align-items:center;gap:10px;min-width:0}
:root .home-route2__brand b{font-size:14px;font-weight:500;letter-spacing:-.01em;white-space:nowrap}
:root .home-route2__brand > span:not(.hy-mark){font:400 11.5px var(--b-mono);color:var(--b-muted);white-space:nowrap}
:root .home-route2__checks{display:flex;flex-wrap:wrap;gap:6px}
:root .home-route2__ck{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;background:var(--b-card);border-radius:var(--b-r-tag);font:400 11.5px/1 var(--b-mono);color:var(--b-muted);transition:color .25s ease}
:root .home-route2__ck .hy-icon{color:var(--b-accent);opacity:0;transition:opacity .25s ease}
:root .home-route2__ck.is-ok{color:var(--b-ink)}
:root .home-route2__ck.is-ok .hy-icon{opacity:1}
/* wires: 1px on the pixel grid; the route taken in accent, drawn under the packet; the packet under the tiles */
:root .home-route2__wires{position:absolute;inset:0;z-index:1;overflow:visible;pointer-events:none}
:root .home-route2__wire{fill:none;stroke:var(--b-line);stroke-width:1;shape-rendering:crispEdges}
:root .home-route2__wire.is-path{stroke:var(--b-accent);stroke-width:2}
:root .home-route2__pkt{position:absolute;left:0;top:0;z-index:1;width:8px;height:8px;border-radius:var(--b-r-tick);background:var(--b-accent);opacity:0;pointer-events:none;will-change:transform;transition:opacity .18s ease}
:root .home-route2__pkt.is-on{opacity:1}
@media (max-width:1340px) and (min-width:1181px){:root .home-route2__layer{grid-template-columns:100px minmax(0,1fr);gap:14px}}
/* phones (the script sets is-phone under 560px): the label sits above its tiles and leaves a lane on the
   right, where the trunk runs down past it; the models keep their own three columns */
:root .home-route2.is-phone{padding:20px var(--b-pad-card)}
:root .home-route2.is-phone .home-route2__map{gap:34px}
:root .home-route2.is-phone .home-route2__layer{grid-template-columns:minmax(0,1fr);gap:22px}
:root .home-route2.is-phone .home-route2__label{align-items:center;max-width:calc(100% - 44px)}
:root .home-route2.is-phone .home-route2__name{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
:root .home-route2.is-phone .home-route2__nodes[style*="--n:3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
:root .home-route2.is-phone .home-route2__node{height:auto;min-height:60px;gap:6px}
:root .home-route2.is-phone .home-route2__node > b{font-size:11px;white-space:normal;text-align:center;overflow-wrap:anywhere}
:root .home-route2.is-phone .home-route2__hub{padding:10px 12px}
@media (prefers-reduced-motion:reduce){:root :is(.home-route2__num,.home-route2__node,.home-route2__ck,.home-route2__ck .hy-icon,.home-route2__pkt){transition:none}}
/* end hero route 2 */

/* ------------------------------------------------------------------ */
/* Hero activity (3 Nov 2026): x-site.home-hero-activity, the hero     */
/* variant at /x/home-flow-3 (x-site.home-hero visual="activity"). The */
/* product in the hero: the Activity view as one real table on the    */
/* window surface. Light paper, ink, one accent: the chosen tool on   */
/* the strip is the solid accent, the ticks in the opened path are     */
/* accent, everything else is ink on the card. No shadow, no tint, no  */
/* outline on a button or a row; the opened row and its path take the  */
/* band fill. Rows arriving reuse the activity keyframes (hy-row-in,   */
/* hy-row-wash), gated on .is-live, which the script sets only with    */
/* motion allowed.                                                     */
/* ------------------------------------------------------------------ */
:root .home-hero__flow > .home-act{flex:1;background:var(--b-card)}
/* a table needs more room than a diagram: the hero gives the window a wider column (the copy keeps every line) */
@media (min-width:1181px){:root .home-hero__panel:has(> .home-hero__flow--activity){grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}}
:root .home-act .hy-win__head{background:var(--b-raised)}
/* the tool strip: a thin row under the head, the chosen tool on the solid accent */
:root .home-act__bar{display:flex;flex-wrap:wrap;gap:4px;padding:10px 12px;background:var(--b-band)}
:root .home-act__tool{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 10px;background:transparent;border:0;border-radius:var(--b-r-tag);font:400 12px var(--b-mono);color:var(--b-muted);cursor:pointer;transition:background-color .2s ease,color .2s ease}
:root .home-act__tool:hover{color:var(--b-ink)}
:root .home-act__tool[aria-pressed="true"]{background:var(--b-accent);color:var(--b-on-accent)}
:root .home-act__tool[aria-pressed="true"] .home-logo{filter:brightness(0) invert(1)}
:root .home-act__tool .hy-icon{color:currentColor}
/* the table: the columns of the app's Activity view, numbers right and mono */
:root .home-act__table{width:100%;border-collapse:collapse;font-size:13px;color:var(--b-ink-2)}
:root .home-act__table th,:root .home-act__table td{padding:0 0 0 10px;height:38px;text-align:left;font-weight:400;white-space:nowrap;vertical-align:middle}
:root .home-act__table tr > :first-child{padding-left:16px}
:root .home-act__table tr > :last-child{padding-right:16px}
:root .home-act__table thead th{height:32px;font:400 11px var(--b-mono);color:var(--b-muted);text-transform:none}
:root .home-act__table tbody tr > *{border-top:1px solid var(--b-band)}
:root .home-act__table .is-num{text-align:right;font:400 12.5px var(--b-mono);font-variant-numeric:tabular-nums}
:root .home-act__table tbody tr{cursor:pointer}
:root .home-act__table tbody tr:hover > *{background:var(--b-band)}
:root .home-act__open{display:inline-flex;align-items:center;gap:6px;padding:0;background:none;border:0;font:400 12px var(--b-mono);color:var(--b-muted);cursor:pointer}
:root .home-act__open .hy-icon{flex:none;transform:rotate(-90deg);transition:transform .2s ease}
:root .home-act__model{display:flex;align-items:center;gap:8px;min-width:0;color:var(--b-ink)}
:root .home-act__model b{overflow:hidden;font-weight:500;text-overflow:ellipsis}
/* the model column takes the room the numbers leave; a long name is cut, the table never is */
:root .home-act__table tr > :nth-child(2){width:100%;max-width:0}
:root .home-act__eu{padding:3px 5px;background:var(--b-band);border-radius:var(--b-r-tag);font:400 10px/1 var(--b-mono);color:var(--b-ink)}
/* the opened row: band fill, chevron down, its path as facts under it */
:root .home-act__table tbody tr.is-open > *{background:var(--b-band)}
:root .home-act__table tbody tr.is-open .home-act__open{color:var(--b-ink)}
:root .home-act__table tbody tr.is-open .home-act__open .hy-icon{transform:none}
:root .home-act__table tbody tr.is-open .home-act__eu{background:var(--b-card)}
:root .home-act__detail{cursor:default}
:root .home-act__table tbody tr.home-act__detail > td{height:auto;padding:4px 16px 14px;white-space:normal;background:var(--b-band);border-top:0}
:root .home-act__table tbody tr.home-act__detail:hover > *{background:var(--b-band)}
:root .home-act__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));gap:10px 16px;margin:0}
:root .home-act__facts dt{font:400 10.5px var(--b-mono);color:var(--b-muted)}
:root .home-act__facts dd{display:flex;align-items:center;gap:5px;margin:3px 0 0;font:400 12.5px var(--b-mono);color:var(--b-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root .home-act__facts dd .hy-icon{flex:none;color:var(--b-accent)}
/* motion: a new request lands on top with a short raised wash; a fresh log fills in one by one */
:root .home-act.is-live tbody tr.hy-row-wait{opacity:0}
:root .home-act.is-live tbody tr.is-in{animation:hy-row-in .45s cubic-bezier(.2,.7,.2,1) both}
:root .home-act.is-live tbody tr.is-new{animation:hy-row-in .45s cubic-bezier(.2,.7,.2,1) both}
:root .home-act.is-live tbody tr.is-new > *{animation:hy-row-wash 2.4s ease-out backwards}
/* the facts a phone drops from the columns (tokens, first token) live in the opened path there only */
:root .home-act__fact--phone{display:none}
/* narrower than the full hero column: the first-token column goes */
@media (max-width:1340px) and (min-width:1181px){
  :root .home-act__table tr > :nth-child(6){display:none}
  :root .home-act__table th,:root .home-act__table td{padding-left:10px}
}
/* phones: time, model, latency and cost; the path in two columns; nothing clipped */
@media (max-width:720px){
  :root .home-act__table tr > :nth-child(3),:root .home-act__table tr > :nth-child(4),:root .home-act__table tr > :nth-child(6){display:none}
  :root .home-act__table th,:root .home-act__table td{padding-left:10px}
  :root .home-act__table tr > :first-child{padding-left:14px}
  :root .home-act__table tr > :last-child{padding-right:14px}
  :root .home-act__table{font-size:12.5px}
  :root .home-act__table .is-num{font-size:11px}
  /* the EU tag leaves the row on a phone; the opened path still says EU only and the GPU in the EU */
  :root .home-act__eu{display:none}
  :root .home-act__open{font-size:11px}
  :root .home-act__table tbody tr.home-act__detail > td{padding:4px 14px 14px}
  :root .home-act__facts{gap:10px 12px}
  :root .home-act__fact--phone{display:block}
  :root .home-act__bar{gap:2px;padding:8px}
  :root .home-act__tool{gap:6px;padding:0 7px;font-size:11px}
}
@media (prefers-reduced-motion:reduce){:root :is(.home-act__tool,.home-act__open .hy-icon){transition:none}:root .home-act tbody tr{animation:none!important}}
/* end hero activity */

/* ------------------------------------------------------------------ */
/* Hero shot (3 Nov 2026): x-site.home-hero-shot, the hero variant at  */
/* /x/home-flow-4 (x-site.home-hero visual="shot"). A real screenshot  */
/* of the app's Activity page in one light browser frame: a raised     */
/* bar with three small squares and the URL pill, the capture under    */
/* it, no card around the frame. The frame runs off the right edge of  */
/* the panel (the panel clips it), so the bleed equals the panel's     */
/* right padding at each width; on a phone it runs to the screen edge  */
/* and shows the left part of the page. Flat: no shadow, no outline.   */
/* ------------------------------------------------------------------ */
:root .home-hero__flow--shot{--shot-bleed:48px;margin-right:calc(-1 * var(--shot-bleed))}
@media (min-width:1181px){:root .home-hero__panel:has(> .home-hero__flow--shot){grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}}
@media (max-width:1340px) and (min-width:1181px){:root .home-hero__flow--shot{--shot-bleed:40px}}
@media (max-width:1180px){:root .home-hero__flow--shot{--shot-bleed:32px;max-width:none;justify-self:stretch;width:auto}}
@media (max-width:720px){:root .home-hero__flow--shot{--shot-bleed:var(--b-gutter)}}
:root .home-shot{margin:0;display:flex;flex-direction:column;min-width:0;background:var(--b-card);border-radius:var(--b-r-card) 0 0 var(--b-r-card);overflow:hidden}
:root .home-shot__bar{display:flex;align-items:center;gap:16px;height:38px;padding:0 14px;background:var(--b-raised)}
:root .home-shot__lights{display:inline-flex;gap:6px;flex:none}
:root .home-shot__lights > i{width:9px;height:9px;border-radius:var(--b-r-tick);background:var(--b-card)}
:root .home-shot__url{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 12px;border-radius:var(--b-r-tag);background:var(--b-card);font:400 12px/1.4 var(--b-mono);color:var(--b-muted)}
:root .home-shot__view{overflow:hidden;line-height:0}
:root .home-shot__img{display:block;width:100%;height:auto;max-width:none}
/* phone: the capture keeps a readable size and is cut at the screen edge and below the opened request */
@media (max-width:720px){
  :root .home-shot__view{max-height:380px}
  :root .home-shot__img{width:620px}
}
/* end hero shot */

/* ------------------------------------------------------------------ */
/* Home clean (3 Nov 2026): the clean homepage at /x/home-clean        */
/* (home-new with layout "clean", x-site.home-clean and the            */
/* home-clean-* parts, plus variant="clean" on the shared home parts). */
/* Everything here sits under body.home--clean, so the homepage and    */
/* every other page render as before. Flat paper, no gradient panel,   */
/* cards without fill (a hairline at most), window heads on the band,  */
/* one type scale (display 88, h2 52, lead 18, body 16, mono 13 for    */
/* commands, window chrome and table cells), weight 500 at most,       */
/* labels as plain mono text in ink. Section gap 160, head to visual   */
/* 48. Accent: the solid command button, links and the mission line.   */
/* ------------------------------------------------------------------ */
body.home--clean{--hc-sec:160px;--hc-gap:48px}
@media (max-width:1100px){body.home--clean{--hc-sec:128px}}
@media (max-width:760px){body.home--clean{--hc-sec:96px;--hc-gap:32px}}

/* type */
body.home--clean .hy-h2{font-size:clamp(36px,3.7vw,52px);line-height:1.02;font-weight:500;letter-spacing:-.045em}
body.home--clean .hy-h2 span,body.home--clean .hc-hero__h1 span{color:var(--b-muted)}
body.home--clean .hy-lead{font-size:18px;line-height:1.5;color:var(--b-muted)}
body.home--clean :is(b,strong,h3,th){font-weight:500}

/* chapter rhythm: one gap between sections, 48 from head to visual */
body.home--clean .hy-chapter{padding-top:var(--hc-sec)}
body.home--clean .hy-chapter__head{margin-bottom:var(--hc-gap);gap:24px;align-items:end}
@media (min-width:1181px){body.home--clean .hy-chapter__head{gap:64px}}
/* head and lead start on one line; the lead sits on the cap height of the heading */
body.home--clean :is(.hy-chapter__head,.hc-close__head){align-items:start}
@media (min-width:1181px){body.home--clean :is(.hy-chapter__aside,.hc-close__aside){padding-top:10px}}
/* one accent button per fold: the chapter buttons are solid ink, the $ hyai command buttons keep the accent */
body.home--clean .hy-chapter .hy-actions .hy-btn--primary{background:var(--b-ink);color:var(--b-paper)}
body.home--clean .hy-chapter .hy-actions .hy-btn--primary:hover{background:var(--b-ink-2);color:var(--b-paper)}
/* the mark in window heads and the hero rows is drawn in ink (the nav keeps the brand mark) */
body.home--clean :is(.hy-win__head,.hc-flow__mark) .hy-mark{background:var(--b-ink);color:var(--b-paper)}
body.home--clean .hy-chapter__aside{display:grid;gap:24px}
body.home--clean .hy-chapter__line{margin-bottom:24px;gap:16px;color:var(--b-muted)}
/* tags, eyebrows and labels: plain mono text in ink, no fill */
body.home--clean .hy-chapter__line .hy-label,body.home--clean .hy-chapter__line .hy-label--accent{padding:0;background:none;color:var(--b-ink);font:400 13px/1.2 var(--b-mono)}
body.home--clean .hy-chapter__line .hy-label b{color:var(--b-ink)}
body.home--clean .hy-chapter__eyebrow{font:400 13px/1.2 var(--b-mono);color:var(--b-ink);gap:10px}
body.home--clean .hy-chapter__eyebrow .hy-chapter__num{font-size:13px;color:var(--b-ink)}
body.home--clean .hc-line{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 32px;font:400 13px/1.2 var(--b-mono);color:var(--b-ink)}
body.home--clean .hc-line b{font-weight:400}

/* windows: a hairline frame on paper, the head on the band, no fill in the body */
body.home--clean .hy-win{background:var(--b-paper);border:1px solid var(--b-line);border-radius:var(--b-r-card);overflow:hidden}
body.home--clean .hy-win__head{min-height:44px;background:var(--b-band);font:400 13px var(--b-mono);color:var(--b-muted)}
body.home--clean .hy-win__crumb b{font-weight:400;color:var(--b-ink)}
body.home--clean .hy-win__foot{background:none;border-top:1px solid var(--b-line);font:400 13px var(--b-mono);color:var(--b-muted)}
body.home--clean .hy-win__foot b{color:var(--b-ink)}
body.home--clean .hy-win .ok{font-style:normal;color:var(--b-ink)}

/* 1 hero: two columns on paper */
body.home--clean .hc-hero{padding:96px 0 0}
/* on a desktop screen the hero fills the first view, so the next block never peeks in */
@media (min-width:1101px) and (min-height:720px){body.home--clean .hc-hero{display:grid;align-content:center;box-sizing:border-box;min-height:calc(100svh - var(--hy-nav));padding:48px 0}}
body.home--clean .hc-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:80px;align-items:center}
body.home--clean .hc-hero__h1{margin:0;font-weight:500;font-size:clamp(52px,6.1vw,88px);line-height:.98;letter-spacing:-.045em;color:var(--b-ink)}
body.home--clean .hc-hero__sub{margin:28px 0 0;max-width:32em;font-size:18px;line-height:1.5;color:var(--b-muted)}
body.home--clean .hc-hero__sub b{font-weight:500;color:var(--b-ink)}
body.home--clean .hc-hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
body.home--clean .hc-hero__small{margin:24px 0 0;max-width:34em;font-size:14px;line-height:1.5;color:var(--b-muted)}
body.home--clean .hc-hero__visual{position:relative;min-width:0;padding-top:40px}
body.home--clean .hc-hero__visual .home-walker{bottom:auto;top:2px}
body.home--clean .hc-flow__rows{margin:0;padding:0;list-style:none}
body.home--clean .hc-flow__row{display:grid;grid-template-columns:20px minmax(0,1fr);gap:16px;align-items:start;padding:20px 22px}
body.home--clean .hc-flow__row+.hc-flow__row{border-top:1px solid var(--b-line)}
body.home--clean .hc-flow__mark{display:grid;place-items:center;width:20px;height:20px;margin-top:1px}
body.home--clean .hc-flow__mark .home-logo{width:20px;height:20px}
body.home--clean .hc-flow__gpu{display:block;color:var(--b-ink)}
body.home--clean .hc-flow__text{display:grid;gap:6px;min-width:0}
body.home--clean .hc-flow__text>b{font-size:16px;line-height:1.3;color:var(--b-ink)}
body.home--clean .hc-flow__out{font:400 13px/1.55 var(--b-mono);color:var(--b-ink);overflow-wrap:anywhere}
body.home--clean .hc-flow__out .d{color:var(--b-muted)}
body.home--clean .hc-flow__out b{font-weight:400}
body.home--clean .hc-flow__foot{padding:14px 22px;color:var(--b-ink)}

/* 3 why: the label as plain mono text, the statement at 44 */
body.home--clean .home-why{padding:var(--hc-sec) 0 0}
body.home--clean .home-why__grid{gap:24px}
body.home--clean .home-why__label .hy-label{padding:0;background:none;font:400 13px/1.2 var(--b-mono);color:var(--b-ink)}
body.home--clean .home-why__text{max-width:25em;font-size:clamp(28px,3.1vw,44px);line-height:1.18;letter-spacing:-.03em}

/* 4 logos: one still row of model marks in ink */
body.home--clean .hc-logos{padding:96px 0 0}
body.home--clean .hc-logos__row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px 40px;margin:0;padding:28px 0 0;border-top:1px solid var(--b-line);list-style:none}
body.home--clean .hc-logos__row li{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:500;letter-spacing:-.02em;color:var(--b-ink)}

/* 01 Code: the Activity window, then the tools as one hairline list */
body.home--clean .hc-activity .home-activity__table{font-size:14px;color:var(--b-ink)}
body.home--clean .hc-activity .home-activity__table th,body.home--clean .hc-activity .home-activity__table td{height:52px}
body.home--clean .hc-activity .home-activity__table thead th{height:40px;font:400 13px var(--b-mono);color:var(--b-muted)}
body.home--clean .hc-activity .home-activity__table tbody tr>*{border-top:1px solid var(--b-line)}
body.home--clean .hc-activity :is(.home-activity__time,.is-num,.home-activity__x .hy-mono){font:400 13px var(--b-mono)}
body.home--clean .hc-activity .home-activity__table :is(th,td),body.home--clean .hc-activity .home-activity__table :is(th,td) *{font:400 13px var(--b-mono);letter-spacing:0}
body.home--clean .hc-activity .hy-sq{display:none}
body.home--clean .hc-activity .home-activity__serve{gap:0}
body.home--clean .hc-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;margin:var(--hc-gap) 0 0;padding:0}
body.home--clean .hc-tools li:nth-child(-n+2){border-top:1px solid var(--b-line)}
body.home--clean .hc-tools li{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:16px 0;background:none;border-bottom:1px solid var(--b-line);border-radius:0}
body.home--clean .hc-tools .home-tools__name{font-size:16px;font-weight:500}
body.home--clean .hc-tools code{padding:0;background:none;font:400 13px var(--b-mono);color:var(--b-ink);white-space:normal;overflow-wrap:anywhere;text-align:right}
body.home--clean .hc-tools code b{color:var(--b-muted)}

/* 02 Control: the Routers window, the teams as a plain text list */
body.home--clean .hc-router .home-router__tabs{grid-template-columns:220px minmax(0,1fr)}
body.home--clean .hc-router .home-router__tabs>.hy-tabs__list{gap:0;padding:12px 0;background:none;border-right:1px solid var(--b-line)}
body.home--clean .hc-router .home-router__tabs .hy-tabs__tab{display:block;min-height:0;height:auto;padding:10px 20px;background:none;font:400 15px/1.3 var(--b-font);color:var(--b-muted)}
body.home--clean .hc-router .home-router__tabs .hy-tabs__tab:hover{background:none;color:var(--b-ink)}
body.home--clean .hc-router .home-router__tabs .hy-tabs__tab[aria-selected="true"]{background:none;color:var(--b-ink);font-weight:500}
body.home--clean .hc-router .home-router__tabs .hy-tabs__tab[aria-selected="true"]::before{display:none}
body.home--clean .hc-router .home-router__panel{padding:8px 24px 24px}
body.home--clean .hc-router .home-router__rows>div{border-top:1px solid var(--b-line);font-size:15px}
body.home--clean .hc-router .home-router__pct{font-size:13px;color:var(--b-muted)}
body.home--clean .hc-router .home-router__meter i{background:var(--b-band)}
body.home--clean .hc-meter{position:relative;height:6px;margin:0;background:var(--b-band);border-radius:var(--b-r-tick);overflow:hidden}
body.home--clean .hc-meter i{position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--b-accent)}
body.home--clean .hc-router .home-router__meter i.is-on,body.home--clean .hc-router .home-router__meter i.is-hot{background:var(--b-accent)}
body.home--clean .hc-router .home-chip{background:none;padding:0 0 0 4px}
body.home--clean .hc-router .hy-seg{background:var(--b-band)}
body.home--clean .hc-router .home-router__levels>.is-on{background:var(--b-ink);color:var(--b-paper)}
body.home--clean .hc-router .home-router__pii{margin-top:0;background:none;border-top:1px solid var(--b-line);border-radius:0;padding:16px 0 0;font-size:13px}
body.home--clean .hc-router .home-router__pii mark{background:var(--b-band);color:var(--b-ink)}
body.home--clean .hc-router .hy-win__actions{font:400 13px var(--b-mono)}

/* 03 Serve: six model cards between hairlines, no fill */
body.home--clean .hc-models .home-models__grid{height:auto;max-height:none;overflow:visible;gap:0;padding:0;background:none;border-radius:0;grid-template-columns:repeat(3,minmax(0,1fr))}
body.home--clean .hc-models .home-mc{gap:16px;padding:24px;background:none;border-radius:0;border-top:1px solid var(--b-line)}
body.home--clean .hc-models .home-mc:nth-child(-n+3){border-top:0}
body.home--clean .hc-models .home-mc:not(:nth-child(3n+1)){border-left:1px solid var(--b-line)}
body.home--clean .hc-models .home-mc:hover{background:var(--b-band)}
body.home--clean .hc-models .home-mc__hd{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px}
body.home--clean .hc-models .home-mc__hd b{font-size:16px}
body.home--clean .hc-models .home-mc__tag{padding:0;background:none;font-size:13px;color:var(--b-ink)}
body.home--clean .hc-models .home-mc dt{font-size:13px;color:var(--b-muted)}
body.home--clean .hc-models .home-mc dd{font-size:13px;color:var(--b-ink)}

/* 04 EU compute: the sizer window alone */
body.home--clean .hc-sizer .home-sizer__form{background:none}
body.home--clean .hc-sizer .home-sizer__controls{background:none;border-right:1px solid var(--b-line)}
body.home--clean .hc-sizer .home-sizer__presets button{background:var(--b-band)}
body.home--clean .hc-sizer .home-sizer__presets button.is-on{background:var(--b-ink);color:var(--b-paper)}
body.home--clean .hc-sizer .home-sizer__form{min-height:0}
body.home--clean .hc-sizer .home-sizer__node{background:none;border-radius:0;border-top:1px solid var(--b-line);padding:10px 0}
body.home--clean .hc-sizer .home-sizer__node.is-on{background:none}
body.home--clean .hc-sizer .home-sizer__nodes{gap:0;border-bottom:1px solid var(--b-line)}
body.home--clean .hc-sizer .home-sizer__node>span:first-child,body.home--clean .hc-sizer .home-sizer__node [data-node-note]{font:400 13px var(--b-mono)}
body.home--clean .hc-sizer .home-sizer__facts{border-top:0;padding-top:0}
body.home--clean .hc-sizer .home-sizer__facts>div{background:none;border:0}
body.home--clean .hc-sizer .home-sizer__facts dt{font-size:13px;color:var(--b-muted)}
body.home--clean .hc-sizer .home-sizer__sentence{font-weight:500}
body.home--clean .hc-sizer .home-sizer__cells{gap:4px}
body.home--clean .hc-sizer .home-sizer__cells i{box-sizing:border-box;height:10px;background:none;border:1px solid var(--b-line)}
body.home--clean .hc-sizer .home-sizer__cells i::after{display:none}
body.home--clean .hc-sizer .home-sizer__cells i.is-on{background:var(--b-ink);border-color:var(--b-ink)}
body.home--clean .hc-sizer .home-sizer__cells i.is-shared{background:var(--b-muted);border-color:var(--b-muted)}
body.home--clean .hc-sizer .home-sizer__node>span:first-child::before{display:none}

/* 6 plans: three text columns between hairlines */
body.home--clean .hc-plans__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--b-line)}
body.home--clean .hc-plan{display:flex;flex-direction:column;min-width:0;padding:32px 32px 0}
body.home--clean .hc-plan:first-child{padding-left:0}
body.home--clean .hc-plan:last-child{padding-right:0}
body.home--clean .hc-plan+.hc-plan{border-left:1px solid var(--b-line)}
body.home--clean .hc-plan__name{margin:0;font-size:24px;line-height:1.2;font-weight:500;letter-spacing:-.025em;color:var(--b-ink)}
body.home--clean .hc-plan__name span{color:var(--b-muted)}
body.home--clean .hc-plan__for{margin:8px 0 0;font-size:16px;line-height:1.5;color:var(--b-muted)}
body.home--clean .hc-plan__layers{margin:20px 0 24px;font:400 13px/1.4 var(--b-mono);color:var(--b-ink)}
body.home--clean .hc-plan__list{flex:1;margin:0;padding:0;list-style:none;border-top:1px solid var(--b-line)}
body.home--clean .hc-plan__list li{padding:12px 0;border-bottom:1px solid var(--b-line);font-size:15px;line-height:1.45;color:var(--b-ink)}
body.home--clean .hc-plan__foot{display:grid;justify-items:start;gap:16px;margin-top:24px}
body.home--clean .hc-plan__foot p{margin:0;font-size:15px;color:var(--b-muted)}
body.home--clean .hc-plans__note{margin:32px 0 0;font-size:14px;color:var(--b-muted)}
body.home--clean .hc-plans__note a{color:var(--b-accent)}

/* 7 Lab: the Bench window, then three text columns under a hairline */
body.home--clean .hc-lab .home-lab__bench{margin-bottom:0}
body.home--clean .hc-lab .home-lab__row{height:48px;font-size:15px}
body.home--clean .hc-lab .home-lab__row+.home-lab__row{border-top:1px solid var(--b-line)}
body.home--clean .hc-lab .home-lab__example{display:inline;padding:0;background:none;font:400 13px var(--b-mono);color:var(--b-muted)}
body.home--clean .hc-lab .home-lab__tabs button{font:400 13px var(--b-mono)}
body.home--clean .hc-lab .home-lab__tabs button[aria-selected="true"]{background:var(--b-ink);color:var(--b-paper)}
body.home--clean .hc-lab .home-lab__bd{font:400 13px var(--b-mono)}
body.home--clean .hc-lab__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin:var(--hc-gap) 0 0;padding:32px 0 0;list-style:none;border-top:1px solid var(--b-line)}
body.home--clean .hc-lab__steps li{display:flex;flex-direction:column;gap:12px;min-width:0}
body.home--clean .hc-lab__steps h3{display:flex;align-items:baseline;gap:12px;margin:0;font-size:22px;line-height:1.25;font-weight:500;letter-spacing:-.025em;color:var(--b-ink)}
body.home--clean .hc-lab__steps h3 span{font:400 13px var(--b-mono);color:var(--b-muted)}
body.home--clean .hc-lab__steps p{flex:1;margin:0;font-size:16px;line-height:1.5;color:var(--b-muted)}
body.home--clean .hc-lab__run{font:400 13px/1.4 var(--b-mono);color:var(--b-ink);text-decoration:underline;text-decoration-color:var(--b-line);text-underline-offset:4px}
body.home--clean .hc-lab__run:hover{text-decoration-color:currentColor}
body.home--clean .hc-lab__run b{font-weight:400}

/* 8 close: heading, line, buttons; the crew as one row of tiles */
body.home--clean .hc-close{padding:var(--hc-sec) 0 120px}
body.home--clean .hc-close__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:64px}
body.home--clean .hc-close__aside{display:grid;gap:24px}
body.home--clean .hc-crew{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin:64px 0 0;padding:32px 0 0;list-style:none;border-top:1px solid var(--b-line)}
body.home--clean .hc-crew__tile{display:grid;gap:8px;align-content:start;min-width:0;font-size:14px;line-height:1.3;color:var(--b-ink)}
body.home--clean .hc-crew__tile img{display:block;width:100%;max-width:72px;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--b-r-ctl);background:var(--b-band)}
body.home--clean .hc-crew__face{position:relative;display:grid;place-items:center;box-sizing:border-box;width:100%;max-width:72px;aspect-ratio:1;border-radius:var(--b-r-ctl);border:1px solid var(--b-line);background:none}
body.home--clean .hc-crew__face .hy-maatje{width:52%}
body.home--clean .hc-crew__face .hy-maatje svg{width:100%;height:auto}
body.home--clean .hc-crew small{display:block;margin-top:2px;font-size:13px;color:var(--b-muted)}
body.home--clean .hc-crew__play{display:grid;gap:8px;padding:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
body.home--clean .hc-crew__chip{position:absolute;left:4px;top:4px;padding:3px 5px;border-radius:4px;background:var(--b-ink);color:var(--b-paper);font:400 11px/1 var(--b-mono)}
body.home--clean .hc-crew__play:hover .hc-crew__face,body.home--clean .hc-crew__play:focus-visible .hc-crew__face{background:var(--b-band)}
body.home--clean .hc-crew__play:focus-visible{outline:2px solid var(--b-accent);outline-offset:4px}

/* medium screens: the hero and the chapter heads stack; the crew wraps to six */
@media (max-width:1100px){
  body.home--clean .hc-hero{padding-top:64px}
  body.home--clean .hc-hero__grid{grid-template-columns:1fr;gap:48px}
  body.home--clean .hc-hero__visual{max-width:640px}
  body.home--clean .hc-close__head{grid-template-columns:1fr;gap:24px}
  body.home--clean .hc-crew{grid-template-columns:repeat(6,minmax(0,1fr))}
  body.home--clean .hc-models .home-models__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.home--clean .hc-models .home-mc:nth-child(-n+3){border-top:1px solid var(--b-line)}
  body.home--clean .hc-models .home-mc:nth-child(-n+2){border-top:0}
  body.home--clean .hc-models .home-mc:not(:nth-child(3n+1)){border-left:0}
  body.home--clean .hc-models .home-mc:nth-child(2n){border-left:1px solid var(--b-line)}
}
/* phones: one column everywhere, nothing clipped */
@media (max-width:760px){
  body.home--clean .hc-hero{padding-top:40px}
  body.home--clean .hc-hero__ctas>*{flex:1 1 auto}
  body.home--clean .hc-flow__row{padding:16px}
  body.home--clean .hc-flow__foot{padding:12px 16px}
  body.home--clean .hc-logos{padding-top:64px}
  body.home--clean .hc-logos__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding-bottom:28px;border-bottom:1px solid var(--b-line)}
  body.home--clean .hc-flow__out{font-size:12px}
  body.home--clean .hc-tools{grid-template-columns:1fr}
  body.home--clean .hc-tools li:nth-child(2){border-top:0}
  body.home--clean .hc-sizer .home-sizer__nodes{display:none}
  body.home--clean .hc-lab .hy-win__actions{flex-wrap:wrap;row-gap:8px;max-width:100%}
  body.home--clean .hc-lab .home-lab__example{margin-left:0;flex:1 0 100%}
  body.home--clean .hc-lab .home-lab__tabs{flex-wrap:wrap}
  body.home--clean .hc-router .home-router__tabs>.hy-tabs__list{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  body.home--clean .hc-router .home-router__tabs .hy-tabs__tab{flex:none;white-space:nowrap}
  body.home--clean .hc-tools li{display:grid;gap:4px;justify-content:stretch}
  body.home--clean .hc-tools code{text-align:left}
  body.home--clean .hc-router .home-router__tabs{grid-template-columns:1fr}
  body.home--clean .hc-router .home-router__tabs>.hy-tabs__list{flex-direction:row;flex-wrap:wrap;padding:8px 8px 0;border-right:0;border-bottom:1px solid var(--b-line)}
  body.home--clean .hc-router .home-router__tabs .hy-tabs__tab{padding:8px 12px}
  body.home--clean .hc-router .home-router__panel{padding:4px 16px 16px}
  body.home--clean .hc-router .home-router__rows>div{grid-template-columns:1fr;gap:6px}
  body.home--clean .hc-router .home-router__rows dd{justify-content:flex-start}
  body.home--clean .hc-models .home-models__grid{grid-template-columns:1fr}
  body.home--clean .hc-models .home-mc{border-left:0!important;border-top:1px solid var(--b-line)!important}
  body.home--clean .hc-models .home-mc:first-child{border-top:0!important}
  body.home--clean .hc-models .home-mc:nth-child(n+5){display:none}
  body.home--clean .hc-plans__grid{grid-template-columns:1fr}
  body.home--clean .hc-plan,body.home--clean .hc-plan:first-child,body.home--clean .hc-plan:last-child{padding:32px 0 0}
  body.home--clean .hc-plan+.hc-plan{border-left:0;margin-top:32px;border-top:1px solid var(--b-line)}
  body.home--clean .hc-lab__steps{grid-template-columns:1fr;gap:32px}
  body.home--clean .hc-crew{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 12px}
  body.home--clean .hc-close{padding-bottom:80px}
}
@media (prefers-reduced-motion:reduce){
  body.home--clean .hc-crew__face{transition:none}
}
/* end home clean */

/* ------------------------------------------------------------------ */
/* Home stripe (3 Nov 2026): the Stripe study at /x/home-stripe        */
/* (home-new with layout "stripe", x-site.home-stripe and the          */
/* home-stripe-* parts). Everything sits under body.home--stripe, so   */
/* every other page renders as before. The rhythm of stripe.com in our */
/* brand: a left hero on an aurora band (flat ribbons, no glow), a     */
/* hairline frame, a bento of white cards with product fragments on a  */
/* band stage, a statement band with numbers, an ink developer band    */
/* and pricing cards. No shadows: depth is the card fill and one       */
/* hairline. Type: one sans at 400 for display and headings (tight     */
/* tracking), 500 for names and links, mono for commands and chrome.   */
/* Accent: the command button, links, the section kicker and the       */
/* mission line. Motion lives in x-site.home-stripe's script and only  */
/* under html.hs-motion (never with reduced motion).                   */
/* ------------------------------------------------------------------ */
body.home--stripe{--hy-w:1180px;--hs-sec:152px;--hs-dark-mute:color-mix(in srgb,var(--b-paper) 60%,var(--b-ink));--hs-dark-line:color-mix(in srgb,var(--b-paper) 14%,var(--b-ink));--hs-dark-raise:color-mix(in srgb,var(--b-paper) 5%,var(--b-ink))}
@media (max-width:1100px){body.home--stripe{--hs-sec:120px}}
@media (max-width:760px){body.home--stripe{--hs-sec:88px}}
body.home--stripe :is(b,strong,h3,th){font-weight:500}

/* the nav sits clear on the aurora until the page scrolls */
body.home--stripe .hy-nav{transition:background-color .2s}
body.home--stripe.hs-at-top .hy-nav{background:transparent}
/* the shared header carries its paper and blur inline, so only !important clears it here */
body.home--stripe .shell>header{transition:background-color .2s,border-color .2s}
body.home--stripe.hs-at-top .shell>header{background:transparent!important;border-color:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* the frame: two hairline rails just outside the content, as on stripe.com */
body.home--stripe main.hs{position:relative;overflow-x:clip}
body.home--stripe main.hs::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(var(--b-line),var(--b-line)) calc(50% - var(--hy-w) / 2 - 24px) 0/1px 100% no-repeat,linear-gradient(var(--b-line),var(--b-line)) calc(50% + var(--hy-w) / 2 + 24px) 0/1px 100% no-repeat}
@media (max-width:1260px){body.home--stripe main.hs::before{display:none}}
body.home--stripe main.hs>*{position:relative;z-index:1}
body.home--stripe :is(.hs-why,.hs-dev)::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(var(--hs-rail),var(--hs-rail)) calc(50% - var(--hy-w) / 2 - 24px) 0/1px 100% no-repeat,linear-gradient(var(--hs-rail),var(--hs-rail)) calc(50% + var(--hy-w) / 2 + 24px) 0/1px 100% no-repeat}
body.home--stripe .hs-why{--hs-rail:color-mix(in srgb,var(--b-ink) 10%,var(--b-band))}
body.home--stripe .hs-dev{--hs-rail:var(--hs-dark-line)}
body.home--stripe :is(.hs-why,.hs-dev)>.hy-wrap{position:relative}
@media (max-width:1260px){body.home--stripe :is(.hs-why,.hs-dev)::before{display:none}}

/* shared type */
body.home--stripe .hs-kicker{margin:0 0 20px;font:500 15px/1.2 var(--b-font);letter-spacing:-.01em;color:var(--b-accent)}
body.home--stripe .hs-kicker::first-letter{text-transform:uppercase}
body.home--stripe .hs-kicker--mono{font:400 13px/1.2 var(--b-mono)}
body.home--stripe .hs-h2{margin:0;font-size:clamp(34px,3.7vw,54px);line-height:1.04;font-weight:400;letter-spacing:-.042em;color:var(--b-ink)}
body.home--stripe .hs-h2 span{color:inherit}
body.home--stripe .hs-close__title span{color:var(--b-muted)}
body.home--stripe .hs-h2--statement{max-width:23em;font-size:clamp(28px,2.9vw,42px);line-height:1.16;letter-spacing:-.032em}
body.home--stripe .hs-head{max-width:900px;margin-bottom:64px}
body.home--stripe .hs-head__lead{margin:24px 0 0;max-width:34em;font-size:18px;line-height:1.5;color:var(--b-muted)}
body.home--stripe .hs-head--split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:64px;align-items:end;max-width:none}
body.home--stripe .hs-head__aside .hs-head__lead{margin-top:0}
body.home--stripe .hs-head__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:28px}
body.home--stripe .hs-link{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:500;line-height:1.3;color:var(--b-accent);text-decoration:none}
body.home--stripe .hs-link .hy-icon{flex:none;transition:transform .2s var(--hy-ease)}
body.home--stripe .hs-link:hover .hy-icon{transform:translateX(3px)}
body.home--stripe .hs-link:focus-visible{outline:2px solid var(--b-accent);outline-offset:4px;border-radius:var(--b-r-tick)}
body.home--stripe .hs-section{padding-top:var(--hs-sec)}
body.home--stripe .hy-mark{background:var(--b-ink);color:var(--b-paper)}
body.home--stripe .hy-nav .hy-mark,body.home--stripe .hy-footer .hy-mark{background:var(--b-accent)}

/* hero: copy on the left, the aurora band top right, the window over it */
body.home--stripe .hs-hero{margin-top:calc(-1 * var(--hy-nav));padding:calc(var(--hy-nav) + 112px) 0 128px}
@media (min-width:1101px) and (min-height:760px){body.home--stripe .hs-hero{display:grid;align-content:center;box-sizing:border-box;min-height:min(100svh,920px);padding-bottom:96px}}
body.home--stripe .hs-aurora{position:absolute;top:0;right:0;z-index:0;width:min(1280px,92%);height:100%;overflow:hidden;pointer-events:none}
body.home--stripe .hs-aurora svg{display:block;width:100%;height:100%}
body.home--stripe .hs-aurora__ribbon{transform-box:fill-box;transform-origin:100% 0}
body.home--stripe .hs-aurora__r--1{fill:color-mix(in srgb,var(--b-glow-peri) 58%,var(--b-paper))}
body.home--stripe .hs-aurora__r--2{fill:color-mix(in srgb,var(--b-glow-peri) 78%,var(--b-paper))}
body.home--stripe .hs-aurora__r--3{fill:color-mix(in srgb,var(--b-accent-light) 52%,var(--b-paper))}
body.home--stripe .hs-aurora__r--4{fill:color-mix(in srgb,var(--b-accent) 82%,var(--b-paper))}
body.home--stripe .hs-aurora__r--5{fill:color-mix(in srgb,var(--b-glow-sand) 72%,var(--b-paper))}
body.home--stripe .hs-aurora__r--6{fill:color-mix(in srgb,var(--b-glow-sand) 52%,var(--b-paper))}
@keyframes hs-sway{0%{transform:none}50%{transform:translate(-14px,6px) rotate(-.8deg) scale(1.01)}100%{transform:translate(8px,-4px) rotate(.5deg)}}
@media (prefers-reduced-motion:no-preference){body.home--stripe .hs-aurora__ribbon{animation:hs-sway 36s ease-in-out infinite alternate}}
body.home--stripe .hs-hero__grid{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:64px;align-items:center}
body.home--stripe .hs-hero__eyebrow{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 36px;font:400 13px/1.2 var(--b-mono);color:var(--b-ink)}
body.home--stripe .hs-hero__eyebrow b{font-weight:400;color:var(--b-muted)}
body.home--stripe .hs-hero__h1{margin:0;font-size:clamp(56px,6.6vw,96px);line-height:.96;font-weight:400;letter-spacing:-.05em;color:var(--b-ink)}
body.home--stripe .hs-hero__h1 span{color:var(--b-muted)}
body.home--stripe .hs-hero__sub{margin:32px 0 0;max-width:29em;font-size:20px;line-height:1.45;color:var(--b-muted)}
body.home--stripe .hs-hero__sub b{font-weight:500;color:var(--b-ink)}
body.home--stripe .hs-hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
body.home--stripe .hs-hero__visual{position:relative;min-width:0;padding-top:40px}
body.home--stripe .hs-hero__visual .home-walker{bottom:auto;top:2px;left:24px}
body.home--stripe .hs-shot--hero{width:calc(100% + (100vw - 100%) / 2);margin-right:calc((100% - 100vw) / 2)}
body.home--stripe .hs-shot--hero{border-bottom:1px solid var(--b-line);border-radius:var(--b-r-card) 0 0 var(--b-r-card)}
body.home--stripe .hs-shot--hero img{width:1000px}
/* logos: one strip between two hairlines */
body.home--stripe .hs-logos{border-top:1px solid var(--b-line);border-bottom:1px solid var(--b-line);background:var(--b-paper)}
body.home--stripe .hs-logos__row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px 32px;margin:0;padding:30px 0;list-style:none}
body.home--stripe .hs-logos__row li{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:500;letter-spacing:-.02em;color:var(--b-ink)}

/* bento: four cards on a 12 column grid */
body.home--stripe .hs-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
body.home--stripe .hs-card{display:flex;flex-direction:column;min-width:0;background:var(--b-card);border:1px solid var(--b-line);border-radius:var(--b-r-card);overflow:hidden;scroll-margin-top:calc(var(--hy-nav) + 24px)}
body.home--stripe .hs-card--wide{grid-column:span 7}
body.home--stripe .hs-card--narrow{grid-column:span 5}
body.home--stripe .hs-card__copy{padding:36px 36px 0}
body.home--stripe .hs-card__layer{display:flex;gap:10px;margin:0 0 20px;font:400 13px/1.2 var(--b-mono);color:var(--b-ink)}
body.home--stripe .hs-card__layer span{color:var(--b-muted)}
body.home--stripe .hs-card__title{margin:0;font-size:30px;line-height:1.1;font-weight:400;letter-spacing:-.035em;color:var(--b-ink)}
body.home--stripe .hs-card__title span{color:inherit}
body.home--stripe .hs-card__lead{margin:16px 0 0;max-width:30em;font-size:16px;line-height:1.5;color:var(--b-muted)}
body.home--stripe .hs-card__copy .hs-link{margin-top:20px}
/* the stage: one flat aurora colour per card, the screenshot runs off the right and bottom edge */
body.home--stripe .hs-card__stage{position:relative;flex:1;min-height:340px;margin-top:36px;padding:36px 0 0 36px;background:var(--b-band);overflow:hidden}
body.home--stripe .hs-card--code .hs-card__stage{background:color-mix(in srgb,var(--b-glow-peri) 34%,var(--b-paper))}
body.home--stripe .hs-card--control .hs-card__stage{background:color-mix(in srgb,var(--b-glow-sand) 40%,var(--b-paper))}
body.home--stripe .hs-card--serve .hs-card__stage{background:color-mix(in srgb,var(--b-accent-light) 22%,var(--b-paper))}
body.home--stripe .hs-card--compute .hs-card__stage{background:color-mix(in srgb,var(--b-glow-sand) 24%,var(--b-glow-peri) 18%)}
/* a real screenshot: one light frame (a hairline and the card radius on the corner that shows) */
body.home--stripe .hs-shot{position:relative;margin:0;background:var(--b-card);border:1px solid var(--b-line);border-right:0;border-bottom:0;border-radius:var(--b-r-card) 0 0 0;overflow:hidden}
body.home--stripe .hs-shot img{display:block;height:auto;max-width:none}
body.home--stripe .hs-shot--keys img{width:820px}
body.home--stripe .hs-shot--router img{width:440px}
body.home--stripe .hs-shot--models img{width:820px}
body.home--stripe .hs-shot--deploy img{width:820px}
body.home--stripe .hs-card__stage .hs-shot{position:absolute;left:36px;top:36px;right:0;bottom:0}
/* why: the band, one statement, four numbers */
body.home--stripe .hs-why{margin-top:var(--hs-sec);padding:128px 0 112px;background:var(--b-band)}
body.home--stripe .hs-why__text{max-width:24em;margin:0;font-size:clamp(28px,2.9vw,40px);line-height:1.18;letter-spacing:-.032em;color:var(--b-ink)}
body.home--stripe .hs-why__text span{color:var(--b-muted)}
body.home--stripe .hs-why__text em{font-style:normal;color:var(--b-accent)}
body.home--stripe .hs-stats{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));margin:88px 0 0;border-top:1px solid color-mix(in srgb,var(--b-ink) 14%,var(--b-band))}
body.home--stripe .hs-stat{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:10px;min-width:0;padding:32px 24px 0 0}
body.home--stripe .hs-stat+.hs-stat{padding-left:24px;border-left:1px solid color-mix(in srgb,var(--b-ink) 14%,var(--b-band))}
body.home--stripe .hs-stat dd{margin:0;font-size:clamp(34px,3.6vw,52px);line-height:1;font-weight:400;letter-spacing:-.045em;color:var(--b-ink)}
body.home--stripe .hs-stat--text dd{font-size:clamp(26px,2.6vw,36px);line-height:1.1;letter-spacing:-.035em}
body.home--stripe .hs-stat dt{font-size:15px;line-height:1.4;color:var(--b-muted)}

/* developers: the ink band */
body.home--stripe .hs-dev{padding:128px 0;background:var(--b-ink);color:var(--b-paper)}
body.home--stripe .hs-dev__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,600px);gap:72px;align-items:center}
body.home--stripe .hs-dev .hs-kicker{color:var(--b-glow-peri)}
body.home--stripe .hs-dev .hs-kicker b{font-weight:400;color:var(--hs-dark-mute)}
body.home--stripe .hs-dev .hs-h2{color:var(--b-paper)}
body.home--stripe .hs-dev .hs-h2 span{color:inherit}
body.home--stripe .hs-dev__lead{margin:24px 0 0;max-width:30em;font-size:18px;line-height:1.5;color:var(--hs-dark-mute)}
body.home--stripe .hs-dev__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:36px}
body.home--stripe .hs-dev .hs-link{color:var(--b-glow-peri)}
body.home--stripe .hs-dev .hy-btn--primary{background:var(--b-paper);color:var(--b-ink)}
body.home--stripe .hs-dev .hy-btn--primary:hover{background:var(--b-card);color:var(--b-ink)}
body.home--stripe .hs-term{min-width:0;background:var(--hs-dark-raise);border:1px solid var(--hs-dark-line);border-radius:var(--b-r-card);overflow:hidden}
body.home--stripe .hs-term__head{display:flex;align-items:center;gap:12px;min-height:42px;padding:0 16px;border-bottom:1px solid var(--hs-dark-line);font:400 12px var(--b-mono);color:var(--hs-dark-mute)}
body.home--stripe .hs-term__sq{display:inline-flex;gap:6px}
body.home--stripe .hs-term__sq i{width:9px;height:9px;border-radius:var(--b-r-tick);background:var(--hs-dark-line)}
body.home--stripe .hs-term__body{margin:0;padding:22px 22px 26px;font:400 14px/1.8 var(--b-mono);color:var(--b-paper);white-space:pre-wrap;overflow-wrap:anywhere}
body.home--stripe .hs-term__body .d{color:var(--hs-dark-mute)}
body.home--stripe .hs-term__body .p{color:var(--b-glow-peri)}
body.home--stripe .hs-term__body .l:not(.c):not(.d){color:color-mix(in srgb,var(--b-paper) 82%,var(--b-ink))}
body.home--stripe .hs-term__body .ok{font-style:normal;color:var(--b-glow-peri)}
body.home--stripe .hs-dev__tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:96px 0 0;padding:0;list-style:none;border-top:1px solid var(--hs-dark-line)}
body.home--stripe .hs-dev__tools li{display:grid;gap:12px;align-content:start;min-width:0;padding:28px 24px 0 0}
body.home--stripe .hs-dev__tools li+li{padding-left:24px;border-left:1px solid var(--hs-dark-line)}
body.home--stripe .hs-dev__tool{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:500;color:var(--b-paper)}
body.home--stripe .hs-dev__tool :is(.home-logo:not(.home-logo--loes),.home-logo--loes svg){filter:brightness(0) invert(.96)}
body.home--stripe .hs-dev__tools code{font:400 13px/1.5 var(--b-mono);color:var(--hs-dark-mute);overflow-wrap:anywhere}
body.home--stripe .hs-dev__tools code b{font-weight:400}
body.home--stripe .hs-dev__note{margin:40px 0 0;font-size:15px;line-height:1.5;color:var(--hs-dark-mute)}
body.home--stripe .hs-dev__note code{font:400 14px var(--b-mono);color:var(--b-paper)}

/* plans: pricing cards */
body.home--stripe .hs-plans__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
body.home--stripe .hs-plan{display:flex;flex-direction:column;min-width:0;padding:32px;background:var(--b-card);border:1px solid var(--b-line);border-radius:var(--b-r-card)}
body.home--stripe .hs-plan__name{margin:0;font-size:24px;line-height:1.2;font-weight:500;letter-spacing:-.025em;color:var(--b-ink)}
body.home--stripe .hs-plan__name span{color:var(--b-muted)}
body.home--stripe .hs-plan__for{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--b-muted)}
body.home--stripe .hs-plan__layers{min-height:2.8em;margin:28px 0 0;font:400 12.5px/1.4 var(--b-mono);color:var(--b-muted)}
body.home--stripe .hs-plan__for{min-height:3em}
body.home--stripe .hs-plan__price{margin:8px 0 24px;font-size:18px;line-height:1.4;font-weight:500;color:var(--b-ink)}
body.home--stripe :is(.hs-plan,.hs-lab) .hy-btn--primary{background:var(--b-ink);color:var(--b-paper)}
body.home--stripe :is(.hs-plan,.hs-lab) .hy-btn--primary:hover{background:var(--b-ink-2);color:var(--b-paper)}
body.home--stripe .hs-plan__list{margin:28px 0 0;padding:24px 0 0;list-style:none;border-top:1px solid var(--b-line)}
body.home--stripe .hs-plan__list li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:12px;padding:6px 0;font-size:15px;line-height:1.45;color:var(--b-ink)}
body.home--stripe .hs-plan__list .hy-icon{margin-top:4px;color:var(--b-accent)}
body.home--stripe .hs-plans__note{margin:28px 0 0;font-size:14px;color:var(--b-muted)}
body.home--stripe .hs-plans__note a{color:var(--b-accent)}

/* lab: heading, lead, three steps as columns */
body.home--stripe .hs-lab__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin:0;padding:36px 0 0;list-style:none;border-top:1px solid var(--b-line)}
body.home--stripe .hs-lab__steps li{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0}
body.home--stripe .hs-lab__num{font:400 13px var(--b-mono);color:var(--b-muted)}
body.home--stripe .hs-lab__steps p{flex:1;margin:0;font-size:16px;line-height:1.55;color:var(--b-muted)}
body.home--stripe .hs-lab__steps p b{color:var(--b-ink)}
body.home--stripe .hs-lab__tag{margin-right:8px;padding:2px 6px;background:var(--b-band);border-radius:4px;font:400 12px var(--b-mono);color:var(--b-ink)}

/* close: heading, buttons, the crew */
body.home--stripe .hs-close{padding-bottom:128px}
body.home--stripe .hs-close__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:64px;align-items:end}
body.home--stripe .hs-close__title{font-size:clamp(40px,4.8vw,68px);line-height:1}
body.home--stripe .hs-close__aside .hs-head__lead{margin:0}
body.home--stripe .hs-close__aside .hs-hero__ctas{margin-top:28px}
body.home--stripe .hs-crew{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin:80px 0 0;padding:32px 0 0;list-style:none;border-top:1px solid var(--b-line)}
body.home--stripe .hs-crew__tile{display:grid;gap:8px;align-content:start;min-width:0;font-size:14px;line-height:1.3;color:var(--b-ink)}
body.home--stripe .hs-crew__tile img{display:block;width:100%;max-width:72px;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--b-r-ctl);background:var(--b-band)}
body.home--stripe .hs-crew__face{position:relative;display:grid;place-items:center;box-sizing:border-box;width:100%;max-width:72px;aspect-ratio:1;border-radius:var(--b-r-ctl);background:var(--b-card);transition:background-color .15s}
body.home--stripe .hs-crew__face .hy-maatje{width:52%}
body.home--stripe .hs-crew__face .hy-maatje svg{width:100%;height:auto}
body.home--stripe .hs-crew small{display:block;margin-top:2px;font-size:13px;color:var(--b-muted)}
body.home--stripe .hs-crew__play{display:grid;gap:8px;padding:0;background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
body.home--stripe .hs-crew__chip{position:absolute;left:4px;top:4px;padding:3px 5px;border-radius:4px;background:var(--b-ink);color:var(--b-paper);font:400 11px/1 var(--b-mono)}
body.home--stripe .hs-crew__play:hover .hs-crew__face,body.home--stripe .hs-crew__play:focus-visible .hs-crew__face{background:var(--b-band)}
body.home--stripe .hs-crew__play:focus-visible{outline:2px solid var(--b-accent);outline-offset:4px}

/* motion: screenshots rise in once, the terminal prints line by line (html.hs-motion only) */
html.hs-motion body.home--stripe [data-hs-reveal] .hs-shot{transition:opacity .8s var(--hy-ease),transform 1s var(--hy-ease)}
html.hs-motion body.home--stripe [data-hs-reveal].is-wait:not(.is-in) .hs-shot{opacity:0;transform:translate(16px,28px)}
html.hs-motion body.home--stripe .hs-term.is-wait:not(.is-in) .hs-term__body .l{opacity:0}
html.hs-motion body.home--stripe .hs-term.is-in .hs-term__body .l{transition:opacity .25s linear;transition-delay:calc(var(--i, 0) * 260ms + 200ms)}
@media (prefers-reduced-motion:reduce){body.home--stripe *,body.home--stripe *::before,body.home--stripe *::after{animation:none!important;transition:none!important}}

/* medium screens: hero and heads stack, the bento goes to one column */
@media (max-width:1100px){
  body.home--stripe .hs-hero{padding:calc(var(--hy-nav) + 72px) 0 96px}
  body.home--stripe .hs-aurora{width:100%;height:640px}
  body.home--stripe .hs-hero__grid{grid-template-columns:1fr;gap:56px}
  body.home--stripe .hs-hero__visual{max-width:none}
  body.home--stripe .hs-card--wide,body.home--stripe .hs-card--narrow{grid-column:span 12}
  body.home--stripe .hs-head--split,body.home--stripe .hs-close__head,body.home--stripe .hs-dev__grid{grid-template-columns:1fr;gap:32px;align-items:start}
  body.home--stripe .hs-dev__tools{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.home--stripe .hs-dev__tools li:nth-child(3){padding-left:0;border-left:0}
  body.home--stripe .hs-dev__tools li:nth-child(n+3){margin-top:28px}
  body.home--stripe .hs-plans__grid{grid-template-columns:1fr;max-width:640px}
  body.home--stripe .hs-crew{grid-template-columns:repeat(6,minmax(0,1fr))}
}
/* phones: one column everywhere, nothing clipped sideways */
@media (max-width:760px){
  body.home--stripe .hs-hero{padding:calc(var(--hy-nav) + 40px) 0 72px}
  body.home--stripe .hs-aurora{height:420px;opacity:.75}
  body.home--stripe .hs-hero__eyebrow{margin-bottom:24px}
  body.home--stripe .hs-hero__sub{margin-top:24px;font-size:18px}
  body.home--stripe .hs-hero__ctas>*{flex:1 1 auto}
  body.home--stripe .hs-logos__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 10px;padding:24px 0}
  body.home--stripe .hs-logos__row li{gap:8px;font-size:14px}
  body.home--stripe .hs-logos__row .home-logo{width:16px;height:16px}
  body.home--stripe .hs-hero__grid{gap:40px}
  body.home--stripe .hs-hero{padding-bottom:56px}
  body.home--stripe .hs-shot--hero img{width:760px}
  body.home--stripe .hs-card__stage{min-height:280px;margin-top:28px;padding:24px 0 0 24px}
  body.home--stripe .hs-card__stage .hs-shot{left:24px;top:24px}
  body.home--stripe :is(.hs-shot--keys,.hs-shot--models,.hs-shot--deploy) img{width:620px}
  body.home--stripe .hs-shot--router img{width:380px}
  body.home--stripe .hs-card--control .hs-card__stage{min-height:360px}
  body.home--stripe .hs-stat--text:last-child:nth-child(odd){grid-column:1/-1;padding-left:0;border-left:0}
  body.home--stripe .hs-plan__for,body.home--stripe .hs-plan__layers{min-height:0}
  body.home--stripe .hs-head{margin-bottom:40px}
  body.home--stripe .hs-card__copy{padding:28px 24px 0}
  body.home--stripe .hs-card__title{font-size:26px}
  body.home--stripe .hs-why{padding:88px 0 80px}
  body.home--stripe .hs-stats{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:56px}
  body.home--stripe .hs-stat:nth-child(3){padding-left:0;border-left:0}
  body.home--stripe .hs-stat:nth-child(n+3){margin-top:28px}
  body.home--stripe .hs-dev{padding:88px 0}
  body.home--stripe .hs-term__body{padding:18px 16px 20px;font-size:12px}
  body.home--stripe .hs-dev__tools{grid-template-columns:1fr;margin-top:64px}
  body.home--stripe .hs-dev__tools li:nth-child(n){margin-top:0;padding:18px 0;border-left:0;border-bottom:1px solid var(--hs-dark-line)}
  body.home--stripe .hs-plan{padding:24px}
  body.home--stripe .hs-lab__steps{grid-template-columns:1fr;gap:36px}
  body.home--stripe .hs-crew{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 12px;margin-top:56px}
  body.home--stripe .hs-close{padding-bottom:88px}
}
/* end home stripe */

/* ------------------------------------------------------------------ */
/* Home stripe 2 (3 Nov 2026): the second round of the Stripe study at */
/* /x/home-stripe-2 (layout "stripe2", the same parts with v 2). Only  */
/* under body.home--stripe2, so /x/home-stripe renders as it was.      */
/* The frame: two hairline guides on the nav's outer edges (the logo  */
/* left, the Get Started button right), starting under the nav; the   */
/* content sits 32px inside them at every width from 1024px. The hero */
/* is three windows of one company's team router, layered and scaled  */
/* as one; the code panel sits under the copy. Every product shot     */
/* below is a whole window on a stage with room all round.            */
/* ------------------------------------------------------------------ */
body.home--stripe2{--hs-pad:var(--hy-sx);--hs-inset:0px;--hs-edge:max(var(--hs-pad), calc(50% - 640px));--hs-frame-r:12px}
@media (min-width:1024px){body.home--stripe2{--hs-pad:56px;--hs-inset:32px;--hy-sx:calc(var(--hs-pad) + var(--hs-inset));--hy-w:calc(1280px - 2 * var(--hs-inset))}}
@media (min-width:1260px){body.home--stripe2{--hs-pad:80px}}
/* the guides: 1px each, on the frame edge; content is inset from them */
body.home--stripe2 main.hs::before,body.home--stripe2 main.hs::after,
body.home--stripe2 :is(.hs-why,.hs-dev)::before,body.home--stripe2 :is(.hs-why,.hs-dev)::after{content:"";display:block;position:absolute;top:0;bottom:0;z-index:0;width:1px;inset-inline:auto;background:var(--hs-rail,var(--b-line));pointer-events:none}
body.home--stripe2 main.hs::before,body.home--stripe2 main.hs::after{top:var(--hy-nav,64px)}
body.home--stripe2 main.hs::before,body.home--stripe2 :is(.hs-why,.hs-dev)::before{left:var(--hs-edge)}
body.home--stripe2 main.hs::after,body.home--stripe2 :is(.hs-why,.hs-dev)::after{right:var(--hs-edge)}
@media (max-width:1023px){body.home--stripe2 main.hs::before,body.home--stripe2 main.hs::after,body.home--stripe2 :is(.hs-why,.hs-dev)::before,body.home--stripe2 :is(.hs-why,.hs-dev)::after{display:none}}

/* hero: the copy and the code panel left, the window stack right, one top edge */
body.home--stripe2 .hs-hero{display:block;min-height:0;padding:calc(var(--hy-nav) + 72px) 0 112px}
body.home--stripe2 .hs-hero__grid{grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:56px;align-items:start}
body.home--stripe2 .hs-hero__eyebrow{margin-bottom:28px}
body.home--stripe2 .hs-hero__small{max-width:32em;margin:28px 0 0;font-size:15px;line-height:1.5;color:var(--b-muted)}
@media (min-width:1101px){body.home--stripe2 .hs-aurora{height:72%}}
@media (max-width:760px){body.home--stripe2 .hs-aurora{display:none}}
/* the stack: positions are shares of its own box, so it scales whole */
body.home--stripe2 .hs-stack{width:100%;max-width:720px;justify-self:end;padding-top:40px}
body.home--stripe2 .hs-stack__box{position:relative;aspect-ratio:680/560}
body.home--stripe2 .hs-win{position:absolute;margin:0;background:var(--b-card);border:1px solid var(--b-line);border-radius:var(--hs-frame-r);outline:6px solid var(--b-paper);overflow:hidden}
body.home--stripe2 .hs-win img{display:block;width:100%;height:auto}
body.home--stripe2 .hs-win--overview{top:0;left:8%;width:92%;outline:0}
body.home--stripe2 .hs-win--budgets{top:63%;left:0;width:58%}
body.home--stripe2 .hs-win--log{top:52%;left:50%;width:50%}
body.home--stripe2 .hs-stack .home-walker{left:calc(8% + 28px)}
/* the code panel: under the copy, in the flow, covering nothing */
body.home--stripe2 .hs-code{position:relative;z-index:2;width:100%;margin:40px 0 0;background:var(--b-ink);border-radius:var(--b-r-card);color:var(--b-paper);overflow:hidden}
body.home--stripe2 .hs-code .hy-tabs__list{display:flex;flex-wrap:nowrap;gap:0;width:100%;padding:0 6px;background:none;border-bottom:1px solid var(--hs-dark-line);overflow-x:auto;scrollbar-width:none}
body.home--stripe2 .hs-code .hy-tabs__tab{flex:none;height:40px;padding:0 9px;background:none;color:var(--hs-dark-mute);font-size:11.5px}
body.home--stripe2 .hs-code .hy-tabs__tab:hover{color:var(--b-paper)}
body.home--stripe2 .hs-code .hy-tabs__tab[aria-selected="true"]{background:linear-gradient(var(--b-glow-peri),var(--b-glow-peri)) 50% 100%/calc(100% - 12px) 2px no-repeat;color:var(--b-paper)}
body.home--stripe2 .hs-code .hy-tabs__tab:focus-visible{outline:2px solid var(--b-glow-peri);outline-offset:-4px}
body.home--stripe2 .hs-code .hy-tabs__panel{padding:0}
body.home--stripe2 .hs-code .hy-tabs__panel:focus-visible{outline:2px solid var(--b-glow-peri);outline-offset:-2px}
body.home--stripe2 .hs-code__pre{box-sizing:border-box;height:150px;margin:0;padding:16px 18px 14px;font:400 12.5px/1.7 var(--b-mono);color:var(--b-paper);white-space:pre;overflow:auto;scrollbar-width:thin}
body.home--stripe2 .hs-code__pre .d{color:var(--hs-dark-mute)}
body.home--stripe2 .hs-code__pre :is(.p,.k){color:var(--b-glow-peri)}
body.home--stripe2 .hs-code__pre .s{color:var(--b-glow-sand)}
body.home--stripe2 .hs-code__note{margin:0;padding:10px 18px 12px;border-top:1px solid var(--hs-dark-line);font-size:12.5px;line-height:1.5;color:var(--hs-dark-mute)}
body.home--stripe2 .hs-code__note code{color:var(--b-paper);font-size:12px}

/* the model marks slide (home-mq, global), the strip keeps its hairlines */
body.home--stripe2 .hs-logos--mq{padding:22px 0}
body.home--stripe2 .hs-logos--mq .home-mq ul{gap:56px;padding-right:56px}
body.home--stripe2 .hs-logos--mq .home-mq li{gap:10px;font-size:16px;color:var(--b-ink)}
body.home--stripe2 .hs-logos--mq .home-mq__track{animation-duration:64s}
/* why follows the logos: the band starts at the strip, no gap between */
body.home--stripe2 .hs-why{margin-top:0;padding:120px 0 112px}
body.home--stripe2 .hs-stats{align-items:end;margin-top:64px}
body.home--stripe2 .hs-stat dd,body.home--stripe2 .hs-stat--text dd{font-size:clamp(34px,3.4vw,48px);line-height:1;letter-spacing:-.045em}
/* developer band without its tool list: the note under the grid goes too */
body.home--stripe2 .hs-dev__grid{margin-bottom:0}
/* the ink band now follows the bento: give it the section's air */
body.home--stripe2 .hs-dev{margin-top:var(--hs-sec)}

/* bento: one row per layer, copy and stage alternating sides */
@media (min-width:1101px){body.home--stripe2{--hs-sec:128px}}
body.home--stripe2 .hs-bento{grid-template-columns:minmax(0,1fr);gap:16px}
body.home--stripe2 .hs-card--row{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr)}
body.home--stripe2 .hs-card--row .hs-card__copy{align-self:center;padding:56px 48px}
body.home--stripe2 .hs-card--flip{grid-template-columns:minmax(0,1fr) minmax(0,360px)}
body.home--stripe2 .hs-card--flip .hs-card__copy{order:2}
body.home--stripe2 .hs-card--row .hs-card__stage{display:flex;align-items:center;justify-content:center;min-height:0;margin:0;padding:48px}
body.home--stripe2 .hs-frame{width:100%;margin:0;background:var(--b-card);border:1px solid var(--b-line);border-radius:var(--hs-frame-r);overflow:hidden}
body.home--stripe2 .hs-frame img{display:block;width:100%;height:auto}
html.hs-motion body.home--stripe2 [data-hs-reveal] .hs-frame{transition:opacity .8s var(--hy-ease),transform 1s var(--hy-ease)}
html.hs-motion body.home--stripe2 [data-hs-reveal].is-wait:not(.is-in) .hs-frame{opacity:0;transform:translateY(24px)}
/* Serve: a row like the others (copy left, the Models window on its    */
/* stage), then the route as a flow across the full card underneath     */
body.home--stripe2 .hs-card--serve2{grid-template-areas:"copy stage" "flow flow"}
body.home--stripe2 .hs-card--serve2 .hs-card__copy{grid-area:copy}
body.home--stripe2 .hs-card--serve2 .hs-card__stage{grid-area:stage}
body.home--stripe2 .hs-card__flow{grid-area:flow;padding:48px;border-top:1px solid var(--b-line)}
body.home--stripe2 .hs-card__flow .home-route2{padding:0;background:none;border-radius:0}
body.home--stripe2 .hs-card--code .hs-card__stage{background:color-mix(in srgb,var(--b-glow-sand) 30%,var(--b-paper))}
body.home--stripe2 .hs-card--control .hs-card__stage{background:color-mix(in srgb,var(--b-glow-peri) 30%,var(--b-paper))}
body.home--stripe2 .hs-card--serve .hs-card__stage{background:color-mix(in srgb,var(--b-accent-light) 22%,var(--b-paper))}
body.home--stripe2 .hs-card--compute .hs-card__stage{background:color-mix(in srgb,var(--b-glow-sand) 44%,var(--b-paper))}

/* plans: the illustrations of x-site.home-plans open each card */
body.home--stripe2 .hs-plan__art{height:200px;margin:-24px -24px 28px}

/* lab: the lead starts on the heading's top line, not above the kicker */
body.home--stripe2 .hs-lab .hs-head--split{align-items:start}
body.home--stripe2 .hs-lab .hs-head__aside{padding-top:44px}

@media (max-width:1100px){
  body.home--stripe2 .hs-hero__grid{grid-template-columns:minmax(0,1fr);gap:48px}
  body.home--stripe2 .hs-stack{justify-self:start}
  body.home--stripe2 :is(.hs-card--row,.hs-card--flip,.hs-card--serve2){grid-template-columns:minmax(0,1fr)}
  body.home--stripe2 .hs-card--serve2{grid-template-areas:"copy" "stage" "flow"}
  body.home--stripe2 .hs-card__flow{padding:40px 36px}
  body.home--stripe2 .hs-lab .hs-head__aside{padding-top:0}
  body.home--stripe2 .hs-card--flip .hs-card__copy{order:0}
  body.home--stripe2 .hs-card--row .hs-card__copy{padding:40px 36px 0}
  body.home--stripe2 .hs-card--row .hs-card__stage{margin-top:36px;padding:40px}
}
@media (max-width:760px){
  body.home--stripe2 .hs-hero{padding:calc(var(--hy-nav) + 40px) 0 72px}
  body.home--stripe2 .hs-hero__small{margin-top:24px;font-size:14px}
  body.home--stripe2 .hs-code{margin-top:32px}
  body.home--stripe2 .hs-code .hy-tabs__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0 6px;overflow:visible}
  body.home--stripe2 .hs-code .hy-tabs__tab{padding:0 4px;font-size:12px}
  body.home--stripe2 .hs-code__pre{height:170px;padding:16px;font-size:12px;line-height:1.6}
  /* phones: one readable crop of the Overview (sidebar and the numbers), */
  /* bleeding off the right edge; the two detail windows wait for a wider */
  /* screen                                                               */
  body.home--stripe2 .hs-stack{padding-top:44px}
  body.home--stripe2 .hs-stack__box{aspect-ratio:auto;margin-right:calc(-1 * var(--hy-sx))}
  body.home--stripe2 .hs-win--overview{position:relative;left:0;width:auto;height:300px;border-right:0;border-radius:8px 0 0 8px}
  body.home--stripe2 .hs-win--overview img{width:760px;max-width:none}
  body.home--stripe2 :is(.hs-win--budgets,.hs-win--log){display:none}
  body.home--stripe2 .hs-stack .home-walker{left:24px}
  body.home--stripe2 .hs-logos--mq{padding:16px 0}
  body.home--stripe2 .hs-logos--mq .home-mq ul{gap:36px;padding-right:36px}
  body.home--stripe2 .hs-logos--mq .home-mq li{font-size:14px}
  body.home--stripe2 .hs-why{padding:88px 0 80px}
  body.home--stripe2 .hs-stats{grid-template-columns:1fr}
  body.home--stripe2 .hs-stat,body.home--stripe2 .hs-stat+.hs-stat{padding:24px 0;border-left:0;border-bottom:1px solid color-mix(in srgb,var(--b-ink) 14%,var(--b-band))}
  body.home--stripe2 .hs-card--row .hs-card__copy{padding:32px 24px 0}
  body.home--stripe2 .hs-card--row .hs-card__stage{margin-top:28px;padding:24px 0 24px 24px;justify-content:flex-start;overflow:hidden}
  body.home--stripe2 .hs-frame{flex:none;width:640px;border-right:0;border-radius:var(--hs-frame-r) 0 0 var(--hs-frame-r)}
  body.home--stripe2 .hs-card__flow{padding:32px 24px}
  body.home--stripe2 .hs-plan__art{height:180px}
}

/* ===================================================================== */
/* 8. House style: the option C components (4 Nov 2026)                  */
/* ===================================================================== */
/* Option C (resources/views/x/home-e/c.blade.php) is the house style of the public site. Its
   parts live here once, on the --b-* tokens, for every page:
     new components   x-site.section-head (.hy-sec-head, .hy-eyebrow, .hy-sec-title, .hy-sec-lead)
                      x-site.cell (.hy-cell, .hy-cell__tag, __title, __p, __vis)
                      x-site.bento (.hy-bento)
     classes          .hy-cap and .hy-colhead (the two label roles), .hy-tag (mono tag with an
                      ink number), .hy-also (small mono chips), .hy-seg (the one segmented
                      control: tabs and toggles, selected = ink fill), .hy-st (status: text and a
                      small square), .hy-more (the accent link with an arrow), .hy-ink and
                      .hy-section--ink (the one ink band of a page)
     restyled         x-site.section, chapter, split, cards, steps, stats, seo-faq, cta (the
                      closing block, now centred with the crew), button (46px, soft secondary,
                      a "line" variant for the ink band), tabs (the .hy-seg look)
   Rules: flat, no shadows or glows, no round dots, indigo is the only accent, labels are muted
   mono, headings weight 600. Radii 24 / 12 / 8 / 6, plus 3 for bars. One section rhythm
   (--b-sec: 120, 80 on phones). */

/* --- labels: two roles -------------------------------------------------- */
:root .hy-cap{font:400 12px/1.3 var(--b-mono);letter-spacing:0;color:var(--b-muted)}
:root .hy-colhead{font:500 12.5px/1.2 var(--b-font);letter-spacing:0;color:var(--b-muted)}
:root .hy-tag{margin:0;font:400 12px/1.3 var(--b-mono);letter-spacing:0;color:var(--b-muted)}
:root .hy-tag > :is(span,b){margin-right:6px;font-weight:400;color:var(--b-ink)}

/* --- section head: x-site.section-head ---------------------------------- */
:root .hy-sec-head{max-width:760px;margin-bottom:56px}
:root .hy-sec-head--center{margin-inline:auto;text-align:center}
:root .hy-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 20px;font:400 13px/1.2 var(--b-mono);letter-spacing:0;color:var(--b-muted);text-transform:none}
:root .hy-sec-head--center .hy-eyebrow{justify-content:center}
:root .hy-eyebrow__l{display:inline-block;width:max-content;padding:5px 9px;border-radius:var(--b-r-tag);background:var(--b-band);color:var(--b-muted)}
:root .hy-eyebrow__q{color:var(--b-muted)}
:root .hy-sec-title{margin:0;font-weight:var(--b-head-weight);font-size:var(--b-t-h2);line-height:1.06;color:var(--b-ink)}
:root .hy-sec-title span{color:var(--b-muted)}
:root .hy-sec-lead{margin:20px 0 0;max-width:620px;font-size:var(--b-t-lead);line-height:1.55;color:var(--b-ink-2)}
:root .hy-sec-lead b,:root .hy-sec-lead strong{font-weight:500;color:var(--b-ink)}
:root .hy-sec-head--center .hy-sec-lead{margin-inline:auto}
:root .hy-sec-head > .hy-actions{margin-top:28px}
:root .hy-sec-head--center > .hy-actions{justify-content:center}
:root .hy-section--band .hy-eyebrow__l{background:var(--b-card)}

/* --- buttons: x-site.button --------------------------------------------- */
/* accent (one per section), soft (secondary, on paper), quiet (text), line (on the ink band) */
:root .hy-btn{height:46px;padding:0 20px;border-radius:var(--b-r-ctl);font:500 15px/1 var(--b-font);letter-spacing:-.01em}
:root .hy-btn--sm{height:36px;padding:0 14px;font-size:14px}
:root .hy-btn--code{font-family:var(--b-mono);font-size:14px;letter-spacing:0}
:root .hy-btn--secondary{background:var(--b-raised);color:var(--b-ink)}
:root .hy-btn--secondary:hover,:root .hy-btn--secondary:active{background:var(--b-raised-h);color:var(--b-ink)}
:root .hy-btn--line{background:var(--b-ink-fill);color:var(--b-on-ink)}
:root .hy-btn--line:hover{background:rgb(248 244 236 / .14);color:var(--b-on-ink)}
:root .hy-more{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:500;color:var(--b-accent);text-decoration:none}
:root .hy-more::after{content:'\2192';transition:transform .2s var(--ease)}
:root .hy-more:hover::after{transform:translateX(3px)}
@media (max-width:560px){:root .hy-btn:not(.hy-btn--sm){height:44px}}

/* --- segmented control: tabs and toggles (.hy-seg, x-site.tabs) ---------- */
:root .hy-seg,:root .hy-tabs__list{display:inline-flex;align-self:flex-start;max-width:100%;gap:2px;padding:3px;border-radius:var(--b-r-ctl);background:var(--b-band)}
:root .hy-seg > *,:root .hy-tabs__tab{display:inline-flex;align-items:center;gap:7px;flex:none;height:auto;padding:4px 11px;border:0;border-radius:var(--b-r-tag);background:transparent;font:500 13px/20px var(--b-font);letter-spacing:0;color:var(--b-muted);white-space:nowrap;cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease)}
:root :is(.hy-seg > button,.hy-seg > a,.hy-tabs__tab):hover{color:var(--b-ink)}
:root :is(.hy-seg > :is(.is-on,.on,[aria-selected="true"],[aria-pressed="true"]),.hy-tabs__tab[aria-selected="true"]){background:var(--b-ink);color:var(--b-paper)}
:root .hy-seg--sm > *,:root .hy-tabs--mono .hy-tabs__tab{padding:3px 9px;font-size:12px;line-height:18px}
:root .hy-seg--card,:root :is(.hy-section--band,.hy-win__head) :is(.hy-seg,.hy-tabs__list){background:var(--b-card)}
:root .hy-seg--raised{background:var(--b-raised)}
:root .hy-seg--ink{background:var(--b-ink-fill)}
:root .hy-seg--ink > *{color:var(--b-ink-mute)}
:root .hy-seg--ink > :is(.is-on,.on,[aria-selected="true"],[aria-pressed="true"]){background:var(--b-on-ink);color:var(--b-ink-band)}

/* --- status and model rows ---------------------------------------------- */
:root .hy-st{display:inline-flex;align-items:center;gap:8px;font:500 14px/1.2 var(--b-font);color:var(--b-ok);white-space:nowrap}
:root .hy-st::before{content:"";flex:none;width:6px;height:6px;border-radius:var(--b-r-tick);background:currentColor}
:root .hy-st.is-boot{color:var(--b-accent)}

/* --- small mono chips (the "also" list of a cell, related links) --------- */
:root .hy-also{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;padding:0;list-style:none}
:root .hy-also > *{display:inline-flex;align-items:center;padding:6px 9px;border-radius:var(--b-r-tag);background:var(--b-band);font:400 12px/1 var(--b-mono);letter-spacing:0;color:var(--b-ink-2);text-decoration:none}
:root .hy-also > a:hover{background:var(--b-raised)}
:root .hy-section--band .hy-also > *{background:var(--b-card)}

/* --- bento and cells: x-site.bento, x-site.cell ------------------------- */
:root .hy-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
:root .hy-cell{grid-column:span var(--hy-span,12);display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--b-card);border:1px solid var(--b-line-2);border-radius:var(--b-r-panel);color:var(--b-ink)}
:root .hy-cell__text{padding:32px 32px 24px}
:root .hy-cell__tag{margin:0 0 14px;font:400 12px/1.3 var(--b-mono);letter-spacing:0;color:var(--b-muted)}
:root .hy-cell__tag > span{margin-right:6px;color:var(--b-ink)}
:root .hy-cell__title{margin:0;font-weight:var(--b-head-weight);font-size:var(--b-t-h3);line-height:1.15;letter-spacing:-.025em;color:var(--b-ink)}
:root .hy-cell__title span{color:var(--b-muted)}
:root .hy-cell__title + .prose-site{margin-top:16px}
:root .hy-cell__text > p:not(.hy-cell__tag){margin:12px 0 0;max-width:480px;color:var(--b-ink-2)}
:root .hy-cell__text > .hy-more{margin-top:16px}
/* the visual follows the text at one fixed gap; spare height stays at the foot of the card */
:root .hy-cell__vis{flex:1;position:relative;display:flex;flex-direction:column;gap:16px;padding:0 32px 32px;font-variant-numeric:tabular-nums}
/* a cell that carries only a visual (no tag, heading or text) drops its empty text block */
:root .hy-cell__text:not(:has(*)){display:none}
:root .hy-cell__text:not(:has(*)) + .hy-cell__vis{padding-top:28px}
/* cells on the ink band take the ink surfaces */
:root .hy-section--ink .hy-cell{background:var(--b-ink-fill);border-color:var(--b-ink-line);color:var(--b-on-ink)}
:root .hy-section--ink .hy-cell__text > p:not(.hy-cell__tag){color:var(--b-ink-soft)}
@media (max-width:900px){:root .hy-bento > .hy-cell{grid-column:1 / -1}}
@media (max-width:560px){
  :root .hy-cell__text{padding:24px 20px 18px}
  :root .hy-cell__vis{padding:4px 20px 24px}
  :root .hy-cell__text:not(:has(*)) + .hy-cell__vis{padding-top:20px}
}

/* --- the ink band: x-site.section ink, or .hy-ink on any block ----------- */
:root :is(.hy-ink,.hy-section--ink){background:var(--b-ink-band);color:var(--b-on-ink)}
:root .hy-ink{padding:var(--b-sec) 0}
:root :is(.hy-ink,.hy-section--ink) :is(.hy-sec-title,.hy-section__title,.hy-h2,h2,h3){color:var(--b-on-ink)}
:root :is(.hy-ink,.hy-section--ink) :is(.hy-sec-title,.hy-section__title,.hy-h2) span{color:var(--b-ink-mute)}
:root :is(.hy-ink,.hy-section--ink) :is(.hy-sec-lead,.hy-section__sub,.hy-lead,p){color:var(--b-ink-soft)}
:root :is(.hy-ink,.hy-section--ink) :is(.hy-eyebrow__l,.hy-section__head .hy-label){background:var(--b-ink-fill);color:var(--b-ink-mute)}
:root :is(.hy-ink,.hy-section--ink) :is(.hy-cap,.hy-tag,.hy-eyebrow__q){color:var(--b-ink-mute)}
:root :is(.hy-ink,.hy-section--ink) .hy-btn--secondary{background:var(--b-ink-fill);color:var(--b-on-ink)}
:root :is(.hy-ink,.hy-section--ink) code{background:var(--b-ink-fill);color:var(--b-on-ink);border-radius:var(--b-r-tag)}

/* --- x-site.section: the option C head, one rhythm ---------------------- */
:root .hy-section:not(.hy-section--tight){--hy-section-pad:var(--b-sec)}
:root .hy-section__head{max-width:760px;margin-bottom:56px}
:root .hy-section__head .hy-label{margin-bottom:20px}
:root :is(.hy-section__head,.hy-cm-split__head,.hy-chapter__line) .hy-label:not(.hy-label--accent){padding:5px 9px;border-radius:var(--b-r-tag);background:var(--b-band);font:400 13px/1.2 var(--b-mono);color:var(--b-muted);text-transform:none}
:root .hy-section--band :is(.hy-section__head,.hy-cm-split__head,.hy-chapter__line) .hy-label:not(.hy-label--accent){background:var(--b-card)}
:root :is(.hy-section__title,.hy-h2,.hy-cta__title,.hy-cm-cta__title){font-weight:var(--b-head-weight);line-height:1.06}
:root .hy-section__sub{margin-top:20px;max-width:620px;font-size:var(--b-t-lead);line-height:1.55;color:var(--b-ink-2)}
@media (max-width:720px){:root .hy-section__head{margin-bottom:40px}}
:root .hy-section--ink :is(.hy-section__head,.hy-cm-split__head,.hy-chapter__line) .hy-label:not(.hy-label--accent){background:var(--b-ink-fill);color:var(--b-ink-mute)}

/* --- x-site.chapter: title at weight 600, the lead in ink-2 -------------- */
:root .hy-chapter__line{color:var(--b-muted)}
:root .hy-chapter__num{color:var(--b-muted)}
:root .hy-h1{font-weight:var(--b-head-weight);line-height:.98}
:root .hy-lead{font-size:var(--b-t-lead);line-height:1.55;color:var(--b-ink-2)}
:root .hy-chapter__head{margin-bottom:56px}
:root .hy-chapter--hero{padding-top:72px}
@media (max-width:720px){:root .hy-chapter--hero{padding-top:40px}:root .hy-chapter__head{margin-bottom:40px}}

/* --- x-site.split: the head column ------------------------------------- */
:root .hy-cm-split__title{font-weight:var(--b-head-weight);letter-spacing:var(--b-track-2)}
:root .hy-cm-split__sub{color:var(--b-ink-2)}

/* --- x-site.cards, steps, stats: the cell surface at card size ---------- */
:root :is(.hy-cards,.hy-steps,.hy-stats){gap:16px}
:root :is(.hy-card,.hy-step,.hy-stat){padding:28px;background:var(--b-card);border:1px solid var(--b-line-2);border-radius:var(--b-r-card)}
:root .hy-section--band :is(.hy-card,.hy-step,.hy-stat){background:var(--b-card)}
:root a.hy-card:hover{background:var(--b-band)}
:root .hy-section--band a.hy-card:hover{background:var(--b-paper)}
:root :is(.hy-cards--open .hy-card,.hy-steps--open .hy-step,.hy-stats--open .hy-stat){padding:20px 0 0;background:none;border:0;border-top:1px solid var(--b-line);border-radius:0}
:root .hy-cards--open a.hy-card:hover{background:none}
:root .hy-card__title{font-weight:var(--b-head-weight);font-size:19px;line-height:1.2;letter-spacing:-.02em}
:root :is(.hy-card__text,.hy-step__text,.hy-stat__text){font-size:15px;line-height:1.55;color:var(--b-ink-2)}
:root .hy-card__num{padding:0;background:none;font:400 12px/1.3 var(--b-mono);color:var(--b-muted)}
:root .hy-card__icon{border-radius:var(--b-r-ctl);background:var(--b-band);color:var(--b-accent)}
:root .hy-card__more{color:var(--b-accent)}
:root .hy-step__no{border-radius:var(--b-r-tag)}
:root .hy-step__title{font-weight:var(--b-head-weight)}
@media (max-width:560px){:root :is(.hy-card,.hy-step,.hy-stat){padding:22px}}

/* --- x-site.seo-faq: hairline rows ------------------------------------- */
:root .hy-faq__item{border-top:1px solid var(--b-line)}
:root .hy-faq__q{font-weight:var(--b-head-weight)}
:root .hy-faq__a{color:var(--b-ink-2)}

/* --- x-site.cta: option C's closing block, centred, with the crew ------- */
:root .hy-close{padding:var(--b-sec) 0}
:root .hy-close__in{display:flex;flex-direction:column;align-items:center;text-align:center}
:root .hy-close__title{max-width:18em;margin:0;font-weight:var(--b-head-weight);font-size:var(--b-t-long);line-height:1.02;color:var(--b-ink)}
:root .hy-close__title span{color:var(--b-muted)}
:root .hy-close__lead{margin-inline:auto}
:root .hy-close__ctas{margin-top:32px}
:root .hy-close__cmd{margin-top:12px}
:root .hy-crew{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:56px}
:root .hy-crew__k{font:500 14px/1.3 var(--b-font);color:var(--b-ink-2)}
/* the people behind it: every photo with the real name under it */
:root .hy-crew__list{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 20px;margin:0;padding:0;list-style:none}
:root .hy-crew__list li{display:flex;flex-direction:column;align-items:center;gap:8px;width:72px;text-align:center}
:root .hy-crew__list img{display:block;width:64px;height:64px;object-fit:cover;border-radius:var(--b-r-card);background:var(--b-band)}
:root .hy-crew__list .hy-cap{color:var(--b-ink-2)}
:root .hy-crew__list small{margin-top:-6px;font:400 11px/1.2 var(--b-mono);color:var(--b-muted)}
:root .hy-crew__bot{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:var(--b-r-card);background:var(--b-band)}
:root .hy-crew__play{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
:root .hy-crew__play:hover .hy-crew__bot,:root .hy-crew__play:focus-visible .hy-crew__bot{background:var(--b-raised)}
:root .hy-crew__ph{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:var(--b-r-tag);background:var(--b-ink);color:var(--b-paper);font:400 11.5px/1 var(--b-mono);white-space:nowrap;visibility:hidden}
:root .hy-crew__ph i{width:0;height:0;border-left:6px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent}
:root .hy-crew__play:hover .hy-crew__ph,:root .hy-crew__play:focus-visible .hy-crew__ph{visibility:visible}
@media (max-width:560px){
  :root .hy-crew__list{display:grid;grid-template-columns:repeat(4,72px);gap:16px 12px}
  :root .hy-crew__list img,:root .hy-crew__bot{width:56px;height:56px}
  :root .hy-close__ctas .hy-btn{flex:1 1 auto}
}

/* end house style */
:root .hy-seg--card{border:1px solid var(--b-line-2,rgba(21,17,12,.16))}
/* an active segment is ink with paper text everywhere; the colour list above must not turn its label ink on ink */
:root .hy-seg.hy-seg > :is(.is-on,.on,[aria-selected="true"],[aria-pressed="true"]).is-on,
:root .hy-seg.hy-seg > :is(.is-on,.on,[aria-selected="true"],[aria-pressed="true"])[aria-selected="true"],
:root .hy-seg.hy-seg > :is(.is-on,.on,[aria-selected="true"],[aria-pressed="true"])[aria-pressed="true"]{color:var(--b-paper)}
:root .hy-seg--ink.hy-seg--ink > :is(.is-on,.on,[aria-selected="true"],[aria-pressed="true"]){color:var(--b-ink-band)}
/* The team as one tight row on every page (the 12:52 option C version, Jantine 4 Nov 2026):
   overlapping square faces with the line beside them; names live in alt and title. */
:root .hy-crew{flex-direction:row;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:28px}
:root .hy-crew__list{display:flex;flex-wrap:nowrap;gap:0;padding-left:10px}
:root .hy-crew__list li{width:auto;margin-left:-10px;position:relative;transition:transform .2s}
:root .hy-crew__list li:hover{transform:translateY(-5px);z-index:20}
:root .hy-crew__list img,:root .hy-crew__list .hy-crew__bot{width:44px;height:44px;border-radius:var(--b-r-ctl);border:3px solid var(--b-paper)}
:root .hy-crew__list .hy-crew__bot{font-size:11px;line-height:1.1;text-align:center;padding:2px}
:root .hy-crew__list .hy-cap{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:560px){:root .hy-crew__list{display:flex}:root .hy-crew__list img,:root .hy-crew__list .hy-crew__bot{width:38px;height:38px;border-radius:var(--b-r-ctl)}}

/* Page heroes built from x-site.chapter hero follow the layer page hero (Jantine 4 Nov 2026: the
   title sank to the bottom of a two-column box with the lead beside it, leaving a hole above it).
   One centred stack: label, title, lead, buttons, note. */
:root .hy-chapter--hero .hy-chapter__line{justify-content:center}
:root .hy-chapter--hero .hy-chapter__head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;max-width:920px;margin-left:auto;margin-right:auto}
:root .hy-chapter--hero .hy-chapter__aside{display:flex;flex-direction:column;align-items:center;gap:24px;max-width:640px}
:root .hy-chapter--hero .hy-chapter__aside .hy-actions{justify-content:center}
:root .hy-chapter--hero .hy-chapter__aside .hy-note{text-align:center}
:root .hy-chapter--hero .hy-h1{font-size:var(--b-t-title,var(--hy-t-h1));line-height:.98}

/* ===================================================================== */
/* 9. Service and SEO pages on option C (4 Nov 2026)                     */
/* ===================================================================== */
/* Jantine, 4 Nov 2026: every service and SEO landing page looks like the option C homepage,
   the blocks, cards and illustrations too. Shared rules for those pages, on the --b-* tokens.
   Hairlines stay; no shadows, no zebra, no accent chips, labels keep their capitals. */

/* --- labels keep their capitals (HostYourAI, OpenAI, GPU, VRAM) -------------------------- */
:root :is(.prose-site,.prose-trust,.hy-table,.sv-table) thead th,
:root :is(.hy-field__label,.hy-model__stats dt,.sv-k,.toc-box summary){text-transform:none}

/* --- tables: one card surface, mono heads, hairline rows, no zebra ----------------------- */
:root .prose-table,:root .hy-table-wrap,:root .hy-doc__body :is(.hy-table-wrap,.hy-doc__scroll){padding:8px 16px;overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--b-card);border:1px solid var(--b-line-2);border-radius:var(--b-r-panel);box-shadow:none}
:root .prose-table{margin:24px 0}
:root :is(.prose-table,.hy-table-wrap,.hy-doc__scroll) table{width:100%;min-width:560px;margin:0;border:0;border-collapse:collapse;background:transparent;border-radius:0}
:root .hy-doc__body table:not(:is(.hy-table-wrap,.hy-doc__scroll,.prose-table) table){padding:8px 16px;background:var(--b-card);border:1px solid var(--b-line-2);border-radius:var(--b-r-panel)}
:root :is(.prose-table,.hy-table-wrap,.hy-doc__body) thead th,
:root :is(.prose-site,.prose-trust) .prose-table thead th{padding:14px 16px 10px;border:0;border-bottom:1px solid var(--b-line);background:transparent;font:400 11px/1.3 var(--b-mono);letter-spacing:0;color:var(--b-muted);text-align:left;white-space:nowrap}
:root :is(.prose-table,.hy-table-wrap,.hy-doc__body) tbody :is(td,th){height:46px;padding:12px 16px;border:0;border-top:1px solid var(--b-line);background:transparent;vertical-align:middle}
:root :is(.prose-table,.hy-table-wrap,.hy-doc__body) tbody tr:first-child > *{border-top:0}
:root :is(.prose-site,.prose-trust,.hy-table,.hy-doc__body) tbody tr:nth-child(even) :is(td,th),
:root .prose-site .prose-table tbody tr:nth-child(even) td{background:transparent}
:root :is(.prose-site .prose-table,.hy-table,.hy-doc__body) tbody tr:hover :is(td,th){background:transparent}
:root .hy-table caption{padding:12px 0 8px;background:transparent}
:root .hy-section--band :is(.prose-table,.hy-table-wrap){background:var(--b-card)}
/* x-site.table on a phone: every row a block of label and value lines, no sideways scroll */
@media (max-width:640px){
  :root .hy-table-wrap:has(> .hy-table--stack){overflow-x:visible}
  :root .hy-table.hy-table--stack{min-width:0}
  :root .hy-table--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  :root .hy-table--stack,:root .hy-table--stack :is(tbody,tr,td,th){display:block;width:auto}
  :root .hy-table--stack caption{display:block}
  :root .hy-table--stack tbody tr{padding:14px 0;border-top:1px solid var(--b-line)}
  :root .hy-table--stack tbody tr:first-child{border-top:0}
  :root .hy-table--stack tbody :is(td,th){height:auto;padding:3px 0;border:0;text-align:left;white-space:normal}
  :root .hy-table--stack tbody th[scope="row"]{padding-bottom:6px;font-weight:500;color:var(--b-ink)}
  :root .hy-table--stack tbody td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;font:400 11px/1.3 var(--b-mono);color:var(--b-muted)}
}

/* --- code blocks: card surface on a band, wrapped lines; a terminal window in prose ------- */
:root .hy-section--band :is(.hy-card,.hy-stat,.hy-step,.hy-chip:not(.hy-chip--accent),.prose-site pre,.prose-table){background:var(--b-card)}
:root .prose-site pre{white-space:pre-wrap;overflow-wrap:anywhere}
:root :is(.prose-site,.prose-trust) .hy-win{width:100%;max-width:none;margin:24px 0;border:1px solid var(--b-line-2);border-radius:var(--b-r-card);overflow:hidden}
:root :is(.prose-site,.prose-trust) .hy-win pre,:root :is(.prose-site,.prose-trust) .hy-win--term .hy-win__body{margin:0;padding:18px 16px;border:0;border-radius:0;background:transparent;font:400 12.5px/1.8 var(--b-mono);white-space:pre-wrap;overflow-wrap:anywhere}
:root :is(.prose-site,.prose-trust) .hy-win pre code{padding:0;background:none;color:inherit;font:inherit}
@media (max-width:600px){:root :is(.prose-site,.prose-trust) .hy-win--term .hy-win__body{padding:16px 14px;font-size:11.5px;line-height:1.75}}

/* --- hero and stage, for pages without layer-page.css (copied from it, same values) ------- */
:root .hy-section.hy-lp-hero{padding:72px 0 0}
:root .hy-lp-hero .hy-sec-head{max-width:920px;margin-bottom:0}
:root .hy-lp-hero .hy-sec-title{font-size:var(--b-t-title);line-height:.98;letter-spacing:var(--b-track)}
:root .hy-lp-hero .hy-sec-lead{max-width:640px}
:root .hy-lp-stage{margin:56px 0 0}
:root .hy-lp-stage__mat{padding:20px 32px 0;border-radius:var(--b-r-panel);background:var(--b-band);overflow:hidden}
:root .hy-lp-stage__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px}
:root .hy-lp-stage__shot{position:relative;aspect-ratio:1355/800;overflow:hidden;border:1px solid var(--b-line-2);border-bottom:0;border-radius:var(--b-r-card) var(--b-r-card) 0 0;background:var(--b-card)}
:root .hy-lp-stage__shot img{position:absolute;inset:0 auto auto 0;display:block;width:100%;height:auto}
:root .hy-lp-shot{display:block;width:100%;height:auto;border:1px solid var(--b-line-2);border-radius:var(--b-r-card);background:var(--b-card)}
/* A product card already has its own surface. Give it room without a second card. */
:root .hy-layer-page .hy-lp-cardcell{background:transparent;border:0}
:root .hy-layer-page .hy-lp-cardcell .hy-cell__vis{padding:16px;justify-content:center}
:root .hy-layer-page .hy-lp-cardcell .hy-lp-shot--card{max-width:280px;border:0}
@media (max-width:900px){
  :root .hy-lp-stage__mat{padding:16px 24px 24px}
  :root .hy-lp-stage__shot{border-bottom:1px solid var(--b-line-2);border-radius:var(--b-r-card)}
}
@media (max-width:720px){:root .hy-section.hy-lp-hero{padding-top:40px}:root .hy-lp-stage{margin-top:40px}}
@media (max-width:560px){:root .hy-lp-stage__mat{padding:10px 10px 12px;border-radius:var(--b-r-card)}}
/* the SEO page hero: a centred head, the H1 at the long title scale, the stage ends the section
   so one section rhythm (--b-sec) separates it from the next block */
:root .hy-section.hy-seo-hero{--hy-hero-bottom:0;padding-bottom:0}
:root .hy-seo-hero .hy-sec-head{max-width:920px;margin-inline:auto;text-align:center}
:root .hy-seo-hero .hy-sec-head .hy-eyebrow{justify-content:center}
:root .hy-seo-hero .hy-sec-head .hy-sec-lead{max-width:640px;margin-inline:auto}
:root .hy-seo-hero .hy-sec-head .hy-actions{justify-content:center}
:root .hy-seo-hero :is(h1.hy-sec-title,.hy-sec-head h1){font-size:var(--b-t-long);line-height:1.02;letter-spacing:var(--b-track)}
:root .hy-seo-hero .hy-sec-head + *{margin-top:56px}
@media (max-width:720px){:root .hy-seo-hero .hy-sec-head + *{margin-top:40px}}

/* Product openings: the promise beside the product, with a legible crop instead of a
   full dashboard shrunk to thumbnail text. Shared by all product-led SEO templates. */
:root .hy-hero--product .hy-lp-stage__mat{padding:20px 20px 0}
:root .hy-hero--product .hy-lp-stage__shot{aspect-ratio:auto;height:420px}
:root .hy-hero--product .hy-lp-stage__shot img{width:800px;max-width:none}
@media (min-width:1000px){
  :root .hy-section.hy-hero--product{padding-top:72px}
  :root .hy-hero--product>.hy-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:64px}
  :root .hy-hero--product .hy-sec-head{margin:0;text-align:left}
  :root .hy-hero--product .hy-sec-head :is(.hy-eyebrow,.hy-actions){justify-content:flex-start}
  :root .hy-hero--product .hy-sec-head .hy-sec-lead{margin-inline:0}
  :root .hy-hero--product :is(h1.hy-sec-title,.hy-sec-head h1){font-size:clamp(40px,4.2vw,56px);text-wrap:balance}
  :root .hy-hero--product .hy-sec-head+.hy-lp-stage{min-width:0;margin:0}
  :root .hy-hero--product .hy-lp-stage__bar .hy-seg{width:100%;justify-content:space-between}
}
@media (max-width:560px){
  :root .hy-hero--product .hy-lp-stage__mat{padding:10px 10px 0}
  :root .hy-hero--product .hy-lp-stage__shot{height:280px}
  :root .hy-hero--product .hy-lp-stage__shot img{width:680px;left:-92px}
}

/* --- cards family: the panel radius of a cell, quiet step numbers ------------------------ */
:root :is(.hy-card,.hy-step,.hy-stat){border-radius:var(--b-r-panel)}
:root :is(.hy-cards--open .hy-card,.hy-steps--open .hy-step,.hy-stats--open .hy-stat){border-radius:0}
:root .hy-step__no,:root .hy-step:first-child .hy-step__no,:root .hy-section--band .hy-step:first-child .hy-step__no{background:var(--b-band);color:var(--b-ink)}
:root .hy-section--band .hy-step__no{background:var(--b-band)}
@media (max-width:560px){:root :is(.hy-card,.hy-step,.hy-stat):not(:is(.hy-cards--open,.hy-steps--open,.hy-stats--open) > *){border-radius:var(--b-r-card)}}
/* x-site.layer-card renders a cell; in .hy-layers the four sit in one row */
:root .hy-layers{gap:16px}
:root .hy-layers > .hy-cell{grid-column:auto}
:root .hy-cell__cmd{margin:14px 0 0}
:root .hy-cell__cmd code{display:block;padding:9px 10px;border-radius:var(--b-r-tag);background:var(--b-band);font:400 12px/1.5 var(--b-mono);color:var(--b-ink-2);white-space:nowrap;overflow-x:auto;scrollbar-width:none}
:root .hy-cell__cmd b{font-weight:400;color:var(--b-accent)}
:root .hy-section--band .hy-cell__cmd code{background:var(--b-band)}

/* --- check lists: hairline rows with a square mark (.hy-checks), quiet ticks ------------- */
:root .hy-checks,:root .hy-layer-page__checks{display:block;margin:16px 0 0;padding:0;list-style:none}
:root :is(.hy-checks,.hy-layer-page__checks) li{position:relative;display:flex;align-items:baseline;gap:12px;padding:10px 0;border-top:1px solid var(--b-line);font-size:14.5px;line-height:1.5;color:var(--b-ink-2)}
:root .hy-layer-page__checks li{border-top-color:var(--hy-raise)}
:root :is(.hy-checks,.hy-layer-page__checks) li:first-child{border-top:0}
:root .hy-checks li:not(:has(> .hy-sq))::before{content:"";position:static;flex:none;width:7px;height:7px;border-radius:var(--b-r-tick);background:var(--b-accent);transform:translateY(-1px)}
:root :is(.hy-checks,.hy-layer-page__checks) .hy-sq{transform:translateY(-1px)}
:root :is(.hy-checks,.hy-layer-page__checks) code{font:400 13px var(--b-mono);color:var(--b-ink)}
:root .hy-checks--2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
:root .hy-checks--2 li:nth-child(2){border-top:0}
@media (max-width:640px){:root .hy-checks--2{grid-template-columns:minmax(0,1fr)}:root .hy-checks--2 li:nth-child(2){border-top:1px solid var(--b-line)}}
:root .hy-check-list .hy-tick{background:var(--b-raised);color:var(--b-ink)}

/* --- guide steps and split rhythm on the SEO pages ---------------------------------------- */
:root .hy-seo-page .hy-section--tight.hy-seo-block{padding-block:48px}
:root .hy-seo-page .hy-section--tight.hy-seo-block :is(.hy-sec-head,.hy-section__head){margin-bottom:24px}
:root .hy-seo-step :is(.hy-sec-title,.hy-section__title,.hy-cm-split__title,h2){font-size:clamp(26px,2.6vw,34px);line-height:1.1;letter-spacing:-.03em}
:root .hy-seo-step__no{display:inline-grid;place-items:center;min-width:32px;height:32px;padding:0 6px;border-radius:var(--b-r-tag);background:var(--b-band);font:400 12px var(--b-mono);color:var(--b-ink)}
:root .hy-section--band .hy-seo-step__no{background:var(--b-card)}
:root .hy-cm-split.hy-section--tight + .hy-cm-split.hy-section--tight{padding-top:0}
@media (min-width:1181px){:root .hy-cm-split__head{position:sticky;top:calc(var(--hy-nav,64px) + 32px)}}

/* --- tool chips: an "also" chip with a logo mark (replaces the .hy-seo-tools tiles) -------- */
:root .hy-also > :has(> .home-logo){gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--b-line-2);border-radius:var(--b-r-ctl);background:var(--b-card);font:500 14px/1 var(--b-font);color:var(--b-ink)}
:root .hy-also > :has(> .home-logo) .home-logo{flex:none;width:16px;height:16px}
:root .hy-section--band .hy-also > :has(> .home-logo){background:var(--b-card)}
:root .hy-also > a:has(> .home-logo):hover{background:var(--b-band)}

/* --- labels, badges, tabs, trust prose ------------------------------------------------------ */
:root .hy-label.hy-label--accent{background:var(--b-band);color:var(--b-ink)}
:root .hy-label.hy-label--accent b{color:var(--b-ink)}
:root .hy-section--band .hy-label.hy-label--accent{background:var(--b-card)}
:root .hy-badge.hy-badge--accent{background:var(--b-band);color:var(--b-ink)}
:root .sv-tabs[role=tablist]{padding:3px;gap:2px;border-radius:var(--b-r-ctl);background:var(--b-band)}
:root .sv-tab{border-radius:var(--b-r-tag);color:var(--b-muted)}
:root .sv-tab:hover{color:var(--b-ink)}
:root .sv-tab.on{background:var(--b-ink);color:var(--b-paper)}
:root .sv-panel{margin-inline:auto}
:root .prose-trust :is(h2,h3){font-weight:var(--b-head-weight)}
:root .prose-trust h2{font-size:clamp(21px,1.9vw,25px);letter-spacing:-.03em}
:root .hy-layer-page__related{padding-top:0;border-top:0}

/* --- x-site.document rail: "On this page" beside the text ----------------------------------- */
:root .hy-doc__grid{display:grid;grid-template-columns:minmax(0,880px) 240px;justify-content:space-between;gap:56px;align-items:start}
:root .hy-doc__grid > .hy-doc__body{max-width:880px}
:root .hy-doc__rail{position:sticky;top:calc(var(--hy-nav,64px) + 32px)}
:root .hy-doc__railhead{margin:0 0 12px}
:root .hy-doc__toc{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;margin:0;padding-left:16px;border-left:1px solid var(--b-line)}
:root .hy-doc__toc > li{display:block;padding:0;background:none;border-radius:0}
/* 4 Nov 2026: a plain reading list instead of a stack of chips */
:root .hy-doc__toc > li > a,:root .hy-doc__rail a{display:block;padding:8px 0;background:none;border-radius:0;font:400 14px/1.45 var(--b-font);letter-spacing:0;color:var(--b-muted);text-decoration:none;transition:color var(--ease-t) var(--ease)}
:root .hy-doc__toc > li > a:hover,:root .hy-doc__rail a:hover,:root .hy-doc__rail a:is(.is-on,[aria-current]){background:none;color:var(--b-ink)}
:root .hy-doc__rail a :is(.hy-mono,b,span:first-child:not(:only-child)){font:400 12px var(--b-mono);color:inherit}
@media (max-width:1099px){:root .hy-doc__grid{display:block}:root .hy-doc__rail{display:none}}
/* --- scroll reveal moves, it never hides: opacity stays 1 (brand-motion.js) ---------------- */
html.hy-motion .hy-rv{opacity:1;transition:transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--rv-i,0) * 80ms)}
/* end service and SEO pages */

/* Shared reading map for long SEO pages. Links reuse the original section anchors. */
:root .hy-seo-index{margin-block:40px 0;padding-block:24px;border-top:1px solid var(--b-line);border-bottom:1px solid var(--b-line)}
:root .hy-seo-index>p{margin:0 0 16px}
:root .hy-seo-index ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 28px;list-style:none;margin:0;padding:0}
:root .hy-seo-index a{display:flex;align-items:baseline;gap:10px;font-size:14px;line-height:1.45;color:var(--b-ink-2);text-decoration:none}
:root .hy-seo-index a>span{flex:none;font:400 11px var(--b-mono);color:var(--b-muted)}
:root .hy-seo-index a:hover{color:var(--b-accent)}
:root .hy-seo-index a:focus-visible{outline:2px solid var(--b-accent);outline-offset:4px}
:root .hy-seo-route .hy-cell__vis{padding-top:0}
:root .hy-seo-route .home-route{max-width:880px;margin-inline:auto}
:root .hy-seo-block[id],:root .hy-seo-group [id]{scroll-margin-top:calc(var(--hy-nav,64px) + 24px)}
@media(max-width:900px){:root .hy-seo-index ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){:root .hy-seo-index{margin-top:28px}:root .hy-seo-index ol{grid-template-columns:minmax(0,1fr)}}

/* Article, reference and team components on the shared brand layer. */
/* code-changelog */
:root body .hy-doc-page .hy-chapter--hero .hy-chapter__before{display:flex;justify-content:center}
    :root body .hy-cl-release{display:grid;grid-template-columns:200px minmax(0,1fr);gap:8px 40px;padding:32px 0;border-top:1px solid var(--b-line)}
    :root body .hy-cl-release:last-child{border-bottom:1px solid var(--b-line)}
    :root body .hy-cl-release__head h2{margin:0;font-size:20px;line-height:1.3}
    :root body .hy-cl-release__body > :first-child{margin-top:0}
    :root body .hy-cl-release__body h3{margin-top:20px;font-size:16px}
    :root body .hy-cl-release__body > h3:first-child{margin-top:0}
    @media (max-width:720px){:root body .hy-cl-release{grid-template-columns:minmax(0,1fr);padding:24px 0}}
/* faq */
:root body .hy-faq-page .hy-chapter__aside > .hy-actions{flex-direction:column;align-items:center;gap:28px}
    :root body .hy-faq-toc{display:flex;flex-direction:column;align-items:center;gap:12px}
    :root body .hy-faq-toc .hy-faq-toc__title{margin:0}
    :root body .hy-faq-toc .hy-chips{justify-content:center;margin:0}
    :root body .hy-faq-group + .hy-faq-group{padding-top:0}
    :root body .hy-faq-group + .hy-faq-group > .hy-wrap{padding-top:56px;border-top:1px solid var(--b-line)}
/* news-item */
:root body .hy-news-article .hy-chapter--hero .hy-chapter__before{display:flex;justify-content:center}
    :root body .hy-news-article .hy-readcol{margin-inline:auto}
/* vacatures */
:root body .hy-careers__hero{padding-bottom:96px}
    :root body .hy-careers__crew{justify-content:center;margin-top:0}
    @media (max-width:720px){:root body .hy-careers__hero{padding-bottom:64px}}
    :root body .hy-careers__crew .hy-team__note{margin:0;color:var(--b-muted)}
    :root body .hy-careers__open{padding:0;border:0;background:none;cursor:pointer;font:inherit;text-align:left}
    :root body .hy-careers__cell .hy-cell__vis{justify-content:flex-end}

/* Reusable product-page blocks: one explanation, one visual, no enclosing dashboard card.
   x-site.product-story, product-router, product-art and product-benefit. */
:root .hy-product-story{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:center}
:root .hy-product-story__copy,:root .hy-product-story__media{min-width:0}
:root .hy-product-story__copy .hy-sec-head{margin:0 0 24px}
:root .hy-product-story__copy > p,:root .hy-product-story__copy .prose-site{font-size:17px;line-height:1.65;color:var(--b-ink-2)}
:root .hy-product-story__copy > p + p{margin-top:16px}
:root .hy-product-story__copy > .hy-cap{margin-top:28px;font-size:13px;color:var(--b-muted)}
:root .hy-product-story__copy > .hy-also{margin-top:12px}
:root .hy-product-story__copy .hy-sec-title{font-size:clamp(30px,3.3vw,44px);line-height:1.08}
:root .hy-product-story--reverse .hy-product-story__media{order:-1}
:root .hy-product-story__media > .hy-product-art{min-height:340px}
:root .hy-product-story__media > .hy-product-art + img{display:block;width:min(100%,340px);height:auto;margin:28px auto 0;border-radius:var(--b-r-card)}
:root .hy-product-demo{margin-top:40px;min-width:0}
:root .hy-product-demo:not(:has(*)){display:none}
:root .hy-product-demo > .home-models,:root .hy-product-demo > .home-sizer{margin:0}
:root .hy-product-demo .hy-duo{align-items:start}
:root .hy-product-demo .hy-win{min-width:0}
:root .hy-product-demo .home-tools{margin-top:24px}
:root .hy-product-router{padding:28px;background:var(--b-card);border:1px solid var(--b-line-2);border-radius:var(--b-r-panel);font-variant-numeric:tabular-nums}
:root .hy-product-router__caption{display:flex;align-items:center;gap:12px;margin:0 0 24px;font-size:14px;color:var(--b-muted)}
:root .hy-product-router .hy-tabs__list{display:flex;width:100%;margin-bottom:8px}
/* the team tabs are the shared segmented control (the homepage hero tabs): a band track, the
   selected team an ink pill; the square underline is gone (taste audit A5, 5 Nov 2026) */
:root .hy-product-router .hy-tabs__tab{flex:1;justify-content:center;padding:7px 12px;font-size:14px;white-space:normal;text-align:center}
:root .hy-product-router .hy-tabs__tab:focus-visible{outline:2px solid var(--b-accent);outline-offset:1px}
:root .hy-product-router .hy-tabs__panel{padding:0}
:root .hy-product-router .hy-tabs__panel[hidden]{display:none}
:root .hy-product-router__body{padding-top:28px}
:root .hy-product-router__label{margin:0 0 8px;font-size:15px;color:var(--b-muted)}
:root .hy-product-router__amount{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 12px;margin:0;color:var(--b-muted);font-size:18px}
:root .hy-product-router__amount strong{font:600 clamp(32px,3vw,44px)/1.1 var(--b-font);letter-spacing:var(--b-track);color:var(--b-ink)}
:root .hy-product-router__meter{height:8px;margin-top:20px;border-radius:var(--b-r-px);background:var(--b-band);overflow:hidden}
:root .hy-product-router__meter i{display:block;width:min(var(--used),100%);height:100%;background:var(--b-accent)}
:root .hy-product-router__used{margin:10px 0 24px;font-size:13px;color:var(--b-muted)}
:root .hy-product-router__rules{margin:0;font-size:16px;line-height:1.45}
:root .hy-product-router__rules > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:20px;padding:14px 0;border-top:1px solid var(--b-line)}
:root .hy-product-router__rules dt{font-weight:400;color:var(--b-muted)}
:root .hy-product-router__rules dd{margin:0;color:var(--b-ink);text-align:right}
:root .hy-product-router__models{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px 16px}
:root .hy-product-router__models span{display:inline-flex;align-items:center;gap:6px;font-size:14px}
:root .hy-product-router__models .home-logo{flex:none}
:root .hy-product-details{border-top:1px solid var(--b-line);margin-top:8px}
:root .hy-product-details summary{display:flex;align-items:center;gap:12px;min-height:48px;padding:12px 0;list-style:none;cursor:pointer;font-size:14px;color:var(--b-ink)}
:root .hy-product-details summary::-webkit-details-marker{display:none}
:root .hy-product-details summary > span:first-child{color:var(--b-muted)}
:root .hy-product-details summary > span:last-child{margin-left:auto;font-size:20px;transition:transform .2s ease}
:root .hy-product-details[open] summary > span:last-child{transform:rotate(45deg)}
:root .hy-product-details summary:focus-visible{outline:2px solid var(--b-accent);outline-offset:2px}
:root .hy-product-details pre{margin:4px 0 0;padding:20px;border-radius:var(--b-r-ctl);background:var(--b-band);color:var(--b-ink);font:400 13px/1.8 var(--b-mono);white-space:pre-wrap;overflow-wrap:anywhere}
:root .hy-product-details code{font:inherit;color:inherit}
:root .hy-product-benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 24px}
:root .hy-product-benefits--three{grid-template-columns:repeat(3,minmax(0,1fr))}
:root .hy-product-benefit{min-width:0}
:root .hy-product-benefit > h3{margin:24px 0 12px;font:600 clamp(22px,2vw,26px)/1.18 var(--b-font);letter-spacing:-.03em;color:var(--b-ink)}
:root .hy-product-benefit > p,:root .hy-product-benefit > .prose-site{margin:0;font-size:17px;line-height:1.6;color:var(--b-ink-2)}
:root .hy-product-art{display:grid;place-items:center;min-width:0;min-height:220px;padding:32px;background:var(--b-band);border-radius:var(--b-r-card);color:var(--b-ink);overflow:hidden}
:root .hy-section--band .hy-product-art{background:var(--b-card)}
:root .hy-product-art .home-logo{flex:none}
:root .hy-product-art__budgets{display:grid;gap:20px;width:100%;max-width:440px}
:root .hy-product-art__budgets > div{display:grid;grid-template-columns:80px 1fr 40px;gap:16px;align-items:center;font-size:14px}
:root .hy-product-art__budgets strong{font-weight:500;text-align:right}
:root .hy-product-art__budgets i{height:12px;background:var(--b-raised);border-radius:var(--b-r-px);overflow:hidden}
:root .hy-product-art__budgets b{display:block;height:100%;width:min(var(--used),100%);background:var(--b-accent)}
:root .hy-product-art__privacy{width:100%;max-width:460px}
:root .hy-product-art__privacy p{margin:0;font-size:15px;line-height:1.5}
:root .hy-product-art__privacy p > span{display:block;margin-bottom:6px;font-size:13px;color:var(--b-muted)}
:root .hy-product-art__privacy > i{display:block;margin:10px 0;font-style:normal;color:var(--b-accent);font-size:24px}
:root .hy-product-art mark{padding:1px 4px;background:var(--b-accent);color:var(--b-card);border-radius:var(--b-r-px)}
:root .hy-product-art__code{display:grid;justify-items:center;gap:24px;width:100%}
:root .hy-product-art__tools{display:flex;align-items:center;gap:28px}
:root .hy-product-art__code p{max-width:100%;margin:0;padding:18px 20px;background:var(--b-ink);border-radius:var(--b-r-ctl);color:var(--b-paper)}
:root .hy-product-art__code code{font:400 14px/1.5 var(--b-mono);white-space:pre-wrap;overflow-wrap:anywhere;color:inherit}
:root .hy-product-art__code code > span{color:var(--b-ink-mute)}
:root .hy-product-art__code > span{font-size:13px;color:var(--b-muted);text-align:center}
:root .hy-product-art__models{display:grid;justify-items:center;width:100%}
:root .hy-product-art__hub{display:flex;align-items:center;gap:10px;font-weight:600;font-size:18px}
:root .hy-product-art__connector{height:32px;width:1px;background:var(--b-line-2)}
:root .hy-product-art__modelrow{display:flex;justify-content:center;gap:12px;width:100%;padding-top:20px;border-top:1px solid var(--b-line-2)}
:root .hy-product-art__modelrow > span{display:grid;justify-items:center;gap:12px;flex:1;min-width:0;font-size:14px}
:root .hy-product-art__cache{display:grid;justify-items:center;gap:18px;width:100%;max-width:360px;font:400 13px/1.4 var(--b-mono)}
:root .hy-product-art__cache > span,:root .hy-product-art__speed > span{font:500 15px var(--b-font);color:var(--b-muted)}
:root .hy-product-art__cache > div{display:grid;grid-template-columns:24px minmax(0,1.3fr) minmax(0,1fr);gap:8px;width:100%;align-items:center}
:root .hy-product-art__cache small{font-size:13px;color:var(--b-muted)}
:root .hy-product-art__cache b,:root .hy-product-art__cache i{padding:10px 8px;font-weight:400;font-style:normal;border-radius:var(--b-r-px);background:var(--b-raised);text-align:center}
:root .hy-product-art__cache b{background:var(--b-accent);color:var(--b-card)}
:root .hy-product-art__cache svg{width:75%;height:24px;stroke:var(--b-accent);stroke-width:1.5}
:root .hy-product-art__speed{display:grid;gap:20px;width:100%;max-width:340px}

:root .hy-product-art__speed .hy-product-art__tokens{display:flex;align-items:center;gap:8px;height:64px}
:root .hy-product-art__tokens i{width:48px;height:48px;background:var(--b-raised);border-radius:var(--b-r-px)}
:root .hy-product-art__tokens b{flex:1;height:32px;background:var(--b-accent);border-radius:var(--b-r-px)}
:root .hy-product-art__tokens > span{padding-inline:8px;font-size:24px;color:var(--b-muted)}
:root .hy-product-art__bench{display:grid;justify-items:center;gap:16px;width:100%;max-width:320px}
:root .hy-product-art__bench > svg{width:80px;height:80px;stroke:var(--b-accent);stroke-width:1.5}
:root .hy-product-art__bench > span{font-size:24px;font-weight:600}
:root .hy-product-art__bench > div{display:flex;justify-content:space-between;width:100%;font-size:13px;color:var(--b-muted)}
:root .hy-product-art__speed > div{display:flex;justify-content:space-between;color:var(--b-muted);font-size:13px}
:root .hy-product-art__document{position:relative;width:126px;height:170px;padding:24px 20px;border:1px solid var(--b-line-2);border-radius:var(--b-r-ctl);background:var(--b-paper)}
:root .hy-product-art__document > span{font-size:22px;font-weight:600}
:root .hy-product-art__document > i{display:block;width:100%;height:2px;margin-top:14px;background:var(--b-line-2)}
:root .hy-product-art__document > i:nth-last-child(2){width:60%}
:root .hy-product-art__document > b{position:absolute;right:16px;bottom:12px;font-size:28px;color:var(--b-accent)}
:root .hy-product-art__shield{display:grid;justify-items:center;gap:20px}
:root .hy-product-art__shield svg{height:120px;stroke:var(--b-accent);stroke-width:1.5}
:root .hy-product-art__shield code{font:400 13px var(--b-mono);color:var(--b-muted)}
:root .hy-product-art__stack{display:grid;width:100%;max-width:300px;gap:14px}
:root .hy-product-art__stack > span{display:flex;align-items:center;gap:16px;font-size:17px}
:root .hy-product-art__stack i{width:54px;height:10px;border-radius:var(--b-r-px);background:var(--b-accent)}
:root .hy-product-art__stack > span:nth-child(even) i{width:80px}
:root .hy-product-proof-shot{margin:48px 0 0;overflow:hidden;border-radius:var(--b-r-card);border:1px solid var(--b-line-2)}
:root .hy-product-proof-shot img{display:block;width:100%;height:auto}
:root .hy-product-proof-shot figcaption{padding:16px 20px;background:var(--b-card);font-size:14px;color:var(--b-muted)}
/* Product and SEO pages keep code, tables and diagrams directly on the page, not in a
   visual-only cell that adds another title gap and border around a complete component. */
:root .hy-subpage .hy-cell:has(> .hy-cell__text:not(:has(*))){border:0;background:none;border-radius:0;overflow:visible}
:root .hy-subpage .hy-cell:has(> .hy-cell__text:not(:has(*))) > .hy-cell__vis{padding:0}
:root .hy-subpage .hy-cell__vis > .hy-win{margin:0}
:root .hy-subpage .hy-cell__vis > .hy-product-art{margin:0}
:root .hy-subpage .hy-cell__p,:root .hy-subpage .hy-cell__text > p:not(.hy-cell__tag,.hy-cap,.hy-cell__title){font-size:16px;line-height:1.6}
@media(max-width:1000px){
  :root .hy-product-story{grid-template-columns:1fr;gap:36px}
  :root .hy-product-story__copy{max-width:760px}
  :root .hy-product-story--reverse .hy-product-story__media{order:initial}
  :root .hy-product-story__media{width:100%}
  :root .hy-product-story__media > .hy-product-art{min-height:280px}
  :root .hy-product-benefits--three{grid-template-columns:1fr}
}
@media(max-width:600px){
  :root .hy-product-story{gap:28px}
  :root .hy-product-story__copy > p,:root .hy-product-story__copy .prose-site{font-size:16px}
  :root .hy-product-router{padding:20px 16px}
  :root .hy-product-router .hy-tabs__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  :root .hy-product-router .hy-tabs__tab{font-size:13px}
  :root .hy-product-router__rules > div{gap:12px;font-size:15px}
  :root .hy-product-router__models{gap:10px}
  :root .hy-product-router__models span{font-size:13px}
  :root .hy-product-benefits{grid-template-columns:1fr;gap:40px}
  :root .hy-product-benefit > p,:root .hy-product-benefit > .prose-site{font-size:16px}
  :root .hy-product-art{padding:24px;min-height:210px}
  :root .hy-product-art__budgets > div{grid-template-columns:72px 1fr 36px;gap:10px}
  :root .hy-product-demo{margin-top:36px}
  :root .hy-product-proof-shot{margin-top:36px}
  :root .hy-product-details pre{padding:16px 12px}
}
@media(prefers-reduced-motion:reduce){:root .hy-product-details summary > span:last-child{transition:none}}

/* Shared card alignment: media tracks and action baselines do not depend on copy length. */
:root .hy-product-benefits > .hy-product-benefit > .hy-product-art{height:260px;min-height:260px}
:root .hy-layer-cell .hy-cell__text{display:flex;flex-direction:column;flex:1;gap:0}
:root .hy-layer-cell .hy-cell__title{margin-top:0;font-size:25px;min-height:30px}
:root .hy-layer-cell .hy-cell__p{margin-top:16px}
:root .hy-layer-cell .hy-cell__text > .hy-more{margin-top:auto;padding-top:28px;align-self:flex-start}
:root .hy-subpage .hy-also li,:root .hy-subpage .hy-cell__tag,:root .hy-subpage .hy-cell__tag span{font-size:13px}
:root .hy-subpage .hy-also a{min-height:28px;display:inline-flex;align-items:center;font-size:13px}
@media(max-width:600px){:root .hy-product-benefits > .hy-product-benefit > .hy-product-art{height:auto;min-height:240px}}

/* Flatter homepage artwork: preserve the compositions and pixel language, reduce depth. */
:root .hy-home-c .plan__art{border-radius:var(--b-r-ctl)}
:root .hy-home-c .term__tabs{background:none}
:root .hy-home-c .pa-marks i{border-radius:var(--b-r-px);background:var(--b-paper)}
:root .hy-home-c .pa-marks i.on{background:var(--b-ink);transform:none}
:root .hy-home-c .pa-teams{gap:24px;padding:0 32px}
:root .hy-home-c .pa-team{grid-template-columns:minmax(0,1fr) 24px;gap:8px 16px;padding:0;border-radius:0;background:none}
:root .hy-home-c .pa-team__txt b{font-size:14px;line-height:1.4}
:root .hy-home-c .pa-team__model{width:24px;height:24px;background:none;border-radius:0}
:root .hy-home-c .pa-team__meter{background:var(--b-raised-h)}
:root .hy-home-c .pa-team__meter i{transform:scaleX(var(--fill));transition:none}
/* The private-compute drawing uses one connection and two short captions. */
:root .hy-private-compute-art{display:grid;justify-items:center;gap:8px;width:100%;padding:0 24px;color:var(--b-ink)}
:root .hy-private-compute-art > span{font:500 14px/1.4 var(--b-font);text-align:center}
:root .hy-private-compute-art > svg{display:block;width:240px;max-width:100%;height:156px}
:root .hy-private-compute-art__ink{stroke:var(--b-ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
:root .hy-private-compute-art__connection{stroke:var(--b-accent);stroke-width:1.5}
:root .hy-private-compute-art__lock{stroke:var(--b-accent);stroke-width:1.5;stroke-linejoin:round}
:root .hy-private-compute-art__rack{fill:var(--b-card);stroke:var(--b-line-2);stroke-width:1.5}
:root .hy-private-compute-art__lights{fill:var(--b-accent)}
:root .hy-private-compute-art__idle{fill:var(--b-raised-h)}
:root .hy-home-c .today__row .home-logo{background:none;padding:0;border-radius:0;width:16px;height:16px}
:root .hy-home-c .cx__sheet,:root .hy-home-c .pii{border-radius:var(--b-r-ctl)}
:root .hy-home-c .cx__rows dd,:root .hy-home-c .cx__cmd{border-radius:var(--b-r-px);background:var(--b-paper)}
:root .hy-home-c .ftx__k,:root .hy-home-c .ftx__k i{border-radius:var(--b-r-px)}
:root .hy-home-c .ftx__loes{border-radius:var(--b-r-ctl)}
:root .hy-home-c .bench__bar{height:8px}
:root .hy-home-c .bench__rows li{grid-template-columns:140px minmax(0,1fr);font-family:var(--b-font)}
@media(max-width:600px){:root .hy-home-c .bench__rows li{grid-template-columns:128px minmax(0,1fr)}}

/* Content rhythm: keep the original openings and illustrations, bring related content
   closer, and give card interiors one consistent inset. All values follow the 8px grid. */
:root{--b-content-sec:96px;--b-content-gap:40px}
:root .hy-section:not(.hy-hero,.hy-section--tight,.hy-section--minor){--hy-section-pad:var(--b-content-sec)}
:root .hy-section:not(.hy-hero,.hy-section--tight,.hy-section--minor) > .hy-wrap > :is(.hy-sec-head,.hy-section__head){margin-bottom:var(--b-content-gap)}
:root .hy-home-c .layers{padding-block:var(--b-content-sec)}
:root .hy-home-c :is(.plans,.lab,.close){padding-top:var(--b-content-sec)}
:root .hy-home-c :is(.layers,.plans,.lab) > .wrap > .hy-sec-head{margin-bottom:var(--b-content-gap)}
:root :is(.hy-bento,.hy-layers):has(> .hy-layer-cell){grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
:root :is(.hy-bento,.hy-layers) > .hy-layer-cell{grid-column:auto}
@media(max-width:1000px){
  :root :is(.hy-bento,.hy-layers):has(> .hy-layer-cell){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  :root{--b-content-sec:64px;--b-content-gap:32px}
  :root .hy-bento{gap:16px}
  :root .hy-cell__text{padding:24px}
  :root .hy-cell__vis{padding:0 24px 24px}
  :root .hy-product-story{gap:32px}
  :root .hy-product-demo,:root .hy-product-proof-shot{margin-top:32px}
}
@media(max-width:600px){
  :root :is(.hy-bento,.hy-layers):has(> .hy-layer-cell){grid-template-columns:1fr;gap:16px}
}

/* Plan art glyph (4 Nov 2026): the private compute rows use an ink mark where the other rows show a model logo. */
:root .hy-home-c .pa-glyph{color:var(--b-ink)}
:root .hy-home-c .pa-glyph svg{display:block;width:20px;height:20px}

/* ===================================================================== */
/* 10. Final design pass on the subpages (4 Nov 2026)                    */
/* ===================================================================== */
/* One rhythm, open figures, plain reading lists, open tables and quiet code windows on every
   page that is not the option C homepage. Layout and styling only: no copy, heading or link
   changes. Rules that the homepage also matches are scoped with body:not(.hy-home-c). */

/* --- rhythm: one hero top, a tighter tail after the page's own content ------------------- */
:root :is(.hy-section.hy-hero,.hy-chapter--hero,.hy-section.hy-lp-hero){padding-top:72px}
@media (max-width:720px){:root :is(.hy-section.hy-hero,.hy-chapter--hero,.hy-section.hy-lp-hero){padding-top:40px}}
/* a prose-only split (head left, text right) needs less air than a block with a product in it */
:root .hy-seo-page .hy-section.hy-cm-split:not(.hy-section--tight):not(:has(.hy-bento,.hy-product-art,table,.hy-win,.hy-faq)){padding-block:64px}
/* the shared SEO tail (figures, steps, audiences, models, layers, related) after the FAQ */
:root .hy-seo-page .hy-section:has(.hy-faq) ~ .hy-section:not(.hy-close){padding-block:64px}
:root .hy-seo-page .hy-section:has(.hy-faq) ~ .hy-section:not(.hy-close) > .hy-wrap > .hy-section__head{margin-bottom:32px}
:root body:not(.hy-home-c) .hy-close{padding:var(--b-content-sec) 0}
@media (max-width:560px){
  :root .hy-seo-page .hy-section.hy-cm-split:not(.hy-section--tight):not(:has(.hy-bento,.hy-product-art,table,.hy-win,.hy-faq)),
  :root .hy-seo-page .hy-section:has(.hy-faq) ~ .hy-section:not(.hy-close){padding-block:48px}
}

/* --- bands: a hairline where the surface changes ----------------------------------------- */
:root .hy-section--band{border-top:1px solid var(--b-line);border-bottom:1px solid var(--b-line)}
:root .hy-section--band + .hy-section--band{border-top:0}
:root .hy-section--band + .hy-foot,:root .hy-section--band:last-child{border-bottom:0}

/* --- titles: the title scale tracks at -0.03em; -0.045em stays on the homepage display ---- */
:root .hy-seo-hero .hy-sec-title{font-size:var(--b-t-title)}
:root .hy-subpage .hy-h1,:root .hy-subpage .hy-lp-hero .hy-sec-title,:root .hy-seo-hero :is(h1.hy-sec-title,.hy-sec-head h1),
:root .hy-doc-page .hy-h1{letter-spacing:-.03em}

/* --- documents: a reading measure and a calmer heading scale ------------------------------ */
:root .hy-doc__body > :is(p,ul,ol){max-width:68ch;font-size:17px;line-height:1.65;color:var(--b-ink-2)}
:root .hy-doc__body > p{margin:0 0 18px}
:root .hy-doc__body h2{font-size:clamp(26px,2.6vw,34px);line-height:1.12;margin:64px 0 20px;letter-spacing:-.03em}
:root .hy-doc__body h3{font-size:20px;line-height:1.3;margin:36px 0 12px;letter-spacing:-.02em}
:root .hy-doc__body > h2:first-child,:root .hy-doc__body > .hy-doc__meta + h2{margin-top:0}
@media (max-width:560px){:root .hy-doc__body > :is(p,ul,ol){font-size:16px}:root .hy-doc__body h2{margin-top:48px}}

/* --- reading map of the SEO pages: the hairlines follow the content column --------------- */
:root .hy-seo-index.hy-seo-index{position:relative;border:0}
:root .hy-seo-index::before,:root .hy-seo-index::after{content:"";position:absolute;left:var(--hy-sx,32px);right:var(--hy-sx,32px);height:1px;background:var(--b-line)}
:root .hy-seo-index::before{top:0}
:root .hy-seo-index::after{bottom:0}
:root .hy-seo-index a{min-height:36px;align-items:center}

:root :is(.prose-table,.hy-table-wrap,.hy-doc__body) thead th,
:root :is(.prose-site,.prose-trust) .prose-table thead th{font-size:12px}
:root :is(.prose-table,.hy-table-wrap,.hy-doc__body) tbody td{font-variant-numeric:tabular-nums}
:root :is(.prose-table,.hy-table-wrap,.hy-doc__body) :is(th,td).is-num{text-align:right}
:root .prose-table td:first-child code{white-space:nowrap}
/* key and value tables never need a sideways scroll */
:root :is(.hy-table-wrap,.prose-table) table.mp-table,:root table.hy-table--kv{min-width:0}
@media (max-width:640px){
  :root .prose-table:has(> .hy-table--stack){overflow-x:visible}
  :root .prose-table table.hy-table--stack{min-width:0}
  :root .prose-table .hy-table--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  :root .prose-table .hy-table--stack,:root .prose-table .hy-table--stack :is(tbody,tr,td,th){display:block;width:auto}
  :root .prose-table .hy-table--stack tbody tr{padding:14px 0;border-top:1px solid var(--b-line)}
  :root .prose-table .hy-table--stack tbody tr:first-child{border-top:0}
  :root :is(.prose-table,.hy-table-wrap) .hy-table--stack tbody :is(td,th){height:auto;padding:3px 0;border:0;text-align:left;white-space:normal}
  :root :is(.prose-table,.hy-table-wrap) .hy-table--stack tbody td:empty{display:none}
  :root :is(.prose-table,.hy-table-wrap) .hy-table--stack tbody td[data-label]{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;align-items:baseline}
  :root :is(.prose-table,.hy-table-wrap) .hy-table--stack tbody td[data-label]::before{content:attr(data-label);display:block;margin:0;font:400 11px/1.4 var(--b-mono);color:var(--b-muted)}
  :root .hy-table--stack :is(th,td).is-num,:root .hy-dash-table.hy-table--stack .is-num{text-align:left}
  /* a wide prose table that still scrolls shows that it continues */
  :root .prose-table:not(:has(.hy-table--stack)){-webkit-mask-image:linear-gradient(to right,#000 85%,transparent);mask-image:linear-gradient(to right,#000 85%,transparent)}
}

/* --- cells: links, lists, a link that sits at the foot ----------------------------------- */
:root .hy-cell__text a:not(.hy-more):not(.hy-btn):not(.hy-also a),:root .hy-cell__text p a{color:var(--b-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
:root :is(.prose-site,.prose-trust,.hy-doc__body,.hy-faq__a) a:not(.hy-btn):not(.hy-more){text-decoration-thickness:1px;text-underline-offset:3px}
:root .hy-cell__text :is(ul,ol):not([class]){list-style:none;margin:12px 0 0;padding:0}
:root .hy-cell__text :is(ul,ol):not([class]) > li{position:relative;margin:0;padding:8px 0 8px 18px;border-top:1px solid var(--b-line);font-size:14.5px;line-height:1.5;color:var(--b-ink-2)}
:root .hy-cell__text :is(ul,ol):not([class]) > li::before{content:"";position:absolute;left:0;top:15px;width:7px;height:7px;margin:0;border-radius:var(--b-r-tick);background:var(--b-accent)}
:root body:not(.hy-home-c) .hy-cell__text{display:flex;flex-direction:column}
:root body:not(.hy-home-c) .hy-cell__text:not(:has(*)){display:none}
:root body:not(.hy-home-c) .hy-cell__text > .hy-more:last-child{margin-top:auto;padding-top:16px;align-self:flex-start}

/* --- cell titles: a feature title at 25, a compact title at 17 in a row of four ---------- */
:root .hy-cell__text > p.hy-cell__title{margin:0;max-width:none}
:root .hy-bento--4 > .hy-cell:not(.hy-layer-cell) .hy-cell__title,
:root .hy-seo-page .hy-bento:not(.hy-seo-figures,.hy-bento--steps):has(> .hy-cell:nth-child(4):last-child) > .hy-cell:not(.hy-layer-cell) .hy-cell__title{font-size:17px;line-height:1.3;letter-spacing:-.015em}
:root .hy-seo-page .hy-bento:not(.hy-seo-figures,.hy-bento--steps):has(> .hy-cell:nth-child(3):last-child) > .hy-cell:not(.hy-cell--stat,.hy-layer-cell) p.hy-cell__title{font-size:20px;line-height:1.25;letter-spacing:-.02em}

/* --- figures: three or four open columns, the figure first, the label under it ----------- */
:root .hy-seo-figures{gap:32px}
:root .hy-seo-figures > .hy-cell,:root .hy-section--band .hy-seo-figures > .hy-cell{background:none;border:0;border-top:1px solid var(--b-line-2);border-radius:0;overflow:visible}
:root .hy-seo-figures > .hy-cell > .hy-cell__text{padding:24px 0 0}
:root .hy-seo-figures .hy-cell__tag{order:1;margin:12px 0 0;font-size:13px}
:root .hy-seo-figures .hy-cell__p{order:2}
:root :is(.hy-cell--stat,.hy-seo-figures .hy-cell) .hy-cell__title{font-size:clamp(36px,3.4vw,48px);line-height:1;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--b-ink)}
:root .hy-subpage :is(.hy-cell--stat,.hy-seo-figures .hy-cell) .hy-cell__p{margin-top:12px;font-size:15px;line-height:1.55}
:root .hy-seo-figures .hy-cell__tag + .hy-cell__p{margin-top:8px}

/* --- steps: an open numbered sequence ----------------------------------------------------- */
:root .hy-bento--steps{gap:32px}
:root .hy-bento--steps > .hy-cell,:root .hy-section--band .hy-bento--steps > .hy-cell{background:none;border:0;border-top:1px solid var(--b-line-2);border-radius:0;overflow:visible}
:root .hy-bento--steps > .hy-cell > .hy-cell__text{padding:24px 0 0}
:root .hy-bento--steps .hy-cell__title{font-size:25px}
@media (max-width:900px){:root :is(.hy-seo-figures,.hy-bento--steps){grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}:root :is(.hy-seo-figures,.hy-bento--steps) > .hy-cell{grid-column:auto}}
@media (max-width:720px){:root .hy-bento--steps{grid-template-columns:minmax(0,1fr)}}
@media (max-width:420px){:root .hy-seo-figures{grid-template-columns:minmax(0,1fr)}}

/* --- illustration panels: the drawing owns the panel -------------------------------------- */
:root .hy-product-art{min-height:clamp(260px,28vw,320px)}
:root .hy-product-story__media > .hy-product-art{min-height:288px}
:root .hy-product-art > :is(svg,.hy-win,.hy-product-art__inner){width:min(100%,440px)}
:root .hy-product-art__inner{display:grid;place-items:center}
:root .hy-product-art__modelrow .home-logo,:root .hy-product-art__modelrow img{width:32px;height:32px}
:root .hy-product-art__tools .home-logo,:root .hy-product-art__tools img{width:40px;height:40px}
:root .hy-product-art__wires,:root .hy-product-art__wires path{stroke-width:1.5}
/* in a cell the art is always a tinted well, on the band too */
:root .hy-cell .hy-product-art,:root .hy-section--band .hy-cell .hy-product-art{background:var(--b-band);min-height:200px}
:root .hy-subpage .hy-cell:has(> .hy-cell__text:not(:has(*))) .hy-product-art{min-height:clamp(260px,28vw,320px)}
@media (max-width:600px){:root .hy-product-art{min-height:220px}:root .hy-product-story__media > .hy-product-art{min-height:240px}}

/* --- SEO hero shot: the full width of the column, never cut ------------------------------- */
:root .hy-seo-page .hy-lp-stage__shot img{width:100%;height:auto}
/* a phone gets the narrow card shot (picture source up to 640px): show it whole, not offset */
@media (max-width:640px){
  :root .hy-seo-page .hy-lp-stage__shot{height:auto;aspect-ratio:auto}
  :root .hy-seo-page .hy-lp-stage__shot img{position:static;left:auto}
}

/* --- the current layer among the four ----------------------------------------------------- */
:root .hy-layer-cell.is-on,:root .hy-layer-cell[aria-current]{background:var(--b-band)}
:root .hy-section--band :is(.hy-layer-cell.is-on,.hy-layer-cell[aria-current]){background:var(--b-paper)}

/* --- radii and borders -------------------------------------------------------------------- */
:root .hy-card{border-radius:var(--b-r-card)}
@media (max-width:560px){:root body:not(.hy-home-c) :is(.hy-cell,.hy-faq-group):not(.hy-seo-figures > *,.hy-bento--steps > *){border-radius:var(--b-r-card)}}
:root .hy-code-page :is(.hy-api-card,.hy-api){border-color:var(--b-line-2)}

/* --- callouts, news cards, forms ---------------------------------------------------------- */
:root .hy-notice{padding:20px 24px;background:var(--b-band);border:1px solid var(--b-line);border-radius:var(--b-r-card)}
:root .hy-notice > :is(ul,ol){list-style:none;margin:0;padding:0}
:root .hy-notice > :is(ul,ol) > li::before{content:none}
/* a plain notice carries no marker; ok and error keep their coloured square */
:root .hy-notice:not(.hy-notice--ok,.hy-notice--error)::before{content:none;display:none}
:root .hy-doc__body .hy-doc__notice{padding:20px 24px!important}
:root .hy-doc__body :is(.hy-doc__notice,.hy-doc__panel){border:1px solid var(--b-line)}
:root .hy-doc__body :is(.hy-doc__notice,.hy-doc__panel) > :is(ul,ol):only-child{list-style:none;margin:0;padding:0}
:root .hy-doc__body :is(.hy-doc__notice,.hy-doc__panel) > :is(ul,ol):only-child > li{padding-left:0}
:root .hy-doc__body :is(.hy-doc__notice,.hy-doc__panel) > :is(ul,ol):only-child > li::before{content:none;display:none}
:root .hy-news-card{padding:12px;background:var(--b-card);border:1px solid var(--b-line-2);border-radius:var(--b-r-card)}
:root a.hy-news-card:hover{background:var(--b-band)}
:root .hy-news-card__img{border-radius:var(--b-r-ctl)}
:root .hy-news-card__body{padding:4px 8px 8px}
:root .hy-field__control,:root .hy-foot__form input{background:var(--b-card)!important;border:1px solid var(--b-line-2);outline:0;border-radius:var(--b-r-ctl);min-height:44px}
:root :is(.hy-field__control,.hy-foot__form input):focus{outline:0}
:root :is(.hy-field__control,.hy-foot__form input):focus-visible{outline:2px solid var(--b-accent);outline-offset:2px}
:root .hy-field--invalid .hy-field__control{border-color:var(--hy-danger,#B42318)}
:root .hy-foot__form{gap:6px}
:root .hy-foot__form button{width:44px;min-height:44px;background:var(--b-accent);color:var(--b-on-accent);transition:background-color var(--ease-t) var(--ease)}
:root .hy-foot__form button:hover{background:var(--b-accent-hover)}
:root .hy-foot__form button:focus-visible{outline:2px solid var(--b-accent);outline-offset:2px}

/* --- labels are plain mono; the section head keeps its one chip --------------------------- */
/* a long related-link chip wraps on a phone instead of running out of its column */
:root body:not(.hy-home-c) .hy-also > *{max-width:100%;padding:6px 10px;line-height:1.3;text-wrap:balance}
:root .hy-cap,:root .hy-cell__tag{background:none;padding:0}
:root .hy-seo-toolchips{gap:8px}
:root .hy-seo-toolchips > li,:root .hy-section--band .hy-seo-toolchips > li{min-height:36px;padding:0 12px;border-radius:var(--b-r-ctl);background:var(--b-band);font:500 13px/1.2 var(--b-font);color:var(--b-ink)}
:root .hy-section--band .hy-seo-toolchips > li{background:var(--b-card)}

/* --- the more link: one arrow, from the icon or from ::after ------------------------------ */
:root .hy-more:has(> .hy-icon)::after{content:none}
:root .hy-more .hy-icon{width:16px;height:16px;margin-left:0;flex:none}
:root .hy-more::after{transition-duration:var(--ease-t)}

/* --- code windows: one line per line, scroll sideways when needed ------------------------- */
:root .hy-subpage .hy-win--term .hy-win__body,:root :is(.prose-site,.prose-trust,.hy-subpage) .hy-win.hy-seo-code pre{margin:0;padding:24px;font:400 13.5px/1.7 var(--b-mono);white-space:pre;overflow-x:auto;overflow-wrap:normal;word-break:normal}
:root .hy-subpage .hy-win--term .hy-win__body pre{margin:0;padding:0;font:inherit;white-space:inherit;background:none;border:0}
:root .hy-seo-code{margin:24px 0}
:root .hy-seo-code pre code{padding:0;background:none;font:inherit;color:inherit;white-space:inherit}
:root .hy-subpage .hy-win--term .hy-win__head{font-size:13px}
@media (max-width:640px){
  :root .hy-subpage .hy-win--term .hy-win__body,:root :is(.prose-site,.prose-trust,.hy-subpage) .hy-win.hy-seo-code pre{padding:16px;font-size:13px;-webkit-mask-image:linear-gradient(to right,#000 88%,transparent);mask-image:linear-gradient(to right,#000 88%,transparent)}
}
/* code in prose and in documents: the light window, a hairline and the card fill */
:root :is(.prose-site,.hy-doc__body) pre:not(.hy-win pre){margin:20px 0;padding:20px 24px;background:var(--b-card);border:1px solid var(--b-line-2);border-radius:var(--b-r-card);font:400 12.5px/1.8 var(--b-mono);color:var(--b-ink);white-space:pre;overflow-x:auto;overflow-wrap:normal}
:root :is(.prose-site,.hy-doc__body) pre:not(.hy-win pre) code{padding:0;background:none;border:0;font:inherit;color:inherit}
:root .hy-section--band :is(.prose-site,.hy-doc__body) pre:not(.hy-win pre){background:var(--b-card)}
@media (max-width:640px){:root :is(.prose-site,.hy-doc__body) pre:not(.hy-win pre){padding:16px}}

/* --- savings flow on a phone: one column, app, router, then the three forms --------------- */
@media (max-width:640px){
  :root .sv-flow .cv-wrap{display:flex;flex-direction:column;gap:8px;height:auto!important;aspect-ratio:auto!important;padding:0;overflow:visible;background:none!important}
  :root .sv-flow .cv-svg,:root .sv-flow .cv-tag{display:none}
  :root .sv-flow .cv-node{position:static;inset:auto;transform:none;width:100%;min-width:0;padding:12px 16px;border:1px solid var(--b-line-2);border-radius:var(--b-r-ctl);background:var(--b-card)}
  :root .sv-flow .cv-node .r1{font-size:14px;white-space:normal}
  :root .sv-flow .cv-node .r2{display:block;margin-top:4px;font-size:13px;white-space:normal;color:var(--b-muted)}
  :root .sv-flow :is(.sv-flow__shared,.sv-flow__dedicated,.sv-flow__self){position:relative;width:calc(100% - 20px);margin-left:20px}
  :root .sv-flow :is(.sv-flow__shared,.sv-flow__dedicated,.sv-flow__self)::before{content:"";position:absolute;left:-20px;top:-9px;bottom:50%;width:12px;border-left:1px solid var(--b-line-2);border-bottom:1px solid var(--b-line-2)}
}

/* --- mobile menu -------------------------------------------------------------------------- */
html.is-menu-open,html.is-menu-open body{overflow:hidden}
:root .hd-mtoggle .hd-mtoggle__close{display:none}
:root .hd-mtoggle[aria-expanded="true"] .hd-mtoggle__open{display:none}
:root .hd-mtoggle[aria-expanded="true"] .hd-mtoggle__close{display:block}
:root .hd-mpanel__actions{position:sticky;bottom:0;z-index:1;margin-inline:-16px;padding:12px 16px;background:var(--b-paper);border-top:1px solid var(--b-line)}

/* --- footer ------------------------------------------------------------------------------- */
:root .hy-foot{padding-top:48px}
:root .hy-foot__a{padding:3px 0;line-height:1.3;transition:color var(--ease-t) var(--ease)}
:root .hy-foot__sub{font-size:12px}
:root .hy-foot__bar .hy-foot__legal{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;align-items:baseline;gap:4px 24px}
:root .hy-trust__item,:root .hy-trust__item svg:not(.hy-flag svg){color:var(--b-ink-2)}
@media (max-width:720px){:root .hy-foot__bar .hy-foot__legal{grid-template-columns:minmax(0,1fr)}:root .hy-foot__a{padding:8px 0}}

/* --- motion: one short duration for hover and state, colour only on links ----------------- */
:root .hy-btn{transition:background-color var(--ease-t) var(--ease),color var(--ease-t) var(--ease)}
:root .hy-seg > *,:root .hd-link{transition-duration:var(--ease-t)}
/* end final design pass */

/* Model pages (4 Nov 2026): the curl window keeps one line per line and scrolls sideways; a
   long raw figure in the spec tiles breaks inside its tile instead of running out of it. */
:root .mp-term{min-width:0}
:root .mp-term .hy-win__body{white-space:pre;overflow-x:auto;overflow-wrap:normal;word-break:normal}
:root .mp-stat{min-width:0}
:root .mp-stat b{overflow-wrap:anywhere}
@media (max-width:640px){:root .mp-term .hy-win__body{-webkit-mask-image:linear-gradient(to right,#000 88%,transparent);mask-image:linear-gradient(to right,#000 88%,transparent)}}
/* the line after a check list inside a cell keeps a gap from the last row */
:root .hy-cell .hy-checks-after{margin-top:16px}


/* Plan art, 5 Nov 2026 (Jantine): Teams is people, each with the model they use; Enterprise is one
   isolated environment, a closed frame named after the company with a lock on its edge. */
:root .hy-home-c .pa-teams--people .pa-team__txt{display:flex;align-items:center;gap:10px}
:root .hy-home-c .pa-team__face{width:24px;height:24px;border-radius:var(--b-r-tag);object-fit:cover;flex:none}
:root .hy-home-c .pa-iso{position:relative;display:grid;gap:18px;margin:14px 32px 0;padding:28px 22px 18px;border:1.5px solid var(--b-ink);border-radius:var(--b-r-card)}
:root .hy-home-c .pa-iso__label{position:absolute;top:0;left:18px;transform:translateY(-50%);display:inline-flex;align-items:center;gap:6px;padding:0 8px;background:var(--b-band);color:var(--b-ink);font:500 13px/1.4 var(--b-font)}
:root .hy-home-c .pa-iso__label svg,:root .hy-home-c .pa-iso__model svg{width:16px;height:16px;flex:none}
:root .hy-home-c .pa-iso__model{display:flex;align-items:center;gap:10px;color:var(--b-ink)}
:root .hy-home-c .pa-iso__model b{font-size:14px;font-weight:600}
:root .hy-home-c .pa-iso__gpus{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
:root .hy-home-c .pa-iso__gpus i{aspect-ratio:1;border-radius:var(--b-r-px);background:var(--b-raised-h)}
:root .hy-home-c .pa-iso__gpus i.on{background:var(--b-accent)}
:root .hy-home-c .pa-iso__foot{font:400 12px/1.4 var(--b-mono);color:var(--b-muted)}
:root .hy-home-c .pa-teams--people .pa-team__txt{flex-direction:row;justify-content:flex-start;text-align:left}
:root .hy-home-c .pa-iso{justify-self:stretch;align-self:center;width:auto;box-sizing:border-box}
/* Plan art in the route card style (5 Nov 2026): soft chips with a mark, a square GPU grid, a mono caption. */
:root .hy-home-c .pa-chips{display:grid;justify-items:start;gap:8px;padding:0 32px}
:root .hy-home-c .pa-chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:var(--b-r-ctl);background:var(--b-card);font-size:14px;font-weight:500;color:var(--b-ink);white-space:nowrap}
:root .hy-home-c .pa-chip img{width:16px;height:16px;flex:none}
:root .hy-home-c .pa-chip small{font:400 11px/1 var(--b-mono);color:var(--b-muted)}
:root .hy-home-c .pa-chips .pa-chip:not(.is-on):not(.pa-chip--person){color:var(--b-muted)}
:root .hy-home-c .pa-chip--person img{width:20px;height:20px;border-radius:var(--b-r-tag);object-fit:cover}
:root .hy-home-c .pa-chip__model{display:inline-flex;margin-left:6px;padding-left:10px;border-left:1px solid var(--b-line)}
:root .hy-home-c .pa-iso{justify-self:center;margin:14px auto 0;padding:28px 26px 18px;gap:14px}
:root .hy-home-c .pa-iso__gpus{grid-template-columns:repeat(4,22px);gap:6px}
:root .hy-home-c .pa-iso__gpus i{background:var(--b-card)}
/* Enterprise art, simple (5 Nov 2026): no frame, a lock chip, the GPU grid, a mono place line. */
:root .hy-home-c .pa-iso{margin:0;padding:0 32px;border:0;border-radius:0;gap:12px;justify-self:auto;width:auto}
:root .hy-home-c .pa-iso .pa-chip svg{width:16px;height:16px;flex:none}
:root .hy-home-c .pa-iso__gpus{grid-template-columns:repeat(4,22px);gap:6px}
:root .hy-home-c .pa-iso__foot{font:400 12px/1.4 var(--b-mono);color:var(--b-muted)}
:root .hy-home-c .pa-iso .pa-chip{color:var(--b-ink)}
/* Segmented tabs (5 Nov 2026): hovering the selected tab turned its text ink on the ink fill, so the
   active tab went blank right after a click. The selected tab keeps paper text in every state. */
:root .seg > :is(.on, [aria-selected="true"], [aria-pressed="true"]):is(:hover, :focus, :active){color:var(--paper, var(--b-paper));background:var(--ink, var(--b-ink))}
:root .seg--ink > :is(.on, [aria-selected="true"], [aria-pressed="true"]):is(:hover, :focus, :active){color:var(--ink, var(--b-ink));background:var(--paper, var(--b-paper))}

/* ==== 5 Nov 2026: EU compute drawing (merged from fix-compute.css). ==== */
/* EU compute drawing, x-site.compute-art (5 Nov 2026). Compute through HostYourAI: a request,
   the HostYourAI mark as the hub, one indigo line fanning out to three GPU nodes in European
   cities, each a card with its card type, city and a row of GPU cells (lit = running). The
   private variant puts the nodes inside the WireGuard frame with its lock on the line in.
   Replaces .hy-product-art__infra, __racks, __region, __tunnel and __tunnelbox. Flat, hairlines,
   ink with one accent, mono micro labels, square corners up to --b-r-ctl, no shadows. */
:root .hy-compute{display:grid;justify-items:center;width:100%;max-width:440px;color:var(--b-ink)}
:root .hy-compute__req{padding:3px 8px;border:1px solid var(--b-line-2);border-radius:var(--b-r-px);background:var(--b-card);font:400 11px/1.4 var(--b-mono);color:var(--b-muted);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
:root .hy-compute__trunk{display:block;width:1.5px;height:14px;background:var(--b-accent)}
:root .hy-compute__hub{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border:1px solid var(--b-line-2);border-radius:var(--b-r-ctl);background:var(--b-card);font:600 15px/1.2 var(--b-font);letter-spacing:-.01em}
/* the fan: a rail between the first and last node centre, a drop into each node */
:root .hy-compute__nodes{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;padding-top:14px}
:root .hy-compute__nodes::before{content:"";position:absolute;top:0;left:calc((100% - 24px) / 6);right:calc((100% - 24px) / 6);height:1.5px;background:var(--b-accent)}
:root .hy-compute__node{position:relative;display:grid;gap:10px;min-width:0;padding:10px 10px 12px;border:1px solid var(--b-line-2);border-radius:var(--b-r-ctl);background:var(--b-card)}
:root .hy-compute__node::before{content:"";position:absolute;top:-15px;left:calc(50% - .75px);width:1.5px;height:14px;background:var(--b-accent)}
:root .hy-compute__node p{display:grid;gap:2px;margin:0;min-width:0}
:root .hy-compute__node b{font:600 15px/1.2 var(--b-font);letter-spacing:-.01em;color:var(--b-ink)}
:root .hy-compute__node span{font:400 11px/1.3 var(--b-mono);color:var(--b-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root .hy-compute__cells{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px}
:root .hy-compute__cells i{display:block;aspect-ratio:1;border-radius:var(--b-r-tick);background:var(--b-raised)}
:root .hy-compute__cells i.is-on{background:var(--b-accent)}
/* private: the WireGuard frame around the nodes, the lock where the line comes in */
:root .hy-compute__tunnel{position:relative;display:grid;justify-items:center;width:100%;padding:0 12px 10px;border:1.5px solid var(--b-accent);border-radius:var(--b-r-card)}
:root .hy-compute__lock{display:inline-flex;align-items:center;gap:6px;margin-top:-11px;padding:2px 8px;border-radius:var(--b-r-px);background:var(--b-accent);color:var(--b-card);font:400 11px/1.5 var(--b-mono)}
:root .hy-compute--private > .hy-compute__trunk{height:10px}
:root .hy-compute--private .hy-compute__nodes{gap:8px}
:root .hy-compute--private .hy-compute__nodes::before{left:calc((100% - 16px) / 6);right:calc((100% - 16px) / 6)}
:root .hy-compute--private .hy-compute__node{padding:6px 8px 8px;gap:6px}
/* narrow panels: the cells wrap to two rows of four */
@media (max-width:600px){
  :root .hy-compute__nodes{gap:8px}
  :root .hy-compute__nodes::before{left:calc((100% - 16px) / 6);right:calc((100% - 16px) / 6)}
  :root .hy-compute__node{padding:8px 8px 10px;gap:8px}
  :root .hy-compute__node b{font-size:14px}
  :root .hy-compute__cells{grid-template-columns:repeat(4,minmax(0,1fr))}
  :root .hy-compute--private .hy-compute__tunnel{padding:0 8px 8px}
  :root .hy-compute--private .hy-compute__node{padding:6px 6px 8px}
}
/* the line into the tunnel runs on to the lock, which sits on the frame's top edge */
:root .hy-compute--private > .hy-compute__trunk--in{height:20px}

/* ==== 5 Nov 2026: marks beside model and tool names, table heads (merged from fix-logos.css). ==== */
/* Marks beside model, tool and integration names (x-site.name-mark, 5 Nov 2026). Every .home-logo
   keeps its own colours on light surfaces (site-theme.css no longer blackens them); in the dark
   theme brand.css turns every .home-logo into one light ink. A name without a mark gets
   a square monogram tile of the same size (never a dot). */
:root .hy-nmark{flex:none;width:var(--hy-nmark,16px);height:var(--hy-nmark,16px)}
:root .hy-nmark--ini{display:inline-grid;place-items:center;border:1px solid var(--b-line-2);border-radius:var(--b-r-px,3px);background:var(--b-band);font:500 10px/1 var(--b-mono);letter-spacing:0;color:var(--b-ink-2)}

/* Model chips on the SEO pages: the mark replaces the quiet square. */
:root .hy-chips--marks .hy-chip{gap:8px}
:root .hy-chips--marks .hy-chip .hy-nmark{width:16px;height:16px}

/* The tool chips of the integrations block: mark plus name, and the row always wraps inside its
   column (at 1440 the last chip ran past the column edge). */
:root .hy-seo-toolchips{display:flex;flex-wrap:wrap;max-width:100%;min-width:0}
:root .hy-seo-toolchips > li{display:inline-flex;align-items:center;gap:8px;max-width:100%;white-space:nowrap}
:root .hy-seo-toolchips .hy-nmark{width:16px;height:16px}

/* The "works with" rows (layer pages, bento cells): a monogram tile reads like a logo chip too. */
:root .hy-also > :has(> .hy-nmark--ini){gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--b-line-2);border-radius:var(--b-r-ctl);background:var(--b-card);font:500 14px/1 var(--b-font);color:var(--b-ink)}

:root body :is(.prose-site,.prose-trust) table:not(.hy-cell *) thead th{font:400 12px/1.3 var(--b-mono);letter-spacing:0;color:var(--b-muted)}
/* a table written without <thead> (a first row of <th> cells in the SEO copy) gets the same head */
:root body :is(.prose-site,.prose-trust) table:not(.hy-cell *) > tbody:first-child > tr:first-child:not(:has(> td)) > th{height:auto;padding-top:14px;padding-bottom:10px;font:400 12px/1.3 var(--b-mono);letter-spacing:0;color:var(--b-muted);white-space:nowrap}

/* A model or tool name with its mark inside a table cell (x-site.table column 'mark'). */
:root .hy-nmark-name{display:inline-flex;align-items:center;gap:8px;min-width:0}
:root .hy-nmark-name > .hy-nmark{width:16px;height:16px}
:root .hy-nmark-name{vertical-align:middle}

/* On a phone a stacked table (x-site.table) is a list of label and value lines. The dashboard
   table look of /pricing kept its desktop cell padding and right-aligned numbers there, so the
   labels and values stepped in and out; it now stacks like every other table. */
@media (max-width:640px){
  :root body .hy-dash-table.hy-dash-table.hy-table--stack tbody tr{padding:14px 0;border-top:1px solid var(--b-line)}
  :root body .hy-dash-table.hy-dash-table.hy-table--stack tbody tr:first-child{border-top:0}
  :root body .hy-dash-table.hy-dash-table.hy-table--stack tbody tr > :is(td,th){height:auto;padding:3px 0;border:0;text-align:left;white-space:normal}
  :root body .hy-dash-table.hy-dash-table.hy-table--stack tbody :is(td,th):empty{display:none}
}
:root .hy-home-c .home-flow-g{padding:var(--sec, 96px) 0 0}

/* ===================================================================== */
/* 11. One system pass (taste audit, 5 Nov 2026)                          */
/* ===================================================================== */
/* Jantine, 5 Nov 2026: tables without inset, two card radii side by side, three tab looks.
   This block is the last word on those three, so a page style before it cannot bring the
   older looks back. */

/* --- A1 tables: one look everywhere -----------------------------------------------------
   A table is a card: the card fill, the hairline, the card radius, and every cell inset (the
   first and last column too, never flush with the frame). The frame scrolls sideways on a
   phone; the page never does. A table inside a bento cell keeps the same frame. */
:root:root body :is(.prose-table,.hy-table-wrap,.hy-doc__scroll),
:root:root body :is(.prose-site,.prose-trust,.hy-doc__body) table:not(:is(.prose-table,.hy-table-wrap,.hy-doc__scroll) table){
  max-width:100%;padding:8px 16px;background:var(--b-card);border:1px solid var(--b-line-2);border-radius:var(--b-r-panel);box-shadow:none;
  overflow-x:auto;-webkit-overflow-scrolling:touch}
:root:root body :is(.prose-site,.prose-trust,.hy-doc__body) table:not(:is(.prose-table,.hy-table-wrap,.hy-doc__scroll) table){border-collapse:separate;border-spacing:0}
:root:root body :is(.prose-table,.hy-table-wrap,.hy-doc__scroll) > table,
:root:root body table.hy-dash-table.hy-dash-table{margin:0;padding:0;background:transparent;border:0;border-radius:0}
:root:root body .hy-section--band :is(.prose-table,.hy-table-wrap),
:root:root body .hy-section--band :is(.prose-site,.prose-trust) table:not(:is(.prose-table,.hy-table-wrap) table){background:var(--b-card)}
:root:root body :is(.prose-table,.hy-table-wrap,.hy-doc__scroll,.prose-site,.prose-trust,.hy-doc__body) table :is(thead,tbody) tr > :is(th,td){padding-left:16px;padding-right:16px;background:transparent}
:root:root body :is(.prose-table,.hy-table-wrap,.hy-doc__scroll,.prose-site,.prose-trust,.hy-doc__body) table tbody tr:last-child > *{border-bottom:0}
@media (max-width:640px){
  :root:root body :is(.prose-table,.hy-table-wrap,.hy-doc__scroll),
  :root:root body :is(.prose-site,.prose-trust,.hy-doc__body) table:not(:is(.prose-table,.hy-table-wrap,.hy-doc__scroll) table){padding:4px 6px}
  :root:root body :is(.prose-site,.prose-trust,.hy-doc__body) table:not(:is(.prose-table,.hy-table-wrap,.hy-doc__scroll) table){display:block}
  :root:root body :is(.prose-table,.hy-table-wrap,.hy-doc__scroll,.prose-site,.prose-trust,.hy-doc__body) table :is(thead,tbody) tr > :is(th,td){padding-left:12px;padding-right:12px}
  /* a stacked table (x-site.table) is a list of label and value lines inside the same frame */
  :root:root body .hy-table-wrap:has(> .hy-table--stack){padding:4px 0}
  :root:root body .hy-table--stack.hy-table--stack tbody tr{padding:14px 18px}
  :root:root body .hy-table--stack.hy-table--stack tbody tr > :is(td,th){padding-left:0;padding-right:0}
}

/* --- A4 one card radius ----------------------------------------------------------------
   Every text card takes the radius of the option C plan cards (--b-r-panel, 24), at every
   width. Inner panels, code windows, chips and controls keep the smaller radii. Open card
   rows (the *--open variants) stay open. */
:root body :is(.hy-card,.hy-step,.hy-stat,.hy-cell,.hy-news-card,.hy-model,.hy-faq-group,.hy-product-router,
  .hy-model-page :is(.mp-card,.mp-price,.mg-advice)):not(:is(.hy-cards--open,.hy-steps--open,.hy-stats--open,.hy-seo-figures,.hy-bento--steps,.mp-stats) > *){border-radius:var(--b-r-panel)}
:root body .mp-related .hy-model{border-radius:var(--b-r-panel)}
:root body .hy-news-card__img{border-radius:var(--b-r-card)}

/* --- A5 one tab look -------------------------------------------------------------------
   The homepage hero tabs: a band track with the control radius, the selected tab an ink pill
   (the tag radius inside the track's 3px padding). The selected tab keeps its light label on
   hover, focus and press. */
:root body :is(.hy-seg > :is(.is-on,.on,[aria-selected="true"],[aria-pressed="true"]),.hy-tabs__tab[aria-selected="true"],.sv-tab.on):is(:hover,:focus,:focus-visible,:active){background:var(--b-ink);color:var(--b-paper)}
:root body .hy-seg--ink > :is(.is-on,.on,[aria-selected="true"],[aria-pressed="true"]):is(:hover,:focus,:focus-visible,:active){background:var(--b-on-ink);color:var(--b-ink-band)}

/* --- A13 code never runs past the page --------------------------------------------------
   A code window keeps its lines and scrolls inside itself; the window clips only for its radius. */
:root body :is(.hy-win__body,.hy-win pre){max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
:root body .hy-win{min-width:0;max-width:100%}

/* ==========================================================================================
   5 Nov 2026: subpage finish, merged from public/css/fix-pages.css (was linked right after
   brand.css). The logo row under layer and SEO heroes, the illustration wells on the document,
   FAQ and GPU pool pages, the About address block.
   ========================================================================================== */

/* 1. The colour model and tool row under a layer or SEO hero (partials/layer-logos): the same
      card chips as the option C homepage (public/css/home-e/c.css), marks in their own colours. */
:root .hy-sublogos{padding:clamp(40px,5vw,56px) 0 0}
:root .hy-sublogos__in{display:grid;gap:10px;min-width:0}
:root .hy-sublogos .home-mq{padding:4px 0}
:root .hy-sublogos .home-mq__track{animation-duration:120s}
:root .hy-sublogos .home-mq--rev .home-mq__track{animation-duration:104s}
:root .hy-sublogos .home-mq ul{gap:8px;padding:0 8px 0 0}
:root .hy-sublogos .home-mq li{gap:9px;height:44px;padding:0 16px 0 13px;background:var(--b-card);border-radius:var(--b-r-card);font:500 15px/1 var(--b-font);letter-spacing:-.015em;color:var(--b-ink)}
:root .hy-sublogos .home-logo{display:block;width:20px;height:20px}
:root .hy-sublogos .home-logo--loes{width:17px;height:auto}
:root:not([data-theme="dark"]) .hy-sublogos .home-logo{filter:none}
:root .hy-sublogos .home-mq:hover .home-mq__track,:root .hy-sublogos .home-mq:focus-within .home-mq__track{animation-play-state:paused}
@media (max-width:560px){
  :root .hy-sublogos .home-mq li{height:38px;padding:0 12px 0 10px;gap:8px;font-size:13px}
  :root .hy-sublogos .home-logo{width:17px;height:17px}
}
@media (prefers-reduced-motion:reduce){
  :root .hy-sublogos .home-mq__track{animation:none;width:auto}
  :root .hy-sublogos .home-mq ul[aria-hidden]{display:none}
  :root .hy-sublogos .home-mq ul{flex-wrap:wrap;justify-content:center;gap:8px;padding:0}
}

/* 2. An illustration from partials/illus in a well framed like the product art (.hy-product-art):
      band fill, card radius, the drawing's own paper card centred on it. The drawing's aurora
      frame (.mb) gives way to the well, so there is one frame, not two. */
:root .hy-art-well{display:grid;place-items:center;min-width:0;padding:clamp(24px,4vw,48px);background:var(--b-band);border-radius:var(--b-r-card);overflow:hidden}
:root .hy-section--band .hy-art-well{background:var(--b-card)}
:root .hy-art-well > .mb,:root .hy-art-well > .hy-product-art{width:100%;max-width:520px;margin:0 auto;padding:0;background:none;border:0;border-radius:0}
:root .hy-art-well > .hy-product-art{max-width:none}
:root .hy-art-well .glass{background:var(--b-card);border:1px solid var(--b-line-2);border-radius:var(--b-r-card)}
:root .hy-section--band .hy-art-well .glass{background:var(--b-paper)}
:root .hy-art-well .check{width:18px;height:18px}
/* the drawings' points and markers stay square, as every mark on the site */
:root .hy-art-well .emb-dot{border-radius:1px}
:root .hy-art-well .emb-q{box-shadow:none}
:root .hy-art-well .cm-caret{animation:none}

/* drawing parts that used inline values (partials/illus, 5 Nov 2026): classes on the tokens, on
   every page that draws them, the /brand page included */
:root .emb-qlabel--mid{left:50%;top:50%}
:root .illus-sec__title{font:600 15px/1.35 var(--b-font);color:var(--b-ink)}
:root .illus-sec__sub{font:400 12.5px/1.4 var(--b-font);color:var(--b-muted)}

/* the well in a document head (partials/doc-art): in the reading column, above the text */
:root .hy-doc-art{padding:0 0 clamp(40px,5vw,64px)}
:root .hy-doc-art .hy-doc__grid > .hy-doc-art__well{max-width:880px}
:root .hy-doc-art .hy-wrap:not(.hy-doc__grid) > .hy-doc-art__well{max-width:var(--b-read);margin:0 auto}

/* the FAQ hero (faq.blade.php): the first question and its answer, under the jump links */
:root .hy-faq-art{margin-top:48px}
:root .hy-faq-art .cm-b{max-width:88%}

/* a section with its text beside one drawing (gpu-pool requirements, a guide step) */
:root .hy-art-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:center}
:root .hy-art-pair > *{min-width:0}
@media (max-width:900px){:root .hy-art-pair{grid-template-columns:minmax(0,1fr)}}
:root .hy-art-after{margin-top:32px}

/* 3. The About page address (seo/show, company): a plain address block with a maps link */
:root .hy-address{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;padding:clamp(24px,4vw,40px);background:var(--b-card);border:1px solid var(--b-line-2);border-radius:var(--b-r-card)}
:root .hy-section--band .hy-address{background:var(--b-card)}
:root .hy-address address{font:500 clamp(20px,2vw,24px)/1.35 var(--b-font);font-style:normal;letter-spacing:-.015em;color:var(--b-ink)}
:root .hy-address address span{display:block;color:var(--b-ink-2);font-weight:400}
@media (max-width:640px){:root .hy-address{grid-template-columns:minmax(0,1fr)}}