:root{
    --blue:#2563EB; --blue-dark:#1B47C9; --blue-wash:#EEF3FF; --blue-soft:#DCE7FF;
    --ink:#0B0C0E; --body:#4B525B; --muted:#7B838E;
    --off:#F7F9FC; --line:#E6EBF2; --white:#fff;
    --green:#00834C;
    --shadow-sm:0 1px 2px rgba(11,12,14,.05);
    --shadow:0 2px 6px rgba(11,12,14,.05), 0 14px 38px rgba(11,12,14,.08);
    --shadow-lg:0 4px 12px rgba(11,12,14,.06), 0 28px 70px rgba(11,12,14,.13);
    --ease:cubic-bezier(.22,.8,.3,1);
  }
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--white);color:var(--ink);
    font-family:"Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;font-size:17px;line-height:1.6;
    -webkit-font-smoothing:antialiased;overflow-x:hidden}
  h1,h2,h3{font-family:"Bricolage Grotesque","Hanken Grotesk",sans-serif;font-weight:800;letter-spacing:-.028em;line-height:1.03;margin:0}
  h1{font-size:clamp(2.35rem,5.3vw,4.15rem)}
  h2{font-size:clamp(1.85rem,3.8vw,2.95rem);line-height:1.07}
  h3{font-size:1.1rem;font-weight:700;letter-spacing:-.012em;line-height:1.3}
  p{margin:0}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1180px;margin:0 auto;padding:0 24px}
  .blue{color:var(--blue)}

  /* ── reveal ───────────────────────────────────────────── */
  .rv{opacity:0;transform:translateY(22px)}
  .rv.in{opacity:1;transform:none;transition:opacity .7s var(--ease), transform .7s var(--ease)}
  .rv.d1.in{transition-delay:.07s} .rv.d2.in{transition-delay:.14s}
  .rv.d3.in{transition-delay:.21s} .rv.d4.in{transition-delay:.28s}
  @media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none} html{scroll-behavior:auto} }

  /* ── strip ────────────────────────────────────────────── */
  .strip{background:var(--ink);color:#fff;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase}
  .strip .wrap{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:10px 24px;text-align:center}
  .pulse{width:7px;height:7px;border-radius:50%;background:#FF5F57;flex:none;box-shadow:0 0 0 0 rgba(255,95,87,.6)}
  @media (prefers-reduced-motion:no-preference){
    .pulse{animation:pl 2.4s ease-out infinite}
    @keyframes pl{0%{box-shadow:0 0 0 0 rgba(255,95,87,.55)}70%{box-shadow:0 0 0 8px rgba(255,95,87,0)}100%{box-shadow:0 0 0 0 rgba(255,95,87,0)}}
  }
  .strip b{font-weight:700}

  /* ── nav ──────────────────────────────────────────────── */
  .nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid transparent;transition:border-color .25s var(--ease), box-shadow .25s var(--ease)}
  .nav.stuck{border-bottom-color:var(--line);box-shadow:0 6px 24px rgba(11,12,14,.05)}
  .nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px}
  .lock{display:flex;align-items:center;gap:11px}
  .lock svg{display:block;flex:none}
  .lock .x{color:#B6BDC7;font-size:12px}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
    background:var(--blue);color:#fff;border:0;border-radius:12px;padding:13px 22px;
    font:600 15.5px/1 "Hanken Grotesk",sans-serif;cursor:pointer;white-space:nowrap;
    box-shadow:0 1px 2px rgba(27,71,201,.2), 0 8px 20px rgba(37,99,235,.22);
    transition:background .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease)}
  .btn:hover{background:var(--blue-dark);transform:translateY(-1px);box-shadow:0 2px 4px rgba(27,71,201,.2), 0 14px 30px rgba(37,99,235,.3)}
  .btn:active{transform:translateY(0)}
  .btn.lg{padding:17px 26px;font-size:17px;width:100%}
  .btn[disabled]{opacity:.6;cursor:not-allowed;transform:none}
  .btn svg{transition:transform .18s var(--ease)}
  .btn:hover svg{transform:translateX(3px)}

  /* ── hero ─────────────────────────────────────────────── */
  .hero{position:relative;padding:62px 0 18px;overflow:hidden;
    background:radial-gradient(900px 440px at 12% -8%, #E8F0FF 0%, rgba(232,240,255,0) 62%),
               linear-gradient(180deg,#FAFBFE 0%,#fff 70%)}
  .hero-grid{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);gap:52px;align-items:start}
  .pill{display:inline-flex;align-items:center;gap:8px;background:var(--white);color:var(--blue);
    border:1px solid var(--blue-soft);border-radius:999px;padding:7px 15px;
    font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;box-shadow:var(--shadow-sm)}
  .lede{color:var(--body);font-size:1.1rem;margin-top:20px;max-width:47ch}
  .checks{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
  .checks li{display:flex;gap:11px;align-items:flex-start;font-size:16px}
  .tick{width:21px;height:21px;border-radius:50%;background:var(--blue);flex:none;margin-top:2px;display:grid;place-items:center}

  /* form */
  .card{background:var(--white);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);padding:26px}
  .card h3{margin-bottom:5px}
  .card .sub{color:var(--muted);font-size:14.5px;margin-bottom:20px}
  .steps{display:flex;gap:7px;margin-bottom:18px}
  .steps i{height:3px;flex:1;border-radius:2px;background:var(--line);transition:background .4s var(--ease)}
  .steps i.on{background:var(--blue)}
  .field{margin-bottom:14px}
  .field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
  .field .hint{font-weight:400;color:var(--muted);font-size:12.5px;margin-left:6px}
  .field input,.field select{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:11px;
    font:400 16px/1.3 "Hanken Grotesk",sans-serif;color:var(--ink);background:var(--white);
    transition:border-color .16s var(--ease), box-shadow .16s var(--ease)}
  .field select{appearance:none;padding-right:38px;background-repeat:no-repeat;background-position:right 14px center;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237B838E' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
  .field input:focus,.field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
  .field.bad input,.field.bad select{border-color:#D14343;box-shadow:0 0 0 3px rgba(209,67,67,.1)}
  .err{display:none;color:#C13030;font-size:13px;margin-top:6px}
  .field.bad .err{display:block}
  .field.ok input{border-color:#9FD9BE}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .finep{color:var(--muted);font-size:12.5px;text-align:center;margin-top:13px;line-height:1.45}
  .optout{display:flex;gap:9px;align-items:flex-start;margin-top:2px;margin-bottom:4px;font-size:13.5px;color:var(--body);cursor:pointer}
  .optout input{width:16px;height:16px;margin:3px 0 0;flex:none;accent-color:var(--blue)}
  .done{text-align:center;padding:14px 0}
  .done .big{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.5rem;margin-bottom:10px}
  .done p{color:var(--body);font-size:15.5px}
  .spin{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px}
  @keyframes sp{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){.spin{animation:none}}

  /* calendar */
  .vis{background:var(--white);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
  .vis-top{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid var(--line);font-size:13px}
  .vis-top .tag{margin-left:auto;color:var(--blue);font-weight:600;font-size:12px}
  .cal{padding:14px 16px 18px}
  .cal-h{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:6px}
  .cal-h span{font-size:10px;color:var(--muted);text-align:center;letter-spacing:.06em}
  .cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
  .cel{aspect-ratio:1/1.05;border-radius:8px;background:var(--off);padding:5px;font-size:10px;color:var(--muted);overflow:hidden}
  .cel b{display:block;font-weight:600;font-size:10px;color:var(--ink);margin-bottom:3px}
  .cel.send{background:var(--blue-wash)}
  .cel.send span{display:block;color:var(--blue);font-weight:600;font-size:9.5px;line-height:1.2}
  .cel.bf{background:var(--ink)}
  .cel.bf b,.cel.bf span{color:#fff}
  .cel.bf span{font-weight:600;font-size:9px}
  .vis-foot{padding:11px 16px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}

  /* ── sections ─────────────────────────────────────────── */
  section{padding:84px 0}
  .alt{background:var(--off);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .eyebrow{color:var(--blue);font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px;display:block}
  .sec-lede{color:var(--body);margin-top:16px;max-width:62ch}

  /* ── email gallery ────────────────────────────────────── */
  .galhead{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
  .demo-note{color:var(--muted);font-size:13px;max-width:30ch}
  .rail{display:flex;gap:20px;margin-top:38px;overflow-x:auto;padding:6px 24px 22px;margin-left:-24px;margin-right:-24px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .rail::-webkit-scrollbar{height:7px}
  .rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
  .ecard{flex:0 0 300px;scroll-snap-align:start;display:flex;flex-direction:column}
  .ecap{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
  .ecap b{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--blue)}
  .ecap span{font-size:12px;color:var(--muted)}
  .eframe{position:relative;border-radius:16px;overflow:hidden;background:#fff;
    border:1px solid var(--line);box-shadow:var(--shadow);height:430px;
    transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
  .ecard:hover .eframe{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
  .eframe .inner{position:absolute;inset:0;overflow:hidden}
  .erow{display:flex;line-height:0;font-size:0}
  .erow img{display:block;height:auto}
  .efade{position:absolute;left:0;right:0;bottom:0;height:110px;pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.93) 72%,#fff 100%)}
  .ebadge{position:absolute;top:10px;left:10px;z-index:2;background:rgba(11,12,14,.84);color:#fff;
    border-radius:999px;padding:5px 11px;font-size:10.5px;font-weight:600;letter-spacing:.03em;
    display:inline-flex;align-items:center;gap:6px;backdrop-filter:blur(4px)}
  .ebadge i{width:5px;height:5px;border-radius:50%;background:#3EDD9E;display:block}
  .swipe{color:var(--muted);font-size:13px;margin-top:4px}
  .eoops{position:absolute;inset:0;z-index:3;display:grid;place-items:center;text-align:center;
    padding:26px;background:var(--off);color:var(--muted);font-size:13.5px;line-height:1.5}

  /* ── value card ───────────────────────────────────────── */
  .valwrap{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:22px;margin-top:42px;align-items:stretch}
  .vcard{background:var(--white);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
  .vcard .vhead{padding:22px 26px 18px;border-bottom:1px solid var(--line)}
  .vcard .vhead h3{font-size:1.25rem}
  .vcard .vhead p{color:var(--muted);font-size:14px;margin-top:5px}
  .deliv{list-style:none;margin:0;padding:8px 26px 20px}
  .deliv li{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:baseline;padding:13px 0;border-bottom:1px dashed var(--line)}
  .deliv li:last-child{border-bottom:0}
  .deliv .d-what{font-size:15.5px}
  .deliv .d-what small{display:block;color:var(--muted);font-size:13px;margin-top:2px;font-weight:400}
  .deliv .d-cost{font-size:14.5px;color:var(--muted);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
  .deliv .d-cost s{opacity:.75}
  .vtotal{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 20px;
    padding:18px 26px;background:var(--off);border-top:1px solid var(--line)}
  .vtotal .lbl{font-size:13.5px;color:var(--body);max-width:44ch}
  @media (max-width:560px){ .vtotal{grid-template-columns:1fr} }
  .vtotal .amt{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.5rem;
    font-variant-numeric:tabular-nums;color:var(--muted);text-decoration:line-through;text-decoration-thickness:2px}

  .pcard{background:linear-gradient(165deg,#13161B 0%,#0B0C0E 62%);color:#fff;border-radius:20px;
    padding:30px 28px;display:flex;flex-direction:column;justify-content:center;text-align:center;
    box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
  .pcard::after{content:"";position:absolute;inset:-40% -20% auto -20%;height:70%;
    background:radial-gradient(60% 60% at 50% 0%, rgba(37,99,235,.42) 0%, rgba(37,99,235,0) 70%);pointer-events:none}
  .pcard .plbl{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:#9AA4B2;position:relative}
  .preveal{position:relative;margin:12px 0 4px;min-height:84px;display:grid;place-items:center}
  .pamt{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:clamp(3rem,6.6vw,4.3rem);
    line-height:1;letter-spacing:-.035em;
    filter:blur(15px);opacity:.65;transform:scale(.97);
    transition:filter .85s var(--ease), opacity .85s var(--ease), transform .85s var(--ease)}
  .preveal.shown .pamt{filter:blur(0);opacity:1;transform:none}
  .pafter{color:#C3CAD4;font-size:14.5px;line-height:1.55;position:relative;max-width:34ch;margin:10px auto 0}
  .pdelta{display:inline-block;margin-top:16px;background:rgba(62,221,158,.14);color:#4FE3A8;
    border:1px solid rgba(62,221,158,.3);border-radius:999px;padding:7px 15px;font-size:13px;font-weight:600;position:relative}
  .pcard .btn{margin-top:20px;position:relative}
  @media (prefers-reduced-motion:reduce){ .pamt{filter:none;opacity:1;transform:none} }

  /* ── steps ────────────────────────────────────────────── */
  .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:42px;position:relative}
  .fstep{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:24px;
    transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease)}
  .fstep:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--blue-soft)}
  .fnum{width:30px;height:30px;border-radius:9px;background:var(--blue-wash);color:var(--blue);
    display:grid;place-items:center;font-weight:700;font-size:13.5px;margin-bottom:14px}
  .fstep p{color:var(--body);font-size:15px;margin-top:7px}

  /* ── fit ──────────────────────────────────────────────── */
  .fit{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:42px}
  .fbox{border-radius:18px;padding:28px;border:1px solid var(--line);background:var(--white)}
  .fbox.no{background:var(--off)}
  .fbox h3{margin-bottom:16px}
  .fbox ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
  .fbox li{display:flex;gap:11px;font-size:15.5px;color:var(--body);align-items:flex-start}
  .mk{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;margin-top:2px;font-size:12px;font-weight:700}
  .mk.y{background:rgba(0,131,76,.11);color:var(--green)}
  .mk.n{background:#EAEDF1;color:var(--muted)}

  /* ── faq ──────────────────────────────────────────────── */
  details{border-bottom:1px solid var(--line);padding:19px 0}
  details summary{cursor:pointer;font-weight:600;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
  details summary::-webkit-details-marker{display:none}
  details summary::after{content:"";width:11px;height:11px;flex:none;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
    transform:rotate(45deg) translateY(-3px);transition:transform .22s var(--ease)}
  details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
  details p{color:var(--body);margin-top:11px;font-size:15.5px;max-width:74ch}

  /* ── final ────────────────────────────────────────────── */
  .final{background:var(--ink);color:#fff;border:0}
  .final h2{color:#fff}
  .final .sec-lede{color:#AFB7C3}
  .final-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:48px;align-items:center}

  footer{padding:30px 0;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
  footer .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

  /* sticky mobile cta */
  .sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(255,255,255,.94);
    backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:11px 16px calc(11px + env(safe-area-inset-bottom));
    transform:translateY(110%);transition:transform .32s var(--ease);display:none}
  .sticky.show{transform:none}
  .sticky .btn{width:100%}

  @media (max-width:1000px){
    .hero-grid{grid-template-columns:1fr;gap:36px}
    .valwrap{grid-template-columns:1fr}
    .flow{grid-template-columns:1fr 1fr}
    .final-grid{grid-template-columns:1fr;gap:30px}
  }
  @media (max-width:760px){
    section{padding:58px 0}
    .fit{grid-template-columns:1fr}
    .sticky{display:block}
    body{padding-bottom:0}
  }
  @media (max-width:560px){
    .wrap{padding:0 18px}
    .row2{grid-template-columns:1fr}
    .flow{grid-template-columns:1fr}
    .nav .btn{padding:11px 15px;font-size:14px}
    .ecard{flex-basis:260px}
    .eframe{height:380px}
    .deliv li{grid-template-columns:1fr;gap:3px}
    .deliv .d-cost{text-align:left}
  }