/* VocaQuote website: "Docket" brand, same tokens as the app
   (lib/flutter_flow/flutter_flow_theme.dart, lib/components/vq_ui.dart).
   Fonts are self-hosted IBM Plex (OFL): no third-party requests, no cookies.
   Mobile first: most visitors are on a phone. */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url(fonts/IBMPlexSans-Regular.ttf) format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url(fonts/IBMPlexSans-Medium.ttf) format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url(fonts/IBMPlexSans-SemiBold.ttf) format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-display: swap; src: url(fonts/IBMPlexSans-Bold.ttf) format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url(fonts/IBMPlexMono-Medium.ttf) format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600 700; font-display: swap; src: url(fonts/IBMPlexMono-SemiBold.ttf) format("truetype"); }

:root {
  --paper: #F7F5EF;
  --ink: #141414;
  --red: #C8321E;      /* record button + ONE main action per view only */
  --red-dark: #A92916;
  --blue: #2B4C9B;     /* links */
  --rule: #D9D4C7;
  --won: #2E6B45;
  --muted: #5C5A55;
  --card: #FFFFFF;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 var(--sans); }
img, svg { max-width: 100%; }
svg { flex-shrink: 0; }
a { color: var(--blue); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -0.025em; margin: 0 0 .5em; }
h1 { font-size: clamp(36px, 7vw, 62px); font-weight: 700; }
h2 { font-size: clamp(27px, 4.4vw, 40px); font-weight: 700; }
h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
[lang="zh-Hans"] { letter-spacing: 0; }
[lang="zh-Hans"] h1, [lang="zh-Hans"] h2 { letter-spacing: 0; line-height: 1.25; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 780px; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.label { font: 600 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; display: inline-flex; align-items: center; gap: 6px; }
.label.red, .red { color: var(--red); }
.label svg { width: 14px; height: 14px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.lead { font-size: clamp(18px, 2.4vw, 21px); color: var(--muted); max-width: 640px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; background: var(--card); padding: 8px 12px; z-index: 20; }

/* ---- Header ---- */
.site-head { border-bottom: 1px solid var(--rule); background: rgba(247, 245, 239, .96); position: sticky; top: 0; z-index: 10; backdrop-filter: saturate(1.2) blur(6px); }
.head-row { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 21px; letter-spacing: -0.03em; margin-right: auto; }
.logo b { color: var(--red); font-weight: 700; }
.logo.small { font-size: 16px; gap: 7px; }
.nav-wide { display: none; gap: 22px; font-size: 15px; }
.site-head nav a { color: var(--ink); text-decoration: none; font-weight: 500; }
.site-head nav a:hover, .site-head nav a[aria-current] { color: var(--blue); text-decoration: underline; }
.site-head .head-cta { display: none; }
.nav-menu { position: relative; }
.nav-menu summary { list-style: none; cursor: pointer; font: 600 15px var(--sans); border: 1.5px solid var(--ink); border-radius: 8px; padding: 8px 14px; background: var(--card); }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu nav { position: absolute; right: 0; top: calc(100% + 8px); background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 8px; display: grid; min-width: 200px; box-shadow: 0 12px 30px rgba(20, 20, 20, .12); }
.nav-menu nav a { padding: 12px 14px; border-radius: 6px; font-size: 17px; }
.nav-menu nav a:hover { background: var(--paper); }
@media (min-width: 900px) {
  .nav-wide { display: flex; }
  .site-head .head-cta { display: inline-flex; }
  .nav-menu { display: none; }
}

/* ---- Buttons (52 high, radius 8, like VqPrimaryButton) ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: 8px; font: 700 16px var(--sans); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .12s, background .12s; }
.btn:active { transform: scale(.97); }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-dark); }
/* Header CTA: ink, so red stays the one main action in each view. */
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #333; }
.btn-line { border-color: var(--ink); color: var(--ink); background: var(--card); }
.btn-line:hover { background: var(--paper); }
.btn-sm { min-height: 42px; padding: 0 16px; font-size: 15px; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 8px 0 0; }
.btn-row.center { justify-content: center; margin-top: 32px; }
.btn svg { width: 20px; height: 20px; }
.trust { font-size: 14px; color: var(--muted); margin: 16px 0 0; letter-spacing: .02em; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }

/* ---- Sections ---- */
.sec { padding: 64px 0; }
.sec-white { background: var(--card); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.sec-white .card { background: var(--paper); }
.band { padding: 72px 0; }
.band-ink { background: var(--ink); color: #fff; }
.band-ink h2 { color: #fff; }
.band-ink .lead, .on-ink { color: #CFCBC0; }
.band-ink .btn-red { margin-top: 8px; }
@media (min-width: 900px) { .sec { padding: 88px 0; } }

/* ---- Hero ---- */
.hero { padding: 36px 0 56px; }
.hero-sm { padding: 48px 0 8px; }
.hero-sm + .sec { padding-top: 32px; }
.hero-grid { display: grid; gap: 40px; align-items: center; }
.hero h1 { margin-bottom: 16px; }
.hero .lead { margin-bottom: 24px; }
.hero-visual { justify-self: center; width: 100%; max-width: 380px; }
@media (min-width: 900px) { .hero { padding: 64px 0 88px; } .hero-grid { grid-template-columns: 1.15fr .85fr; gap: 64px; } }

/* ---- Phone mock-up ---- */
.phone { background: var(--ink); border-radius: 34px; padding: 12px; box-shadow: 0 24px 50px rgba(20, 20, 20, .18); }
.phone-screen { background: var(--paper); border-radius: 24px; padding: 18px 14px 20px; min-height: 420px; }
.said { background: var(--card); border: 1px solid var(--rule); border-radius: 14px 14px 14px 4px; padding: 12px 14px; margin-bottom: 14px; }
.said .label { color: var(--red); margin-bottom: 6px; }
.said p { margin: 0; font-size: 15px; line-height: 1.45; }

/* ---- Docket: white, torn zigzag bottom (DocketTearClipper) ---- */
.docket {
  background: var(--card); margin: 0; padding: 16px 16px 28px;
  filter: drop-shadow(0 8px 14px rgba(20, 20, 20, .08));
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
}
.d-top { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.d-top .red { font-weight: 700; }
.d-job { font-weight: 700; font-size: 17px; margin: 8px 0 6px; line-height: 1.3; }
.d-lines { list-style: none; padding: 0; margin: 0 0 8px; border-bottom: 1px solid var(--rule); }
.d-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14px; }
.d-lines li + li { border-top: 1px dashed var(--rule); }
.d-desc { display: grid; }
.d-desc small { color: var(--muted); font-size: 11.5px; }
.zh-sub { color: var(--muted); font-size: 13px; }
.d-lines .mono { white-space: nowrap; font-weight: 600; }
.d-sum, .d-total { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); padding: 2px 0; }
.d-total { color: var(--ink); font-weight: 700; font-size: 15px; margin-top: 6px; padding-top: 8px; border-top: 1.5px solid var(--ink); }
.d-note { margin: 10px 0 0; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .hero .docket { animation: print .9s cubic-bezier(.2, .7, .2, 1) .2s both; }
  @keyframes print { from { clip-path: inset(0 0 100% 0); transform: translateY(-10px); } to { clip-path: inset(0 0 0 0); transform: none; } }
}

/* ---- Proof strip ---- */
.proof { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--card); }
.proof-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 16px; font-size: 13px; }
.proof-row span { display: inline-flex; align-items: center; gap: 6px; }
.proof-row svg, .ticks svg { color: var(--won); }
@media (min-width: 900px) { .proof-row { display: flex; justify-content: space-between; font-size: 14px; } }

/* ---- Grids and cards ---- */
.grid { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 720px) { .g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .g3 { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 22px; }
.card h3 { margin-bottom: 6px; }
.card p { color: var(--muted); }
.card p:last-child { margin-bottom: 0; }
.card .btn { margin-top: 8px; }
.feat svg, .step > svg { color: var(--ink); width: 26px; height: 26px; margin-bottom: 10px; }
.pain { border-left: 4px solid var(--red); border-radius: 0 10px 10px 0; }
.plain { list-style: none; padding: 0; }
.tip { margin-top: 20px; border-style: dashed; }

/* ---- Steps ---- */
.steps { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 16px; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; }
.step-n { position: absolute; top: 18px; right: 20px; font-size: 40px; font-weight: 700; color: var(--rule); line-height: 1; }

/* ---- Quote-to-paid flow ---- */
.flow { list-style: none; padding: 0; margin: 28px 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.flow li { background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: 16px; display: grid; gap: 2px; position: relative; }
.flow li span { font-weight: 700; font-size: 16px; }
.flow li small { color: var(--muted); font-size: 12px; }
.flow li:last-child { border-color: var(--won); }
.flow li:last-child span { color: var(--won); }
@media (min-width: 900px) { .flow { grid-template-columns: repeat(4, 1fr); } .flow li:not(:last-child)::after { content: "\2192"; position: absolute; right: -9px; top: 50%; transform: translateY(-50%); color: var(--muted); } }

/* ---- Chips ---- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.chip { font: 600 15px var(--sans); background: var(--card); color: var(--ink); text-decoration: none; border: 1px solid var(--rule); border-radius: 20px; padding: 9px 16px; }
.chip:hover { border-color: var(--ink); }

/* ---- Split layout ---- */
.split { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 56px; } }
.ticks, .crosses { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks svg { margin-top: 4px; }
.crosses li { padding-left: 26px; position: relative; color: var(--muted); }
.crosses li::before { content: "\00D7"; position: absolute; left: 4px; top: -1px; font-weight: 700; color: var(--muted); font-size: 18px; }

/* ---- Tax table ---- */
.table-wrap { overflow-x: auto; margin-top: 28px; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; }
table { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 600px; }
th, td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
td:first-child { font-weight: 700; white-space: nowrap; }

/* ---- Pricing ---- */
.plans { align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: 4px; }
.plan .ticks { margin-bottom: 16px; flex: 1; }
.plan-pro { border: 2px solid var(--ink); }
.price { font-size: 34px; font-weight: 700; margin: 0; color: var(--ink) !important; }
.price small { font-size: 16px; color: var(--muted); font-weight: 500; }
.refer { margin-top: 16px; border-style: dashed; }

/* ---- Trades ---- */
.trade-card { text-decoration: none; color: var(--ink); transition: border-color .12s; display: grid; align-content: start; }
.trade-card:hover { border-color: var(--ink); }
.trade-card .link-arrow { color: var(--blue); }
.crumbs { padding-top: 16px; color: var(--muted); }
.crumbs a { color: var(--muted); }

/* ---- FAQ ---- */
.faq { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 0 20px; margin-bottom: 10px; }
.sec-white .faq { background: var(--paper); }
.faq summary { cursor: pointer; font-weight: 700; padding: 18px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 600 22px/1 var(--mono); color: var(--muted); }
.faq[open] summary::after { content: "\2212"; }
.faq div p { color: var(--muted); margin: 0 0 18px; }

/* ---- Footer ---- */
.site-foot { border-top: 1px solid var(--rule); padding: 48px 0 32px; font-size: 15px; }
.foot-grid { display: grid; gap: 28px; grid-template-columns: 1fr 1fr; }
.foot-grid > div:first-child { grid-column: 1 / -1; }
.site-foot nav { display: grid; gap: 8px; align-content: start; }
.site-foot nav a { color: var(--ink); text-decoration: none; }
.site-foot nav a:hover { text-decoration: underline; }
.site-foot nav .label { margin-bottom: 4px; }
.foot-note { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--rule); }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .foot-grid > div:first-child { grid-column: auto; } }
/* Legal pages (generated by test/website_legal_test.dart) */
.foot-row { display: grid; gap: 14px; }
.foot-row nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* ---- Legal pages ---- */
.legal-page main { padding-top: 40px; padding-bottom: 56px; }
.legal-page h1, .page-delete-account h1 { font-size: clamp(30px, 5vw, 42px); }
.country-pick { display: flex; align-items: center; gap: 12px; margin: 24px 0 8px; padding: 14px 16px; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; }
.country-pick label { font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.country-pick select { font: 600 16px var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px; min-height: 44px; flex: 1; max-width: 280px; }
.legal-country { margin-top: 32px; }
.legal-country[hidden] { display: none; }
.legal-section { padding: 20px 0; border-top: 1px solid var(--rule); }
.legal-section h2 { font-size: 20px; letter-spacing: -0.01em; margin-bottom: 8px; }
.legal-section p, .legal-section li { font-size: 16px; }
.legal-section ul { padding-left: 20px; margin: 0 0 1em; }
.legal-section li { margin-bottom: 6px; }
.steps-list { padding-left: 22px; }
.steps-list li { margin-bottom: 8px; }

/* "Coming soon to Google Play" until launch (build_site.py: PLAY_URL) */
.soon { display: flex; width: fit-content; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--won); background: #E7F0EA; border: 1px solid #BFD6C7; border-radius: 20px; padding: 6px 12px; margin: 0 0 16px; }
.soon .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--won); }
.center .soon { margin-left: auto; margin-right: auto; }
@media (min-width: 900px) { .hero.hero-sm { padding: 64px 0 8px; } }

/* ---- Phone mock-up: real phone proportions (about 9:19.5) ---- */
.hero-visual { max-width: 320px; }
.phone { width: 100%; max-width: 300px; margin: 0 auto; border-radius: 40px; padding: 10px; position: relative; }
.phone::before { content: ""; position: absolute; top: 18px; left: 50%; width: 70px; height: 18px; margin-left: -35px; background: var(--ink); border-radius: 10px; z-index: 2; }
.phone-screen { aspect-ratio: 9 / 19.5; min-height: 0; border-radius: 31px; padding: 40px 12px 14px; overflow: hidden; }
.phone .said { padding: 9px 11px; margin-bottom: 10px; border-radius: 12px 12px 12px 4px; }
.phone .said .label { font-size: 10px; margin-bottom: 4px; }
.phone .said p { font-size: 12.5px; line-height: 1.4; }
.phone .docket { padding: 12px 12px 22px; }
.phone .d-top { font-size: 9.5px; }
.phone .d-job { font-size: 14px; margin: 6px 0 4px; }
.phone .d-lines li { font-size: 12px; padding: 5px 0; gap: 8px; }
.phone .d-desc small { font-size: 10px; }
.phone .zh-sub { font-size: 11px; }
.phone .d-sum { font-size: 11px; }
.phone .d-total { font-size: 12.5px; }
.phone-screen { position: relative; }
.phone-tabs { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: 10px 6px 14px; background: var(--card); border-top: 1px solid var(--rule); font-size: 10px; color: var(--muted); }
.phone-tabs .on { color: var(--ink); font-weight: 700; background: #E9E5DA; border-radius: 10px; padding: 2px 8px; }
.band-ink .soon-ink { margin: 8px auto 0; background: #1F3A2A; border-color: #2E6B45; color: #8FD3A8; }
.band-ink .soon-ink .dot { background: #8FD3A8; }

/* ==== Option A4 (12 Nov 2026): warm tan bands, torn docket edges, red record circle ==== */
:root { --tan: #E6DFCF; --tan-rule: #D3CAB6; }
/* Small red text on tan uses the darker docket red: 4.5:1+ contrast (WCAG AA). */
.sec-tan, .band-tan { background: var(--tan); position: relative; z-index: 1; border: 0; }
.sec-tan .card, .band-tan .card { background: var(--card); border-color: var(--tan-rule); }
.sec-tan .faq { background: var(--card); }
.sec-tan .label.red, .band-tan .label.red { color: var(--red-dark); }
.sec-tan .step-n { color: var(--tan-rule); }
.sec-tan .chip { border-color: var(--tan-rule); }
/* Torn docket edges above and below each tan band (same teeth as the dockets). */
.sec-tan::before, .sec-tan::after, .band-tan::before {
  content: ""; position: absolute; left: 0; right: 0; height: 9px; background: var(--tan); pointer-events: none;
}
.sec-tan::before, .band-tan::before {
  top: -8px;
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
          mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
}
.sec-tan::after {
  bottom: -8px;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
}
.band-tan h2 { color: var(--ink); }
.band-tan .lead { color: var(--muted); }

/* Red "record button" circle behind the hero phone (the app's record button). */
.hero { overflow: hidden; }
.hero-visual { position: relative; }
.hero-visual::before, .hero-visual::after {
  content: ""; position: absolute; left: 50%; top: 47%; border-radius: 50%; transform: translate(-50%, -50%); z-index: 0; pointer-events: none;
}
.hero-visual::before { width: min(150%, 470px); aspect-ratio: 1; background: var(--red); }
.hero-visual::after { width: min(172%, 540px); aspect-ratio: 1; border: 2px solid rgba(200, 50, 30, .22); }
.hero-visual .phone, .hero-visual .d-note { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero-visual::after { animation: pulse 2.6s ease-out infinite; }
  @keyframes pulse { 0% { opacity: .9; transform: translate(-50%, -50%) scale(.92); } 70%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.06); } }
}