/* The landing pages' look (seo-pages D-123, landing-redesign): one stylesheet for the main page (/), the niche hubs
   (/subscriptions, /cars, /flights) and their keyword pages. One bulldog-orange block at the top (Hosea 2026-10-08:
   "a color that pops"), white below, Archivo for the big words and Figtree for the rest, iMessage colours inside the
   demo phone. One committed look in light and dark alike. The two fonts are served from here (latin subset, Open
   Font License), so a visit asks nothing of another host. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700 900; font-stretch: 100% 125%; font-display: swap;
  src: url(/fonts/archivo.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/fonts/figtree.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --brand: #ff5b1a; --on: #1a0a00; --deep: #c93e00; --soft: #ffe6d8;
  --paper: #fff; --ink: #141416; --muted: #5e5e68; --line: #e8e8ee; --field: #f3f3f6;
  --ok: #1f7a4d; --err: #b42318; --imsg: #0a84ff; --grey: #e9e9eb;
  --display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ios: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  /* the space over the first-screen block (.fold): the orange's top padding, the header, the gap under it, and some
     breathing room at the bottom of the screen */
  --above: 112px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font: 16px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
p { margin: 0 0 16px; }
h1, h2, h3 { font-family: var(--display); font-weight: 850; font-variation-settings: "wdth" 104; letter-spacing: -.025em; line-height: 1.05; text-wrap: balance; margin: 0; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--imsg); outline-offset: 2px; }

/* ---------- the orange block ---------- */
.top { background: var(--brand); color: var(--on); padding: 18px clamp(16px, 3vw, 44px) 64px; }
.bar { display: flex; align-items: center; gap: 14px; max-width: 1180px; height: 44px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand span { font-family: var(--display); font-weight: 850; font-variation-settings: "wdth" 112; font-size: 21px; letter-spacing: -.01em; white-space: nowrap; }
.dog { width: 40px; height: 40px; display: block; color: var(--on); }
.dog .m { fill: var(--brand); }
.nav { margin-left: auto; display: flex; gap: 4px; }
.nav a { text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 12px; border-radius: 999px; }
.nav a:hover, .nav a[aria-current="page"] { background: color-mix(in srgb, var(--on) 12%, transparent); }
.tm { font-size: 12px; padding: 3px 9px; border: 1px solid currentColor; border-radius: 999px; white-space: nowrap; }
.pill { display: inline-block; background: var(--on); color: var(--brand); border-radius: 999px; padding: 10px 16px; font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; }

.top h1 { line-height: 1; letter-spacing: -.03em; }
.sub { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.45; margin: 0; max-width: 46ch; text-wrap: pretty; }
.sub strong { font-weight: 800; }

/* main page and subscriptions. On a computer, the same side by side as flights and cars (Hosea 2026-10-08): the
   headline, its line and the number box on the left, centred against the demo on the right. Stacked (a tablet, a
   phone): the headline, its line and the whole demo are the .fold, which fits the first screen (below), then the box. */
.col { max-width: 1120px; margin: 36px auto 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-rows: 1fr auto auto auto auto 1fr; column-gap: 96px; row-gap: 18px; }
.fold { display: contents; }
.col h1 { grid-area: 2 / 1; font-size: clamp(34px, min(4.2vw, 7.4svh), 56px); max-width: min(16ch, 100%); }
.col .sub { grid-area: 3 / 1; }
.col .demo { grid-area: 1 / 2 / -1 / 3; }
.col .stage { height: clamp(320px, calc(100vh - var(--above)), 582px); height: clamp(320px, calc(100svh - var(--above)), 582px); }
.col #start { grid-area: 4 / 1; max-width: 420px; padding-top: 6px; }
.col .ready { grid-area: 5 / 1; margin-top: 0; }

/* flights and cars: the tool and the number box on the left, the demo on the right (titled "Demo" only on a phone,
   where it comes after the tool) */
.split { max-width: 1120px; margin: 36px auto 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: 96px; align-items: start; }
.left { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.split h1 { font-size: clamp(34px, min(4.2vw, 7.4svh), 56px); max-width: min(14ch, 100%); }
.split .stage { height: clamp(320px, calc(100vh - var(--above)), 582px); height: clamp(320px, calc(100svh - var(--above)), 582px); }
.demohead { display: none; font-weight: 900; font-variation-settings: "wdth" 106; font-size: clamp(32px, 3vw, 40px); letter-spacing: -.03em; line-height: 1; margin: 0 0 16px; }

/* the free tools */
.tool { background: var(--paper); color: var(--ink); border-radius: 22px; padding: 20px; display: grid; gap: 12px; max-width: 520px; box-shadow: 0 18px 40px color-mix(in srgb, var(--on) 16%, transparent); }
.tool label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.tool input, .tool select { width: 100%; border: 1.5px solid transparent; background: var(--field); border-radius: 12px; padding: 12px 13px; font: inherit; font-size: 16px; color: var(--ink); }
.tool input:focus, .tool select:focus { outline: none; border-color: var(--brand); background: var(--paper); }
.grid2, .grid3 { display: grid; gap: 10px; }
.grid2 { grid-template-columns: 1fr 1fr; }
.grid3 { grid-template-columns: 1fr 1fr 110px; }
.toolerr { color: var(--err); font-size: 14px; margin: 0; min-height: 0; }
.toolerr:empty { display: none; }
.run { border: 0; border-radius: 14px; padding: 14px; font: inherit; font-weight: 800; font-size: 16px; cursor: pointer; background: var(--on); color: #fff; }
.result { border-radius: 16px; background: var(--soft); padding: 16px; display: grid; gap: 4px; scroll-margin-top: 12px; }
.result[hidden] { display: none; }
.result .kicker { margin: 0; }
.result .big { font-family: var(--display); font-weight: 900; font-variation-settings: "wdth" 106; font-size: 36px; letter-spacing: -.02em; line-height: 1.05; margin: 0; }
.result .per { font-family: var(--body); font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.result h2 { font-size: 21px; margin: 2px 0 4px; }
.result p { margin: 0; font-size: 14.5px; line-height: 1.45; }

/* the small number box (start.js): as wide as the phone; under the tool on flights and cars */
#start { width: 100%; max-width: 310px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.left #start { max-width: 420px; padding-top: 12px; }
.why { font-size: 15px; font-weight: 800; margin: 0 0 2px; }
.why:empty { display: none; }
textarea { width: 100%; border: 0; border-radius: 12px; padding: 11px 12px; font: inherit; font-size: 16px; line-height: 1.35; background: var(--paper); color: var(--ink); resize: none; display: block; }
#issue { min-height: 44px; }
.field { display: flex; align-items: center; gap: 6px; background: var(--paper); border-radius: 14px; padding: 5px; }
.field:focus-within, textarea:focus { box-shadow: 0 0 0 3px var(--on); outline: none; }
.cc { padding: 0 6px 0 8px; font-weight: 600; font-size: 14px; color: var(--ink); white-space: nowrap; }
input[type=tel] { flex: 1 1 0; width: 0; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 16px; padding: 8px 4px; color: var(--ink); font-variant-numeric: tabular-nums; outline: 0; }
input::placeholder, textarea::placeholder { color: #8b8b94; }
.go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 10px; padding: 9px 14px; font-weight: 800; font-size: 14px; cursor: pointer; background: var(--on); color: #fff; white-space: nowrap; text-decoration: none; }
.go[aria-disabled="true"] { opacity: .5; }
.error { color: #7a0d00; font-size: 14px; font-weight: 600; margin: 0; }
.error:empty { display: none; }
.hint { font-size: 11px; line-height: 1.45; margin: 2px 0 0; opacity: .78; text-align: center; }
.hint span { display: block; }

/* the ready card (after the tap): the QR code and one line, on every screen; the words only when no code was drawn */
.ready { display: none; width: 100%; max-width: 420px; margin-top: 18px; padding: 18px; border-radius: 18px; background: var(--paper); color: var(--ink); font-size: 16px; text-align: center; }
.ready.show { display: block; }
.ready p { margin: 10px 0 0; }
.number { font-weight: 800; white-space: nowrap; }
.first { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; background: var(--field); padding: 2px 6px; border-radius: 6px; }
#qr { display: block; margin: 0 auto; width: 176px; height: 176px; background: #fff; padding: 8px; border-radius: 12px; }
#qr svg { width: 100%; height: 100%; display: block; }
.ready .scan { font-size: 14px; }
#qr[hidden], .ready .scan[hidden], .ready .fallback[hidden] { display: none; }   /* start.js: the code and its line, or the words */

/* ---------- the demo phone (public/demo.js plays it) ----------
   The .stage is as tall as the space it gets; the phone fills that height with a real phone's shape (310 by 582 at
   full size), and everything inside it is measured in --u (1px at full size), so a shorter screen gets the same phone,
   smaller, not a squashed one. Browsers without container units show the full-size phone. */
.demo { width: 100%; margin: 0; }
.stage { position: relative; height: 100%; container-type: size; }
.device { --u: 1px; position: relative; height: 582px; aspect-ratio: 310 / 582; margin: 0 auto; background: #fff;
  border-radius: calc(46 * var(--u)); padding: calc(11 * var(--u));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--on) 25%, transparent), 0 calc(30 * var(--u)) calc(60 * var(--u)) rgba(0,0,0,.22); }
@supports (height: 1cqh) { .device { --u: calc(100cqh / 582); height: 100cqh; } }
.screen { position: relative; border-radius: calc(36 * var(--u)); overflow: hidden; background: #fff; height: 100%; display: flex; flex-direction: column; font-family: var(--ios); color: #000; }
.island { position: absolute; top: calc(9 * var(--u)); left: 50%; transform: translateX(-50%); width: calc(88 * var(--u)); height: calc(25 * var(--u)); background: #000; border-radius: calc(20 * var(--u)); }
.status { display: flex; justify-content: space-between; align-items: center; padding: calc(13 * var(--u)) calc(24 * var(--u)) calc(4 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 600; }
.bars { width: calc(42 * var(--u)); height: calc(11 * var(--u)); background: linear-gradient(90deg, #000 0 7%, transparent 7% 12%, #000 12% 19%, transparent 19% 24%, #000 24% 31%, transparent 31% 36%, #000 36% 43%, transparent 43% 52%, #000 52% 100%); border-radius: 2px; }
.thead { display: grid; justify-items: center; gap: calc(3 * var(--u)); padding: calc(8 * var(--u)) 0 calc(10 * var(--u)); border-bottom: 1px solid #efeff2; background: #f9f9fb; font-size: max(9px, calc(12 * var(--u))); }
.avatar { width: calc(42 * var(--u)); height: calc(42 * var(--u)); border-radius: 50%; background: var(--brand); display: grid; place-items: center; }
.avatar .dog { width: 70%; height: 70%; }
.chat { flex: 1; overflow: hidden; padding: calc(10 * var(--u)) calc(11 * var(--u)) calc(14 * var(--u)); display: flex; flex-direction: column; justify-content: flex-end; gap: calc(4 * var(--u)); transition: opacity .35s; }
.chat.fade { opacity: 0; }
.b { max-width: 80%; padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(19 * var(--u)); font-size: max(11px, calc(14.5 * var(--u))); line-height: 1.3; margin: 0; }
.b.me { align-self: flex-end; background: var(--imsg); color: #fff; border-bottom-right-radius: calc(6 * var(--u)); margin-top: calc(4 * var(--u)); }
.b.bot { align-self: flex-start; background: var(--grey); color: #000; border-bottom-left-radius: calc(6 * var(--u)); }
.stamp { align-self: center; font-size: max(8.5px, calc(11 * var(--u))); color: #8e8e93; margin: calc(10 * var(--u)) 0 calc(4 * var(--u)); }
.stamp b { font-weight: 600; color: #6c6c70; }
.typing { display: flex; gap: calc(4 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); }
.typing i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: #9a9aa0; animation: dot 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
[data-demo].playing .chat > .wait { display: none; }
[data-demo].playing .chat > .in { animation: pop .28s cubic-bezier(.2,.9,.3,1.2) both; }
/* the money card pops out beside the phone (--cw is its width); when the phone stands centred on a narrow screen, the
   card slides over the phone rather than run past the screen's right edge (--at) */
.win { --cw: max(150px, calc(236 * var(--u))); --at: min(calc(100% - 22 * var(--u)), calc(50vw + 155 * var(--u) - 12px - var(--cw)));
  position: absolute; bottom: 9%; left: var(--at); z-index: 2; width: var(--cw);
  background: var(--brand); color: var(--on); border-radius: calc(22 * var(--u)); padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u));
  box-shadow: 0 0 0 3px var(--paper), 0 18px 40px rgba(0,0,0,.25); }
.win strong { display: block; font-family: var(--display); font-weight: 900; font-variation-settings: "wdth" 108; font-size: calc(44 * var(--u)); line-height: 1; letter-spacing: -.03em; }
.win span { display: block; margin-top: calc(6 * var(--u)); font-size: max(11px, calc(14 * var(--u))); font-weight: 600; opacity: .9; }
.split .win, .col .win { left: auto; right: calc(100% - 22 * var(--u)); }
[data-demo].playing .win { opacity: 0; transform: translateY(14px) scale(.94); transition: opacity .45s, transform .45s cubic-bezier(.2,.9,.25,1); pointer-events: none; }
[data-demo].playing .win.show { opacity: 1; transform: none; }
@keyframes pop { from { transform: scale(.7) translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

/* ---------- below the orange block ---------- */
main { max-width: 1080px; margin: 0 auto; padding: 72px clamp(16px, 4vw, 56px) 0; }
main > section { margin-bottom: 76px; }
main h2 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 16px; }
.kicker { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--deep); margin: 0 0 10px; }
.how h2 { font-weight: 900; font-variation-settings: "wdth" 106; font-size: clamp(40px, 5vw, 68px); letter-spacing: -.035em; line-height: .95; margin: 0; }
.lede { font-size: 17px; color: var(--muted); margin: 12px 0 36px; max-width: 40ch; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; counter-reset: step; }
.steps li { border-top: 3px solid var(--ink); padding-top: 16px; counter-increment: step; }
.steps li::before { content: counter(step); display: block; font-family: var(--display); font-weight: 900; font-size: 34px; line-height: 1; color: var(--brand); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }
.steps strong { display: block; font-size: 18px; margin: 12px 0 6px; }
.steps span { display: block; color: var(--muted); font-size: 15.5px; line-height: 1.5; }

.sell p, .extra p { max-width: 62ch; }
.checks { list-style: none; padding: 0; margin: 0; max-width: 70ch; }
.checks li { position: relative; padding: 0 0 14px 30px; }
.checks li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--deep); font-weight: 800; }
.plain { padding-left: 22px; max-width: 70ch; }
.plain li { margin-bottom: 12px; }
/* "Doing it yourself vs. with Agent Bulldog": the Agent Bulldog column is one soft-orange card from its heading to its
   last row (rounded, its own faint lines), each answer ticked; the other columns stay plain */
.compare table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 13px 12px; border-top: 1px solid var(--line); }
.compare thead th { border-top: 0; color: var(--muted); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; padding-top: 16px; }
.compare th[scope=row] { font-weight: 700; width: 24%; padding-left: 0; }
.compare td { color: var(--muted); }
.compare .us { background: var(--soft); color: var(--ink); font-weight: 600; padding-left: 18px; padding-right: 18px; border-top-color: color-mix(in srgb, var(--brand) 16%, var(--soft)); }
.compare thead .us { color: var(--deep); border-radius: 18px 18px 0 0; }
.compare tbody tr:last-child .us { border-radius: 0 0 18px 18px; padding-bottom: 16px; }
.compare td.us::before { content: "\2713"; color: var(--deep); font-weight: 800; margin-right: 8px; }
.faq details { border-top: 1px solid var(--line); padding: 14px 0; max-width: 820px; }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { font-weight: 700; font-size: 18px; cursor: pointer; list-style: none; position: relative; padding-right: 30px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 2px; top: -3px; font-size: 24px; color: var(--deep); font-weight: 400; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { color: var(--muted); margin: 10px 0 0; max-width: 70ch; }

.guarantee { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 32px; align-items: center; background: var(--soft); border-radius: 26px; padding: 34px 38px; }
.seal { width: 130px; height: 130px; border-radius: 50%; background: var(--brand); color: var(--on); display: grid; place-items: center; position: relative; box-shadow: 0 0 0 6px var(--paper), 0 0 0 8px var(--ink); }
.seal .dog { width: 60px; height: 60px; }
.ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: turn 24s linear infinite; }
.ring text { font: 800 11.5px var(--body); letter-spacing: 2.6px; fill: currentColor; }
@keyframes turn { to { transform: rotate(360deg); } }
.guarantee h2 { margin: 0 0 10px; max-width: 20ch; }
.guarantee p:last-child { margin: 0; opacity: .8; font-size: 16.5px; max-width: 52ch; }

.lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lane { border: 1.5px solid var(--line); border-radius: 20px; padding: 22px; text-decoration: none; display: grid; gap: 4px; align-content: start; transition: border-color .2s, transform .2s; }
.lane:hover { border-color: var(--ink); transform: translateY(-2px); }
.lane.here { background: var(--soft); border-color: transparent; }
.lane strong { font-size: 18px; }
.lane span { color: var(--muted); font-size: 15.5px; }
.lane em { font-style: normal; font-weight: 700; color: var(--deep); margin-top: 10px; font-size: 14.5px; }
.more { margin-top: 36px; }
.more h3 { font-size: 22px; margin-bottom: 12px; }
.more ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.more a { font-weight: 700; }
.more span { display: block; color: var(--muted); font-size: 15px; }

.closer { background: var(--brand); color: var(--on); padding: 56px clamp(16px, 4vw, 56px); }
.closer .in { max-width: 1080px; margin: 0 auto; }
.closer h2 { font-size: clamp(28px, 3vw, 40px); max-width: 20ch; margin-bottom: 14px; }
.closer p { max-width: 52ch; }
.closer .pill { font-size: 17px; padding: 14px 22px; margin-top: 8px; }
.foot { padding: 22px 20px 28px; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; font-size: 13px; color: var(--muted); }
.foot a { color: inherit; }

/* ---------- the "Text us" pop-up ---------- */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(15,10,8,.55); backdrop-filter: blur(4px); }
.modal[hidden] { display: none; }
.sheet { position: relative; width: 100%; max-width: 380px; background: var(--brand); color: var(--on); border-radius: 26px; padding: 26px 22px 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.sheet h2 { font-weight: 900; font-variation-settings: "wdth" 106; font-size: 34px; letter-spacing: -.03em; line-height: 1; }
.sheet > p { margin: 0 0 6px; font-size: 15px; line-height: 1.4; }
.sheet > p.hint { margin: 0; font-size: 12px; }
.sheet .x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--on) 14%, transparent); color: inherit; font-size: 20px; cursor: pointer; }
.sheet .field input { padding: 10px 4px; }
.sheet textarea { min-height: 74px; }
.go.big { padding: 14px; font-size: 16px; border-radius: 14px; }

/* ---------- smaller screens ---------- */
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .split .stage { height: clamp(300px, calc(100vh - 110px), 560px); height: clamp(300px, calc(100svh - 110px), 560px); }
  .demohead { display: block; }
  .split .win, .col .win { right: auto; left: var(--at); }
  /* main page and subscriptions stacked: the headline, its line and the whole demo fit the first screen. The demo's
     row grows to the full-size phone and gives way when the screen is shorter; the phone keeps its shape and shrinks
     as one piece (Hosea 2026-10-08) */
  .col { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 0; }
  .fold { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 594px); align-content: start; row-gap: 16px;
    max-height: calc(100vh - var(--above)); max-height: calc(100svh - var(--above)); }
  .col h1, .col .sub, .col .demo, .col #start, .col .ready { grid-area: auto; }
  .col .stage { height: 100%; }
  .fold .demo { margin-top: 12px; }
  .col #start { margin-top: 24px; padding-top: 0; }
  .col .ready { margin-top: 18px; }
}
@media (max-width: 760px) {
  :root { --above: 92px; }
  .top { padding: 14px 16px 44px; }
  .bar { height: 40px; }
  .nav { display: none; }
  .tm { margin-left: auto; }
  .brand span { font-size: 18px; }
  .dog { width: 34px; height: 34px; }
  .tm { font-size: 10px; padding: 2px 6px; }
  .bar .pill { margin-left: auto; padding: 8px 14px; font-size: 14px; }
  .tm + .pill { margin-left: 0; }
  .col, .split { margin-top: 26px; }
  /* on a phone: the round-2 layout, all of it a size down (Hosea 2026-10-08). The words at the top on the left, then
     the phone, centred, at most 380px tall (so about half the screen's width), then the number box */
  .fold { row-gap: 14px; grid-template-rows: auto auto minmax(0, 392px); }
  .col h1 { font-size: clamp(26px, min(8.8vw, 5.4svh), 36px); max-width: none; }
  .split h1 { font-size: clamp(28px, min(9vw, 5.6svh), 40px); }
  .sub, .split .sub { font-size: 15px; line-height: 1.45; }
  .demohead { font-size: 32px; }
  .split .stage { height: clamp(300px, calc(100vh - 150px), 380px); height: clamp(300px, calc(100svh - 150px), 380px); }
  .win { --cw: clamp(116px, calc(190 * var(--u)), 150px); }
  .win strong { font-size: calc(34 * var(--u)); white-space: nowrap; }
  #start, .col #start { max-width: none; }
  .grid3 { grid-template-columns: 1fr 1fr; }
  .grid3 label:last-child { grid-column: 1 / -1; }
  main { padding-top: 56px; }
  main > section { margin-bottom: 64px; }
  .steps, .lanes { grid-template-columns: minmax(0, 1fr); }
  .guarantee { grid-template-columns: minmax(0, 1fr); justify-items: start; padding: 30px 22px; gap: 24px; }
  .seal { width: 110px; height: 110px; }
  .seal .dog { width: 52px; height: 52px; }
  /* the comparison fits a phone: on the left the row's name with "Yourself" under it, on the right the Agent Bulldog
     column, still one card from top to bottom */
  .compare table, .compare thead, .compare tbody { display: block; font-size: 14px; }
  .compare tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .compare thead th:first-child { display: none; }
  .compare thead th { padding: 14px 12px 8px 0; }
  .compare th[scope=row] { grid-area: 1 / 1; width: auto; padding: 14px 12px 4px 0; }
  .compare td { grid-area: 2 / 1; border-top: 0; padding: 0 12px 14px 0; }
  .compare td.us { grid-area: 1 / 2 / 3 / 3; border-top: 1px solid color-mix(in srgb, var(--brand) 16%, var(--soft)); padding: 14px 14px; }
  .compare thead .us { padding: 14px 14px 8px; }
  .compare td.us::before { margin-right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ========== account-page (piece 27): the pricing page (/pricing), the router's own pages (src/site-page.js: the
   trial link's pages, sign-in, the account page) and the main page's one line to the pricing page. Kept in this one
   block, on the tokens above. ========== */
.topricing { margin: 26px 0 0; font-weight: 700; }
.topricing a { color: var(--deep); }

/* /pricing: the two prices on the orange block, white cards like the tools */
.pricetop { max-width: 1120px; margin: 36px auto 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; justify-items: start; }
.pricetop h1 { font-size: clamp(34px, min(4.6vw, 7.4svh), 60px); max-width: 16ch; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 250px)); gap: 16px; margin: 8px 0 6px; }
.plan { background: var(--paper); color: var(--ink); border-radius: 22px; padding: 20px 22px; display: grid; gap: 4px; align-content: start;
  box-shadow: 0 18px 40px color-mix(in srgb, var(--on) 16%, transparent); }
.plan .per { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--deep); }
.plan .amt { font-family: var(--display); font-weight: 900; font-variation-settings: "wdth" 106; font-size: 52px; letter-spacing: -.03em; line-height: 1.05; }
.plan .amt span { font-family: var(--body); font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--muted); margin-left: 2px; }
.pricetop #start { max-width: 420px; }

/* the router's pages: the bar's right end (test mode, sign out), buttons, small print */
.bar .end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.bar .end form { margin: 0; }
button.go, button.pill { font-family: inherit; border: 0; cursor: pointer; }
.ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1.5px solid currentColor; background: transparent; color: inherit;
  border-radius: 14px; padding: 12px 16px; font: inherit; font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; }
.small { font-size: 13px; line-height: 1.45; opacity: .82; margin: 0; }
.small a { color: inherit; }

/* one thing to read and one button: the orange block fills the screen */
.solo .top { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding-bottom: 32px; }
.solo .bar { width: 100%; }
.one { width: 100%; max-width: 480px; margin: auto; padding: 40px 0 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: start; }
.one h1 { font-size: clamp(34px, 6vw, 52px); }
.one .sub { margin: 0; }
.one form, .one .field, .one .go.big, .one .ghost, .stack { width: 100%; }
.one form, .stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; }
.later { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: start; }
.later[hidden] { display: none; }
.note { width: 100%; background: var(--paper); color: var(--ink); border-radius: 16px; padding: 14px 16px; display: grid; gap: 8px; }
.note p { margin: 0; font-size: 14px; }
.note .go { justify-self: start; }
.mini { width: 100%; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 6px; padding: 14px 16px;
  border-radius: 18px; background: color-mix(in srgb, var(--paper) 22%, transparent); }
.mini .seal { width: 52px; height: 52px; box-shadow: 0 0 0 3px var(--paper), 0 0 0 4.5px var(--ink); }
.mini .seal .dog { width: 28px; height: 28px; }
.mini p { margin: 0; font-size: 14px; line-height: 1.4; }

/* the account page: who is signed in on the orange, then the plan and Gmail cards, the guarantee */
.acctpage .head { max-width: 1080px; margin: 32px auto 0; }
.acctpage .head h1 { font-size: clamp(34px, 5vw, 56px); margin-bottom: 10px; }
main.acct { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; align-items: start; padding-bottom: 56px; }
main.acct > section { margin-bottom: 0; }
main.acct > .guarantee { grid-column: 1 / -1; margin-top: 16px; }
.card { border: 1.5px solid var(--line); border-radius: 22px; padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; justify-items: start; }
.card.mine { background: var(--soft); border-color: transparent; }
.card h2 { font-size: clamp(26px, 2.6vw, 34px); margin: 0; }
.card p { margin: 0; color: var(--muted); }
.card p strong { color: var(--ink); }
.card p.status { color: var(--ink); font-size: 19px; font-weight: 700; }
.card form { margin: 4px 0 0; }
.state { font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--ink); color: var(--paper); }
.state.off { background: var(--err); }
.state.on { background: var(--ok); }
/* the Gmail card's addresses, one row each with its own Remove (account-polish) */
.mails { list-style: none; margin: 4px 0 0; padding: 0; width: 100%; display: grid; gap: 8px; }
.mails li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; }
.mails .addr { font-weight: 600; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.mails form { margin: 0; flex: none; }
.mails .rm { font: inherit; font-size: 14px; font-weight: 700; background: transparent; border: 1.5px solid var(--line); color: var(--err); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
/* the one-thing pages (/start/done, /connected, the trial card): orange to the bottom, words higher, the button lower */
body.solo { background: var(--brand); }
.solo .foot { background: var(--brand); color: var(--on); }
.solo .foot a { color: var(--on); }
.solo .one { margin: 14vh auto auto; }
.solo .one .go.big { margin-top: 10vh; }
/* the pricing page's two plans as one radio group: the picked one stands out, the other fades */
.plan { position: relative; cursor: pointer; border: 0; text-align: left; font: inherit; transition: opacity .15s, filter .15s; }
.plan .per, .plan .amt, .plan .line { display: block; }
.plan[aria-checked="false"] { opacity: .6; filter: grayscale(1); box-shadow: none; }
.plan[aria-checked="true"] { box-shadow: 0 0 0 3px var(--on), 0 18px 40px color-mix(in srgb, var(--on) 22%, transparent); }
.plan:focus-visible { outline: 3px solid var(--on); outline-offset: 3px; }
.plan .save { position: absolute; top: -12px; right: 12px; background: var(--ok); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.plan .dot { position: absolute; top: 18px; right: 18px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--muted); }
.plan[aria-checked="true"] .dot { border-color: var(--on); background: var(--on); box-shadow: inset 0 0 0 4px var(--paper); }
.plan .save + .dot { top: 22px; }
.plans[role="radiogroup"] { margin-top: 18px; }
@media (max-width: 760px) { .plan .dot { width: 18px; height: 18px; top: 14px; right: 14px; } .plan .save { right: 8px; font-size: 11px; padding: 3px 8px; } }

@media (max-width: 760px) {
  .pricetop, .acctpage .head { margin-top: 26px; }
  .plans { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; width: 100%; }
  .plan { padding: 16px; border-radius: 18px; }
  .plan .amt { font-size: 38px; }
  .plan .amt span { font-size: 14px; }
  .one { padding-top: 28px; }
  main.acct { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 20px; }
}

/* The privacy and terms pages (pages/legal.js, piece 28). */
main.legal { padding-bottom: 40px; }
main.legal > section { max-width: 760px; margin-bottom: 40px; }
main.legal h2 { font-size: clamp(22px, 2.2vw, 28px); margin-bottom: 10px; }
main.legal p, main.legal li { max-width: 68ch; margin-bottom: 10px; }
main.legal ul { padding-left: 20px; }