@font-face{font-family:Poppins;src:url(/fonts/poppins-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url(/fonts/poppins-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Poppins;src:url(/fonts/poppins-800.woff2) format('woff2');font-weight:800;font-display:swap}
:root{
  --paper:#faf7f3;
  --paper-2:#f5f0e9;
  --card:#fffdfb;
  --ink:#14110f;
  --mid:#4f4740;
  --soft:#6f665e;
  --line:rgba(20,17,15,.10);
  --line-soft:rgba(20,17,15,.055);
  --accent:#ff5722;
  --accent-ink:#a4400f;
  --shell:1100px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.68 Poppins,system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--accent-ink)}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.12}
p{margin:0 0 1em}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:3px}

/* ---- chrome, drawn to match /about/ and /pricing/ so this reads as one site */
.top{display:flex;align-items:center;gap:22px;max-width:var(--shell);margin:0 auto;padding:20px 24px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.06rem;color:var(--ink);text-decoration:none;letter-spacing:-.02em}
.brand b{color:var(--accent-ink);font-weight:800}
.nav{display:flex;gap:20px;margin-left:auto}
.nav a{font-size:.9rem;color:var(--soft);text-decoration:none;transition:color .18s ease}
.nav a:hover{color:var(--ink)}
.top .cta{margin-left:8px}
.cta{display:inline-block;padding:11px 20px;border-radius:999px;background:var(--ink);color:#fff;font-size:.9rem;font-weight:600;text-decoration:none;transition:transform .18s ease,background .18s ease}
.cta:hover{background:#000;transform:translateY(-1px)}
.ghost{display:inline-block;padding:11px 20px;border-radius:999px;border:1px solid var(--line);color:var(--ink);font-size:.9rem;font-weight:600;text-decoration:none;transition:border-color .18s ease}
.ghost:hover{border-color:var(--ink)}

/* ---- hero. Left-aligned and narrow. A centred kicker over a centred headline
   over a centred pair of buttons is the templated composition this page most
   needs to avoid, since it is the page arguing that the product is real. */
.hero{max-width:var(--shell);margin:0 auto;padding:34px 24px 12px}
.kicker{display:flex;align-items:center;gap:9px;margin:0 0 16px;font-size:.76rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--soft)}
.kicker b{width:4px;height:4px;border-radius:50%;background:var(--accent);display:inline-block}
.hero h1{font-size:clamp(2.3rem,5.4vw,3.5rem);max-width:15ch}
.lede{margin:20px 0 0;font-size:1.16rem;line-height:1.62;color:var(--mid);max-width:64ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0}

/* ---- sections. Numbered spine, hairline between, no boxes. */
main{max-width:var(--shell);margin:0 auto;padding:0 24px 10px}
.sec{padding:44px 0;border-top:1px solid var(--line-soft)}
.sec:first-of-type{border-top:0}
.sec-h{display:flex;align-items:baseline;gap:14px;margin:0 0 18px}
.num{font-size:.78rem;font-weight:800;letter-spacing:.1em;color:var(--accent-ink);opacity:.75}
.sec h2{font-size:clamp(1.5rem,2.9vw,2rem)}
/* The answer paragraph is the passage an assistant lifts. It is styled to look
   like a lead, not like a pull quote, so it reads as the section's first
   sentence rather than as decoration a reader would skip. */
.answer{font-size:1.09rem;line-height:1.62;color:var(--ink);max-width:70ch;margin:0 0 18px}
.sec-lead{color:var(--mid);max-width:70ch;font-size:.98rem}
.note{color:var(--soft);font-size:.93rem;max-width:70ch;margin-top:18px}

/* ---- rows, not a card grid. Five equal bordered tiles is the uniform-grid
   tell; a hairline between rows separates them for free. */
.rows{list-style:none;margin:0;padding:0}
.rows li{padding:17px 0;border-top:1px solid var(--line-soft)}
.rows li:first-child{border-top:0}
.rows h3{font-size:1.02rem;font-weight:600;letter-spacing:-.01em}
.rows p{margin:6px 0 0;color:var(--mid);font-size:.97rem;max-width:74ch}

.ticks{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ticks li{position:relative;padding-left:26px;color:var(--mid);font-size:.99rem}
.ticks li:before{content:"";position:absolute;left:3px;top:.62em;width:5px;height:9px;border:solid var(--accent-ink);border-width:0 1.9px 1.9px 0;transform:rotate(42deg)}

/* ---- compare table */
.cmp{width:100%;border-collapse:collapse;margin:18px 0 0;font-size:.97rem}
.cmp th{text-align:left;font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;color:var(--soft);font-weight:600;padding:0 16px 10px 0;border-bottom:1px solid var(--line)}
.cmp td{padding:14px 16px 14px 0;border-bottom:1px solid var(--line-soft);color:var(--mid);vertical-align:top}
.cmp td:first-child{color:var(--soft);width:38%}
.cmp td:last-child{color:var(--ink);padding-right:0}

/* ---- quotes. Masonry by column flow so a short quote does not force every
   card in its row to be as tall as the longest one. */
.quotes{columns:2;column-gap:20px;margin:22px 0 0}
.q{break-inside:avoid;margin:0 0 20px;padding:20px 22px;background:var(--card);border:1px solid var(--line-soft);border-radius:14px}
.q blockquote{margin:0;font-size:1rem;line-height:1.6;color:var(--ink)}
/* Opening mark only. A closing one lands hard against the last word or the
   full stop, and across 13 cards it reads as clutter rather than as quotation.
   No-quotes on the element so the browser does not supply its own pair. */
/* Opening mark only. A closing one lands hard against the last word or the
   full stop, and across 13 cards it reads as clutter rather than quotation.

   THE DOUBLED BACKSLASH IS LOAD-BEARING. This CSS lives in a JS template
   literal, and it was patched into place by a script, so a single-backslash
   CSS escape gets read as a legacy OCTAL escape before anything sees it as
   CSS: backslash-201 is U+0081, an unprintable C1 control character, leaving a stray
   C behind. That is exactly what shipped - every quote on the live page
   rendered as a tofu box followed by the letter C. Two backslashes here put
   one real backslash in the CSS, so the browser parses backslash-201C as U+201C.

   open-quote and the quotes property are gone with it. They needed the same
   escape and bought nothing over naming the character directly. */
.q blockquote:before{content:'\201C';color:var(--accent);font-size:1.5em;line-height:0;vertical-align:-.32em;margin-right:2px}
.q figcaption{margin:13px 0 0;font-size:.88rem;font-weight:600;color:var(--ink)}
.q figcaption span{display:flex;align-items:center;gap:7px;margin-top:3px;font-weight:400;font-size:.8rem;color:var(--soft)}
.q figcaption b{width:3px;height:3px;border-radius:50%;background:var(--soft);opacity:.6;display:inline-block}

/* ---- faq */
.faq{display:grid;gap:2px}
.qa{padding:18px 0;border-top:1px solid var(--line-soft)}
.qa:first-child{border-top:0}
.qa h3{font-size:1.02rem;font-weight:600;letter-spacing:-.01em}
.qa p{margin:7px 0 0;color:var(--mid);font-size:.97rem;max-width:76ch}

/* ---- footer */
.foot{background:var(--paper-2);border-top:1px solid var(--line);margin-top:30px}
.foot-in{max-width:var(--shell);margin:0 auto;padding:34px 24px 42px}
.foot-lead{max-width:70ch;color:var(--mid);font-size:.96rem}
.foot-nav{display:flex;flex-wrap:wrap;gap:10px 24px;margin:0 0 22px}
.foot-nav a{font-size:.875rem;color:var(--soft);text-decoration:none;transition:color .2s ease}
.foot-nav a:hover{color:var(--ink)}
.fine{margin:0;font-size:.8rem;color:var(--soft);max-width:80ch}

@media (max-width:760px){
  body{font-size:16px}
  .nav{display:none}
  .quotes{columns:1}
  .cmp td:first-child{width:44%}
  .sec{padding:34px 0}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}