/* GrowMore marketing site, Home, gate 1 of T-201 (prototype B, "taste").
   Token values are the app's own (web/src/tokens.css, light and dark sets, copied by name, never invented); the classes the
   page reuses as-is are the app's: gm-table, gm-state, gm-draft/gm-posted/gm-neutral, gm-amount, gm-paren, gm-negative,
   gm-code, gm-kbd, gm-btn, gm-btn-primary. Logical properties only, so the Arabic twin mirrors by itself. */

@font-face { font-family: "Manrope"; font-weight: 800; font-display: swap; src: url(fonts/manrope-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 700; font-display: swap; src: url(fonts/manrope-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 400 600; font-display: swap; src: url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial"); size-adjust: 104%; ascent-override: 102%; descent-override: 29%; line-gap-override: 0%; }
@font-face { font-family: "Plex Fallback"; src: local("Arial"); size-adjust: 101%; ascent-override: 102%; descent-override: 27%; line-gap-override: 0%; }

:root {
  --surface-page: #f6f7fb; --surface-card: #ffffff; --surface-panel: #eef0f5; --surface-table-head: #f3f5fc;
  --ink: #121a3a; --ink-secondary: #343d5c; --ink-muted: #5b6480;
  --border: #d9deea; --border-strong: #7f8aa8; --grid-line: #0b247f12;
  --brand: #0b247f; --brand-hover: #071a5e; --brand-ink: #0b247f; --brand-mark: #0b247f; --brand-soft: #e8ecf8;
  --accent: #f19a3e; --accent-ink: #ad5600; --ink-on-accent: #121a3a; --orange-300: #f7c083;
  --positive: #0f766e; --positive-soft: #e0f2ef; --negative: #b42318; --info: #0b247f; --info-soft: #e8ecf8;
  --focus-ring: #0b247f;
  --shadow-sm: 0 1px 2px rgba(11,36,127,0.06); --shadow-md: 0 8px 24px rgba(11,36,127,0.10);
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px;
  --font-display: "Manrope", "Manrope Fallback", "IBM Plex Sans", system-ui, sans-serif;
  --font-sans: "IBM Plex Sans", "Plex Fallback", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --motion-base: 250ms; --motion-slow: 350ms; --motion-curve: cubic-bezier(0.2, 0, 0, 1);
    --g: clamp(16px, 4vw, 40px);
  --wrap: 1200px;
  --sec: clamp(64px, 8vw, 112px);
  --tr: background-color 150ms cubic-bezier(0.2, 0, 0, 1), border-color 150ms cubic-bezier(0.2, 0, 0, 1);
  --row: 32px;  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-block-start: 80px; }
body { margin: 0; background: var(--surface-page); color: var(--ink); font: 400 16px/24px var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg { display: block; }
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
abbr[title] { text-decoration: none; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
.tnum, .kpi, .gm-amount, .gm-code, time { font-variant-numeric: tabular-nums; }
.sr-only, .sr-sprite { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 16px; inset-block-start: -60px; z-index: 30; padding: 10px 16px; background: var(--surface-card); color: var(--ink); border-radius: var(--radius-md); }
.skip:focus { inset-block-start: 12px; }
.ic { inline-size: 20px; block-size: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ic-s { inline-size: 14px; block-size: 14px; }
.wrap { inline-size: min(100% - 2 * var(--g), var(--wrap)); margin-inline: auto; }
@view-transition { navigation: auto; }

.h2 { font: 800 clamp(1.75rem, 1.15rem + 1.6vw, 2.5rem)/1.12 var(--font-display); letter-spacing: -0.02em; color: var(--brand-ink); text-wrap: balance; }
.h2-xl { font-size: clamp(2rem, 1.1rem + 2.7vw, 3.25rem); line-height: 1.06; letter-spacing: -0.025em; }
.h3 { font: 700 17px/24px var(--font-display); color: var(--ink); text-wrap: balance; }
.lede { font-size: 18px; line-height: 28px; color: var(--ink-secondary); text-wrap: pretty; }
p { text-wrap: pretty; }

.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--accent-ink); margin-block-end: 16px; }
.eyebrow::after { content: ""; flex: 1; block-size: 1px; background: var(--border); min-inline-size: 24px; }
.eyebrow, .say-who { font: 500 12.5px/18px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.hexm { inline-size: 10px; block-size: 10px; fill: var(--brand-mark); stroke: none; flex: none; }
.eyebrow-center { justify-content: center; }
.eyebrow-center::after, .eyebrow-center::before { content: ""; flex: 0 1 64px; block-size: 1px; background: var(--border); }
.eyebrow-center::before { order: -1; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 48px; padding-inline: 22px; border-radius: var(--radius-md); border: 1.5px solid transparent; font: 600 15px/20px var(--font-sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: var(--tr); }
.btn:active { translate: 0 1px; }
.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--ink-on-accent); }
.btn-accent:hover { background: var(--orange-300); border-color: var(--orange-300); }
.btn-on-dark { background: transparent; border-color: #5f6ead; color: #ffffff; }
.btn-on-dark:hover { background: #1b2550; }
.btn-lg { min-block-size: 56px; padding-inline: 32px; font-size: 16px; }
.link { display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; font-weight: 600; color: var(--brand-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.link:hover { text-decoration-thickness: 2px; }
.link .arrow { transition: translate 150ms var(--motion-curve); }
.link:hover .arrow { translate: 3px 0; }
[dir="rtl"] .arrow { scale: -1 1; }

.gm-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 40px; padding-inline: 16px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-card); color: var(--ink); font: 600 14px/20px var(--font-sans); white-space: nowrap; cursor: pointer; transition: var(--tr); }
.gm-btn:hover { background: var(--surface-table-head); }
.gm-btn:active { translate: 0 1px; }
.gm-btn-primary { background: var(--brand); border-color: var(--brand); color: #ffffff; }
.gm-btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.gm-btn-ghost { background: transparent; border-color: transparent; }
.gm-btn-ghost .ic { color: var(--brand-mark); }
.gm-amount { text-align: end; direction: ltr; unicode-bidi: isolate; }
.gm-code { font-family: var(--font-mono); font-size: 12.5px; unicode-bidi: isolate; }
.gm-paren { display: inline-block; inline-size: 1ch; text-align: center; }
.gm-negative { color: var(--negative); direction: ltr; unicode-bidi: isolate; }
.gm-kbd { font-family: var(--font-mono); font-size: 11px; line-height: 16px; padding: 2px 6px; border: 1px solid var(--border); border-block-end-width: 2px; border-radius: var(--radius-sm); background: var(--surface-panel); color: var(--ink-secondary); direction: ltr; unicode-bidi: isolate; }
.gm-state { display: inline-flex; align-items: center; gap: 6px; min-block-size: 22px; padding-inline: 8px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-panel); color: var(--ink-secondary); font: 600 12px/16px var(--font-sans); white-space: nowrap; }
.gm-state::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; flex: none; }
.gm-state .ic { margin-inline-start: -2px; }
.gm-state:has(.ic)::before { display: none; }
.gm-draft, .state-draft { color: var(--info); background: var(--info-soft); border: 1px dashed currentColor; }
.gm-posted { color: var(--positive); background: var(--positive-soft); border: 1px solid currentColor; }
.gm-neutral { color: var(--ink-secondary); background: var(--surface-panel); border: 1px solid var(--border-strong); }
.gm-neutral::before { display: none; }
.gm-table { inline-size: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-card); }
/* a corner cell with a background of its own (a head, a sticky first column) paints square over the rounded outline: round it too */
.gm-table > :first-child > tr:first-child > :first-child { border-start-start-radius: calc(var(--radius-md) - 1px); }
.gm-table > :first-child > tr:first-child > :last-child { border-start-end-radius: calc(var(--radius-md) - 1px); }
.gm-table > :last-child > tr:last-child > :first-child { border-end-start-radius: calc(var(--radius-md) - 1px); }
.gm-table > :last-child > tr:last-child > :last-child { border-end-end-radius: calc(var(--radius-md) - 1px); }
.gm-table th, .gm-table td { block-size: var(--row); padding-inline: 8px; border-block-end: 1px solid var(--border); font-size: 14px; text-align: start; vertical-align: middle; }
.gm-table th.gm-amount, .gm-table td.gm-amount { text-align: end; }
.gm-table th + th, .gm-table th + td, .gm-table td + td { border-inline-start: 1px solid var(--grid-line); }
.gm-table > thead > tr > th { background: var(--surface-table-head); color: var(--ink-muted); box-shadow: inset 0 -1px 0 var(--border-strong); }
.gm-table > :last-child > tr:last-child > * { border-block-end: 0; }
.gm-table > tfoot > tr > * { background: var(--surface-table-head); font-family: var(--font-display); font-weight: 700; border-block-start: 2px solid var(--border-strong); }
.gm-table > thead > tr:first-child > :first-child { border-start-start-radius: 9px; }
.gm-table > thead > tr:first-child > :last-child { border-start-end-radius: 9px; }
.gm-table > :last-child > tr:last-child > :first-child { border-end-start-radius: 9px; }
.gm-table > :last-child > tr:last-child > :last-child { border-end-end-radius: 9px; }

.nav { position: sticky; inset-block-start: 0; z-index: 20; background: rgba(11, 18, 48, 0.86); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); border-block-end: 1px solid #a3b4f538; color: #ffffff; --focus-ring: #f7c083; }
.nav-in { display: flex; align-items: center; gap: 20px; block-size: 64px; inline-size: min(100% - 2 * var(--g), var(--wrap)); margin-inline: auto; }
.nav-logo { flex: none; padding-block: 6px; }
.nav-logo img { block-size: 30px; inline-size: auto; }
.nav-in > nav { margin-inline-start: auto; }
.nav-links { display: flex; gap: 2px; }
.nav-links a, .nav-more li a { display: flex; align-items: center; min-block-size: 44px; padding-inline: 12px; border-radius: var(--radius-md); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; transition: background-color 150ms var(--motion-curve); }
.nav-links a:hover { background: #1b2550; }
.nav-cta { flex: none; min-block-size: 40px; padding-inline: 16px; font-size: 14px; white-space: nowrap; }
/* the language: a globe, the visible word, and a native select styled to the dark bar (the owner, 2026-10-24) */
.lang { flex: none; display: flex; align-items: center; gap: 8px; color: #dfe4f7; }
.lang > .ic { inline-size: 18px; block-size: 18px; color: #a3b4f5; }
.lang label { font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.lang-box { position: relative; display: block; }
.lang-box::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-end: 12px; inline-size: 7px; block-size: 7px; margin-block-start: -6px; border-inline-end: 2px solid #ffffff; border-block-end: 2px solid #ffffff; rotate: 45deg; pointer-events: none; }
.lang-sel { appearance: none; -webkit-appearance: none; display: block; min-block-size: 40px; margin: 0; padding-block: 0; padding-inline: 12px 34px; background: #121b40; border: 1px solid #3a4778; border-radius: var(--radius-md); color: #ffffff; font: 600 14px/1 var(--font-sans); cursor: pointer; transition: var(--tr); }
.lang-sel:hover { border-color: #a3b4f5; background: #1b2550; }
.lang-sel:focus-visible { outline: 2px solid #f7c083; outline-offset: 2px; }
.lang-sel option { background: #ffffff; color: #121a3a; }
.lang-alt { display: inline-flex; align-items: center; min-block-size: 40px; padding-inline: 12px; border: 1px solid #3a4778; border-radius: var(--radius-md); font-weight: 600; font-size: 14px; text-decoration: none; }
html:not(.js) .lang label, html:not(.js) .lang-box { display: none; }
.nav-more { display: none; position: relative; }
.nav-more summary { list-style: none; display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: var(--radius-md); cursor: pointer; }
.nav-more summary::-webkit-details-marker { display: none; }
.nav-panel { position: absolute; inset-inline-end: 0; inset-block-start: 52px; min-inline-size: 260px; padding: 8px; background: #121b40; border: 1px solid #2a3663; border-radius: var(--radius-lg); box-shadow: 0 14px 40px rgba(0,0,0,0.42); }
.nav-panel .lang-m { margin-block-start: 8px; padding: 12px 12px 4px; border-block-start: 1px solid #2a3663; }
.nav-panel .lang-m .lang-box { flex: 1; }
.nav-panel .lang-m .lang-sel { inline-size: 100%; min-block-size: 44px; }
@media (max-width: 1279px) { .nav-links, .nav-in > nav, .nav-in > .lang { display: none; } .nav-more { display: block; } .nav-cta { margin-inline-start: auto; } }
@media (max-width: 479px) { .nav-cta { display: none; } .nav-more { margin-inline-start: auto; } }

.hero {
  --seam: 56px;
  display: grid;
  grid-template-columns: [bleed-s] minmax(var(--g), 1fr) [c-s] minmax(0, 600px) [mid] minmax(0, 600px) [c-e] minmax(var(--g), 1fr) [bleed-e];
  grid-template-rows: auto auto auto auto auto 1fr;
  background: #0b1230; color: #ffffff;
  margin-block-start: -64px; padding-block-start: calc(64px + clamp(20px, 2vw, 32px));
  --ink: #ffffff; --accent-ink: #f7c083; --brand-mark: #a3b4f5; --border: #2a3663; --focus-ring: #f7c083;
  position: relative; isolation: isolate;
}

.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(163,180,245,0.05) 31px 32px); mask-image: linear-gradient(to right, #000 0%, transparent 70%); }
[dir="rtl"] .hero::before { mask-image: linear-gradient(to left, #000 0%, transparent 70%); }
.hero-eyebrow { grid-column: c-s / mid; padding-inline-end: var(--seam); }
.hero-h1 { grid-column: c-s / mid; padding-inline-end: var(--seam); font: 800 clamp(2.25rem, 1.25rem + 3.4vw, 4rem)/1.04 var(--font-display); letter-spacing: -0.03em; margin-block-end: clamp(16px, 1.8vw, 24px); }
.hero-sub { grid-column: c-s / mid; grid-row: 3; padding-inline-end: var(--seam); font-size: 17px; line-height: 27px; max-inline-size: 600px; }
.hero-ctas { grid-column: c-s / mid; grid-row: 4; display: flex; flex-wrap: wrap; gap: 12px; padding-block: 24px 28px; padding-inline-end: var(--seam); }
.hero-answer { grid-column: c-s / mid; grid-row: 5; padding-inline-end: var(--seam); padding-block: 20px; border-block-start: 1px solid #2a3663; font-size: 14px; line-height: 22px; color: #c9d1ee; align-self: start; }
.hero-trust { grid-column: c-s / mid; grid-row: 6; align-self: start; display: flex; flex-wrap: wrap; gap: 10px 24px; padding-inline-end: var(--seam); padding-block: 16px 24px; border-block-start: 1px solid #2a3663; }
.hero-trust li { display: flex; align-items: center; gap: 8px; font: 600 14px/20px var(--font-sans); color: #ffffff; }
.hero-trust .ic { inline-size: 18px; block-size: 18px; color: #a3b4f5; }

.paper {
  grid-column: mid / bleed-e; grid-row: 2 / 7; align-self: start;
  position: relative; color: #121a3a;
  background: #ffffff repeating-linear-gradient(to bottom, transparent 0 calc(var(--row) - 1px), #0b247f0d calc(var(--row) - 1px) var(--row));
  padding-block: 20px 20px; padding-inline: var(--seam) var(--g);
  border-start-start-radius: var(--radius-xl);
  --ink: #121a3a; --ink-secondary: #343d5c; --ink-muted: #5b6480; --border: #d9deea; --border-strong: #7f8aa8; --brand-mark: #0b247f; --brand-ink: #0b247f; --accent-ink: #ad5600; --focus-ring: #0b247f; --surface-card: #ffffff; --surface-panel: #eef0f5;
}
.paper > * { max-inline-size: 548px; }

.say { position: relative; margin-inline-start: calc(-1 * var(--seam) - 8px); margin-block-end: 14px; padding: 12px 20px 16px; background: linear-gradient(180deg, #1a2c86 0%, #142374 100%); color: #ffffff; border: 1px solid #3d51b0; border-radius: var(--radius-lg); border-end-start-radius: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 2px 4px rgba(4,8,28,0.35), 0 18px 44px rgba(4,8,28,0.55); max-inline-size: calc(548px + var(--seam) + 8px); }
.say-who { display: flex; align-items: center; gap: 8px; color: #f7c083; margin-block-end: 6px; }
.say-who .ic { inline-size: 16px; block-size: 16px; color: #a3b4f5; }
.say-text { font: 400 clamp(1.125rem, 0.95rem + 0.55vw, 1.4375rem)/1.45 var(--font-sans); letter-spacing: 0; }
.say-line { position: absolute; inset-inline: 20px; inset-block-end: 8px; block-size: 1px; background: #f19a3e; transform-origin: 0 50%; }
[dir="rtl"] .say-line { transform-origin: 100% 50%; }

.paper [data-k] { text-decoration: underline dotted 1px; text-underline-offset: 5px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); transition: text-decoration-color 150ms var(--motion-curve), background-color 150ms var(--motion-curve); border-radius: 3px; }
.say [data-k] { text-decoration-color: #f7c08399; }
.paper .hk { text-decoration: underline solid 2px var(--accent); text-decoration-skip-ink: none; background-color: #f19a3e24; }

.doc { position: relative; isolation: isolate; }
.doc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-block-size: 40px; margin-block-end: 8px; }
.doc-title { display: flex; align-items: baseline; gap: 10px; margin: 0; font: 800 20px/28px var(--font-display); letter-spacing: -0.01em; color: #0b247f; }
.doc-no { color: #343d5c; font-weight: 500; transition: opacity var(--motion-base) var(--motion-curve); }
.paper[data-state="draft"] .doc-no { opacity: 0; }
.doc-meta { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); grid-template-rows: auto auto; grid-auto-flow: column; gap: 0 20px; margin-block-end: 12px; }
.doc-meta > div { display: flex; align-items: center; gap: 10px; min-block-size: var(--row); border-block-end: 1px solid #d9deea; font-size: 14px; }
.doc-meta dt { color: #5b6480; min-inline-size: 76px; }
.doc-meta dd { min-block-size: 22px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 600; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border: 1px dashed #ad5600; border-radius: var(--radius-pill); color: #ad5600; background: #fef2e6; font: 600 11.5px/16px var(--font-sans); white-space: nowrap; }
.paper[data-state="posted"] .chip { border-style: solid; border-color: #0f766e; color: #0f766e; background: #e0f2ef; }
.it-in { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.serial { display: inline-flex; align-items: center; gap: 4px; min-block-size: 26px; padding-inline: 6px; border: 1px solid #7f8aa8; border-radius: var(--radius-sm); background: #ffffff; cursor: pointer; color: #343d5c; }
.serial:hover { background: #f3f5fc; }
.serial[aria-expanded="true"] { background: #e8ecf8; border-color: #0b247f; }
.doc-lines td.it { position: relative; z-index: 2; }
.ticket { position: absolute; z-index: 3; inset-inline-start: 0; inset-block-start: calc(100% + 6px); inline-size: min(calc(100vw - 2 * var(--g)), 320px); padding: 10px 14px 12px; background: #ffffff; border: 1px solid #d9deea; border-inline-start: 3px solid #0b247f; border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(11,36,127,0.16); animation: rise var(--motion-base) var(--motion-curve); }
.ticket-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block-end: 6px; }
.ticket-name { font: 700 14px/20px var(--font-display); }
.ticket-x { display: grid; place-items: center; inline-size: 32px; block-size: 32px; margin-inline-end: -6px; border: 0; border-radius: var(--radius-sm); background: transparent; color: #343d5c; cursor: pointer; }
.ticket-x:hover { background: #f3f5fc; }
.ticket .bars { inline-size: 100%; block-size: 44px; fill: #121a3a; margin-block-end: 8px; }
.ticket dl > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 22px; }
.ticket dt { color: #5b6480; }
.doc-act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-block: 12px 0; min-block-size: 44px; }
.approve { min-block-size: 44px; padding-inline: 20px; }
.doc-who { font-size: 14px; color: #343d5c; }
.w-posted { display: none; }
.paper[data-state="posted"] .w-draft { display: none; }
.paper[data-state="posted"] .w-posted { display: inline-flex; align-items: center; gap: 4px; }
.paper[data-state="posted"] .state-draft { color: var(--positive); background: var(--positive-soft); border: 1px solid currentColor; }
.strip { display: none; }
@media (prefers-reduced-motion: reduce) {
  .strip { display: flex; align-items: center; gap: 8px; margin-block-start: 14px; padding-block-start: 12px; border-block-start: 1px solid #d9deea; }
  .strip li { display: flex; align-items: center; gap: 8px; opacity: 0.55; }
  .strip li + li::before { content: ""; inline-size: 16px; block-size: 1px; background: #7f8aa8; }
  .strip li[aria-current] { opacity: 1; }
  .strip li[aria-current] .gm-state, .strip li[aria-current] .strip-act { outline: 2px solid currentColor; outline-offset: 2px; }
  .strip-act { display: inline-flex; align-items: center; gap: 4px; min-block-size: 22px; padding-inline: 8px; border-radius: var(--radius-sm); background: #0b247f; color: #ffffff; font: 600 12px/16px var(--font-sans); }
}

/* ── the voice, the reading, the drawing: one example's phases (main.js sets data-phase; without it everything is simply shown) ── */
.say { min-block-size: var(--say-h, auto); }
.say-who { flex-wrap: wrap; row-gap: 4px; }
.say-agent { display: inline-block; font-weight: 500; color: #ffffff; }
.say-mic, .wave, .say-file-bar { display: none; }
.say-sent { display: none; align-items: center; gap: 4px; margin-inline-start: auto; color: #a3b4f5; }
.say-file { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; padding: 2px 8px 2px 6px; border: 1px solid #2a3663; border-radius: var(--radius-sm); background: #0b1230; color: #c9d1ee; text-transform: none; letter-spacing: 0; font: 500 12px/18px var(--font-mono); position: relative; overflow: hidden; }
.say-file .ic { color: #f7c083; }
.say-file:not([hidden]) ~ .say-sent { margin-inline-start: 8px; }
.wave { align-items: center; gap: 2px; block-size: 20px; margin-inline-start: auto; }
.wave i { inline-size: 2px; block-size: 100%; border-radius: 1px; background: #f19a3e; transform: scaleY(0.08); transform-origin: 50% 50%; will-change: transform; }
.paper[data-phase="say"] .say-chat { display: none; }
.paper[data-phase="say"] .say-mic { display: block; color: #f19a3e; animation: mic 1.2s ease-in-out infinite; }
.paper[data-phase="say"] .wave { display: inline-flex; }
.paper[data-phase="say"] .say-file:not([hidden]) ~ .wave { margin-inline-start: 10px; }
.paper[data-phase="draw"] .say-sent, .paper[data-phase="think"] .say-sent, .paper[data-phase="rest"] .say-sent, .paper[data-phase="posted"] .say-sent { display: inline-flex; }
.paper.is-upload .say-file-bar { display: block; position: absolute; inset-inline-start: 0; inset-block-end: 0; block-size: 2px; inline-size: 100%; background: #f19a3e; transform-origin: 0 50%; animation: draw 850ms var(--motion-curve) both; }
[dir="rtl"] .paper.is-upload .say-file-bar { transform-origin: 100% 50%; }
.paper[data-phase="say"] .say-agent { animation: rise var(--motion-base) var(--motion-curve); }

.desk { position: relative; }
.paper[data-state="posted"] .approve { display: none; }
.doc { min-block-size: var(--doc-h, auto); }
.state-read { color: #343d5c; background: #eef0f5; border: 1px solid #7f8aa8; }
.chip-src, .paper[data-state="posted"] .chip-src { border-style: solid; border-color: #0b247f40; color: #0b247f; background: #e8ecf8; }
.doc-lines td .chip { margin-inline-start: 6px; }

/* GrowMore reading: the mark's three cells blink in turn and the unit's lights flicker, like a server at work */
.think { position: absolute; z-index: 4; inset-inline: 0; inset-block-start: 56px; margin-inline: auto; inline-size: max-content; max-inline-size: 100%;
  display: none; align-items: center; gap: 14px; padding: 12px 18px 12px 14px; background: #0b1230; color: #ffffff; border: 1px solid #2a3663;
  border-radius: var(--radius-lg); box-shadow: 0 18px 44px rgba(11,18,48,0.30), inset 0 1px 0 rgba(163,180,245,0.14); }
.think-mark { inline-size: 40px; block-size: 44px; flex: none; }
.tm-hex { fill: #1a2a6c; stroke: #3a4a8c; stroke-width: 10; }
.tm-c { fill: #f19a3e; }
.think-body { display: grid; gap: 1px; }
.think-word { font: 800 17px/22px var(--font-display); letter-spacing: -0.01em; }
.think-say { font: 500 12.5px/18px var(--font-mono); color: #c9d1ee; }
.leds { display: grid; grid-template-columns: repeat(3, 6px); gap: 4px; margin-inline-start: 4px; }
.leds i { inline-size: 6px; block-size: 6px; border-radius: 1.5px; background: #2a3663; }
.paper[data-phase="think"] .think { display: flex; animation: rise var(--motion-base) var(--motion-curve); }
.paper[data-phase="think"] .doc { opacity: 0.38; transition: opacity var(--motion-base) var(--motion-curve); }
.paper[data-phase="think"] .tm-c { animation: cell 900ms steps(1, end) infinite; }
.paper[data-phase="think"] .tm-c2 { animation-delay: 300ms; } .paper[data-phase="think"] .tm-c3 { animation-delay: 600ms; }
.paper[data-phase="think"] .leds i { animation: led 420ms steps(1, end) infinite; }
.paper[data-phase="think"] .leds i:nth-child(2) { animation-duration: 260ms; animation-delay: 80ms; }
.paper[data-phase="think"] .leds i:nth-child(3) { animation-duration: 610ms; animation-delay: 40ms; }
.paper[data-phase="think"] .leds i:nth-child(4) { animation-duration: 330ms; animation-delay: 150ms; }
.paper[data-phase="think"] .leds i:nth-child(5) { animation-duration: 510ms; }
.paper[data-phase="think"] .leds i:nth-child(6) { animation-duration: 290ms; animation-delay: 120ms; }

/* the examples: five words, the running one carrying the 6 s line to the next; Pause holds it */
.scenes { display: flex; align-items: center; gap: 6px; margin-block-start: 12px; padding-block-start: 10px; border-block-start: 1px solid #d9deea; }
.scenes-list { display: flex; flex-wrap: wrap; gap: 6px; }
.scene-b, .scenes-hold { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 6px; min-block-size: 32px; padding-inline: 12px;
  border: 1px solid #d9deea; border-radius: var(--radius-pill); background: #ffffff; color: #343d5c; font: 600 13px/18px var(--font-sans); cursor: pointer; transition: var(--tr); }
.scene-b:hover, .scenes-hold:hover { border-color: #7f8aa8; background: #f3f5fc; }
.scene-b[aria-pressed="true"] { border-color: #0b247f; color: #0b247f; background: #e8ecf8; }
.scenes-hold { margin-inline-start: auto; inline-size: 32px; padding: 0; justify-content: center; }
.scenes-hold .i-play, .scenes-hold[aria-pressed="true"] .i-pause { display: none; }
.scenes-hold[aria-pressed="true"] .i-play { display: block; }
.prog { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 2px; background: #f19a3e; transform: scaleX(0); transform-origin: 0 50%; }
[dir="rtl"] .prog { transform-origin: 100% 50%; }
.paper[data-phase="rest"] .scene-b[aria-pressed="true"] .prog { animation: prog 6s linear forwards; }
.paper.is-held .prog { animation-play-state: paused !important; }
.paper[data-kind="statement"] .strip { display: none !important; }
.measure { position: absolute; inset-inline-start: 0; inset-block-start: 0; visibility: hidden; pointer-events: none; }
.measure > * { margin: 0 !important; min-block-size: 0 !important; }

@keyframes in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: none; } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rise { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: none; } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(241,154,62,0.6); } 100% { box-shadow: 0 0 0 12px rgba(241,154,62,0); } }
@keyframes mic { 50% { opacity: 0.45; } }
@keyframes cell { 0% { opacity: 1; } 33% { opacity: 0.22; } }
@keyframes led { 0% { background: #f19a3e; box-shadow: 0 0 6px #f19a3e99; } 50% { background: #2a3663; box-shadow: none; } }
@keyframes prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) {
  .paper[data-phase="say"] .ch:not(.on) { opacity: 0; }
  .paper[data-phase="say"] .say-line { transform: scaleX(0); }
  .paper[data-phase="say"] .doc [data-t], .paper[data-phase="think"] .doc [data-t] { opacity: 0; }
  .paper[data-phase="draw"] .doc [data-t] { animation: in 300ms var(--motion-curve) var(--d, 0ms) both; }
  .paper[data-phase="draw"] .say-line { animation: draw 300ms var(--motion-curve) both; }
  .paper[data-phase="rest"][data-state="draft"] .approve { animation: ring 1100ms var(--motion-curve) 200ms 2 both; }
}
@media (prefers-reduced-motion: reduce) {
  .scenes-hold { display: none; }
  .wave, .think { display: none !important; }
}


.sec { padding-block: var(--sec); }
.sec-head { max-inline-size: 840px; margin-block-end: clamp(32px, 4vw, 48px); }
.sec-head .lede { margin-block-start: 16px; }

.io [data-reveal] > * { transition: opacity var(--motion-slow) var(--motion-curve), scale var(--motion-slow) var(--motion-curve); }
.io [data-reveal]:not(.is-seen) > * { opacity: 0; scale: 0.92; }
.io [data-reveal] > :nth-child(2) { transition-delay: 90ms; } .io [data-reveal] > :nth-child(3) { transition-delay: 180ms; }
.io [data-reveal] > :nth-child(4) { transition-delay: 270ms; } .io [data-reveal] > :nth-child(n+5) { transition-delay: 360ms; }

.steps-wrap { position: relative; }
.steps { --sg: clamp(24px, 3vw, 48px); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sg); }
.steps-line { --sg: clamp(24px, 3vw, 48px); position: absolute; inset-inline-start: 22px; inset-block-start: 21px; inline-size: calc((100% - 2 * var(--sg)) * 2 / 3 + 2 * var(--sg)); block-size: 2px; overflow: visible; }
.steps-line path { stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; fill: none; }
.steps-line { transform-origin: 0 50%; }
[dir="rtl"] .steps-line { transform-origin: 100% 50%; }
/* The three steps are told one at a time, once, when the list comes into view (main.js adds .is-seen to .steps-wrap): a step rises in
   over 0.9 s and is left alone for 2 s to be read, the line draws on to the next number in the last 1.2 s of that pause, then the next
   step rises (0 s, 2.9 s, 5.8 s; the owner's timing of 2026-10-24). Without the script, under reduced motion and in print it is all there. */
@media (prefers-reduced-motion: no-preference) {
  .io .steps > li { transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1), translate 900ms cubic-bezier(0.16, 1, 0.3, 1); }
  .io .steps-wrap:not(.is-seen) .steps > li { opacity: 0; translate: 0 24px; }
  .io .steps > li:nth-child(2) { transition-delay: 2900ms; }
  .io .steps > li:nth-child(3) { transition-delay: 5800ms; }
  /* the line grows by its own width (scaleX), so its half is exactly the second number; a dash offset on this stretched,
     non-scaling-stroke path overshot it (seen by the owner, 2026-10-24) */
  .io .steps-wrap:not(.is-seen) .steps-line { transform: scaleX(0); }
  .io .steps-wrap.is-seen .steps-line { animation: step-line 5800ms linear both; }
  @keyframes step-line {
    0%, 29.3% { transform: scaleX(0); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
    50%, 79.3% { transform: scaleX(0.5); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
    100% { transform: scaleX(1); }
  }
}
@media print { .io .steps > li { opacity: 1 !important; translate: none !important; } .steps-line { transform: none !important; animation: none !important; } }
.step-n { position: relative; display: grid; place-items: center; inline-size: 44px; block-size: 44px; margin-block-end: 20px; color: var(--brand-ink); font: 800 20px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.step-n svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; fill: var(--surface-page); stroke: var(--brand); stroke-width: 1.6; }
.step-n b { position: relative; font-weight: 800; }
.steps .h3 { font-size: 20px; line-height: 28px; margin-block-end: 8px; color: var(--brand-ink); }
.steps p { color: var(--ink-secondary); }
.note { display: flex; gap: 14px; align-items: flex-start; margin-block-start: clamp(36px, 4vw, 56px); padding: 18px 22px; max-inline-size: 840px; background: var(--surface-card); border: 1px solid var(--border); border-inline-start: 4px solid var(--brand); border-radius: var(--radius-md); font-size: 17px; line-height: 26px; }
.note .ic { color: var(--brand-mark); margin-block-start: 3px; }

.why { background: var(--surface-card); border-block: 1px solid var(--border); }
.why .sec-head { max-inline-size: 960px; margin-block-end: 24px; }
.why-copy { max-inline-size: 760px; margin-block-end: clamp(36px, 4vw, 56px); }
.why-cards { display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: 16px; align-items: stretch; }
.card { display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-page); }
.card p { color: var(--ink-secondary); }
.c-tools { background: #0b1230; border-color: #0b1230; color: #ffffff; --ink: #ffffff; --ink-secondary: #ffffff; }
.c-tools .h3 { font-size: 22px; line-height: 28px; }
.c-tools .h3 .tnum { color: #f7c083; }
.names { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-block-start: auto; padding-block-start: 12px; font: 800 22px/30px var(--font-display); color: var(--brand-ink); letter-spacing: -0.01em; }
.tools { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: auto; padding-block-start: 12px; }
.tools li { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border: 1px solid #2a3663; border-radius: var(--radius-sm); background: #121b40; font: 500 12.5px/18px var(--font-mono); }
.tools .tool-key { border-color: #f7c083; color: #f7c083; }

/* Features as a scattered honeycomb: eleven rounded hexagons (the mark's own corner, 25%), sized by how much each matters to a shop,
   scattered on a 1200 x 1080 field (placed by a seeded, non-overlapping generator, no two at one height) (positions and sizes are % of the field, type in container units), each floating on its own slow
   clock. Below 900 px they fall into a staggered two-column comb. */
.fhex { position: relative; container-type: inline-size; aspect-ratio: 1200 / 1080; margin-block-start: 8px; }
.hx-item { position: absolute; inline-size: var(--w); aspect-ratio: 179.2 / 198.27; inset-inline-start: var(--x); inset-block-start: var(--y); }
.hx-xl { --w: 25%; } .hx-l { --w: 20.8%; } .hx-m { --w: 17.5%; } .hx-s { --w: 14.2%; } .hx-xs { --w: 8%; }
.hx-item:nth-child(1) { --x: 42.6%; --y: 29.3%; }
.hx-item:nth-child(2) { --x: 75.9%; --y: 28.3%; }
.hx-item:nth-child(3) { --x: 69.6%; --y: 53.8%; }
.hx-item:nth-child(4) { --x: 30.2%; --y: 67.8%; }
.hx-item:nth-child(5) { --x: 21.5%; --y: 21.8%; }
.hx-item:nth-child(6) { --x: 31.0%; --y: 1.0%; }
.hx-item:nth-child(7) { --x: 4.6%; --y: 77.6%; }
.hx-item:nth-child(8) { --x: 60.5%; --y: 10.7%; }
.hx-item:nth-child(9) { --x: 20.5%; --y: 52.1%; }
.hx-item:nth-child(10) { --x: 1.4%; --y: 40.0%; }
.hx-item:nth-child(11) { --x: 82.5%; --y: 7.8%; }
.hx-item:nth-child(12) { --x: 77.9%; --y: 85.2%; }
.hx-item:nth-child(13) { --x: 51.2%; --y: 86.3%; }
.hx-item:nth-child(14) { --x: 0.9%; --y: 67.9%; }
.hx-item:nth-child(15) { --x: 51.9%; --y: 61.9%; }
.hx-item:nth-child(16) { --x: 10.2%; --y: 19.2%; }
/* the icon-only hexagons: a symbol for a feature the text does not name, its name in the tooltip */
.hx-xs .hx-body .ic { inline-size: clamp(20px, 2.6cqw, 32px); block-size: clamp(20px, 2.6cqw, 32px); }
.hx-float { position: relative; inline-size: 100%; block-size: 100%; display: grid; place-items: center; transition: translate 300ms var(--motion-curve); }
.hx-shape { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; fill: var(--hx-fill); stroke: var(--hx-stroke); stroke-width: 1.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 10px 22px rgba(11, 36, 127, 0.10)); }
.hx-shape use { vector-effect: non-scaling-stroke; }
.hx-paper { --hx-fill: #ffffff; --hx-stroke: #d9deea; --hx-ink: #121a3a; --hx-sub: #343d5c; --hx-icon: #0b247f; }
.hx-navy { --hx-fill: #0b247f; --hx-stroke: #0b247f; --hx-ink: #ffffff; --hx-sub: #dfe4f7; --hx-icon: #f19a3e; }
.hx-body { position: relative; display: grid; justify-items: center; gap: 0.5cqw; inline-size: 70%; text-align: center; }
.hx-body .ic { inline-size: clamp(18px, 2cqw, 26px); block-size: clamp(18px, 2cqw, 26px); color: var(--hx-icon); }
.hx-t { font: 700 clamp(13px, 1.45cqw, 18px)/1.2 var(--font-display); color: var(--hx-ink); text-wrap: balance; }
.hx-p { font-size: clamp(11.5px, 1.1cqw, 14px); line-height: 1.4; color: var(--hx-sub); text-wrap: pretty; }
.hx-xl .hx-t { font-size: clamp(18px, 2.2cqw, 26px); }
.hx-xl .hx-p { font-size: clamp(13px, 1.3cqw, 16px); }
.hx-l .hx-t { font-size: clamp(15px, 1.7cqw, 21px); }
.hx-item:hover .hx-float { translate: 0 -6px; }
.hx-item:hover { --hx-stroke: #f19a3e; }
.hx-navy:hover { --hx-stroke: #f19a3e; }
@media (prefers-reduced-motion: no-preference) {
  .hx-item { animation: hx-bob var(--bob, 7s) ease-in-out infinite; animation-delay: var(--lag, 0s); }
  .hx-item:nth-child(1) { --bob: 8s; --lag: -1s; }
  .hx-item:nth-child(2) { --bob: 6.5s; --lag: -3s; }
  .hx-item:nth-child(3) { --bob: 7.4s; --lag: -5s; }
  .hx-item:nth-child(4) { --bob: 6.9s; --lag: -2.5s; }
  .hx-item:nth-child(5) { --bob: 6s; --lag: -2s; }
  .hx-item:nth-child(6) { --bob: 7.8s; --lag: -4s; }
  .hx-item:nth-child(7) { --bob: 6.8s; --lag: -6s; }
  .hx-item:nth-child(8) { --bob: 7.2s; --lag: -1.2s; }
  .hx-item:nth-child(9) { --bob: 5.6s; --lag: -1.5s; }
  .hx-item:nth-child(10) { --bob: 6.2s; --lag: -3.5s; }
  .hx-item:nth-child(11) { --bob: 5.9s; --lag: -4.4s; }
  .hx-item:nth-child(12) { --bob: 6.6s; --lag: -2.2s; }
  .hx-item:nth-child(13) { --bob: 5.4s; --lag: -0.6s; }
  .hx-item:nth-child(14) { --bob: 7.1s; --lag: -3.3s; }
  .hx-item:nth-child(15) { --bob: 6.0s; --lag: -4.1s; }
  .hx-item:nth-child(16) { --bob: 5.8s; --lag: -1.9s; }
  @keyframes hx-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
}
@media (max-width: 899px) {
  .fhex { aspect-ratio: auto; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 10px 12px; padding-block-end: 24px; }
  .hx-item { grid-column: span 5; }
  .hx-item { position: relative; inline-size: 100%; inset: auto; }
  .hx-item:nth-child(even) { margin-block-start: 52px; margin-block-end: -52px; }
  .hx-item:nth-child(1) { grid-column: 1 / -1; inline-size: 60%; justify-self: center; margin-block-end: 0; }
  .hx-item:nth-child(2) { margin-block-start: 0; margin-block-end: 0; }
  .hx-item:nth-child(n+3):nth-child(odd) { margin-block-start: 52px; margin-block-end: -52px; }
  .hx-item:nth-child(n+3):nth-child(even) { margin-block-start: 0; margin-block-end: 0; }
  .hx-t, .hx-l .hx-t { font-size: 14px; } .hx-xl .hx-t { font-size: 18px; }
  .hx-p { font-size: 12px; } .hx-xl .hx-p { font-size: 13px; }
  .hx-body { inline-size: 74%; gap: 4px; }
  /* the five icon-only hexagons close the comb as one row */
  .fhex .hx-xs { grid-column: span 2; inline-size: 100%; margin-block: 72px 0 !important; }
}

.free { background: var(--surface-card); border-block: 1px solid var(--border); }
.kpis { display: grid; grid-template-columns: repeat(6, 1fr); border-block: 1px solid var(--border-strong); margin-block-end: clamp(32px, 4vw, 48px); }
.kpis li { display: flex; flex-direction: column; gap: 4px; padding-block: 20px; padding-inline: 0 16px; }
.kpis li + li { padding-inline-start: 16px; border-inline-start: 1px solid var(--border); }
.kpi { font: 800 clamp(2.5rem, 1.6rem + 2.4vw, 3.75rem)/1 var(--font-display); letter-spacing: -0.02em; color: var(--brand-ink); }
.kpis li:last-child .kpi { color: var(--accent-ink); }
.kpis li span:last-child { font-size: 14px; line-height: 20px; color: var(--ink-secondary); }
.free-copy { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px 48px; align-items: start; }
.free-copy p:not(.lede) { color: var(--ink-secondary); }
.free-copy .btn { grid-column: 1; justify-self: start; margin-block-start: 8px; }

.spine { margin-block-start: 16px; font: 700 clamp(1.125rem, 0.95rem + 0.5vw, 1.375rem)/1.4 var(--font-display); color: var(--accent-ink); }
.control-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.checks { display: grid; gap: 4px; }
.checks li { display: flex; gap: 14px; padding-block: 14px; border-block-end: 1px solid var(--border); }
.checks li:last-child { border-block-end: 0; }
.checks .ic { color: var(--brand-mark); margin-block-start: 2px; }
.checks p { color: var(--ink-secondary); }
.checks strong { color: var(--ink); }
.keydemo { position: sticky; inset-block-start: 96px; padding: 24px; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
.kd-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-block: 16px; border-block-start: 1px solid var(--border); }
.kd-kind { display: flex; align-items: baseline; gap: 8px; font: 800 17px/24px var(--font-display); color: var(--brand-ink); }
.kd-no { color: var(--ink-secondary); font-weight: 500; }
.keydemo:not([data-key="on"]) .kd-no { visibility: hidden; }
.evidence { display: grid; margin-block: 4px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #ffffff; }
.evidence > div { display: grid; grid-template-columns: 104px 1fr; gap: 12px; padding: 6px 12px; min-block-size: var(--row); border-block-end: 1px solid var(--border); font-size: 14px; line-height: 20px; }
.evidence > div:last-child { border-block-end: 0; }
.evidence dt { color: var(--ink-muted); font: 600 12px/20px var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; }
.evidence dd { color: var(--ink); }
.evidence dd .kd-s-on { font-weight: 600; color: var(--positive); }
.kd-label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.kd-label .ic { color: var(--brand-mark); }
.switch { display: inline-flex; align-items: center; gap: 10px; min-block-size: 44px; padding-block: 0; padding-inline: 8px 14px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface-card); cursor: pointer; font-weight: 600; }
.switch-track { position: relative; inline-size: 40px; block-size: 24px; border-radius: 12px; background: var(--surface-panel); border: 1px solid var(--border-strong); }
.switch-knob { position: absolute; inset-block-start: 2px; inset-inline-start: 2px; inline-size: 18px; block-size: 18px; border-radius: 50%; background: var(--border-strong); transition: translate var(--motion-base) var(--motion-curve), background-color var(--motion-base) var(--motion-curve); }
.switch[aria-pressed="true"] .switch-track { background: var(--brand); border-color: var(--brand); }
.switch[aria-pressed="true"] .switch-knob { translate: 16px 0; background: #ffffff; }
[dir="rtl"] .switch[aria-pressed="true"] .switch-knob { translate: -16px 0; }
.kd-on, .kd-s-on, .kd-s-revoked { display: none; }
.switch[aria-pressed="true"] .kd-off { display: none; }
.switch[aria-pressed="true"] .kd-on { display: inline; }
.kd-doc { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-block-size: 40px; padding-block-end: 12px; }
.kd-state { display: grid; }
.kd-state > * { grid-area: 1 / 1; justify-self: end; }
.keydemo[data-key="on"] .kd-s-off, .keydemo[data-key="revoked"] .kd-s-fresh { display: none; }
.keydemo[data-key="on"] .kd-s-on { display: inline-flex; }
.keydemo[data-key="revoked"] .kd-s-revoked { display: inline; }
.keydemo[data-key="on"] .kd-foot .kd-s-on, .keydemo[data-key="on"] .evidence .kd-s-on { display: inline; }
.kd-foot { padding-block-start: 12px; border-block-start: 1px solid var(--border); color: var(--ink-secondary); font-size: 14px; line-height: 21px; min-block-size: 54px; }
@media (prefers-reduced-motion: no-preference) { .keydemo .kd-state > * { animation: rise var(--motion-base) var(--motion-curve); } }

.acc { background: var(--surface-card); border-block: 1px solid var(--border); }
.acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.acc .sec-head { margin-block-end: 0; }
.acc .link { margin-block-start: 20px; }
.rows > div { padding-block: 24px; border-block-start: 1px solid var(--border-strong); }
.rows > div:last-child { border-block-end: 1px solid var(--border-strong); }
.rows dt { font: 700 20px/28px var(--font-display); color: var(--brand-ink); margin-block-end: 8px; }
.rows dd { color: var(--ink-secondary); }

.table-scroll:focus-visible { outline-offset: 4px; }
.table-scroll { overflow-x: auto; scroll-snap-type: x proximity; border-radius: var(--radius-lg); }
.plans { min-inline-size: 760px; }
.plans th, .plans td { padding: 14px 16px; block-size: auto; vertical-align: top; }
.plans.gm-table > thead > tr > th { font: 800 18px/24px var(--font-display); letter-spacing: -0.01em; text-transform: none; color: var(--brand-ink); }
.plans tbody th { inline-size: 150px; color: var(--ink-muted); position: sticky; inset-inline-start: 0; background: var(--surface-card); z-index: 1; }
.plans thead th:first-child { position: sticky; inset-inline-start: 0; z-index: 2; }
.plans td { inline-size: 23%; }
.amt { display: block; font: 800 32px/36px var(--font-display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--ink); }
.r-price .sub { font-size: 14px; color: var(--ink-muted); }
/* T-203: the launch price charged, the regular price struck through beside it, and the floored percentage as a pill (never "was" or "save") */
.price-lbl { display: block; margin-block-end: 2px; font: 600 11.5px/16px var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted); }
.price-reg { display: block; margin-block-start: 6px; font-size: 14px; color: var(--ink-secondary); }
.price-reg s { font-weight: 600; text-decoration-thickness: 1.5px; }
.price-off { display: inline-flex; align-items: center; min-block-size: 22px; margin-block-start: 6px; padding-inline: 8px; border: 1px solid #ad5600; border-radius: var(--radius-pill); background: #fef2e6; color: #8a4400; font: 700 12px/16px var(--font-sans); white-space: nowrap; }
.price-lbl, .price-off { font-variant-numeric: tabular-nums; }
.r-ai td { font-weight: 600; font-variant-numeric: tabular-nums; vertical-align: middle; }
.ai { display: flex; align-items: center; gap: 12px; }
.ai > .tnum { font: 800 20px/24px var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink); }
.r-ai td:nth-child(2) .ai > .tnum { color: var(--accent-ink); }
.hx-more { align-self: end; font: 500 12.5px/16px var(--font-mono); color: var(--ink-muted); margin-inline-start: -6px; }
.r-inc li { position: relative; padding-block: 3px; padding-inline-start: 14px; font-size: 14px; line-height: 20px; color: var(--ink-secondary); }
.r-inc li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 10px; inline-size: 6px; block-size: 6px; background: var(--brand-mark); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }

.hexes { --hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3C/svg%3E");
  position: relative; display: block; flex: none;
  inline-size: calc(min(var(--n), 10) * var(--hx, 13px)); block-size: calc(var(--rows, 1) * var(--hx, 13px));
  background: var(--border); -webkit-mask: var(--hex) 0 0 / var(--hx, 13px) var(--hx, 13px) repeat; mask: var(--hex) 0 0 / var(--hx, 13px) var(--hx, 13px) repeat; }
.hexes::after { content: ""; position: absolute; inset: 0; background: var(--brand-mark); }
.r-ai td:nth-child(2) .hexes::after { background: var(--accent); }
.io .plans .hexes::after { clip-path: inset(0 0 100% 0); transition: clip-path 900ms var(--motion-curve); }
.io .plans.is-seen .hexes::after { clip-path: inset(0 0 0 0); }
.io .plans.is-seen td:nth-child(3) .hexes::after { transition-delay: 120ms; }
.io .plans.is-seen td:nth-child(4) .hexes::after { transition-delay: 240ms; }
.io .plans.is-seen td:nth-child(5) .hexes::after { transition-delay: 360ms; }
.price-foot { margin-block: 20px 4px; color: var(--ink-secondary); max-inline-size: 760px; }

.faq-grid { display: grid; grid-template-columns: 1fr 2.2fr; gap: clamp(24px, 5vw, 72px); align-items: start; }
.qa details { border-block-end: 1px solid var(--border); }
.qa details:first-child { border-block-start: 1px solid var(--border); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-block-size: 64px; padding-block: 14px; cursor: pointer; list-style: none; font: 700 18px/26px var(--font-display); color: var(--ink); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .ic { color: var(--brand-mark); transition: rotate var(--motion-base) var(--motion-curve); }
.qa details[open] summary .ic { rotate: 180deg; }
.qa details p { padding-block-end: 20px; max-inline-size: 680px; color: var(--ink-secondary); }

.toward { background: var(--surface-card); border-block-start: 1px solid var(--border); }
.toward .sec-head { max-inline-size: 1000px; }
.toward .h2-xl { font-size: clamp(1.75rem, 1rem + 2.2vw, 2.75rem); }
.hexline { display: flex; align-items: center; gap: 0; margin-block-end: clamp(32px, 4vw, 48px); overflow: hidden; }
.hx { position: relative; display: grid; place-items: center; flex: none; inline-size: 128px; block-size: 128px; }
.hx svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.hx b { position: relative; max-inline-size: 80px; text-align: center; font: 700 12.5px/16px var(--font-display); }
.hx-us svg { fill: #0b247f; stroke: none; }
.hx-us b { color: #ffffff; }
.hx-acc svg { fill: #ffffff; stroke: #f19a3e; stroke-width: 1.5; }
.hx-acc b { color: #121a3a; }
.hx-open svg { fill: none; stroke: #b9c0d4; stroke-width: 1; }
.hx-open { inline-size: 84px; block-size: 84px; }
.hx-link { flex: 1 1 40px; min-inline-size: 24px; block-size: 2px; background: #f19a3e; }
.hx-link-faint { background: repeating-linear-gradient(to right, #b9c0d4 0 6px, transparent 6px 12px); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.facts li { display: flex; flex-direction: column; gap: 8px; padding-block-start: 16px; border-block-start: 2px solid var(--brand); }
.facts li:last-child { border-block-start-color: var(--accent); }
.facts time { font: 500 12.5px/18px var(--font-mono); color: var(--ink-secondary); }
.facts p { color: var(--ink-secondary); font-size: 15px; line-height: 23px; }
.fact-tag { align-self: start; padding: 2px 10px; border: 1px solid var(--accent-ink); border-radius: var(--radius-pill); color: var(--accent-ink) !important; font-weight: 600; font-size: 13px !important; background: var(--surface-card); }

.final-in { text-align: center; max-inline-size: 840px; }
.final .eyebrow { margin-block-end: 20px; }
.final-ctas { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-block-start: 32px; }

.foot { background: var(--surface-panel); border-block-start: 1px solid var(--border); padding-block: 40px 32px; }
.foot-vision { display: flex; align-items: center; gap: 10px; font: 700 18px/26px var(--font-display); color: var(--brand-ink); padding-block-end: 24px; border-block-end: 1px solid var(--border); }
.foot-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-block: 20px; }
.foot-row ul { display: flex; flex-wrap: wrap; gap: 0 8px; }
.foot-row a { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 8px; color: var(--ink-secondary); font-size: 14px; text-decoration: none; }
.foot-row a:hover { color: var(--brand-ink); text-decoration: underline; }
.foot-note { font-size: 13px; color: var(--ink-muted); }

.gm-table > thead > tr > th, .doc-meta dt, .plans tbody th { font: 600 12px/16px var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; }

@media (max-width: 1023px) {
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .kpis li:nth-child(4) { border-inline-start: 0; padding-inline-start: 0; }
  .kpis li:nth-child(n+4) { border-block-start: 1px solid var(--border); }
  .why-cards { grid-template-columns: 1fr 1fr; }
  .c-tools { grid-column: 1 / -1; grid-row: 1; }
}
@media (max-width: 899px) {
  .hero { grid-template-columns: [bleed-s] var(--g) [c-s] 1fr [mid c-e] var(--g) [bleed-e]; grid-template-rows: none; }
  /* phone: the dark half says (h1, sub, CTAs), then ONE crossing onto the paper; the direct answer and the five facts are written on
     the paper under the document, so the fold shows the sentence card's top and nothing re-crosses into the dark */
  .hero-sub, .hero-ctas, .hero-eyebrow, .hero-h1 { grid-column: c-s / c-e; grid-row: auto; padding-inline-end: 0; }
  .hero-sub { order: 1; } .hero-ctas { order: 2; } .paper { order: 3; } .hero-answer { order: 4; } .hero-trust { order: 5; }
  .hero-h1 .br-d { display: none; }
  .hero-sub { font-size: 16px; line-height: 24px; }
  .hero-h1 { margin-block-end: 20px; }
  .hero-ctas { padding-block-end: 84px; }
  .hero-answer, .hero-trust { grid-column: bleed-s / bleed-e; grid-row: auto; padding-inline: var(--g); background: #ffffff; border-color: #d9deea; }
  .hero-answer { padding-block: 16px; color: #343d5c; }
  .hero-trust { display: grid; grid-template-columns: 1fr 1fr; padding-block: 16px 28px; }
  .hero-trust li { color: #121a3a; }
  .hero-trust .ic { color: #0b247f; }
  .paper { grid-column: bleed-s / bleed-e; grid-row: auto; padding: 0 var(--g) 24px; border-start-start-radius: 0; }
  .paper > * { max-inline-size: none; }
  .say { margin-inline: 0; margin-block-start: -60px; max-inline-size: none; }
  .steps, .facts, .acc-grid, .control-grid, .faq-grid, .free-copy { grid-template-columns: 1fr; }
  .steps-line { display: none; }
  .steps li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 21px; inset-block-start: 44px; inline-size: 2px; block-size: calc(100% - 44px + var(--sg)); background: var(--accent); }
  .steps li { padding-inline-start: 64px; position: relative; }
  .step-n { position: absolute; inset-inline-start: 0; inset-block-start: 0; }
  .keydemo { position: static; }
  .hx { inline-size: 92px; block-size: 92px; }
  .plans tbody th { inline-size: 96px; }
  .hx b { font-size: 10px; line-height: 13px; max-inline-size: 60px; }
  .hx-open { inline-size: 60px; block-size: 60px; }
}
@media (max-width: 599px) {
  .why-cards { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .kpis li:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .kpis li:nth-child(4) { border-inline-start: 1px solid var(--border); padding-inline-start: 16px; }
  .kpis li:nth-child(n+3) { border-block-start: 1px solid var(--border); }
  .doc-meta { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  /* the statement has five columns: on a phone its cells are tightened so the table fits without a sideways scroll */
  .paper[data-kind="statement"] .doc-lines :is(th, td) { padding-inline: 4px; font-size: 12.5px; letter-spacing: -0.01em; }

  .hero-ctas .btn { flex: 1 1 100%; }
  .hx-open:nth-last-child(-n+2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .io [data-reveal] > * { opacity: 1; scale: none; transition: none; }
  .io .plans .hexes::after { clip-path: none; transition: none; }
  .link .arrow, .switch-knob, .qa summary .ic { transition: none; }
  .ticket { animation: none; }
  @view-transition { navigation: none; }
}
@media print {
  .io [data-reveal] > *, .paper :is(.ch, [data-t]) { opacity: 1 !important; scale: none !important; animation: none !important; }
  .nav { position: static; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav { background: #0b1230; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Tabular figures, restated after every `font` shorthand above: the shorthand resets font-variant-numeric to `normal`, so a rule
   that set it earlier is lost (round 1 found the six KPIs proportional). Each selector repeats its shorthand rule's own specificity. */
body, .h2, .h3, .eyebrow, .say-who, .btn, .gm-btn, .gm-state, .hero-h1, .say-text, .doc-title, .chip, .ticket-name, .hero-trust li,
.names, .tools li, .kpi,  .spine, .rows dt, .amt, .qa summary, .hx b, .facts time, .foot-vision, .step-n,
.kd-kind, .evidence dt, .strip-act, .think-word, .think-say, .scene-b, .say-file, .hx-more, .ai > .tnum, .gm-table > thead > tr > th, .doc-meta dt, .plans tbody th,
.plans.gm-table > thead > tr > th, .ticket-name { font-variant-numeric: tabular-nums; }

/* V13 «Lens and Wave» as a section ground (hexfield.js): the canvas sits under the section's content and never takes a click */
[data-hexfield] { position: relative; isolation: isolate; overflow: hidden; --hexfield-opacity: 0.75; }
.hexfield { position: absolute; inset: 0; z-index: -1; inline-size: 100%; block-size: 100%; pointer-events: none; opacity: var(--hexfield-opacity); }
@media print { .hexfield { display: none; } }

/* The one question every visitor asks, set apart on the brand's navy: the question large on one side, a big orange «Yes.», and the
   answer with four facts on the other. The only navy band below the hero, kept for this one idea. */
.solo { background: radial-gradient(120% 140% at 0% 0%, #13287f 0%, #0b1a5c 55%, #0a1446 100%); color: #ffffff; --focus-ring: #f7c083; }
.solo-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.solo-h { font: 800 clamp(1.75rem, 1.1rem + 1.9vw, 2.75rem)/1.12 var(--font-display); letter-spacing: -0.02em; text-wrap: balance; }
.solo-yes { margin-block-start: 12px; font: 800 clamp(4rem, 2.6rem + 5vw, 7.5rem)/0.95 var(--font-display); letter-spacing: -0.04em; color: #f19a3e; }
.solo-lede { font-size: 18px; line-height: 28px; color: #dfe4f7; max-inline-size: 60ch; }
.solo-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin-block-start: 28px; padding-block-start: 24px; border-block-start: 1px solid #ffffff26; }
.solo-list li { display: flex; gap: 12px; align-items: flex-start; font: 600 15px/22px var(--font-sans); color: #ffffff; }
.solo-list .ic { flex: none; inline-size: 22px; block-size: 22px; margin-block-start: 0; color: #f7c083; }
.solo-h, .solo-yes, .solo-list li { font-variant-numeric: tabular-nums; }
@media (max-width: 899px) {
  .solo-in { grid-template-columns: 1fr; gap: 20px; }
  .solo-yes { margin-block-start: 4px; }
}
@media (max-width: 599px) { .solo-list { grid-template-columns: 1fr; } }

/* ── The blog's lists (blog/posts.json, rendered in the HTML and refreshed by site.js). Home: the newest post as a navy lead with
   the ledger's 32 px ruling, the next two stacked beside it under a brand rule. The index: the lead across, the rest in two columns.
   Under a post: two plain entries. The whole entry is the link (one anchor, stretched). ── */
.blog-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-block-end: clamp(28px, 4vw, 40px); }
.bl { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(28px, 4vw, 56px); }
.bl-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bl-all { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bl-item { min-inline-size: 0; }
.bl-lead .bl-item:first-child { grid-row: span 2; }
.bl-all .bl-item:first-child { grid-column: 1 / -1; }
.bl-a { position: relative; display: flex; flex-direction: column; gap: 10px; block-size: 100%; padding-block: 20px 4px; border-block-start: 2px solid var(--brand); }
.bl-meta { display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.bl-meta time { font: 500 13.5px/20px var(--font-mono); font-variant-numeric: tabular-nums; }
.bl-t { font: 800 22px/1.27 var(--font-display); letter-spacing: -0.01em; color: var(--brand-ink); text-wrap: balance; }
.bl-t a { text-decoration: none; }
.bl-t a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.bl-t a:focus-visible { outline: none; }
.bl-t a:focus-visible::after { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.bl-a:hover .bl-t a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.bl-s { color: var(--ink-secondary); max-inline-size: 62ch; text-wrap: pretty; }
:is(.bl-lead, .bl-all) .bl-item:first-child .bl-a { justify-content: flex-end; gap: 14px; min-block-size: 300px; padding: clamp(24px, 3vw, 40px); border: 0; border-radius: var(--radius-xl);
  background: #0b1230 repeating-linear-gradient(to bottom, transparent 0 31px, rgba(163, 180, 245, 0.07) 31px 32px); color: #ffffff; --focus-ring: #f7c083; box-shadow: var(--shadow-md); }
:is(.bl-lead, .bl-all) .bl-item:first-child .bl-meta { color: #c9d1ee; }
:is(.bl-lead, .bl-all) .bl-item:first-child .bl-t { font-size: clamp(1.625rem, 1.1rem + 1.5vw, 2.375rem); line-height: 1.14; color: #ffffff; max-inline-size: 22ch; }
:is(.bl-lead, .bl-all) .bl-item:first-child .bl-s { color: #dfe4f7; font-size: 17px; line-height: 27px; }
.bl-lead .bl-item:not(:first-child) .bl-a { padding-block-end: 8px; }
/* fewer posts than the layout's slots never leave a hole: with two, the lead and its neighbour stand side by side at the same
   height, the neighbour's words at the foot like the lead's; an odd last entry on the index, or a lone one under a post, spans the row */
.bl-lead .bl-item:first-child:nth-last-child(2) { grid-row: auto; }
.bl-lead .bl-item:nth-child(2):last-child .bl-a { justify-content: flex-end; gap: 14px; padding: clamp(24px, 3vw, 40px); background: var(--surface-card);
  border: 1px solid var(--border); border-block-start: 4px solid var(--brand); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.bl-all .bl-item:nth-child(even):last-child, .bl-two .bl-item:only-child { grid-column: 1 / -1; }
.bl-two .bl-item:only-child .bl-a, .bl-all .bl-item:nth-child(even):last-child .bl-a { max-inline-size: 760px; }
@media (max-width: 899px) {
  .bl, .bl-two, .bl-all { grid-template-columns: 1fr; }
  .bl-lead .bl-item:first-child { grid-row: auto; }
  :is(.bl-lead, .bl-all) .bl-item:first-child .bl-a { min-block-size: 0; }
}