/* Marketing site. One light theme. Palette and fonts come from brand.css,
   generated from THEME in js/brand.js by scripts/apply-brand.mjs; tokens.css
   supplies the motion scale. Pages set data-theme="light" on <html>, so the
   dark values in tokens.css never apply here. */

:root {
  color-scheme: light;
  --mk-max: 1120px;
  --mk-gutter: 24px;
  --mk-header-h: 64px;
  --mk-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --mk-shadow: 0 1px 2px rgba(20, 48, 58, .04), 0 8px 28px -10px rgba(20, 48, 58, .14);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); color: var(--text); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: var(--accent-text); text-underline-offset: 3px; }
a:hover { color: var(--accent-text); }
img, svg { display: block; }
button { font: inherit; }
:focus-visible { outline: none; box-shadow: var(--mk-focus); border-radius: 8px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; color: #fff; }
.container { width: 100%; max-width: var(--mk-max); margin: 0 auto; padding: 0 var(--mk-gutter); }
.container.narrow { max-width: 760px; }
.container.narrow-lg { max-width: 880px; }
.center { text-align: center; justify-content: center; }
.h1 { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 600; letter-spacing: -0.035em; }
.h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: -0.03em; }
.h3 { font-size: 1.25rem; font-weight: 600; }
.lead { font-size: 1.125rem; color: var(--text-2); }
.note { color: var(--text-3); font-size: .95rem; margin-top: 32px; }
.mono { font-family: var(--font-mono); font-size: .9em; }

/* ---------- Buttons ---------- */
.btn {
  --b-bg: var(--surface); --b-fg: var(--ink); --b-bd: var(--border);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--b-bg); color: var(--b-fg); border: 1px solid var(--b-bd);
  font: 600 .95rem/1 var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.btn:hover { color: var(--b-fg); border-color: var(--border-strong); background: var(--bg-subtle); }
.btn:active { transform: scale(.98); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-primary { --b-bg: var(--ink); --b-fg: #fff; --b-bd: var(--ink); }
.btn-primary:hover { background: var(--ink-hover); border-color: var(--ink-hover); color: #fff; }
.btn-ghost { --b-bg: transparent; --b-bd: transparent; }
.btn-ghost:hover { border-color: transparent; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: .9rem; }
@media (pointer: coarse), (max-width: 760px) { .btn-sm { min-height: 44px; } }
.btn-lg { min-height: 50px; padding: 0 24px; font-size: 1rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-row.center { margin-top: 28px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: border-color var(--dur-2) var(--ease-out); }
.site-header.scrolled { border-bottom-color: var(--border); }
.nav { display: flex; align-items: center; gap: 28px; height: var(--mk-header-h); }
.logo { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; text-decoration: none; font: 700 1.25rem/1 var(--font-brand); color: var(--wordmark); letter-spacing: -0.035em; }
.logo:hover { color: var(--wordmark); }
.logo-mark { width: 20px; height: 20px; }
/* Mark beside the name as an icon (the name does not start with an O). */
.logo:not(.is-initial) { gap: .4em; letter-spacing: -0.03em; }
.logo:not(.is-initial) .logo-mark { flex: none; width: 1.08em; height: 1.08em; }
/* Two weights so the name reads as two words. */
.logo-word-a { font-weight: 500; }
.logo-word-b { font-weight: 750; }
.logo.is-initial { gap: .04em; align-items: center; white-space: nowrap; }
/* Centred, not baseline: in a 44px link, baseline alignment pins the lockup
   to the top. Never shrink the disc, or it clips at narrow widths. */
.logo.is-initial .logo-mark { flex: none; width: .78em; height: .78em; overflow: visible; }
.nav-links { display: flex; gap: 4px; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--text-2); text-decoration: none; font-size: .94rem; font-weight: 500; border-radius: 999px; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.menu-toggle { display: none; width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; align-items: center; justify-content: center; }
.menu-toggle svg { width: 22px; height: 22px; }
.mobile-menu { display: none; }
@media (max-width: 760px) {
  .nav-links, .hide-sm { display: none !important; }
  .menu-toggle { display: inline-flex; }
  /* The menu drops over the page instead of pushing it down. */
  .mobile-menu:not([data-open="false"]) { display: block; position: absolute; left: 0; right: 0; top: 100%; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg); padding: 8px 0 16px; box-shadow: 0 18px 30px -18px rgba(20, 30, 40, .25); animation: drop var(--dur-3) var(--ease-out) both; }
  .mobile-menu[data-open="true"] nav { animation: reveal var(--dur-3) var(--ease-out) 60ms both; }
  /* Closing wipes back up (site.js holds "closing" for the length of it), quicker than it opened. */
  .mobile-menu[data-open="closing"] { animation: drop-up var(--dur-2) var(--ease-in-out) both; pointer-events: none; }
  .mobile-menu nav { display: grid; }
  .mobile-menu a { display: flex; align-items: center; min-height: 48px; color: var(--ink); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--border); }
  .mobile-menu a:last-child { border-bottom: 0; }
}

/* ---------- Hero: a chat composer ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(48px, 9vh, 100px) 0 clamp(16px, 3vw, 32px); }
.hero-inner { position: relative; z-index: 1; max-width: 960px; text-align: center; }
.composer { max-width: 720px; margin-left: auto; margin-right: auto; }
@media (min-width: 900px) { .hero-title { white-space: nowrap; } }
.hero-title { font-size: clamp(2.1rem, 5vw, 3.5rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1.08; }

.composer { margin-top: 40px; text-align: left; }
.composer-box {
  background: var(--surface); border: 1px solid var(--border); border-radius: 28px;
  box-shadow: var(--mk-shadow); padding: 18px 18px 12px 22px;
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.composer-box:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: var(--mk-shadow), 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.composer textarea {
  display: block; width: 100%; min-height: 56px; resize: none; overflow-y: hidden; border: 0; outline: none; padding: 4px 0;
  background: transparent; color: var(--text); font: 400 1.0625rem/1.55 var(--font-sans);
}
.composer textarea::placeholder { color: #8b8b93; }
.composer textarea:focus-visible { box-shadow: none; }
.composer-bar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.icon-btn, .send-btn { width: 44px; height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.icon-btn { border: 1px solid var(--border); background: var(--surface); color: var(--text-2); transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.icon-btn:hover { background: var(--bg-subtle); color: var(--ink); }
.icon-btn svg, .send-btn svg { width: 20px; height: 20px; }
.ask-mic[hidden] { display: none; }
.ask-mic[aria-pressed="true"] { background: var(--danger); border-color: var(--danger); color: #fff; }
.send-btn { border: 0; background: var(--ink); color: #fff; transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.send-btn:hover { background: var(--ink-hover); }
.send-btn:active { transform: scale(.94); }

.ask-status { min-height: 0; margin: 10px 4px 0; font-size: .92rem; color: var(--text-2); }
.ask-status:empty, .ask-status.is-quiet { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
.ask-status.is-error { color: var(--danger); }
.ask-status.is-live { color: var(--accent-text); }
.hero-links { margin-top: 20px; font-size: .92rem; color: var(--text-3); }
.hero-links[hidden] { display: none; }
.hero-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* Send: the hero eases out and the setup opens (P11, no extra tap). The
   composer lifts a little while the rest of the page fades, about 240 ms. */
html.is-leaving .hero-inner > :not(.composer), html.is-leaving .sea, html.is-leaving main > section:not(.hero), html.is-leaving .site-footer { opacity: 0; transition: opacity 200ms var(--ease-out); }
html.is-leaving .composer { opacity: 0; transform: translateY(-12px); transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
html.is-leaving .send-btn { transform: scale(.94); }
/* The logo's four dots take the middle of the window as the page leaves; the
   setup opens on the same mark in the same place (app.css .boot-mark). */
.leave-mark { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity 200ms var(--ease-out) 80ms; }
.leave-mark > span { width: 34px; height: 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.leave-mark i { border-radius: 50%; background: #264653; }
.leave-mark i:nth-child(2) { background: var(--mark, #e9c46a); }
html.is-leaving .leave-mark { opacity: 1; }
html.is-leaving .site-header { opacity: 0; transition: opacity 200ms var(--ease-out); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Menus and drop-downs: content settles in over a short distance. */
/* An opaque panel wipes down, so the page never shows through it. */
@keyframes drop { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -40px 0); } }
@keyframes drop-up { from { clip-path: inset(0 0 -40px 0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.mini[open] > :not(summary), .faq details[open] > :not(summary), .more[open] > :not(summary) { animation: reveal var(--dur-3) var(--ease-out) both; }

/* Sea of possible schedules, under the composer. */
.sea { position: relative; margin: 36px auto 0; max-width: var(--mk-max); padding: 0 var(--mk-gutter); }
.sea-canvas { display: block; width: 100%; height: 220px; -webkit-mask-image: radial-gradient(ellipse 60% 75% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 60% 75% at 50% 50%, #000 55%, transparent 100%); }
@media (max-width: 560px) { .sea-canvas { height: 170px; -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 50%, transparent 100%); mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 50%, transparent 100%); } }

/* ---------- Sections ---------- */
.section { padding: clamp(56px, 9vw, 104px) 0; }
.section.pt-0 { padding-top: 0; }
.section-head { text-align: center; margin-bottom: 28px; }
.section-head p { margin-top: 8px; color: var(--text-2); }

/* Last-minute change: a text from Maya, the manager tells SchedSolver, one
   person moves in. Desktop: chat on the left, the week on the right. */
.rp { margin: 0; }
.rp-card { display: grid; grid-template-columns: minmax(240px, 300px) 1fr; gap: 28px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--mk-shadow); padding: 24px; transition: opacity var(--dur-2) var(--ease-out); }
/* Between loops only the story fades (the text, the typed words, the options,
   the pill, Jordan); the week itself never blinks. */
.rp-card.is-clearing :is(.rp-msg, .rp-typed, .rp-opts, .rp-pill, #rp-jordan) { opacity: 0 !important; transition: opacity var(--dur-4) var(--ease-in-out) !important; }
.rp-card.is-resetting *, .rp-card.is-resetting *::after { transition: none !important; }
.rp-chat { display: grid; gap: 14px; }
.rp-msg { display: grid; gap: 4px; justify-items: start; opacity: 0; transform: translateY(8px); transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); }
.rp-msg.is-in { opacity: 1; transform: none; }
.rp-from { font-size: .75rem; font-weight: 600; color: var(--text-3); padding-left: 12px; }
.rp-bubble { padding: 9px 14px; border-radius: 18px 18px 18px 6px; background: #ececee; color: var(--text); font-size: .92rem; line-height: 1.35; }
.rp-ask { position: relative; display: flex; align-items: center; min-height: 48px; padding: 6px 6px 6px 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: .92rem; color: var(--text); transition: border-color var(--dur-3) var(--ease-out); }
.rp-ask.is-typing { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.rp-typed { white-space: nowrap; overflow: hidden; }
.rp-caret { width: 1.5px; height: 1.1em; margin-left: 1px; background: var(--text); opacity: 0; }
.rp-ask.is-typing .rp-caret { animation: caret 1s steps(1) infinite; }
@keyframes caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.rp-ph { position: absolute; left: 16px; right: 52px; color: #8b8b93; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity var(--dur-2) var(--ease-out); }
.rp-ph.is-hidden { opacity: 0; }
.rp-send { margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-subtle); color: var(--text-3); transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.rp-send svg { width: 16px; height: 16px; }
.rp-ask.is-ready .rp-send { background: var(--ink); color: #fff; }
.rp-send.is-press { transform: scale(.88); }
/* SchedSolver's answer: three ranked options. Space is reserved, so nothing
   shifts when they appear. */
.rp-opts { display: grid; gap: 6px; }
.rp-opts > .rp-from { padding-left: 2px; color: var(--accent-text); opacity: 0; transition: opacity var(--dur-3) var(--ease-out); }
.rp-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); font-size: .84rem; color: var(--text-2); opacity: 0; transform: translateY(6px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out), border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.rp-opt b { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-opt span { flex: none; font-size: .76rem; color: var(--text-3); }
.rp-opts.is-in > .rp-from, .rp-opts.is-in .rp-opt { opacity: 1; transform: none; }
.rp-opts.is-in .rp-opt:nth-of-type(2) { transition-delay: 90ms; }
.rp-opts.is-in .rp-opt:nth-of-type(3) { transition-delay: 180ms; }
.rp-opts.is-in .rp-opt:nth-of-type(4) { transition-delay: 270ms; }
.rp-opts .rp-opt.is-press { transform: scale(.98); }
.rp-opt.is-chosen { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.rp-opt.is-chosen span { color: var(--accent-text); }
.rp-opts.is-decided .rp-opt:not(.is-chosen) { opacity: .45; transition-delay: 0ms; }
.rp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; min-height: 26px; }
.rp-top b { font: 600 .95rem/1.2 var(--font-display); color: var(--text); }
.rp-pill { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--accent-soft); color: var(--accent-text); opacity: 0; transform: scale(.9); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.rp-pill.is-on { opacity: 1; transform: none; }
.rp-grid { display: grid; grid-template-columns: 64px repeat(5, minmax(0, 1fr)); gap: 6px; align-items: center; }
.rp-day { text-align: center; font: 500 .72rem/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding-bottom: 4px; }
.rp-today { color: var(--accent-text); font-weight: 600; }
.rp-row { font-size: .8rem; font-weight: 600; color: var(--text-2); }
.rp-free-k { color: var(--text-3); }
.rp-cell { position: relative; height: 42px; }
.rp-free { margin-top: 10px; }
.rp-grid > .rp-free-k { margin-top: 10px; }
.rp-free::before { content: ""; position: absolute; left: -3px; right: -3px; top: -9px; border-top: 1px dashed var(--border); }
.rp-chip {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--bg-subtle); color: var(--text); font-size: .86rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; border: 1px solid transparent;
  transition: background-color var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out), opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.rp-chip.rp-sub { background: var(--surface); border-color: var(--border); color: var(--text-2); }
/* Maya: tinted, then gone, leaving a dashed slot. */
.rp-chip.is-out { background: var(--danger-soft); color: var(--danger); }
.rp-chip.is-gone { opacity: 0; transform: scale(.9); }
.rp-open { position: absolute; inset: 0; border-radius: 12px; border: 1.5px dashed color-mix(in srgb, var(--danger) 60%, transparent); opacity: 0; transition: opacity var(--dur-3) var(--ease-out); }
.rp-slot-open .rp-open { opacity: 1; }
.rp-slot-filled .rp-open { opacity: 0; }
/* Jordan: noticed, lifted, moved, settled. */
.rp-chip.is-pick { border-color: var(--accent); color: var(--accent-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.rp-chip.is-flying { z-index: 5; box-shadow: 0 12px 24px -8px rgba(20, 20, 30, .3); transition: none; }
.rp-chip.is-moved { background: var(--accent-text); border-color: var(--accent-text); color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.rp-ghost { position: absolute; inset: 0; border-radius: 12px; border: 1.5px dashed var(--border); opacity: 0; transition: opacity var(--dur-3) var(--ease-out); }
.rp-free.has-ghost .rp-ghost { opacity: 1; }
/* Phone: the story stacks, and the week shrinks to three days. */
@media (max-width: 720px) {
  .rp-card { grid-template-columns: 1fr; gap: 18px; padding: 16px 14px 18px; border-radius: 18px; }
  .rp-grid { grid-template-columns: 58px repeat(3, minmax(0, 1fr)); gap: 5px; }
  .rp-c45 { display: none; }
  .rp-row { font-size: .74rem; }
  .rp-cell { height: 40px; }
  .rp-chip { font-size: .82rem; border-radius: 10px; }
  .rp-open, .rp-ghost { border-radius: 10px; }
  /* No empty band above the week: the options open their own room as they
     arrive (the week eases down), and close it again while the story fades
     at the loop seam (the week eases back up), so nothing jumps. */
  .rp-opts { max-height: 0; overflow: hidden; margin-top: -14px; transition: max-height var(--dur-4) var(--ease-in-out), margin-top var(--dur-4) var(--ease-in-out); }
  .rp-opts.is-in { max-height: 150px; margin-top: 0; }
  .rp-card.is-clearing #rp-opts.rp-opts { max-height: 0; margin-top: -14px; transition: opacity var(--dur-4) var(--ease-in-out), max-height var(--dur-4) var(--ease-in-out), margin-top var(--dur-4) var(--ease-in-out) !important; }
}

/* Three one-line value points. */
.values { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; }
.values li { display: flex; gap: 14px; align-items: flex-start; }
.values h3 { font-size: 1rem; }
.values p { margin-top: 2px; color: var(--text-2); font-size: .94rem; }
.v-ico { flex: none; width: 22px; height: 22px; color: var(--accent); margin-top: 1px; }
@media (max-width: 560px) { .values { grid-template-columns: 1fr; } }

/* Split layout: words beside the picture on desktop, stacked on phones. */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.split-copy p { margin-top: 10px; color: var(--text-2); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 28px; } }
.mini { margin-top: 16px; }
.mini summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; list-style: none; font-weight: 600; font-size: .94rem; color: var(--text); }
.mini summary::-webkit-details-marker { display: none; }
.mini summary::after { content: "+"; color: var(--text-3); font-weight: 400; font-size: 1.15rem; transition: transform var(--dur-2) var(--ease-out); }
.mini[open] summary::after { transform: rotate(45deg); }
.mini p { margin-top: 2px; font-size: .92rem; }

/* Privacy: three roster rows stay on your computer. Each gets a code there
   (the name key), and only a copy of the code crosses to our side. Names never
   move. Without JS or with reduced motion this final state is what shows;
   privacy.js plays the build-up on a loop. */
.pvx { position: relative; height: 200px; border-radius: 22px; border: 1px solid var(--border); overflow: hidden; background: linear-gradient(90deg, var(--surface) 50%, var(--accent-soft) 50%); }
.pvx::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--border-strong); }
.pvx-zone { position: absolute; top: 18px; font-size: .75rem; font-weight: 600; color: var(--text-3); }
.pvx-you { left: 18px; }
.pvx-us { right: 18px; color: var(--accent-text); }
.pvx-lock { position: absolute; left: 50%; top: 94px; z-index: 3; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border-strong); color: var(--accent-text); }
.pvx-lock svg { width: 20px; height: 20px; }
.pvx-row { position: absolute; left: 0; right: 0; top: calc(64px + var(--r) * 38px); height: 30px; }
.pvx-name, .pvx-key, .pvx-code { position: absolute; top: 0; height: 30px; display: inline-flex; align-items: center; border-radius: 9px; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.pvx-name { left: 18px; padding: 0 11px; background: var(--bg-subtle); color: var(--text); }
.pvx-id { color: var(--text-3); font-weight: 500; }
.pvx-key, .pvx-code { justify-content: center; min-width: 38px; padding: 0 8px; font-family: var(--font-mono); background: var(--surface); color: var(--accent-text); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.pvx-key { right: calc(50% + 34px); }
.pvx-code { left: calc(75% - 19px); z-index: 2; }
@media (max-width: 560px) {
  .pvx { height: 190px; border-radius: 18px; }
  .pvx-zone { top: 16px; font-size: .72rem; }
  .pvx-you { left: 12px; } .pvx-us { right: 12px; }
  .pvx-id { display: none; }
  .pvx-name { left: 12px; padding: 0 8px; }
  .pvx-name, .pvx-key, .pvx-code { font-size: .76rem; }
  .pvx-key { right: calc(50% + 27px); min-width: 34px; }
  .pvx-code { left: calc(75% - 17px); min-width: 34px; }
  .pvx-row { top: calc(58px + var(--r) * 38px); }
  .pvx-lock { top: 92px; width: 38px; height: 38px; margin-left: -19px; }
  .pvx-lock svg { width: 17px; height: 17px; }
}

/* Pricing teaser. */
.teaser { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; padding: 36px 40px; border-radius: 24px; background: var(--surface); border: 1px solid var(--border); }
.teaser p { margin-top: 8px; color: var(--text-2); }
.teaser p b { color: var(--ink); }
@media (max-width: 560px) { .teaser { padding: 28px 22px; } .teaser .btn-row .btn { flex: 1; } }

/* ---------- Inner pages ---------- */
.page-hero { padding: clamp(56px, 10vw, 104px) 0 clamp(36px, 5vw, 56px); text-align: center; }
.page-hero .container { max-width: 760px; }
.page-hero .lead { margin-top: 14px; }
.page-hero .h1, .page-hero .lead { text-wrap: balance; }

.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.price { position: relative; display: flex; flex-direction: column; padding: 26px 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); }
.price h3 { font-size: 1.1rem; }
.price .for { margin-top: 6px; color: var(--text-2); font-size: .92rem; min-height: 2.9em; }
.price .amt { display: flex; align-items: baseline; gap: 6px; margin-top: 18px; }
.price .amt b { font: 600 2rem/1 var(--font-display); color: var(--ink); letter-spacing: -0.02em; }
.price .amt span { color: var(--text-3); font-size: .9rem; }
.price .sub { margin-top: 6px; font-size: .85rem; color: var(--text-3); }
.price .btn { margin-top: 20px; }
.price ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; font-size: .92rem; color: var(--text-2); }
.price li { padding-left: 20px; position: relative; }
.price li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
@media (min-width: 561px) { .price-grid.two { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-inline: auto; } }
.price-note { margin-top: 24px; text-align: center; color: var(--text-3); font-size: .9rem; }
@media (max-width: 1000px) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
.price-free { margin-top: 28px; text-align: center; color: var(--text-2); font-size: 1rem; }
.price-free b { color: var(--ink); font-weight: 600; }
@media (max-width: 560px) { .price-grid { grid-template-columns: 1fr; } .price .for { min-height: 0; } }

.faq { display: grid; gap: 8px; margin-top: 20px; }
.faq details, .more { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.faq summary, .more > summary { list-style: none; cursor: pointer; min-height: 56px; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 600; color: var(--ink); border-radius: 16px; }
.faq summary::-webkit-details-marker, .more > summary::-webkit-details-marker { display: none; }
.faq summary::after, .more > summary::after { content: "+"; font-size: 1.3rem; font-weight: 400; color: var(--text-3); transition: transform var(--dur-2) var(--ease-out); }
.faq details[open] summary::after, .more[open] > summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 20px 18px; color: var(--text-2); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.steps li { display: flex; gap: 18px; align-items: flex-start; padding: 22px 24px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.step-n { flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: #fff; font-weight: 700; font-size: .9rem; }
.steps h2 { font-size: 1.1rem; margin-top: 4px; }
.steps p { margin-top: 4px; color: var(--text-2); }

.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.facts li { padding: 22px 24px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.facts h3 { font-size: 1.05rem; }
.facts p { margin-top: 4px; color: var(--text-2); font-size: .95rem; }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } }
.more { margin-top: 20px; }
.facts.mt { margin-top: 28px; }
.more .prose { padding: 0 24px 24px; }

.prose { color: var(--text-2); font-size: 1rem; }
.prose h2 { font-size: 1.3rem; color: var(--ink); margin: 36px 0 10px; }
.prose > h2:first-child { margin-top: 8px; }
.prose h3 { font-size: 1.05rem; margin: 24px 0 8px; }
.prose p, .prose ul, .prose ol { margin: 0 0 14px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose strong { color: var(--text); }
.prose code { font-family: var(--font-mono); font-size: .88em; background: var(--bg-subtle); padding: 2px 6px; border-radius: 5px; color: var(--text); }
.prose table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.prose thead th { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.prose .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 16px; }
.prose .table-wrap tr:last-child td { border-bottom: 0; }
.todo { background: var(--warn-soft); color: var(--warn); font-weight: 600; padding: 0 4px; border-radius: 4px; }
.draft-banner { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: var(--warn-soft); color: var(--text); margin-bottom: 28px; font-size: .92rem; }
.draft-banner svg { width: 20px; height: 20px; color: var(--warn); flex: none; margin-top: 1px; }
.draft-banner strong { color: var(--warn); }

.form-card { padding: 28px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font-size: .9rem; font-weight: 600; color: var(--ink); }
.field .opt { color: var(--text-3); font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; }
.field input, .field select { height: 48px; }
.field select { -webkit-appearance: none; appearance: none; padding-right: 38px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23586b72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.field [aria-invalid="true"] { border-color: var(--danger); }
.form-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.form-foot small { color: var(--text-3); font-size: .85rem; flex: 1; min-width: 200px; }
.form-status { display: none; margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--ok-soft); color: var(--text); font-size: .92rem; }
.form-status.show { display: block; }
.form-status.is-error { background: var(--danger-soft); }
.form-status a { word-break: break-all; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } .form-card { padding: 22px 18px; } }
.note a { display: inline-block; padding: 12px 0; }

.nf .code { display: flex; align-items: center; justify-content: center; gap: 6px; font: 600 clamp(4rem, 12vw, 7rem)/1 var(--font-display); letter-spacing: -0.05em; color: var(--ink); margin-bottom: 20px; }
.nf .code svg { width: .8em; height: .8em; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding: 40px 0 28px; margin-top: 24px; font-size: .9rem; color: var(--text-3); }
.footer-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px 40px; flex-wrap: wrap; }
.footer-tagline { margin-top: 2px; font-size: .88rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 4px; margin-right: -12px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--text-2); text-decoration: none; }
.footer-links a:hover { color: var(--ink); }
.footer-bottom { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; margin-top: 20px; font-size: .84rem; }
@media (max-width: 560px) { .footer-links { margin-left: -12px; margin-right: 0; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .rp-caret { animation: none !important; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}
@media (max-width: 560px) { #replan .section-head p { display: none; } }
.mini p a { display: inline-flex; align-items: center; min-height: 44px; }