/* The order page (book/quote.html), laid out like Scoops Co.'s quote (founder
   2026-10-13: "scoops co booking flow is perfect", "designed beautifully",
   "needs to be like that"): a white page, one centered column (588px at
   most), a progress bar across the top that fills page by page, the question
   with a "Step N of 9" tag beside it, big tiles, then Back and Next. Nine
   pages, one entry each: Size, Where, Day, Time, Name, Phone, Email, Address,
   Pay. In Novah's design language (founder 2026-10-13: "copy the entire
   design scheme"): Google Sans, a near black and a warm white, pill buttons. Every text at least 16px, every tap target at least 48 by 48. */

*, *::before, *::after { box-sizing: border-box; }
@font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/google-sans.woff2) format('woff2'); }
:root {
  --font: 'Google Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ink:    #0C0B09;
  --ink-2:  #34322F;
  --muted:  #5E5B57;   /* 6.5:1 on the warm white */
  --accent: #0C0B09;   /* the one accent is the near black (Novah has no color; founder 2026-10-15: no yellow) */
  --accent-50: #F1EEE8;
  --page:   #FBF9F5;
  --card:   #FFFFFF;
  --soft:   #F1EEE8;
  --line:   #E6E0D4;
  --line-2: #D3CCBD;
  --line-3: #857F72;   /* field borders: 4.0:1 on white (3:1 needed) */
  --focus:  #0B6BCB;
  --err:    #B42318;
  --ok:     #146C43;
  --gutter: 16px;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--page); color: var(--ink-2);
  font: 400 16px/1.55 var(--font);
}
a { color: var(--ink); }
img { max-width: 100%; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 300; display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 10px; background: var(--card); color: var(--ink); font-weight: 700; }
.skip:focus { top: 12px; }

/* ── header: the logo and a call button, nothing to wander off through ── */
.o-header { background: var(--ink); }
.o-header-in { max-width: 1080px; margin: 0 auto; padding: 8px var(--gutter); min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.o-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; color: #fff; text-decoration: none; font: 600 19px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; }
.o-mark { display: none; }
.o-brand { font-weight: 400; color: rgba(255,255,255,.72); }
.o-brand .wm-strong { font-weight: 700; color: #fff; }
.o-head-call { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 48px; min-height: 48px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); color: #fff; text-decoration: none; font-weight: 700; }
.o-head-call svg { width: 20px; height: 20px; }
.o-head-num { display: none; }
@media (min-width: 560px) { .o-head-num { display: inline; } }

/* ── the column ── */
.o-main { padding: 20px var(--gutter) 40px; }
.o-shell { max-width: 588px; margin: 0 auto; }
@media (min-width: 900px) { .o-main { padding-top: 48px; } }

/* ── the progress bar: one bar that fills as the pages go by ── */
/* It slides to the page on screen and pulses gently (founder: "dynamic and pulsing"):
   a glow that breathes and a light that sweeps along it. None with reduced motion. */
.o-progress { height: 10px; margin: 0 0 28px; border-radius: 999px; background: #EEEAE1; }
.o-progress span { position: relative; display: block; height: 100%; width: 25%; border-radius: 999px; overflow: hidden; background: var(--ink); transition: width .5s cubic-bezier(.2,.8,.2,1); animation: o-pulse 4.5s ease-in-out infinite; }
.o-progress span::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transform: translateX(-100%); animation: o-sweep 6s ease-in-out infinite; }
@keyframes o-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(12,11,9,0); } 50% { box-shadow: 0 0 10px 1px rgba(12,11,9,.35); } }
@keyframes o-sweep { 0%, 35% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }

/* ── a page: the question, its step tag, then the answer ── */
.o-form { min-width: 0; }
.o-sec { min-width: 0; }
.o-sec.is-fwd, .o-sec.is-back { animation: o-fade .25s ease; }
@keyframes o-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.o-sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.o-sec-head .o-pill { order: 2; }
.o-sec h2 { margin: 0; flex: 1; min-width: 0; font: 600 clamp(26px, 4vw, 34px)/1.12 var(--font); letter-spacing: -.035em; color: var(--ink); }
.o-sec h2 label { display: block; }
/* A page's heading takes the focus only so a screen reader starts there; it is not
   something to tap, so it shows no ring. */
.o-sec h2:focus, .o-sec h2:focus-visible { outline: none; }
.o-pill { flex: none; display: inline-flex; align-items: center; height: 28px; margin: 2px 0 0; padding: 0 12px; border-radius: 999px; background: #F1EDE3; color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.o-sec-body { margin-top: 8px; }
.o-help { margin: 0 0 16px; color: var(--muted); }
/* A label over a part of a page (Pick a day, Arrival time, Payment): small spaced capitals. */
.o-sub { margin: 24px 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.o-sec-body > .o-sub:first-child { margin-top: 12px; }
.o-msg { margin: 12px 0 0; font-size: 16px; }
.o-msg:empty { display: none; }
.o-msg.is-ok { color: var(--ok); font-weight: 600; }
.o-msg.is-err { color: var(--err); font-weight: 600; }
.o-hint { margin: 8px 0 0; color: var(--muted); font-size: 16px; }
.o-hint:empty { display: none; }
.o-more { margin: 16px 0 0; color: var(--muted); }
/* Links inside running text: a 48px tall target without opening up the line. */
.o-more a, .o-far p a, .o-msg a { display: inline-block; padding: 13px 2px; margin: -13px 0; font-weight: 700; color: var(--ink); }
.o-change { flex: none; min-height: 48px; min-width: 48px; padding: 0 10px; border: 0; background: none; color: var(--ink); font: 700 16px/1 var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ── 1. the sizes: one clean list (founder 2026-10-13: "way too visually ugly too much
   going on"). Each row: a circle that fills when picked, the size and what fits,
   the price on the right. No photos and no "+ travel" here (the line above says it
   once). The card markup is shared with the homepage (ruling R1); this page styles
   its own. ── */
.size-list { display: grid; gap: 10px; }
.size-card {
  position: relative; width: 100%; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 16px;
  min-height: 72px; padding: 14px 18px; text-align: left; cursor: pointer;
  background: var(--card); color: inherit; border: 1.5px solid var(--line); border-radius: 16px;
  transition: border-color .15s, background .15s;
}
.size-card:hover { border-color: var(--line-2); }
.size-card::before { content: ''; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-3); background: var(--card); box-sizing: border-box; transition: border-color .15s, box-shadow .15s; }
.size-photo { display: none; }
.size-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name cost" "note note"; align-items: baseline; gap: 2px 16px; min-width: 0; }
.size-name { grid-area: name; font: 600 18px/1.25 var(--font); color: var(--ink); }
.size-note { grid-area: note; font-size: 16px; line-height: 1.4; color: var(--muted); }
.size-cost { grid-area: cost; display: block; }
.size-price { font: 600 19px/1.2 var(--font); color: var(--ink); letter-spacing: -.01em; }
.size-travel { display: none; }
.size-card[aria-pressed="true"] { border-color: var(--ink); background: var(--soft); }
.size-card[aria-pressed="true"]::before { border-color: var(--ink); box-shadow: inset 0 0 0 5px var(--card), inset 0 0 0 12px var(--ink); }

/* "Not sure? Send photos" under the tiles (js/photo-quote.js builds the parts) */
.o-photos { margin: 16px 0 0; }
.pq-photo { display: grid; gap: 10px; }
.pq-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.pq-snap { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 14px 6px 6px; border-radius: 999px; background: none; border: 1px solid var(--line-2); color: var(--ink); cursor: pointer; }
.pq-snap:hover { border-color: var(--line-3); }
.pq-snap:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.pq-cam { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--ink); color: #fff; }
.pq-snap-words { display: grid; gap: 1px; line-height: 1.3; }
.pq-snap-words strong { font: 700 17px/1.2 var(--font); }
.pq-snap-words small { font-size: 16px; color: var(--muted); }
.pq-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.pq-thumbs:empty { display: none; }
.pq-thumb { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: #ddd; }
.pq-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pq-thumb.is-busy::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.55); }
.pq-ai { margin: 0; font-size: 16px; color: var(--ink-2); }
.pq-ai:empty { display: none; }
.pq-ai.is-busy { font-weight: 700; }
.pq-ai.is-done { padding: 10px 12px; border-radius: 12px; background: var(--soft); border-left: 4px solid var(--ok); }
.pq-ai.is-err { padding: 10px 12px; border-radius: 12px; background: var(--soft); border-left: 4px solid #D9822B; }
a.pq-snap { color: var(--ink); text-decoration: none; }

/* ── boxes (ZIP, name, phone, email, address) ── */
.o-field label { display: block; margin-bottom: 6px; font-weight: 700; color: var(--ink); font-size: 16px; }
.o-opt { font-weight: 400; color: var(--muted); }
.o-field input, .o-field textarea, .o-far input {
  width: 100%; min-height: 54px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--ink-2);
  background: var(--card); border: 1.5px solid var(--line-2); border-radius: 12px; transition: border-color .15s, box-shadow .15s;
}
.o-field textarea { padding: 12px 14px; min-height: 96px; resize: vertical; }
.o-field input::placeholder, .o-field textarea::placeholder, .o-far input::placeholder { color: #6E7278; }
.o-field input:focus, .o-field textarea:focus, .o-far input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(21,23,26,.14); }
.o-field input[aria-invalid="true"], .o-far input[aria-invalid="true"] { border-color: var(--err); box-shadow: 0 0 0 3px rgba(180,35,24,.12); }
.o-fields { display: grid; gap: 16px; }
.o-field-zip input { max-width: 220px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.o-err { margin: 6px 0 0; color: var(--err); font-weight: 600; font-size: 16px; }
.o-err:empty { display: none; }
.o-f-unit { margin-top: 16px; }
.o-link { display: inline-flex; align-items: center; min-height: 48px; min-width: 48px; margin-top: 6px; padding: 0 2px; background: none; border: 0; color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.o-notes { margin-top: 4px; }
.o-far { margin-top: 16px; padding: 14px; border-radius: 14px; background: var(--soft); border: 1px dashed var(--line-2); }
.o-far p { margin: 0 0 10px; }
.o-far a { font-weight: 700; }
.o-far-row { display: grid; gap: 8px; }
.o-btn-dark { min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; cursor: pointer; }
.o-btn-dark[disabled] { opacity: .55; cursor: default; }
@media (min-width: 480px) { .o-far-row { grid-template-columns: 1fr auto; } }

/* ── 2. when: day tiles, then the times of the day picked; full ones greyed ── */
/* The next nine open days, three to a row. */
.o-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.o-wins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.o-day, .o-win {
  min-height: 64px; min-width: 48px; padding: 8px 4px; cursor: pointer; text-align: center;
  background: var(--card); color: var(--ink); border: 1.5px solid var(--line); border-radius: 14px; line-height: 1.2;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.o-day { display: grid; place-content: center; gap: 2px; min-height: 72px; }
.o-day-wd { font-size: 17px; }
.o-day-wd { font-weight: 700; }
.o-day-md { color: var(--muted); }
.o-win { display: grid; place-content: center; gap: 2px; min-height: 72px; font-weight: 700; font-size: 17px; }
.o-win-full { font-weight: 600; color: var(--muted); }
.o-day:hover, .o-win:hover { border-color: var(--line-2); box-shadow: 0 6px 18px rgba(21,23,26,.07); }
.o-day[aria-pressed="true"], .o-win[aria-pressed="true"] { border-color: var(--ink); background: linear-gradient(180deg, var(--accent-50), #fff); box-shadow: 0 0 0 1px var(--ink); }
.o-day.full, .o-win.full { background: #F3F0E9; border-style: dashed; color: #5F636A; cursor: not-allowed; box-shadow: none; }
.o-day.full .o-day-md { color: #5F636A; font-weight: 700; }
html.show-guesses .o-win.full .guess { color: #8C2A22; }
.o-wins-box { margin-top: 28px; }
.o-wins-box .o-sub { margin-top: 0; }
.o-wins-box .o-help { margin-bottom: 12px; }

/* ── 4. checkout: your price (Scoops Co.'s summary cards), then the payment ── */
.o-qcard { margin-top: 16px; padding: 20px 20px 6px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg, #F7F4EC, #fff 70%); box-shadow: 0 10px 30px -18px rgba(21,23,26,.35); }
.o-qcard + .o-qcard { margin-top: 14px; }
.o-qcard-k { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.o-qcard-sub { margin: 2px 0 0; color: var(--muted); }
.o-qprice { margin: 6px 0 0; padding-bottom: 16px; border-bottom: 1px solid var(--line); font: 700 40px/1.1 var(--font); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.o-qrows { margin: 0; }
.o-qrows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.o-qrows > div:last-child { border-bottom: 0; }
.o-qrows dt { color: var(--muted); }
.o-qrows dd { margin: 0; color: var(--ink); font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.o-qcard-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -10px 0 0; font-weight: 600; color: var(--muted); }
.o-pay-sub { margin-top: 32px; }

/* ── payment: the rule, the box and the card ── */
.o-rule { padding: 16px 18px; border-radius: 16px; background: var(--soft); border: 1px solid var(--line); }
.o-rule p { margin: 0; }
.o-rule p + p { margin-top: 8px; }
.o-closed { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--soft); border: 1px solid var(--line); }
.o-reserved { margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: #EAF5EE; border-left: 5px solid var(--ok); }
.o-reserved:focus { outline: none; }
.o-reserved p { margin: 0; }
.o-reserved-h { font: 700 20px/1.2 var(--font); color: var(--ink); margin-bottom: 4px !important; }
.o-msg.is-note { padding: 12px 14px; border-radius: 12px; background: var(--accent-50); border-left: 5px solid var(--ink); color: var(--ink); font-weight: 700; }
.o-paybox { margin-top: 14px; }
.o-consent {
  display: flex; align-items: flex-start; gap: 12px; min-height: 48px; padding: 12px 14px; cursor: pointer;
  background: var(--card); border: 1.5px solid var(--line-2); border-radius: 14px; color: var(--ink); font-weight: 600;
  transition: border-color .15s, background .15s;
}
.o-consent input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.o-consent:has(input:checked) { border-color: var(--ink); background: var(--accent-50); }
.o-consent.is-invalid { border-color: var(--err); box-shadow: 0 0 0 3px rgba(180,35,24,.12); }
.o-consent a, .o-pay-help a { display: inline-block; padding: 13px 0; margin: -13px 0; font-weight: 700; color: var(--ink); }
.o-wallet { margin-top: 16px; }
.o-express { min-height: 48px; }
.o-or { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: var(--muted); }
.o-or::before, .o-or::after { content: ''; flex: 1; height: 1px; background: var(--line-2); }
.o-wallet[hidden] + .o-card-box { margin-top: 16px; }
.o-card-box { padding: 14px; border-radius: 16px; background: var(--soft); border: 1.5px solid var(--line-2); }
.o-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin: 0 0 10px; }
.o-card-t { font-weight: 800; color: var(--ink); }
.o-secure { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.o-secure svg { width: 18px; height: 18px; flex: none; }
.o-card { min-height: 48px; }
.o-pay-help { margin: 14px 0 0; color: var(--muted); }

/* ── Back and Next under every page; Book in Next's place on the last ── */
.o-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; }
.o-btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 56px; padding: 0 20px; border-radius: 999px; cursor: pointer; font: 700 17px/1.1 var(--font); transition: background .15s, opacity .15s, box-shadow .15s; }
.o-btn-ghost { background: var(--soft); color: var(--ink); border: 1px solid var(--line); }
.o-btn-ghost:hover { border-color: var(--line-2); }
.o-btn-ghost:disabled { background: #FAF8F3; color: #8A877F; cursor: default; }
.o-btn-primary { background: var(--ink); color: #fff; border: 0; box-shadow: 0 6px 16px rgba(21,23,26,.18); }
.o-btn-primary:hover { background: var(--ink-2); }
/* Next stays tappable before the page is answered (it says what is missing), dimmed. */
.o-btn-primary[aria-disabled="true"] { opacity: .45; box-shadow: none; }
.o-book { background: var(--ink); color: #fff; }
.o-book:hover { background: var(--ink-2); }
html.show-guesses .o-book .guess { color: #FF9C94; }
.o-book.is-done { background: #DDEFE3; color: var(--ok); box-shadow: none; }
#o-book[aria-busy="true"] { cursor: progress; }

/* ── footer ── */
.o-foot { padding: 18px var(--gutter) 28px; text-align: center; color: var(--muted); font-size: 16px; }
.o-foot p { margin: 0; }
.o-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 16px; }
.o-foot a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 48px; padding: 0 4px; color: var(--muted); text-underline-offset: 2px; }

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

/* ── The short page heading the request form (book/request.html) uses: the trail, a big
   heading, a line under it, and the thanks heading. ── */
.ph .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 4px; padding: 0; font-size: 16px; }
.ph .crumbs a { display: inline-flex; align-items: center; min-height: 48px; color: var(--muted); text-decoration: none; }
.ph .crumbs a:hover { color: var(--ink); }
.ph .crumbs-sep { margin: 0 8px; color: var(--muted); }
.ph .crumbs [aria-current] { color: var(--ink); }
.ph-title { margin: 0; font: 600 clamp(32px, 6vw, 48px)/1.05 var(--font); letter-spacing: -.04em; color: var(--ink); }
.ph-lede { margin: 12px 0 24px; font-size: 17px; color: var(--muted); }
.ph-size { margin: 0; font: 600 26px/1.15 var(--font); letter-spacing: -.02em; color: var(--ink); }

/* ── The pickup request form (book/request.html, js/request.js): the booking's fields,
   one column, Send my request; then the thanks. ── */
.rq-opt { font-weight: 400; color: var(--muted); }
.rq-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rq .o-field textarea { width: 100%; }
.rq-send { width: 100%; margin-top: 16px; }
.rq-done { margin-top: 8px; padding: 20px; border-radius: 16px; background: var(--soft); border: 1.5px solid var(--ink); }
.rq-done p { margin: 8px 0 16px; }
.rq-done h2:focus { outline: none; }
.rq-home { text-decoration: none; }


/* ── 1. Your home: the homepage calculator's choices (css/home.css .pc-*, copied, every text
   16px and every tap 48px here). The tokens home.css uses, for this block only. ── */
.o-home { --rg: #0C0B09; --tx: #0C0B09; --txm: rgba(12,11,9,.66); --bdr: rgba(12,11,9,.12); --surf: #F1EEE8; --r-pill: 999px;
  padding: 20px 16px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
@media (min-width: 560px) { .o-home { padding: 24px; } }
.o-home .pc-tabs { background: var(--soft); }
.o-home .pc-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.o-home .pc-freq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.o-home .pc-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; margin-bottom: 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--bdr); }
@media (min-width: 760px) { .pc-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.o-home .pc-tabs label { display: block; cursor: pointer; }
.o-home .pc-tabs input, .pc-freq input, .pc-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.o-home .pc-tabs span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 10px; font-size: 16px; font-weight: 600; color: var(--txm); transition: background .25s, color .25s; }
.o-home .pc-tabs svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.o-home .pc-tabs input:checked + span { background: var(--rg); color: #fff; }
.o-home .pc-tabs input:focus-visible + span, .pc-freq input:focus-visible + span, .pc-chip input:focus-visible + span { outline: 2px solid var(--rg); outline-offset: 2px; }
.o-home .pc-left { padding: clamp(22px, 2.6vw, 32px); counter-reset: pc; }
.o-home .pc-sec { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--bdr); }
.o-home .pc-sec:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.o-home .pc-sec[hidden] { display: none; }
.o-home .pc-l { margin: 0 0 14px; font: 600 12px/1.4 var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--tx); }
.o-home .pc-n::before { counter-increment: pc; content: "0" counter(pc); margin-right: 10px; font-weight: 400; color: var(--txm); }
.o-home .pc-size { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.o-home .pc-big { margin: 0; font: 600 clamp(44px, 5vw, 56px)/1 var(--font); letter-spacing: -.045em; }
.o-home .pc-big span { margin-left: 8px; font: 500 15px/1 var(--font); letter-spacing: 0; color: var(--txm); }
.o-home .pc-time { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--bdr); background: var(--surf); font-size: 14px; font-weight: 500; }
.o-home .pc-time svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.o-home .pc-range { width: 100%; height: 48px; margin: 8px 0 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.o-home .pc-range::-webkit-slider-runnable-track { height: 2px; background: var(--rg); border-radius: 2px; }
.o-home .pc-range::-moz-range-track { height: 2px; background: var(--rg); }
.o-home .pc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -14px; border-radius: 50%; background: var(--rg); border: 0; }
.o-home .pc-range::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: var(--rg); border: 0; }
.o-home .pc-range:focus-visible { outline: 2px solid var(--rg); outline-offset: 4px; }
.o-home .pc-ticks { display: flex; justify-content: space-between; font-size: 14px; color: var(--txm); }
.o-home .pc-counts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 18px; }
.o-home .pc-count { display: flex; align-items: center; gap: 10px; }
.o-home .pc-count[hidden] { display: none; }
.o-home .pc-count-l { min-width: 92px; font-size: 16px; font-weight: 500; color: var(--txm); }
.o-home .pc-count button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--bdr); background: var(--card); color: var(--tx); font: 500 20px/1 var(--font); cursor: pointer; transition: border-color .2s; }
.o-home .pc-count button:hover { border-color: var(--rg); }
.o-home .pc-count output { min-width: 46px; font-size: 17px; font-weight: 600; text-align: center; }
.o-home .pc-freq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 760px) { .pc-freq { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.o-home .pc-freq label { display: block; cursor: pointer; }
.o-home .pc-freq label[hidden] { display: none; }
.o-home .pc-freq span { position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 76px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--bdr); background: var(--card); transition: background .25s, color .25s, border-color .25s; }
.o-home .pc-freq b { font-size: 16px; font-weight: 600; line-height: 1.25; }
.o-home .pc-freq em { font-style: normal; font-weight: 500; }
.o-home .pc-freq small { font-size: 14px; color: var(--txm); }
.o-home .pc-freq input:checked + span { background: var(--rg); border-color: var(--rg); color: #fff; box-shadow: 0 10px 24px -12px rgba(12,11,9,.5); }
.o-home .pc-freq input:checked + span small { color: rgba(255,255,255,.7); }
.o-home .pc-freq input:checked + span::after { content: ""; position: absolute; top: 9px; right: 9px; width: 14px; height: 14px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 9px no-repeat; }
.o-home .pc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.o-home .pc-chips + .pc-chips { margin-top: 10px; }
.o-home .pc-chip { display: block; cursor: pointer; }
.o-home .pc-chip[hidden] { display: none; }
.o-home .pc-chip span { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--bdr); background: var(--card); font-size: 16px; font-weight: 600; transition: background .25s, color .25s, border-color .25s; }
.o-home .pc-chip i { font-style: normal; font-weight: 500; color: var(--txm); }
.o-home .pc-chip input:checked + span { background: var(--rg); border-color: var(--rg); color: #fff; }
.o-home .pc-chip input:checked + span i { color: rgba(255,255,255,.7); }

/* The live price under the choices, and "call us" past the slider's top. */
.o-hprice { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 14px 0 0; padding: 16px 18px; border-radius: 16px; background: var(--ink); color: #fff; }
.o-hprice-k { margin: 0; font: 600 13px/1.4 var(--font); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.o-hprice-v { margin: 0; font: 600 34px/1 var(--font); letter-spacing: -.03em; color: #FBF9F5; }
.o-hprice-v small { font-size: .5em; }
.o-hprice-r { flex-basis: 100%; margin: 0; font-size: 16px; color: rgba(255,255,255,.7); }
html.show-guesses .o-hprice .guess { color: #FF8A80; }
.o-hcall { margin: 14px 0 0; padding: 14px 16px; border-radius: 14px; background: var(--soft); border: 1px solid var(--line); color: var(--ink); }