/* QuickQuote — the marketing front end.
 *
 * Loaded by the home page and by the shared header/footer on every other public
 * page. site.css still owns the interior pages' body copy; this file owns the
 * shell, the type scale and everything that moves.
 *
 * THE PALETTE IS THE PRODUCT'S. Deep green, warm ivory, one sand accent, and
 * nothing else — the loudest thing on any screen should still be the money.
 *
 * Every animation here is progressive: the page is complete and readable with
 * JavaScript off, and every motion rule is switched off under
 * prefers-reduced-motion. Nothing important is ever revealed by motion alone.
 */

:root{
  /* Green, all the way down. The 900 is the brand green pushed to a near-black
     that still reads as green next to ivory, which is what lets the dark bands
     feel like the same product rather than a black hole in the middle of it. */
  --g-900:#12261a; --g-800:#193423; --g-700:#22452f; --g-600:#2f5d43;
  --g-500:#3f7454; --g-400:#6f9c80; --g-300:#a8c6b3; --g-100:#dfe9e1; --g-50:#eef3ee;

  --ink:#171a15; --ink-soft:#585d54; --ink-faint:#8d9287;
  --paper:#f5f4ee; --paper-2:#efeee6; --card:#fffefa;
  --line:#e2e0d5; --line-soft:#ecebe2;

  /* Sand. One accent, used for the single loudest block on the page and for the
     hand-drawn marks. Warm, so it reads as timber and gravel rather than as a
     highlighter pen. */
  --sand:#e8d9b0; --sand-soft:#f3ead1; --clay:#b5714e;

  --on-dark:#f2f3ec; --on-dark-soft:#a9b3a5; --on-dark-line:#2c4234;

  --serif:"Hoefler Text",Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  --pill:100px; --r:16px; --r-sm:11px;
  --shadow:0 1px 2px rgba(23,26,21,.04), 0 8px 26px rgba(23,26,21,.06);
  --shadow-lift:0 2px 6px rgba(23,26,21,.06), 0 28px 70px rgba(23,26,21,.16);
  --ease:cubic-bezier(.2,.72,.2,1);
  --gut:clamp(20px, 5vw, 64px);
  --maxw:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* The nav floats over the page, so anything an in-page link jumps to has to stop
   short of it. Without this, "The sum" lands with its own label tucked under the
   pill and the section reads as starting halfway through. */
section[id], header[id]{scroll-margin-top:130px}
body.qq{
  margin:0; background:var(--paper); color:var(--ink);
  font:18px/1.62 var(--serif); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.qq img{max-width:100%; height:auto; display:block}
:focus-visible{outline:2px solid var(--g-600); outline-offset:3px; border-radius:6px}

/* THE GUTTER RULE, carried over from site.css: always padding-inline, never the
   `padding: 90px 0` shorthand, which silently resets the inline padding to zero
   and puts the headline against the edge of a phone. */
.shell{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
.rule{height:1px; background:var(--line); border:0; margin:0}

/* ---------------------------------------------------------------- type ---- */
.display{
  font:700 clamp(44px, 7.4vw, 104px)/0.98 var(--serif);
  letter-spacing:-.035em; margin:0; text-wrap:balance;
}
.h2{
  font:700 clamp(30px, 4.2vw, 54px)/1.04 var(--serif);
  letter-spacing:-.028em; margin:0; text-wrap:balance;
}
.h3{font:700 clamp(21px,2.1vw,27px)/1.2 var(--serif); letter-spacing:-.02em; margin:0}
.giant{
  font:700 clamp(56px, 11vw, 150px)/0.9 var(--serif);
  letter-spacing:-.045em; margin:0;
}
.lede{font-size:clamp(18px,1.5vw,21px); line-height:1.55; color:var(--ink-soft); margin:0}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font:600 11.5px/1 var(--sans); letter-spacing:.15em; text-transform:uppercase;
  color:var(--g-600);
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--g-400)}
.eyebrow.plain::before{display:none}
.on-dark .eyebrow{color:var(--g-300)}
.mono{font:12px/1.5 var(--mono); letter-spacing:.02em; color:var(--ink-faint)}
.num{font-variant-numeric:tabular-nums}

/* -------------------------------------------------------------- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:0 26px; border-radius:var(--pill);
  font:600 16px/1 var(--sans); text-decoration:none; border:1px solid transparent;
  /* A call to action that wraps onto two lines inside a pill looks broken. It is
     the one label on the page that must never reflow. */
  white-space:nowrap;
  cursor:pointer; transition:transform .2s var(--ease), box-shadow .2s var(--ease),
    background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn .arw{transition:translate .2s var(--ease)}
.btn:hover .arw{translate:4px 0}
.btn-primary{background:var(--g-700); color:var(--on-dark); box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--g-600); transform:translateY(-2px); box-shadow:var(--shadow-lift)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--g-500); transform:translateY(-2px)}
.on-dark .btn-ghost{color:var(--on-dark); border-color:var(--on-dark-line)}
.on-dark .btn-ghost:hover{border-color:var(--g-400)}
.btn-sand{background:var(--sand); color:var(--g-900)}
.btn-sand:hover{background:var(--sand-soft); transform:translateY(-2px); box-shadow:var(--shadow-lift)}

/* ------------------------------------------------------------------ nav ---- */
.nav-wrap{position:fixed; inset:14px 0 auto; z-index:60; pointer-events:none}
.nav{position:relative}
.nav{
  pointer-events:auto; max-width:var(--maxw); margin-inline:auto;
  margin-left:max(var(--gut), calc(50vw - var(--maxw)/2)); margin-right:max(var(--gut), calc(50vw - var(--maxw)/2));
  display:flex; align-items:center; gap:8px;
  padding:8px 8px 8px 20px; border-radius:var(--pill);
  background:rgba(255,254,250,.72); border:1px solid var(--line);
  backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 1px 2px rgba(23,26,21,.03);
  transition:box-shadow .35s var(--ease), background .35s var(--ease), padding .35s var(--ease);
}
.nav.stuck{box-shadow:var(--shadow-lift); background:rgba(255,254,250,.9)}
.brand{
  font:700 21px/1 var(--serif); letter-spacing:-.03em; color:var(--g-700);
  text-decoration:none; display:inline-flex; align-items:center; min-height:44px;
  margin-right:auto; white-space:nowrap;
}
.nav a.lnk{
  font:500 14.5px/1 var(--sans); color:var(--ink-soft); text-decoration:none;
  display:inline-flex; align-items:center; min-height:44px; padding:0 13px;
  border-radius:var(--pill); white-space:nowrap;
  transition:color .18s var(--ease), background .18s var(--ease);
}
.nav a.lnk:hover{color:var(--ink); background:var(--g-50)}
.nav .btn{min-height:44px; padding:0 19px; font-size:14.5px}
/* a.lnk sets display, so the hide rule has to out-specify it — `.nav .hide-md`
   loses to `.nav a.lnk` and the links stayed on screen at every width. */
/* 1060, not 880. Adding "Snap notes" took the row's intrinsic width to 948px, and
   the bar sits inside ~100px of page gutter, so the full set of links needs a
   1048px viewport. At 880 the links stayed on screen down to widths where the
   row overflowed and the "Start free trial" pill was clipped off the end —
   measured at 985px, where the row needed 948 and had 885.
   The menu button below MUST use the same number, or the band between them gets
   no navigation at all. Re-measure if another link is ever added. */
@media(max-width:1060px){ .nav a.lnk.hide-md{display:none} }
@media(max-width:420px){ .nav{padding-left:16px} .nav .btn{padding:0 15px; font-size:13.5px} }

/* THE SAME CLIPPING AS THE LINKS ABOVE, ONE BREAKPOINT FURTHER DOWN.
   At 320px — an iPhone SE, and the narrowest phone still in real use — the row
   needs 363px and has 285, so "Start free trial →" ran off the right edge of the
   screen reading "Start free t". The only button on the page that starts a trial
   was cut in half on the smallest handset a landscaper is likely to be holding.
   The brand comes down a size, the pill tightens, and the CTA drops to its short
   label. Both labels are in the markup and one is always hidden, so the button a
   screen reader announces is always the one on screen. */
.nav .cta-tight{display:none}
@media(max-width:400px){
  .nav{padding:6px 6px 6px 12px; gap:6px}
  .brand{font-size:18px}
  .nav .btn{padding:0 13px}
}
/* The short label only below 355px. Measured on a real handset viewport (no
   desktop scrollbar eating 15px): at 360 the full label lands 21px inside the
   pill, at 320 it hangs 48px past it. Swapping it any earlier would shorten the
   CTA on the 375 and 390 phones most of the list is read on, for nothing. */
@media(max-width:355px){
  .nav .cta-full{display:none}
  .nav .cta-tight{display:inline}
}

/* THE NAV GETS OUT OF THE WAY WHEN YOU READ.
   It floats over the page, so scrolling down used to slide headings underneath it
   — an audit caught "$18,960" and three headlines sitting half-hidden behind the
   pill. It now retreats while you scroll down and comes back the moment you
   scroll up, which is when somebody is actually looking for it. */
.nav-wrap{transition:transform .34s var(--ease), opacity .34s var(--ease)}
.nav-wrap.tucked{transform:translateY(calc(-100% - 20px)); opacity:0}

/* CONTENT PASSING BEHIND THE NAV SHOULD FADE, NOT BE SLICED.
   Scrolling back UP brings the pill over whatever is at the top of the screen,
   and an audit caught a headline, a stat and the demo card each cut clean in half
   by its edge. This is a frosted strip that sits behind the pill and blurs out at
   the bottom, so a line of type dissolves under it instead of stopping dead.
   Blur rather than a painted colour on purpose: it has to work over the ivory
   sections and the dark green ones without being tinted for either. */
.nav-wrap::before{
  content:""; position:absolute; inset:-14px 0 auto; height:128px; pointer-events:none;
  backdrop-filter:blur(16px) saturate(1.05); -webkit-backdrop-filter:blur(16px) saturate(1.05);
  mask-image:linear-gradient(#000 44%, rgba(0,0,0,.62) 66%, rgba(0,0,0,.22) 85%, transparent);
  -webkit-mask-image:linear-gradient(#000 44%, rgba(0,0,0,.62) 66%, rgba(0,0,0,.22) 85%, transparent);
  opacity:0; transition:opacity .3s var(--ease);
}
.nav-wrap.scrim::before{opacity:1}

/* ------------------------------------------------------- the phone menu ---- */
/* Below 1060px the links are hidden, and until this existed there was nothing to
   reach them with: a phone visitor could see the site and never open Pricing. */
.menu-btn{
  display:none; width:44px; height:44px; flex:none; padding:0; cursor:pointer;
  background:transparent; border:0; border-radius:var(--pill); position:relative;
}
.menu-btn span, .menu-btn span::before, .menu-btn span::after{
  content:""; position:absolute; left:50%; width:18px; height:2px; border-radius:2px;
  background:var(--ink); translate:-50% 0; transition:transform .26s var(--ease), opacity .2s var(--ease);
}
.menu-btn span{top:50%; margin-top:-1px}
.menu-btn span::before{left:0; translate:0 0; top:-6px}
.menu-btn span::after{left:0; translate:0 0; top:6px}
.menu-btn[aria-expanded="true"] span{background:transparent}
.menu-btn[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1060px){ .menu-btn{display:block} }

.menu{
  display:none; position:absolute; left:0; right:0; top:calc(100% + 8px);
  background:rgba(255,254,250,.97); border:1px solid var(--line); border-radius:22px;
  box-shadow:var(--shadow-lift); padding:10px;
  backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
}
.menu.open{display:block}
.menu a{
  display:flex; align-items:center; min-height:52px; padding:0 16px;
  font:500 17px/1 var(--sans); color:var(--ink); text-decoration:none;
  border-radius:14px; border-bottom:1px solid var(--line-soft);
}
.menu a:last-child{border-bottom:0}
.menu a:hover, .menu a:focus-visible{background:var(--g-50)}
@media(min-width:881px){ .menu, .menu.open{display:none} }

/* --------------------------------------------------------------- reveal ---- */
/* GATED ON .js, WHICH THE SCRIPT ADDS AT BOOT.
   Without this gate the whole page defaults to opacity:0 and a browser with
   JavaScript off — or a script that throws before the observer is wired — renders
   a blank sheet of ivory. The reveal is decoration; the page must be complete
   without it. */
.js [data-rise]{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.js [data-rise].seen{opacity:1; transform:none}
[data-rise][data-d="1"]{transition-delay:.09s}
[data-rise][data-d="2"]{transition-delay:.18s}
[data-rise][data-d="3"]{transition-delay:.27s}
[data-rise][data-d="4"]{transition-delay:.36s}
/* Words of the headline land one after another, like a hand writing them. */
.js .word{display:inline-block; opacity:0; transform:translateY(.34em); transition:opacity .62s var(--ease), transform .62s var(--ease)}
.js .word.seen{opacity:1; transform:none}

/* ----------------------------------------------------------------- hero ---- */
.hero{padding-block:clamp(116px,14vh,156px) clamp(10px,1.6vw,18px); position:relative}
.hero-grid{display:grid; gap:clamp(24px,4vw,56px); grid-template-columns:1fr; align-items:end}
@media(min-width:960px){ .hero-grid{grid-template-columns:1.25fr .95fr} }
.hero .display em{font-style:italic; color:var(--g-600); position:relative}
.mark-underline{display:block; width:100%; height:16px; overflow:visible; margin-top:-2px}
.mark-underline path{
  fill:none; stroke:var(--clay); stroke-width:4; stroke-linecap:round;
  stroke-dasharray:400; stroke-dashoffset:400;
}
.seen .mark-underline path{animation:draw 1.2s var(--ease) .5s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero-right{display:flex; flex-direction:column; gap:22px; padding-bottom:6px}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px}
.hero-note{font:15px/1.5 var(--sans); color:var(--ink-soft); margin:0}
.hero-note b{color:var(--ink)}
.facts{display:flex; flex-wrap:wrap; gap:0; margin-top:clamp(26px,3.4vw,38px); border-top:1px solid var(--line)}
.fact{
  flex:1 1 200px; padding:20px 22px 20px 0; border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; gap:5px;
}
/* Four across on a wide screen, two and two on a tablet. At 768 the default flex
   basis fitted three and left the fourth stranded on a row of its own. */
@media(max-width:900px){ .fact{flex:1 1 44%} }
@media(max-width:520px){ .fact{flex:1 1 100%} }
.fact b{font:700 clamp(26px,2.6vw,34px)/1 var(--serif); letter-spacing:-.02em; color:var(--g-700)}
.fact span{font:500 14px/1.4 var(--sans); color:var(--ink-soft)}

/* ------------------------------------------------------- the live demo ---- */
.demo-wrap{padding-block:clamp(18px,2.4vw,28px) clamp(52px,6.5vw,84px)}
.demo{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-lift); overflow:hidden;
}
.demo-bar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 18px; background:var(--g-50); border-bottom:1px solid var(--line-soft);
}
.demo-bar .biz{font:700 16px/1.2 var(--serif); color:var(--g-700)}
.demo-bar .src{font:11.5px/1.2 var(--mono); color:var(--ink-soft)}
.demo-cols{display:grid; grid-template-columns:1fr}
@media(min-width:720px){ .demo-cols{grid-template-columns:1fr 1fr} }
.demo-col{padding:clamp(16px,2vw,24px)}
.demo-col + .demo-col{border-top:1px solid var(--line-soft)}
@media(min-width:720px){ .demo-col + .demo-col{border-top:0; border-left:1px solid var(--line-soft)} }
.demo-col h4{
  margin:0 0 14px; font:600 11px/1 var(--sans); letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-faint);
}
/* Same reservation as the priced column: the notes wrap onto more lines on a phone,
   and the 18px that grew was enough to slide the section below it. */
.typed{font:14px/1.95 var(--mono); white-space:pre-wrap; min-height:232px; color:var(--ink)}
@media(min-width:720px){ .typed{min-height:200px} }
.cursor{display:inline-block; width:8px; height:15px; background:var(--g-500); translate:0 2px; animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
/* The height the finished quote occupies, reserved before it arrives. Without it
   the panel grows line by line and every section below it slides down while
   somebody is reading — which also dragged in-page anchors under the nav.
   Measured, not guessed: 392px in two columns, 420 when the rows wrap on a phone. */
.qrows{display:flex; flex-direction:column; gap:1px; min-height:420px; position:relative}
@media(min-width:720px){ .qrows{min-height:392px} }
/* And it should not read as a broken empty box while the notes are still being
   typed. :empty stops applying the moment the first priced line lands. */
.qrows:empty::before{
  content:"Waiting on the notes…";
  font:13px/1.6 var(--mono); color:var(--ink-faint);
}
.qrow{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:9px 10px; border-radius:var(--r-sm); font:15px/1.35 var(--sans);
  transition:opacity .36s var(--ease), transform .36s var(--ease), background .5s var(--ease);
}
.js .qrow{opacity:0; transform:translateY(6px)}
.js .qrow.seen{opacity:1; transform:none}
.qrow.flash{background:var(--g-50)}
.qrow .lbl small{display:block; font:11.5px/1.55 var(--mono); color:var(--ink-faint)}
.qrow .amt{font:600 15px/1.35 var(--sans); white-space:nowrap}
.qrow.ask .amt{color:var(--clay); font-style:italic; font-weight:500}
.qrow.sum{
  margin-top:8px; padding-top:14px; border-top:1px solid var(--line); border-radius:0;
}
.qrow.sum .lbl{font-weight:600}
.qrow.sum .amt{font:700 22px/1 var(--serif); color:var(--g-700)}
.demo-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 18px; border-top:1px solid var(--line-soft); background:var(--paper-2);
}
.demo-foot p{margin:0; font:13.5px/1.5 var(--sans); color:var(--ink-soft)}
.replay{
  font:500 13.5px/1 var(--sans); color:var(--ink-soft); background:var(--card);
  border:1px solid var(--line); border-radius:var(--pill);
  min-height:44px; padding:0 18px; cursor:pointer;
  transition:border-color .18s var(--ease), color .18s var(--ease);
}
.replay:hover{border-color:var(--g-500); color:var(--ink)}

/* ------------------------------------------------------------ dark band ---- */
.dark{
  background:var(--g-900); color:var(--on-dark); position:relative; overflow:hidden;
  padding-block:clamp(64px,9vw,120px);
}
.dark .lede{color:var(--on-dark-soft)}
.dark .h2, .dark .giant, .dark .h3{color:var(--on-dark)}
/* A surveyor's grid, drawn in CSS. It drifts a few pixels so the band feels lit
   rather than printed, and stops dead under reduced motion. */
.dark::before{
  content:""; position:absolute; inset:-40px; pointer-events:none;
  background-image:
    linear-gradient(rgba(168,198,179,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,198,179,.07) 1px, transparent 1px);
  background-size:72px 72px, 72px 72px;
  animation:drift 32s linear infinite;
  mask-image:radial-gradient(120% 90% at 50% 25%, #000 35%, transparent 78%);
}
@keyframes drift{to{transform:translate3d(72px,72px,0)}}
.dark .shell{position:relative}

/* ----------------------------------------------- big two-column chapters --- */
.chapter{padding-block:clamp(56px,7vw,96px); border-top:1px solid var(--line)}
.dark .chapter{border-top-color:var(--on-dark-line)}
.chapter-grid{display:grid; gap:clamp(22px,3.4vw,52px); grid-template-columns:1fr; align-items:start}
@media(min-width:900px){ .chapter-grid{grid-template-columns:.85fr 1.15fr} }
.chapter-copy{display:flex; flex-direction:column; gap:18px}
.chapter-copy p{margin:0}
.ticks{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:0}
.ticks li{
  display:flex; gap:12px; align-items:flex-start; padding:14px 0;
  border-bottom:1px solid var(--line); font:16px/1.5 var(--sans);
}
.dark .ticks li{border-bottom-color:var(--on-dark-line)}
.ticks li:first-child{border-top:1px solid var(--line)}
.dark .ticks li:first-child{border-top-color:var(--on-dark-line)}
.ticks .t{color:var(--g-500); flex:none; font-weight:700}
.dark .ticks .t{color:var(--g-400)}

/* ------------------------------------------------------------- panels ------ */
.panel{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(20px,2.4vw,30px); box-shadow:var(--shadow);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.dark .panel{background:rgba(255,254,250,.04); border-color:var(--on-dark-line); box-shadow:none}
.panel.hoverable:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:var(--g-400)}

/* -------------------------------------------------------------- timeline --- */
.steps{position:relative; max-width:820px; margin-inline:auto; padding-left:10px}
.steps .rail{position:absolute; left:10px; top:8px; bottom:74px; width:2px; background:var(--line)}
.dark .steps .rail{background:var(--on-dark-line)}
.steps .rail-fill{
  position:absolute; left:10px; top:8px; width:2px; height:var(--fill,0px);
  background:linear-gradient(180deg, var(--g-500), var(--clay));
  transition:height .1s linear;
}
.step{position:relative; padding:0 0 clamp(34px,4vw,54px) 52px}
.step:last-child{padding-bottom:0}
.step .bead{
  position:absolute; left:11px; top:6px; translate:-50% 0;
  width:16px; height:16px; border-radius:50%; background:var(--paper);
  border:2px solid var(--line);
  transition:background .45s var(--ease), border-color .45s var(--ease), scale .45s var(--ease);
}
.dark .step .bead{background:var(--g-900); border-color:var(--on-dark-line)}
.step.lit .bead{background:var(--g-600); border-color:var(--g-600); scale:1.3}
.step .n{font:600 11.5px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint)}
.dark .step .n{color:var(--on-dark-soft)}
.step h3{margin:12px 0 0}
.step p{margin:12px 0 0; color:var(--ink-soft)}
.dark .step p{color:var(--on-dark-soft)}

/* -------------------------------------------------------------- the sum ---- */
.sand{background:var(--sand); color:var(--g-900); padding-block:clamp(60px,8vw,104px)}
.sand .lede{color:#3d4a3c}
.calc{
  display:grid; gap:clamp(18px,2.4vw,30px); grid-template-columns:1fr; margin-top:36px;
  align-items:stretch;
}
@media(min-width:860px){ .calc{grid-template-columns:1fr 1fr} }
.calc-card{
  background:rgba(255,254,250,.62); border:1px solid rgba(18,38,26,.14);
  border-radius:var(--r); padding:clamp(20px,2.4vw,30px);
  display:flex; flex-direction:column; gap:20px;
}
.field{display:flex; flex-direction:column; gap:9px}
.field label{font:600 13px/1.3 var(--sans); color:var(--g-800)}
.field .hint{font:13px/1.4 var(--sans); color:#5b6659}
.field-row{display:flex; align-items:center; gap:12px}
/* 44px of thumb-height, not 30 — these are the controls the whole section asks
   somebody to play with, and on a phone that happens with a thumb. */
.field input[type="range"]{flex:1; accent-color:var(--g-700); height:44px; margin:0}
.field .val{
  font:700 19px/1 var(--serif); color:var(--g-900); min-width:96px; text-align:right;
  font-variant-numeric:tabular-nums;
}
.calc-out{
  background:var(--g-900); color:var(--on-dark); border-radius:var(--r);
  padding:clamp(22px,2.6vw,32px); display:flex; flex-direction:column; justify-content:center; gap:14px;
}
.calc-out .big{
  font:700 clamp(40px,6vw,72px)/1 var(--serif); letter-spacing:-.03em; color:#fff;
  font-variant-numeric:tabular-nums;
}
.calc-out .cap{font:14.5px/1.55 var(--sans); color:var(--on-dark-soft); margin:0}
.calc-out .split{display:flex; gap:20px; flex-wrap:wrap; border-top:1px solid var(--on-dark-line); padding-top:16px; margin-top:4px}
.calc-out .split div{display:flex; flex-direction:column; gap:3px}
.calc-out .split b{font:700 20px/1 var(--serif); font-variant-numeric:tabular-nums}
.calc-out .split span{font:12.5px/1.3 var(--sans); color:var(--on-dark-soft)}
.honest{
  margin-top:26px; font:15px/1.6 var(--sans); color:#4b5749; max-width:70ch;
  border-left:2px solid rgba(18,38,26,.2); padding-left:16px;
}

/* --------------------------------------------------------------- cards ----- */
.cards{display:grid; gap:16px; grid-template-columns:1fr; margin-top:44px}
@media(min-width:640px){ .cards{grid-template-columns:1fr 1fr} }
@media(min-width:1000px){ .cards{grid-template-columns:repeat(3,1fr)} }
.card-h{display:flex; align-items:center; gap:11px; margin-bottom:10px}
.card-h .ic{
  width:34px; height:34px; border-radius:10px; background:var(--g-50); color:var(--g-700);
  display:grid; place-items:center; flex:none; font:600 14px/1 var(--sans);
}
.dark .card-h .ic{background:rgba(168,198,179,.12); color:var(--g-300)}
.cards p{margin:0; color:var(--ink-soft); font:15.5px/1.6 var(--sans)}
.dark .cards p{color:var(--on-dark-soft)}

/* ----------------------------------------------------------- send modes ---- */
.modes{display:grid; gap:18px; grid-template-columns:1fr; margin-top:40px}
@media(min-width:880px){ .modes{grid-template-columns:1fr 1fr} }
.mode-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
.badge{
  font:600 11px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase;
  padding:7px 11px; border-radius:var(--pill); background:rgba(168,198,179,.14); color:var(--g-300);
}
.switch-row{
  display:flex; align-items:center; gap:14px; margin-top:30px; flex-wrap:wrap;
  font:15px/1.5 var(--sans); color:var(--on-dark-soft);
}
.tog{width:52px; height:44px; flex:none; background:none; border:0; padding:0; position:relative; cursor:pointer}
.tog::before{
  content:""; position:absolute; left:0; top:50%; translate:0 -50%; width:52px; height:30px;
  border-radius:var(--pill); background:var(--on-dark-line); transition:background .3s var(--ease);
}
.tog::after{
  content:""; position:absolute; left:4px; top:50%; translate:0 -50%; width:22px; height:22px;
  border-radius:50%; background:var(--on-dark); transition:translate .3s var(--ease);
}
.tog[aria-pressed="true"]::before{background:var(--g-500)}
.tog[aria-pressed="true"]::after{translate:22px -50%}

/* ----------------------------------------------------------------- faq ----- */
.faq{max-width:820px; margin-inline:auto; margin-top:40px}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:22px 0; font:700 clamp(18px,1.9vw,22px)/1.3 var(--serif);
  letter-spacing:-.015em;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary .pm{
  flex:none; width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--g-600); font:400 19px/1 var(--sans);
  transition:transform .28s var(--ease), background .28s var(--ease), color .28s var(--ease);
}
.qa[open] summary .pm{transform:rotate(45deg); background:var(--g-700); color:var(--on-dark); border-color:var(--g-700)}
.qa .ans{padding:0 0 24px; margin:0; color:var(--ink-soft); max-width:70ch}

/* -------------------------------------------------------------- pricing ---- */
.price-band{padding-block:clamp(60px,8vw,104px)}
.price-card{
  background:var(--card); border:1px solid var(--line); border-radius:22px;
  box-shadow:var(--shadow-lift); overflow:hidden; max-width:920px; margin-inline:auto;
  display:grid; grid-template-columns:1fr;
}
@media(min-width:820px){ .price-card{grid-template-columns:.82fr 1.18fr} }
/* The feature list next to it runs long, so the price column is tall. Centring
   the price in it left a screen and a half of empty green; spacing the badge,
   the figure and the button across the column fills it on purpose. */
.price-left{
  padding:clamp(26px,3vw,40px); background:var(--g-900); color:var(--on-dark);
  display:flex; flex-direction:column; gap:16px; justify-content:space-between;
}
/* No sticky here: the panel is a stretched grid child, so it fills the row and has
   nothing left to stick inside — it just scrolled away like anything else. The
   badge at the top and the button at the bottom carry the column instead. */
.price-left .amt{font:700 clamp(50px,7vw,86px)/.94 var(--serif); letter-spacing:-.035em; color:#fff}
.price-left .per{font:14.5px/1.4 var(--sans); color:var(--on-dark-soft)}
.price-left .free{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  background:var(--sand); color:var(--g-900); border-radius:var(--pill);
  font:600 13px/1 var(--sans); padding:9px 14px; letter-spacing:.02em;
}
.price-right{padding:clamp(26px,3vw,40px); display:flex; flex-direction:column; gap:18px}
.price-right h6{
  margin:22px 0 6px; font:600 11px/1 var(--sans); letter-spacing:.15em;
  text-transform:uppercase; color:var(--g-600);
}
.price-right h6:first-of-type{margin-top:0}
.price-right ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0}
.price-right li{
  display:flex; gap:11px; padding:9px 0; border-bottom:1px solid var(--line-soft);
  font:15px/1.45 var(--sans); color:var(--ink);
}
.price-right li:last-child{border-bottom:0}
.price-right .t{color:var(--g-600); font-weight:700; flex:none}

/* --------------------------------------------------------------- closer ---- */
.closer{padding-block:clamp(70px,9vw,120px); text-align:center}
.closer .lede{margin-inline:auto; max-width:56ch}
.closer .btn{margin-top:30px}
/* The honest small print, directly under the button rather than buried on the
   pricing page. A card DOES go on at signup, and someone who finds that out at
   the payment screen instead of here has been handled, not sold to. */
.closer-note{
  margin:18px auto 0; max-width:52ch;
  font:14.5px/1.6 var(--sans); color:rgba(255,254,250,.62);
}

/* ------------------------------------------------------- what you send ---- */
/* The two things the product actually hands over, side by side. The PDF is
   portrait and the app screen is landscape, so they are NOT forced to equal
   heights — each sits at its own aspect and they align at the top. */
.deliverables{
  display:grid; gap:26px; margin-top:38px;
  grid-template-columns:1fr; align-items:start;
}
@media(min-width:860px){ .deliverables{grid-template-columns:1.02fr 0.98fr; gap:30px} }
.deliverable{padding:0; overflow:hidden; margin:0}
.deliverable img{display:block; width:100%; height:auto}
.deliverable figcaption{
  padding:16px 20px 18px; border-top:1px solid var(--line);
  font:15px/1.55 var(--sans); color:var(--ink-soft); background:var(--card);
}

/* --------------------------------------------------------- objections ---- */
.objections{display:grid; gap:22px; margin-top:38px; grid-template-columns:1fr}
@media(min-width:900px){ .objections{grid-template-columns:repeat(3,1fr); gap:26px} }
.objection{
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:26px 24px;
}
.objection .h3{font-size:clamp(18px,1.5vw,20.5px); line-height:1.3}
.objection p{margin:12px 0 0; font:15.5px/1.6 var(--sans); color:var(--ink-soft)}

/* --------------------------------------------------------------- footer ---- */
.foot{background:var(--g-900); color:var(--on-dark); padding-block:clamp(48px,6vw,72px) 34px}
.foot-grid{display:grid; gap:32px; grid-template-columns:1fr}
@media(min-width:760px){ .foot-grid{grid-template-columns:1.4fr 1fr 1fr} }
.foot .brand{color:var(--on-dark); font-size:24px}
.foot p{color:var(--on-dark-soft); font:15px/1.6 var(--sans); margin:10px 0 0; max-width:42ch}
.foot h5{margin:0 0 14px; font:600 11.5px/1 var(--sans); letter-spacing:.15em; text-transform:uppercase; color:var(--g-300)}
.foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.foot a{
  color:var(--on-dark-soft); text-decoration:none; font:15px/1 var(--sans);
  display:inline-flex; align-items:center; min-height:38px;
  transition:color .18s var(--ease);
}
.foot a:hover{color:var(--on-dark)}
.foot .legal{
  margin-top:40px; padding-top:22px; border-top:1px solid var(--on-dark-line);
  font:13px/1.75 var(--sans); color:var(--on-dark-soft);
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-rise], .word, .qrow{opacity:1 !important; transform:none !important}
  .mark-underline path{stroke-dashoffset:0}
}

/* ---- snap your notes ----
   A drawing, not a screenshot. The strokes are an impression of handwriting so
   the section can say what the feature does without shipping a staged photo of
   somebody's notepad and calling it evidence. */
.snap-flow{
  display:grid; grid-template-columns:auto auto 1fr; align-items:center;
  gap:clamp(12px,2vw,22px);
}
.snap-page{
  width:96px; flex:none; border:1px solid var(--line); border-radius:10px;
  background:var(--paper); padding:6px;
}
.snap-page svg{display:block; width:100%; height:auto}
.snap-page .pg{fill:var(--card); stroke:var(--line); stroke-width:1}
.snap-page .ink{
  fill:none; stroke:var(--g-700); stroke-width:2.4;
  stroke-linecap:round; opacity:.55;
}
.snap-arrow{font:20px/1 var(--sans); color:var(--g-400)}
.snap-out{display:flex; flex-direction:column; gap:7px; min-width:0}
.snap-out span{
  font:14.5px/1.35 var(--sans); color:var(--g-800);
  background:var(--g-50); border-radius:8px; padding:8px 11px;
}
.snap-note{font:14px/1.5 var(--sans); color:var(--soft); margin:18px 0 0}
@media (max-width:520px){
  .snap-flow{grid-template-columns:1fr; justify-items:start}
  .snap-arrow{transform:rotate(90deg)}
}


/* ------------------------------------------------------ the PDF, shown ---- */
/* Sits inside a dark section, so the page (which is white) needs a frame that
   reads as paper on a table rather than a hole punched in the background. */
.pdf-show{
  margin:44px auto 0; max-width:620px; text-align:center;
}
.pdf-show img{
  display:block; width:100%; height:auto; border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.34);
}
.pdf-show figcaption{
  margin-top:16px; font:15px/1.6 var(--sans);
  color:rgba(255,254,250,.66); max-width:52ch; margin-inline:auto;
}