:root{
    --sand:#FBF4E9; --cream:#F6EDDD; --paper:#FFFBF4;
    --ink:#3B2C22; --ink-soft:#6A584A;
    --clay:#C2613B; --clay-deep:#A6492A;
    --ochre:#E3A23C; --ochre-soft:#F0C97E;
    --sage:#79865A; --sage-deep:#5C6943;
    --blush:#EFCFA8;
    --line:#E7D9C3;
    --shadow:0 18px 40px -20px rgba(90,55,30,.35);
    --maxw:1180px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:"Mulish",sans-serif; color:var(--ink); background:var(--sand);
    line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  }
  /* grain overlay */
  body::after{
    content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.045;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  h1,h2,h3,.serif{font-family:"Fraunces",serif; font-weight:500; line-height:1.08; letter-spacing:-.01em}
  .amp{font-style:italic; color:var(--clay)}
  .lg-and{font-style:italic; font-weight:400; color:var(--ink-soft); font-size:.62em; padding:0 .05em}
  a{color:inherit; text-decoration:none}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
  .eyebrow{font-family:"Mulish"; font-weight:700; text-transform:uppercase; letter-spacing:.18em; font-size:12px; color:var(--clay)}

  /* nav */
  nav{position:sticky; top:0; z-index:100; backdrop-filter:blur(8px);
    background:rgba(251,244,233,.82); border-bottom:1px solid var(--line)}
  .nav-in{display:flex; align-items:center; justify-content:space-between; height:70px}
  .logo{display:flex; align-items:center; gap:10px; font-family:"Fraunces"; font-size:22px; font-weight:600}
  .logo svg{width:30px; height:30px; flex:none}
  .nav-links{display:flex; gap:30px; font-weight:600; font-size:14.5px}
  .nav-links a{color:var(--ink-soft); transition:color .2s}
  .nav-links a:hover{color:var(--clay)}
  .btn{display:inline-block; background:var(--clay); color:var(--paper); padding:11px 22px;
    border-radius:40px; font-weight:700; font-size:14.5px; border:none; cursor:pointer;
    transition:transform .2s, background .2s; box-shadow:0 8px 18px -8px rgba(166,73,42,.6)}
  .btn:hover{background:var(--clay-deep); transform:translateY(-2px)}
  .btn-ghost{background:transparent; color:var(--clay); box-shadow:none; border:1.5px solid var(--clay)}
  .btn-ghost:hover{background:var(--clay); color:var(--paper)}

  /* hero */
  .hero{position:relative; overflow:hidden;
    background:
      radial-gradient(120% 90% at 80% -10%, var(--ochre-soft) 0%, rgba(240,201,126,0) 55%),
      radial-gradient(90% 80% at 10% 110%, #EAD9BE 0%, rgba(234,217,190,0) 60%),
      var(--sand);
  }
  .hero-in{display:grid; grid-template-columns:1.05fr .95fr; gap:30px; align-items:center;
    padding:64px 28px 78px; max-width:var(--maxw); margin:0 auto}
  .pill{display:inline-flex; align-items:center; gap:8px; background:var(--paper);
    border:1px solid var(--line); padding:7px 15px; border-radius:30px; font-size:13px;
    font-weight:600; color:var(--sage-deep); margin-bottom:22px}
  .pill .dot{width:8px; height:8px; border-radius:50%; background:var(--sage); display:inline-block}
  .hero h1{font-size:clamp(40px,5.4vw,68px); margin-bottom:20px}
  .hero p.lead{font-size:clamp(17px,1.5vw,20px); color:var(--ink-soft); max-width:30em; margin-bottom:30px}
  .hero-cta{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
  .hero-note{font-size:13.5px; color:var(--ink-soft); margin-top:18px}
  .hero-art{position:relative; display:flex; justify-content:center; align-items:center; min-height:470px}
  .emblem{width:min(420px,92%); height:auto; overflow:visible; filter:drop-shadow(0 24px 34px rgba(120,70,35,.22))}
  .glow{transform-box:fill-box; transform-origin:center; animation:glow 5.5s ease-in-out infinite}
  .mote{transform-box:fill-box; opacity:0; animation:drift 6.5s ease-in-out infinite}
  .sprig-sway{transform-box:fill-box; animation:sway 6s ease-in-out infinite}

  @keyframes glow{0%,100%{opacity:.45; transform:scale(1)} 50%{opacity:.8; transform:scale(1.07)}}
  @keyframes drift{0%{opacity:0; transform:translateY(8px)} 18%{opacity:.85} 100%{opacity:0; transform:translateY(-118px)}}
  @keyframes sway{0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)}}
  @keyframes fadeUp{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:translateY(0)}}
  @keyframes floaty{0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)}}
  .reveal{opacity:0; animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) forwards}
  .d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.31s}.d4{animation-delay:.44s}.d5{animation-delay:.57s}
  .emblem{animation:floaty 8s ease-in-out infinite}

  /* trust strip */
  .strip{background:var(--ink); color:var(--sand); font-family:"Mulish"; font-weight:600}
  .strip-in{display:flex; flex-wrap:wrap; gap:10px 38px; justify-content:center; padding:16px 28px;
    font-size:14px; letter-spacing:.01em}
  .strip-in span{display:inline-flex; align-items:center; gap:9px; color:var(--ochre-soft)}
  .strip-in span b{color:var(--sand); font-weight:600}
  .strip-in .sep{color:var(--clay)}

  /* sections */
  section{padding:88px 0}
  .section-head{max-width:38em; margin-bottom:50px}
  .section-head h2{font-size:clamp(30px,3.6vw,46px); margin:14px 0 16px}
  .section-head p{color:var(--ink-soft); font-size:17px}

  .gap{background:var(--cream)}
  .gap .wrap{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
  .gap blockquote{font-family:"Fraunces"; font-size:clamp(24px,2.6vw,34px); line-height:1.28; font-weight:400}
  .gap blockquote b{color:var(--clay); font-weight:600; font-style:italic}
  .gap .gap-body p{color:var(--ink-soft); margin-bottom:16px; font-size:16.5px}

  /* cards */
  .cards{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
  .card{background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:30px 26px;
    transition:transform .25s, box-shadow .25s}
  .card:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
  .card .ic{width:48px; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center;
    margin-bottom:18px; background:var(--cream)}
  .card .ic svg{width:26px; height:26px}
  .card h3{font-size:21px; margin-bottom:9px}
  .card p{font-size:15px; color:var(--ink-soft)}

  /* in / out */
  .inout{background:
    linear-gradient(180deg, var(--sand), var(--cream));}
  .inout-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
  .panel{border-radius:22px; padding:38px 34px}
  .panel.inn{background:var(--sage-deep); color:#F2F0E0}
  .panel.out{background:var(--paper); border:1px solid var(--line)}
  .panel h3{font-size:25px; margin-bottom:22px; display:flex; align-items:center; gap:11px}
  .panel ul{list-style:none}
  .panel li{display:flex; align-items:center; gap:13px; padding:11px 0; font-weight:600; font-size:16px;
    border-bottom:1px dashed rgba(0,0,0,.08)}
  .panel.inn li{border-bottom:1px dashed rgba(255,255,255,.16)}
  .panel li:last-child{border-bottom:none}
  .tick{flex:none; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800}
  .tick.y{background:var(--ochre); color:var(--sage-deep)}
  .tick.n{background:#EAD7C2; color:var(--clay-deep)}

  /* steps */
  .steps{background:var(--clay); color:var(--paper); position:relative; overflow:hidden}
  .steps .section-head h2,.steps .eyebrow{color:var(--paper)}
  .steps .eyebrow{opacity:.85}
  .steps .section-head p{color:rgba(255,251,244,.85)}
  .step-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
  .step{background:rgba(255,251,244,.1); border:1px solid rgba(255,251,244,.22); border-radius:20px; padding:32px 28px; backdrop-filter:blur(2px)}
  .step .num{font-family:"Fraunces"; font-size:46px; font-weight:600; color:var(--ochre-soft); line-height:1}
  .step h3{font-size:22px; margin:14px 0 8px}
  .step p{color:rgba(255,251,244,.86); font-size:15.5px}
  .steps .fineprint{margin-top:30px; font-size:14px; color:rgba(255,251,244,.8); display:flex; gap:10px; align-items:flex-start; max-width:46em}

  /* family */
  .fam .wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:50px; align-items:center}
  .badges{display:flex; gap:22px}
  .badge{flex:1; aspect-ratio:1; border-radius:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; box-shadow:var(--shadow)}
  .badge .nm{font-family:"Fraunces"; font-size:30px; font-weight:600}
  .badge .lb{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; opacity:.8}
  .badge.k{background:var(--ochre); color:var(--ink)}
  .badge.a{background:var(--sage); color:var(--paper)}
  .fam h2{font-size:clamp(28px,3.4vw,42px); margin-bottom:16px}
  .fam p{color:var(--ink-soft); font-size:17px; margin-bottom:14px}

  /* founder */
  .founder{background:var(--ink); color:var(--sand)}
  .founder .wrap{max-width:760px; text-align:center}
  .founder .eyebrow{color:var(--ochre)}
  .founder-h{font-size:clamp(28px,3.4vw,42px); margin:14px 0 24px; color:var(--sand)}
  .founder .body{font-size:17px; line-height:1.78; color:rgba(251,244,233,.86); margin:0 auto 18px; max-width:62ch; text-align:left}
  .founder .sign{font-family:"Fraunces"; font-style:italic; font-size:20px; color:var(--ochre-soft)}
  .founder .sign small{display:block; font-family:"Mulish"; font-style:normal; font-size:13px; color:rgba(251,244,233,.6); letter-spacing:.04em; margin-top:6px; text-transform:uppercase}

  /* signup */
  .signup{background:
    radial-gradient(100% 120% at 50% -20%, var(--ochre-soft), rgba(240,201,126,0) 60%),
    var(--cream); text-align:center}
  .signup .wrap{max-width:640px}
  .signup h2{font-size:clamp(30px,3.6vw,46px); margin-bottom:14px}
  .signup p{color:var(--ink-soft); font-size:17px; margin-bottom:28px}
  form{display:flex; gap:10px; max-width:460px; margin:0 auto; flex-wrap:wrap; justify-content:center}
  form input{flex:1; min-width:220px; padding:14px 18px; border-radius:40px; border:1.5px solid var(--line);
    background:var(--paper); font-family:"Mulish"; font-size:15px; color:var(--ink)}
  form input:focus{outline:none; border-color:var(--clay)}
  .thanks{display:none; font-family:"Fraunces"; font-size:22px; color:var(--sage-deep)}
  .thanks.show{display:block; animation:fadeUp .6s forwards}
  .thanks.err{color:var(--clay-deep)}

  /* footer */
  footer{background:var(--ink); color:rgba(251,244,233,.7); padding:54px 0 30px; font-size:14px}
  .foot-top{display:flex; justify-content:space-between; align-items:flex-start; gap:30px; flex-wrap:wrap; padding-bottom:30px; border-bottom:1px solid rgba(255,255,255,.12)}
  .foot-logo{font-family:"Fraunces"; font-size:24px; color:var(--sand); display:flex; align-items:center; gap:9px}
  .foot-logo svg{width:28px;height:28px}
  .foot-logo .lg-and{color:rgba(251,244,233,.55)}
  .foot-tag{color:rgba(251,244,233,.6); margin-top:8px; max-width:24em}
  .foot-links{display:flex; gap:40px; flex-wrap:wrap}
  .foot-col b{color:var(--sand); display:block; margin-bottom:12px; font-family:"Mulish"; font-size:13px; text-transform:uppercase; letter-spacing:.1em}
  .foot-col a{display:block; color:rgba(251,244,233,.7); padding:4px 0; transition:color .2s}
  .foot-col a:hover{color:var(--ochre-soft)}
  .foot-bottom{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-top:24px; font-size:12.5px; color:rgba(251,244,233,.5)}

  @media(max-width:880px){
    .nav-links{display:none}
    .hero-in{grid-template-columns:1fr; text-align:center}
    .hero p.lead{margin-left:auto;margin-right:auto}
    .hero-cta{justify-content:center}
    .hero-art{order:-1; margin-bottom:10px}
    .gap .wrap,.fam .wrap{grid-template-columns:1fr; gap:30px}
    .cards{grid-template-columns:1fr 1fr}
    .inout-grid,.step-grid{grid-template-columns:1fr}
    section{padding:64px 0}
  }
  @media(max-width:520px){ .cards{grid-template-columns:1fr} .badges{gap:14px} }

/* === multi-page additions === */
.nav-right{display:flex; align-items:center; gap:12px}
.nav-links a.active{color:var(--clay)}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px; color:var(--ink)}
.nav-toggle svg{width:26px; height:26px; display:block}

.phero{position:relative; overflow:hidden; text-align:center;
  background:radial-gradient(120% 130% at 50% -30%, var(--ochre-soft), rgba(240,201,126,0) 60%), var(--sand);
  padding:78px 28px 66px; border-bottom:1px solid var(--line)}
.phero .wrap{max-width:780px}
.phero h1{font-size:clamp(34px,4.8vw,58px); margin:14px 0 16px}
.phero p{font-size:clamp(16px,1.5vw,19px); color:var(--ink-soft); max-width:36em; margin:0 auto}

.prose{max-width:64ch}
.prose.center{margin:0 auto; text-align:center}
.prose p{color:var(--ink-soft); font-size:17px; line-height:1.8; margin-bottom:18px}
.lede{font-family:"Fraunces"; font-size:clamp(22px,2.4vw,30px); line-height:1.34; color:var(--ink); margin-bottom:22px; font-weight:400}

.split{display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center}
.split .art{display:flex; justify-content:center}
.split .art .emblem{width:min(360px,90%)}

.compare{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.cmp{border-radius:22px; padding:34px 30px}
.cmp.good{background:var(--sage-deep); color:#F2F0E0}
.cmp.meh{background:var(--paper); border:1px solid var(--line)}
.cmp h3{font-size:23px; margin-bottom:4px}
.cmp .sub{font-size:12px; text-transform:uppercase; letter-spacing:.12em; opacity:.72; margin-bottom:18px; font-weight:700}
.cmp ul{list-style:none}
.cmp li{padding:11px 0; font-size:15.5px; border-bottom:1px dashed rgba(0,0,0,.08)}
.cmp.good li{border-bottom:1px dashed rgba(255,255,255,.16)}
.cmp li:last-child{border-bottom:none}

.spec{max-width:780px; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--paper)}
.spec .row{display:grid; grid-template-columns:210px 1fr; gap:18px; padding:15px 26px; border-bottom:1px solid var(--line)}
.spec .row:last-child{border-bottom:none}
.spec dt{font-weight:700; color:var(--ink)}
.spec dd{color:var(--ink-soft)}

.faq{max-width:800px; margin:0 auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:20px 4px; font-family:"Fraunces"; font-size:20px; font-weight:500; display:flex; justify-content:space-between; align-items:center; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--clay); font-size:26px; line-height:1; font-family:"Mulish"}
.faq details[open] summary::after{content:"\2013"}
.faq .ans{padding:0 4px 22px; color:var(--ink-soft); font-size:16px; line-height:1.78; max-width:66ch}

.cta{background:var(--clay); color:var(--paper); text-align:center}
.cta .wrap{max-width:640px}
.cta .eyebrow{color:var(--ochre-soft)}
.cta h2{color:var(--paper); font-size:clamp(28px,3.4vw,42px); margin:12px 0 16px}
.cta p{color:rgba(255,251,244,.9); margin-bottom:24px; font-size:17px}
.cta .btn{background:var(--paper); color:var(--clay)}
.cta .btn:hover{background:var(--sand); color:var(--clay-deep)}

.cards.three{grid-template-columns:repeat(3,1fr)}

.contact-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:38px; align-items:start}
.contact-card{background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:34px}
.contact-card h3{font-size:22px; margin-bottom:12px}
.contact-card p{color:var(--ink-soft); margin-bottom:10px; font-size:16px}
.contact-card a.lnk{color:var(--clay); font-weight:700}
.contact-card form{margin:6px 0 0}

@media(max-width:880px){
  .nav-toggle{display:block}
  .nav-links{display:none; position:absolute; top:70px; left:0; right:0; flex-direction:column; gap:0;
    background:var(--sand); border-bottom:1px solid var(--line); padding:6px 0; box-shadow:var(--shadow)}
  nav.open .nav-links{display:flex}
  .nav-links a{padding:14px 28px; font-size:16px}
  .logo{font-size:19px; gap:8px}
  .logo svg{width:26px; height:26px}
  .nav-right{gap:8px}
  .nav-right .btn{padding:9px 15px; font-size:13px; white-space:nowrap}
  .split,.compare,.contact-grid{grid-template-columns:1fr; gap:30px}
  .cards.three{grid-template-columns:1fr}
}
@media(max-width:430px){
  .logo{font-size:16px; gap:6px}
  .logo svg{width:23px; height:23px}
  .nav-right .btn{padding:8px 13px; font-size:12.5px}
}