/* Orca Systems — marketing site
   "Orca Systems" is the working brand name. It is not shown to visitors as a placeholder. */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600..800&family=Plus+Jakarta+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

/* Design system, round 2 (2026-10-12).
   One neutral family: deep navy ink (text, bands, links, icons) on cool paper.
   One accent: orange, used for the primary action, the link underline and the focus ring.
   Display face: Bricolage Grotesque for headlines and figures; Plus Jakarta Sans for reading text. */
:root {
  --color-ink: #0F1E4A;
  --color-primary: #0F1E4A;
  --color-link: #0F1E4A;
  --color-on-primary: #FFFFFF;
  --color-secondary: #0F1E4A;
  --color-accent: #C2410C;
  --color-accent-hover: #AD3A0B;
  --color-accent-text: #9A3412;
  --color-on-accent: #FFFFFF;
  --color-background: #F6F7FB;
  --color-foreground: #17213F;
  --color-card: #FFFFFF;
  --color-card-foreground: #17213F;
  --color-muted: #ECEFF8;
  --color-muted-foreground: #46506F;
  --color-border: #DADFEC;
  /* Form field outline only (WCAG 1.4.11 needs 3:1). 3.7:1 on a white field, 3.5:1 on the page. Every other hairline keeps --color-border. */
  --color-field-border: #7A84A3;
  --color-destructive: #B91C1C;
  --color-ring: #C2410C;
  --color-band: #0F1E4A;
  --color-on-band: #FFFFFF;
  --color-on-band-muted: #C9D3F0;

  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px;
  --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px;
  /* Section rhythm: small, medium, large. Sections pick one on purpose. */
  --section-s: 56px; --section-m: 88px; --section-l: 128px;

  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px;
  --shadow-card: 0 1px 2px rgba(15,30,74,0.06), 0 8px 24px rgba(15,30,74,0.08);
  --shadow-frame: 0 2px 4px rgba(15,30,74,0.06), 0 28px 56px -24px rgba(15,30,74,0.38);
  --shadow-lift: 0 2px 4px rgba(15,30,74,0.06), 0 16px 32px -12px rgba(15,30,74,0.22);
  --max-width: 1180px;

  /* Motion tokens. Transform and opacity only. */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 150ms;
  --dur-2: 320ms;
  --dur-3: 640ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-ink: #EEF1FA;
    --color-primary: #DCE4FF;
    --color-on-primary: #0F1E4A;
    --color-secondary: #DCE4FF;
    --color-background: #0B1330;
    --color-foreground: #E7EBF8;
    --color-card: #121C3F;
    --color-card-foreground: #E7EBF8;
    --color-muted: #18234D;
    --color-muted-foreground: #A9B4D4;
    --color-border: #2E3B6E;
    --color-field-border: #667AB8;
    --color-link: #BCD0FF;
    --color-accent-text: #FDBA74;
    --color-destructive: #F87171;
    --color-ring: #FDBA74;
    --color-band: #18234D;
  }
}
:root[data-theme="dark"] {
  --color-ink: #EEF1FA;
  --color-primary: #DCE4FF;
  --color-on-primary: #0F1E4A;
  --color-secondary: #DCE4FF;
  --color-background: #0B1330;
  --color-foreground: #E7EBF8;
  --color-card: #121C3F;
  --color-card-foreground: #E7EBF8;
  --color-muted: #18234D;
  --color-muted-foreground: #A9B4D4;
  --color-border: #2E3B6E;
  --color-field-border: #667AB8;
  --color-link: #BCD0FF;
  --color-accent-text: #FDBA74;
  --color-destructive: #F87171;
  --color-ring: #FDBA74;
  --color-band: #18234D;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-background);
  color: var(--color-foreground);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100dvh;
  /* Plus Jakarta Sans draws its space glyph only 0.17em wide (measured: 17px at 100px; Arial and the
     system sans are 0.28em), so words ran together at body sizes. The cause is the font file itself,
     not letter-spacing or font-feature-settings (both are normal). 0.08em brings the gap to about 0.25em. */
  word-spacing: 0.08em;
}
button, input, select, textarea { word-spacing: inherit; }
img { max-width: 100%; display: block; }
/* Links: navy text, one orange underline. The underline is the only colour a link carries. */
a { color: var(--color-link); text-decoration-line: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 3px; }

/* Type scale. Display H1 clamp(2.5rem, 6vw, 4.5rem) / 1.05 / -0.03em; H2 steps down to 2.75rem max;
   H3 is a 1.25rem label-weight heading. Reading text is 16px/1.6 with a 68ch measure. */
h1, h2, h3 { font-family: var(--font-display); color: var(--color-ink); margin: 0 0 var(--space-3); text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; }
h3 { font-size: 1.25rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 var(--space-3); color: var(--color-muted-foreground); max-width: 68ch; }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-4); }
h1, h2, h3 { word-spacing: 0.02em; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--color-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Scroll reveal. Nothing is hidden by CSS alone: js/main.js adds .reveal-pending only after the visitor
   starts scrolling, and only to blocks that are still below the fold, so a page with no script, a full-page
   screenshot or a print always shows everything. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-pending { opacity: 0; transform: translateY(20px); }
  .reveal-pending.is-in { opacity: 1; transform: none; transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
}

/* Skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-primary); color: var(--color-on-primary);
  padding: var(--space-2) var(--space-3); z-index: 1000; border-radius: var(--radius-sm);
}
.skip-link:focus { left: var(--space-3); top: var(--space-3); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--color-background) 80%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; gap: var(--space-4);
}
.brand { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; color: var(--color-ink); text-decoration: none; }
.brand img { height: 28px; width: 28px; }
.nav-links { display: flex; align-items: center; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.nav-links a { color: var(--color-foreground); text-decoration: none; font-weight: 600; font-size: 0.95rem; display: inline-flex; align-items: center; min-height: 44px; position: relative; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after, .nav-links a[aria-current="true"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"], .nav-links a[aria-current="true"] { color: var(--color-ink); font-weight: 700; }
.nav-links .nav-contact-mobile { display: none; }
/* One conversion ask in the header: the primary button. "Book a demo" and "Contact" live in the page
   bodies and the footer on a wide screen, and in the collapsed menu on a small one. */
@media (min-width: 1121px) {
  .nav-links a[href$="demo.html"] { display: none; }
  .nav-actions .nav-contact { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .nav-links a::after { transition: transform var(--dur-2) var(--ease-out); }
}
.nav-actions { display: flex; align-items: center; gap: var(--space-3); }
.icon-btn.nav-toggle { display: none; }
.brand { flex-shrink: 0; }

@media (max-width: 1100px) {
  .nav-links { gap: var(--space-4); }
}

/* The collapsed menu hangs from the header. It is positioned against the header itself
   because the header's backdrop-filter would trap a fixed-position child. */
@media (max-width: 1120px) {
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--color-background); border-bottom: 1px solid var(--color-border);
    flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-2) var(--space-4) var(--space-4);
    box-shadow: 0 16px 24px rgba(15, 23, 42, 0.12);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
  }
  .nav-links.is-open { visibility: visible; opacity: 1; transform: translateY(0); transition-delay: 0s; }
  .nav-links a { min-height: 48px; border-bottom: 1px solid var(--color-border); font-size: 1rem; }
  .nav-links a:last-child { border-bottom: none; }
  .nav-links .nav-contact-mobile { display: inline-flex; }
  .icon-btn.nav-toggle { display: inline-flex; }
  .nav-actions .nav-contact { display: none; }
}

/* Inline nav on a wide screen: pad each link sideways so a short word ("Blog", "Home") is still a 44px-wide target.
   The negative margin keeps the visual gaps as they were, and the underline bar still spans only the word. */
@media (min-width: 1121px) {
  .nav-links a { padding-inline: 7px; margin-inline: -7px; }
  .nav-links a::after { left: 7px; right: 7px; }
}

/* No JavaScript: the hamburger cannot open the menu, so show the links as a plain wrapped list under the brand
   instead of hiding them. Uses the (scripting: none) media feature, so no script, class or page edit is needed
   and nothing flashes open when JavaScript does run. */
@media (max-width: 1120px) and (scripting: none) {
  .site-header { position: static; }
  html .site-header .container { height: auto; min-height: 72px; flex-wrap: wrap; padding-top: var(--space-2); padding-bottom: var(--space-2); }
  .icon-btn.nav-toggle { display: none; }
  .nav-links { position: static; order: 3; flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; gap: 0 var(--space-4); padding: 0; background: transparent; border-bottom: 0; box-shadow: none; visibility: visible; opacity: 1; transform: none; transition: none; }
  .nav-links a { min-height: 44px; border-bottom: 0; font-size: 0.95rem; }
}

@media (max-width: 480px) {
  .site-header .container { padding: 0 var(--space-3); gap: var(--space-2); }
  .brand { font-size: 1rem; gap: 6px; }
  .brand img { height: 24px; width: 24px; }
  .nav-actions { gap: var(--space-2); }
  .nav-actions .btn { padding: 0 12px; font-size: 0.85rem; white-space: nowrap; }
}
@media (max-width: 360px) {
  .site-header .container { padding: 0 var(--space-2); }
  .brand { font-size: 0.92rem; gap: 4px; }
  .brand img { height: 22px; width: 22px; }
  .nav-actions .btn { padding: 0 9px; font-size: 0.78rem; }
  .icon-btn.nav-toggle { width: 40px; min-width: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-links { transition: none; }
}

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-sm); font-weight: 700; font-size: 0.95rem; text-decoration: none; cursor: pointer; border: 1px solid transparent; touch-action: manipulation; }
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-1) ease, border-color var(--dur-1) ease; }
  .btn:hover { transform: translateY(-2px); }
}
.btn:active { transform: translateY(0) scale(0.98); transition-duration: 60ms; }
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn-primary:hover { box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--color-accent) 70%, transparent); background: var(--color-accent-hover); }
.btn-secondary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-secondary:hover { box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--color-ink) 70%, transparent); }
.btn-ghost { background: transparent; color: var(--color-ink); border-color: color-mix(in srgb, var(--color-ink) 28%, var(--color-border)); }
.btn-ghost:hover { background: var(--color-muted); border-color: var(--color-ink); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.65; cursor: not-allowed; }
.btn-lg { min-height: 52px; padding: 0 var(--space-5); font-size: 1rem; }

/* Icon button (nav toggle) */
.icon-btn { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; }

/* Hero */
/* Home hero: the headline spans the full width, the lede and buttons sit in the narrow left column and the
   product crop takes the wide right column and runs off the right edge of the page. The left block is
   flattened with display: contents so its children can be placed on the grid without changing the markup. */
.hero { padding: var(--space-7) 0 var(--space-7); overflow: hidden; position: relative; }
.hero::before { content: ""; position: absolute; z-index: 0; right: 0; top: 0; bottom: 0; width: 46%; background: var(--color-muted); clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); }
.hero .container { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--space-6); grid-template-areas: "badge badge" "title title" "lede media" "ctas media" "proof media"; grid-template-rows: auto auto auto auto 1fr; align-items: start; }
.hero .container > div:first-child { display: contents; }
.hero-badge { grid-area: badge; justify-self: start; display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-ink); font-weight: 700; font-size: 0.9rem; padding: 0 0 0 var(--space-3); border-left: 3px solid var(--color-accent); margin-bottom: var(--space-4); line-height: 1.3; }
.hero-badge svg { display: none; }
.hero h1 { grid-area: title; max-width: 20ch; margin-bottom: var(--space-5); }
.hero-lede { grid-area: lede; font-size: 1.2rem; line-height: 1.55; max-width: 36ch; color: var(--color-foreground); }
.hero-ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }
.hero .hero-ctas { grid-area: ctas; align-self: start; margin-top: var(--space-2); }
.hero-proof { grid-area: proof; margin-top: var(--space-5); display: block; color: var(--color-muted-foreground); font-size: 0.92rem; max-width: 40ch; }
.hero-proof svg { display: inline-block; vertical-align: -3px; margin-right: var(--space-2); color: var(--color-ink); }
.hero-media { grid-area: media; position: relative; align-self: start; max-width: 840px; margin-right: calc(-1 * var(--space-4) - max(0px, (100vw - var(--max-width)) / 2)); }

/* Phone and tablet: one column, and the text (badge, headline, sub-line, buttons) comes first.
   The screenshot follows in document order, so it must NOT be given a negative order here. */
@media (max-width: 960px) {
  .hero { padding: var(--space-5) 0 var(--space-6); }
  .hero::before { width: 100%; clip-path: none; top: auto; height: 38%; }
  .hero .container { grid-template-columns: minmax(0, 1fr); grid-template-areas: "badge" "title" "lede" "ctas" "proof" "media"; }
  .hero h1 { margin-bottom: var(--space-4); }
  .hero-lede { max-width: 52ch; }
  .hero-media { margin-right: 0; margin-top: var(--space-5); max-width: none; }
}

/* Fact strip (was the logo strip: it never held logos, and no logos are invented here). A navy band
   directly under the hero, three plain statements in larger type. */
.logo-strip { background: var(--color-band); color: var(--color-on-band); padding: 0; }
.logo-strip .container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; line-height: 1.35; letter-spacing: -0.01em; }
.logo-strip .container > span { padding: var(--space-4) var(--space-4) var(--space-4) 0; }
.logo-strip .container > span + span { padding-left: var(--space-4); border-left: 1px solid rgba(255, 255, 255, 0.22); }
@media (max-width: 760px) {
  .logo-strip .container { grid-template-columns: minmax(0, 1fr); }
  .logo-strip .container > span, .logo-strip .container > span + span { padding: var(--space-3) 0; border-left: 0; font-size: 1rem; }
  .logo-strip .container > span + span { border-top: 1px solid rgba(255, 255, 255, 0.22); }
}

/* Sections. Rhythm comes from three vertical sizes and from alignment, not from one repeated stack. */
.section { padding: var(--section-m) 0; }
.section--s { padding: var(--section-s) 0; }
.section--l { padding: var(--section-l) 0; }
.section-head { max-width: 640px; margin: 0 auto var(--space-6); text-align: center; }
.section-head p { margin-left: auto; margin-right: auto; }
.section-head .eyebrow { display: block; color: var(--color-accent-text); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-2); }

/* Full-bleed tinted and ink bands */
.band { background: var(--color-muted); }
.band--ink { background: var(--color-band); color: var(--color-on-band); }
.band--ink h2, .band--ink h3 { color: var(--color-on-band); }
.band--ink p { color: var(--color-on-band-muted); }
.band--ink a:not(.btn) { color: var(--color-on-band); text-decoration-color: var(--color-on-band); }
.band--ink :is(a, button, summary):focus-visible { outline-color: #fff; }

/* Statement + list: a sticky left column and a ruled list on the right. No cards. */
.statement { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-7); align-items: start; }
.statement-head { position: sticky; top: 104px; }
.statement-head h2 { max-width: 14ch; }
.statement-head p { max-width: 40ch; }
@media (max-width: 900px) { .statement { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } .statement-head { position: static; } }

/* Ruled rows: the replacement for a wall of equal cards. */
.rows { list-style: none; margin: 0; padding: 0; display: grid; }
.rows > * { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--color-border); }
.rows > *:first-child { border-top: 0; padding-top: 0; }
.rows .icon-wrap { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--color-card); border: 1px solid var(--color-border); color: var(--color-ink); display: flex; align-items: center; justify-content: center; }
.rows h3 { margin-bottom: var(--space-1); }
.rows p { margin: 0; }
.rows--plain > * { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 480px) { .rows > * { grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--space-3); } .rows .icon-wrap { width: 36px; height: 36px; } }

/* Feature grid (kept for pages that still use it) */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 860px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .feature-grid { grid-template-columns: 1fr; } }

.card {
  background: var(--color-card);
  color: var(--color-card-foreground);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}
@media (prefers-reduced-motion: no-preference) {
  .feature-card { transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-1) ease; }
  .feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--color-ink); }
}
.feature-card .icon-wrap { width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--color-muted); color: var(--color-ink); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-3); }
.feature-card p { margin-bottom: 0; }

/* Product screens showcase (home page). Real captures from Royal Ivory Nana Hotel, cropped for privacy.
   The wrappers crop with CSS only (the files are never altered), and every screen links to its full-size file. */
.showcase .section-head { margin-bottom: var(--space-5); }
.showcase .section-head p { max-width: 62ch; }
.showcase .section-head .shots-note { margin: 0; font-size: 0.95rem; }
.shots { display: grid; gap: var(--space-6); }
.shots-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: start; }
.shots-stack { display: grid; gap: var(--space-6); }
.shot { margin: 0; min-width: 0; }
.shot-link { position: relative; display: block; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-card); box-shadow: var(--shadow-card); cursor: zoom-in; }
.shot-link:focus-visible { outline: 3px solid var(--color-ring); outline-offset: 3px; }
.shot-crop { display: block; position: relative; overflow: hidden; }
.shot-crop img { display: block; width: 100%; max-width: none; height: auto; }

/* Variable crop: the box takes the visible region's ratio, the image is scaled and shifted inside it.
   --sw source width, --vx / --vy visible top-left, --vw / --vh visible size (all in source pixels).
   Cropping tighter is the only thing this does; it never shows more of a screenshot than the page showed before. */
.crop { display: block; position: relative; overflow: hidden; aspect-ratio: var(--vw) / var(--vh); background: var(--color-muted); }
.crop img { display: block; max-width: none; height: auto; width: calc(var(--sw) / var(--vw) * 100%); margin-left: calc(var(--vx) / var(--vw) * -100%); margin-top: calc(var(--vy) / var(--vw) * -100%); }
.crop--ask { --sw: 800; --vx: 24; --vy: 4; --vw: 752; --vh: 500; }
.crop--ask-sm { --sw: 800; --vx: 36; --vy: 8; --vw: 470; --vh: 330; }
.crop--rule { --sw: 1056; --vx: 0; --vy: 0; --vw: 1056; --vh: 148; }
.crop--build { --sw: 1440; --vx: 240; --vy: 56; --vw: 1200; --vh: 560; }
.crop--ask-page { --sw: 1440; --vx: 240; --vy: 56; --vw: 1200; --vh: 600; }
.crop--res-top { --sw: 1440; --vx: 272; --vy: 130; --vw: 680; --vh: 700; }
.crop--maint { --sw: 1440; --vx: 240; --vy: 56; --vw: 1200; --vh: 472; }
.crop--maint-r { --sw: 1440; --vx: 660; --vy: 130; --vw: 780; --vh: 398; }
.crop--hub { --sw: 1440; --vx: 240; --vy: 60; --vw: 1200; --vh: 600; }
@media (max-width: 700px) {
  .crop--ask { --vx: 36; --vy: 8; --vw: 470; --vh: 330; }
}

/* ---- Frames: three styles, each with one job ----
   1. .frame--browser  a whole-screen capture, with window chrome and a deep shadow. Used for the lead screenshot of a section.
   2. .frame--mat      a cropped detail, set on a tinted mat like a print. Used for forms and tables.
   3. .frame--callout  a tight crop with an orange ring and one short label that quotes the screen's own words. */
.frame { position: relative; margin: 0; min-width: 0; }
.frame > a.zoomable { position: relative; }
.frame--browser .shot-link, .frame--browser.hero-media > a, .frame--browser > a.zoomable { border-radius: 12px; border: 1px solid color-mix(in srgb, var(--color-ink) 18%, var(--color-border)); box-shadow: var(--shadow-frame); background: var(--color-card); overflow: hidden; }
.frame--browser .shot-link::before, .frame--browser > a.zoomable::before { content: ""; display: block; height: 34px; border-bottom: 1px solid var(--color-border); background: radial-gradient(circle at 18px 17px, #C2C9DB 0 4.5px, transparent 5px), radial-gradient(circle at 36px 17px, #C2C9DB 0 4.5px, transparent 5px), radial-gradient(circle at 54px 17px, #C2C9DB 0 4.5px, transparent 5px), var(--color-muted); }
.frame--mat .shot-link, .frame--mat > a.zoomable { padding: 10px; border-radius: 16px; border: 0; background: color-mix(in srgb, var(--color-ink) 9%, var(--color-card)); box-shadow: var(--shadow-lift); }
.frame--mat .shot-crop, .frame--mat .crop { border-radius: 8px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-ink) 14%, transparent); background: var(--color-card); }
.frame--callout .shot-link, .frame--callout > a.zoomable { border-radius: 10px; border: 1px solid var(--color-border); box-shadow: var(--shadow-card); overflow: hidden; }
/* The ring and its label sit in the crop. --rx --ry --rw --rh are percentages of the crop box. */
.callout { position: absolute; left: calc(var(--rx) * 1%); top: calc(var(--ry) * 1%); width: calc(var(--rw) * 1%); height: calc(var(--rh) * 1%); border: 2px solid var(--color-accent); border-radius: 8px; pointer-events: none; }
.callout::after { content: attr(data-label); position: absolute; right: -2px; bottom: calc(100% + 6px); background: var(--color-accent); color: var(--color-on-accent); font: 700 0.78rem/1.2 var(--font-sans); padding: 4px 8px; border-radius: 6px; white-space: nowrap; }
.callout--below::after { bottom: auto; top: calc(100% + 6px); }

/* The enlarge control is a 40px round button in the corner of the frame. The whole screenshot is the link;
   the strip text stays in the markup for screen readers and for the pages that still show the strip. */
.shot-link .zoom-hint, .frame > a.zoomable .zoom-hint { position: absolute; right: 10px; bottom: 10px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; font-size: 0; background: var(--color-ink); color: var(--color-on-primary); box-shadow: 0 4px 12px rgba(15, 30, 74, 0.35); justify-content: center; }
.shot-link .zoom-hint::before, .frame > a.zoomable .zoom-hint::before { width: 20px; height: 20px; }
a.zoomable:hover .zoom-hint { background: var(--color-accent); color: var(--color-on-accent); }
@media (prefers-reduced-motion: no-preference) {
  .shot-crop img, .crop img { transition: transform var(--dur-3) var(--ease-out); transform-origin: 40% 30%; }
  a.zoomable:hover .shot-crop img, a.zoomable:hover .crop img { transform: scale(1.015); }
  .shot-link .zoom-hint, .frame > a.zoomable .zoom-hint { transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-1) ease; }
  a.zoomable:hover .zoom-hint { transform: scale(1.08); }
  .shot-link, .frame > a.zoomable { transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
  .shot-link:hover, .frame > a.zoomable:hover { transform: translateY(-3px); }
}
/* Crop boxes: ratio = visible area, img width and margins = where that area sits inside the file. */
.shot-crop--lead { aspect-ratio: 1440 / 810; }
.shot-crop--res { aspect-ratio: 710 / 900; }
.shot-crop--res img { width: 202.8%; margin-left: -35.2%; margin-top: -8.45%; }
.shot-crop--rule { aspect-ratio: 1056 / 148; }
.shot-crop--maint { aspect-ratio: 1200 / 528; }
.shot-crop--maint img { width: 120%; margin-left: -20%; }
.shot figcaption, .frame figcaption { margin-top: var(--space-4); font-size: 0.95rem; line-height: 1.55; color: var(--color-muted-foreground); max-width: 56ch; }
.shot figcaption strong, .frame figcaption strong { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -0.01em; color: var(--color-ink); }
.shot--lead figcaption { font-size: 1.05rem; max-width: 62ch; }
@media (max-width: 860px) {
  .shots-row { grid-template-columns: minmax(0, 1fr); }
  .shot--tall { max-width: 520px; }
}
/* Phone: the four screens become one swipeable row (each 86% wide, so the next one peeks in) instead of a
   2,000px stack. Every screen still opens full size from its enlarge button. */
@media (max-width: 600px) {
  .shot-crop--lead { aspect-ratio: 4 / 3; }
  .shots { display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4) var(--space-3); scroll-padding: 0 var(--space-4); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .shots-row, .shots-stack { display: contents; }
  .shots .shot { flex: 0 0 86%; scroll-snap-align: start; max-width: none; }
  .shots .shot--tall { max-width: none; }
}

/* Stat row */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); text-align: center; }
@media (max-width: 760px) { .stat-row { grid-template-columns: 1fr 1fr; } }
.stat-row .stat-value { font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; color: var(--color-ink); }
.stat-row .stat-label { color: var(--color-muted-foreground); font-size: 0.9rem; }

/* Pricing */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); align-items: stretch; }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }
.price-card { display: flex; flex-direction: column; }
.price-card.is-featured { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary), var(--shadow-card); position: relative; }
.price-card .price-tier { font-weight: 700; color: var(--color-muted-foreground); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; }
.price-card .price-amount { font-size: 2.25rem; font-weight: 800; margin: var(--space-2) 0; }
.price-card .price-amount small { font-size: 0.95rem; font-weight: 600; color: var(--color-muted-foreground); }
.price-card .price-note { font-size: 0.85rem; color: var(--color-muted-foreground); margin-bottom: var(--space-4); }
.price-card ul { list-style: none; padding: 0; margin: 0 0 var(--space-5); flex: 1; }
.price-card li { display: flex; gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--color-border); font-size: 0.92rem; }
.price-card li:first-child { border-top: none; }
.price-card li svg { flex-shrink: 0; color: var(--color-link); margin-top: 2px; }
.featured-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--color-accent); color: var(--color-on-accent); font-size: 0.75rem; font-weight: 700; padding: 4px var(--space-3); border-radius: 999px; }

/* Add-ons note */
.addons-note { background: var(--color-muted); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); margin-top: var(--space-5); }

/* FAQ */
.faq-item { border-top: 1px solid var(--color-border); padding: var(--space-4) 0; }
.faq-item:first-child { border-top: none; }
.faq-item summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev { flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) { .faq-item summary .chev { transition: transform var(--dur-2) var(--ease-out); } }
.faq-item[open] summary .chev { transform: rotate(180deg); }
.faq-item summary:hover { color: var(--color-accent-text); }
.faq-item p { margin-top: var(--space-3); margin-bottom: 0; }

/* Security grid (kept for any page that still uses it) */
.security-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (max-width: 760px) { .security-grid { grid-template-columns: 1fr; } }

/* Closing call to action. Default: a left-aligned row, text on the left and the buttons on the right, set
   on a rule rather than in a box. Modifiers vary it per page:
   .cta-band--ink  a navy panel that can carry a figure or a crop on the right. */
.cta-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head btn" "copy btn"; column-gap: var(--space-6); row-gap: var(--space-2); align-items: center; border-top: 3px solid var(--color-ink); padding: var(--space-5) 0 0; text-align: left; }
.cta-band > h2 { grid-area: head; font-size: clamp(1.6rem, 3vw, 2.25rem); margin-bottom: 0; max-width: 24ch; align-self: end; }
.cta-band > p { grid-area: copy; margin: 0; max-width: 56ch; align-self: start; }
.cta-band .hero-ctas { grid-area: btn; margin-top: 0; justify-content: flex-start !important; }
/* A second paragraph (for example a quieter "not ready to talk?" line) takes its own row under the copy and the buttons. Before this rule both paragraphs shared the "copy" area and were drawn on top of each other. */
.cta-band > p ~ p { grid-area: auto; grid-column: 1 / -1; margin-top: var(--space-3); max-width: 64ch; align-self: start; }
.cta-band--ink { background: var(--color-band); color: var(--color-on-band); border: 0; border-radius: var(--radius-lg); padding: var(--space-7) var(--space-6); }
.cta-band--ink h2 { color: var(--color-on-band); }
.cta-band--ink p { color: var(--color-on-band-muted); }
.cta-band--ink a:not(.btn) { color: var(--color-on-band); text-decoration-color: var(--color-on-band); }
.cta-band--ink .btn-primary { background: #fff; color: #0F1E4A; }
.cta-band--ink .btn-primary:hover { background: #fff; }
.cta-band--ink .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.65); }
.cta-band--ink .btn-ghost:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
.cta-band--ink :is(a, button):focus-visible { outline-color: #fff; }
@media (max-width: 800px) {
  .cta-band { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "copy" "btn"; row-gap: var(--space-3); }
  .cta-band .hero-ctas { margin-top: var(--space-2); }
  .cta-band--ink { padding: var(--space-6) var(--space-4); }
}

/* Form */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.field label { font-weight: 700; font-size: 0.9rem; }
.field .hint { font-size: 0.8rem; color: var(--color-muted-foreground); }
.field input, .field select, .field textarea {
  min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--color-field-border); border-radius: var(--radius-sm);
  background: var(--color-card); color: var(--color-foreground); font: inherit;
}
.field textarea { min-height: 96px; padding: var(--space-3); resize: vertical; }
.field.has-error input, .field.has-error textarea { border-color: var(--color-destructive); }
.field-error { color: var(--color-destructive); font-size: 0.85rem; display: none; }
.field.has-error .field-error { display: block; }
.form-status { border-radius: var(--radius-sm); padding: var(--space-3); margin-bottom: var(--space-4); display: none; }
.form-status.is-success { display: block; background: color-mix(in srgb, #16A34A 15%, var(--color-card)); border: 1px solid #16A34A; }
.form-status.is-error { display: block; background: color-mix(in srgb, var(--color-destructive) 12%, var(--color-card)); border: 1px solid var(--color-destructive); }

/* Footer */
.site-footer { border-top: 1px solid var(--color-border); padding: var(--space-7) 0 var(--space-5); margin-top: var(--space-7); }
.site-footer > .container { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cols cols" "bottom lang"; column-gap: 0; }
.footer-grid { grid-area: cols; display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: var(--space-5); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .site-footer > .container { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cols" "lang" "bottom"; } }
.footer-grid h4, .footer-grid .footer-title { font-size: 0.8rem; font-weight: 800; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted-foreground); margin-bottom: var(--space-3); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.footer-grid a { color: var(--color-foreground); text-decoration: none; font-size: 0.875rem; }
/* The first column leads with a one-line brand statement, set larger than the link text. */
.footer-grid > div:first-child > p { margin-top: var(--space-3) !important; max-width: 24ch !important; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--color-ink); }
.footer-bottom { grid-area: bottom; margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border); display: flex; justify-content: flex-start; flex-wrap: wrap; gap: var(--space-1) var(--space-4); color: var(--color-muted-foreground); font-size: 0.85rem; align-items: center; }
/* Neutral informational pill (used on /support). Deliberately not red or orange, so it does not read as an error. */
.note-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--color-muted); color: var(--color-foreground); border: 1px solid var(--color-border); padding: 4px 12px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ------------------------------------------------------------------
   Added 2026-10-11: pricing, reviews, contact and sign-up pages
   ------------------------------------------------------------------ */

::placeholder { color: var(--color-muted-foreground); opacity: 1; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--color-destructive); border-width: 2px; }
.field .req { color: var(--color-destructive); }
.field-error { font-weight: 600; }
.form-status { font-weight: 600; scroll-margin-top: 96px; }
.form-status:focus { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.form-status.is-success { color: var(--color-foreground); }
.form-status.is-error { color: var(--color-foreground); }
.form-note { font-size: 0.9rem; margin-top: var(--space-3); margin-bottom: 0; }

/* Channel choice: radios laid out as 44px-high options */
fieldset.field { border: 0; padding: 0; min-width: 0; margin-left: 0; margin-right: 0; }
fieldset.field legend { font-weight: 700; font-size: 0.9rem; padding: 0; margin-bottom: var(--space-2); }
.choice-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.choice { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--color-field-border); border-radius: var(--radius-sm); background: var(--color-card); cursor: pointer; font-weight: 600; font-size: 0.92rem; }
.choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-primary); }
.choice:has(input:checked) { border-color: var(--color-primary); background: var(--color-muted); }
.choice:has(input:focus-visible) { outline: 2px solid var(--color-ring); outline-offset: 2px; }

/* Inner-page lead (no image hero) */
.page-lead { padding: var(--space-7) 0 var(--space-6); }
.page-lead h1 { max-width: 20ch; }
.page-lead .lede { font-size: 1.2rem; line-height: 1.55; max-width: 52ch; color: var(--color-foreground); }
.page-lead .hero-ctas { margin-top: var(--space-4); }

/* Pricing: the figure is the hero. "$100" is set as a display numeral, the rest of the sentence steps down. */
.price-lead .container { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.price-lead h1 { max-width: none; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.2; letter-spacing: -0.02em; margin-bottom: var(--space-4); }
.price-lead h1 .fig { display: block; font-size: clamp(5rem, 15vw, 10rem); line-height: 0.9; font-weight: 800; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; margin: 0 0 var(--space-3) -0.04em; }
.price-lead .lede { font-size: 1.15rem; max-width: 40ch; color: var(--color-foreground); }
.price-facts { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.price-facts li { display: flex; gap: var(--space-2); align-items: flex-start; color: var(--color-foreground); font-weight: 600; }
.price-facts svg { flex-shrink: 0; margin-top: 4px; color: var(--color-ink); }
@media (max-width: 900px) { .price-lead .container { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } }

.calc { padding: var(--space-5); border-radius: var(--radius-lg); border-top: 4px solid var(--color-ink); }
@media (min-width: 901px) { .calc { position: sticky; top: 96px; } }
.calc h2 { font-size: 1.25rem; margin-bottom: var(--space-4); letter-spacing: -0.01em; }
@media (prefers-reduced-motion: no-preference) {
  .calc-total.is-bump { animation: calc-bump var(--dur-2) var(--ease-out); }
  @keyframes calc-bump { from { transform: translateY(6px); opacity: 0.55; } to { transform: none; opacity: 1; } }
}
.calc .field { margin-bottom: var(--space-3); }
.calc input[type="number"] { font-size: 1.25rem; font-weight: 700; min-height: 52px; max-width: 12rem; font-variant-numeric: tabular-nums; }
.calc-result { border-top: 1px solid var(--color-border); margin-top: var(--space-3); padding-top: var(--space-4); }
.calc-total { margin: 0; color: var(--color-ink); font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 8vw, 4.75rem); line-height: 1.02; font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }
.calc-unit { font-size: 1rem; font-weight: 600; color: var(--color-muted-foreground); letter-spacing: 0; }
.calc-per { margin: var(--space-2) 0 var(--space-3); font-weight: 700; color: var(--color-foreground); font-variant-numeric: tabular-nums; }
.calc-lines { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); font-size: 0.92rem; color: var(--color-muted-foreground); font-variant-numeric: tabular-nums; }
.calc-lines li { display: flex; justify-content: space-between; gap: var(--space-3); }
.calc-lines li span:last-child { color: var(--color-foreground); font-weight: 700; white-space: nowrap; }
.calc-result[hidden], .calc-lines li[hidden] { display: none; }
.calc-result.is-empty .calc-total, .calc-result.is-empty .calc-per { color: var(--color-muted-foreground); }
.calc .calc-help { margin: var(--space-4) 0 0; font-size: 0.88rem; }

/* Price bands */
/* Three bands as one horizontal bar: the rates are the focal figures. The widths are not to scale. */
.bands { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1.6fr 1fr 1fr; border: 1px solid var(--color-ink); border-radius: var(--radius-md); overflow: hidden; background: var(--color-card); }
.bands li { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5) var(--space-4); border-left: 1px solid var(--color-border); }
.bands li:first-child { border-left: 0; background: var(--color-band); color: var(--color-on-band); }
.bands li:first-child .rate, .bands li:first-child .range { color: var(--color-on-band); }
.bands li:first-child p { color: var(--color-on-band-muted); }
.bands .rate { font-family: var(--font-display); font-size: clamp(2.25rem, 4.6vw, 3.5rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--color-ink); letter-spacing: -0.04em; }
.bands .range { display: block; font-weight: 700; color: var(--color-foreground); }
.bands p { margin: 0; font-size: 0.95rem; }
@media (max-width: 760px) { .bands { grid-template-columns: minmax(0, 1fr); } .bands li { border-left: 0; border-top: 1px solid var(--color-border); padding: var(--space-4); } .bands li:first-child { border-top: 0; } }
.price-how { display: grid; gap: var(--space-6); }

/* Data table (worked examples) */
.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-card); }
table.data { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.data caption { text-align: left; padding: var(--space-4) var(--space-4) var(--space-2); font-weight: 700; color: var(--color-foreground); }
table.data th, table.data td { text-align: left; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); vertical-align: top; }
table.data thead th { font-size: 0.85rem; color: var(--color-muted-foreground); font-weight: 700; border-top: 0; }
table.data tbody th { font-weight: 800; color: var(--color-foreground); }
table.data .sum { display: block; font-weight: 500; font-size: 0.88rem; color: var(--color-muted-foreground); }
table.data td.num, table.data th.num { text-align: right; white-space: nowrap; }
table.data td.num strong { color: var(--color-foreground); }
@media (max-width: 520px) { table.data th, table.data td { padding: var(--space-3) var(--space-3); } }

/* Section heading left-aligned variant */
.section-head.is-left { text-align: left; margin-left: 0; margin-right: 0; max-width: 680px; }

/* Included / extra split */
.split-2 { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--space-6); align-items: start; }
@media (max-width: 900px) { .split-2 { grid-template-columns: 1fr; gap: var(--space-5); } }
.check-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--space-5); }
.check-list li { display: flex; gap: var(--space-2); padding: var(--space-2) 0; break-inside: avoid; color: var(--color-foreground); font-size: 0.95rem; }
.check-list svg { flex-shrink: 0; color: var(--color-link); margin-top: 3px; }
@media (max-width: 640px) { .check-list { columns: 1; } }
.extras { border-left: 3px solid var(--color-border); padding-left: var(--space-4); display: grid; gap: var(--space-4); }
.extras h3 { font-size: 1.05rem; margin-bottom: var(--space-1); }
.extras p { margin: 0; font-size: 0.95rem; }

/* Home: price band + review strip */
/* The price statement sits on a full-bleed navy band. The figure is the largest thing on the page. */
.price-band { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-7); align-items: center; }
.price-band .big { font-family: var(--font-display); font-size: clamp(5rem, 14vw, 9.5rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.05em; color: var(--color-on-band); font-variant-numeric: tabular-nums; }
.price-band .big small { display: block; font-family: var(--font-sans); font-size: 1rem; font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--color-on-band-muted); margin-top: var(--space-3); }
.price-band h2 { font-size: clamp(1.5rem, 2.8vw, 2.25rem); color: var(--color-on-band); }
.price-band p { max-width: 54ch; }
.price-band .btn-secondary { background: #fff; color: #0F1E4A; }
@media (max-width: 760px) { .price-band { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } }

/* Sample reviews. The page says once, in a statement at the top of the section, that every quote is a sample.
   Each quote then carries one quiet tag in its footer: plain text, no dashed pill. */
.sample-badge { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; color: var(--color-muted-foreground); background: transparent; border: 0; border-left: 2px solid var(--color-accent); padding: 0 0 0 8px; line-height: 1.3; white-space: nowrap; align-self: flex-start; }
.review-strip-head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.review-strip-head h2 { margin-bottom: 0; }
/* Home: one large quote on the left, two short ones stacked on the right. */
.review-strip { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-auto-flow: dense; column-gap: var(--space-7); }
.review-strip figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid var(--color-border); }
.review-strip figure:first-child { grid-row: 1 / span 2; border-top: 3px solid var(--color-ink); padding-top: var(--space-5); justify-content: space-between; }
.review-strip figure:first-child blockquote { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--color-ink); font-weight: 600; }
.review-strip blockquote { margin: 0; color: var(--color-foreground); font-size: 1.05rem; line-height: 1.55; }
.review-strip figcaption { font-size: 0.88rem; color: var(--color-muted-foreground); }
.review-strip .sample-badge { order: 3; }
@media (max-width: 900px) {
  .review-strip { grid-template-columns: minmax(0, 1fr); }
  .review-strip figure:first-child { grid-row: auto; }
}

/* Reviews page */
/* The statement that every quote on the page is a sample, said once, at the top, in one tinted panel. */
.notice { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0; align-items: stretch; background: var(--color-muted); border-radius: var(--radius-lg); overflow: hidden; }
@media (max-width: 860px) { .notice { grid-template-columns: minmax(0, 1fr); } }
.notice > div { padding: var(--space-5) var(--space-6); }
.notice h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: var(--space-2); }
.notice p { margin: 0; color: var(--color-foreground); }
.notice .is-real { background: var(--color-band); color: var(--color-on-band); }
.notice .is-real h2 { color: var(--color-on-band); }
.notice .is-real p { color: var(--color-on-band-muted); }
@media (max-width: 860px) { .notice > div { padding: var(--space-5) var(--space-4); } }
.review-feature { margin: var(--space-6) 0 0; padding: var(--space-6) 0 var(--space-5); border-top: 3px solid var(--color-ink); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: auto 1fr; gap: var(--space-4) var(--space-6); }
.review-feature > figcaption { grid-column: 1; grid-row: 1; }
.review-feature > .sample-badge { grid-column: 1; grid-row: 2; align-self: end; }
.review-feature > blockquote { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.review-feature blockquote p { color: var(--color-ink); font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.35; letter-spacing: -0.015em; max-width: 52ch; }
.review-feature blockquote p:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .review-feature { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: var(--space-4); } .review-feature > figcaption, .review-feature > .sample-badge, .review-feature > blockquote { grid-column: 1; grid-row: auto; } .review-feature > .sample-badge { order: 3; } }
.review-meta { font-size: 0.95rem; }
.review-meta strong { display: block; color: var(--color-ink); font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -0.01em; }
.review-meta .feat { display: block; margin-top: var(--space-3); color: var(--color-muted-foreground); font-size: 0.88rem; }
/* Short quotes: two columns, no boxes, each set on a rule. */
.review-cols { column-count: 2; column-gap: var(--space-7); margin-top: var(--space-4); }
@media (max-width: 760px) { .review-cols { column-count: 1; } }
.review { break-inside: avoid; margin: 0 0 var(--space-5); padding: var(--space-4) 0 0; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; }
.review blockquote { margin: 0 0 var(--space-3); }
.review blockquote p { color: var(--color-foreground); margin: 0 0 var(--space-3); }
.review blockquote p:last-child { margin-bottom: 0; }
.review-by { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-1) var(--space-3); font-size: 0.9rem; color: var(--color-ink); font-weight: 700; }
.review-by .feat { width: 100%; font-weight: 500; color: var(--color-muted-foreground); font-size: 0.85rem; }
.review > .sample-badge { order: 3; margin-top: var(--space-2); }
.review.is-short blockquote p { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; color: var(--color-ink); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-6); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.direct h2 { font-size: 1.25rem; }
.direct-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2); }
.direct-btn { justify-content: flex-start; gap: var(--space-3); }
.direct-btn small { font-weight: 500; color: var(--color-muted-foreground); }
.direct-note { border-left: 3px solid var(--color-border); padding-left: var(--space-4); }
.direct-note p { margin-bottom: var(--space-2); color: var(--color-foreground); }

/* Sign-up */
.steps-inline { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); counter-reset: s; max-width: 900px; }
.steps-inline li { counter-increment: s; border-top: 3px solid var(--color-link); padding-top: var(--space-3); }
.steps-inline li::before { content: counter(s); display: block; font-weight: 800; font-size: 1.5rem; color: var(--color-link); line-height: 1; margin-bottom: var(--space-2); }
.steps-inline strong { display: block; color: var(--color-foreground); margin-bottom: var(--space-1); }
.steps-inline p { margin: 0; font-size: 0.95rem; }
@media (max-width: 720px) { .steps-inline { grid-template-columns: 1fr; gap: var(--space-4); } }
.honest-note { margin-top: var(--space-5); padding: var(--space-4); border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); border-radius: var(--radius-sm); background: var(--color-card); max-width: 900px; }
.honest-note p { margin: 0; color: var(--color-foreground); }

/* Footer: one-line notice that stands in for the privacy and terms links until those documents exist */
.footer-legal-note { margin: 0; font-size: 0.9rem; max-width: 34ch; }
@media (max-width: 760px) {
  .footer-grid > div:last-child { grid-column: 1 / -1; }
  .footer-legal-note { max-width: 60ch; }
}
.footer-grid .footer-legal-note a { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; padding: 14px 2px; }

/* Footer link groups */
.footer-grid a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-grid li a { display: inline-flex; align-items: center; min-height: 32px; }
@media (max-width: 760px) { .footer-grid li a { min-height: 44px; } }

/* ------------------------------------------------------------------
   Added 2026-10-11: blog, guides, language switcher, preferred-source button
   ------------------------------------------------------------------ */

/* Google "preferred source" button. Google's recommended label is "Add to preferred sources". */
.pref-source { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.pref-source p { margin: 0; font-size: 0.95rem; max-width: 46ch; }
.pref-source--end { border-top: 1px solid var(--color-border); padding-top: var(--space-4); margin-top: var(--space-6); }
.pref-btn svg { flex-shrink: 0; }

/* Long-form reading column: about 70 characters per line at 18px */
.article-col { font-size: 1.125rem; max-width: calc(64ch + 2 * var(--space-4)); margin: 0 auto; padding: 0 var(--space-4); }
@media (max-width: 480px) { .article-col { padding: 0 var(--space-3); } }
.article-head { padding: var(--space-6) 0 var(--space-4); }
.article-head h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); line-height: 1.15; margin-bottom: var(--space-4); }
.crumbs { margin: 0 0 var(--space-3); font-size: 0.95rem; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.byline { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-4); font-size: 0.95rem; color: var(--color-muted-foreground); }
.byline strong { color: var(--color-foreground); font-weight: 700; }
.article-dek { font-size: 1.15rem; color: var(--color-foreground); margin: 0 0 var(--space-4); }
/* Lead illustration, a little wider than the text column */
.article-lead { max-width: calc(920px + 2 * var(--space-4)); margin: 0 auto var(--space-5); padding: 0 var(--space-4); }
.article-lead img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); background: var(--color-muted); }
@media (max-width: 480px) { .article-lead { padding: 0 var(--space-3); margin-bottom: var(--space-4); } }

.prose p, .prose li { color: var(--color-foreground); }
.prose > p:first-child { font-size: 1.2rem; line-height: 1.7; }
.prose p { margin: 0 0 var(--space-4); line-height: 1.75; }
.prose h2 { font-size: clamp(1.35rem, 3vw, 1.65rem); margin: var(--space-6) 0 var(--space-3); scroll-margin-top: 96px; }
.prose ul, .prose ol { margin: 0 0 var(--space-4); padding-left: 1.4rem; }
.prose li { margin-bottom: var(--space-2); line-height: 1.65; padding-left: 0.2rem; }
.prose a { text-underline-offset: 3px; overflow-wrap: anywhere; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose .table-wrap { margin: 0 0 var(--space-4); }
.prose table.data { font-size: 0.95rem; }
.prose table.data th, .prose table.data td { color: var(--color-foreground); }
.prose hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-6) 0; }
.prose .product-note { margin: var(--space-6) 0; padding: var(--space-4) var(--space-4) var(--space-2); border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); border-radius: var(--radius-sm); background: var(--color-card); }
.prose .product-note h2 { margin-top: 0; font-size: 1.25rem; }
.next-step { margin: var(--space-6) 0 0; padding: var(--space-5); background: var(--color-muted); border-radius: var(--radius-md); }
.next-step h2 { font-size: 1.35rem; margin-bottom: var(--space-3); }
.next-step p { color: var(--color-foreground); }
.next-step .hero-ctas { margin-top: var(--space-4); }
.next-step .related { margin: var(--space-4) 0 0; font-size: 1rem; }
.back-link { margin: var(--space-5) 0 var(--space-7); font-size: 1rem; }

/* Blog index: a ranked reading list, not a grid of cards */
.post-list { list-style: none; margin: 0; padding: 0; max-width: 820px; }
.post { position: relative; padding: var(--space-5) 0; border-top: 1px solid var(--color-border); }
.post h2 { font-size: 1.35rem; margin-bottom: var(--space-2); }
.post h2 a { color: var(--color-foreground); text-decoration: none; }
.post h2 a::after { content: ""; position: absolute; inset: 0; }
.post h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.post h2 a:focus-visible { outline-offset: 4px; }
.post p { max-width: 62ch; margin: 0 0 var(--space-2); }
.post-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: 0.9rem; color: var(--color-muted-foreground); }
.post--lead { padding: var(--space-6) 0; border-top: 0; }
.post--lead h2 { font-size: clamp(1.6rem, 3.5vw, 2.25rem); line-height: 1.15; }
.post--lead p { font-size: 1.1rem; color: var(--color-foreground); }
.blog-lead-wrap { padding-bottom: var(--space-4); }
/* Blog index rows with a thumbnail: text on the left, picture on the right, stacked on phones */
/* Blog index, magazine rhythm: a lead story as a 5/7 split with a 4:3 picture, then two half-width stories,
   then three. Pictures are the posts' own photographs, not screenshots. */
.post-list:has(.post--thumb) { max-width: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
.post--thumb { display: flex; flex-direction: column; grid-column: span 2; gap: var(--space-3); border-top: 0; padding: 0; }
.post--thumb:nth-child(2), .post--thumb:nth-child(3) { grid-column: span 3; }
.post-thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md); background: var(--color-muted); }
.post--thumb .post-thumb { order: -1; }
.post--thumb h2 { font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.015em; }
.post--thumb .post-text { display: flex; flex-direction: column; }
.post--thumb.post--lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: center; padding: 0 0 var(--space-4); }
.post--thumb.post--lead .post-thumb { order: 2; aspect-ratio: 4 / 3; max-width: 640px; justify-self: end; width: 100%; }
.post--thumb.post--lead h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.08; letter-spacing: -0.025em; }
@media (prefers-reduced-motion: no-preference) {
  .post--thumb .post-thumb { transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
  .post--thumb:hover .post-thumb { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
}
@media (max-width: 900px) {
  .post-list:has(.post--thumb) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post--thumb, .post--thumb:nth-child(2), .post--thumb:nth-child(3) { grid-column: span 1; }
  .post--thumb.post--lead { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .post--thumb.post--lead .post-thumb { order: -1; max-width: none; aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) {
  .post-list:has(.post--thumb) { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .post--thumb { gap: var(--space-2); }
}

/* Home: "From the blog". One lead story on the left, two compact ones stacked on the right. */
.blog-strip-head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.blog-strip-head h2 { margin-bottom: 0; }
.blog-strip { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-6); row-gap: var(--space-5); }
.blog-strip article { position: relative; }
.blog-strip article:first-child { grid-row: 1 / span 2; }
.strip-thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md); background: var(--color-muted); margin-bottom: var(--space-3); }
.blog-strip h3 { font-size: 1.1rem; line-height: 1.3; margin-bottom: var(--space-2); }
.blog-strip article:first-child h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.15; letter-spacing: -0.02em; }
.blog-strip h3 a { color: var(--color-ink); text-decoration: none; }
.blog-strip h3 a::after { content: ""; position: absolute; inset: 0; }
.blog-strip h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.blog-strip p { margin: 0; font-size: 0.95rem; }
/* The two stacked stories sit picture-left, text-right. */
.blog-strip article:not(:first-child) { display: grid; grid-template-columns: 132px minmax(0, 1fr); column-gap: var(--space-4); align-items: start; padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.blog-strip article:not(:first-child) .strip-thumb { grid-row: 1 / span 2; margin: 0; aspect-ratio: 1; }
@media (prefers-reduced-motion: no-preference) {
  .strip-thumb { transition: transform var(--dur-3) var(--ease-out); }
  .blog-strip article:hover .strip-thumb { transform: translateY(-3px); }
}
@media (max-width: 900px) {
  .blog-strip { grid-template-columns: minmax(0, 1fr); }
  .blog-strip article:first-child { grid-row: auto; }
}
@media (max-width: 480px) {
  .blog-strip article:not(:first-child) { grid-template-columns: 96px minmax(0, 1fr); column-gap: var(--space-3); }
}

/* Language switcher (footer) */
/* Quiet by design: a single line of plain text links in the legal row. The current language is bold with the accent underline. */
.lang-switch { grid-area: lang; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.lang-switch__label { font-size: 0.8rem; font-weight: 600; color: var(--color-muted-foreground); }
.lang-switch ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-1); }
.lang-switch a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-2); color: var(--color-muted-foreground); text-decoration: none; font-size: 0.85rem; }
.lang-switch a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 4px; }
.lang-switch a[aria-current] { color: var(--color-ink); font-weight: 800; text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 760px) { .lang-switch { margin-top: var(--space-5); } .footer-bottom { margin-top: 0; } }

/* Guides: landing, gate and the guide itself */
.guide-list { list-style: none; margin: 0; padding: 0; max-width: 820px; }
.guide-list .post h2 { font-size: 1.5rem; }
.guide-wrap { max-width: 860px; margin: 0 auto; padding: 0 var(--space-4); }
@media (max-width: 480px) { .guide-wrap { padding: 0 var(--space-3); } }
.guide-wrap .page-lead h1 { max-width: 26ch; }
.guide-inside { margin: var(--space-4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); max-width: 62ch; }
.guide-inside li { display: flex; gap: var(--space-2); color: var(--color-foreground); }
.guide-inside svg { flex-shrink: 0; margin-top: 4px; color: var(--color-link); }
.guide-gate { max-width: 640px; }
.guide-gate h2 { font-size: 1.35rem; }
.consent { font-size: 0.92rem; color: var(--color-foreground); margin: var(--space-3) 0 0; }
.consent-box { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-left: 4px solid var(--color-accent); background: var(--color-muted); border-radius: var(--radius-sm); }
.consent-box p { margin: 0; color: var(--color-foreground); font-size: 0.95rem; }
.guide-content { padding-bottom: var(--space-6); }
.guide-content[hidden], .guide-gate[hidden] { display: none; }
.guide-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-5); }
.guide-content h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); margin: var(--space-6) 0 var(--space-3); scroll-margin-top: 96px; }
.guide-content h3 { font-size: 1.1rem; margin: var(--space-4) 0 var(--space-2); }
.guide-content p, .guide-content li { color: var(--color-foreground); }
.guide-content .guide-intro { font-size: 1.1rem; max-width: 62ch; }
.guide-content ul, .guide-content ol { max-width: 68ch; }
.checklist { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.checklist li { position: relative; margin: 0; padding: var(--space-2) 0 var(--space-2) 2rem; line-height: 1.6; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 0.8rem; width: 1.05rem; height: 1.05rem; border: 2px solid var(--color-muted-foreground); border-radius: 4px; background: transparent; }
.field label .hint { font-weight: 500; }
ol.checklist { counter-reset: step; }
ol.checklist li { counter-increment: step; padding-left: 2.4rem; }
ol.checklist li::before { content: counter(step) "."; border: 0; border-radius: 0; width: auto; height: auto; top: var(--space-2); font-weight: 800; color: var(--color-foreground); font-variant-numeric: tabular-nums; }
.guide-note { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); border-radius: var(--radius-sm); background: var(--color-card); max-width: 68ch; }
.guide-note p { margin: 0 0 var(--space-2); }
.guide-note p:last-child { margin-bottom: 0; }
.guide-content .table-wrap { margin: 0 0 var(--space-4); }
.fill-in { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-5); margin: 0 0 var(--space-4); max-width: 68ch; }
.fill-in > div { display: flex; flex-direction: column; gap: 2px; }
.fill-in dt { font-weight: 700; font-size: 0.9rem; color: var(--color-foreground); }
.fill-in dd { margin: 0; }
.blank { display: block; min-height: 1.9rem; border-bottom: 1px solid var(--color-muted-foreground); }
@media (max-width: 560px) { .fill-in { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------
   Round 2 (2026-10-12): page layouts
   ------------------------------------------------------------------ */

/* Left-aligned page lead used by features, security, demo (a plain H1 and one paragraph). */
.page-lead--wide h1 { max-width: 16ch; font-size: clamp(2.5rem, 6vw, 4.5rem); }
.page-lead--wide .lede { max-width: 58ch; }

/* ---- Features ---- */
.feat-section { padding: var(--section-m) 0; }
.feat-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-7); align-items: center; }
.feat-split--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.feat-split--big { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; }
.page-lead--wide h1 { max-width: 22ch; }
.feat-split--flip > :first-child { order: 2; }
.feat-split h3, .feat-text h3 { font-size: clamp(1.6rem, 2.8vw, 2.25rem); line-height: 1.1; letter-spacing: -0.02em; }
.feat-text p { font-size: 1.05rem; max-width: 46ch; }
.feat-facts { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: 0; }
.feat-facts li { padding: var(--space-3) 0 var(--space-3) var(--space-4); border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); position: relative; color: inherit; max-width: 52ch; }
.feat-facts li::before { content: ""; position: absolute; left: 0; top: calc(var(--space-3) + 0.5em); width: 8px; height: 8px; border-radius: 2px; background: var(--color-accent); }
.band .feat-facts li, .band--ink .feat-facts li { color: inherit; }
@media (max-width: 900px) {
  .feat-split, .feat-split--flip { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .feat-split--flip > :first-child { order: 0; }
}
/* Asymmetric bento: one tall cell and two stacked cells, different backgrounds. */
.bento { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: auto auto; gap: var(--space-4); }
.bento-cell { border-radius: var(--radius-lg); padding: var(--space-5); background: var(--color-card); border: 1px solid var(--color-border); min-width: 0; }
.bento-cell--tall { grid-row: 1 / span 2; display: flex; flex-direction: column; gap: var(--space-4); }
.bento-cell--tint { background: var(--color-muted); border-color: transparent; }
.bento-cell--ink { background: var(--color-band); border-color: transparent; color: var(--color-on-band); }
.bento-cell--ink h3 { color: var(--color-on-band); }
.bento-cell--ink p { color: var(--color-on-band-muted); }
.bento-cell p:last-child { margin-bottom: 0; }
.bento-cell h3 { font-size: 1.5rem; letter-spacing: -0.02em; }
@media (max-width: 860px) { .bento { grid-template-columns: minmax(0, 1fr); } .bento-cell--tall { grid-row: auto; } .bento-cell { padding: var(--space-4); } }

/* Compact list: ruled columns, no boxes. On a phone each item becomes an accordion (see js/main.js). */
.compact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-6); row-gap: 0; }
.compact details, .compact .compact-item { border-top: 1px solid var(--color-ink); padding: var(--space-4) 0 var(--space-5); }
.compact summary { list-style: none; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); cursor: default; }
.compact summary::-webkit-details-marker { display: none; }
.compact summary h3 { margin: 0; font-size: 1.15rem; }
.compact summary svg:first-child { color: var(--color-ink); }
.compact summary .chev { display: none; }
.compact details p { margin: var(--space-2) 0 0; font-size: 0.95rem; }
@media (max-width: 960px) { .compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .compact { grid-template-columns: minmax(0, 1fr); }
  .compact details, .compact .compact-item { padding: 0; }
  .compact summary { cursor: pointer; min-height: 56px; padding: var(--space-2) 0; }
  .compact summary .chev { display: block; }
  .compact details[open] summary .chev { transform: rotate(180deg); }
  .compact details p { padding-bottom: var(--space-4); }
  .compact details:not([open]) { border-top-color: var(--color-border); }
}
@media (prefers-reduced-motion: no-preference) { .compact summary .chev { transition: transform var(--dur-2) var(--ease-out); } }
/* Add-ons: a two-column ruled list. */
.addon-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
.addon-list li { padding: var(--space-4) 0; border-top: 1px solid var(--color-border); }
.addon-list h3 { font-size: 1.15rem; margin-bottom: var(--space-1); }
.addon-list p { margin: 0; }
@media (max-width: 720px) { .addon-list { grid-template-columns: minmax(0, 1fr); } }
.cta-band--shot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "copy shot"; }
.cta-band--shot > div { grid-area: copy; }
.cta-band--shot > div h2 { margin-bottom: var(--space-2); }
.cta-band--shot > div p { margin-bottom: var(--space-4); }
.cta-band--shot .frame { grid-area: shot; max-width: 520px; justify-self: end; width: 100%; }
@media (max-width: 800px) { .cta-band--shot { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "shot"; } .cta-band--shot .frame { justify-self: start; } }

/* ---- Security: status rows ----
   Each list sets --status (the section's own status word, in the page's language) and a bar style.
   "In place today" rows have a solid navy bar; "Planned" rows have a dashed orange bar. The status word is also
   printed on every row, so the difference never depends on colour alone. */
.status-list { list-style: none; margin: 0; padding: 0; display: grid; }
.status-row { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: var(--space-6); padding: var(--space-4) 0 var(--space-4) var(--space-4); border-top: 1px solid var(--color-border); }
.status-row::after { content: ""; position: absolute; left: 0; top: var(--space-4); bottom: var(--space-4); width: 4px; border-radius: 2px; background: var(--color-ink); }
:is(.status-list.is-planned, [aria-labelledby="planned-title"] .status-list) .status-row::after { background: repeating-linear-gradient(to bottom, var(--color-accent) 0 8px, transparent 8px 13px); }
.status-row::before { content: var(--status, ""); grid-column: 1; grid-row: 1; font-size: 0.8rem; font-weight: 800; line-height: 1.3; color: var(--color-muted-foreground); margin-bottom: 2px; }
:is(.status-list.is-planned, [aria-labelledby="planned-title"] .status-list) .status-row::before { color: var(--color-accent-text); }
.page-lead--wide p { font-size: 1.2rem; line-height: 1.55; max-width: 58ch; color: var(--color-foreground); }
.status-row > h3 { grid-column: 1; grid-row: 2; margin: 0; font-size: 1.3rem; letter-spacing: -0.015em; }
.status-row > p { grid-column: 2; margin: 0 0 var(--space-2); }
.status-row > p:first-of-type { grid-row: 1 / span 2; }
.status-row > p:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  .status-row { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; row-gap: var(--space-2); padding: var(--space-3) 0 var(--space-3) var(--space-3); }
  .status-row::before, .status-row > h3, .status-row > p, .status-row > p:first-of-type { grid-column: 1; grid-row: auto; }
  .status-row::after { top: var(--space-3); bottom: var(--space-3); }
}
.status-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-6); align-items: end; margin-bottom: var(--space-5); padding-left: var(--space-4); }
.status-head h2 { margin: 0; }
.status-head p { margin: 0; }
.status-head .eyebrow { grid-column: 1 / -1; display: block; margin-bottom: var(--space-2); color: var(--color-accent-text); font-weight: 800; font-size: 0.85rem; }
@media (max-width: 760px) { .status-head { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); padding-left: var(--space-3); } }

/* ---- Demo / contact: what happens next + the form ---- */
.demo-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-7); align-items: start; }
.demo-split > .card { position: sticky; top: 96px; }
.demo-split .section-head { text-align: left; margin: 0; max-width: none; }
.demo-split .section-head h1 { font-size: clamp(2.5rem, 4.6vw, 3.75rem); }
.demo-split .section-head p { margin-left: 0; font-size: 1.1rem; color: var(--color-foreground); }
.demo-split .frame { margin-top: var(--space-6); max-width: 460px; }
@media (max-width: 720px) { .demo-split .crop--ask-sm { --vx: 24; --vy: 4; --vw: 752; --vh: 500; } }
.next-steps { list-style: none; margin: var(--space-5) 0 0; padding: 0; counter-reset: ns; display: grid; gap: var(--space-4); }
.next-steps li { counter-increment: ns; display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: var(--space-3); align-items: start; }
.next-steps li::before { content: counter(ns); font-family: var(--font-display); font-weight: 800; font-size: 2.5rem; line-height: 1; letter-spacing: -0.04em; color: var(--color-ink); }
.next-steps strong { display: block; font-family: var(--font-display); font-size: 1.2rem; color: var(--color-ink); letter-spacing: -0.01em; }
.next-steps p { margin: 0; }
@media (max-width: 900px) { .demo-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } .demo-split > .card { position: static; } }

@media print {
  html:root:not([data-theme="none"]) {
    --color-background: #fff; --color-foreground: #111; --color-card: #fff; --color-card-foreground: #111;
    --color-muted: #f1f1f1; --color-muted-foreground: #333; --color-border: #999; --color-link: #111;
  }
  body { background: #fff; color: #111; font-size: 11pt; }
  .site-header, .site-footer, .skip-link, .no-print, .guide-gate, .pref-source, .next-step .hero-ctas { display: none !important; }
  .guide-wrap, .article-col { max-width: none; padding: 0; }
  .guide-content h2, .guide-content h3 { break-after: avoid; }
  .checklist li, .guide-note, .table-wrap tr { break-inside: avoid; }
  .card { box-shadow: none; }
  a { color: #111; text-decoration: underline; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}