/* ===========================================================
   Mandarat — website V1
   Tokens verbatim from the Mandarat design system.
   Single-theme by intent: the CI is a committed light editorial
   world. Every colour painted explicitly.
   Eight routes, hash-based, so the whole site demos as one file.
   =========================================================== */
:root{
  --navy:#092842; --gold:#c9aa4c; --cream:#ffefc3; --white:#ffffff;
  --navy-950:oklch(18% 0.045 250); --navy-900:#092842;
  --navy-800:oklch(29% 0.055 249); --navy-700:oklch(37% 0.058 249);
  --navy-600:oklch(46% 0.055 249); --navy-500:oklch(57% 0.046 249);
  --navy-300:oklch(79% 0.024 249); --navy-200:oklch(88% 0.015 249);
  --navy-100:oklch(94% 0.009 249); --navy-050:oklch(97.5% 0.005 249);
  --gold-900:oklch(45% 0.085 85); --gold-700:oklch(65% 0.105 85);
  --gold-600:#c9aa4c; --gold-500:oklch(78% 0.09 85);

  --text-strong:var(--navy-900); --text-body:var(--navy-800); --text-muted:var(--navy-600);
  --border-hairline:var(--navy-200);
  --border-inverse:color-mix(in oklab,var(--white) 28%,transparent);
  --on-navy-soft:color-mix(in oklab,var(--white) 80%,transparent);
  --on-navy-faint:color-mix(in oklab,var(--white) 62%,transparent);

  --font-display:"MANDARAT Display","Didot","Didot LT Pro",Georgia,"Times New Roman",serif;
  --font-sans:"DM Sans","Helvetica Neue",Helvetica,system-ui,sans-serif;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-black:900; --fw-display:400;

  --text-3xs:0.6875rem; --text-2xs:0.75rem; --text-xs:0.8125rem; --text-sm:0.875rem;
  --text-base:1rem; --text-md:1.0625rem; --text-lg:1.25rem; --text-xl:1.5rem;
  --text-2xl:1.875rem; --text-3xl:2.375rem; --text-4xl:3rem; --text-5xl:3.875rem; --text-6xl:5rem;

  --lh-tight:0.98; --lh-display:1.04; --lh-snug:1.22; --lh-normal:1.45; --lh-relaxed:1.62;
  --ls-display:-0.02em; --ls-caps:0.14em;

  --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.25rem;
  --space-6:1.5rem; --space-7:2rem; --space-8:2.5rem; --space-9:3rem; --space-10:4rem;
  --space-11:5rem; --space-12:6.5rem;
  --gutter:1.5rem; --section-y:6.5rem; --section-y-sm:4rem;
  --container-max:1200px;

  --radius-xs:2px; --radius-md:4px;
  --dur-fast:140ms; --dur-base:220ms; --ease-standard:cubic-bezier(0.2,0,0,1);
  --ring-focus:0 0 0 2px var(--white),0 0 0 4px var(--gold-600);
  --ring-focus-inverse:0 0 0 2px var(--navy-900),0 0 0 4px var(--gold-600);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;background:var(--white);color:var(--text-body);
  font:var(--fw-regular) var(--text-base)/var(--lh-normal) var(--font-sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
p{text-wrap:pretty}
img{max-width:100%}
:where(a,button,input,select,textarea):focus-visible{outline:none;box-shadow:var(--ring-focus)}
.band-navy :where(a,button,input,select,textarea):focus-visible{box-shadow:var(--ring-focus-inverse)}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter)}
.band{padding-block:var(--section-y)}
.band-sm{padding-block:var(--section-y-sm)}
.band-navy{background:var(--navy-900);color:var(--on-navy-soft)}
.band-cream{background:var(--cream);color:var(--navy-800)}
.band-white{background:var(--white);color:var(--text-body)}
.page{display:none}
.page.is-active{display:block}

/* ---------- type roles ---------- */
.eyebrow{display:block;font:var(--fw-black) var(--text-2xs)/1.2 var(--font-sans);
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--gold-900)}
.band-navy .eyebrow{color:var(--gold-500)}
.display{font:var(--fw-display) var(--text-4xl)/var(--lh-display) var(--font-display);
  font-variation-settings:"opsz" 16;font-optical-sizing:none;
  letter-spacing:var(--ls-display);color:var(--text-strong);text-wrap:balance}
.display-xl{font-size:var(--text-6xl);line-height:var(--lh-tight)}
.band-navy .display{color:var(--white)}
.lead{font:var(--fw-light) 1.1875rem/var(--lh-relaxed) var(--font-sans);max-width:60ch}
.band-navy .lead{font-weight:var(--fw-regular);color:color-mix(in oklab,var(--white) 92%,transparent)}
.body{font:var(--fw-light) var(--text-base)/var(--lh-relaxed) var(--font-sans)}
.title{font:var(--fw-medium) var(--text-lg)/1.3 var(--font-sans);color:var(--text-strong)}
.band-navy .title{color:var(--white)}
.rule{width:56px;height:3px;background:var(--gold-600);border:0}
.band-cream .rule{background:var(--gold-700)}
.head{display:flex;flex-direction:column;gap:var(--space-5);align-items:flex-start;max-width:64ch}
.flag{display:inline-block;margin-left:var(--space-3);vertical-align:2px;
  font:var(--fw-black) var(--text-3xs)/1 var(--font-sans);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--gold-900);border:1px solid var(--gold-600);
  padding:4px 6px;white-space:nowrap}

/* ---------- draft strip ---------- */
.draft{background:var(--navy-050);border-bottom:1px solid var(--border-hairline);padding-block:var(--space-3)}
.draft-inner{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);align-items:baseline}
.draft-tag{font:var(--fw-black) var(--text-3xs)/1 var(--font-sans);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--navy-900);background:var(--gold-600);padding:6px 9px}
.draft-text{font:var(--fw-light) var(--text-xs)/1.5 var(--font-sans);color:var(--text-muted)}
.draft-text a{color:var(--navy-900);border-bottom:1px solid var(--gold-600);text-decoration:none}

/* ---------- header + nav ---------- */
.site-header{position:sticky;top:0;z-index:30;background:var(--white);
  border-bottom:1px solid var(--border-hairline)}
.header-inner{min-height:84px;display:flex;align-items:center;gap:var(--space-7);
  flex-wrap:wrap;padding-block:var(--space-3)}
.logo-link{display:block;border:0;flex:none}
.logo{height:60px;width:auto;display:block}
.nav{display:flex;gap:var(--space-7);margin-left:auto;flex-wrap:wrap}
.nav a{font:var(--fw-regular) var(--text-sm)/1 var(--font-sans);color:var(--text-muted);
  text-decoration:none;padding-block:var(--space-2);border-bottom:2px solid transparent;
  transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
.nav a:hover{color:var(--navy-900)}
.nav a.is-current{color:var(--navy-900);border-bottom-color:var(--gold-600)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);
  min-height:44px;padding:0 var(--space-6);border-radius:var(--radius-xs);border:1px solid transparent;
  font:var(--fw-medium) var(--text-sm)/1 var(--font-sans);text-decoration:none;cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.btn:active{transform:scale(0.985)}
.btn-accent{background:var(--gold-600);color:var(--navy-900);border-color:var(--gold-600)}
.btn-accent:hover{background:var(--gold-700);border-color:var(--gold-700)}
.btn-ghost{background:transparent;color:var(--navy-900);border-color:var(--navy-900)}
.btn-ghost:hover{background:var(--navy-050)}
.btn-inverse{background:transparent;color:var(--white);border-color:var(--border-inverse)}
.btn-inverse:hover{background:color-mix(in oklab,var(--white) 8%,transparent);border-color:var(--white)}
.btn-lg{min-height:54px;padding:0 var(--space-7);font-size:var(--text-base)}
.btn-arrow{width:14px;height:14px;flex:none}

/* ---------- hero ---------- */
.hero{padding-block:var(--space-11) var(--section-y)}
.hero-grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--space-10);align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:var(--space-6);align-items:flex-start}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-2)}
.facts{background:var(--navy-900);color:var(--white);padding:var(--space-8);
  display:flex;flex-direction:column;gap:var(--space-6)}
.fact{display:flex;flex-direction:column;gap:var(--space-1);
  padding-bottom:var(--space-5);border-bottom:1px solid var(--border-inverse)}
.fact:last-child{padding-bottom:0;border-bottom:0}
.fact-k{font:var(--fw-medium) var(--text-xs)/1.2 var(--font-sans);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--gold-500)}
.fact-v{font:var(--fw-medium) var(--text-3xl)/1.1 var(--font-sans);color:var(--cream);
  font-variant-numeric:tabular-nums}
.fact-n{font:var(--fw-regular) 0.9375rem/1.55 var(--font-sans);
  color:color-mix(in oklab,var(--white) 92%,transparent)}
.facts > .eyebrow{font-size:var(--text-sm);color:var(--gold-500);letter-spacing:var(--ls-caps)}

/* ---------- fork cards ---------- */
.fork{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
.fork-card{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start;
  padding:var(--space-8);background:var(--white);text-decoration:none;
  border:1px solid var(--navy-300);border-radius:var(--radius-md);
  transition:border-color var(--dur-base) var(--ease-standard),background-color var(--dur-base) var(--ease-standard)}
.fork-card:hover{border-color:var(--navy-900);background:var(--navy-050)}
.fork-t{display:flex;align-items:center;gap:var(--space-3);
  font:var(--fw-medium) var(--text-xl)/1.25 var(--font-sans);color:var(--navy-900)}
.fork-t svg{width:18px;height:18px;color:var(--gold-700);flex:none}
.fork-d{font:var(--fw-light) var(--text-base)/var(--lh-relaxed) var(--font-sans);color:var(--text-body)}
.fork-for,.cta-for{font:var(--fw-black) var(--text-2xs)/1 var(--font-sans);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--gold-900)}
.fork-ca .fork-for{color:var(--navy-900)}
.fork-co{border-top:3px solid var(--gold-600)}
.fork-ca{border-top:3px solid var(--navy-900)}
.fork-btn{margin-top:auto;pointer-events:none}
.cta-pair{display:flex;flex-direction:column;gap:var(--space-2);align-items:flex-start}
.btn-navy{background:var(--navy-900);color:var(--white);border-color:var(--navy-900)}
.btn-navy:hover{background:var(--navy-800);border-color:var(--navy-800)}
.btn-ghost-inv{background:transparent;color:var(--white);border-color:color-mix(in oklab,var(--white) 70%,transparent)}
.btn-ghost-inv:hover{border-color:var(--white);background:color-mix(in oklab,var(--white) 8%,transparent)}
.cta-actions{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.fork-card:hover .btn-accent{background:var(--gold-700);border-color:var(--gold-700)}
.fork-card:hover .btn-navy{background:var(--navy-800);border-color:var(--navy-800)}

/* ---------- founder credibility bar ---------- */
.kred{display:grid;grid-template-columns:minmax(250px,auto) minmax(0,1fr) auto;
  grid-template-areas:"name line btn" "nums line btn";
  gap:var(--space-6) var(--space-10);align-items:center}
.kred > .kred-name{grid-area:name;align-self:end}
.kred > .kred-nums{grid-area:nums;align-self:start}
.kred > .kred-line{grid-area:line}
.kred > .btn{grid-area:btn}
.kred-name{display:flex;flex-direction:column;gap:var(--space-2)}
.kred-name b{font:var(--fw-medium) var(--text-xl)/1.2 var(--font-sans);color:var(--navy-900)}
.kred-name span{font:var(--fw-black) var(--text-2xs)/1;letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--gold-900)}
.kred-nums{display:flex;gap:var(--space-8)}
.kred-num{display:flex;flex-direction:column;gap:var(--space-1)}
.kred-num b{font:var(--fw-medium) var(--text-2xl)/1 var(--font-sans);color:var(--navy-900);
  font-variant-numeric:tabular-nums}
.kred-num span{font:var(--fw-light) var(--text-2xs)/1;letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--gold-900)}
.kred-line{font:var(--fw-light) var(--text-base)/var(--lh-relaxed) var(--font-sans);
  color:var(--navy-800);max-width:58ch;padding-left:var(--space-9);border-left:1px solid var(--gold-700)}

/* ---------- proof columns ---------- */
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-9);margin-top:var(--space-10)}
@supports (grid-template-rows:subgrid){
  .proof-grid{grid-template-rows:auto auto auto}
  .proof-grid > .proof-item{display:grid;grid-template-rows:subgrid;grid-row:span 3;gap:var(--space-4)}
}
.proof-item{display:flex;flex-direction:column;gap:var(--space-4)}
.proof-item .body{font-weight:var(--fw-regular);color:color-mix(in oklab,var(--white) 88%,transparent)}
.icon{width:28px;height:28px;color:var(--gold-500);flex:none}

/* ---------- two options ---------- */
.options{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-9);margin-top:var(--space-10)}
.option{display:flex;flex-direction:column;gap:var(--space-3);padding-top:var(--space-5);
  border-top:1px solid var(--gold-700)}
.option h3{font:var(--fw-medium) var(--text-xl)/1.25 var(--font-sans);color:var(--navy-900)}
.option p{font:var(--fw-light) var(--text-base)/var(--lh-relaxed) var(--font-sans);color:var(--navy-800)}
.option-k{font:var(--fw-black) var(--text-2xs)/1 var(--font-sans);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--gold-900)}
.closing{margin-top:var(--space-10);padding-top:var(--space-7);border-top:3px solid var(--gold-700);
  font:var(--fw-medium) var(--text-xl)/1.45 var(--font-sans);color:var(--navy-900);max-width:64ch}
.closing b{font-weight:var(--fw-medium);color:var(--gold-900)}

/* ---------- page header (sub-pages) ---------- */
.phead{display:grid;grid-template-columns:7fr 5fr;gap:var(--space-10);align-items:end}
.phead-copy{display:flex;flex-direction:column;gap:var(--space-5);align-items:flex-start}
.phead .display-xl{font-size:clamp(2.375rem,1.35rem + 2.4vw,3.875rem)}

/* ---------- question sequence ---------- */
.qgrid{display:grid;grid-template-columns:4fr 8fr;gap:var(--space-11)}
.qside{display:flex;flex-direction:column;gap:var(--space-5);align-items:flex-start;
  position:sticky;top:120px;align-self:start}
.qside-t{font:var(--fw-medium) var(--text-lg)/1.3 var(--font-sans);color:var(--navy-900)}
.portrait{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-xs)}
@media (max-width:1060px){.portrait{max-width:320px}}
.qnav{display:flex;flex-direction:column;width:100%}
.qnav a{font:var(--fw-regular) var(--text-sm)/1.4 var(--font-sans);color:var(--text-muted);
  text-decoration:none;padding-block:var(--space-3);border-top:1px solid var(--border-hairline);
  transition:color var(--dur-fast) var(--ease-standard)}
.qnav a:hover{color:var(--navy-900)}
.qnav a:last-child{border-bottom:1px solid var(--border-hairline)}
.qa{display:flex;flex-direction:column;gap:var(--space-9)}
.q{display:flex;flex-direction:column;gap:var(--space-4);padding-top:var(--space-6);
  border-top:1px solid var(--border-hairline);scroll-margin-top:120px}
.q:first-child{padding-top:0;border-top:0}
.q h3{font:var(--fw-medium) var(--text-xl)/1.3 var(--font-sans);color:var(--navy-900);text-wrap:balance}
.q p{font:var(--fw-light) var(--text-md)/var(--lh-relaxed) var(--font-sans);color:var(--text-body);max-width:62ch}
.q ul{display:flex;flex-direction:column;width:100%}
.q p.q-quote{font:italic var(--fw-light) var(--text-lg)/1.45 var(--font-sans);color:var(--navy-900);max-width:52ch;padding-left:var(--space-4);border-left:2px solid var(--gold)}
.q ul li{display:flex;gap:var(--space-4);align-items:flex-start;padding-block:var(--space-3);
  border-top:1px solid var(--border-hairline);
  font:var(--fw-regular) var(--text-sm)/1.5 var(--font-sans);color:var(--text-body)}
.q ul li:last-child{border-bottom:1px solid var(--border-hairline)}
.marker{width:8px;height:8px;background:var(--gold-600);flex:none;margin-top:6px}
.note{padding:var(--space-5) var(--space-6);border:1px solid var(--gold-600);border-radius:var(--radius-md);
  background:color-mix(in oklab,var(--cream) 42%,transparent)}
.note p{max-width:58ch}
.q-foot{font:var(--fw-light) var(--text-sm)/var(--lh-relaxed) var(--font-sans);color:var(--text-muted)}

/* duty table */
.duty{display:grid;grid-template-columns:90px 1fr 1fr;gap:0 var(--space-6);width:100%}
.duty > *{padding-block:var(--space-4);border-top:1px solid var(--border-hairline)}
.duty .dh{border-top:0;padding-top:0;font:var(--fw-black) var(--text-2xs)/1.3 var(--font-sans);
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--gold-900)}
.duty .dd{font:var(--fw-black) var(--text-2xs)/1.3 var(--font-sans);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--navy-900)}
.duty .dv{font:var(--fw-light) var(--text-sm)/var(--lh-relaxed) var(--font-sans);color:var(--text-muted)}
.duty .dv-you{color:var(--navy-900)}

/* ---------- closing CTA band ---------- */
.cta-band{display:flex;flex-wrap:wrap;gap:var(--space-8);align-items:center;justify-content:space-between}
.cta-copy{display:flex;flex-direction:column;gap:var(--space-4);max-width:52ch}

/* ---------- data pledges ---------- */
.pledges{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-9) var(--space-10)}
.pledge{display:flex;flex-direction:column;gap:var(--space-3);padding-top:var(--space-5);
  border-top:1px solid var(--gold-700)}
.pledge h3{font:var(--fw-black) var(--text-2xs)/1 var(--font-sans);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--gold-900)}
.pledge p{font:var(--fw-light) var(--text-md)/var(--lh-relaxed) var(--font-sans);
  color:var(--navy-800);max-width:34ch}

/* ---------- data promise ---------- */
.promise-list{display:flex;flex-direction:column;width:100%;margin-top:var(--space-2)}
.promise-list li{display:flex;gap:var(--space-5);align-items:flex-start;padding-block:var(--space-5);
  border-top:1px solid var(--navy-300)}
.promise-list li:last-child{border-bottom:1px solid var(--navy-300)}
.promise-list .marker{width:10px;height:10px;margin-top:7px}
.promise-list p{font:var(--fw-light) var(--text-md)/var(--lh-relaxed) var(--font-sans);color:var(--navy-800)}

/* ---------- form ---------- */
.form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-5);margin-top:var(--space-9)}
.field{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.field[hidden]{display:none !important}
.field.hp{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.field-check label{display:flex;gap:var(--space-3);align-items:flex-start;
  font:var(--fw-light) var(--text-sm)/var(--lh-relaxed) var(--font-sans);color:var(--on-navy-soft);cursor:pointer}
.field-check input[type=checkbox]{width:18px;height:18px;min-height:0;flex:none;margin-top:2px;accent-color:var(--gold-600)}
.field-wide{grid-column:1 / -1}
.field label{font:var(--fw-medium) var(--text-sm)/1.3 var(--font-sans);color:var(--white)}
.field select{text-overflow:ellipsis}
.field input:not([type=checkbox]),.field select{min-height:44px;width:100%;max-width:100%;min-width:0;flex:1 1 0;padding:0 var(--space-4);
  background:color-mix(in oklab,var(--white) 7%,transparent);
  border:1px solid var(--border-inverse);border-radius:var(--radius-xs);color:var(--white);
  font:var(--fw-regular) var(--text-base)/1 var(--font-sans);
  transition:border-color var(--dur-fast) var(--ease-standard)}
.field input::placeholder{color:color-mix(in oklab,var(--white) 45%,transparent)}
.field input:hover,.field select:hover{border-color:color-mix(in oklab,var(--white) 45%,transparent)}
.field select option{background:var(--navy-900);color:var(--white)}
.field-hint{font:var(--fw-light) var(--text-xs)/1.5 var(--font-sans);color:var(--on-navy-faint)}
.seg{display:flex;gap:var(--space-2);flex-wrap:wrap}
.seg button{min-height:44px;padding:0 var(--space-5);background:transparent;color:var(--on-navy-soft);
  border:1px solid var(--border-inverse);border-radius:var(--radius-xs);cursor:pointer;
  font:var(--fw-medium) var(--text-sm)/1 var(--font-sans);
  transition:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
.seg button:hover{border-color:var(--white);color:var(--white)}
.seg button[aria-pressed="true"]{background:var(--gold-600);border-color:var(--gold-600);color:var(--navy-900)}
.form-foot{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:center;margin-top:var(--space-2)}
.next{font:var(--fw-light) var(--text-sm)/var(--lh-relaxed) var(--font-sans);color:var(--on-navy-soft);max-width:44ch}
.next b{font-weight:var(--fw-medium);color:var(--cream)}
.confirm{margin-top:var(--space-9);padding:var(--space-8);border:1px solid var(--gold-600);
  border-radius:var(--radius-md);background:color-mix(in oklab,var(--white) 6%,transparent);
  display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start;
  animation:rise var(--dur-base) var(--ease-standard) both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.confirm .title{color:var(--cream)}
.confirm p{font:var(--fw-light) var(--text-md)/var(--lh-relaxed) var(--font-sans);
  color:var(--on-navy-soft);max-width:52ch}

/* ---------- stub pages ---------- */
.stub{display:flex;flex-direction:column;gap:var(--space-5);align-items:flex-start}
.wrap.stub > *{max-width:72ch}
.stub p{font:var(--fw-light) var(--text-md)/var(--lh-relaxed) var(--font-sans);color:var(--text-body)}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-950);padding-block:var(--space-10)}
.footer-grid{display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-10);align-items:start}
.footer-logo{height:76px;width:auto;display:block}
.footer-nav{display:flex;gap:var(--space-9);flex-wrap:wrap}
.footer-col{display:flex;flex-direction:column;gap:var(--space-3)}
.footer-col span{font:var(--fw-black) var(--text-2xs)/1;letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--gold-500)}
.footer-col a{font:var(--fw-light) var(--text-sm)/1.4 var(--font-sans);color:var(--on-navy-soft);
  text-decoration:none;transition:color var(--dur-fast) var(--ease-standard)}
.footer-col a:hover{color:var(--cream)}
.footer-meta{display:flex;flex-direction:column;gap:var(--space-2);text-align:right}
.footer-meta p{font:var(--fw-light) var(--text-2xs)/1.6 var(--font-sans);color:var(--on-navy-faint)}

/* ---------- review notes ---------- */
.notes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);margin-top:var(--space-8)}
.note-card{background:var(--white);border:1px solid var(--border-hairline);border-top:3px solid var(--gold-600);
  border-radius:var(--radius-md);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}
.note-card p{font:var(--fw-light) var(--text-sm)/var(--lh-relaxed) var(--font-sans);color:var(--text-body)}
.note-card .qq{font-weight:var(--fw-medium);color:var(--navy-900)}
.notes-list{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-8)}
.notes-list li{display:flex;gap:var(--space-4);font:var(--fw-light) var(--text-sm)/var(--lh-relaxed) var(--font-sans);color:var(--text-body)}
.notes-list b{font-weight:var(--fw-medium);color:var(--navy-900);min-width:170px;flex:none}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .hero-grid,.phead{grid-template-columns:1fr;gap:var(--space-9)}
  .phead{align-items:start}
  .qgrid{grid-template-columns:1fr;gap:var(--space-8)}
  .qside{position:static}
  .kred{grid-template-columns:1fr;grid-template-areas:none;gap:var(--space-6)}
  .kred > .kred-name,.kred > .kred-nums,.kred > .kred-line,.kred > .btn{grid-area:auto}
  .kred-line{padding-left:0;border-left:0;padding-top:var(--space-5);
    border-top:1px solid var(--gold-700);max-width:none}
  .display-xl{font-size:var(--text-5xl)}
  .notes-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr;gap:var(--space-8)}
  .footer-meta{text-align:left}
}
@media (max-width:760px){
  :root{--section-y:4rem;--section-y-sm:3rem}
  .proof-grid,.options,.fork{grid-template-columns:1fr;gap:var(--space-8)}
  .options,.proof-grid{margin-top:var(--space-8)}
  .form{grid-template-columns:minmax(0,1fr)}
  .notes-grid{grid-template-columns:1fr}
  .pledges{grid-template-columns:1fr;gap:var(--space-7)}
  .notes-list li{flex-direction:column;gap:var(--space-1)}
  .closing{font-size:var(--text-lg)}
  .duty{grid-template-columns:1fr;gap:0}
  .duty .dh{display:none}
  .duty .dd{border-top:1px solid var(--border-hairline);padding-bottom:0}
  .duty .dv{border-top:0;padding-block:var(--space-2) 0}
  .nav{margin-left:0;width:100%;gap:var(--space-5)}
  .qnav{display:none}
}
@media (max-width:520px){
  .display{font-size:var(--text-3xl);line-height:var(--lh-snug)}
  .display-xl{font-size:var(--text-4xl);line-height:var(--lh-display)}
  .fact-v{font-size:var(--text-2xl)}
  .logo{height:44px}
  .footer-logo{height:60px}
  .hero-actions .btn,.form-foot .btn{width:100%}
  .hero-actions .cta-pair{width:100%}
  .cta-actions,.cta-actions .btn{width:100%}
}
/* V2.5 · Vormerkliste: Auswahlkarten, Fehlermeldung */
fieldset.choice{border:0;margin:0;padding:0;min-width:0}
.choice legend{padding:0;margin-bottom:var(--space-2);font:var(--fw-medium) var(--text-sm)/1.3 var(--font-sans);color:var(--white)}
.choice-opts{display:grid;gap:var(--space-3);grid-template-columns:repeat(2,minmax(0,1fr))}
.choice-opts.choice-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.opt{display:flex;gap:var(--space-3);align-items:flex-start;min-height:44px;padding:var(--space-4);cursor:pointer;
  border:1px solid var(--border-inverse);border-radius:var(--radius-xs);background:color-mix(in oklab,var(--white) 4%,transparent);
  transition:border-color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard)}
.opt:hover{border-color:color-mix(in oklab,var(--white) 45%,transparent)}
.choice .opt input[type=radio]{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;min-height:0;max-width:none;margin:2px 0 0;padding:0;
  border:1.5px solid var(--on-navy-soft);border-radius:50%;background:transparent;display:grid;place-content:center;cursor:pointer}
.choice .opt input[type=radio]::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--navy-900);transform:scale(0);transition:transform var(--dur-fast) var(--ease-standard)}
.choice .opt input[type=radio]:checked{background:var(--gold-500);border-color:var(--gold-500)}
.choice .opt input[type=radio]:checked::before{transform:scale(1)}
.choice .opt input[type=radio]:focus-visible{box-shadow:none}
.opt:has(input:focus-visible){box-shadow:var(--ring-focus-inverse)}
.opt:has(input:checked){border-color:var(--gold-600);background:color-mix(in oklab,var(--gold) 12%,transparent)}
.opt-body{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.opt-t{font:var(--fw-medium) var(--text-base)/1.35 var(--font-sans);color:var(--white)}
.opt-d{font:var(--fw-light) var(--text-sm)/1.45 var(--font-sans);color:var(--on-navy-soft)}
.choice .field-hint{margin-top:var(--space-1)}
.field-hint a{color:var(--cream);text-decoration:none;border-bottom:1px solid var(--gold-600)}
.field input[aria-invalid="true"]{border-color:var(--gold-500)}
.choice[aria-invalid="true"] .opt{border-color:var(--gold-500)}
.form-error{flex-basis:100%;margin:0;font:var(--fw-medium) var(--text-sm)/1.4 var(--font-sans);color:var(--cream)}
.form-error::before{content:"";display:inline-block;width:6px;height:6px;margin:0 var(--space-2) 2px 0;border-radius:50%;background:var(--gold-500)}
@media (max-width:760px){.choice-opts,.choice-opts.choice-3{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:0.01ms !important;transition-duration:0.01ms !important}}

/* Parity with the master, which renders in quirks mode (no doctype): quirks UA margin under forms */
form{margin-block-end:1em}
/* /bestaetigen/: the master's error line sits on navy; this page is white (D10, S-4) */
.band-white .form-error{color:var(--navy-900);margin-top:var(--space-4)}

/* Self-hosted fonts (B1, D78): DM Sans, woff2 from google/fonts, SIL OFL 1.1, see /assets/fonts/ */
@font-face{font-family:"DM Sans";font-style:normal;font-weight:100 1000;font-display:swap;src:url("/assets/fonts/DMSans-opsz-wght.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-style:italic;font-weight:100 1000;font-display:swap;src:url("/assets/fonts/DMSans-Italic-opsz-wght.woff2") format("woff2")}
/**
 * @license
 * MyFonts Webfont Build ID 3867246, 2020-12-16T11:57:38-0500
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: Linotype Didot Pro Bold by Linotype
 * URL: https://www.myfonts.com/collections/linotype-foundry

 * Webfont: Linotype Didot Pro Roman by Linotype
 * URL: https://www.myfonts.com/collections/linotype-foundry
 
 * © 2026 MyFonts Inc. */
@font-face{font-family:"MANDARAT Display";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/LinotypeDidotPro-Roman.woff2") format("woff2")}
@font-face{font-family:"MANDARAT Display";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/LinotypeDidotPro-Bold.woff2") format("woff2")}

/* Former inline style attributes of the master (CSP), same declarations */
.inl-09fad26b{margin-top:var(--space-9) !important}
.inl-4052c243{margin-bottom:var(--space-9) !important}
.inl-50070866{color:var(--text-muted) !important}
.inl-5ec1a119{font-weight:var(--fw-light) !important;color:var(--navy-600) !important}
.inl-6438c275{border:0 !important}
.inl-754039dd{padding-bottom:var(--section-y) !important}
.inl-7fce79da{font:var(--fw-medium) var(--text-sm)/1.5 var(--font-sans) !important;color:var(--navy-900) !important;margin-top:var(--space-4) !important}
.inl-b649667c{color:var(--navy-900) !important;border-bottom:1px solid var(--gold-600) !important;text-decoration:none !important}
.inl-d0784e01{color:inherit !important;border-bottom:1px solid var(--gold-600) !important;text-decoration:none !important}