/* ==========================================================================
   Family Office OS — site.css
   Design system: brand/BRAND.md (private bank / family office prospectus)
   Static site, no framework. Google Fonts only external dependency.

   COMPONENT CONTRACT (the HTML is written against exactly these classes):
     .site-nav (.nav-cta) · .hero (.hero-kicker .hero-title .hero-sub
     .hero-ctas .hero-proof) · .strip · .section .section-head (.kicker
     .section-title .section-lede) · .problem-grid .problem-card ·
     .system-steps .step · .ladder .tier .tier-anchor (.tier-price .tier-cta)
     · .inside .inside-row · .guarantee · .faq (details/summary) ·
     .site-footer · .product-hero .buy-box (.includes .btn-buy) ·
     .btn .btn-gold .btn-ghost · .recovery-form · .download-list
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,480;9..144,500;9..144,560;9..144,600&family=Inter:wght@400;500;600;700&display=swap');

/* ---------------------------------------------------------------- tokens */
:root{
  --ink:#0F100E;
  --ink-2:#161814;
  --surface:#1B1D19;
  --surface-2:#22241F;
  --paper:#F4F1E9;
  --paper-2:#ECE8DC;
  --bone:#EDE8DC;
  --bone-dim:#C9C4B4;
  --muted:#9B988C;
  --ink-text:#171812;
  --ink-muted:#5E5C52;
  --gold:#C6A15B;
  --gold-bright:#DCC07C;
  --gold-deep:#9A7B3F;
  --line:#2B2D27;
  --line-paper:#D9D3C1;
  --line-gold:#8A7440;

  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --measure:1160px;
  --radius:10px;
  --nav-h:72px;
}

/* ----------------------------------------------------------------- reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:var(--gold); text-decoration:none; }
a:hover{ color:var(--gold-bright); }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; margin:0; color:var(--bone); }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--gold); color:var(--ink); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* -------------------------------------------------------------- utilities */
.wrap{ max-width:var(--measure); margin:0 auto; padding:0 24px; }
.kicker{
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
}
.gold-rule{ width:48px; height:3px; background:var(--gold); border:0; margin:22px 0; }
.section--paper{ background:var(--paper); color:var(--ink-text); }
.section--paper h1,.section--paper h2,.section--paper h3{ color:var(--ink-text); }
.section--paper .kicker{ color:var(--gold-deep); }

/* ------------------------------------------------------------------- nav */
.site-nav{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h);
  background:rgba(15,16,14,.92);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center;
}
.site-nav .wrap{ width:100%; display:flex; align-items:center; gap:32px; }
.site-nav .wordmark{
  display:flex; align-items:center; gap:12px; flex:none;
  font-family:var(--serif); font-weight:560; font-size:16px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--bone);
  white-space:nowrap;
}
.site-nav .wordmark:hover{ color:var(--bone); }
.site-nav .wordmark img,.site-nav .wordmark svg{ width:34px; height:34px; flex:none; }
.site-nav nav{ margin-left:auto; display:flex; align-items:center; gap:30px; }
.site-nav nav a{
  font-size:14.5px; font-weight:500; color:var(--bone-dim);
  padding:10px 2px; min-height:44px; display:inline-flex; align-items:center;
}
.site-nav nav a:hover{ color:var(--bone); }
.nav-cta{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:10px 20px;
  border:1px solid var(--gold); border-radius:8px;
  font-size:14.5px; font-weight:600; color:var(--ink); background:var(--gold);
  transition:background .15s ease, border-color .15s ease;
}
.nav-cta:hover{ background:var(--gold-bright); border-color:var(--gold-bright); color:var(--ink); }

/* ------------------------------------------------------------------ hero */
.hero{
  padding:calc(var(--nav-h) + 96px) 0 88px;
  background:linear-gradient(180deg, var(--ink) 0%, #131410 100%);
  border-bottom:1px solid var(--line);
}
.hero-kicker{
  font-size:12px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); margin-bottom:28px;
  display:flex; align-items:center; gap:14px;
}
.hero-kicker::before{ content:""; width:36px; height:1px; background:var(--gold); flex:none; }
.hero-title{
  font-size:clamp(44px, 6.4vw, 76px); font-weight:480;
  line-height:1.02; letter-spacing:-.015em; max-width:15ch;
}
.hero-title em{ font-style:italic; color:var(--gold); }
.hero-sub{
  margin-top:28px; max-width:56ch; font-size:clamp(17px, 2vw, 20px);
  line-height:1.65; color:var(--bone-dim);
}
.hero-ctas{ margin-top:40px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hero-note{ margin-top:18px; font-size:13.5px; color:var(--muted); }
.hero-proof{
  margin-top:64px; padding-top:32px; border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(4, 1fr); gap:32px;
}
.hero-proof .fact b{
  display:block; font-family:var(--serif); font-weight:500;
  font-size:clamp(26px, 3vw, 34px); line-height:1.1; color:var(--bone);
  font-variant-numeric:tabular-nums;
}
.hero-proof .fact b .gold{ color:var(--gold); }
.hero-proof .fact span{
  display:block; margin-top:8px; font-size:13px; line-height:1.55; color:var(--muted);
}

/* ----------------------------------------------------------------- strip */
.strip{ background:var(--ink-2); border-bottom:1px solid var(--line); }
.strip .wrap{
  display:flex; flex-wrap:wrap; gap:12px 40px; align-items:baseline;
  padding-top:18px; padding-bottom:18px;
}
.strip .item{ font-size:13.5px; color:var(--muted); display:flex; gap:10px; align-items:baseline; }
.strip .item b{
  font-family:var(--serif); font-weight:560; font-size:16px; color:var(--gold);
  font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------------------- section */
.section{ padding:112px 0; }
.section + .section{ border-top:1px solid var(--line); }
.section--paper + .section, .section + .section--paper{ border-top:0; }
.section-head{ max-width:720px; margin-bottom:56px; }
.section-head .kicker{ display:block; margin-bottom:18px; }
.section-title{
  font-size:clamp(32px, 4.2vw, 44px); font-weight:500; line-height:1.08; letter-spacing:-.01em;
}
.section-lede{ margin-top:20px; font-size:19px; line-height:1.65; color:var(--bone-dim); }
.section--paper .section-lede{ color:var(--ink-muted); }

/* ----------------------------------------------------------- problem grid */
.problem-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.problem-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 28px;
}
.section--paper .problem-card{ background:var(--paper-2); border-color:var(--line-paper); }
.problem-card .num{
  font-family:var(--serif); font-weight:500; font-size:44px; line-height:1;
  color:var(--gold); font-variant-numeric:tabular-nums;
}
.problem-card h3{ font-size:22px; font-weight:550; line-height:1.25; margin:20px 0 12px; }
.problem-card p{ font-size:15.5px; line-height:1.65; color:var(--bone-dim); }
.section--paper .problem-card p{ color:var(--ink-muted); }

/* ------------------------------------------------------------ system steps */
.system-steps{ border-top:1px solid var(--line); }
.step{
  display:grid; grid-template-columns:96px 1fr 1.2fr; gap:32px; align-items:baseline;
  padding:36px 0; border-bottom:1px solid var(--line);
}
.step .step-num{
  font-family:var(--serif); font-weight:500; font-size:34px; color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.step h3{ font-size:24px; font-weight:550; line-height:1.25; }
.step .step-tag{
  display:block; margin-top:8px; font-size:12px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.step p{ font-size:16px; line-height:1.7; color:var(--bone-dim); }
.section--paper .step{ border-color:var(--line-paper); }
.section--paper .step p{ color:var(--ink-muted); }

/* ----------------------------------------------------------------- ladder */
.ladder{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; align-items:stretch; }
.tier{
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:36px 30px;
}
.tier .tier-name{
  font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.tier h3{ font-size:25px; font-weight:550; margin-top:12px; line-height:1.2; }
.tier-price{
  font-family:var(--serif); font-weight:500; font-size:48px; line-height:1;
  margin:24px 0 6px; color:var(--bone); font-variant-numeric:tabular-nums;
}
.tier-price sup{ font-size:22px; vertical-align:super; }
.tier .tier-once{ font-size:13.5px; color:var(--muted); }
.tier ul{ margin:26px 0 32px; border-top:1px solid var(--line); }
.tier li{
  padding:11px 0 11px 22px; position:relative;
  font-size:15px; line-height:1.55; color:var(--bone-dim);
  border-bottom:1px solid var(--line);
}
.tier li::before{ content:"—"; position:absolute; left:0; color:var(--gold); }
.tier-cta{ margin-top:auto; }
.tier-anchor{
  background:var(--paper); color:var(--ink-text);
  border:1px solid var(--line-gold);
  box-shadow:0 0 0 1px var(--line-gold);
  transform:translateY(-12px);
  padding:44px 34px;
}
.tier-anchor h3, .tier-anchor .tier-price{ color:var(--ink-text); }
.tier-anchor .tier-name{ color:var(--gold-deep); }
.tier-anchor .tier-once{ color:var(--ink-muted); }
.tier-anchor ul{ border-color:var(--line-paper); }
.tier-anchor li{ color:var(--ink-muted); border-color:var(--line-paper); }
.tier-anchor li::before{ color:var(--gold-deep); }
.tier-anchor .tier-flag{
  display:inline-block; margin-bottom:16px; padding:5px 12px;
  border:1px solid var(--line-gold); border-radius:999px;
  font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-deep);
}

/* ----------------------------------------------------------------- inside */
.inside{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.inside-row{
  display:grid; grid-template-columns:64px 1fr auto; gap:24px; align-items:baseline;
  padding:22px 28px; background:var(--surface);
}
.inside-row + .inside-row{ border-top:1px solid var(--line); }
.inside-row .idx{
  font-family:var(--serif); font-size:17px; color:var(--gold); font-variant-numeric:tabular-nums;
}
.inside-row h4{ font-size:18px; font-weight:550; }
.inside-row p{ font-size:14.5px; color:var(--muted); margin-top:4px; line-height:1.6; }
.inside-row .meta{
  font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
}
.section--paper .inside{ border-color:var(--line-paper); }
.section--paper .inside-row{ background:var(--paper-2); }
.section--paper .inside-row + .inside-row{ border-color:var(--line-paper); }
.section--paper .inside-row p, .section--paper .inside-row .meta{ color:var(--ink-muted); }

/* -------------------------------------------------------------- guarantee */
.guarantee{
  background:var(--paper); color:var(--ink-text);
  border-top:1px solid var(--line-paper); border-bottom:1px solid var(--line-paper);
}
.guarantee .wrap{
  display:flex; gap:40px; align-items:center; padding-top:64px; padding-bottom:64px;
}
.guarantee .seal{ flex:none; width:104px; height:104px; }
.guarantee h2{ color:var(--ink-text); font-size:clamp(26px, 3.4vw, 34px); line-height:1.15; }
.guarantee p{ margin-top:12px; max-width:62ch; font-size:16.5px; line-height:1.7; color:var(--ink-muted); }
.guarantee p b{ color:var(--ink-text); font-weight:600; }

/* -------------------------------------------------------------------- faq */
.faq{ max-width:820px; }
.faq details{ border-bottom:1px solid var(--line); }
.faq details:first-child{ border-top:1px solid var(--line); }
.section--paper .faq details{ border-color:var(--line-paper); }
.faq summary{
  list-style:none; cursor:pointer; min-height:44px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px 4px;
  font-family:var(--serif); font-size:19.5px; font-weight:550; line-height:1.35; color:var(--bone);
}
.section--paper .faq summary{ color:var(--ink-text); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; flex:none; font-family:var(--sans); font-weight:400; font-size:22px; color:var(--gold);
}
.faq details[open ] summary::after{ content:"–"; }
.faq .faq-body{ padding:0 4px 24px; max-width:66ch; font-size:16px; line-height:1.7; color:var(--bone-dim); }
.section--paper .faq .faq-body{ color:var(--ink-muted); }

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:14px 28px; border-radius:8px;
  font-family:var(--sans); font-size:16px; font-weight:600; line-height:1.2;
  border:1px solid transparent; cursor:pointer; text-align:center;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-gold{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.btn-gold:hover{ background:var(--gold-bright); border-color:var(--gold-bright); color:var(--ink); }
.btn-ghost{ background:transparent; border-color:var(--line); color:var(--bone); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--bone); }
.section--paper .btn-ghost{ border-color:var(--line-paper); color:var(--ink-text); }
.section--paper .btn-ghost:hover{ border-color:var(--gold-deep); color:var(--ink-text); }
.btn[disabled ], .btn-buy[disabled ]{ opacity:.55; cursor:not-allowed; }

/* ------------------------------------------------------------ product hero */
.product-hero{ padding:calc(var(--nav-h) + 64px) 0 96px; }
.product-hero .wrap{
  display:grid; grid-template-columns:1.25fr .85fr; gap:64px; align-items:start;
}
.product-hero .kicker{ display:block; margin-bottom:18px; }
.product-title{
  font-size:clamp(36px, 4.8vw, 52px); font-weight:500; line-height:1.06; letter-spacing:-.01em;
}
.product-hero .lede{ margin-top:22px; font-size:19px; line-height:1.65; color:var(--bone-dim); max-width:54ch; }
.product-hero .prose{ margin-top:28px; max-width:62ch; }
.product-hero .prose p{ margin-bottom:18px; color:var(--bone-dim); font-size:16.5px; }
.product-hero .prose h3{ font-size:22px; margin:34px 0 12px; }

/* ---------------------------------------------------------------- buy box */
.buy-box{
  position:sticky; top:calc(var(--nav-h) + 24px);
  background:var(--paper); color:var(--ink-text);
  border:1px solid var(--line-gold); border-radius:var(--radius);
  padding:32px 30px;
  box-shadow:0 24px 48px rgba(0,0,0,.35);
}
.buy-box .buy-kicker{
  font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep);
}
.buy-box .buy-price{
  font-family:var(--serif); font-weight:500; font-size:50px; line-height:1;
  margin:14px 0 4px; font-variant-numeric:tabular-nums;
}
.buy-box .buy-was{ font-size:14px; color:var(--ink-muted); }
.buy-box .buy-was s{ text-decoration-color:var(--gold-deep); }
.includes{ margin:24px 0; border-top:1px solid var(--line-paper); }
.includes li{
  position:relative; padding:10px 0 10px 24px;
  font-size:14.5px; line-height:1.55; color:var(--ink-muted);
  border-bottom:1px solid var(--line-paper);
}
.includes li::before{ content:"—"; position:absolute; left:0; color:var(--gold-deep); }
.includes li b{ color:var(--ink-text); font-weight:600; }
.btn-buy{
  display:flex; width:100%; align-items:center; justify-content:center;
  min-height:56px; padding:16px 24px; border-radius:8px; border:1px solid var(--gold);
  background:var(--gold); color:var(--ink);
  font-family:var(--sans); font-size:17px; font-weight:700; cursor:pointer;
  transition:background .15s ease;
}
.btn-buy:hover{ background:var(--gold-bright); }
.buy-box .guarantee-note{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line-paper);
  font-size:13.5px; line-height:1.6; color:var(--ink-muted); text-align:center;
}
.buy-box .secure-note{ margin-top:8px; font-size:12.5px; color:var(--ink-muted); text-align:center; }

/* ----------------------------------------------------------- recovery form */
.recovery-form{
  max-width:560px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); padding:36px 32px;
}
.recovery-form label{
  display:block; font-size:12.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:10px;
}
.recovery-form input[type="email"], .recovery-form input[type="text"]{
  width:100%; min-height:52px; padding:13px 16px;
  background:var(--ink); border:1px solid var(--line); border-radius:8px;
  color:var(--bone); font-family:var(--sans); font-size:16px;
}
.recovery-form input::placeholder{ color:var(--muted); }
.recovery-form input:focus{ border-color:var(--gold); outline:none; }
.recovery-form .btn, .recovery-form button{ width:100%; margin-top:16px; }
.recovery-form .form-note{ margin-top:16px; font-size:13.5px; line-height:1.6; color:var(--muted); }
.recovery-form .form-msg{ margin-top:16px; font-size:15px; line-height:1.6; }
.recovery-form .form-msg--ok{ color:var(--gold-bright); }
.recovery-form .form-msg--err{ color:#D8A08A; }

/* ------------------------------------------------------------ download list */
.download-list{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.download-list li{
  display:flex; align-items:center; gap:20px;
  padding:20px 26px; background:var(--surface);
}
.download-list li + li{ border-top:1px solid var(--line); }
.download-list .dl-name{ font-family:var(--serif); font-size:18px; font-weight:550; color:var(--bone); }
.download-list .dl-meta{ font-size:13px; color:var(--muted); margin-top:2px; }
.download-list .btn{ margin-left:auto; flex:none; min-height:44px; padding:10px 20px; font-size:14.5px; }

/* ----------------------------------------------------------------- footer */
.site-footer{
  background:var(--ink-2); border-top:1px solid var(--line);
  padding:72px 0 40px; font-size:14.5px;
}
.site-footer .cols{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:48px;
}
.site-footer .wordmark{
  display:flex; align-items:center; gap:12px;
  font-family:var(--serif); font-weight:560; font-size:15px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--bone);
}
.site-footer .wordmark img,.site-footer .wordmark svg{ width:32px; height:32px; }
.site-footer .brand-line{ margin-top:16px; max-width:34ch; line-height:1.65; color:var(--muted); font-size:14px; }
.site-footer h4{
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:18px;
}
.site-footer .cols li{ margin-bottom:6px; }
.site-footer .cols a{
  color:var(--bone-dim); display:inline-flex; align-items:center; min-height:32px; padding:4px 0;
}
.site-footer .cols a:hover{ color:var(--bone); }
.site-footer .fine-print{
  margin-top:56px; padding-top:28px; border-top:1px solid var(--line);
  font-size:12.5px; line-height:1.7; color:var(--muted); max-width:88ch;
}
.site-footer .fine-print p + p{ margin-top:10px; }
.site-footer .colophon{
  margin-top:24px; display:flex; flex-wrap:wrap; gap:8px 28px;
  font-size:12.5px; color:var(--muted);
}

/* ============================================================== responsive */
@media (max-width:1020px){
  .product-hero .wrap{ grid-template-columns:1fr; gap:44px; }
  .buy-box{ position:static; }
  .step{ grid-template-columns:72px 1fr; }
  .step p{ grid-column:2; }
  .site-footer .cols{ grid-template-columns:1fr 1fr; gap:40px; }
}
@media (max-width:820px){
  .site-nav nav a:not(.nav-cta){ display:none; }
  .site-nav nav{ gap:0; }
  .hero{ padding:calc(var(--nav-h) + 64px) 0 64px; }
  .hero-proof{ grid-template-columns:1fr 1fr; gap:28px 24px; margin-top:48px; }
  .section{ padding:72px 0; }
  .section-head{ margin-bottom:40px; }
  .problem-grid{ grid-template-columns:1fr; }
  .ladder{ grid-template-columns:1fr; gap:16px; }
  .tier-anchor{ transform:none; }
  .guarantee .wrap{ flex-direction:column; align-items:flex-start; gap:28px; padding-top:48px; padding-bottom:48px; }
  .inside-row{ grid-template-columns:44px 1fr; }
  .inside-row .meta{ grid-column:2; }
}
@media (max-width:480px){
  body{ font-size:16.5px; }
  .wrap{ padding:0 20px; }
  .hero-ctas .btn{ width:100%; }
  .hero-proof{ grid-template-columns:1fr 1fr; }
  .strip .wrap{ gap:8px 24px; }
  .step{ grid-template-columns:52px 1fr; gap:20px; padding:28px 0; }
  .step .step-num{ font-size:26px; }
  .buy-box{ padding:28px 22px; }
  .recovery-form{ padding:28px 22px; }
  .download-list li{ flex-wrap:wrap; }
  .download-list .btn{ margin-left:0; width:100%; }
  .site-footer .cols{ grid-template-columns:1fr; gap:32px; }
  .faq summary{ font-size:18px; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}

/* ------------------------------------------------------ coordinator QA fix
   Build QA (2026-10-23): at ≤640px the wordmark + long nav CTA exceed the
   viewport and the CTA clipped mid-word. The hero carries the same CTA
   immediately below the bar, so the bar keeps just the wordmark on phones. */
@media (max-width: 640px){
  .site-nav .nav-cta{ display:none; }
}