:root{
    --paper:oklch(96.8% 0.013 88);
    --paper-2:oklch(93.6% 0.019 84);
    --paper-3:oklch(90.5% 0.024 82);
    --ink:oklch(23% 0.028 162);
    --pine:oklch(33% 0.055 162);
    --pine-deep:oklch(22.5% 0.042 163);
    --pine-mid:oklch(45% 0.058 162);
    --amber:oklch(66% 0.145 58);
    --amber-soft:oklch(89% 0.062 72);
    --line:oklch(84% 0.016 88);
    --line-strong:oklch(74% 0.02 88);
    --muted:oklch(47% 0.018 152);
    --on-dark:oklch(94% 0.014 96);
    --on-dark-dim:oklch(78% 0.02 130);
    --dark-line:oklch(34% 0.03 163);

    --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:144px;

    --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
    --serif:"Fraunces",Georgia,serif;

    --expo:cubic-bezier(0.16,1,0.3,1);
    --quart:cubic-bezier(0.25,1,0.5,1);
    --inout:cubic-bezier(0.65,0,0.35,1);

    --brand:oklch(48% 0.11 200);
    --brand-soft:oklch(92% 0.04 200);
  }
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:var(--sans); font-size:1.0625rem; line-height:1.6;
    font-optical-sizing:auto; -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{font-family:var(--serif); font-weight:500; margin:0; text-wrap:balance; letter-spacing:-0.015em; line-height:1.04;
    font-variation-settings:"SOFT" 40,"WONK" 1}
  p{margin:0}
  a{color:inherit; text-decoration:none}
  ul{margin:0; padding:0; list-style:none}
  button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
  ::selection{background:var(--amber-soft); color:var(--pine-deep)}

  .wrap{width:min(1200px,100% - var(--s6)); margin-inline:auto}
  @media(min-width:900px){ .wrap{width:min(1200px,100% - 96px)} }

  /* ---------- progress + nav ---------- */
  .progress{position:fixed; inset:0 0 auto 0; height:2px; background:var(--amber); transform:scaleX(0); transform-origin:0 50%; z-index:60}
  header{position:sticky; top:0; z-index:50; transition:background 400ms var(--quart), box-shadow 400ms var(--quart), border-color 400ms var(--quart);
    border-bottom:1px solid transparent}
  header.stuck{background:oklch(96.8% 0.013 88 / 0.92); backdrop-filter:blur(6px); border-color:var(--line)}
  .bar{display:flex; align-items:center; justify-content:space-between; gap:var(--s5); padding:var(--s4) 0}
  .mark{display:flex; align-items:center; gap:12px; font-family:var(--serif); font-size:1.45rem; font-weight:700; letter-spacing:-0.025em; cursor:pointer}
  .mark img{width:42px; height:42px; transition:transform 280ms var(--expo); display:block}
  .mark:hover img{transform:scale(1.08) rotate(-2deg)}
  .mark svg{display:block}
  nav.links{display:none; gap:var(--s5); font-size:0.9375rem; color:var(--muted)}
  @media(min-width:960px){ nav.links{display:flex} }
  nav.links a{position:relative; padding-block:2px; transition:color 180ms var(--quart)}
  nav.links a::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:currentColor;
    transform:scaleX(0); transform-origin:0 50%; transition:transform 320ms var(--expo)}
  nav.links a:hover{color:var(--ink)}
  nav.links a:hover::after{transform:scaleX(1)}

  .btn{display:inline-flex; align-items:center; gap:9px; padding:13px 20px; border-radius:999px; font-size:0.9375rem; font-weight:500;
    position:relative; overflow:hidden; transition:transform 220ms var(--quart), background 220ms var(--quart), color 220ms var(--quart), border-color 220ms var(--quart)}
  .btn svg{transition:transform 320ms var(--expo)}
  .btn:hover svg{transform:translate(3px,-3px)}
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:var(--pine); color:var(--on-dark)}
  .btn-primary:hover{background:var(--pine-deep)}
  .btn-ghost{border:1px solid var(--line-strong); color:var(--ink)}
  .btn-ghost:hover{border-color:var(--ink); background:var(--paper-2)}
  .btn-amber{background:var(--amber); color:oklch(21% 0.05 58)}
  .btn-amber:hover{filter:brightness(1.06)}
  .btn:focus-visible{outline:2px solid var(--amber); outline-offset:3px}
  a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--amber); outline-offset:3px; border-radius:4px}

  /* ---------- shared type ---------- */
  .eyebrow{display:flex; align-items:center; gap:10px; font-size:0.75rem; font-weight:600; letter-spacing:0.11em; text-transform:uppercase; color:var(--pine-mid)}
  .eyebrow .num{font-variant-numeric:tabular-nums; color:var(--amber)}
  .eyebrow::after{content:""; height:1px; flex:1; max-width:80px; background:var(--line-strong)}
  .h2{font-size:clamp(2rem,4.4vw,3.25rem)}
  .h3{font-size:clamp(1.35rem,2.2vw,1.75rem)}
  .lead{font-size:1.1875rem; color:var(--muted); max-width:62ch; text-wrap:pretty}
  .small{font-size:0.875rem; color:var(--muted)}
  section{padding-block:var(--s9)}
  @media(max-width:700px){ section{padding-block:var(--s8)} }

  /* ---------- reveal ---------- */
  [data-reveal]{opacity:0; transform:translateY(20px); transition:opacity 760ms var(--expo), transform 760ms var(--expo);
    transition-delay:calc(var(--i,0) * 70ms)}
  [data-reveal].in{opacity:1; transform:none}

  /* ---------- hero ---------- */
  .hero{padding-top:var(--s8); padding-bottom:var(--s9); overflow:clip}
  .hero-grid{display:grid; gap:var(--s8); align-items:center}
  @media(min-width:1000px){ .hero-grid{grid-template-columns:1.02fr 0.98fr; gap:var(--s7)} }
  .live{display:inline-flex; align-items:center; gap:9px; padding:7px 14px 7px 11px; border:1px solid var(--amber);
    border-radius:999px; font-size:0.8125rem; font-weight:500; color:oklch(38% 0.09 58); background:oklch(94% 0.035 72)}
  .dot{width:7px; height:7px; border-radius:50%; background:var(--amber); position:relative}
  .dot::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--amber); animation:ping 2.4s var(--expo) infinite}
  @keyframes ping{0%{transform:scale(.5); opacity:.9} 70%,100%{transform:scale(1.6); opacity:0}}

  h1{font-size:clamp(2.7rem,6.6vw,4.85rem); margin-top:var(--s5); font-variation-settings:"SOFT" 60,"WONK" 1}
  h1 .w{display:inline-block; opacity:0; transform:translateY(0.5em) rotate(1.5deg);
    animation:rise 900ms var(--expo) forwards; animation-delay:calc(120ms + var(--i) * 62ms)}
  h1 em{font-style:italic; font-variation-settings:"SOFT" 90,"WONK" 1; color:var(--pine)}
  .agency-os {
    display: inline-block;
    background: linear-gradient(
      110deg,
      #0d9488 45%,   /* teal */
      #5eead4 50%,   /* shimmer highlight */
      #0d9488 55%
    );
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: normal;
    font-weight: 700;
    animation:
      os-reveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) both,
      os-shimmer 4s ease-in-out 1.2s infinite;
  }

  @keyframes os-reveal {
    from {
      clip-path: inset(0 0 100% 0);
      transform: translateY(0.3em);
    }
    to {
      clip-path: inset(0 0 0% 0);
      transform: translateY(0);
    }
  }

  @keyframes os-shimmer {
    0%, 100% { background-position: 100% 0; }
    50% { background-position: 0% 0; }
  }
  @keyframes rise{to{opacity:1; transform:none}}
  .hero p.lead{margin-top:var(--s5); opacity:0; animation:fadeUp 900ms var(--expo) 620ms forwards}
  .hero-cta{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6); opacity:0; animation:fadeUp 900ms var(--expo) 740ms forwards}
  @keyframes fadeUp{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
  .pills{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--line);
    font-size:0.875rem; color:var(--muted); opacity:0; animation:fadeUp 900ms var(--expo) 880ms forwards}
  .pills li{display:flex; align-items:center; gap:7px}
  .pills li::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--amber)}

  /* ---------- portal mock ---------- */
  .mock-stage{position:relative}
  .mock-stage::before{content:""; position:absolute; inset:auto -6% -7% 8%; height:70%; border-radius:22px;
    background:var(--paper-3); z-index:0; transform:rotate(-1.4deg)}
  .mock{position:relative; z-index:1; background:oklch(99% 0.006 96); border:1px solid var(--line-strong); border-radius:16px;
    box-shadow:0 22px 50px -30px oklch(30% 0.04 160 / 0.4); overflow:hidden;
    animation:floatIn 1100ms var(--expo) 300ms both}
  @keyframes floatIn{from{opacity:0; transform:translateY(30px) scale(.97)} to{opacity:1; transform:none}}
  .mock-bar{display:flex; align-items:center; gap:var(--s3); padding:11px 14px; border-bottom:1px solid var(--line); background:var(--paper-2)}
  .traffic{display:flex; gap:5px}
  .traffic i{width:8px; height:8px; border-radius:50%; background:var(--line-strong); display:block}
  .url{flex:1; display:flex; align-items:center; gap:7px; background:oklch(99% 0.006 96); border:1px solid var(--line);
    border-radius:7px; padding:5px 10px; font-size:0.75rem; color:var(--muted); font-variant-numeric:tabular-nums; overflow:hidden}
  .url b{color:var(--ink); font-weight:500}
  .mock-body{padding:var(--s5)}
  .portal-head{display:flex; align-items:center; gap:var(--s3); padding-bottom:var(--s4); border-bottom:1px solid var(--line)}
  .logo-sq{width:38px; height:38px; border-radius:10px; background:var(--brand); color:oklch(98% 0.01 96); display:grid; place-items:center;
    font-family:var(--serif); font-size:1.25rem; transition:background 620ms var(--quart)}
  .portal-head .who{font-weight:500; letter-spacing:-0.01em}
  .portal-head .who span{display:block; font-size:0.75rem; color:var(--muted); font-weight:400}
  .portal-head .avatar{margin-left:auto; width:30px; height:30px; border-radius:50%; background:var(--brand-soft); color:var(--brand);
    display:grid; place-items:center; font-size:0.75rem; font-weight:600; transition:background 620ms var(--quart), color 620ms var(--quart)}
  .portal-nav{display:flex; gap:var(--s1); margin:var(--s4) 0 var(--s5); font-size:0.8125rem; flex-wrap:wrap}
  .portal-nav span{padding:6px 12px; border-radius:999px; color:var(--muted)}
  .portal-nav span.on{background:var(--brand-soft); color:var(--brand); font-weight:500; transition:background 620ms var(--quart), color 620ms var(--quart)}
  .row{display:flex; align-items:center; gap:var(--s3); padding:var(--s3) 0; border-top:1px solid var(--line)}
  .row:first-child{border-top:none}
  .row .label{font-size:0.9375rem}
  .row .meta{font-size:0.75rem; color:var(--muted)}
  .row .right{margin-left:auto; text-align:right}
  .chip{display:inline-block; padding:3px 9px; border-radius:6px; font-size:0.6875rem; font-weight:600; letter-spacing:0.02em}
  .chip.paid{background:oklch(92% 0.05 155); color:oklch(38% 0.08 155)}
  .chip.wait{background:var(--amber-soft); color:oklch(40% 0.1 58)}
  .track{height:5px; border-radius:99px; background:var(--paper-3); overflow:hidden; margin-top:7px; width:110px}
  .track i{display:block; height:100%; background:var(--brand); border-radius:99px; transform-origin:0 50%;
    transition:transform 900ms var(--expo), background 620ms var(--quart)}
  .amount{font-variant-numeric:tabular-nums; font-weight:500}
  .brand-swap{display:flex; align-items:center; gap:var(--s3); margin-top:var(--s5); padding-top:var(--s4); border-top:1px dashed var(--line)}
  .brand-swap .cap{font-size:0.75rem; color:var(--muted); margin-right:auto}
  .brand-swap button{width:26px; height:5px; border-radius:99px; background:var(--line-strong); transition:background 300ms var(--quart), transform 300ms var(--quart)}
  .brand-swap button[aria-pressed="true"]{background:var(--brand); transform:scaleY(1.6)}
  .swapping .fadeable{animation:swapFade 620ms var(--quart)}
  @keyframes swapFade{0%{opacity:1} 34%{opacity:0; transform:translateY(5px)} 100%{opacity:1; transform:none}}

  /* ---------- before / after ---------- */
  .switcher{display:flex; align-items:center; gap:var(--s5); flex-wrap:wrap; margin-top:var(--s6)}
  .seg{position:relative; display:inline-flex; padding:4px; border:1px solid var(--line-strong); border-radius:999px; background:var(--paper-2)}
  .seg .glide{position:absolute; top:4px; bottom:4px; left:4px; border-radius:999px; background:var(--pine); z-index:0;
    transition:transform 480ms var(--expo), width 480ms var(--expo)}
  .seg button{position:relative; z-index:1; padding:9px 18px; border-radius:999px; font-size:0.875rem; font-weight:500; color:var(--muted);
    transition:color 300ms var(--quart)}
  .seg button[aria-selected="true"]{color:var(--on-dark)}
  .swap-list{display:grid; gap:var(--s3) var(--s7); margin-top:var(--s6)}
  @media(min-width:760px){ .swap-list{grid-template-columns:1fr 1fr} }
  .swap-list li{display:flex; gap:var(--s3); align-items:flex-start; padding:var(--s3) 0; border-bottom:1px solid var(--line);
    font-size:1.0625rem; opacity:0; transform:translateY(10px); animation:fadeUp 560ms var(--expo) forwards;
    animation-delay:calc(var(--i) * 55ms)}
  .swap-list li .ic{flex:none; width:24px; height:24px; border-radius:7px; display:grid; place-items:center; margin-top:2px}
  .state-before .ic{background:var(--paper-3); color:var(--muted)}
  .state-before li{color:var(--muted)}
  .state-after .ic{background:oklch(92% 0.05 155); color:oklch(40% 0.08 155)}

  /* ---------- tour ---------- */
  .tour{background:var(--pine-deep); color:var(--on-dark)}
  .tour .eyebrow{color:var(--on-dark-dim)}
  .tour .eyebrow::after{background:var(--dark-line)}
  .tour .lead{color:var(--on-dark-dim)}
  .tabs{display:flex; gap:var(--s1); overflow-x:auto; margin-top:var(--s6); padding-bottom:var(--s2);
    scrollbar-width:thin; border-bottom:1px solid var(--dark-line)}
  .tabs button{flex:none; padding:11px 16px; font-size:0.9375rem; color:var(--on-dark-dim); border-radius:10px 10px 0 0; position:relative;
    transition:color 240ms var(--quart), background 240ms var(--quart)}
  .tabs button::after{content:""; position:absolute; left:14px; right:14px; bottom:-9px; height:2px; background:var(--amber);
    transform:scaleX(0); transform-origin:50% 50%; transition:transform 420ms var(--expo)}
  .tabs button:hover{color:var(--on-dark)}
  .tabs button[aria-selected="true"]{color:var(--on-dark); font-weight:500}
  .tabs button[aria-selected="true"]::after{transform:scaleX(1)}
  .panel{display:none; padding-top:var(--s7)}
  .panel.on{display:grid; gap:var(--s7); animation:panelIn 620ms var(--expo)}
  @media(min-width:900px){ .panel.on{grid-template-columns:1fr 0.92fr; gap:var(--s9); align-items:center} }
  @keyframes panelIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
  .panel h3{color:var(--on-dark); font-size:clamp(1.6rem,3vw,2.3rem)}
  .panel p{color:var(--on-dark-dim); margin-top:var(--s4); max-width:52ch}
  .panel ul{margin-top:var(--s5); display:grid; gap:var(--s3)}
  .panel ul li{display:flex; gap:var(--s3); font-size:1rem; color:var(--on-dark)}
  .panel ul li svg{flex:none; margin-top:5px; color:var(--amber)}
  .glass-free{background:oklch(28% 0.04 163); border:1px solid var(--dark-line); border-radius:14px; padding:var(--s5)}
  .glass-free .r{display:flex; align-items:center; gap:var(--s3); padding:var(--s3) 0; border-top:1px solid var(--dark-line); font-size:0.9375rem}
  .glass-free .r:first-of-type{border-top:none}
  .glass-free .r .m{margin-left:auto; font-size:0.8125rem; color:var(--on-dark-dim); font-variant-numeric:tabular-nums}
  .glass-free .k{font-size:0.6875rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--on-dark-dim)}
  .sqr{flex:none; width:26px; height:26px; border-radius:7px; background:oklch(38% 0.05 163); display:grid; place-items:center; color:var(--on-dark-dim)}
  .bubble{background:oklch(33% 0.045 163); border-radius:12px 12px 12px 3px; padding:var(--s3) var(--s4); font-size:0.9375rem; margin-top:var(--s3)}
  .bubble.me{border-radius:12px 12px 3px 12px; background:oklch(40% 0.06 100); margin-left:var(--s6)}
  .bubble .n{display:block; font-size:0.6875rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--on-dark-dim); margin-bottom:3px}

  /* ---------- use cases ---------- */
  .cases{border-top:1px solid var(--line)}
  .case{display:grid; gap:var(--s3); padding:var(--s6) 0; border-bottom:1px solid var(--line); position:relative;
    transition:background 400ms var(--quart)}
  @media(min-width:900px){
    .case{grid-template-columns:0.85fr 1fr 1fr 1fr; gap:var(--s6); align-items:start;
      padding-inline:var(--s4); margin-inline:calc(var(--s4) * -1)}
    .case:hover{background:var(--paper-2)}
  }
  .case .n{font-family:var(--serif); font-size:0.875rem; color:var(--amber); font-variant-numeric:tabular-nums; display:block; margin-bottom:6px}
  .case h3{font-size:1.3rem}
  .case .col span{display:block; font-size:0.6875rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--pine-mid); margin-bottom:7px}
  .case .col p{font-size:0.9375rem; color:var(--muted); max-width:34ch}
  .case .col.premium p{color:var(--ink)}

  /* ---------- ticker ---------- */
  .ticker{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .track-x{display:flex; width:max-content; gap:var(--s4); animation:slide 38s linear infinite}
  .ticker:hover .track-x{animation-play-state:paused}
  @keyframes slide{to{transform:translateX(-50%)}}
  .tpl{display:flex; align-items:center; gap:var(--s3); padding:14px 20px; border:1px solid var(--line-strong); border-radius:999px;
    background:var(--paper); font-size:0.9375rem; white-space:nowrap}
  .tpl b{width:6px; height:6px; border-radius:50%; background:var(--pine-mid)}
  .pay-track{animation-duration:26s}
  .pay{padding:10px 18px; border:1px dashed var(--line-strong); border-radius:8px; font-size:0.875rem; color:var(--muted); white-space:nowrap}

  /* ---------- white label ---------- */
  .wl{background:var(--pine); color:var(--on-dark)}
  .wl .eyebrow{color:var(--on-dark-dim)} .wl .eyebrow::after{background:var(--dark-line)}
  .wl h2{color:var(--on-dark); max-width:24ch}
  .wl-grid{display:grid; gap:var(--s6); margin-top:var(--s8)}
  @media(min-width:760px){ .wl-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:var(--s7) var(--s6)} }
  .wl-item{border-top:1px solid var(--dark-line); padding-top:var(--s4)}
  .wl-item h4{font-size:1.0625rem; font-family:var(--sans); font-weight:600; letter-spacing:0}
  .wl-item p{font-size:0.9375rem; color:var(--on-dark-dim); margin-top:7px}
  .wl-item:nth-child(1),.wl-item:nth-child(2){grid-column:span 1}

  /* ---------- invoices + security ---------- */
  .two{display:grid; gap:var(--s8)}
  @media(min-width:900px){ .two{grid-template-columns:0.9fr 1.1fr; gap:var(--s9)} }
  .feat{display:grid; gap:var(--s5); margin-top:var(--s6)}
  @media(min-width:620px){ .feat{grid-template-columns:1fr 1fr; gap:var(--s6)} }
  .feat > div h4{font-family:var(--sans); font-size:1rem; font-weight:600; display:flex; gap:10px; align-items:baseline}
  .feat > div h4::before{content:""; width:6px; height:6px; border-radius:2px; background:var(--amber); flex:none; transform:translateY(-2px)}
  .feat > div p{font-size:0.9375rem; color:var(--muted); margin-top:6px; padding-left:16px}
  .sec-list{display:grid; gap:0; margin-top:var(--s6); border-top:1px solid var(--line)}
  @media(min-width:620px){ .sec-list{grid-template-columns:1fr 1fr; column-gap:var(--s7)} }
  .sec-list li{display:flex; gap:var(--s3); padding:var(--s4) 0; border-bottom:1px solid var(--line)}
  .sec-list svg{flex:none; margin-top:3px; color:var(--pine-mid)}
  .sec-list b{font-weight:600; display:block; font-size:0.9375rem}
  .sec-list span{font-size:0.875rem; color:var(--muted)}
  .note{margin-top:var(--s5); padding:var(--s4) var(--s5); background:var(--paper-2); border:1px solid var(--line); border-radius:12px;
    font-size:0.9375rem; color:var(--muted)}

  /* ---------- pricing ---------- */
  .price-head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s6); flex-wrap:wrap}
  .plans{display:grid; gap:var(--s4); margin-top:var(--s7)}
  @media(min-width:640px){ .plans{grid-template-columns:1fr 1fr} }
  @media(min-width:1080px){ .plans{grid-template-columns:repeat(4,1fr); gap:var(--s3)} }
  .plan{border:1px solid var(--line-strong); border-radius:16px; padding:var(--s5); display:flex; flex-direction:column;
    background:oklch(98.4% 0.008 92); transition:transform 420ms var(--expo), box-shadow 420ms var(--expo)}
  .plan:hover{transform:translateY(-4px); box-shadow:0 18px 40px -28px oklch(30% 0.04 160 / .45)}
  .plan h3{font-size:1.2rem; font-family:var(--sans); font-weight:600; letter-spacing:0}
  .plan .who{font-size:0.875rem; color:var(--muted); margin-top:8px; min-height:3.2em}
  .cost{display:flex; align-items:baseline; gap:4px; margin:var(--s5) 0 var(--s2); font-family:var(--serif); font-variant-numeric:tabular-nums}
  .cost .amt{font-size:2.75rem; letter-spacing:-0.03em}
  .cost .per{font-size:0.875rem; font-family:var(--sans); color:var(--muted)}
  .billed{font-size:0.75rem; color:var(--muted); min-height:1.2em}
  .plan ul{margin:var(--s5) 0 var(--s6); display:grid; gap:9px; font-size:0.9rem; border-top:1px solid var(--line); padding-top:var(--s5)}
  .plan ul li{display:flex; gap:9px} .plan ul li svg{flex:none; margin-top:5px; color:var(--pine-mid)}
  .plan .btn{margin-top:auto; justify-content:center}
  .plan.hero-plan{background:var(--pine-deep); color:var(--on-dark); border-color:var(--pine-deep); position:relative}
  .plan.hero-plan .who,.plan.hero-plan .per,.plan.hero-plan .billed{color:var(--on-dark-dim)}
  .plan.hero-plan ul{border-color:var(--dark-line)}
  .plan.hero-plan ul li svg{color:var(--amber)}
  .flag{position:absolute; top:-11px; left:var(--s5); background:var(--amber); color:oklch(21% 0.05 58); font-size:0.6875rem;
    font-weight:600; letter-spacing:0.08em; text-transform:uppercase; padding:4px 10px; border-radius:5px}
  .save{display:inline-flex; align-items:center; gap:6px; font-size:0.8125rem; color:oklch(40% 0.09 58)}

  /* ---------- faq ---------- */
  .faq{border-top:1px solid var(--line); margin-top:var(--s7)}
  .q{border-bottom:1px solid var(--line)}
  .q button{width:100%; display:flex; align-items:center; gap:var(--s4); padding:var(--s5) 0; text-align:left;
    font-size:1.0625rem; font-weight:500; transition:color 240ms var(--quart)}
  .q button:hover{color:var(--pine-mid)}
  .q .sign{margin-left:auto; flex:none; width:22px; height:22px; position:relative}
  .q .sign::before,.q .sign::after{content:""; position:absolute; inset:50% 0 auto 0; height:1.5px; background:currentColor;
    transition:transform 420ms var(--expo)}
  .q .sign::after{transform:rotate(90deg)}
  .q[open] .sign::after{transform:rotate(0deg)}
  .a{display:grid; grid-template-rows:0fr; transition:grid-template-rows 460ms var(--expo)}
  .q[open] .a{grid-template-rows:1fr}
  .a > div{overflow:hidden}
  .a p{padding-bottom:var(--s5); color:var(--muted); max-width:70ch; font-size:1rem}

  /* ---------- closing ---------- */
  .close{background:var(--pine-deep); color:var(--on-dark); text-align:center; overflow:clip; position:relative; padding-block:var(--s9)}
  .close h2{color:var(--on-dark); font-size:clamp(2.2rem,6vw,4rem); max-width:20ch; margin-inline:auto}
  .close h2 em{font-style:italic; color:var(--amber)}
  .close p{color:var(--on-dark-dim); margin-top:var(--s5); margin-inline:auto}
  .close .btns{display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:16px; margin-top:var(--s6)}
  .close .btn-ghost-dark{border:1px solid var(--dark-line); color:var(--on-dark); background:rgba(255,255,255,0.06); backdrop-filter:blur(6px); transition:all 200ms ease}
  .close .btn-ghost-dark:hover{background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.3); color:#ffffff}
  .contact, .page-privacy .contact, .page-roadmap .contact, .page-terms .contact { margin-bottom: 72px !important; }
  footer{background:var(--pine-deep); color:var(--on-dark-dim); padding-block:var(--s6) var(--s7); border-top:1px solid var(--dark-line)}
  .foot{display:flex; justify-content:space-between; gap:var(--s5); flex-wrap:wrap; font-size:0.875rem}
  .foot a:hover{color:var(--on-dark)}
  .foot nav{display:flex; gap:var(--s5); flex-wrap:wrap}
  .foot-link{font-size:0.9rem; color:var(--on-dark-dim); transition:color 180ms}
  .foot-link:hover{color:var(--on-dark)}
  /* always show header bg on inner pages (no scroll needed) */
  header.inner{background:oklch(96.8% 0.013 88 / 0.96); backdrop-filter:blur(8px); border-color:var(--line)}

  /* mobile sticky cta */
  .mobile-cta{position:fixed; left:0; right:0; bottom:0; z-index:55; padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:oklch(96.8% 0.013 88 / .95); backdrop-filter:blur(8px); border-top:1px solid var(--line);
    display:flex; gap:var(--s3); align-items:center; transform:translateY(110%); transition:transform 520ms var(--expo)}
  .mobile-cta.up{transform:none}
  .mobile-cta .p{font-size:0.8125rem; color:var(--muted); line-height:1.3}
  .mobile-cta .btn{margin-left:auto; padding:11px 16px}
  @media(min-width:800px){ .mobile-cta{display:none} }
  @media(max-width:799px){ footer{padding-bottom:96px} }

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:1ms !important; animation-delay:0ms !important; transition-duration:1ms !important}
    html{scroll-behavior:auto}
    [data-reveal]{opacity:1; transform:none}
  }

  @media(max-width:600px){
    .bar { gap: 12px; }
    .mark { font-size: 1.15rem; }
    .mark img { width: 28px; height: 28px; }
    .bar .btn { padding: 10px 14px; font-size: 0.8125rem; }
    .hero-cta { flex-direction: column; align-items: stretch; }
    .hero-cta .btn { justify-content: center; }
    .pills { justify-content: center; }
    .h2 { font-size: clamp(1.75rem,5.5vw,2.2rem); }
  }



  @media(max-width:500px){
    .mock-body { padding: 16px; }
    .row { flex-wrap: wrap; gap: 4px; }
    .row .right { margin-left: 0; text-align: left; width: 100%; display: flex; align-items: center; justify-content: space-between; }
  }




.brand, .mark { display: flex; align-items: center; gap: 12px; font-family: var(--serif, inherit); font-size: 1.45rem; font-weight: 700; letter-spacing: -0.025em; cursor: pointer; }
.brand img, .mark img { width: 42px !important; height: 42px !important; transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1); display: block; }
.brand:hover img, .mark:hover img { transform: scale(1.08) rotate(-2deg); }


/* Ultra-Premium Glowing Progress Bar */
.progress, #progress, #prog, #fcount + .progress {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  height: 3.5px !important;
  background: linear-gradient(90deg, #10b981 0%, #06b6d4 50%, #f59e0b 100%) !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.8), 0 0 20px rgba(245, 158, 11, 0.6) !important;
  transform-origin: 0 50% !important;
  z-index: 99999 !important;
  pointer-events: none !important;
  transition: transform 120ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}