/* Openbook — design tokens.
   Motion vocabulary follows the reference skills: strong custom curves, UI under
   300ms, springs for anything a hand can grab. */
:root{
  color-scheme:dark;
  --bg:#08090b;
  --bg-raised:#101114;
  --bg-sunken:#0b0c0e;
  --text:#f4f5f7;
  --text-soft:#c8cad0;
  --muted:#8b8f98;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --accent:#8ab6ff;
  --accent-ink:#04121f;
  --accent-bright:#a9caff;
  --danger:#ff8f88;

  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --ease-soft:cubic-bezier(.2,.8,.2,1);

  --r-sm:.7rem;
  --r-md:1.1rem;
  --r-lg:1.6rem;
  --r-xl:2rem;

  --header-h:3.5rem;
  --gutter:clamp(1.25rem,4vw,2rem);
  --page:min(68rem,calc(100% - var(--gutter)*2));

  font:100% / 1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-optical-sizing:auto;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + env(safe-area-inset-top) + 1.5rem);
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body:has(dialog[open]){overflow:hidden}

/* `hidden` must win over any display a component sets: the pages show and hide whole blocks with it. */
[hidden]{display:none !important}

img{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
a{color:inherit;text-decoration:none;touch-action:manipulation}
p{margin:0}

:where(a,button,summary,input,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:.35rem;
}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{width:var(--page);margin-inline:auto}

.skip{
  position:fixed;left:1rem;top:-5rem;z-index:60;
  background:var(--accent);color:#04121f;
  padding:.7rem 1.1rem;border-radius:.6rem;font-weight:600;font-size:.875rem;
  transition:top 180ms var(--ease-out);
}
.skip:focus-visible{top:calc(1rem + env(safe-area-inset-top))}

/* ── Typography ─────────────────────────────────────────────────────────────
   Tracking is size-specific: large display text tightens, body stays near 0. */
.eyebrow{
  font-size:.9375rem;font-weight:600;letter-spacing:.01em;
  color:var(--muted);margin:0 0 1.1rem;
}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.03em}
h2{font-size:clamp(2.1rem,4.4vw,3.35rem);line-height:1.08;letter-spacing:-.038em}
h3{font-size:1.1875rem;line-height:1.3;letter-spacing:-.018em;font-weight:600}
.dim{color:var(--muted)}
.fine{font-size:.8125rem;line-height:1.55;color:var(--muted);letter-spacing:.002em}
.label{
  font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);
}

/* ── Buttons ────────────────────────────────────────────────────────────────
   Feedback fires on press, never on release, at 100–160ms. */
.btn{
  --btn-bg:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:2.875rem;padding:.7rem 1.35rem;
  border:1px solid transparent;border-radius:99px;
  font-size:.9375rem;font-weight:550;letter-spacing:-.006em;
  background:var(--btn-bg);color:var(--text);
  transition:background-color 160ms var(--ease-out),border-color 160ms var(--ease-out),color 160ms var(--ease-out),transform 120ms var(--ease-out),box-shadow 160ms var(--ease-out);
}
.btn:active{transform:scale(.97);transition-duration:90ms}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed}
.btn:disabled:active,.btn[aria-disabled="true"]:active{transform:none}

.btn-primary{--btn-bg:var(--accent);color:var(--accent-ink);font-weight:600}
.btn-glass{--btn-bg:rgba(255,255,255,.07);border-color:var(--line-strong);color:var(--text)}
.btn-outline{--btn-bg:transparent;border-color:var(--line-strong);color:var(--text)}
.btn-sm{min-height:2.125rem;padding:.35rem .9rem;font-size:.8125rem}
.btn-glyph{font-size:1.05em;line-height:1;transition:transform 200ms var(--ease-out)}
.btn-block{width:100%}

@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{--btn-bg:var(--accent-bright);box-shadow:0 6px 24px -12px rgba(138,182,255,.7)}
  .btn-glass:hover{--btn-bg:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24)}
  .btn-outline:hover{--btn-bg:rgba(255,255,255,.06)}
  .btn:hover .btn-glyph{transform:translate(1px,-1px)}
}

.icon-btn{
  display:grid;place-items:center;width:2rem;height:2rem;
  border:1px solid var(--line);border-radius:50%;
  background:rgba(255,255,255,.05);color:var(--text-soft);
  transition:background-color 150ms var(--ease-out),transform 120ms var(--ease-out),border-color 150ms var(--ease-out);
}
.icon-btn:active{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){.icon-btn:hover{background:rgba(255,255,255,.12);color:#fff;border-color:var(--line-strong)}}

/* ── Header ────────────────────────────────────────────────────────────────
   Translucent material over scrolling content, not an opaque strip. */
.site-header{
  position:sticky;top:0;z-index:30;
  padding-top:env(safe-area-inset-top);
  background:linear-gradient(to bottom,rgba(8,9,11,.86),rgba(8,9,11,.55));
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid transparent;
  transition:border-color 200ms var(--ease-out),background-color 200ms var(--ease-out);
}
.site-header[data-scrolled]{
  border-bottom-color:var(--line);
  background:rgba(8,9,11,.82);
}
.header-bar{
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.brand{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:1.0625rem;font-weight:650;letter-spacing:-.035em;
}
.brand-mark{width:1.6rem;height:1.6rem;object-fit:contain}
.brand-dot{color:var(--accent)}
.brand-sm{font-size:1rem}
.header-nav{display:flex;gap:1.6rem;font-size:.8125rem;color:var(--text-soft)}
.header-nav a{
  padding:.4rem 0;position:relative;
  transition:color 150ms var(--ease-out);
}
.header-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:.15rem;height:1px;
  background:currentColor;opacity:0;transform:scaleX(.6);
  transform-origin:left;
  transition:opacity 160ms var(--ease-out),transform 200ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .header-nav a:hover{color:#fff}
  .header-nav a:hover::after{opacity:.5;transform:scaleX(1)}
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  align-items:center;gap:clamp(1rem,4vw,3.5rem);
  padding:clamp(2.5rem,7vh,5rem) 0 clamp(2rem,5vh,3.5rem);
  min-height:calc(100svh - var(--header-h));
}
.hero-copy{max-width:34rem}
.hero h1{
  font-size:clamp(2.7rem,5.4vw,4.4rem);
  line-height:1.04;letter-spacing:-.045em;font-weight:660;
}
.hero-title-soft{color:var(--text-soft)}
.hero-lede{
  font-size:clamp(1.0625rem,1.5vw,1.25rem);
  line-height:1.5;letter-spacing:-.011em;
  color:var(--muted);margin-top:1.25rem;
}
.hero-actions{margin-top:1.9rem;display:flex;flex-direction:column;gap:.85rem;align-items:flex-start}
.hero-actions .fine{max-width:22rem}

/* The book plays once on entry, then remains in its open composition. */
.hero-art{
  position:relative;
  display:grid;place-items:center;
  justify-self:center;
  width:100%;max-width:30rem;
  aspect-ratio:1/1;
  /* The rig is a zero-size hinge, so a percentage would resolve against
     nothing. Container units measure the stage instead, which is what the
     book's scale should follow. */
  container-type:size;
  /* One value drives the whole scene: every other dimension derives from it. */
  --leaf-w:min(46cqi,15rem);
  --leaf-h:calc(var(--leaf-w) * 1.42);
  --depth:calc(var(--leaf-w) * .105);
  perspective:1600px;
  perspective-origin:50% 48%;
}
.art-glow{
  position:absolute;inset:4% 0;
  border-radius:50%;
  background:radial-gradient(circle at 50% 52%,rgba(255,206,45,.16),rgba(120,170,245,.09) 42%,transparent 68%);
  opacity:.55;
  pointer-events:none;
}

.book{
  position:relative;
  width:100%;height:100%;
  display:grid;place-items:center;
  transform-style:preserve-3d;
}

/* Continuous vector book: every leaf survives from closed to final pose. */
.book-vector{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
.book-vector [data-star]{opacity:0}
@media(max-width:640px){
  .hero{gap:.5rem;padding-block:1rem;align-content:center}
  .hero-art{width:min(76vw,34svh);max-width:22rem}
  .hero h1{font-size:clamp(2rem,8vw,3rem)}
  .hero-actions{margin-top:1rem}
}

/* ── Clients strip ─────────────────────────────────────────────────────────── */
.clients{
  border-block:1px solid var(--line);
  padding:1.75rem 0;
  background:var(--bg-sunken);
}
.clients-inner{
  display:flex;align-items:center;justify-content:space-between;gap:clamp(1.25rem,4vw,3rem);
}
.clients-lede{font-size:.8125rem;line-height:1.5;color:var(--muted)}
.clients-lede strong{font-weight:500;color:var(--text-soft)}
.client-list{
  list-style:none;display:flex;align-items:center;gap:clamp(1rem,3.5vw,2.75rem);
  margin:0;padding:0;
  color:var(--text-soft);
}
.client-list li{font-size:1.125rem;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.client-serif{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:1.3rem !important;letter-spacing:-.01em}
.client-other{font-size:.8125rem !important;font-weight:500;letter-spacing:0;color:var(--muted);display:flex;align-items:center;gap:.4rem}
.clients-note{font-size:.6875rem;line-height:1.5;color:var(--muted);text-align:right;max-width:12rem}

/* ── Sections ──────────────────────────────────────────────────────────────── */
.section{padding-top:clamp(4.5rem,9vh,7.5rem)}
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:2.5rem;
  margin-bottom:clamp(2rem,4vh,3rem);
}
.section-note{max-width:20rem;color:var(--muted);font-size:.9375rem;line-height:1.6;margin:0 0 .35rem}

/* Reveal: a bridge for content that would otherwise teleport in, nothing more.
   Opt-in from app.js rather than baked into the base rule, so a failed script
   never leaves the page's content invisible. */
[data-reveal][data-armed]{
  opacity:0;transform:translateY(14px);
  transition:opacity 520ms var(--ease-out),transform 520ms var(--ease-out);
}
[data-reveal][data-shown]{opacity:1;transform:none}

/* Demo panel */
.demo{
  display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;background:var(--bg-raised);
}
.demo-base{
  padding:1.9rem 1.6rem;
  background:var(--bg-sunken);
  border-right:1px solid var(--line);
}
.base-list{list-style:none;margin:1.1rem 0 0;padding:0}
.base-list li{
  display:flex;align-items:center;gap:.75rem;
  padding:.9rem 0;
  border-bottom:1px solid var(--line);
  font-size:.875rem;color:var(--text-soft);
}
.base-list li:last-child{border-bottom:0}
.base-num{font-size:.6875rem;color:var(--muted);font-variant-numeric:tabular-nums;min-width:1.4rem}
.base-arrow{margin-left:auto;color:var(--muted);font-size:.8125rem}
.base-live{
  display:flex;align-items:center;gap:.5rem;
  margin-top:1.1rem;font-size:.75rem;line-height:1.5;color:var(--muted);
}
.live-dot{
  width:.375rem;height:.375rem;flex-shrink:0;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(138,182,255,.14);
}
.demo-chat{padding:1.6rem clamp(1.25rem,2.4vw,2.25rem) 2rem}
.chat-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-size:.8125rem;color:var(--muted);
  padding-bottom:1.25rem;border-bottom:1px solid var(--line);
}
.tag{
  font-size:.625rem;letter-spacing:.07em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:.35rem;padding:.2rem .45rem;
}
.turn{display:flex;gap:.85rem;align-items:flex-start;margin-top:1.4rem}
.avatar{
  display:grid;place-items:center;flex-shrink:0;
  width:1.9rem;height:1.9rem;border-radius:.55rem;
  background:rgba(255,255,255,.08);color:var(--text-soft);
  font-size:.6875rem;font-weight:600;
}
.avatar-ai{background:rgba(138,182,255,.14);color:var(--accent);font-size:1rem}
.turn-text{font-size:.9375rem;line-height:1.55;padding-top:.25rem}
.turn-body{flex:1;min-width:0}
.turn-body .turn-text{margin-bottom:1rem}
table{border-collapse:collapse;width:100%;font-size:.875rem}
th,td{text-align:left;padding:.65rem 0;border-bottom:1px solid var(--line)}
th{font-size:.6875rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
th:last-child,td:last-child{text-align:right;white-space:nowrap;padding-left:.75rem}
.turn-body .fine{margin-top:1rem}

/* Steps */
.steps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,3vw,2.5rem);
}
/* The three steps are a sequence, so they cascade instead of landing as one
   slab: each waits 60ms behind the one above it, short enough to read as one
   gesture rather than three separate events. */
.steps[data-reveal][data-armed]{opacity:1;transform:none}
.steps[data-reveal][data-armed] li{
  opacity:0;transform:translateY(12px);
  transition:opacity 460ms var(--ease-out),transform 460ms var(--ease-out);
}
.steps[data-reveal][data-armed] li:nth-child(2){transition-delay:60ms}
.steps[data-reveal][data-armed] li:nth-child(3){transition-delay:120ms}
.steps[data-reveal][data-shown] li{opacity:1;transform:none}

.steps li{padding-top:1.35rem;border-top:1px solid var(--line-strong)}
.step-num{
  display:block;font-size:.8125rem;font-weight:600;color:var(--accent);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.steps h3{margin:.85rem 0 .5rem}
.steps p{color:var(--muted);font-size:.9375rem;line-height:1.6}

.callout{
  margin-top:clamp(2rem,4vh,3rem);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:clamp(1.5rem,3vw,2.35rem) clamp(1.5rem,3vw,2.5rem);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:
    radial-gradient(120% 160% at 88% 0%,rgba(138,182,255,.13),transparent 62%),
    var(--bg-raised);
}
.callout h3{font-size:clamp(1.25rem,2.4vw,1.6rem);letter-spacing:-.028em;margin:.55rem 0 .35rem}
.callout p{font-size:.9375rem;color:var(--muted)}
.callout .btn{flex-shrink:0}

/* FAQ — height + opacity, the one place a layout property is tolerated. */
.faq{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4.5rem)}
.faq-head{position:sticky;top:calc(var(--header-h) + 2rem);align-self:start}
.faq-list{border-top:1px solid var(--line)}
.acc{border-bottom:1px solid var(--line)}
.acc h3{margin:0;font-size:inherit;letter-spacing:inherit}
.acc-trigger{
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem;
  width:100%;padding:1.15rem 0;
  background:none;border:0;text-align:left;
  font-size:1rem;font-weight:500;letter-spacing:-.012em;color:var(--text);
  min-height:3.25rem;
}
.acc-icon{
  position:relative;flex-shrink:0;
  width:.85rem;height:.85rem;
  color:var(--muted);
  transition:transform 220ms var(--ease-out),color 180ms var(--ease-out);
}
.acc-icon::before,.acc-icon::after{
  content:"";position:absolute;left:0;top:50%;width:100%;height:1.5px;
  background:currentColor;border-radius:2px;
  transform:translateY(-50%);
}
.acc-icon::after{transform:translateY(-50%) rotate(90deg)}
.acc-trigger[aria-expanded="true"] .acc-icon{transform:rotate(135deg);color:var(--accent)}
@media (hover:hover) and (pointer:fine){.acc-trigger:hover .acc-icon{color:var(--text)}}
.acc-panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows 280ms var(--ease-out);
}
.acc-panel>div{overflow:hidden}
.acc-panel p{
  font-size:.9375rem;line-height:1.68;color:var(--muted);
  padding:0 2.5rem 1.3rem 0;
  opacity:0;transform:translateY(-4px);
  transition:opacity 200ms var(--ease-out),transform 240ms var(--ease-out);
}
.acc:has(.acc-trigger[aria-expanded="true"]) .acc-panel{grid-template-rows:1fr}
.acc:has(.acc-trigger[aria-expanded="true"]) .acc-panel p{opacity:1;transform:none;transition-delay:40ms}

/* Final CTA */
.final{
  text-align:center;
  padding:clamp(4.5rem,10vh,8rem) 0 clamp(3.5rem,7vh,6rem);
}
.final-star{display:block;font-size:2.5rem;line-height:1;color:var(--accent);margin-bottom:1.25rem}
.final h2{font-size:clamp(2.1rem,4.6vw,3.4rem);margin-bottom:1.75rem}
.final .fine{margin-top:1rem}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:1.75rem 0 calc(1.75rem + env(safe-area-inset-bottom))}
.footer-inner{display:flex;align-items:flex-start;justify-content:space-between;gap:1.25rem 2rem;flex-wrap:wrap;font-size:.8125rem;color:var(--muted)}
.footer-inner .brand{font-size:.9375rem;color:var(--text-soft);min-height:2rem}
.footer-brand{display:grid;gap:.15rem;min-width:0}
.footer-links{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;min-width:0}
.footer-links a{display:inline-flex;align-items:center;min-height:2.25rem;color:var(--text-soft);text-decoration:underline;text-decoration-color:rgba(255,255,255,.2);text-underline-offset:.2em;overflow-wrap:anywhere}
@media (hover:hover) and (pointer:fine){.footer-links a:hover{color:#fff;text-decoration-color:currentColor}}

/* A failed sign-in lands on the front page with the reason; it sits above the hero until the page is left. */
.auth-alert{
  width:var(--page);margin:1rem auto 0;padding:.85rem 1rem;display:grid;gap:.4rem;
  border:1px solid rgba(255,138,138,.4);border-radius:var(--r-sm);background:rgba(255,138,138,.08);
  color:#ffb4b4;font-size:.9rem;line-height:1.5;
}
.auth-alert a{color:var(--accent-bright);text-decoration:underline;text-underline-offset:.2em;min-height:2.25rem;display:inline-flex;align-items:center}

/* ── Pricing ─────────────────────────────────────────────────────────────────
   One markup for the landing (an article with a link) and the checkout (a label around a radio). */
.tiers{display:grid;gap:.75rem;border:0;padding:0;margin:0;min-width:0}
.tiers--grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.tier-card{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;align-content:start;
  min-width:0;padding:1.25rem 1.3rem;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-raised);
}
label.tier-card{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.85rem;cursor:pointer;min-height:3.25rem;transition:background-color 140ms var(--ease-out),border-color 140ms var(--ease-out),transform 120ms var(--ease-out)}
label.tier-card:active{transform:scale(.99)}
label.tier-card input{
  appearance:none;-webkit-appearance:none;flex-shrink:0;margin:.15rem 0 0;
  width:1.25rem;height:1.25rem;border:1.5px solid rgba(255,255,255,.55);border-radius:50%;
}
label.tier-card input:checked{border-color:var(--accent);box-shadow:inset 0 0 0 .3rem var(--bg-raised),inset 0 0 0 1rem var(--accent)}
label.tier-card:has(input:checked){background:rgba(138,182,255,.1);border-color:rgba(138,182,255,.55)}
label.tier-card:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
label.tier-card:has(input:disabled){opacity:.5;cursor:not-allowed}
@media (hover:hover) and (pointer:fine){label.tier-card:hover{border-color:var(--line-strong)}}
.tier-body{display:grid;gap:.4rem;min-width:0}
.tier-name{font-size:1.0625rem;font-weight:620;letter-spacing:-.02em}
.tier-price{font-size:clamp(1.6rem,5vw,2.1rem);font-weight:650;letter-spacing:-.035em;line-height:1.1;white-space:nowrap}
.tier-note{font-size:.875rem;line-height:1.5;color:var(--text-soft)}
.tier-points{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;font-size:.9rem;line-height:1.45;color:var(--text-soft)}
.tier-points li{position:relative;padding-left:1.15rem}
.tier-points li::before{content:"";position:absolute;left:0;top:.55em;width:.4rem;height:.4rem;border-radius:50%;background:var(--accent)}
.tier-card .btn{align-self:end;width:100%}
.pricing-fine{margin-top:1.25rem;max-width:42rem}
@media (max-width:720px){.tiers--grid{grid-template-columns:minmax(0,1fr)}}

/* ── Sheet / wizard ──────────────────────────────────────────────────────────
   A dialog, not a route: it dims the page, keeps focus inside, and can be
   dismissed by the scrim, Escape, or a downward drag of its handle. */
dialog#wizard{
  position:fixed;
  inset:0;
  margin:auto;
  width:min(30rem,calc(100% - 1.5rem));
  max-width:30rem;
  max-height:min(88vh,44rem);
  max-height:min(88dvh,44rem);
  padding:0;
  border:1px solid var(--line-strong);
  border-radius:var(--r-xl);
  background:rgba(20,21,24,.92);
  backdrop-filter:blur(32px) saturate(170%);
  -webkit-backdrop-filter:blur(32px) saturate(170%);
  color:var(--text);
  box-shadow:0 2rem 6rem rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.06) inset;
  overflow:visible;
  opacity:0;
  transform:translateY(14px) scale(.985);
  transition:opacity 220ms var(--ease-out),transform 260ms var(--ease-drawer);
  will-change:transform,opacity;
}
dialog#wizard[open]{display:flex;flex-direction:column}
dialog#wizard::backdrop{
  background:rgba(4,5,7,.62);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity 220ms var(--ease-out);
}
dialog#wizard[data-open]::backdrop{opacity:1}
dialog#wizard[data-open]{opacity:1;transform:none}

.sheet-handle{display:none}
.sheet-top{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.25rem .9rem;
  border-bottom:1px solid var(--line);
}
.sheet-body{
  /* flex:1 + min-height:0 is what lets this scroll instead of overflowing the
     dialog. Without it the item keeps its content height, spills past the
     sheet's bottom edge and the last buttons end up off-screen on a phone. */
  --pad-x:1.25rem;
  flex:1 1 auto;
  min-height:0;
  padding:1.35rem var(--pad-x) calc(1.5rem + env(safe-area-inset-bottom));
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* The primary action pins to the bottom of the sheet. On a short screen the
   form or the options alone fill the scrollport, and a CTA that lives under the
   fold reads as "there is no button" — the user never finds out they can
   scroll. The gradient hides content sliding underneath. */
.sheet-body .step-actions,
.sheet-body .prepare-actions,
.sheet-body .order-pay{
  position:sticky;
  bottom:calc(-1 * env(safe-area-inset-bottom));
  z-index:2;
  margin-inline:calc(var(--pad-x) * -1);
  padding:.7rem var(--pad-x) 0;
  background:linear-gradient(to top,rgba(20,21,24,.98) 62%,rgba(20,21,24,0));
}
.sheet-body h2{font-size:1.4rem;line-height:1.2;letter-spacing:-.026em;margin-bottom:.55rem}
.sheet-body>p,.sheet-body h2+p{font-size:.875rem;line-height:1.6;color:var(--muted)}
.step-label{
  font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.7rem;
}

/* Progress: a state-indicating element, so it changes instantly with a short fade. */
.progress{display:flex;gap:.3rem;margin-bottom:1.1rem}
.progress span{height:.19rem;flex:1;border-radius:99px;background:rgba(255,255,255,.12);transition:background-color 220ms var(--ease-out)}
.progress span[data-done]{background:var(--accent)}

.options{display:grid;gap:.45rem;margin:1.25rem 0 0;border:0;padding:0}
.option{
  position:relative;
  display:flex;align-items:center;gap:.75rem;
  min-height:3.1rem;padding:.75rem .9rem;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:rgba(255,255,255,.035);
  font-size:.9375rem;line-height:1.35;
  cursor:pointer;
  transition:background-color 140ms var(--ease-out),border-color 140ms var(--ease-out),transform 120ms var(--ease-out);
}
.option:active{transform:scale(.99)}
.option input{
  appearance:none;-webkit-appearance:none;
  flex-shrink:0;
  width:1.15rem;height:1.15rem;
  /* .55 keeps the ring at ~5.9:1 on the option background; at .3 it measured
     2.7:1 and read as an empty gap rather than a control. */
  border:1.5px solid rgba(255,255,255,.55);border-radius:50%;
  margin:0;
  transition:border-color 140ms var(--ease-out),box-shadow 160ms var(--ease-out);
}
.option input:checked{
  border-color:var(--accent);
  box-shadow:inset 0 0 0 .28rem var(--bg-raised),inset 0 0 0 1rem var(--accent);
}
.option:has(input:checked){background:rgba(138,182,255,.12);border-color:rgba(138,182,255,.5)}
.option:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.option:hover{background:rgba(255,255,255,.07);border-color:var(--line-strong)}}

.step-actions{display:flex;gap:.55rem;margin-top:1.35rem}
.step-actions .btn{flex:1}
.step-actions .btn-secondary{flex:0 0 auto;padding-inline:1.1rem}
.step-actions--single{margin-top:.4rem}
.sheet-foot{
  margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--line);
  font-size:.75rem;line-height:1.55;color:var(--muted);
}

/* Result */
.badge{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.3rem .65rem;border-radius:99px;
  font-size:.75rem;font-weight:600;
  border:1px solid;
  margin-bottom:1rem;
}
.badge::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:currentColor}
.badge-green{color:#8fe0ab;border-color:rgba(143,224,171,.32);background:rgba(143,224,171,.08)}
.badge-yellow{color:#f2d08a;border-color:rgba(242,208,138,.32);background:rgba(242,208,138,.08)}
.badge-red{color:#ffa8a2;border-color:rgba(255,168,162,.32);background:rgba(255,168,162,.08)}

.result-list{
  list-style:none;counter-reset:r;padding:0;margin:1.25rem 0 0;
  display:grid;gap:.7rem;
}
.result-list li{
  counter-increment:r;position:relative;
  padding-left:1.9rem;
  font-size:.875rem;line-height:1.55;color:var(--text-soft);
}
.result-list li::before{
  content:counter(r);
  position:absolute;left:0;top:.1rem;
  width:1.3rem;height:1.3rem;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.07);color:var(--muted);
  font-size:.6875rem;font-weight:600;
}
.account-next{
  margin-top:1.35rem;padding:1rem;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:rgba(255,255,255,.025);
}
.account-next h3{font-size:.9375rem;margin-bottom:.35rem}
.account-next p{font-size:.8125rem;line-height:1.55;color:var(--muted);margin-bottom:.85rem}
.text-btn{
  display:inline-flex;align-items:center;
  min-height:2.5rem;padding:.4rem 0;
  background:none;border:0;
  color:var(--accent);font-size:.875rem;font-weight:500;
}
.sheet-body .btn-outline{width:100%;margin-top:1.25rem}
.result-links{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;margin-top:.25rem}
.result-note{font-size:.75rem !important;line-height:1.55;color:var(--muted);margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line)}

/* Prepare + payment */
.prepare-warn{
  margin-top:1rem;padding:.7rem .85rem;
  border:1px solid rgba(242,208,138,.32);border-radius:var(--r-sm);
  background:rgba(242,208,138,.07);
  font-size:.8125rem;line-height:1.5;color:#f2d08a;
}
.prepare-actions{display:grid;gap:.5rem;margin-top:1.35rem}
.prepare-actions .btn{margin-top:0}
.prepare-actions .btn-outline{margin-top:0}
.sheet-body code{
  padding:.1rem .3rem;border-radius:3px;
  background:rgba(255,255,255,.08);
  font-family:ui-monospace,Menlo,monospace;font-size:.75rem;
  overflow-wrap:anywhere;
}
.plan{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:1.35rem;padding:.9rem 1rem;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:rgba(255,255,255,.04);
}
.plan-name{font-size:.9375rem;font-weight:550}
.plan-note{font-size:.75rem;line-height:1.45;color:var(--muted);margin-top:.2rem}
.plan-price{font-size:.9375rem;font-weight:600;color:var(--accent);white-space:nowrap}

/* Entry form */
.field{display:grid;gap:.45rem;margin-top:1.1rem}
.field label{font-size:.8125rem;color:var(--text-soft)}
.field input{
  width:100%;
  /* 16px keeps iOS Safari from zooming the page on focus. */
  font-size:1rem;
  min-height:3rem;
  padding:.75rem .9rem;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:rgba(255,255,255,.05);color:var(--text);
  transition:border-color 150ms var(--ease-out),background-color 150ms var(--ease-out);
}
.field input::placeholder{color:#6f737b}
.field input:focus{border-color:rgba(138,182,255,.6);background:rgba(138,182,255,.06)}
.field input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.field-password{position:relative}
.field-password input{padding-right:3rem}
.pw-toggle{
  position:absolute;inset-inline-end:.35rem;top:50%;
  translate:0 -50%;
  display:grid;place-items:center;
  width:2.25rem;height:2.25rem;
  border:0;border-radius:50%;
  background:none;color:var(--muted);
  transition:color 140ms var(--ease-out),background-color 140ms var(--ease-out);
}
.pw-toggle:active{background:rgba(255,255,255,.07)}
.pw-toggle[aria-pressed="true"]{color:var(--accent)}
@media (hover:hover) and (pointer:fine){.pw-toggle:hover{color:var(--text)}}
.consent{
  display:flex;align-items:flex-start;gap:.6rem;
  margin-top:1.1rem;
  font-size:.8125rem;line-height:1.45;color:var(--text-soft);
  cursor:pointer;
}
.consent input{
  appearance:none;-webkit-appearance:none;
  flex-shrink:0;
  width:1.15rem;height:1.15rem;margin:.1rem 0 0;
  border:1.5px solid rgba(255,255,255,.3);border-radius:.35rem;
  background:rgba(255,255,255,.05);
  transition:background-color 140ms var(--ease-out),border-color 140ms var(--ease-out);
}
.consent input:checked{
  border-color:var(--accent);background:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304121f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
  background-size:.8rem;background-position:center;background-repeat:no-repeat;
}
.consent a{color:inherit;text-decoration:underline;text-underline-offset:.15em}
.consent input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* The consent row is flex, so its error has to leave the flow to sit under it. */
.consent .field-error{flex-basis:100%}
#entry-form .btn-primary{margin-top:1.25rem}
.switch-line{
  display:flex;align-items:center;gap:.15rem;flex-wrap:wrap;
  margin-top:.35rem;
  font-size:.8125rem;color:var(--muted);
}
.switch-line .text-btn{font-size:.8125rem;min-height:2.25rem}
/* Provider sign-in. Two columns keep every brand readable without turning the
   sheet into a wall of white buttons; the marks carry their own brand colours,
   the only way they stay recognisable at 17px. */
.provider-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:.45rem;
  margin-top:1.25rem;
}
/* Seven providers in a two-column grid leave one orphan; let it fill the row
   and centre its mark so the button reads as deliberate, not as a mistake. */
.provider-grid .provider:last-child:nth-child(odd){grid-column:span 2;justify-content:center}
.provider{
  display:flex;align-items:center;gap:.55rem;
  min-height:2.75rem;padding:.5rem .7rem;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:rgba(255,255,255,.05);
  color:var(--text);font-size:.8125rem;font-weight:500;letter-spacing:-.005em;
  text-align:left;
  transition:background-color 140ms var(--ease-out),border-color 140ms var(--ease-out),transform 120ms var(--ease-out);
}
.provider:active{transform:scale(.98);transition-duration:90ms}
/* Locked providers stay legible: dimmed, but the mark keeps its brand colour so
   it reads as "configured later", not "broken". */
.provider[data-off]{opacity:.5}
.provider[data-off] svg{filter:grayscale(1)}
.provider[aria-busy="true"]{opacity:.7;cursor:progress}
.provider svg{width:1.05rem;height:1.05rem;flex-shrink:0;fill:currentColor}
.provider span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover:hover) and (pointer:fine){
  .provider:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.26)}
}
.provider-note{
  display:none;
  margin-top:.7rem;
  font-size:.75rem;line-height:1.5;color:var(--muted);
}
.provider-note[data-visible]{display:block}
.field-error{
  margin:.1rem 0 0;
  font-size:.75rem;line-height:1.45;color:#ff9d9d;
}
.form-error{
  display:none;
  margin:.9rem 0 0;
  padding:.6rem .75rem;
  border:1px solid rgba(255,138,138,.35);border-radius:var(--r-sm);
  background:rgba(255,138,138,.08);
  font-size:.8125rem;line-height:1.45;color:#ffb4b4;
}
.form-error[data-visible]{display:block}
.field input[aria-invalid="true"]{border-color:rgba(255,138,138,.55);background:rgba(255,138,138,.06)}
.account-user{
  display:flex;align-items:center;gap:.7rem;
  margin-top:1.15rem;padding:.7rem .8rem;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:rgba(255,255,255,.04);
}
.account-user img,.account-user-mark{
  width:2.5rem;height:2.5rem;flex-shrink:0;border-radius:50%;
  object-fit:cover;
}
.account-user-mark{
  display:grid;place-items:center;
  background:rgba(138,182,255,.16);
  color:var(--accent);font-size:.95rem;font-weight:600;
}
.account-user-name{margin:0;font-size:.875rem;color:var(--text)}
.account-user-via{margin:.15rem 0 0;font-size:.75rem;color:var(--muted)}
.account-user + p{margin-top:1.1rem}
.divider{
  display:flex;align-items:center;gap:.75rem;
  margin:1.1rem 0 0;
  font-size:.75rem;color:var(--muted);
}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.stages{list-style:none;counter-reset:s;padding:0;margin:1.4rem 0 0;display:grid;gap:1.1rem}
.stages li{counter-increment:s;position:relative;padding-left:2.4rem}
.stages li::before{
  content:counter(s);
  position:absolute;left:0;top:.05rem;
  width:1.7rem;height:1.7rem;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.07);
  color:var(--accent);font-size:.75rem;font-weight:600;
}
.stages strong{display:block;font-size:.9375rem;font-weight:550}
.stages span{display:block;font-size:.8125rem;line-height:1.5;color:var(--muted);margin-top:.15rem}

.noscript{
  margin:1rem;padding:1rem;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--bg-raised);text-align:center;font-size:.875rem;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .hero{grid-template-columns:1fr;justify-items:center;text-align:center;gap:1rem;padding-block:clamp(2rem,5vh,3.5rem)}
  .hero-copy{max-width:36rem;display:flex;flex-direction:column;align-items:center}
  .hero-actions{align-items:center}
  .hero-actions .fine{text-align:center}
  .hero-art{max-width:26rem;order:2}
  .faq{grid-template-columns:1fr;gap:2rem}
  .faq-head{position:static}
}

@media (max-width:820px){
  .clients-inner{flex-direction:column;align-items:flex-start;gap:1rem}
  .clients-note{text-align:left;max-width:none}
  .section-head{flex-direction:column;align-items:flex-start;gap:1rem}
  .section-note{max-width:none}
  .demo{grid-template-columns:1fr}
  .demo-base{border-right:0;border-bottom:1px solid var(--line);padding:1.5rem 1.35rem}
  .base-list{display:grid;grid-template-columns:1fr 1fr;gap:0 1.5rem}
  .base-live{grid-column:1/-1}
  .steps{grid-template-columns:1fr;gap:0}
  .steps li{padding:1.15rem 0;display:grid;grid-template-columns:2.25rem 1fr;column-gap:.75rem}
  .steps li:first-child{padding-top:0;border-top:0}
  .step-num{grid-row:span 2;padding-top:.2rem}
  .steps h3{margin:0 0 .3rem}
  .steps p{grid-column:2}
  .callout{flex-direction:column;align-items:flex-start;gap:1.25rem}
  .callout .btn{width:100%}
}

@media (max-width:640px){
  .header-nav{display:none}
  .hero h1{font-size:clamp(2.15rem,9.6vw,3rem)}
  .hero-lede{font-size:1.0625rem}
  .hero-art{max-width:22rem}
  .base-list{grid-template-columns:1fr}
  .demo-chat{padding:1.35rem 1.15rem 1.6rem}
  .turn{gap:.65rem}
  .avatar{width:1.65rem;height:1.65rem;font-size:.625rem}
  table{font-size:.8125rem}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:.6rem}

  /* Bottom sheet on touch-sized screens: full width, rounded on top only. */
  dialog#wizard{
    width:100%;max-width:100%;
    inset:auto 0 0;
    margin:0;
    max-height:min(92vh,44rem);
    max-height:min(92dvh,44rem);
    border-radius:var(--r-xl) var(--r-xl) 0 0;
    border-bottom:0;
    transform:translateY(100%);
  }
  dialog#wizard[data-open]{transform:none}
  .sheet-handle{
    display:grid;place-items:center;
    padding:.6rem 0 .1rem;
    cursor:grab;
    touch-action:none;
  }
  .sheet-handle span{
    display:block;width:2.25rem;height:.28rem;border-radius:99px;
    background:rgba(255,255,255,.28);
  }
  .sheet-top{padding:.35rem 1.1rem .8rem;border-bottom:0}
  .sheet-body{--pad-x:1.1rem;padding:0 var(--pad-x) calc(1.25rem + env(safe-area-inset-bottom))}
  .sheet-body h2{font-size:1.3rem}
  .step-actions .btn{min-height:3rem;font-size:.9375rem}
  .option{min-height:3.4rem;font-size:.9375rem}
}

@media (max-width:380px){
  .hero h1{font-size:2rem}
  .client-list{flex-wrap:wrap;row-gap:.5rem}
}

@media (max-height:600px) and (max-width:1000px){
  .hero{min-height:0;padding-block:1.5rem}
  .hero-art{max-width:16rem}
}

@media (max-height:600px) and (max-width:640px){
  .hero{padding-block:.5rem;gap:0}
  .hero .eyebrow{margin-bottom:.4rem}
  .hero-lede{margin-top:.6rem;line-height:1.4}
  .hero-actions{margin-top:.65rem;gap:.45rem}
  .hero-art{width:min(70vw,28svh)}
}

/* ── Preference handling ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{opacity:1;transform:none}
  /* The book starts in its complete open composition for these readers. */
  .acc-icon{transition:none}
  dialog#wizard{transform:none !important}
}

@media (prefers-reduced-transparency:reduce){
  .site-header,dialog#wizard{
    background:var(--bg-raised);
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  dialog#wizard::backdrop{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,0,.8)}
}

@media (prefers-contrast:more){
  :root{--muted:#cfd2d8;--text-soft:#f0f1f3;--line:rgba(255,255,255,.32);--line-strong:rgba(255,255,255,.5)}
  .site-header,dialog#wizard{background:#0d0e11;border-color:rgba(255,255,255,.4)}
  .btn-outline,.btn-glass,.option,.field input,.account-next,.provider,.consent input{border-color:rgba(255,255,255,.45)}
  .demo,.callout{border-color:rgba(255,255,255,.35)}
}

/* ── Share link ───────────────────────────────────────────────────────────
   The package link is meant to be forwarded, so it has to survive a copy: a
   readonly field the user can select by hand if the clipboard API is blocked,
   and a button that says what happened either way. */
.share-box{
  margin-top:1.4rem;padding:1rem;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:rgba(138,182,255,.06);
}
.share-box h3{font-size:.9375rem;margin-bottom:.35rem}
.share-box p{font-size:.8125rem;line-height:1.55;color:var(--muted);margin-bottom:.7rem}
.share-row{display:flex;gap:.5rem}
.share-row input{
  flex:1;min-width:0;min-height:2.5rem;padding:.55rem .7rem;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:rgba(0,0,0,.35);color:var(--text);
  font-size:.8125rem;font-family:inherit;
}
.share-row input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.share-row .btn{flex:0 0 auto}
.share-note{margin:.55rem 0 0;font-size:.75rem;color:var(--accent)}

/* ── Order ──────────────────────────────────────────────────────────────────
   One plan, one price, one button. The card repeats what the customer is
   buying so the amount is never the only thing on screen. */
.order-card{
  margin-top:1.3rem;padding:1rem;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:rgba(255,255,255,.035);
}
.order-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem}
.order-card-head h3{font-size:.9375rem;font-weight:600;margin:0}
.order-price{
  flex:0 0 auto;font-size:.9375rem;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--text);
}
.order-lines{margin-top:.7rem}
.order-pay{margin-top:1.1rem}
.order-total{
  display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;
  padding:.55rem 0 1rem;border-top:1px solid var(--line);
  font-size:.875rem;color:var(--muted);
}
.order-total strong{
  font-size:1.375rem;font-weight:600;color:var(--text);
  font-variant-numeric:tabular-nums;
}
.order-fine{
  margin-top:.9rem;font-size:.75rem;line-height:1.55;color:var(--muted);
}

/* ── Billing ────────────────────────────────────────────────────────────────
   Status first, then the choice, then the receipts. The sum sits on the same
   row as the state so "how much" is never a scroll away from "is it paid". */
.bill-status{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:1.3rem;padding:.9rem 1rem;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:rgba(255,255,255,.035);
}
.bill-status[data-tone="ok"]{border-color:rgba(143,224,171,.32);background:rgba(143,224,171,.07)}
.bill-status-main{display:grid;gap:.2rem;min-width:0}
.bill-status-label{font-size:.9375rem;font-weight:600}
.bill-status[data-tone="ok"] .bill-status-label{color:#8fe0ab}
.bill-status-note{font-size:.75rem;line-height:1.45;color:var(--muted)}
.bill-status-sum{
  flex:0 0 auto;font-size:1.25rem;font-weight:600;
  font-variant-numeric:tabular-nums;
}

.bill-methods{display:grid;gap:.45rem;margin:1.4rem 0 0;padding:0;border:0;min-width:0}
.bill-methods legend{margin-bottom:.7rem;padding:0}
.bill-method{
  display:flex;align-items:flex-start;gap:.7rem;
  padding:.8rem .9rem;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:rgba(255,255,255,.035);
  cursor:pointer;
  transition:background-color 140ms var(--ease-out),border-color 140ms var(--ease-out);
}
.bill-method input{
  appearance:none;-webkit-appearance:none;flex-shrink:0;
  width:1.05rem;height:1.05rem;margin:.15rem 0 0;
  border:1.5px solid rgba(255,255,255,.3);border-radius:50%;
  transition:border-color 140ms var(--ease-out),box-shadow 140ms var(--ease-out);
}
.bill-method input:checked{
  border-color:var(--accent);
  box-shadow:inset 0 0 0 .28rem var(--bg),inset 0 0 0 1rem var(--accent);
}
.bill-method-mark{
  display:grid;place-items:center;flex-shrink:0;
  width:1.6rem;height:1.6rem;border-radius:.4rem;
  background:rgba(255,255,255,.06);
  color:var(--text-soft);
}
.bill-method-mark svg{width:1rem;height:1rem;display:block}
.bill-method:has(input:checked){background:rgba(138,182,255,.12);border-color:rgba(138,182,255,.5)}
.bill-method:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .bill-method:not(.is-off):hover{background:rgba(255,255,255,.07);border-color:var(--line-strong)}
}
/* A method without credentials stays visible but locked: hiding it would make
   the merchant look like it accepts less than it does. */
.bill-method.is-off{opacity:.45;cursor:not-allowed}
@media (hover:hover) and (pointer:fine){
  .bill-method.is-off:hover{background:rgba(255,255,255,.035);border-color:var(--line)}
}
.bill-method-body{display:grid;gap:.2rem;min-width:0}
.bill-method-top{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.bill-method-name{font-size:.9375rem;font-weight:550}
.bill-method-tag{
  font-size:.625rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:.35rem;
  padding:.1rem .35rem;
}
.bill-method-note{font-size:.75rem;line-height:1.5;color:var(--muted)}
.bill-empty{
  font-size:.8125rem;line-height:1.55;color:var(--muted);
  padding:.85rem .9rem;border:1px dashed var(--line-strong);border-radius:var(--r-sm);
}

.bill-invoice-slot:not(:empty){margin-top:1.1rem}

.bill-invoice{
  padding:1rem;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:rgba(255,255,255,.025);
}
.bill-invoice h3{font-size:.875rem;font-weight:600;margin-bottom:.35rem}
.bill-invoice > p{font-size:.75rem;line-height:1.55;color:var(--muted);margin-bottom:.85rem}
.bill-facts{display:grid;gap:.5rem;margin:0 0 .85rem}
.bill-facts div{
  display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:.75rem;
  font-size:.75rem;line-height:1.5;
}
.bill-facts dt{color:var(--muted)}
.bill-facts dd{
  margin:0;color:var(--text-soft);
  /* An IBAN or a long company name must wrap, not widen the sheet. */
  overflow-wrap:anywhere;
  font-variant-numeric:tabular-nums;
}

.bill-history{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--line)}
.bill-history h3{font-size:.8125rem;font-weight:600;color:var(--muted);margin-bottom:.7rem}
.bill-history ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.bill-history li{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}
.bill-history-main{display:grid;gap:.15rem;min-width:0}
.bill-history-label{font-size:.8125rem;line-height:1.4}
.bill-history-date{
  font-size:.6875rem;line-height:1.45;color:var(--muted);
  overflow-wrap:anywhere;
}
.bill-history-side{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}
.bill-history-amount{
  font-size:.8125rem;font-variant-numeric:tabular-nums;color:var(--text-soft);
}
.bill-badge{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.15rem .5rem;border-radius:99px;
  font-size:.6875rem;font-weight:600;white-space:nowrap;
  border:1px solid;
}
.bill-badge::before{content:"";width:.32rem;height:.32rem;border-radius:50%;background:currentColor}
.bill-badge[data-tone="ok"]{color:#8fe0ab;border-color:rgba(143,224,171,.32);background:rgba(143,224,171,.08)}
.bill-badge[data-tone="wait"]{color:#f2d08a;border-color:rgba(242,208,138,.32);background:rgba(242,208,138,.08)}
.bill-badge[data-tone="bad"]{color:#ffa8a2;border-color:rgba(255,168,162,.32);background:rgba(255,168,162,.08)}

/* The account screen carries the billing entry point: one line of state and a
   way in, no second copy of the payment UI. */
.account-billing{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:1.4rem;padding:.85rem 1rem;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:rgba(255,255,255,.025);
}
.account-billing-label{font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.account-billing-note{font-size:.8125rem;color:var(--text-soft);margin-top:.2rem}
.account-billing .btn{flex:0 0 auto}

/* ── Как подключиться ───────────────────────────────────────────────────────
   One pasteable instruction, not a sales pitch. The text is generated from the
   connector's own install-text module, so the price and the free-question count
   here are the shipped ones. It is a <pre> with a fixed max height because a
   customer needs to see the whole thing without the sheet growing past the
   viewport on a phone. */
.install-copy{
  margin-top:1.3rem;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:rgba(255,255,255,.035);
  overflow:hidden;
}
.install-copy-head{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.7rem .8rem;
  border-bottom:1px solid var(--line);
  font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);
}
.install-copy-head .btn{flex:0 0 auto;text-transform:none;letter-spacing:0;font-size:.8125rem}
.install-text{
  margin:0;padding:.85rem .9rem;
  max-height:15rem;overflow:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.75rem;line-height:1.6;
  color:var(--text-soft);
  white-space:pre-wrap;overflow-wrap:anywhere;
  -webkit-overflow-scrolling:touch;
}
.install-text:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.install-fallback{margin:.8rem .9rem;font-size:.8125rem;line-height:1.55;color:#f2d08a}
.install-facts{
  list-style:none;margin:1.2rem 0 0;padding:0;
  display:grid;gap:.5rem;
  font-size:.8125rem;line-height:1.55;color:var(--muted);
}
.install-facts li{position:relative;padding-left:1.05rem}
.install-facts li::before{content:"·";position:absolute;left:.25rem;color:var(--accent);font-weight:700}
.install-facts strong{color:var(--text-soft);font-weight:550}
/* The client picker: the first decision in the funnel, so it comes before the text. Steps are
   generated from the connector's own client list — see `clients.ts` — and the panel swaps
   without a re-render of the sheet, so choosing a client cannot lose the copied text. */
.client-choice{margin:1.1rem 0 0;padding:0 0 1rem;border-bottom:1px solid var(--line)}
.client-choice-label{
  margin:0 0 .55rem;font-size:.6875rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.client-choice .options{margin-top:0}
.client-choice .option span{font-size:.8125rem;line-height:1.5;color:var(--muted)}
.client-choice .option strong{color:var(--text);font-weight:600}
.client-panel{margin-top:.9rem;padding:.85rem .9rem;border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(255,255,255,.03)}
.client-steps{margin:0;padding-left:1.25rem;display:grid;gap:.4rem;font-size:.8125rem;line-height:1.55;color:var(--text-soft)}
.client-steps li::marker{color:var(--accent);font-variant-numeric:tabular-nums}
.client-caveat{margin:.75rem 0 0;font-size:.75rem;line-height:1.55;color:#f2d08a}
/* The one thing a customer may not have: a published OData. The answer is short enough to keep
   here — the paid PDF is a separate deliverable and must not become the only way to connect. */
.install-guide{margin:.6rem 0 0;border-bottom:1px solid var(--line)}
.install-guide summary{
  display:flex;align-items:center;gap:.4rem;
  padding:.55rem 0;cursor:pointer;list-style:none;
  font-size:.8125rem;color:var(--text-soft);
}
.install-guide summary::-webkit-details-marker{display:none}
.install-guide summary::before{
  content:"+";flex:0 0 auto;width:.75rem;
  font-weight:600;color:var(--accent);
}
.install-guide[open] summary::before{content:"–"}
.install-guide summary:hover{color:var(--text)}
.install-guide-body{padding:.1rem 0 .9rem;font-size:.8125rem;line-height:1.6;color:var(--muted)}
.install-guide-body p{margin:0 0 .5rem}
.install-guide-body ul{margin:0 0 .5rem;padding-left:1.05rem;display:grid;gap:.3rem}
.install-guide-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.75rem;color:var(--text-soft);
}

/* The two files. Primary is the Claude Desktop extension; the other is the single file every other
   client runs with Node. The checksums sit under the buttons so they can be compared by eye. */
.sheet-body .install-downloads{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin:1.1rem 0 0}
.sheet-body .install-downloads .btn{width:100%;margin-top:0}
.download-meta,.download-note{grid-column:1 / -1}
.download-meta{display:grid;gap:.2rem;font-size:.6875rem;line-height:1.5;color:var(--muted)}
.download-meta p{margin:0;overflow-wrap:anywhere}
.download-meta code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.6875rem;color:var(--text-soft)}
.download-meta a{color:var(--accent)}
.download-note{margin:0;font-size:.75rem;line-height:1.55;color:var(--muted)}

@media (max-width:520px){
  .install-text{max-height:12rem;font-size:.71875rem}
  .sheet-body .install-downloads{grid-template-columns:1fr}
}

/* `hidden` must win over the sheet's own paragraph styling. */
[hidden]{display:none !important}

/* Chat demo: five accountant scenarios in one box. Without script the first scene is simply shown; with script
   (demo.js adds .js-chat) the question types itself, the answer fades in under it and the scenes take turns.
   All scenes share one grid cell so the box is as tall as the tallest and never jumps. */
.scene-tabs{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.1rem}
.scene-tab{
  font:inherit;font-size:.75rem;line-height:1;color:var(--muted);
  background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:.5rem .8rem;cursor:pointer;
  transition:color .2s ease,border-color .2s ease,background-color .2s ease;
}
.scene-tab:hover{color:var(--text-soft);border-color:rgba(255,255,255,.22)}
.scene-tab[aria-pressed="true"]{color:var(--text);border-color:rgba(138,182,255,.5);background:rgba(138,182,255,.1)}
.scene-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.scenes{display:grid}
.scene{grid-area:1/1;visibility:hidden;opacity:0}
.scene.is-active{visibility:visible;opacity:1}
.js-chat .scene{transition:opacity .35s ease}
.js-chat [data-answer]{transition:opacity .45s ease,transform .45s ease}
.js-chat [data-answer].is-waiting{opacity:0;transform:translateY(.5rem)}
.js-chat [data-question].is-typing::after{
  content:"";display:inline-block;width:.12rem;height:1em;margin-left:.1rem;vertical-align:-.12em;
  background:var(--accent);animation:chat-caret 1s steps(1) infinite;
}
.chat-thinking{display:none;gap:.3rem;margin:1.4rem 0 0 2.75rem}
.chat-thinking.is-on{display:flex}
.chat-thinking span{
  width:.35rem;height:.35rem;border-radius:50%;background:var(--muted);
  animation:chat-dot 1s ease-in-out infinite;
}
.chat-thinking span:nth-child(2){animation-delay:.15s}
.chat-thinking span:nth-child(3){animation-delay:.3s}
@keyframes chat-caret{50%{opacity:0}}
@keyframes chat-dot{0%,80%,100%{opacity:.25;transform:none}40%{opacity:1;transform:translateY(-.2rem)}}
@media (prefers-reduced-motion:reduce){
  .js-chat .scene,.js-chat [data-answer]{transition:none}
  .js-chat [data-question].is-typing::after,.chat-thinking span{animation:none}
}