:root{
    --mint:#4E8968; --mint-dark:#3B6B52; --mint-soft:#EAF2ED; --mint-line:#CFE0D6;
    --apricot:#D87A43; --apricot-dark:#C0632E; --apricot-soft:#FBEDE2;
    --ground:#FAF9F6; --surface:#FFFFFF;
    --ink:#2A2A28; --muted:#6B6F6C; --faint:#9A9C98;
    --border:#ECE7DE; --border-strong:#E0D9CC;
    --sans:'Outfit',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    --sh-sm:0 1px 2px rgba(60,50,35,.05),0 3px 10px rgba(60,50,35,.05);
    --sh-md:0 10px 28px rgba(60,50,35,.09);
    --sh-lg:0 22px 50px rgba(59,107,82,.16);
    --maxw:1120px;
  }
  *{box-sizing:border-box}
  body{margin:0; font-family:var(--sans); color:var(--ink)}
  .page{font-family:var(--sans); color:var(--ink); background:var(--ground); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem)}
  h1,h2,h3,h4{margin:0; font-weight:800; letter-spacing:-.02em; line-height:1.12; text-wrap:balance}
  p{margin:0}
  a{text-decoration:none; color:inherit}
  .eyebrow{font-size:.74rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--mint)}
  .btn{font-family:var(--sans); font-weight:700; font-size:1rem; border-radius:999px; padding:.85rem 1.7rem; border:1.5px solid transparent; cursor:pointer; display:inline-flex; align-items:center; gap:.55rem; transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
  .btn:hover{transform:translateY(-2px)}
  .btn-apricot{background:var(--apricot); color:#fff; box-shadow:0 8px 22px rgba(216,122,67,.30)}
  .btn-apricot:hover{background:var(--apricot-dark)}
  .btn-mint{background:var(--mint); color:#fff; box-shadow:0 8px 22px rgba(78,137,104,.28)}
  .btn-ghost{background:transparent; border-color:var(--mint); color:var(--mint-dark)}
  .btn-ghost:hover{background:var(--mint-soft)}
  .btn-sm{padding:.6rem 1.25rem; font-size:.9rem}

  /* nav */
  .nav{position:sticky; top:0; z-index:50; background:rgba(250,249,246,.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--border)}
  .nav .row{display:flex; align-items:center; justify-content:space-between; height:72px}
  .brand{display:flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.4rem; color:var(--mint-dark)}
  .brand svg{display:block; transition:transform .2s ease}
  .brand:hover svg{transform:rotate(-6deg) scale(1.06)}
  .nav-links{display:flex; gap:2rem; align-items:center}
  .nav-links a{font-weight:600; font-size:.95rem; color:var(--muted)}
  .nav-links a:hover{color:var(--mint-dark)}

  /* hero */
  .hero{position:relative; overflow:hidden; padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,4rem)}
  .hero-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:3.5rem; align-items:center; position:relative; z-index:1}
  .hero h1{font-size:clamp(2.6rem,5.5vw,4rem); max-width:14ch}
  .hero h1 .spark{background:linear-gradient(100deg,var(--mint-dark),var(--apricot)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
  .hero .lede{font-size:clamp(1.02rem,2vw,1.2rem); color:var(--muted); max-width:46ch; margin-top:1.4rem}
  .hero .ctas{display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.2rem}
  .trust{display:flex; flex-wrap:nowrap; gap:1.25rem; margin-top:2.4rem; padding-top:1.6rem; border-top:1px solid var(--border)}
  .trust .t{display:flex; align-items:center; gap:.45rem; font-size:.82rem; font-weight:600; color:var(--muted); white-space:nowrap}
  .trust .t svg{color:var(--mint); flex:0 0 auto}
  /* hero visual */
  .stage{position:relative; height:520px}
  .stage .orbit{position:absolute; inset:0; margin:auto; width:460px; height:460px; z-index:0}
  .phone{position:absolute; border-radius:30px; box-shadow:var(--sh-lg); z-index:2; background:#fff}
  .phone img{display:block; width:100%; border-radius:30px}
  .p-main{width:214px; left:calc(50% - 107px); top:24px; z-index:3; animation:float 6s ease-in-out infinite}
  .p-left{width:196px; left:-18px; top:96px; transform:rotate(-4deg); animation:float 8s ease-in-out infinite}
  .p-right{width:196px; right:-18px; top:96px; transform:rotate(4deg); animation:float 7s ease-in-out infinite}
  @keyframes float{0%,100%{translate:0 0}50%{translate:0 -14px}}

  /* section scaffold */
  section{padding:clamp(3rem,6vw,5rem) 0}
  .center{text-align:center; max-width:56ch; margin:0 auto clamp(2rem,4vw,3rem)}
  .center .eyebrow{margin-bottom:.6rem}
  .center h2{font-size:clamp(1.8rem,3.8vw,2.6rem)}
  .center p{color:var(--muted); font-size:1.08rem; margin-top:.8rem}

  /* how it works */
  .how{background:linear-gradient(180deg,#fff,#FDFCF9); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
  .steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:1.5rem}
  .step{position:relative; background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:1.8rem 1.6rem 1.6rem; box-shadow:var(--sh-sm); overflow:hidden}
  .step::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--apricot),var(--mint))}
  .step .n{display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1.1rem}
  .step .tile{width:44px; height:44px; border-radius:13px; background:var(--mint-soft); color:var(--mint); display:flex; align-items:center; justify-content:center}
  .step .step-k{font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
  .step h3{font-size:1.25rem; margin-bottom:.5rem}
  .step p{color:var(--muted); font-size:.95rem}
  .proof{margin-top:1.3rem; border-top:1px dashed var(--border); padding-top:1.3rem}
  /* proof widgets */
  .bubble{background:var(--mint-soft); color:var(--mint-dark); border-radius:14px 14px 14px 4px; padding:.6rem .85rem; font-size:.9rem; font-weight:600; max-width:85%}
  .bubble.out{margin-left:auto; background:var(--mint); color:#fff; border-radius:14px 14px 4px 14px; margin-top:.5rem}
  .quote{display:flex; flex-direction:column; gap:.5rem}
  .qrow{display:flex; align-items:center; justify-content:space-between; font-size:.9rem}
  .qrow .svc{font-weight:700}
  .qrow .amt{font-variant-numeric:tabular-nums; font-weight:800; color:var(--mint-dark)}
  .qrow.add{color:var(--muted)}
  .qtot{margin-top:.35rem; padding-top:.55rem; border-top:1px solid var(--border); display:flex; justify-content:space-between; font-weight:800}
  .qtot .amt{color:var(--apricot-dark); font-variant-numeric:tabular-nums}
  .slot{display:flex; align-items:center; gap:.75rem; background:var(--surface); border:1px solid var(--mint-line); border-radius:12px; padding:.7rem .85rem}
  .slot .day{width:44px; text-align:center; flex:0 0 auto}
  .slot .day .d{font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); font-weight:800}
  .slot .day .num{font-size:1.3rem; font-weight:800; line-height:1}
  .slot .info{flex:1}
  .slot .info .tt{font-weight:700; font-size:.92rem}
  .slot .info .mm{font-size:.8rem; color:var(--muted)}
  .slot .ck{width:26px; height:26px; border-radius:50%; background:var(--mint); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.8rem; flex:0 0 auto}

  /* auto-reply */
  .ar-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4rem; align-items:center}
  .tabs{display:flex; gap:.5rem; margin:1.6rem 0; border-bottom:1px solid var(--border)}
  .tab{background:none; border:none; font-family:var(--sans); font-weight:700; font-size:1rem; padding:.6rem .9rem; color:var(--faint); cursor:pointer; position:relative}
  .tab.active{color:var(--mint-dark)}
  .tab.active::after{content:""; position:absolute; left:.9rem; right:.9rem; bottom:-1px; height:3px; border-radius:3px; background:var(--apricot)}
  .pane{display:none}
  .pane.active{display:block; animation:fade .4s ease}
  @keyframes fade{from{opacity:0; translate:0 8px}to{opacity:1; translate:0 0}}
  .arlist{list-style:none; padding:0; margin:1.2rem 0 0; display:flex; flex-direction:column; gap:.9rem}
  .arlist li{display:flex; gap:.7rem; font-size:.98rem; color:var(--muted)}
  .arlist li svg{color:var(--apricot); flex:0 0 auto; margin-top:.25rem}
  .ar-visual{background:radial-gradient(circle at 50% 40%,var(--apricot-soft),transparent 70%); border-radius:26px; padding:2rem; display:flex; justify-content:center}
  .ar-visual img{width:300px; border-radius:26px; box-shadow:var(--sh-lg)}

  /* closing band (merged contact + CTA) */
  .close-band{padding:clamp(2.5rem,5vw,4rem) 0}
  .band{position:relative; overflow:hidden; background:linear-gradient(135deg,var(--mint-dark),#25412F); color:#fff; border-radius:28px; padding:clamp(2.5rem,5vw,3.5rem); text-align:center; box-shadow:var(--sh-lg)}
  .band::before{content:""; position:absolute; width:320px; height:320px; border-radius:50%; top:-160px; right:-90px; background:radial-gradient(circle,rgba(78,137,104,.55),transparent 70%)}
  .band .watermark{position:absolute; left:18px; bottom:-14px; width:170px; opacity:.09; z-index:0}
  .band > *{position:relative; z-index:1}
  .band h2{font-size:clamp(1.8rem,4vw,2.7rem); max-width:20ch; margin:0 auto}
  .band p{opacity:.9; margin:1rem auto 0; max-width:52ch}
  .band .ctas{display:flex; flex-direction:column; align-items:center; gap:1rem; margin-top:2rem}
  .band .quiet{font-size:.92rem; opacity:.85}
  .band .quiet a{color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:3px}

  /* footer */
  footer{background:#232320; color:#fff; padding:3.5rem 0 2rem}
  .fgrid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:3rem; margin-bottom:3rem}
  .fbrand h4{display:flex; align-items:center; gap:.5rem; font-size:1.4rem; margin-bottom:.9rem}
  .fbrand p{color:rgba(255,255,255,.6); font-size:.92rem; max-width:320px}
  .partner{margin-top:1.3rem; background:rgba(255,255,255,.05); border-left:3px solid var(--apricot); padding:.8rem 1.1rem; border-radius:3px 10px 10px 3px; font-size:.85rem; color:rgba(255,255,255,.85)}
  .partner b{color:var(--apricot)}
  .fcol h5{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:#fff; margin-bottom:1.1rem}
  .fcol ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.7rem}
  .fcol a{color:rgba(255,255,255,.6); font-size:.9rem}
  .fcol a:hover{color:var(--mint)}
  .fbot{border-top:1px solid rgba(255,255,255,.08); padding-top:1.6rem; display:flex; justify-content:space-between; color:rgba(255,255,255,.4); font-size:.82rem}

  @media (max-width:900px){
    .nav-links{display:none}
    .hero > svg{display:none}
    .hero-grid{grid-template-columns:1fr; text-align:center; gap:2.5rem}
    .hero h1,.hero .lede{margin-left:auto; margin-right:auto}
    .hero .ctas{justify-content:center}
    .trust{flex-wrap:wrap; justify-content:center; gap:.6rem 1.25rem; padding-left:.5rem; padding-right:.5rem}
    .stage{height:360px; max-width:320px; margin:0 auto}
    .stage .orbit{width:330px; height:330px}
    .p-main{width:178px; left:calc(50% - 89px); top:14px}
    .p-left{width:136px; left:0; top:66px; transform:rotate(-4deg)}
    .p-right{width:136px; right:0; top:66px; transform:rotate(4deg)}
    .ar-grid{grid-template-columns:1fr; gap:2.5rem}
    .ar-visual{order:2}
    .fgrid{grid-template-columns:1fr; gap:2rem}
    .fbot{flex-direction:column; gap:.6rem; text-align:center}
  }
  @media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}


/* ── compat aliases so the legal modal (kept from the old page) still resolves ── */
:root{
  --bg-landing:#FAF9F6; --glass-border:rgba(60,50,35,.12); --glass-bg:rgba(255,255,255,.7);
  --shadow-lg:0 22px 50px rgba(59,107,82,.16);
  --slate-dark:#2A2A28; --slate-muted:#6B6F6C; --slate-light:#9A9C98;
  --mint-light:#EAF2ED; --mint-dark:#3B6B52; --mint-primary:#4E8968;
  --orange-primary:#D87A43; --font-title:var(--sans);
}