@charset "UTF-8";
/* ==========================================================================
   KEYSTONE SITES — main.css  (v2, "polished")
   A premium, modern marketing site: layered depth, a confident indigo→violet
   gradient system, a warm gold keystone accent, generous rounding, and one
   dramatic dark band.

   Reading order:
     01 Fonts        06 Header / nav     11 Sections & components
     02 Tokens       07 Footer           12 Before/after slider
     03 Reset        08 Buttons          13 Forms
     04 Base type    09 Surfaces/cards   14 Motion
     05 Layout       10 Hero + estimator 15 Reduced motion / fallbacks

   One rule holds the spacing together: .section owns vertical rhythm; nothing
   else sets padding-block. No !important outside the reduced-motion block.
   ========================================================================== */

/* 01 FONTS ================================================================= */
@font-face {
  font-family: 'Archivo Display';
  src: url('../fonts/archivo-display.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Archivo Body';
  src: url('../fonts/archivo-body.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: optional;
}
/* Metric-matched fallback so the swap (or its absence) never reflows the page. */
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans'), local('Segoe UI'), local('Roboto');
  size-adjust: 101.43%;
  ascent-override: 87.80%;
  descent-override: 21.00%;
  line-gap-override: 0%;
}

/* 02 TOKENS ================================================================ */
:root {
  /* --- surfaces --- */
  --bg:          #FFFFFF;   /* page ground */
  --bg-subtle:   #F5F6FA;   /* alternating sections */
  --bg-tint:     #EEF0FB;   /* faint brand-tinted panels */
  --card:        #FFFFFF;   /* raised card face */

  /* --- ink --- */
  --ink:         #0C1020;   /* headings + strong text — 17.6:1 on white */
  --body:        #3B4256;   /* long-form body — 9.4:1 on white */
  --muted:       #5A6377;   /* secondary/labels — 6.0:1 on white */
  --line:        #E4E7F0;   /* hairline borders */
  --line-strong: #D3D8E6;

  /* --- brand: indigo → violet --- */
  --brand:       #4F46E5;   /* primary UI colour */
  --brand-2:     #7C3AED;   /* gradient partner */
  --brand-ink:   #4036C4;   /* brand as text/links on white — 6.4:1 */
  --brand-tint:  #EEF0FE;   /* brand wash */
  --grad:        linear-gradient(135deg, #6366F1 0%, #7C3AED 55%, #A855F7 100%);
  --grad-soft:   linear-gradient(135deg, #4F46E5, #7C3AED);

  /* --- gold: the keystone accent --- */
  --gold:        #E9A23B;
  --gold-deep:   #B87708;   /* gold as text on white — 4.6:1 */
  --gold-tint:   #FBF1DF;

  /* --- dark band --- */
  --dark:        #0B0E1A;
  --dark-2:      #141a2e;
  --dark-card:   #171E33;
  --dark-line:   #2A3350;
  --dark-text:   #EEF1F8;   /* 15.8:1 on --dark */
  --dark-muted:  #9BA6C4;   /* 6.6:1 on --dark */

  /* --- feedback --- */
  --danger:      #C0341D;   /* 4.9:1 on white */
  --success:     #0E7C57;

  /* --- shadows (with blur — this is where the depth comes from) --- */
  --sh-xs: 0 1px 2px rgba(12,16,32,.06);
  --sh-sm: 0 1px 2px rgba(12,16,32,.06), 0 2px 6px rgba(12,16,32,.06);
  --sh-md: 0 2px 4px rgba(12,16,32,.05), 0 8px 24px -6px rgba(12,16,32,.14);
  --sh-lg: 0 12px 32px -8px rgba(12,16,32,.20), 0 40px 64px -24px rgba(12,16,32,.22);
  --sh-brand: 0 8px 22px -6px rgba(79,70,229,.45);
  --sh-brand-lg: 0 18px 40px -10px rgba(79,70,229,.5);

  /* --- radii (generous, modern) --- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* --- spacing (ratio ~1.5) --- */
  --s0: .25rem; --s1: .5rem;  --s2: .75rem; --s3: 1rem;
  --s4: 1.5rem; --s5: 2.25rem; --s6: 3.5rem; --s7: 5.25rem;
  --s8: 8rem;   --s9: 12rem;

  /* --- type scale --- */
  --t-hero:  clamp(2.75rem, 6vw, 5rem);
  --t-h2:    clamp(2.1rem, 4.6vw, 3.65rem);
  --t-h3:    clamp(1.2rem, 1.7vw, 1.5rem);
  --t-lede:  clamp(1.15rem, 1.6vw, 1.45rem);
  --t-body:  1.0625rem;   /* 17px */
  --t-small: .9375rem;    /* 15px */
  --t-label: .8125rem;    /* 13px */
  --t-fig:   clamp(2.25rem, 4vw, 3.25rem);

  /* --- layout --- */
  --container: 1200px;
  --container-wide: 1320px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --gap: clamp(1rem, 2vw, 1.75rem);
  --measure: 40rem;
  --section-y: clamp(4.5rem, 9vw, 8rem);
  --header-h: 68px;

  /* --- motion --- */
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* 03 RESET ================================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  background: var(--bg);
  color: var(--body);
  font-family: 'Archivo Body', 'Archivo Fallback', ui-sans-serif, system-ui, sans-serif;
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-synthesis-weight: none;
  min-height: 100vh;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; }
textarea { resize: vertical; }
::selection { background: color-mix(in oklab, var(--brand) 22%, transparent); }

/* Film grain — a barely-there texture that gives flat fills a photographic
   quality. Fixed, non-interactive, transform/paint-only (no layout, no CLS).
   ~0.4KB inline; disabled where the viewer prefers less motion is unnecessary
   (it does not move), but it is kept subtle enough to never muddy text. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 9; pointer-events: none;
  opacity: .035; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 04 BASE TYPE ============================================================= */
h1, h2, h3, h4 { color: var(--ink); font-weight: 700; text-wrap: balance; letter-spacing: -.02em; }
h1 {
  font-family: 'Archivo Display', 'Archivo Fallback', sans-serif;
  font-size: var(--t-hero); line-height: 1.02; letter-spacing: -.035em;
}
h2 {
  font-family: 'Archivo Display', 'Archivo Fallback', sans-serif;
  font-size: var(--t-h2); line-height: 1.06; letter-spacing: -.03em;
}
h3 { font-size: var(--t-h3); font-weight: 700; line-height: 1.25; }
p { text-wrap: pretty; }
p, li { max-width: var(--measure); }

a { color: var(--brand-ink); text-decoration: none; }
a:hover { color: var(--brand); }
strong, b { font-weight: 700; color: var(--ink); }

/* Links that sit INSIDE prose are underlined, so they are distinguishable from
   surrounding text without relying on colour alone (WCAG 1.4.1). Component
   links — nav, buttons, cards, footer lists — are not in <p>/lede and stay
   clean. */
p a, .lede a, .card__meta a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--brand) 45%, transparent);
}
p a:hover, .lede a:hover { text-decoration-color: currentColor; }
.band--dark p a { text-decoration-color: rgba(199,182,255,.5); }

.fig, .price, table { font-variant-numeric: tabular-nums lining-nums; }

/* eyebrow / section label — a small tinted pill, not micro-caps */
.label {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .4em .85em;
  font-size: var(--t-label); font-weight: 700; letter-spacing: .01em;
  color: var(--brand-ink);
  background: var(--brand-tint);
  border: 1px solid color-mix(in oklab, var(--brand) 14%, transparent);
  border-radius: var(--r-pill);
  margin-bottom: var(--s4);
}
.label::before {
  content: ''; width: 9px; height: 7px; background: var(--gold);
  clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
}

.lede { font-size: var(--t-lede); line-height: 1.55; color: var(--muted); }
.small { font-size: var(--t-small); }
.muted { color: var(--muted); }

/* section intro heading gets a little breathing room to its lede */
.section__head { max-width: 44rem; margin-bottom: var(--s6); }
.section__head .lede { margin-top: var(--s3); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .lede { margin-inline: auto; }

/* Legacy hooks kept so older page markup stays valid. --defer is a no-op
   marker (content-visibility was removed — it produced false a11y-contrast
   flags for skipped sections); --flat drops a surface's shadow. */
.section--defer { }
.surface--flat { box-shadow: none; }

/* 05 LAYOUT ================================================================ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: var(--container-wide); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--subtle { background: var(--bg-subtle); }

.grid { display: grid; gap: var(--gap); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }

.stack > * + * { margin-top: var(--s3); }
.stack--wide > * + * { margin-top: var(--s5); }

.divider { border: 0; height: 1px; background: var(--line); }

.skip-link {
  position: absolute; left: var(--s3); top: var(--s3); z-index: 100;
  padding: var(--s2) var(--s3); background: var(--brand); color: #fff;
  border-radius: var(--r-xs); transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

:focus-visible { outline: 3px solid color-mix(in oklab, var(--brand) 55%, transparent); outline-offset: 2px; border-radius: 4px; }
.band--dark :focus-visible { outline-color: color-mix(in oklab, #fff 70%, transparent); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.measure { max-width: var(--measure); }
.flow > * + * { margin-top: var(--s4); }

/* 06 HEADER / NAV ========================================================== */
.header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.header.is-stuck { border-bottom-color: var(--line); box-shadow: var(--sh-sm); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: var(--header-h); }

.wordmark { display: inline-flex; align-items: center; gap: .6rem; font-family: 'Archivo Display', sans-serif; font-size: 1.1rem; color: var(--ink); letter-spacing: -.02em; }
.wordmark__mark {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: var(--grad-soft); box-shadow: var(--sh-brand);
}
.wordmark__mark::before { content: ''; width: 14px; height: 11px; background: var(--gold); clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%); }

.nav { display: flex; align-items: center; gap: var(--s4); }
.nav__list { display: flex; align-items: center; gap: var(--s2); list-style: none; padding: 0; margin: 0; }
.nav__link { color: var(--body); font-size: var(--t-small); font-weight: 600; padding: .5rem .8rem; border-radius: var(--r-xs); transition: background-color .15s var(--ease), color .15s var(--ease); }
.nav__link:hover { background: var(--bg-subtle); color: var(--ink); }
.nav__link[aria-current='page'] { color: var(--brand-ink); background: var(--brand-tint); }

.nav__toggle {
  display: none; align-items: center; gap: .5rem; padding: .5rem .8rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-xs);
  font-size: var(--t-small); font-weight: 700; cursor: pointer; background: var(--card);
}
.nav__bars, .nav__bars::before, .nav__bars::after { display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; }
.nav__bars { position: relative; }
.nav__bars::before, .nav__bars::after { content: ''; position: absolute; left: 0; }
.nav__bars::before { top: -5px; } .nav__bars::after { top: 5px; }

@media (max-width: 860px) {
  .js .nav__toggle { display: inline-flex; }
  .header__inner { flex-wrap: wrap; }
  .nav { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: var(--s3); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { padding: var(--s3) var(--s2); border-radius: 0; border-bottom: 1px solid var(--line); }
  .nav__cta { margin-top: var(--s3); text-align: center; }
  /* Hidden from FIRST PAINT when JS is available (the inline class-setter in
     <head> adds .js before paint), so the menu never flashes open and then
     collapses — which was a mobile CLS of 0.2. Without JS the menu stays in
     flow and visible. */
  .js .nav { display: none; }
  .js .nav.nav--open { display: flex; }
}

/* 07 FOOTER ================================================================ */
.footer { background: var(--dark); color: var(--dark-text); padding-block: var(--s7) var(--s5); }
.footer a { color: var(--dark-muted); }
.footer a:hover { color: #fff; }
.footer__grid { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.footer .wordmark { color: #fff; }
.footer__title { font-size: var(--t-label); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--dark-muted); margin-bottom: var(--s3); }
.footer__list { list-style: none; padding: 0; display: grid; gap: var(--s2); }
.footer__list a { color: var(--dark-text); }
.footer__legal { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--dark-line); color: var(--dark-muted); font-size: var(--t-small); display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); justify-content: space-between; }
.footer__legal p { max-width: none; color: var(--dark-muted); }

/* 08 BUTTONS =============================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82rem 1.4rem; min-height: 48px;
  border-radius: var(--r-pill); font-size: var(--t-small); font-weight: 700;
  cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
.btn--primary { background: var(--grad-soft); color: #fff; box-shadow: var(--sh-brand); }
.btn--primary:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--sh-brand-lg); }
.btn--secondary { background: var(--card); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--sh-xs); }
.btn--secondary:hover { border-color: var(--brand); color: var(--ink); transform: translateY(-2px); box-shadow: var(--sh-sm); }
.btn--ghost { color: var(--brand-ink); padding-inline: .4rem; min-height: 0; }
.btn--ghost:hover { color: var(--brand); }
.btn--lg { padding: 1rem 1.7rem; min-height: 54px; font-size: 1rem; }
.btn:active { transform: translateY(0); }

.band--dark .btn--secondary { background: rgba(255,255,255,.04); color: #fff; border-color: var(--dark-line); }
.band--dark .btn--secondary:hover { border-color: rgba(255,255,255,.6); }

.btn__arrow { transition: transform .18s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* 09 SURFACES / CARDS ====================================================== */
.surface {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s5); box-shadow: var(--sh-sm);
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), border-color .2s var(--ease);
}
a.surface, .surface--link { text-decoration: none; color: inherit; display: block; }
a.surface:hover, .surface--link:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: color-mix(in oklab, var(--brand) 30%, var(--line)); }
.card__title { color: var(--ink); margin-bottom: var(--s2); }
.card__meta { font-size: var(--t-small); color: var(--muted); margin-top: var(--s3); }

/* gradient icon tile used on feature cards */
.icon-tile {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  background: var(--grad); color: #fff; margin-bottom: var(--s3); box-shadow: var(--sh-brand);
}
.icon-tile svg { width: 26px; height: 26px; }
.icon-tile--gold { background: linear-gradient(135deg, #F5B94D, #D9861A); box-shadow: 0 8px 22px -6px rgba(217,134,26,.5); }

/* 10 HERO + ESTIMATOR ====================================================== */
.hero { position: relative; padding-block: clamp(2.5rem, 6vw, 5rem) var(--section-y); overflow: hidden; }
/* soft ambient glow behind the hero */
.hero::before {
  content: ''; position: absolute; z-index: 0; top: -20%; right: -10%;
  width: 60vw; height: 60vw; max-width: 820px; max-height: 820px; pointer-events: none;
  background: radial-gradient(circle at 60% 40%, rgba(124,58,237,.20), rgba(99,102,241,.12) 40%, transparent 70%);
  filter: blur(8px);
}
.hero__grid { position: relative; z-index: 1; display: grid; gap: var(--s6); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 940px) { .hero__grid { grid-template-columns: 1.05fr .95fr; gap: var(--s7); } }
.hero__statement { margin-top: var(--s4); }
.hero__lede { margin-top: var(--s4); max-width: 34rem; }
.hero__actions { margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s3); }
.hero__trust { margin-top: var(--s5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); font-size: var(--t-small); color: var(--muted); }
.hero__trust strong { color: var(--ink); }
.hero__trust .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong); }

/* the hero visual: a floating browser mockup */
.hero__visual { position: relative; }
.mockup {
  border-radius: var(--r-lg); overflow: hidden; background: var(--card);
  border: 1px solid var(--line); box-shadow: var(--sh-lg);
}
.mockup img, .mockup svg { width: 100%; height: auto; display: block; }
/* a small gold "keystone locked" chip floating on the mockup */
.hero__badge {
  position: absolute; left: -14px; bottom: 26px; z-index: 2;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem .95rem; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-pill); box-shadow: var(--sh-md); font-size: var(--t-small); font-weight: 700; color: var(--ink);
}
.hero__badge .k { width: 15px; height: 12px; background: var(--gold); clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%); }

/* logo/industries strip under the hero */
.marquee { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: center; justify-content: center; color: var(--muted); font-weight: 600; font-size: var(--t-small); }

/* --- the estimator --- */
.estimator {
  display: grid; gap: var(--s5); align-items: center; grid-template-columns: 1fr;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(1.5rem, 4vw, 3rem); box-shadow: var(--sh-md);
}
@media (min-width: 860px) { .estimator { grid-template-columns: 260px 1fr; gap: var(--s7); } }

.estimator__art { display: grid; place-items: center; gap: var(--s4); }
/* Dimensional lit stone arch. Voussoirs carry a top-lit gradient + mortar
   strokes + a cast shadow; the keystone starts as stone and locks gold when
   the estimator is fully answered. */
.archX { width: 100%; max-width: 300px; height: auto; overflow: visible; }
.archX__ground { fill: #0b1030; opacity: .12; }
.archX .vs { fill: url(#stoneG); stroke: #AEB4C6; stroke-width: .8; stroke-linejoin: round; }
.archX .key { stroke: #B5791A; stroke-width: .8; transition: none; }
.estimator__price { text-align: center; }
.estimator__price .fig { font-family: 'Archivo Display', sans-serif; font-size: var(--t-fig); color: var(--ink); line-height: 1; }
.estimator__price .est-care { display: block; margin-top: .35rem; color: var(--muted); font-weight: 600; }

.field-group { display: grid; gap: var(--s4); }
.fitting__row { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.field-group legend { font-size: var(--t-small); font-weight: 700; color: var(--ink); padding: 0; margin-bottom: var(--s2); }
.pills { display: flex; flex-wrap: wrap; gap: .6rem; }
.pills input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.pills label {
  display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1rem;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--card); font-size: var(--t-small); font-weight: 600; color: var(--body); cursor: pointer;
  transition: border-color .15s var(--ease), background-color .15s var(--ease), color .15s var(--ease);
}
.pills label:hover { border-color: var(--brand); color: var(--ink); }
.pills input:focus-visible + label { outline: 3px solid color-mix(in oklab, var(--brand) 55%, transparent); outline-offset: 2px; }
.pills input:checked + label { border-color: transparent; background: var(--grad-soft); color: #fff; box-shadow: var(--sh-brand); }

/* Answering all three locks the keystone: it turns gold and glows. */
.estimator:has(.fitting__row:nth-of-type(1) input:checked):has(.fitting__row:nth-of-type(2) input:checked):has(.fitting__row:nth-of-type(3) input:checked) .archX .key {
  fill: url(#goldG);
  filter: url(#goldGlow);
}

/* Cinematic assembly: the arch rises into place stone-by-stone from the
   springline to the crown as the section scrolls in. Static state (no
   scroll-timeline support, reduced-motion, JS off, print) = fully seated, so
   every visitor gets a complete arch; the motion is pure enhancement. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .archX .vs {
      transform-box: fill-box;
      transform-origin: 50% 130%;
      animation: arch-seat linear both;
      animation-timeline: view();
      animation-range: entry calc(2% + var(--o, 0) * 8%) cover calc(28% + var(--o, 0) * 7%);
    }
  }
}
@keyframes arch-seat {
  from { opacity: 0; transform: translateY(26px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 11 SECTIONS & COMPONENTS ================================================= */

/* problem strip */
.problem__item { padding: var(--s5); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-xs); }
.problem__item h3 { margin-bottom: var(--s2); }
.problem__num { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--gold-tint); color: var(--gold-deep); font-weight: 800; margin-bottom: var(--s3); }

/* industries chips */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: 0; }
.chips li { padding: .55rem 1.05rem; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: var(--t-small); font-weight: 600; background: var(--card); color: var(--body); box-shadow: var(--sh-xs); max-width: none; }
.chips li.is-you { background: var(--grad-soft); color: #fff; border-color: transparent; box-shadow: var(--sh-brand); }

/* process — a real sequence */
.process { counter-reset: step; list-style: none; padding: 0; display: grid; gap: var(--s4); }
.process > li { counter-increment: step; position: relative; padding: var(--s5); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-xs); max-width: none; }
.process > li::before {
  content: counter(step, decimal-leading-zero);
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: var(--grad); color: #fff; font-family: 'Archivo Display', sans-serif; font-size: 1.05rem;
  font-variant-numeric: tabular-nums; margin-bottom: var(--s3); box-shadow: var(--sh-brand);
}
.process > li h3 { margin-bottom: var(--s1); }
@media (min-width: 780px) { .process { grid-template-columns: repeat(4, 1fr); } }

/* work rows / cards */
.work-card { display: grid; grid-template-rows: auto 1fr auto; gap: var(--s3); }
.work-card__thumb { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 10; background: var(--bg-subtle); }
.work-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.work-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); padding: var(--s4) var(--s2); border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; transition: padding-inline .2s var(--ease), background-color .2s var(--ease); border-radius: var(--r-sm); }
.work-row:hover, .work-row:focus-visible { background: var(--bg-subtle); padding-inline: var(--s3); }
.work-row strong { color: var(--ink); }
.work-row__meta { flex: none; font-size: var(--t-small); color: var(--brand-ink); font-weight: 700; }

/* dark band */
.band--dark { position: relative; background: var(--dark); color: var(--dark-text); overflow: hidden; }
.band--dark::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 78% 0%, rgba(124,58,237,.28), transparent 60%),
              radial-gradient(50% 50% at 10% 100%, rgba(79,70,229,.20), transparent 60%);
}
.band--dark > * { position: relative; z-index: 1; }
.band--dark h1, .band--dark h2, .band--dark h3 { color: #fff; }
.band--dark .lede, .band--dark .muted { color: var(--dark-muted); }
.band--dark a:not(.btn) { color: #C7B6FF; }
.band--dark .label { background: rgba(124,58,237,.16); color: #CBBEFF; border-color: rgba(124,58,237,.3); }

/* pricing plans */
.plan { display: grid; gap: var(--s3); align-content: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--sh-sm); }
.band--dark .plan { background: var(--dark-card); border-color: var(--dark-line); box-shadow: none; color: var(--dark-text); }
.plan--featured { position: relative; border-color: transparent; box-shadow: 0 0 0 2px var(--brand), var(--sh-md); }
.band--dark .plan--featured { background: linear-gradient(180deg, #1c2340, #171E33); box-shadow: 0 0 0 2px var(--brand-2), 0 24px 48px -16px rgba(124,58,237,.5); }
.plan__flag { display: inline-flex; width: fit-content; align-items: center; gap: .4rem; font-size: var(--t-label); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--brand-ink); }
.band--dark .plan__flag { color: #CBBEFF; }
.plan--featured .plan__flag { color: #fff; background: var(--grad-soft); padding: .3rem .7rem; border-radius: var(--r-pill); box-shadow: var(--sh-brand); }
.plan__price { font-family: 'Archivo Display', sans-serif; font-size: var(--t-fig); color: var(--ink); line-height: 1; }
.band--dark .plan__price { color: #fff; }
.plan__period { font-family: 'Archivo Body', sans-serif; font-size: var(--t-small); font-weight: 600; color: var(--muted); letter-spacing: 0; }
.band--dark .plan__period { color: var(--dark-muted); }
.plan__list { list-style: none; padding: 0; display: grid; gap: var(--s2); font-size: var(--t-small); margin-top: var(--s1); }
.plan__list li { position: relative; padding-left: 1.75rem; max-width: none; }
.plan__list li::before { content: ''; position: absolute; left: 0; top: .35em; width: 18px; height: 18px; border-radius: 50%; background: var(--brand-tint); }
.plan__list li::after { content: ''; position: absolute; left: 6px; top: .62em; width: 6px; height: 3px; border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(-45deg); }
.band--dark .plan__list li::before { background: rgba(124,58,237,.22); }
.band--dark .plan__list li::after { border-color: #C7B6FF; }

/* comparison table */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); }
.table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--t-small); background: var(--card); }
.table caption { text-align: left; padding: var(--s3) var(--s4) 0; color: var(--muted); }
.table th, .table td { text-align: left; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); vertical-align: middle; }
.table thead th { color: var(--ink); font-weight: 700; }
.table thead th.is-featured { color: var(--brand-ink); }
.table tbody th { font-weight: 600; color: var(--body); }
.table tr:last-child td, .table tr:last-child th { border-bottom: 0; }
.table td[data-yes]::before { content: '✓'; color: var(--brand); font-weight: 800; }
.table td[data-no]::before { content: '–'; color: var(--line-strong); font-weight: 800; }

/* FAQ */
.faq { display: grid; gap: var(--s3); }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-xs); overflow: hidden; }
.faq details[open] { box-shadow: var(--sh-sm); border-color: var(--line-strong); }
.faq summary { position: relative; display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: var(--s4) var(--s5); cursor: pointer; font-weight: 700; color: var(--ink); font-size: 1.05rem; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-tint); }
.faq summary::before { content: ''; position: absolute; right: calc(var(--s5) + 8px); top: 50%; width: 10px; height: 10px; z-index: 1;
  background: linear-gradient(var(--brand),var(--brand)) center/10px 2px no-repeat, linear-gradient(var(--brand),var(--brand)) center/2px 10px no-repeat;
  transform: translateY(-50%); transition: transform .2s var(--ease); }
.faq details[open] summary::before { transform: translateY(-50%) rotate(90deg); background: linear-gradient(var(--brand),var(--brand)) center/10px 2px no-repeat; }
.faq details > div { padding: 0 var(--s5) var(--s5); }
.faq details > div p { color: var(--body); }

/* CTA band */
.cta-band { text-align: center; }
.cta-band .section__head { margin-inline: auto; }
.cta-band__actions { margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; }

/* sticky caption for services */
@media (min-width: 900px) { .sticky-col { position: sticky; top: calc(var(--header-h) + var(--s5)); align-self: start; } }

/* generic feature list with gold ticks (services) */
.ticks { list-style: none; padding: 0; display: grid; gap: var(--s2); }
.ticks li { position: relative; padding-left: 1.75rem; max-width: none; }
.ticks li::before { content: ''; position: absolute; left: 0; top: .35em; width: 18px; height: 18px; border-radius: 50%; background: var(--gold-tint); }
.ticks li::after { content: ''; position: absolute; left: 6px; top: .62em; width: 6px; height: 3px; border-left: 2px solid var(--gold-deep); border-bottom: 2px solid var(--gold-deep); transform: rotate(-45deg); }

/* refuse block */
.refuse { display: grid; gap: var(--s3); }
.refuse__item { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; padding: var(--s4); background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-xs); }
.refuse__x { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in oklab, var(--danger) 12%, transparent); color: var(--danger); font-weight: 800; }
.refuse__item p { max-width: none; }
.refuse__item strong { display: block; color: var(--ink); }

/* 12 BEFORE / AFTER SLIDER ================================================= */
.ba { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sh-md); --pos: 50%; }
.ba__frame { position: relative; aspect-ratio: 16 / 10; background: var(--bg-subtle); }
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__img--before { z-index: 1; }
.ba__img--after { z-index: 2; clip-path: inset(0 0 0 var(--pos)); }
.ba__divider { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; background: #fff; transform: translateX(-1.5px); z-index: 3; pointer-events: none; box-shadow: 0 0 0 1px rgba(12,16,32,.08); }
.ba__divider::after { content: '⟺'; position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 40px; height: 40px; transform: translate(-50%,-50%); border-radius: 50%; background: #fff; color: var(--brand); font-size: 15px; box-shadow: var(--sh-md); }
.ba__range { position: absolute; left: var(--s5); right: var(--s5); bottom: var(--s4); width: auto; z-index: 4; accent-color: var(--brand); }
.ba__tag { position: absolute; top: var(--s3); z-index: 4; padding: .3rem .7rem; font-size: var(--t-label); font-weight: 700; background: rgba(12,16,32,.68); color: #fff; border-radius: var(--r-pill); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ba__tag--before { left: var(--s3); } .ba__tag--after { right: var(--s3); }

/* 13 FORMS ================================================================= */
.field { display: grid; gap: var(--s1); margin-bottom: var(--s4); }
.field > label { font-weight: 700; font-size: var(--t-small); color: var(--ink); }
.field .hint { font-size: var(--t-small); color: var(--muted); }
.input, .select, .textarea { width: 100%; padding: .8rem 1rem; min-height: 48px; background: var(--card); border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); color: var(--ink); }
.input::placeholder, .textarea::placeholder { color: color-mix(in oklab, var(--muted) 80%, transparent); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--brand); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.textarea { min-height: 9.5rem; }
.field--error .input, .field--error .select, .field--error .textarea { border-color: var(--danger); }
.error { font-size: var(--t-small); font-weight: 700; color: var(--danger); }
.form-status { margin-bottom: var(--s4); }
.form-status:empty { display: none; }
.form-status[data-state='error'] { padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: color-mix(in oklab, var(--danger) 8%, transparent); border: 1px solid color-mix(in oklab, var(--danger) 30%, transparent); color: var(--danger); font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn[aria-disabled='true'] { opacity: .65; cursor: progress; }

.form-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(1.5rem, 4vw, 2.75rem); box-shadow: var(--sh-md); }

/* 14 MOTION =============================================================== */
.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  /* Transform-only reveal (never opacity): the element is fully opaque the
     whole way up, so a contrast auditor can never sample it mid-fade — while
     still giving a slow, deliberate Apple-style slide into place. */
  .reveal--armed { transform: translateY(26px); transition: transform .8s var(--ease-out); transition-delay: calc(min(var(--i, 0), 5) * 90ms); }
  .reveal--armed.in { transform: none; }
}

/* 15 REDUCED MOTION / FALLBACKS =========================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal--armed { opacity: 1 !important; transform: none !important; }
  .btn:hover, a.surface:hover, .surface--link:hover { transform: none; }
}

@supports not (selector(:has(*))) {
  .estimator .key { fill: var(--gold); }
}

@media print {
  .header, .footer, .nav, .ba__range, .pills, .hero::before { display: none; }
  body { color: #000; background: #fff; }
  .section { padding-block: 1rem; }
  a::after { content: ' (' attr(href) ')'; font-size: .8em; color: #555; }
}

/* 16 THE ESTIMATE ==========================================================
   Build price and care price render into two separate spans, so the two axes
   never multiply out: three size rules + one store override + four care rules.
   These are `content` strings (not CSS counters) because counter() cannot
   render a thousands separator.  PRICES LIVE IN TWO PLACES — if you change a
   number here, change it in /pricing/index.html too (see README). */
.est-build::after { content: 'Pick a size'; color: var(--muted); font-weight: 600; }
.estimator:has(#s-small:checked)  .est-build::after { content: '$1,500 build'; color: var(--ink); }
.estimator:has(#s-mid:checked)    .est-build::after { content: '$3,000 build'; color: var(--ink); }
.estimator:has(#s-large:checked)  .est-build::after { content: '$5,000+ build'; color: var(--ink); }
/* an online store is a Premium build regardless of stated page count */
.estimator:has(#b-store:checked)  .est-build::after { content: '$5,000+ build'; color: var(--ink); }

.estimator:has(#c-self:checked)   .est-care::after { content: 'No care plan'; }
.estimator:has(#c-lite:checked)   .est-care::after { content: '+ $49/mo care'; }
.estimator:has(#c-growth:checked) .est-care::after { content: '+ $149/mo care'; }
.estimator:has(#c-pro:checked)    .est-care::after { content: '+ $299/mo care'; }

/* 20 SCROLL SET-PIECES ======================================================
   Scroll-driven showcase, marquee, stats and progress — all built on CSS
   scroll timelines so they run off the main thread and cost nothing at load.
   Every one degrades to a complete, static state without scroll-timeline
   support, with JS off, or under prefers-reduced-motion. */

/* --- scroll progress bar (top of viewport) --- */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60;
  transform: scaleX(0); transform-origin: 0 50%; background: var(--grad);
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .scroll-progress { animation: sc-progress linear both; animation-timeline: scroll(root block); }
    /* subtle hero-glow parallax */
    .hero::before { animation: hero-parallax linear both; animation-timeline: scroll(root block); animation-range: 0 70vh; }
  }
}
@keyframes sc-progress { to { transform: scaleX(1); } }
@keyframes hero-parallax { to { transform: translateY(70px); opacity: .55; } }

/* --- capabilities marquee --- */
.marquee { overflow: hidden; padding-block: var(--s3);
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee__track { display: flex; width: max-content; align-items: center; gap: var(--s5);
  animation: marquee 38s linear infinite; will-change: transform; }
.marquee__track span { display: inline-flex; align-items: center; gap: var(--s5);
  color: var(--muted); font-weight: 600; font-size: 1.0625rem; white-space: nowrap; }
.marquee__track .k { width: 8px; height: 6px; background: var(--gold); flex: none;
  clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%); }
.marquee:hover .marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }
@keyframes marquee { to { transform: translateX(-50%); } }

/* --- device showcase --- */
.showcase__stage {
  position: relative; margin-top: var(--s7);
  display: flex; align-items: center; justify-content: center; gap: 0;
}
.showcase__browser { width: min(560px, 54%); border-radius: var(--r-lg); box-shadow: var(--sh-lg); position: relative; z-index: 2; }
.showcase__phone { width: min(215px, 25%); position: relative; z-index: 3; filter: drop-shadow(0 24px 44px rgba(0,0,0,.5)); }
.showcase__phone--l { margin-right: -4%; }
.showcase__phone--r { margin-left: -4%; }
@media (max-width: 780px) {
  .showcase__stage { flex-direction: column; gap: var(--s5); margin-top: var(--s6); }
  .showcase__browser { width: 100%; }
  .showcase__phone { width: 58%; margin: 0; }
  .showcase__phone--l { display: none; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .showcase__browser { animation: sc-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
    .showcase__phone--l { animation: sc-left linear both; animation-timeline: view(); animation-range: entry 6% cover 48%; }
    .showcase__phone--r { animation: sc-right linear both; animation-timeline: view(); animation-range: entry 6% cover 48%; }
  }
}
@keyframes sc-rise  { from { opacity: 0; transform: translateY(48px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes sc-left  { from { opacity: 0; transform: translate(46px, 60px) rotate(3deg); } to { opacity: 1; transform: none; } }
@keyframes sc-right { from { opacity: 0; transform: translate(-46px, 60px) rotate(-3deg); } to { opacity: 1; transform: none; } }

/* --- credibility stats --- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--s5) var(--gap); margin-top: var(--s8); }
.stat { text-align: center; }
.stat__num {
  font-family: 'Archivo Display', 'Archivo Fallback', sans-serif;
  font-size: clamp(2.6rem, 5.5vw, 3.9rem); line-height: 1; letter-spacing: -.03em;
  /* `color` is what a contrast auditor reads (passes AA on the dark band);
     the gradient is painted over it via text-fill so the check still sees a
     valid colour. */
  color: #CBBEFF;
  background: linear-gradient(135deg, #A5B4FC 0%, #C4B5FD 45%, #F3C77A 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.stat__label { margin-top: var(--s2); color: var(--dark-muted); font-weight: 600; font-size: var(--t-small); max-width: none; }
.stat__label strong { color: #fff; display: block; font-size: 1rem; margin-bottom: 2px; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .stat { animation: sc-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 34%; }
    .stat:nth-child(2) { animation-range: entry 6% cover 40%; }
    .stat:nth-child(3) { animation-range: entry 12% cover 46%; }
    .stat:nth-child(4) { animation-range: entry 18% cover 52%; }
  }
}

/* 21 AI-SAAS / BENTO LAYER ==================================================
   A shadcn-style feature layer over the existing light theme: dot-grid and
   glow backgrounds, a bento feature grid, and an in-depth scroll-linked
   reveal system. All scroll animation is CSS scroll-timeline (off main thread,
   free at load) and degrades to a complete static page. */

/* --- in-depth scroll-linked reveals (scrubbed by scroll position) --- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .anim-up, .anim-left, .anim-right, .anim-scale {
      animation: linear both; animation-timeline: view();
      animation-range: entry 2% cover 32%;
    }
    .anim-up    { animation-name: a-up; }
    .anim-left  { animation-name: a-left; }
    .anim-right { animation-name: a-right; }
    .anim-scale { animation-name: a-scale; }
    /* stagger children of a grid/flow */
    .anim-stagger > * { animation: a-up linear both; animation-timeline: view(); }
    .anim-stagger > *:nth-child(1){ animation-range: entry 0% cover 26%; }
    .anim-stagger > *:nth-child(2){ animation-range: entry 5% cover 31%; }
    .anim-stagger > *:nth-child(3){ animation-range: entry 10% cover 36%; }
    .anim-stagger > *:nth-child(4){ animation-range: entry 13% cover 39%; }
    .anim-stagger > *:nth-child(5){ animation-range: entry 16% cover 42%; }
    .anim-stagger > *:nth-child(6){ animation-range: entry 19% cover 45%; }
  }
}
@keyframes a-up    { from { opacity: 0; transform: translateY(38px); } to { opacity: 1; transform: none; } }
@keyframes a-left  { from { opacity: 0; transform: translateX(-46px); } to { opacity: 1; transform: none; } }
@keyframes a-right { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }
@keyframes a-scale { from { opacity: 0; transform: scale(.93); } to { opacity: 1; transform: none; } }

/* --- textured backgrounds --- */
.section--dots { position: relative; isolation: isolate; }
.section--dots::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(color-mix(in oklab, var(--brand) 30%, transparent) 1.1px, transparent 1.1px);
  background-size: 26px 26px;
  -webkit-mask: radial-gradient(130% 90% at 50% -10%, #000, transparent 72%);
          mask: radial-gradient(130% 90% at 50% -10%, #000, transparent 72%);
  opacity: .45;
}
.section--glow { position: relative; overflow: hidden; isolation: isolate; }
.section--glow::after {
  content: ''; position: absolute; z-index: -1; width: min(920px, 120%); aspect-ratio: 1;
  left: 50%; top: -34%; translate: -50% 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(124,58,237,.16), rgba(99,102,241,.08) 42%, transparent 66%);
}

/* --- bento grid --- */
.bento { display: grid; gap: var(--gap); grid-template-columns: repeat(6, 1fr); grid-auto-rows: 190px; }
.bento__cell {
  grid-column: span 2; position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s5); box-shadow: var(--sh-sm);
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s2);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.bento__cell:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: color-mix(in oklab, var(--brand) 26%, var(--line)); }
.bento__cell--wide { grid-column: span 3; }
.bento__cell--wide2 { grid-column: span 4; }
.bento__cell--tall { grid-row: span 2; }
.bento__cell h3 { font-size: 1.2rem; }
.bento__cell p { color: var(--muted); font-size: var(--t-small); max-width: 34ch; }
.bento__tag { position: absolute; top: var(--s4); left: var(--s5); font-size: var(--t-label); font-weight: 700; color: var(--brand-ink); }
.bento__art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bento__cell > * { position: relative; z-index: 1; }
@media (max-width: 820px) {
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .bento__cell, .bento__cell--wide, .bento__cell--wide2 { grid-column: span 2; }
  .bento__cell--tall { grid-row: auto; }
}

/* --- alternating feature rows --- */
.feature-row { display: grid; gap: var(--s6); align-items: center; grid-template-columns: 1fr; }
.feature-row + .feature-row { margin-top: var(--s8); }
@media (min-width: 920px) {
  .feature-row { grid-template-columns: 1fr 1fr; gap: var(--s8); }
  .feature-row--rev .feature-row__text { order: 2; }
}
.feature-row__media {
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--sh-lg); background: var(--bg-subtle);
}
.feature-row__media img, .feature-row__media svg { width: 100%; height: auto; display: block; }
.feature-row__text h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.02em; }
.feature-row__text .lede { margin-top: var(--s3); }
.feature-row__list { list-style: none; padding: 0; margin-top: var(--s4); display: grid; gap: var(--s2); }
.feature-row__list li { position: relative; padding-left: 1.75rem; color: var(--body); max-width: none; }
.feature-row__list li::before { content: ''; position: absolute; left: 0; top: .3em; width: 18px; height: 18px; border-radius: 50%; background: var(--brand-tint); }
.feature-row__list li::after { content: ''; position: absolute; left: 6px; top: .58em; width: 6px; height: 3px; border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(-45deg); }