@charset "utf-8";
/* ==========================================================================
   Cudivo — cudivo.com · visual system v2 (founder premium pass, 2026-09-11)
   Colour tokens, type roles and radii are transcribed from
   mobile/src/theme/tokens.ts (Visual Freeze v1.2). No second palette, no second
   type scale, no radius outside the four below.
   CSP: this file is the only style source. No inline style attributes anywhere.
   ========================================================================== */

/* ---------- Fonts (self-hosted; no third-party CDN, no Google Fonts) ------ */
@font-face{font-family:Fraunces;font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/fraunces-500.woff2) format("woff2")}
@font-face{font-family:Fraunces;font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/fraunces-600.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/dmsans-400.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/dmsans-500.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/dmsans-600.woff2) format("woff2")}

/* ---------- Tokens -------------------------------------------------------- */
:root{
  --bg:#F4F1EA;          /* canvas / limestone */
  --surface:#FBF9F5;     /* paper */
  --deep:#E8E4DB;        /* elevated / inset */
  --ink:#181816;
  --muted:#56544F;
  --line:#C7C0B1;        /* control border, 1px */
  --rule:#DCD6C8;        /* editorial hairline */
  --accent:#304E43;      /* Guardian Green */
  --accent-pressed:#263E36;
  --accent-soft:#E3EAE5;
  --warn:#8A5A1F;
  --on-accent:#FBF9F5;
  --bar-spent:#304E43;
  --bar-committed:#7A8F86;
  --bar-free:#D4CFC4;

  /* radius — four values only. Photographs 8, buttons 10, app plates 16, pills 999 */
  --r-control:8px;
  --r-button:10px;
  --r-sheet:16px;
  --r-pill:999px;

  --gutter:clamp(22px,5vw,64px);
  --measure:1200px;
  --section-y:clamp(80px,9.5vw,152px);
  --hair:1px;

  --serif:Fraunces,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --t-h2:clamp(1.7rem,1.12rem + 2.5vw,3rem);
  --t-h3:clamp(1.25rem,1.08rem + 0.62vw,1.5rem);
  --t-lead:clamp(1.06rem,1rem + 0.42vw,1.3rem);
  --t-body:1.0625rem;   /* 17px — canonical body */
  --t-helper:0.9375rem; /* 15px */
  --t-caption:0.875rem; /* 14px */
  --t-label:0.6875rem;  /* 11px */

  --plate-w:420px;
  color-scheme:light;
}

p,h1,h2,h3,li,figcaption,summary,a,cite{overflow-wrap:break-word}
/* no single word alone on a last line, in any language */
p,li,figcaption,cite,.ix-body{text-wrap:pretty}
.doc-block p,.trust-item p,.why-body,.body,.helper,.ix-body,.faq-item p{hyphens:auto}

/* ---------- Reset --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:var(--t-body);font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
[id]{scroll-margin-top:24px}

/* ---------- Focus --------------------------------------------------------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.skip{
  position:absolute;left:var(--gutter);top:-100px;z-index:99;
  background:var(--accent);color:var(--on-accent);
  padding:12px 18px;border-radius:var(--r-button);
  font-size:var(--t-helper);font-weight:500;text-decoration:none;
  transition:top .18s ease-out;
}
.skip:focus{top:14px}

/* ---------- Layout helpers ------------------------------------------------ */
.wrap{width:100%;max-width:var(--measure);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.band-surface{background:var(--surface)}
.band-soft{background:var(--accent-soft)}
.rule-top{border-top:var(--hair) solid var(--rule)}

/* ---------- Type roles ---------------------------------------------------- */
.label{
  font-family:var(--sans);font-size:var(--t-label);font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
  margin:0 0 clamp(18px,2.2vw,28px);display:flex;align-items:baseline;gap:12px;
}
.label-n{color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:.08em}
.h2{
  font-family:var(--serif);font-weight:600;font-size:var(--t-h2);
  line-height:1.12;letter-spacing:-.008em;margin:0;text-wrap:balance;
}
.h3{font-family:var(--serif);font-weight:600;font-size:var(--t-h3);line-height:1.25;margin:0}
.lead{font-size:var(--t-lead);line-height:1.52;color:var(--ink);text-wrap:pretty}
.body{font-size:var(--t-body);line-height:1.62;color:var(--muted);text-wrap:pretty}
.helper{font-size:var(--t-helper);line-height:1.5;color:var(--muted)}
.caption{font-size:var(--t-caption);line-height:1.45;color:var(--muted);margin-top:12px;text-wrap:pretty}
.measure-lead{max-width:30ch}
.measure-body{max-width:58ch}

/* ---------- Header -------------------------------------------------------- */
.site-head{padding-block:clamp(14px,2vw,24px);position:relative;z-index:20}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;min-height:44px}
.brand svg{width:26px;height:26px;flex:none;display:block}
.brand span{font-family:var(--serif);font-weight:600;font-size:1.28rem;letter-spacing:-.005em;line-height:1}
.head-nav{display:flex;align-items:center;gap:clamp(12px,2vw,26px);margin-left:auto}
.head-link{
  position:relative;font-size:var(--t-helper);color:var(--muted);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;padding:0 4px;
  transition:color .18s ease-out;
}
.head-link::after{
  content:"";position:absolute;left:4px;right:4px;bottom:11px;height:var(--hair);
  background:transparent;transition:background-color .18s ease-out;
}
.head-link:hover{color:var(--ink)}
.head-link:hover::after{background:var(--line)}

.lang{position:relative}
.lang>summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  font-size:var(--t-helper);color:var(--muted);
  padding:0 15px;border:var(--hair) solid var(--line);border-radius:var(--r-pill);
  transition:color .18s ease-out,border-color .18s ease-out;min-height:44px;
}
.lang>summary::-webkit-details-marker{display:none}
.lang>summary:hover{color:var(--ink);border-color:var(--muted)}
.lang>summary svg{width:9px;height:6px;flex:none;transition:transform .2s ease-out}
.lang[open]>summary svg{transform:rotate(180deg)}
.lang-short{display:none}
.lang-menu{
  position:absolute;right:0;top:calc(100% + 8px);min-width:212px;
  background:var(--surface);border:var(--hair) solid var(--rule);
  border-radius:var(--r-sheet);padding:7px;
  box-shadow:0 12px 34px -18px rgba(24,24,22,.28);
}
.lang-menu a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 13px;border-radius:var(--r-control);
  font-size:var(--t-helper);text-decoration:none;color:var(--ink);min-height:44px;
}
.lang-menu a:hover{background:var(--accent-soft)}
.lang-menu a[aria-current=true]{color:var(--accent);font-weight:500}
.lang-menu .cl{color:var(--muted);font-size:var(--t-caption)}
.lang-menu .tick{color:var(--accent);display:inline-flex}
.lang-menu .tick svg{width:12px;height:9px}
@media (max-width:479px){
  .lang-full{display:none}
  .lang-short{display:inline}
  .lang>summary{padding-inline:12px}
}
@media (max-width:359px){
  :root{--gutter:18px}
  .brand span{font-size:1.15rem}
  .head-nav{gap:8px}
}

/* ---------- Buttons ------------------------------------------------------- */
/* One box for every locale: the button is the column's width, capped at 420 px.
   Label length never changes its geometry. */
.btn{
  display:flex;align-items:center;justify-content:center;
  min-height:56px;padding:15px clamp(14px,4vw,28px);border-radius:var(--r-button);
  font-size:var(--t-body);font-weight:600;line-height:1.2;letter-spacing:.005em;
  text-decoration:none;border:var(--hair) solid transparent;
  width:100%;max-width:420px;text-align:center;
  transition:background-color .18s ease-out,border-color .18s ease-out;
}
.btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
a.btn-primary:hover{background:var(--accent-pressed);border-color:var(--accent-pressed)}
.link-quiet{
  display:inline-flex;align-items:center;gap:7px;min-height:44px;
  font-size:var(--t-helper);color:var(--accent);text-decoration:none;font-weight:500;
  background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;
  background-size:0 1px;background-position:0 calc(100% - 11px);
  transition:background-size .2s ease-out;
}
.link-quiet:hover{background-size:100% 1px}
.link-quiet .chev{font-size:1.05em;line-height:1;transform:translateY(-.5px)}

/* ==========================================================================
   HERO — the frozen app hero, set as a web spread.
   Same photograph (welcome portrait/landscape), same wordmark, same Fraunces
   headline in ink, same filled Guardian Green CTA, text link and privacy line.
   ========================================================================== */
.hero{position:relative;background:var(--bg)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr)}
.hero-photo{position:relative;margin:0;background:var(--deep);overflow:hidden}
.hero-photo picture,.hero-photo img{display:block;width:100%;height:100%}
.hero-photo img{object-fit:cover}
.hero-panel{display:flex;padding:clamp(30px,6vw,56px) var(--gutter) clamp(52px,8vw,84px)}
.hero-inner{display:flex;flex-direction:column;width:100%;max-width:520px;container-type:inline-size}
.hero-wordmark{
  display:none;font-family:var(--serif);font-weight:600;letter-spacing:-.012em;
  line-height:1;color:var(--ink);margin-bottom:clamp(20px,2.2vw,30px);
}
/* Headline: sized against its own column. 7.9cqi is the measured maximum at which the
   widest first line in the set (DE "Du baust. Du renovierst.", Fraunces 600) still
   fits, so every locale holds exactly two lines at every width. */
.display{
  font-family:var(--serif);font-weight:600;line-height:1.1;letter-spacing:-.012em;margin:0;
  font-size:clamp(1.5rem,7.9cqi,2.8rem);
}
.display .beat-3{display:block}
.hero-sub{
  margin-top:clamp(16px,2vw,22px);font-size:var(--t-lead);line-height:1.5;
  color:var(--muted);max-width:40ch;text-wrap:pretty;
}
.hero-actions{margin-top:clamp(26px,3vw,36px);display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.hero-privacy{margin-top:clamp(14px,1.8vw,20px);font-size:var(--t-caption);color:var(--muted);text-wrap:balance}

/* phone + tablet: header on cream, photo band, then the panel */
@media (max-width:1023.98px){
  .hero-photo{aspect-ratio:3/2}
  .hero-photo img{object-position:58% 50%}
}
@media (min-width:640px) and (max-width:1023.98px){
  .hero-photo{aspect-ratio:16/9}
  .hero-panel{padding-top:48px}
}

/* desktop: edge-to-edge 56 / 44 spread, header lives on the cream panel */
@media (min-width:1024px){
  .page-index .site-head{position:absolute;top:0;left:56%;right:0;padding-block:clamp(18px,2vw,28px)}
  .page-index .site-head .wrap{max-width:none;padding-inline:clamp(40px,4.4vw,76px)}
  .page-index .site-head .brand{display:none}
  .hero-grid{grid-template-columns:56fr 44fr;min-height:clamp(640px,100svh,1000px)}
  .hero-photo{height:100%}
  .hero-photo img{position:absolute;inset:0;object-position:36% 58%}
  .hero-panel{align-items:center;padding:92px clamp(40px,4.4vw,76px) 116px}
  .hero-wordmark{display:block;font-size:clamp(3rem,13.4cqi,4.1rem)}
}
/* very wide screens: the spread stops growing so the 660 px photograph is never
   stretched past ~1.6x; the canvas continues on both sides */
@media (min-width:1921px){
  .hero-grid{max-width:1920px;margin-inline:auto}
  .page-index .site-head{left:calc(50% - 960px + 1075px);right:calc(50% - 960px)}
}

/* ---------- Why + chapter index ------------------------------------------- */
.why-grid{display:grid;gap:clamp(22px,4vw,64px)}
@media (min-width:1100px){.why-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:start}}
.why-body{font-size:var(--t-lead);line-height:1.62;color:var(--muted);max-width:52ch;text-wrap:pretty}
.index{margin-top:clamp(52px,6vw,88px)}
.index ol{display:grid;grid-template-columns:minmax(0,1fr);border-top:var(--hair) solid var(--rule)}
.index li{border-bottom:var(--hair) solid var(--rule)}
.index a{
  display:grid;grid-template-columns:2.4em minmax(0,1fr);column-gap:10px;row-gap:4px;
  padding:18px 0;text-decoration:none;min-height:44px;
}
.ix-num{grid-row:span 2;font-size:var(--t-label);font-weight:500;letter-spacing:.08em;
  color:var(--accent);font-variant-numeric:tabular-nums;padding-top:.45em}
.ix-title{font-family:var(--serif);font-weight:600;font-size:1.2rem;line-height:1.25;color:var(--ink)}
.ix-body{font-size:var(--t-helper);line-height:1.5;color:var(--muted)}
.index a:hover .ix-title{color:var(--accent)}
@media (min-width:860px){
  .index ol{grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:var(--hair) solid var(--rule)}
  .index li{border-bottom:0;border-left:var(--hair) solid var(--rule)}
  .index li:first-child{border-left:0}
  .index a{display:flex;flex-direction:column;gap:8px;padding:24px clamp(18px,2vw,28px) 26px;height:100%}
  .index li:first-child a{padding-left:0}
  .index li:last-child a{padding-right:0}
  .ix-num{padding-top:0}
}

/* ---------- Chapter split: copy + app plate ------------------------------- */
.split{display:grid;gap:clamp(40px,5vw,80px);align-items:center}
@media (min-width:960px){
  .split{grid-template-columns:minmax(0,1fr) var(--plate-w)}
  .split.flip{grid-template-columns:var(--plate-w) minmax(0,1fr)}
  .split.flip>.split-copy{order:2}
}
.split-copy>*+*{margin-top:clamp(18px,2vw,24px)}
.split-copy>.label{margin-bottom:0}
.split-copy>.label+.h2{margin-top:clamp(18px,2.2vw,28px)}

/* App plate: the real screen, status bar and tab bar cropped away. Not a phone
   mockup — a document of the product, at a size where its text is readable. */
.plate{margin:0;width:100%;max-width:var(--plate-w);justify-self:center}
.plate img{
  width:100%;border-radius:var(--r-sheet);background:var(--surface);
  border:var(--hair) solid rgba(24,24,22,.08);
  box-shadow:0 1px 0 rgba(24,24,22,.03),0 22px 48px -32px rgba(24,24,22,.30);
}

/* ---------- 01 Money bar (rendered from the market's own split) ----------- */
.moneybar{margin-top:clamp(28px,3vw,38px)}
.moneybar-track{
  display:flex;height:10px;border-radius:var(--r-pill);overflow:hidden;background:var(--bar-free);
}
.moneybar-track i{display:block;height:100%}
.seg-spent{background:var(--bar-spent)}
.seg-committed{background:var(--bar-committed)}
.seg-free{background:var(--bar-free)}
.moneybar-track[data-split="64-7-29"] .seg-spent{width:64%}
.moneybar-track[data-split="64-7-29"] .seg-committed{width:7%}
.moneybar-track[data-split="64-7-29"] .seg-free{width:29%}
.moneybar-track[data-split="65-7-28"] .seg-spent{width:65%}
.moneybar-track[data-split="65-7-28"] .seg-committed{width:7%}
.moneybar-track[data-split="65-7-28"] .seg-free{width:28%}
.moneybar-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px}
.moneybar-legend li{text-align:center;padding-inline:6px;border-left:var(--hair) solid var(--rule)}
.moneybar-legend li:first-child{border-left:0}
.moneybar-legend .k{display:block;font-size:var(--t-label);font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.moneybar-legend .v{display:block;margin-top:7px;font-family:var(--serif);font-weight:500;font-size:1.25rem;font-variant-numeric:tabular-nums;color:var(--ink)}
.moneybar-legend .u{display:block;margin-top:2px;font-size:var(--t-caption);color:var(--muted)}

.pullquote{padding-left:clamp(18px,2vw,24px);border-left:2px solid var(--accent)}
.split-copy>.pullquote{margin-top:clamp(30px,3.4vw,42px)}
.pullquote p{font-family:var(--serif);font-weight:500;font-size:var(--t-h3);line-height:1.34;color:var(--ink);text-wrap:balance}
.pullquote cite{display:block;margin-top:10px;font-style:normal;font-size:var(--t-caption);color:var(--muted)}

/* ---------- 02 Stage rail -------------------------------------------------- */
.rail{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(16px,2.4vw,32px);
  border-top:var(--hair) solid var(--rule);
}
.split-copy>.rail{margin-top:clamp(28px,3vw,38px)}
.rail li{
  display:flex;align-items:baseline;gap:10px;min-height:44px;
  padding:11px 0;border-bottom:var(--hair) solid var(--rule);
}
.rail-n{font-size:var(--t-label);font-weight:500;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--muted);flex:none;width:1.9em}
.rail-name{font-size:var(--t-caption);line-height:1.35;color:var(--ink);min-width:0;flex:1 1 auto;hyphens:auto}
.rail .is-after .rail-name{color:var(--muted)}
.rail .is-now .rail-n,.rail .is-now .rail-name{color:var(--accent);font-weight:600}
.rail-now{
  flex:none;margin-left:auto;align-self:center;
  font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1;
  color:var(--accent);border:var(--hair) solid rgba(48,78,67,.35);border-radius:var(--r-pill);padding:4px 8px;
}
/* rail order: fill column 1 with 01–06, column 2 with 07–12 */
@media (min-width:480px){.rail{grid-auto-flow:column;grid-template-rows:repeat(6,auto)}}
@media (max-width:479.98px){.rail{grid-template-columns:minmax(0,1fr)}}

/* ---------- 03 What disappears: 07 -> 09 -> 11 ---------------------------- */
.memory-head .h2{margin-top:clamp(18px,2.2vw,28px)}
.memory-head .label{margin-bottom:0}
.story{display:grid;gap:clamp(14px,1.6vw,22px);grid-template-columns:minmax(0,1fr);margin-top:clamp(40px,4.6vw,64px)}
.story-frame{margin:0;position:relative}
.story-frame img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-control);background:var(--deep)}
.story-frame figcaption{display:flex;align-items:baseline;gap:10px;margin-top:12px}
.stage-n{font-size:var(--t-label);font-weight:500;letter-spacing:.08em;color:var(--accent);font-variant-numeric:tabular-nums}
.stage-name{font-size:var(--t-caption);color:var(--ink)}
@media (max-width:759.98px){.story-frame img{aspect-ratio:1/1}}
@media (min-width:760px){
  .story{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* the three frames read as one sequence: a hairline carries the eye across */
  .story-frame+.story-frame figcaption::before{
    content:"";position:absolute;left:calc(-1 * clamp(14px,1.6vw,22px));width:clamp(14px,1.6vw,22px);
    height:var(--hair);background:var(--line);transform:translateY(-4px);
  }
  .story-frame figcaption{position:relative}
}
.memory-foot{display:grid;gap:clamp(24px,3vw,40px);margin-top:clamp(44px,5vw,72px)}
@media (min-width:960px){.memory-foot{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}}

/* ---------- 04 House record ----------------------------------------------- */
.drawers{border-top:var(--hair) solid var(--rule);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(16px,2.4vw,32px)}
.split-copy>.drawers{margin-top:clamp(28px,3vw,38px)}
.drawers li{display:flex;align-items:center;min-height:44px;padding:10px 0;border-bottom:var(--hair) solid var(--rule);font-size:var(--t-caption);line-height:1.35;color:var(--ink);hyphens:auto}
/* Three rules retired 2026-09-17 with the old book tile in chapter 04. Księga domu is now
   its own closing section — see .eras below. */

/* ---------- 04 Przeglądy (sub-movement inside the house record) ------------- */
.sub-title{margin-top:clamp(34px,3.6vw,46px)}
.sub-title+.body{margin-top:clamp(12px,1.4vw,16px)}
.split-copy .pullquote{margin-top:clamp(26px,2.8vw,34px)}

/* ---------- Księga domu — two eras ----------------------------------------- */
/* Budowa and Dom, the app's own two-era structure. Not a feature grid: two columns,
   the era that leads after handover marked with a single quiet accent. */
.eras{display:grid;gap:0;margin-top:clamp(32px,3.6vw,48px)}
.era{padding-block:clamp(20px,2.4vw,26px);border-top:var(--hair) solid var(--rule)}
.era>h3{font-family:var(--sans);font-size:var(--t-body);font-weight:600;line-height:1.35;margin-bottom:10px}
.era>ul{font-size:var(--t-helper);color:var(--muted);max-width:40ch}
.era>ul li{padding-block:3px;line-height:1.45}
.era-now>h3{color:var(--accent)}
@media (min-width:820px){
  .eras{grid-template-columns:repeat(2,minmax(0,1fr))}
  .era{border-left:var(--hair) solid var(--rule);padding:clamp(22px,2.2vw,28px) clamp(22px,2.2vw,34px)}
  .era:first-child{border-left:0;padding-left:0}
}
.book .h2+.body{margin-top:clamp(16px,1.9vw,24px)}
.book-note{margin-top:clamp(24px,2.8vw,34px);max-width:var(--measure)}

/* ---------- Trust ---------------------------------------------------------- */
.band-soft .label{color:var(--accent)}
.band-soft .h2{margin-top:0}
.trust-grid{display:grid;gap:0;margin-top:clamp(32px,3.6vw,48px)}
.trust-item{padding-block:clamp(22px,2.6vw,28px);border-top:var(--hair) solid rgba(48,78,67,.22)}
.trust-item h3{font-family:var(--sans);font-size:var(--t-body);font-weight:600;line-height:1.35;margin-bottom:9px;text-wrap:balance}
.trust-item p{font-size:var(--t-helper);color:var(--muted);max-width:40ch}
@media (min-width:820px){
  .trust-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .trust-item{border-left:var(--hair) solid rgba(48,78,67,.22);padding:clamp(24px,2.4vw,30px) clamp(22px,2.2vw,34px)}
  .trust-item:first-child{border-left:0;padding-left:0}
  .trust-item:last-child{padding-right:0}
}
.trust-more{margin-top:clamp(22px,2.6vw,32px)}

/* ---------- Close ---------------------------------------------------------- */
.close-photo{margin:0}
.close-photo img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-control);background:var(--deep)}
@media (max-width:639.98px){.close-photo img{aspect-ratio:4/3}}
.close-grid{display:grid;gap:clamp(28px,4vw,64px);align-items:end;margin-top:clamp(40px,4.6vw,64px)}
@media (min-width:880px){.close-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
/* pre-launch (no App Store CTA): the closing text stands alone */
@media (min-width:880px){.close-grid.is-solo{grid-template-columns:minmax(0,1fr)}}
.close-body{margin-top:clamp(16px,2vw,22px)}
.close-actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.close-note{max-width:42ch}

/* ---------- Footer -------------------------------------------------------- */
.site-foot{border-top:var(--hair) solid var(--rule);padding-block:clamp(40px,5vw,64px) clamp(30px,3.6vw,44px)}
.foot-grid{display:grid;gap:clamp(28px,3.4vw,48px)}
@media (min-width:760px){.foot-grid{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}}
.foot-col h2{font-family:var(--sans);font-size:var(--t-label);font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.foot-col a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-helper);color:var(--muted);text-decoration:none}
.foot-col a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.foot-col a[aria-current=true]{color:var(--ink)}
.foot-brand .helper{margin-top:14px;max-width:34ch}
.foot-base{
  margin-top:clamp(34px,4vw,54px);padding-top:22px;border-top:var(--hair) solid var(--rule);
  display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;font-size:var(--t-caption);color:var(--muted);
}

/* ---------- Document pages (support / privacy) ---------------------------- */
.page-head{padding-block:clamp(40px,5.4vw,84px) clamp(30px,3.6vw,48px)}
.page-head h1{margin-bottom:clamp(18px,2.2vw,26px);font-size:clamp(1.6rem,.9rem + 3.6vw,3rem)}
.doc{padding-bottom:var(--section-y)}
.doc-grid{display:grid;gap:clamp(30px,4vw,64px)}
@media (min-width:900px){.doc-grid{grid-template-columns:minmax(0,.42fr) minmax(0,1fr);align-items:start}}
.doc-block+.doc-block{margin-top:clamp(34px,4vw,54px)}
.doc-block h2{font-family:var(--serif);font-weight:600;font-size:var(--t-h3);line-height:1.3;margin-bottom:14px;text-wrap:balance}
.doc-block p{color:var(--muted);max-width:64ch}
.doc-block p+p{margin-top:14px}
.nowrap{white-space:nowrap}
.faq{border-top:var(--hair) solid var(--rule)}
.faq-item{border-bottom:var(--hair) solid var(--rule);padding-block:clamp(20px,2.4vw,26px)}
.faq-item h3{font-family:var(--sans);font-size:var(--t-body);font-weight:600;line-height:1.4;margin-bottom:8px;text-wrap:balance}
.faq-item p{color:var(--muted);max-width:60ch}
.contact-card{border:var(--hair) solid var(--line);border-radius:var(--r-sheet);padding:clamp(24px,3vw,34px);background:var(--surface)}
.contact-card .label{margin-bottom:12px}
.contact-mail{
  display:inline-block;max-width:100%;padding-block:11px;font-family:var(--serif);font-weight:500;
  font-size:clamp(1.05rem,.92rem + .48vw,1.3rem);line-height:1.3;color:var(--accent);text-decoration:none;
  border-bottom:var(--hair) solid rgba(48,78,67,.3);overflow-wrap:break-word;hyphens:none;
}
.contact-mail:hover{border-bottom-color:var(--accent)}
.contact-note{margin-top:18px}
.doc-aside{margin-top:clamp(24px,3vw,34px)}
.doc-aside .label{margin-bottom:10px}
.doc-aside .helper{max-width:36ch}
.doc-aside p+p{margin-top:10px}
/* terms: version, effective date, privacy link */
.doc-meta .label{margin-bottom:8px}
.doc-meta .helper+.label{margin-top:clamp(18px,2.2vw,24px)}
.doc-meta-link{margin-top:clamp(14px,1.8vw,20px)}
/* future guides index (rendered only when a guide is published) */
.faq-item h2{font-family:var(--sans);font-size:var(--t-body);font-weight:600;line-height:1.4;margin-bottom:8px}

/* ---------- Market chooser + App Store alias pages ------------------------- */
.chooser{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:48px}
.brand-static{margin:0}
.chooser-label{margin-top:clamp(30px,4vw,48px);margin-bottom:0;display:block;line-height:1.7}
.chooser-list{margin-top:clamp(24px,3vw,36px);display:grid;border-top:var(--hair) solid var(--rule);max-width:560px}
.chooser-list a{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-block:clamp(14px,1.8vw,20px);border-bottom:var(--hair) solid var(--rule);
  text-decoration:none;min-height:56px;
}
.chooser-list a:hover .cn{color:var(--accent)}
.chooser-list .cn{font-family:var(--serif);font-weight:500;font-size:1.3rem}
.chooser-list .cl{font-size:var(--t-caption);color:var(--muted);text-align:right}

/* ---------- Motion: none that hides content --------------------------------
   v2 removes scroll-driven entrance animation: full-page captures, reduced-motion
   users and browsers without animation-timeline all see the same finished page. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms!important}
}

/* ---------- Print --------------------------------------------------------- */
@media print{
  .site-head,.site-foot,.hero-actions,.skip{display:none}
  body{background:#fff;font-size:11pt}
  .doc-block p{color:#000}
}