/* =====================================================================
   Vigil · the style
   Telehealth with a lamp left on: Outfit for calm, round headlines,
   Atkinson Hyperlegible Next for reading (built for low vision), and its
   mono for every time, on cool linen by day and deep navy by night, with
   one warm amber lamp that marks what's next.
   Signature pieces: the night dial (.dial: the clinic's day as a clock,
   every free time a lit tick, the hand on now), the waiting-room queue
   (.queue), the call card (.call), the visit log (.visit) and the lamp
   glow behind the hero (.lamp).
   Motion: html.calm stills everything (footer switch, remembered as
   "site-motion"; default from prefers-reduced-motion).
   ===================================================================== */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html:focus-within { scroll-behavior: smooth; }
html.calm:focus-within { scroll-behavior: auto; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--fs-body)/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--lamp-soft); color: var(--ink); }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 18px; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font-weight: 700; text-decoration: none; transition: top var(--d) var(--ease); }
.skip:focus { top: 12px; }

/* ---------- type ---------- */
.h1, .h2, .h3 { font-family: var(--display); color: var(--ink); text-wrap: balance; }
.h1 { font-size: var(--fs-h1); line-height: 1.02; font-weight: 600; letter-spacing: -0.035em; }
.h2 { font-size: var(--fs-h2); line-height: 1.06; font-weight: 600; letter-spacing: -0.028em; }
.h3 { font-size: var(--fs-h3); line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
/* the signature: the phrase that matters is lit by the lamp */
.h1 em, .h2 em, .h3 em { font-style: normal; color: var(--lamp); }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-2); max-width: 56ch; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-small); }
/* the eyebrow: a small lit dot and a quiet label */
.tag { display: inline-flex; align-items: center; gap: 9px; font: 500 var(--fs-label)/1.2 var(--mono); letter-spacing: 0.02em; color: var(--muted); }
.tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lamp) 18%, transparent); }
.tag.live::before { background: var(--live); box-shadow: 0 0 0 4px color-mix(in srgb, var(--live) 18%, transparent); }
.time, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.prose p + p { margin-top: 1em; }
.prose a, .link { color: var(--lamp); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.prose a:hover, .link:hover { color: var(--lamp-2); }

/* ---------- buttons: pills, the lamp one glows ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: var(--r-pill); border: 1.5px solid transparent; font: 600 16.5px/1 var(--display); letter-spacing: -0.005em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform var(--d-fast) var(--ease), background var(--d-fast), border-color var(--d-fast), color var(--d-fast), box-shadow var(--d); }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform var(--d) var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: scale(0.97); }
.btn-lamp { background: var(--lamp); color: var(--on-lamp); box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--lamp) 80%, transparent); }
.btn-lamp:hover { background: var(--lamp-2); box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--glow) 85%, transparent); }
.btn-line { border-color: color-mix(in srgb, var(--ink) 28%, transparent); background: transparent; color: var(--ink); }
.btn-line:hover { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.btn-quiet { padding-inline: 8px; color: var(--ink); }
.btn-quiet:hover { color: var(--lamp); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 15px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- header and phone menu ---------- */
.nav { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: border-color var(--d) var(--ease); }
.nav.scrolled { border-bottom-color: var(--line); }
.nav-in { position: relative; display: flex; align-items: center; gap: 20px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
/* the mark: a crescent lamp, half lit */
.brand-mark { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--night); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
.brand-mark::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--moon-pale), var(--glow) 55%, #e07b10); box-shadow: 0 0 14px var(--glow); }
.brand-mark::after { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; left: 13px; top: 2px; background: var(--night); }
.brand-word { font: 600 23px/1 var(--display); letter-spacing: -0.03em; }
.brand-sub { display: block; font: 500 11px/1.2 var(--mono); color: var(--muted); margin-top: 3px; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a { padding: 9px 14px; border-radius: var(--r-pill); text-decoration: none; font: 500 15.5px/1 var(--display); color: var(--ink-2); transition: color var(--d-fast), background var(--d-fast); }
.nav-links a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.nav-links a[aria-current="page"] { color: var(--ink); background: color-mix(in srgb, var(--lamp) 14%, transparent); }
.nav-status { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--mono); color: var(--muted); white-space: nowrap; }
.nav-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 10px var(--live); }
.menu-btn { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); cursor: pointer; place-items: center; }
.menu-btn i, .menu-btn i::before, .menu-btn i::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); position: relative; transition: transform var(--d) var(--ease), background var(--d-fast); }
.menu-btn i::before, .menu-btn i::after { content: ""; position: absolute; left: 0; }
.menu-btn i::before { top: -6px; } .menu-btn i::after { top: 6px; }
.menu-btn[aria-expanded="true"] i { background: transparent; }
.menu-btn[aria-expanded="true"] i::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i::after { transform: translateY(-6px) rotate(-45deg); }
/* the phone menu: a night card that drops from the header */
.site-menu { position: absolute; left: 0; right: 0; top: calc(100% + 8px); display: grid; gap: 2px; padding: 12px; border-radius: var(--r-l); background: var(--night); color: var(--night-ink); box-shadow: var(--shadow-lift); transform-origin: top right; animation: vg-drop var(--d) var(--ease) both; }
.site-menu a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 16px; border-radius: var(--r-m); text-decoration: none; font: 500 22px/1.1 var(--display); letter-spacing: -0.02em; color: var(--night-ink); }
.site-menu a small { font: 500 12px/1 var(--mono); color: var(--night-muted); letter-spacing: 0; }
.site-menu a:hover { background: var(--night-2); }
.site-menu a[aria-current="page"] { background: var(--night-2); color: var(--moon-2); }
.site-menu .btn { margin-top: 8px; justify-content: center; background: var(--moon); color: var(--on-moon); font-size: 17px; }
@keyframes vg-drop { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
html.calm .site-menu { animation: none; }
@media (max-width: 960px) { .nav-links, .nav .nav-status { display: none; } .menu-btn { display: grid; } }
@media (max-width: 520px) { .nav .nav-cta { display: none; } }
@media (min-width: 961px) { .site-menu { display: none !important; } }

/* ---------- sections ---------- */
.section { padding-block: clamp(64px, 9vw, 120px); }
.section.alt { background: var(--well); }
.section-head { display: grid; gap: 16px; justify-items: start; max-width: 760px; margin-bottom: clamp(32px, 4.5vw, 56px); }
.section-head.split { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 20px 56px; }
@media (max-width: 860px) { .section-head.split { grid-template-columns: 1fr; } }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.card { position: relative; min-width: 0; padding: 28px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.card p { color: var(--ink-2); }

/* ---------- hero, with the lamp behind it ---------- */
.hero { position: relative; isolation: isolate; overflow-x: clip; padding-block: clamp(36px, 6vw, 88px) clamp(56px, 8vw, 110px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero-copy { display: grid; gap: 24px; justify-items: start; min-width: 0; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 10px 22px; font: 500 13.5px/1.3 var(--mono); color: var(--muted); }
.hero-facts span { display: inline-flex; gap: 8px; align-items: center; }
.hero-facts svg { width: 18px; height: 18px; color: var(--lamp); }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }
/* the lamp: a warm glow that breathes slowly */
.lamp { position: absolute; z-index: -1; right: 4%; top: 2%; width: min(720px, 90vw); aspect-ratio: 1; pointer-events: none; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--glow) 32%, transparent), color-mix(in srgb, var(--glow) 10%, transparent) 38%, transparent 66%); filter: blur(10px); animation: vg-breathe 9s var(--soft) infinite alternate; }
@keyframes vg-breathe { from { opacity: 0.65; transform: scale(0.96); } to { opacity: 1; transform: scale(1.04); } }
html.calm .lamp { animation: none; }
@media (max-width: 980px) { .lamp { right: -30%; top: 30%; } }

/* ---------- the night dial ---------- */
.dial { position: relative; min-width: 0; display: grid; gap: 18px; padding: clamp(18px, 2.6vw, 28px); border-radius: var(--r-l); background: radial-gradient(120% 90% at 50% 0%, #17223f, var(--night) 60%); color: var(--night-ink); box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--night-line); }
.dial-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; font: 500 13px/1.2 var(--mono); color: var(--night-muted); }
.dial-head b { color: var(--night-ink); font-weight: 500; }
.dial-online { display: inline-flex; align-items: center; gap: 8px; }
.dial-online i { width: 8px; height: 8px; border-radius: 50%; background: #4fd6a0; box-shadow: 0 0 10px #4fd6a0; }
.dial.closed .dial-online i { background: #f0b43c; box-shadow: 0 0 10px #f0b43c; }
.dial-face { position: relative; width: min(100%, 420px); aspect-ratio: 1; margin-inline: auto; }
.dial-face svg { width: 100%; height: 100%; overflow: visible; }
.dial .rim { fill: #0e1730; stroke: var(--night-line); stroke-width: 1.5; }
.dial .hour { stroke: #3a4767; stroke-width: 2; stroke-linecap: round; }
.dial .hour.major { stroke: #6e7a99; stroke-width: 2.5; }
.dial .hl { fill: var(--night-muted); font: 500 12px var(--mono); text-anchor: middle; dominant-baseline: middle; }
.dial .open-arc { fill: none; stroke: color-mix(in srgb, var(--moon) 13%, transparent); stroke-width: 34; }
.dial .slot { stroke-linecap: round; stroke-width: 4; stroke: rgba(154, 165, 190, 0.28); transition: stroke var(--d), stroke-width var(--d); }
.dial .slot.past { stroke: rgba(154, 165, 190, 0.1); }
.dial .slot.free { stroke: var(--moon); }
.dial .slot.next { stroke: var(--moon-pale); stroke-width: 6; filter: drop-shadow(0 0 6px var(--moon)); }
.dial .slot.hot { stroke: #fff; stroke-width: 7; }
.dial .slot.taking { animation: vg-take 900ms var(--ease); }
@keyframes vg-take { 0% { stroke: #ffffff; stroke-width: 9; } 100% { stroke: rgba(154, 165, 190, 0.28); stroke-width: 4; } }
.dial .slot.draw { animation: vg-draw 700ms var(--ease) both; animation-delay: var(--dl, 0ms); }
@keyframes vg-draw { from { opacity: 0; } }
.dial .hand { stroke: var(--moon); stroke-width: 2.5; stroke-linecap: round; transition: transform 1.2s var(--soft); transform-origin: 200px 200px; }
.dial .knob { fill: var(--moon); filter: drop-shadow(0 0 8px var(--moon)); }
.dial .hub { fill: var(--moon); }
.dial-read { position: absolute; inset: 30%; display: grid; place-items: center; align-content: center; gap: 4px; text-align: center; pointer-events: none; }
.dial-read .k { font: 500 12px/1.2 var(--mono); color: var(--night-muted); }
.dial-read b { white-space: nowrap; font: 600 clamp(30px, 3.8vw, 44px)/1 var(--display); letter-spacing: -0.03em; color: var(--moon-2); text-shadow: 0 0 24px color-mix(in srgb, var(--moon) 45%, transparent); }
.dial-read b small { margin-left: 4px; font: 500 0.42em/1 var(--mono); letter-spacing: 0; }
.dial-read > span { font: 500 13px/1.3 var(--mono); color: var(--night-ink); }
.dial-next { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dial-next a, .dial-next button { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--night-line); background: rgba(255, 255, 255, 0.03); color: var(--night-ink); text-decoration: none; text-align: left; cursor: pointer; transition: border-color var(--d-fast), background var(--d-fast), transform var(--d-fast) var(--ease); }
.dial-next b { font: 600 16px/1.1 var(--mono); font-variant-numeric: tabular-nums; }
.dial-next small { font: 500 11.5px/1.2 var(--mono); color: var(--night-muted); }
.dial-next a:hover, .dial-next button:hover, .dial-next .on { border-color: var(--moon); background: color-mix(in srgb, var(--moon) 10%, transparent); transform: translateY(-1px); }
.dial-note { font: 500 12px/1.4 var(--mono); color: var(--night-muted); }
.dial :focus-visible { outline-color: #93b0ff; }
@media (max-width: 520px) { .dial-next { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dial-read { inset: 27%; } }

/* ---------- the waiting-room queue ---------- */
.queue { display: grid; gap: 18px; padding: 24px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); min-width: 0; }
.queue-line { position: relative; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 8px 0; overflow: hidden; }
.queue-line::before { content: ""; position: absolute; left: 0; right: 56px; top: 50%; border-top: 2px dashed var(--line); }
.queue-door { position: relative; z-index: 1; order: -1; flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--screen-soft); color: var(--screen); }
.queue-door svg { width: 24px; height: 24px; }
.queue .seat { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--card); border: 2px solid var(--line); font: 600 13px/1 var(--display); color: var(--muted); transition: transform 700ms var(--ease), opacity 500ms; }
.queue .seat.you { width: 52px; height: 52px; border: 0; background: var(--lamp); color: var(--on-lamp); box-shadow: 0 0 0 6px color-mix(in srgb, var(--lamp) 18%, transparent); font-size: 14px; }
.queue .seat.going { opacity: 0; transform: translateX(-30px) scale(0.6); }
.queue-read { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; align-items: baseline; }
.queue-read b { font: 600 24px/1.1 var(--display); letter-spacing: -0.02em; }
.queue-read span { font: 500 14px/1.3 var(--mono); color: var(--muted); }
html.calm .queue .seat { transition: none; }

/* ---------- the call card ---------- */
.call { position: relative; overflow: hidden; min-width: 0; aspect-ratio: 4 / 3; border-radius: var(--r-l); background: var(--night); color: var(--night-ink); box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--night-line); }
.call-bg { position: absolute; inset: -10%; background: radial-gradient(40% 50% at 35% 40%, rgba(147, 176, 255, 0.35), transparent 70%), radial-gradient(35% 40% at 70% 70%, color-mix(in srgb, var(--moon) 28%, transparent), transparent 70%); filter: blur(14px); animation: vg-drift 14s var(--soft) infinite alternate; }
@keyframes vg-drift { to { transform: translate(4%, -3%) scale(1.08); } }
html.calm .call-bg { animation: none; }
.call-who { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; padding: 20px; }
.call-who .av { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); font: 600 28px/1 var(--display); letter-spacing: -0.02em; }
.call-who b { font: 600 20px/1.2 var(--display); }
.call-who small { font: 500 12.5px/1.3 var(--mono); color: var(--night-muted); }
.call-self { position: absolute; right: 14px; top: 14px; width: 28%; aspect-ratio: 4 / 3; border-radius: 12px; background: linear-gradient(160deg, #1d2846, #0b1222); border: 1px solid var(--night-line); display: grid; place-items: center; font: 500 11px/1.2 var(--mono); color: var(--night-muted); }
.call-time { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: var(--r-pill); background: rgba(0, 0, 0, 0.45); font: 500 12.5px/1.2 var(--mono); }
.call-time i { width: 7px; height: 7px; border-radius: 50%; background: #ff6b6b; }
.call-bar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 8px; padding: 7px; border-radius: var(--r-pill); background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.call-bar button { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; }
.call-bar button[aria-pressed="true"] { background: #fff; color: #0b1222; }
.call-bar button.end { width: auto; padding: 0 16px; border-radius: var(--r-pill); background: #d93d3d; font: 600 14px/1 var(--display); white-space: nowrap; }
.call-bar svg { width: 19px; height: 19px; }

/* ---------- the visit log ---------- */
.visit { position: relative; display: grid; gap: 0; }
.visit li { position: relative; display: grid; grid-template-columns: 92px 1fr; gap: 4px 22px; padding: 0 0 26px; }
.visit li::before { content: ""; position: absolute; left: 106px; top: 22px; bottom: -2px; width: 2px; background: var(--line); }
.visit li:last-child::before { display: none; }
.visit .time { grid-row: span 2; padding-top: 2px; font-size: 14.5px; color: var(--muted); text-align: right; }
.visit b { position: relative; padding-left: 26px; font: 600 18px/1.3 var(--display); }
.visit b::before { content: ""; position: absolute; left: -9px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--card); border: 2px solid var(--line); }
.visit p { padding-left: 26px; color: var(--ink-2); font-size: 16px; }
.visit li.done b::before { background: var(--ink); border-color: var(--ink); }
.visit li.now b::before { background: var(--lamp); border-color: var(--lamp); box-shadow: 0 0 0 6px color-mix(in srgb, var(--lamp) 20%, transparent); }
.visit li.now .time { color: var(--lamp); }
@media (max-width: 520px) { .visit li { grid-template-columns: 64px 1fr; gap: 4px 14px; } .visit li::before { left: 78px; } .visit .time { font-size: 13px; } }

/* ---------- features as soft rows ---------- */
.rows { display: grid; border-top: 1px solid var(--line); }
.rows > div { display: grid; grid-template-columns: 56px minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 8px 24px; align-items: start; padding: 26px 0; border-bottom: 1px solid var(--line); }
.rows .ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--lamp-soft); color: var(--lamp); }
.rows .ic svg { width: 22px; height: 22px; }
.rows h3 { font: 600 21px/1.25 var(--display); letter-spacing: -0.01em; padding-top: 8px; }
.rows p { color: var(--ink-2); padding-top: 8px; }
@media (max-width: 760px) { .rows > div { grid-template-columns: 44px 1fr; } .rows p { grid-column: 2; padding-top: 0; } }

/* ---------- fees ---------- */
.fees { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px; }
.fee { display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--line); }
.fee.lit { border-color: color-mix(in srgb, var(--lamp) 55%, var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lamp) 10%, transparent); }
.fee .k { font: 500 13px/1.2 var(--mono); color: var(--muted); }
.fee b { font: 600 44px/1 var(--display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.fee b small { font: 500 14px/1 var(--mono); color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.fee p { color: var(--ink-2); font-size: 16px; }
@media (max-width: 860px) { .fees { grid-template-columns: 1fr; } }

/* ---------- notices ---------- */
.notice { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; padding: 18px 20px; border-radius: var(--r-m); background: var(--screen-soft); color: var(--ink-2); font-size: 16px; }
.notice svg { width: 22px; height: 22px; color: var(--screen); margin-top: 1px; }
.notice b { color: var(--ink); }
.notice.safety { background: color-mix(in srgb, var(--alert) 9%, var(--card)); }
.notice.safety svg { color: var(--alert); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; max-width: 880px; }
.faq details { border-radius: var(--r-m); background: var(--card); border: 1px solid var(--line); transition: border-color var(--d-fast); }
.faq details[open] { border-color: color-mix(in srgb, var(--lamp) 45%, var(--line)); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; font: 600 19px/1.3 var(--display); letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--lamp); border-bottom: 2px solid var(--lamp); transform: translateY(-3px) rotate(45deg); transition: transform var(--d) var(--ease); }
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq details > div { padding: 0 22px 22px; color: var(--ink-2); max-width: 70ch; }

/* ---------- closing: a night window ---------- */
.close { padding-block: clamp(56px, 8vw, 104px); }
.close-card { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 32px; align-items: end; padding: clamp(30px, 5vw, 64px); border-radius: var(--r-l); background: var(--night); color: var(--night-ink); box-shadow: inset 0 0 0 1px var(--night-line); }
.close-card::before { content: ""; position: absolute; z-index: -1; right: -10%; top: -40%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--moon) 35%, transparent), transparent 65%); animation: vg-breathe 9s var(--soft) infinite alternate; }
html.calm .close-card::before { animation: none; }
.close-card .h2 { color: var(--night-ink); }
.close-card .h2 em { color: var(--moon-2); }
.close-card p { color: #c4ccdd; max-width: 52ch; margin-top: 14px; }
.close-card .tag { color: var(--night-muted); }
.close-card .btn-lamp { background: var(--moon); color: var(--on-moon); }
.close-card .btn-line { border-color: rgba(238, 242, 250, 0.35); color: var(--night-ink); }
.close-card .btn-line:hover { border-color: var(--night-ink); background: rgba(255, 255, 255, 0.06); }
@media (max-width: 860px) { .close-card { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.foot { padding-block: 60px 32px; border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot h4 { font: 500 var(--fs-label)/1.2 var(--mono); color: var(--muted); margin-bottom: 14px; }
.foot ul { display: grid; gap: 9px; }
.foot a { text-decoration: none; color: var(--ink-2); }
.foot a:hover { color: var(--lamp); }
.foot-safe { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 16px 20px; border-radius: var(--r-m); background: var(--well); font-size: 15px; color: var(--ink-2); }
.foot-safe b { color: var(--ink); }
.foot-reg { margin-top: 16px; font: 500 12.5px/1.65 var(--mono); color: var(--muted); max-width: 110ch; }
.foot-base { display: flex; flex-wrap: wrap; gap: 14px 24px; justify-content: space-between; align-items: center; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--muted); }
.foot-switches { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } }

/* ---------- switch ---------- */
.switch { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); cursor: pointer; font: 500 14.5px/1 var(--body); color: var(--ink-2); }
.switch .sw { position: relative; flex: none; width: 38px; height: 22px; border-radius: var(--r-pill); background: var(--well); box-shadow: inset 0 0 0 1px var(--line); transition: background var(--d-fast); }
.switch .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform var(--d) var(--ease); }
.switch[aria-checked="true"] .sw { background: var(--lamp); box-shadow: none; }
.switch[aria-checked="true"] .sw::after { transform: translateX(16px); background: #fff; }
.switch:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- reveal on scroll ---------- */
.js [data-enter] { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js [data-enter].entered { opacity: 1; transform: none; }
html.calm [data-enter] { opacity: 1 !important; transform: none !important; transition: none !important; }

/* =====================================================================
   Multi-page kit
   ===================================================================== */
.page-head { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(30px, 4.5vw, 64px) clamp(34px, 4.5vw, 60px); border-bottom: 1px solid var(--line); }
.page-head .lamp { width: min(520px, 80vw); top: -40%; right: -4%; }
.page-head .h1 { font-size: clamp(40px, 5vw, 70px); margin-top: 16px; }
.page-head .lead { margin-top: 18px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font: 500 13px/1.3 var(--mono); color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--lamp); }
.crumbs span[aria-hidden] { opacity: 0.6; }

.field { display: grid; gap: 7px; min-width: 0; }
.field > span, .field-set > legend { font: 600 16px/1.25 var(--display); color: var(--ink); }
.field small, .field-set > legend small { color: var(--muted); font: 400 14px/1.3 var(--body); }
.field input, .field textarea, .field select { width: 100%; min-height: 52px; padding: 12px 16px; border-radius: var(--r-s); border: 1.5px solid var(--line); background: var(--card); color: var(--ink); transition: border-color var(--d-fast), box-shadow var(--d-fast); }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--lamp); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lamp) 20%, transparent); }
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
.field [aria-invalid="true"] { border-color: var(--alert); }
.field select { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(-45deg, transparent 50%, var(--ink) 50%); background-size: 6px 6px; background-position: right 22px center, right 16px center; background-repeat: no-repeat; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field-wide { grid-column: 1 / -1; }
@media (max-width: 620px) { .fields { grid-template-columns: 1fr; } }
fieldset.field-set { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 10px; }
fieldset.field-set > legend { padding: 0; margin-bottom: 10px; }
fieldset.field-set > .seg { justify-self: start; }
.form-card { display: grid; gap: 20px; padding: clamp(22px, 3.5vw, 38px); border-radius: var(--r-l); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.form-done { padding: 16px 18px; border-radius: var(--r-m); background: var(--lamp-soft); color: var(--ink); font-weight: 600; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--ink-2); cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--lamp); }

.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.choice { position: relative; display: block; cursor: pointer; min-width: 0; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice > span { display: grid; gap: 3px; height: 100%; padding: 15px 18px; border-radius: var(--r-m); border: 1.5px solid var(--line); background: var(--card); transition: border-color var(--d-fast), background var(--d-fast), box-shadow var(--d-fast); }
.choice > span b { font: 600 17px/1.2 var(--display); }
.choice > span small { color: var(--muted); font-size: 14.5px; }
.choice:hover > span { border-color: color-mix(in srgb, var(--ink) 35%, var(--line)); }
.choice input:checked + span { border-color: var(--lamp); background: var(--lamp-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lamp) 16%, transparent); }
.choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--well); border: 1px solid var(--line); }
.seg button, .seg label { position: relative; padding: 9px 16px; border: 0; border-radius: var(--r-pill); background: transparent; cursor: pointer; font: 500 15px/1 var(--display); color: var(--ink-2); transition: background var(--d-fast), color var(--d-fast); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg button[aria-pressed="true"], .seg label:has(input:checked) { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.seg label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 1px; }

input.range { --p: 50%; appearance: none; -webkit-appearance: none; width: 100%; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--lamp) 0 var(--p), var(--line) var(--p) 100%); cursor: pointer; }
input.range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--card); border: 2px solid var(--lamp); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }
input.range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--card); border: 2px solid var(--lamp); }

.table { overflow-x: auto; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--card); }
.table table { width: 100%; border-collapse: collapse; font-size: 16px; }
.table caption { caption-side: bottom; text-align: left; padding: 14px 20px; border-top: 1px solid var(--line); font: 500 13px/1.45 var(--mono); color: var(--muted); }
.table th, .table td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table thead th { font: 500 13px/1.2 var(--mono); color: var(--muted); background: var(--well); }
.table tbody th { font: 600 16.5px/1.3 var(--display); }
.table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: 0; }
.table .r { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 680px) {
  .table.stack { overflow: visible; border: 0; background: transparent; }
  .table.stack table, .table.stack tbody, .table.stack tr, .table.stack td, .table.stack th { display: block; }
  .table.stack table { display: flex; flex-direction: column; }
  .table.stack caption { display: block; order: 1; border: 0; padding: 4px 4px 0; }
  .table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table.stack tr { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); margin-bottom: 10px; padding: 8px 0; }
  .table.stack td, .table.stack th { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 12px; align-items: center; border: 0; padding: 7px 18px; text-align: left !important; }
  .table.stack th[scope="row"] { display: block; padding-bottom: 4px; }
  .table.stack td::before { content: attr(data-label); font: 500 12px/1.4 var(--mono); color: var(--muted); }
}

@media print { .nav, .foot-switches, .menu-btn, .site-menu, .lamp { display: none !important; } body { background: #fff; } }