/* Corsio: the shared stylesheet for every public page (home, the content pages, the legal pages, 404).
   This is the original Corsio theme: the tokens and components of the October 2026 home page and the original
   legal pages, lifted from their inline <style> blocks and organised for reuse. The partner portal keeps its own
   /portal/portal.css. Component guide with markup examples: kept with the build notes (COMPONENTS.md).

   Contents
    1 Tokens            8 Launch countdown band     15 Trust tiles             22 Legal pages
    2 Base              9 Page hero (content pages) 16 About and founder       23 Responsive
    3 Focus and skip   10 Sections and type         17 FAQ accordion           24 Motion
    4 Header and menu  11 Steps and flow            18 Prose, split, callout   25 Print
    5 Buttons, links   12 Check lists               19 Final call
    6 Badge            13 Pricing card              20 Footer
    7 Home hero, batch 14 Audience cards            21 Dialog, 404 directions
   Page-specific additions go at the very end, in the marked section, never inside these blocks. */

/* ---------- 1 Tokens ---------- */
:root {
  --yellow: #FFC400;        /* Corsio yellow: primary buttons, prices, eyebrows on dark, the launch band */
  --yellow-hi: #FFD233;     /* primary button hover */
  --charcoal: #111827;      /* dark surfaces; headings on light; text on yellow */
  --panel: #1F2937;         /* the example batch card on the hero */
  --panel-line: #374151;    /* hairlines on dark panels */
  --night: #0B1220;         /* footer */
  --ink: #1F2937;           /* body text on white */
  --muted: #4B5563;         /* secondary text on white, grey and cream (6.9:1 or more) */
  --soft: #F4F5F7;          /* grey sections, step cards, boxes */
  --cream: #FFFBEB;         /* "For businesses" card, open FAQ row, draft notice */
  --cream-line: #FDE68A;
  --line: #E2E5E9;          /* hairlines and card borders on white */
  --on-dark: #D1D5DB;       /* body text on charcoal */
  --on-dark-muted: #9CA3AF; /* small print on charcoal */
  --amber-text: #854D0E;    /* eyebrow labels on light surfaces (7.0:1 on white) */
  --amber: #854D0E;
  --green: #16A34A;         /* delivered stops on the example batch */
  --white: #FFFFFF;
  --gutter: 24px;           /* side padding of .wrap (16 px on phones) */
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

/* ---------- 2 Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* no smooth scroll: links into /terms sections must land exactly */
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: #FFFFFF;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; }
a { color: inherit; }
button { font: inherit; }
p, li { text-wrap: pretty; } /* no one-word last lines */
[id] { scroll-margin-top: 96px; } /* clears the 73 px sticky header */
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
/* Visually hidden, still read by screen readers. */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* Keeps a hyphenated term ("6-digit", "4-digit", "e-Transfer") on one line. Inter's web subset has no U+2011. */
.nb { white-space: nowrap; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.print-only { display: none; }

/* ---------- 3 Focus and skip link ---------- */
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 8px; background: var(--yellow); color: var(--charcoal); font-weight: 700; text-decoration: none; }
.skip:focus { left: 8px; }
/* Two-tone ring. Light surfaces: a charcoal ring with a yellow band inside it. Dark surfaces: a yellow ring with a
   charcoal band inside it. The band keeps the ring visible against a button of the ring's own colour. */
:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 2px; box-shadow: 0 0 0 2px var(--yellow); }
.skip:focus-visible, .top :focus-visible, .hero :focus-visible, .page-hero :focus-visible, .doc-head :focus-visible,
.price-left :focus-visible, .card-courier :focus-visible, .callout-dark :focus-visible, .final :focus-visible,
.site-foot :focus-visible, .dlg-head :focus-visible, .nf :focus-visible { outline-color: var(--yellow); box-shadow: 0 0 0 2px var(--charcoal); }

/* ---------- 4 Brand, header and phone menu ---------- */
.top { position: sticky; top: 0; z-index: 20; background: rgba(17, 24, 39, 0.92); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; flex: none; min-height: 44px; text-decoration: none; color: #FFFFFF; }
.brand-mark { width: 42px; height: 42px; border-radius: 12px; background: var(--yellow); display: grid; place-items: center; color: var(--charcoal); flex: none; }
.brand-name { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name strong { font-size: 19px; font-weight: 800; letter-spacing: -0.2px; }
.brand-name strong span { font-weight: 500; }
.brand-name small { font-size: 10px; letter-spacing: 2.4px; color: var(--on-dark-muted); font-weight: 700; }
.links { display: flex; align-items: center; gap: 4px; }
.links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 15px; color: var(--on-dark); white-space: nowrap; }
.links a:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.06); }
/* The page you are on: the badge's yellow tint. */
.links a[aria-current="page"], .menu-list a[aria-current="page"] { color: var(--yellow); background: rgba(255, 196, 0, 0.14); }
.nav-cta { display: flex; align-items: center; gap: 10px; }
/* "Partner sign in" in the header becomes "Sign in" on phones and from 1000 to 1080 px, where the six links
   need the room (both labels are in the markup; see block 23). */
.label-short { display: none; }
/* Phone menu: <details class="menu" id="menu"> (site.js closes it on a link, Escape, an outside click or focus leaving). */
details.menu { display: none; position: relative; }
.menu > summary { list-style: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid #4B5563; color: #FFFFFF; display: grid; place-items: center; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { border-color: #9CA3AF; }
.menu-list { position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px; max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 2px; padding: 8px; background: var(--charcoal); border: 1px solid var(--panel-line); border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.menu-list a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 12px; text-decoration: none; font-weight: 600; font-size: 15px; color: var(--on-dark); }
.menu-list a:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.06); }
/* Account rows: only on phones, where the header has no room for both account buttons. */
.menu-list .menu-acct { display: none; }
.menu-list a:not(.menu-acct) + .menu-acct { position: relative; margin-top: 9px; }
.menu-list a:not(.menu-acct) + .menu-acct::before { content: ""; position: absolute; left: 8px; right: 8px; top: -6px; height: 1px; background: var(--panel-line); }
.menu-list .menu-cta { justify-content: center; margin-top: 6px; border-radius: 999px; background: var(--yellow); color: var(--charcoal); font-weight: 700; }
.menu-list .menu-cta:hover { background: var(--yellow-hi); color: var(--charcoal); }

/* ---------- 5 Buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; font-weight: 700; font-size: 16px; line-height: 1.2; text-align: center; text-decoration: none; border: 0; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--yellow); color: var(--charcoal); }
.btn-primary:hover { background: var(--yellow-hi); }
.btn-ghost { background: transparent; border: 1px solid #4B5563; color: #FFFFFF; } /* on dark surfaces */
.btn-ghost:hover { border-color: #9CA3AF; }
.btn-dark { background: var(--charcoal); color: #FFFFFF; }
.btn-dark:hover { background: var(--panel); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }
/* Stand-alone text link with the CTA arrow ("See how it works"). */
.text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; font-size: 16px; color: var(--charcoal); text-decoration: underline; text-underline-offset: 3px; } /* the original link underline */
.text-link svg { flex: none; transition: transform 0.15s ease; }
.text-link:hover svg { transform: translateX(3px); }
.card-courier .text-link, .final .text-link, .page-hero .text-link, .callout-dark .text-link { color: #FFFFFF; }

/* ---------- 6 Badge ---------- */
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 196, 0, 0.14); color: var(--yellow); font-weight: 700; font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 0 rgba(255, 196, 0, 0.6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(255, 196, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 196, 0, 0); } }

/* ---------- 7 Home hero and the example batch card ---------- */
.hero { background: var(--charcoal); color: #FFFFFF; position: relative; overflow: hidden; }
/* The faint yellow arc behind the batch card: content-box, as on the original page (860 px across with its border). */
.hero::before { content: ""; position: absolute; right: -220px; top: -260px; width: 680px; height: 680px; box-sizing: content-box; border-radius: 50%; border: 90px solid rgba(255, 196, 0, 0.07); pointer-events: none; }
.hero-body { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; align-items: center; padding-top: 64px; padding-bottom: 88px; }
.hero h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.02; letter-spacing: -2px; font-weight: 900; margin: 22px 0 22px; }
.price { color: var(--yellow); font-size: 1.45em; letter-spacing: -3px; white-space: nowrap; }
.lead { font-size: 19px; color: var(--on-dark); max-width: 560px; margin: 0 0 30px; }
.fine { margin: 16px 0 0; font-size: 13px; color: var(--on-dark-muted); }

.batch { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); }
.batch-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.batch-top span { font-size: 12px; letter-spacing: 1.6px; color: var(--on-dark-muted); font-weight: 700; }
.batch-code { font-weight: 800; font-size: 15px; color: var(--yellow); }
.stop { display: flex; align-items: center; gap: 14px; }
.stop b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; flex: none; }
.stop .done { background: var(--green); color: #FFFFFF; }
.stop .next { background: var(--yellow); color: var(--charcoal); }
.stop .todo { border: 2px solid #4B5563; color: var(--on-dark); }
.stop div { display: flex; flex-direction: column; min-width: 0; }
.stop strong { font-size: 15px; color: #FFFFFF; }
.stop small { font-size: 13px; color: var(--on-dark-muted); }
.batch-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--panel-line); padding-top: 16px; font-size: 14px; color: var(--on-dark); }
.batch-foot strong { color: #FFFFFF; }
.batch-foot .tag { background: rgba(255, 196, 0, 0.14); color: var(--yellow); padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: 13px; white-space: nowrap; }

/* ---------- 8 Launch countdown band (home only: ids cd-*, launch-title, launch-sub are read by site.js) ---------- */
.launch { background: var(--yellow); color: var(--charcoal); }
.launch-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; padding-top: 40px; padding-bottom: 40px; }
.launch .eyebrow { color: var(--charcoal); opacity: 0.8; }
.launch h2 { color: var(--charcoal); margin: 8px 0 6px; font-size: clamp(26px, 3.2vw, 38px); text-wrap: wrap; } /* the original line breaks */
.launch p { margin: 0; font-size: 16px; font-weight: 500; }
.launch-body .btn { margin-top: 16px; }
.timer { display: flex; gap: 12px; }
.unit { background: var(--charcoal); color: #FFFFFF; border-radius: 18px; min-width: 96px; padding: 14px 10px 12px; text-align: center; box-shadow: 0 12px 30px rgba(17, 24, 39, 0.25); }
.unit .num { display: block; font-size: 40px; font-weight: 900; line-height: 1; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.unit .lbl { display: block; margin-top: 6px; font-size: 12px; letter-spacing: 1.6px; font-weight: 700; color: var(--on-dark-muted); text-transform: uppercase; }
.unit.secs .num { color: var(--yellow); }

/* ---------- 9 Page hero (the content pages: the dark band of the home hero and the legal head) ---------- */
.page-hero { background: var(--charcoal); color: #FFFFFF; position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; right: -240px; top: -330px; width: 680px; height: 680px; border-radius: 50%; border: 90px solid rgba(255, 196, 0, 0.07); pointer-events: none; }
.page-hero-body { position: relative; padding-top: 64px; padding-bottom: 72px; }
.page-hero .eyebrow { color: var(--yellow); }
.page-hero h1 { font-size: clamp(36px, 5vw, 60px); line-height: 1.05; letter-spacing: -1.5px; font-weight: 900; margin: 14px 0 18px; max-width: 880px; }
.page-hero .lead { max-width: 640px; }
.page-hero .lead:last-child { margin-bottom: 0; }
.page-hero .badge { margin-bottom: 8px; }
.page-hero .fine:last-child { margin-bottom: 0; }

/* ---------- 10 Sections and type ---------- */
.sec { padding: 96px 0; }
.sec-soft { background: var(--soft); }
.sec-tight { padding-top: 0; } /* a white section right after another white section */
.eyebrow { font-size: 13px; letter-spacing: 2px; font-weight: 700; color: var(--amber-text); text-transform: uppercase; }
h2 { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.1; letter-spacing: -1px; font-weight: 800; color: var(--charcoal); margin: 12px 0 16px; text-wrap: balance; }
/* Short titles that wrap on phones: no one-word last line. */
.card h3, .prose h3, .story h3, .doc-title, .faq summary { text-wrap: balance; }
.section-lead { font-size: 18px; color: var(--muted); max-width: 640px; margin: 0; }
.sec-head.center { text-align: center; }
.sec-head.center .section-lead { margin-left: auto; margin-right: auto; }
.sec-more { margin-top: 28px; }
.note { font-size: 13px; color: var(--muted); margin: 0; }

/* ---------- 11 Steps (cards with a dark number tile) and flow (a vertical numbered list) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 48px 0 0; padding: 0; list-style: none; } /* a div, ul or ol */
.steps-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.step { background: var(--soft); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.sec-soft .step { background: #FFFFFF; border: 1px solid var(--line); }
.step-num { width: 48px; height: 48px; border-radius: 14px; background: var(--charcoal); color: var(--yellow); display: grid; place-items: center; font-weight: 800; font-size: 18px; flex: none; }
.step h3 { margin: 8px 0 0; font-size: 21px; color: var(--charcoal); letter-spacing: -0.3px; }
.step p { margin: 0; color: var(--muted); font-size: 16px; }

.flow { list-style: none; margin: 40px 0 0; padding: 0; max-width: 760px; }
.flow > li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 20px; padding-bottom: 32px; }
.flow > li::before { content: ""; position: absolute; left: 23px; top: 56px; bottom: 8px; width: 2px; border-radius: 1px; background: var(--line); }
.flow > li:last-child { padding-bottom: 0; }
.flow > li:last-child::before { display: none; }
.flow h3 { margin: 10px 0 6px; font-size: 20px; color: var(--charcoal); letter-spacing: -0.3px; line-height: 1.3; }
.flow p { margin: 0 0 8px; color: var(--muted); font-size: 16px; }
.flow p:last-child { margin-bottom: 0; }

/* ---------- 12 Check lists (yellow tick on a dark disc; inverted on dark cards) ---------- */
.checks, .card ul, .price-right ul { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 12px; }
/* The tick is positioned, not a flex item, so the text may hold links, <strong> or .nb spans. */
.checks li, .card li, .price-right li { position: relative; padding-left: 36px; font-size: 16px; }
.tick { position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--charcoal); color: var(--yellow); }
.card-courier .tick, .callout-dark .tick, .on-dark .tick { background: var(--yellow); color: var(--charcoal); }

/* ---------- 13 Pricing card (dark price panel and white list panel) ---------- */
.price-card { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0; border-radius: 28px; overflow: hidden; border: 1px solid var(--line); background: #FFFFFF; }
.price-left { background: var(--charcoal); color: #FFFFFF; padding: 40px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.price-left .eyebrow { color: var(--yellow); }
.big-price { font-size: clamp(64px, 9vw, 104px); font-weight: 900; letter-spacing: -4px; line-height: 1; color: var(--yellow); display: flex; align-items: flex-start; }
.big-price sup { font-size: 0.38em; margin-top: 0.18em; letter-spacing: 0; }
.big-price .cents { font-size: 0.45em; margin-top: 0.12em; letter-spacing: -1px; }
.price-left p { margin: 0; color: var(--on-dark); font-size: 16px; }
.price-right { padding: 40px; display: flex; flex-direction: column; gap: 18px; justify-content: center; }
.price-right ul { margin: 0; gap: 14px; }
.price-right li { color: var(--ink); }

/* ---------- 14 Audience cards (cream "For businesses", dark "For couriers") ---------- */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.card { border-radius: 28px; padding: 40px; display: flex; flex-direction: column; gap: 16px; }
.card-biz { background: var(--cream); border: 1px solid var(--cream-line); }
.card-courier { background: var(--charcoal); color: #FFFFFF; }
.card h3 { margin: 0; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; letter-spacing: -0.6px; font-weight: 800; color: var(--charcoal); } /* card title under a section h2 */
.card-courier h2, .card-courier h3 { color: #FFFFFF; }
.cards .card h2 { text-wrap: wrap; } /* the home cards keep the original line breaks ("Drive when you want, / in your city") */
.card-courier .eyebrow { color: var(--yellow); }
.card-courier li { color: var(--on-dark); }
.card .btn { align-self: flex-start; margin-top: auto; }
.card-actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.card-actions .btn { margin-top: 0; align-self: center; }
.card-white { background: #FFFFFF; border: 1px solid var(--line); }

/* ---------- 15 Trust tiles (bordered tiles in a grid) ---------- */
.trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 44px 0 0; padding: 0; list-style: none; } /* a div, ul or ol */
.trust-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trust > * { border: 1px solid var(--line); border-radius: 20px; padding: 24px; background: #FFFFFF; }
.trust h3 { margin: 0 0 8px; font-size: 18px; color: var(--charcoal); }
.trust p { margin: 0; color: var(--muted); font-size: 15px; }
.trust p + p { margin-top: 10px; }
.trust a:not(.btn) { color: var(--charcoal); font-weight: 600; text-underline-offset: 3px; }

/* ---------- 16 About and founder ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; margin-top: 40px; }
.ceo { background: #FFFFFF; border: 1px solid var(--line); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--yellow); color: var(--charcoal); display: grid; place-items: center; font-size: 26px; font-weight: 900; }
.ceo h3 { margin: 0; font-size: 22px; color: var(--charcoal); }
.ceo .role { font-size: 14px; font-weight: 600; color: var(--amber-text); }
.ceo p { margin: 0; color: var(--muted); }
.story h3 { margin: 0 0 12px; font-size: 26px; color: var(--charcoal); letter-spacing: -0.4px; }
.story p { margin: 0 0 14px; color: var(--muted); font-size: 17px; }

/* ---------- 17 FAQ accordion (bordered rows with a round plus) ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.faq-grid + .faq-grid { margin-top: 72px; }
.faq { display: grid; gap: 12px; }
.faq details { border: 1px solid var(--line); border-radius: 18px; background: #FFFFFF; }
.faq details[open] { border-color: var(--cream-line); background: var(--cream); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 22px; font-weight: 700; font-size: 17px; line-height: 1.4; color: var(--charcoal); display: flex; justify-content: space-between; align-items: center; gap: 16px; border-radius: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.plus { width: 28px; height: 28px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; flex: none; transition: transform 0.2s ease; font-size: 18px; line-height: 1; }
.faq details[open] .plus { transform: rotate(45deg); background: var(--yellow); }
.faq details p { margin: 0; padding: 0 22px 20px; color: var(--muted); font-size: 16px; }
.faq details ul { margin: 0; padding: 0 22px 20px 44px; color: var(--muted); font-size: 16px; }
.faq details li + li { margin-top: 6px; }
.faq details a { color: var(--charcoal); font-weight: 600; text-underline-offset: 3px; }

/* ---------- 18 Prose, split, callout ---------- */
/* Running text on the content pages (same voice as the about story). */
.prose { max-width: 680px; color: var(--muted); font-size: 17px; }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 14px; }
.prose h3 { margin: 28px 0 10px; font-size: 21px; color: var(--charcoal); letter-spacing: -0.3px; line-height: 1.3; }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 22px; }
.prose li + li { margin-top: 6px; }
.prose strong { color: var(--charcoal); }
.prose a:not(.btn) { color: var(--charcoal); font-weight: 600; text-underline-offset: 3px; }
.prose a:not(.btn):hover { color: var(--amber); }
/* Two columns: heading block on the left, content on the right (the about and FAQ grid). */
.split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.split > :first-child h2:first-child, .split > h2:first-child { margin-top: 0; }
/* In-page call to action: cream (on white) or dark. */
.callout { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: 32px 40px; border-radius: 28px; background: var(--cream); border: 1px solid var(--cream-line); }
.callout > div { flex: 1 1 320px; min-width: 0; }
.callout h3 { margin: 0 0 6px; font-size: 22px; color: var(--charcoal); letter-spacing: -0.3px; line-height: 1.3; }
.callout p { margin: 0; color: var(--muted); }
.callout-dark { background: var(--charcoal); border-color: var(--charcoal); color: #FFFFFF; }
.callout-dark h3 { color: #FFFFFF; }
.callout-dark p { color: var(--on-dark); }

/* ---------- 19 Final call (dark, centred) ---------- */
.final { background: var(--charcoal); color: #FFFFFF; text-align: center; }
.final h2 { color: #FFFFFF; }
.final p { color: var(--on-dark); font-size: 18px; margin: 0 auto 28px; max-width: 560px; }
.final p { text-wrap: balance; }
.final .ctas { justify-content: center; }

/* ---------- 20 Footer ---------- */
.site-foot { background: var(--night); color: var(--on-dark); padding: 40px 0 28px; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }
.site-foot .brand-name small { font-size: 14px; } /* the footer lockup of the original site */
.foot-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; margin-right: -12px; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--on-dark); text-decoration: none; }
.foot-nav a:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.06); }
.foot-nav a[aria-current="page"] { color: var(--yellow); }
.foot-base { position: relative; margin-top: 24px; padding-top: 12px; gap: 4px 20px; }
.foot-base::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: rgba(255, 255, 255, 0.08); }
.foot-base small { font-size: 14px; color: var(--on-dark-muted); }
.foot-legal { display: flex; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--on-dark-muted); }
.foot-legal a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--on-dark); }
.foot-legal a:hover { color: #FFFFFF; }
.foot-legal a[aria-current="page"] { color: var(--yellow); }
.foot-legal .dot { padding: 0 6px; }

/* ---------- 21 "Coming soon" dialog and the 404 page ---------- */
dialog { border: 0; padding: 0; border-radius: 28px; width: min(480px, calc(100% - 32px)); background: #FFFFFF; color: var(--ink); box-shadow: 0 40px 120px rgba(0, 0, 0, 0.45); }
dialog::backdrop { background: rgba(11, 18, 32, 0.72); backdrop-filter: blur(4px); }
.dlg-head { background: var(--charcoal); color: #FFFFFF; padding: 32px 28px 26px; position: relative; text-align: center; }
.dlg-icon { width: 64px; height: 64px; border-radius: 18px; background: var(--yellow); color: var(--charcoal); display: grid; place-items: center; margin: 0 auto 16px; }
.dlg-head h2 { color: #FFFFFF; font-size: 30px; margin: 0 0 6px; }
.dlg-head p { margin: 0; color: var(--on-dark); }
.dlg-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--on-dark); cursor: pointer; display: grid; place-items: center; }
.dlg-close:hover { background: rgba(255, 255, 255, 0.08); color: #FFFFFF; }
.dlg-body { padding: 24px 28px 28px; display: grid; gap: 16px; text-align: center; }
.dlg-body p { margin: 0; color: var(--muted); }
.dlg-mini { display: flex; justify-content: center; gap: 8px; }
.dlg-mini span { background: var(--soft); border-radius: 12px; padding: 8px 12px; font-weight: 800; color: var(--charcoal); font-variant-numeric: tabular-nums; min-width: 64px; }
.dlg-mini small { display: block; font-size: 11px; color: var(--muted); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.dlg-body .btn { width: 100%; }
.dlg-later { background: transparent; border: 0; color: var(--muted); font-weight: 600; cursor: pointer; min-height: 44px; border-radius: 999px; }
.dlg-later:hover { color: var(--charcoal); }

/* 404: the original dark "Wrong turn" block, then directions as tiles. */
.nf { background: var(--charcoal); color: #FFFFFF; text-align: center; }
.nf-body { padding-top: 88px; padding-bottom: 96px; display: grid; justify-items: center; gap: 16px; }
.nf-mark { width: 64px; height: 64px; border-radius: 18px; background: var(--yellow); color: var(--charcoal); display: grid; place-items: center; }
.nf h1 { margin: 8px 0 0; font-size: 40px; line-height: 1.15; letter-spacing: -1px; font-weight: 800; }
.nf .lead { margin: 0; max-width: 460px; font-size: 17px; }
.nf .ctas { justify-content: center; margin-top: 8px; }
.nf-h { margin: 0 0 24px; font-size: 26px; letter-spacing: -0.4px; }
.directions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.directions a { display: flex; flex-direction: column; gap: 4px; height: 100%; min-height: 44px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 20px; background: #FFFFFF; text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease; }
.directions a:hover { border-color: var(--cream-line); background: var(--cream); }
.dir-name { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 18px; font-weight: 700; color: var(--charcoal); }
.dir-name svg { flex: none; }
.dir-note { font-size: 15px; color: var(--muted); }

/* ===================================================================================
   22 Legal pages: terms, privacy, delete-account
   <main id="main"> > .doc-head (dark band) + .wrap.doc-layout > aside.toc + details.toc-m + article.doc
   =================================================================================== */
.doc-head { background: var(--charcoal); color: #FFFFFF; padding: 32px 0 44px; } /* the original legal head */
.doc-head > .wrap { max-width: 944px; }
body:has(.doc-layout.no-toc) .doc-head > .wrap, .doc-head.narrow > .wrap { max-width: 820px; }
.doc-head .eyebrow { color: var(--yellow); font-weight: 800; }
.doc-title { font-size: clamp(32px, 6vw, 46px); line-height: 1.1; letter-spacing: -1px; font-weight: 700; margin: 10px 0 12px; color: #FFFFFF; }
.doc-head .lead { margin: 0; max-width: 680px; font-size: 17px; }
/* Version block: one fact per line; li.pill (or li.updated) is the yellow "Last updated: DRAFT" pill. Put pills first. */
.doc-meta { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; line-height: 1.5; color: var(--on-dark); }
.doc-meta li { flex-basis: 100%; }
.doc-meta strong { color: #FFFFFF; font-weight: 600; }
.doc-meta li.pill, .doc-meta li.updated { flex-basis: auto; padding: 6px 12px; border-radius: 999px; background: rgba(255, 196, 0, 0.14); color: var(--yellow); font-weight: 700; font-size: 14px; }
.doc-meta li.pill strong, .doc-meta li.updated strong { color: inherit; font-weight: inherit; }
.doc-meta li.pill + li:not(.pill):not(.updated), .doc-meta li.updated + li:not(.pill):not(.updated) { margin-top: 6px; }

/* Reading column: 16 px Inter at 580 px, about 70 characters a line. */
.doc-layout { display: grid; grid-template-columns: 232px minmax(0, 580px); column-gap: 56px; align-items: start; max-width: 944px; padding-top: 40px; padding-bottom: 72px; }
.doc-layout.no-toc { grid-template-columns: minmax(0, 1fr); max-width: 820px; }

/* Table of contents: two copies of one list, aside.toc above 960 px (sticky) and details.toc-m at 960 px and below.
   site.js marks the section being read with aria-current="true". */
.toc { position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 120px); overflow: auto; overscroll-behavior: contain; margin: -6px 0 0 -6px; padding: 6px 8px 8px 6px; }
.toc-title { margin: 0 0 12px; font-size: 13px; letter-spacing: 2px; font-weight: 700; line-height: 1.4; text-transform: uppercase; color: var(--amber-text); }
.toc ol, .toc-m ol { list-style: none; margin: 0; padding: 0; }
.toc a, .toc-m a { position: relative; display: flex; gap: 8px; padding: 5px 0 5px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--muted); text-decoration: none; }
.toc a:hover, .toc-m a:hover { color: var(--charcoal); text-decoration: underline; text-underline-offset: 3px; }
.toc .n, .toc-m .n { flex: none; min-width: 1.6em; font-variant-numeric: tabular-nums; }
.toc ol ol, .toc-m ol ol { margin-bottom: 8px; }
/* Part rows of the terms (a link with a nested list) */
.toc li:has(> ol) > a, .toc-m li:has(> ol) > a { margin-top: 8px; font-weight: 700; color: var(--charcoal); }
.toc li:has(> ol) > a .n, .toc-m li:has(> ol) > a .n { align-self: center; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--amber-text); }
.toc a[aria-current="true"] { color: var(--charcoal); font-weight: 700; }
.toc a[aria-current="true"]::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 16px; margin-top: -8px; border-radius: 2px; background: var(--charcoal); }
/* The phone list: an FAQ-style row that opens. */
.toc-m { display: none; margin: 0 0 28px; border: 1px solid var(--line); border-radius: 18px; background: #FFFFFF; }
.toc-m[open] { border-color: var(--cream-line); background: var(--cream); }
.toc-m > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 0 16px 0 20px; border-radius: 18px; font-size: 16px; font-weight: 700; color: var(--charcoal); cursor: pointer; }
.toc-m > summary::-webkit-details-marker { display: none; }
.toc-m > summary::after { content: "+"; width: 28px; height: 28px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; flex: none; font-size: 18px; line-height: 1; transition: transform 0.2s ease; }
.toc-m[open] > summary::after { transform: rotate(45deg); background: var(--yellow); }
.toc-m nav { padding: 0 16px 12px 8px; }
.toc-m a { align-items: center; min-height: 44px; padding-top: 0; padding-bottom: 0; font-size: 15px; }
.toc-m li:has(> ol) > a { margin-top: 4px; }
/* The desktop TOC on touch screens (tablets in landscape): 44 px rows. */
@media (pointer: coarse) {
  .toc a { min-height: 44px; align-items: center; padding-top: 0; padding-bottom: 0; }
}

/* The document column */
.doc { min-width: 0; max-width: 580px; font-size: 16px; line-height: 1.6; color: var(--ink); }
.no-toc .doc { max-width: none; }
.no-toc .doc > :not(.ways):not(.draft-note):not(.notice):not(.box) { max-width: 580px; }
.doc > :first-child { margin-top: 0; }
.doc p, .doc ul, .doc ol, .doc dl, .doc .table-wrap { margin: 0 0 16px; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin: 4px 0; }
.doc li > ul, .doc li > ol { margin: 4px 0 0; }
.doc a:not(.btn) { color: var(--charcoal); font-weight: 600; text-underline-offset: 3px; }
.doc a:not(.btn):hover { color: var(--amber); }
.doc h2 { font-size: 24px; line-height: 1.25; letter-spacing: -0.4px; font-weight: 700; color: var(--charcoal); margin: 40px 0 10px; }
.doc h3 { font-size: 18px; line-height: 1.35; font-weight: 700; color: var(--charcoal); margin: 24px 0 6px; }
.doc h2 + h3 { margin-top: 16px; }
.doc h2 .n, .doc h3 .n { margin-right: 0.4em; color: var(--amber-text); font-variant-numeric: tabular-nums; }
/* Part headings of the terms: the number becomes an eyebrow label. */
.doc > section:not(.box) > h2:first-child { margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--line); font-size: 30px; font-weight: 800; letter-spacing: -0.6px; }
.doc > section:not(.box) > h2:first-child .n { display: block; margin: 0 0 6px; font-size: 13px; letter-spacing: 2px; font-weight: 700; text-transform: uppercase; }
/* Draft notice (keep it on every legal page until the pages are final) */
.draft-note { margin: 0 0 28px; padding: 14px 18px; border: 1px solid var(--cream-line); border-radius: 16px; background: var(--cream); color: var(--amber); font-weight: 600; }
/* Grey box: "The short version" and part intros */
.box { margin: 0 0 16px; padding: 18px 20px; border-radius: 18px; background: var(--soft); }
.box > :last-child { margin-bottom: 0; }
.doc .box h2, .doc .box h3 { margin: 0 0 8px; padding: 0; border: 0; font-size: 20px; letter-spacing: -0.3px; }
/* Prominent disclosure (background location, "can't be undone") */
.notice { margin: 0 0 16px; padding: 18px 20px; border-radius: 18px; background: var(--soft); color: var(--charcoal); font-weight: 700; }
.notice > :last-child { margin-bottom: 0; }
/* "To confirm: ..." owner notes. The text says "To confirm:" itself, so there is no added label. */
.confirm { padding: 1px 5px; border: 1px solid var(--cream-line); border-radius: 6px; background: var(--cream); color: var(--amber); font-weight: 600; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Tables: a rounded bordered box; wide ones scroll inside <div class="table-wrap" role="region" tabindex="0">. */
.table-wrap { overflow-x: auto; }
.doc table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 18px; font-size: 15px; line-height: 1.5; }
.doc caption { caption-side: top; padding: 0 0 10px; text-align: left; font-weight: 700; color: var(--charcoal); }
.doc th, .doc td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.doc tbody tr:last-child > * { border-bottom: 0; }
.doc thead th, .doc thead td { background: var(--soft); font-weight: 700; color: var(--charcoal); }
.doc thead tr:first-child > :first-child { border-top-left-radius: 17px; }
.doc thead tr:first-child > :last-child { border-top-right-radius: 17px; }
.doc tbody th { font-weight: 600; color: var(--charcoal); }
.doc td.num, .doc th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* delete-account: two ways side by side (stacked below 640 px) */
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 16px; }
.way { padding: 20px 20px 22px; border-radius: 18px; background: var(--soft); }
.way > :last-child { margin-bottom: 0; }
.doc .way h2 { margin: 0 0 12px; font-size: 20px; letter-spacing: -0.3px; }
.doc-actions { margin: 8px 0 0; }

/* ---------- 23 Responsive ---------- */
/* The six page links fit next to "Partner sign in" and "Create account" from 1081 px, and next to the short
   "Sign in" from 1000 px. At 999 px and below the phone menu takes over. */
@media (max-width: 999px) {
  .links { display: none; }
  details.menu { display: block; }
}
@media (min-width: 1000px) and (max-width: 1080px) {
  .label-long { display: none; }
  .label-short { display: inline; }
}
@media (max-width: 1100px) {
  .steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .hero-body, .price-card, .about-grid, .faq-grid, .split { grid-template-columns: minmax(0, 1fr); }
  .hero-body { padding-top: 40px; padding-bottom: 64px; gap: 40px; }
  .launch-body { grid-template-columns: minmax(0, 1fr); }
  .steps, .steps-2, .trust, .trust-2, .cards { grid-template-columns: minmax(0, 1fr); }
  .faq-grid, .split, .about-grid { gap: 32px; }
  .faq-grid + .faq-grid { margin-top: 56px; }
  .sec { padding: 72px 0; }
  .sec-tight { padding-top: 0; }
  .card, .price-left, .price-right { padding: 28px; }
  .callout { padding: 28px; }
  .page-hero-body { padding-top: 48px; padding-bottom: 56px; }
  .directions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc-layout, .doc-layout.no-toc { grid-template-columns: minmax(0, 1fr); max-width: 820px; padding-top: 32px; padding-bottom: 64px; }
  .doc-head > .wrap { max-width: 820px; }
  .toc { display: none; }
  .toc-m { display: block; max-width: 580px; }
  .foot-nav { margin-right: 0; margin-left: -12px; flex-basis: 100%; }
}
/* Six-tile grids (how-it-works, couriers) keep two columns on tablets; three-tile grids stay at one. */
@media (min-width: 641px) and (max-width: 960px) {
  .trust:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .label-long { display: none; }
  .label-short { display: inline; }
  .steps-4 { grid-template-columns: minmax(0, 1fr); }
  .ways { grid-template-columns: minmax(0, 1fr); }
  .directions { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  :root { --gutter: 16px; }
  /* Phones: "Sign in" stays in the header; "Create account" moves into the menu (and the hero CTA covers sign-up). */
  .nav-cta { gap: 8px; }
  .nav-cta .btn-primary { display: none; }
  .nav-cta .btn-ghost { padding: 0 16px; }
  .menu-list .menu-acct { display: flex; }
  .timer { gap: 8px; }
  .unit { min-width: 0; flex: 1; padding: 12px 4px 10px; border-radius: 14px; }
  .unit .num { font-size: 30px; }
  .unit .lbl { font-size: 10px; letter-spacing: 1px; }
  .ctas .btn { flex: 1 1 100%; }
  .callout .btn { flex: 1 1 100%; }
  .nf-body { padding-top: 56px; padding-bottom: 64px; }
  .doc > section:not(.box) > h2:first-child { font-size: 26px; }
  .faq summary { padding: 18px 18px; font-size: 16px; }
  .faq details p { padding: 0 18px 18px; }
  .faq details ul { padding: 0 18px 18px 38px; }
  .foot-base { flex-direction: column; align-items: flex-start; }
}
/* 320 px: brand and menu only; the sign-in link is the first account row in the menu. */
@media (max-width: 359px) {
  .nav-cta .btn-ghost { display: none; }
  .brand { gap: 10px; }
  .badge { padding: 7px 12px; font-size: 12px; letter-spacing: 0.6px; }
}

/* ---------- 24 Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .plus, .toc-m > summary::after, .text-link svg, .directions a { transition: none; }
  .btn:hover { transform: none; }
  .text-link:hover svg { transform: none; }
  .pulse { animation: none; }
}

/* ---------- 25 Print (legal pages first; works for every public page) ---------- */
@media print {
  @page { margin: 18mm 16mm; }
  html { scroll-behavior: auto; }
  body { background: #FFFFFF; color: #000000; font-size: 11pt; line-height: 1.5; }
  *, *::before, *::after { animation: none !important; transition: none !important; box-shadow: none !important; }
  .skip, .links, .nav-cta, .menu, .toc, .toc-m, .btn, .site-foot, dialog, .doc-actions, .hero::before, .page-hero::before { display: none !important; }
  .print-only { display: block; margin-top: 18pt; padding-top: 6pt; border-top: 0.5pt solid #000000; font-size: 9pt; color: #000000; }
  .top { position: static; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0.5pt solid #000000; }
  .nav { min-height: 0; padding: 0 0 8pt; }
  .brand { color: #000000; }
  .brand-mark { width: 28px; height: 28px; background: none; border: 1pt solid #000000; color: #000000; }
  .brand-mark svg { width: 20px; height: 20px; }
  .brand-name small { color: #000000; }
  .wrap { max-width: none; padding: 0; }
  /* Dark and yellow blocks print as black on white: browsers drop backgrounds by default. */
  .hero, .page-hero, .doc-head, .launch, .final, .nf, .card, .price-left, .callout, .batch, .unit, .step-num, .avatar, .nf-mark, .tick, .badge, .batch-foot .tag { background: none !important; color: #000000 !important; }
  .hero *, .page-hero *, .doc-head *, .launch *, .final *, .nf *, .card *, .price-left *, .callout *, .batch *, .unit *,
  h1, h2, h3, .eyebrow, .price, .big-price, .lead, .fine, .section-lead, .doc strong, .doc a:not(.btn), .text-link { color: #000000 !important; opacity: 1 !important; }
  .batch, .unit, .step-num, .tick, .avatar, .nf-mark, .card-courier { border: 0.5pt solid #000000; }
  .doc-head > .wrap, body:has(.doc-layout.no-toc) .doc-head > .wrap { max-width: none !important; }
  .doc-head { padding: 12pt 0 10pt; }
  .doc-title { font-size: 20pt; color: #000000; }
  .doc-head .lead, .doc-meta { color: #000000; font-size: 11pt; }
  .doc-meta li.pill, .doc-meta li.updated { padding: 1pt 6pt; border: 0.5pt solid #000000; background: none; color: #000000; }
  .doc-layout, .doc-layout.no-toc { display: block; max-width: none; padding: 0; }
  .no-toc .doc > * { max-width: none !important; }
  .doc { font-size: 11pt; line-height: 1.5; color: #000000; }
  .doc h2 { margin: 16pt 0 6pt; font-size: 14pt; }
  .doc > section:not(.box) > h2:first-child { margin-top: 18pt; padding-top: 8pt; border-top: 0.5pt solid #000000; font-size: 16pt; }
  .doc h3 { margin: 12pt 0 4pt; font-size: 12pt; }
  .doc h2 .n, .doc h3 .n { color: #000000; }
  h2, h3 { break-after: avoid; page-break-after: avoid; }
  li, .box, .notice, .draft-note, .way, tr, .step, .card, .faq details { break-inside: avoid; page-break-inside: avoid; }
  p { orphans: 3; widows: 3; }
  .draft-note, .box, .notice, .way, .step, .card, .trust > *, .faq details, .price-card { border: 0.5pt solid #000000; border-radius: 0; background: none; color: #000000; }
  .ways { display: block; }
  .way + .way { margin-top: 8pt; }
  .confirm { border: 0; border-bottom: 1pt dotted #000000; border-radius: 0; background: none; color: #000000; }
  .doc table { border: 0.5pt solid #000000; border-radius: 0; }
  .doc th, .doc td { border-bottom: 0.5pt solid #000000; background: none; }
  .table-wrap { overflow: visible; }
  .doc a[href^="http"]::after, .doc a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-weight: 400; word-break: break-all; }
  .doc a[href^="/"]::after { content: " (corsio.ca" attr(href) ")"; font-weight: 400; }
}

/* ===================================================================================
   Page-specific additions (agent 2 and later). Append rules below this line only;
   do not change the blocks above. Scope each rule to its page, for example .pg-pricing .x { }.
   =================================================================================== */

/* ---------- Section pages ---------- */
/* The six content pages: how-it-works, pricing, businesses, couriers, about, faq. */
/* Hero titles: no one-word last line ("door", "city"). */
.page-hero h1 { text-wrap: balance; }
/* A phrase kept on one line where it fits (couriers hero: "Drive when you want, / in your city"). On phones it
   is wider than the screen, so it may wrap there. */
@media (min-width: 641px) { .nb-wide { white-space: nowrap; } }
/* Audience cards under a section head get the same 48 px as the steps. */
.section-lead + .cards, .sec > .wrap > h2 + .cards { margin-top: 48px; }
/* Small print under a check list (couriers: "What you need"). */
.checks + .note { margin-top: 20px; font-size: 15px; }
.checks + .note a { color: var(--charcoal); font-weight: 600; text-underline-offset: 3px; }
/* Four steps (how-it-works): two columns from 641 to 1100 px, as the component guide says. Block 23's
   960 px rule sets every .steps to one column, which would otherwise win over the 1100 px .steps-4 rule. */
@media (min-width: 641px) and (max-width: 1100px) {
  .steps.steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Fixes after the live check (2026-10-27) ---------- */
/* Legal tables on phones: smaller type and padding so every column fits; if one is still wider, a soft shadow at the
   right edge shows that it scrolls sideways (background-attachment local/scroll: the cover moves with the content). */
@media (max-width: 420px) {
  .doc table { font-size: 13px; }
  .doc th, .doc td { padding: 8px 8px; }
}
.table-wrap {
  background:
    linear-gradient(to right, var(--white) 30%, rgba(255, 255, 255, 0)) 0 0 / 40px 100% no-repeat local,
    linear-gradient(to left, var(--white) 30%, rgba(255, 255, 255, 0)) 100% 0 / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(17, 24, 39, .2), rgba(17, 24, 39, 0)) 0 0 / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(17, 24, 39, .2), rgba(17, 24, 39, 0)) 100% 0 / 14px 100% no-repeat scroll;
}
/* Home audience cards from 961 to 1100 px: one card's actions wrapped and the other's did not, so the buttons sat at
   different heights. Stack both the same way. */
@media (min-width: 961px) and (max-width: 1100px) {
  .cards .card-actions { flex-direction: column; align-items: flex-start; }
}
/* Footer legal row on the narrowest phones (320 px): no separator dots, so no line ends with a dangling one. */
@media (max-width: 360px) {
  .foot-legal .dot { display: none; }
  .foot-legal { column-gap: 16px; }
}

/* ---------- Signed in to the partner portal ---------- */
/* /auth-state.js (in <head>) adds html.cg-signed-in when the portal says this browser is signed in. The header
   then shows one "Go to dashboard" button (and one menu row) instead of "Partner sign in" and "Create account". */
html:not(.cg-signed-in) [data-when="signed-in"] { display: none !important; }
html.cg-signed-in [data-when="signed-out"] { display: none !important; }
/* Below 561 px the signed-out header keeps only "Sign in": the dashboard button takes its place there. */
@media (max-width: 560px) {
  .nav-cta .nav-dash { display: inline-flex; padding: 0 16px; }
}
@media (max-width: 359px) {
  .nav-cta .nav-dash { display: none; }
}
/* In the phone menu the dashboard row follows the hidden account rows, so it draws its own separator. */
.menu-list .menu-dash { position: relative; margin-top: 15px; }
.menu-list .menu-dash::before { content: ""; position: absolute; left: 8px; right: 8px; top: -9px; height: 1px; background: var(--panel-line); }

/* ---------- Price zones: the Pricing page table and /check-pricing ---------- */
/* Zone colours match the rings on the map (check-pricing.js COLORS). */
:root { --z1: #FFC400; --z2: #FB923C; --z3: #38BDF8; }
.zone-dot { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%; margin-right: 10px; vertical-align: -1px; box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.12); }
.zone-dot.z1 { background: var(--z1); }
.zone-dot.z2 { background: var(--z2); }
.zone-dot.z3 { background: var(--z3); }
.table-scroll { overflow-x: auto; }
.zone-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.zone-table caption { caption-side: top; text-align: left; font-size: 14px; font-weight: 600; color: var(--muted); padding-bottom: 8px; }
.zone-table th, .zone-table td { padding: 14px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.zone-table thead th { padding-top: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.zone-table tbody th { font-weight: 700; color: var(--charcoal); white-space: nowrap; }
.zone-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zone-table td.num { font-size: 17px; font-weight: 700; color: var(--charcoal); }
.zone-table td.zt-batch { color: var(--amber-text); }
.save-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border-radius: 999px; background: var(--cream); border: 1px solid var(--cream-line); color: var(--amber-text); font-size: 14px; font-weight: 700; }
.save-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.25); }
.price-right .btn { align-self: flex-start; }

/* Address search in the dark page head */
.cp-form { margin-top: 8px; max-width: 760px; }
.cp-label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; color: #FFFFFF; }
.cp-row { display: flex; gap: 12px; align-items: stretch; }
.cp-field { position: relative; flex: 1 1 auto; min-width: 0; }
.cp-field input { width: 100%; min-height: 56px; padding: 0 18px 0 48px; border-radius: 16px; border: 1px solid #4B5563; background: #FFFFFF; color: var(--charcoal); font: inherit; font-size: 17px; }
.cp-field input::placeholder { color: #6B7280; }
.cp-field input:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.cp-icon { position: absolute; left: 16px; top: 18px; color: var(--muted); pointer-events: none; z-index: 1; }
.cp-row .btn { min-height: 56px; flex: none; }
.cp-status { min-height: 20px; margin: 10px 0 0; font-size: 14px; color: var(--on-dark); }
.cp-status.err { color: #FCA5A5; }
.cp-off { font-size: 15px; color: var(--on-dark); }
@media (max-width: 640px) {
  .cp-row { flex-direction: column; }
  .cp-row .btn { width: 100%; }
}

/* Address suggestions (maps.js): a listbox under the input, on the public site */
.addr-host { position: relative; }
.addr-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; background: #FFFFFF; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 50px rgba(17, 24, 39, 0.22); overflow: hidden; }
.addr-list ul { list-style: none; margin: 0; padding: 6px; }
.addr-opt { display: flex; flex-direction: column; gap: 2px; min-height: 48px; justify-content: center; padding: 8px 12px 8px 14px; border-radius: 10px; cursor: pointer; color: var(--charcoal); text-align: left; }
.addr-opt b { font-size: 15px; font-weight: 700; }
.addr-opt span { font-size: 13px; color: var(--muted); }
.addr-opt:hover, .addr-opt[aria-selected="true"] { background: var(--cream); box-shadow: inset 3px 0 0 var(--yellow); }
.addr-attr { display: flex; justify-content: flex-end; padding: 6px 12px 8px; border-top: 1px solid var(--line); }
.addr-attr img { display: block; width: 144px; height: 18px; }

/* Result: the map and the zone panel */
.cp-result { scroll-margin-top: 80px; }
.cp-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.cp-map-wrap { position: relative; border-radius: 28px; overflow: hidden; border: 1px solid var(--line); background: var(--soft); box-shadow: 0 20px 50px rgba(17, 24, 39, 0.10); }
.cp-map { height: 600px; }
.cp-map-off { display: grid; place-items: center; padding: 24px; text-align: center; color: var(--muted); }
.cp-chip { position: absolute; left: 16px; top: 16px; max-width: calc(100% - 32px); display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; background: rgba(17, 24, 39, 0.92); color: #FFFFFF; font-size: 13px; box-shadow: 0 10px 30px rgba(17, 24, 39, 0.25); pointer-events: none; }
.cp-chip b { font-size: 15px; }
.cp-chip span { color: var(--on-dark); }
.cp-panel { display: flex; flex-direction: column; gap: 16px; }
.cp-panel h2 { margin: 0; font-size: clamp(26px, 3vw, 34px); line-height: 1.15; letter-spacing: -0.6px; }
.cp-panel h2:focus, .cp-panel h2:focus-visible { outline: none; box-shadow: none; } /* focused by script after a search, for screen readers */
.cp-place { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.cp-far { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--cream); border: 1px solid var(--cream-line); color: var(--amber-text); font-size: 14px; }
.zone-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.zone-card { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "dot range price"; align-items: center; column-gap: 12px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: #FFFFFF; cursor: default; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
.zone-card .zone-dot { grid-area: dot; width: 14px; height: 14px; margin: 0; }
.zc-range { grid-area: range; font-weight: 700; color: var(--charcoal); }
.zc-price { grid-area: price; text-align: right; font-size: 14px; color: var(--muted); white-space: nowrap; }
.zc-price b { font-size: 18px; color: var(--charcoal); font-variant-numeric: tabular-nums; }
.zc-batch { grid-area: batch; text-align: right; font-size: 13px; font-weight: 700; color: var(--amber-text); white-space: nowrap; }
.zone-card.on { border-color: var(--charcoal); box-shadow: 0 10px 26px rgba(17, 24, 39, 0.12); transform: translateY(-1px); }
.zone-card:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 2px; box-shadow: 0 0 0 6px var(--yellow); }
.cp-panel .ctas { align-items: center; margin-top: 4px; }
.cp-table { max-width: 640px; margin-top: 32px; padding: 28px; border-radius: 24px; background: #FFFFFF; border: 1px solid var(--line); }
/* Map overlays (check-pricing.js htmlOverlay): the business pin and the ring labels */
.map-pin { position: absolute; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--yellow); color: var(--charcoal); box-shadow: 0 0 0 4px #FFFFFF, 0 8px 20px rgba(17, 24, 39, 0.35); }
.ring-label { position: absolute; transform: translate(-50%, -50%); padding: 3px 8px; border-radius: 999px; background: #FFFFFF; color: var(--charcoal); font: 700 12px/1.3 var(--font); white-space: nowrap; box-shadow: 0 2px 8px rgba(17, 24, 39, 0.2); }
@media (max-width: 960px) {
  .cp-grid { grid-template-columns: minmax(0, 1fr); }
  .cp-map { height: 420px; }
}
@media (max-width: 560px) {
  .cp-map { height: 340px; }
  .cp-map-wrap { border-radius: 20px; }
  .cp-table { padding: 20px 16px; }
  .zone-table th, .zone-table td { padding: 12px 4px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .zone-card { transition: none; } .zone-card.on { transform: none; } }
/* Home: the short pricing band (links to /check-pricing) */
.home-price-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.home-price .save-pill { margin-top: 4px; }
.home-price-ctas { margin-top: 24px; align-items: center; }
.zone-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.zone-mini li { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "dot range price" "dot range batch"; align-items: center; column-gap: 14px; row-gap: 2px; padding: 18px 20px; border-radius: 20px; background: #FFFFFF; border: 1px solid var(--line); }
.zone-mini .zone-dot { grid-area: dot; width: 14px; height: 14px; margin: 0; }
.zm-range { grid-area: range; font-weight: 700; color: var(--charcoal); font-size: 17px; }
.zm-price { grid-area: price; text-align: right; font-size: 22px; font-weight: 800; color: var(--charcoal); font-variant-numeric: tabular-nums; }
.zm-batch { grid-area: batch; text-align: right; font-size: 13px; font-weight: 700; color: var(--amber-text); white-space: nowrap; }
@media (max-width: 960px) { .home-price-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* ---------- Check pricing: delivery area, batch rate (2026-10-28) ---------- */
/* The address suggestions hang below the dark head, so it must not clip them: its arc moves into .hero-art. */
.page-hero.cp-hero { overflow: visible; z-index: 3; }
.page-hero.cp-hero::before { display: none; }
.hero-art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-art::before { content: ""; position: absolute; right: -240px; top: -330px; width: 680px; height: 680px; border-radius: 50%; border: 90px solid rgba(255, 196, 0, 0.07); }
.cp-legend { position: absolute; left: 14px; bottom: 30px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.94); color: var(--charcoal); font-size: 12px; font-weight: 700; box-shadow: 0 4px 14px rgba(17, 24, 39, 0.14); pointer-events: none; }
.lg-area { width: 18px; height: 12px; border-radius: 4px; border: 2px solid var(--charcoal); box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.45); background: rgba(255, 196, 0, 0.12); }
.cp-sub { margin: 6px 0 -4px; font-size: 14px; font-weight: 700; color: var(--charcoal); }
.batch-rate { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: 20px; background: var(--charcoal); color: #FFFFFF; }
.br-label { font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--yellow); }
.br-price { margin: 0; font-size: 18px; color: var(--on-dark); }
.br-price b { font-size: 28px; font-weight: 900; color: #FFFFFF; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.br-sub { margin: 0; font-size: 14px; color: var(--on-dark); }
.br-example { margin: 6px 0 0; padding-top: 10px; border-top: 1px solid var(--panel-line); font-size: 13px; color: var(--on-dark-muted); }
.br-example b { color: var(--yellow); }
.cp-fallback { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 32px; }
.cp-fallback .cp-table { margin-top: 0; max-width: none; }
@media (max-width: 960px) { .cp-fallback { grid-template-columns: minmax(0, 1fr); } .cp-map { height: 480px; } }
@media (max-width: 560px) { .cp-map { height: 380px; } .cp-legend { bottom: 26px; } .br-price b { font-size: 24px; } }
/* Prices by the route: "$0.50/min" in the hero h1 and the big price */
.price .per { font-size: 0.42em; font-weight: 800; letter-spacing: -0.5px; margin-left: 4px; color: inherit; }
.big-per { font-size: 28px; font-weight: 800; letter-spacing: 0; margin-left: 6px; align-self: flex-end; margin-bottom: 14px; color: var(--yellow); }
.on-dark-strong { color: #FFFFFF; }
.price-left .formula { margin: 8px 0 0; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--panel-line); color: #FFFFFF; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.price-left .example { margin: 0; font-size: 14px; color: var(--on-dark-muted); }
.price-left .example b { color: var(--yellow); }
.home-price-side { display: flex; flex-direction: column; gap: 12px; }
.home-price-side .cp-sub { margin: 8px 0 0; }
.zone-mini li { grid-template-areas: "dot range price"; }
/* Google's map uses very high z-indexes inside; keep them in their own layer so the address suggestions above stay on top. */
.cp-map-wrap { isolation: isolate; z-index: 0; }

/* "Track my package" in the header (2026-10-28, /tracking): a package icon, and just "Track" below 1480 px so the
   seven links and the two account buttons fit on one line. The account buttons never wrap ("Sign / in" and
   "Create / account" did at 1000-1140 px and 1360-1440 px, signed out), and from 1000 to 1179 px the links sit a
   little closer together. Checked every 10 px from 1000 to 1600, signed in and out (2026-10-29). */
.nav-cta .btn { white-space: nowrap; }
@media (min-width: 1000px) and (max-width: 1179px) {
  .links { gap: 0; }
  .links a { padding: 0 9px; }
}
.links .nav-track { gap: 7px; }
.links .nav-track::before { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5v8l9 5 9-5z'/%3E%3Cpath d='M3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5v8l9 5 9-5z'/%3E%3Cpath d='M3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 1479px) {
  .links .nav-track .label-long { display: none; }
  .links .nav-track .label-short { display: inline; }
}

/* ---------- Prices only on /check-pricing (2026-10-29) ---------- */
/* Soroush: no prices on the home and Pricing pages ("so it looks premium", like Trexity); the numbers live on
   /check-pricing, where scheduled orders show their 25% saving. Home: a phrase highlight in the hero instead of the
   price, three hero points, the "Included with every delivery" tiles, a tracking-page preview and the zone art. */
.hl { color: var(--yellow); white-space: nowrap; }
.hero-points { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.hero-points li { position: relative; padding-left: 32px; font-size: 15px; font-weight: 600; color: var(--on-dark); }
.hero-points .tick { width: 22px; height: 22px; top: 0; background: var(--yellow); color: var(--charcoal); }
.feats { margin-top: 44px; }
.home-price .save-pill { margin-top: 20px; }
.feats > li { display: flex; flex-direction: column; gap: 4px; }
.feat-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--charcoal); color: var(--yellow); margin-bottom: 12px; }
.feats h3 { margin: 0 0 4px; }
/* The tracking preview: a white card like the real /tracking page. */
.track-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: center; }
.track-checks { margin-top: 28px; }
.track-demo { background: #FFFFFF; border: 1px solid var(--line); border-radius: 28px; padding: 26px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 30px 70px rgba(17, 24, 39, 0.14); position: relative; }
.td-top { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: 1.4px; color: var(--muted); }
.td-top .mono { letter-spacing: 0.5px; color: var(--charcoal); }
.td-from { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.td-from b { color: var(--charcoal); }
.td-head { margin: 0; font-size: clamp(28px, 3.2vw, 36px); font-weight: 900; letter-spacing: -1px; line-height: 1.1; color: var(--charcoal); }
.td-eta { margin: 0; font-size: 16px; color: var(--ink); }
.td-eta b { font-variant-numeric: tabular-nums; }
.td-road { display: flex; align-items: center; justify-content: space-between; margin: 14px 4px 6px; position: relative; }
.td-road::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: linear-gradient(to right, var(--charcoal) 44%, var(--line) 44%); }
.td-road i { position: relative; width: 14px; height: 14px; border-radius: 50%; background: #FFFFFF; border: 3px solid var(--line); }
.td-road i.on { border-color: var(--charcoal); background: var(--charcoal); }
.td-road i.car { width: 30px; height: 30px; border: 0; background: var(--yellow); box-shadow: 0 0 0 5px rgba(255, 196, 0, 0.28); }
.td-road i.home { width: 26px; height: 26px; border-radius: 8px; border: 0; background: var(--charcoal); }
.td-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.td-steps li { padding-top: 10px; border-top: 4px solid var(--line); font-size: 12px; font-weight: 700; color: var(--muted); line-height: 1.3; }
.td-steps li.done { border-color: var(--charcoal); color: var(--charcoal); }
.td-steps li.now { border-color: var(--yellow); color: var(--charcoal); }
.td-foot { margin: 8px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.td-foot b { color: var(--charcoal); }
/* Home pricing band: price-free zone rings around the business pin. */
.zone-art { position: relative; max-width: 460px; width: 100%; justify-self: center; aspect-ratio: 4 / 3; padding: 8px; border-radius: 28px; background: #FFFFFF; border: 1px solid var(--line); }
.zone-art svg { width: 100%; height: 100%; }
.za { position: absolute; padding: 5px 11px; border-radius: 999px; background: #FFFFFF; color: var(--charcoal); font-size: 13px; font-weight: 700; white-space: nowrap; box-shadow: 0 4px 14px rgba(17, 24, 39, 0.14); }
.za::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 0; }
.za1 { left: 50%; top: 66%; transform: translateX(-50%); } .za1::before { background: var(--z1); }
.za2 { right: 6%; top: 16%; } .za2::before { background: var(--z2); }
.za3 { left: 5%; bottom: 7%; } .za3::before { background: var(--z3); }
@media (max-width: 960px) {
  .track-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .track-demo { max-width: 520px; }
}
@media (max-width: 560px) {
  .track-demo { padding: 20px; border-radius: 22px; }
  .td-steps li { font-size: 11px; }
  .za { font-size: 12px; padding: 4px 9px; }
}
/* Pricing page: the two ways to send, as two cards (no prices). */
.ways-price { margin-top: 40px; }
.ways-price .card-text { margin: 0; font-size: 17px; color: var(--muted); }
.ways-price .card-courier .card-text { color: var(--on-dark); }
.ways-price .save-pill { margin-top: 4px; }
/* /check-pricing: Scheduled or As soon as possible (scheduled saves 25% per delivery). */
.svc { margin: 4px 0 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.svc legend { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 700; color: var(--charcoal); }
.svc label { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 60px; padding: 10px 14px; border-radius: 16px; border: 1px solid var(--line); background: #FFFFFF; cursor: pointer; font-weight: 700; color: var(--charcoal); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.svc label small { font-size: 13px; font-weight: 600; color: var(--muted); }
.svc label .save { color: var(--amber-text); }
.svc input { position: absolute; opacity: 0; pointer-events: none; }
.svc label:has(input:checked) { border-color: var(--charcoal); box-shadow: inset 0 0 0 1px var(--charcoal); background: var(--cream); }
.svc label:has(input:focus-visible) { outline: 3px solid var(--charcoal); outline-offset: 2px; box-shadow: 0 0 0 6px var(--yellow); }
.zc-was { margin-right: 6px; color: var(--muted); font-size: 14px; }
.svc-note { margin: -4px 0 0; font-size: 14px; color: var(--muted); }
.zone-table td.zt-was { color: var(--muted); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .svc label { transition: none; } }
/* Home badge: "Coming to Ottawa & Gatineau · Feb 1, 2027" fits one line on phones without the date (the launch band below has it). */
@media (max-width: 560px) { .badge-date { display: none; } }