/* ============================================================
   seniorOS — brand design system
   Palette derived from the brand mark: deep navy converging to blue.
   Newsreader (serif display) · Archivo (grotesk body) · IBM Plex Mono (labels/data)
   ============================================================ */

:root{
  /* brand navy -> blue ramp (sampled from the mark) */
  --navy-900: #0c1a2b;   /* deepest ink */
  --navy-800: #102338;
  --navy-700: #16365c;   /* darkest stroke in mark */
  --navy-600: #1d4675;
  --blue-600: #275585;   /* primary accent */
  --blue-500: #356a9f;
  --blue-400: #5283bb;   /* lighter strokes */
  --blue-300: #7ba0d4;   /* lightest dots */

  /* light surfaces */
  --paper:    #f5f4f0;   /* warm neutral page */
  --paper-2:  #ffffff;
  --paper-3:  #ecebe5;
  --ink-text: #131d29;
  --ink-dim:  #586472;
  --line:       rgba(19,29,41,0.12);
  --line-2:     rgba(19,29,41,0.22);

  /* on navy */
  --on-navy:     #eef2f7;
  --on-navy-dim: #93a6bd;
  --navy-line:   rgba(255,255,255,0.12);
  --navy-line-2: rgba(255,255,255,0.20);
  --navy-tint:   rgba(123,160,212,0.12);

  --accent:      var(--blue-600);
  --accent-on-navy: var(--blue-300);

  --container: 1240px;
  --pad: 44px;

  --serif: "Newsreader", Georgia, serif;
  --sans:  "Archivo", system-ui, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --nav-h: 72px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-text);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--pad);
}
.measure{ max-width:62ch; }

/* ---------------- typography ---------------- */
.eyebrow{
  font-family:var(--mono);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-dim);
  display:inline-flex; align-items:center; gap:12px;
  margin:0;
}
.eyebrow--ondark{ color:var(--on-navy-dim); }
.eyebrow__num{ color:var(--accent); }
.eyebrow--ondark .eyebrow__num{ color:var(--accent-on-navy); }
.eyebrow__dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); }
.eyebrow--ondark .eyebrow__dot{ background:var(--accent-on-navy); }

h1,h2,h3{ margin:0; font-weight:500; }

.display{
  font-family:var(--serif);
  font-weight:500;
  line-height:0.98;
  letter-spacing:-0.025em;
  font-size:clamp(46px, 7.5vw, 104px);
  text-wrap:balance;
}
.h2{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.04;
  letter-spacing:-0.018em;
  font-size:clamp(32px, 4.4vw, 58px);
  text-wrap:balance;
}
.h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(24px, 2.4vw, 32px);
  line-height:1.1;
  letter-spacing:-0.012em;
}
.lead{
  font-size:clamp(19px, 1.7vw, 24px);
  line-height:1.5;
  color:var(--ink-dim);
  text-wrap:pretty;
}
.body{
  font-size:clamp(17px, 1.3vw, 19px);
  line-height:1.62;
  color:var(--ink-dim);
  text-wrap:pretty;
}
.body + .body{ margin-top:1.1em; }

.on-navy{ color:var(--on-navy); }
.on-navy .lead, .on-navy .body{ color:var(--on-navy-dim); }

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:600; font-size:15px;
  letter-spacing:0.01em; padding:14px 24px; border-radius:3px;
  border:1px solid transparent; cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease);
  white-space:nowrap;
}
.btn--accent{ background:var(--accent); color:#fff; }
.btn--accent:hover{ background:var(--navy-600); }
.btn--ghost{ background:transparent; border-color:var(--line-2); color:var(--ink-text); }
.btn--ghost:hover{ border-color:var(--ink-text); }
.btn--ghost-dark{ background:transparent; border-color:var(--navy-line-2); color:var(--on-navy); }
.btn--ghost-dark:hover{ border-color:var(--on-navy); }
.btn--lg{ padding:17px 30px; font-size:16px; }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; }

/* arrow link */
.arrow-link{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:13px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--accent);
  transition:gap .2s var(--ease), color .2s var(--ease);
}
.arrow-link:hover{ gap:14px; color:var(--navy-700); }
.on-navy .arrow-link{ color:var(--accent-on-navy); }
.on-navy .arrow-link:hover{ color:#fff; }

/* ============================================================
   NAV (built by app.js into #site-nav)
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(245,244,240,0.82);
  backdrop-filter:saturate(150%) blur(16px);
  border-bottom:1px solid var(--line);
}
.nav__inner{
  max-width:var(--container); margin-inline:auto;
  height:var(--nav-h);
  padding-inline:var(--pad);
  display:flex; align-items:center; gap:30px;
}
.brand{ display:flex; align-items:center; gap:11px; }
.brand__icon{ width:30px; height:30px; flex:none; }
.brand__word{
  font-family:var(--sans); font-weight:700; font-size:20px;
  letter-spacing:-0.015em; color:var(--navy-700);
}
.nav__links{ display:flex; gap:6px; margin-left:14px; }
.nav__links a{
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--ink-dim);
  padding:8px 12px; border-radius:3px;
  transition:color .18s var(--ease), background .18s var(--ease);
}
.nav__links a:hover{ color:var(--navy-700); }
.nav__links a.is-active{ color:var(--navy-700); background:rgba(19,29,41,0.05); }
.nav__right{ margin-left:auto; display:flex; align-items:center; gap:16px; }

/* region + language selector */
.region{ position:relative; }
.region__btn{
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  font-family:var(--mono); font-size:12px; letter-spacing:0.05em;
  background:transparent; border:1px solid var(--line-2); cursor:pointer;
  color:var(--ink-text); padding:9px 13px; border-radius:3px;
  transition:border-color .18s var(--ease);
}
.region__btn:hover{ border-color:var(--ink-text); }
.region__chev{ font-size:9px; color:var(--ink-dim); transition:transform .2s var(--ease); }
.region.is-open .region__chev{ transform:rotate(180deg); }
.region__sep{ color:var(--line-2); }
.region__lang{ color:var(--accent); font-weight:500; }

.region__panel{
  position:absolute; top:calc(100% + 10px); right:0;
  width:300px; background:var(--paper-2);
  border:1px solid var(--line-2); border-radius:5px;
  box-shadow:0 20px 50px -20px rgba(12,26,43,0.4);
  padding:18px; z-index:80;
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .18s var(--ease), transform .18s var(--ease);
}
.region.is-open .region__panel{ opacity:1; transform:none; pointer-events:auto; }
.region__group + .region__group{ margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.region__label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--ink-dim); margin:0 0 11px;
}
.region__opts{ display:flex; flex-direction:column; gap:2px; }
.region__opts--row{ flex-direction:row; flex-wrap:wrap; gap:6px; }
.region__opt{
  font-family:var(--sans); font-size:14px; text-align:left;
  background:transparent; border:none; cursor:pointer;
  color:var(--ink-text); padding:9px 11px; border-radius:3px;
  transition:background .14s var(--ease), color .14s var(--ease);
}
.region__opt:hover{ background:var(--paper-3); }
.region__opt.is-active{ color:var(--accent); font-weight:600; }
.region__opt--chip{
  border:1px solid var(--line-2); font-family:var(--mono); font-size:12px;
  letter-spacing:0.04em; padding:8px 12px;
}
.region__opt--chip.is-active{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section{ padding:clamp(76px,10vh,128px) 0; }
.section--paper{ background:var(--paper); }
.section--white{ background:var(--paper-2); }
.section--navy{ background:var(--navy-900); color:var(--on-navy); }
.section--paper + .section--paper{ border-top:1px solid var(--line); }

.section__head{ max-width:32ch; }
.section__head .h2{ margin-top:16px; }

/* page hero (interior pages) */
.pagehero{
  background:var(--navy-900); color:var(--on-navy);
  padding:clamp(96px,15vh,160px) 0 clamp(64px,9vh,104px);
  position:relative; overflow:hidden;
}
.pagehero .display{ font-size:clamp(40px,6vw,84px); max-width:16ch; margin-top:24px; }
.pagehero .lead{ margin-top:28px; max-width:58ch; color:var(--on-navy-dim); }
.pagehero__rule{ height:1px; background:var(--navy-line); max-width:var(--container); margin:0 auto; }

/* converge backdrop motif (thin lines fanning) derived from the mark */
.fan{ position:absolute; inset:0; pointer-events:none; opacity:0.5; }
.fan::before, .fan::after{
  content:""; position:absolute; top:-10%; bottom:-10%;
  width:1px; background:linear-gradient(var(--navy-line), transparent);
}

/* ============================================================
   HOME hero
   ============================================================ */
.hero{
  background:var(--navy-900); color:var(--on-navy);
  position:relative; overflow:hidden;
  padding:clamp(80px,11vh,132px) 0 clamp(72px,10vh,116px);
}
.hero__mark{
  position:absolute; right:-4%; top:50%; transform:translateY(-50%);
  width:min(46vw,560px); opacity:0.06; pointer-events:none; user-select:none;
}
/* lean full-viewport landing hero */
.hero--full{ display:flex; align-items:center; min-height:calc(100svh - var(--nav-h)); padding-block:clamp(64px,10vh,120px); }
.hero--full .display{ max-width:15ch; }
.hero__eyebrow{ color:var(--on-navy-dim); }
.hero .display{ margin-top:28px; max-width:13ch; }
.hero__sub{
  margin-top:34px; max-width:56ch;
  font-size:clamp(18px,1.6vw,23px); line-height:1.5; color:var(--on-navy-dim);
}
.hero__cta{ margin-top:40px; }

/* ============================================================
   SIGNATURE VISUAL — fifteen tools -> one system
   ============================================================ */
.collapse{ margin:0; }
.collapse__stage{
  position:relative; height:clamp(400px,46vw,560px);
  background:var(--paper-2); border:1px solid var(--line);
  border-radius:6px; overflow:hidden;
}
.collapse__stage::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:46px 46px; opacity:0;
  transition:opacity .8s var(--ease);
}
.collapse__stage[data-state="unified"]::before{ opacity:0.5; }
.collapse__frame{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) scale(0.96);
  width:min(760px,88%); height:min(370px,74%);
  border:1px solid var(--accent); border-radius:5px;
  box-shadow:0 24px 64px -36px var(--accent);
  opacity:0; transition:opacity .7s var(--ease), transform .7s var(--ease);
  pointer-events:none;
}
.collapse__stage[data-state="unified"] .collapse__frame{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.collapse__frametop{
  position:absolute; left:0; right:0; top:0; height:42px;
  display:flex; align-items:center; gap:10px; padding:0 16px;
  border-bottom:1px solid var(--navy-tint); background:var(--navy-tint);
}
.collapse__frameicon{ width:18px; height:18px; }
.collapse__framelabel{ font-family:var(--sans); font-weight:700; font-size:15px; letter-spacing:-0.01em; color:var(--navy-700); }
.collapse__framemeta{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); margin-left:auto; }
.collapse__grid{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(760px,88%); height:min(370px,74%);
  padding:54px 24px 24px;
  display:grid; grid-template-columns:repeat(5,1fr); grid-auto-rows:1fr; gap:11px;
}
.chip{
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--mono); font-size:11px; line-height:1.25; letter-spacing:0.01em;
  padding:6px 8px; color:var(--ink-dim);
  background:var(--paper); border:1px solid var(--line-2); border-radius:4px;
  transform:translate(var(--sx,0px), var(--sy,0px)) rotate(var(--r,0deg));
  transition:transform .9s var(--ease), background .6s var(--ease), border-color .6s var(--ease), color .6s var(--ease), box-shadow .6s var(--ease);
  will-change:transform;
}
.collapse__stage[data-state="scattered"] .chip{
  background:var(--paper-2); border-style:dashed;
  box-shadow:0 12px 26px -18px rgba(12,26,43,0.5);
}
.collapse__stage[data-state="unified"] .chip{
  transform:translate(0,0) rotate(0deg);
  background:var(--navy-tint);
  border-color:color-mix(in oklab, var(--accent) 38%, transparent);
  color:var(--navy-700);
}
.collapse__caption{
  margin-top:22px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--ink-dim);
}
.collapse__count{ display:inline-flex; align-items:baseline; gap:9px; }
.collapse__countnum{ font-family:var(--serif); font-size:24px; font-weight:500; letter-spacing:0; color:var(--ink-text); text-transform:none; }
.collapse__arrow{ color:var(--accent); }
.collapse__unifiedcap{ color:var(--navy-700); text-transform:none; letter-spacing:0.01em; font-size:13.5px; }
.collapse__replay{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
  background:none; border:1px solid var(--line-2); cursor:pointer; color:var(--ink-dim);
  padding:7px 13px; border-radius:3px;
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.collapse__replay:hover{ color:var(--accent); border-color:var(--accent); }

/* ============================================================
   PROBLEM split
   ============================================================ */
.split{ display:grid; grid-template-columns:0.95fr 1.05fr; gap:64px; align-items:start; }
.split__aside{ position:sticky; top:calc(var(--nav-h) + 40px); }
.prose-2{ display:grid; gap:26px; }

/* ============================================================
   CAPABILITIES — editorial numbered rows
   ============================================================ */
.caps{ margin-top:8px; border-top:1px solid var(--line-2); }
.cap{
  display:grid; grid-template-columns:88px 1fr 1.05fr; gap:40px;
  padding:44px 0; border-bottom:1px solid var(--line); align-items:start;
}
.cap__num{ font-family:var(--mono); font-size:13px; letter-spacing:0.08em; color:var(--accent); padding-top:6px; }
.cap__title{ font-family:var(--serif); font-weight:500; font-size:clamp(26px,2.6vw,36px); line-height:1.05; letter-spacing:-0.012em; }
.cap__body{ font-size:17px; line-height:1.58; color:var(--ink-dim); margin:0; }
.cap__tags{ margin-top:16px; display:flex; gap:7px; flex-wrap:wrap; }
.tag{
  font-family:var(--mono); font-size:11px; letter-spacing:0.04em;
  color:var(--ink-dim); border:1px solid var(--line); border-radius:3px; padding:5px 10px;
}

/* ============================================================
   HOW IT WORKS — three steps
   ============================================================ */
.steps{ margin-top:8px; display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line-2); }
.step{ padding:38px 36px 42px 0; border-bottom:1px solid var(--line); }
.step:not(:last-child){ border-right:1px solid var(--line); padding-right:36px; }
.step__idx{
  width:34px; height:34px; border-radius:4px; background:var(--accent); color:#fff;
  font-family:var(--mono); font-size:13px; display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:20px;
}
.step__title{ font-family:var(--serif); font-weight:500; font-size:24px; line-height:1.1; margin-bottom:11px; }
.step__body{ font-size:15.5px; line-height:1.55; color:var(--ink-dim); margin:0; }

/* ============================================================
   TRUST badges + reliability
   ============================================================ */
.badges{ margin-top:44px; display:flex; gap:12px; flex-wrap:wrap; }
.badge{
  font-family:var(--mono); font-size:12px; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--on-navy-dim); border:1px solid var(--navy-line-2); border-radius:3px; padding:11px 17px;
}
.section--paper .badge{ color:var(--ink-dim); border-color:var(--line-2); }

.factrow{ margin-top:56px; display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.fact{ border-top:1px solid var(--line-2); padding-top:22px; }
.section--navy .fact{ border-color:var(--navy-line-2); }
.fact__k{ font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); }
.section--navy .fact__k{ color:var(--accent-on-navy); }
.fact__v{ font-family:var(--serif); font-size:clamp(22px,2vw,28px); line-height:1.12; margin-top:12px; }

/* ============================================================
   CTA band
   ============================================================ */
.cta{ background:var(--navy-900); color:var(--on-navy); }
.cta__inner{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:48px; align-items:center; }
.cta .h2{ max-width:16ch; }
.cta__side{ display:flex; flex-direction:column; gap:20px; align-items:flex-start; }
.cta__mail{
  font-family:var(--mono); font-size:14px; letter-spacing:0.03em; color:var(--accent-on-navy);
  border-bottom:1px solid var(--navy-line-2); padding-bottom:2px;
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.cta__mail:hover{ color:#fff; border-color:#fff; }

/* contact page form */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.field label{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--on-navy-dim); }
.field input, .field textarea, .field select{
  font-family:var(--sans); font-size:16px; color:var(--on-navy);
  background:rgba(255,255,255,0.04); border:1px solid var(--navy-line-2); border-radius:4px;
  padding:13px 15px;
}
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--accent-on-navy); }
.field textarea{ resize:vertical; min-height:120px; }
.field select option{ color:#111; }

/* ============================================================
   FOOTER (built by app.js into #site-footer)
   ============================================================ */
.footer{ background:var(--navy-900); color:var(--on-navy); border-top:1px solid var(--navy-line); padding:72px 0 56px; }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid var(--navy-line); }
.footer__brand{ display:flex; align-items:center; gap:11px; }
.footer__icon{ width:30px; height:30px; }
.footer__word{ font-family:var(--sans); font-weight:700; font-size:20px; letter-spacing:-0.015em; color:var(--on-navy); }
.footer__tag{ margin-top:18px; max-width:34ch; font-size:15px; color:var(--on-navy-dim); line-height:1.5; }
.footer__col h4{ font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--on-navy-dim); margin:0 0 16px; font-weight:500; }
.footer__col a, .footer__col span{ display:block; font-size:15px; color:var(--on-navy); margin-bottom:11px; transition:color .16s var(--ease); }
.footer__col a:hover{ color:var(--accent-on-navy); }
.footer__bottom{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:28px; }
.footer__by, .footer__copy{ margin:0; font-family:var(--mono); font-size:12.5px; letter-spacing:0.04em; color:var(--on-navy-dim); }

/* ============================================================
   reveal
   ============================================================ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ============================================================
   HOME feature preview cards
   ============================================================ */
.fcards{
  margin-top:48px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden;
}
.fcard{
  background:var(--paper-2); padding:28px 26px 30px;
  display:flex; flex-direction:column; gap:10px; min-height:184px;
  transition:background .2s var(--ease);
}
.fcard:hover{ background:#fbfbf9; }
a.fcard{ cursor:pointer; }
.fcard__num{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; color:var(--accent); }
.fcard__title{ font-family:var(--serif); font-weight:500; font-size:21px; line-height:1.1; letter-spacing:-0.01em; margin:0; }
.fcard__body{ font-family:var(--sans); font-size:14.5px; line-height:1.5; color:var(--ink-dim); margin:0; }
.fcard--cta{ background:var(--navy-900); color:var(--on-navy); justify-content:flex-end; }
.fcard--cta:hover{ background:var(--navy-800); }
.fcard--cta .fcard__title{ color:var(--on-navy); }
.fcard--cta .arrow-link{ margin-top:6px; }

/* HOME intro lockup */
.intro{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.intro__copy .h2{ margin-top:16px; }
.intro__copy .body{ margin-top:22px; }

/* trust feature band on platform */
.feature-split{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:start; }

/* about principles */
.principles{ margin-top:8px; border-top:1px solid var(--line-2); }
.principle{
  display:grid; grid-template-columns:0.8fr 1.2fr; gap:48px;
  padding:40px 0; border-bottom:1px solid var(--line); align-items:baseline;
}
.principle__t{ font-family:var(--serif); font-weight:500; font-size:clamp(24px,2.4vw,32px); line-height:1.08; letter-spacing:-0.012em; }
.principle__b{ font-size:18px; line-height:1.6; color:var(--ink-dim); margin:0; }

/* ============================================================
   APPLE-STYLE FEATURE BANDS (platform product page)
   ============================================================ */
.feat{
  padding:clamp(96px,15vh,184px) 0;
  text-align:center;
  border-top:1px solid var(--line);
}
.feat--navy{ background:var(--navy-900); color:var(--on-navy); border-top-color:rgba(255,255,255,0.08); }
.feat__inner{ max-width:820px; margin-inline:auto; }
.feat__kicker{
  font-family:var(--mono); font-size:12.5px; font-weight:500; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--accent);
  display:inline-flex; align-items:center; gap:11px; margin:0;
}
.feat--navy .feat__kicker{ color:var(--accent-on-navy); }
.feat__kicker::before{ content:""; width:24px; height:1px; background:currentColor; opacity:0.55; }
.feat__kicker::after{ content:""; width:24px; height:1px; background:currentColor; opacity:0.55; }
.feat__title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(40px,6.2vw,82px); line-height:1.0; letter-spacing:-0.026em;
  margin:22px 0 0; text-wrap:balance;
}
.feat__body{
  font-size:clamp(19px,1.7vw,24px); line-height:1.5; color:var(--ink-dim);
  margin:26px auto 0; max-width:46ch; text-wrap:pretty;
}
.feat--navy .feat__body{ color:var(--on-navy-dim); }
.feat__badges{ margin-top:34px; display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* section intro header, centered (Apple section opener) */
.opener{ text-align:center; }
.opener .h2{ margin-inline:auto; }
.opener__lead{ margin:26px auto 0; max-width:54ch; }

/* principles 3-up (the merged About) */
.pillars3{
  margin-top:56px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden; text-align:left;
}
.pillar3{ background:var(--paper-2); padding:34px 30px 38px; }
.pillar3__t{ font-family:var(--serif); font-weight:500; font-size:24px; line-height:1.1; letter-spacing:-0.012em; margin:0 0 12px; }
.pillar3__b{ font-size:15.5px; line-height:1.55; color:var(--ink-dim); margin:0; }

/* feature index rail (overview at top of features) */
.feat-index{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:40px; }
.feat-index a{
  font-family:var(--mono); font-size:12px; letter-spacing:0.04em; color:var(--ink-dim);
  border:1px solid var(--line-2); border-radius:40px; padding:9px 16px;
  transition:color .16s var(--ease), border-color .16s var(--ease);
}
.feat-index a:hover{ color:var(--accent); border-color:var(--accent); }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 940px){
  :root{ --pad:24px; }
  .nav__links{ display:none; }
  .split{ grid-template-columns:1fr; gap:40px; }
  .split__aside{ position:static; }
  .cap{ grid-template-columns:64px 1fr; gap:20px 24px; }
  .cap__body{ grid-column:2; }
  .steps{ grid-template-columns:1fr; }
  .step{ border-right:none !important; padding-right:0 !important; }
  .cta__inner{ grid-template-columns:1fr; gap:28px; }
  .contact{ grid-template-columns:1fr; gap:36px; }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .factrow{ grid-template-columns:1fr; gap:20px; }
  .fcards{ grid-template-columns:repeat(2,1fr); }
  .intro{ grid-template-columns:1fr; gap:32px; }
  .feature-split{ grid-template-columns:1fr; gap:32px; }
  .principle{ grid-template-columns:1fr; gap:14px; padding:32px 0; }
  .pillars3{ grid-template-columns:1fr; }
}
@media (max-width: 600px){
  body{ font-size:16px; }
  .region__btn .region__country{ display:none; }
  .collapse__grid{ grid-template-columns:repeat(3,1fr); padding:48px 14px 16px; }
  .footer__top{ grid-template-columns:1fr; }
  .cap{ grid-template-columns:1fr; }
  .cap__num{ padding-top:0; }
  .fcards{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .chip, .collapse__frame, .collapse__stage::before{ transition:none; }
}