/* www.FixMyWeb.Page — site styles
   Tokens (colors, type) are defined on :root; dark mode redefines the same tokens.
   Fonts: Space Grotesk (display), Inter (body), IBM Plex Mono (labels) via Google Fonts. */
:root{
  --ink:#132038; --ink-soft:#3c4a62; --ink-faint:#6b7489;
  --paper:#F8F5EF; --paper-2:#EFEAE0; --line:#DAD3C4;
  --alert:#E2572B; --alert-dark:#B4441F; --alert-wash:#FBE7DF;
  --amber:#EFA23D; --ok:#2E7D4F; --ok-wash:#E1F0E6; --card:#FFFFFF;
  --on-ink:#F8F5EF;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --display:'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --body:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ink:#EFEAE0; --ink-soft:#B9C0CE; --ink-faint:#8A92A3; --paper:#12151C; --paper-2:#1B1F29;
    --line:#2C313D; --card:#181C25; --alert-wash:#3A2119; --ok:#5DBB84; --ok-wash:#17301F; --on-ink:#12151C;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#EFEAE0; --ink-soft:#B9C0CE; --ink-faint:#8A92A3; --paper:#12151C; --paper-2:#1B1F29;
  --line:#2C313D; --card:#181C25; --alert-wash:#3A2119; --ok:#5DBB84; --ok-wash:#17301F; --on-ink:#12151C;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} }
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display); text-wrap:balance; margin:0}
p{margin:0}
.wrap{max-width:1120px; margin:0 auto; padding-inline:24px}
@media (max-width:520px){ .wrap{padding-inline:16px} }
:focus-visible{outline:2px solid var(--alert); outline-offset:2px}
.mono{font-family:var(--mono)}
.label{font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); font-weight:500}

/* ticket texture (brand) */
.ticket{background:var(--card); border:1px solid var(--line); position:relative}
.ticket::before{content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:6px; background:repeating-linear-gradient(180deg,var(--alert) 0 10px, transparent 10px 20px)}

/* ---------- header ---------- */
header.site{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:14px}
.brand{font-family:var(--display); font-weight:700; font-size:1.1rem; letter-spacing:-.01em; display:flex; align-items:center; gap:9px; text-decoration:none; white-space:nowrap}
.brand .dot{width:9px; height:9px; border-radius:50%; background:var(--alert); box-shadow:0 0 0 3px color-mix(in srgb, var(--alert) 22%, transparent)}
.navlinks{display:flex; align-items:center; gap:4px; font-size:.92rem}
.navlinks a{text-decoration:none; color:var(--ink-soft); padding:8px 10px; white-space:nowrap}
.navright .btn{white-space:nowrap}
.navlinks a:hover{color:var(--ink)}
.navlinks a[aria-current="page"]{color:var(--ink); box-shadow:inset 0 -2px 0 var(--alert)}
.navright{display:flex; align-items:center; gap:10px}
.menu-btn{display:none; background:none; border:1px solid var(--line); color:var(--ink); font-family:var(--mono); font-size:.8rem; padding:9px 12px; cursor:pointer}
@media (max-width:1100px){
  .navlinks{display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; background:var(--paper); border-bottom:1px solid var(--line); padding:8px 16px 16px}
  .navlinks.open{display:flex}
  .navlinks a{padding:12px 4px; border-bottom:1px solid var(--line)}
  .navlinks a[aria-current="page"]{box-shadow:none; color:var(--alert)}
  .menu-btn{display:inline-block}
}
@media (max-width:420px){ .navright .btn-cta-nav{display:none} }

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--mono); font-weight:600; font-size:.92rem; padding:14px 22px; text-decoration:none; border:1px solid transparent; cursor:pointer; line-height:1.2; background:none; color:inherit}
.btn-primary{background:var(--alert); color:#fff; border-color:var(--alert-dark)}
.btn-primary:hover{background:var(--alert-dark)}
.btn-ink{background:var(--ink); color:var(--on-ink); border-color:var(--ink)}
.btn-ghost{border-color:var(--line); color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-small{padding:10px 16px; font-size:.82rem}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.linkbtn{background:none; border:0; padding:0; font:inherit; color:var(--alert); cursor:pointer; text-decoration:underline; text-underline-offset:3px}

/* ---------- generic sections ---------- */
.sec{padding-block:64px}
.sec-tight{padding-block:40px}
.rule{border:0; border-top:1px solid var(--line); margin:0}
.h-section{font-weight:600; letter-spacing:-.015em; font-size:clamp(1.6rem,3.2vw,2.2rem); line-height:1.12; margin-bottom:10px; max-width:24ch}
.lede{color:var(--ink-soft); max-width:60ch; font-size:1.02rem; margin-bottom:32px}
.crumbs{font-family:var(--mono); font-size:.78rem; color:var(--ink-soft); display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px}
.crumbs a{text-decoration:none} .crumbs a:hover{color:var(--ink); text-decoration:underline}

/* ---------- hero ---------- */
.hero{padding-block:52px 44px}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:start}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:32px} }
.eyebrow{font-family:var(--mono); font-size:.78rem; color:var(--ink-soft); display:flex; align-items:center; gap:10px; margin-bottom:16px; letter-spacing:.03em}
.led{width:8px; height:8px; border-radius:50%; background:var(--alert); animation:pulse 1.8s ease-in-out infinite; flex:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.h-hero{font-weight:700; letter-spacing:-.025em; font-size:clamp(2.2rem,5.4vw,3.5rem); line-height:1.03; margin-bottom:18px}
.h-hero em{font-style:normal; color:var(--alert)}
.hero-sub{font-size:1.08rem; color:var(--ink-soft); max-width:48ch; margin-bottom:28px}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap}
.powered{font-size:.86rem; color:var(--ink-soft); margin-top:18px}
.powered strong{color:var(--ink); font-weight:600}

.picker{padding:22px 22px 20px 28px}
.picker-head{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-family:var(--mono); font-size:.74rem; color:var(--ink-soft); padding-bottom:14px; margin-bottom:16px; border-bottom:1px dashed var(--line)}
.picker-head b{color:var(--ink); font-weight:600}
.picker h2{font-size:1.1rem; font-weight:600; margin-bottom:14px}
.sym-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
@media (max-width:420px){ .sym-grid{grid-template-columns:1fr} }
.sym-btn{font:inherit; font-size:.88rem; text-align:left; padding:11px 12px; border:1px solid var(--line); background:var(--paper-2); color:var(--ink); display:flex; align-items:center; gap:10px; cursor:pointer; line-height:1.25}
.sym-btn:hover{border-color:var(--alert); background:var(--alert-wash)}
.sym-btn .arr{margin-left:auto; color:var(--alert); font-family:var(--mono)}
.sym-btn.unknown{grid-column:1/-1; background:transparent; border-style:dashed}
.picker-foot{font-size:.8rem; color:var(--ink-soft); margin-top:14px}

/* ---------- journey ---------- */
.journey{display:grid; grid-template-columns:repeat(6,1fr); gap:0; border:1px solid var(--line); background:var(--card)}
@media (max-width:1000px){ .journey{grid-template-columns:repeat(3,1fr)} }
@media (max-width:600px){ .journey{grid-template-columns:1fr} }
.jstage{padding:20px 18px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:8px; position:relative}
.jstage .jn{font-family:var(--mono); font-size:.78rem; color:var(--alert); font-weight:600; display:flex; justify-content:space-between; gap:8px}
.jstage .who{font-family:var(--mono); font-size:.7rem; color:var(--ink-soft); border:1px solid var(--line); padding:1px 6px; letter-spacing:.04em}
.jstage h3{font-size:1.02rem; font-weight:600}
.jstage p{font-size:.88rem; color:var(--ink-soft)}
.jstage .expect{font-size:.84rem; color:var(--ink); border-top:1px dashed var(--line); padding-top:8px; margin-top:auto}
.jstage .expect b{font-family:var(--mono); font-size:.7rem; letter-spacing:.05em; color:var(--ok); display:block; margin-bottom:2px}
.jstage.first{background:var(--alert-wash)}

/* ---------- problems grid ---------- */
.prob-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.prob-card{display:flex; flex-direction:column; gap:8px; padding:20px 20px 18px 26px; text-decoration:none}
.prob-card:hover{border-color:var(--ink)}
.prob-card .label{color:var(--alert)}
.prob-card h3{font-size:1.12rem; font-weight:600}
.prob-card p{font-size:.9rem; color:var(--ink-soft)}
.prob-card .go{font-family:var(--mono); font-size:.8rem; margin-top:auto; padding-top:6px}

/* ---------- offers ---------- */
.offers{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:900px){ .offers{grid-template-columns:1fr} }
.offer{padding:24px 24px 24px 30px; display:flex; flex-direction:column; gap:12px}
.offer.featured{border-color:var(--alert)}
.offer-top{display:flex; justify-content:space-between; gap:8px; font-family:var(--mono); font-size:.74rem; color:var(--ink-soft)}
.badge{background:var(--paper-2); border:1px solid var(--line); padding:2px 8px; font-size:.7rem; font-family:var(--mono)}
.offer h3{font-size:1.25rem; font-weight:600}
.price{font-family:var(--mono); font-size:1.6rem; font-weight:600; color:var(--alert); font-variant-numeric:tabular-nums}
.offer .desc{color:var(--ink-soft); font-size:.94rem}
.taglist{font-size:.82rem; color:var(--ink-soft); line-height:1.6; border-top:1px dashed var(--line); padding-top:12px}
.offer .btn{margin-top:auto; align-self:flex-start}
.fits{font-size:.86rem; margin:0; padding-left:18px; color:var(--ink-soft)}

/* ---------- trust ---------- */
.trust{display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line)}
@media (max-width:720px){ .trust{grid-template-columns:1fr} }
.trust>div{padding:28px}
.trust>div:first-child{background:var(--paper-2); border-right:1px solid var(--line)}
@media (max-width:720px){ .trust>div:first-child{border-right:0; border-bottom:1px solid var(--line)} }
.trust h3{font-size:1.2rem; margin-bottom:10px}
.checklist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:.94rem}
.checklist li{display:flex; gap:10px}
.checklist li::before{content:"✓"; color:var(--ok); font-weight:700; flex:none}

/* ---------- dark band ---------- */
.band{background:var(--ink); color:var(--on-ink)}
.band .wrap{padding-block:56px}
.band h2{font-size:clamp(1.5rem,3vw,2rem); font-weight:600; margin-bottom:8px}
.band .lede{color:color-mix(in srgb, var(--on-ink) 70%, transparent)}
.vs-plans{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:720px){ .vs-plans{grid-template-columns:1fr} }
.vs-plan{border:1px solid color-mix(in srgb, var(--on-ink) 25%, transparent); padding:22px; display:flex; flex-direction:column; gap:10px}
.vs-plan .price{color:var(--amber)}
.vs-plan p{color:color-mix(in srgb, var(--on-ink) 72%, transparent); font-size:.92rem}
.vs-plan .btn{align-self:flex-start; border-color:color-mix(in srgb, var(--on-ink) 40%, transparent); color:var(--on-ink)}
.vs-plan .btn:hover{border-color:var(--on-ink)}
.band .btn-primary{color:#fff}

/* ---------- problem page ---------- */
.pgrid{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:36px; align-items:start}
@media (max-width:900px){ .pgrid{grid-template-columns:1fr} }
.panel{padding:24px 24px 22px 30px; margin-bottom:16px}
.panel .tag{font-family:var(--mono); font-size:.74rem; color:var(--alert); font-weight:600; letter-spacing:.04em; display:block; margin-bottom:8px}
.panel h2{font-size:1.3rem; font-weight:600; margin-bottom:10px}
.panel p{color:var(--ink-soft); margin-bottom:8px}
.panel ul{margin:0; padding-left:18px; color:var(--ink-soft)}
.panel li{margin-bottom:6px}
.side{position:sticky; top:84px; display:flex; flex-direction:column; gap:14px}
.side-box{border:1px solid var(--line); background:var(--card); padding:20px}
.side-box h3{font-size:1rem; font-weight:600; margin-bottom:10px}
.mini-steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:.88rem}
.mini-steps li{display:grid; grid-template-columns:22px 1fr; gap:8px; color:var(--ink-soft)}
.mini-steps li b{color:var(--ink); font-weight:600; display:block}
.mini-steps .n{font-family:var(--mono); font-size:.76rem; color:var(--alert); font-weight:600; padding-top:2px}
.related{display:flex; flex-wrap:wrap; gap:8px}
.chip-link{font-size:.84rem; border:1px solid var(--line); padding:6px 10px; text-decoration:none; background:var(--paper-2)}
.chip-link:hover{border-color:var(--ink)}
.cta-strip{background:var(--ink); color:var(--on-ink); padding:28px; display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; margin-top:8px}
.cta-strip h2{font-size:1.35rem; font-weight:600; margin-bottom:4px}
.cta-strip p{color:color-mix(in srgb, var(--on-ink) 72%, transparent); font-size:.94rem}

/* ---------- report wizard ---------- */
.report-head{padding-block:36px 8px}
.journey-mini{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-family:var(--mono); font-size:.76rem; color:var(--ink-soft); margin-bottom:16px}
.journey-mini .segs{display:flex; gap:3px}
.journey-mini .seg{width:28px; height:6px; background:var(--line)}
.journey-mini .seg.done{background:var(--ok)}
.journey-mini .seg.cur{background:var(--alert)}
.report-head h1{font-size:clamp(1.8rem,4vw,2.5rem); font-weight:700; letter-spacing:-.02em; line-height:1.08; margin-bottom:8px}
.report-head p{color:var(--ink-soft); max-width:62ch}

.stepper{margin:28px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(5,1fr); position:relative}
.stepper::before{content:""; position:absolute; left:10%; right:10%; top:15px; height:3px; background:var(--line)}
.stepper .fill{position:absolute; left:10%; top:15px; height:3px; background:var(--ok); transition:width .35s ease; width:0}
.stepper li{display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; position:relative; z-index:1; padding-inline:4px}
.stepper .dot{width:33px; height:33px; border-radius:50%; display:grid; place-items:center; font-family:var(--mono); font-size:.82rem; font-weight:600; background:var(--paper); border:2px solid var(--line); color:var(--ink-soft)}
.stepper .nm{font-size:.86rem; font-weight:600; line-height:1.2}
.stepper .st{font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint)}
.stepper li.done .dot{background:var(--ok); border-color:var(--ok); color:#fff}
.stepper li.done .st{color:var(--ok)}
.stepper li.cur .dot{background:var(--alert); border-color:var(--alert); color:#fff; box-shadow:0 0 0 5px color-mix(in srgb, var(--alert) 20%, transparent)}
.stepper li.cur .st{color:var(--alert); font-weight:600}
.stepper li.next .dot{border-color:var(--ink); color:var(--ink); border-style:dashed}
.stepper li.next .st{color:var(--ink)}
.stepper button{all:unset; cursor:pointer; display:contents}
.stepper li.locked button{cursor:default}
@media (max-width:640px){ .stepper .nm{font-size:.72rem} .stepper .st{display:none} }
.step-count{font-family:var(--mono); font-size:.8rem; color:var(--ink-soft); margin-top:14px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}
.step-count b{color:var(--ink)}

.wiz{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:28px; align-items:start; padding-block:24px 64px}
@media (max-width:960px){ .wiz{grid-template-columns:1fr} }
.wiz-form{padding:28px 28px 24px 34px}
@media (max-width:520px){ .wiz-form{padding:22px 18px 20px 24px} }
.pane h2{font-size:1.4rem; font-weight:600; margin-bottom:4px}
.pane .intro{color:var(--ink-soft); margin-bottom:22px; font-size:.95rem}
.fset{border:0; padding:0; margin:0 0 22px; min-width:0}
.fset legend,.flabel{font-weight:600; font-size:.95rem; margin-bottom:8px; padding:0; display:block}
.req{color:var(--alert); font-family:var(--mono); font-size:.72rem; margin-left:6px; font-weight:500}
.opt{color:var(--ink-faint); font-family:var(--mono); font-size:.72rem; margin-left:6px; font-weight:400}
.hint{font-size:.84rem; color:var(--ink-soft); margin:-4px 0 8px}
.field{margin-bottom:18px; min-width:0}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:600px){ .row2{grid-template-columns:1fr} }
input[type=text],input[type=email],input[type=tel],input[type=url],select,textarea{width:100%; font:inherit; font-size:.95rem; padding:11px 12px; border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:0}
textarea{min-height:108px; resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--alert); outline-offset:-1px; border-color:var(--alert)}
.invalid input,.invalid select,.invalid textarea{border-color:var(--alert)}
.err{color:var(--alert-dark); font-size:.82rem; margin-top:6px; display:none}
.invalid .err{display:block}
:root[data-theme="dark"] .err{color:var(--alert)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .err{color:var(--alert)} }
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{position:relative}
.chip input{position:absolute; opacity:0; inset:0; cursor:pointer; margin:0}
.chip span{display:inline-flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--line); background:var(--paper-2); font-size:.88rem; cursor:pointer; line-height:1.2}
.chip span::before{content:""; width:12px; height:12px; border:1.5px solid var(--ink-soft); flex:none}
.chip input[type=radio]+span::before{border-radius:50%}
.chip input:checked+span{border-color:var(--alert); background:var(--alert-wash); color:var(--ink)}
.chip input:checked+span::before{background:var(--alert); border-color:var(--alert); box-shadow:inset 0 0 0 2px var(--alert-wash)}
.chip input:focus-visible+span{outline:2px solid var(--alert); outline-offset:2px}
.urg{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
@media (max-width:600px){ .urg{grid-template-columns:1fr} }
.urg .chip span{display:flex; flex-direction:column; align-items:flex-start; gap:2px; height:100%; padding:12px}
.urg .chip span::before{display:none}
.urg .chip b{font-size:.9rem}
.urg .chip small{color:var(--ink-soft); font-size:.8rem}
.hp{position:absolute!important; left:-10000px; width:1px; height:1px; overflow:hidden}
.send-err{border:1px solid var(--alert); background:var(--alert-wash); padding:12px 14px; font-size:.9rem; margin-bottom:14px}
.warn{display:flex; gap:10px; padding:12px 14px; background:var(--alert-wash); border:1px solid color-mix(in srgb, var(--alert) 35%, transparent); font-size:.88rem; margin-bottom:20px}
.warn b{font-family:var(--mono); font-size:.76rem; color:var(--alert-dark); flex:none; padding-top:1px}
:root[data-theme="dark"] .warn b{color:var(--alert)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .warn b{color:var(--alert)} }
.plans{display:flex; flex-direction:column; gap:10px}
.plan{position:relative}
.plan input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.plan .pbox{display:grid; grid-template-columns:18px 1fr auto; gap:12px; align-items:start; padding:16px; border:1px solid var(--line); background:var(--paper); cursor:pointer}
.plan .pbox::before{content:""; width:16px; height:16px; border-radius:50%; border:1.5px solid var(--ink-soft); margin-top:3px}
.plan input:checked+.pbox{border-color:var(--alert); background:var(--alert-wash)}
.plan input:checked+.pbox::before{background:var(--alert); border-color:var(--alert); box-shadow:inset 0 0 0 3px var(--alert-wash)}
.plan input:focus-visible+.pbox{outline:2px solid var(--alert); outline-offset:2px}
.plan .pname{font-family:var(--display); font-weight:600; font-size:1.02rem; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.plan .pdesc{font-size:.86rem; color:var(--ink-soft); margin-top:2px}
.plan .pprice{font-family:var(--mono); font-weight:600; color:var(--alert); white-space:nowrap}
.rec{font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; background:var(--ok); color:#fff; padding:2px 7px; font-weight:600}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:.9rem; padding:14px; border:1px dashed var(--line)}
.consent input{margin-top:4px; accent-color:var(--alert); width:16px; height:16px; flex:none}
.wiz-nav{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:20px; margin-top:8px}
.wiz-nav .saved{font-family:var(--mono); font-size:.74rem; color:var(--ink-faint)}
.review{display:flex; flex-direction:column; gap:14px}
.rv{border:1px solid var(--line); background:var(--paper)}
.rv-h{display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--paper-2)}
.rv-h h3{font-size:.95rem; font-weight:600}
.rv dl{margin:0; padding:12px 14px; display:grid; grid-template-columns:170px 1fr; gap:6px 14px; font-size:.9rem}
@media (max-width:560px){ .rv dl{grid-template-columns:1fr} .rv dd{margin-bottom:6px} }
.rv dt{color:var(--ink-soft)}
.rv dd{margin:0; overflow-wrap:anywhere; white-space:pre-wrap}

.expect{position:sticky; top:84px; display:flex; flex-direction:column; gap:14px}
.ex-card{border:1px solid var(--line); background:var(--card)}
.ex-card .ex-h{padding:12px 16px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:8px; align-items:center}
.ex-card .ex-b{padding:16px; display:flex; flex-direction:column; gap:12px; font-size:.9rem}
.ex-now{border-left:4px solid var(--alert)}
.ex-now h3{font-size:1.05rem; font-weight:600}
.ex-row{display:grid; grid-template-columns:92px 1fr; gap:8px; font-size:.88rem}
.ex-row .k{font-family:var(--mono); font-size:.7rem; letter-spacing:.05em; color:var(--ink-soft); text-transform:uppercase; padding-top:2px}
.ex-next{border-left:4px dashed var(--ink)}
.after{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0}
.after li{display:grid; grid-template-columns:26px 1fr; gap:10px; padding-bottom:14px; position:relative; font-size:.88rem; color:var(--ink-soft)}
.after li:not(:last-child)::after{content:""; position:absolute; left:12px; top:24px; bottom:2px; width:1px; background:var(--line)}
.after .n{width:25px; height:25px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; font-family:var(--mono); font-size:.72rem; background:var(--paper)}
.after b{color:var(--ink); display:block; font-weight:600}
.after .t{font-family:var(--mono); font-size:.72rem; color:var(--ok)}

/* ---------- thanks ---------- */
.tk-head{padding-block:40px 20px}
.tk-id{display:inline-flex; gap:10px; align-items:center; font-family:var(--mono); font-size:.86rem; border:1px solid var(--line); background:var(--card); padding:8px 12px; margin-bottom:16px}
.tk-id b{color:var(--alert)}
.track{display:flex; flex-direction:column; border:1px solid var(--line); background:var(--card)}
.track li{list-style:none; display:grid; grid-template-columns:44px 1fr auto; gap:14px; padding:16px 18px; border-bottom:1px solid var(--line); align-items:start}
.track li:last-child{border-bottom:0}
.track .dot{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-family:var(--mono); font-size:.8rem; font-weight:600; border:2px solid var(--line); color:var(--ink-soft)}
.track h3{font-size:1rem; font-weight:600}
.track p{font-size:.88rem; color:var(--ink-soft)}
.track .pill{font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; padding:3px 8px; border:1px solid var(--line); white-space:nowrap; color:var(--ink-faint)}
.track li.done .dot{background:var(--ok); border-color:var(--ok); color:#fff}
.track li.done .pill{background:var(--ok-wash); color:var(--ok); border-color:transparent}
.track li.cur{background:var(--alert-wash)}
.track li.cur .dot{background:var(--alert); border-color:var(--alert); color:#fff}
.track li.cur .pill{background:var(--alert); color:#fff; border-color:transparent}
.track li.next .dot{border-style:dashed; border-color:var(--ink); color:var(--ink)}
.track li.next .pill{color:var(--ink); border-color:var(--ink)}
.track .exp{font-size:.84rem; color:var(--ink); margin-top:6px}
.track .exp b{font-family:var(--mono); font-size:.68rem; letter-spacing:.05em; color:var(--ok); margin-right:6px}
@media (max-width:560px){ .track li{grid-template-columns:36px 1fr} .track .pill{grid-column:2; justify-self:start} }
.tk-grid{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:28px; align-items:start; padding-bottom:64px}
@media (max-width:960px){ .tk-grid{grid-template-columns:1fr} }
.summary-box{border:1px solid var(--line); background:var(--card)}
.summary-box pre{margin:0; padding:16px; font-family:var(--mono); font-size:.78rem; white-space:pre-wrap; overflow-wrap:anywhere; max-height:420px; overflow:auto; color:var(--ink)}
.note{font-size:.86rem; padding:12px 14px; border:1px dashed var(--amber); background:color-mix(in srgb, var(--amber) 12%, transparent); margin-bottom:14px}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start}
@media (max-width:860px){ .contact-grid{grid-template-columns:1fr} }
.route-card{padding:24px 24px 24px 30px; display:flex; flex-direction:column; gap:10px}
.route-card h2{font-size:1.25rem; font-weight:600}
.route-card p{color:var(--ink-soft); font-size:.94rem}
.plain-card{border:1px solid var(--line); background:var(--card); padding:24px}
.ok-msg{padding:14px; background:var(--ok-wash); border:1px solid color-mix(in srgb, var(--ok) 40%, transparent); font-size:.92rem}

/* ---------- faq ---------- */
.faq{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line); padding:16px 0}
.faq summary{cursor:pointer; font-family:var(--display); font-weight:600; font-size:1.02rem; list-style:none; display:flex; justify-content:space-between; gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--mono); color:var(--alert)}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--ink-soft); margin-top:8px; max-width:70ch; font-size:.95rem}

/* ---------- help button (email CTA) ---------- */
.help-fab{position:fixed; right:calc(16px + env(safe-area-inset-right,0px)); bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:40; display:flex; flex-direction:column; align-items:center; gap:4px; text-decoration:none; filter:drop-shadow(0 8px 14px rgba(19,32,56,.30)); transition:transform .15s ease}
.help-fab img{width:92px; height:92px; display:block}
.help-fab:hover{transform:translateY(-2px) scale(1.04)}
.help-fab:active{transform:translateY(2px) scale(.97)}
.help-fab span{font-family:var(--mono); font-size:.64rem; letter-spacing:.06em; background:var(--ink); color:var(--on-ink); padding:2px 7px}
@media (max-width:600px){ .help-fab img{width:66px; height:66px} .help-fab span{display:none} }
body.no-fab .help-fab{display:none}
@media (max-width:600px){ footer.site{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))} body.no-fab footer.site{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))} }
.email-cta{display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; border:1px solid var(--line); background:var(--card); padding:20px 24px}
@media (max-width:560px){ .email-cta{grid-template-columns:1fr; justify-items:start} }
.email-cta .btnimg{display:block; line-height:0; transition:transform .15s ease}
.email-cta .btnimg:hover{transform:scale(1.04)}
.email-cta .btnimg:active{transform:scale(.97)}
.email-cta img{width:128px; height:128px}
.email-cta h3{font-size:1.2rem; font-weight:600; margin-bottom:4px}
.email-cta p{color:var(--ink-soft); font-size:.94rem; max-width:56ch}
.addr{font-family:var(--mono); font-weight:600; font-size:1.05rem; color:var(--ink); user-select:all}
.email-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:12px}

/* ---------- backup & recovery ---------- */
.prevent-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:40px; align-items:start}
@media (max-width:900px){ .prevent-grid{grid-template-columns:1fr} }
.compare{border:1px solid var(--line); background:var(--card); overflow-x:auto}
.compare table{width:100%; border-collapse:collapse; font-size:.9rem; min-width:460px}
.compare th{font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); font-weight:600}
.compare th.bad{color:var(--alert)} .compare th.good{color:var(--ok)}
.compare td{padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink-soft)}
.compare tr:last-child td{border-bottom:0}
.compare td:first-child{color:var(--ink); font-weight:600; width:30%}
.compare td.good{background:var(--ok-wash); color:var(--ink)}
.bk-offers{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:900px){ .bk-offers{grid-template-columns:1fr} }
.bk{border:1px solid var(--line); border-top:4px solid var(--ok); background:var(--card); padding:24px; display:flex; flex-direction:column; gap:12px}
.bk.dr{border-top-color:var(--ink)}
.bk h3{font-size:1.22rem; font-weight:600}
.bk .quote{font-family:var(--mono); font-size:.8rem; color:var(--ok); font-weight:600}
.bk.dr .quote{color:var(--ink)}
.bk p{color:var(--ink-soft); font-size:.94rem}
.bk .btn{margin-top:auto; align-self:flex-start}
.terms{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:700px){ .terms{grid-template-columns:1fr} }
.term{border:1px solid var(--line); background:var(--paper-2); padding:18px 20px}
.term b{font-family:var(--mono); font-size:1.1rem; color:var(--alert)}
.term p{color:var(--ink-soft); font-size:.92rem; margin-top:4px}
.tip{border:1px solid color-mix(in srgb, var(--ok) 40%, transparent); background:var(--ok-wash); padding:14px 16px; font-size:.9rem; margin-top:14px}
.tip b{display:block; margin-bottom:2px}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line); padding-block:40px calc(40px + env(safe-area-inset-bottom,0px))}
.foot{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:28px}
@media (max-width:800px){ .foot{grid-template-columns:1fr 1fr} }
@media (max-width:460px){ .foot{grid-template-columns:1fr} }
.foot h4{font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; color:var(--ink-soft); font-weight:500; text-transform:uppercase; margin-bottom:10px}
.foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; font-size:.9rem}
.foot a{text-decoration:none; color:var(--ink-soft)}
.foot a:hover{color:var(--ink); text-decoration:underline}
.foot .fb{font-size:.88rem; color:var(--ink-soft); max-width:36ch}
.foot .fb b{color:var(--ink); font-family:var(--display)}
.foot-help{display:flex; align-items:center; gap:12px; margin-top:16px; text-decoration:none}
.foot-help img{width:64px; height:64px}
.foot-help span{font-family:var(--mono); font-size:.84rem; color:var(--ink)}
.foot-bottom{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; border-top:1px solid var(--line); margin-top:28px; padding-top:18px; font-size:.8rem; color:var(--ink-soft); font-family:var(--mono)}

/* ---------- multi-page additions ---------- */
.brand img{display:block; height:26px; width:auto}
a.sym-btn{text-decoration:none}
.icon{width:28px; height:28px; display:block}
.prob-card .icon{margin-bottom:4px}
.h-icon{width:44px; height:44px; padding:9px; border:1px solid var(--line); background:var(--card); margin-bottom:16px}
.skip{position:absolute; left:-999px; top:8px; background:var(--ink); color:var(--on-ink); padding:8px 12px; z-index:50}
.skip:focus{left:8px}