/* ============================================================
   LENTRA, warm stone design system  (PREVIEW)
   One stylesheet for every preview page. Nothing here is shared
   with the live site; the live assets/styles.css is untouched.

   Palette, type scale and component shapes are fixed here so that
   pages cannot drift. If a page needs a new look, add a component
   here rather than a one-off rule in the page.
   ============================================================ */

/* ---------- self-hosted faces (no Google Fonts on the render path) ---------- */
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/inter-tight-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/inter-tight-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400;font-display:swap;
  src:url("fonts/playfair-display-latin-400-italic.woff2") format("woff2")}

:root{
  /* ground + surfaces */
  --bg:#ffffff;
  --bg-2:#FAFAF9;
  --stone:#9E948B;          /* the signature card */
  --stone-dark:#887C71;
  --ink:#141413;            /* the dark card + primary buttons */
  --chip:#F1F0EF;           /* quiet chip / logo bar */
  --tint:rgba(125,117,110,.11);  /* large quiet panel */
  --line:rgba(20,20,19,.12);
  --line-2:rgba(20,20,19,.20);

  /* text */
  --text:#141413;
  --muted:rgba(20,20,19,.55);
  --muted-2:rgba(20,20,19,.40);
  --on-dark:#ffffff;
  --on-dark-muted:rgba(255,255,255,.62);

  /* type */
  --font-head:"Inter Tight","Inter",system-ui,-apple-system,sans-serif;
  --font-accent:"Playfair Display","Cormorant Garamond",Georgia,serif;
  --font-body:"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* shape */
  --r-sm:12px;
  --r:16px;
  --r-lg:24px;
  --r-pill:999px;
  --maxw:1360px;
  --gutter:24px;
  --ease:cubic-bezier(.22,1,.36,1);
  --card-h:585px;
  color-scheme:light;
}
@media (min-width:768px){ :root{ --gutter:48px } }

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:17px;line-height:1.5;
  overflow-x:clip;-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);
  color:#fff;padding:12px 20px;border-radius:var(--r);transition:top .2s}
.skip:focus{top:16px}

/* ---------- type scale ---------- */
.ff-head{font-family:var(--font-head)}
.ff-accent{font-family:var(--font-accent);font-style:italic}
em.acc,.acc{font-family:var(--font-accent);font-style:italic;font-weight:400}

.t-display{font-family:var(--font-head);font-weight:400;
  font-size:clamp(38px,6.4vw,64px);line-height:1.04;letter-spacing:-.025em}
.t-h2{font-family:var(--font-head);font-weight:400;
  font-size:clamp(34px,4.6vw,56px);line-height:1.08;letter-spacing:-.025em}
.t-h3{font-family:var(--font-head);font-weight:400;
  font-size:clamp(26px,2.6vw,34px);line-height:1.15;letter-spacing:-.02em}
.t-h4{font-family:var(--font-head);font-weight:500;
  font-size:20px;line-height:1.3;letter-spacing:-.01em}
.t-lead{font-size:clamp(19px,2vw,22px);line-height:1.45;color:var(--muted)}
.t-body{font-size:17px;line-height:1.55;color:var(--muted)}
.t-sm{font-size:15px;line-height:1.5;color:var(--muted)}
.t-eyebrow{font-family:var(--font-head);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2)}
.balance{text-wrap:balance}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:calc(920px + var(--gutter) * 2)}
.section{padding-block:clamp(64px,8vw,104px)}
.section-tight{padding-block:clamp(48px,5vw,72px)}
.section-alt{background:var(--bg-2)}
.stack{display:flex;flex-direction:column}
.center{text-align:center}
.grid{display:grid;gap:24px}
/* a grid item's default min-width:auto lets one unbreakable child (a long
   button label, say) widen the whole column past the gutter. It cannot. */
.grid > *{min-width:0}
@media (min-width:720px){ .g-2{grid-template-columns:repeat(2,1fr)} }
@media (min-width:960px){
  .g-3{grid-template-columns:repeat(3,1fr)}
  .g-4{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:720px) and (max-width:959px){ .g-3,.g-4{grid-template-columns:repeat(2,1fr)} }

.section-head{display:flex;flex-direction:column;gap:18px;margin-bottom:clamp(40px,5vw,64px)}
.section-head.center{align-items:center;text-align:center}
.section-head .t-lead{max-width:62ch}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:56px;padding-inline:28px;border-radius:var(--r);
  font-family:var(--font-body);font-size:19px;font-weight:500;
  white-space:nowrap;transition:background .2s var(--ease),color .2s var(--ease),
  border-color .2s var(--ease),transform .2s var(--ease)}
.btn .ico{width:17px;height:17px;stroke-width:2}
.btn:active{transform:translateY(1px)}
/* a long label must wrap rather than push the layout */
@media (max-width:540px){.btn{white-space:normal;text-align:center;line-height:1.25;
  height:auto;min-height:56px;padding-block:12px;max-width:100%}}
/* a disabled control has to read as disabled: Back is inert on the first step */
.btn:disabled{opacity:.38;cursor:default;pointer-events:none}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#2a2a27}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:#eceae8}
.btn-ghost{border:1px solid var(--line-2);color:var(--text)}
.btn-ghost:hover{background:var(--chip);border-color:transparent}
.btn-ghost-light{border:1px solid rgba(255,255,255,.42);color:#fff}
.btn-ghost-light:hover{background:rgba(255,255,255,.12)}
.btn-sm{height:46px;font-size:17px;padding-inline:22px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* text link with a moving arrow */
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:500;
  color:var(--text);font-size:17px}
.link-arrow .ico{width:16px;height:16px;stroke-width:2;transition:transform .2s var(--ease)}
.link-arrow:hover .ico{transform:translateX(4px)}

/* ---------- icons ---------- */
.ico{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.ico-chip{width:44px;height:44px;border-radius:var(--r-sm);background:var(--chip);
  display:flex;align-items:center;justify-content:center;color:var(--ink);flex:none}
.ico-chip .ico{width:22px;height:22px}
.ico-chip.on-stone{background:rgba(255,255,255,.22);color:#fff}
.ico-chip.on-ink{background:rgba(255,255,255,.10);color:#fff}

/* ---------- cards ---------- */
.card{border-radius:var(--r-lg);padding:30px;background:var(--bg-2);
  display:flex;flex-direction:column;gap:14px;height:100%}
.card-line{background:transparent;border:1px solid var(--line)}
.card-stone{background:var(--stone);color:#fff}
.card-stone .t-body,.card-stone .t-sm{color:var(--on-dark-muted)}
.card-ink{background:var(--ink);color:#fff}
.card-ink .t-body,.card-ink .t-sm{color:var(--on-dark-muted)}
.card-media{border-radius:var(--r-lg);overflow:hidden;background:var(--chip)}
.card-media img{width:100%;height:100%;object-fit:cover}
.card h3,.card .t-h4{color:inherit}

/* numbered / stepped list */
.steps{display:grid;gap:26px}
.step-n{font-family:var(--font-head);font-size:13px;letter-spacing:.14em;color:var(--muted-2)}
.card-stone .step-n,.card-ink .step-n{color:rgba(255,255,255,.5)}

/* numbered diligence list */
.numbered{counter-reset:n;display:grid;gap:0;max-width:86ch;margin:0;padding:0;list-style:none}
.numbered>li{counter-increment:n;position:relative;padding:22px 0 22px 58px;
  border-top:1px solid var(--line);color:var(--muted);font-size:17px;line-height:1.6}
.numbered>li:last-child{border-bottom:1px solid var(--line)}
.numbered>li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:22px;
  font-family:var(--font-head);font-size:13px;letter-spacing:.14em;color:var(--muted-2)}
@media (max-width:540px){ .numbered>li{padding-left:44px;font-size:16px} }

/* quiet definition rows */
.rows{display:flex;flex-direction:column}
.row{display:flex;gap:20px;align-items:flex-start;
  padding-block:22px;border-top:1px solid var(--line)}
.row:last-child{border-bottom:1px solid var(--line)}
.row-k{flex:none;width:190px;font-family:var(--font-head);font-weight:500;font-size:18px}
.row-v{flex:1;color:var(--muted);font-size:16px;line-height:1.55}
@media (max-width:719px){ .row{flex-direction:column;gap:8px} .row-k{width:auto} }

/* pill list (the white rows on the stone card) */
.pill-row{width:100%;padding:15px 27px;border-radius:var(--r);background:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:18px;color:var(--stone)}
.pill-row .ico{width:22px;height:22px;stroke-width:2.5;color:#a3a3a3}
.pill-row:first-child{color:var(--stone-dark)}

/* tag / chip */
.tag{display:inline-flex;align-items:center;gap:8px;height:38px;padding-inline:16px;
  border-radius:var(--r-pill);background:var(--chip);font-size:15px;color:var(--text)}
.tag .ico{width:15px;height:15px}
.tag-list{display:flex;flex-wrap:wrap;gap:8px}

/* quiet panel: the big tinted block from the reference */
.panel{background:var(--tint);border-radius:var(--r);padding:clamp(28px,4vw,40px)}

/* ---------- marquee ---------- */
.marquee{position:relative;overflow:hidden}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;
  width:72px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.section-alt .marquee::before{background:linear-gradient(90deg,var(--bg-2),transparent)}
.section-alt .marquee::after{background:linear-gradient(270deg,var(--bg-2),transparent)}
/* The track holds two identical halves and slides by the width of exactly one,
   so the seam is invisible. Two rules keep it that way.

   1. Spacing lives on the ITEMS, never as `gap` on the track. A flex gap sits
      between items but not after the last one, so each half would be half a gap
      short of half the track and the loop would jump by 32px every cycle.

   2. The distance is a measured pixel value set by lentra.js, not -50%. A
      percentage resolves against the element's width on every frame, so the
      webfont swapping in or a resize changes the travel mid-animation and the
      loop jumps. The animation does not run at all until that measurement
      exists, which is what stops it starting against a half-built track.

   Both of those were real bugs. Do not "tidy" either back. */
.marquee-track{display:flex;width:max-content;will-change:transform}
.marquee-track.is-ready{animation:marquee var(--mq-time,35s) linear infinite}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-1 * var(--mq-shift,0px)))}
}
.mq-item{display:flex;align-items:center;gap:12px;flex-shrink:0;opacity:.4;
  margin-inline-end:64px}
.mq-item .ico{width:32px;height:32px;stroke-width:1.4}
.mq-item span{font-family:var(--font-head);font-size:28px;font-weight:500;
  white-space:nowrap;letter-spacing:-.02em}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(var(--y,18px));
    transition:opacity .6s var(--ease) var(--d,0s),transform .6s var(--ease) var(--d,0s)}
  .rise.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none}
  .marquee-track,.marquee-track.is-ready{animation:none}
}
.word{display:inline-block}

/* ============================================================
   HEADER: the CARMERA Studio app-bar pattern, in Lentra colours.
   Three columns: brand / centred pill capsule / call to action.
   The capsule is ink with a white active pill, so it reads the same
   over the photo hero and over a white page.
   ============================================================ */
.site-header{position:sticky;top:0;z-index:60;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:16px;
  padding:12px clamp(16px,2.4vw,32px);
  background:rgba(250,250,249,.62);
  backdrop-filter:blur(32px) saturate(180%);
  -webkit-backdrop-filter:blur(32px) saturate(180%);
  transition:background .3s var(--ease)}
/* hairline that fades out at both ends instead of running edge to edge */
.site-header::after{content:"";position:absolute;bottom:0;
  left:clamp(16px,2.4vw,32px);right:clamp(16px,2.4vw,32px);height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent);
  transition:opacity .3s var(--ease)}

.header-lead{display:flex;align-items:center;gap:12px;min-width:0}
.brand{display:flex;align-items:center;min-width:0}
.brand span{font-family:var(--font-head);font-size:26px;font-weight:500;
  letter-spacing:-.012em;white-space:nowrap}

/* --- the capsule --- */
.pill-nav{justify-self:center;max-width:100%;display:flex;align-items:center;gap:2px;
  padding:4px;border-radius:var(--r-pill);background:var(--ink);
  box-shadow:0 6px 18px rgba(20,20,19,.20)}
.pill-nav > a,.nav-more-btn{min-height:38px;display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:var(--r-pill);background:transparent;
  color:rgba(255,255,255,.80);font-size:16px;font-weight:500;white-space:nowrap;
  transition:background .16s var(--ease),color .16s var(--ease)}
.pill-nav > a .ico,.nav-more-btn .ico{width:16px;height:16px;stroke-width:1.7}
.pill-nav > a:hover,.nav-more-btn:hover{background:rgba(255,255,255,.15);color:#fff}
.pill-nav > a[aria-current="page"],.nav-more-btn.active{background:#fff;color:var(--ink);
  box-shadow:0 1px 3px rgba(20,20,19,.22)}
.pill-nav > a[aria-current="page"]:hover,.nav-more-btn.active:hover{background:#fff}
.nav-more-btn > span{display:inline-flex;align-items:center;gap:5px}
.nav-caret{width:13px !important;height:13px !important;opacity:.7;
  transition:transform .18s var(--ease)}
.nav-more[data-open="true"] .nav-caret{transform:rotate(180deg)}

/* --- the More group --- */
.nav-more{position:relative}
.nav-more-panel{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-6px);
  z-index:70;width:248px;padding:8px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:#fff;box-shadow:0 26px 54px -22px rgba(20,20,19,.34);
  display:flex;flex-direction:column;gap:2px;
  opacity:0;pointer-events:none;transition:opacity .18s var(--ease),transform .18s var(--ease)}
.nav-more[data-open="true"] .nav-more-panel{opacity:1;pointer-events:auto;
  transform:translateX(-50%) translateY(0)}
/* keeps the pointer from falling through the gap between button and panel */
.nav-more-panel::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.nav-more-panel a{display:flex;align-items:center;gap:11px;padding:10px 12px;
  border-radius:var(--r-sm);color:var(--muted);font-size:16px;font-weight:500;
  transition:background .16s,color .16s}
.nav-more-panel a .ico{width:17px;height:17px;flex:none;color:var(--muted-2)}
.nav-more-panel a > span{flex:1}
.nav-more-panel .nav-new{margin-left:0}
.nav-more-panel a:hover{background:var(--chip);color:var(--text)}
.nav-more-panel a:hover .ico{color:var(--text)}
.nav-more-panel a[aria-current="page"]{background:var(--ink);color:#fff}
.nav-more-panel a[aria-current="page"] .ico{color:#fff}
/* a rule between groups, drawn as its own element so a selected row beneath it
   keeps its normal height */
.nav-sep{border:0;border-top:1px solid var(--line);margin:8px 4px}
.nav-sheet .nav-sep{margin:10px 6px}

/* "New" flag on a nav item, rides inside the label so it collapses with it */
.nav-new{display:inline-block;margin-left:7px;padding:2px 7px;border-radius:var(--r-pill);
  background:var(--stone);color:#fff;font-size:10px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;vertical-align:1px}
.pill-nav a[aria-current="page"] .nav-new{background:var(--ink)}
.nav-sheet a[aria-current="page"] .nav-new{background:rgba(255,255,255,.28)}

.header-actions{justify-self:end;display:flex;align-items:center;gap:10px}
/* reads like a selected nav item: white inside, ink edge, ink text */
.nav-cta{display:inline-flex;align-items:center;gap:8px;height:46px;padding-inline:22px;
  border-radius:var(--r-pill);background:#fff;color:var(--ink);
  border:1.5px solid var(--ink);
  font-size:17px;font-weight:500;white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease)}
.nav-cta .ico{width:15px;height:15px;stroke-width:2}
.nav-cta:hover{background:var(--ink);color:#fff}

/* --- menu button --- */
.menu-btn{width:38px;height:38px;border-radius:12px;border:1px solid var(--line-2);
  display:none;align-items:center;justify-content:center;flex:none;
  background:transparent;transition:background .2s}
.menu-btn:hover{background:var(--chip)}
.menu-btn .ico{width:19px;height:19px;stroke-width:1.8}

/* --- the drawer --- */
.nav-scrim{position:fixed;inset:0;z-index:70;display:none;border:0;
  background:rgba(20,20,19,.42);opacity:0;transition:opacity .2s var(--ease)}
.nav-scrim.is-open{display:block;opacity:1}
.nav-sheet{display:none;width:min(344px,88vw);position:fixed;top:0;left:0;bottom:0;
  z-index:75;flex-direction:column;padding:22px 18px;overflow-y:auto;
  background:#fff;color:var(--text);
  box-shadow:0 30px 60px -20px rgba(20,20,19,.4);
  transform:translateX(-102%);transition:transform .24s var(--ease)}
.nav-sheet.is-open{transform:translateX(0)}
.nav-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:20px;border-bottom:1px solid var(--line)}
.nav-sheet-head .brand span{font-size:24px}
.nav-sheet{background:rgba(255,255,255,.92);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%)}
.nav-sheet-links{display:grid;gap:4px;padding:14px 0}
.nav-sheet a{min-height:50px;display:flex;align-items:center;gap:13px;padding:12px 14px;
  border-radius:14px;color:var(--muted);font-size:17px;font-weight:500;
  transition:background .16s,color .16s}
.nav-sheet a .ico{width:19px;height:19px;flex:none}
.nav-sheet a > span{flex:1}
.nav-sheet a > .ico:last-child{width:16px;opacity:.5}
.nav-sheet a:hover{background:var(--chip);color:var(--text)}
.nav-sheet a[aria-current="page"]{background:var(--ink);color:#fff}
.nav-sheet-foot{display:grid;gap:8px;margin-top:auto;padding-top:18px;
  border-top:1px solid var(--line)}
/* the sheet's own link colour must not win over the button */
.nav-sheet a.nav-cta{justify-content:center;min-height:52px;margin-top:6px;
  gap:8px;color:var(--ink);font-size:17px;border-radius:var(--r-pill);background:#fff}
.nav-sheet a.nav-cta:hover{background:var(--ink);color:#fff}
.nav-sheet a.nav-cta .ico{width:15px;height:15px;opacity:1;flex:none}

@media (max-width:1400px){
  .pill-nav > a,.nav-more-btn{padding-inline:13px}
  .pill-nav > a > span,.nav-more-btn > span{display:none}
  .pill-nav > a[aria-current="page"] > span,.nav-more-btn.active > span{display:inline-flex}
}
@media (max-width:1020px){
  .site-header{grid-template-columns:minmax(0,1fr) auto}
  .pill-nav{display:none}
  .menu-btn{display:inline-flex}
  .nav-sheet{display:flex}
  .header-actions .nav-cta{display:none}
}

/* ============================================================
   PAGE HEAD + HERO
   The homepage opens the same way every interior page does: type on
   white, then a contained image band. Nothing is set over a photograph.
   ============================================================ */
.page-head{padding-top:clamp(48px,6vw,84px);padding-bottom:clamp(36px,4.5vw,60px)}
.page-head .t-lead{max-width:60ch}
.page-head .btn-row{margin-top:10px}

/* the homepage's larger opening */
.hero{padding-top:clamp(44px,5.5vw,76px);padding-bottom:clamp(56px,7vw,96px)}
/* sized so "A resident convenience hub for" holds one line from ~900px up,
   which keeps the headline at two rows rather than three */
.hero h1{max-width:none;font-size:clamp(34px,5.4vw,58px)}

/* lede on the left, actions on the right, bottom-aligned */
.hero-meta{display:grid;gap:20px;margin-top:26px}
@media (min-width:900px){
  .hero-meta{grid-template-columns:1.3fr auto;align-items:end;gap:40px}
}

/* the letterbox band */
.band{margin-top:32px;border-radius:var(--r-lg);overflow:hidden;background:var(--chip);
  aspect-ratio:var(--ratio,21/9)}
.band img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
@media (max-width:700px){ .band{aspect-ratio:3/2} }

/* page-head stat row, Studio's divider chips: no boxes, just hairlines */
.head-chips{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin-top:2px}
.head-chip{display:inline-flex;align-items:center;gap:7px;padding:1px 16px;
  border-inline-start:1px solid var(--line-2);color:var(--muted);
  font-size:15px;font-weight:500;white-space:nowrap}
.head-chip:first-child{padding-inline-start:0;border-inline-start:0}
.head-chip b{color:var(--text);font-weight:500}
.head-chip .ico{width:15px;height:15px;color:var(--muted-2);flex:none}
@media (max-width:620px){
  .head-chips{gap:8px 0}
  .head-chip{padding-inline:12px}
  .head-chip:first-child{padding-inline-start:0}
}

/* the stat row: hairline dividers, no boxes */
.stat-row{display:flex;flex-wrap:wrap;gap:14px 0;margin-top:32px;
  padding-top:24px;border-top:1px solid var(--line)}
.stat{flex:1;min-width:168px;display:flex;align-items:center;gap:11px;
  padding-inline:22px;border-inline-start:1px solid var(--line)}
.stat:first-child{padding-inline-start:0;border-inline-start:0}
.stat .ico{width:19px;height:19px;color:var(--muted-2)}
.stat div{display:flex;flex-direction:column;line-height:1.15}
.stat b{font-family:var(--font-head);font-size:19px;font-weight:500;letter-spacing:-.01em}
.stat span{font-size:14px;color:var(--muted)}
@media (max-width:560px){
  .stat{flex:0 0 100%;padding-inline:0;border-inline-start:0}
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--ink);color:#fff;padding-block:clamp(56px,7vw,80px)}
.site-footer a{color:rgba(255,255,255,.66);font-size:16px;transition:color .2s}
.site-footer a:hover{color:#fff}
.footer-top{display:grid;gap:44px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.14)}
@media (min-width:860px){ .footer-top{grid-template-columns:1.4fr 1fr 1fr 1fr} }
.footer-brand{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.footer-brand img{width:38px;height:38px;border-radius:11px}
.footer-brand span{font-family:var(--font-head);font-size:27px;font-weight:500;color:#fff}
.footer-col h3{font-family:var(--font-head);font-size:15px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.44);margin-bottom:16px}
.footer-col ul{display:flex;flex-direction:column;gap:11px}
.footer-bottom{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  align-items:center;padding-top:28px;color:rgba(255,255,255,.44);font-size:15px}
.footer-bottom nav{display:flex;flex-wrap:wrap;gap:20px}

/* ============================================================
   HOMEPAGE FEATURE CARDS (the three-card row)
   ============================================================ */
.trio{display:flex;flex-direction:column;gap:24px;align-items:stretch}
.trio > *{display:flex;flex:1;min-width:0}
@media (min-width:1024px){ .trio{flex-direction:row} }
.feature{position:relative;flex:1;min-height:var(--card-h);border-radius:var(--r-lg);overflow:hidden}

/* card 1: rotating catalogue */
.f-cat{background:#d6d3d1}
.f-cat-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.05);filter:blur(1.2px)}
/* the pills are glass: without a real scrim behind them the shelving reads
   straight through the skeleton bars and the whole card turns to mush */
.f-cat-tint{position:absolute;inset:0;background:
  radial-gradient(130% 78% at 50% 50%,rgba(20,20,19,.30),rgba(20,20,19,.08) 72%),
  rgba(20,20,19,.16)}
.f-cat-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.f-rail{position:relative;width:100%;height:80px}
.f-slot{position:absolute;left:0;right:0;display:flex;justify-content:center;
  pointer-events:none}
.f-rail.is-ready .f-slot:not(.is-recycling){transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .4s ease}
.f-fade{position:absolute;left:0;right:0;height:42%;z-index:3;pointer-events:none}
.f-fade.top{top:0;background:linear-gradient(180deg,rgba(20,20,19,.55),rgba(20,20,19,.18) 55%,transparent)}
.f-fade.bot{bottom:0;background:linear-gradient(0deg,rgba(20,20,19,.55),rgba(20,20,19,.18) 55%,transparent)}
.cpill{display:flex;align-items:center;gap:9px;width:calc(100% - 48px);max-width:360px;height:80px;padding:9px;
  transform:scale(.82);transform-origin:center;
  border-radius:var(--r-pill);background:rgba(255,255,255,.13);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);
  transition:transform .6s cubic-bezier(.22,1,.36,1),background .4s ease}
.f-slot.is-active .cpill{transform:scale(1);
  background:rgba(255,255,255,.30);border-color:rgba(255,255,255,.34);backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);box-shadow:0 20px 40px -12px rgba(20,20,19,.34)}
.cpill-dot{position:relative;width:63px;height:63px;border-radius:var(--r-pill);flex:none;
  background:rgba(255,255,255,.30);display:flex;align-items:center;justify-content:center;
  color:#fff;transform:scale(.7);transition:transform .6s cubic-bezier(.22,1,.36,1)}
.f-slot.is-active .cpill-dot{transform:scale(1)}
.cpill-dot-inner{width:100%;height:100%;border-radius:var(--r-pill);
  background:rgba(255,255,255,.10);transition:opacity .35s ease}
.cpill-dot .ico{position:absolute;inset:0;margin:auto;width:26px;height:26px;opacity:0;
  transition:opacity .35s ease}
.f-slot.is-active .cpill-dot-inner{opacity:0}
.f-slot.is-active .cpill-dot .ico{opacity:1}
.cpill-body{position:relative;flex:1;min-width:0;height:44px;margin-left:4px}
.cpill-live,.cpill-skel{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;transition:opacity .4s ease}
.cpill-live{opacity:0}
.cpill-skel{gap:6px}
.f-slot.is-active .cpill-live{opacity:1;transition-delay:.15s}
.f-slot.is-active .cpill-skel{opacity:0}
.cpill-label{color:#fff;font-size:18px;font-weight:500;line-height:1.2}
.cpill-cap{color:rgba(255,255,255,.78);font-size:11px;letter-spacing:.15em;margin-top:3px}
.sbar{height:8px;border-radius:var(--r-pill)}
.sbar-a{width:140px;max-width:100%;background:rgba(255,255,255,.62)}
.sbar-b{width:70px;max-width:55%;background:rgba(255,255,255,.44)}

/* card 2: resident app */
.f-app{background:var(--ink);display:flex;flex-direction:column;
  justify-content:space-between;padding:40px 0}
.f-app-top{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;gap:10px;
  margin-bottom:24px}
.bub-skel{margin:0 38px;height:108px;flex-shrink:0;border-radius:var(--r);background:#FAFAFA14;
  display:flex;align-items:flex-start;padding:22px 22px 0}
.bsq{width:40px;height:40px;border-radius:var(--r-sm);background:#FFFFFF54;flex:none}
.bcol{margin-left:12px;flex:1;display:flex;flex-direction:column;gap:9px;padding-right:22px}
.bbar{height:6px;background:#FFFFFF3D;border-radius:var(--r-pill)}
.bbar.b1{width:31px;margin-top:17px}
.bbar.b2{width:85%}
.bbar.b3{width:55%}
.bub-morph{margin:0 24px;min-height:155px;flex-shrink:0;border-radius:var(--r-lg);padding:22px;
  overflow:hidden;position:relative;background:#FAFAFA14;transition:background-color .7s ease-out}
.bub-morph.filled{background:var(--stone)}
.bm-skel{position:absolute;inset:22px;transition:opacity .4s ease}
.bm-skel{display:flex;align-items:flex-start}
.bm-live{position:relative;opacity:0}
.bub-morph.filled .bm-skel{opacity:0}
.bub-morph.filled .bm-live{opacity:1}
.bm-head{display:flex;align-items:center;gap:12px;height:44px}
.bm-ava{width:44px;height:44px;border-radius:var(--r-pill);object-fit:cover;
  object-position:50% 28%;flex:none}
.bm-name{color:#fff;font-size:16px;line-height:1}
.bm-msg{color:#fff;font-size:15px;line-height:1.35;margin-top:10px}
.f-app-bot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
  padding-inline:32px;gap:16px}
.f-app-title{flex:1 1 160px;min-width:0;width:256px;color:#fff;font-size:clamp(30px,3vw,36px);line-height:1.12}
.f-steps{display:flex;align-items:center;flex:none}
.f-step{width:40px;height:40px;border-radius:var(--r-pill);border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:19px;
  background:#252522;color:rgba(255,255,255,.4);
  transition:background .45s var(--ease),color .45s var(--ease),width .45s var(--ease)}
.f-step + .f-step{margin-left:-12px}
.f-step.is-on{background:#5F5D4D;color:#fff;width:48px}
/* the active pill has to sit above its neighbours whichever one it is */
.f-step:nth-child(1){z-index:3}
.f-step:nth-child(2){z-index:2}
.f-step:nth-child(3){z-index:1}
.f-step.is-on{z-index:4}

/* One animation owns each text layer; no competing CSS opacity delays. */
.bm-live,.f-app-title{will-change:opacity}
@media (prefers-reduced-motion:reduce){
  .f-rail .f-slot,.cpill,.cpill-dot,.cpill-live,.cpill-skel,.f-step{transition:none!important}
}

/* card 3: adaptable */
.f-adapt{background:var(--stone);display:flex;flex-direction:column;padding:44px 33px 40px}
.f-adapt h3{color:#fff;font-family:var(--font-head);font-weight:400;
  font-size:clamp(34px,3.4vw,48px);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.f-adapt p{color:rgba(255,255,255,.6);font-size:18px;line-height:1.35;max-width:340px}
.f-adapt-top{display:flex;flex-direction:column;gap:26px}
.f-adapt-wrap{position:relative;margin-top:auto}
.f-adapt-list{display:flex;flex-direction:column;gap:12px;position:relative;z-index:1}
.f-veil{pointer-events:none;position:absolute;left:-16px;right:-16px;bottom:-40px;
  height:140px;z-index:2;
  background:linear-gradient(to top,var(--stone) 0%,var(--stone) 35%,
    rgba(158,148,139,.7) 65%,rgba(158,148,139,0) 80%)}

/* ---------- CTA band ---------- */
.cta-band{background:var(--tint);border-radius:var(--r-lg);
  padding:clamp(36px,5vw,64px);display:flex;flex-direction:column;gap:24px;
  align-items:flex-start}
@media (min-width:860px){
  .cta-band{flex-direction:row;align-items:center;justify-content:space-between;gap:40px}
  .cta-band .t-h2{max-width:16ch}
}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg)}
.table-wrap table{min-width:640px;font-size:16px}
.table-wrap th,.table-wrap td{padding:16px 20px;text-align:left;
  border-bottom:1px solid var(--line);vertical-align:top}
.table-wrap thead th{font-family:var(--font-head);font-weight:500;font-size:15px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);background:var(--bg-2)}
.table-wrap tr:last-child td{border-bottom:0}
.table-wrap td{color:var(--muted)}
.table-wrap td:first-child,.table-wrap th:first-child{color:var(--text);font-weight:500}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:15px;font-weight:500}
.field input,.field select,.field textarea{
  height:54px;padding:0 16px;border:1px solid var(--line-2);border-radius:var(--r);
  background:#fff;font:inherit;font-size:16px;color:var(--text);width:100%}
.field textarea{height:auto;padding:14px 16px;min-height:132px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,20,19,.08)}
.field-hint{font-size:14px;color:var(--muted-2)}

/* ---------- accordion ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding-block:24px;display:flex;
  align-items:flex-start;justify-content:space-between;gap:24px;
  font-family:var(--font-head);font-size:clamp(19px,2vw,22px);font-weight:500;
  letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ico{width:22px;height:22px;stroke-width:2;color:var(--muted-2);
  margin-top:4px;transition:transform .25s var(--ease)}
.faq details[open] summary .ico{transform:rotate(45deg)}
.faq .faq-body{padding-bottom:26px;color:var(--muted);font-size:17px;line-height:1.6;
  max-width:70ch}

/* ---------- misc ---------- */
.divider{height:1px;background:var(--line);border:0}
.note{font-size:15px;line-height:1.6;color:var(--muted-2);max-width:74ch}
.badge{display:inline-flex;align-items:center;height:30px;padding-inline:12px;
  border-radius:var(--r-pill);background:var(--chip);font-size:14px;
  font-family:var(--font-head);letter-spacing:.04em;color:var(--muted)}
.media-tall{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;background:var(--chip)}
.media-wide{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/10;background:var(--chip)}
.media-tall img,.media-wide img{width:100%;height:100%;object-fit:cover}
.logo-bar{height:96px;border-radius:var(--r);background:var(--chip);display:flex;
  align-items:center;justify-content:center;gap:12px}
.logo-bar img{width:34px;height:34px;border-radius:9px}
.logo-bar span{font-family:var(--font-head);font-size:28px;font-weight:500;letter-spacing:-.02em}

/* ============================================================
   CONFIGURATOR
   The CARMERA Studio new-vehicle editor, retargeted: a stepper and
   step panels on the left, a sticky summary on the right that updates
   as choices are made.
   ============================================================ */
.cfg-layout{display:grid;gap:24px;align-items:start}
@media (min-width:1080px){
  .cfg-layout{grid-template-columns:minmax(0,1fr) 380px}
  .cfg-side{position:sticky;top:112px}
}

/* --- stepper --- */
.stepper{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 26px;
  padding:6px;border:1px solid var(--line);border-radius:var(--r-pill);background:#fff}
.stepper button{min-height:40px;display:inline-flex;align-items:center;gap:9px;
  padding:6px 16px 6px 6px;border-radius:var(--r-pill);background:transparent;
  color:var(--muted);font-size:16px;font-weight:500;white-space:nowrap;
  transition:background .16s var(--ease),color .16s var(--ease)}
.stepper button:disabled{color:var(--muted-2);cursor:default}
.stepper li.done button:hover:not(:disabled){background:var(--chip);color:var(--text)}
.stepper li.current button{background:var(--ink);color:#fff}
.step-index{width:26px;height:26px;display:grid;place-items:center;flex:none;
  border-radius:50%;background:var(--chip);color:var(--muted);font-size:13px;
  font-weight:600;transition:background .18s,color .18s}
.step-index .ico{width:14px;height:14px;stroke-width:2.4}
.stepper li.current .step-index{background:var(--stone);color:#fff}
.stepper li.done .step-index{background:var(--ink);color:#fff}
@media (max-width:620px){ .step-label{display:none} .stepper li.current .step-label{display:inline} }

.step-panel{border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,3vw,32px);background:#fff;animation:step-in .24s var(--ease)}
@keyframes step-in{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){ .step-panel{animation:none} }
.step-panel > header{display:flex;flex-direction:column;gap:6px;margin-bottom:22px}
.step-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.step-progress{color:var(--muted-2);font-size:15px}

/* --- a schematic of the hub, driven by the current selections --- */
.hub-viz{--cab:#C9A87C;--trim:#D6C3A5;--cols:5;
  display:flex;gap:5px;padding:7px;border-radius:10px;background:var(--cab);
  box-shadow:inset 0 0 0 1px rgba(20,20,19,.10);position:relative;overflow:hidden}
.hub-viz::after{content:"";position:absolute;left:7px;right:7px;top:0;height:3px;
  border-radius:0 0 3px 3px;background:var(--trim)}
.wv-kiosk{width:13%;min-width:16px;border-radius:4px;
  background:linear-gradient(160deg,rgba(255,255,255,.85),rgba(255,255,255,.5))}
.wv-grid{flex:1;display:flex;flex-wrap:wrap;justify-content:center;gap:4px;
  align-content:flex-start}
.wv-grid i{display:block;flex:none;
  width:calc((100% - (var(--cols) - 1) * 4px) / var(--cols));
  aspect-ratio:1/.82;border-radius:3px;
  background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px rgba(20,20,19,.06)}
.hub-viz.lg{padding:10px;border-radius:14px;gap:8px}
.hub-viz.lg .wv-grid{gap:6px}
.hub-viz.lg .wv-grid i{width:calc((100% - (var(--cols) - 1) * 6px) / var(--cols))}
.hub-viz.lg .wv-grid i{border-radius:4px}

/* --- selectable cards --- */
/* header: language switcher. Same mechanics as the More menu so the header
   keeps one interaction pattern rather than two. */
.nav-lang{position:relative}
/* Icon only, no locale code. Deliberately the SAME object as .menu-btn: both
   are icon-only chrome buttons and on mobile both are on screen at once, so
   they share size, radius, border and hover. Change one, change both.
   With the text gone, aria-label is the only accessible name and title is the
   only thing a mouse user gets, so neither may be dropped from shell.mjs. */
.nav-lang-btn{width:38px;height:38px;border-radius:12px;
  border:1px solid var(--line-2);background:transparent;color:var(--text);
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  cursor:pointer;transition:background .2s,border-color .16s}
.nav-lang-btn:hover{background:var(--chip);border-color:var(--ink)}
/* an icon-only control has no label to show it is active, so the open panel
   has to be readable from the button itself */
.nav-lang[data-open="true"] .nav-lang-btn{background:var(--chip);border-color:var(--ink)}
.nav-lang-btn .ico{width:19px;height:19px;stroke-width:1.8}
.nav-lang-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:40;min-width:150px;
  display:none;flex-direction:column;padding:6px;border:1px solid var(--line);
  border-radius:var(--r);background:#fff;box-shadow:0 18px 44px -22px rgba(20,20,19,.55)}
.nav-lang[data-open="true"] .nav-lang-panel{display:flex}
.nav-lang-panel a{padding:9px 12px;border-radius:8px;font-size:15px;color:var(--text)}
.nav-lang-panel a:hover{background:var(--chip)}
.nav-lang-panel a[aria-current="true"]{font-weight:500;background:var(--chip)}
/* In the drawer the button sits at the very bottom of a full-height sheet, so
   a panel dropping downward runs off the screen — on a phone that hid two of
   the four languages. Here it opens upward, and aligns to the button rather
   than the sheet edge. */
.nav-sheet-foot .nav-lang-panel{top:auto;bottom:calc(100% + 8px);left:0;right:auto}
/* Below 860px the switcher leaves the HEADER, because the header is down to
   the burger and the wordmark. It must stay in the DRAWER: this rule used to
   match .nav-lang unscoped, which hid both copies and left phone visitors with
   no way to change language at all. Scope any rule here to .header-actions. */
@media (max-width:860px){ .header-actions .nav-lang{display:none} }

/* the banner an unreviewed translation carries until a native speaker signs
   it off. Deliberately plain: it is a disclosure, not a design element. */
.locale-note{margin:0;padding:11px 16px;background:var(--chip);border-bottom:1px solid var(--line);
  font-size:13.5px;line-height:1.5;color:var(--muted);text-align:center}

/* homepage: the affordability hook. Figures sit in their own column so the
   numbers are scannable without reading the paragraph, which is the whole job
   of the block. */
.squeeze{display:grid;gap:clamp(26px,4vw,52px);align-items:center;
  background:var(--tint);border-radius:var(--r-lg);padding:clamp(28px,4vw,52px)}
@media (min-width:900px){ .squeeze{grid-template-columns:1.25fr .75fr} }
.squeeze-copy{display:flex;flex-direction:column;gap:16px}
.squeeze-figs{display:flex;flex-direction:column;gap:2px}
.squeeze-fig{padding:16px 0;border-top:1px solid var(--line-2)}
.squeeze-fig:first-child{border-top:0;padding-top:0}
.squeeze-fig b{display:block;font-family:var(--font-head);font-weight:500;
  font-size:clamp(34px,4.4vw,46px);line-height:1;letter-spacing:-.03em;color:var(--text)}
.squeeze-fig span{display:block;margin-top:7px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.squeeze-src{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted-2)}

/* --- configurator: design and term, the two commercial choices ---
   Both reuse the selectable-card behaviour of .choice-cards (hover lift, ink
   border and inset ring when pressed) so the whole form is one pattern rather
   than three. Only the inner layout differs. */
.design-cards,.term-cards{display:grid;gap:16px}
@media (min-width:860px){ .design-cards,.term-cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
.design-cards > button,.term-cards > button{position:relative;display:flex;flex-direction:column;
  gap:16px;padding:0;border:1px solid var(--line-2);border-radius:var(--r-lg);background:#fff;
  text-align:left;cursor:pointer;overflow:hidden;
  transition:border-color .16s,box-shadow .16s,transform .16s,background .16s}
.term-cards > button{padding:20px 22px;gap:11px}
.design-cards > button:hover,.term-cards > button:hover{border-color:var(--ink);
  transform:translateY(-2px);box-shadow:0 12px 28px -18px rgba(20,20,19,.5)}
.design-cards > button[aria-pressed="true"],.term-cards > button[aria-pressed="true"]{
  border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);background:var(--bg-2)}

.design-shot{display:block;background:var(--chip)}
.design-shot img{display:block;width:100%;height:auto;aspect-ratio:1.5;object-fit:cover}
.design-body{display:flex;flex-direction:column;gap:12px;padding:0 20px 20px}
.design-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.design-cards .c-name{font-family:var(--font-head);font-size:23px;line-height:1.1;
  letter-spacing:-.02em;color:var(--text)}
.design-points{display:flex;flex-direction:column;gap:11px;padding-top:2px;
  border-top:1px solid var(--line)}
.design-points > span{display:block;font-size:14.5px;line-height:1.55;color:var(--muted);
  padding-top:11px;border-top:1px solid var(--line)}
.design-points > span:first-child{border-top:0}
.design-points b{display:block;font-weight:500;font-size:15px;color:var(--text);margin-bottom:2px}

.term-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.term-cards .c-name{font-family:var(--font-head);font-size:21px;line-height:1.15;
  letter-spacing:-.02em;color:var(--text)}
.term-uplift{display:inline-block;padding:4px 11px;border-radius:var(--r-pill);
  background:var(--ink);color:#fff;font-size:12px;font-weight:500;letter-spacing:.04em}
.term-best{display:block;padding-top:11px;margin-top:3px;border-top:1px solid var(--line);
  font-size:14.5px;line-height:1.55;color:var(--muted)}
.term-best b{color:var(--text);font-weight:500}

.choice-cards{display:grid;gap:14px}
@media (min-width:700px){ .choice-cards{grid-template-columns:repeat(3,minmax(0,1fr))} }
.choice-cards button{position:relative;display:flex;flex-direction:column;gap:14px;
  padding:18px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:#fff;
  text-align:left;cursor:pointer;
  transition:border-color .16s,box-shadow .16s,transform .16s,background .16s}
.choice-cards button:hover{border-color:var(--ink);transform:translateY(-2px);
  box-shadow:0 12px 28px -18px rgba(20,20,19,.5)}
.choice-cards button[aria-pressed="true"]{border-color:var(--ink);
  box-shadow:inset 0 0 0 2px var(--ink);background:var(--bg-2)}
.choice-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.choice-cards .c-size{font-family:var(--font-head);font-size:30px;line-height:1;
  letter-spacing:-.03em}
.choice-cards .c-name{font-size:15px;color:var(--muted);font-weight:500}
.choice-meta{display:flex;flex-direction:column;gap:5px;font-size:14px;color:var(--muted)}
.choice-meta b{color:var(--text);font-weight:500}

/* the tick every selectable control shares */
.pick-tick{position:absolute;top:12px;right:12px;z-index:2;
  width:23px;height:23px;border-radius:50%;
  border:1px solid var(--line-2);background:#fff;display:grid;place-items:center;
  color:transparent;box-shadow:0 0 0 3px rgba(255,255,255,.9);
  transition:background .16s,border-color .16s,color .16s,box-shadow .16s}
.pick-tick .ico{width:12px;height:12px;stroke-width:3}
[aria-pressed="true"] > .pick-tick{background:var(--ink);border-color:#fff;color:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.95),0 2px 6px rgba(20,20,19,.3)}

/* --- finish and trim swatches --- */
.swatches{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:620px){ .swatches{grid-template-columns:repeat(5,minmax(0,1fr))} }
.swatch{position:relative;display:flex;flex-direction:column;gap:0;padding:0;
  border:1px solid var(--line-2);border-radius:var(--r);background:#fff;overflow:hidden;
  cursor:pointer;text-align:left;
  transition:border-color .16s,box-shadow .16s,transform .16s}
.swatch:hover{border-color:var(--ink);transform:translateY(-2px);
  box-shadow:0 12px 26px -18px rgba(20,20,19,.5)}
.swatch[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.swatch i{display:block;height:74px;width:100%;
  box-shadow:inset 0 -1px 0 rgba(20,20,19,.10)}
.swatch b{display:block;padding:11px 13px;font-size:14px;font-weight:500;line-height:1.25}
.swatch .pick-tick{top:9px;right:9px}

/* --- module toggles --- */
.modules{display:grid;gap:12px}
@media (min-width:620px){ .modules{grid-template-columns:repeat(2,minmax(0,1fr))} }
.module{position:relative;display:flex;align-items:flex-start;gap:13px;
  padding:16px 44px 16px 16px;border:1px solid var(--line-2);border-radius:var(--r);
  background:#fff;text-align:left;cursor:pointer;
  transition:border-color .16s,box-shadow .16s,transform .16s,background .16s}
.module:hover{border-color:var(--ink);transform:translateY(-2px);
  box-shadow:0 12px 26px -18px rgba(20,20,19,.5)}
.module[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);
  background:var(--bg-2)}
.module .ico-chip{width:40px;height:40px}
.module .ico-chip .ico{width:20px;height:20px}
.module .m-text{flex:1;display:flex;flex-direction:column;gap:3px}
.module .m-name{font-size:16px;font-weight:500}
.module .m-note{font-size:13.5px;color:var(--muted);line-height:1.4}

/* --- the side panel --- */
.cfg-side{display:flex;flex-direction:column;gap:14px}
.cfg-card{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
  padding:24px;display:flex;flex-direction:column;gap:16px}
.cfg-card.is-stone{background:var(--stone);border-color:transparent;color:#fff}
.cfg-card.is-stone .t-sm,.cfg-card.is-stone .cfg-k{color:rgba(255,255,255,.68)}
.cfg-summary{display:flex;flex-direction:column}
.cfg-summary li{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-top:1px solid var(--line);font-size:15px}
.cfg-summary li:first-child{border-top:0;padding-top:0}
.cfg-k{color:var(--muted)}
.cfg-v{font-weight:500;text-align:right}
.cfg-swatch-dot{display:inline-block;width:13px;height:13px;border-radius:50%;
  margin-right:7px;vertical-align:-2px;box-shadow:inset 0 0 0 1px rgba(20,20,19,.18)}

.price-readout{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price-readout b{font-family:var(--font-head);font-size:clamp(34px,4vw,42px);
  font-weight:500;letter-spacing:-.03em;line-height:1}
.price-readout span{font-size:16px;color:rgba(255,255,255,.7)}
/* "up to" sits before the figure and reads as part of it, not as a footnote:
   the number on this card is the top of a band, and the qualifier has to be
   impossible to miss while skimming. */
.price-readout .price-qual{font-family:var(--font-head);font-size:clamp(17px,1.8vw,20px);
  font-weight:500;letter-spacing:-.01em;color:rgba(255,255,255,.82);align-self:baseline}
.price-readout .price-qual[hidden]{display:none}
.cfg-card .field select{height:48px}
.placeholder-flag{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  padding:5px 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.22);
  color:#fff;font-size:13px;font-weight:500}
.placeholder-flag .ico{width:14px;height:14px}
/* the base flag is white-on-dark, for the stone and ink cards. On a light
   ground it disappears entirely, so light placements ask for this. */
.placeholder-flag.on-light{background:rgba(20,20,19,.05);color:var(--text);
  border:1px solid var(--line-2)}
.partner-line{display:flex;flex-direction:column;gap:10px;padding-top:14px;
  border-top:1px solid var(--line)}

/* --- photographic configurator options and live assembly --- */
@media (max-width:620px){
}

/* --- configurator: the reveal --- */
.cfg-result{display:grid;gap:16px;animation:step-in .3s var(--ease)}
@media (min-width:820px){ .cfg-result{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (prefers-reduced-motion:reduce){ .cfg-result{animation:none} }
.cfg-result .cfg-card{padding:clamp(24px,3vw,32px)}
.cfg-result .price-readout b{font-size:clamp(40px,5vw,52px)}

.cfg-teaser{border-style:dashed;background:var(--bg-2);gap:11px;padding:20px 22px}
.teaser-meter{display:flex;gap:5px;margin-top:2px}
.teaser-meter i{flex:1;height:4px;border-radius:var(--r-pill);background:var(--line-2);
  transition:background .25s var(--ease)}
.teaser-meter i.on{background:var(--ink)}

.cfg-redo{display:flex;flex-direction:column;gap:12px;align-items:flex-start}

/* ============================================================
   IMPLEMENTATION TIMELINE
   The two durations are wildly different, so the segments are sized
   in proportion: the picture carries the point before the labels do.
   ============================================================ */
.timeline{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
  padding:clamp(26px,3.4vw,40px)}

/* The rail fills on an EASED curve, so a dot's delay is not its percentage
   times the duration. cubic-bezier(.22,.7,.3,1) is heavily front-loaded: the
   fill passes 82% at 37% of its running time, not 82% of it. The dots used to
   carry hand-guessed delays and drifted badly out of sync with the line —
   "On site" appeared 0.8s after the line had already gone past it, and "Live"
   popped 0.1s before the line arrived.

   Delays below are solved from the curve, not estimated. If you change the
   duration, the delay or the easing, re-solve them; scripts/timeline-sync.mjs
   prints the numbers. Do not nudge them by eye. */
.tl-rail{position:relative;height:10px;margin:6px 0 0;
  --tl-delay:.15s;--tl-dur:2.1s;--tl-ease:cubic-bezier(.22,.7,.3,1)}
.tl-track{position:absolute;inset:0;border-radius:var(--r-pill);background:var(--chip)}
.tl-fill{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--stone),var(--ink));
  transition:width var(--tl-dur) var(--tl-ease) var(--tl-delay)}
.timeline.in .tl-fill{width:100%}
.tl-dot{position:absolute;top:50%;left:var(--at);width:19px;height:19px;border-radius:50%;
  background:#fff;border:2.5px solid var(--ink);transform:translate(-50%,-50%) scale(0);
  transition:transform .45s cubic-bezier(.34,1.4,.64,1) var(--d,0s)}
.timeline.in .tl-dot{transform:translate(-50%,-50%) scale(1)}
.tl-dot.is-end{background:var(--ink)}

/* labels are pinned to the same percentages as the dots, so they cannot drift */
.tl-marks{position:relative;height:20px;margin-top:12px;font-size:13.5px;
  color:var(--muted-2);font-family:var(--font-head);letter-spacing:.03em}
.tl-marks span{position:absolute;top:0;left:var(--at);white-space:nowrap}
.tl-marks span[data-align="start"]{transform:none}
.tl-marks span[data-align="mid"]{transform:translateX(-50%)}
.tl-marks span[data-align="end"]{transform:translateX(-100%)}

.tl-phases{display:flex;gap:14px;margin-top:26px}
.tl-phase{flex:var(--span);min-width:0;padding:20px 22px;border-radius:var(--r);
  background:var(--bg-2);display:flex;flex-direction:column;gap:7px;
  opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease) var(--d,0s),transform .6s var(--ease) var(--d,0s)}
.timeline.in .tl-phase{opacity:1;transform:none}
.tl-phase.is-fast{background:var(--ink);color:#fff}
.tl-dur{font-family:var(--font-head);font-size:clamp(26px,3vw,34px);font-weight:500;
  letter-spacing:-.025em;line-height:1}
.tl-name{font-size:17px;font-weight:500}
.tl-note{font-size:14px;line-height:1.45;color:var(--muted)}
.tl-phase.is-fast .tl-note{color:rgba(255,255,255,.62)}

.tl-foot{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;
  margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.tl-foot p{font-size:15px;color:var(--muted-2);max-width:64ch}

@media (max-width:760px){
  .tl-rail,.tl-marks{display:none}
  .tl-phases{flex-direction:column;gap:12px}
  .tl-phase{flex:none}
}

/* ======================= NEWSROOM + ARTICLES ======================= */
/* the byline row under an article title: values separated by hairline
   slashes, the same device the page-head stat chips use */
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  font-size:14px;letter-spacing:.02em;color:var(--muted-2)}
.article-meta span[aria-hidden]{color:var(--line-2)}

.back-link .ico{transform:rotate(180deg)}
.back-link:hover .ico{transform:rotate(180deg) translateX(4px)}

/* long-form body. Narrower measure than the rest of the site on purpose:
   these are the only pages anyone reads straight through. */
.prose{display:flex;flex-direction:column;gap:20px;max-width:74ch}
.prose > h2{font-family:var(--font-head);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(23px,2.5vw,31px);line-height:1.18;margin-top:clamp(20px,2.6vw,32px)}
.prose > h2 em{font-family:var(--font-accent);font-style:italic;font-weight:400}
.prose > h3{font-family:var(--font-head);font-weight:500;letter-spacing:-.01em;
  font-size:clamp(17px,1.5vw,20px);line-height:1.3;margin-top:8px}
.prose > p{font-size:clamp(16px,1.15vw,17.5px);line-height:1.68;color:var(--muted)}
.prose > p.lead-in{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--text)}
.prose strong{color:var(--text);font-weight:500}
.prose a{color:var(--text);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--line-2);transition:text-decoration-color .18s var(--ease)}
.prose a:hover{text-decoration-color:var(--text)}
.prose > ul{display:flex;flex-direction:column;gap:11px;margin:2px 0;padding-left:0;list-style:none}
.prose > ul > li{position:relative;padding-left:24px;
  font-size:clamp(15.5px,1.1vw,17px);line-height:1.62;color:var(--muted)}
.prose > ul > li::before{content:"";position:absolute;left:5px;top:.72em;
  width:6px;height:6px;border-radius:50%;background:var(--stone)}

/* a figure lifted out of the flow, so the number is read before the sentence */
.figure-note{display:flex;gap:clamp(16px,2vw,26px);align-items:flex-start;
  background:var(--tint);border-radius:var(--r);padding:clamp(22px,3vw,30px);margin:clamp(6px,1vw,12px) 0}
.figure-note b{font-family:var(--font-head);font-weight:500;letter-spacing:-.03em;
  font-size:clamp(30px,4vw,46px);line-height:.95;flex:none}
.figure-note p{font-size:15.5px;line-height:1.6;color:var(--muted);margin:0}
@media (max-width:560px){.figure-note{flex-direction:column;gap:12px}}

.src-list{display:flex;flex-direction:column;gap:10px;padding-left:0;list-style:none}
.src-list a{font-size:15px;line-height:1.5;color:var(--muted);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--line-2);word-break:break-word}
.src-list a:hover{color:var(--text);text-decoration-color:var(--text)}

/* index cards. The lead story spans the row; the rest sit three-up. */
/* auto-fit cannot be used here: the lead card spans every track, so no track is
   ever empty and none collapse. The column count is passed in from the page. */
.news-grid{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:20px}
@media (max-width:980px){.news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:660px){.news-grid{grid-template-columns:1fr}}
.news-lead-go{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-2);color:var(--text);transition:background .2s var(--ease),color .2s var(--ease)}
.news-card.is-lead:hover .news-lead-go{background:var(--ink);color:#fff;border-color:var(--ink)}
.news-lead-go .ico{width:18px;height:18px}
@media (max-width:860px){.news-lead-go{display:none}}
.news-card{display:flex;flex-direction:column;gap:12px;height:100%;
  border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.6vw,28px);
  background:var(--bg);transition:border-color .2s var(--ease),transform .2s var(--ease)}
.news-card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.news-card .t-h4{letter-spacing:-.01em}
.news-card p{font-size:15px;line-height:1.6;color:var(--muted)}
.news-card .article-meta{margin-top:auto;padding-top:6px}
.news-kind{display:inline-flex;align-items:center;align-self:flex-start;gap:7px;
  height:26px;padding-inline:11px;border-radius:var(--r-pill);background:var(--chip);
  font-size:11.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.news-kind .ico{width:13px;height:13px}
.news-card.is-lead{grid-column:1/-1;flex-direction:row;align-items:center;gap:clamp(24px,4vw,56px);
  background:var(--tint);border-color:transparent;padding:clamp(26px,3.4vw,40px)}
.news-card.is-lead > div{display:flex;flex-direction:column;gap:13px;flex:1}
.news-card.is-lead .t-h4{font-size:clamp(21px,2.3vw,29px);line-height:1.2}
.news-card.is-lead p{font-size:clamp(15.5px,1.15vw,17px);max-width:60ch}
@media (max-width:860px){.news-card.is-lead{flex-direction:column;align-items:flex-start}}

/* the press shelf is empty until there is real coverage to put on it */
.empty-shelf{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
  border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:clamp(40px,6vw,72px) clamp(24px,4vw,48px)}
.empty-shelf .ico-chip{margin-bottom:2px}
.empty-shelf p{max-width:56ch}

/* about: a segment row is image beside copy, stacking under 760px. Kept as a
   class rather than inline styles so the breakpoint can actually win. */
.seg-row{flex-direction:row;align-items:center;gap:clamp(22px,3.4vw,44px);padding:clamp(20px,2.4vw,26px)}
.seg-img{flex:0 0 clamp(180px,26%,320px);margin:0}
@media (max-width:760px){
  .seg-row{flex-direction:column;align-items:stretch;gap:18px}
  .seg-img{flex:none;width:100%}
}

/* configurator: option B ends on its call to action, matching option A's
   margin-top:auto button. The whole group moves, sign-in included. */
.cfg-foot{display:flex;flex-direction:column;gap:16px;margin-top:auto;padding-top:16px}
.cfg-foot .partner-line{margin-top:0}

/* Three real names do not scroll. A marquee repeating the same three past the
   viewport reads as padding and implies a longer list than there is. */
.partner-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(24px,5vw,72px)}
.partner-row span{font-family:var(--font-head);font-weight:500;letter-spacing:-.01em;
  font-size:clamp(19px,2.1vw,27px);color:var(--muted);white-space:nowrap;
  transition:color .2s var(--ease)}
.partner-row span:hover{color:var(--text)}

/* form feedback. The honeypot is a real field a person never sees and a bot fills. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{font-size:15px;line-height:1.5;text-align:center;min-height:1.2em;margin:0}
.form-status.is-pending{color:var(--muted)}
.form-status.is-success{color:var(--text);font-weight:500}
.form-status.is-error{color:#A3402F}

/* ============================================================
   SERVER-RENDERED PAGES  (/guides, /compare, /solutions)

   Those pages are generated by the [slug].js functions and carry the class names
   the previous design used. Rather than rewrite three generators and risk the
   copy, the old class names are given new-design clothes here. Anything added
   to those generators from now on should use the main vocabulary above; this
   block exists to stop the site having two looks, not to be extended.
   ============================================================ */

/* the old icon class: without this the sprite paths render as filled black
   blobs, because the shape data assumes a stroke-only style */
.ic-svg{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.15em}
.ic-svg.ic-sm{width:.9em;height:.9em}

/* the old reveal system has no observer in lentra.js: content stays visible */
.reveal{opacity:1;transform:none}

.section-sm{padding-block:clamp(40px,5vw,72px)}
.resource-narrow{max-width:calc(980px + var(--gutter) * 2)}

.breadcrumbs,.crumbs,nav[aria-label="Breadcrumb"]{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:13px;color:var(--muted-2);padding-top:clamp(24px,3vw,36px)}
.crumbs a{color:var(--muted);transition:color .18s var(--ease)}
.crumbs a:hover{color:var(--text)}
.crumbs span[aria-hidden]{color:var(--line-2)}
.breadcrumbs a,.crumbs a{color:var(--muted)}
.eyebrow{display:block;font-size:12px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:14px}
.eyebrow-c{text-align:center}
.gold{color:var(--stone-dark)}

.hero.resource-hero{padding-block:clamp(48px,6vw,88px) clamp(28px,4vw,48px)}
.resource-hero h1{font-family:var(--font-head);font-weight:500;letter-spacing:-.03em;
  font-size:clamp(34px,5vw,58px);line-height:1.04;text-wrap:balance;max-width:19ch}
.resource-hero .lead,.lead{font-size:clamp(17px,1.5vw,21px);line-height:1.5;
  color:var(--muted);max-width:62ch;margin-top:18px}
.hero-grid{display:flex;flex-direction:column;gap:18px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.meta-row{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:20px;
  font-size:14px;color:var(--muted-2)}

/* the old gold button is this design's ink button */
.btn-gold{background:var(--ink);color:var(--on-dark);border:1px solid var(--ink)}
.btn-gold:hover{background:#000}
.btn-lg{height:60px;padding-inline:32px}
.btn .arrow,.arrow{font-size:1em;line-height:1}

.grid-3{display:grid;gap:24px;grid-template-columns:1fr}
@media (min-width:900px){ .grid-3{grid-template-columns:repeat(3,1fr)} }

.resource-card{display:flex;flex-direction:column;gap:12px;height:100%;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg);
  padding:clamp(22px,2.6vw,30px);transition:border-color .2s var(--ease)}
.resource-card:hover{border-color:var(--line-2)}
.resource-card h2,.resource-card h3{font-family:var(--font-head);font-weight:500;
  letter-spacing:-.01em;font-size:19px;line-height:1.25}
.resource-card p{font-size:15px;line-height:1.6;color:var(--muted)}
.resource-label{align-self:flex-start;display:inline-flex;height:26px;align-items:center;
  padding-inline:11px;border-radius:var(--r-pill);background:var(--chip);
  font-size:11.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

.contrast-2{display:grid;gap:24px;grid-template-columns:1fr}
@media (min-width:860px){ .contrast-2{grid-template-columns:repeat(2,1fr)} }
.contrast-2 > *{border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,2.6vw,30px);background:var(--bg)}
.contrast-2 .is-lentra{background:var(--stone);border-color:transparent;color:var(--on-dark)}
.contrast-2 .is-lentra h2,.contrast-2 .is-lentra h3,.contrast-2 .is-lentra li{color:var(--on-dark)}
.contrast-2 .is-lentra p{color:rgba(255,255,255,.82)}

.verdict{background:var(--tint);border-radius:var(--r);padding:clamp(26px,3.4vw,40px);
  margin-top:clamp(24px,3vw,36px)}
.verdict h2{font-family:var(--font-head);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(21px,2.2vw,27px);line-height:1.2;margin-bottom:12px}
.verdict p{font-size:16px;line-height:1.65;color:var(--muted);max-width:74ch}

.comparison-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r)}
.comparison-table{width:100%;border-collapse:collapse;min-width:640px;font-size:15px}
.comparison-table th,.comparison-table td{text-align:left;padding:15px 18px;
  border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.comparison-table thead th{font-weight:500;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-2);background:var(--bg-2)}
.comparison-table tbody tr:last-child td{border-bottom:0}
.comparison-table .lbl{font-weight:500;color:var(--text)}
.comparison-table .row-lentra,.comparison-table tr.is-lentra{background:var(--tint)}
.comparison-table .row-lentra td{color:var(--text)}

.resource-faqs{display:flex;flex-direction:column;gap:0;
  border-top:1px solid var(--line)}
.resource-faq{border-bottom:1px solid var(--line);padding-block:22px}
.resource-faq h3{font-family:var(--font-head);font-weight:500;font-size:18px;
  line-height:1.3;margin-bottom:8px}
.resource-faq p{font-size:15.5px;line-height:1.62;color:var(--muted);max-width:78ch}

/* placeholder media block from the old design */
/* a decorative empty block in the old design. It has nothing to show, so it
   shows nothing rather than a grey rectangle the size of a phone. */
.ph{display:none}

/* long-form layout used by article() in functions/_shell.js */
.article-layout{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:1fr;align-items:start}
@media (min-width:1000px){ .article-layout{grid-template-columns:230px minmax(0,1fr)} }
.article-toc{position:sticky;top:96px;font-size:14.5px}
@media (max-width:999px){ .article-toc{position:static} }
.toc-title{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:12px}
.article-toc ol{list-style:none;padding:0;display:flex;flex-direction:column;gap:9px;
  border-left:1px solid var(--line);padding-left:16px}
.article-toc a{color:var(--muted);line-height:1.4;transition:color .18s var(--ease)}
.article-toc a:hover{color:var(--text)}
.article-body{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,30px);max-width:74ch}
.article-body h2{font-family:var(--font-head);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(22px,2.4vw,30px);line-height:1.18;scroll-margin-top:96px}
.article-body p{font-size:clamp(16px,1.15vw,17.5px);line-height:1.68;color:var(--muted)}
.article-body section{display:flex;flex-direction:column;gap:12px}

/* glossary: a definition list that reads as a two-column reference at width and
   stacks to term-above-definition on a phone */
.glossary{display:flex;flex-direction:column;gap:0;margin:0;border-top:1px solid var(--line)}
.glossary-item{display:grid;grid-template-columns:1fr;gap:6px;
  padding-block:clamp(16px,2vw,20px);border-bottom:1px solid var(--line);scroll-margin-top:96px}
@media (min-width:820px){ .glossary-item{grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:clamp(24px,4vw,56px)} }
.glossary-item dt{font-family:var(--font-head);font-weight:500;letter-spacing:-.01em;
  font-size:17px;line-height:1.3;color:var(--text)}
.glossary-item dd{margin:0;font-size:15.5px;line-height:1.62;color:var(--muted);max-width:72ch}
.glossary-item:target dt{color:var(--stone-dark)}
a.tag{text-decoration:none}
a.tag:hover{background:var(--line);color:var(--text)}

/* pull quotes from real people, with the source attached rather than implied */
.quote-grid{display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:900px){ .quote-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.quote-card{margin:0;display:flex;flex-direction:column;gap:14px;height:100%;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,3vw,32px)}
.quote-card blockquote{margin:0;position:relative}
.quote-card blockquote p{font-family:var(--font-head);font-weight:400;letter-spacing:-.01em;
  font-size:clamp(17px,1.5vw,19.5px);line-height:1.5;color:var(--text);margin:0}
.quote-card blockquote em{font-family:var(--font-accent);font-style:italic}
.quote-gist{font-family:var(--font-head);font-weight:400;letter-spacing:-.01em;
  font-size:clamp(17px,1.5vw,19.5px);line-height:1.5;color:var(--text);margin:0}
.quote-card .quote-gist + blockquote{padding-left:16px;border-left:2px solid var(--line-2)}
.quote-card .quote-gist + blockquote p{font-family:var(--font-accent);font-style:italic;
  font-size:clamp(16px,1.35vw,18px);color:var(--muted)}
.quote-card figcaption a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.quote-card figcaption a .ico{width:13px;height:13px;flex:none}
.quote-note{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0;
  padding-left:14px;border-left:2px solid var(--line)}
.quote-card figcaption{margin-top:auto;padding-top:6px;display:flex;flex-wrap:wrap;
  align-items:center;gap:10px;font-size:14px}
.quote-who{font-weight:500;color:var(--text)}
.quote-who::before{content:"";display:inline-block;width:22px;height:1px;
  background:var(--line-2);margin-right:10px;vertical-align:middle}
.quote-card figcaption a{color:var(--muted);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--line-2)}
.quote-card figcaption a:hover{color:var(--text)}

/* round-up: numbered option list on /compare/alternatives */
.ru-grid{display:flex;flex-direction:column}
.ru-item{display:flex;gap:clamp(16px,2.5vw,34px);align-items:flex-start;
  padding-block:clamp(30px,4vw,44px);border-top:1px solid var(--line)}
.ru-item:last-child{border-bottom:1px solid var(--line)}
.ru-rank{flex:none;font-family:var(--font-head);font-size:13px;letter-spacing:.14em;
  color:var(--muted-2);padding-top:8px;width:34px}
.ru-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}
.ru-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.ru-head .t-h3{margin:0}
.ru-ours{display:inline-block;font-family:var(--font-body);font-size:12px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;vertical-align:middle;
  padding:4px 10px;border-radius:var(--r-pill);background:var(--ink);color:#fff}
.ru-best{margin:0;font-size:17px;line-height:1.55;color:var(--text)}
.ru-best strong{font-weight:500}
.ru-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.ru-list>li{position:relative;padding-left:20px;font-size:15.5px;line-height:1.6;color:var(--muted)}
.ru-list>li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1.5px;
  background:var(--stone);border-radius:2px}
.ru-list-minus>li::before{background:var(--line-2)}
.ru-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding-top:4px}
.ru-src{font-size:13.5px;color:var(--muted-2)}
.ru-src a{color:var(--muted);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line-2)}
.ru-src a:hover{color:var(--text)}
@media (max-width:719px){
  .ru-item{flex-direction:column;gap:10px}
  .ru-rank{padding-top:0;width:auto}
}

/* resources: a plain index of everything, closer to a contents page than a
   grid of cards. Cards invite skimming; this is meant to be scanned for a link. */
.lib-col{display:flex;flex-direction:column}
.lib-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;
  border-top:1px solid var(--line)}
.lib-list li{border-bottom:1px solid var(--line)}
.lib-list a{display:block;padding-block:11px;font-size:15.5px;line-height:1.45;
  color:var(--muted);transition:color .18s var(--ease),padding-left .18s var(--ease)}
.lib-list a:hover{color:var(--text);padding-left:6px}