:root{
  --ink:#2E2622; --ink-2:#4A3C34; --ink-3:#6B5B50; --ink-4:#8A7A6E;
  --brand:#8A4A08; --brand-dark:#6F3A05; --brand-tint:#FDF2E4;
  --paper:#FBF6F1; --card:#FFFDFB; --field:#FFF9F3;
  --line:rgba(46,38,34,.09); --line-2:rgba(46,38,34,.12); --brand-line:rgba(138,74,8,.28);
  --hero:linear-gradient(168deg,#EADFF4 0%,#F3DDE6 38%,#FAD9C6 72%,#FBF6F1 100%);
  --hero-short:linear-gradient(170deg,#EADFF4 0%,#F3DDE6 42%,#FAD9C6 78%,#FBF6F1 100%);
  --warm:linear-gradient(150deg,#F6EAF6,#FBE6D5);
  --warm-2:linear-gradient(150deg,#FBE6D5,#F7D3B4);
  --serif:"Newsreader",Georgia,serif; --sans:"Figtree",system-ui,-apple-system,sans-serif;
  --wrap:1120px; --wrap-narrow:880px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--brand);text-decoration-color:rgba(138,74,8,.35);text-underline-offset:3px}
a:hover{color:var(--brand-dark);text-decoration-color:var(--brand-dark)}
input,textarea,button{font:inherit}
input::placeholder,textarea::placeholder{color:#9C8B7E}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;margin:0}
p{margin:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:28px;padding-right:28px}
.wrap--narrow{max-width:var(--wrap-narrow)}
.band{background:var(--hero)}
.band--short{background:var(--hero-short)}
.section{padding-top:84px}
.stack{display:flex;flex-direction:column}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* header */
.site-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:22px;padding-bottom:22px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--serif);font-size:21px}
.pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.72);border:1px solid rgba(138,74,8,.16);border-radius:999px;padding:8px 16px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#6B4A2E;font-weight:600;white-space:nowrap}
.pill .dot{width:7px;height:7px;border-radius:50%;background:#D08A2C}

/* hero */
.hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:56px;align-items:center;padding:40px 28px 72px;max-width:var(--wrap);margin:0 auto}
.hero h1{font-size:clamp(40px,5.4vw,60px);line-height:1.04;letter-spacing:-.02em;margin-bottom:20px;text-wrap:balance}
.lede{font-size:18px;line-height:1.55;color:var(--ink-2);max-width:30em;text-wrap:pretty}

/* forms */
.signup{display:flex;flex-wrap:wrap;gap:10px;max-width:460px}
.input{flex:1 1 220px;min-width:0;padding:15px 18px;border-radius:999px;border:1px solid var(--brand-line);background:rgba(255,255,255,.86);color:var(--ink);outline:none}
.input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(138,74,8,.14)}
.field{width:100%;padding:15px 18px;border-radius:14px;border:1px solid var(--brand-line);background:var(--field);color:var(--ink);outline:none;line-height:1.5}
.field:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(138,74,8,.14)}
textarea.field{resize:vertical}
.btn{flex:0 0 auto;padding:15px 28px;border-radius:999px;border:none;background:var(--brand);color:#FFF6EC;font-weight:600;font-size:16px;cursor:pointer;box-shadow:0 6px 18px rgba(138,74,8,.28);white-space:nowrap}
.btn:hover{background:var(--brand-dark)}
.btn--block{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:17px 26px;font-size:16.5px;text-decoration:none}
.btn--ghost{background:transparent;color:var(--ink-2);border:1px solid rgba(46,38,34,.2);box-shadow:none;padding:9px 18px;font-size:14px;font-weight:400}
.btn--ghost:hover{background:#F5F1EC;color:var(--ink-2)}
/* .btn is a <button> everywhere else; as an <a> it needs the two properties a
   button gets for free, or the ghost "skip" links render underlined inline. */
a.btn{display:inline-block;text-decoration:none}
a.btn--block{display:flex}
/* The demo's call to action. No border-top: .parsed__note directly above it
   already draws one, and two rules 16px apart read as a mistake. */
.parsed__go{margin-top:16px}
.parsed__alt{display:block;width:100%;margin-top:12px;padding:0;border:none;background:none;color:var(--ink-3);font-size:13.5px;font-family:inherit;text-decoration:underline;cursor:pointer}
.parsed__alt:hover{color:var(--brand)}
.note{font-size:14px;color:var(--ink-3)}
.fine{font-size:13.5px;line-height:1.6;color:var(--ink-3)}
.label{font-size:15px;font-weight:600}
.label span{font-weight:400;color:var(--ink-4)}
.check{display:flex;align-items:center;gap:12px;font-size:15px;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--brand);cursor:pointer}

/* chat mock */
.chat{width:100%;max-width:400px;justify-self:center;background:var(--card);border:1px solid rgba(46,38,34,.08);border-radius:26px;box-shadow:0 26px 60px -22px rgba(74,42,20,.34);padding:18px;animation:fadeUp .5s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.chat__head{display:flex;align-items:center;gap:10px;padding:2px 4px 14px;border-bottom:1px solid rgba(46,38,34,.07)}
.chat__avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(140deg,#EADFF4,#FAD9C6);display:grid;place-items:center;font-family:var(--serif);font-size:16px;color:var(--brand-dark)}
.chat__body{display:flex;flex-direction:column;gap:12px;padding-top:16px}
.bubble{max-width:88%;border-radius:16px 16px 16px 4px;padding:11px 14px;font-size:14px;line-height:1.45;background:#F5F1EC;align-self:flex-start}
.bubble--me{align-self:flex-end;max-width:84%;background:#F3D9B6;border-radius:16px 16px 4px 16px}
.bubble--alert{max-width:92%;background:#FFF4E2;border:1px solid rgba(208,138,44,.35);padding:12px 14px}
.tag{display:block;font-size:11px;letter-spacing:.1em;font-weight:700;margin-bottom:5px}
.tag--reply{color:#7B4FD1}
.tag--alert{color:#B06A10}

/* stats */
.stats{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:0}
.stats__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:28px;padding:34px 28px}
.stat__n{font-family:var(--serif);font-size:34px;line-height:1;color:var(--brand)}
.stat__l{font-size:13.5px;color:var(--ink-3);margin-top:6px}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px;display:flex;flex-direction:column;gap:10px}
.card h3{font-size:21px;letter-spacing:-.01em}
.card p{font-size:15px;line-height:1.6;color:var(--ink-2)}
.h2{font-size:clamp(28px,3.4vw,38px)}
.sub{font-size:16px;color:var(--ink-3);max-width:34em;margin-top:8px}
.eyebrow{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);font-weight:700}

/* panel */
.panel{background:var(--warm);border-radius:26px;padding:clamp(28px,4vw,48px);display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:40px;align-items:center}
.panel--cta{background:var(--warm-2);display:block;text-align:center;padding:clamp(36px,5vw,64px) 28px}
.receipt{background:var(--card);border-radius:18px;padding:22px 24px;box-shadow:0 14px 34px -18px rgba(74,42,20,.4)}
.row{display:flex;justify-content:space-between;gap:16px;font-size:15px}
.row+.row{margin-top:10px}
.row--total{border-top:1px solid var(--line-2);margin-top:14px;padding-top:12px;font-weight:700}
.row--total span:last-child{color:var(--brand)}
.num{font-variant-numeric:tabular-nums;color:var(--ink-2)}

/* try it */
.try{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}
/* Wide enough for two columns: field top-left, examples under it, answer down
   the right. Narrower, the source order takes over — field, ANSWER, examples —
   so the thing you are watching update is never below four example buttons. */
@media (min-width:760px){
  /* auto/1fr, or the panel spanning both rows stretches row 1 and leaves a
     dead gap between the field and the examples underneath it. */
  .try{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr}
  .try__field{grid-column:1;grid-row:1}
  .try__examples{grid-column:1;grid-row:2}
  .parsed{grid-column:2;grid-row:1 / span 2}
}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;margin-top:14px}
.chip{padding:8px 14px;border-radius:999px;border:1px solid rgba(46,38,34,.16);background:var(--card);color:var(--ink-2);font-size:13.5px;line-height:1.4;cursor:pointer;text-align:left;height:auto;white-space:normal;flex:0 1 auto}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.parsed{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:0 16px 40px -26px rgba(74,42,20,.4)}
.parsed .row{align-items:baseline}
.parsed dt{font-size:13px;color:var(--ink-3)}
.parsed dd{margin:0;font-size:15.5px;font-weight:600;text-align:right}
.parsed dl{margin:18px 0 0;display:flex;flex-direction:column;gap:14px}
[hidden]{display:none!important}
.parsed .pair{display:flex;justify-content:space-between;gap:18px;align-items:baseline}
.parsed__note{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2);font-size:13.5px;line-height:1.55;color:var(--ink-3)}

/* comparison */
.table{border:1px solid rgba(46,38,34,.1);border-radius:20px;overflow:hidden;background:var(--card);margin-top:32px}
.table__grid{display:grid;grid-template-columns:minmax(120px,.8fr) 1fr 1fr;gap:1px;background:rgba(46,38,34,.09)}
.table__grid>*{background:var(--card);padding:16px 18px;font-size:15px;line-height:1.5}
.table__grid>.th{padding:14px 18px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.table__grid>.rh{font-size:13px;color:var(--ink-3)}
.table__grid>.us{background:var(--brand-tint)}
.table__grid>.th.us{color:var(--brand)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:28px;margin-top:40px}
.step{display:flex;flex-direction:column;gap:8px}
.step h3{font-size:21px}
.step p{font-size:15px;line-height:1.6;color:var(--ink-2)}
.quote{align-self:flex-start;background:#F5F1EC;border-radius:12px;padding:9px 13px;font-size:14px;color:var(--ink-2)}
.ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.ol li{display:flex;gap:14px;align-items:flex-start}
.ol .n{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid rgba(138,74,8,.4);color:var(--brand);font-size:13px;font-weight:700;display:grid;place-items:center;margin-top:1px}
.ol p{font-size:16px;line-height:1.55;color:#3C312A}

/* faq */
.faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px 40px;margin-top:32px}
.faq details{border-bottom:1px solid var(--line-2);padding:16px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:#B49A86;font-size:20px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:10px;font-size:15px;line-height:1.62;color:var(--ink-2);max-width:44em}

/* footer + cookies */
.site-foot{margin-top:84px;border-top:1px solid rgba(46,38,34,.1);background:var(--card)}
.site-foot .wrap{padding-top:40px;padding-bottom:56px;display:flex;flex-direction:column;gap:16px}
.site-foot p{font-size:13px;line-height:1.65;color:var(--ink-3)}
.cookies{position:sticky;bottom:0;background:var(--card);border-top:1px solid var(--line-2);box-shadow:0 -8px 24px -18px rgba(74,42,20,.5)}
.cookies .wrap{padding-top:14px;padding-bottom:14px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between}
.cookies p{font-size:13.5px;color:var(--ink-2)}
.cookies__btns{display:flex;gap:10px;flex:0 0 auto}
.cookies__btns .btn{padding:9px 20px;font-size:14px}

/* confirmed */
.confirm-card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:clamp(24px,4vw,38px);box-shadow:0 22px 50px -26px rgba(74,42,20,.34)}
.confirm-card--split{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px;align-items:center}
.qr{background:var(--field);border:1px solid rgba(46,38,34,.1);border-radius:18px;padding:16px;display:inline-block}
.said{background:var(--card);border-radius:14px;padding:13px 16px;font-size:15px;line-height:1.5}
.pull{margin:-18px auto 0}

/* ── Narrow screens ────────────────────────────────────────────────────────
   The layout is fluid by construction and needs no breakpoint for most of
   it: every grid above is repeat(auto-fit, minmax(...)) and the type is
   clamp()ed, so columns collapse on their own. These are the two places that
   don't, both measured in a 375px viewport.

   .site-head kept the logo and the beta pill on one line — the pill is
   white-space:nowrap so it cannot shrink — and overflowed by 3px. Three
   pixels is enough to make the whole PAGE scroll sideways, which reads as
   every section being broken rather than one header being tight.

   .table__grid is the only fixed-column grid in the file, deliberately: a
   comparison stops meaning anything once its columns stack, so the honest
   fix is to let it scroll inside its own box instead of collapsing it. The
   min-width keeps the three columns readable while it does.

   overflow-x and overflow-y are set separately on .table because it carries
   a 20px radius: a bare overflow-x:auto computes overflow-y to auto too and
   would add a stray vertical scrollbar inside the rounded box. */
@media (max-width: 560px) {
  .site-head { flex-wrap: wrap; gap: 10px 16px; }
  .table { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .table__grid { min-width: 460px; }
}

/* Several watches parsed out of one sentence. The single-value <dl> above can
   only show one of each field, so anything with two routes or two prices had
   to be listed instead — the alternative was dropping one, which is what the
   first version did silently. */
.watches{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.watch{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:4px 14px;padding:10px 12px;border:1px solid var(--line-2);border-radius:12px;
  background:var(--card)}
.watch__route{font-weight:600;font-size:15px;color:var(--ink)}
.watch__meta{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* What Maria would come back and ask. Not an error state — she has understood
   the shape and is confirming the rest — so this is a note, not a warning: the
   amber keyline marks it as needing an answer without making a normal,
   perfectly usable query look like it failed. */
.flags{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.flags li{position:relative;padding:9px 12px 9px 30px;border-radius:10px;
  background:rgba(208,138,44,.07);border:1px solid rgba(208,138,44,.22);
  font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.flags li::before{content:"?";position:absolute;left:11px;top:9px;width:13px;height:13px;
  border-radius:50%;background:#D08A2C;color:#fff;font-size:10px;font-weight:700;
  line-height:13px;text-align:center}

/* ── The live demo ────────────────────────────────────────────────────────
   Two complaints drove this: the input did not read as an input, and nothing
   said the section was interactive at all. It sat in the same visual register
   as the prose around it, so it scanned as another block of copy that happened
   to contain a form field.

   So the whole thing becomes a bounded surface — a place you do something,
   rather than more page — and the field inside it is the loudest element on
   it: white against the warm ground, a heavier keyline, and type at 17px so
   it reads as somewhere to write rather than somewhere something is written. */
.demo{background:var(--warm);border:1px solid var(--line-2);border-radius:26px;
  padding:clamp(24px,3.6vw,40px)}
.demo__badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;
  padding:7px 14px;border-radius:999px;background:var(--card);
  border:1px solid rgba(138,74,8,.22);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:700;color:var(--brand)}

.try__label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--ink-3);margin-bottom:9px}
.field--try{background:var(--card);border-width:1.5px;font-size:17px;min-height:112px;
  padding:16px 18px;box-shadow:0 10px 30px -22px rgba(74,42,20,.55)}
.field--try::placeholder{color:var(--ink-4)}
.field--try:focus{box-shadow:0 0 0 4px rgba(138,74,8,.15)}
.try__hint{margin:16px 0 10px;font-size:13.5px;color:var(--ink-3)}
.chips{margin-top:0}
.chip{background:var(--card)}

/* The panel updates on every keystroke, which is invisible until you type.
   Saying so is what turns "a box of text" into "a thing that is listening". */
.live{display:inline-flex;align-items:center;gap:6px;margin-left:10px;padding:3px 9px;
  border-radius:999px;background:rgba(208,138,44,.12);color:#8A5A14;
  font-size:10px;letter-spacing:.1em}
.dot--live{width:6px;height:6px;border-radius:50%;background:#D08A2C;
  animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
/* A pulsing dot is decoration; anyone who has asked for less motion should
   still see the dot, just still. */
@media (prefers-reduced-motion: reduce){ .dot--live{animation:none} }

/* The chat mock-up now uses the real avatar file, which carries its own dark
   plate — so the placeholder's gradient fill and letter-centring go, and only
   the circular clip stays. */
img.chat__avatar{background:none;object-fit:cover}

/* Shown only when scripting is off (the <noscript> block in invite.html's head
   flips it). Hidden by default here rather than with the hidden attribute,
   because a <noscript> stylesheet cannot outrank [hidden]{display:none
   !important} — and that rule exists for good reasons elsewhere. */
.noscript-only{display:none}