:root{
  --ground:#EEF2F7; --surface:#FFFFFF; --paper:#FFFDF5; --ink:#0B1B2E; --ink2:#31445A; --muted:#5E6E82;
  --line:#D6DEE8; --line2:#E6EBF2; --blue:#0A5BD3; --blue-ink:#0848A8; --blue-soft:#DCE8FB;
  --tape:#FFC72C; --tape-ink:#3D2E00; --ok:#177A4B; --err:#B42318;
  --deep:#0A1A33; --deep2:#112646; --on-deep:#E8EFF8; --on-deep-muted:#9DB0C8;
  --shadow:0 1px 0 rgba(11,27,46,.04), 0 18px 40px -24px rgba(11,27,46,.35);
  --display:"Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body:"Instrument Sans", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#08111E; --surface:#0F1C2E; --paper:#132338; --ink:#E9F0F8; --ink2:#C3D0DF; --muted:#8FA2B8;
    --line:#22354D; --line2:#1A2B40; --blue:#5B9BFF; --blue-ink:#8AB8FF; --blue-soft:#15294A;
    --tape:#FFC72C; --tape-ink:#2B2000; --ok:#4CC38A; --err:#FF8A7A;
    --deep:#050C17; --deep2:#0C1A2E; --shadow:0 18px 40px -24px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#08111E; --surface:#0F1C2E; --paper:#132338; --ink:#E9F0F8; --ink2:#C3D0DF; --muted:#8FA2B8;
  --line:#22354D; --line2:#1A2B40; --blue:#5B9BFF; --blue-ink:#8AB8FF; --blue-soft:#15294A;
  --tape:#FFC72C; --tape-ink:#2B2000; --ok:#4CC38A; --err:#FF8A7A;
  --deep:#050C17; --deep2:#0C1A2E; --shadow:0 18px 40px -24px rgba(0,0,0,.7);
  color-scheme:dark;
}
[hidden]{display:none!important}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *:not(.strip-track){animation:none!important; transition:none!important} }
body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display); margin:0; text-wrap:balance; letter-spacing:-.02em; line-height:1.05}
p{margin:0}
a{color:var(--blue)}
button{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--blue); outline-offset:2px; border-radius:6px}
.wrap{max-width:1180px; margin:0 auto; padding-inline:clamp(16px,4vw,32px)}
.mono{font-family:var(--mono)}
.label{font-family:var(--mono); font-size:.74rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}

/* ---------- nav ---------- */
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:color-mix(in srgb,var(--ground) 86%,transparent); backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; gap:24px; min-height:66px}
.brand{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); margin-right:auto}
.brand svg{color:var(--blue); flex:none}
.brand b{font-family:var(--display); font-weight:800; font-size:1.28rem; letter-spacing:-.03em}
.brand b span{font-weight:500; color:var(--muted)}
.navlinks{display:flex; align-items:center; gap:26px}
.navlinks a{color:var(--ink2); text-decoration:none; font-weight:500; font-size:.95rem}
.navlinks a:hover{color:var(--blue)}
.navlinks a.btn-blue,.navlinks a.btn-blue:hover{color:#fff}
:root[data-theme="dark"] .navlinks a.btn-blue{color:#06121F}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .navlinks a.btn-blue{color:#06121F} }
.navphone{font-family:var(--mono); font-size:.86rem; color:var(--ink); text-decoration:none; white-space:nowrap}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; padding:12px 22px; font-weight:600; font-size:.96rem; text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:transform .15s ease, background .15s ease, border-color .15s ease; white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-blue{background:var(--blue); color:#fff}
.btn-blue:hover{background:var(--blue-ink)}
:root[data-theme="dark"] .btn-blue{color:#06121F}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn-blue{color:#06121F} }
.btn-line{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-line:hover{border-color:var(--ink)}
.btn-tape{background:var(--tape); color:var(--tape-ink)}
.btn-tape:hover{filter:brightness(1.05)}
.btn-lg{padding:15px 28px; font-size:1.02rem}
.navtoggle{display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--line); background:var(--surface); cursor:pointer; align-items:center; justify-content:center}
@media (max-width:900px){
  .navphone{display:none}
  .navtoggle{display:inline-flex}
  .navlinks{position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:0; padding:8px clamp(16px,4vw,32px) 18px; background:var(--surface); border-bottom:1px solid var(--line); box-shadow:var(--shadow)}
  .navlinks:not(.open){display:none}
  .navlinks a{padding:13px 0; border-bottom:1px solid var(--line2)}
  .navlinks .btn{margin-top:12px; border-bottom:0}
  .nav .wrap{position:relative}
}

/* ---------- hero ---------- */
.hero{padding-block:clamp(40px,7vw,84px) clamp(40px,6vw,72px)}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(32px,5vw,72px); align-items:start}
@media (max-width:920px){ .hero .wrap{grid-template-columns:1fr} }
.pill{display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 8px; border-radius:999px; background:var(--surface); border:1px solid var(--line); font-size:.84rem; font-weight:500; color:var(--ink2); margin-bottom:22px}
.pill i{width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 20%,transparent); display:block}
.hero h1{font-size:clamp(2.7rem,6.6vw,5.4rem); font-weight:800; letter-spacing:-.045em; line-height:.96; margin-bottom:24px}
.hero h1 .strike{position:relative; white-space:nowrap; color:var(--muted); font-weight:500}
.hero h1 .strike::after{content:""; position:absolute; left:-2%; right:-2%; top:54%; height:.09em; background:var(--ink); border-radius:4px; transform:rotate(-2deg)}
.hero h1 .hl{background:linear-gradient(transparent 58%, var(--tape) 58%, var(--tape) 92%, transparent 92%); padding-inline:.04em}
:root[data-theme="dark"] .hero h1 .hl{color:var(--ink)}
.lede{font-size:clamp(1.06rem,1.6vw,1.22rem); color:var(--ink2); max-width:48ch; margin-bottom:30px}
.herobtns{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:36px}
.facts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border-top:1px solid var(--line); max-width:560px}
.facts div{padding:16px 16px 0 0}
.facts div + div{padding-left:16px; border-left:1px solid var(--line)}
.facts b{display:block; font-family:var(--display); font-size:1.5rem; font-weight:700; letter-spacing:-.03em}
.facts span{font-size:.84rem; color:var(--muted); line-height:1.35; display:block}
@media (max-width:480px){ .facts b{font-size:1.2rem} .facts span{font-size:.76rem} }

/* ---------- the ticket ---------- */
.ticketwrap{position:relative; padding-top:14px}
.ticket{position:relative; background:var(--paper); border-radius:6px; box-shadow:var(--shadow); border:1px solid var(--line); transform:rotate(.6deg)}
@media (max-width:920px){ .ticket{transform:none} }
.ticket::before{content:""; position:absolute; top:-14px; left:50%; width:128px; height:30px; margin-left:-64px; background:color-mix(in srgb,var(--tape) 88%,transparent); transform:rotate(-3deg); box-shadow:0 2px 4px rgba(0,0,0,.08); z-index:2}
.t-head{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; padding:26px 24px 16px; border-bottom:2px dashed var(--line)}
.t-head h3{font-size:1.35rem; font-weight:800}
.t-code{font-family:var(--mono); font-size:.8rem; color:var(--muted); text-align:right; line-height:1.4}
.t-code b{color:var(--ink); font-weight:600; white-space:nowrap}
.t-list{list-style:none; margin:0; padding:10px 12px}
.t-item label{display:grid; grid-template-columns:24px 1fr auto; align-items:center; gap:12px; padding:10px 12px; border-radius:8px; cursor:pointer}
.t-item label:hover{background:color-mix(in srgb,var(--blue) 7%,transparent)}
.t-item input{position:absolute; opacity:0; pointer-events:none}
.box{width:22px; height:22px; border:2px solid var(--ink2); border-radius:5px; display:grid; place-items:center; transition:background .15s, border-color .15s}
.box svg{opacity:0; transform:scale(.6); transition:.15s}
.t-item input:checked + .box{background:var(--blue); border-color:var(--blue)}
.t-item input:checked + .box svg{opacity:1; transform:none}
.t-item input:focus-visible + .box{outline:3px solid var(--blue); outline-offset:2px}
.t-name{font-weight:500; color:var(--ink)}
.t-name small{display:block; color:var(--muted); font-size:.8rem; font-weight:400}
.t-item input:checked ~ .t-name{color:var(--ink)}
.t-price{font-family:var(--mono); font-size:.9rem; color:var(--ink2); font-variant-numeric:tabular-nums; white-space:nowrap}
.t-extra{padding:0 24px 6px; font-size:.84rem; color:var(--muted)}
.t-extra ul{list-style:none; margin:0; padding:0}
.t-extra li{display:flex; justify-content:space-between; gap:10px; padding:4px 0; font-family:var(--mono); font-size:.82rem; color:var(--ink2)}
.t-extra li button{background:none; border:0; color:var(--muted); cursor:pointer; padding:0 0 0 6px}
.t-foot{border-top:2px dashed var(--line); padding:16px 24px 22px; display:grid; gap:6px}
.t-row{display:flex; justify-content:space-between; font-family:var(--mono); font-size:.86rem; color:var(--muted); font-variant-numeric:tabular-nums}
.t-total{display:flex; justify-content:space-between; align-items:baseline; margin-top:6px}
.t-total span{font-weight:600}
.t-total b{font-family:var(--display); font-size:2.3rem; font-weight:800; letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.t-total b small{font-family:var(--body); font-size:.95rem; font-weight:500; color:var(--muted); letter-spacing:0; margin-right:6px}
.t-note{font-size:.8rem; color:var(--muted); margin-top:4px}
.t-cta{margin-top:12px; width:100%}
.stamp{display:inline-block; margin-left:10px; vertical-align:middle; font-family:var(--mono); font-weight:600; font-size:.72rem; letter-spacing:.14em; color:var(--blue); border:2px solid var(--blue); border-radius:6px; padding:5px 9px; transform:rotate(-9deg); opacity:.75; pointer-events:none}

/* ---------- area strip ---------- */
.strip{background:var(--tape); color:var(--tape-ink); overflow:hidden; border-block:1px solid color-mix(in srgb,var(--tape-ink) 20%,transparent)}
.strip-track{display:flex; gap:0; width:max-content; animation:slide 34s linear infinite; will-change:transform}
.strip:hover .strip-track{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){ .strip-track{animation-duration:70s} }
.strip-track span{font-family:var(--display); font-weight:700; font-size:1.05rem; padding:13px 22px; white-space:nowrap; letter-spacing:-.01em}
.strip-track span::after{content:"✕"; font-size:.7rem; margin-left:44px; opacity:.5; vertical-align:2px}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section{padding-block:clamp(64px,9vw,112px)}
.shead{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:24px 48px; align-items:end; margin-bottom:44px}
@media (max-width:820px){ .shead{grid-template-columns:1fr} }
.shead h2{font-size:clamp(2.1rem,4.6vw,3.6rem); font-weight:800; letter-spacing:-.04em}
.shead p{color:var(--ink2); font-size:1.05rem; max-width:52ch}
.shead .label{display:block; margin-bottom:14px}

/* ---------- rate card ---------- */
.rc-controls{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-bottom:26px}
.seg{display:inline-flex; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:4px}
.seg button{border:0; background:none; padding:10px 18px; border-radius:999px; font-weight:600; font-size:.94rem; cursor:pointer; color:var(--ink2)}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--ground)}
.search{position:relative; flex:0 1 300px; min-width:0}
.search input{width:100%; font:inherit; font-size:.95rem; padding:11px 14px 11px 40px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink)}
.search svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted)}
.rc{columns:3 320px; column-gap:22px}
.rc-cat{break-inside:avoid; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px 20px 12px; margin-bottom:22px}
.rc-cat h3{font-size:1.25rem; font-weight:700; display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:8px}
.rc-cat h3 span{font-family:var(--mono); font-size:.72rem; font-weight:500; color:var(--muted); letter-spacing:.06em}
.rc-row{display:flex; align-items:baseline; gap:8px; width:100%; background:none; border:0; border-top:1px solid var(--line2); padding:10px 0; text-align:left; cursor:pointer}
.rc-row:first-of-type{border-top:0}
.rc-row .n{font-size:.93rem; color:var(--ink)}
.rc-row .d{flex:1; border-bottom:1.5px dotted var(--line); transform:translateY(-4px); min-width:12px}
.rc-row .p{font-family:var(--mono); font-size:.84rem; color:var(--ink2); white-space:nowrap; font-variant-numeric:tabular-nums}
.rc-row .add{flex:none; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; color:var(--muted); transition:.15s; align-self:center}
.rc-row:hover .add{border-color:var(--blue); color:var(--blue)}
.rc-row[aria-pressed="true"] .add{background:var(--blue); border-color:var(--blue); color:#fff}
.rc-row[aria-pressed="true"] .n{font-weight:600}
.rc-empty{padding:30px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:14px}
.nottrades{display:flex; gap:14px; align-items:flex-start; margin-top:8px; padding:16px 18px; border-radius:12px; background:var(--blue-soft); color:var(--ink2); font-size:.92rem}
.nottrades svg{flex:none; color:var(--blue); margin-top:2px}

/* ---------- lifecycle ---------- */
.life{background:var(--deep); color:var(--on-deep)}
.life .shead p{color:var(--on-deep-muted)}
.life .label{color:var(--tape)}
.track{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; counter-reset:s}
@media (max-width:900px){ .track{grid-template-columns:1fr} }
.track li{position:relative; padding:26px 22px 0 0; counter-increment:s}
.track li::before{content:""; position:absolute; top:8px; left:0; right:0; height:2px; background:color-mix(in srgb,var(--on-deep) 18%,transparent)}
.track li::after{content:""; position:absolute; top:2px; left:0; width:14px; height:14px; border-radius:50%; background:var(--deep); border:2px solid var(--tape)}
.track li:last-child::after{background:var(--tape)}
.track .k{font-family:var(--mono); font-size:.74rem; color:var(--on-deep-muted); letter-spacing:.08em}
.track h3{font-size:1.3rem; font-weight:700; margin:6px 0 8px; color:#fff}
.track p{font-size:.92rem; color:var(--on-deep-muted); max-width:30ch}
@media (max-width:900px){
  .track li{padding:0 0 28px 34px}
  .track li::before{top:14px; bottom:-2px; left:6px; right:auto; width:2px; height:auto}
  .track li:last-child::before{display:none}
  .track li::after{top:2px}
}
.rules{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px; margin-top:64px; background:color-mix(in srgb,var(--on-deep) 14%,transparent); border:1px solid color-mix(in srgb,var(--on-deep) 14%,transparent); border-radius:14px; overflow:hidden}
.rules div{background:var(--deep2); padding:22px}
.rules b{display:block; font-family:var(--display); font-size:1.08rem; color:#fff; margin-bottom:6px; letter-spacing:-.01em}
.rules span{font-size:.9rem; color:var(--on-deep-muted)}

/* ---------- forms ---------- */
.split{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,64px); align-items:start}
@media (max-width:900px){ .split{grid-template-columns:1fr} }
.card{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:clamp(20px,3.4vw,34px)}
.fgrid{display:grid; gap:16px}
.two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:560px){ .two{grid-template-columns:1fr} }
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field label{font-size:.86rem; font-weight:600; color:var(--ink)}
.field input,.field select,.field textarea{font:inherit; font-size:.98rem; padding:12px 14px; border-radius:10px; border:1.5px solid var(--line); background:var(--ground); color:var(--ink); width:100%}
.field textarea{min-height:108px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 18%,transparent)}
.hp{position:absolute; left:-9999px; top:-9999px}
.fnote{font-size:.84rem; color:var(--muted)}
.confirm{text-align:center; padding:14px 4px}
.tick{width:58px; height:58px; border-radius:50%; background:color-mix(in srgb,var(--ok) 16%,transparent); color:var(--ok); display:grid; place-items:center; margin:0 auto 16px}
.confirm h3{font-size:1.5rem; margin-bottom:8px}
.confirm p{color:var(--ink2)}
.summary{text-align:left; background:var(--ground); border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin:16px 0; font-size:.9rem; display:grid; gap:4px; overflow-wrap:anywhere}
.cbtns{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:10px}
.side h3{font-size:1.5rem; margin-bottom:12px}
.checks{list-style:none; margin:20px 0 0; padding:0; display:grid; gap:12px}
.checks li{display:grid; grid-template-columns:22px 1fr; gap:10px; color:var(--ink2); font-size:.96rem}
.checks svg{color:var(--blue); margin-top:3px}

/* worker pay */
.workers{background:var(--surface); border-block:1px solid var(--line)}
.calc{background:var(--deep); color:var(--on-deep); border-radius:18px; padding:26px; margin-top:28px}
.calc .label{color:var(--on-deep-muted)}
.calc-out{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:10px 0 18px}
.calc-out b{font-family:var(--display); font-size:clamp(2.6rem,6vw,3.6rem); font-weight:800; letter-spacing:-.04em; color:var(--tape); font-variant-numeric:tabular-nums; line-height:1}
.calc-out span{color:var(--on-deep-muted)}
.slider{display:grid; gap:6px; margin-bottom:14px}
.slider div{display:flex; justify-content:space-between; font-size:.88rem}
.slider output{font-family:var(--mono); color:#fff}
.slider input{width:100%; accent-color:var(--tape)}
.calc small{display:block; color:var(--on-deep-muted); font-size:.8rem; line-height:1.5; border-top:1px solid color-mix(in srgb,var(--on-deep) 14%,transparent); padding-top:12px}

/* check-in */
.ci-err{font-size:.88rem; color:var(--err)}
.sig{border:1.5px dashed var(--line); border-radius:10px; background:#fff; touch-action:none}
.sig canvas{display:block; width:100%; height:170px; cursor:crosshair}
.sigfoot{display:flex; justify-content:space-between; font-size:.8rem; color:var(--muted); margin-top:6px}
.linkbtn{background:none; border:0; color:var(--blue); font-weight:600; cursor:pointer; padding:0; font-size:.9rem}
.payline{background:var(--blue-soft); border-radius:10px; padding:14px 16px; margin:16px 0; text-align:left; font-size:.94rem; color:var(--ink)}
.cbox{display:flex; gap:10px; align-items:flex-start; font-size:.92rem; cursor:pointer}
.cbox input{margin-top:4px; width:18px; height:18px; accent-color:var(--blue)}

/* faq + legal */
.faq{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px}
@media (max-width:820px){ .faq{grid-template-columns:1fr} }
details{border-top:1px solid var(--line)}
details summary{list-style:none; cursor:pointer; padding:20px 36px 20px 0; position:relative; font-family:var(--display); font-weight:700; font-size:1.12rem; letter-spacing:-.01em}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+"; position:absolute; right:4px; top:16px; font-family:var(--mono); font-size:1.4rem; font-weight:400; color:var(--blue); transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details .a{padding:0 0 22px; color:var(--ink2); max-width:60ch}
.legal{padding-block:0 clamp(56px,8vw,96px)}
.legal details .a p{margin-bottom:12px; font-size:.94rem}
.legal details .a h4{font-family:var(--body); font-size:.96rem; letter-spacing:0; margin:16px 0 6px; color:var(--ink)}
.legalnote{font-size:.84rem; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px 14px}

/* footer */
footer{background:var(--deep); color:var(--on-deep-muted); padding-block:64px 36px}
.fbig{font-family:var(--display); font-weight:800; font-size:clamp(2.4rem,7vw,5.6rem); letter-spacing:-.05em; line-height:.95; color:#fff; margin-bottom:40px}
.fbig a{color:var(--tape); text-decoration:none}
.fgrid4{display:grid; grid-template-columns:1.4fr 1fr 1fr auto; gap:32px}
@media (max-width:820px){ .fgrid4{grid-template-columns:1fr 1fr} }
@media (max-width:460px){ .fgrid4{grid-template-columns:1fr} }
footer h4{font-family:var(--mono); font-size:.74rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--on-deep-muted); margin-bottom:12px}
footer a{color:var(--on-deep); text-decoration:none}
footer a:hover{color:var(--tape)}
.flinks{display:grid; gap:8px; font-size:.94rem}
.qr{background:#fff; border-radius:12px; padding:9px; width:108px; height:108px; line-height:0}
.qr svg{width:100%; height:100%}
.fbottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:44px; padding-top:20px; border-top:1px solid color-mix(in srgb,var(--on-deep) 12%,transparent); font-size:.82rem}

/* sticky ticket bar */
.tbar{position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,0); z-index:60; display:flex; align-items:center; gap:14px; background:var(--ink); color:var(--ground); border-radius:999px; padding:8px 8px 8px 20px; box-shadow:0 18px 40px -12px rgba(0,0,0,.45); max-width:calc(100% - 32px); transition:transform .25s ease, opacity .25s ease}
.tbar[hidden]{display:flex!important; opacity:0; transform:translate(-50%,140%); pointer-events:none}
.tbar .txt{font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.tbar .txt b{font-family:var(--mono); font-weight:600}
.tbar .btn{padding:10px 18px}

/* seniors & accessibility discount row on the ticket */
.t-disc{padding:0 12px 6px}
.t-disc label{display:grid; grid-template-columns:24px 1fr; align-items:center; gap:12px; padding:10px 12px; border-radius:8px; cursor:pointer; border:1px dashed var(--line)}
.t-disc label:hover{background:color-mix(in srgb,var(--blue) 7%,transparent)}
.t-disc input{position:absolute; opacity:0; pointer-events:none}
.t-disc input:checked + .box{background:var(--blue); border-color:var(--blue)}
.t-disc input:checked + .box svg{opacity:1; transform:none}
.t-disc input:focus-visible + .box{outline:3px solid var(--blue); outline-offset:2px}
.t-disc .t-name small{display:block; color:var(--muted); font-size:.78rem}
.nottrades.supplies{background:var(--surface); border:1px solid var(--line)}
.cbox small{display:block; color:var(--muted); font-size:.82rem; margin-top:2px}

/* star rating */
.stars{display:flex; gap:6px}
.stars button{background:none; border:0; padding:4px; cursor:pointer; color:var(--line); line-height:0; border-radius:6px}
.stars button svg{width:34px; height:34px; transition:transform .12s ease}
.stars button:hover svg{transform:scale(1.08)}
.stars button.on{color:#F5A524}
.starword{font-size:.86rem; color:var(--muted)}
.tags{display:flex; flex-wrap:wrap; gap:8px}
.tags button{border:1px solid var(--line); background:var(--surface); color:var(--ink2); border-radius:999px; padding:8px 14px; font-size:.88rem; font-weight:500; cursor:pointer}
.tags button[aria-pressed="true"]{background:var(--blue); border-color:var(--blue); color:#fff}

/* =====================================================================
   v5 — marketplace redesign: multi-page nav, paths, job board, worker rates
   ===================================================================== */
.navlinks a[aria-current="page"]{color:var(--ink); font-weight:700; box-shadow:inset 0 -2px 0 var(--tape)}
@media (max-width:900px){ .navlinks a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--tape); padding-left:12px} }
.navlinks .navcount{display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; margin-left:6px; border-radius:999px; background:var(--tape); color:var(--tape-ink); font-family:var(--mono); font-size:.72rem; font-weight:600; vertical-align:1px}
.skip{position:absolute; left:-9999px; top:8px; z-index:100; background:var(--ink); color:var(--ground); padding:10px 14px; border-radius:8px}
.skip:focus{left:12px}

/* page hero for inner pages */
.phero{padding-block:clamp(40px,6vw,76px) clamp(28px,4vw,48px)}
.phero .wrap{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,5vw,64px); align-items:end}
@media (max-width:920px){ .phero .wrap{grid-template-columns:1fr; align-items:start} }
.phero h1{font-size:clamp(2.5rem,6vw,4.6rem); font-weight:800; letter-spacing:-.045em; line-height:.98; margin:16px 0 20px}
.phero h1 .hl{background:linear-gradient(transparent 58%, var(--tape) 58%, var(--tape) 92%, transparent 92%); padding-inline:.04em}
:root[data-theme="dark"] .phero h1 .hl{color:var(--ink)}
.phero .lede{margin-bottom:26px}
.phero.dark{background:var(--deep); color:var(--on-deep)}
.phero.dark .lede{color:var(--on-deep-muted)}
.phero.dark .label{color:var(--tape)}
.phero.dark h1{color:#fff}
.phero.dark h1 .hl{color:var(--ink)}
.phero.dark .btn-line{color:#fff; border-color:color-mix(in srgb,#fff 35%,transparent)}
.phero.dark .btn-line:hover{border-color:#fff}
.crumbs{font-family:var(--mono); font-size:.78rem; color:var(--muted); letter-spacing:.04em}
.crumbs a{color:inherit}

/* two paths */
.paths{padding-block:clamp(48px,7vw,84px) 0}
.paths .wrap{display:grid; grid-template-columns:1fr 1fr; gap:22px}
@media (max-width:820px){ .paths .wrap{grid-template-columns:1fr} }
.path{position:relative; border-radius:20px; padding:clamp(24px,3.6vw,38px); border:1px solid var(--line); background:var(--surface); display:flex; flex-direction:column; gap:14px; overflow:hidden}
.path h2{font-size:clamp(1.8rem,3.4vw,2.5rem); font-weight:800; letter-spacing:-.035em}
.path p{color:var(--ink2); max-width:44ch}
.path .pbtns{display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; padding-top:8px}
.path.work{background:var(--deep); color:var(--on-deep); border-color:transparent}
.path.work p{color:var(--on-deep-muted)}
.path.work .label{color:var(--tape)}
.path.work h2{color:#fff}
.path.work .btn-line{color:#fff; border-color:color-mix(in srgb,#fff 35%,transparent)}
.path ul{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:.95rem}
.path li{display:grid; grid-template-columns:20px 1fr; gap:8px}
.path li svg{color:var(--blue); margin-top:4px}
.path.work li svg{color:var(--tape)}
.livepill{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.8rem; color:var(--tape); letter-spacing:.02em}
.livepill i{width:8px; height:8px; border-radius:50%; background:var(--tape); box-shadow:0 0 0 4px color-mix(in srgb,var(--tape) 25%,transparent); animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--tape) 0%,transparent)}}

/* job board */
.board-controls{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-bottom:24px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips button{border:1px solid var(--line); background:var(--surface); color:var(--ink2); border-radius:999px; padding:9px 15px; font-size:.9rem; font-weight:600; cursor:pointer}
.chips button span{font-family:var(--mono); font-weight:500; color:var(--muted); margin-left:4px}
.chips button[aria-pressed="true"]{background:var(--ink); color:var(--ground); border-color:var(--ink)}
.chips button[aria-pressed="true"] span{color:inherit; opacity:.7}
.jobs{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:18px}
.job{position:relative; background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:20px 20px 18px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow)}
.job::before{content:""; position:absolute; top:-9px; right:22px; width:70px; height:18px; background:color-mix(in srgb,var(--tape) 85%,transparent); transform:rotate(4deg)}
.job .jtop{display:flex; justify-content:space-between; align-items:center; gap:10px}
.job .svc{font-size:.8rem; font-weight:600; background:var(--blue-soft); color:var(--blue-ink); padding:4px 10px; border-radius:999px}
:root[data-theme="dark"] .job .svc{color:var(--ink)}
.job .ref{font-family:var(--mono); font-size:.76rem; color:var(--muted)}
.job h3{font-size:1.45rem; font-weight:800; letter-spacing:-.03em}
.job .meta{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.88rem; color:var(--ink2)}
.job .meta span{display:inline-flex; align-items:center; gap:6px}
.job .meta svg{color:var(--muted)}
.job .note{font-size:.9rem; color:var(--ink2); border-left:3px solid var(--tape); padding:2px 0 2px 10px}
.job .pay{display:flex; justify-content:space-between; align-items:baseline; gap:10px; border-top:2px dashed var(--line); padding-top:12px; margin-top:auto}
.job .pay b{font-family:var(--display); font-size:1.5rem; font-weight:800; letter-spacing:-.03em}
.job .pay small{display:block; font-size:.78rem; color:var(--muted)}
.job .pay .posted{font-family:var(--mono); font-size:.74rem; color:var(--muted); text-align:right}
.job .btn{width:100%}
.board-empty{padding:clamp(28px,5vw,48px); text-align:center; border:1.5px dashed var(--line); border-radius:18px; background:var(--surface); display:grid; gap:12px; justify-items:center}
.board-empty h3{font-size:1.5rem}
.board-empty p{color:var(--ink2); max-width:52ch}
.board-note{display:flex; gap:14px; align-items:flex-start; margin-top:26px; padding:16px 18px; border-radius:12px; background:var(--blue-soft); color:var(--ink2); font-size:.92rem}
.board-note svg{flex:none; color:var(--blue); margin-top:2px}
.teaser .jobs{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.statrow{display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--line); max-width:520px}
.statrow div{padding:14px 18px 0 0}
.statrow div + div{padding-left:18px; border-left:1px solid var(--line)}
.statrow b{display:block; font-family:var(--display); font-size:1.6rem; font-weight:800; letter-spacing:-.03em}
.statrow span{font-size:.84rem; color:var(--muted)}
.phero.dark .statrow{border-color:color-mix(in srgb,#fff 18%,transparent)}
.phero.dark .statrow div + div{border-color:color-mix(in srgb,#fff 18%,transparent)}
.phero.dark .statrow b{color:#fff}
.phero.dark .statrow span{color:var(--on-deep-muted)}

/* interest dialog */
dialog.sheet{border:0; padding:0; border-radius:20px; width:min(560px, calc(100% - 24px)); max-height:calc(100dvh - 24px); background:var(--surface); color:var(--ink); box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
dialog.sheet::backdrop{background:rgba(5,12,23,.55); backdrop-filter:blur(3px)}
dialog.sheet .shead2{display:flex; justify-content:space-between; gap:12px; align-items:flex-start; padding:22px 24px 14px; border-bottom:2px dashed var(--line); background:var(--paper)}
dialog.sheet .shead2 h3{font-size:1.4rem}
dialog.sheet .shead2 p{font-size:.88rem; color:var(--muted); margin-top:4px}
dialog.sheet .xbtn{flex:none; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--surface); cursor:pointer; font-size:1.1rem; line-height:1}
dialog.sheet .sbody{padding:20px 24px 24px; overflow:auto}
.ratefield{display:grid; grid-template-columns:auto 1fr; gap:8px; align-items:center}
.money-in{position:relative}
.money-in::before{content:"$"; position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--muted); font-family:var(--mono)}
.money-in::after{content:"/hr"; position:absolute; right:13px; top:50%; transform:translateY(-50%); color:var(--muted); font-family:var(--mono); font-size:.85rem}
.field .money-in input{padding-left:28px; padding-right:44px; font-family:var(--mono)}

/* worker rate picker */
.rates{display:grid; gap:0; border:1.5px solid var(--line); border-radius:12px; overflow:hidden; background:var(--ground)}
.rate{display:grid; grid-template-columns:24px minmax(0,1fr) 128px; gap:12px; align-items:center; padding:11px 14px; border-top:1px solid var(--line2)}
.rate:first-child{border-top:0}
.rate input[type=checkbox]{width:20px; height:20px; accent-color:var(--blue); margin:0}
.rate .rn{font-weight:600; font-size:.94rem; cursor:pointer}
.rate .rn small{display:block; font-weight:400; color:var(--muted); font-size:.78rem; font-family:var(--mono)}
.rate .money-in input{width:100%; font:inherit; font-family:var(--mono); font-size:.95rem; padding:9px 40px 9px 26px; border-radius:8px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink)}
.rate .money-in::before{left:11px}
.rate .money-in::after{right:10px}
.rate .money-in input:disabled{opacity:.45}
.rate .money-in input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 18%,transparent)}
.rate.on{background:var(--surface)}
.rate .keep{grid-column:2 / 4; font-size:.78rem; color:var(--ok); font-family:var(--mono); margin-top:-4px}
.rate .keep.warn{color:var(--err)}
@media (max-width:460px){ .rate{grid-template-columns:24px minmax(0,1fr) 112px; padding:10px} }
.fieldhead{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap}
.fieldhead label, .fieldhead b{font-size:.86rem; font-weight:600}
.fieldhead span{font-size:.8rem; color:var(--muted)}

/* profile preview */
.preview{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:18px; display:grid; gap:10px; box-shadow:var(--shadow)}
.preview .who{display:flex; gap:12px; align-items:center}
.preview .av{width:46px; height:46px; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:1.2rem; flex:none}
.preview .who b{font-family:var(--display); font-size:1.15rem; display:block}
.preview .who span{font-size:.84rem; color:var(--muted)}
.preview ul{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.preview li{display:flex; justify-content:space-between; gap:10px; font-size:.9rem; border-top:1px dotted var(--line); padding-top:4px}
.preview li b{font-family:var(--mono); font-weight:600}
.preview .badge{justify-self:start; font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:6px; border:1.5px solid var(--muted); color:var(--muted)}
.preview .empty{font-size:.88rem; color:var(--muted)}

/* worker page blocks */
.deal{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px}
.deal > div{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px}
.deal b.big{display:block; font-family:var(--display); font-weight:800; font-size:2.4rem; letter-spacing:-.04em; line-height:1; margin-bottom:10px; color:var(--blue)}
.deal h3{font-size:1.15rem; margin-bottom:6px}
.deal p{font-size:.93rem; color:var(--ink2)}
.guide{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; font-size:.94rem}
.guide th, .guide td{text-align:left; padding:13px 16px; border-top:1px solid var(--line2); vertical-align:top}
.guide thead th{border-top:0; font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); background:var(--ground)}
.guide td.r{font-family:var(--mono); white-space:nowrap}
.guide td.k{font-family:var(--mono); white-space:nowrap; color:var(--ok)}
.guide td small{color:var(--muted)}
@media (max-width:640px){ .guide .hide-s{display:none} }
.tablewrap{overflow-x:auto}
.reqs{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-top:8px}
.reqs div{display:grid; grid-template-columns:22px 1fr; gap:10px; font-size:.95rem; color:var(--ink2); padding:14px 16px; background:var(--surface); border:1px solid var(--line); border-radius:12px}
.reqs svg{color:var(--ok); margin-top:3px}
.track.light li::before{background:var(--line)}
.track.light li::after{background:var(--ground); border-color:var(--blue)}
.track.light li:last-child::after{background:var(--blue)}
.track.light .k{color:var(--muted)}
.track.light h3{color:var(--ink)}
.track.light p{color:var(--ink2)}
.track.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){ .track.four{grid-template-columns:1fr} }

/* legal pages */
.prose{max-width:760px}
.prose h2{font-size:1.5rem; margin:34px 0 10px}
.prose h2:first-child{margin-top:0}
.prose p, .prose li{color:var(--ink2); margin-bottom:12px}
.prose ul{padding-left:20px}
.toc{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px}
.toc a{font-size:.88rem; border:1px solid var(--line); border-radius:999px; padding:7px 13px; text-decoration:none; color:var(--ink2); background:var(--surface)}

/* check-in page side list */
.howci{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:16px}
.howci li{display:grid; grid-template-columns:34px 1fr; gap:12px}
.howci .n{width:34px; height:34px; border-radius:50%; background:var(--blue-soft); color:var(--blue-ink); display:grid; place-items:center; font-family:var(--mono); font-weight:600}
:root[data-theme="dark"] .howci .n{color:var(--ink)}
.howci b{display:block}
.howci span{color:var(--ink2); font-size:.94rem}
.footsurvey{display:inline-flex; margin-top:12px; font-size:.88rem; color:var(--tape)!important}
.phero.dark h1 .hl{background:none; color:var(--tape); padding:0}
.statrow{display:grid; grid-template-columns:repeat(3,minmax(0,1fr))}
.rules{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.job .svc, .job .ref{white-space:nowrap}
.job .jtop{flex-wrap:wrap}
@media (max-width:640px){ .board-controls .search{flex:1 1 100%} }

/* =====================================================================
   v6 — pick-your-Spotter: tiles, 3-step how, promise, Spotter cards, booking flow, service & business pages
   ===================================================================== */
.fgrid5{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr auto; gap:28px}
@media (max-width:980px){ .fgrid5{grid-template-columns:1fr 1fr} }
@media (max-width:460px){ .fgrid5{grid-template-columns:1fr} }
.navlinks{gap:22px}
@media (max-width:1100px) and (min-width:901px){ .navlinks{gap:16px} .navlinks a{font-size:.9rem} .navphone{display:none} }

.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px}
.tile{display:grid; gap:6px; align-content:start; padding:20px; border-radius:16px; background:var(--surface); border:1px solid var(--line); color:var(--ink); text-decoration:none; transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease}
.tile:hover{transform:translateY(-2px); border-color:var(--blue); box-shadow:var(--shadow)}
.tile svg{color:var(--blue); margin-bottom:6px}
.tile b{font-family:var(--display); font-size:1.15rem; letter-spacing:-.02em}
.tile span{font-size:.86rem; color:var(--muted); line-height:1.4}
.tile small{font-family:var(--mono); font-size:.8rem; color:var(--ink2); margin-top:4px}

.how3{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
@media (max-width:820px){ .how3{grid-template-columns:1fr} }
.how3 li{background:var(--deep2); border:1px solid color-mix(in srgb,var(--on-deep) 14%,transparent); border-radius:16px; padding:24px}
.how3 .n{display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--tape); color:var(--tape-ink); font-family:var(--display); font-weight:800; font-size:1.15rem; margin-bottom:14px}
.how3 h3{font-size:1.35rem; color:#fff; margin-bottom:8px}
.how3 p{font-size:.94rem; color:var(--on-deep-muted)}
.promise{display:flex; gap:16px; align-items:flex-start; margin-top:28px; padding:20px 22px; border-radius:16px; background:var(--paper); border:1.5px dashed var(--tape); color:var(--ink)}
.life .promise{background:color-mix(in srgb,var(--tape) 12%,var(--deep2)); color:var(--on-deep)}
.promise .pbadge{flex:none; width:46px; height:46px; border-radius:12px; background:var(--tape); color:var(--tape-ink); display:grid; place-items:center}
.promise h3{font-size:1.2rem; margin-bottom:4px}
.life .promise h3{color:#fff}
.promise p{font-size:.94rem; color:var(--ink2)}
.life .promise p{color:var(--on-deep-muted)}
.bside .promise{margin-top:18px}

/* Spotter cards */
.spotstrip{background:var(--surface); border-block:1px solid var(--line)}
.spotters{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px}
.spotters.list{grid-template-columns:1fr}
.spot{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px; display:grid; gap:10px}
.spotstrip .spot{background:var(--ground)}
.spot.top{border-color:color-mix(in srgb,var(--tape) 70%,var(--line)); box-shadow:0 0 0 3px color-mix(in srgb,var(--tape) 22%,transparent)}
.spot .shd{display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:14px; align-items:center}
.spot .av{width:52px; height:52px; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:1.35rem}
.spot.matchcard .av{background:var(--tape); color:var(--tape-ink)}
.spot .who{min-width:0}
.spot .who b{font-family:var(--display); font-size:1.2rem; letter-spacing:-.02em; margin-right:8px}
.spot .who .meta{display:block; font-size:.85rem; color:var(--muted)}
.topbadge{display:inline-block; font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; background:var(--tape); color:var(--tape-ink); padding:3px 8px; border-radius:6px; vertical-align:3px}
.spot .srate{font-family:var(--display); font-weight:800; font-size:1.5rem; letter-spacing:-.03em; white-space:nowrap}
.spot .srate small{font-family:var(--body); font-size:.8rem; font-weight:500; color:var(--muted)}
.sstats{display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:.88rem; color:var(--ink2)}
.sstats .stars i{font-style:normal; color:var(--line)}
.sstats .stars i.on{color:#F5A524}
.sstats .dot{color:var(--muted)}
.sstats .new{font-family:var(--mono); font-size:.76rem; background:var(--blue-soft); color:var(--blue-ink); padding:2px 8px; border-radius:6px}
.spot .bio{font-size:.93rem; color:var(--ink2)}
.stags{display:flex; flex-wrap:wrap; gap:6px}
.stags span{font-size:.78rem; border:1px solid var(--line); border-radius:999px; padding:4px 10px; color:var(--ink2)}
.stags span.svc{background:var(--blue-soft); border-color:transparent; color:var(--blue-ink)}
.spot .btn{justify-self:start}
@media (max-width:520px){ .spot .shd{grid-template-columns:44px minmax(0,1fr)} .spot .av{width:44px; height:44px} .spot .srate{grid-column:2} .spot .btn{justify-self:stretch} }

/* booking flow */
.bookwrap{padding-top:clamp(28px,4vw,48px)}
.bookhead h1{font-size:clamp(2.2rem,5vw,3.4rem); font-weight:800; letter-spacing:-.04em; margin:10px 0 18px}
.stepper{list-style:none; margin:0 0 26px; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.stepper li{display:flex; align-items:center; gap:8px; padding:8px 14px 8px 8px; border-radius:999px; background:var(--surface); border:1px solid var(--line); font-size:.9rem; font-weight:600; color:var(--muted)}
.stepper li span{display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--line2); font-family:var(--mono); font-size:.8rem}
.stepper li[aria-current="step"]{color:var(--ink); border-color:var(--blue)}
.stepper li[aria-current="step"] span{background:var(--blue); color:#fff}
.stepper li.done span{background:var(--ok); color:#fff}
.bookgrid{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:28px; align-items:start}
@media (max-width:960px){ .bookgrid{grid-template-columns:1fr} .bside{order:-1} }
.bh{font-size:1.5rem; font-weight:800; letter-spacing:-.03em; margin-bottom:16px}
.choices{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
.choice{display:flex; align-items:center; gap:10px; padding:13px 14px; border-radius:12px; border:1.5px solid var(--line); background:var(--ground); cursor:pointer; font-weight:600; font-size:.92rem; text-align:left; color:var(--ink)}
.choice svg{flex:none; color:var(--blue)}
.choice:hover{border-color:var(--blue)}
.choice[aria-pressed="true"]{border-color:var(--blue); background:var(--blue-soft); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent)}
.chips.small button{padding:9px 13px; font-size:.88rem}
.chips.small button span{display:block; font-size:.72rem}
.sortbar{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; margin-bottom:6px}
.sortsel{font-size:.88rem; color:var(--muted); display:flex; align-items:center; gap:8px}
.sortsel select{font:inherit; padding:8px 10px; border-radius:10px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink)}
.ordercard{background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:var(--shadow); position:sticky; top:86px}
@media (max-width:960px){ .ordercard{position:static} }
.ordercard dl{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:12px 0 0; font-size:.92rem}
.ordercard dt{color:var(--muted)}
.ordercard dd{margin:0; font-weight:600; text-align:right}
.ordercard .est{border-top:2px dashed var(--line); margin-top:14px; padding-top:12px; display:grid; gap:2px}
.ordercard .est span{font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.ordercard .est b{font-family:var(--display); font-size:2rem; font-weight:800; letter-spacing:-.04em}
.ordercard .est small{font-size:.8rem; color:var(--muted)}

/* service & business pages */
.svcstat{display:grid; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px; box-shadow:var(--shadow)}
.svcicon{width:64px; height:64px; border-radius:16px; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center}
.svcstat b{display:block; font-family:var(--display); font-size:1.8rem; font-weight:800; letter-spacing:-.03em}
.svcstat span{font-size:.88rem; color:var(--muted)}
.guide td.r{white-space:normal}
.sectors{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px}
.sector{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px; display:grid; gap:8px; align-content:start}
.sector h3{font-size:1.15rem}
.sector p{font-size:.92rem; color:var(--ink2)}
.sector small{font-size:.82rem; color:var(--blue-ink); font-weight:600}
.pvbio{font-size:.9rem; color:var(--ink2)}
@media (max-width:960px){ .bside .promise{display:none} }