/* Public website (bizmoro.com). Uses the colour tokens from app.css, so the white and dark themes match the app. */
.site { margin: 0; --wrap: 1160px; --hero-bg: radial-gradient(1200px 520px at 85% -10%, rgba(226, 176, 74, .16), transparent 60%), radial-gradient(900px 500px at -10% 10%, rgba(20, 67, 47, .10), transparent 60%);
  --sec-alt: var(--surface-2); --card: var(--surface); --gold-btn: #3F62E0; --gold-btn-ink: #14211a; --wa: #25d366; font-size: 16px; }
:root[data-theme="dark"] .site { --hero-bg: radial-gradient(1100px 560px at 85% -10%, rgba(226, 176, 74, .14), transparent 60%), radial-gradient(900px 600px at -10% 0%, rgba(30, 110, 74, .22), transparent 60%);
  --sec-alt: #0f1a14; }
:where(.site) a:not([class]) { color: inherit; }
.site .s-wrap a:not([class]):hover { color: var(--gold); }
.site main { display: block; padding: 0; }
@media (max-width: 900px) { .site main { padding: 0; } }
.skip { position: absolute; left: -999px; top: 8px; background: var(--fg); color: var(--bg); padding: 8px 12px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.s-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 max(20px, env(safe-area-inset-left)); }
.s-narrow { max-width: 820px; }
.s-center { text-align: center; margin-top: 28px; }

/* Buttons */
.s-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); color: var(--fg) !important; font-weight: 600; font-size: .95rem; text-decoration: none; cursor: pointer; transition: transform .15s, border-color .15s, filter .15s; white-space: nowrap; }
.s-btn:hover { border-color: var(--gold); transform: translateY(-1px); }
.s-btn-gold { background: var(--gold-btn); border-color: var(--gold-btn); color: var(--gold-btn-ink) !important; }
.s-btn-gold:hover { filter: brightness(1.06); border-color: var(--gold-btn); }
.s-btn-wa { background: var(--wa); border-color: var(--wa); color: #06331a !important; }
.s-btn-ghost { background: transparent; }
.s-btn-lg { padding: 14px 24px; font-size: 1.02rem; border-radius: 14px; }
.s-btn-block { width: 100%; }
.s-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--gold) !important; text-decoration: none; }
.s-link:hover { text-decoration: underline; }
.s-link .s-ic { width: 18px; height: 18px; }
.s-ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Top bar */
.s-nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.s-nav-in { display: flex; align-items: center; gap: 24px; height: 68px; }
.s-nav .brand { padding: 0; text-decoration: none; }
.s-links { display: flex; gap: 4px; margin-left: 12px; }
.s-links a { padding: 8px 12px; border-radius: 10px; text-decoration: none; color: var(--muted); font-weight: 500; font-size: .95rem; }
.s-links a:hover, .s-links a[aria-current="page"] { color: var(--fg); background: var(--surface-2); }
.s-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.s-show-sm { display: none; }
.s-signin { white-space: nowrap; padding: 9px 14px; text-decoration: none; font-weight: 600; border-radius: 10px; }
.s-signin:hover { background: var(--surface-2); }
.s-theme { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); display: grid; place-items: center; color: var(--fg); }
.s-theme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.s-theme .i-sun { display: none; }
:root[data-theme="dark"] .s-theme .i-sun { display: block; }
:root[data-theme="dark"] .s-theme .i-moon { display: none; }
.s-menu { display: none; position: relative; }
.s-menu summary { list-style: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); display: grid; place-items: center; cursor: pointer; background: var(--card); }
.s-menu summary::-webkit-details-marker { display: none; }
.s-menu summary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.s-menu-panel { position: absolute; right: 0; top: 48px; width: min(300px, calc(100vw - 32px)); background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.s-menu-panel a:not(.s-btn) { padding: 11px 12px; border-radius: 10px; text-decoration: none; font-weight: 500; }
.s-menu-panel a:not(.s-btn):hover { background: var(--surface-2); }
.s-menu-panel .s-btn { margin-top: 6px; }

/* Hero */
.s-hero { background: var(--hero-bg); padding: 64px 0 80px; overflow: hidden; }
.s-hero-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.s-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--gold); margin-bottom: 14px; }
.s-kicker::before { content: ""; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.s-hero h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.02; }
.s-lead { font-size: 1.12rem; color: var(--muted); margin-top: 18px; max-width: 60ch; line-height: 1.6; }
.s-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.s-note { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .92rem; margin-top: 16px; }
.s-note .s-ic { width: 18px; height: 18px; color: var(--good); }
.s-hero-art { position: relative; display: flex; justify-content: center; padding: 20px 0; }
.s-phone { width: 330px; max-width: 100%; border-radius: 38px; background: #0b141a; border: 8px solid #1d2a24; box-shadow: 0 40px 80px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04); overflow: hidden; }
.s-phone-top { display: flex; align-items: center; gap: 10px; background: #1f2c33; color: #e9edef; padding: 14px 16px; }
.s-phone-top small { display: block; color: #8696a0; font-size: .75rem; }
.s-phone-top .brand-word { display: none; }
.s-av .brand { padding: 0; }
.s-av .brand-coin { width: 36px; height: 36px; }
.s-chat { padding: 16px 12px 22px; display: flex; flex-direction: column; gap: 8px; min-height: 420px; font-size: .86rem; color: #e9edef;
  background: #0b141a radial-gradient(circle at 20% 20%, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 18px 18px; }
.s-chat .b { max-width: 84%; padding: 8px 11px; border-radius: 10px; line-height: 1.45; }
.s-chat .in { align-self: flex-end; background: #005c4b; border-top-right-radius: 3px; }
.s-chat .out { align-self: flex-start; background: #202c33; border-top-left-radius: 3px; }
.s-chat .btns { display: flex; gap: 6px; margin-top: 8px; }
.s-chat .btns span { flex: 1; text-align: center; padding: 6px; border-radius: 8px; background: #2a3942; color: #53bdeb; font-weight: 600; font-size: .8rem; }
.s-voice { display: flex; align-items: center; gap: 8px; min-width: 200px; }
.s-voice .play { width: 0; height: 0; border-left: 10px solid #e9edef; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.s-voice .wave { display: flex; align-items: center; gap: 2px; flex: 1; }
.s-voice .wave i { width: 3px; border-radius: 2px; background: #8fd3c3; height: 8px; }
.s-voice .wave i:nth-child(3n) { height: 16px; } .s-voice .wave i:nth-child(4n) { height: 11px; } .s-voice .wave i:nth-child(5n) { height: 20px; }
.s-voice small { color: #a5c9c0; font-size: .72rem; }
.s-float { position: absolute; background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; box-shadow: 0 18px 40px rgba(0,0,0,.22); }
.s-phone-wrap { position: relative; width: 330px; max-width: 100%; }
.s-float-a { left: -70px; bottom: -40px; display: flex; flex-direction: column; gap: 2px; }
.s-float-a strong { font-size: 1.35rem; font-family: var(--display); }
.s-up { color: var(--good); font-weight: 700; font-size: .82rem; }
.s-float-b { right: -70px; top: 16px; display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .88rem; }
.s-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--wa); box-shadow: 0 0 0 4px color-mix(in srgb, var(--wa) 25%, transparent); }

/* Sections */
.s-sec { padding: 88px 0; }
.s-sec.s-tight { padding: 48px 0 72px; }
.s-alt { background: var(--sec-alt); border-block: 1px solid var(--line); }
.s-sec-head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.s-sec-head h2, .s-h2-lg { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; }
.s-sec-head p { color: var(--muted); font-size: 1.08rem; margin-top: 14px; }
.s-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.s-split .s-lead { margin-bottom: 22px; }

/* Stats + chart */
.s-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.s-stat { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 4px; }
.s-stat strong { font-family: var(--display); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -.02em; color: var(--gold); line-height: 1; }
.s-stat span { color: var(--muted); font-weight: 500; }
.s-chart { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 24px; }
.s-chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.s-chart-head > div { display: flex; flex-direction: column; gap: 2px; }
.s-chart-head strong { font-size: 1.7rem; font-family: var(--display); }
.s-chart-pick { display: flex; gap: 8px; }
.s-chart-pick select { appearance: none; background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 34px 9px 12px; font-weight: 600; font-size: .9rem; color: var(--fg); }
.s-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.s-chart .g { stroke: var(--line); stroke-dasharray: 3 5; }
.s-chart .base { stroke: var(--line); }
.s-chart .bar rect { fill: color-mix(in srgb, var(--gold) 45%, transparent); transition: fill .15s; }
.s-chart .bar.now rect, .s-chart .bar:hover rect { fill: var(--gold); }
.s-chart text { font-family: var(--mono); font-size: 11px; fill: var(--muted); }
.s-chart text.v { fill: var(--fg); font-weight: 500; }
.s-chart.htmx-request { opacity: .6; }

/* Features */
.s-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.s-feat { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 26px; display: flex; flex-direction: column; gap: 10px; transition: border-color .15s, transform .15s; }
.s-feat:hover { border-color: color-mix(in srgb, var(--gold) 60%, var(--line)); transform: translateY(-2px); }
.s-feat h3 { font-size: 1.18rem; }
.s-feat p { color: var(--muted); line-height: 1.55; }
.s-feat-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold); flex: none; }

/* Steps */
.s-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: s; }
.s-steps li { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.s-steps p { color: var(--muted); line-height: 1.55; }
.s-steps .s-link { margin-top: auto; padding-top: 8px; }
.s-step-n { width: 40px; height: 40px; border-radius: 50%; background: var(--gold-btn); color: var(--gold-btn-ink); display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 1.1rem; }

/* Store showcase */
.s-ticks { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 12px; }
.s-ticks li { display: flex; gap: 10px; align-items: center; }
.s-ticks .s-ic { color: var(--good); width: 20px; height: 20px; }
.s-stores { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.s-stores img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 14px 30px rgba(0,0,0,.14); display: block; }
.s-stores img:nth-child(2n) { transform: translateY(24px); }

/* Plans */
.s-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.s-plan { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 30px; display: flex; flex-direction: column; gap: 14px; }
.s-plan-hot { border: 2px solid var(--gold); box-shadow: 0 24px 50px color-mix(in srgb, var(--gold) 16%, transparent); }
.s-badge { position: absolute; top: -13px; left: 30px; background: var(--gold-btn); color: var(--gold-btn-ink); font-size: .75rem; font-weight: 700; padding: 4px 12px; border-radius: 99px; }
.s-plan h3 { font-size: 1.25rem; }
.s-price strong { font-family: var(--display); font-size: 2.4rem; font-weight: 800; letter-spacing: -.02em; }
.s-price span { color: var(--muted); margin-left: 6px; }
.s-plan-sum { color: var(--muted); line-height: 1.55; flex: 1; }

/* FAQ */
.s-faqs { display: flex; flex-direction: column; gap: 10px; }
.s-faq { background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.s-faq summary { list-style: none; cursor: pointer; padding: 18px 20px; font-weight: 600; font-size: 1.04rem; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.s-faq summary::-webkit-details-marker { display: none; }
.s-plus { width: 14px; height: 14px; position: relative; flex: none; }
.s-plus::before, .s-plus::after { content: ""; position: absolute; inset: 6px 0 auto; height: 2px; background: var(--gold); border-radius: 2px; transition: transform .2s; }
.s-plus::after { transform: rotate(90deg); }
.s-faq[open] .s-plus::after { transform: rotate(0); }
.s-faq .s-prose { padding: 0 20px 18px; color: var(--muted); }
.s-group { font-size: 1.15rem; margin: 34px 0 14px; }
.s-group:first-child { margin-top: 0; }

/* Call to action band */
.s-cta { padding: 0 0 88px; }
.s-cta-in { background: #3F62E0 radial-gradient(700px 300px at 100% 0%, rgba(226,176,74,.25), transparent 60%); color: #F6F7F9; border-radius: 28px; padding: 56px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.s-cta h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; max-width: 18ch; }
.s-cta p { color: #E4E7EC; margin-top: 10px; font-size: 1.05rem; }
.s-cta .s-cta-row { margin-top: 0; }
.s-cta .s-btn-ghost { color: #F6F7F9 !important; border-color: rgba(245,242,234,.35); }

/* Page heads, lists, docs */
.s-pagehead { background: var(--hero-bg); padding: 56px 0 40px; border-bottom: 1px solid var(--line); }
.s-pagehead h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.06; max-width: 22ch; }
.s-pagehead .s-lead { margin-top: 14px; }
.s-crumbs { font-size: .9rem; color: var(--muted); margin-bottom: 14px; }
.s-crumbs a { color: var(--gold); text-decoration: none; }
.s-helphead { text-align: center; padding: 64px 0 56px; }
.s-helphead h1 { margin: 0 auto; }
.s-search { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 6px 6px 6px 16px; margin: 26px auto 0; max-width: 620px; box-shadow: 0 14px 30px rgba(0,0,0,.08); }
.s-search .s-ic { color: var(--muted); }
.s-search input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 16px; padding: 10px 0; outline: none; color: var(--fg); }
.s-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.s-cat { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.s-cat-top { display: flex; gap: 14px; text-decoration: none; align-items: flex-start; }
.s-cat-top h2 { font-size: 1.12rem; }
.s-cat-top p { color: var(--muted); font-size: .92rem; margin-top: 3px; }
.s-cat ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.s-cat li a { display: block; padding: 10px 0; border-bottom: 1px dashed var(--line); text-decoration: none; font-weight: 500; }
.s-cat li:last-child a { border-bottom: 0; }
.s-cat li a:hover { color: var(--gold); }
.s-list { display: flex; flex-direction: column; gap: 10px; }
.s-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; text-decoration: none; transition: border-color .15s; }
.s-row:hover { border-color: var(--gold); }
.s-row > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.s-row span { color: var(--muted); font-size: .93rem; }
.s-row > .s-ic { color: var(--gold); }
.s-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.s-tags i { font-style: normal; font-size: .8rem; font-weight: 600; color: var(--fg); background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; padding: 3px 10px; display: inline-flex; align-items: center; gap: 4px; }
.s-tags i .s-ic { width: 13px; height: 13px; }
.s-tags-lg { margin-top: 16px; }
.s-tags-lg i { font-size: .88rem; padding: 5px 12px; }
.s-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.s-chips a { padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); text-decoration: none; font-weight: 500; }
.s-chips a:hover { border-color: var(--gold); }
.s-helpbox { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); border-radius: 18px; padding: 22px 24px; margin-top: 40px; }
.s-helpbox p { color: var(--muted); margin-top: 2px; }
.s-doc-head { max-width: 1000px; }
.s-doc { display: grid; grid-template-columns: 240px 1fr; gap: 48px; max-width: 1000px; align-items: start; }
.s-doc-side { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 2px; }
.s-doc-side .label { margin-bottom: 8px; }
.s-doc-side a { padding: 8px 12px; border-radius: 10px; text-decoration: none; color: var(--muted); font-size: .94rem; border-left: 2px solid transparent; }
.s-doc-side a:hover { color: var(--fg); }
.s-doc-side a[aria-current="page"] { color: var(--fg); font-weight: 600; background: var(--surface-2); border-left-color: var(--gold); border-radius: 0 10px 10px 0; }
.s-prose { font-size: 1.04rem; line-height: 1.7; }
.s-prose > * + * { margin-top: 14px; }
.s-prose h2 { font-size: 1.35rem; margin-top: 32px; }
.s-prose h3 { font-size: 1.1rem; margin-top: 24px; }
.s-prose ul, .s-prose ol { padding-left: 22px; }
.s-prose li + li { margin-top: 6px; }
.s-prose ol { counter-reset: n; list-style: none; padding-left: 0; }
.s-prose ol li { counter-increment: n; position: relative; padding-left: 40px; min-height: 28px; }
.s-prose ol li::before { content: counter(n); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--gold-soft); color: var(--gold); font-weight: 700; font-size: .85rem; display: grid; place-items: center; }
.s-prose a { color: var(--gold); }
.s-prose strong { color: var(--fg); }
.s-article { min-width: 0; }
.s-updated { color: var(--muted); font-size: .88rem; margin-top: 28px !important; }
.s-empty { background: var(--card); border: 1px dashed var(--line); border-radius: 16px; padding: 24px; color: var(--muted); }
.s-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.s-values div { border-top: 2px solid var(--gold); padding-top: 14px; }
.s-values p { color: var(--muted); margin-top: 6px; font-size: .95rem; }

/* Job application form */
.s-apply { margin-top: 48px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 30px; scroll-margin-top: 90px; }
.s-apply h2 { font-size: 1.4rem; margin-bottom: 18px; }
.s-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.s-form .wide { grid-column: 1 / -1; }
.s-field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .92rem; }
.s-field input, .s-field textarea { font: inherit; font-size: 16px; font-weight: 400; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; width: 100%; }
.s-field input:focus, .s-field textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: transparent; }
.s-field input[type=file] { padding: 9px; }
.s-field small { color: var(--muted); font-weight: 400; }
.s-err { color: var(--bad) !important; }
.s-small { color: var(--muted); font-size: .88rem; }
.site .flash { list-style: none; padding: 0; margin: 0 0 18px; }
.site .flash li { padding: 14px 16px; border-radius: 12px; background: var(--good-soft); color: var(--fg); font-weight: 500; }
.site .flash li.info { background: var(--gold-soft); }

/* Footer */
.s-foot { border-top: 1px solid var(--line); padding: 56px 0 28px; background: var(--sec-alt); }
.s-foot-grid { display: grid; grid-template-columns: 1.5fr repeat(5, minmax(0, 1fr)); gap: 28px; }
.s-foot-brand { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.s-foot-brand .brand { padding: 0; text-decoration: none; }
.s-foot-brand p { color: var(--muted); font-size: .93rem; max-width: 34ch; }
.s-foot h4 { font-family: var(--display); font-size: .95rem; margin: 4px 0 12px; }
.s-foot-grid > div:not(.s-foot-brand) { display: flex; flex-direction: column; gap: 9px; }
.s-foot-grid a:not(.s-btn):not(.brand) { color: var(--muted); text-decoration: none; font-size: .93rem; }
.s-foot-grid a:not(.s-btn):not(.brand):hover { color: var(--fg); }
.s-foot-base { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; }

/* Tablet and phone */
@media (max-width: 1000px) {
  .s-links { display: none; }
  .s-menu { display: block; }
  .s-hero-in, .s-split { grid-template-columns: 1fr; gap: 40px; }
  .s-hero { padding: 40px 0 56px; }
  .s-feats, .s-cats { grid-template-columns: 1fr 1fr; }
  .s-stats { grid-template-columns: 1fr 1fr; }
  .s-foot-grid { grid-template-columns: 1fr 1fr; }
  .s-foot-brand { grid-column: 1 / -1; }
  .s-doc { grid-template-columns: 1fr; gap: 24px; }
  .s-doc-side { position: static; order: 2; border-top: 1px solid var(--line); padding-top: 18px; }
}
@media (max-width: 680px) {
  .s-nav-in { gap: 10px; height: 60px; }
  .s-hide-sm { display: none; }
  .s-show-sm { display: inline; }
  .s-navcta { padding: 8px 12px; white-space: nowrap; }
  .s-signin { padding: 8px 10px; }
  .s-sec { padding: 60px 0; }
  .s-feats, .s-cats, .s-steps, .s-plans, .s-values { grid-template-columns: 1fr; }
  .s-stats { gap: 10px; }
  .s-stat { padding: 18px; border-radius: 16px; }
  .s-chart { padding: 16px; }
  .s-chart-pick { width: 100%; }
  .s-chart-pick select { flex: 1; min-width: 0; }
  .s-chart text.v { display: none; }
  .s-float-a { left: -8px; bottom: -30px; }
  .s-float-b { right: -8px; top: -34px; }
  .s-phone { width: 300px; }
  .s-cta-in { padding: 34px 24px; border-radius: 22px; }
  .s-cta-row .s-btn { flex: 1; }
  .s-form { grid-template-columns: 1fr; }
  .s-apply { padding: 20px; }
  .s-search { padding-left: 12px; }
  .s-search .s-btn { padding: 10px 14px; }
  .s-stores img:nth-child(2n) { transform: none; }
  .s-btn-lg { padding: 13px 18px; }
}
@media (prefers-reduced-motion: reduce) { .site * { transition: none !important; } }

/* Older public pages (guides, salary calculator) inside the website frame */
.s-public { display: flex; flex-direction: column; gap: 18px; padding-block: 40px 72px; }
.s-public h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; }
.s-public .view { max-width: none; }

/* Chat button and window */
.kc { position: fixed; right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.kc-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: 99px; padding: 14px 20px 14px 16px; background: var(--gold-btn); color: var(--gold-btn-ink); font-weight: 700; font-size: .95rem; box-shadow: 0 14px 34px rgba(0,0,0,.28); cursor: pointer; transition: transform .15s; }
.kc-btn:hover { transform: translateY(-2px); }
.kc-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.kc-dot { position: absolute; top: 6px; right: 8px; width: 12px; height: 12px; border-radius: 50%; background: #e5484d; border: 2px solid var(--gold-btn); }
.kc[data-open] .kc-btn span { display: none; }
.kc[data-open] .kc-btn { padding: 14px; }
.kc-panel { width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 120px)); background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 70px rgba(0,0,0,.35); display: flex; flex-direction: column; overflow: hidden; }
.kc-panel[hidden] { display: none; }
.kc-head { display: flex; align-items: center; gap: 10px; padding: 14px 12px 14px 16px; background: #3F62E0; color: #F6F7F9; }
.kc-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kc-head small { color: #b9cbbf; font-size: .78rem; }
.kc-av .brand { padding: 0; } .kc-av .brand-word { display: none; } .kc-av .brand-coin { width: 34px; height: 34px; }
.kc-icon { width: 34px; height: 34px; border-radius: 10px; border: 0; background: transparent; color: #F6F7F9; display: grid; place-items: center; cursor: pointer; }
.kc-icon:hover { background: rgba(255,255,255,.1); }
.kc-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kc-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); }
.kc-msg { max-width: 85%; display: flex; flex-direction: column; gap: 3px; }
.kc-msg p { margin: 0; padding: 10px 13px; border-radius: 14px; line-height: 1.45; font-size: .92rem; white-space: pre-line; overflow-wrap: anywhere; }
.kc-msg small { font-size: .7rem; color: var(--muted); padding: 0 4px; }
.kc-msg.visitor { align-self: flex-end; align-items: flex-end; }
.kc-msg.visitor p { background: var(--gold-btn); color: var(--gold-btn-ink); border-bottom-right-radius: 4px; }
.kc-msg.ai p, .kc-msg.team p { background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.kc-msg.team p { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
.kc-msg a { color: var(--gold); font-weight: 600; }
.kc-typing p { color: var(--muted); font-style: italic; }
.kc-contact { padding: 12px 14px; border-top: 1px solid var(--line); background: var(--gold-soft); display: flex; flex-direction: column; gap: 8px; font-size: .86rem; }
.kc-contact[hidden] { display: none; }
.kc-contact > div { display: flex; gap: 6px; }
.kc-contact input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--fg); }
.kc-contact .s-btn { padding: 8px 12px; align-self: flex-start; }
.kc-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); align-items: flex-end; }
.kc-form textarea { flex: 1; min-width: 0; resize: none; font: inherit; font-size: 16px; line-height: 1.4; max-height: 120px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
.kc-form textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.kc-send { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; background: var(--gold-btn); color: var(--gold-btn-ink); display: grid; place-items: center; cursor: pointer; }
.kc-send svg { width: 20px; height: 20px; fill: currentColor; }
.kc-foot { margin: 0; padding: 0 14px 10px; font-size: .72rem; color: var(--muted); text-align: center; }
@media (max-width: 680px) {
  .kc { right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .kc-btn span { display: none; } .kc-btn { padding: 14px; }
  .kc[data-open] { left: 8px; right: 8px; top: calc(8px + env(safe-area-inset-top, 0px)); }
  .kc[data-open] .kc-btn { display: none; }
  .kc-panel { width: 100%; height: 100%; }
}

/* Readable gold: on the cream (white) theme the brand gold is too light for text, so text uses a deeper gold. */
.site { --gold-text: #7f5b12; }
:root[data-theme="dark"] .site { --gold-text: #e9bd5f; }
.site .s-kicker, .site .s-crumbs a, .site .s-prose a, .site .s-feat-ic { color: var(--gold-text); }
.site .s-link { color: var(--gold-text) !important; }
.site .s-prose ol li::before { color: var(--gold-text); }

/* Top bar dropdowns */
.s-dd { position: relative; }
.s-dd-btn { display: inline-flex; align-items: center; gap: 4px; padding: 8px 10px 8px 12px; border-radius: 10px; border: 0; background: transparent;
  color: var(--muted); font: inherit; font-weight: 500; font-size: .95rem; cursor: pointer; white-space: nowrap; }
.s-dd-btn:hover, .s-dd.is-open .s-dd-btn, .s-dd-btn.is-current { color: var(--fg); background: var(--surface-2); }
.s-dd-chev { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.s-dd.is-open .s-dd-chev { transform: rotate(180deg); }
.s-dd-panel { position: absolute; top: calc(100% + 10px); left: -12px; z-index: 30; width: min(720px, calc(100vw - 48px)); display: grid; grid-template-columns: 220px 1fr; gap: 6px;
  background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 18px; padding: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); }
.s-dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* keeps hover alive across the gap */
.s-dd-small { width: 340px; display: flex; flex-direction: column; gap: 2px; }
.s-dd-intro { background: var(--surface-2); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.s-dd-intro .s-kicker { margin: 0; }
.s-dd-intro p { color: var(--muted); font-size: .9rem; line-height: 1.5; margin: 0; }
.s-dd-intro .s-link { margin-top: auto; font-size: .9rem; }
.s-dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.s-dd-item { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--fg) !important; }
.s-dd-item strong { font-size: .93rem; font-weight: 600; line-height: 1.3; }
.s-dd-item span { font-size: .8rem; line-height: 1.4; color: var(--muted); }
.s-dd-item:hover, .s-dd-item:focus-visible { background: var(--surface-2); }
.s-dd-item:hover strong { color: var(--gold-text); }
@media (max-width: 1180px) { .s-dd-panel { width: min(600px, calc(100vw - 48px)); grid-template-columns: 1fr; } .s-dd-intro { display: none; } }

/* Phone menu: accordions and room to scroll */
.s-menu-panel { max-height: calc(100dvh - 84px); overflow-y: auto; overscroll-behavior: contain; }
.s-acc { border-radius: 10px; }
.s-acc > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; border-radius: 10px; font-weight: 600; cursor: pointer; }
.s-acc > summary::-webkit-details-marker { display: none; }
.s-acc > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -4px 4px 0 0; transition: transform .15s; }
.s-acc[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.s-acc > summary:hover { background: var(--surface-2); }
.s-acc[open] { background: var(--surface-2); }
.s-acc-list { display: flex; flex-direction: column; padding: 0 6px 8px; }
.s-menu-panel .s-acc-list a { padding: 9px 10px; font-size: .92rem; font-weight: 500; color: var(--fg); }
.s-menu-panel .s-acc-list a:hover { background: var(--card); }
.s-menu-panel .s-acc-list .s-acc-all { color: var(--gold-text); font-weight: 600; }

/* Trust & safety pages */
.s-trust-aud { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.s-trust-card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.s-trust-top { display: flex; gap: 16px; text-decoration: none; color: var(--fg) !important; align-items: flex-start; }
.s-trust-top h2 { font-size: 1.3rem; }
.s-trust-top p { color: var(--muted); font-size: .95rem; margin-top: 4px; line-height: 1.5; }
.s-trust-card ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.s-trust-card li a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 2px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--fg); font-weight: 500; }
.s-trust-card li:last-child a { border-bottom: 0; }
.s-trust-card li a .s-ic { width: 18px; height: 18px; color: var(--muted); }
.s-trust-card li a:hover { color: var(--gold-text); }
.s-trust-card li a:hover .s-ic { color: var(--gold-text); transform: translateX(2px); }
.s-promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.s-promise { background: var(--sec-alt); border: 1px solid var(--line); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.s-promise strong { font-family: var(--display); font-size: 1.25rem; letter-spacing: -.01em; }
.s-promise p { color: var(--muted); font-size: .92rem; line-height: 1.5; flex: 1; }
.s-promise .s-link { font-size: .9rem; }
.s-seg { display: inline-flex; gap: 4px; margin-top: 22px; padding: 4px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); max-width: 100%; }
.s-seg a { padding: 9px 16px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: .93rem; color: var(--muted); white-space: nowrap; }
.s-seg a[aria-current="page"] { background: var(--fg); color: var(--bg); }
.s-seg a:not([aria-current="page"]):hover { color: var(--fg); background: var(--surface-2); }
.s-trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.s-trust-item { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 20px; background: var(--card); border: 1px solid var(--line);
  text-decoration: none; color: var(--fg) !important; transition: border-color .15s, transform .15s; }
.s-trust-item:hover { border-color: var(--gold); transform: translateY(-2px); }
.s-trust-n { font-family: var(--mono); font-size: .8rem; color: var(--gold-text); font-weight: 500; }
.s-trust-item h2 { font-size: 1.12rem; line-height: 1.3; }
.s-trust-item p { color: var(--muted); font-size: .93rem; line-height: 1.55; flex: 1; }
.s-trust-meta { display: flex; align-items: center; justify-content: space-between; font-size: .84rem; color: var(--muted); padding-top: 10px; border-top: 1px solid var(--line); }
.s-trust-meta .s-ic { width: 18px; height: 18px; color: var(--gold-text); }
.s-tdoc-head { max-width: 1160px; }
.s-tdoc-head h1 { max-width: 26ch; }
.s-docmeta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; color: var(--muted); font-size: .88rem; }
.s-docmeta span + span::before { content: "·"; margin-right: 18px; margin-left: -10px; }
.s-tdoc { display: grid; grid-template-columns: 230px minmax(0, 1fr) 210px; gap: 44px; align-items: start; }
.s-tdoc-main { min-width: 0; max-width: 720px; }
.s-tdoc-side .s-tdoc-other { margin-top: 12px; color: var(--gold-text); font-weight: 600; }
.s-toc { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 6px; font-size: .88rem; }
.s-toc ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--line); }
.s-toc a { display: block; padding: 5px 12px; color: var(--muted); text-decoration: none; line-height: 1.35; margin-left: -1px; border-left: 2px solid transparent; }
.s-toc a:hover, .s-toc a.is-here { color: var(--fg); border-left-color: var(--gold); }
.s-toc-m { display: none; border: 1px solid var(--line); border-radius: 14px; background: var(--card); margin-bottom: 8px; }
.s-toc-m summary { padding: 12px 16px; font-weight: 600; cursor: pointer; }
.s-toc-m ol { margin: 0; padding: 0 16px 14px 16px !important; }
.s-toc-m ol li { padding-left: 34px !important; }
.s-toc-m a { color: var(--fg); text-decoration: none; }
.s-article h2[id] { scroll-margin-top: 90px; }
.s-callout { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); }
.s-callout p { margin: 0; color: var(--fg); }
.s-callout-ic { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-text); color: var(--bg); font-weight: 800; font-size: .85rem; margin-top: 2px; }
.s-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.s-table:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.s-table table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.5; }
.s-table th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--surface-2); font-weight: 700; }
.s-table th, .s-table td { padding: 12px 16px; vertical-align: top; }
.s-table td { border-top: 1px solid var(--line); }
.s-table td:first-child { font-weight: 600; }
.s-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 40px !important; }
.s-pn a { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--fg) !important; background: var(--card); }
.s-pn a:hover { border-color: var(--gold); }
.s-pn small { color: var(--muted); font-size: .8rem; }
.s-pn span { font-weight: 600; line-height: 1.35; }
.s-pn-next { text-align: right; grid-column: 2; }
@media (max-width: 1180px) {
  .s-tdoc { grid-template-columns: 220px minmax(0, 1fr); }
  .s-toc { display: none; }
  .s-toc-m { display: block; }
}
@media (max-width: 1000px) {
  .s-trust-aud { grid-template-columns: 1fr; }
  .s-promises { grid-template-columns: 1fr 1fr; }
  .s-trust-grid { grid-template-columns: 1fr 1fr; }
  .s-tdoc { grid-template-columns: 1fr; gap: 24px; }
  .s-tdoc-side { position: static; order: 2; border-top: 1px solid var(--line); padding-top: 18px; }
  .s-foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .s-promises, .s-trust-grid { grid-template-columns: 1fr; }
  .s-trust-card { padding: 18px; border-radius: 18px; }
  .s-seg { display: flex; width: 100%; }
  .s-seg a { flex: 1; text-align: center; padding: 9px 8px; }
  .s-pn { grid-template-columns: 1fr; }
  .s-pn-next { grid-column: 1; }
  /* Tables become stacked cards on a phone, each cell labelled with its column. */
  .s-table { border: 0; background: transparent; overflow: visible; }
  .s-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .s-table table, .s-table tbody, .s-table tr, .s-table td { display: block; width: 100%; }
  .s-table tr { border: 1px solid var(--line); border-radius: 14px; background: var(--card); margin-bottom: 10px; padding: 6px 0; }
  .s-table td { border: 0; padding: 6px 14px; }
  .s-table td::before { content: attr(data-label); display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; margin-bottom: 2px; }
  .s-table td:first-child { font-size: 1.02rem; }
}

/* Phones: the top bar must fit 320px and up with no sideways scroll. Sign in is also in the menu. */
@media (max-width: 680px) {
  .s-nav-in { min-width: 0; }
  .s-nav .brand { min-width: 0; flex: 0 1 auto; }
  .s-actions { gap: 6px; flex: none; }
}
@media (max-width: 680px) {
  .s-signin { display: none; }  /* phones: one "Start" button signs people in or up */
}
.s-m-note { font-size: .82rem; color: var(--muted); margin: 6px 0 0; text-align: center; width: 100%; }
.s-m-cta { flex-wrap: wrap; }
@media (max-width: 440px) {
  .s-theme, .s-menu summary { width: 38px; height: 38px; }
}
.s-hero-in > *, .s-split > * { min-width: 0; }
@media (max-width: 360px) { .s-phone { width: 100%; max-width: 280px; } .s-cta-row .s-btn { white-space: normal; } }
.s-menu .s-acc > summary { width: auto; height: auto; border: 0; background: transparent; display: flex; place-items: initial; }
.s-menu .s-acc[open] > summary, .s-menu .s-acc > summary:hover { background: var(--surface-2); }
.s-dd-item span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Phone menu, tidied: a sheet under the top bar with grouped sections and the buttons at the bottom. */
@media (max-width: 1000px) {
  .s-menu[open] > summary { background: var(--surface-2); }
  .s-menu-panel { position: fixed; left: 0; right: 0; top: var(--s-nav-h, 64px); width: auto; max-height: none; height: calc(100dvh - var(--s-nav-h, 64px));
    border-radius: 0; border: 0; border-top: 1px solid var(--line); box-shadow: none; padding: 12px max(16px, env(safe-area-inset-left, 0px)) 0;
    gap: 0; overflow-y: auto; z-index: 60; animation: s-sheet .18s ease-out; }
  @keyframes s-sheet { from { opacity: 0; transform: translateY(-6px); } }
  .s-m-main { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
  .s-menu-panel .s-m-main a { padding: 14px; border-radius: 14px; background: var(--surface-2); font-weight: 600; text-align: center; }
  .s-menu-panel .s-m-main a[aria-current] { outline: 2px solid var(--gold); outline-offset: -2px; }
  .s-m-label { margin: 4px 4px 6px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .s-menu .s-acc { border-bottom: 1px solid var(--line); border-radius: 0; }
  .s-menu .s-acc[open] { background: transparent; }
  .s-menu .s-acc > summary { padding: 14px 4px; font-size: 1rem; }
  .s-menu .s-acc[open] > summary, .s-menu .s-acc > summary:hover { background: transparent; color: var(--gold-text); }
  .s-acc-list { padding: 0 0 10px; }
  .s-menu-panel .s-acc-list a { padding: 9px 12px; border-left: 2px solid var(--line); border-radius: 0; margin-left: 4px; }
  .s-m-small { display: flex; align-items: center; gap: 10px; padding: 16px 4px; color: var(--muted); font-size: .92rem; }
  .s-menu-panel .s-m-small a { padding: 4px 0; font-weight: 500; color: var(--muted); }
  .s-m-theme { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font: inherit; font-size: .88rem; cursor: pointer; }
  .s-m-theme svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .s-m-theme .i-sun { display: none; }
  :root[data-theme="dark"] .s-m-theme .i-sun { display: block; }
  :root[data-theme="dark"] .s-m-theme .i-moon { display: none; }
  .s-m-cta { position: sticky; bottom: 0; margin: auto -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    background: var(--card); border-top: 1px solid var(--line); }
  .s-menu-panel .s-m-cta .s-btn { margin: 0; justify-content: center; text-align: center; }
  body:has(.s-menu[open]) { overflow: hidden; }
}
@media (max-width: 480px) {
  .s-actions > .s-theme { display: none; }   /* moved into the menu on phones */
  .s-nav .brand-word { font-size: 1.15rem; }
}
@media (max-width: 1000px) { body:has(.s-menu[open]) .kc { display: none !important; } }