:root{
      --paper:#ffffff;
      --cream:#f7efdf; --cream-soft:#fbf6ec; --cream-band:#faf4e8;
      --tan:#e7d5b3; --tan-deep:#c9a86a; --tan-ink:#a9823f;
      --brand:#557a37; --brand-600:#496b2f; --brand-700:#3c5a26; --brand-050:#eef3e6; --brand-100:#dde8cd;
      --ink:#232c22; --body:#4c554a; --muted:#7b857a;
      --line:#e9e2d2; --line-strong:#dcd2bd;
      --terra:#c1663a;
      --ok:#4f9d5d;
      --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
      --serif:Georgia,"Times New Roman",serif;
      --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
      --sxs:0 1px 2px rgba(35,44,34,.06);
      --ssm:0 1px 2px rgba(35,44,34,.06),0 1px 3px rgba(35,44,34,.05);
      --smd:0 6px 18px rgba(35,44,34,.08),0 2px 6px rgba(35,44,34,.05);
      --spop:0 20px 46px -18px rgba(35,44,34,.22);
      --rc:16px; --rb:11px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--paper);color:var(--body);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
    a{color:inherit;text-decoration:none}
    h1,h2,h3{font-family:var(--serif);color:var(--ink);letter-spacing:-.01em;line-height:1.12;font-weight:700;margin:0}
    .wrap{max-width:1160px;margin:0 auto;padding:0 clamp(18px,4vw,30px)}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--brand-700)}
    .eyebrow::before{content:"";width:18px;height:2px;background:var(--tan-deep);border-radius:2px}
    .lead{font-size:clamp(16.5px,2.1vw,18.5px);color:var(--body)}
    .hl{color:var(--brand);position:relative;white-space:nowrap}
    .hl::after{content:"";position:absolute;left:-2px;right:-2px;bottom:2px;height:9px;background:var(--tan);opacity:.55;z-index:-1;border-radius:3px}
    .em-i{font-style:italic;color:var(--brand-700)}
    .em-u{position:relative;white-space:nowrap}
    .em-u::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--tan-deep);border-radius:2px}

    .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:650;font-size:15px;padding:12px 20px;border-radius:var(--rb);border:1px solid transparent;cursor:pointer;transition:.15s;white-space:nowrap}
    .btn svg{width:17px;height:17px}
    .btn-primary{background:var(--brand);color:#fff;box-shadow:var(--sxs)}
    .btn-primary:hover{background:var(--brand-600);transform:translateY(-1px);box-shadow:var(--ssm)}
    .btn-secondary{background:#fff;color:var(--ink);border-color:var(--line-strong);box-shadow:var(--sxs)}
    .btn-secondary:hover{border-color:var(--tan-deep);background:var(--cream-soft)}

    /* topbar */
    .top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
    .top .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
    .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;color:var(--ink);letter-spacing:-.01em}
    .brand .mk{width:30px;height:30px;border-radius:8px;background:var(--brand);display:flex;align-items:center;justify-content:center;box-shadow:var(--ssm)}
    .brand .mk svg{width:17px;height:17px;color:#fff}
    .nav{display:flex;align-items:center;gap:26px;font-size:14.5px;color:var(--body)}
    .nav a:hover{color:var(--ink)}
    .nav .signin{font-weight:600}
    @media(max-width:840px){.nav .ns{display:none}}

    /* hero — photo band */
    .hero{position:relative;overflow:hidden;background:#f3ead9}
    .hero-photo{position:absolute;inset:0;background:url('/img/hero-homes.jpg') center 40%/cover no-repeat}
    .hero-scrim{position:absolute;inset:0;background:
      linear-gradient(100deg,rgba(255,255,255,.985) 0%,rgba(255,255,255,.94) 30%,rgba(251,246,236,.7) 52%,rgba(247,239,223,.28) 74%,rgba(43,58,34,.28) 100%)}
    .hero-grid{position:absolute;inset:0;
      background-image:linear-gradient(rgba(60,90,38,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(60,90,38,.10) 1px,transparent 1px);
      background-size:36px 36px;mask-image:radial-gradient(760px 460px at 22% 40%,#000,transparent 72%);pointer-events:none}
    .hero .wrap{position:relative;display:grid;grid-template-columns:1.03fr .97fr;gap:52px;align-items:center;padding:clamp(58px,7.5vw,96px) clamp(18px,4vw,30px)}
    h1{font-size:clamp(36px,5.2vw,56px);margin-top:18px}
    .hero .sub{font-size:clamp(16.5px,2vw,19px);color:var(--body);margin-top:20px;max-width:520px}
    .cta-row{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
    .trust{margin-top:22px;display:flex;gap:8px 20px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
    .trust span{display:inline-flex;align-items:center;gap:7px}
    .trust svg{width:15px;height:15px;color:var(--brand)}

    /* live terminal (light) */
    .term{background:#fff;border:1px solid var(--line-strong);border-radius:var(--rc);box-shadow:var(--spop);overflow:hidden}
    .term-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;background:var(--cream-soft);border-bottom:1px solid var(--line)}
    .term-head .lbl{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.03em}
    .term-head .live{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;color:var(--brand-700);font-weight:600}
    .pdot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(79,157,93,.5);animation:pulse 2.2s infinite}
    @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(79,157,93,.5)}70%{box-shadow:0 0 0 7px rgba(79,157,93,0)}100%{box-shadow:0 0 0 0 rgba(79,157,93,0)}}
    .tabs{display:flex;gap:2px;padding:10px 12px 0;background:var(--cream-soft);overflow-x:auto;scrollbar-width:none}
    .tabs::-webkit-scrollbar{display:none}
    .tab{font-size:12.5px;font-weight:600;color:var(--muted);padding:9px 13px;border-radius:9px 9px 0 0;cursor:pointer;white-space:nowrap;border:1px solid transparent;border-bottom:none}
    .tab.on{color:var(--brand-700);background:#fff;border-color:var(--line)}
    .term-body{padding:20px}
    .mk-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
    .mk-name{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--ink)}
    .mk-cap{font-size:12.5px;color:var(--muted);margin-top:2px}
    .mk-fresh{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap;background:var(--brand-050);color:var(--brand-700);padding:4px 8px;border-radius:6px}
    .mk-big{font-family:var(--mono);font-size:33px;font-weight:700;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
    .mk-big .u{font-family:var(--sans);font-size:13px;color:var(--muted);font-weight:500;margin-left:8px}
    .lead-h{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:20px 0 4px;display:flex;justify-content:space-between}
    .brow{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
    .brk{font-family:var(--mono);font-size:12px;color:var(--tan-ink);width:16px;font-weight:600}
    .bnm{font-size:14px;font-weight:600;color:var(--ink);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .bbar{height:7px;border-radius:4px;background:linear-gradient(90deg,var(--brand),var(--tan-deep));flex:0 0 auto}
    .bct{font-family:var(--mono);font-size:12.5px;color:var(--body);width:44px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
    .term-foot{padding:12px 16px;border-top:1px solid var(--line);background:var(--cream-soft);display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11px;color:var(--muted)}
    .term-foot a{color:var(--brand-700);font-weight:600}

    /* bands + sections */
    .section{padding:clamp(56px,8vw,92px) 0}
    .tex-warm{position:relative;overflow:hidden}
    .tex-warm::before{content:"";position:absolute;left:-140px;top:-60px;width:460px;height:460px;border-radius:50%;
      background:radial-gradient(circle,var(--cream) 0%,transparent 62%);pointer-events:none;z-index:0}
    .tex-warm .wrap{position:relative;z-index:1}

    /* plat-map behind Why */
    #why{position:relative;overflow:hidden}
    #why .wrap{position:relative;z-index:1}
    .plat{position:absolute;top:-24px;right:-46px;width:min(640px,58%);opacity:.16;pointer-events:none;z-index:0;
      -webkit-mask-image:radial-gradient(closest-side,#000 52%,transparent 84%);mask-image:radial-gradient(closest-side,#000 52%,transparent 84%)}
    .plat svg{width:100%;height:auto;display:block}
    /* registration-tick cards */
    .card::before,.card::after{content:"";position:absolute;width:13px;height:13px;pointer-events:none}
    .card::before{top:10px;left:10px;border-top:1.5px solid var(--tan-deep);border-left:1.5px solid var(--tan-deep)}
    .card::after{bottom:10px;right:10px;border-bottom:1.5px solid var(--tan-deep);border-right:1.5px solid var(--tan-deep)}
    .card:hover{box-shadow:var(--smd),inset 0 3px 0 var(--brand)}
    /* warm drafting grid */
    .tex-draft{position:relative;overflow:hidden}
    .tex-draft::before{content:"";position:absolute;inset:0;pointer-events:none;
      background-image:linear-gradient(rgba(201,168,106,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,106,.10) 1px,transparent 1px),linear-gradient(rgba(201,168,106,.20) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,106,.20) 1px,transparent 1px);
      background-size:24px 24px,24px 24px,120px 120px,120px 120px;
      -webkit-mask-image:radial-gradient(130% 86% at 50% 0%,#000 40%,transparent 100%);mask-image:radial-gradient(130% 86% at 50% 0%,#000 40%,transparent 100%)}
    .tex-draft .wrap{position:relative;z-index:1}
    /* elevated winner column (compare) */
    .cmp .winner{position:absolute;top:0;bottom:-12px;left:41.2%;width:29.4%;background:#fff;border:1px solid var(--line-strong);border-radius:14px;box-shadow:0 18px 40px -12px rgba(44,67,39,.20);z-index:0}
    .cmp-row>div{position:relative;z-index:1}
    .cmp-row>div:not(:last-child){border-right:none}
    .cmp-row>div{border-bottom:1px dotted var(--tan)}
    .cmp-row:last-child>div{border-bottom:none}
    .cmp .us{background:transparent;color:var(--ink);font-weight:650}
    .cmp .them{background:rgba(250,244,232,.55);color:var(--muted)}
    .cmp-row.head .us{background:var(--brand);color:#fff;border-radius:13px 13px 0 0}

    /* closer-look builder profile */
    .look{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
    .look-list{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:12px}
    .look-list li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--body)}
    .look-list li svg{width:20px;height:20px;color:var(--brand);flex:0 0 auto;margin-top:1px}
    .pcard{background:#fff;border:1px solid var(--line-strong);border-radius:var(--rc);box-shadow:var(--spop);overflow:hidden}
    .pcard-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line);background:var(--cream-soft)}
    .pcard-h .nm{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--ink)}
    .pcard-h .mkt{font-size:12.5px;color:var(--muted);margin-top:2px}
    .badge-up{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--brand-700);background:var(--brand-050);border:1px solid var(--brand-100);padding:4px 9px;border-radius:999px;white-space:nowrap}
    .badge-up svg{width:13px;height:13px}
    .pcard-b{padding:18px 20px}
    .pcard-stat{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
    .pcard-stat .big{font-family:var(--mono);font-size:29px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
    .pcard-stat .big span{display:block;font-family:var(--sans);font-size:12px;color:var(--muted);font-weight:500;margin-top:5px}
    .spark{width:118px;height:40px;flex:0 0 auto}
    .pl-h{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:20px 0 2px}
    .prow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
    .prow .addr{font-size:13.5px;color:var(--ink);font-weight:600}
    .prow .psub{font-size:11.5px;color:var(--muted);margin-top:1px}
    .prow .pval{font-family:var(--mono);font-size:13px;color:var(--brand-700);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
    .pcard-f{padding:13px 20px;border-top:1px solid var(--line);background:var(--cream-soft);font-size:13px}
    .pcard-f a{color:var(--brand-700);font-weight:600}
    /* trades chips */
    .trades{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
    .chip{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line-strong);border-radius:999px;padding:10px 17px;font-size:14px;font-weight:600;color:var(--ink);box-shadow:var(--sxs);transition:.15s}
    .chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tan-deep);flex:0 0 auto}
    .chip:hover{border-color:var(--brand);color:var(--brand-700);transform:translateY(-1px);box-shadow:var(--ssm)}
    .chip:hover::before{background:var(--brand)}
    /* faq */
    .faq{margin-top:36px;max-width:840px}
    .qa{border-top:1px solid var(--line);padding:22px 0}
    .qa:last-child{border-bottom:1px solid var(--line)}
    .qa h3{font-family:var(--serif);font-size:18.5px;color:var(--ink);margin:0 0 7px}
    .qa p{margin:0;font-size:15px;color:var(--body);max-width:760px}
    /* footer upgrade */
    .foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px;padding-bottom:32px;border-bottom:1px solid var(--line)}
    .foot-brand p{font-size:13.5px;color:var(--muted);margin:12px 0 0;max-width:290px;line-height:1.6}
    .foot-col h4{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;font-weight:700}
    .foot-col a{display:block;color:var(--body);font-size:14px;padding:5px 0}
    .foot-col a:hover{color:var(--brand-700)}
    .foot-bot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding-top:22px;font-size:13px;color:var(--muted)}
    @media(max-width:820px){.look{grid-template-columns:1fr;gap:34px}.foot-top{grid-template-columns:1fr 1fr;gap:24px}}


    .band-cream{background:var(--cream-band);border-block:1px solid var(--line)}
    .band-green{position:relative;overflow:hidden;background:linear-gradient(160deg,#2c4327,#1f331d);color:#dfe8d5}
    .band-green::before{content:"";position:absolute;inset:0;
      background-image:radial-gradient(rgba(231,213,179,.16) 1.4px,transparent 1.5px);background-size:22px 22px;
      mask-image:radial-gradient(680px 380px at 82% 30%,#000,transparent 78%);pointer-events:none}
    .band-green::after{content:"";position:absolute;right:-80px;top:-80px;width:420px;height:420px;border-radius:50%;
      background:radial-gradient(circle,rgba(201,168,106,.22),transparent 66%);pointer-events:none}
    .band-green .wrap{position:relative}
    .band-green h2{color:#fff}
    .band-green .lead{color:#c5d2ba}
    h2.h-sec{font-size:clamp(26px,3.5vw,38px)}
    .sec-head{max-width:640px}
    .sec-head h2{margin-top:12px}
    .sec-head .lead{margin-top:14px}

    .val{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:clamp(40px,5vw,54px) 0}
    .val-item{display:flex;flex-direction:column;gap:10px}
    .val-ic{width:44px;height:44px;border-radius:11px;background:#fff;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;color:var(--brand);box-shadow:var(--sxs)}
    .val-ic svg{width:22px;height:22px}
    .val-item h3{font-family:var(--serif);font-size:18px;color:var(--ink)}
    .val-item p{font-size:14.5px;color:var(--body);margin:0}

    .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
    .card{background:#fff;border:1px solid var(--line);border-radius:var(--rc);padding:26px;box-shadow:var(--ssm);transition:.18s}
    .card:hover{box-shadow:var(--smd);transform:translateY(-2px);border-color:var(--line-strong)}
    .card .ic{width:42px;height:42px;border-radius:11px;background:var(--brand-050);display:flex;align-items:center;justify-content:center;color:var(--brand-700);margin-bottom:15px}
    .card .ic svg{width:22px;height:22px}
    .card h3{font-family:var(--serif);font-size:18.5px;margin:0 0 8px}
    .card p{font-size:14.5px;color:var(--body);margin:0}

    .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px;counter-reset:s}
    .step{position:relative;padding-top:20px}
    .step::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:13px;font-weight:700;color:var(--tan-ink);position:absolute;top:0;left:0}
    .step::after{content:"";position:absolute;top:7px;left:26px;right:0;height:1px;background:var(--line)}
    .step h3{font-family:var(--serif);font-size:18px;color:var(--ink);margin:0 0 7px}
    .step p{font-size:14.5px;color:var(--body);margin:0}

    /* green band stat */
    .bstat{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:left}
    .bstat .n{font-family:var(--mono);font-size:clamp(26px,3.4vw,34px);font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
    .bstat .l{font-size:13px;color:#b6c6aa;margin-top:6px}
    .bstat>div{padding-left:16px;border-left:2px solid rgba(255,255,255,.14)}

    /* compare */
    .cmp{position:relative;margin-top:42px}
    .cmp-row{display:grid;grid-template-columns:1.4fr 1fr 1fr;font-size:14.5px}
    .cmp-row>div{padding:15px 18px;border-bottom:1px solid var(--line)}
    .cmp-row:last-child>div{border-bottom:none}
    .cmp-row.head>div{background:var(--cream);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:700}
    .cmp-row.head .us{color:var(--brand-700)}
    .cmp .us{color:var(--ink);font-weight:650;background:var(--brand-050)}
    .cmp .them{color:var(--muted)}
    .cmp-row>div:not(:last-child){border-right:1px solid var(--line)}

    /* final */
    .final{text-align:center}
    .final .sec-head{margin:0 auto}
    .final h2{font-size:clamp(28px,4vw,40px)}
    .final .cta-row{justify-content:center;margin-top:26px}

    footer{border-top:1px solid var(--line);padding:38px 0;background:var(--cream-soft);font-size:13.5px}
    footer .wrap{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center}
    footer a{color:var(--body)} footer a:hover{color:var(--ink)}

    @media(max-width:900px){
      .hero .wrap{grid-template-columns:1fr;gap:36px}
      .term{order:2}
      .val,.cards,.steps{grid-template-columns:1fr}
      .bstat{grid-template-columns:1fr 1fr;gap:24px 20px}
    }
    @media(max-width:560px){
      .section{padding:48px 0}
      .cmp-row{grid-template-columns:1.25fr .9fr .9fr;font-size:12.5px}
      .cmp-row>div{padding:12px 11px}
    }
  
    /* ===================== POLISH LAYER ===================== */
    @font-face{font-family:"Fraunces";src:url(/fonts/fraunces.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
    @font-face{font-family:"Fraunces";src:url(/fonts/fraunces-italic.woff2) format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
    @font-face{font-family:"Inter";src:url(/fonts/inter.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
    @font-face{font-family:"JetBrains Mono";src:url(/fonts/jbmono.woff2) format("woff2");font-weight:500 700;font-style:normal;font-display:swap}
    :root{--serif:"Fraunces",Georgia,serif;--sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
      --ease:cubic-bezier(.22,1,.36,1)}
    h1,h2,h3{font-optical-sizing:auto;font-weight:650;letter-spacing:-.022em}
    h1{font-weight:640;letter-spacing:-.03em}
    .em-i{font-weight:500}
    body{font-feature-settings:"ss01","cv11"}

    /* film grain over the whole page */
    body::after{content:"";position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.045;mix-blend-mode:multiply;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      animation:grain 1.2s steps(4) infinite}
    @keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}

    /* scroll progress + nav on scroll */
    .progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:70;transform-origin:0 50%;transform:scaleX(0);
      background:linear-gradient(90deg,var(--brand),var(--tan-deep));pointer-events:none}
    .top{transition:box-shadow .3s,background .3s}
    .top.scrolled{background:rgba(255,255,255,.78);box-shadow:0 8px 30px -18px rgba(35,44,34,.35)}
    .nav .ns{position:relative}
    .nav .ns::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--tan-deep);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
    .nav .ns:hover::after{transform:scaleX(1)}

    /* hero motion */
    .hero-photo{animation:kenburns 18s var(--ease) both;will-change:transform}
    @keyframes kenburns{from{transform:scale(1.12)}to{transform:scale(1.02)}}
    .hero-aurora{position:absolute;inset:-20%;pointer-events:none;filter:blur(60px);opacity:.55;
      background:radial-gradient(38% 42% at 18% 30%,rgba(231,213,179,.9),transparent 70%),
                 radial-gradient(30% 36% at 70% 70%,rgba(85,122,55,.28),transparent 70%),
                 radial-gradient(26% 30% at 85% 20%,rgba(201,168,106,.45),transparent 70%);
      animation:aurora 22s ease-in-out infinite alternate}
    @keyframes aurora{0%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(3%,-2%,0) rotate(4deg)}100%{transform:translate3d(-3%,2%,0) rotate(-3deg)}}
    .hero .wrap>div:first-child>*{opacity:0;transform:translateY(18px);animation:rise .9s var(--ease) forwards}
    .hero .wrap>div:first-child>*:nth-child(1){animation-delay:.1s}
    .hero .wrap>div:first-child>*:nth-child(2){animation-delay:.22s}
    .hero .wrap>div:first-child>*:nth-child(3){animation-delay:.36s}
    .hero .wrap>div:first-child>*:nth-child(4){animation-delay:.5s}
    .hero .wrap>div:first-child>*:nth-child(5){animation-delay:.62s}
    @keyframes rise{to{opacity:1;transform:none}}
    .hero .term{opacity:0;animation:termIn 1.1s var(--ease) .45s forwards;transform-style:preserve-3d}
    @keyframes termIn{from{opacity:0;transform:perspective(1200px) translateY(40px) rotateX(10deg) rotateY(-8deg) scale(.96)}
                      to{opacity:1;transform:perspective(1200px) translateY(0) rotateX(0) rotateY(-3deg)}}
    .hero .term{transition:transform .6s var(--ease),box-shadow .6s}
    .hero .term:hover{box-shadow:0 34px 70px -28px rgba(35,44,34,.4)}

    /* highlighter swipes draw in */
    .hl::after{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .15s}
    .hl.drawn::after{transform:scaleX(1)}
    .hero h1 .hl::after{animation:swipe .9s var(--ease) 1s forwards}
    @keyframes swipe{to{transform:scaleX(1)}}
    .em-u::after{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .2s}
    .em-u.drawn::after{transform:scaleX(1)}

    /* terminal: animated bars, crossfade, autoplay timer */
    .term-body{transition:opacity .35s ease,transform .35s var(--ease)}
    .term-body.swap{opacity:0;transform:translateY(6px)}
    .bbar{transform-origin:left;animation:grow .9s var(--ease) both}
    .brow:nth-child(2) .bbar{animation-delay:.08s}.brow:nth-child(3) .bbar{animation-delay:.16s}
    @keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    .tab{position:relative;transition:color .2s,background .2s}
    .tab.on::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;border-radius:2px;background:var(--brand);
      transform-origin:left;animation:tick var(--dur,4.2s) linear forwards}
    .term.paused .tab.on::after{animation:none;transform:scaleX(1);opacity:.5}
    @keyframes tick{from{transform:scaleX(0)}to{transform:scaleX(1)}}

    /* scroll reveal */
    [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
    [data-reveal].in{opacity:1;transform:none}
    [data-reveal="left"]{transform:translateX(-30px)} [data-reveal="right"]{transform:translateX(30px)}
    [data-reveal="scale"]{transform:scale(.94)}

    /* cursor spotlight on cards */
    .card,.val-item,.pcard,.step,.qa{position:relative;isolation:isolate}
    .card::before,.pcard::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .3s;
      background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(201,168,106,.16),transparent 55%)}
    .card:hover::before,.pcard:hover::before{opacity:1}
    .card{transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s}
    .card:hover{transform:translateY(-5px)}
    .card .ic{transition:transform .5s var(--ease)}
    .card:hover .ic{transform:rotate(-6deg) scale(1.08)}

    /* buttons: sheen + arrow nudge */
    .btn{position:relative;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s,border-color .25s}
    .btn-primary::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;transform:skewX(-20deg);
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transition:left .7s var(--ease)}
    .btn-primary:hover::after{left:130%}
    .btn-primary:hover{box-shadow:0 12px 26px -12px rgba(85,122,55,.7)}
    .btn svg{transition:transform .35s var(--ease)}
    .btn:hover svg{transform:translateX(4px)}

    /* sparkline draws in */
    .spark polyline{stroke-dasharray:240;stroke-dashoffset:240;transition:stroke-dashoffset 1.6s var(--ease) .3s}
    .pcard.in .spark polyline{stroke-dashoffset:0}
    .pcard.in .badge-up{animation:pulseUp 2.4s ease-in-out 1.2s infinite}
    @keyframes pulseUp{0%,100%{box-shadow:0 0 0 0 rgba(79,157,93,.35)}50%{box-shadow:0 0 0 7px rgba(79,157,93,0)}}
    .prow{transition:background .25s}
    .prow:hover{background:var(--cream-soft)}

    /* background overlays on cream bands: topo contour lines */
    .band-cream{position:relative;overflow:hidden}
    .band-cream>.wrap{position:relative;z-index:1}
    .band-cream::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' fill='none' stroke='%23c9a86a' stroke-opacity='.28' stroke-width='1'%3E%3Cpath d='M-20 120c80-40 160 30 250 0s170-60 260-10 120 40 130 30'/%3E%3Cpath d='M-20 170c90-40 170 40 260 5s180-55 250-5 120 35 130 25'/%3E%3Cpath d='M-20 230c80-30 150 45 250 15s170-60 270-15 110 30 120 20'/%3E%3Cpath d='M-20 300c100-50 180 35 270 0s170-45 250 5 100 25 120 15'/%3E%3Cpath d='M-20 380c90-30 160 45 260 10s180-60 260-5 110 35 120 25'/%3E%3Cpath d='M-20 460c80-45 170 30 260 0s170-55 260 0 110 40 120 30'/%3E%3Cpath d='M-20 530c90-35 160 40 250 10s180-50 270 0 100 30 120 20'/%3E%3C/svg%3E");
      -webkit-mask-image:radial-gradient(70% 90% at 100% 0%,#000 10%,transparent 70%);mask-image:radial-gradient(70% 90% at 100% 0%,#000 10%,transparent 70%)}
    .band-cream:nth-of-type(even)::before{-webkit-mask-image:radial-gradient(70% 90% at 0% 100%,#000 10%,transparent 70%);mask-image:radial-gradient(70% 90% at 0% 100%,#000 10%,transparent 70%)}
    .band-green::before{animation:drift 40s linear infinite}
    @keyframes drift{from{background-position:0 0}to{background-position:240px 120px}}

    /* soft section fade dividers */
    .section:not(.band-cream):not(.band-green){position:relative}

    /* stat counters */
    .bstat .n{display:inline-block}
    .bstat>div{position:relative;padding-left:16px}
    .bstat>div::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;background:linear-gradient(var(--tan-deep),transparent);transform:scaleY(0);transform-origin:top;transition:transform 1s var(--ease) var(--d,0s)}
    .bstat.in>div::before{transform:scaleY(1)}

    /* chips pop */
    .chip{transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .25s,color .25s}
    .chip:hover{transform:translateY(-3px) scale(1.03)}

    /* compare: winner column glow */
    .cmp .us{transition:color .3s}
    .cmp.in .winner{animation:winnerIn 1s var(--ease) .2s both}
    @keyframes winnerIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

    @media (hover:none){.card::before,.pcard::before{display:none}}
    @media (prefers-reduced-motion:reduce){
      *,*::before,*::after{animation:none!important;transition:none!important}
      [data-reveal],.hero .wrap>div:first-child>*,.hero .term{opacity:1!important;transform:none!important}
      .hl::after,.em-u::after,.bbar{transform:none!important}.spark polyline{stroke-dashoffset:0}
      body::after{display:none}
    }
    @media(max-width:400px){
      .top .wrap{padding-inline:14px}.brand{font-size:16.5px;gap:8px}.brand .mk{width:28px;height:28px}
      .nav{gap:10px}.nav .signin{font-size:13.5px}.top .btn{padding:8px 11px!important;font-size:13px}
      .mk-top{flex-wrap:wrap;gap:8px}.mk-fresh{white-space:normal}
    }
    @keyframes termInFlat{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}
    @media(max-width:900px){.hero .term{animation-name:termInFlat}}
    .band-green .em-i{color:var(--tan)}
    .band-green .hl{color:#fff}
  
    /* ===================== SUBPAGE KIT ===================== */
    .page-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#fbf6ec 0%,#fff 100%);border-bottom:1px solid var(--line)}
    .page-hero .hero-grid{mask-image:radial-gradient(900px 420px at 15% 30%,#000,transparent 72%);-webkit-mask-image:radial-gradient(900px 420px at 15% 30%,#000,transparent 72%)}
    .page-hero>.wrap{position:relative;z-index:1;padding:clamp(52px,7vw,92px) clamp(18px,4vw,30px) clamp(44px,6vw,72px)}
    .page-hero h1{font-size:clamp(34px,4.8vw,54px);max-width:18ch}
    .page-hero .sub{max-width:62ch}
    .page-hero .wrap>*{opacity:0;transform:translateY(16px);animation:rise .85s var(--ease) forwards}
    .page-hero .wrap>*:nth-child(2){animation-delay:.1s}.page-hero .wrap>*:nth-child(3){animation-delay:.2s}
    .page-hero .wrap>*:nth-child(4){animation-delay:.3s}.page-hero .wrap>*:nth-child(5){animation-delay:.4s}
    .page-hero .hl::after{animation:swipe .9s var(--ease) .8s forwards}
    .crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--muted);margin-bottom:6px}
    .crumbs a{color:var(--brand-700);font-weight:600}.crumbs span[aria-hidden]{color:var(--line-strong)}
    .split{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
    @media(max-width:860px){.split{grid-template-columns:1fr;gap:32px}}
    .panel{background:#fff;border:1px solid var(--line-strong);border-radius:var(--rc);box-shadow:var(--spop);overflow:hidden}
    .panel-h{padding:16px 20px;border-bottom:1px solid var(--line);background:var(--cream-soft);display:flex;justify-content:space-between;align-items:center;gap:12px}
    .panel-h .lbl{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.03em}
    .panel-b{padding:20px}
    .field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
    .field label{font-size:13px;font-weight:600;color:var(--ink)}
    .field input,.field select,.field textarea{font:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:10px;background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s}
    .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(85,122,55,.14)}
    .field textarea{min-height:130px;resize:vertical}
    .dtable{width:100%;border-collapse:collapse;font-size:14px}
    .dtable th{text-align:left;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line-strong);background:var(--cream-soft)}
    .dtable td{padding:12px;border-bottom:1px solid var(--line);color:var(--body)}
    .dtable td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;color:var(--ink);font-weight:600}
    .dtable tr{transition:background .2s}.dtable tbody tr:hover{background:var(--cream-soft)}
    .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--rc);background:#fff;box-shadow:var(--ssm)}
    .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
    @media(max-width:760px){.kpis{grid-template-columns:repeat(2,1fr)}}
    .kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--ssm)}
    .kpi .n{font-family:var(--mono);font-size:clamp(22px,3vw,30px);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1}
    .kpi .l{font-size:12.5px;color:var(--muted);margin-top:6px}
    .prose{max-width:70ch}.prose p{margin:0 0 14px}.prose h2{font-size:clamp(24px,3vw,32px);margin:34px 0 12px}.prose h3{font-size:20px;margin:24px 0 8px}
    .prose ul{padding-left:20px}.prose li{margin:6px 0}
    .note{font-size:13px;color:var(--muted)}
    .ticks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
    .ticks li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px}
    .ticks li::before{content:"";flex:0 0 18px;height:18px;margin-top:2px;border-radius:50%;background:var(--brand-050) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23557a37' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
    .ticks li.off{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line-strong)}
    .ticks li.off::before{background:#f1ede4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a69f8f' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/10px no-repeat}
    .preview-ribbon{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:80;background:var(--ink);color:#fff;font-size:12px;padding:7px 14px;border-radius:999px;box-shadow:var(--smd);font-family:var(--mono)}
    .preview-ribbon a{color:var(--tan)}

    .nav .signin{white-space:nowrap}
    @media(max-width:360px){.nav .signin{display:none}}