/* Deliberately close to the desktop app's own look - someone who downloads it
   after reading this page should recognise what they opened. */
:root {
  --void: #05070d;
  --panel: #0b1120;
  --panel-2: #0e1526;
  --line: rgba(148, 187, 224, 0.14);
  --line-soft: rgba(148, 187, 224, 0.08);
  --ice: #e4edf7;
  --body: #a8b8cd;
  --dim: #7b8da6;
  --cyan: #4fd6e2;
  --cyan-dim: rgba(79, 214, 226, 0.5);
  --gold: #e0b34d;
  --gold-dim: rgba(224, 179, 77, 0.5);
  --sans: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  /* One rhythm for every section, so the page has a beat instead of
     arbitrary gaps. */
  --gap-section: 112px;
  --pad-x: 24px;
  --width: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--void);
  color: var(--ice);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

h1, h2, h3 { letter-spacing: -0.022em; }

/* Every section shares one label style, which is most of what makes a page
   read as one design rather than several. */
.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 14px;
}

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5, 7, 13, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px var(--pad-x);
  max-width: var(--width);
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.brand img { mix-blend-mode: screen; }

.nav nav { display: flex; gap: 24px; align-items: center; font-size: 14px; }
.nav nav a {
  color: var(--dim);
  text-decoration: none;
  transition: color 0.15s ease;
}
.nav nav a:hover { color: var(--ice); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  text-align: center;
  padding: 92px var(--pad-x) 36px;
  max-width: 780px;
  margin: 0 auto;
}

/* A single light source behind the headline. Sits behind content and never
   takes pointer events, so it can be as large as it needs to be. */
.hero-glow {
  position: absolute;
  top: -180px;
  left: 50%;
  transform: translateX(-50%);
  /* Never wider than the viewport: at 120vw this pushed a horizontal
     scrollbar onto every narrow screen. */
  width: min(900px, 100%);
  height: 620px;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(79, 214, 226, 0.16), transparent 68%);
  filter: blur(12px);
}

/* Excludes .hero-glow - it already declares its own position: absolute
   above, and this selector has equal specificity (one class each), so
   without the exclusion whichever rule comes later in the file wins and
   silently drags the glow back into normal document flow as a real 620px
   block, pushing every real hero element down by however tall it is. */
.hero > *:not(.hero-glow) { position: relative; }

h1 {
  font-size: clamp(34px, 6vw, 60px);
  line-height: 1.06;
  margin: 0 0 20px;
  font-weight: 600;
}

.lede {
  font-size: 17.5px;
  color: var(--body);
  margin: 0 auto 32px;
  max-width: 540px;
}

.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 14.5px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  color: var(--ice);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.btn:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-1px); }
.btn:active { transform: none; }

.btn.primary {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #04121a;
  font-weight: 600;
  box-shadow: 0 6px 24px rgba(79, 214, 226, 0.18);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 200ms ease;
}
.btn.primary:hover { background: #6ee3ee; }

/* Basic's own CTA follows the same gold Basic's card gets on Yearly,
   rather than staying cyan while everything around it goes gold. */
.plans.yearly .plan.featured .btn.primary {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 6px 24px rgba(224, 179, 77, 0.22);
}
.plans.yearly .plan.featured .btn.primary:hover { background: #ecc571; }

.btn.ghost { background: transparent; }
.btn.ghost:hover { background: rgba(255, 255, 255, 0.06); }

.btn.wide { width: 100%; margin-top: 4px; }

.fineprint {
  margin-top: 24px;
  font-size: 12.5px;
  color: var(--dim);
}

/* ---------- showcase: a mock of the app's own window ---------- */

.showcase {
  max-width: 760px;
  margin: 0 auto var(--gap-section);
  padding: 0 var(--pad-x);
}

.mock {
  border-radius: 16px;
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse at 50% 34%, rgba(79, 214, 226, 0.1), transparent 62%),
    var(--panel);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.mock-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
}

.mock-brand { color: var(--cyan); }
.mock-clock { margin-left: auto; color: var(--dim); }
.mock-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--line);
}

.mock-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 46px 20px 30px;
}

.mock-orb canvas {
  width: 108px;
  height: 108px;
  filter: drop-shadow(0 0 26px rgba(79, 214, 226, 0.35));
}

.mock-state {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  transition: color 0.2s ease;
}

/* Toggled by site.js while a real OS drag is over the mock window - the same
   "something's about to land here" signal the app's own drag-guide glow
   gives, just expressed in CSS instead of a canvas-level animation state. */
.mock.drag-active {
  border-color: var(--cyan-dim);
  box-shadow: 0 0 0 1px rgba(79, 214, 226, 0.25), 0 30px 90px rgba(79, 214, 226, 0.18);
}
.mock.drag-active .mock-state { color: #9ff2fa; }

.showcase-hint {
  text-align: center;
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--dim);
}

.capabilities {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 22px;
}

.capability {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--dim);
}
.capability svg {
  width: 16px;
  height: 16px;
  color: var(--cyan);
  flex: 0 0 auto;
}

.mock-script {
  padding: 0 26px 34px;
  display: grid;
  gap: 10px;
  font-size: 14px;
}

.mock-script p { margin: 0; }
.mock-you { color: var(--dim); }
.mock-it { color: var(--body); }
.mock-it span { font-family: var(--mono); font-size: 12.5px; color: var(--cyan); }

/* ---------- say it ---------- */

.say {
  max-width: var(--width);
  margin: 0 auto var(--gap-section);
  padding: 0 var(--pad-x);
  text-align: center;
}

.say h2, .pricing h2, .faq h2, .code-demo h2 {
  font-size: clamp(24px, 3.4vw, 32px);
  margin: 0 0 34px;
  font-weight: 600;
}

/* ---------- code demo ---------- */

.code-demo {
  max-width: 700px;
  margin: 0 auto var(--gap-section);
  padding: 0 var(--pad-x);
  text-align: center;
}

.code-demo-window {
  text-align: left;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.code-demo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--dim);
}

.code-demo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(79, 214, 226, 0.7);
}

/* Same treatment as the app's own .code-panel (overview/ui/style.css) -
   same colour, same monospace, same feel, so it reads as "this is what the
   app actually looks like" rather than a generic marketing code snippet. */
.code-demo-panel {
  box-sizing: border-box;
  margin: 0;
  padding: 18px 20px 22px;
  /* Fixed, not min/max - the typewriter filling in text used to grow this
     from 220px toward 320px as it typed, reflowing every section below it
     on the page for the whole animation. A single fixed value plus its own
     scroll means the page around it never moves again, no matter how much
     text lands inside. box-sizing: border-box makes padding count toward
     that fixed height instead of adding to it, and min/max-height are
     pinned to the same value so nothing upstream (a grid/flex ancestor,
     a stray auto-height rule) can stretch it open again. */
  height: 280px;
  min-height: 280px;
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: #8fe6ff;
  background: var(--deep, #060911);
  white-space: pre-wrap;
}

.code-demo-panel .cd-caret {
  display: inline-block;
  width: 7px;
  height: 1em;
  margin-left: 1px;
  background: var(--cyan);
  vertical-align: text-bottom;
  animation: cd-blink 1s step-end infinite;
}

@keyframes cd-blink {
  50% { opacity: 0; }
}

.say-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  text-align: left;
}

.say-chip {
  margin: 0;
  padding: 15px 18px;
  border-radius: 11px;
  border: 1px solid var(--line-soft);
  background: rgba(11, 17, 32, 0.55);
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--body);
}

.say-note {
  margin: 26px auto 0;
  max-width: 520px;
  font-size: 13.5px;
  color: var(--dim);
}

/* ---------- features ---------- */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 16px;
  max-width: var(--width);
  margin: 0 auto var(--gap-section);
  padding: 0 var(--pad-x);
}

.feature {
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--panel-2), rgba(11, 17, 32, 0.5));
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.feature:hover { border-color: var(--cyan-dim); transform: translateY(-2px); }

.feature-icon {
  width: 34px;
  height: 34px;
  margin-bottom: 16px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--cyan);
  background: rgba(79, 214, 226, 0.1);
  border: 1px solid rgba(79, 214, 226, 0.22);
}
.feature-icon svg { width: 18px; height: 18px; }

.feature h3 { margin: 0 0 7px; font-size: 16px; font-weight: 600; }
.feature p { margin: 0; font-size: 14px; color: var(--body); line-height: 1.55; }

/* Prose, not code - a serif reading face and normal line-height instead of
   monospace, so this reads as a document being drafted rather than a
   second code panel wearing a different label. */
.doc-panel {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ice);
  white-space: pre-wrap;
}
.doc-panel .cd-caret {
  background: var(--ice);
}

/* ---------- workspace demo (live file tree) ---------- */

.workspace-demo-window { max-width: 100%; }

.workspace-demo-body {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1px;
  background: var(--line-soft);
}

.workspace-demo-col {
  background: var(--panel);
  padding: 14px 16px 16px;
  min-width: 0;
}

.workspace-demo-label {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}

.workspace-demo-content {
  height: 220px;
  padding: 12px 14px;
  font-size: 11.5px;
}

.workspace-demo-files {
  height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.workspace-demo-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.02);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--body);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.workspace-demo-file.is-active {
  border-color: var(--cyan-dim);
  background: rgba(79, 214, 226, 0.06);
}

.workspace-demo-file-status {
  flex: 0 0 auto;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}
.workspace-demo-file.is-active .workspace-demo-file-status { color: var(--cyan); }

@media (max-width: 620px) {
  .workspace-demo-body { grid-template-columns: 1fr; }
}

/* Briefly marks whatever section the voice demo just scrolled to (see
   playground.js's tryNavigate) - a fading ring rather than anything that
   shifts layout, so "show me pricing" doesn't jolt the page further once
   it's already arrived. */
.nav-highlight { animation: nav-highlight-pulse 1.8s ease-out; }
@keyframes nav-highlight-pulse {
  0% { box-shadow: 0 0 0 0 rgba(79, 214, 226, 0.5); }
  100% { box-shadow: 0 0 0 24px rgba(79, 214, 226, 0); }
}

/* ---------- pricing ---------- */

.pricing {
  max-width: var(--width);
  margin: 0 auto var(--gap-section);
  padding: 0 var(--pad-x);
  text-align: center;
  /* The nav bar is position: sticky, so a smooth-scroll jump to #pricing
     lands the section flush against the top of the viewport - directly
     under the nav, which then covers the heading. This reserves space for
     the nav so the landing spot sits below it instead of behind it. */
  scroll-margin-top: 76px;
}

.pricing h2 { margin-bottom: 8px; }
.pricing .sub { color: var(--dim); margin: 0 0 30px; font-size: 15px; }

.billing-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0 0 28px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
}
/* A sliding pill behind whichever button is pressed, positioned by JS (see
   positionBillingThumb in site.js) - the buttons are different widths
   (Yearly carries the save tag, Monthly doesn't), so this can't be a fixed
   CSS transform between two known points, it has to measure. */
.billing-toggle-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: 0;
  border-radius: 999px;
  background: var(--cyan);
  transition: left 220ms ease, width 220ms ease, background 200ms ease;
}
.billing-toggle button {
  position: relative;
  z-index: 1;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--dim);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: color .15s ease;
}
.billing-toggle button:hover { color: var(--body); }
.billing-toggle button[aria-pressed="true"] { color: #04121a; }
.billing-toggle .save-tag {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 20px;
}
/* Gold while Yearly is the hint, not yet pressed - inviting. Once pressed,
   the pill behind it (see .billing-toggle-thumb.yearly below) is already
   gold, so the tag switches to a solid dark chip instead of staying gold
   on gold. */
.billing-toggle button:not([aria-pressed="true"]) .save-tag {
  background: rgba(224, 179, 77, 0.16);
  color: var(--gold);
}
.billing-toggle button[aria-pressed="true"] .save-tag {
  background: rgba(4, 18, 26, 0.4);
  color: #04121a;
}
.billing-toggle-thumb.yearly { background: var(--gold); }

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 16px;
  text-align: left;
  align-items: stretch;
}

.plan {
  position: relative;
  padding: 30px 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--panel-2), rgba(11, 17, 32, 0.5));
  display: flex;
  flex-direction: column;
}

/* Both paid cards read as distinct from Free at rest, not just the
   "featured" one - a plain var(--line) border on Plus next to Basic's
   cyan-dim one made Plus look like an afterthought rather than the other
   half of the actual choice being pitched. featured (Basic) still stands
   out more via the stronger border below plus the shadow/tag. */
.plan.paid {
  border-color: rgba(79, 214, 226, 0.22);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.plan.featured {
  border-color: var(--cyan-dim);
  box-shadow: 0 0 0 1px rgba(79, 214, 226, 0.12), 0 20px 50px rgba(0, 0, 0, 0.4);
}

.tag {
  position: absolute;
  top: -11px;
  left: 26px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--cyan);
  color: #04121a;
  font-weight: 500;
  transition: background 200ms ease;
}

/* Only Basic (the featured/"most popular" card) picks up gold while
   Yearly is selected - ties the savings message to the one card that's
   actually meant to draw the eye, rather than spreading the same accent
   across both paid cards and diluting which one is the focus. */
.plans.yearly .plan.featured {
  border-color: var(--gold-dim);
  box-shadow: 0 0 0 1px rgba(224, 179, 77, 0.16), 0 20px 50px rgba(0, 0, 0, 0.4);
}
.plans.yearly .plan.featured .tag {
  background: var(--gold);
}

.plan h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--dim); }
.price { font-size: 36px; margin: 0; font-weight: 600; letter-spacing: -0.03em; transition: opacity 140ms ease; }
.price span { font-size: 14px; color: var(--dim); font-weight: 400; letter-spacing: 0; }
.plan-sub { color: var(--dim); font-size: 13.5px; margin: 4px 0 20px; }

/* Always populated (Monthly says "Billed monthly", Yearly says "Billed
   yearly - 2 months free" - see site.js), with a fixed min-height so
   toggling the interval never changes the card's size. Opacity is set
   inline by site.js during the fade, not by a class - the text itself
   changes on every toggle now, not just whether it's shown. */
.plan-sub.price-note {
  min-height: 1.4em;
  transition: opacity 140ms ease;
}

.plan ul { list-style: none; padding: 0; margin: 0 0 26px; flex: 1; }
.plan li {
  font-size: 14px;
  color: var(--body);
  padding: 6px 0 6px 22px;
  position: relative;
}
.plan li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 14px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
}

.plan .btn { text-align: center; }

/* ---------- faq ---------- */

.faq {
  max-width: var(--width);
  margin: 0 auto var(--gap-section);
  padding: 0 var(--pad-x);
  text-align: center;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px 40px;
  text-align: left;
}

.faq-item { padding-top: 20px; border-top: 1px solid var(--line-soft); }
.faq-item h3 { margin: 0 0 7px; font-size: 15.5px; font-weight: 600; }
.faq-item p { margin: 0; font-size: 14px; color: var(--body); line-height: 1.55; }

/* ---------- closer ---------- */

.closer {
  max-width: 640px;
  margin: 0 auto 96px;
  padding: 56px var(--pad-x);
  text-align: center;
  border-top: 1px solid var(--line-soft);
}

.closer h2 {
  font-size: clamp(24px, 3.6vw, 34px);
  margin: 0 0 26px;
  font-weight: 600;
}

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--line-soft);
  background: rgba(11, 17, 32, 0.4);
}

.footer-inner {
  max-width: var(--width);
  margin: 0 auto;
  padding: 28px var(--pad-x);
  display: flex;
  align-items: center;
  gap: 20px 28px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--dim);
}

.footer-inner nav {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-left: auto;
}
.footer-inner a { text-decoration: none; transition: color 0.15s ease; }
.footer-inner nav a:hover { color: var(--ice); }
.footer-copy { width: 100%; color: rgba(123, 141, 166, 0.7); font-size: 12.5px; }

/* ---------- modal ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(3, 5, 10, 0.82);
  backdrop-filter: blur(6px);
}

.modal[hidden] { display: none; }

.modal-card {
  position: relative;
  width: 100%;
  max-width: 360px;
  padding: 30px 28px 26px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--panel);
  text-align: center;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
}

.modal-card img { mix-blend-mode: screen; margin-bottom: 8px; }
.modal-card h2 { margin: 0 0 5px; font-size: 20px; font-weight: 600; }
.modal-sub { color: var(--dim); font-size: 13.5px; margin: 0 0 18px; }
.modal-sub strong { color: var(--cyan); font-weight: 500; overflow-wrap: anywhere; }

.modal-x {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: var(--dim);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.modal-x:hover { color: var(--ice); }

.modal input {
  width: 100%;
  padding: 11px 13px;
  margin-bottom: 9px;
  border-radius: 9px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ice);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.modal input:focus {
  outline: none;
  border-color: var(--cyan-dim);
}

.note { font-size: 12.5px; color: var(--dim); margin: 10px 0 0; }
/* Colour alone never carries the meaning - the message always says what failed. */
.note[data-tone="error"] { color: #f08a80; }

.switch { font-size: 12.5px; color: var(--dim); margin: 12px 0 0; }

.link {
  background: none;
  border: none;
  padding: 0 0 0 4px;
  font-size: inherit;
  font-family: inherit;
  color: var(--cyan);
  cursor: pointer;
  text-decoration: underline;
}

#authSignedIn .link { display: block; margin: 12px auto 0; }

/* ---------- long-form pages (terms, privacy, download, account) ---------- */

.doc {
  max-width: 720px;
  margin: 0 auto;
  padding: 44px var(--pad-x) 90px;
}

.doc h1 { font-size: clamp(28px, 4.5vw, 36px); margin: 0 0 6px; font-weight: 600; }
.doc h2 { font-size: 18px; margin: 36px 0 8px; font-weight: 600; }
.doc p, .doc li { color: var(--body); font-size: 15px; }
.doc .updated { color: var(--dim); font-size: 13px; margin-top: 0; }
.doc a { color: var(--cyan); }
.doc code {
  font-family: var(--mono);
  font-size: 13px;
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 5px;
  border-radius: 4px;
}

.callout {
  border: 1px solid var(--line);
  border-left: 2px solid var(--cyan);
  border-radius: 10px;
  padding: 15px 18px;
  margin: 24px 0;
  background: rgba(11, 17, 32, 0.6);
}
.callout p { margin: 0; font-size: 14px; }

.steps { counter-reset: step; list-style: none; padding: 0; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 14px 34px;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--cyan);
  border: 1px solid rgba(79, 214, 226, 0.45);
}

/* ---------- account page ---------- */

.account-page #acctSignedOut { color: var(--body); }
.account-page #acctSignIn { margin-top: 8px; }
/* The .doc h1's own bottom margin (6px, tuned for doc pages where a h2
   subheading follows right after) reads as cramped above a full card with
   its own padding and border - this page needs real breathing room instead. */
.account-page h1 { margin-bottom: 22px; }

.acct-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--panel-2), rgba(11, 17, 32, 0.5));
  padding: 22px 24px;
  margin: 0 0 16px;
}

.acct-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

/* A flex item's min-width defaults to auto, which means it refuses to shrink
   below the width of its own content. An email address is very nearly one
   unbreakable token, so without this the text block pushed the card wider
   than the screen and took the whole page with it - worst on a phone, where
   there is least room to absorb it. min-width: 0 is what actually lets the
   column shrink; the wrapping rule below is what it does once it can. */
.acct-card-head > div {
  min-width: 0;
  flex: 1 1 auto;
}

/* Sign out / the plan badge keep their size and stay on one line - they are
   short, and shrinking them is never the right answer to a long address. */
.acct-card-head > .link,
.acct-card-head > .acct-status {
  flex: 0 0 auto;
}

.acct-label {
  margin: 0 0 4px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.acct-email, .acct-plan { margin: 0; font-size: 19px; font-weight: 600; }

/* anywhere, not break-word: break-word only breaks a word when it has a line
   of its own to fail on first, which still leaves the container stretched by
   the longest unbroken run. An address like a.very.long.name@subdomain.example
   has no break opportunity at all until this allows one mid-token. */
.acct-email {
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.3;
}

/* Long addresses are common enough that the default size doesn't fit two
   lines comfortably on a narrow phone. Dropping a few px here is far less
   ugly than a three-line email in 19px bold. */
@media (max-width: 480px) {
  .acct-email { font-size: 16px; }
}

.acct-status {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
  padding: 5px 11px;
  border: 1px solid rgba(79, 214, 226, 0.3);
  border-radius: 20px;
  white-space: nowrap;
}

.acct-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.acct-actions .btn { padding: 10px 18px; font-size: 13.5px; }

.usage-row { margin: 16px 0; }
.usage-row-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: var(--body);
  margin-bottom: 7px;
}
.usage-bar {
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.usage-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--cyan);
  transition: width 300ms ease;
}
.usage-bar-fill[data-level="warn"] { background: #f0a35e; }
.usage-bar-fill[data-level="high"] { background: #f0715e; }

/* ---------- small screens ---------- */

@media (max-width: 620px) {
  :root { --gap-section: 76px; }
  .hero { padding: 60px var(--pad-x) 60px; }
  .nav nav { gap: 16px; font-size: 13.5px; }
  .footer-inner nav { margin-left: 0; gap: 16px; }
}