/* site.css: Changeout Radar's brand on top of base.css. The product's own look: the app's sky, white cards,
   Meta blue for actions only, Plus Jakarta Sans in two weights. Spacing stays on the 4/8 scale. */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); }
/* Arial sized to Plus Jakarta Sans (measured with fontTools), so text doesn't reflow when the web font arrives */
@font-face { font-family: "Jakarta Fallback"; font-weight: 500; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"); size-adjust: 104.9%; ascent-override: 98.9%; descent-override: 21.2%; line-gap-override: 0%; }
@font-face { font-family: "Jakarta Fallback"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); size-adjust: 100.4%; ascent-override: 103.3%; descent-override: 22.2%; line-gap-override: 0%; }

:root {
  --ink: #0f1419; --ink-2: #2b3540; --muted: #5b6774;
  --line: #dfe5ed; --line-2: #c9d3df;
  --bg: #f4f8ff; --card: #ffffff; --card-2: #eef2f7; --bubble: #e9eef5;
  --sky-top: #ffffff; --sky-mid: #e6f0ff; --sky-bot: #7fb3ff;
  --blue: #0866ff; --blue-hover: #0756d6; --blue-text: #0756d6; --blue-soft: #e3edff;
  --green: #0d7444; --green-soft: #e3f3ea; --red: #b42335;
  --shadow: 0 10px 30px rgba(20, 60, 120, .10);
  --r: 22px; --r-in: 16px;
  --pad: 24px;
  --focus: #0f1419;
  --measure: 48ch;   /* Plus Jakarta Sans runs about 1.5 characters per ch: 48ch keeps lines near 72 characters */
  --font: "Plus Jakarta Sans", "Jakarta Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (min-width: 744px)  { :root { --pad: 32px; } }
@media (min-width: 1180px) { :root { --pad: 48px; } }
@media (min-width: 1920px) { :root { --pad: 64px; } }

body { background: var(--bg); color: var(--ink); font: 500 17px/1.55 var(--font); }
@media (min-width: 744px) { body { font-size: 18px; } }
/* The app's sky, fixed behind everything. Text that sits on it stays ink, so it reads on every shade. */
body::after { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 45%, var(--sky-bot) 100%); }
a { color: var(--blue-text); }
main a[href^="mailto:"], .site-footer a[href^="mailto:"] { overflow-wrap: anywhere; }
h1, h2, h3 { margin: 0; font-weight: 700; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 3.6vw, 3.75rem); line-height: 1.06; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.75rem, 2.6vw, 2.75rem); line-height: 1.1; letter-spacing: -0.02em; }
h3 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }
.lead { font-size: 1.25rem; color: var(--ink-2); max-width: var(--measure); }
.skip { background: var(--ink); color: #fff; border-radius: 12px; font-weight: 700; text-decoration: none; }

/* Cards on the sky */
.card { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: var(--pad); min-width: 0; }
.sect { padding-block: calc(var(--gap) / 2); }
main > .sect:last-child { padding-bottom: var(--gap); }

/* Buttons: one pill shape. Solid blue is the action, outline the second choice, text links the third. */
.btn { gap: 8px; padding: 0 24px; border-radius: 999px; border: 2px solid transparent; background: var(--blue); color: #fff; font: 700 1rem/1 var(--font);
  white-space: nowrap; transition: background-color 160ms var(--ease), border-color 160ms var(--ease), transform 120ms var(--ease); }
.btn-outline { background: var(--card); color: var(--ink); border-color: var(--line-2); }
.btn-small { min-height: 44px; padding: 0 16px; font-size: 0.9rem; }
.btn[disabled] { opacity: .45; cursor: default; transform: none; }
.textlink { font-weight: 700; color: var(--blue-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
button.textlink { background: none; border: 0; padding: 0; cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--blue-hover); }
  .btn-outline:hover { background: var(--card); border-color: var(--ink); }
  .textlink:hover { color: var(--ink); }
  .nav a:hover, .login:hover { color: var(--ink); background: var(--card-2); }
}

/* Header: frosted white bar, the logo, two links, the cart and the "Pick a trade" menu */
.site-header { background: color-mix(in srgb, var(--card) 85%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.logo { display: flex; align-items: center; gap: 12px; min-height: 48px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em; white-space: nowrap; }
.logo img { width: auto; height: 30px; display: block; }
.nav { margin-left: 16px; }
.nav a, .login { color: var(--ink-2); text-decoration: none; font-size: 1rem; padding: 12px 16px; border-radius: 999px; white-space: nowrap; }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.site-header .grow { flex: 1; }
.cart-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 999px; color: var(--ink); font-weight: 700; font-size: 0.9375rem; text-decoration: none; white-space: nowrap; }
.cart-chip svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cart-chip .cc { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--card-2); color: var(--ink-2); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.cart-chip.on .cc { background: var(--blue); color: #fff; }
.cart-chip[aria-current="page"] { background: var(--card-2); }
.pick { position: relative; }
.pick-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 160ms var(--ease); }
.pick-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.pick-menu { position: absolute; right: 0; top: calc(100% + 10px); width: 380px; max-width: calc(100vw - 2 * var(--gutter)); display: grid; padding: 8px; background: var(--card); border-radius: var(--r-in); box-shadow: 0 18px 48px rgba(20, 40, 80, .24), 0 0 0 1px var(--line); }
.pick-menu[hidden] { display: none; }
.pick-menu a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: center; padding: 12px 14px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.pick-menu strong { font-size: 1rem; }
.pick-menu .pm-p { grid-column: 2; grid-row: 1 / span 2; font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
.pick-menu .pm-d { grid-column: 1; grid-row: 2; font-size: 0.875rem; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .cart-chip:hover { background: var(--card-2); } .pick-menu a:hover { background: var(--blue-soft); } }
.menu-btn { padding: 0 16px; border-radius: 999px; border: 2px solid var(--line-2); background: var(--card); font-weight: 700; color: var(--ink); cursor: pointer; }
.mobile-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 8px; box-shadow: 0 24px 40px -16px rgba(20, 40, 80, .28); max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); overflow: auto; }
/* The header sits inside the page's scroll padding, so focusing anything in it (a tap on Menu) would scroll the page. This cancels that. */
.site-header a, .site-header button { scroll-margin-top: calc(-1 * (var(--header-h) + 16px)); }
.site-header.menu-open { view-transition-name: none; }
.site-header.menu-open.is-hidden { transform: none; }
.mobile-nav a { color: var(--ink); text-decoration: none; font-size: 1.125rem; border-bottom: 1px solid var(--line); }
.mobile-nav a:last-child { border-bottom: 0; }
.mobile-nav a[hidden] { display: none; }
.mobile-nav .mn-h { padding: 16px var(--gutter) 4px; font-size: 0.875rem; font-weight: 700; color: var(--muted); }
.mobile-nav a[aria-current="page"] { font-weight: 700; }
/* The links and Log in from iPad landscape up; the cart and "Pick a trade" from iPad portrait up; phones get Menu
   and the action bar at the bottom */
@media (min-width: 1024px) { .nav { display: flex; gap: 4px; } .menu-btn, .mobile-nav { display: none; } }
@media (max-width: 1023px) { .site-header .login { display: none; } }
@media (max-width: 743px) { .site-header .cart-chip, .site-header .pick { display: none; } .logo img { height: 26px; } }

/* Two-column rows split the width evenly: no column grows to fit a long input or word */
@media (min-width: 744px)  { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1180px) { .split--hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* Reading pages on iPads: the contents and the side card share the left column, the text runs beside them */
@media (min-width: 744px) and (max-width: 1279px) {
  .doc { grid-template-rows: auto 1fr; }
  .doc > nav { grid-row: auto; position: static; }
  .doc > aside { grid-column: 1; grid-row: 2; }
  .doc > article { grid-column: 2; grid-row: 1 / span 2; }
}

/* Hero and page intros sit on the sky like the app's greeting */
.hero, .page-intro { padding-block: 40px 24px; }
@media (min-width: 1180px) { .hero, .page-intro { padding-block: 64px 32px; } }
.hero .lead, .page-intro .lead { margin-top: 20px; }
.after-check { margin-top: 16px; font-size: 1rem; color: var(--ink-2); max-width: 50ch; }
.page-intro .textlink, .hero .textlink { color: var(--ink); }
.frame-card { margin: 0; background: var(--card); border-radius: var(--r); padding: 12px; box-shadow: var(--shadow); }
.frame-card picture { display: block; overflow: hidden; border-radius: 12px; }
.frame-card img { width: 100%; border-radius: 12px; }
.frame-card figcaption { margin: 12px 8px 4px; font-size: 0.9rem; color: var(--muted); }
.aside-card { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: var(--pad); display: grid; gap: 16px; align-content: start; }
.aside-h { font-weight: 700; font-size: 1.125rem; }
.aside-card a { overflow-wrap: anywhere; }
.aside-links { display: grid; }
.aside-links a { display: flex; align-items: center; min-height: 48px; border-top: 1px solid var(--line); color: var(--blue-text); font-weight: 700; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .aside-links a:hover { color: var(--ink); text-decoration: underline; } }
.page-intro .split { align-items: start; }

/* Step labels: 1 pick a trade, 2 pick your zips, 3 check out */
.step-h { display: flex; align-items: center; gap: 12px; margin: 32px 0 16px; font-size: 1.25rem; letter-spacing: -0.01em; }
.step-n { display: inline-grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; background: var(--blue); color: #fff; font-size: 1rem; font-weight: 700; }
.hero-pick { margin-top: 28px; max-width: 600px; }
.hero-pick .step-h { margin: 0 0 12px; font-size: 1.125rem; }
.hero-acts { margin-top: 28px; }

/* The trade picker: five rows (home, pricing, phones), five cards across on the shop page from iPad landscape up */
.tradepick { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tp { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 20px; align-items: center; gap: 4px 16px; min-height: 68px; padding: 12px 16px 12px 14px; background: var(--card); border: 2px solid var(--line); border-radius: var(--r-in); color: var(--ink); text-decoration: none; box-shadow: var(--shadow); }
.tp::after { content: ""; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230756d6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / 20px no-repeat; }
.tp-i { display: block; width: 48px; height: 48px; object-fit: contain; }
.tp-t { display: grid; gap: 2px; min-width: 0; }
.tp-t strong { font-size: 1.125rem; }
.tp-t span { font-size: 0.9rem; color: var(--muted); }
.tp-p { font-weight: 700; white-space: nowrap; text-align: right; }
.tp-p small { font-size: 0.85rem; font-weight: 500; color: var(--muted); }
.tp[aria-current="true"] { border-color: var(--blue); background: var(--blue-soft); }
@media (hover: hover) and (pointer: fine) { .tp:hover { border-color: var(--blue); } }
@media (min-width: 1024px) {
  .shop .tradepick { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
  .shop .tp { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; min-height: 132px; padding: 18px 20px; }
  .shop .tp-i { width: 52px; height: 52px; margin: -4px 0 2px -4px; }
  .shop .tp::after { display: none; }
  .shop .tp-p { text-align: left; white-space: normal; }
}
@media (max-width: 420px) { .tp { grid-template-columns: 40px minmax(0, 1fr) auto; padding: 12px 14px 12px 12px; gap: 2px 10px; } .tp-i { width: 40px; height: 40px; } .tp::after { display: none; } .tp-p small { display: block; } }
@media (max-width: 360px) { .tp { grid-template-columns: 30px minmax(0, 1fr) auto; padding: 12px 12px 12px 10px; gap: 2px 8px; } .tp-i { width: 30px; height: 30px; } }

/* What's on each list (home page): one slim row per trade, the whole row a link */
.lists { display: grid; gap: 24px 48px; }
@media (min-width: 744px) { .lists { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; } }
.lists h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.lists-sub { margin-top: 12px; color: var(--ink-2); max-width: 36ch; }
.list-rows { list-style: none; margin: 0; padding: 0; }
.list-rows a { display: grid; grid-template-columns: 230px minmax(0, 1fr) auto; gap: 4px 24px; align-items: center; min-height: 64px; padding: 14px 4px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.list-rows li:last-child a { border-bottom: 1px solid var(--line); }
.list-rows strong { font-size: 1.125rem; display: inline-flex; align-items: center; gap: 12px; }
.lr-i { width: 36px; height: 36px; flex: 0 0 auto; object-fit: contain; }
.list-rows span { color: var(--ink-2); }
.list-rows .go { color: var(--blue-text); font-weight: 700; font-size: 0.9375rem; white-space: nowrap; }
@media (max-width: 1023px) {
  .list-rows a { grid-template-columns: minmax(0, 1fr) auto; }
  .list-rows a > span:not(.go) { grid-column: 1; font-size: 0.9375rem; padding-left: 48px; }
  @media (max-width: 599px) { .list-rows a > span:not(.go) { padding-left: 0; } .lr-i { width: 30px; height: 30px; } .list-rows strong { gap: 10px; } }
  .list-rows .go { grid-column: 2; grid-row: 1 / span 2; }
}
@media (hover: hover) and (pointer: fine) { .list-rows a:hover strong, .list-rows a:hover .go { color: var(--blue-hover); text-decoration: underline; } }
.only-you { margin-top: 20px; font-size: 1.0625rem; color: var(--ink-2); max-width: 46ch; }
.only-you strong { color: var(--ink); }

/* Opening motion, smoothed: one soft curve, gentler moves, and the screenshot card rises as one piece (a single
   composited layer) instead of zooming the photo inside its rounded frame. The whole sequence ends by 1.2 s. */
@media (prefers-reduced-motion: no-preference) {
  .intro-line > span { animation: intro-rise 850ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i, 0) * 90ms); }
  .intro-fade { animation: intro-soft 700ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(200ms + var(--i, 0) * 70ms); }
  .hero .intro-media { animation: none; }
  .hero .frame-card { animation: intro-card 1000ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both; will-change: transform; }
  .page-intro h1 { animation: intro-soft-lift 800ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  .page-intro .lead { animation: intro-soft 800ms cubic-bezier(0.22, 1, 0.36, 1) 100ms both; }
}
@keyframes intro-soft { from { opacity: 0; transform: translateY(10px); } }
@keyframes intro-soft-lift { from { transform: translateY(12px); } }
@keyframes intro-card { from { transform: translateY(28px); } }
.sect-lead { margin-top: 12px; margin-bottom: 24px; }
.tier-note { margin-top: 16px; max-width: var(--measure, 75ch); }
.tier h3 { font-size: 1.25rem; letter-spacing: -0.01em; }
.zl-row .area { color: var(--muted); font-size: 0.9rem; }
.cart-trade { display: inline-block; margin-left: 8px; font-size: 0.9rem; font-weight: 700; color: var(--blue-text); }

/* What you get: the list beside the clip of the product in use */
.get { display: grid; gap: calc(var(--gap) * 2); align-items: center; }
@media (min-width: 1024px) { .get { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticks li { padding-left: 32px; position: relative; color: var(--ink-2); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 20px; height: 20px; border-radius: 6px;
  background: var(--blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3L14.5 7' fill='none' stroke='%230756d6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.get-list { margin-top: 24px; gap: 0; }
.get-list li { padding-block: 14px; border-top: 1px solid var(--line); }
.get-list li:last-child { border-bottom: 1px solid var(--line); }
.get-list li::before { top: calc(14px + 0.2em); }
.price-line { margin-top: 24px; font-size: 1.125rem; color: var(--ink-2); }
.price-line strong { color: var(--ink); }
.more { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.more .textlink { display: inline-flex; align-items: center; min-height: 44px; }

/* Demo clip */
.clip { margin: 0; }
.clip-frame { position: relative; background: var(--card-2); border-radius: var(--r-in); padding: 8px; }
@media (min-width: 744px) { .clip-frame { padding: 16px; } }
.clip video { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; border-radius: 12px; background: var(--bubble); box-shadow: var(--shadow); }
.clip-btn { position: absolute; right: 20px; bottom: 20px; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 0; background: var(--card); color: var(--ink); font-weight: 700; font-size: 0.9rem; box-shadow: 0 4px 14px rgba(20, 60, 120, .28); cursor: pointer; }
@media (min-width: 744px) { .clip-btn { right: 32px; bottom: 32px; } }
.clip figcaption { margin-top: 8px; font-size: 1rem; color: var(--muted); }
.clip figcaption .textlink { display: inline-flex; align-items: center; min-height: 44px; }

/* Pricing */
.tiers { display: grid; gap: var(--gap); }
@media (min-width: 744px) { .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tier { background: var(--card-2); border-radius: var(--r-in); padding: 24px; display: grid; gap: 4px; align-content: start; }
@media (min-width: 1180px) { .tier { padding: 32px; } }
.tier h2 { font-size: 1.25rem; letter-spacing: -0.01em; }
.tier .size { color: var(--muted); font-size: 1rem; }
.tier .price { font-size: clamp(2.25rem, 3.2vw, 3.25rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin-top: 16px; }
.tier .price small { font-size: 1.125rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.tier .count { font-size: 1rem; color: var(--muted); margin-top: 8px; }
.tier .textlink { display: inline-flex; align-items: center; min-height: 44px; justify-self: start; }
.terms { margin: 32px 0 0; padding: 0; list-style: none; display: grid; gap: 0 48px; }
@media (min-width: 744px) { .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .terms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.terms li { padding: 16px 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.faq { display: grid; gap: 12px; align-items: start; margin-top: 24px; }
@media (min-width: 744px) { .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.faq details { background: var(--card-2); border-radius: var(--r-in); padding: 0 24px; }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; font-weight: 700; font-size: 1.125rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.6rem; font-weight: 500; color: var(--muted); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 0 24px; color: var(--ink-2); max-width: 66ch; }
.prices { margin: 0; display: grid; }
.prices div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.prices dt { color: var(--ink-2); }
.prices dd { margin: 0; font-weight: 700; font-size: 1.125rem; white-space: nowrap; }
/* Market list: a name and a line about its records, stacked */
.markets { margin: 0; display: grid; }
.markets div { padding: 12px 0; border-top: 1px solid var(--line); display: grid; gap: 2px; }
.markets dt { font-weight: 700; }
.markets dd { margin: 0; color: var(--ink-2); font-size: 1rem; }

/* The "Pick a trade" card at the foot of the pricing page */
.band-card { align-items: center; }
.band-card .lead { margin-top: 12px; }
.band-card .tp { box-shadow: none; }
.muted-note { font-size: 1rem; color: var(--muted); }
.thanks-body p + p { margin-top: 12px; }
/* The login card on the thanks page: link, business name and code, each with a Copy button. */
.login-card { margin-top: 24px; background: var(--card); border-radius: var(--r-in); box-shadow: var(--shadow); padding: 24px; display: grid; gap: 16px; font-size: 1rem; color: var(--ink); }
.login-card h2 { font-size: 1.25rem; }
.login-card dl { margin: 0; display: grid; }
.lc-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 4px 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.lc-row dt { color: var(--muted); font-size: 0.9375rem; }
.lc-row dd { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.lc-row dd > span { min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.lc-link { font-weight: 500 !important; font-size: 0.9375rem; color: var(--ink-2); }
.lc-code { font-size: 1.5rem; letter-spacing: 0.2em; font-variant-numeric: tabular-nums; }
.lc-copy { flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font-weight: 700; font-size: 0.9375rem; cursor: pointer; }
.login-card .acts-row { margin: 0; }
.lc-note { color: var(--ink-2); }
@media (max-width: 520px) { .lc-row { grid-template-columns: minmax(0, 1fr); } }
@media (hover: hover) and (pointer: fine) { .lc-copy:hover { border-color: var(--ink); } }

/* Zip list */
.listbar { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: end; margin-top: 24px; }
.fld { display: grid; gap: 8px; font-size: 0.9rem; font-weight: 700; }
.fld select, .fld input, .form input { height: 52px; padding: 0 20px; border-radius: 999px; border: 2px solid var(--line-2); font-weight: 500; color: var(--ink); background: var(--card); }
.fld select:focus, .fld input:focus, .form input:focus { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--blue); }
.pick-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.pick-head .step-h { margin: 0; }
.pick-head .step-h:focus { outline: none; }
.pick-head .textlink { display: inline-flex; align-items: center; min-height: 44px; }
.listbar[hidden] { display: none; }
.listbar .fld { flex: 1 1 320px; max-width: 480px; }
.listbar .fld input { font-size: 1.125rem; }
/* Step 3 stays in view at the bottom of the screen while the list scrolls (phones use the action bar instead) */
.cart-bar { position: sticky; bottom: 16px; z-index: 5; margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; background: var(--ink); color: #fff; border-radius: var(--r-in); padding: 12px 12px 12px 16px; box-shadow: 0 12px 32px rgba(15, 20, 25, .28); }
.cart-bar[hidden] { display: none; }
.cart-bar p { display: flex; align-items: center; gap: 12px; font-weight: 700; }
@media (max-width: 743px) { .cart-bar { display: none; } }
.zl-empty.ask p { color: var(--ink-2); }
.zl-empty form { display: grid; gap: 12px; margin-top: 16px; max-width: 640px; }
.zl-empty form .pair { display: grid; gap: 12px; }
@media (min-width: 744px) { .zl-empty form .pair { grid-template-columns: 1fr 1fr; } }
.zl-empty form .err { color: var(--red); font-size: 1rem; font-weight: 700; }
.zl-empty form .err:empty { display: none; }
.zl-empty form .acts { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.zl-empty form .acts .textlink { display: inline-flex; align-items: center; min-height: 44px; }
.zl-empty .added, .added { color: var(--green); font-weight: 700; }
.zl { margin-top: 24px; border-top: 1px solid var(--line-2); }
.zl:focus:not(:focus-visible) { outline: none; }
.zl-row { display: grid; grid-template-columns: 96px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 96px 160px; gap: 16px; align-items: center; padding: 12px 8px; border-bottom: 1px solid var(--line); }
.zl-row.hd { font-size: 0.9rem; font-weight: 700; color: var(--muted); padding: 8px; }
.zl-row .z { font-weight: 700; }
.zl-row .num { font-variant-numeric: tabular-nums; }
.zl-row .act { justify-self: end; }
.zl-row .act .textlink { display: inline-flex; align-items: center; min-height: 44px; }
.zl-row .act .btn { white-space: nowrap; }
.zl-row .held { color: var(--ink-2); font-weight: 700; font-size: 0.9rem; }
.zl-row .mobile-extra { display: none; }
/* county rows (window cleaning): a name instead of a zip, towns instead of a city */
.zl-row.co { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, .8fr) 96px 160px; }
.cart-item small { color: var(--muted); font-size: 0.85rem; }
.zl-row .muted { color: var(--muted); }
.zl-empty { padding: 24px 8px; color: var(--muted); }
.zl-pager { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.zl-pager[hidden], .zl-pager [hidden] { display: none; }
.listbar .fld[hidden] { display: none; }
.zl-page { font-size: 1rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
@media (max-width: 743px) {
  .zl-row, .zl-row.co { grid-template-columns: 1fr auto; grid-template-areas: "z act" "c act" "o act"; gap: 2px 12px; padding: 14px 4px; }
  .zl-row.hd { display: none; }
  .zl-row .z { grid-area: z; } .zl-row .c { grid-area: c; font-size: 1rem; color: var(--muted); }
  .zl-row .o { grid-area: o; font-size: 1rem; color: var(--ink-2); }
  .zl-row .p, .zl-row .s { display: none; }
  .zl-row .act { grid-area: act; }
  .zl-row .mobile-extra { display: inline; }
}

/* Order */
.order { display: grid; gap: calc(var(--gap) * 2); align-items: start; }
@media (min-width: 744px) { .order { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.cart { background: var(--card-2); border-radius: var(--r-in); padding: 24px; }
@media (min-width: 1180px) { .cart { padding: 32px; } }
.cart h2 { font-size: 1.25rem; margin-bottom: 8px; }
.cart-page h1 { font-size: clamp(2rem, 3vw, 3rem); }
.cart-page .lead { margin: 8px 0 24px; font-size: 1.125rem; }
.pay { display: grid; gap: 32px; align-content: start; }
.after-pay { border-top: 1px solid var(--line); padding-top: 24px; display: grid; gap: 16px; }
.after-pay .aside-h { font-size: 1.125rem; }
.cart-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.cart-item .x { border: 0; background: none; color: var(--ink-2); font-weight: 700; font-size: 0.9rem; cursor: pointer; padding: 0 12px; border-radius: 999px; min-height: 44px; }
@media (max-width: 743px) {
  .cart-item { grid-template-columns: minmax(0, 1fr) auto; }
  .cart-item > span:nth-child(2) { grid-column: 1; grid-row: 2; }
  .cart-item > .x { grid-column: 2; grid-row: 1 / span 2; }
}
.cart-empty { color: var(--ink-2); padding: 8px 0 4px; }
.keep { margin-top: 8px; }
.keep[hidden] { display: none; }
.keep .textlink { display: inline-flex; align-items: center; min-height: 44px; }
.btn-big { min-height: 56px; padding: 0 40px; font-size: 1.125rem; }
.sum { margin-top: 12px; display: grid; gap: 8px; }
.sum div { display: flex; justify-content: space-between; gap: 12px; }
.sum .due { font-weight: 700; font-size: 1.25rem; padding-top: 12px; border-top: 1px solid var(--line-2); }
.sum .save { color: var(--green); }
.form { display: grid; gap: 16px; }
.form label { display: block; font-size: 1rem; font-weight: 700; }
.form label input { display: block; width: 100%; margin-top: 8px; }
.form label span { font-weight: 500; color: var(--muted); }
.form .err { color: var(--red); font-size: 1rem; font-weight: 700; }
.form input[aria-invalid="true"] { border-color: var(--red); }
.form .fine { font-size: 1rem; color: var(--muted); max-width: var(--measure); }
.form .btn { justify-self: start; }
.renew { background: var(--card-2); border-radius: var(--r-in); padding: 16px 20px; font-size: 1rem; color: var(--ink-2); }
.renew:empty { display: none; }
.note-ok { font-size: 1rem; font-weight: 700; color: var(--ink-2); }
.note-ok:empty, .form .err:empty { display: none; }
.hp { position: absolute; left: -9999px; }
.done { background: var(--green-soft); border-radius: var(--r-in); padding: 24px; }
.done h2 { color: var(--green); font-size: 1.25rem; }
.done p { margin-top: 8px; }
.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 32px 1fr; gap: 12px; color: var(--ink-2); }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--blue-soft); color: var(--blue-text); font-weight: 700; font-size: 1rem; }
.acts-row { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 743px) { .form .btn { justify-self: stretch; } }

/* Reading pages (privacy, accessibility) */
.doc > nav { font-size: 1rem; }
.doc > nav p { font-weight: 700; }
.doc > nav a { color: var(--ink-2); text-decoration: none; }
.doc article h2 { font-size: 1.5rem; margin: 32px 0 12px; }
.doc article h2:first-child { margin-top: 0; }
.doc article p, .doc article li { color: var(--ink-2); }
.doc article p + p { margin-top: 12px; }
.doc article ul { padding-left: 20px; display: grid; gap: 8px; margin: 12px 0 0; }
.doc aside .aside-card { position: sticky; top: calc(var(--header-h) + 24px); background: var(--card-2); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .doc > nav a:hover { color: var(--ink); } }

/* Footer: a card on the sky */
.site-footer { padding-block: 0 var(--gap); color: var(--muted); font-size: 1rem; }
.site-footer .card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px var(--gap); }
.site-footer .card > div:first-child { grid-column: 1 / -1; }
@media (min-width: 744px) { .site-footer .card { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); } .site-footer .card > div:first-child { grid-column: auto; } }
.site-footer .links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.site-footer strong { color: var(--ink); }
.site-footer a { color: var(--ink-2); }
.site-footer p { line-height: 1.6; }
.site-footer p + p { margin-top: 8px; }

/* Phones: the two things people come for, always in reach */
.callbar { background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -16px rgba(20, 60, 120, .25); }
.callbar .btn { padding: 0 12px; white-space: normal; text-align: center; line-height: 1.2; }