/* myfuelsavings.com: the marketing site's one stylesheet (#275).
   Colors are the app's v3 "Slate Lift" tokens, copied from web/tokens.css, which is the
   authority: when a token moves there, move it here. Every color keeps its app role (lime
   is savings and the CTA, gold is rates, blue is volume, orange lives only in the mark).
   Shared by the homepage, the 404 page and the contact pages the form handler renders. */
:root {
  --navy-bg:#111F33; --navy-rgb:17,31,51;
  --panel:#182C47; --panel-2:#1F3757; --panel-border:#2F4A6B; --control-border:#7A8799;
  --green:#A6E22E; --green-bright:#BCF24E; --green-deep:#7BAE22;
  --blue:#6DB7FF; --gold:#E6B33E; --orange:#FF8A42; --red:#EA5A3E; --red-text:#F27C66;
  --text:#EDF1F6; --text-soft:#C7D0DC; --dim:#A8B0BC; --dim-2:#96A0AE;
  --font-display:'Anton',Impact,sans-serif;
  --font-label:'Oswald','Arial Narrow',sans-serif;
  --font-body:'Public Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',Menlo,monospace;
  --radius:12px; --radius-sm:8px;
  --pad-x:clamp(16px,5vw,48px);
  --measure:62ch;
}
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; background:var(--navy-bg); color:var(--text); font-family:var(--font-body); font-size:17px; line-height:1.6; overflow-x:hidden; }
img { display:block; max-width:100%; height:auto; }
h1,h2,h3 { margin:0; text-wrap:balance; }
p { margin:0; text-wrap:pretty; }
a { color:var(--green); text-underline-offset:3px; }
a:hover { color:var(--green-bright); }
:focus-visible { outline:3px solid var(--text); outline-offset:3px; border-radius:4px; }
::selection { background:var(--green); color:var(--navy-bg); }
.wrap { max-width:1200px; margin:0 auto; padding-left:var(--pad-x); padding-right:var(--pad-x); }
.visually-hidden { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip { position:absolute; left:12px; top:-60px; z-index:50; background:var(--green); color:var(--navy-bg); padding:10px 16px; border-radius:var(--radius-sm); font-family:var(--font-label); font-weight:600; text-decoration:none; }
.skip:focus { top:12px; }

/* Mark + wordmark, verbatim from the brand book. */
.lockup { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); min-height:44px; }
.lockup svg { width:36px; height:36px; flex:none; }
.brand-name { font-family:var(--font-display); font-weight:400; font-size:25px; line-height:1; letter-spacing:0; }
.brand-name .f { color:#FF8A42; } .brand-name .s { color:#A6E22E; }

/* Buttons: brief §5, 8px radius held throughout. */
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; font-family:var(--font-label); font-weight:600; text-transform:uppercase; letter-spacing:.6px; font-size:16px; line-height:1.2; padding:12px 26px; border-radius:var(--radius-sm); text-decoration:none; border:1px solid transparent; transition:background-color 160ms ease,color 160ms ease; }
.btn-primary { background:var(--green); color:var(--navy-bg); }
.btn-primary:hover { background:var(--green-bright); color:var(--navy-bg); }
.btn-secondary { background:transparent; color:var(--green); border-color:var(--green); }
.btn-secondary:hover { background:var(--green); color:var(--navy-bg); }
.btn-quiet { min-height:44px; padding:10px 16px; font-size:15px; color:var(--text); background:transparent; border-color:var(--control-border); }
.btn-quiet:hover { color:var(--navy-bg); background:var(--text); border-color:var(--text); }

/* Figures */
.fig { margin:0; }
.fig figcaption { font-size:14px; color:var(--dim); margin-top:12px; line-height:1.5; max-width:70ch; }
.shot { border-radius:var(--radius); border:1px solid var(--panel-border); box-shadow:0 24px 60px rgba(0,0,0,.45); background:var(--panel); }

/* A phone cut off below its useful part: the screen fades out rather than showing an empty
   bottom half. Honest cropping of a real capture, not a redrawn screen. */
.phone.cut { border-bottom:0; border-radius:34px 34px 0 0; box-shadow:0 0 0 1px var(--panel-border); aspect-ratio:390/460; -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%); mask-image:linear-gradient(180deg,#000 70%,transparent 100%); }
.phone.cut img { width:100%; height:100%; object-fit:cover; object-position:top; }

/* Offer line: the one commercial sentence, identical everywhere it appears. */
.offer { font-size:16px; color:var(--text-soft); }
.offer strong { color:var(--text); font-weight:600; }

/* FAQ: native details/summary, no script. */
.faq { border-top:1px solid var(--panel-border); }
.faq details { border-bottom:1px solid var(--panel-border); }
.faq summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center; padding:18px 2px; min-height:56px; font-weight:600; font-size:18px; color:var(--text); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:""; flex:none; width:12px; height:12px; border-right:2px solid var(--green); border-bottom:2px solid var(--green); transform:rotate(45deg) translate(-3px,-3px); transition:transform 160ms ease; }
.faq details[open] summary::after { transform:rotate(225deg) translate(-3px,-3px); }
.faq .a { padding:0 2px 20px; color:var(--text-soft); max-width:var(--measure); }
.faq .a p + p { margin-top:10px; }

/* Contact form */
.form { display:grid; gap:18px; max-width:560px; }
.field { display:grid; gap:6px; }
.field label, .field legend { font-weight:600; font-size:15px; color:var(--text); }
.field .hint { font-size:14px; color:var(--dim); }
.field input[type=text], .field input[type=email], .field textarea { width:100%; font:inherit; font-size:16px; color:var(--text); background:rgba(var(--navy-rgb),.6); border:1px solid var(--control-border); border-radius:var(--radius-sm); padding:12px 14px; min-height:48px; }
.field textarea { min-height:150px; resize:vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline:3px solid var(--green); outline-offset:1px; }
fieldset.field { border:0; padding:0; margin:0; }
.choices { display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.choice { position:relative; }
.choice input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.choice span { display:inline-flex; align-items:center; min-height:44px; padding:10px 16px; border:1px solid var(--control-border); border-radius:999px; color:var(--text-soft); font-size:15px; }
.choice input:checked + span { background:var(--green); border-color:var(--green); color:var(--navy-bg); font-weight:600; }
.choice input:focus-visible + span { outline:3px solid var(--text); outline-offset:3px; }
.hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.form .fine { font-size:14px; color:var(--dim); }

/* Footer: the standard three tiers. The brand and a line on what the product is sit beside
   three link columns; the fine print runs in two balanced columns under a rule; the
   copyright closes it. Every page carries the same footer (the homepage adds the EIA note),
   and test/web/apex-page.test.ts holds the static pages and the contact function's pages to
   one copy. The band is the ticker's ink, so the page opens and closes on the same floor. */
.site-foot { background:#0B1626; border-top:1px solid var(--panel-border); padding:56px 0 28px; margin-top:0; }
.foot-top { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); gap:36px 64px; align-items:start; }
.foot-brand p { color:var(--text-soft); font-size:15px; margin-top:10px; max-width:30ch; }
.foot-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 32px; }
.foot-head { font-family:var(--font-label); font-weight:500; font-size:14px; line-height:1.3; letter-spacing:.6px; text-transform:uppercase; color:var(--text); max-width:none; }
.foot-nav ul { list-style:none; margin:10px 0 0; padding:0; }
.foot-nav a { display:inline-flex; align-items:center; min-height:36px; color:var(--text-soft); text-decoration:none; font-size:15px; }
.foot-nav a:hover { color:var(--text); text-decoration:underline; }
.foot-fine { margin-top:44px; padding-top:28px; border-top:1px solid var(--panel-border); columns:2 380px; column-gap:56px; }
.foot-fine p { break-inside:avoid; font-size:13px; line-height:1.7; color:var(--dim-2); margin:0 0 14px; }
.foot-bottom { margin-top:14px; padding-top:20px; border-top:1px solid var(--panel-border); display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 24px; }
.foot-bottom p { font-size:13px; color:var(--dim-2); }
@media (max-width: 900px) { .foot-top { grid-template-columns:minmax(0,1fr); } }
@media (max-width: 600px) { .foot-nav { grid-template-columns:repeat(2,minmax(0,1fr)); } }

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

/* Store badges: Apple's and Google's own artwork, unmodified. Apple asks for its badge
   first and at least 40 px tall onscreen; Google's PNG carries its own clear space, so it
   is drawn taller to match the visible height. */
.badges { display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; }
.badges a { display:inline-flex; align-items:center; min-height:44px; border-radius:8px; }
.badges .apple { height:44px; width:auto; }
.badges .google { height:65px; width:auto; margin:-10px -10px; }


/* ─────────── Homepage ─────────── */
  /* ── header ── */
  .top { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:14px; padding-bottom:14px; }
  .nav { display:flex; align-items:center; gap:6px; }
  .nav a.link { display:inline-flex; align-items:center; min-height:44px; padding:0 12px; color:var(--text-soft); text-decoration:none; font-size:15px; }
  .nav a.link:hover { color:var(--text); text-decoration:underline; }
  .nav .btn { min-height:44px; padding:10px 18px; font-size:15px; }

  /* ── hero ── */
  .hero { padding-top:clamp(28px,5vw,64px); }
  .hero-copy { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:16px 56px; align-items:end; }
  .hero h1 { font-family:var(--font-display); font-weight:400; font-size:clamp(44px,6.4vw,84px); line-height:1.0; letter-spacing:0; max-width:13ch; }
  .hero .lead { font-size:clamp(17px,1.5vw,19px); color:var(--text-soft); max-width:46ch; }
  .hero .act { display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin-top:24px; }
  .hero .offer { margin-top:14px; }
  .sources { margin-top:18px; font-size:15px; color:var(--dim); }
  .sources b { font-family:var(--font-label); font-weight:500; letter-spacing:.3px; color:var(--text-soft); font-size:16px; }

  /* The dash: the one bold move on this page. A real screen with callouts that point at
     real readings, the way an owner's manual explains a dash. The callouts sit in their own
     column so they never cover the figure they describe; each leader runs from the text to a
     reading on the screen's left edge. On narrow screens they become a list under the image,
     because a leader cannot point at a 3 px target. */
  .dash { margin-top:clamp(32px,5vw,56px); }
  .dash-grid { display:grid; grid-template-columns:minmax(0,1fr); }
  .dash .shot { width:100%; height:auto; }
  .callouts { list-style:none; margin:0; padding:0; }
  .callouts li { font-size:15px; color:var(--text-soft); line-height:1.45; }
  .callouts b { display:block; color:var(--text); font-weight:600; font-size:16px; }
  @media (min-width: 1080px) {
    .dash-grid { container-type:inline-size; grid-template-columns:230px minmax(0,1fr); column-gap:44px; }
    .callouts { position:relative; }
    .callouts li { --imgw:calc(100cqw - 274px); position:absolute; left:0; width:230px; text-align:right; top:calc(var(--imgw) * .667 * var(--ty) - 12px); }
    .callouts li::before { content:""; position:absolute; left:calc(100% + 10px); top:12px; height:2px; width:calc(34px + var(--imgw) * var(--tx)); background:var(--green); }
    .callouts li::after { content:""; position:absolute; left:calc(100% + 44px + var(--imgw) * var(--tx) - 5px); top:8px; width:10px; height:10px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(166,226,46,.3); }
  }
  @media (max-width: 1079.98px) {
    .callouts { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px 24px; margin-top:22px; order:2; }
    .callouts li { border-left:3px solid var(--green); padding-left:12px; }
  }
  .dash figcaption, .cap { font-size:14px; color:var(--dim); margin-top:14px; }

  /* ── sections ── */
  .band { padding-top:clamp(64px,9vw,120px); }
  h2 { font-family:var(--font-display); font-weight:400; font-size:clamp(32px,4.2vw,52px); line-height:1.05; letter-spacing:0; max-width:20ch; }
  .intro { color:var(--text-soft); max-width:var(--measure); margin-top:18px; font-size:18px; }
  h3 { font-size:21px; line-height:1.3; font-weight:700; color:var(--text); }

  /* the work you stop doing */
  .work { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px 64px; align-items:start; }
  .reads { list-style:none; margin:0; padding:0; border-top:1px solid var(--panel-border); }
  .reads li { padding:16px 0 16px 34px; border-bottom:1px solid var(--panel-border); position:relative; color:var(--text-soft); }
  .reads li b { color:var(--text); font-weight:600; }
  .reads li::before { content:""; position:absolute; left:4px; top:22px; width:14px; height:8px; border-left:2.5px solid var(--green); border-bottom:2.5px solid var(--green); transform:rotate(-45deg); }

  /* readings: large alternating rows, then a pair */
  .reading { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:28px 56px; align-items:center; margin-top:clamp(40px,6vw,80px); }
  .reading.flip { grid-template-columns:minmax(0,1fr) minmax(0,1.55fr); }
  .reading.flip .fig { order:2; }
  .reading p { color:var(--text-soft); margin-top:12px; max-width:44ch; }
  .pair { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:clamp(48px,6vw,88px); }
  .pair .shot { width:100%; height:auto; aspect-ratio:1090/745; object-fit:cover; object-position:top; }
  .pair h3 { margin-top:20px; }
  .pair p { color:var(--text-soft); margin-top:8px; max-width:44ch; }

  /* import: web + phone side by side */
  .import { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:40px 56px; margin-top:40px; align-items:center; }
  .import p { color:var(--text-soft); margin-top:8px; max-width:48ch; }
  .import h3 { margin-top:20px; }
  .phone { max-width:300px; border-radius:34px; border:10px solid #0B1626; box-shadow:0 0 0 1px var(--panel-border), 0 24px 60px rgba(0,0,0,.45); overflow:hidden; background:var(--navy-bg); }
  .phone img { width:100%; }
  .import .once { margin-top:14px; color:var(--dim); font-size:15px; }

  /* programs + devices: a quiet two-column band */
  .facts { display:grid; grid-template-columns:1fr 1fr; gap:48px 64px; }
  .facts p { color:var(--text-soft); margin-top:14px; max-width:48ch; }
  .facts .note { font-size:15px; color:var(--dim); }
  .prog { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
  .prog span { font-family:var(--font-label); font-weight:500; font-size:18px; letter-spacing:.4px; color:var(--text); border:1px solid var(--control-border); border-radius:var(--radius-sm); padding:8px 16px; }
  .facts .stores { margin-top:20px; }

  /* the offer: a photo band carrying the one offer sentence */
  .offer-band { position:relative; margin-top:clamp(64px,9vw,120px); min-height:480px; display:flex; align-items:flex-end; background:#0B1626 70% center/cover no-repeat; background-image:linear-gradient(90deg, rgba(17,31,51,.94) 0%, rgba(17,31,51,.86) 40%, rgba(17,31,51,.2) 64%, rgba(17,31,51,0) 100%), linear-gradient(180deg, rgba(17,31,51,.05) 0%, rgba(17,31,51,.25) 55%, rgba(17,31,51,.97) 100%), image-set(url('/assets/photo-cta-1x.webp') 1x, url('/assets/photo-cta-2x.webp') 2x); }
  .offer-band .wrap { width:100%; padding-top:120px; padding-bottom:clamp(40px,6vw,72px); }
  .offer-band h2 { max-width:16ch; }
  .offer-band p { color:var(--text-soft); max-width:52ch; margin-top:14px; font-size:18px; }
  .offer-band .btn { margin-top:26px; }
  .offer-band .photo-credit { font-size:12px; color:var(--dim-2); margin-top:18px; }

  /* privacy: a definition list, not a card grid */
  .trust { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 48px; margin-top:36px; }
  .trust div { border-top:1px solid var(--panel-border); padding:20px 0 26px; }
  .trust dt { font-weight:700; color:var(--text); font-size:18px; }
  .trust dd { margin:8px 0 0; color:var(--text-soft); }
  .more { margin-top:8px; }

  .faq-wrap { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr); gap:32px 64px; align-items:start; }
  .contact { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr); gap:32px 64px; align-items:start; padding-bottom:clamp(64px,9vw,120px); }
  .contact .intro { font-size:17px; }

  @media (max-width: 900px) {
    /* The photo is a strip across the top, at least 300px tall and never narrower than the
       screen, and the words start below it, so the RV is never behind the headline. */
    .offer-band { --strip:max(300px, 39.25vw); background-image:linear-gradient(180deg, rgba(17,31,51,0) 0, rgba(17,31,51,0) calc(var(--strip) - 90px), rgba(17,31,51,.97) var(--strip), rgba(17,31,51,.98) 100%), image-set(url('/assets/photo-cta-1x.webp') 1x, url('/assets/photo-cta-2x.webp') 2x); background-size:cover, auto var(--strip); background-position:center, 85% 0; background-repeat:no-repeat; }
    .offer-band .wrap { padding-top:calc(var(--strip) - 8px); }
    .hero-copy, .work, .reading, .reading.flip, .import, .facts, .faq-wrap, .contact { grid-template-columns:1fr; }
    .reading.flip .fig { order:0; }
    .trust { grid-template-columns:1fr 1fr; }
    .nav a.link { display:none; }
  }
  @media (max-width: 600px) {
    body { font-size:16px; }
    .pair, .trust { grid-template-columns:1fr; }
    .nav .btn-primary { display:none; }
    .hero .act .btn { width:100%; }
    .offer-band { min-height:380px; }
    .offer-band .btn { width:100%; }
    .phone { max-width:260px; margin:0 auto; }
  }

/* The diesel ticker is its own small page, generated every Tuesday by a job in
   MarketingSiteStack and embedded here, so this page stays static and script-free. */
.ticker-frame { display:block; width:100%; height:44px; border:0; background:#0B1626; }

/* Contact outcome pages and the 404 */
.simple { padding-top:clamp(40px,8vw,96px); padding-bottom:clamp(64px,9vw,120px); max-width:720px; }
.simple h1 { font-family:var(--font-display); font-weight:400; font-size:clamp(36px,5vw,56px); line-height:1.05; letter-spacing:0; }
.simple p { color:var(--text-soft); margin-top:16px; font-size:18px; max-width:var(--measure); }
.simple .btn { margin-top:28px; }
.error-summary { border:2px solid var(--red); border-radius:var(--radius-sm); padding:16px 18px; margin:24px 0; }
.error-summary h2 { font-family:var(--font-body); font-weight:700; font-size:18px; max-width:none; }
.error-summary ul { margin:8px 0 0; padding-left:20px; }
.error-summary a, .field .err { color:var(--red-text); }
.field .err { font-size:15px; font-weight:600; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color:var(--red-text); }

/* One account on every screen: the device lineup (one example account on all three), with
   where to get each version under it. Apple's badge comes first, as its guidelines ask. */
.devices { text-align:center; }
.devices h2 { margin:0 auto; max-width:22ch; }
.devices .intro { margin-left:auto; margin-right:auto; max-width:56ch; }
.lineup { margin:clamp(20px,4vw,36px) auto 0; max-width:1100px; }
.lineup img { width:100%; height:auto; }
.lineup figcaption { margin:4px auto 0; }
.platforms { list-style:none; margin:28px auto 0; padding:0; max-width:760px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 24px; }
.platforms li { display:flex; flex-direction:column; align-items:center; gap:10px; }
.platforms .plat { font-size:15px; color:var(--dim); }
.platforms a { display:inline-flex; align-items:center; min-height:44px; border-radius:8px; }
.platforms .apple { height:44px; width:auto; }
.platforms .google { height:65px; width:auto; margin:-10px; }
@media (max-width: 600px) {
  .platforms { grid-template-columns:1fr; gap:22px; }
}

/* With "Become an Affiliate" and Support in the header, the text links leave it a little earlier,
   and never wrap while they are there. */
.nav a.link { white-space:nowrap; }
@media (max-width: 1120px) { .nav a.link { display:none; } }

/* Homepage "Get in Touch": the form itself lives on /contact/ and /contact/partner/, the only
   pages that load Cloudflare Turnstile, so the homepage stays script-free. */
.contact-cta .act { display:flex; flex-wrap:wrap; gap:14px 16px; margin-top:26px; }
.contact h1 { font-family:var(--font-display); font-weight:400; font-size:clamp(36px,5vw,56px); line-height:1.05; letter-spacing:0; }
@media (max-width: 600px) { .contact-cta .act .btn { width:100%; } }

/* The apps notice: opened by the store badges until the listings are public. :target shows it
   as a fixed overlay; "Close" goes back to the devices section. */
.notice { display:none; }
.notice:target { display:flex; position:fixed; inset:0; z-index:100; align-items:center; justify-content:center; padding:16px; background:rgba(8,15,26,.78); }
.notice-card { max-width:520px; width:100%; background:linear-gradient(160deg,var(--panel-2),var(--panel)); border:1px solid var(--panel-border); border-radius:var(--radius); box-shadow:0 24px 60px rgba(0,0,0,.55); padding:clamp(24px,4vw,36px); text-align:left; }
.notice-card h2 { font-size:clamp(28px,4vw,40px); max-width:none; }
.notice-card p { color:var(--text-soft); margin-top:14px; font-size:17px; }
.notice-card .act { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
@media (max-width: 600px) { .notice-card .act .btn { width:100%; } }

/* Header buttons never break onto two lines. Below 860px the affiliate button leaves the header
   (it stays in Get in Touch and the footer), so Log In and Get Started Free keep one line. */
.nav .btn { white-space:nowrap; }
@media (max-width: 860px) { .nav .nav-affiliate { display:none; } }

/* The sign-up after the screenshots: the one place mid-page to act, at the point the views
   have been seen. */
.mid-cta { display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; margin-top:clamp(48px,6vw,80px); }
.mid-cta p { font-size:19px; color:var(--text); font-weight:600; }
@media (max-width: 600px) { .mid-cta .btn { width:100%; } }

/* The hero on phones shows the iPhone app's dashboard (a <picture> source), framed like the
   phone in Uploading Your Statements; the Cockpit callouts describe panels it does not have. */
.cap-phone { display:none; }
@media (max-width: 600px) {
  .dash .callouts, .cap-wide { display:none; }
  .cap-phone { display:inline; }
  .dash figcaption { text-align:center; }
  .dash .shot { display:block; max-width:280px; margin:0 auto; border:10px solid #0B1626; border-radius:34px; box-shadow:0 0 0 1px var(--panel-border), 0 24px 60px rgba(0,0,0,.45); -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%); mask-image:linear-gradient(180deg,#000 82%,transparent 100%); }
}

/* ─────────── Support (#288) ───────────
   /support/ and every page under it are generated by scripts/build-support.mjs from Markdown in
   marketing-src/support/. A page is one reading column held to about 70 characters a line,
   centered like the contact outcome pages; the index uses the whole width, with each section's
   heading beside its list the way the homepage sets its FAQ. Anton for page and section
   headings, as everywhere on the site; Public Sans for everything read. */
.support { padding-top:clamp(20px,3vw,40px); padding-bottom:clamp(64px,9vw,120px); }
.support h1 { font-family:var(--font-display); font-weight:400; font-size:clamp(36px,5vw,56px); line-height:1.05; letter-spacing:0; }
.support-page { max-width:calc(var(--measure) + 2 * var(--pad-x)); font-size:18px; }

/* Breadcrumb: where this page sits in the index. The chevron is drawn, not typed, so a screen
   reader hears two links and no punctuation. */
.crumbs ol { list-style:none; margin:0 0 clamp(16px,3vw,28px); padding:0; display:flex; flex-wrap:wrap; align-items:center; column-gap:14px; }
.crumbs li { display:flex; align-items:center; gap:14px; font-family:var(--font-label); font-weight:500; font-size:14px; line-height:1.3; letter-spacing:.6px; text-transform:uppercase; }
.crumbs li + li::before { content:""; flex:none; width:7px; height:7px; border-top:2px solid var(--dim); border-right:2px solid var(--dim); transform:rotate(45deg); }
.crumbs a { display:inline-flex; align-items:center; min-height:36px; color:var(--text-soft); text-decoration:none; }
.crumbs a:hover { color:var(--text); text-decoration:underline; }

.updated { margin-top:14px; font-size:15px; color:var(--dim); }

/* The reading column. Paragraphs are text-soft like the rest of the site; headings, bold and
   the steps' numbers are full text, so the structure reads before the words do. */
.prose { margin-top:clamp(24px,3vw,36px); color:var(--text-soft); line-height:1.7; overflow-wrap:break-word; }
.prose > * + * { margin-top:18px; }
.prose h2 { font-size:clamp(26px,3vw,34px); line-height:1.1; max-width:none; color:var(--text); margin-top:clamp(40px,5vw,56px); }
.prose h3 { font-size:20px; line-height:1.3; margin-top:32px; }
.prose > h2 + *, .prose > h3 + * { margin-top:12px; }
.prose > h2 + h3 { margin-top:24px; }
.prose h2, .prose h3 { scroll-margin-top:16px; }
.prose ul, .prose ol { margin-bottom:0; padding-left:1.4em; }
.prose li { padding-left:4px; }
.prose li + li { margin-top:10px; }
.prose ul > li::marker { color:var(--dim); }
.prose ol > li::marker { color:var(--text); font-weight:600; }
.prose strong { color:var(--text); font-weight:600; }
.prose .fig { margin-top:32px; }
.prose .fig + * { margin-top:32px; }
.prose .fig figcaption { font-size:15px; }

/* "Still need help?": the last thing on every support page and the index, and the one way out
   to a person. The words on the left and the button on the right, across the reading column on a
   page and across the whole width on the index; on a phone the button drops below. */
.still-help { font-size:18px; margin-top:clamp(48px,6vw,72px); padding:clamp(22px,3vw,32px); background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 32px; }
.still-help h2 { font-size:clamp(26px,3vw,34px); line-height:1.1; max-width:none; }
.still-help p { color:var(--text-soft); margin-top:8px; }

/* The index */
.support-index .intro { max-width:var(--measure); }

/* The how-to video, the first thing under the index's note. Until it exists the slot is a plain
   panel that says so, with nothing that looks playable; then it is a click-to-load player, whose
   poster and play control live in the frame (scripts/build-support.mjs). */
.video { margin-top:clamp(24px,3vw,32px); max-width:760px; aspect-ratio:16/9; border:1px solid var(--panel-border); border-radius:var(--radius); overflow:hidden; background:#0B1626; }
.video-frame { display:block; width:100%; height:100%; border:0; }
.video-soon { display:flex; align-items:center; justify-content:center; padding:16px; background:var(--panel); }
.video-soon p { font-family:var(--font-label); font-weight:500; font-size:clamp(20px,2.4vw,26px); line-height:1.2; letter-spacing:.6px; color:var(--text-soft); text-align:center; }
.video-note { margin-top:12px; max-width:760px; font-size:15px; color:var(--dim); }
.topics { margin-top:clamp(32px,5vw,56px); }
.topic { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr); gap:16px 64px; align-items:start; padding:clamp(24px,3.5vw,36px) 0; border-top:1px solid var(--panel-border); }
.topic:last-child { border-bottom:1px solid var(--panel-border); }
.topic h2 { font-size:clamp(26px,3vw,34px); line-height:1.1; max-width:16ch; }
.topic-list { list-style:none; margin:0; padding:0; }
.topic-list li + li { margin-top:22px; }
.topic-list a { font-weight:600; font-size:19px; line-height:1.35; }
.topic-list p { color:var(--text-soft); margin-top:4px; max-width:62ch; }

@media (max-width: 900px) {
  .topic { grid-template-columns:minmax(0,1fr); }
  .topic h2 { max-width:none; }
}
@media (max-width: 600px) {
  .support-page, .still-help { font-size:17px; }
  .still-help .btn { width:100%; }
}