/* Bebas Neue (SIL Open Font License), latin subset, inlined so the headline face never swaps in late */
@font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: block; src: url("/assets/fonts/bebas-neue.woff2") format("woff2"); }
/* Layout: a slim checkout header, then an order desk: their built site and the proof on the left, the order form on the right; one column with a sticky pay bar on phones. */
:root {
  color-scheme: dark;
  --ink: #14161B;
  --panel: #1C2535;
  --panel-2: #232D40;
  --line: #2D3849;
  --line-2: #3D4859;
  --text: #FFFFFF;
  --muted: #C5CEDB;
  --dim: #A0ABBD;
  --amber: #FFB000;
  --amber-ink: #000000;
  --amber-wash: rgba(255, 176, 0, .08);
  --amber-text: #FFB000;
  --chip-on: #1F1A0E;
  --stick-bg: rgba(20, 22, 27, .96);
  --bump: #221F19;
  --bump-band: #352C17;
  --ok: #4CD38F;
  --bad: #FF7A6B;
  --display: 'Bebas Neue', Impact, 'Arial Narrow Bold', 'Franklin Gothic Medium', sans-serif;
  --body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --r: 12px;
  --band: #181C24;
  --card: #1C2535;
}
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--text); font: 17px/1.55 var(--body); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
b, strong { font-weight: 700; }
/* header */
.top { border-bottom: 1px solid var(--line); background: var(--ink); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding-block: 8px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand svg { width: 34px; height: 34px; flex: none; }
.brand span { font-family: var(--display); font-size: 26px; letter-spacing: .04em; line-height: 1; padding-top: 3px; }
.top-right { display: flex; align-items: center; gap: 22px; font-size: 14px; color: var(--muted); }
.secure { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--text); }
.secure svg { width: 16px; height: 16px; color: var(--ok); }
.help b { color: var(--text); white-space: nowrap; }
/* steps */
.steps { list-style: none; margin: 0; padding: 22px 0 6px; display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--dim); }
.steps li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.steps li + li::before { content: ""; width: 28px; height: 2px; background: var(--line-2); margin-right: 2px; }
.steps .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line-2); font-weight: 700; font-size: 13px; }
.steps .now { color: var(--text); font-weight: 700; }
.steps .now .n { border-color: var(--amber-text); background: var(--amber); color: var(--amber-ink); }
.steps .done .n { border-color: var(--ok); color: var(--ok); }
.steps .count { display: none; }
/* order desk */
.desk { display: grid; grid-template-columns: minmax(0, 1fr) 456px; grid-template-areas: "intro form" "rest form"; grid-template-rows: auto 1fr; gap: 28px 44px; padding-block: 18px 56px; }
.intro { grid-area: intro; min-width: 0; display: grid; gap: 18px; align-content: start; }
.rest { grid-area: rest; min-width: 0; display: grid; gap: 28px; align-content: start; }
.formcol { grid-area: form; min-width: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-size: 14px; font-weight: 700; color: var(--amber-text); background: var(--amber-wash); border: 1px solid rgba(255, 176, 0, .35); padding: 6px 12px; border-radius: 999px; }
.eyebrow svg { width: 16px; height: 16px; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
h1 { font-family: var(--display); font-size: clamp(46px, 6.2vw, 78px); line-height: .94; letter-spacing: .01em; }
h1 em { font-style: normal; color: var(--amber-text); }
h2 { font-family: var(--display); font-size: clamp(32px, 3.6vw, 42px); line-height: 1; letter-spacing: .015em; }
.lede { margin: 0; font-size: 19px; color: var(--muted); max-width: 40em; }
.lede b { color: var(--text); }
/* their site preview */
.preview { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); background: #fff; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .8); }
.pv-bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.pv-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); flex: none; }
.pv-url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; margin-left: 6px; padding: 5px 10px; border-radius: 8px; background: var(--ink); font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-url svg { width: 12px; height: 12px; flex: none; color: var(--ok); }
.pv-live { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--amber-ink); background: var(--amber); padding: 3px 7px; border-radius: 6px; flex: none; }
.site { color: #0F1B2D; font-family: var(--body); }
.site-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; font-size: 13px; }
.site-logo { font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: 6px; }
.site-logo i { width: 18px; height: 18px; border-radius: 5px; background: #13315C; display: inline-block; }
.site-call { background: #13315C; color: #fff; font-weight: 700; padding: 6px 10px; border-radius: 7px; font-size: 12px; white-space: nowrap; }
.site-hero { position: relative; min-height: 236px; display: grid; align-content: end; padding: 18px 16px; background: #13315C url("/assets/img/sample-site.webp") center/cover no-repeat; color: #fff; }
.site-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 22, 40, .05) 20%, rgba(10, 22, 40, .82) 100%); }
.site-hero > * { position: relative; }
.site-hero strong { font-size: 22px; line-height: 1.15; max-width: 16em; display: block; }
.site-hero span { font-size: 13px; opacity: .92; }
.site-ctas { display: flex; gap: 8px; margin-top: 10px; }
.site-ctas b { font-size: 12px; padding: 7px 10px; border-radius: 7px; background: #fff; color: #13315C; }
.site-ctas b + b { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .7); }
.site-svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px 16px 16px; font-size: 12px; }
.site-svc span { background: #EEF2F7; border-radius: 8px; padding: 8px; font-weight: 700; text-align: center; }
.pv-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: var(--panel-2); border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.linkbtn { background: none; border: 0; padding: 10px 2px; min-height: 44px; color: var(--amber-text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* what you get + anchor */
.gets { display: grid; gap: 14px; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticks li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; }
.ticks svg { width: 22px; height: 22px; color: var(--amber-text); margin-top: 2px; }
.anchor { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.anchor-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); align-items: baseline; }
.anchor-row:last-of-type { border-bottom: 0; background: var(--amber-wash); }
.anchor-row span { color: var(--muted); }
.anchor-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.anchor-row:last-of-type span { color: var(--text); font-weight: 700; }
.anchor-row:last-of-type b { color: var(--amber-text); font-size: 20px; }
.anchor-row:not(:last-of-type) b { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--amber-text); text-decoration-thickness: 2px; }
.src { margin: 0; padding: 8px 16px 12px; font-size: 13px; color: var(--dim); background: var(--amber-wash); }
/* proof */
.proof { display: grid; gap: 14px; }
.proof-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 8px; }
.stars { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.stars i { color: var(--amber-text); font-style: normal; letter-spacing: 2px; font-size: 15px; }
.quotes { display: grid; gap: 12px; }
.quote { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: grid; gap: 12px; }
.quote p { margin: 0; font-size: 17px; }
.quote footer { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.quote footer b { color: var(--text); display: block; font-size: 15px; }
.av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--amber); color: var(--amber-text); font-weight: 800; font-size: 14px; flex: none; }
/* order form */
.order { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: grid; gap: 20px; }
.order-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.order-head h2 { font-size: 34px; }
.order-head span { font-size: 15px; color: var(--muted); white-space: nowrap; }
.order-head span b { color: var(--text); font-size: 18px; }
.sec { display: grid; gap: 12px; }
.sec-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.known { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--ink); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 6px 6px 14px; }
.known div { min-width: 0; font-size: 15px; line-height: 1.35; }
.known div b { display: block; font-size: 16px; }
.known div span { color: var(--muted); }
.ghost { background: transparent; border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 14px; min-height: 44px; font-weight: 700; font-size: 14px; color: var(--text); }
.field { display: grid; gap: 6px; }
.field label { font-size: 14px; font-weight: 700; }
.field input { width: 100%; height: 52px; padding: 0 14px; background: var(--ink); border: 1px solid var(--line); border-radius: var(--r); font-size: 16px; color: var(--text); }
.field input::placeholder { color: #75829A; }
.field input:focus { outline: none; border-color: var(--amber-text); box-shadow: 0 0 0 3px rgba(255, 176, 0, .28); }
.field.err input { border-color: var(--bad); }
.field .msg { font-size: 14px; color: var(--bad); }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.consent { margin: 0; font-size: 13px; line-height: 1.5; color: var(--dim); }
/* the order bump */
.bump { border: 2px dashed var(--amber); border-radius: 16px; background: var(--bump); overflow: hidden; }
.bump-head { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding: 14px 14px 12px 10px; background: var(--bump-band); }
.nudge { width: 30px; height: 30px; color: var(--amber-text); }
@media (prefers-reduced-motion: no-preference) { .nudge { animation: nudge 1.1s ease-in-out infinite; } }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
.yes { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: center; cursor: pointer; min-height: 44px; }
.yes input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.box { width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--amber); background: var(--ink); display: grid; place-items: center; }
.box svg { width: 20px; height: 20px; color: var(--amber-ink); opacity: 0; }
.box i { width: 14px; height: 3px; background: var(--amber-ink); border-radius: 2px; display: none; }
.yes input:checked + .box { background: var(--amber); }
.yes input:checked + .box svg { opacity: 1; }
.yes input:indeterminate + .box { background: var(--amber); }
.yes input:indeterminate + .box i { display: block; }
.yes input:focus-visible + .box { outline: 3px solid var(--text); outline-offset: 3px; }
.yes-text { font-size: 19px; font-weight: 800; line-height: 1.25; }
.yes-text em { font-style: normal; color: var(--amber-text); }
.bump-body { padding: 4px 16px 16px; display: grid; gap: 12px; }
.bump-copy { margin: 0; font-size: 15px; color: var(--muted); }
.bump-copy b { color: var(--text); }
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.chip { position: relative; display: grid; gap: 3px; align-content: start; text-align: left; padding: 10px 10px 9px; min-height: 76px; border-radius: 12px; background: var(--ink); border: 1px solid var(--line-2); color: var(--text); }
.chip svg { width: 20px; height: 20px; color: var(--muted); }
.chip b { font-size: 14px; line-height: 1.2; }
.chip small { font-size: 13px; line-height: 1.25; color: var(--dim); }
.chip .free { display: none; color: var(--amber-text); font-weight: 700; }
.chip .lim { color: var(--muted); font-style: italic; }
.chip[aria-pressed="true"] { border-color: var(--amber-text); background: var(--chip-on); }
.chip[aria-pressed="true"] svg { color: var(--amber-text); }
.chip[aria-pressed="true"] .free { display: block; }
.chip .tick { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--amber); color: var(--amber-ink); display: none; place-items: center; }
.chip .tick svg { width: 13px; height: 13px; color: var(--amber-ink); }
.chip[aria-pressed="true"] .tick { display: grid; }
.tile { position: relative; display: grid; }
.tile .chip { padding-bottom: 52px; }
.whats { position: absolute; left: 1px; right: 1px; bottom: 1px; min-height: 44px; display: flex; align-items: center; gap: 5px; padding: 0 8px; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 11px 11px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; white-space: nowrap; }
.whats span { text-decoration: underline; text-underline-offset: 3px; }
.whats svg { width: 16px; height: 16px; flex: none; }
.whats:hover { color: var(--text); }
.chip[aria-pressed="true"] + .whats { color: var(--amber-text); border-top-color: rgba(255, 176, 0, .3); }
.bump-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; font-size: 14px; color: var(--muted); }
.bump-total { margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
.bump-total b { color: var(--text); }
.bump-total em { font-style: normal; color: var(--amber-text); }
.fine { margin: 0; font-size: 13px; line-height: 1.5; color: var(--dim); }
/* payment */
.tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tab { min-height: 48px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--ink); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.tab[aria-selected="true"] { border-color: var(--amber-text); box-shadow: inset 0 0 0 1px var(--amber); }
.tab svg { width: 18px; height: 18px; }
.wallet-note { margin: 0; padding: 14px; border-radius: var(--r); background: var(--ink); border: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.stripe { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--dim); }
.stripe svg { width: 14px; height: 14px; color: var(--ok); }
/* summary + pay */
.sum { display: grid; gap: 6px; padding: 14px 16px; border-radius: 14px; background: var(--ink); border: 1px solid var(--line); font-size: 15px; }
.sum-row { display: flex; justify-content: space-between; gap: 12px; }
.sum-row span { color: var(--muted); }
.sum-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sum hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; width: 100%; }
.sum .due span, .sum .due b { color: var(--text); font-weight: 800; font-size: 18px; }
.sum .then span { color: var(--text); }
.sum-row span small { display: block; font-size: 13px; color: var(--dim); }
.sum-row s { margin-right: 6px; color: var(--dim); font-weight: 400; text-decoration-color: var(--amber-text); text-decoration-thickness: 2px; }
.sum-note { margin: -2px 0 0; font-size: 14px; color: var(--muted); }
.sum-note b { color: var(--text); }
.sum-head { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.speed { margin: -6px 0 0; display: flex; gap: 8px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--muted); }
.speed svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--amber-text); }
.speed b { color: var(--text); }
.pay { width: 100%; min-height: 66px; border: 0; border-radius: 14px; background: var(--amber); color: var(--amber-ink); font-family: var(--display); font-size: 31px; letter-spacing: .03em; line-height: 1; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 18px 10px; box-shadow: 0 10px 30px -12px rgba(255, 176, 0, .65); }
.pay svg { width: 24px; height: 24px; margin-top: -4px; }
.pay:hover { filter: brightness(1.06); }
.pay[aria-busy="true"] { opacity: .75; cursor: progress; }
.terms { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.terms b { color: var(--text); }
.trust { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--dim); }
.promise { border: 1px solid rgba(76, 211, 143, .45); background: rgba(76, 211, 143, .06); border-radius: 14px; padding: 14px 16px; display: grid; gap: 10px; }
.promise-head { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 16px; }
.promise-head svg { width: 20px; height: 20px; color: var(--ok); flex: none; }
.promise ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.promise li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.promise li svg { width: 16px; height: 16px; color: var(--ok); margin-top: 3px; }
.promise li b { color: var(--text); }
.video { margin: 0; display: grid; gap: 10px; }
.video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; padding: 0; border-radius: 14px; border: 1px solid var(--line-2); background: radial-gradient(120% 90% at 30% 20%, #2A3650 0%, var(--panel) 55%, var(--ink) 100%); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.video-frame .play { width: 72px; height: 72px; border-radius: 50%; background: var(--amber); color: var(--amber-ink); display: grid; place-items: center; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .8); }
.video-frame .play svg { width: 30px; height: 30px; margin-left: 4px; }
.video-len { position: absolute; right: 12px; bottom: 10px; font-size: 13px; font-weight: 700; background: rgba(0, 0, 0, .6); padding: 2px 8px; border-radius: 6px; }
.video figcaption { display: grid; gap: 2px; }
.video figcaption span { color: var(--muted); font-size: 15px; }
.oto-anchor { margin: -6px 0 0; font-size: 14px; line-height: 1.4; color: var(--muted); }
.oto-anchor b { color: var(--text); }
.trust span { display: inline-flex; align-items: center; gap: 6px; }
.trust svg { width: 14px; height: 14px; color: var(--ok); }
.mini-quote { margin: 0; padding: 12px 14px; border-left: 3px solid var(--amber); background: var(--ink); border-radius: 0 10px 10px 0; display: grid; gap: 2px; }
.mini-quote p { margin: 0; font-weight: 700; }
.mini-quote figcaption { font-size: 14px; color: var(--muted); }
.helpline { margin: 0; font-size: 14px; color: var(--muted); text-align: center; }
.helpline b { color: var(--text); white-space: nowrap; }
/* after the desk */
.band { border-top: 1px solid var(--line); padding-block: 48px; }
.band-head { display: grid; gap: 6px; margin-bottom: 22px; }
.band-head p { margin: 0; color: var(--muted); }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 760px; }
.timeline::before { content: ""; position: absolute; top: 9px; left: 12.5%; right: 12.5%; height: 2px; background: var(--line-2); }
.timeline li { position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; padding-top: 30px; text-align: center; }
.timeline li::before { content: ""; position: absolute; top: 1px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--ink); border: 3px solid var(--amber); }
.timeline li:first-child::before { background: var(--amber); }
.timeline .when { font-family: var(--display); font-size: 22px; letter-spacing: .03em; color: var(--amber-text); line-height: 1; }
.timeline b { font-size: 15px; line-height: 1.25; }
.timeline .date { font-size: 13px; color: var(--dim); }
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.faq details { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; min-height: 56px; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 18px; height: 18px; flex: none; color: var(--amber-text); transition: transform .2s; }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details p { margin: 0; padding: 0 16px 16px; color: var(--muted); font-size: 16px; }
.faq details p b { color: var(--text); }
.foot { border-top: 1px solid var(--line); padding-block: 24px; font-size: 13px; color: var(--dim); }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
/* sticky pay bar (phones) */
.stick { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--stick-bg); border-top: 1px solid var(--line); padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); display: none; transform: translateY(0); transition: transform .2s; }
.stick.away { transform: translateY(120%); }
.stick .pay { min-height: 56px; font-size: 26px; }
.stick small { display: block; text-align: center; font-size: 13px; color: var(--muted); margin-top: 6px; }
/* upsell */
.view-pad { padding-block: 18px 64px; }
.banner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(76, 211, 143, .1); border: 1px solid rgba(76, 211, 143, .45); font-size: 16px; }
.banner svg { width: 26px; height: 26px; color: var(--ok); flex: none; }
.banner span { color: var(--muted); }
.banner b { color: var(--text); }
.oto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "copy card" "more card"; grid-template-rows: auto 1fr; gap: 24px 44px; margin-top: 22px; align-items: start; }
.oto-copy { grid-area: copy; display: grid; gap: 16px; align-content: start; }
.oto-more { grid-area: more; display: grid; gap: 18px; align-content: start; }
.oto-card { grid-area: card; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: grid; gap: 18px; }
.oto-price { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.oto-price div:first-child { display: grid; gap: 4px; }
.oto-price b { font-size: 18px; }
.oto-price span { font-size: 15px; color: var(--muted); }
.price-tag { text-align: right; flex: none; }
.price-tag strong { display: block; font-family: var(--display); font-size: 52px; line-height: .9; color: var(--amber-text); font-weight: 400; }
.price-tag small { font-size: 13px; color: var(--muted); }
.ba-wrap { display: grid; gap: 8px; }
.ba { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--ink); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 15px; }
.ba th, .ba td { padding: 9px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.ba tbody tr:last-child th, .ba tbody tr:last-child td { border-bottom: 0; }
.ba thead th { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ba tbody th { font-weight: 600; }
.st { font-size: 12px; font-weight: 800; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.st.bad { color: var(--bad); background: rgba(255, 122, 107, .12); }
.st.ok { color: var(--ok); background: rgba(76, 211, 143, .12); }
.sample { font-size: 13px; color: var(--dim); margin: 0; }
.no { width: 100%; background: transparent; border: 0; min-height: 48px; color: var(--muted); font-size: 16px; text-decoration: underline; text-underline-offset: 3px; }
/* thank-you */
.ty { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 28px 44px; margin-top: 24px; align-items: start; }
.ty-main { display: grid; gap: 18px; min-width: 0; }
.book { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: grid; gap: 16px; }
.day { display: grid; gap: 8px; }
.day > b { font-size: 15px; }
.slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.slot { min-height: 48px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--ink); font-weight: 700; font-size: 15px; }
.slot[aria-pressed="true"] { border-color: var(--amber-text); background: var(--amber); color: var(--amber-ink); }
.booked { display: grid; gap: 10px; }
.side { display: grid; gap: 16px; }
.receipt, .plan { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 20px; display: grid; gap: 10px; }
.plan ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.plan li { display: grid; grid-template-columns: 88px 1fr; gap: 10px; font-size: 15px; }
.plan li > b { font-family: var(--display); font-size: 20px; letter-spacing: .03em; color: var(--amber-text); font-weight: 400; line-height: 1.1; }
.plan li span { color: var(--muted); }
.plan li span b { color: var(--text); font-weight: 700; }
.plan li span em { font-style: normal; color: var(--dim); display: block; font-size: 13px; }
/* how-it-works dialog */
.modal { position: fixed; inset: 0; z-index: 40; background: rgba(8, 10, 14, .78); display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.sheet { width: min(720px, 100%); max-height: 100%; overflow: auto; background: var(--panel); border: 1px solid var(--line-2); border-radius: 18px; }
.sheet-head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px 14px 20px; background: var(--panel); border-bottom: 1px solid var(--line); }
.x { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--ink); display: grid; place-items: center; }
.x svg { width: 20px; height: 20px; }
.how { padding: 18px 20px 22px; display: grid; gap: 14px; border-bottom: 1px solid var(--line); }
.how:last-child { border-bottom: 0; }
.how-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.how-top h3 { font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.how-top h3 svg { width: 22px; height: 22px; color: var(--amber-text); }
.how-top span { color: var(--muted); font-size: 15px; }
.how ul { margin: 0; padding-left: 20px; color: var(--muted); display: grid; gap: 4px; }
.how .vis { background: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 10px; }
.how .when2 { margin: 0; font-size: 14px; color: var(--dim); }
.inc { justify-self: start; min-height: 44px; border-radius: 10px; padding: 8px 14px; font-weight: 700; border: 1px solid var(--line-2); background: var(--ink); }
.inc[aria-pressed="true"] { background: var(--amber); color: var(--amber-ink); border-color: var(--amber-text); }
.sheet.one { width: min(560px, 100%); }
.sheet-head h2 svg { width: 28px; height: 28px; color: var(--amber-text); margin-right: 10px; vertical-align: -4px; }
.how-price { margin: 0; font-size: 17px; color: var(--muted); }
.how-price b { color: var(--amber-text); }
.how-train { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 15px; color: var(--muted); }
.how-train svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--amber-text); }
.how-train b { color: var(--text); }
.inc.act { justify-self: stretch; min-height: 52px; font-size: 17px; background: var(--amber); color: var(--amber-ink); border-color: var(--amber-text); }
.inc.act.out { background: var(--ink); color: var(--text); border-color: var(--line-2); }
.sms { display: grid; gap: 6px; }
.bub { padding: 9px 12px; border-radius: 14px; font-size: 14px; max-width: 86%; line-height: 1.4; }
.bub.in { justify-self: start; background: var(--panel-2); border: 1px solid var(--line-2); }
.bub.out { justify-self: end; background: #2B6BFF; color: #fff; }
.sys { font-size: 12px; color: var(--dim); text-align: center; }
.tapcard { display: grid; gap: 4px; padding: 14px; border-radius: 12px; background: #fff; color: #0F1B2D; max-width: 260px; }
.tapcard b { font-size: 17px; }
.tapcard span { font-size: 12px; color: #4A5568; }
.heat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; max-width: 220px; }
.heat span { aspect-ratio: 1; border-radius: 4px; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #0B0D11; font-variant-numeric: tabular-nums; }
.heat .h { background: #4CD38F; }
.heat .m { background: #FFB000; }
.heat .l { background: #FF7A6B; }
.vis-duo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.gpost, .fpost { background: #fff; color: #0F1B2D; border-radius: 10px; overflow: hidden; font-size: 13px; }
.gpost .ph, .fpost .ph { height: 84px; background: linear-gradient(135deg, #5B7FA6, #2E4A6B); }
.fpost .ph.b { background: linear-gradient(135deg, #8A6E4B, #4E3D29); }
.fpost .ph.c { background: linear-gradient(135deg, #6B8F71, #34503A); }
.gpost p, .fpost p { margin: 0; padding: 8px 10px 10px; line-height: 1.4; }
.gpost small, .fpost small { display: block; padding: 8px 10px 0; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #4A5568; }
.posts3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ad { background: #fff; color: #0F1B2D; border-radius: 10px; padding: 12px 14px; display: grid; gap: 3px; font-size: 13px; }
.ad small { font-weight: 800; font-size: 12px; }
.ad b { color: #1A0DAB; font-size: 17px; font-weight: 500; }
.toast { position: fixed; left: 50%; bottom: 96px; z-index: 50; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); background: #fff; color: #14161B; font-size: 15px; font-weight: 600; padding: 12px 16px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
main { container-type: inline-size; }
@container (max-width: 1020px) {
  .desk { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "form" "rest"; grid-template-rows: auto; }
  .formcol { max-width: 640px; }
  .oto { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "card" "more"; grid-template-rows: auto; }
  .ty { grid-template-columns: minmax(0, 1fr); }
  .oto-card { display: flex; flex-direction: column; }
  .oto-card .ba-wrap { order: 5; }
  .oto-card .helpline { order: 6; }
}
@container (max-width: 640px) {
  .faq { grid-template-columns: minmax(0, 1fr); }
  .timeline .when { font-size: 20px; }
  .timeline b { font-size: 14px; }
  .slot { font-size: 14px; padding: 0 4px; }
  .ba { font-size: 14px; }
  .ba th, .ba td { padding: 8px; }
}
@media (max-width: 1020px) {
  .stick { display: block; }
  .stick:not([hidden]) ~ .foot { padding-bottom: 120px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .top .wrap { min-height: 56px; }
  .brand span { font-size: 19px; white-space: nowrap; }
  .brand svg { width: 30px; height: 30px; }
  .secure { white-space: nowrap; font-size: 13px; }
  .help { display: none; }
  .steps { padding-top: 14px; }
  .steps li:not(.now) { display: none; }
  .steps li + li::before { display: none; }
  .steps .count { display: inline; color: var(--dim); font-weight: 600; }
  .lede { font-size: 17px; }
  .site-hero { min-height: 190px; }
  .site-hero strong { font-size: 19px; }
  .site-svc { grid-template-columns: repeat(3, minmax(0, 1fr)); font-size: 11px; }
  .order { padding: 16px; border-radius: 16px; }
  .order-head h2 { font-size: 30px; }
  .yes-text { font-size: 17px; }
  .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pay { font-size: 27px; }
  .band { padding-block: 36px; }
  .posts3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .posts3 .fpost:nth-child(3) { display: none; }
  .vis-duo { grid-template-columns: minmax(0, 1fr); }
  
  .price-tag strong { font-size: 44px; }
  .anchor-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .oto-card, .book { padding: 16px; }
}

/* ---- themes. dark is the default above. light: white page, navy type. navy: the light page with navy cards (.navy-card) and navy borders (.navy-line). */
[data-theme="light"], [data-theme="navy"] {
  color-scheme: light;
  --ink: #FFFFFF;
  --band: #F4F6F9;
  --card: #FFFFFF;
  --panel: #F4F6F9;
  --panel-2: #E9EDF3;
  --line: #D9DFE8;
  --line-2: #BFC8D5;
  --text: #14161B;
  --muted: #3D4757;
  --dim: #5B6577;
  --amber-text: #4B5563;
  --amber-wash: rgba(255, 176, 0, .14);
  --chip-on: #FFF3D6;
  --stick-bg: rgba(255, 255, 255, .96);
  --bump: #FFF8E6;
  --bump-band: #FFEDBF;
  --ok: #18864F;
  --bad: #C2410C;
}
[data-theme="light"] .field input::placeholder, [data-theme="navy"] .field input::placeholder { color: #6B7587; }
[data-theme="light"] .modal, [data-theme="navy"] .modal { background: rgba(20, 22, 27, .6); }
[data-theme="light"] .toast, [data-theme="navy"] .toast { background: #14161B; color: #fff; }
[data-theme="navy"] .navy-card {
  color-scheme: dark;
  --ink: #141B29;
  --card: #1C2535;
  --panel: #1C2535;
  --panel-2: #232D40;
  --line: #2D3849;
  --line-2: #3D4859;
  --text: #FFFFFF;
  --muted: #C9D1DD;
  --dim: #A3AEC0;
  --amber-text: #FFB000;
  --amber-wash: rgba(255, 176, 0, .1);
  --ok: #4CD38F;
  color: var(--text);
}
[data-theme="navy"] .navy-line { border-color: #1C2535 !important; border-width: 2px !important; border-style: solid; }
/* card colors (Matthew, Oct 22): the dark page gets white cards, the light page gets light navy cards with dark text. .tcard marks a card. */
[data-theme="dark"] .tcard {
  color-scheme: light;
  --ink: #FFFFFF;
  --card: #FFFFFF;
  --panel: #F4F6F9;
  --panel-2: #E9EDF3;
  --line: #D9DFE8;
  --line-2: #BFC8D5;
  --text: #14161B;
  --muted: #3D4757;
  --dim: #5B6577;
  --amber-text: #4B5563;
  --amber-wash: rgba(255, 176, 0, .14);
  --ok: #18864F;
  --bad: #C2410C;
  color: var(--text);
}
[data-theme="dark"] .tcard .field input { background: #F7F8FA; }
[data-theme="light"] .tcard {
  color-scheme: light;
  --ink: #DCE4F0;
  --card: #E4EAF4;
  --panel: #E4EAF4;
  --panel-2: #D7E0EE;
  --line: #C3CEDF;
  --line-2: #A9B7CC;
  --text: #14161B;
  --muted: #3D4757;
  --dim: #556070;
  --amber-text: #4B5563;
  --amber-wash: rgba(255, 176, 0, .14);
  --ok: #18864F;
  --bad: #C2410C;
  color: var(--text);
}
[data-theme="light"] .tcard { border: var(--card-edge-w, 2px) solid var(--card-edge, #4B5563) !important; }
[data-theme="light"] .tcard .field input { background: #FFFFFF; }
[data-theme="light"] .tcard .field input::placeholder { color: #6B7587; }
[data-theme="dark"] .ptable.tcard caption { color: #FFFFFF; }
[data-theme="light"] .ptable.tcard caption { color: #14161B; }

/* ---- palette options (Matthew, Oct 22): three matched light palettes. Each sets the page, the cards and one accent; the amber buttons stay. */
[data-palette="navy"], [data-palette="contrast"], [data-palette="rugged"] {
  --ink: #FFFFFF; --band: #F3F6FA; --line: #D3DCE8; --line-2: #B8C6DA;
  --text: #16213A; --muted: #3B4862; --dim: #5A6782; --amber-text: #1F3A68;
  --card-edge: #B8C6DA; --card-edge-w: 1px;
}
[data-palette="navy"] .tcard, [data-palette="contrast"] .tcard, [data-palette="rugged"] .tcard {
  --ink: #E8EEF6; --card: #E8EEF6; --panel: #E8EEF6; --panel-2: #DCE4F0; --line: #C7D2E2; --line-2: #B8C6DA;
  --text: #16213A; --muted: #3B4862; --dim: #5A6782; --amber-text: #1F3A68;
}
[data-palette="warm"] {
  --ink: #FAF8F4; --band: #F2EEE7; --line: #E2DBCF; --line-2: #CFC6B7;
  --text: #24211C; --muted: #4A453D; --dim: #6B655B; --amber-text: #2F5D50;
  --chip-on: #FFF3D6; --stick-bg: rgba(250, 248, 244, .96);
  --card-edge: #DDD5C8; --card-edge-w: 1px;
}
[data-palette="warm"] .tcard {
  --ink: #FFFFFF; --card: #FFFFFF; --panel: #FFFFFF; --panel-2: #F6F2EC; --line: #E7E0D5; --line-2: #D6CDBF;
  --text: #24211C; --muted: #4A453D; --dim: #6B655B; --amber-text: #2F5D50;
}
[data-palette="jobsite"] {
  --ink: #FFFFFF; --band: #F4F4F1; --line: #DADAD4; --line-2: #BDBDB5;
  --text: #111111; --muted: #3A3A3A; --dim: #5E5E5E; --amber-text: #111111;
  --card-edge: #CFCFC8; --card-edge-w: 1px;
}
[data-palette="jobsite"] .tcard {
  --ink: #F7F7F4; --card: #F7F7F4; --panel: #F7F7F4; --panel-2: #EDEDE8; --line: #DFDFD9; --line-2: #CFCFC8;
  --text: #111111; --muted: #3A3A3A; --dim: #5E5E5E; --amber-text: #111111;
}
[data-palette="jobsite"] .eyebrow, [data-palette="jobsite"] .kicker { color: #111111; }
[data-palette="jobsite"] h1 em { color: #111111; background: linear-gradient(transparent 58%, #FFB000 58%, #FFB000 92%, transparent 92%); }