/* SQE1-14 — the sqemes.com component set ("Baukasten").
   One file, edited in place — never appended to. Every chapter is built only from what is defined here.
   Fonts and every token live here (theme.css was merged in and archived, SQE1-15).
   Fluid values interpolate between a 360px and a 1600px viewport, like the live clamp() tokens. */

@font-face { font-family: "DM Sans"; src: url("/assets/fonts/live/DMSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/assets/fonts/live/DMSans-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/assets/fonts/live/DMSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Heebo"; src: url("/assets/fonts/live/Heebo-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --font-head: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Heebo", ui-sans-serif, system-ui, sans-serif;
  /* ---- colour: one role each ---- */
  --ink: #0c2a52;                    /* headings, primary text on light */
  --ink-2: rgba(12, 42, 82, .68);    /* body text — .68 keeps 4.5:1 on white, sky and tint (was .65: 4.45 on tint, review 2026-11-12) */
  --ink-3: rgba(12, 42, 82, .66);    /* second tone of a headline, meta — .66 keeps small meta text 4.5:1 on every light surface (was .56: 3.5, review 2026-11-12) */
  --accent: #6a5cf0;                 /* primary button, active state, numbers — the only colour. Owner 2026-11-12 "dunkleres Lila": white on it 4.8:1 (was #857aff: 3.4) */
  --accent-ink: #5b4fe0;              /* accent as TEXT on light: 4.5:1 (the fill stays --accent) */
  --accent-soft: rgba(129, 117, 255, .5);  /* focus ring halo, glow */
  --accent-tint: #f0eeff;            /* accent tag, selected row */
  --sky: #ebf6ff;                    /* flat card surface */
  --line: #e9eaec;                   /* borders, dividers */
  --paper: #fff;
  --stage: #0c2a52;                  /* navy: product stages and the close — nothing else */
  --stage-2: #081a33;                /* terminal inside a stage */
  --on-stage: #c9d6ea;               /* text on a stage */

  /* ---- shape: two radii, two shadows ---- */
  --r-sm: 10px;                                                                        /* everything inside a card or stage */
  --r-lg: clamp(1rem, calc(1rem + .375rem * (100vw - 22.5rem) / 77.5rem), 1.375rem);   /* cards, stages, photos: 16→22 */
  --sh-raise: 5px 10px 30px rgba(33, 33, 33, .08);            /* a white card on a light page */
  --sh-float: 0 30px 60px -30px rgba(8, 26, 51, .6);          /* a stage, or UI floating on a photo or stage */

  /* ---- type: one scale ---- */
  --t-display: clamp(2rem, calc(2rem + 1.875rem * (100vw - 22.5rem) / 77.5rem), 3.875rem);     /* 32→62 hero only */
  --t-h2: clamp(1.75rem, calc(1.75rem + 1.125rem * (100vw - 22.5rem) / 77.5rem), 2.875rem);    /* 28→46 chapter */
  --t-h3: clamp(1.125rem, calc(1.125rem + .375rem * (100vw - 22.5rem) / 77.5rem), 1.5rem);     /* 18→24 card */
  --t-lead: clamp(1rem, calc(1rem + .125rem * (100vw - 22.5rem) / 77.5rem), 1.125rem);         /* 16→18 */
  --t-body: clamp(.875rem, calc(.875rem + .125rem * (100vw - 22.5rem) / 77.5rem), 1rem);       /* 14→16 */
  --t-small: clamp(.75rem, calc(.75rem + .125rem * (100vw - 22.5rem) / 77.5rem), .875rem);     /* 12→14 eyebrow, notes */
  --t-ui: .8125rem;                                                                             /* 13 product UI */

  /* ---- space: one rhythm ---- */
  --w: 75rem;                                                                                       /* the one width: 1200 */
  --gutter: clamp(1rem, calc(1rem + .25rem * (100vw - 22.5rem) / 77.5rem), 1.25rem);
  --s-chapter: clamp(6rem, calc(6rem + 6.5rem * (100vw - 22.5rem) / 77.5rem), 12.5rem);             /* between chapters: 96→200 (≈187 at 1440, like n8n; owner 2026-11-11 "viel zu klein") */
  --s-head: clamp(2.25rem, calc(2.25rem + 1.5rem * (100vw - 22.5rem) / 77.5rem), 3.75rem);          /* head → content: 36→60 */
  --s-stack: clamp(1rem, calc(1rem + .25rem * (100vw - 22.5rem) / 77.5rem), 1.25rem);               /* inside a text stack: 16→20 */
  --s-card: clamp(1.25rem, calc(1.25rem + .625rem * (100vw - 22.5rem) / 77.5rem), 1.875rem);        /* card and stage padding: 20→30 */
  --s-grid: clamp(.75rem, calc(.75rem + .5rem * (100vw - 22.5rem) / 77.5rem), 1.25rem);             /* between cards: 12→20 */

  --ease: cubic-bezier(.16, 1, .3, 1);
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* =================== layout =================== */
.container { width: min(var(--w), 100% - 2 * var(--gutter)); margin-inline: auto; }
.chapter { width: min(var(--w), 100% - 2 * var(--gutter)); margin-inline: auto; padding-block: var(--s-chapter); }
.chapter + .chapter { padding-top: 0; }               /* one gap between chapters, never two paddings stacked */

/* chapter head: centred over full-width content, left in a split */
.head { display: grid; gap: var(--s-stack); justify-items: center; text-align: center; margin: 0 auto var(--s-head); max-width: 46rem; }
.head--left { justify-items: start; text-align: left; margin-inline: 0; }
.head--split { grid-template-columns: 1.2fr 1fr; align-items: end; justify-items: start; text-align: left; max-width: none; margin-inline: 0; column-gap: clamp(2rem, 5vw, 5rem); }
.head--split .t2 { display: block; }                   /* statement on line one, continuation on line two */
.split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.split--flip > :first-child { order: 2; }
.split > * { min-width: 0; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-grid); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-grid); }
.grid-2 > *, .grid-3 > *, .bento > * { min-width: 0; }

/* =================== type =================== */
.eyebrow { font: 500 var(--t-small)/1.2 var(--font-head); letter-spacing: 0; color: var(--accent); }
.h-display { font: 500 var(--t-display)/1 var(--font-head); letter-spacing: -.04em; color: var(--ink); text-wrap: balance; max-width: 16em; }
.h2 { font: 500 var(--t-h2)/1.05 var(--font-head); letter-spacing: -.04em; color: var(--ink); text-wrap: balance; max-width: 18em; }
.h3 { font: 500 var(--t-h3)/1.2 var(--font-head); letter-spacing: -.03em; color: var(--ink); }
.t2 { color: var(--ink-3); }                          /* second tone; a line break before it is allowed, an orphan word is not */
.lead { font-size: var(--t-lead); line-height: 1.7; color: var(--ink-2); max-width: 38rem; text-wrap: pretty; }
.small { font-size: var(--t-small); line-height: 1.6; color: var(--ink-2); }

/* gradient sweep — hero headline and close only, one phrase */
.shine { background-image: linear-gradient(to right, #743de6 20%, var(--ink) 30%, #337ee0 70%, var(--accent) 80%); background-size: 500% auto; background-position: 75% 50%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: shine 5s ease-in-out infinite alternate; }
.stage .shine, .close .shine { background-image: linear-gradient(to right, #b9b2ff 20%, #fff 40%, #9cc4f5 70%, var(--accent) 85%); }
@keyframes shine { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }

/* =================== button: one shape, two styles =================== */
.btn { position: relative; display: inline-flex; align-items: center; height: 52px; padding: 0 60px 0 28px; border-radius: 999px; font: 500 var(--t-body)/1 var(--font-head); letter-spacing: -.01em; white-space: nowrap; transition: background-color .3s, color .3s; }
.btn__arrow { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; }
.btn__arrow svg { width: 15px; height: 15px; fill: var(--accent); transition: transform .45s var(--ease); }
.btn:hover .btn__arrow svg { transform: translateX(3px); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary .btn__arrow { background: rgba(255, 255, 255, .54); }
.btn--primary:hover { background: var(--ink); }
.btn--secondary { background: var(--sky); color: var(--ink); }
.btn--secondary .btn__arrow { background: #fff; }
.btn--secondary:hover { background: #dcedfd; }
.btn--block { width: 100%; justify-content: center; padding-inline: 60px; }
.btn--sm { height: 44px; padding: 0 50px 0 20px; font-size: var(--t-small); }
.btn--sm .btn__arrow { width: 36px; height: 36px; }
/* tertiary: a text link with an arrow — next to a primary button instead of a second pill */
.link-arrow { display: inline-flex; align-items: center; gap: .45rem; height: 52px; padding: 0 .4rem; font: 500 var(--t-body)/1 var(--font-head); color: var(--ink); transition: color .25s; }
.link-arrow .ico { transition: transform .45s var(--ease); }
.link-arrow:hover { color: var(--accent); }
.link-arrow:hover .ico { transform: translateX(3px); }
.link { color: var(--accent-ink); font: 500 var(--t-body)/1.4 var(--font-head); text-decoration: underline; text-underline-offset: 3px; }

/* =================== tag: one shape, three tones =================== */
.tag { display: inline-flex; align-items: center; gap: .35rem; height: 1.5rem; padding: 0 .6rem; border-radius: 999px; font: 500 .75rem/1 var(--font-head); letter-spacing: 0; white-space: nowrap;
  background: var(--sky); color: var(--ink); }                   /* neutral: kind, label, channel */
.tag--accent { background: var(--accent-tint); color: var(--accent-ink); }   /* state: version, "can edit", live */
.tag--solid { background: var(--ink); color: #fff; }                      /* the one strong mark: current, loaded */
.term .tag--solid { background: var(--accent); color: #fff; }   /* the strong mark inside a terminal */

/* =================== card: one shape, two heights =================== */
.card { display: flex; flex-direction: column; gap: .6rem; padding: var(--s-card); border-radius: var(--r-lg); background: var(--sky); color: var(--ink-2); font-size: var(--t-small); line-height: 1.6; }
.card--raised { background: var(--paper); box-shadow: var(--sh-raise); }
.card__ui { display: grid; align-content: center; height: 14rem; margin-bottom: .6rem; }   /* fixed zone: titles in a row line up */
.card .h3 { margin-top: .2rem; }
/* variants — same shape, different surface or layout; mix them in one row, never repeat one six times */
.card--tint { background: var(--accent-tint); }
.card--tint .icon-tile { background: var(--paper); }
.card--stage { background: var(--stage); color: var(--on-stage); box-shadow: var(--sh-float); }   /* a small stage: product at work */
.card--stage .h3 { color: #fff; }
.card.card--stage .icon-tile { background: rgba(255, 255, 255, .1); color: #fff; }
.card--stage .eyebrow { color: #b9b2ff; }
.card--wide { grid-column: span 2; display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--s-card); align-items: center; }
.card--wide .card__ui { order: 2; height: auto; margin: 0; }
.card__text { display: grid; gap: .6rem; align-content: center; }
.card__stat { font: 500 var(--t-display)/1 var(--font-head); letter-spacing: -.04em; color: var(--accent); }
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-grid); }
.logo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.logo-grid span { height: 3.25rem; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--paper); box-shadow: var(--sh-raise); }
.logo-grid img { height: 18px; width: auto; max-width: 80%; }

/* timeline above a row of step cards — the line fills while the section scrolls through (data-ui="fill") */
.timeline { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-grid); margin-bottom: var(--s-stack); }
.timeline::before, .timeline::after { content: ""; position: absolute; left: 1rem; top: calc(1rem - 1px); height: 2px; border-radius: 2px; }
.timeline::before { right: 0; background: var(--line); }
.timeline::after { width: calc((100% - 1rem) * var(--p, 1)); background: linear-gradient(90deg, var(--accent), var(--accent-soft)); transition: width .15s linear; }
.timeline li { position: relative; z-index: 1; display: flex; align-items: center; gap: 0; font: 500 var(--t-small)/1 var(--font-head); color: var(--ink-3); transition: color .3s; }
.timeline li > span { background: var(--paper); padding-inline: .6rem; }
.timeline b { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent-tint); font-weight: 500; transition: background-color .3s, color .3s, box-shadow .3s; }
.timeline li.is-on { color: var(--accent); }
.timeline li.is-on b { background: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-tint); }
.card .eyebrow--m { display: none; }

/* beats: the text that changes while a stage plays (pattern C) — the current beat is big, the rest stay readable */
.beats { display: grid; gap: .3rem; }
.beat { display: grid; grid-template-columns: 2rem 1fr; gap: .35rem .75rem; padding: .9rem 1rem; border-radius: var(--r-sm); color: var(--ink-3); transition: background-color .3s, color .3s; }
.beat__n { font: 500 var(--t-small)/1.9 var(--font-head); }
.beat__t { font: 500 var(--t-h3)/1.25 var(--font-head); letter-spacing: -.03em; color: inherit; }
.beat__p { grid-column: 2; display: none; color: var(--ink-2); font-size: var(--t-body); line-height: 1.6; }
.beat.is-on { background: var(--sky); color: var(--ink); }
.beat.is-on .beat__n { color: var(--accent); }
.beat.is-on .beat__p { display: block; }
.split--stretch { align-items: stretch; }
/* story on a photo stage (pattern C, built like the persona block): one photo per beat, cross-fading, one window floating */
.stage--photo > .stage__bg[data-photo] { opacity: 0; transition: opacity .7s ease, transform 1.2s var(--ease); transform: scale(1.04); }
.stage--photo > .stage__bg[data-photo].is-on { opacity: 1; transform: none; }
.stage--photo.stage--story { justify-content: space-between; align-items: stretch; flex-direction: column; display: flex; }
.stage--story .stage__panels .win { box-shadow: var(--sh-float); }
.stage--photo .stage__panels { align-items: end; }
.stage--photo .stage__panels > .win, .stage--photo .stage__panels > .term { width: min(26rem, 100%); }
.stage--photo .stage__bar .tag { background: rgba(255, 255, 255, .85); color: var(--ink); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.stage--photo .stage__bar .tag[aria-current="true"] { background: var(--accent); color: #fff; }
.stage--story { display: flex; flex-direction: column; gap: var(--s-stack); }
.stage__bar { display: flex; flex-wrap: wrap; gap: .4rem; }
.stage__bar .tag { transition: background-color .3s, color .3s; }
.stage__bar .tag[aria-current="true"] { background: var(--accent); color: #fff; }
.stage__panels { flex: 1; display: grid; align-items: center; }
.stage__panels > * { grid-area: 1 / 1; }
.stage__bar .tag { background: rgba(255, 255, 255, .1); color: #fff; }
.stage__panels { align-items: stretch; }
.stage--story .win { display: flex; flex-direction: column; font-size: var(--t-small); }
.stage--story .win__body { flex: 1; display: flex; flex-direction: column; gap: .7rem; padding: 1.1rem 1.2rem; }
.stage--story .win__body > .row--input { margin-top: auto; }      /* the input bar sits at the bottom, like in the real app */
.row--input { box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3); }
.stage--story .term { font-size: .85rem; line-height: 1.8; padding: 1.3rem 1.4rem; }

/* =================== stage: navy or photo =================== */
.stage { position: relative; padding: var(--s-card); border-radius: var(--r-lg); background: var(--stage); color: var(--on-stage); box-shadow: var(--sh-float); overflow: hidden; }
.stage--photo { background: var(--ink) center / cover no-repeat; display: flex; align-items: flex-end; min-height: 32rem; }
.stage--photo > img.stage__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(12, 42, 82, .4)); }
.stage--photo > :not(.stage__bg) { position: relative; z-index: 1; }

/* =================== product UI (inside cards and stages) =================== */
.win { background: var(--paper); border-radius: var(--r-sm); color: var(--ink); font-size: var(--t-ui); line-height: 1.5; overflow: hidden; }
.stage .win, .stage--photo .win { box-shadow: var(--sh-float); }
.card .win { box-shadow: var(--sh-raise); }
.win__bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .65rem .9rem; border-bottom: 1px solid var(--line); }
.win__bar img { height: 16px; width: auto; }
.win__body { display: grid; gap: .5rem; padding: .9rem; }
.win__title { font: 500 var(--t-ui)/1.3 var(--font-head); color: var(--ink); }
.row { display: flex; align-items: center; gap: .55rem; min-height: 2.25rem; padding: .35rem .6rem; border-radius: var(--r-sm); }
.row > .tag:last-child, .row > .row__end { margin-left: auto; }
.row--on { background: var(--sky); }
.row--on > .tag:not(.tag--accent):not(.tag--solid) { background: var(--paper); }
.row--muted { color: var(--ink-3); }
.av { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--sky); font: 500 .62rem/1 var(--font-head); color: var(--ink); }
.dot { flex: none; width: .8rem; height: .8rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #c9cfe0; }
.row--on .dot { box-shadow: inset 0 0 0 2px #fff; background: var(--accent); outline: 1.5px solid var(--accent); }
.term { background: var(--stage-2); color: var(--on-stage); border-radius: var(--r-sm); padding: 1rem 1.1rem; font: .78rem/1.7 var(--mono); }
.term p { margin-bottom: .3rem; }
.term .p { color: var(--accent); }
.term .ask, .term .out { color: #fff; }
.term .out { font-family: var(--font-body); font-size: var(--t-ui); margin-top: .5rem; }
.meter { display: grid; grid-template-columns: 4.5rem 1fr 2rem; gap: .6rem; align-items: center; }
.meter__track { height: .45rem; border-radius: 999px; background: var(--sky); overflow: hidden; }
.meter__fill { display: block; height: 100%; border-radius: inherit; background: var(--accent); }

/* =================== icons: Lucide, one vocabulary (src/_data/icons.json) =================== */
.ico { flex: none; width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ico--lg { width: 1.25rem; height: 1.25rem; }
.tag .ico { width: .875rem; height: .875rem; stroke-width: 2; }
.icon-tile { flex: none; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--accent-tint); color: var(--accent); }
.icon-tile .ico { width: 1.25rem; height: 1.25rem; }
.card .icon-tile { background: var(--paper); }                 /* on a flat sky card the tile is white */
.card--raised .icon-tile { background: var(--accent-tint); }
.stage .icon-tile, .close .icon-tile { background: rgba(255, 255, 255, .1); color: #fff; }
.card__head { display: flex; align-items: center; gap: .75rem; }
.row > .ico { color: var(--accent); }
.win__title { display: flex; align-items: center; gap: .5rem; }
.win__title > .ico { color: var(--accent); }

/* =================== controls =================== */
/* segmented control: billing period, agent tool, any one-of-few */
.seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--sky); }
.seg button { white-space: nowrap; flex: none; height: 2.25rem; padding: 0 1rem; border-radius: 999px; font: 500 var(--t-small)/1 var(--font-head); color: var(--ink-2); transition: background-color .25s, color .25s; display: inline-flex; align-items: center; gap: .45rem; }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(12, 42, 82, .12); }
.stage .seg { background: rgba(255, 255, 255, .08); }
.stage .seg button { color: var(--on-stage); }
.stage .seg button[aria-selected="true"], .stage .seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.stage .win .seg { background: var(--sky); }                       /* a switch inside a white window keeps the light look */
.stage .win .seg button { color: var(--ink-2); }
.stage .win .seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.seg img { height: 18px; width: auto; }
.stage .seg button:not([aria-selected="true"]) img { filter: brightness(0) invert(1); opacity: .75; }

/* points: the clickable list beside a stage (n8n) */
.points { display: grid; gap: .5rem; }
.point { display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left; padding: .85rem 1rem; border-radius: var(--r-sm); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink); font: 500 var(--t-body)/1.4 var(--font-head); transition: background-color .25s, box-shadow .25s; }
.point::before { content: ""; flex: none; width: .8rem; height: .8rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #c9cfe0; }
.point[aria-pressed="true"] { background: var(--sky); box-shadow: none; }
.point[aria-pressed="true"]::before { background: var(--accent); box-shadow: inset 0 0 0 2px var(--sky); outline: 1.5px solid var(--accent); }

/* ticks: a short list of facts */
.ticks { display: grid; gap: .65rem; }
.ticks li { display: flex; gap: .65rem; align-items: flex-start; color: var(--ink); }
.ticks .ico { margin-top: .22rem; color: var(--accent); }

/* =================== photos: people build trust, the UI on top shows what they do =================== */
/* photo card: a photo filling a card, text over a soft gradient, optional floating UI */
/* the last slider tile: "Discover all teams" — the navy dot-grid stage of the persona panel, the whole tile is the link */
.card--more { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-stack); min-height: 26rem; padding: var(--s-card); border-radius: var(--r-lg); text-decoration: none;
  background-color: var(--stage); background-image: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1.3px); background-size: 18px 18px; color: var(--on-stage); transition: background-color .3s; }
.card--more .h3 { color: #fff; margin-bottom: .5rem; }
.card--more .icon-tile { background: rgba(133, 122, 255, .28); color: #fff; }
.card--more__go { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 999px; background: var(--accent); color: #fff; transition: translate .3s var(--ease); }
.card--more__go svg { width: 1.2rem; height: 1.2rem; }
.card--more:hover, .card--more:focus-visible { background-color: #13305e; }
.card--more:hover .card--more__go { translate: 4px 0; }
.card--photo { position: relative; overflow: hidden; justify-content: flex-end; min-height: 26rem; padding: var(--s-card); background: var(--ink); color: rgba(255, 255, 255, .82); }
.card--photo > .card__bg, .stage--photo > .stage__bg, .photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card--photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 42, 82, 0) 55%, rgba(12, 42, 82, .35)); }
.card--photo > :not(.card__bg) { position: relative; z-index: 1; }
.card--photo .h3 { color: #fff; }
.card--photo .icon-tile, .card.card--photo .icon-tile { background: rgba(255, 255, 255, .16); color: #fff; backdrop-filter: blur(6px); }
/* glass panel: text on a photo always sits on frosted glass, so it is readable on any image; hover makes it denser */
.glass { display: grid; gap: .55rem; max-width: 27rem; padding: 1rem 1.15rem 1.1rem; border-radius: var(--r-sm); color: #fff;
  background: rgba(12, 42, 82, .42); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 20px 40px -24px rgba(8, 26, 51, .6); transition: background-color .35s, transform .45s var(--ease); }
.glass p { color: rgba(255, 255, 255, .9); }
.glass .try { color: #fff; }
.card--photo:hover .glass { background: rgba(12, 42, 82, .62); transform: translateY(-3px); }
.card--full { grid-column: 1 / -1; }
.card.card--photo { align-items: flex-start; }
/* a plain photo with rounded corners, for splits and the close */
.photo { position: relative; overflow: hidden; border-radius: var(--r-lg); min-height: 20rem; background: var(--sky); }
/* floating UI on a photo: one window or one or two chips, never more */
.float { position: absolute; z-index: 2; }
.chip { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .85rem .55rem .6rem; border-radius: 999px; background: var(--paper); color: var(--ink); box-shadow: var(--sh-float); font: 500 var(--t-ui)/1 var(--font-head); white-space: nowrap; }
.chip .icon-tile { width: 1.75rem; height: 1.75rem; border-radius: 50%; }
.chip .icon-tile .ico { width: .95rem; height: .95rem; }
.card--photo > .float, .stage--photo > .float, .photo > .float { position: absolute; }   /* beats the in-flow rule above */
.card.card--photo .chip .icon-tile, .stage .chip .icon-tile, .chip .icon-tile { background: var(--accent-tint); color: var(--accent); backdrop-filter: none; }

/* =================== interactive product UI (assets/js/ui.js) =================== */
button.row { width: 100%; text-align: left; transition: background-color .25s; }
button.row:hover { background: var(--sky); }
button.tag { cursor: pointer; transition: background-color .2s, color .2s; }
button.tag:not(.tag--solid):not(.tag--accent):hover { background: #dcedfd; }
button.tag--solid:hover { background: var(--accent); }
button.tag[disabled] { cursor: default; opacity: .7; }
.row.is-new { animation: row-in .5s var(--ease); }
@keyframes row-in { from { opacity: 0; transform: translateY(-6px); } }
.row[data-route] { transition: background-color .3s, color .3s; color: var(--ink-3); }
.row[data-route].is-loaded { color: var(--ink); }
.row[data-route] .tag--solid { opacity: 0; transform: scale(.9); transition: opacity .3s, transform .3s var(--ease); }
.row[data-route].is-loaded .tag--solid { opacity: 1; transform: none; }
.logo-grid button { height: 3.25rem; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--paper); box-shadow: var(--sh-raise); position: relative; transition: box-shadow .25s; }
.logo-grid button[aria-pressed="true"] { box-shadow: var(--sh-raise), inset 0 0 0 2px var(--accent); }
.logo-grid button[aria-pressed="true"]::after { content: ""; position: absolute; top: -5px; right: -5px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 9px no-repeat; box-shadow: 0 0 0 2px #fff; }
.beat { cursor: pointer; width: 100%; text-align: left; }
.beat:not(.is-on):hover { color: var(--ink-2); }
.try { display: inline-flex; align-items: center; gap: .35rem; font: 500 .78rem/1 var(--font-head); color: var(--accent-ink); }
.try::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
.stage .try, .card--stage .try { color: #b9b2ff; }
@media (prefers-reduced-motion: reduce) { .row.is-new { animation: none; } }

/* =================== stage contents for agents (section 7 comparison) =================== */
.stage--tall { display: flex; flex-direction: column; gap: var(--s-stack); min-height: 34rem; }
.stage--tall > [data-panel] { flex: 1; }
.stage__top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }

/* variant 1 — the agent's steps as a vertical timeline */
.flow { position: relative; display: grid; grid-auto-rows: 1fr; gap: .55rem; }   /* steps share the stage height, so the line ends at the last step */
.flow::before { content: ""; position: absolute; left: 2.15rem; top: 2rem; bottom: 2rem; width: 2px; border-radius: 2px; background: rgba(255, 255, 255, .14); }
.flow__step { position: relative; display: grid; grid-template-columns: 2.5rem 1fr auto; gap: .2rem .8rem; align-items: center; padding: .7rem .9rem; border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink); box-shadow: var(--sh-float); transition: opacity .4s, transform .5s var(--ease); }
.stage .flow__step .icon-tile { grid-row: span 2; background: var(--accent-tint); color: var(--accent); }
.stage .flow__step--result .icon-tile { background: var(--accent); color: #fff; }
.flow__t { font: 500 var(--t-small)/1.3 var(--font-head); }
.flow__d { grid-column: 2; font: .74rem/1.5 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
.flow__step > .tag { grid-row: 1 / span 2; grid-column: 3; }
.flow__step--result { background: var(--accent-tint); }
.flow__step--result .flow__d { font-family: var(--font-body); font-size: var(--t-ui); color: var(--ink); }
.flow__step.is-wait { opacity: 0; transform: translateY(8px); }

/* variant 3 — steps on the left, the result being written on the right, one progress bar on top */
.flow-split { flex: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-stack); }
.flow-bar { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.flow-bar > span { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--accent-soft), var(--accent)); transition: width .45s var(--ease); }
.flow--compact { grid-auto-rows: auto; align-content: start; gap: .4rem; }
.flow--compact::before { left: 1.6rem; }
.flow--compact .flow__step { grid-template-columns: 1.75rem 1fr; padding: .55rem .7rem; background: rgba(255, 255, 255, .07); color: var(--on-stage); box-shadow: none; }
.flow--compact .flow__step .icon-tile, .stage .flow--compact .flow__step .icon-tile { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; }
.flow--compact .flow__step .icon-tile .ico { width: .9rem; height: .9rem; }
.flow--compact .flow__t { font-size: var(--t-ui); }
.flow--compact .flow__d { font-size: .7rem; color: #8ea3c2; }
.flow--compact .flow__step.is-done { background: var(--paper); color: var(--ink); }
.flow--compact .flow__step.is-done .flow__d { color: var(--ink-2); }
.stage .flow--compact .flow__step.is-done .icon-tile { background: var(--accent); color: #fff; }
.flow--compact .flow__step.is-wait { opacity: .35; transform: none; }
.flow-out { display: flex; flex-direction: column; }
.flow-out .ide__code p { transition: opacity .35s, transform .45s var(--ease); }
.flow-out .ide__code p.is-wait { opacity: 0; transform: translateX(-6px); }

/* variant 2 — a real editor window */
.ide { flex: 1; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-sm); background: var(--paper); color: var(--ink); box-shadow: var(--sh-float); font-size: var(--t-ui); }
.ide__bar { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; background: #f3f5f8; border-bottom: 1px solid var(--line); }
.ide__dots { display: inline-flex; gap: 5px; margin-right: .3rem; }
.ide__dots i { width: 9px; height: 9px; border-radius: 50%; background: #d3d8e0; }
.ide__bar [role="tab"] { white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: .4rem; height: 1.9rem; padding: 0 .8rem; border-radius: 8px; font: 500 .75rem/1 var(--font-head); color: var(--ink-2); transition: background-color .2s, color .2s; }
.ide__bar [role="tab"][aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(12, 42, 82, .12); }
.ide__body { flex: 1; display: grid; grid-template-columns: 10rem 1fr; min-height: 0; }
.ide__tree { display: grid; align-content: start; gap: .1rem; padding: .7rem .5rem; border-right: 1px solid var(--line); font-size: .75rem; color: var(--ink-2); }
.ide__tree p { display: flex; align-items: center; gap: .4rem; padding: .25rem .45rem; border-radius: 6px; }
.ide__tree p.is-open { background: var(--sky); color: var(--ink); }
.ide__tree .tag { height: 1.15rem; padding: 0 .4rem; font-size: .62rem; margin-left: auto; }
.ide__tree .ind { padding-left: 1.3rem; }
.ide__main { display: flex; flex-direction: column; min-width: 0; }
.ide__file { display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-bottom: 1px solid var(--line); font: 500 .75rem/1 var(--font-head); }
.ide__code { flex: 1; padding: .7rem 1rem; font: .74rem/1.8 var(--mono); counter-reset: ln; color: var(--ink); }
.ide__code p { counter-increment: ln; white-space: pre-wrap; overflow-wrap: anywhere; }
.ide__code p::before { content: counter(ln); display: inline-block; width: 1.6rem; color: var(--ink-3); }
.ide__code .h { color: var(--accent); }
.ide__code .add { background: var(--accent-tint); border-radius: 4px; }
.ide__term { background: var(--stage-2); color: var(--on-stage); padding: .7rem 1rem; font: .72rem/1.7 var(--mono); }
.ide__term .p { color: var(--accent); }
.ide__term .tag--solid { background: var(--accent); }

/* =================== hero =================== */
.hero { padding-block: clamp(3rem, 7vw, 6.5rem) var(--s-chapter); }
.hero__text { display: grid; gap: var(--s-stack); justify-items: center; text-align: center; max-width: 52rem; margin-inline: auto; }
.hero__text .lead { max-width: 40rem; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: .4rem; }
.proof { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; justify-content: center; font: 500 var(--t-small)/1.3 var(--font-head); color: var(--ink-2); }
.proof li { display: inline-flex; align-items: center; gap: .4rem; }
.proof .ico { color: var(--accent); }
.hero--split .hero__text { justify-items: start; text-align: left; margin: 0; }
.hero--split .hero__ctas, .hero--split .proof { justify-content: flex-start; }
.hero__stage { margin-top: var(--s-head); }
.hero--split .h-display { font-size: clamp(2rem, calc(2rem + 1.5rem * (100vw - 22.5rem) / 77.5rem), 3.5rem); }
/* feature slider laid out as a row: stage on top, the three tabs underneath as its controls */
.fslider.fslider--row { grid-template-columns: minmax(0, 1fr); }
.fslider--row .fslider__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); order: 2; }
.fslider--row .fslider__stage { order: 1; }
.fslider--row .fslider__tab p { display: block; }
.fslider.fslider--row .fslider__stage { min-height: clamp(20rem, 42vw, 34rem); }
/* command bar (hero C): the request is typed, the playbooks that load appear underneath */
.cmd { width: min(44rem, 100%); margin: var(--s-head) auto 0; display: grid; gap: .9rem; }
.cmd__bar { display: flex; align-items: center; gap: .75rem; min-height: 4rem; padding: .6rem .6rem .6rem 1.2rem; border-radius: 999px; background: var(--paper); box-shadow: var(--sh-float), inset 0 0 0 1px var(--line); font: 500 var(--t-lead)/1.4 var(--font-head); color: var(--ink); text-align: left; }
.cmd__bar > .ico { color: var(--accent); width: 1.25rem; height: 1.25rem; }
.cmd__typed { flex: 1; min-width: 0; }
.cmd__typed::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -.15em; background: var(--accent); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.cmd__loads { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; min-height: 1.6rem; }
.cmd__loads .tag { animation: row-in .45s var(--ease) both; }
.cmd__ex { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.cmd__ex button { font: 500 .75rem/1 var(--font-head); color: var(--ink-2); padding: .5rem .8rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); background: var(--paper); transition: background-color .2s, color .2s; }
.cmd__ex button[aria-pressed="true"], .cmd__ex button:hover { background: var(--sky); color: var(--ink); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .cmd__typed::after { animation: none; } }

/* =================== skill switch (agent stage, variant 5): one big before/after, one switch =================== */
.switch { display: inline-flex; align-items: center; gap: .7rem; font: 500 var(--t-body)/1 var(--font-head); color: #fff; }
.switch > span:first-child { display: inline-flex; align-items: center; gap: .45rem; }
.switch__track { position: relative; width: 3.4rem; height: 1.9rem; border-radius: 999px; background: rgba(255, 255, 255, .18); transition: background-color .3s; }
.switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.9rem - 6px); height: calc(1.9rem - 6px); border-radius: 50%; background: #fff; transition: transform .35s var(--ease); }
.switch[aria-checked="true"] .switch__track { background: var(--accent); }
.switch[aria-checked="true"] .switch__track::after { transform: translateX(1.5rem); }
.skillv { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-grid); flex: 1; }
.preview { display: grid; align-content: center; gap: 1rem; padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); }
.preview__label { font: 500 var(--t-small)/1 var(--font-head); }
.preview__field { height: 3.25rem; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px #d3d8e0; display: flex; align-items: center; padding: 0 1rem; color: var(--ink-3); font-size: var(--t-body); }
.preview__hint { font-size: var(--t-small); color: var(--ink-2); }
.preview__btn { justify-self: start; height: 3.25rem; padding: 0 1.6rem; border-radius: 999px; display: inline-flex; align-items: center; background: var(--accent); color: #fff; font: 500 var(--t-body)/1 var(--font-head); }
.preview__title { font: 500 var(--t-h3)/1.2 var(--font-head); letter-spacing: -.03em; }
[data-swap] { transition: opacity .25s; }
[data-swap].is-out { opacity: 0; }
.diff { display: grid; align-content: start; gap: .5rem; }
.diff__row { display: grid; gap: .2rem; padding: .8rem 1rem; border-radius: var(--r-sm); background: rgba(255, 255, 255, .07); color: var(--on-stage); font-size: var(--t-small); }
.diff__row s { color: #8ea3c2; }
.diff__row b { color: #fff; font-weight: 500; }
.diff__k { font: 500 .7rem/1 var(--font-head); text-transform: uppercase; letter-spacing: .06em; color: #b9b2ff; }
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.chain .tag { background: rgba(255, 255, 255, .1); color: #fff; transition: background-color .3s, color .3s; }
.chain .tag.is-on { background: var(--accent); }
.chain .ico.sep { color: #8ea3c2; width: .9rem; height: .9rem; }

/* =================== sliders: four kinds, one set of controls =================== */
/* round control button (prev / next / pause) */
.ctl { width: 2.75rem; height: 2.75rem; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .25s, color .25s, box-shadow .25s, opacity .25s; }
.ctl:hover { background: var(--ink); color: #fff; box-shadow: none; }
.ctl[disabled] { opacity: .35; pointer-events: none; }
.ctl .ico { width: 1.1rem; height: 1.1rem; }
.dots { display: flex; gap: 6px; }
.dots button { position: relative; width: 7px; height: 7px; border-radius: 999px; background: #c9d3e3; transition: width .35s var(--ease), background-color .35s; }
.dots button[aria-current="true"] { width: 26px; background: var(--accent); }
.slider__head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-grid); margin-bottom: var(--s-stack); flex-wrap: wrap; }
.slider__ctls { display: flex; align-items: center; gap: .5rem; }

/* 1 · card slider: scroll-snap track, drag or swipe, arrows and dots */
.slider__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--s-grid)) / 3.15); gap: var(--s-grid); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 4px; }
.slider__track::-webkit-scrollbar { display: none; }
.slider__track > * { scroll-snap-align: start; }
.slider__track.is-drag { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }

/* 2 · feature slider: one big stage, tabs with an autoplay progress bar */
.fslider { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-grid); align-items: stretch; }
.fslider__tabs { display: grid; gap: .5rem; align-content: start; }
.fslider__tab { position: relative; display: grid; gap: .3rem; width: 100%; text-align: left; padding: 1rem 1.1rem 1.15rem; border-radius: var(--r-sm); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3); overflow: hidden; transition: background-color .3s, color .3s, box-shadow .3s; }
.fslider__tab .h3 { color: inherit; font-size: var(--t-body); display: flex; align-items: center; gap: .55rem; }
.fslider__tab p { display: none; font-size: var(--t-small); color: var(--ink-2); line-height: 1.55; }
.fslider__tab[aria-selected="true"] { background: var(--sky); box-shadow: none; color: var(--ink); }
.fslider__tab[aria-selected="true"] p { display: block; }
.fslider__tab i { position: absolute; left: 1.1rem; right: 1.1rem; bottom: .5rem; height: 2px; border-radius: 2px; background: rgba(12, 42, 82, .08); overflow: hidden; }
.fslider__tab i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(var(--t, 0)); }
.fslider__tab:not([aria-selected="true"]) i { display: none; }
.fslider__stage { min-height: 24rem; }
.fslider__stage { padding: 0; }
.fslider__stage > [data-slide] > .stage__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fslider__stage > [data-slide] > .win { box-shadow: var(--sh-float); }

/* 3 · marquee: two rows in opposite directions, pauses on hover, stops for reduced motion */
.marquee { display: grid; gap: .75rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); overflow: hidden; }
.marquee__row { display: flex; gap: .75rem; width: max-content; animation: marquee 40s linear infinite; }
.marquee__row--rev { animation-direction: reverse; animation-duration: 46s; }
.marquee:hover .marquee__row { animation-play-state: paused; }
.marquee__item { display: inline-flex; align-items: center; gap: .6rem; height: 3.25rem; padding: 0 1.2rem; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; font: 500 var(--t-small)/1 var(--font-head); color: var(--ink); }
.marquee__item img { height: 18px; width: auto; }
@keyframes marquee { to { transform: translateX(calc(-50% - .375rem)); } }

/* 4 · before / after: drag the handle (or use the range input) */
.compare { position: relative; overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--sh-raise); background: var(--paper); --x: 50%; user-select: none; }
.compare__pane { padding: var(--s-card); display: grid; gap: .8rem; align-content: start; min-height: 19rem; }
.compare__pane--after { position: absolute; inset: 0; background: var(--sky); clip-path: inset(0 0 0 var(--x)); }
.compare__pane .tag { justify-self: start; }
.compare__pane .text { font: 500 var(--t-h3)/1.35 var(--font-head); letter-spacing: -.02em; color: var(--ink); max-width: 34rem; }
.compare__pane--before .text { color: var(--ink-3); }
.compare__handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: var(--accent); pointer-events: none; }
.compare__handle span { position: absolute; top: 50%; left: 50%; width: 2.5rem; height: 2.5rem; margin: -1.25rem 0 0 -1.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: 0 0 0 5px rgba(133, 122, 255, .25); }
.compare input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.compare input[type="range"]:focus-visible + .compare__handle span { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { .marquee__row { animation: none; flex-wrap: wrap; width: auto; } .marquee { -webkit-mask-image: none; mask-image: none; } }

/* =================== site header, announcement bar, footer =================== */
.announce { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 2.5rem; padding: .4rem 3rem; position: relative; background: var(--ink); color: #fff; font: 500 var(--t-small)/1.3 var(--font-head); text-align: center; }
.announce a { color: #b9b2ff; text-decoration: underline; text-underline-offset: 3px; }
.announce .ico { color: #b9b2ff; }
.announce__x { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 50%; color: #fff; }
.announce__x:hover { background: rgba(255, 255, 255, .12); }
.head-bar { position: sticky; top: 0; z-index: 50; transition: background-color .3s, box-shadow .3s; }
.head-bar__in { width: min(var(--w), 100% - 2 * var(--gutter)); margin-inline: auto; height: 72px; display: flex; align-items: center; gap: 2rem; transition: height .3s var(--ease); }
.head-bar.is-scrolled { background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 1px 0 var(--line); }
.head-bar.is-scrolled .head-bar__in { height: 60px; }
.head-bar__logo img { width: 112px; height: auto; }
.head-bar__nav { display: flex; gap: .2rem; margin-right: auto; }
.head-bar__nav a { padding: .5rem .8rem; border-radius: 999px; font: 500 var(--t-small)/1 var(--font-head); color: var(--ink); transition: background-color .2s; }
.head-bar__nav a:hover, .head-bar__nav a[aria-current="page"] { background: var(--sky); }
.head-bar__end { display: flex; align-items: center; gap: .8rem; margin-left: auto; }
.head-bar__end .login { font: 500 var(--t-small)/1 var(--font-head); color: var(--ink); }
.head-bar__burger { display: none; width: 2.75rem; height: 2.75rem; place-items: center; border-radius: 50%; color: var(--ink); }
.head-bar__menu { display: none; }
.head-bar__menu:not([hidden]) { display: grid; gap: .3rem; padding: .6rem var(--gutter) 1.2rem; background: var(--paper); box-shadow: 0 12px 24px -16px rgba(12, 42, 82, .3); }
.head-bar__menu > a { padding: .85rem .4rem; border-bottom: 1px solid var(--line); font: 500 var(--t-body)/1 var(--font-head); color: var(--ink); }
.foot { background: var(--paper); border-top: 1px solid var(--line); padding-top: var(--s-head); }
.foot__in { width: min(var(--w), 100% - 2 * var(--gutter)); margin-inline: auto; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s-grid) clamp(1.5rem, 4vw, 3rem); }
.foot__brand { display: grid; gap: var(--s-stack); align-content: start; }
.foot__brand img { width: 112px; }
.foot h3 { font: 500 var(--t-small)/1 var(--font-head); color: var(--ink); margin-bottom: .9rem; }
.foot ul { display: grid; gap: .55rem; font-size: var(--t-small); }
.foot .proof { display: grid; justify-content: start; gap: .5rem; }
.foot ul a:hover { color: var(--accent); }
.foot__bar { width: min(var(--w), 100% - 2 * var(--gutter)); margin: var(--s-head) auto 0; padding: 1.2rem 0 1.6rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem; font-size: .75rem; color: var(--ink-3); }

/* =================== FAQ (native details/summary, no JS) =================== */
.faq { display: grid; gap: .5rem; }
.faq details { border-radius: var(--r-sm); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .25s, box-shadow .25s; }
.faq details[open] { background: var(--sky); box-shadow: none; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.2rem; cursor: pointer; list-style: none; font: 500 var(--t-body)/1.35 var(--font-head); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { flex: none; width: 1.75rem; height: 1.75rem; padding: .35rem; border-radius: 50%; background: var(--paper); color: var(--accent); transition: transform .35s var(--ease); }
.faq details[open] summary .ico { transform: rotate(45deg); }
.faq details > div { overflow: hidden; padding: 0 1.2rem 1.2rem; color: var(--ink-2); font-size: var(--t-small); line-height: 1.65; max-width: 46rem; }
/* FAQ on "/" (SQE1-15, idea BYQ Altum FAQ 1): sticky intro + numbered hairline list; the open item is the navy stage */
.faq2 { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.faq2 > * { min-width: 0; }
.faq2__intro { position: sticky; top: 7rem; display: grid; gap: clamp(2rem, 6vh, 4rem); }
.faq2__ask { display: flex; gap: 1rem; align-items: flex-start; padding: var(--s-card); border-radius: var(--r-lg); background: var(--sky); }
.faq2__ask .icon-tile { flex: none; }
.faq2__ask p { color: var(--ink-2); }
.faq2__ask .faq2__ask-t { font: 500 var(--t-lead)/1.2 var(--font-head); color: var(--ink); margin-bottom: .25rem; }
.faq2__ask .link-arrow { padding-inline: 0; margin-top: .6rem; }
.faq.faq2__list { gap: 0; border-top: 1px solid var(--line); }
.faq2__list details { border-radius: 0; background: transparent; box-shadow: 0 1px 0 var(--line); transition: background-color .35s var(--ease), box-shadow .35s; }
.faq2__list details[open] { border-radius: var(--r-lg); background: var(--stage); box-shadow: var(--sh-float); margin-block: .5rem; }
.faq2__list summary { display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: center; gap: .75rem; padding: 1.35rem 1.25rem; font: 500 var(--t-lead)/1.3 var(--font-head); color: var(--ink); transition: color .3s; }
.faq2__list summary:hover .faq2__q { color: var(--accent-ink); }
.faq2__n { font: 500 var(--t-small)/1 var(--font-head); color: var(--accent-ink); letter-spacing: .02em; }
.faq2__list summary .ico { width: 2rem; height: 2rem; padding: .45rem; background: var(--sky); color: var(--accent-ink); }
.faq2__list details[open] summary { color: #fff; }
.faq2__list details[open] summary:hover .faq2__q { color: #fff; }
.faq2__list details[open] .faq2__n { color: #b8b1ff; }
.faq2__list details[open] summary .ico { background: var(--accent); color: #fff; }
.faq2__list details > div { padding: 0 1.25rem 1.5rem calc(1.25rem + 2.5rem + .75rem); font-size: var(--t-body); color: var(--on-stage); max-width: 44rem; }
@media (max-width: 991px) {
  .faq2 { grid-template-columns: 1fr; }
  .faq2__intro { display: contents; }   /* phones: heading, then the questions, then the contact card */
  .faq2__ask { order: 2; }
  .faq2__list summary { grid-template-columns: 2rem 1fr auto; padding: 1.1rem 1rem; font-size: var(--t-body); }
  .faq2__list details > div { padding: 0 1rem 1.25rem 1rem; }
}

/* =================== stats band — only numbers we can prove =================== */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: var(--r-lg); background: var(--sky); }
.stats > div { padding: var(--s-card); display: grid; gap: .35rem; align-content: start; }
.stats > div + div { box-shadow: inset 1px 0 0 rgba(12, 42, 82, .08); }
.stats b { font: 500 var(--t-display)/1 var(--font-head); letter-spacing: -.04em; color: var(--accent); }
.stats span { font-size: var(--t-small); color: var(--ink-2); }

/* =================== video player: own controls, still frame for reduced motion =================== */
.player { position: relative; overflow: hidden; border-radius: calc(var(--r-lg) - 6px); background: var(--stage-2); aspect-ratio: 16 / 9; }
.player video { width: 100%; height: 100%; object-fit: cover; display: block; }
.player__ctl { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; display: flex; align-items: center; gap: .6rem; }
.player__ctl .ctl { background: rgba(255, 255, 255, .9); box-shadow: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.player__bar { flex: 1; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.player__bar i { display: block; height: 100%; width: var(--v, 0%); background: var(--accent); }
.player__big { position: absolute; inset: 0; margin: auto; width: 4.5rem; height: 4.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 0 0 10px rgba(133, 122, 255, .25); transition: transform .3s var(--ease), opacity .3s; }
.player__big .ico { width: 1.6rem; height: 1.6rem; }
.player.is-playing .player__big { opacity: 0; transform: scale(.85); pointer-events: none; }

/* =================== quote, logo strip (structure only until content is cleared) =================== */
.quote { display: grid; gap: var(--s-stack); padding: var(--s-card); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--sh-raise); }
.quote > .ico { width: 2rem; height: 2rem; color: var(--accent); }
.quote blockquote { margin: 0; font: 500 var(--t-h3)/1.4 var(--font-head); letter-spacing: -.02em; color: var(--ink); }
.quote figcaption { display: flex; align-items: center; gap: .75rem; font-size: var(--t-small); }
.quote figcaption .av { width: 2.5rem; height: 2.5rem; font-size: .75rem; }
.quote figcaption b { display: block; color: var(--ink); font-weight: 500; font-family: var(--font-head); }
.logos-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2.5rem; padding: var(--s-card); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line); }
.logos-strip span { height: 1.5rem; min-width: 6rem; border-radius: 6px; background: repeating-linear-gradient(135deg, var(--sky) 0 6px, #fff 6px 12px); }

/* =================== subpage hero, comparison table, form, article cards =================== */
.subhero { display: grid; gap: var(--s-stack); padding: clamp(2.5rem, 5vw, 4.5rem) var(--s-card); border-radius: var(--r-lg); background: var(--sky); }
.crumbs { display: flex; gap: .4rem; font-size: var(--t-small); color: var(--ink-3); }
.crumbs a:hover { color: var(--accent); }
.crumbs li + li::before { content: "/"; margin-right: .4rem; }
.ctable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-small); }
.ctable th, .ctable td { padding: .85rem 1rem; text-align: center; border-bottom: 1px solid var(--line); }
.ctable th:first-child, .ctable td:first-child { text-align: left; color: var(--ink); }
.ctable thead th { font: 500 var(--t-body)/1.2 var(--font-head); color: var(--ink); vertical-align: bottom; }
.ctable thead small { display: block; font: 400 .75rem/1.4 var(--font-body); color: var(--ink-2); margin-top: .2rem; }
.ctable .is-pop { background: var(--accent-tint); }
.ctable thead .is-pop { border-radius: var(--r-sm) var(--r-sm) 0 0; }
.ctable .grp td { padding-top: 1.6rem; font: 500 .7rem/1 var(--font-head); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); border-bottom-color: transparent; }
.ctable .grp:hover td { background: none; }
.ctable td .ico { margin: 0 auto; color: var(--accent); }
.ctable td.no { color: var(--ink-3); }
.ctable tbody tr:hover td { background: rgba(235, 246, 255, .6); }
.ctable tbody tr:hover td.is-pop { background: #e6e2ff; }
.ctable-wrap { position: relative; overflow-x: auto; }   /* positioned, so the sr-only labels inside stay clipped */
.form { display: grid; gap: 1rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: grid; gap: .4rem; }
.field label { font: 500 var(--t-small)/1 var(--font-head); color: var(--ink); }
.field input, .field textarea, .field select { width: 100%; font: 400 var(--t-body)/1.4 var(--font-body); color: var(--ink); padding: .85rem 1rem; border: 0; border-radius: var(--r-sm); background: var(--paper); box-shadow: inset 0 0 0 1px #d3d8e0; transition: box-shadow .2s; }
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
/* the native select arrow sat almost on the right edge: own chevron with the same inset as the text */
.field select { -webkit-appearance: none; appearance: none; padding-right: 2.75rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%230c2a52' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px 8px; }
.field__err { display: none; font-size: .75rem; color: #b42318; }
.field.is-error input, .field.is-error textarea { box-shadow: inset 0 0 0 2px #e5484d; }
.field.is-error .field__err { display: block; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--t-small); }
.check input { width: 1.1rem; height: 1.1rem; margin-top: .15rem; accent-color: var(--accent); }
.form__done { display: grid; gap: .5rem; justify-items: start; padding: var(--s-card); border-radius: var(--r-sm); background: var(--accent-tint); color: var(--ink); }
.article { display: grid; gap: .7rem; align-content: start; }
.article__img { position: relative; overflow: hidden; border-radius: var(--r-lg); aspect-ratio: 16 / 10; background: var(--sky); }
.article__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.article:hover .article__img img { transform: scale(1.04); }
.article__meta { display: flex; gap: .6rem; align-items: center; font-size: .75rem; color: var(--ink-3); }
.article .h3 { transition: color .2s; }
.article:hover .h3 { color: var(--accent); }

/* =================== cookie notice (only if analytics cookies are set), 404 =================== */
.cookie { display: grid; gap: .8rem; max-width: 24rem; padding: 1.1rem 1.2rem; border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--sh-float); font-size: var(--t-small); }
.cookie__btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.cookie__btns button { height: 2.5rem; padding: 0 1rem; border-radius: 999px; font: 500 var(--t-small)/1 var(--font-head); background: var(--sky); color: var(--ink); }
.cookie__btns button:first-child { background: var(--ink); color: #fff; }
.e404 { display: grid; justify-items: center; gap: var(--s-stack); text-align: center; padding: clamp(3rem, 8vw, 6rem) var(--s-card); border-radius: var(--r-lg); background: var(--sky); }
.e404 b { font: 500 clamp(4rem, 12vw, 8rem)/1 var(--font-head); letter-spacing: -.05em; color: var(--accent); }

/* =================== header v2: floating glass pill on scroll, mega menus =================== */
.head-bar.is-scrolled { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.head-bar__in { position: relative; transition: height .35s var(--ease), margin .35s var(--ease), padding .35s var(--ease), background-color .35s, box-shadow .35s, border-radius .35s; border-radius: 0; }
.head-bar.is-scrolled .head-bar__in { margin-top: 10px; padding: 0 .45rem 0 1.2rem; border-radius: 999px;
  background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 12px 32px -18px rgba(12, 42, 82, .35), inset 0 0 0 1px rgba(255, 255, 255, .7), 0 0 0 1px rgba(12, 42, 82, .06); }
.head-bar__nav { align-items: center; }
.head-bar__nav button { display: inline-flex; align-items: center; gap: .3rem; padding: .5rem .8rem; border-radius: 999px; font: 500 var(--t-small)/1 var(--font-head); color: var(--ink); transition: background-color .2s; }
.head-bar__nav button .ico { width: .85rem; height: .85rem; transition: transform .3s var(--ease); }
.head-bar__nav button[aria-expanded="true"], .head-bar__nav button:hover { background: var(--sky); }
.head-bar__nav button[aria-expanded="true"] .ico { transform: rotate(180deg); }
/* Features / Teams: the word links to the page, the chevron opens the mega menu; one pill for the pair */
.head-bar__item { display: inline-flex; align-items: center; border-radius: 999px; transition: background-color .2s; }
.head-bar__item:hover, .head-bar__item:has([aria-expanded="true"]), .head-bar__item:has(a[aria-current="page"]) { background: var(--sky); }
.head-bar__nav .head-bar__item > a { padding-right: .15rem; background: none; }
.head-bar__nav .head-bar__item > button { padding-left: .2rem; padding-right: .7rem; background: none; }
.head-bar__menu-all { display: inline-flex; align-items: center; gap: .4rem; margin: .25rem 0 .5rem .4rem; font: 500 var(--t-small)/1.3 var(--font-head); color: var(--accent-ink); }
.head-bar__menu-all .ico { width: .9rem; height: .9rem; }
.mega { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 60; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 18rem; gap: .5rem 1.5rem; padding: 1.25rem;
  border-radius: var(--r-lg); background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: var(--sh-float), inset 0 0 0 1px rgba(255, 255, 255, .8), 0 0 0 1px rgba(12, 42, 82, .06); opacity: 0; transform: translateY(-6px); pointer-events: none; visibility: hidden; transition: opacity .25s, transform .35s var(--ease), visibility 0s .35s; }
.mega.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.mega__group { display: grid; gap: .2rem; align-content: start; }
.mega__group > p { font: 500 .7rem/1 var(--font-head); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: .4rem .6rem .5rem; }
.mega__link { display: grid; grid-template-columns: 2.5rem 1fr; gap: .1rem .75rem; align-items: center; padding: .55rem .6rem; border-radius: var(--r-sm); transition: background-color .2s; }
.mega__link:hover { background: var(--sky); }
.mega__link .icon-tile { grid-row: span 2; }
.mega__link b { font: 500 var(--t-small)/1.2 var(--font-head); color: var(--ink); }
.mega__link span { font-size: .75rem; line-height: 1.4; color: var(--ink-2); }
.mega__card { position: relative; overflow: hidden; border-radius: var(--r-sm); min-height: 14rem; display: flex; align-items: flex-end; padding: .8rem; }
.mega__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mega__card .glass { position: relative; max-width: none; padding: .7rem .85rem; gap: .3rem; }
.mega__card .glass b { font: 500 var(--t-small)/1.2 var(--font-head); }
.mega__card .glass span { font-size: .75rem; color: rgba(255, 255, 255, .85); }
.head-bar__menu details { border-bottom: 1px solid var(--line); }
.head-bar__menu summary { display: flex; justify-content: space-between; align-items: center; padding: .85rem .4rem; font: 500 var(--t-body)/1 var(--font-head); color: var(--ink); list-style: none; cursor: pointer; }
.head-bar__menu summary::-webkit-details-marker { display: none; }
.head-bar__menu details[open] summary .ico { transform: rotate(180deg); }
.head-bar__menu details .mega__link { padding-left: .4rem; }

/* =================== footer v2: statement + CTA, link columns, the wordmark as the last line =================== */
.foot2 { background: var(--stage); color: var(--on-stage); padding-top: var(--s-chapter); overflow: hidden; }   /* the footer is the last navy stage and takes over the close */
.foot2__top { width: min(var(--w), 100% - 2 * var(--gutter)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-head) clamp(2rem, 6vw, 6rem); }
.foot2__cta { display: grid; gap: var(--s-stack); align-content: start; justify-items: start; }
.foot2 .h2 { color: #fff; }
.foot2 .t2 { color: rgba(255, 255, 255, .55); }
.foot2 .link-arrow { color: #fff; }
.foot2 .link-arrow:hover { color: #b9b2ff; }
.foot2 .proof { justify-content: flex-start; color: var(--on-stage); }
.foot2 .proof .ico { color: #b9b2ff; }
.foot2__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-grid); }
.foot2__cols h3 { font: 500 .7rem/1 var(--font-head); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-bottom: 1rem; }
.foot2__cols ul { display: grid; gap: .65rem; }
.foot2__cols a { font: 500 var(--t-body)/1.3 var(--font-head); color: #fff; transition: color .2s; }
.foot2__cols a:hover { color: #b9b2ff; }
.foot2__word { width: min(var(--w), 100% - 2 * var(--gutter)); margin: var(--s-head) auto 0; padding-bottom: .1em; font: 500 clamp(6rem, 25vw, 22.5rem)/.78 var(--font-head); letter-spacing: -.07em; text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, rgba(133, 122, 255, .22) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; }
.foot2__bar { width: min(var(--w), 100% - 2 * var(--gutter)); margin-inline: auto; padding: 1.2rem 0 1.6rem; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; font-size: .75rem; color: rgba(255, 255, 255, .55); }
.foot2__bar nav { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-right: auto; }
.foot2__bar a:hover { color: #fff; }
/* review 2026-11-12: small links and dots get a 24px hit area without changing how they look */
.foot2__bar a, .announce a { display: inline-block; padding-block: .35rem; min-width: 24px; text-align: center; } /* SQE1-29: "AGB" is narrower than 24px */
.dots button::after { content: ""; position: absolute; inset: -9px -4px; }
.foot2 .ctl { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: none; }
.foot2 .ctl:hover { background: #fff; color: var(--ink); }

/* =================== label on images that are (probably) AI-generated =================== */
.ai-label { position: absolute; right: .55rem; bottom: .45rem; z-index: 4; display: inline-flex; align-items: center; gap: .3rem;
  font: 500 .625rem/1 var(--font-head); letter-spacing: .01em; color: rgba(255, 255, 255, .88); text-shadow: 0 1px 2px rgba(8, 26, 51, .55); pointer-events: none; }
.ai-label .ico { filter: drop-shadow(0 1px 1px rgba(8, 26, 51, .5)); }
.ai-label .ico { width: .7rem; height: .7rem; }
.card--photo > .ai-label, .stage--photo > .ai-label, .photo > .ai-label, .subhero-c > .ai-label { position: absolute; z-index: 4; }   /* beats the in-flow rules of those frames */

/* =================== voices v2 (structure until quotes are cleared) =================== */
.voices2__note { margin-top: .75rem; color: var(--ink-3); text-align: right; } /* SQE1-29 */
.voices2 { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); gap: var(--s-grid); }
.vcard { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: var(--s-card); border-radius: var(--r-lg); background: var(--sky); min-height: 22rem; }
.vcard blockquote { margin: 0; font: 500 var(--t-h3)/1.4 var(--font-head); letter-spacing: -.02em; color: var(--ink); }
.vcard footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: var(--t-small); }
.vcard footer b { display: block; color: var(--ink); font: 500 var(--t-small)/1.3 var(--font-head); }
.vcard__pic { width: 3.25rem; height: 3.25rem; border-radius: var(--r-sm); background: repeating-linear-gradient(135deg, #fff 0 6px, var(--accent-tint) 6px 12px); }
.vcard--logo { background: var(--accent-tint); justify-content: center; align-items: center; }
.vcard--logo span { width: 9rem; height: 2.5rem; border-radius: 8px; background: repeating-linear-gradient(135deg, #fff 0 6px, var(--accent-tint) 6px 12px); }

/* =================== subpage hero B (editorial) and C (photo) =================== */
.subhero-b__imgs { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-grid); margin-top: var(--s-head); }
.subhero-b__imgs > div { position: relative; overflow: hidden; border-radius: var(--r-lg); aspect-ratio: 3 / 2; }
.subhero-b__imgs > div:last-child { aspect-ratio: auto; }
.subhero-b__imgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.subhero-b__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: var(--s-stack); padding-top: var(--s-stack); border-top: 1px solid var(--line); }
.subhero-b__foot .proof { margin-left: auto; }
.subhero-c { position: relative; overflow: hidden; border-radius: var(--r-lg); min-height: clamp(26rem, 45vw, 36rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-grid); padding: var(--s-card); }
.subhero-c > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.subhero-c > :not(img) { position: relative; z-index: 1; }
.subhero-c .glass { max-width: 34rem; gap: .8rem; padding: 1.4rem 1.5rem 1.5rem; }
.subhero-c .glass .crumbs, .subhero-c .glass .crumbs a { color: rgba(255, 255, 255, .75); }
.subhero-c .glass .h2 { color: #fff; }
.subhero-c .glass .t2 { color: rgba(255, 255, 255, .7); }

/* =================== contact B (photo + product) and C (form + options) =================== */
.contact-b { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-grid); align-items: stretch; }
.contact-b .stage--photo { min-height: 34rem; flex-direction: column; justify-content: space-between; align-items: flex-start; }
.contact-c { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s-grid); }
.contact-c__opts { display: grid; gap: var(--s-grid); }
.contact-c__opts .card { justify-content: space-between; }

/* =================== side by side (replaces the drag compare): one task, two answers, the differences marked =================== */
.sbs__tasks { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: var(--s-stack); }
.sbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-grid); }
.sbs__pane { display: flex; flex-direction: column; gap: .9rem; padding: var(--s-card); border-radius: var(--r-lg); min-height: 21rem; }
.sbs__pane--off { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.sbs__pane--on { background: var(--sky); }
.sbs__pane .tag { align-self: flex-start; }
.sbs__out { font: 500 var(--t-h3)/1.4 var(--font-head); letter-spacing: -.02em; color: var(--ink); transition: opacity .2s; }
.sbs__pane--off .sbs__out { color: var(--ink-2); }
.sbs__out mark { background: none; color: inherit; border-radius: 4px; box-shadow: inset 0 -.45em 0 rgba(229, 72, 77, .16); }
.sbs__pane--on .sbs__out mark { box-shadow: inset 0 -.45em 0 rgba(133, 122, 255, .3); }
.sbs__list { display: grid; gap: .5rem; margin-top: auto; padding-top: .8rem; border-top: 1px solid rgba(12, 42, 82, .08); font-size: var(--t-small); }
.sbs__list li { display: flex; gap: .55rem; align-items: flex-start; }
.sbs__list .ico { margin-top: .25rem; }
.sbs__pane--off .sbs__list .ico { color: #e5484d; }
.sbs__pane--on .sbs__list .ico { color: var(--accent); }
[data-tpanel].is-swap { opacity: 0; }
[data-tpanel] { transition: opacity .2s; }

/* =================== stats B (photo + statement + counters) and C (statement left, tiles right) =================== */
.stats-b { position: relative; overflow: hidden; border-radius: var(--r-lg); min-height: clamp(26rem, 42vw, 34rem); display: grid; align-content: end; gap: var(--s-head); padding: clamp(1.5rem, 4vw, 3rem); color: #fff; }
.stats-b > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stats-b::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 42, 82, .25) 0%, rgba(12, 42, 82, .72) 45%, rgba(12, 42, 82, .9) 100%); z-index: 1; }  /* text sits on the lower half: keep it at AA contrast */
.stats-b > :not(img) { position: relative; z-index: 2; }
.stats-b > .ai-label { position: absolute; z-index: 4; }
.stats-b .h2 { color: #fff; max-width: 22em; }
.stats-b .h2 .t2 { color: rgba(255, 255, 255, .72); }
.stats-b .h2, .stats-b__row { text-shadow: 0 1px 12px rgba(8, 26, 51, .35); }
.stats-b__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-grid); }
.stats-b__row > div { display: grid; gap: .5rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .25); }
.stats-b b, .stats-c b { font: 500 clamp(2.75rem, 6vw, 4.5rem)/1 var(--font-head); letter-spacing: -.05em; }
.stats-b__row span { font: 500 .72rem/1.4 var(--font-head); letter-spacing: .05em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.stats-c { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-grid) clamp(2rem, 5vw, 4rem); align-items: center; }
.stats-c__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-grid); }
.stats-c__tiles > div { display: grid; gap: 2.5rem; align-content: space-between; min-height: 11rem; padding: var(--s-card); border-radius: var(--r-lg); background: var(--sky); }
.stats-c__tiles > div:nth-child(2), .stats-c__tiles > div:nth-child(3) { background: var(--accent-tint); }
.stats-c__tiles span { font: 500 .72rem/1.4 var(--font-head); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.stats-c b { color: var(--accent); }
[data-count-to] { font-variant-numeric: tabular-nums; }

/* =================== pricing card (homepage) =================== */
.plan__price { display: flex; align-items: baseline; gap: .3rem; color: var(--ink); }
.plan__price b { font: 500 3rem/1 var(--font-head); letter-spacing: -.04em; color: var(--accent); }
.plan .ticks li { font-size: var(--t-small); }
.plan.is-popular { box-shadow: inset 0 0 0 2px var(--accent); }

/* =================== close (the only other navy surface) =================== */
.close { position: relative; overflow: hidden; display: grid; justify-items: center; gap: var(--s-stack); text-align: center; padding: clamp(4rem, 8vw, 7.5rem) var(--s-card); border-radius: var(--r-lg); background: var(--stage); color: var(--on-stage); }
.close .h2 { color: #fff; }
.close--split { grid-template-columns: 1fr 1fr; justify-items: start; text-align: left; align-items: center; gap: clamp(2rem, 5vw, 4rem); padding: var(--s-card); padding-left: clamp(1.5rem, 5vw, 4.5rem); }
.close--split > div:first-child { display: grid; gap: var(--s-stack); justify-items: start; }
.close--split .photo { width: 100%; min-height: 24rem; }

/* =================== motion + responsive =================== */
@media (prefers-reduced-motion: reduce) { .shine { animation: none; } * { scroll-behavior: auto !important; } }
.hero__note { display: flex; align-items: center; justify-content: center; gap: .45rem; margin-bottom: var(--s-stack); font: 500 var(--t-small)/1.4 var(--font-head); color: var(--ink-2); }
.hero__note .ico { color: var(--accent); }
/* home-v6: the team slider ran across the full viewport width (owner 2026-11-12) and was taken back into the content
   column the same day (owner: "remove the overlapping"); the .slider--bleed rules are gone with it. */
/* ---- home-live (SQE1-15): the live site's sections 1:1 in our system ---- */
.lv-accent { color: var(--accent-ink); }
.lv-marquee { margin-top: var(--s-head); }
.hero__works { margin-top: var(--s-head); display: grid; gap: var(--s-stack); }
.hero__works-t { text-align: center; font: 500 var(--t-h3)/1.3 var(--font-head); color: var(--ink); }   /* intro-line size, as the live site's claim */
.lv-center { text-align: center; margin-top: var(--s-head); }
.lv-claim { text-align: center; font: 500 var(--t-h3)/1.3 var(--font-head); color: var(--ink); max-width: 46rem; margin: 0 auto var(--s-head); }
.lv-fslider .fslider__tabs { order: 0; }
.lv-fslider .fslider__stage { order: 1; }
.lv-stage { position: relative; display: grid; place-items: center; min-height: clamp(20rem, 46vw, 38rem); padding: clamp(1.5rem, 5vw, 4rem); border-radius: var(--r-lg); overflow: hidden;
  background: #1a0d10 url("/assets/img/live/features-bg.webp") center / cover no-repeat; box-shadow: var(--sh-float); }
.lv-stage > .lv-slide { width: 100%; }
.lv-stage video { display: block; width: 100%; height: auto; border-radius: var(--r-sm); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.lv-stage > .fslider__pause { position: absolute; top: var(--s-card); right: var(--s-card); z-index: 3; width: 2.25rem; height: 2.25rem; background: rgba(255, 255, 255, .9); box-shadow: none; }
.lv-features .slider__track { grid-auto-columns: calc((100% - 2 * var(--s-grid)) / 3); }
.lv-features__ctl { justify-content: center; margin: var(--s-stack) 0 0; gap: 1rem; }
.lv-fcard { display: flex; flex-direction: column; align-items: center; gap: .7rem; padding: var(--s-card) var(--s-card) 0; border-radius: var(--r-lg); background: var(--sky); text-align: center; overflow: hidden; }
.lv-fcard p { font-size: var(--t-small); color: var(--ink-2); }
.lv-fcard img { width: 100%; height: auto; margin-top: auto; border-radius: var(--r-sm) var(--r-sm) 0 0; }
.lv-pill { padding: .25rem .7rem; border-radius: 999px; background: var(--stage); color: #fff; font: 500 .72rem/1 var(--font-head); }
.lv-headrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-stack); margin-bottom: var(--s-head); }
.lv-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem) var(--s-grid); }
.lv-benefit { display: grid; grid-template-columns: 1.6rem 1fr; gap: .9rem; align-items: start; }
.lv-benefit__ico { color: var(--accent); padding-top: .15rem; }
.lv-benefit h3 { font: 500 var(--t-body)/1.3 var(--font-head); color: var(--ink); margin-bottom: .35rem; }
.lv-benefit p { font-size: var(--t-small); color: var(--ink-2); line-height: 1.6; }
.lv-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-grid); }
.lv-compare article { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .8rem; padding: var(--s-card); border-radius: var(--r-lg); }
.lv-compare__off { background: var(--stage); color: var(--on-stage); }
.lv-compare__off .h3 { color: #fff; }
.lv-compare__on { background: var(--sky); color: var(--ink-2); }
.lv-compare ul { display: grid; gap: .55rem; font-size: var(--t-small); }
.lv-compare li { display: flex; gap: .55rem; align-items: center; }
.lv-compare__off li .ico { color: rgba(255, 255, 255, .55); }
.lv-compare__on li .ico { color: var(--accent); }
.lv-eyebrow { font-size: var(--t-small); opacity: .85; }
.lv-compare__win { margin-top: auto; box-shadow: var(--sh-float); }
.lv-compare__win .win__body { display: grid; gap: .45rem; padding: .9rem 1rem; }
.lv-compare__win--off { opacity: .9; }
.lv-compare__win--off .row { text-decoration: line-through; text-decoration-color: rgba(12, 42, 82, .25); }
.lv-compare__win--off .row .tag { text-decoration: none; }
.lv-compare__img { width: min(13rem, 60%); margin-top: auto; padding-top: var(--s-stack); border-radius: var(--r-sm); }
.lv-compare__mark { position: absolute; right: -2rem; top: -2rem; width: 12rem; opacity: .55; pointer-events: none; }
.lv-compare__ex { display: grid; grid-template-columns: 11rem 1fr; gap: var(--s-stack); align-items: center; margin-top: auto; padding-top: var(--s-stack); }
.lv-compare__ex img { width: 100%; aspect-ratio: 225 / 260; object-fit: cover; border-radius: var(--r-sm); }
.lv-compare__ph { position: relative; display: block; }
.lv-compare__ph > .ai-label { position: absolute; z-index: 4; }
.lv-compare__ex--off .small { color: var(--on-stage); opacity: .75; }
.lv-ex { font-size: .78rem !important; gap: .35rem !important; margin-top: .4rem; }
.lv-stepimg img { width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--sh-float); }
.lv-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-grid); }
.lv-plan { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .5rem; padding: var(--s-card); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--sh-raise); text-align: left; }
.lv-plan .h3 { text-align: center; }
.lv-plan__desc { font-size: var(--t-small); color: var(--ink-2); min-height: 3.2em; }
.lv-price { display: flex; align-items: baseline; gap: .25rem; color: var(--accent); }
.lv-price b { font: 500 3rem/1 var(--font-head); letter-spacing: -.04em; }
[data-ui~="billing"]:has([data-period="monthly"][aria-pressed="true"]) .lv-save { visibility: hidden; }   /* "save x %" only next to yearly prices, as live */
.lv-save { margin-left: .6rem; font: 500 var(--t-small)/1 var(--font-head); font-style: normal; color: var(--accent); }
.lv-plan ul { display: grid; gap: 0; margin: .6rem 0 1rem; font-size: var(--t-small); }
.lv-plan li { display: flex; gap: .5rem; align-items: center; padding: .65rem 0; border-top: 1px solid var(--line); }
.lv-plan li .ico { color: var(--accent); }
.lv-plan__cta { margin-top: auto; display: grid; justify-items: center; gap: .6rem; text-align: center; }
.lv-plan--pop { background: var(--stage); color: var(--on-stage); }
.lv-plan--pop .h3, .lv-plan--pop .lv-price, .lv-plan--pop .lv-save { color: #fff; }
.lv-plan--pop .lv-plan__desc, .lv-plan--pop .small { color: var(--on-stage); }
.lv-plan--pop li { border-color: rgba(255, 255, 255, .14); }
.lv-ribbon { position: absolute; top: 1.1rem; right: -2.4rem; width: 9rem; padding: .3rem 0; transform: rotate(45deg); background: var(--accent); color: #fff; text-align: center; font: 500 .72rem/1 var(--font-head); }
.lv-enterprise { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-grid); align-items: start; margin-top: var(--s-head); }
.lv-enterprise .h2 { color: var(--accent-ink); }
.lv-enterprise ul { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin: .8rem 0 1rem; font-size: var(--t-small); }
.lv-enterprise li { display: flex; gap: .4rem; align-items: center; }
/* ---- home-v6: three ideas from BYQ Supply, own implementation ---- */
/* A headline focus reveal */
@media (prefers-reduced-motion: no-preference) {
  .v6 .h2.is-armed .w { display: inline-block; opacity: .12; filter: blur(6px); transform: translateY(.18em); transition: opacity .6s var(--ease), filter .6s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i) * 45ms); }
  .v6 .h2.is-armed.is-in .w { opacity: 1; filter: none; transform: none; }
}
/* B step progress */
.steprow__n::after { content: ""; display: block; width: 4.5rem; height: 3px; margin-top: .85rem; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) calc(var(--p, 1) * 100%), var(--line) 0); }
/* C spotlight cards */
.v6 .bento--2x2 > .card:not(.card--photo), .v6 .vcard--v6 { position: relative; isolation: isolate; }   /* the quote cards share the bento glow (owner 2026-11-12) */
.v6 .bento--2x2 > .card:not(.card--photo)::before, .v6 .vcard--v6::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity .35s var(--ease);
  background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 50%), rgba(133, 122, 255, .16), transparent 65%); }
.v6 .bento--2x2 > .card--stage::before { background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .1), transparent 65%) !important; }
@media (hover: hover) { .v6 .bento--2x2 > .card:not(.card--photo):hover::before, .v6 .vcard--v6:hover::before { opacity: 1; } }
/* ---- home-v6: three steps in the live site's format ---- */
.steps-rows { display: grid; gap: clamp(3rem, 8vw, 7rem); }
.steprow { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; min-height: clamp(24rem, 56vh, 34rem); }
.steprow--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.steprow--flip > .steprow__text { order: 2; }
.steprow__text { display: grid; gap: var(--s-stack); justify-items: start; }
/* our numbering: the accent step number of the scene beats, with the progress bar below */
.steprow__n { font: 500 var(--t-small)/1 var(--font-head); letter-spacing: .02em; color: var(--accent-ink); }
.steprow__n::after { margin-top: .7rem; }
/* our two-tone title, one step below a chapter head */
.steprow__t { font: 500 clamp(1.6rem, calc(1.6rem + .9rem * (100vw - 22.5rem) / 77.5rem), 2.5rem)/1.08 var(--font-head); letter-spacing: -.04em; color: var(--ink); }
.steprow__t .t2 { display: block; color: var(--ink-3); }
.steprow__text > p:not(.steprow__n) { max-width: 30rem; color: var(--ink-2); }
.steprow__text .link-arrow { padding-inline: 0; }
/* one stage language: the navy dot grid of the persona panel */
.steprow__visual { position: relative; overflow: hidden; display: grid; place-items: center; padding: clamp(1.5rem, 4vw, 3.25rem); border-radius: var(--r-lg);
  background-color: var(--stage); background-image: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1.3px); background-size: 18px 18px; box-shadow: var(--sh-float); }
.steprow__visual > img { position: relative; z-index: 1; width: 100%; height: auto; border-radius: var(--r-sm); box-shadow: var(--sh-float); translate: 0 var(--py, 0px); }
.steprow--flip .steprow__visual > img:not(.steprow__photo) { width: min(100%, 34rem); }
.steprow__visual--photo { padding: 0; min-height: clamp(22rem, 40vw, 32rem); background-image: none; }
.steprow__visual--photo > .steprow__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; translate: none; scale: var(--ps, 1); }
.steprow__card { position: absolute; z-index: 2; right: var(--s-card); bottom: var(--s-card); width: min(22rem, 78%); box-shadow: var(--sh-float); translate: 0 var(--py, 0px); }
.steprow__card .win__body { display: grid; gap: .5rem; padding: 1rem 1.1rem; }
.steprow__card-t { font: 500 var(--t-lead)/1.2 var(--font-head); color: var(--ink); }
.steprow__visual--photo > .ai-label { position: absolute; z-index: 3; top: .5rem; bottom: auto; }
/* motion: the text rises in line by line, the stage opens from a slightly inset frame; the scroll then moves the
   screenshot or card a little against the stage (parallax, set in ui.js). All off with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .steps-rows.is-armed .steprow__text > * { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .7s var(--ease); }
  .steps-rows.is-armed .steprow.is-in .steprow__text > * { opacity: 1; transform: none; }
  .steps-rows.is-armed .steprow.is-in .steprow__text > :nth-child(2) { transition-delay: .08s; }
  .steps-rows.is-armed .steprow.is-in .steprow__text > :nth-child(3) { transition-delay: .16s; }
  .steps-rows.is-armed .steprow.is-in .steprow__text > :nth-child(4) { transition-delay: .24s; }
  .steps-rows.is-armed .steprow__visual { clip-path: inset(6% 6% 6% 6% round var(--r-lg)); opacity: .4; transition: clip-path 1s var(--ease), opacity .8s var(--ease); }
  .steps-rows.is-armed .steprow.is-in .steprow__visual { clip-path: inset(0 0 0 0 round var(--r-lg)); opacity: 1; }
}
/* ---- home-v6 (owner 2026-11-12): accent second tone, equal step stages, hero gap ---- */
.v6 main .h2 .t2, .v6 main .h-display .t2, .v6 .steprow__t .t2 { color: var(--accent-ink); }   /* chapter headings: second tone in accent */
.v6 .foot2__cta .h2 .t2 { color: #b8b1ff; }
.v6 #benefits { padding-top: calc(var(--s-chapter) * 1.13); }   /* the hero ends on the marquee, which sits tighter than a chapter end */                             /* the same accent, lightened for navy (contrast ≥ 7:1) */
.v6 .steprow__visual { height: clamp(17rem, 34vw, 30rem); }            /* all three stages one height */
.v6 .steprow__visual--photo { min-height: 0; }
.v6 .steprow__visual > img:not(.steprow__photo) { width: auto; max-width: 100%; max-height: 100%; object-fit: contain; }   /* screenshots only — the step-3 photo keeps cover */
/* ---- home-v6 round 8: motion pass ---- */
/* 2 the description of a beat opens and closes softly instead of snapping (it pushed every beat below by ~64 px) */
.beat__p { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s var(--ease), opacity .35s var(--ease); }
.beat__p > span { overflow: hidden; min-height: 0; }
.beat.is-on .beat__p { display: grid; grid-template-rows: 1fr; opacity: 1; }
/* 3 the product window in the scene enters like the board panels do */
@media (prefers-reduced-motion: no-preference) {
  .stage--story .stage__panels > [data-panel]:not([hidden]) { animation: board-in .45s var(--ease) both; }
}
@media (prefers-reduced-motion: reduce) { .beat__p { transition: none; } }
/* ---- home-v6 round 7: hero with the persona panel; beats that dock from below ---- */
.hero--panel .hero__stage { margin-top: var(--s-head); }
.hero--panel .h-display { max-width: 15em; }
.scene.is-scroll .beats { gap: 1.25rem; }   /* more air between the beats as they dock in (owner 2026-11-12) */
.scene.is-scroll .beats > li { transition: none; will-change: transform, opacity; }
/* ---- home-v6 round 6: tabs inside the hero image, mobile logo row ---- */
.stage--photo > .fslider__tabs--over { position: absolute; left: var(--s-card); right: var(--s-card); bottom: var(--s-card); z-index: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.fslider__tabs--over .fslider__tab { background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
.fslider__tabs--over .fslider__tab[aria-selected="true"] { background: rgba(255, 255, 255, .95); }
.fslider__tabs--over .fslider__tab p { display: block; }
.v6 .fslider.fslider--row .fslider__stage { min-height: clamp(26rem, 46vw, 38rem); }
.v6 .hero__stage .stage--photo > .fslider__slide { align-items: flex-start; padding-top: calc(var(--s-card) + 2.75rem); }
.logo-row.orbit__mobile { display: none; }   /* .logo-row (v5) sets flex later in the file — needs the higher weight */
/* ---- home-v6 round 4: the tool field (rise + fade, three depths) ---- */
.orbit--field .orbit__field { position: absolute; inset: 0; transition: opacity 1.4s var(--ease); }
.orbit--field.is-armed .orbit__field { opacity: 0; }
.orbit--field.is-armed.is-in .orbit__field { opacity: 1; }
.orbit--field .orbit__tile { left: var(--x); top: var(--y); height: 2.75rem; padding: 0 .9rem; scale: calc(.72 + var(--d) * .32);
  opacity: calc(.35 + var(--d) * .65); filter: blur(calc((1 - var(--d)) * 1.2px)); animation: none; will-change: transform, opacity; }
.orbit--field .orbit__tile img { height: 1.15rem; }
@media (prefers-reduced-motion: no-preference) {
  .orbit--field .orbit__tile { animation: field-rise var(--dur) linear var(--delay) infinite; }
}
@keyframes field-rise {
  0% { transform: translateY(80px); opacity: 0; }
  18% { opacity: calc(.35 + var(--d) * .65); }
  82% { opacity: calc(.35 + var(--d) * .65); }
  100% { transform: translateY(-80px); opacity: 0; }
}
/* ---- home-v6 round 2 (SQE1-15) ---- */
.head-bar.is-scrolled { top: 10px; }
.v6 .hero { padding-bottom: 0; }          /* the next chapter's top padding is the gap — same as between all chapters */
.rolepanel__tabs { align-items: center; }
.rolepanel__tablist { display: contents; }
.rolepanel__all { display: inline-flex; flex: none; align-items: center; gap: .35rem; height: 2rem; padding: 0 .9rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22);
  color: var(--on-stage); font: 500 var(--t-ui)/1 var(--font-head); white-space: nowrap; text-decoration: none; transition: background-color .2s, color .2s, border-color .2s; }
.rolepanel__all svg { width: .95em; height: .95em; transition: translate .2s var(--ease); }
.rolepanel__all:hover, .rolepanel__all:focus-visible { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .4); color: #fff; }
.rolepanel__all:hover svg { translate: 2px 0; }
.rolepanel__tabs [data-tab] { position: relative; overflow: hidden; isolation: isolate; }
.rolepanel__tabs [data-tab]::before { content: ""; position: absolute; inset: 0; z-index: -1; transform-origin: left; transform: scaleX(var(--t, 0)); background: rgba(133, 122, 255, .55); }
.rolepanel__tabs [data-tab][aria-selected="true"] { background: rgba(133, 122, 255, .28); color: #fff; }
.rolepanel__tabs .ctl { width: 2rem; height: 2rem; padding: 0; margin-left: auto; background: rgba(255, 255, 255, .08); color: #fff; box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .rolepanel__panel.is-in .rolepanel__card { animation: board-in .5s var(--ease) both; }
  .rolepanel__panel.is-in .win { animation: board-in .55s var(--ease) both .1s; }
  .rolepanel__panel.is-in .win .row { animation: board-in .5s var(--ease) both; }
  .rolepanel__panel.is-in .win .row:nth-of-type(1) { animation-delay: .25s; }
  .rolepanel__panel.is-in .win .row:nth-of-type(2) { animation-delay: .4s; }
  .rolepanel__panel.is-in .win .row:nth-of-type(3) { animation-delay: .55s; }
}
.card--tall { display: flex; min-height: 28rem; }
.ph-lead { object-position: 50% 25%; } .ph-meeting { object-position: 50% 45%; }
/* ---- home-v6 (SQE1-15): the owner's selection ---- */
.head--wide { grid-template-columns: 1.5fr 1fr; }
.head--wide .h2 { max-width: none; }
.rolepanel--46 .rolepanel__panel { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
.bento--2x2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bento--2x2 > .card--wide { grid-column: span 2; }
.bento--2x2 > .card--span2 { grid-column: span 2; }
.bento--2x2 > .card--full { grid-column: 1 / -1; }   /* third row: the context card spans all columns */
.card--slide { display: flex; min-height: 25rem; }
.chip--tl { top: var(--s-card); left: var(--s-card); }
.chip--bl { bottom: var(--s-card); left: var(--s-card); }
.vcard--v6 { margin: 0; }
.vcard--v6 blockquote { margin-bottom: auto; font-size: var(--t-lead); line-height: 1.5; }   /* real quotes are longer than the placeholders were: one step smaller, starting at the top */
.head--line { max-width: none; }
.head--line .h2 { max-width: none; }
.foot2__top:has(> div:empty) { grid-template-columns: 1fr; padding-top: 0; }   /* footer without its own CTA (hideFootCta): the link columns take the row */
.foot2__top > div:empty { display: none; }
.vcard__img { width: 3.25rem; height: 3.25rem; border-radius: var(--r-sm); object-fit: cover; }
.orbit--live .orbit__tile { will-change: transform; }
/* ---- home-v5 (SQE1-15): n8n's section grammar, sqemes' own content ---- */
.hero--wide .hero__text { max-width: 46rem; }
.hero--wide .board { margin-top: var(--s-head); }
.logo-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.25rem 3rem; margin-top: var(--s-head); }
.logo-row p { width: 100%; text-align: center; font-size: var(--t-small); color: var(--ink-2); }
.logo-row img { height: 1.6rem; width: auto; opacity: .75; filter: grayscale(1); }
.rolepanel { border-radius: var(--r-lg); background: var(--stage); color: var(--on-stage); padding: clamp(1rem, 2.5vw, 1.5rem); box-shadow: var(--sh-float); }
.rolepanel__tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: clamp(1rem, 2.5vw, 1.5rem); }
.rolepanel__tabs button { height: 2rem; padding: 0 .9rem; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--on-stage); font: 500 var(--t-ui)/1 var(--font-head); transition: background-color .2s, color .2s; }
.rolepanel__tabs button[aria-selected="true"] { background: var(--accent); color: #fff; }
.rolepanel__panel { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1rem, 2.5vw, 1.5rem); min-height: clamp(24rem, 34vw, 30rem); }
.rolepanel__card { display: flex; flex-direction: column; gap: .8rem; }
.rolepanel__card .photo { min-height: 0; aspect-ratio: 4 / 3; }
.rolepanel__card h3 { color: #fff; }
.rolepanel__card p { color: var(--on-stage); }
.rolepanel__card .link-arrow { color: #fff; padding: 0; margin-top: auto; }
.rolepanel .board { background-color: var(--stage-2); box-shadow: none; min-height: 0; }
.chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-grid); }
.chips > div { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.2rem; border-radius: 999px; background: var(--sky); font: 500 var(--t-small)/1.35 var(--font-head); color: var(--ink); }
.orbit { position: relative; min-height: clamp(26rem, 40vw, 34rem); display: grid; place-items: center; }
.orbit .breaker { position: relative; z-index: 1; }
.orbit__tile { position: absolute; height: 3.25rem; padding: 0 1.1rem; display: grid; place-items: center; border-radius: 999px; background: #fff; box-shadow: var(--sh-raise); }
.orbit__tile img { height: 1.35rem; width: auto; max-width: none; }
@media (prefers-reduced-motion: no-preference) { .orbit__tile { animation: drift 7s ease-in-out infinite alternate; } .orbit__tile:nth-child(2n) { animation-duration: 9s; } }
@keyframes drift { to { transform: translateY(-10px); } }
.people2 { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.people2 .photo { min-height: clamp(22rem, 34vw, 30rem); }
.people2__card { margin-top: var(--s-stack); padding: var(--s-card); border-radius: var(--r-lg); background: var(--sky); display: grid; gap: .7rem; color: var(--ink-2); }
.people2__card b { color: var(--ink); font-weight: 500; }
.ent-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-grid); margin-top: var(--s-head); }
.ent-cards > article { display: flex; flex-direction: column; gap: .6rem; min-height: 17rem; padding: var(--s-card); border-radius: var(--r-lg); background: var(--stage); color: var(--on-stage); }
.ent-cards .icon-tile { width: 3rem; height: 3rem; background: rgba(255, 255, 255, .08); color: #fff; margin-bottom: auto; }
.ent-cards h3 { color: #fff; font: 500 var(--t-lead)/1.25 var(--font-head); }
.ent-cards p { font-size: var(--t-small); }
.close2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.close2 .photo { min-height: clamp(22rem, 34vw, 30rem); }
.close2 .stack { justify-items: start; }
/* ---- home-v4 (SQE1-15): the dark anchor and the merged critique; scoped to body.v4 where it changes tone ---- */
.v4 { --ink: #0a1d3a; --ink-3: rgba(10, 29, 58, .66); }   /* .66 since the review 2026-11-12 (.58 gave 4.2:1 on small meta text) */
.v4 .h-display, .v4 .h2 { font-weight: 600; letter-spacing: -.045em; }
.hero--split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 4rem); align-items: center;
  min-height: calc(100svh - 7.5rem); padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 4vw, 3.5rem); }
.hero--split .hero__visual { margin: 0; min-height: clamp(22rem, 34vw, 32rem); }
.hero--split .hero__visual .win { width: min(24rem, 100%); }
.hero__band { margin-top: 0; }
.showcase { background: var(--stage); color: var(--on-stage); padding-block: var(--s-chapter); overflow: hidden; }
.showcase .breaker .h2 { color: #fff; }
.showcase .breaker .h2 .t2 { color: rgba(255, 255, 255, .62); }
.showcase .breaker .lead { color: var(--on-stage); }
.showcase__frames { position: relative; width: min(var(--w), 100% - 2 * var(--gutter)); margin: var(--s-head) auto 0; padding-bottom: 9%; }
.browser { border-radius: var(--r-lg); overflow: hidden; background: #fff; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08); }
.browser__bar { display: flex; align-items: center; gap: .4rem; height: 2rem; padding-inline: .9rem; background: #eef1f6; }
.browser__bar i { width: .6rem; height: .6rem; border-radius: 50%; background: #cfd5df; }
.browser__bar span { margin-left: .8rem; font: 500 .7rem/1 var(--font-head); color: #6b7a90; }
.browser img { display: block; width: 100%; height: auto; }
.showcase__frames > .browser:first-child { width: 78%; }
.showcase__frames > .browser + .browser { position: absolute; right: 0; bottom: 0; width: 56%; }
.showcase__note { width: min(var(--w), 100% - 2 * var(--gutter)); margin: 1rem auto 0; font-size: var(--t-small); color: rgba(201, 214, 234, .7); text-align: right; }
.chapter--showcase { padding: 0; width: 100%; }
.voice-lead { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.voice-lead .photo { min-height: 0; aspect-ratio: 1; max-width: 26rem; }
.voice-lead blockquote { margin: 0; font: 600 clamp(1.5rem, calc(1.5rem + 1rem * (100vw - 22.5rem) / 77.5rem), 2.5rem)/1.25 var(--font-head); letter-spacing: -.03em; color: var(--ink); }
.voice-lead figcaption { margin-top: var(--s-stack); font-size: var(--t-small); color: var(--ink-2); }
.voice-lead figcaption b { display: block; color: var(--ink); font: 500 var(--t-body)/1.3 var(--font-head); }
.voice-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-grid); margin-top: var(--s-head); padding-top: var(--s-head); border-top: 1px solid var(--line); }
.voice-row figure { margin: 0; display: grid; gap: .8rem; align-content: start; }
.voice-row blockquote { margin: 0; font: 500 var(--t-lead)/1.45 var(--font-head); color: var(--ink); }
.voice-row figcaption { display: flex; align-items: center; gap: .7rem; font-size: var(--t-small); color: var(--ink-2); }
.voice-row figcaption img { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; }
.voice-row figcaption b { display: block; color: var(--ink); font-weight: 500; }
.v4 .ai-label--inline { position: static; color: var(--ink-2); text-shadow: none; }
.voice-row__note { margin-top: var(--s-stack); }
.v4 #roles .scene__hint, .v4 #trust .scene__hint { display: none; }   /* the hint once, in the first scene */
/* ---- home-v2 (SQE1-15): one object on one board, two chapter types ---- */
.board { position: relative; display: flex; flex-direction: column; gap: var(--s-stack); min-height: clamp(24rem, 38vw, 32rem); padding: var(--s-card); border-radius: var(--r-lg); overflow: hidden;
  background-color: var(--stage); background-image: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1.3px); background-size: 18px 18px; color: var(--on-stage); box-shadow: var(--sh-float); }
.board__bar { display: flex; flex-wrap: wrap; gap: .4rem; }
/* the dot grid of the hero board on exactly two more navy surfaces of "/" (owner 2026-11-12, after the "everywhere"
   version was taken back): the navy bento card and the "Without" card. Placed after both, so their `background:`
   shorthands cannot reset it. */
.v6 .bento--2x2 > .card--stage, .v6 .lv-compare__off { background-image: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1.3px); background-size: 18px 18px; }
.board__bar .tag { background: rgba(255, 255, 255, .08); color: var(--on-stage); }
.board__bar .tag[aria-current="true"] { background: var(--accent); color: #fff; }
.board__panels { flex: 1; display: grid; place-items: center; }
.board__panels > .win, .board__slot .win { width: min(30rem, 100%); box-shadow: var(--sh-float); font-size: var(--t-small); }
.board--flow { display: grid; grid-template-columns: minmax(0, 1fr) clamp(3rem, 7vw, 6.5rem) minmax(0, 1.15fr); align-items: center; padding: clamp(1.5rem, 4vw, 3.5rem); }
.board__source { box-shadow: var(--sh-float), 0 0 0 4px rgba(133, 122, 255, .35); }
.board__wire { position: relative; height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .4) 0 6px, transparent 6px 12px); }
.board__wire::after { content: ""; position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(133, 122, 255, .3); }
@media (prefers-reduced-motion: no-preference) { .board__wire::after { animation: wire 2.4s var(--ease) infinite; } }
@keyframes wire { from { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { left: calc(100% - 10px); opacity: 0; } }
.board__slot { position: relative; align-self: stretch; min-height: 14rem; }
.board__slot > .fslider__slide { position: absolute; inset: 0; display: grid; place-items: center; }
.board .win__body { display: flex; flex-direction: column; gap: .6rem; padding: 1.1rem 1.2rem; }
.board > .fslider__pause { position: absolute; top: var(--s-card); right: var(--s-card); z-index: 3; width: 2.25rem; height: 2.25rem; background: rgba(255, 255, 255, .12); color: #fff; box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .board__panels > [data-panel]:not([hidden]), .board__slot > .fslider__slide:not([hidden]) > .win { animation: board-in .5s var(--ease) both; }
}
@keyframes board-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.breaker { display: grid; justify-items: center; gap: var(--s-stack); max-width: 48rem; margin-inline: auto; text-align: center; }
.breaker .h2 { font-size: clamp(2rem, calc(2rem + 1.25rem * (100vw - 22.5rem) / 77.5rem), 3.25rem); }
.breaker .h2 .t2 { display: block; }
.breaker + * { margin-top: var(--s-head); }
.chapter--breaker { padding-block: calc(var(--s-chapter) * 1.1); }
.chapter + .chapter--breaker { padding-top: calc(var(--s-chapter) * .3); }
.scene--feature .h2 .t2 { display: block; }
.scene--feature .h2 { font-size: clamp(1.6rem, calc(1.6rem + .9rem * (100vw - 22.5rem) / 77.5rem), 2.5rem); }
.scene--3.is-scroll { height: calc(100vh + 2 * 45vh); }
.numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-grid); width: 100%; }
.numbers > div { display: grid; gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--line); text-align: left; }
.numbers b { font: 500 clamp(2.75rem, 6vw, 4.5rem)/1 var(--font-head); letter-spacing: -.05em; color: var(--ink); }
.numbers span { font-size: var(--t-small); color: var(--ink-2); }
.people { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.people .photo { min-height: clamp(22rem, 36vw, 32rem); }
.people .h2 .t2 { display: block; }
.voices3 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-grid); }
.voices3 .vcard { margin: 0; min-height: 0; gap: 1.25rem; justify-content: flex-start; }
.voices3 .vcard blockquote { font-size: var(--t-lead); line-height: 1.45; flex: 1; }
.voices3 .vcard footer { justify-content: flex-start; }
.voices3 .vcard footer b { margin-bottom: .15rem; }
.vcard__flag { align-self: flex-start; }
.photo--sq { min-height: 0; aspect-ratio: 1; }
.tag--warn { background: #fff1c2; color: #6b4e00; }
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-grid); text-align: left; }
.steps3 h3 { margin-bottom: .4rem; }
.plan__vat { margin-top: var(--s-stack); text-align: center; }
/* SQE1-16 pricing page: split head, the switch on its own row, Enterprise as a wide card, "not included" as a quiet dot */
.pricing-hero { display: grid; gap: var(--s-stack); padding-top: clamp(2rem, 5vw, 4rem); }
.pricing-hero__t { font-size: clamp(2.25rem, 5vw, 4rem); }
.pricing-plans { padding-top: clamp(2.5rem, 5vw, 4rem); }
.pricing-plans__bar { display: flex; justify-content: center; margin-bottom: var(--s-head); }
.pricing-plans__bar .seg .tag { height: auto; padding: .15rem .45rem; font-size: .72rem; }
.pricing-grid > .pricing-ent { grid-column: 1 / -1; }
.pricing-ent__tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.pricing-ent__tags .tag { background: var(--paper); }
.pricing-ent .link-arrow { padding-inline: 0; }
.ctable__no { display: inline-block; width: .35rem; height: .35rem; border-radius: 50%; background: var(--line); vertical-align: middle; }
.pricing-self .link-arrow { color: #fff; padding-inline: 0; margin-top: auto; }
.pricing-self .icon-tile { background: rgba(133, 122, 255, .28); color: #fff; }
@media (max-width: 991px) {
  .pricing-grid > .pricing-ent .card__ui { order: 2; }   /* text first, then the tags (beats the generic .card--wide rule further down) */
}
@media (max-width: 767px) {
  /* the table keeps its columns and scrolls sideways; the feature names stay in view */
  .pricing-table .ctable { min-width: 40rem; }
  .pricing-table .ctable th:first-child, .pricing-table .ctable td:first-child { position: sticky; left: 0; z-index: 1; width: 9.5rem; background: var(--paper); box-shadow: 1px 0 0 var(--line); }
  .pricing-table .ctable tr.grp td { position: static; width: auto; box-shadow: none; background: none; }
  .pricing-table .ctable tr.grp td span { position: sticky; left: 1rem; }   /* the group label rides along with the names */
  .pricing-table__hint { display: block; }
}
.pricing-table__hint { display: none; margin-bottom: .6rem; }
/* SQE1-17 teams page: hero B, a row of jump links, one step row per team with a persona card */
.teams-hero { display: grid; gap: var(--s-stack); padding-top: clamp(2rem, 5vw, 4rem); }
.teams-hero .subhero-b__imgs { margin-top: var(--s-stack); }
.teams-hero__t { font-size: clamp(2.25rem, 5vw, 4rem); }
.teams-list { padding-top: clamp(2.5rem, 5vw, 4rem); }
.teamnav { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(3rem, 7vw, 6rem); }
.teamnav a { display: inline-flex; align-items: center; height: 2.25rem; padding: 0 1rem; border-radius: 999px; background: var(--sky); color: var(--ink); font: 500 var(--t-small)/1 var(--font-head); transition: background-color .2s, color .2s; }
.teamnav a:hover, .teamnav a:focus-visible { background: var(--accent-tint); color: var(--accent-ink); }
.teamrow, .teamrow__alias { scroll-margin-top: 7rem; }
/* SQE1-18 features page (v2, Baukasten parts): anchor targets for the menu, the bento cards as jump targets,
   and the stats band keeps its light second tone on the dark photo */
.feat-anchor { display: block; position: relative; top: -7rem; height: 0; }
/* SQE1-19 contact page: the direct ways as a small list, the consent box shows its error like a field */
.contact-page { padding-top: clamp(2.5rem, 5vw, 4rem); }
.contact-list { display: grid; gap: .7rem; margin-top: .4rem; font-size: var(--t-small); }
.contact-list li { display: grid; gap: .1rem; }
.contact-list li > span { font: 500 .72rem/1.2 var(--font-head); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.field--check .field__err { margin-top: .3rem; }
/* SQE1-19 shared contact form: the honeypot is off-screen (not display:none, which some bots skip), the failure note sits above the button */
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform form { position: relative; }
.cform__fail { padding: .8rem 1rem; border-radius: var(--r-sm); background: #fdecec; color: #8a1c14; font-size: var(--t-small); }
.cform button[disabled] { opacity: .7; cursor: progress; }
/* SQE1-21/22/23 Enterprise, Partners, Publisher: two compare cards side by side, numbered step cards, the Cloud note */
.ent-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-grid); }
.ent-compare .card { gap: .9rem; justify-content: flex-start; }
.ent-compare .ticks { margin-block: .2rem .4rem; }
.ent-compare .link-arrow { height: auto; padding: 0; margin-top: auto; }
.pub-steps { list-style: none; padding: 0; }
.pub-steps .steprow__n { margin: 0; }
.pub-cloud { margin-top: var(--s-grid); }
@media (max-width: 900px) { .ent-compare { grid-template-columns: 1fr; } }
/* SQE1-24/25 subpages: the related cards are whole links */
.sp-related__card { color: inherit; transition: transform .25s var(--ease), box-shadow .25s; }
.sp-related__card:hover { transform: translateY(-3px); box-shadow: var(--sh-raise); }
.sp-related__card:hover .link-arrow { color: var(--accent-ink, var(--accent)); }
.sp-related__card .link-arrow { margin-top: auto; }
/* SQE1-27 blog: overview cards with a navy cover (no photos, so no AI label), the first post wide; post head and byline */
.blog-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--s-stack); }
.blog-filter .tag { height: 2.25rem; padding: 0 .95rem; cursor: pointer; }
.blog-filter .tag[aria-pressed="true"], .blog-filter .tag[aria-pressed="true"]:hover { background: var(--ink); color: #fff; }   /* SQE1-31: the hover of button.tag made the pressed one white on light blue */
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-grid); }
.blog-card { display: grid; grid-template-rows: auto 1fr; padding: 0; overflow: hidden; color: inherit; transition: transform .25s var(--ease), box-shadow .25s; }
.blog-card[hidden] { display: none; }
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--sh-raise); }
.blog-card__cover { display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--stage); background-image: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1.3px); background-size: 18px 18px; }
.blog-card__cover .icon-tile { width: 3.4rem; height: 3.4rem; background: rgba(255, 255, 255, .1); color: #fff; }
.blog-card__cover .icon-tile .ico { width: 1.6rem; height: 1.6rem; }
.blog-card__body { display: grid; gap: .6rem; align-content: start; justify-items: start; padding: var(--s-card); }
.blog-card__desc { color: var(--ink-2); font-size: var(--t-small); line-height: 1.55; }
.blog-card__meta { font-size: .78rem; color: var(--ink-3); margin-top: .2rem; }
.blog-card--lead { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: none; }
.blog-card--lead .blog-card__cover { aspect-ratio: auto; min-height: 16rem; }
.blog-card--lead .blog-card__body { align-content: center; padding: clamp(1.5rem, 3vw, 2.5rem); }
.blog-card--lead .h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.blog-feed { margin-top: var(--s-stack); }
.post-hero { justify-items: start; }
.post__t { font-size: clamp(2rem, 4.4vw, 3.4rem); max-width: 22ch; }
.post__lead { max-width: 44rem; }
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; font-size: var(--t-small); color: var(--ink-2); }
.post__meta b { display: block; color: var(--ink); font-weight: 600; }
.post__meta .small { font-size: .75rem; color: var(--ink-3); }
.post__avatar { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--accent-tint); }
.post__avatar--lg { width: 3.2rem; height: 3.2rem; flex: none; }
.post__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3); }
.post__text a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.post__author { display: flex; gap: 1rem; align-items: flex-start; margin-top: 2.6rem !important; padding: 1.2rem 1.3rem; border-radius: var(--r-sm); background: var(--sky); }
.post__author p { margin: 0; } .post__author p + p { margin-top: .3rem; }
@media (max-width: 991px) { .blog-grid { grid-template-columns: 1fr 1fr; } .blog-card--lead { grid-template-columns: 1fr; } .blog-card--lead .blog-card__cover { min-height: 12rem; } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }
/* SQE1-20 legal pages: text 1:1 from the live site, new layout only. Contents left and sticky on desktop, collapsible on top on mobile */
.legal { display: grid; grid-template-columns: 16rem minmax(0, 44rem); gap: clamp(2rem, 5vw, 5rem); padding-block: clamp(2rem, 5vw, 3.5rem) clamp(4rem, 8vw, 7rem); }
.legal--short { grid-template-columns: minmax(0, 44rem); }
.legal__toc { position: sticky; top: 6.5rem; align-self: start; max-height: calc(100vh - 8rem); overflow: auto; }
.legal__toc summary { font: 500 .72rem/1.2 var(--font-head); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); cursor: pointer; list-style: none; margin-bottom: .8rem; }
.legal__toc summary::-webkit-details-marker { display: none; }
.legal__toc ol { display: grid; gap: .15rem; border-left: 1px solid var(--line, #e3e7ee); }
.legal__toc a { display: block; padding: .35rem 0 .35rem 1rem; margin-left: -1px; border-left: 2px solid transparent; font-size: var(--t-small); line-height: 1.35; color: var(--ink-2, var(--ink)); }
.legal__toc a:hover, .legal__toc a.is-on { color: var(--accent-ink, var(--accent)); border-left-color: var(--accent); }
.legal__text { color: var(--ink); font-size: 1rem; line-height: 1.7; overflow-wrap: anywhere; }
/* SQE1-29: German compounds like „Auftragsverarbeitungsvertrag“ are wider than a phone; let the legal page title hyphenate (only there, so no other heading changes) */
:lang(de) .legal-hero .h-display { -webkit-hyphens: auto; hyphens: auto; }
/* SQE1-29: the German legal pages say up front that the English version prevails */
.legal__note { margin: 0 0 1.5rem; padding: .9rem 1.1rem; border-radius: var(--r-sm); background: var(--accent-tint); font-size: .95rem; }
.legal__text > * + * { margin-top: 1rem; }
.legal__text h2 { font: 500 clamp(1.25rem, 2.2vw, 1.5rem)/1.25 var(--font-head); margin-top: 2.6rem; scroll-margin-top: 7rem; }
.legal__text h3 { font: 500 1.1rem/1.3 var(--font-head); margin-top: 1.8rem; }
.legal__text h2.legal__part { margin-top: 3.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); font-size: 1rem; font-weight: 600; color: var(--ink-3); }   /* no text-transform: the legal text shows exactly as written */
.legal__text > h2.legal__part:first-child { margin-top: 0; }
/* 404 */
.nf { display: grid; gap: var(--s-stack); justify-items: start; padding-block: clamp(3rem, 8vw, 6rem) clamp(4rem, 10vw, 8rem); }
.nf__links { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; }
.legal__text ul, .legal__text ol { padding-left: 1.3rem; display: grid; gap: .45rem; }
.legal__text ul { list-style: disc; } .legal__text ol { list-style: decimal; }
.legal__text strong, .legal__text b { font-weight: 600; }
.legal__text table { width: 100%; border-collapse: collapse; font-size: var(--t-small); display: block; overflow-x: auto; }
.legal__text th, .legal__text td { padding: .6rem .8rem .6rem 0; border-bottom: 1px solid var(--line, #e3e7ee); text-align: left; vertical-align: top; min-width: 8rem; }
.legal__text th { font-weight: 600; }
@media (max-width: 900px) {
  .legal { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .legal__toc { position: static; max-height: none; padding: 1rem 1.2rem; border-radius: var(--r-sm); background: var(--sky); }
  .legal__toc summary { margin-bottom: 0; } .legal__toc details[open] summary { margin-bottom: .8rem; }
  .legal__toc summary::after { content: " +"; } .legal__toc details[open] summary::after { content: " −"; }
}
.fslider__logo { flex: none; width: 1.1rem; height: 1.1rem; object-fit: contain; }   /* real marks in the channel tabs */
/* feature slider with the stage on the left and the tabs on the right (desktop only; phones keep tabs first) */
@media (min-width: 992px) {
  .fslider--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .fslider--flip > .fslider__tabs { order: 2; }
}
#control .bento > .card { scroll-margin-top: 7rem; }
.v6 main .stats-b .h2 .t2 { color: rgba(255, 255, 255, .72); }
.teamrow__alias { position: absolute; }
.teamrow__ex { max-width: 30rem; padding: 1rem 1.1rem; border-radius: var(--r-sm); background: var(--sky); color: var(--ink-2); font-size: var(--t-small); line-height: 1.6; }
.teamrow__ex b { display: block; margin-bottom: .25rem; color: var(--accent-ink); font: 500 var(--t-small)/1.2 var(--font-head); }
@media (max-width: 767px) {
  .teamnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter, 16px)); padding-inline: var(--gutter, 16px); }
  .teamnav::-webkit-scrollbar { display: none; }
  .teamnav a { flex: none; }
  .teams-hero .subhero-b__imgs > div:last-child { display: none; }   /* phones: one photo, the second would collapse */
}
.sbs__tasks--center { justify-content: center; }
/* ---- homepage helpers (SQE1-15): replace inline styles; one class per job ---- */
.ph-team { object-position: 50% 40%; } .ph-marketing { object-position: 50% 22%; } .ph-developer { object-position: 50% 30%; }
.ph-review { object-position: 50% 35%; } .row__logo { width: 1.1rem; height: 1.1rem; flex: none; } .ph-write { object-position: 35% 45%; } .ph-connect { object-position: 40% 45%; } .ph-people { object-position: 45% 40%; } .ph-office, .ph-sales { object-position: 50% 45%; }
.stage--photo > .fslider__slide { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: var(--s-card); }
.stage--photo > .fslider__pause { position: absolute; top: var(--s-card); right: var(--s-card); z-index: 3; width: 2.25rem; height: 2.25rem; background: rgba(255, 255, 255, .9); box-shadow: none; }
.win--hero { position: relative; width: min(26rem, 100%); }
.win--narrow { width: min(24rem, 100%); }
.marquee--hero { margin-top: var(--s-head); }
.hero__ctas--left { justify-content: flex-start; }
.ctl--up svg { transform: rotate(-90deg); }
.head-bar__menu-cta { padding-top: .6rem; }
/* SQE1-29 language switch: a quiet two-letter link in the header, the full name in the mobile menu and the footer */
.lang-switch { display: inline-grid; place-items: center; min-width: 2.5rem; height: 2.25rem; padding: 0 .55rem; margin-right: .2rem; border-radius: 999px; font: 500 .8rem/1 var(--font-head); letter-spacing: .04em; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.lang-switch:hover { color: var(--ink); background: var(--sky); }
.oc__lang { font: 500 var(--t-small)/1 var(--font-head); color: var(--ink-2); padding: .6rem .4rem; }
.foot2__lang { display: flex; gap: .9rem; }
.foot2__lang a[aria-current="true"] { color: #fff; }
@media (max-width: 991px) { .head-bar__end .lang-switch { display: none; } }
/* SQE1-28 off-canvas mobile menu: a panel from the right over a dimmed page, two levels that slide sideways */
html.oc-lock, html.oc-lock body { overflow: hidden; }
.oc { position: fixed; inset: 0; z-index: 100; }
.oc[hidden] { display: none; }
.oc__scrim { position: absolute; inset: 0; background: rgba(8, 26, 51, .5); opacity: 0; transition: opacity .3s; }
.oc__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(24rem, 88%);   /* a strip of dimmed page stays visible and tappable */
   display: flex; flex-direction: column; background: var(--paper);
  box-shadow: -20px 0 60px -30px rgba(8, 26, 51, .6); transform: translateX(100%); transition: transform .32s var(--ease); }
.oc.is-open .oc__scrim { opacity: 1; } .oc.is-open .oc__panel { transform: none; }
.oc__top { display: flex; align-items: center; justify-content: space-between; padding: .9rem var(--gutter); border-bottom: 1px solid var(--line); }
.oc__top .logo img { height: 26px; width: auto; display: block; }
.oc__x { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; color: var(--ink); }
.oc__x:hover { background: var(--sky); }
.oc__levels { position: relative; flex: 1; overflow: hidden; }
.oc__level { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .15rem; padding: .8rem var(--gutter) 1.4rem; overflow-y: auto;
  transform: translateX(100%); transition: transform .32s var(--ease); background: var(--paper); }
.oc__level.is-on { transform: none; } .oc__level.is-out { transform: translateX(-30%); }
.oc__item { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 3.2rem; padding: .7rem .4rem; border-bottom: 1px solid var(--line);
  font: 500 1.05rem/1.2 var(--font-head); color: var(--ink); text-align: left; }
.oc__item .ico { width: 1rem; height: 1rem; color: var(--ink-3); }
.oc__item[aria-current="page"] { color: var(--accent-ink); }
.oc__foot { display: grid; gap: .9rem; margin-top: auto; padding-top: 1.4rem; }
.oc__foot .btn { justify-self: start; }
.oc__login { font: 500 var(--t-body)/1 var(--font-head); color: var(--ink); padding: .6rem .4rem; }
.oc__back { display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start; min-height: 2.75rem; padding: 0 .4rem; font: 500 var(--t-small)/1 var(--font-head); color: var(--ink-2); }
.oc__back .ico { width: 1rem; height: 1rem; }
.oc__title { font: 500 1.6rem/1.15 var(--font-head); color: var(--ink); padding: .3rem .4rem .2rem; }
.oc__group { font: 500 .7rem/1 var(--font-head); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 1rem .4rem .4rem; }
.oc .mega__link { padding: .6rem .4rem; }
.oc .mega__link[aria-current="page"] b { color: var(--accent-ink); }
@media (prefers-reduced-motion: reduce) { .oc__panel, .oc__level, .oc__scrim { transition: none; } }
.stack { display: grid; gap: var(--s-stack); align-content: start; }
.h2--stack { margin-bottom: var(--s-stack); }
.h2--stack .t2 { display: block; }            /* statement on line one, continuation on line two — like .head--split */
.head--tight { margin-bottom: var(--s-stack); }
.row--mono { font-family: var(--mono); font-size: .75rem; }
.row--ask { align-self: flex-end; }
.small--ink { color: var(--ink); }
.win__logo { height: 16px; width: auto; }
.tag--end { margin-left: auto; }
.tag--paper { background: var(--paper); }
.tag--lg { height: 2rem; padding: 0 .85rem; }
.sbs__tasks .try { margin-right: .4rem; }
.stage--persona { min-height: 30rem; }
.card__ui--center { align-content: center; }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.row b { font-weight: 500; }
.row__end { display: inline-flex; gap: .3rem; }
.card--review { display: flex; min-height: 30rem; }
.win--review { top: var(--s-card); right: var(--s-card); width: min(25rem, 62%); }
.plan__desc { min-height: calc(2 * 1.7em); }
.plan .ticks { margin-block: .6rem 1rem; }
.plan__cta { margin-top: auto; }
.chapter__cta { margin-top: var(--s-head); text-align: center; }
/* the story scene: on desktop the page scroll drives the beats (sticky), on mobile and with reduced motion they are clicked */
.scene.is-scroll { height: calc(100vh + 4 * 45vh); }
.scene.is-scroll > .scene__pin { position: sticky; top: max(5.5rem, calc(50vh - 19rem)); }
.scene__hint { display: none; }
.scene.is-scroll .scene__hint { display: inline-flex; margin-top: var(--s-stack); }
.scene .beat__n { position: relative; }
.scene .beats { counter-reset: none; }
@media (max-width: 991px) {
  .split, .grid-3, .grid-2, .bento, .head--split { grid-template-columns: 1fr; }
  .head-bar__nav, .head-bar__end .login, .head-bar__end .btn { display: none; }
  .head-bar__burger { display: grid; margin-left: auto; }
  .foot__in { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats > div:nth-child(3) { box-shadow: inset 0 1px 0 rgba(12, 42, 82, .08); }
  .stats > div:nth-child(4) { box-shadow: inset 1px 1px 0 rgba(12, 42, 82, .08); }
  .form__row { grid-template-columns: 1fr; }
  .mega { display: none; }
  .voices3 { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; }
  .voices3 > * { scroll-snap-align: start; }
  .numbers, .steps3, .people, .board--flow { grid-template-columns: 1fr; }
  .hero--split, .voice-lead, .voice-row { grid-template-columns: 1fr; }
  .rolepanel__panel, .chips, .people2, .ent-cards, .close2 { grid-template-columns: 1fr; }
  .rolepanel--46 .rolepanel__panel, .bento--2x2, .head--wide { grid-template-columns: 1fr; }
  .steprow, .steprow--flip { grid-template-columns: 1fr; min-height: 0; }
  .v6 .steprow__visual { height: 22rem; }
  /* phones: persona tabs stay on one scrollable line, the pause button at its end */
  .rolepanel__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .rolepanel__tabs::-webkit-scrollbar { display: none; }
  .rolepanel__tabs [data-tab] { flex: none; }
  .rolepanel__tabs .ctl { flex: none; position: sticky; right: 0; background: var(--stage); box-shadow: -14px 0 12px var(--stage); }   /* covers the tabs scrolling under it */
  /* phones: the persona rows drop the kind tag so the status always fits */
  .rolepanel .win .row > .tag:not(.tag--solid) { display: none; }
  /* phones: quote cards size to their content (no gap above the quote) */
  .voices2 .vcard { min-height: 0; gap: 1.25rem; justify-content: flex-start; }
  .steprow__card { width: auto; left: var(--s-card); }
  .steprow__card .small { display: none; }
  .lv-features .slider__track { grid-auto-columns: 86%; }
  .lv-benefits, .lv-compare, .lv-plans, .lv-enterprise, .lv-compare__ex { grid-template-columns: 1fr; }
  .steprow--flip > .steprow__text { order: 0; }
  .bento--2x2 > .card--wide, .bento--2x2 > .card--span2 { grid-column: auto; }
  .ent-cards > article { min-height: 0; }
  .orbit__tile { display: none; }
  .orbit { min-height: 0; }
  .hero--split { min-height: 0; }
  .showcase__frames { padding-bottom: 0; display: grid; gap: var(--s-grid); }
  .showcase__frames > .browser:first-child, .showcase__frames > .browser + .browser { position: static; width: 100%; }
  .board__wire { width: 2px; height: 2.5rem; justify-self: center; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .4) 0 6px, transparent 6px 12px); }
  .board__wire::after { display: none; }
  .board__slot { min-height: 13rem; }
  .foot2__top, .foot2__cols, .voices2, .subhero-b__imgs, .contact-b, .contact-c, .sbs, .stats-c { grid-template-columns: 1fr; }
  .stats-b__row { grid-template-columns: 1fr; }
  .foot2__cols { grid-template-columns: 1fr 1fr; }
  .subhero-c { grid-template-columns: 1fr; }
  .head-bar.is-scrolled .head-bar__in { margin-top: 6px; }
  .head-bar.is-scrolled { top: 6px; }
  .stage--photo > .fslider__tabs--over { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .fslider__tabs--over .fslider__tab { scroll-snap-align: start; }
  .fslider__tabs--over .fslider__tab p { display: none; }
  .v6 .fslider.fslider--row .fslider__stage { min-height: 26rem; }
  .logo-row.orbit__mobile { display: flex; margin-top: var(--s-stack); }
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .ide__bar { overflow-x: auto; scrollbar-width: none; }
  .card--wide { grid-column: auto; grid-template-columns: 1fr; }
  .card--wide .card__ui { order: 0; }
  .timeline { display: none; }
  .slider__track { grid-auto-columns: 82%; }
  .fslider { grid-template-columns: 1fr; }
  .fslider__stage { min-height: 20rem; }
  .card .eyebrow--m { display: block; }
  .card--photo { min-height: 22rem; gap: 1rem; }
  .card--photo > .win.float { position: relative; top: auto !important; right: auto !important; width: 100% !important; margin-bottom: auto; }   /* one column: the window sits above the text */
  .card--full { grid-column: auto; }
  .ide__body { grid-template-columns: 1fr; }
  .flow-split { grid-template-columns: 1fr; }
  .skillv { grid-template-columns: 1fr; }
  .fslider--row .fslider__tabs { grid-template-columns: minmax(0, 1fr); }
  .hero--split { grid-template-columns: 1fr; }
  .ide__tree { display: none; }
  .stage--tall { min-height: 0; }
  .flow { grid-auto-rows: auto; }
  .chip { white-space: normal; max-width: calc(100% - 2 * var(--s-card)); line-height: 1.3; }
  .glass { max-width: none; }
  .close--split { grid-template-columns: 1fr; }
  .beat__p, .beat.is-on .beat__p { display: block; opacity: 1; }
  .split--flip > :first-child { order: 0; }
  .stage--photo { min-height: 26rem; }
  .card__ui { height: auto; min-height: 0; }   /* one column: nothing to line up */
}

/* SQE1-31 — marketplace (/marketplace/, /marketplace/<slug>/). Cards are the related cards, the kind filter is the
   blog filter; only the filter row, the text block and the two-column detail are new. */
.mk-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-bottom: .75rem; }
.mk-filter .blog-filter { margin: 0; }
.mk-filter .blog-filter .tag .ico { width: .9rem; height: .9rem; }
.mk-filter__cat { width: min(16rem, 100%); }
.mk-filter__q { flex: 1 1 16rem; min-width: 0; }
.mk-filter .field select, .mk-filter .field input { padding-top: .6rem; padding-bottom: .6rem; }
.mk-count { color: var(--ink-2); margin-bottom: var(--s-stack); }
.mk-card { display: grid; gap: .6rem; align-content: start; }
.mk-card[hidden] { display: none; }
.mk-card__tags { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.mk-card__tags .small { color: var(--ink-2); }
.mk-card__desc { color: var(--ink-2); font-size: var(--t-small); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.mk-none { padding: var(--s-card); text-align: center; color: var(--ink-2); }
.mk-share { max-width: 46rem; }
.mk-item__t { max-width: 22ch; overflow-wrap: anywhere; }
.mk-item__desc { max-width: 62ch; overflow-wrap: anywhere; }
.mk-item__ctas { margin-top: var(--s-stack); }
.mk-item__note { margin-top: .6rem; color: var(--ink-2); }
.mk-item { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-grid); align-items: start; padding-bottom: var(--s-chapter, 4rem); }
.mk-item__main { display: grid; gap: var(--s-stack); min-width: 0; }
.mk-item__side { display: grid; gap: var(--s-grid); }
.mk-item__fields code { font: .85em var(--mono); }
.mk-text { margin: 0; padding: 1.25rem 1.4rem; max-height: 42rem; overflow: auto; border-radius: var(--r-sm); background: var(--stage-2); color: var(--on-stage); font: .8rem/1.7 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.mk-text:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mk-item__tags { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 900px) { .mk-item { grid-template-columns: 1fr; } }