/* dashquote.io styles.
   Brand: CLAUDE.md (Brand) and the approved design tokens. The site is light only (decision
   2026-11-12): Warm White page, Deep Slate text, one goldenrod focal point per screen, teal for
   underlines and highlights. Product shots sit on pure white so they stand out from the page.
   Components use the tokens below; never hard-code a color in a component rule. */

@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-subset.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --dq-canvas: #FFFEFC;        /* Warm White: page base */
  --dq-shot: #FFFFFF;          /* product shot surface */
  --dq-shot-edge: #D5DAE1;
  --dq-text: #0F172A;          /* Deep Slate */
  --dq-text-2: #475569;
  --dq-text-3: #5B677A;
  --dq-border: #6B7689;
  --dq-hairline: #E3E7ED;
  --dq-skeleton: #EDEFF2;
  --dq-brand: #DDA615;         /* Goldenrod */
  --dq-brand-hover: #C9950F;
  --dq-brand-pressed: #B5850C;
  --dq-brand-edge: #8A6508;
  --dq-on-brand: #0F172A;
  --dq-teal: #00D2C8;          /* Electric Teal */
  --dq-teal-edge: #007A73;
  --dq-teal-tint: #E6FAF9;
  --dq-on-teal: #0F172A;
  --dq-slate: #0F172A;
  --dq-on-slate: #FFFEFC;
  --dq-slate-hover: #1E293B;
  --dq-mark-won: #00D2C8;
  --dq-mark-lost: #6B7689;
  --dq-mark-none: #475569;
  --dq-focus: #0F172A;
  --dq-danger: #B42318;
  --dq-success: #067647;
  --dq-shot-shadow: 0 40px 80px -32px rgba(15, 23, 42, 0.38), 0 12px 24px -12px rgba(15, 23, 42, 0.12);

  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--dq-canvas); color: var(--dq-text);
  font-family: var(--font); font-size: 16px; line-height: 1.6;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 800; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--dq-focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 10; padding: 10px 14px; border-radius: 6px; background: var(--dq-slate); color: var(--dq-on-slate); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap {
  max-width: 1200px; margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

/* ---------- Header and footer ---------- */
.head { display: flex; align-items: center; gap: 28px; padding-block: 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 20px; letter-spacing: -0.01em; }
.brand img { width: 28px; height: 28px; display: block; }
.nav { display: none; gap: 24px; font-size: 15px; font-weight: 600; color: var(--dq-text-2); }
.nav a { text-decoration: none; }
.nav a:hover { color: var(--dq-text); }
.nav-cta, .tlink {
  font-weight: 700; text-decoration: underline; text-decoration-color: var(--dq-teal);
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.nav-cta { margin-left: auto; font-size: 14px; line-height: 20px; text-align: right; }
/* One line on phones that have room; the narrowest screens wrap it instead of scrolling sideways. */
@media (min-width: 370px) { .head { gap: 16px; } .nav-cta { white-space: nowrap; } }
.tlink { text-underline-offset: 5px; }

.foot { border-top: 1px solid var(--dq-hairline); margin-top: 24px; padding-block: 28px 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; font-size: 14px; color: var(--dq-text-2); }
.foot .brand { font-size: 16px; color: var(--dq-text); }
.foot .brand img { width: 22px; height: 22px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-left: auto; }
.foot nav a { font-weight: 600; color: var(--dq-text); }

/* ---------- Type ---------- */
.label {
  display: inline-block; margin: 0 0 20px; padding-bottom: 4px; border-bottom: 2px solid var(--dq-teal);
  font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dq-text);
}
.display { font-size: 44px; line-height: 46px; letter-spacing: -0.035em; }
.h2 { font-size: 34px; line-height: 38px; letter-spacing: -0.03em; }
.h3 { font-size: 19px; line-height: 26px; letter-spacing: -0.01em; }
.soft { color: var(--dq-text-2); }
.lead { font-size: 18px; line-height: 29px; color: var(--dq-text-2); max-width: 36em; }
.caption { font-size: 13px; line-height: 18px; color: var(--dq-text-3); margin-top: 14px; }
.caption b { color: var(--dq-text-2); font-weight: 700; }

/* ---------- Buttons ---------- */
.btn-primary, .btn-strong {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px;
  border-radius: 6px; font: 700 17px/1 var(--font); text-decoration: none; cursor: pointer; transition: background-color 100ms;
}
/* Goldenrod: the form's submit, the only goldenrod on that screen */
.btn-primary { background: var(--dq-brand); color: var(--dq-on-brand); border: 1px solid var(--dq-brand-edge); }
.btn-primary:hover { background: var(--dq-brand-hover); }
.btn-primary:active { background: var(--dq-brand-pressed); }
.btn-primary[aria-busy="true"] { cursor: progress; }
.btn-primary svg { width: 20px; height: 20px; transition: transform 100ms; }
.btn-primary:hover svg { transform: translateX(3px); }
/* Deep Slate with a teal arrow: the hero button, because the hero shot already holds the goldenrod focal point */
.btn-strong { background: var(--dq-slate); color: var(--dq-on-slate); border: 2px solid var(--dq-slate); }
.btn-strong:hover { background: var(--dq-slate-hover); border-color: var(--dq-slate-hover); }
.btn-strong svg { width: 20px; height: 20px; color: var(--dq-teal); transition: transform 100ms; }
.btn-strong:hover svg { transform: translateX(3px); }

/* ---------- Home sections ---------- */
.section { padding-block: 72px; }
.section.tight-top { padding-top: 0; }
.hero { padding-block: 28px 64px; }
.hero-grid { display: grid; gap: 40px; margin-top: 28px; }
.hero-copy { display: grid; gap: 28px; align-content: start; }
.cta { display: grid; gap: 12px; justify-items: start; }
.cta-note { font-size: 14px; line-height: 20px; color: var(--dq-text-2); }
figure { margin: 0; min-width: 0; }

.facts { display: grid; gap: 28px; padding-block: 8px 24px; }
.fact { display: grid; gap: 6px; padding-top: 14px; border-top: 2px solid var(--dq-teal); }
/* Number and label share the large type; the line under it explains. */
.fact .big { font-size: 34px; line-height: 38px; font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; color: var(--dq-text); max-width: none; }
.fact .big .n { font-variant-numeric: tabular-nums; }
.fact p { color: var(--dq-text-2); font-size: 15px; line-height: 22px; max-width: 22em; }

.feature { display: grid; gap: 40px; align-items: center; }
.feature + .feature { padding-top: 24px; }
.feature-copy { display: grid; gap: 20px; align-content: start; justify-items: start; }
.ticks { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; }
.ticks li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; font-weight: 600; font-size: 16px; line-height: 24px; }
.ticks svg { width: 20px; height: 20px; margin-top: 2px; color: var(--dq-teal-edge); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
.steps li { display: grid; gap: 10px; align-content: start; }
.step-n { font-size: 64px; line-height: 64px; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; padding-bottom: 10px; border-bottom: 2px solid var(--dq-teal); }
.steps p { color: var(--dq-text-2); }
.how-title { max-width: 16ch; margin-bottom: 56px; }
.market-line { margin-top: 48px; max-width: 46em; font-size: 18px; line-height: 29px; color: var(--dq-text-2); padding-top: 14px; border-top: 2px solid var(--dq-teal); }
.market-line b { color: var(--dq-text); }
.cta-row { margin-top: 36px; }

/* Questions: each answer opens on tap; teal underline marks the question as a control */
.faq { margin-top: 32px; max-width: 820px; border-top: 1px solid var(--dq-hairline); }
.faq details { border-bottom: 1px solid var(--dq-hairline); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 18px; font-weight: 700; font-size: 18px; line-height: 26px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 800; font-size: 22px; color: var(--dq-text-2); }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { text-decoration: underline; text-decoration-color: var(--dq-teal); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.faq details p { color: var(--dq-text-2); font-size: 17px; line-height: 28px; padding-bottom: 20px; max-width: 40em; }

.promise { margin: 0; font-size: 28px; line-height: 36px; font-weight: 700; letter-spacing: -0.02em; max-width: 30em; }
.trust-facts { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 16px; }
.trust-facts li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-weight: 600; font-size: 17px; }
.trust-facts svg { width: 22px; height: 22px; margin-top: 2px; color: var(--dq-teal-edge); }

/* ---------- Early access form ---------- */
.request { display: grid; gap: 36px; scroll-margin-top: 24px; }
.request-intro .lead { margin-top: 16px; }
.form { display: grid; gap: 22px; max-width: 580px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field > label, .field legend { font-weight: 700; font-size: 15px; line-height: 22px; padding: 0; }
.opt { font-weight: 500; color: var(--dq-text-3); }
.hint { font-size: 14px; line-height: 20px; color: var(--dq-text-3); }
.field input[type="text"], .field input[type="email"], .field textarea {
  font: 500 16px/1.2 var(--font); color: var(--dq-text); background: var(--dq-shot);
  border: 1px solid var(--dq-border); border-radius: 6px; min-height: 48px; padding: 12px; width: 100%;
}
.field textarea { min-height: 112px; resize: vertical; line-height: 1.5; }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.choices { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 6px; }
.choices.three { grid-template-columns: 1fr; }
.choice { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border: 1px solid var(--dq-border); border-radius: 6px; cursor: pointer; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--dq-shot); }
.choice input { accent-color: var(--dq-teal-edge); width: 18px; height: 18px; margin: 0; flex: none; }
.choice:has(input:checked) { background: var(--dq-teal-tint); border-color: var(--dq-teal-edge); box-shadow: inset 0 0 0 1px var(--dq-teal-edge); }
.choice:has(input:focus-visible) { outline: 2px solid var(--dq-focus); outline-offset: 2px; }
.err { color: var(--dq-danger); font-size: 14px; font-weight: 600; line-height: 20px; }
.field.invalid input[type="text"], .field.invalid input[type="email"], .field.invalid textarea, .field.invalid .choice { border-color: var(--dq-danger); }
.field.invalid input[type="text"], .field.invalid input[type="email"], .field.invalid textarea { box-shadow: inset 0 0 0 1px var(--dq-danger); }
.turnstile-slot { min-height: 65px; }
.form-foot { font-size: 14px; color: var(--dq-text-3); }
.form-foot a { color: var(--dq-text-2); }
.form-foot.question { margin-top: 20px; }
.notice p:empty { display: none; }
.back-link { margin-top: 28px; }
.notice { display: grid; gap: 8px; }
.notice h3 { justify-self: start; padding-bottom: 3px; border-bottom: 2px solid var(--dq-success); font-size: 20px; line-height: 28px; }
.notice.error h3 { border-bottom-color: var(--dq-danger); }
.notice p { color: var(--dq-text-2); }
.notice p b { color: var(--dq-text); }
.noscript-note { font-weight: 600; }

/* ---------- Founder ---------- */
.founder { max-width: 720px; }
.founder p { font-size: 19px; line-height: 31px; margin-top: 16px; }
.founder .standalone { font-size: 26px; line-height: 34px; font-weight: 800; letter-spacing: -0.02em; margin-top: 28px; margin-bottom: 12px; }
.sig { display: flex; align-items: center; gap: 16px; margin-top: 32px; }
/* Round photo: the file is already a circle on a transparent background */
.sig .photo { width: 64px; height: 64px; border-radius: 50%; flex: none; display: block; object-fit: cover; }
.sig b { display: block; font-size: 17px; line-height: 24px; }
.sig span { color: var(--dq-text-2); font-size: 15px; }

/* ---------- Product shots: the approved add-in and scan components ---------- */
.shot { background: var(--dq-shot); border: 1px solid var(--dq-shot-edge); border-radius: 6px; box-shadow: var(--dq-shot-shadow); overflow: hidden; container-type: inline-size; min-width: 0; }
.shot-bar { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--dq-hairline); font: 600 12px/1 var(--font-ui); color: var(--dq-text-3); }
.shot-bar .dots { display: flex; gap: 6px; }
.shot-bar .dots i { width: 9px; height: 9px; border-radius: 2px; background: var(--dq-hairline); }
.dq { font-family: var(--font-ui); font-size: 14px; line-height: 20px; color: var(--dq-text); }
.dq .nm { font-family: var(--font); font-variant-numeric: tabular-nums; }

.mail { display: grid; grid-template-columns: 1fr; }
.mail-read { display: none; padding: 18px 20px; border-right: 1px solid var(--dq-hairline); min-width: 0; }
.mail-subj { font: 700 17px/24px var(--font-ui); margin: 0 0 12px; }
.mail-from { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; font-size: 13px; line-height: 18px; color: var(--dq-text-2); margin-bottom: 16px; }
.mail-from .av { width: 34px; height: 34px; border-radius: 4px; display: grid; place-items: center; background: var(--dq-skeleton); font: 800 13px/1 var(--font); color: var(--dq-text-2); }
.mail-from b { color: var(--dq-text); font-weight: 600; }
.mail-body { font-size: 14px; line-height: 22px; display: grid; gap: 10px; }
.mail-sub { padding: 12px 14px; border-bottom: 1px solid var(--dq-hairline); font-size: 13px; line-height: 18px; color: var(--dq-text-2); }
.mail-sub b { display: block; color: var(--dq-text); font-weight: 700; font-size: 14px; }
@container (min-width: 600px) {
  .mail { grid-template-columns: minmax(0, 1fr) 320px; }
  .mail-read { display: block; }
  .mail-sub { display: none; }
}

.pane-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 6px; }
.pane-logo { display: inline-flex; align-items: center; gap: 7px; font: 800 15px/1 var(--font); letter-spacing: -0.01em; }
.pane-logo img { width: 22px; height: 22px; display: block; }
.pane-head .sp { flex: 1; }
.tag-teal { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: 4px; font-size: 12px; line-height: 16px; font-weight: 600; background: var(--dq-teal); color: var(--dq-on-teal); border: 1px solid var(--dq-teal-edge); white-space: nowrap; }
.pane-body { padding: 8px 12px 16px; display: flex; flex-direction: column; gap: 18px; }
.lane { font: 800 19px/25px var(--font); letter-spacing: -0.01em; margin: 0; }
.lane .arrow { color: var(--dq-text-2); font-weight: 600; }
.meta { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--dq-text-2); font-size: 13px; margin-top: 6px; }
.meta b { color: var(--dq-text); font-weight: 600; }

.strip { display: flex; flex-direction: column; gap: 8px; }
.strip-track { position: relative; height: 40px; }
.strip-track::before { content: ""; position: absolute; left: 0; right: 0; top: 20px; height: 2px; background: var(--dq-hairline); border-radius: 1px; }
.mk { position: absolute; width: 12px; height: 12px; transform: translate(-50%, -50%); }
.mk svg, .mk-key svg { display: block; }
.mk-key { display: inline-grid; }
.won circle { fill: var(--dq-mark-won); stroke: var(--dq-teal-edge); stroke-width: 1.5; }
.lost path { fill: var(--dq-mark-lost); }
.none circle { fill: var(--dq-shot); stroke: var(--dq-mark-none); stroke-width: 1.8; }
.mk.won { top: 14px; } .mk.lost { top: 26px; } .mk.none { top: 20px; }
.marker { position: absolute; top: 4px; width: 14px; height: 32px; transform: translateX(-50%); display: grid; justify-items: center; }
.marker::before { content: ""; width: 4px; height: 32px; background: var(--dq-brand); box-shadow: 0 0 0 1px var(--dq-brand-edge); border-radius: 2px; }
.marker::after { content: ""; position: absolute; top: 9px; width: 14px; height: 14px; background: var(--dq-brand); box-shadow: 0 0 0 1px var(--dq-brand-edge); border-radius: 3px; }
.sugg { position: absolute; top: 31px; width: 2px; height: 8px; background: var(--dq-text-2); transform: translateX(-50%); }
.strip-axis { display: flex; justify-content: space-between; font: 400 11px/14px var(--font); font-variant-numeric: tabular-nums; color: var(--dq-text-3); }
.strip-line { font-size: 13px; line-height: 18px; }
.strip-line b { font-family: var(--font); font-variant-numeric: tabular-nums; }
.legend { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12px; line-height: 16px; color: var(--dq-text-2); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }

.slab { background: var(--dq-brand); color: var(--dq-on-brand); border-radius: 6px; padding: 12px; display: flex; flex-direction: column; gap: 10px; box-shadow: inset 0 0 0 1px var(--dq-brand-edge); }
.slab-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; line-height: 16px; font-weight: 600; }
.slab-rate { display: flex; align-items: baseline; gap: 2px; border-bottom: 2px solid var(--dq-on-brand); font: 800 34px/42px var(--font); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.slab-rate span { font-size: 22px; }
.slab .go { font: 700 15px/1 var(--font-ui); min-height: 44px; border-radius: 6px; background: var(--dq-slate); color: var(--dq-on-slate); display: flex; align-items: center; justify-content: center; gap: 8px; }
.slab .go svg { width: 16px; height: 16px; }
.slab .go .key { font-size: 12px; opacity: 0.8; }
.disc-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 4px 0; }
.disc-t { font-weight: 600; text-decoration: underline; text-decoration-color: var(--dq-teal); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.disc-t::after { content: " +"; font-family: var(--font); font-weight: 800; color: var(--dq-text-2); }
.disc-s { font-size: 12px; line-height: 16px; color: var(--dq-text-2); }

.scan { padding: 22px 24px 26px; display: grid; gap: 18px; }
.scan .who { font-size: 12px; line-height: 16px; color: var(--dq-text-2); }
.money-slab { background: var(--dq-brand); color: var(--dq-on-brand); border-radius: 6px; padding: 18px 20px; display: flex; flex-direction: column; gap: 2px; width: fit-content; max-width: 100%; box-shadow: inset 0 0 0 1px var(--dq-brand-edge); }
.money-slab .amt { font: 800 56px/60px var(--font); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.money-slab .lbl { font-size: 13px; line-height: 18px; font-weight: 600; }
.money-slab .lbl.light { font-weight: 500; }
.progressline { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; color: var(--dq-text-2); }
.progressline b { color: var(--dq-text); }
.progressline .bar { flex: 1; height: 3px; background: var(--dq-hairline); border-radius: 2px; overflow: hidden; }
.progressline .bar i { display: block; height: 100%; width: 25%; background: var(--dq-teal); }
.parts { display: flex; flex-direction: column; gap: 8px; }
.parts .cap { font-size: 12px; line-height: 16px; color: var(--dq-text-2); }
.pbar { display: flex; gap: 3px; height: 26px; }
.pseg { border-radius: 4px; display: grid; place-items: center; min-width: 26px; background: var(--dq-teal); border: 1px solid var(--dq-teal-edge); color: var(--dq-on-teal); font: 800 12px/1 var(--font); }
.split-key { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.split-key li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 40px; gap: 8px; align-items: baseline; }
.split-key .nm { text-align: right; font-weight: 700; }
.split-key .pct { color: var(--dq-text-2); font-weight: 600; }
.partno { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: var(--dq-teal); color: var(--dq-on-teal); box-shadow: inset 0 0 0 1px var(--dq-teal-edge); font: 800 11px/1 var(--font); }
.ticks .partno { margin-top: 3px; }
.strip-shot { padding: 22px 22px 20px; display: grid; gap: 16px; }
.strip-shot .lane { font-size: 17px; line-height: 23px; }

/* ---------- Text pages: privacy, terms, support, thanks ---------- */
.page { max-width: 760px; padding-block: 40px 72px; }
.page h1 { font-size: 40px; line-height: 44px; letter-spacing: -0.035em; }
.page .updated { color: var(--dq-text-2); margin-top: 12px; font-size: 15px; }
.prose { margin-top: 32px; font-size: 17px; line-height: 28px; }
.prose h2 { font-size: 23px; line-height: 30px; letter-spacing: -0.02em; margin: 44px 0 12px; }
.prose h3 { font-size: 18px; line-height: 26px; margin: 28px 0 8px; }
.prose p, .prose ul, .prose ol { margin: 0 0 14px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose a { text-decoration-color: var(--dq-teal); text-decoration-thickness: 2px; text-underline-offset: 4px; font-weight: 600; }
.prose blockquote { margin: 0 0 16px; padding: 2px 0 2px 16px; border-left: 3px solid var(--dq-teal); font-weight: 600; }
.prose .summary { list-style: none; padding: 0; }
.prose .summary li { padding-left: 32px; position: relative; }
.prose .summary li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 12px; height: 12px; border-radius: 3px; background: var(--dq-teal); border: 1px solid var(--dq-teal-edge); }
.table-wrap { overflow-x: auto; margin: 0 0 16px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 22px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--dq-hairline); }
.prose th { font-weight: 700; }
.contact-line { font-size: 22px; line-height: 30px; font-weight: 800; letter-spacing: -0.01em; margin: 8px 0 16px; }

@media (min-width: 760px) {
  .wrap { padding-left: max(40px, env(safe-area-inset-left, 0px)); padding-right: max(40px, env(safe-area-inset-right, 0px)); }
  .nav { display: flex; }
  .nav-cta { font-size: 15px; }
  .display { font-size: 80px; line-height: 80px; letter-spacing: -0.045em; }
  .h2 { font-size: 52px; line-height: 54px; letter-spacing: -0.04em; }
  .lead { font-size: 20px; line-height: 32px; }
  .hero { padding-block: 56px 96px; }
  .hero-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; margin-top: 44px; align-items: start; }
  .section { padding-block: 120px; }
  /* Each fact spans two shared rows, so the lines under the big labels start level even when one label wraps. */
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: 40px; row-gap: 8px; padding-block: 0; }
  .fact { grid-row: span 2; grid-template-rows: subgrid; }
  .fact .big { font-size: 40px; line-height: 44px; }
  .feature { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; }
  .feature + .feature { padding-top: 40px; }
  .feature.flip { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  .feature.flip .feature-copy { order: 2; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
  .promise { font-size: 40px; line-height: 50px; letter-spacing: -0.03em; }
  .trust-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; max-width: 980px; }
  .request { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; }
  .choices { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .choices.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strip-shot { zoom: 1.3; }
  .page { padding-block: 64px 96px; }
  .page h1 { font-size: 56px; line-height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}