:root {
  color-scheme: dark;
  --bg: #000;
  --card: #0e0e10;
  --card-2: #151517;
  --card-3: #1c1c1f;
  --glass: rgba(255, 255, 255, 0.035);
  --glass-2: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.12);
  --line-3: rgba(255, 255, 255, 0.2);
  --text: #f5f5f7;
  --muted: #a1a1a6;
  --faint: #6e6e74;
  --ghost: #4c4c52;
  --warm: 255, 214, 172;
  --danger: #ff8a80;
  --radius: 14px;
  --radius-lg: 20px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --font: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --serif: "Bodoni Moda", "Bodoni 72", Didot, serif;
  --script: "Pinyon Script", "Snell Roundhand", cursive;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--font);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
main { flex: 1; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; }
.sub, .lede, .section-head p { text-wrap: pretty; }
img, svg, video { display: block; }
::selection { background: #fff; color: #000; }
:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: 3px; border-radius: 8px; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.mono { font-family: var(--mono); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }
.tc { text-align: center; }
.kicker { display: inline-block; font: 500 11.5px/1.2 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }

/* "siaive" in a serif pill of glass, as on the app's sign-in. */
.display em, h1 em, h2 em {
  position: relative; display: inline-block; margin: 0 0.04em; padding: 0.02em 0.28em 0.08em; border-radius: 0.42em;
  font: 400 1em/1 var(--serif); font-variation-settings: "opsz" 14; letter-spacing: 0.01em; color: #fff;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.5), 0 0 42px rgba(var(--warm), 0.35);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 24px rgba(255, 255, 255, 0.05), 0 12px 40px -12px rgba(255, 210, 170, 0.25);
}
.display em::after, h1 em::after, h2 em::after {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent); box-shadow: 0 0 12px 1px rgba(255, 255, 255, 0.45);
}
.display { font-size: clamp(2.6rem, 5vw, 4.4rem); font-weight: 300; line-height: 1.06; letter-spacing: -0.045em; color: #f5f5f6; }
.display.md { font-size: clamp(2.2rem, 4vw, 3.4rem); }
.display.sm { font-size: clamp(2rem, 3.3vw, 2.9rem); line-height: 1.1; }

/* ---- header ---------------------------------------------------------------------------------------------------- */
.top {
  position: sticky; top: 0; z-index: 20; height: 64px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: saturate(140%) blur(20px);
  -webkit-backdrop-filter: saturate(140%) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.top.clear { background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent); border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: #e8e8ea; }
/* The name in siaive's typeface, at the wordmark's optical size. */
.brand span { font: 500 21px/1 var(--serif); font-variation-settings: "opsz" 14; letter-spacing: 0.02em; }
.brand svg { width: 26px; height: 26px; }
/* siaive's name wherever a page shows it (brandName.ts): síaíve in Bodoni, a touch larger to stand level with the sans
   around it, lowercase in capitalised labels too; as it is where the type is Bodoni already. */
.brand-name { font-family: var(--serif); font-variation-settings: "opsz" 14; font-size: 1.1em; font-weight: 500; letter-spacing: 0.01em; line-height: 1; text-transform: none; font-synthesis: none; }
.brand .brand-name, .display em .brand-name, h1 em .brand-name, h2 em .brand-name, .member-brand .brand-name { font: inherit; font-variation-settings: inherit; letter-spacing: inherit; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a.link, .nav button.link {
  color: var(--muted); font: 450 14px/1 var(--font); padding: 10px 12px; border-radius: 999px;
  background: none; border: 0; cursor: pointer; transition: color .2s, background .2s;
}
.nav a.link:hover, .nav button.link:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.nav form { margin: 0; }
.nav .btn { margin-left: 6px; }

/* ---- buttons ---------------------------------------------------------------------------------------------------- */
.btn {
  --h: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: var(--h); padding: 0 24px; border-radius: 999px;
  font: 500 14.5px/1 var(--font); letter-spacing: -0.005em; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer; text-align: center; color: var(--text); background: none;
  transition: transform .2s var(--ease), background .2s, border-color .2s, color .2s, box-shadow .3s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex: none; }
/* White, with a soft warm and violet light at its sides. */
.btn-primary {
  border: 0; color: #0b0b0c; background: linear-gradient(180deg, #ffffff, #e8e8ec);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08), 0 0 28px -6px rgba(255, 255, 255, 0.4), 14px 0 34px -14px rgba(196, 150, 255, 0.7), -14px 0 34px -16px rgba(255, 196, 140, 0.6);
}
.btn-primary:hover { background: #fff; color: #000; transform: translateY(-1px); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08), 0 0 40px -6px rgba(255, 255, 255, 0.55), 16px 0 40px -14px rgba(196, 150, 255, 0.85), -16px 0 40px -16px rgba(255, 196, 140, 0.75); }
.btn-ghost { border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.02); color: #e6e6e8; }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.28); }
.btn-quiet { color: var(--muted); padding: 0 14px; }
.btn-quiet:hover { color: var(--text); }
.btn-danger { color: var(--muted); border-color: var(--line-2); }
.btn-danger:hover { color: var(--danger); border-color: rgba(255, 138, 128, 0.4); }
.btn-sm { --h: 36px; padding: 0 16px; font-size: 13.5px; }
.btn-lg { --h: 50px; padding: 0 28px; font-size: 15px; }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .42; cursor: not-allowed; pointer-events: none; box-shadow: none; }
form.inline { display: inline; margin: 0; }

/* ---- the stage: black space, a sphere of light (site.js) and the words beside it --------------------------------- */
.stage { position: relative; isolation: isolate; overflow: hidden; display: flex; margin-top: -64px; padding-top: 64px; min-height: 100vh; min-height: 100svh; }
.stage > .orb { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; }
.stage::after { content: ""; position: absolute; inset: auto 0 0; height: 140px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, transparent, #000); }
.stage-grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px 48px; padding-block: 48px 72px; }
.stage-panel { display: flex; flex-direction: column; align-items: flex-start; max-width: 540px; min-width: 0; }
.orb-spot { justify-self: center; width: min(100%, 560px, 66vh); aspect-ratio: 1; pointer-events: none; }
/* The first sphere of a visit gathers before the words come in; later pages open on it formed. */
.stage-panel > * { animation: stage-in 0.7s var(--ease) both; }
.stage-panel > *:nth-child(2) { animation-delay: 0.05s; }
.stage-panel > *:nth-child(3) { animation-delay: 0.1s; }
.stage-panel > *:nth-child(n+4) { animation-delay: 0.16s; }
.orb-intro [data-orb-stage]:not(.formed) .stage-panel > * { opacity: 0; animation: none; }
.orb-intro [data-orb-stage].formed .stage-panel > * { animation-duration: 0.9s; }
@keyframes stage-in { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }
.stage-panel .kicker + .display { margin-top: 16px; }
.stage .lede { margin-top: 20px; max-width: 30rem; color: #8e8e95; font-size: 16.5px; line-height: 1.6; }
.stage .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.stage .fine { margin-top: 22px; }
.fine { color: var(--ghost); font: 400 12.5px/1.5 var(--mono); letter-spacing: 0.02em; }

/* ---- the home page's hero: the headline, centred, then the app's window at work under a beam of light ------------ */
.hero { position: relative; isolation: isolate; padding: clamp(40px, 7vh, 88px) 0 40px; }
.hero-copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-copy > * { animation: stage-in 0.7s var(--ease) both; }
.hero-copy > *:nth-child(2) { animation-delay: 0.05s; }
.hero-copy .display { margin-top: 18px; font-size: clamp(2.7rem, 6.4vw, 5.6rem); line-height: 1.02; text-wrap: balance; }
/* A screenshot of siaive's window, 1440 x 900 (on a phone the editor alone, 1040 x 900), framed as a Mac window: its
   corners, edge and shadow, and the traffic lights where macOS draws them (12 px wide, 10, 30 and 50 px from the left,
   16 px down), sized by the picture's width so they sit right at any size. --px is one of the screenshot's px, for
   what is drawn over it. */
.app-shot {
  --base: 1440; --px: calc(100cqw / 1440);
  position: relative; margin: 0 auto; max-width: 1080px; container-type: inline-size;
  border-radius: 10px; overflow: hidden; background: #0e0e10;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.9), 0 50px 140px -40px rgba(0, 0, 0, 0.95), 0 0 160px -60px rgba(var(--warm), 0.3);
}
.app-shot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); pointer-events: none; }
.app-shot img { display: block; width: 100%; height: auto; }
.app-shot .lights i { position: absolute; top: calc(100cqw * 16 / var(--base)); left: calc(100cqw * 10 / var(--base)); width: calc(100cqw * 12 / var(--base)); aspect-ratio: 1; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.25); }
.app-shot .lights i:nth-child(2) { left: calc(100cqw * 30 / var(--base)); background: #febc2e; }
.app-shot .lights i:nth-child(3) { left: calc(100cqw * 50 / var(--base)); background: #28c840; }
/* The demo (site/demo.ts). Each stage of the edit is the editor at that stage, the window's left 1040 of its 1440 px,
   laid over the picture; the chat is drawn as siaive draws it (studio.css, the product's paneled chat), over the
   picture's own empty chat at the same place and size. Without the script all of it shows: the finished edit and the
   whole exchange. With it (.demo-on) each part shows as the exchange reaches it (.on). */
.app-shot .demo-edit { position: absolute; left: 0; top: 0; width: calc(100% * 1040 / 1440); transition: opacity 0.3s var(--ease); }
/* Each stage moves the app's panels (the timeline grows a track), so a stage fades in over the last and the last goes
   only once it is covered: never two layouts half seen at once. */
.demo-on .demo-edit:not(.on) { opacity: 0; transition-delay: 0.3s; }
.demo-chat {
  position: absolute; left: calc(var(--px) * 1040); top: calc(var(--px) * 44); width: calc(var(--px) * 400); height: calc(var(--px) * 856);
  font-family: -apple-system, "system-ui", Inter, "Segoe UI", sans-serif; font-size: calc(var(--px) * 13); line-height: 1.62;
  letter-spacing: normal; color: #d6d6d6; text-align: left; pointer-events: none;
}
.dc-head {
  position: absolute; left: calc(var(--px) * 18); top: calc(var(--px) * 14.9); width: calc(var(--px) * 153); height: calc(var(--px) * 18.2);
  background: #151515; color: #a0a0a0; font-size: calc(var(--px) * 12.5); font-weight: 500; line-height: calc(var(--px) * 18.2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dc-list {
  position: absolute; left: 0; top: calc(var(--px) * 48); width: 100%; height: calc(var(--px) * 696); overflow: hidden;
  display: flex; flex-direction: column; gap: calc(var(--px) * 16); padding: calc(var(--px) * 6) calc(var(--px) * 18) calc(var(--px) * 20); background: #151515;
}
.dc-head, .dc-list, .app-shot .dc-chip { transition: opacity 0.3s var(--ease); }
.dc-user, .dc-live, .dc-ai { animation: dc-fade 0.2s var(--ease) both; }
.dc-user {
  align-self: flex-end; max-width: 86%; padding: calc(var(--px) * 9) calc(var(--px) * 13); border: max(0.5px, calc(var(--px) * 1)) solid #2c2c2f;
  border-radius: calc(var(--px) * 16) calc(var(--px) * 16) calc(var(--px) * 6) calc(var(--px) * 16); background: #232325; color: #ececec; white-space: pre-wrap;
}
/* siaive AI at work: one line in plain words, each step morphing into the next as the app's does. */
.dc-live { display: none; align-items: center; gap: calc(var(--px) * 10); min-height: calc(var(--px) * 22); font-size: calc(var(--px) * 12.5); }
.dc-orb {
  width: calc(var(--px) * 13); height: calc(var(--px) * 13); flex: none; border-radius: 50%;
  background: conic-gradient(from 0deg, #2f8bea, #9d6bff, #ff7a59, #f5c451, #2f8bea);
  -webkit-mask: radial-gradient(circle, transparent calc(var(--px) * 3.6), #000 calc(var(--px) * 4.2)); mask: radial-gradient(circle, transparent calc(var(--px) * 3.6), #000 calc(var(--px) * 4.2));
  filter: drop-shadow(0 0 calc(var(--px) * 5) rgba(140, 120, 255, 0.45)); animation: dc-spin 1.4s linear infinite;
}
.dc-track { position: relative; flex: 1; min-width: 0; height: calc(var(--px) * 20); overflow: hidden; }
.dc-words {
  position: absolute; left: 0; top: 0; max-width: 100%; line-height: calc(var(--px) * 20); white-space: nowrap;
  background: linear-gradient(90deg, #7c7c80 0%, #7c7c80 38%, #f2f2f2 50%, #7c7c80 62%, #7c7c80 100%); background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: dc-shine 2.4s linear infinite, dc-in 0.34s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
.dc-words.out { animation: dc-shine 2.4s linear infinite, dc-out 0.34s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.dc-by { display: flex; align-items: center; gap: calc(var(--px) * 6); margin-bottom: calc(var(--px) * 5); color: #6e6e6e; font-size: calc(var(--px) * 11.5); font-weight: 500; }
.dc-by svg { width: calc(var(--px) * 12); height: calc(var(--px) * 12); }
.dc-ai p { margin: 0 0 calc(var(--px) * 7); }
.dc-ai b { font-weight: 600; color: #ececec; }
.dc-caret {
  display: inline-block; width: calc(var(--px) * 7); height: calc(var(--px) * 13); margin-left: calc(var(--px) * 2); vertical-align: calc(var(--px) * -2);
  border-radius: 1px; background: #d97757; animation: dc-blink 1s steps(2) infinite;
}
/* The request being typed, over the chat box's empty field and its placeholder. */
.dc-input {
  display: none; position: absolute; left: calc(var(--px) * 13); top: calc(var(--px) * 744.2); width: calc(var(--px) * 374); height: calc(var(--px) * 52);
  padding: calc(var(--px) * 12) calc(var(--px) * 15) calc(var(--px) * 4); border-radius: calc(var(--px) * 15) calc(var(--px) * 15) 0 0;
  background: #1c1c1e; color: #e2e2e2; line-height: 1.5; white-space: pre-wrap;
}
.dc-cursor { display: inline-block; width: max(1px, calc(var(--px) * 1.5)); height: calc(var(--px) * 16); margin-left: 1px; vertical-align: calc(var(--px) * -3); background: #e2e2e2; animation: dc-cursor 1s steps(1) infinite; }
/* The chat's box with the selected title's chip in it, as the app shows it once the title is clicked. */
.app-shot .dc-chip { position: absolute; left: 0; top: calc(var(--px) * 700); width: 100%; }
.demo-on .dc-head:not(.on), .demo-on .dc-list:not(.on), .demo-on .dc-chip:not(.on) { opacity: 0; }
.demo-on .dc-user:not(.on), .demo-on .dc-ai:not(.on) { display: none; }
.demo-on .dc-live.on { display: flex; }
.demo-on .dc-input.on { display: block; }
.demo-on .dc-w:not(.on) { visibility: hidden; }
@keyframes dc-fade { from { opacity: 0; transform: translateY(-2px); } }
@keyframes dc-spin { to { transform: rotate(360deg); } }
@keyframes dc-shine { from { background-position: 100% 0; } to { background-position: -60% 0; } }
@keyframes dc-in { from { opacity: 0; transform: translateY(0.56em); filter: blur(0.24em); } }
@keyframes dc-out { to { opacity: 0; transform: translateY(-0.56em); filter: blur(0.24em); } }
@keyframes dc-blink { 0%, 80%, 100% { opacity: 0.2; } 40% { opacity: 1; } }
@keyframes dc-cursor { 50% { opacity: 0; } }
/* The window's place under the headline, with room above it for the beam to fall. */
.laser-stage { padding-top: clamp(110px, 12vw, 170px); }
/* The light's canvas spans the hero's width under everything in it, from the bottom edge of the headline's "siaive",
   where the beam comes out (its script sets the top and --laser-x), to the hero's foot. Its mask lets the beam out of
   the pill at full strength and fades the haze in from the canvas's top edge, so there is no line. */
.hero > .wrap { position: relative; z-index: 1; }
.laser {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(56px 30px at var(--laser-x, 50%) 0, #000 40%, transparent), linear-gradient(transparent, #000 110px);
  mask-image: radial-gradient(56px 30px at var(--laser-x, 50%) 0, #000 40%, transparent), linear-gradient(transparent, #000 110px);
}
.laser canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.logos { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 34px; color: var(--ghost); font: 400 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 44px; }

/* ---- sections --------------------------------------------------------------------------------------------------- */
.section { padding: 120px 0; }
.section.tight { padding: 72px 0; }
.section-head { text-align: center; max-width: 46rem; margin: 0 auto 60px; }
.section-head h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); font-weight: 300; letter-spacing: -0.04em; margin-top: 16px; }
.section-head p { color: var(--muted); font-size: 1.05rem; margin-top: 18px; }

.glass, .card, .plan {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ---- the home page under the hero (site/features.ts; the motion is site/motion.ts) ----------------------------------- */
/* Coming in as they reach the screen, up and out of a blur, those that arrive together one after another (--delay).
   Only where motion is welcome (.moves, from the script): otherwise everything is simply there. */
.moves [data-reveal], .moves [data-stagger] > * { transition: opacity 0.9s var(--ease) var(--delay, 0s), translate 0.9s var(--ease) var(--delay, 0s), filter 0.9s var(--ease) var(--delay, 0s); }
.moves [data-reveal]:not(.in), .moves [data-stagger] > :not(.in) { opacity: 0; translate: 0 28px; filter: blur(8px); }

/* What siaive does, in one paragraph whose words light up as the reader goes down the page. */
.section.statement { padding: 150px 0 20px; text-align: center; }
.lit { max-width: 1000px; margin: 26px auto 0; font-size: clamp(1.7rem, 3.5vw, 3rem); font-weight: 300; line-height: 1.24; letter-spacing: -0.035em; color: var(--text); text-wrap: balance; }
.lit em { font: italic 400 1.1em/1 var(--serif); font-variation-settings: "opsz" 14; letter-spacing: -0.01em; color: #fff; }
.moves .lit .w { color: #313136; transition: color 0.45s var(--ease), text-shadow 0.45s; }
.moves .lit .w.on { color: var(--text); }
.moves .lit em .w.on { color: #fff; text-shadow: 0 0 24px rgba(var(--warm), 0.5); }

/* The features: a large picture beside a small one in each row, each picture the feature at work. */
.section.fx-sec { padding-top: 64px; }
.fx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fx {
  position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 40px 90px -60px rgba(0, 0, 0, 0.9);
}
.fx.wide { grid-column: span 2; }
.moves .fx-grid > .fx { transition: opacity 0.9s var(--ease) var(--delay, 0s), translate 0.9s var(--ease) var(--delay, 0s), filter 0.9s var(--ease) var(--delay, 0s), border-color 0.3s, transform 0.5s var(--ease); }
.fx:hover { border-color: var(--line-2); transform: translateY(-3px); }
/* A soft light that follows the pointer over a card or a plan (its place, --mx and --my, from the script). */
.fx::after, .plan::before {
  content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.4s;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.06), transparent 45%);
}
.fx:hover::after, .plan:hover::before { opacity: 1; }
.fx-demo { position: relative; height: 340px; overflow: hidden; background: #0b0b0c; border-bottom: 1px solid var(--line); }
.fx-copy { padding: 24px 28px 28px; }
.fx-copy h3 { font-size: 18px; font-weight: 550; letter-spacing: -0.02em; }
.fx-copy p { color: var(--muted); margin-top: 8px; font-size: 14.5px; line-height: 1.6; max-width: 36rem; }
.fx .tag { display: inline-block; margin-top: 16px; font: 400 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--line-2); padding: 6px 9px; border-radius: 99px; }
.fx-chip {
  position: absolute; left: 14px; top: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px 0 8px;
  border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(12, 12, 14, 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 500 11.5px/1 var(--font); color: #e8e8ea; white-space: nowrap;
}
.fx-chip svg { width: 13px; height: 13px; stroke: currentColor; }
/* A picture cut to fill its box as object-fit: cover does, so what is laid over it stays on its spot at any size. */
.fx-cover { container-type: size; }
.fx-frame { position: absolute; left: 50%; top: 50%; width: max(100cqw, 100cqh * var(--ar)); aspect-ratio: var(--ar); transform: translate(-50%, -50%); container-type: inline-size; }
.fx-frame > img, .fx-frame > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* The storyboard: four shots, built one after another (.on, from the script). */
.sb { display: flex; flex-direction: column; gap: 16px; padding: 22px 24px 20px; background: radial-gradient(90% 70% at 50% 0%, rgba(var(--warm), 0.06), transparent 70%), #0b0b0c; }
.sb-top { display: flex; justify-content: space-between; font: 500 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.sb-brief { display: flex; align-items: baseline; gap: 10px; margin: -4px 0 0; color: #d4d4d8; font-size: 13.5px; }
.sb-brief b { flex: none; font: 500 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.sb-row { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.sb-shot {
  display: flex; flex-direction: column; gap: 9px; padding: 8px 8px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025);
  transition: opacity 0.7s var(--ease) var(--d, 0s), translate 0.7s var(--ease) var(--d, 0s), border-color 0.5s, background 0.5s, box-shadow 0.5s, transform 0.5s var(--ease);
}
.sb-shot:nth-child(2) { --d: 0.12s; }
.sb-shot:nth-child(3) { --d: 0.24s; }
.sb-shot:nth-child(4) { --d: 0.36s; }
.moves .fx:not(.in) .sb-shot { opacity: 0; translate: 0 18px; }
.sb-shot.on { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.055); box-shadow: 0 22px 40px -26px rgba(var(--warm), 0.6); transform: translateY(-4px); }
.sb-pic { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; }
.sb-pic video { width: 100%; height: 100%; object-fit: cover; }
.sb-pic b { position: absolute; left: 6px; top: 6px; padding: 3px 5px; border-radius: 5px; background: rgba(0, 0, 0, 0.6); font: 500 9.5px/1 var(--mono); color: #fff; }
.sb-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 0 3px; }
.sb-meta strong { font-size: 13px; font-weight: 550; color: var(--text); }
.sb-meta span { font: 400 10.5px/1 var(--mono); color: var(--faint); }
.sb-what { padding: 0 3px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.sb-foot { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--muted); }
.sb-status { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.sb-status svg { width: 14px; height: 14px; }
.sb-bar { flex: 1; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.sb-bar i { display: block; height: 100%; transform-origin: left; transform: scaleX(var(--sb, 1)); background: linear-gradient(90deg, rgba(var(--warm), 0.35), #fff); transition: transform 0.7s var(--ease); }

/* Captions on three people cut for a phone, one after another (.on, from the script), the face kept clear, each in one
   of siaive's styles as the words are said (.said, the one being said .on): Pop springs each word in and lights the one
   being said, Headline stacks huge words and outlines those already said, Liquid slides a pill from word to word. */
.cap { --ar: 0.8889; }
/* Cut nearer the top than the bottom, for headroom under the chip: a fifth of what doesn't fit goes above. */
.cap .fx-frame { top: 0; transform: translate(-50%, calc(20cqh - 20%)); }
.cap-sp { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s var(--ease); }
.cap-sp.on { opacity: 1; }
.cap-sp > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cap-face {
  position: absolute; background-repeat: no-repeat;
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  background-size: 14px 1.5px, 1.5px 14px, 14px 1.5px, 1.5px 14px, 14px 1.5px, 1.5px 14px, 14px 1.5px, 1.5px 14px;
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%; opacity: 0.85;
}
.cap-pod .cap-face { left: 42%; top: 20%; width: 30%; height: 34%; }
.cap-fit .cap-face { left: 38.5%; top: 16%; width: 23%; height: 21%; }
.cap-trv .cap-face { left: 34%; top: 22%; width: 32%; height: 28%; }
.cap-face b { position: absolute; left: 8px; top: 8px; padding: 3px 6px; border-radius: 5px; background: rgba(0, 0, 0, 0.5); font: 500 9.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #fff; }
.cap-sp.on .cap-face { animation: cap-face 1.8s var(--ease) both; }
@keyframes cap-face { from { opacity: 0; transform: scale(1.18); } 40% { opacity: 1; } }
/* The captions' foot a tenth of the box up from its foot, however much of the frame the box cuts off (cqw is the
   frame's width here, cqh the box's height). */
.cap-lines { position: absolute; left: 5%; right: 5%; bottom: calc(0.8 * (100cqw / var(--ar) - 100cqh) + 10cqh); }
.cap-p { position: relative; z-index: 1; display: none; flex-wrap: wrap; justify-content: center; gap: 0 0.42em; margin: 0; font: 800 7.6cqw/1.08 var(--font); text-transform: uppercase; letter-spacing: -0.01em; }
.cap-p.on { display: flex; }
.cap-w { display: inline-block; color: #fff; text-shadow: 0 0.04em 0.3em rgba(0, 0, 0, 0.55); }
/* Pop: each word springs in as it is said, the one being said green and a size up. */
[data-look="pop"] .cap-w { opacity: 0; transform: translateY(0.3em) scale(0.4); transition: opacity 0.12s, transform 0.42s cubic-bezier(0.3, 1.9, 0.5, 1), color 0.12s; }
[data-look="pop"] .cap-w.said { opacity: 1; transform: none; }
[data-look="pop"] .cap-w.on { color: #7cff6b; transform: scale(1.14); }
/* Headline: two huge words stacked, each rising out of its line, the one being said filled, those before it outlined. */
[data-look="headline"] .cap-p { flex-direction: column; align-items: center; font: 900 14.5cqw/0.9 var(--font); letter-spacing: -0.035em; }
[data-look="headline"] .cap-w { color: transparent; -webkit-text-stroke: 0.4cqw #fff; text-shadow: none; clip-path: inset(100% -5% 0 -5%); translate: 0 0.35em; transition: clip-path 0.4s var(--ease), translate 0.4s var(--ease), color 0.2s; }
[data-look="headline"] .cap-w.said { clip-path: inset(-10% -5% -10% -5%); translate: 0 0; }
[data-look="headline"] .cap-w.on { color: #ffd166; -webkit-text-stroke-color: #ffd166; filter: drop-shadow(0 0.04em 0.25em rgba(0, 0, 0, 0.5)); }
/* Liquid: sentence case, and a pill that flows to the word being said (placed by the script), overshooting a little. */
[data-look="liquid"] .cap-p { font: 700 6.8cqw/1.25 var(--font); text-transform: none; letter-spacing: -0.02em; }
[data-look="liquid"] .cap-w { transition: color 0.2s; }
[data-look="liquid"] .cap-w.on { color: #1b0f08; text-shadow: none; }
.cap-u { position: absolute; z-index: 0; border-radius: 0.6em; background: #ff8a4c; box-shadow: 0 0.3em 1.2em -0.3em rgba(255, 120, 60, 0.8); font-size: 6.8cqw; opacity: 0; transition: opacity 0.2s; }
.cap-u.on { opacity: 1; transition: opacity 0.2s, left 0.36s cubic-bezier(0.45, 1.5, 0.45, 1), width 0.36s cubic-bezier(0.45, 1.5, 0.45, 1), top 0.3s var(--ease); }

/* A title between the frame and the subject cut out of it: the photo and the title drift apart with the pointer and
   the scroll (--tx, --ty, --sy from the script), the depth the title sits at. */
.ttl { --ar: 1.3333; }
/* Kept to its left edge, where the title is, when the box is narrower than the picture. */
.ttl .fx-frame { left: 0; transform: translateY(-50%); }
/* The title is over the sky at the top, so the chip goes to the foot. */
.ttl .fx-chip { top: auto; bottom: 14px; left: auto; right: 14px; }
.ttl-photo { transform: scale(1.08) translate(calc(var(--tx, 0) * 0.8cqw), calc(var(--ty, 0) * 0.6cqw + var(--sy, 0) * 1cqw)); transition: transform 0.7s var(--ease); }
.ttl-text {
  position: absolute; left: 5%; top: 6%; color: #fff7ee; line-height: 1;
  transform: translate(calc(var(--tx, 0) * -2cqw), calc(var(--ty, 0) * -1.2cqw + var(--sy, 0) * -2.5cqw)); transition: transform 0.7s var(--ease), opacity 1.2s var(--ease) 0.3s, translate 1.2s var(--ease) 0.3s, filter 1.2s var(--ease) 0.3s;
}
.moves .fx:not(.in) .ttl-text { opacity: 0; translate: 0 10cqw; filter: blur(12px); }
.ttl-k { display: block; margin-top: 2.2cqw; padding-left: 1cqw; font: 400 4.2cqw/1 var(--font); letter-spacing: -0.01em; text-shadow: 0 0.05em 0.4em rgba(0, 0, 0, 0.35); }
.ttl-big { display: block; font: italic 400 17.5cqw/0.92 var(--serif); white-space: nowrap; text-shadow: 0 0 0.05em rgba(255, 246, 236, 0.9), 0 0 0.28em rgba(255, 190, 130, 0.5); }

/* The edit's timeline as the app draws it (its colours), the picture above following the playhead (--t). */
.tl { display: flex; flex-direction: column; align-items: center; background: #101010; }
.tl-view { position: relative; flex: none; height: 168px; aspect-ratio: 16 / 9; margin: 16px 0 12px; border-radius: 6px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 20px 50px -20px rgba(0, 0, 0, 0.9); }
.tl-view { container-type: inline-size; }
.tl-view .tl-f { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.25s; }
.tl-view .tl-f.on { opacity: 1; }
/* The title and the captions over the picture, each while the playhead is on its clip (.on, from the script). */
.tl-ov { position: absolute; opacity: 0; transition: opacity 0.2s, translate 0.35s var(--ease); }
.tl-ov.on { opacity: 1; }
.tl-ov-ttl { right: 6%; top: 11%; display: flex; flex-direction: column; align-items: flex-end; gap: 1.2cqw; color: #fff; translate: 0 2cqw; text-shadow: 0 0.1em 0.6em rgba(0, 0, 0, 0.6); }
.tl-ov-ttl.on { translate: 0 0; }
.tl-ov-ttl span { font: 500 3cqw/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: #9fd3ff; }
.tl-ov-ttl b { font: italic 400 8.6cqw/0.95 var(--serif); }
.tl-ov-cap { left: 0; right: 0; bottom: 9%; text-align: center; font: 800 5.4cqw/1 var(--font); text-transform: uppercase; color: #fff; text-shadow: 0 0.05em 0.35em rgba(0, 0, 0, 0.75); }
.tl-tc { position: absolute; right: 7px; bottom: 7px; padding: 3px 5px; border-radius: 4px; background: rgba(0, 0, 0, 0.55); font: 500 10px/1 var(--mono); font-variant-numeric: tabular-nums; color: #fff; }
.tl-ed { position: relative; align-self: stretch; padding: 0 12px 10px; }
.tl-ruler { display: grid; grid-template-columns: repeat(6, 1fr); height: 18px; margin-left: 70px; border-bottom: 1px solid #232323; font: 400 9.5px/18px var(--mono); color: #6b6b70; }
.tl-ruler span { padding-left: 4px; border-left: 1px solid #2a2a2a; }
.tl-row { display: grid; grid-template-columns: 70px 1fr; align-items: center; height: 24px; border-bottom: 1px solid #191919; }
.tl-name { font-size: 10.5px; color: #8e8e93; }
.tl-lane { position: relative; height: 100%; }
.tl-c {
  position: absolute; top: 3px; bottom: 3px; left: var(--l, 0%); width: var(--w, 100%); display: flex; align-items: center; padding: 0 6px; overflow: hidden;
  border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); font: normal 500 9.5px/1 var(--font); color: rgba(255, 255, 255, 0.92); white-space: nowrap;
  transition: clip-path 0.9s var(--ease) var(--d, 0s);
}
.tl-c span { position: relative; z-index: 1; overflow: hidden; text-overflow: ellipsis; }
.tl-cap .tl-c { background: #96712a; padding: 0 4px; }
.tl-ttl .tl-c { background: #9b5478; }
.tl-vid .tl-c { background: #685da5; }
.tl-mus .tl-c { background: #2f7e53; }
.tl-row:nth-child(2) { --d: 0.5s; }
.tl-row:nth-child(3) { --d: 0.35s; }
.tl-row:nth-child(4) { --d: 0.65s; }
.tl-row:nth-child(5) { --d: 0.1s; }
.tl-row:nth-child(6) { --d: 0.8s; }
.moves .fx:not(.in) .tl-c { clip-path: inset(0 100% 0 0); }
.tl-wave { position: absolute; inset: 0; width: 100%; height: 100%; }
.tl-wave path { fill: none; stroke: rgba(255, 255, 255, 0.28); stroke-width: 0.55; }
.tl-wave .tl-beats { stroke: rgba(255, 255, 255, 0.65); stroke-width: 0.3; }
.tl-wave .tl-level { fill: none; stroke: #ffe3a3; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.tl-head { position: absolute; top: 0; bottom: 10px; left: calc(82px + (100% - 94px) * var(--t, 0.09)); width: 1px; background: #4da3ff; box-shadow: 0 0 8px rgba(77, 163, 255, 0.8); }
.tl-head::before { content: ""; position: absolute; left: -4px; top: 0; width: 9px; height: 9px; border-radius: 2px 2px 50% 50%; background: #4da3ff; }

/* One edit in three shapes of screen, and the timeline handed on (a light runs down each wire). */
.fin { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 12px; padding: 24px 28px; background: radial-gradient(70% 80% at 25% 50%, rgba(var(--warm), 0.06), transparent 70%), #0b0b0c; }
.fin-shapes { --h: 180px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.fin-frame { width: calc(var(--h) * 16 / 9); height: var(--h); border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 30px 60px -30px rgba(0, 0, 0, 0.9); animation: fin-shape 9s var(--ease) infinite paused; }
.fin-frame video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@keyframes fin-shape { 0%, 26% { width: calc(var(--h) * 16 / 9); } 33%, 59% { width: calc(var(--h) * 9 / 16); } 66%, 92% { width: var(--h); } }
.fin-labels { position: relative; height: 18px; width: 100%; }
.fin-labels span { position: absolute; inset: 0; text-align: center; font-size: 12.5px; color: var(--muted); animation: fin-label 9s var(--ease) infinite paused; }
.fin-labels span + span { opacity: 0; }
.fin-labels span:nth-child(2) { animation-delay: -6s; }
.fin-labels span:nth-child(3) { animation-delay: -3s; }
.fin-labels b { margin-right: 6px; font: 500 11.5px/1 var(--mono); color: var(--text); }
@keyframes fin-label { 0% { opacity: 0; } 3%, 28% { opacity: 1; } 31%, 100% { opacity: 0; } }
.fx.in .fin-frame, .fx.in .fin-labels span { animation-play-state: running; }
.fin-hand { display: grid; grid-template-columns: auto minmax(30px, 1fr) auto; grid-template-rows: 1fr 1fr; align-items: center; height: 190px; }
.fin-src { grid-column: 1; grid-row: 1 / 3; display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); font-size: 12.5px; white-space: nowrap; }
.fin-src svg { width: 14px; height: 14px; stroke: currentColor; }
.fin-wires { grid-column: 2; grid-row: 1 / 3; width: 100%; height: 100%; overflow: visible; }
.fin-wires path { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fin-wires .fin-run { stroke: #fff; stroke-width: 1.5; stroke-dasharray: 10 110; stroke-dashoffset: 10; animation: fin-run 2.6s linear infinite paused; }
.fin-wires .fin-run:last-child { animation-delay: -1.3s; }
.fx.in .fin-run { animation-play-state: running; }
@keyframes fin-run { to { stroke-dashoffset: -110; } }
.fin-app { grid-column: 3; display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.04); }
.fin-app b { font-size: 13px; font-weight: 550; }
.fin-app span { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

/* Learning a style: three of the reader's videos looked over, then what siaive measured, each bar filling in turn. */
.sty { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 22px 24px; }
.sty-vids { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sty-vids span { aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
.sty-vids video { width: 100%; height: 100%; object-fit: cover; }
/* One clip of the podcast, cut three ways as three episodes: wide, close on him, and from the other side. */
.sty-vids span:nth-child(2) video { transform: scale(1.7); transform-origin: 56% 42%; }
.sty-vids span:nth-child(3) video { transform: scaleX(-1) scale(1.25); transform-origin: 45% 80%; }
.sty-scan { position: absolute; top: -6px; bottom: -6px; left: 0; width: 2px; border-radius: 2px; background: linear-gradient(transparent, #fff, transparent); box-shadow: 0 0 16px 2px rgba(var(--warm), 0.7); opacity: 0; animation: sty-scan 3.4s var(--ease) infinite paused; }
.fx.in .sty-scan { animation-play-state: running; }
@keyframes sty-scan { 0% { left: 0; opacity: 0; } 12%, 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.sty-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.sty-rows li { display: grid; grid-template-columns: 78px minmax(0, 1fr); row-gap: 7px; align-items: center; }
.sty-rows span { grid-row: 1 / 3; font: 400 10.5px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.sty-rows b { font-size: 13px; font-weight: 500; color: var(--text); }
.sty-rows i { position: relative; display: block; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.sty-rows i::after { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--v)); background: linear-gradient(90deg, rgba(var(--warm), 0.4), #fff); transition: transform 1.2s var(--ease) var(--d, 0s); }
.sty-rows li:nth-child(1) { --v: 0.82; --d: 0.3s; }
.sty-rows li:nth-child(2) { --v: 0.64; --d: 0.45s; }
.sty-rows li:nth-child(3) { --v: 0.9; --d: 0.6s; }
.sty-rows li:nth-child(4) { --v: 0.55; --d: 0.75s; }
.moves .fx:not(.in) .sty-rows i::after { transform: scaleX(0); }

/* How it works: three steps on a line that fills as the reader goes down the page (--p), each lit once reached. */
.how { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.how::before, .how::after { content: ""; position: absolute; top: 16px; left: 16px; width: calc((100% + 16px) * 2 / 3); height: 1px; background: var(--line-2); }
.how::after { transform-origin: left; transform: scaleX(var(--p, 1)); background: linear-gradient(90deg, rgba(var(--warm), 0.5), #fff); box-shadow: 0 0 12px rgba(var(--warm), 0.6); }
.how-step { position: relative; padding-right: 16px; }
.how-n {
  position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #fff; background: #fff; color: #000;
  font: 500 11px/1 var(--mono); box-shadow: 0 0 22px rgba(var(--warm), 0.45); transition: color 0.4s, background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.moves .how-step:not(.on) .how-n { border-color: var(--line-2); background: #0b0b0c; color: var(--faint); box-shadow: none; }
.how-step h3 { margin-top: 22px; font-size: 19px; font-weight: 500; letter-spacing: -0.025em; }
.how-step > p { margin-top: 10px; color: var(--muted); font-size: 14.5px; }
.how-vis { display: grid; gap: 8px; margin-top: 22px; }
.how-vis > span { transition: opacity 0.6s var(--ease) var(--d, 0s), translate 0.6s var(--ease) var(--d, 0s); }
.how-vis > span:nth-child(2) { --d: 0.15s; }
.how-vis > span:nth-child(3) { --d: 0.3s; }
.moves .how-step:not(.on) .how-vis > span { opacity: 0.25; translate: 0 6px; }
.how-files span, .how-out span { display: grid; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); font-size: 12.5px; }
.how-files span { grid-template-columns: 15px minmax(0, 1fr) auto auto; }
.how-files svg { width: 15px; height: 15px; stroke: var(--muted); }
.how-files b, .how-out b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.how-files em, .how-out em { font-style: normal; color: var(--faint); }
.how-files em { font: 400 11px/1 var(--mono); }
.how-files u { text-decoration: none; font: 400 10px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.how-q { justify-self: end; max-width: 92%; padding: 9px 13px; border-radius: 16px 16px 6px 16px; border: 1px solid #2c2c2f; background: #232325; color: #ececec; font-size: 13px; line-height: 1.5; }
.how-a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 2px; color: var(--muted); font-size: 12.5px; }
.how-a svg { width: 14px; height: 14px; }
.how-out span { grid-template-columns: 38px minmax(0, 1fr) 64px; }
.how-out b { font: 500 11.5px/1 var(--mono); }
.how-out i { position: relative; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.how-out i::after { content: ""; position: absolute; inset: 0; transform-origin: left; background: #fff; transition: transform 1.1s var(--ease) calc(var(--d, 0s) + 0.3s); }
.moves .how-step:not(.on) .how-out i::after { transform: scaleX(0); }

/* ---- pricing ---------------------------------------------------------------------------------------------------- */
.pricing { position: relative; }
.pricing + .fine { margin-top: 30px; }
.bill-input { position: absolute; opacity: 0; pointer-events: none; }
.bill-toggle { display: flex; justify-content: center; margin-bottom: 40px; }
.bill-toggle .seg { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.bill-toggle label { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 18px; border-radius: 999px; font: 500 13.5px/1 var(--font); color: var(--muted); cursor: pointer; transition: background .2s, color .2s; }
.bill-toggle .save { font: 400 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
#bill-month:checked ~ .bill-toggle label[for="bill-month"],
#bill-year:checked ~ .bill-toggle label[for="bill-year"] { background: #fff; color: #000; box-shadow: 0 0 24px -6px rgba(255, 255, 255, 0.4); }
#bill-year:checked ~ .bill-toggle label[for="bill-year"] .save { color: #55555b; }
#bill-month:focus-visible ~ .bill-toggle label[for="bill-month"],
#bill-year:focus-visible ~ .bill-toggle label[for="bill-year"] { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: 2px; }
#bill-month:checked ~ .plans .y, #bill-year:checked ~ .plans .m { display: none !important; }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 32px 28px; }
/* The plan to look at: a brighter edge that catches the light as it slowly goes round, and a warm glow above it. */
@property --plan-turn { syntax: "<angle>"; inherits: false; initial-value: 160deg; }
.plan.featured { border-color: transparent; background: radial-gradient(120% 60% at 50% 0%, rgba(var(--warm), 0.08), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); box-shadow: 0 40px 100px -50px rgba(var(--warm), 0.35); }
.plan.featured::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--plan-turn), rgba(255, 255, 255, 0.55), rgba(var(--warm), 0.3) 10%, rgba(255, 255, 255, 0.07) 24%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.3) 62%, rgba(255, 255, 255, 0.07) 76%, rgba(255, 255, 255, 0.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: plan-turn 10s linear infinite;
}
@keyframes plan-turn { to { --plan-turn: 520deg; } }
.plan .badge { position: absolute; top: -11px; left: 28px; background: #fff; color: #000; font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 10px; border-radius: 99px; box-shadow: 0 0 24px -4px rgba(255, 255, 255, 0.45); }
.plan .badge.quiet { background: var(--card-3); color: var(--text); border: 1px solid var(--line-2); box-shadow: none; }
.plan h3 { font-size: 19px; font-weight: 550; letter-spacing: -0.02em; }
.plan .tagline { color: var(--muted); font-size: 14px; margin-top: 6px; }
.price { display: flex; align-items: baseline; gap: 8px; margin-top: 26px; }
.price .amt { font-size: 46px; font-weight: 300; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.price .per { color: var(--faint); font-size: 14px; }
.price-note { color: var(--faint); font: 400 12px/1.5 var(--mono); margin-top: 10px; min-height: 18px; }
.plan .btn { margin-top: 24px; }
.plan form { margin: 0; }
.plan ul { list-style: none; margin: 28px 0 0; padding: 24px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px; font-size: 14px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; color: #d4d4d8; }
.plan li svg { width: 16px; height: 16px; flex: none; margin-top: 3px; stroke: #fff; }
.plan li.off { color: var(--ghost); }
.plan li.off svg { stroke: var(--ghost); }
.plan li strong { color: var(--text); font-weight: 550; }
.plans-note { color: var(--faint); font-size: 13px; margin-top: 18px; text-align: center; }

/* A few answers, each opening under its question (smoothly where the browser can animate to an auto height). */
.faq { max-width: 760px; margin: 0 auto; interpolate-size: allow-keywords; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 2px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq h3 { font-size: 16.5px; font-weight: 500; letter-spacing: -0.015em; color: #e4e4e7; transition: color 0.2s; }
.faq summary:hover h3, .faq details[open] h3 { color: #fff; }
.faq summary i { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); transition: transform 0.4s var(--ease), background 0.3s, border-color 0.3s; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -0.75px 0 0 -5px; border-radius: 1px; background: #fff; transition: transform 0.4s var(--ease), background 0.3s; }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i { transform: rotate(180deg); border-color: #fff; background: #fff; }
.faq details[open] summary i::before, .faq details[open] summary i::after { background: #000; transform: none; }
.faq p { max-width: 40rem; padding: 0 2px 24px; color: var(--muted); font-size: 14.5px; }
.faq details::details-content { height: 0; overflow: clip; transition: height 0.45s var(--ease), content-visibility 0.45s allow-discrete; }
.faq details[open]::details-content { height: auto; }

.band {
  position: relative; overflow: hidden; border-radius: 28px; padding: 88px 40px; text-align: center; border: 1px solid var(--line-2);
  background: radial-gradient(420px 220px at 50% 0%, rgba(var(--warm), 0.16), transparent 70%), radial-gradient(600px 300px at 50% 120%, rgba(190, 170, 255, 0.08), transparent 70%), #070708;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.band::before { content: ""; position: absolute; left: 50%; top: -120px; width: 240px; height: 240px; margin-left: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 245, 235, 0.55), rgba(var(--warm), 0.15) 40%, transparent 70%); filter: blur(10px); pointer-events: none; }
.band > * { position: relative; }
.band h2 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 300; letter-spacing: -0.04em; }
.band p { color: var(--muted); margin-top: 16px; font-size: 1.02rem; }
.band .cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* ---- footer ----------------------------------------------------------------------------------------------------- */
.foot { border-top: 1px solid var(--line); margin-top: 48px; }
.foot .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 28px; padding-bottom: 40px; color: var(--ghost); font: 400 12.5px var(--mono); }
.foot nav { display: flex; gap: 24px; font-family: var(--font); font-size: 13.5px; color: var(--faint); }
.foot a:hover { color: var(--text); }
.foot .brand { font-size: 14px; color: var(--muted); font-family: var(--font); }
.foot .brand span { font-size: 18px; }
.foot .brand svg { width: 22px; height: 22px; }

/* ---- forms, alerts ---------------------------------------------------------------------------------------------- */
.form { display: grid; gap: 18px; width: 100%; max-width: 400px; margin-top: 30px; }
.field { display: grid; gap: 8px; }
.field label { font: 400 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.input {
  width: 100%; height: 50px; padding: 0 18px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.035); color: var(--text); font: 400 15.5px var(--font);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); transition: border-color .2s, box-shadow .2s, background .2s;
}
.input::placeholder { color: #4f4f55; }
.input:hover { border-color: rgba(255, 255, 255, 0.18); }
.input:focus { outline: none; border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.05); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06), 0 0 30px -10px rgba(var(--warm), 0.35); }
.input.code { font: 400 22px var(--mono); letter-spacing: .18em; text-align: center; text-transform: uppercase; height: 58px; }
.hint { color: var(--faint); font-size: 12.5px; }
.form .btn { margin-top: 6px; }
.alert { padding: 12px 16px; border-radius: 14px; font-size: 14px; line-height: 1.5; border: 1px solid; display: flex; gap: 10px; align-items: flex-start; }
.alert svg { width: 17px; height: 17px; flex: none; margin-top: 2px; }
.alert.error { background: rgba(255, 138, 128, 0.07); border-color: rgba(255, 138, 128, 0.28); color: #ffd0cb; }
.alert.error svg { stroke: var(--danger); }
.alert.ok { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.16); color: var(--text); }
.alert.ok svg { stroke: #fff; }
.alert.info { background: rgba(255, 255, 255, 0.03); border-color: var(--line-2); color: #d4d4d8; }
.alert.info svg { stroke: var(--muted); }
.perks { display: grid; gap: 10px; margin-top: 24px; font-size: 14px; color: var(--muted); }
.perks span { display: flex; gap: 10px; align-items: center; }
.perks svg { width: 15px; height: 15px; stroke: #fff; flex: none; }
.switch { margin-top: 26px; color: var(--faint); font-size: 14px; }
.switch a { color: var(--text); font-weight: 500; border-bottom: 1px solid rgba(255, 255, 255, 0.25); padding-bottom: 1px; transition: border-color .2s; }
.switch a:hover { border-color: #fff; }

/* ---- the one-message and sign-in pages (in the stage) -------------------------------------------------------------- */
.auth .display { margin-bottom: 4px; }
.auth .sub { margin-top: 16px; max-width: 26rem; color: #8e8e95; font-size: 15.5px; line-height: 1.6; overflow-wrap: anywhere; }
.auth .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.auth .actions .btn-block { width: auto; }
.auth .actions form { display: contents; }
.icon-badge { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 26px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 40px -10px rgba(var(--warm), 0.35); }
.icon-badge svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 1.6; }
.icon-badge.quiet { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.icon-badge.quiet svg { stroke: var(--muted); }
.code-chips { display: flex; align-items: center; gap: 8px; margin: 28px 0 6px; user-select: all; }
.code-chips b {
  display: grid; place-items: center; width: 44px; height: 56px; flex: 0 1 44px; min-width: 0; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14); background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  font: 400 26px/1 var(--mono); color: #fff; text-shadow: 0 0 14px rgba(255, 255, 255, 0.35);
}
.code-chips i { width: 12px; height: 1px; flex: none; background: rgba(255, 255, 255, 0.3); }
.device { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 420px; padding: 16px 18px; border-radius: 16px; margin-top: 24px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); }
.device svg { width: 22px; height: 22px; stroke: var(--muted); flex: none; }
.device .what { font-weight: 500; font-size: 15px; }
.device > div { min-width: 0; }
.device .as { color: var(--faint); font-size: 13px; overflow-wrap: anywhere; }
.warn-note { color: var(--ghost); font-size: 12.5px; margin-top: 22px; max-width: 26rem; line-height: 1.55; }

/* ---- account ---------------------------------------------------------------------------------------------------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 64px 0 32px; }
.page-head h1 { font-size: clamp(2.2rem, 3.8vw, 3rem); font-weight: 300; letter-spacing: -0.045em; margin-top: 12px; }
.page-head .who { color: var(--faint); margin-top: 10px; font: 400 13px/1.4 var(--mono); overflow-wrap: anywhere; }
.stack { display: grid; gap: 16px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.card { padding: 28px; min-width: 0; }
.card[id] { scroll-margin-top: 84px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.card-head h2 { font: 400 11.5px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.card-head .aside { color: var(--faint); font-size: 12.5px; text-align: right; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 99px; font: 400 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--line-2); color: var(--muted); background: rgba(255, 255, 255, 0.03); white-space: nowrap; }
.pill.light { background: #fff; color: #000; border-color: transparent; }
.pill.warn { color: #f3dcc8; border-color: rgba(var(--warm), 0.35); background: rgba(var(--warm), 0.07); }
.kv { display: grid; gap: 11px; margin: 20px 0 0; font-size: 14px; }
.kv div { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.kv div:last-child { border-bottom: 0; padding-bottom: 0; }
.kv dt, .kv span:first-child { color: var(--faint); }
.kv b { font-weight: 500; text-align: right; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.big-number { display: flex; align-items: baseline; gap: 12px; }
.big-number b { font-size: 52px; font-weight: 300; letter-spacing: -0.05em; line-height: 1; }
.big-number span { color: var(--faint); font-size: 14px; }
.meter { display: flex; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); overflow: hidden; margin-top: 22px; gap: 2px; }
.meter i { display: block; height: 100%; border-radius: 99px; }
.meter .p { background: linear-gradient(90deg, rgba(255, 255, 255, 0.7), #fff); box-shadow: 0 0 12px rgba(255, 255, 255, 0.5); }
.meter .t { background: linear-gradient(90deg, rgba(var(--warm), 0.6), rgba(var(--warm), 0.95)); }
.w0 { width: 0%; } .w5 { width: 5%; } .w10 { width: 10%; } .w15 { width: 15%; } .w20 { width: 20%; } .w25 { width: 25%; }
.w30 { width: 30%; } .w35 { width: 35%; } .w40 { width: 40%; } .w45 { width: 45%; } .w50 { width: 50%; } .w55 { width: 55%; }
.w60 { width: 60%; } .w65 { width: 65%; } .w70 { width: 70%; } .w75 { width: 75%; } .w80 { width: 80%; } .w85 { width: 85%; }
.w90 { width: 90%; } .w95 { width: 95%; } .w100 { width: 100%; }
.buckets { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.bucket { padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line); }
.bucket .name { display: flex; align-items: center; gap: 10px; color: var(--faint); font: 400 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.bucket .name::before { content: ""; width: 14px; height: 2px; border-radius: 2px; background: #fff; }
.bucket.t .name::before { background: rgba(var(--warm), 0.9); }
.bucket .num { font-size: 26px; font-weight: 300; letter-spacing: -0.04em; margin-top: 10px; }
.bucket .note { color: var(--faint); font-size: 12.5px; margin-top: 4px; }
.sub-head { font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-top: 28px; }
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.packs form { margin: 0; }
.pack-btn {
  display: grid; gap: 6px; width: 100%; padding: 16px 18px; border-radius: 16px; text-align: left; cursor: pointer;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); color: var(--text); font: inherit; transition: border-color .2s, background .2s, box-shadow .3s;
}
.pack-btn:hover { border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 30px -12px rgba(255, 255, 255, 0.35); }
.pack-btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.pack-btn b { font-size: 20px; font-weight: 400; letter-spacing: -0.03em; }
.pack-btn span { color: var(--faint); font: 400 12.5px var(--mono); }
.list { list-style: none; margin: 0; padding: 0; }
.sub-head + .list, .sub-head + .empty { margin-top: 16px; }
.list li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 14px; }
.list li:first-child { border-top: 0; padding-top: 0; }
.list li:last-child { padding-bottom: 0; }
.list .main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.list .glyph { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); flex: none; }
.list .glyph svg { width: 16px; height: 16px; stroke: var(--muted); }
.list .t1 { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list .t2 { color: var(--faint); font-size: 12.5px; }
.list .amount { font: 400 13.5px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.list .end { display: flex; align-items: center; gap: 10px; flex: none; }
.empty { color: var(--faint); font-size: 14px; padding: 22px; text-align: center; border: 1px dashed var(--line-2); border-radius: 16px; }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 99px; font: 400 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; }
.tag.paid { color: var(--text); border-color: rgba(255, 255, 255, 0.22); }
.tag.failed { color: #ffd0cb; border-color: rgba(255, 138, 128, 0.4); background: rgba(255, 138, 128, 0.08); }
.tag.quiet { color: var(--faint); border-color: var(--line); }
.plans.compact .plan { padding: 26px 24px; }
.plans.compact .price .amt { font-size: 36px; }
.plans.compact .plan ul { margin-top: 20px; padding-top: 18px; gap: 9px; font-size: 13.5px; }
.choose { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 22px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.18); background: radial-gradient(120% 140% at 0% 0%, rgba(var(--warm), 0.1), transparent 60%), rgba(255, 255, 255, 0.03); }
.choose b { font-size: 16px; font-weight: 550; }
.choose p { color: var(--muted); font-size: 14px; margin-top: 2px; }
.choose form { margin: 0; }
.download-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.download-card .l { display: flex; align-items: center; gap: 16px; }
.download-card .appicon svg { width: 52px; height: 52px; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.6)); }
.download-card h3 { font-size: 17px; font-weight: 550; }
.download-card p { color: var(--faint); font-size: 13.5px; margin-top: 3px; }
.note-line { margin-top: 20px; }
.link-accent { color: var(--text); font-weight: 500; border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.link-accent:hover { border-color: #fff; }
.status-line { font-size: 17px; font-weight: 400; letter-spacing: -0.02em; }
.status-line + .hint { margin-top: 6px; }
.cancel-box { display: grid; gap: 14px; margin-top: 22px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); }
.cancel-box form { display: grid; gap: 14px; margin: 0; }
.cancel-box .btn { justify-self: start; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #d4d4d8; line-height: 1.45; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #fff; flex: none; cursor: pointer; }

/* The profile: the member card, as in the app's Settings, and the plan beside it. */
.profile { display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); gap: 16px 40px; align-items: center; padding: 8px 0 24px; }
.profile-side { display: flex; flex-direction: column; min-width: 0; }
.profile-side .plan-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.profile-side .plan-line h2 { font-size: clamp(2.2rem, 3.6vw, 3rem); font-weight: 300; letter-spacing: -0.045em; line-height: 1; }
/* The reflective card (site/reflectiveCard.ts), React Bits' ReflectiveCard: its metal is the canvas, drawn by WebGL; it
   tilts and comes in by the variables the script sets (--rc-rotate-x/y, --rc-lift, --rc-presence); hidden until then. */
.rc {
  --rc-base: #1d1c22; --rc-ink: #f4f4f5; --rc-rim: rgba(255, 255, 255, 0.07); --rc-rim-highlight: rgba(255, 255, 255, 0.1); --rc-radius: 20px;
  --rc-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.8), 0 6px 16px -8px rgba(0, 0, 0, 0.5);
  position: relative; box-sizing: border-box; perspective: 900px; color: var(--rc-ink); touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.rc.light {
  --rc-base: #e7e7ea; --rc-ink: #18181b; --rc-rim: rgba(24, 24, 27, 0.08); --rc-rim-highlight: rgba(255, 255, 255, 0.8);
  --rc-shadow: 0 22px 44px -22px rgba(24, 24, 27, 0.3), 0 6px 16px -10px rgba(24, 24, 27, 0.16);
}
@media (prefers-reduced-motion: no-preference) { .js .rc { --rc-presence: 0; --rc-lift: 14px; } }
.rc-body {
  position: relative; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden; border-radius: var(--rc-radius); background: var(--rc-base); box-shadow: var(--rc-shadow); isolation: isolate; will-change: transform;
  transform: translate3d(0, var(--rc-lift, 0px), 0) rotateX(var(--rc-rotate-x, 0deg)) rotateY(var(--rc-rotate-y, 0deg)); opacity: var(--rc-presence, 1);
}
.rc-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.rc-content { position: relative; z-index: 1; box-sizing: border-box; display: flex; height: 100%; flex-direction: column; padding: 20px; }
.rc-rim { position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--rc-rim), inset 0 1px 0 var(--rc-rim-highlight); pointer-events: none; }
/* The member card in the plan's metal: bronze (Free), silver (Creator), gold (Pro), its engraving and seal cut into the
   metal (the relief). Its words are engraved dark with a light lip under them (--press), its foils turn with the light
   (--rc-x), and its side shows as it tilts (--side, the first shadow). */
.rc.member {
  --rc-rim: rgba(0, 0, 0, 0.22); --rc-rim-highlight: rgba(255, 255, 255, 0.55); --glow: transparent;
  --rc-shadow: calc(var(--rc-x, 0) * -1.2px) calc(1.4px + var(--rc-y, 0) * -1px) 0 0 var(--side), calc(var(--rc-x, 0) * -11px) calc(28px + var(--rc-y, 0) * -7px) 60px -14px rgba(0, 0, 0, 0.85), 0 0 80px -30px var(--glow), 0 2px 6px rgba(0, 0, 0, 0.45);
  width: 100%; aspect-ratio: 1.586; min-width: 0;
}
.member.bronze {
  --rc-base: #d4a391; --glow: rgba(241, 185, 164, 0.3); --side: #7d4c3e;
  --ink: #3b2012; --ink-2: #5c3822; --ink-3: #6b442c; --press: rgba(255, 222, 196, 0.42); --rule: rgba(59, 32, 18, 0.17); --mark: #3e2213;
  --ring-1: #ffe8df; --ring-2: #efbda9; --ring-3: #8a4f3e; --coin-1: #f7d3c5; --coin-2: #b97b67; --coin-3: #5c2d22; --relief-1: #fff4ef; --relief-2: #f2c6b5; --relief-3: #bb8471; --relief-lift: rgba(255, 244, 239, 0.6); --recess: #3a1a12;
  --script-1: #4d2a15; --script-2: #2c1508; --script-3: #62381e; --foil-1: #3b2012; --foil-2: #6e432a;
}
.member.silver {
  --rc-base: #c9ccd2; --glow: rgba(220, 228, 240, 0.18); --side: #7a7e86;
  --ink: #24262b; --ink-2: #474a52; --ink-3: #5a5d65; --press: rgba(255, 255, 255, 0.55); --rule: rgba(30, 32, 38, 0.15); --mark: #2a2c31;
  --ring-1: #ffffff; --ring-2: #dfe2e7; --ring-3: #6d7179; --coin-1: #fbfcfd; --coin-2: #a7abb3; --coin-3: #4a4d54; --relief-1: #ffffff; --relief-2: #e4e6ea; --relief-3: #a2a6ae; --relief-lift: rgba(255, 255, 255, 0.7); --recess: #1c1d21;
  --script-1: #3a3d44; --script-2: #1b1c20; --script-3: #4c4f57; --foil-1: #2a2c31; --foil-2: #5b5f68;
}
.member.gold {
  --rc-base: #d5b57a; --glow: rgba(243, 207, 138, 0.45); --side: #8a6a2c;
  --ink: #3a2a0b; --ink-2: #5c461c; --ink-3: #6d5626; --press: rgba(255, 238, 196, 0.45); --rule: rgba(58, 42, 11, 0.16); --mark: #3d2c0c;
  --ring-1: #fff4d6; --ring-2: #f0d79a; --ring-3: #7c5f24; --coin-1: #f6e2a6; --coin-2: #b68c3b; --coin-3: #5a4013; --relief-1: #fffaea; --relief-2: #edd393; --relief-3: #b8924a; --relief-lift: rgba(255, 250, 234, 0.6); --recess: #3a2706;
  --script-1: #4a3410; --script-2: #2c1e05; --script-3: #5b4317; --foil-1: #3a2a0b; --foil-2: #6b5220;
}
.member .rc-content { justify-content: space-between; gap: 12px; padding: 22px 26px 20px; }
.member .rc-content > div { position: relative; z-index: 1; }
/* The seal's words, as they are cut into the card (its relief). */
.member .seal text { font: 500 10.5px var(--mono); letter-spacing: 3.1px; }
.member-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.medal { display: inline-grid; flex: none; padding: 2.5px; border-radius: 50%; background: conic-gradient(from calc(210deg + var(--rc-x, 0) * 60deg), var(--ring-1), var(--ring-3) 16%, var(--ring-2) 32%, var(--ring-3) 50%, var(--ring-1) 68%, var(--ring-3) 84%, var(--ring-1)); box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.22); }
/* In the ring, a coin of the card's metal: a mirror field domed to the light (--coin-1…3) with a ring of fine teeth at its
   rim, the mascot struck on it in frosted relief (#member-relief, --relief-1…3, raised by its shadow), its eyes and mouth
   cut in (--recess). */
.mascot {
  position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at calc(34% + var(--rc-x, 0) * 16%) calc(28% + var(--rc-y, 0) * 16%), var(--coin-1), var(--coin-2) 50%, var(--coin-3));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.3), inset 0 -2px 5px rgba(0, 0, 0, 0.45);
}
.mascot::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(rgba(0, 0, 0, 0.38) 0 1deg, rgba(255, 255, 255, 0.14) 1deg 1.6deg, transparent 1.6deg 3deg); -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3.2px), #000 calc(100% - 2.8px)); mask: radial-gradient(closest-side, transparent calc(100% - 3.2px), #000 calc(100% - 2.8px)); }
.mascot svg { position: relative; width: 84%; height: 84%; filter: drop-shadow(0 -0.5px 0 var(--relief-lift)) drop-shadow(0 1.2px 0.8px rgba(0, 0, 0, 0.55)); }
.mascot [fill="#F5F5F7"] { fill: var(--relief-2); fill: url(#member-relief) var(--relief-2); }
.mascot [fill="#141416"] { fill: var(--recess); }
.mascot [stroke="#141416"] { stroke: var(--recess); }
.member .relief { position: absolute; width: 0; height: 0; }
.member .relief stop:nth-child(1) { stop-color: var(--relief-1); }
.member .relief stop:nth-child(2) { stop-color: var(--relief-2); }
.member .relief stop:nth-child(3) { stop-color: var(--relief-3); }
/* siaive in a dark foil that shifts with the light, beside its mark in one colour of the metal's (--mark). */
.member-brand { display: inline-flex; align-items: center; gap: 7px; padding-top: 2px; font: 500 19px/1 var(--serif); font-variation-settings: "opsz" 14; letter-spacing: 0.02em; }
.member-brand svg { width: 18px; height: 18px; color: var(--mark); filter: drop-shadow(0 1px 0 var(--press)); }
.member-brand span { background: linear-gradient(100deg, var(--foil-1) 0%, var(--foil-2) 28%, var(--foil-1) 46%, var(--foil-2) 62%, var(--foil-1) 80%, var(--foil-2) 100%); background-size: 260% 100%; background-position: calc(50% + var(--rc-x, 0) * 50%) 0; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 var(--press)); }
.member-who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* The name, engraved. */
.member .script {
  font-family: var(--script); font-size: 58px; line-height: 1.12; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 0.2em 0.06em 0.02em; margin-left: -0.02em;
  background: linear-gradient(calc(172deg + var(--rc-x, 0) * 12deg), var(--script-1) 8%, var(--script-2) 40%, var(--script-3) 72%, var(--script-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 var(--press)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.2));
}
.member .script.mid { font-size: 46px; }
.member .script.long { font-size: 36px; }
.member-who .mono { font-size: 12px; letter-spacing: 0.06em; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 0 var(--press); }
.member-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-top: 12px; border-top: 1px solid var(--rule); font-family: var(--mono); }
.member-facts { display: flex; gap: 28px; }
.member-facts > span { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--ink); text-shadow: 0 1px 0 var(--press); }
.member-foot small { font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.member-foot > small { letter-spacing: 0.3em; }

/* ---- checkout ----------------------------------------------------------------------------------------------------- */
.summary { width: 100%; max-width: 420px; margin-top: 28px; padding: 22px 24px; }
.summary .what { font: 400 11px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.summary .title { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; margin-top: 8px; }
.summary .now { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.summary .now span { color: var(--faint); font-size: 13.5px; }
.summary .now b { font-size: 32px; font-weight: 300; letter-spacing: -0.04em; }
.summary .kv { margin-top: 14px; font-size: 13.5px; }
.summary .note { color: var(--faint); font-size: 12.5px; margin-top: 14px; line-height: 1.5; }
.secured { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--ghost); font: 400 11.5px/1.4 var(--mono); letter-spacing: .04em; }
.secured svg { width: 13px; height: 13px; stroke: currentColor; }
.paying { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 15px; background: linear-gradient(90deg, #6f6f76 0%, #6f6f76 35%, #f2f2f3 50%, #6f6f76 65%, #6f6f76 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 2.6s linear infinite; }
#pay.failed .paying { display: none; }
@keyframes shine { from { background-position: 100% 0; } to { background-position: -150% 0; } }

/* ---- small screens ---------------------------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .plans { grid-template-columns: 1fr 1fr; }
  .fx-grid { grid-template-columns: 1fr 1fr; }
  .fx.wide, .fx-sty { grid-column: 1 / -1; }
  .plans .plan:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .profile { grid-template-columns: 1fr; row-gap: 32px; }
  .profile .member { max-width: 470px; }
}
@media (max-width: 860px) {
  /* The steps one under another, the line running down beside them. */
  .how { grid-template-columns: 1fr; gap: 44px; padding-left: 52px; }
  .how::before, .how::after { left: 16px; width: 1px; height: calc(100% - 32px); }
  .how::after { transform-origin: top; transform: scaleY(var(--p, 1)); }
  .how-n { position: absolute; left: -52px; top: -4px; }
  .how-step h3 { margin-top: 0; }
  .how-vis { max-width: 420px; }
  .stage-grid { grid-template-columns: 1fr; align-content: start; gap: 8px; padding-block: 12px 56px; }
  .orb-spot { order: -1; width: min(72vw, 300px, 36vh); }
  .stage-panel { align-items: center; text-align: center; max-width: 520px; margin: 0 auto; width: 100%; }
  .stage .lede, .auth .sub, .warn-note { margin-left: auto; margin-right: auto; }
  .stage .cta, .auth .actions { justify-content: center; }
  .form, .summary, .device { margin-left: auto; margin-right: auto; text-align: left; }
  .code-chips { justify-content: center; }
  .auth .orb-spot { width: min(62vw, 250px, 30vh); }
}
@media (max-width: 720px) {
  .wrap { padding: 0 18px; }
  .nav a.link.hide-sm { display: none; }
  .logos { gap: 10px 20px; font-size: 11px; margin-top: 32px; }
  .app-shot { --base: 1040; border-radius: 6px; }
  .app-shot .demo-edit { width: 100%; }
  .demo-chat { display: none; }
  .stage .cta, .band .cta { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; margin-inline: auto; }
  .auth .actions { width: 100%; max-width: 360px; margin-inline: auto; }
  .auth .actions > * { flex: 1 1 140px; }
  .section { padding: 80px 0; }
  .section-head { margin-bottom: 40px; }
  .plans, .cols { grid-template-columns: 1fr; }
  .section.statement { padding: 96px 0 12px; }
  .section.fx-sec { padding-top: 40px; }
  .fx-grid { grid-template-columns: 1fr; gap: 14px; }
  .fx.wide, .fx-sty { grid-column: auto; }
  .fx { border-radius: 20px; }
  .fx-demo { height: 300px; }
  .fx-copy { padding: 20px 20px 24px; }
  .sb { height: auto; padding: 18px 16px; }
  .sb-row { grid-template-columns: 1fr 1fr; }
  .sb-what { display: none; }
  .tl { height: auto; }
  .tl-view { height: 128px; margin-top: 46px; }
  .tl-ed { padding: 0 10px 8px; }
  .tl-ruler { margin-left: 52px; }
  .tl-row { grid-template-columns: 52px 1fr; height: 21px; }
  .tl-name { font-size: 9.5px; }
  .tl-head { left: calc(62px + (100% - 72px) * var(--t, 0.09)); bottom: 8px; }
  .fin { height: auto; grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 26px 18px; }
  .fin-shapes { --h: 150px; }
  .fin-hand { height: 150px; grid-template-columns: auto minmax(16px, 1fr) minmax(0, auto); }
  .fin-app span { white-space: normal; }
  .sty { height: auto; padding: 20px 18px; }
  .packs { gap: 8px; }
  .pack-btn { padding: 12px; }
  .pack-btn b { font-size: 17px; }
  .plans .plan:last-child:nth-child(odd) { grid-column: auto; }
  .band { padding: 56px 22px; border-radius: 22px; }
  .page-head { padding-top: 40px; }
  .card { padding: 22px 18px; }
  .rc.member { --rc-radius: 16px; }
  .member .rc-content { padding: 16px 18px 14px; }
  .member .script { font-size: 44px; } .member .script.mid { font-size: 36px; } .member .script.long { font-size: 28px; }
  .mascot { width: 44px; height: 44px; }
  .member-facts { gap: 18px; }
  .code-chips { gap: 5px; }
  .code-chips b { height: 48px; font-size: 21px; }
  .code-chips i { width: 8px; }
  .list li { align-items: flex-start; }
  .list .end { flex-direction: column; align-items: flex-end; gap: 6px; }
  .section { padding: 64px 0; }
  .section.tight { padding: 48px 0; }
  .plans.compact .plan { padding: 24px 18px; }
}
@media (max-width: 400px) {
  .nav .btn { padding: 0 14px; }
  .nav a.link, .nav button.link { padding: 10px 8px; }
  .packs { grid-template-columns: 1fr; }
  .member-facts > span:nth-child(2) { display: none; }
}
@media (max-width: 340px) {
  .top .brand span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* --- legal and policy pages (site/legal.ts): long-form prose, a contents list beside it ---------------------------- */
.foot nav { flex-wrap: wrap; row-gap: 10px; }
.consent { margin-top: 2px; color: var(--faint); font-size: 12.5px; line-height: 1.55; text-align: center; text-wrap: pretty; }
.consent a { color: var(--muted); border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.consent a:hover { color: var(--text); border-color: #fff; }
.legal { padding-top: 56px; }
.legal-head { max-width: 48rem; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.legal-nav a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); font-size: 13.5px; transition: color .2s, border-color .2s, background .2s; }
.legal-nav a:hover { color: var(--text); border-color: var(--line-3); }
.legal-nav a[aria-current="page"] { background: #fff; border-color: #fff; color: #000; font-weight: 500; }
.legal-head h1 { font-size: clamp(2.3rem, 4.2vw, 3.4rem); font-weight: 300; letter-spacing: -0.045em; margin-top: 14px; }
.legal-updated { margin-top: 14px; color: var(--faint); font: 400 12.5px/1.4 var(--mono); letter-spacing: 0.02em; }
.legal-lede { margin-top: 20px; color: var(--muted); font-size: 1.08rem; line-height: 1.65; text-wrap: pretty; }
.legal-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; padding-top: 44px; }
.legal-grid.no-toc { grid-template-columns: minmax(0, 1fr); }
.legal-toc { position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; }
.legal-toc ol { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: toc; display: grid; gap: 2px; }
.legal-toc li { counter-increment: toc; }
.legal-toc a { display: flex; gap: 10px; padding: 5px 0; color: var(--faint); font-size: 13.5px; line-height: 1.4; transition: color .2s; }
.legal-toc a::before { content: counter(toc, decimal-leading-zero); flex: none; width: 20px; font: 400 11.5px/1.75 var(--mono); color: var(--ghost); }
.legal-toc a:hover { color: var(--text); }
.legal-body { max-width: 44rem; min-width: 0; }
.legal-body section { padding: 4px 0 36px; scroll-margin-top: 96px; }
.legal-body section + section { padding-top: 36px; border-top: 1px solid var(--line); }
.legal-body h2 { display: flex; align-items: baseline; gap: 14px; font-size: 1.35rem; font-weight: 500; letter-spacing: -0.02em; color: var(--text); }
.legal-num { flex: none; font: 400 12px/1 var(--mono); color: var(--ghost); }
.legal-body p, .legal-body li { color: #c7c7cc; font-size: 15.5px; line-height: 1.72; text-wrap: pretty; }
.legal-body p { margin-top: 14px; }
.legal-body b { color: var(--text); font-weight: 500; }
.legal-body a { color: var(--text); border-bottom: 1px solid rgba(255, 255, 255, 0.28); transition: border-color .2s; overflow-wrap: anywhere; }
.legal-body a:hover { border-color: #fff; }
.legal-body ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.legal-body li { position: relative; padding-left: 24px; }
.legal-body li::before { content: ""; position: absolute; left: 2px; top: 0.86em; width: 12px; height: 1px; background: var(--line-3); }
.legal-body .legal-seller { margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--faint); font-size: 13px; line-height: 1.6; }
.legal-facts { margin: 22px 0 0; display: grid; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--glass); overflow: hidden; }
.legal-facts div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; padding: 14px 20px; }
.legal-facts div + div { border-top: 1px solid var(--line); }
.legal-facts dt { color: var(--faint); font: 400 12px/1.7 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.legal-facts dd { margin: 0; color: var(--text); font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .legal-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .legal-toc { position: static; max-height: none; padding: 18px 20px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--glass); }
}
@media (max-width: 640px) {
  .legal { padding-top: 32px; }
  .legal-nav { margin-bottom: 28px; }
  .legal-facts div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .legal-body p, .legal-body li { font-size: 15px; }
}

/* --- checkout's billing details; the account's records (site/records.ts); invoices (site/invoice.ts) ----------------- */
.input.select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; }
.input.select option { background: #111; color: var(--text); }
.input.mono { font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.gst-details { border: 1px solid var(--line); border-radius: 14px; padding: 0 16px; }
.gst-details[open] { padding-bottom: 16px; }
.gst-details summary { cursor: pointer; list-style: none; padding: 14px 0; color: var(--muted); font-size: 13.5px; }
.gst-details summary::-webkit-details-marker { display: none; }
.gst-details summary::after { content: "+"; float: right; color: var(--faint); font-family: var(--mono); }
.gst-details[open] summary::after { content: "−"; }
.gst-details .field + .field { margin-top: 14px; }
.sub-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 28px; }
.sub-head-row .sub-head { margin-top: 0; }
.sub-head-row + .list, .sub-head-row + .empty { margin-top: 16px; }
.sub-head-row .aside { font-size: 12.5px; }
.quiet-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.quiet-card h3 { font-size: 15px; font-weight: 500; }
.quiet-card p { color: var(--faint); font-size: 13.5px; margin-top: 4px; }
.wrap.narrow { max-width: 860px; }
.wrap.narrow .stack, .wrap.narrow > .card { margin-bottom: 16px; }
.records .record-list .t1 { white-space: normal; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.pager .page-no { color: var(--faint); font: 400 12px var(--mono); }
.fine + .fine { margin-top: 6px; }
/* Under the account's records only: the home page's fine print keeps its own look and spacing. */
.wrap.narrow > .fine { color: var(--faint); line-height: 1.6; margin: 18px 0 64px; }
.fine a { color: var(--muted); border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.balance-kv { margin-top: 0; }
.danger-card p { color: #d4d4d8; font-size: 14.5px; line-height: 1.6; }
.danger-card .hint { margin-top: 14px; line-height: 1.6; }
.danger-card .form { margin-top: 22px; display: grid; gap: 16px; max-width: 420px; }
.danger-card .btn-danger { justify-self: start; color: var(--danger); border-color: rgba(255, 138, 128, 0.35); }
ul.plain { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; color: #d4d4d8; font-size: 14.5px; line-height: 1.55; }

.invoice-wrap { max-width: 900px; padding-top: 40px; padding-bottom: 72px; }
.invoice-actions { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.invoice { background: #fff; color: #111; border-radius: 18px; padding: 48px 52px; font-size: 13.5px; line-height: 1.55; box-shadow: 0 40px 120px -40px rgba(var(--warm), 0.25); }
.invoice .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.inv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; padding-bottom: 26px; border-bottom: 1px solid #e5e5e7; }
.inv-head h1 { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; color: #000; }
.inv-sub { color: #6e6e74; font: 400 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; margin-top: 8px; }
.inv-meta { display: grid; gap: 6px; margin: 0; }
.inv-meta div { display: flex; gap: 14px; justify-content: space-between; }
.inv-meta dt { color: #6e6e74; }
.inv-meta dd { margin: 0; font-weight: 500; text-align: right; }
.inv-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 26px 0; border-bottom: 1px solid #e5e5e7; }
.inv-parties > div { display: grid; gap: 3px; align-content: start; overflow-wrap: anywhere; }
.inv-parties h2 { color: #6e6e74; font: 400 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px; }
.inv-parties b { font-weight: 600; color: #000; }
.inv-parties .addr { white-space: pre-line; }
.inv-lines { width: 100%; border-collapse: collapse; margin-top: 26px; }
.inv-lines th { text-align: left; color: #6e6e74; font: 400 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 0 0 10px; border-bottom: 1px solid #e5e5e7; }
.inv-lines td { padding: 14px 16px 14px 0; vertical-align: top; border-bottom: 1px solid #e5e5e7; }
.inv-lines .num { text-align: right; padding-right: 0; white-space: nowrap; }
.inv-totals { margin: 18px 0 0 auto; max-width: 340px; display: grid; gap: 8px; }
.inv-totals div { display: flex; justify-content: space-between; gap: 20px; }
.inv-totals dt { color: #6e6e74; }
.inv-totals dd { margin: 0; }
.inv-totals .grand { padding-top: 10px; margin-top: 4px; border-top: 1px solid #111; font-size: 15px; font-weight: 600; color: #000; }
.inv-totals .grand dt { color: #000; }
.inv-words { margin-top: 18px; text-align: right; color: #3a3a3c; font-style: italic; }
.inv-foot { margin-top: 36px; padding-top: 18px; border-top: 1px solid #e5e5e7; color: #6e6e74; font-size: 12px; display: grid; gap: 4px; }
@media (max-width: 640px) {
  .invoice { padding: 28px 22px; border-radius: 14px; }
  .inv-parties { grid-template-columns: 1fr; gap: 22px; }
  .inv-lines th:nth-child(2), .inv-lines td:nth-child(2) { display: none; }
}

/* --- phones, last so it wins: fingers, not a pointer -------------------------------------------------------------- */
@media (max-width: 720px) {
  /* At 16px a field doesn't make iPhone Safari zoom in when tapped. */
  .input { font-size: 16px; }
  /* Links get a tap area of about 40px; the small ones through an invisible edge, so nothing moves. */
  .brand { padding-block: 8px; }
  .foot nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 12px; width: 100%; }
  .foot nav a { padding: 10px 0; }
  .legal-toc a { padding: 9px 0; }
  .legal-nav a { padding: 9px 14px; }
  .link-accent, .card-head a { position: relative; }
  .link-accent::after, .card-head a::after { content: ""; position: absolute; inset: -10px -6px; }
  .check { padding-block: 6px; }
}
@media (max-width: 400px) {
  .foot nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media print {
  @page { margin: 14mm; }
  html, body { background: #fff !important; }
  .top, .foot, .invoice-actions, .orb, canvas { display: none !important; }
  .invoice-wrap { padding: 0; max-width: none; }
  .invoice { box-shadow: none; border-radius: 0; padding: 0; }
}