/* ─────────────────────────────────────────────────────────────────────────
   HORMACHUELOS — the clean theme.

   Loaded last on every page, after sketch.css and the page's own sheet. It
   only changes how things look: no markup, script or feature depends on it,
   and removing the <link> brings the sketchbook theme back unchanged.

   One system everywhere: a soft off-white page, white surfaces with a
   hairline border, one sans family (Inter) in sentence case, near-black
   ink, and the brand's ember orange as the single accent.
   ───────────────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* The old token names are kept, so every rule that reads them takes the
     new colours without being rewritten. */
  --ink: #18181b;
  --ink-soft: #52525b;
  --ink-faint: #71717a;
  --azure: #ea580c;
  --azure-deep: #c2410c;
  --white: #ffffff;
  --leaf: #15803d;
  --leaf-lit: #16a34a;
  --graphite: #18181b;
  --sanguine: #ea580c;
  --accent: #ea580c;
  --accent-deep: #c2410c;
  --accent-soft: #fff4ec;

  --paper: #ffffff;
  --paper-deep: #f4f4f5;
  --page: #fafaf9;
  --line: #e4e4e7;
  --line-strong: #d4d4d8;
  --pencil: rgba(24, 24, 27, 0.08);

  --font-display: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  --radius: 16px;
  --radius-sm: 10px;
  --wobble: 16px;
  --wobble-soft: 16px;
  --wobble-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.04);
  --shadow: 0 1px 2px rgba(24, 24, 27, 0.04), 0 8px 24px -12px rgba(24, 24, 27, 0.1);
  --shadow-lg: 0 2px 4px rgba(24, 24, 27, 0.04), 0 24px 48px -20px rgba(24, 24, 27, 0.18);
  --glow: var(--shadow);
  --leaf-glow: var(--shadow);
  --leaf-glow-lit: var(--shadow-lg);
  --ring: 0 0 0 3px rgba(234, 88, 12, 0.2);
}

/* ── The page ── */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.006em;
  font-feature-settings: "cv11", "ss01";
}

.sky {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(234, 88, 12, 0.06), transparent 70%),
    var(--page);
}

::selection {
  background: rgba(234, 88, 12, 0.18);
}

a {
  color: var(--accent-deep);
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

code,
kbd,
pre {
  font-family: var(--font-mono);
}

/* ── Type: one family, sentence case, tight tracking ── */

body,
p,
li,
.lede,
.note,
.fine,
.demo-lede,
.about-lede,
.demo-note,
.models-fine,
.trial-note,
.feature p,
.faq details p,
.reel-caption p,
.about-story p,
.about-values p,
.legal-block p,
.legal-block li,
.perks li,
.plans .card .perks li,
.pay-hint,
.key-note,
.auth-sub,
.plan-note,
.closer p {
  font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
.hero h1,
.hero h1 .shine,
.hero h1 .thin,
.section-title,
.section-title .thin,
.demo-title,
.about-title,
.rc-title,
.auth-card h1,
.panel-head h1,
.pay-head h1,
.trial-card h2,
.stat-value,
.amount-value,
.plans .amount-value,
.closer h2,
.feature h3,
.reel-caption h3,
.about-values h2,
.legal-block h2,
.faq summary {
  font-family: var(--font-display);
  color: var(--ink);
  -webkit-text-fill-color: currentColor;
  text-transform: none;
  text-shadow: none;
  filter: none;
  background-image: none;
  -webkit-text-stroke: 0;
}

.hero h1,
.hero h1 .shine,
.section-title,
.demo-title,
.about-title,
.rc-title,
.closer h2 {
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.04;
}

.hero h1 {
  font-size: clamp(40px, 6.6vw, 76px);
}

.section-title,
.demo-title,
.about-title {
  font-size: clamp(32px, 4.6vw, 54px);
  text-wrap: balance;
}

.hero h1 .thin,
.section-title .thin,
.about-title .thin,
.demo-title .thin {
  font-weight: 800;
  color: var(--accent);
  -webkit-text-fill-color: currentColor;
}

/* The sketch theme drew pencil marks around big titles: gone. */
.hero h1::before,
.hero h1::after,
.hero h1 .shine::before,
.hero h1 .shine::after,
.section-title::before,
.section-title::after,
.demo-title::before,
.demo-title::after,
.about-title::before,
.about-title::after {
  content: none !important;
}

h2,
h3,
.feature h3,
.reel-caption h3,
.about-values h2,
.legal-block h2,
.trial-card h2,
.panel-head h1,
.pay-head h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.feature h3 {
  font-size: 19px;
}

.feature p,
.faq details p,
.reel-caption p,
.about-story p,
.about-values p,
.legal-block p,
.legal-block li {
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.65;
}

.lede,
.about-lede,
.demo-lede,
.uc-sub {
  color: var(--ink-soft);
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.6;
  text-shadow: none;
}

.amount-note,
.plan-tagline,
.cell-sub,
.stat-sub,
.foot-line,
.amount-was {
  color: var(--ink-faint);
}

/* ── Eyebrows: small accent text, no box ── */

.kicker,
.eyebrow,
.reel-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: var(--accent-soft);
  border: 1px solid rgba(234, 88, 12, 0.18);
  border-radius: 999px;
  box-shadow: none;
  color: var(--accent-deep);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Text blocks the sketch theme framed in ink now sit on the page. */
.hero .note,
.hero .fine,
.demo-lede,
.about-lede,
.price > .fine,
.models-fine,
.trial-note,
.demo-note {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--ink-soft);
  text-shadow: none;
  backdrop-filter: none;
}

.plan-track {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.note a,
.demo-note-link a,
.faq details a {
  color: var(--accent-deep);
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
}

/* ── Nav: frosted bar with a hairline ── */

.nav {
  background: rgba(250, 250, 249, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  box-shadow: none;
}

@keyframes nav-solidify {
  to {
    background: rgba(250, 250, 249, 0.86);
    border-bottom-color: var(--line);
    box-shadow: none;
    padding-block: 11px;
  }
}

@supports not (animation-timeline: scroll()) {
  .nav {
    background: rgba(250, 250, 249, 0.86);
    border-bottom-color: var(--line);
    box-shadow: none;
  }
}

.brand-name,
.foot-brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.12em;
  color: var(--ink);
}

.nav-about,
.nav-login,
.nav-cta,
.nav-back {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
}

.nav-auth,
.nav-cta,
.nav-back {
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.nav-login:hover,
.nav-cta:hover,
.nav-about:hover,
.nav-back:hover {
  color: var(--ink);
  background: var(--paper-deep);
}

.nav-signup {
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
}

.nav-signup:hover {
  background: #27272a;
}

.nav-help {
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-weight: 600;
}

.nav-help:hover,
.nav-help[aria-current="page"] {
  background: var(--paper-deep);
  color: var(--ink);
}

/* ── Buttons ── */

.cta,
.buy,
.rc-print,
.trial .trial-btn,
.auth-card button[type="submit"],
.auth-submit,
.pay-submit {
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(194, 65, 12, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  text-shadow: none;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Formal states: a button never moves. Hover deepens the colour, press
   deepens it once more. */
.cta:hover,
.buy:hover,
.rc-print:hover,
.trial .trial-btn:hover,
.auth-card button[type="submit"]:hover,
.auth-submit:hover,
.pay-submit:hover {
  background: var(--accent-deep);
  box-shadow: 0 1px 2px rgba(194, 65, 12, 0.3);
}

.cta:active,
.buy:active,
.rc-print:active,
.auth-card button[type="submit"]:active,
.auth-submit:active,
.pay-submit:active {
  background: #9a3412;
  box-shadow: none;
}

.cta,
.cta:hover,
.cta:active,
.buy,
.buy:hover,
.buy:active,
.download,
.download:hover,
.download:active,
.closer-dl,
.closer-dl:hover,
.nav-signup,
.nav-signup:hover,
.nav-cta:hover,
.intro-btn,
.intro-btn:hover,
.intro-login:hover,
.oauth-btn:hover,
.btn-quiet:hover,
.plan-track:hover,
.about-contact a:hover,
.show-tab:hover,
.show-play:hover {
  transform: none;
  translate: none;
}

.cta.cta-free,
.card.style-green .buy {
  background: var(--ink);
  box-shadow: var(--shadow-sm);
}

.cta.cta-free:hover,
.card.style-green .buy:hover {
  background: #27272a;
  box-shadow: var(--shadow);
}

.download,
.rc-account,
.oauth-btn,
.btn-quiet,
.chip-btn,
.plan-choose,
.closer-dl {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.download:hover,
.rc-account:hover,
.oauth-btn:hover,
.btn-quiet:hover,
.chip-btn:hover,
.plan-choose:hover {
  background: var(--paper-deep);
  border-color: #a1a1aa;
}

.download svg {
  stroke: var(--ink);
}

.download-version {
  background: var(--paper-deep);
  border: 0;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-weight: 500;
}

.buy.current,
.buy.current:hover {
  background: transparent;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  box-shadow: none;
  transform: none;
}

/* ── Surfaces: white, hairline, soft shadow ── */

.card,
.plans .card,
.feature,
.reel,
.faq details,
.about-story,
.about-values li,
.about-stats,
.about-contact a,
.legal-block,
.auth-card,
.trial-card,
.panel,
.stat,
.rc-error,
.pay-card,
.pay-note,
.pay-page .pay-main,
.plan-block,
.usage-block,
.order-block,
.device-block,
.plan-row,
.rev-chart,
.client.order,
.uc-card,
.table-card,
.help-points li,
.ph-first,
.glance-item,
.model-list {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.feature {
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Cards stay still too: only the edge and shadow firm up. */
.feature,
.feature:hover,
[data-tilt],
html.fx [data-tilt].is-tilting {
  transform: none;
}

.feature:hover {
  background: var(--paper);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lg);
}

.feature-icon {
  background: var(--accent-soft);
  border: 1px solid rgba(234, 88, 12, 0.16);
  border-radius: 12px;
  color: var(--accent-deep);
  box-shadow: none;
}

.feature-icon svg {
  stroke: currentColor;
}

/* Inner panels inside a card: a quiet grey well. */
.acct-pane .usage-line,
.acct-pane .usage-window,
.acct-pane .plan-option:not(.is-current) {
  background: #fafafa;
  border-color: var(--line);
}

/* ── Pricing cards ── */

.card.featured {
  background: var(--paper);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-lg);
}

.card.style-dark {
  background: linear-gradient(180deg, #27272a, #18181b);
  border-color: #18181b;
  box-shadow: var(--shadow-lg);
}

.card.style-dark h2,
.card.style-dark .amount-value,
.card.style-dark p,
.card.style-dark li,
.card.style-dark .perks li {
  color: #fafafa;
}

.card.style-dark .amount-note,
.card.style-dark .plan-tagline {
  color: #a1a1aa;
}

.card.style-dark .perks {
  border-top-color: rgba(255, 255, 255, 0.12);
}

.card.style-green {
  border-color: var(--line);
  box-shadow: var(--shadow);
}

.card.style-green h2 {
  color: var(--leaf);
}

.plans .card h2,
.card h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}

/* ── Home hero details ── */

/* The builders line (builders.js): a stack of faces, the total, and a green
   "joined today" tag with a live ripple. A changed figure rolls up into place
   and a new face slides in at the front of the stack. */
.builders {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  margin: 22px 0 0;
  padding: 6px 18px 6px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink-soft);
}

.builders strong {
  display: inline-block;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.builders-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

/* One of the intro's sketched leaves, painted by card-leaves.js. It sways on
   its stem like a leaf in a light breeze, and flutters when someone joins. */
.builders-leaf {
  flex: none;
  width: 30px;
  height: 30px;
  margin: -2px -4px -2px 0;
  transform-origin: 30% 70%;
  animation: builders-sway 3.6s ease-in-out infinite;
}

@keyframes builders-sway {
  0%,
  100% {
    rotate: -7deg;
  }
  50% {
    rotate: 7deg;
  }
}

.builders-leaf.is-new {
  animation:
    builders-sway 3.6s ease-in-out infinite,
    builders-flutter 0.9s cubic-bezier(0.3, 0.7, 0.2, 1);
}

@keyframes builders-flutter {
  25% {
    translate: 0 -4px;
    scale: 1.12;
  }
  55% {
    translate: 0 1px;
    scale: 0.96;
  }
}

.builders-rule {
  width: 1px;
  height: 16px;
  background: var(--line-strong);
}

.builders-today {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.builders-today strong {
  color: #15803d;
}

.builders-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: none;
  animation: none;
}

/* The live ripple: a ring that widens and fades, over and over. */
.builders-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #22c55e;
  animation: builders-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes builders-ping {
  75%,
  100% {
    opacity: 0;
    transform: scale(2.6);
  }
}

/* A new figure rolls up into place, like an odometer. */
.builders strong.is-bump {
  animation: builders-roll 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes builders-roll {
  from {
    opacity: 0;
    transform: translateY(60%);
  }
  to {
    opacity: 1;
    transform: none;
    color: inherit;
  }
}

.builders {
  min-width: 0;
  max-width: min(100%, calc(100vw - 32px));
}

/* On a phone the chip folds to two centred rows: faces and total, then the
   green tag; a softer corner suits the taller shape. */
@media (max-width: 520px) {
  .builders {
    display: inline-flex;
    gap: 8px 12px;
    padding: 8px 12px;
    border-radius: 18px;
  }

  .builders-stat:first-of-type,
  .builders-dot {
    grid-row: auto;
    grid-column: auto;
  }

  /* The two figures sit on their own rows here, so the divider has nothing
     to divide. */
  .builders-rule {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .builders-leaf,
  .builders-leaf.is-new,
  .builders-dot::after,
  .builders strong.is-bump {
    animation: none;
  }
}

.show-tab {
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.show-tab.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: #fafafa;
}

/* ── Live-purchase toast ── */

.act-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  font-family: var(--font-display);
}

.act-plan {
  font-weight: 700;
  font-size: 15px;
}

.plans .amount-value,
.amount-value {
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.card .tag,
.trial-tag,
.trial-card-tag {
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  box-shadow: none;
  transform: none;
}

.tag.tag-free,
.trial-tag {
  background: #dcfce7;
  color: var(--leaf);
}

.amount-save {
  background: #dcfce7;
  border: 0;
  color: var(--leaf);
  font-weight: 600;
}

.plans .card .perks,
.perks {
  border-top: 1px solid var(--line);
}

.perks li,
.plans .card .perks li {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
}

.plans .card .perks li::before,
.perks li::before,
.card.featured .perks li::before {
  background: transparent;
  color: var(--accent);
  font-weight: 700;
}

/* Plain weighted words, not chips: a row of tinted boxes wrapped into a jumble. */
.perk-model,
.perk-mark {
  padding: 0;
  border-radius: 0;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  font-weight: 600;
  background: none;
}

.perk-model {
  color: var(--ink);
}

.perk-mark {
  color: var(--accent-deep);
}

.card.style-dark .perk-model {
  color: inherit;
  background: none;
}

.card.style-dark .perk-mark {
  color: #fdba74;
  background: none;
}

.perk-link {
  color: var(--accent-deep);
}

.card.style-dark .perk-link {
  color: #fdba74;
}

/* The plan-period switch: a segmented control. */
.plan-switch {
  background: var(--paper-deep);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: none;
}

.plan-switch-opt {
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-weight: 600;
}

.plan-switch-opt:hover {
  color: var(--ink);
}

.plan-switch-opt.is-on {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(24, 24, 27, 0.12);
}

/* ── Providers belt ── */

.belt {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.provider {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.belt:hover .provider {
  background: var(--paper);
}

.provider-logo {
  background: var(--ink);
}

.provider-name {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}

/* ── Recordings ── */

.reel-player {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.reel-tags span {
  background: var(--paper-deep);
  border: 0;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-weight: 500;
}

/* ── FAQ ── */

.faq details {
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.faq details[open] {
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}

.faq summary {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ── Closing banner on the home page ── */

.closer {
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(234, 88, 12, 0.28), rgba(234, 88, 12, 0) 60%),
    #18181b;
  border-radius: 28px;
}

.closer .fx-glow {
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(251, 146, 60, 0.2), transparent 70%);
}

.closer h2 {
  color: #fafafa;
  font-size: clamp(34px, 5.4vw, 64px);
}

.closer h2 span {
  color: #fb923c;
}

.closer p {
  color: #a1a1aa;
}

.closer .cta {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
}

.closer .cta:hover {
  background: #f97316;
}

.closer-dl {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fafafa;
  box-shadow: none;
}

.closer-dl:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ── Forms ── */

.field input,
.pay-field input,
.pay-lookup input,
.panel-search,
.provider-form input:not([type="checkbox"]),
.provider-form textarea,
.key-edit input,
.plan-field input,
.plan-field textarea,
.plan-select,
.chip-select,
.access-search {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input::placeholder,
.pay-field input::placeholder,
.plan-field input::placeholder,
.plan-field textarea::placeholder {
  color: #a1a1aa;
}

.field input:hover,
.pay-field input:hover,
.plan-field input:hover {
  border-color: #a1a1aa;
}

.field input:focus,
.pay-field input:focus,
.pay-lookup input:focus,
.panel-search:focus,
.provider-form input:not([type="checkbox"]):focus,
.provider-form textarea:focus,
.key-edit input:focus,
.plan-field input:focus,
.plan-field textarea:focus,
.plan-select:focus,
.access-search:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
  outline: none;
}

body .field label,
body .pay-lookup label,
.key-subhead {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ink);
}

.field .hint {
  color: var(--ink-faint);
}

/* ── Auth pages ── */

.auth-card {
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
}

.auth-card h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.auth-sub {
  color: var(--ink-soft);
}

body .oauth-or {
  color: var(--ink-faint);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* ── Tables (plans page) ── */

.plan-table th,
.plan-table td {
  border-color: var(--line);
}

.plan-table thead th {
  background: #fafafa;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-weight: 600;
}

/* ── Small labels across account and checkout ── */

body .stat-label,
body .contact-text .channel,
body .reel-level,
body .pay-step,
body .welcome-tag {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

body .pl-badge {
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
}

.acct-tab,
.tab {
  font-family: var(--font-display);
  font-weight: 600;
}

/* ── Download menu ── */

.dl-menu {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
}

.dl-menu a:hover,
.dl-menu a:focus-visible {
  background: var(--paper-deep);
}

.dl-menu em {
  background: var(--accent);
  color: #fff;
}

/* ── Model list dialog ── */

.model-list-scrim {
  background: rgba(24, 24, 27, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.model-list {
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
}

.model-list-close {
  background: var(--paper-deep);
  border: 1px solid var(--line);
}

.model-list-close:hover,
.model-list-close:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* ── Feature cards on the home page ──
   Icon, title, one line of text. The pointer glow and the drawn mock-ups are
   gone; on hover the edge firms up and a few leaves drift down behind the
   text (card-leaves.js). */

.fx-spot:not(.closer) > .fx-glow {
  display: none;
}

.bento-art {
  display: none;
}

/* "Uses your PC" keeps its little scene: on hover the cursor glides to OK,
   presses it, and the screen's edges darken the way they do while it drives. */
.bento-art.art-pc {
  display: block;
  width: min(100%, 340px);
  height: 54px;
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fafafa;
  overflow: hidden;
  transition: box-shadow 0.5s ease 0.2s;
}

.feature:hover .art-pc {
  box-shadow: inset 0 0 0 1px rgba(24, 24, 27, 0.08), inset 0 0 22px 4px rgba(24, 24, 27, 0.22);
}

.art-pc-btn {
  right: 14%;
  padding: 6px 18px;
  font-size: 12px;
  background: var(--ink);
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-sm);
}

.feature:hover .art-pc-btn {
  background: var(--accent);
}

.art-pc-cursor {
  z-index: 1;
  width: 18px;
  height: 18px;
  top: 55%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 3.5 18.5 12 12 13.4 9 19.5Z' fill='%2318181b' stroke='%23ffffff' stroke-width='1.6' stroke-linejoin='round'/></svg>");
}

.bento {
  gap: 14px;
}

.features .feature {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 26px 26px 28px;
  box-shadow: var(--shadow-sm);
}

.features .feature:hover {
  border-color: #fdba74;
  box-shadow: var(--shadow);
}

.features .feature h3 {
  margin-top: 18px;
}

.features .feature p {
  max-width: 52ch;
  margin-bottom: 0;
}

.card-leaves {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ── Header: one floating pill, centred ──
   Logo mark and name, three page links, one account button. It replaces the
   full-width bar above; the drawer (nav-menu.js) still carries every link. */

.nav,
.nav.has-menu,
.nav.has-menu.is-scrolled {
  inset: 14px 0 auto;
  width: fit-content;
  max-width: calc(100% - 24px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 6px 6px 6px 10px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.04), 0 10px 30px -14px rgba(24, 24, 27, 0.18);
  animation: none;
}

.nav-left {
  gap: 0;
}

.brand {
  gap: 0;
}

.brand-name {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.brand-name::before {
  content: "";
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 8px;
  background: url("assets/icon-96.png") center / cover no-repeat;
}

.nav-links {
  gap: 4px;
}

.nav-links a {
  padding: 8px 12px;
  border-radius: 999px;
  font: 500 14px/1 var(--font-display);
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-links a::after {
  content: none;
}

.nav-links a:hover {
  background: var(--paper-deep);
  color: var(--ink);
}

.nav-links a[aria-current="page"] {
  color: var(--ink);
}

/* Log in and Get started read as one pair, set apart from the page links by a
   short hairline, both the same height. */
.nav.has-menu .nav-auth {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: -10px;
}

.nav.has-menu .nav-auth::before {
  content: "";
  width: 1px;
  height: 18px;
  margin-right: 8px;
  background: var(--line);
}

.nav.has-menu .nav-auth .nav-login {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  font: 500 14px/1 var(--font-display);
  color: var(--ink);
}

.nav.has-menu .nav-auth .nav-login:hover {
  background: var(--paper-deep);
  color: var(--ink);
}

/* Signed in: just the Account button here; Refer & earn lives in the drawer
   and on the account page. */
.nav.has-menu .nav-auth .nav-refer {
  display: none;
}

.nav .nav-signup,
.nav.has-menu .nav-auth .nav-signup {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font: 600 14px/1 var(--font-display);
  box-shadow: none;
}

.nav .nav-signup:hover,
.nav.has-menu .nav-auth .nav-signup:hover {
  background: #3f3f46;
  border-color: transparent;
}

/* Log in, sign up and account pages: logo and one quiet way back. */
.nav.nav-simple .nav-back {
  padding: 10px 16px;
  background: var(--paper-deep);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  color: var(--ink);
  font: 500 14px/1 var(--font-display);
}

.nav.nav-simple .nav-back:hover {
  background: #e4e4e7;
}

.fx-progress {
  display: none;
}

@media (max-width: 720px) {
  .nav,
  .nav.has-menu,
  .nav.has-menu.is-scrolled {
    inset: 10px 0 auto;
    width: calc(100% - 20px);
    max-width: none;
    gap: 8px;
    padding: 5px 5px 5px 8px;
  }

  /* One button stays on the bar: Get started, or Account when signed in. */
  .nav.has-menu .nav-auth {
    display: inline-flex !important;
    align-items: center;
    margin-left: auto;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .nav.has-menu .nav-auth .nav-login,
  .nav.has-menu .nav-auth::before {
    display: none;
  }

  .nav .nav-signup,
  .nav.has-menu .nav-auth .nav-signup {
    padding: 9px 14px;
    font-size: 13.5px;
  }

  .nav-menu-btn {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
  }

  .nav-menu-btn:hover {
    background: var(--paper-deep);
  }

  .nav-drawer-panel {
    background: var(--paper);
  }

  .nav-drawer-top b.brand-name {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.015em;
  }

  .nav-drawer-group {
    color: var(--ink-faint);
  }

  .nav-drawer-links a {
    border-bottom-color: var(--line);
    font-weight: 500;
  }
}

/* ── Footer ── */

footer {
  border-top: 1px solid var(--line);
  background: transparent;
}

body footer a {
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  border: 0;
}

body footer a:hover {
  color: var(--ink);
}

body footer > span,
body .foot-copy {
  color: var(--ink-faint);
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0;
}

@media (prefers-reduced-motion: reduce) {
  .feature,
  .cta,
  .buy {
    transition: none;
  }

  .feature:hover,
  .cta:hover,
  .buy:hover {
    transform: none;
  }
}

/* The cursor's stop on OK, measured for the smaller scene above. */
.feature:hover .art-pc-cursor {
  left: calc(86% - 40px);
  top: 45%;
}

/* ── Pricing cards: one top row for every card ──
   The tag ("Most popular") and the usage switch share a fixed 28px row at
   the top, so every name, price and line of perks starts at the same height
   across the four cards. */
.plans .card {
  position: relative;
}

.plans .card > .card-tags {
  height: 28px;
  margin: 0 0 3px;
  align-items: center;
}

.plans .card .plan-head,
.plans .card:not(:has(.tag)) .plan-head {
  display: block;
  margin-top: 31px;
}

.plans .card:has(.tag) .plan-head {
  margin-top: 0;
}

.plans .card .plan-switch {
  position: absolute;
  top: 30px;
  right: 24px;
  height: 28px;
  padding: 2px;
  gap: 0;
  background: #f4f4f5;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.plans .card .plan-switch-opt {
  min-width: 40px;
  height: 22px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 22px;
  color: #71717a;
}

.plans .card .plan-switch-opt.is-on {
  background: var(--paper);
  color: var(--accent-deep);
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.08), 0 0 0 1px rgba(234, 88, 12, 0.35);
}

/* ── Closing banner: a lit stage ──
   A faint grid fading out from the centre, a warm horizon glowing up from
   the bottom edge, "Just ask." in a warm gradient with a drawn stroke under
   it, and the card leaves drifting through. */
.closer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(60% 55% at 50% 118%, rgba(249, 115, 22, 0.55), rgba(234, 88, 12, 0.12) 55%, transparent 75%),
    radial-gradient(70% 90% at 50% -10%, rgba(234, 88, 12, 0.22), transparent 60%),
    #131316;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 30px 80px -30px rgba(234, 88, 12, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.closer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center center;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 45%, #000, transparent 80%);
  mask-image: radial-gradient(60% 70% at 50% 45%, #000, transparent 80%);
  pointer-events: none;
}

/* The horizon line: a thin bright arc where the glow meets the edge. */
.closer::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  z-index: -1;
  width: 60%;
  height: 1px;
  translate: -50% 0;
  background: linear-gradient(90deg, transparent, #fdba74, transparent);
  box-shadow: 0 0 24px 2px rgba(251, 146, 60, 0.7);
  pointer-events: none;
}

.closer > :not(.fx-glow):not(.card-leaves) {
  position: relative;
}

.closer > .card-leaves {
  position: absolute;
  z-index: -1;
}

.closer h2 {
  letter-spacing: -0.045em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}

.closer h2 span {
  position: relative;
  display: inline-block;
  padding-bottom: 0.08em;
  background: linear-gradient(100deg, #fdba74 0%, #fb923c 40%, #f97316 70%, #fdba74 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  animation: closer-shine 6s ease-in-out infinite;
}

/* The drawn stroke under "Just ask.", like a pencil underline. */
.closer h2 span::after {
  content: "";
  position: absolute;
  left: 2%;
  right: 4%;
  bottom: -0.06em;
  height: 0.16em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C 50 2, 110 2, 197 6 M 20 10 C 80 6, 140 6, 185 9' fill='none' stroke='%23fb923c' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.3s;
}

.closer h2.is-in span::after,
html:not(.fx) .closer h2 span::after {
  transform: scaleX(1);
}

@keyframes closer-shine {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}

.closer p {
  color: #b4b4bd;
}

.closer .cta {
  box-shadow: 0 0 0 1px rgba(253, 186, 116, 0.25), 0 10px 30px -6px rgba(234, 88, 12, 0.75);
}

.closer .cta:hover {
  box-shadow: 0 0 0 1px rgba(253, 186, 116, 0.4), 0 12px 36px -6px rgba(249, 115, 22, 0.9);
}

.closer-dl {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

@media (prefers-reduced-motion: reduce) {
  .closer h2 span {
    animation: none;
  }
  .closer h2 span::after {
    transition: none;
  }
}

/* ── At a glance: one panel, four figures ──
   The four loose cards become a single white strip split by hairlines. Each
   figure gets a small orange icon tile; the figure itself reads in ink, so the
   orange is an accent rather than the whole row. */
.glance {
  gap: 0;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.04), 0 18px 40px -24px rgba(24, 24, 27, 0.22);
}

.glance-item,
.glance-item:hover {
  position: relative;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 6px;
  align-items: center;
  padding: 22px 22px;
  background: transparent;
  border: 0;
  border-radius: 16px;
  box-shadow: none;
  transition: background-color 0.2s ease;
}

.glance-item:hover {
  background: #fff7ed;
}

/* Hairlines between the figures. */
.glance-item + .glance-item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: var(--line);
}

/* The icon tile. */
.glance-item::before {
  content: "";
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-color: var(--accent);
  background-image: linear-gradient(145deg, #fb923c, #ea580c);
  box-shadow: 0 6px 14px -6px rgba(234, 88, 12, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  -webkit-mask: var(--glance-icon) center / 22px 22px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: var(--glance-icon) center / 22px 22px no-repeat exclude, linear-gradient(#000 0 0);
}

/* Providers: stacked layers. */
.glance-item:nth-child(1) {
  --glance-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 8l10 5 10-5-10-5z'/%3E%3Cpath d='m2 16 10 5 10-5'/%3E%3Cpath d='m2 12 10 5 10-5'/%3E%3C/svg%3E");
}

/* Cache: a bolt. */
.glance-item:nth-child(2) {
  --glance-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7l1-8z'/%3E%3C/svg%3E");
}

/* Desktops: a monitor. */
.glance-item:nth-child(3) {
  --glance-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='13' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E");
}

/* Price: a tag. */
.glance-item:nth-child(4) {
  --glance-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E");
}

.glance-item strong {
  align-self: end;
  font-size: clamp(28px, 2.8vw, 36px);
  letter-spacing: -0.04em;
  color: var(--ink);
}

.glance-item small {
  align-self: start;
  font-size: 14px;
  color: #71717a;
}

@media (max-width: 960px) {
  .glance {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Two by two: the hairline sits only between the pair on each row, and a
     rule runs across the middle. */
  .glance-item:nth-child(3)::after {
    display: none;
  }

  .glance-item:nth-child(n + 3) {
    border-top: 1px solid var(--line);
    border-radius: 0 0 16px 16px;
  }
}

@media (max-width: 520px) {
  .glance-item,
  .glance-item:hover {
    grid-template-columns: 1fr;
    padding: 18px 16px;
  }

  .glance-item::before {
    grid-row: auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    -webkit-mask-size: 18px 18px, auto;
    mask-size: 18px 18px, auto;
  }
}

/* ── Moving around ──
   In-page links (Pricing, FAQ, Download) glide to their section instead of
   jumping, and stop clear of the floating header. Going to another page
   (Log in, About) cross-fades, in browsers that support it. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.28s;
  animation-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  @view-transition {
    navigation: none;
  }
}

/* ── About: the founder and the co-founder, side by side ── */
.about-founders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  margin: 26px 0 0;
}

.about-founders .about-story {
  margin: 0;
  align-content: start;
}

.about-avatar {
  background: linear-gradient(145deg, #fb923c, #ea580c);
  box-shadow: 0 8px 18px -8px rgba(234, 88, 12, 0.7);
}

/* The co-founder's tile in ink, so the two read as a pair. */
.about-founders .about-story + .about-story .about-avatar {
  background: linear-gradient(145deg, #3f3f46, #18181b);
  box-shadow: 0 8px 18px -8px rgba(24, 24, 27, 0.6);
}

@media (max-width: 640px) {
  .about-founders {
    grid-template-columns: 1fr;
  }
}

/* ── Footer: one line ──
   A single white bar, the width of the page's content: the brand and the
   year on the left, the links on the right. Nothing else. */
footer.site-foot {
  display: block;
  margin-top: 72px;
  padding: 0 0 24px;
  background: transparent;
  border: 0;
  color: var(--ink);
  text-shadow: none;
  letter-spacing: normal;
}

.site-foot .foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
  padding: 16px 16px 16px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.04);
}

.site-foot .foot-id {
  display: flex;
  align-items: center;
  gap: 14px;
}

body .site-foot a.foot-home {
  display: flex;
  align-items: center;
}

.site-foot .brand-name {
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}

.site-foot .brand-name::before {
  width: 24px;
  height: 24px;
  border-radius: 7px;
}

/* The year, after a short hairline, at the brand's own height. */
body .site-foot .foot-copy {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  color: #a1a1aa;
}

body .site-foot .foot-copy::before {
  content: "";
  width: 1px;
  height: 14px;
  background: var(--line);
}

.site-foot .foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

body .site-foot .foot-links a {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: #71717a;
  transition: color 0.15s ease, background-color 0.15s ease;
}

body .site-foot .foot-links a:hover {
  color: var(--ink);
  background: #f4f4f5;
}

/* On a phone the bar stacks: brand and year, then the links. */
@media (max-width: 720px) {
  footer.site-foot {
    margin-top: 48px;
    padding-bottom: 16px;
  }

  .site-foot .foot-row {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 12px 12px 18px;
  }

  .site-foot .foot-links {
    margin-left: -12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .site-foot .foot-links a {
    transition: none;
  }
}

/* ── See it work: one window, the install command as its bar ──
   The video sits in a white window whose top bar carries three dots and the
   CLI's install command with its Copy button. Under it, two small pill tabs
   on the left (a thin orange line fills under the playing one) and the clip's
   caption on the right. */
.show-window {
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.04), 0 30px 60px -36px rgba(24, 24, 27, 0.45);
}

.show-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 16px;
  border-bottom: 1px solid var(--line);
}

.show-dots {
  display: flex;
  gap: 7px;
}

.show-dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #e4e4e7;
}

.show-cmd {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

.show-cmd .cli-install-prompt {
  color: var(--accent);
}

.show-bar .cli-install-copy {
  justify-self: end;
  padding: 6px 14px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
}

.show-bar .cli-install-copy:hover {
  background: #f4f4f5;
  color: var(--ink);
}

.show-bar .cli-install-copy.is-done {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* The video fills the window under the bar. */
.show-window .show-stage {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.show-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 14px;
}

.show-foot .show-tabs {
  display: inline-flex;
  gap: 4px;
  margin: 0;
  padding: 3px;
  background: #f4f4f5;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.show-foot .show-tab,
.show-foot .show-tab:hover {
  gap: 7px;
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: #71717a;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.show-foot .show-tab:hover {
  color: var(--ink);
}

.show-foot .show-tab.is-on {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.1);
}

.show-foot .show-tab svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.8;
}

.show-foot .show-tab strong {
  font-size: 13.5px;
  font-weight: 600;
}

/* The second line ("The CLI", "Windows, Mac, Linux") stays for screen
   readers; the pill shows the name alone. */
.show-foot .show-tab small {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* How far the clip has played: a thin orange line under the pill's text. */
.show-foot .show-meter,
.show-foot .show-tab.is-on .show-meter {
  inset: auto 14px 3px;
  height: 2px;
  border-radius: 2px;
  background: transparent;
}

.show-foot .show-meter i {
  border-radius: 2px;
  background: var(--accent);
}

.show-foot .show-caption {
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
  font-size: 14px;
}

.show-foot .show-said {
  font-style: normal;
  color: #52525b;
}

.show-foot .show-speed {
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: #71717a;
}

.show > .cli-install-note {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  text-align: center;
  color: #a1a1aa;
}

.show > .cli-install-note a {
  color: var(--accent-deep);
}

@media (max-width: 640px) {
  .show-bar {
    grid-template-columns: 1fr auto;
    padding-left: 14px;
  }

  /* The command needs the whole bar on a phone. */
  .show-dots {
    display: none;
  }

  .show-cmd {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .show-window {
    border-radius: 14px;
  }

  .show-foot {
    flex-direction: column;
    align-items: stretch;
  }

  .show-foot .show-tabs {
    align-self: center;
  }

  .show-foot .show-caption {
    justify-content: center;
    text-align: center;
  }
}

/* After the intro its leaf cover stays faintly behind the top of the page; fade
   its bottom edge out so it doesn't end in a line across the showcase. */
html.intro-done .intro-stage .cover-canvas {
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}

/* The desktop app's window bar: a Windows | Mac | Linux switch in the middle
   and an orange Download on the right. It fades in when its tab is picked. */
.show-bar[hidden] {
  display: none;
}

.show-window .show-bar:not([hidden]) {
  animation: show-bar-in 0.3s ease both;
}

@keyframes show-bar-in {
  from { opacity: 0; }
}

.show-os {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: #f4f4f5;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.show-os-opt {
  padding: 4px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #71717a;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.show-os-opt:hover {
  color: var(--ink);
}

.show-os-opt.is-on {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.1);
}

.show-os-opt:focus-visible,
.show-get:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

body .show-get {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

body .show-get:hover {
  background: var(--accent-deep);
  color: #fff;
}

.show-get svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 640px) {
  .show-os-opt {
    padding: 4px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .show-window .show-bar:not([hidden]) {
    animation: none;
  }
}

/* The npm note under the window is about the CLI: it steps aside, keeping its
   space, while the desktop app plays. */
.show[data-current="app"] > .cli-install-note {
  visibility: hidden;
}

/* ── Phone fixes ── */

/* The download pill: a hairline between the download and the chooser, not a
   dark rule. */
.dl-pick .dl-more {
  border-left-color: var(--line);
  opacity: 1;
}

@media (max-width: 720px) {
  /* "Download for Windows" stays on one line, with a smaller version chip. */
  .dl-pick .dl-main {
    gap: 8px;
    min-height: 54px;
    padding: 0 10px 0 16px;
    white-space: nowrap;
  }

  .dl-pick .download-version {
    padding: 2px 7px;
    font-size: 11px;
  }

  .dl-pick .dl-more {
    padding: 0 14px 0 12px;
  }
}

@media (max-width: 380px) {
  /* The narrowest phones drop the version chip; the label keeps its line. */
  .dl-pick .download-version {
    display: none;
  }
}

/* At a glance, two by two: a smaller tile and figure so each cell breathes. */
@media (max-width: 520px) {
  .glance {
    padding: 4px;
    border-radius: 18px;
  }

  .glance-item,
  .glance-item:hover {
    row-gap: 4px;
    padding: 16px 14px;
  }

  .glance-item::before {
    width: 32px;
    height: 32px;
    margin-bottom: 6px;
    border-radius: 9px;
    -webkit-mask-size: 16px 16px, auto;
    mask-size: 16px 16px, auto;
  }

  .glance-item strong {
    font-size: 26px;
  }

  .glance-item small {
    font-size: 13px;
    line-height: 1.35;
  }
}

/* The live-purchase card on a phone: one compact strip, so it covers as
   little of the page as it can. */
@media (max-width: 560px) {
  .act-card {
    align-items: center;
    gap: 10px;
    padding: 10px 40px 10px 14px;
    border-radius: 14px;
  }

  .act-dot {
    margin-top: 0;
  }

  .act-plan {
    font-size: 14px;
  }

  .act-when {
    margin-top: 1px;
    font-size: 12.5px;
  }

  .act-close {
    top: 50%;
    translate: 0 -50%;
  }
}

/* "Create an account first": the line under the heading lines up with it. */
.pay-view[data-view="auth"] .pay-thanks {
  margin-left: 0;
  text-align: left;
}

/* ── Authorize (the CLI and the app's log-in) ──
   The same card language as the rest of the site: soft grey boxes with a
   plain small label, an orange avatar and PC tile, pill buttons with
   Authorize in orange, and a gentle amber note instead of a red alarm. */
.authz-box {
  margin: 0 0 12px;
  background: #fafafa;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.authz-label {
  padding: 14px 16px 0;
  border: 0;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #71717a;
}

.authz-account,
.authz-pc {
  padding: 10px 16px 14px;
}

.authz-avatar {
  background: linear-gradient(145deg, #fb923c, #ea580c);
  color: #fff;
  box-shadow: 0 6px 14px -8px rgba(234, 88, 12, 0.7);
}

.authz-pc-mark {
  background: #fff7ed;
  color: var(--accent-deep);
  border: 1px solid #fed7aa;
}

.authz-pc-name,
.authz-name {
  font-weight: 600;
}

/* "Not you?" sits inside the box, under a hairline. */
.authz-switch {
  margin: 0;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  font-size: 13px;
}

.authz-switch-btn {
  color: var(--accent-deep);
  font-weight: 500;
}

.authz-lead {
  margin: 22px 0 10px;
  font-size: 14px;
}

.authz-list li::before {
  border-color: var(--accent);
}

.authz-btn {
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 14.5px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.authz-btn.deny {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
}

.authz-btn.deny:hover {
  background: #f4f4f5;
  border-color: #d4d4d8;
}

.authz-btn.allow {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(194, 65, 12, 0.3);
}

.authz-btn.allow:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  opacity: 1;
}

.authz-warn {
  padding: 12px 14px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  font-size: 13px;
  color: #78350f;
}

.authz-warn a {
  color: #78350f;
}

/* The code screen: a little air between Continue and the note under it. */
.auth-card .buy + .authz-warn {
  margin-top: 14px;
}

/* The code reads like the one on the computer's screen: monospaced, centred
   and spaced out. */
#code-input {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-align: center;
}

#code-input::placeholder {
  letter-spacing: 0.18em;
}

/* "Account confirmed" on the welcome page: a soft green badge. (A grey label
   rule above had turned its text grey on the old solid green.) */
body .welcome-tag {
  background: #dcfce7;
  border: 0;
  box-shadow: none;
  color: #15803d;
  font-weight: 600;
  text-shadow: none;
}

/* ── Account ──
   The same language as the rest of the site: a white sidebar whose current
   tab is a soft orange pill, the plan as a clean card with an orange Change
   plan (no painted banner), plain section headings, and white cards with
   slim orange bars for the usage windows. */
.auth-card.acct-dash {
  background: var(--page);
  border-top-color: var(--line);
}

.acct-side {
  background: var(--paper);
  border-right-color: var(--line);
}

.acct-side-label {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #a1a1aa;
}

.acct-dash .acct-tab {
  padding: 10px 12px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #52525b;
  font-size: 15px;
  font-weight: 500;
}

.acct-dash .acct-tab:hover {
  background: #f4f4f5;
  color: var(--ink);
}

.acct-dash .acct-tab[aria-selected="true"] {
  background: #fff7ed;
  color: var(--accent-deep);
  box-shadow: inset 0 0 0 1px #fed7aa;
}

.acct-dash .acct-tab-icon {
  width: 19px;
  height: 19px;
}

.acct-side-user {
  border-top-color: var(--line);
}

.acct-side-avatar {
  background: linear-gradient(145deg, #fb923c, #ea580c);
  color: #fff;
}

.acct-side-email {
  font-size: 14px;
}

.acct-side-plan {
  font-size: 13px;
  color: #71717a;
}

.acct-side-signout {
  font-size: 14px;
  font-weight: 500;
}

.acct-side-signout:hover {
  background: #f4f4f5;
}

.acct-dash .acct-head h1 {
  font-size: 30px;
  letter-spacing: -0.03em;
}

.acct-dash .auth-sub {
  font-size: 15px;
  color: #71717a;
}

/* The plan card: a faint warm glow in the corner instead of a painted banner. */
.acct-hero {
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(55% 140% at 100% 0%, rgba(251, 146, 60, 0.16), transparent 65%),
    var(--paper);
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.04), 0 12px 30px -22px rgba(24, 24, 27, 0.3);
}

.acct-hero-art {
  display: none;
}

.acct-hero-body {
  padding: 22px 24px;
}

.acct-hero-tag {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #71717a;
}

.acct-hero-plan {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.acct-hero-meta {
  font-size: 14.5px;
  color: #71717a;
}

.acct-hero-btn,
.acct-hero-btn:hover {
  padding: 11px 22px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  box-shadow: 0 1px 2px rgba(194, 65, 12, 0.3);
  transform: none;
}

.acct-hero-btn:hover {
  border-color: var(--accent-deep);
  background: var(--accent-deep);
}

/* Section headings: plain and dark, not orange capitals. */
.acct-dash .usage-block-head,
.acct-dash .order-block-head,
.acct-dash .plan-block-head,
.acct-dash .device-block-head,
.acct-pane .usage-block-head {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}

.acct-pane .usage-line,
.acct-dash .acct-pane .usage-window {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.04);
}

.acct-dash .usage-window-top {
  font-size: 15px;
  font-weight: 500;
  color: #52525b;
}

.acct-dash .usage-window-top strong {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--ink);
}

.acct-dash .usage-bar {
  height: 8px;
  background: #f4f4f5;
}

.acct-dash .usage-bar i {
  background: var(--accent);
}

.acct-dash .acct-pane .usage-window .usage-reset,
.acct-dash .usage-updated {
  font-size: 13.5px;
  color: #71717a;
}

.acct-dash .usage-line,
.acct-dash .plan-option-name,
.acct-dash .pay-card-line,
.acct-dash .device-name {
  font-size: 15px;
}

.acct-dash .device-lead,
.acct-dash .device-when,
.acct-dash .plan-note,
.acct-dash .pay-empty,
.acct-dash .ref-rules,
.acct-dash .ref-empty {
  font-size: 14.5px;
  color: #71717a;
}

@media (max-width: 760px) {
  .acct-side {
    border-bottom-color: var(--line);
  }

  .acct-dash .acct-tab {
    font-size: 12.5px;
  }

  .acct-hero-body {
    padding: 18px;
  }

  .acct-hero-plan {
    font-size: 26px;
  }

  .acct-dash .acct-head h1 {
    font-size: 26px;
  }

  .acct-dash .usage-window-top strong {
    font-size: 20px;
  }
}

/* Account lists and buttons: rows as white cards with air between them,
   one orange action per row group, everything else a quiet white pill. */
.acct-dash [data-plan-options] {
  display: grid;
  gap: 8px;
}

.acct-dash .acct-pane .plan-option:not(.is-current),
.acct-dash .acct-pane .plan-option.is-current {
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.acct-dash .plan-option-name {
  font-weight: 600;
}

.acct-dash .plan-option-name span {
  margin-left: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: #71717a;
}

.acct-dash .plan-choose,
.acct-dash .ref-share-btn,
.acct-dash .api-copy,
.acct-dash .device-revoke,
.acct-dash .plan-track {
  padding: 8px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  transform: none;
}

.acct-dash .plan-choose:hover,
.acct-dash .ref-share-btn:hover {
  background: #fff7ed;
  border-color: #fed7aa;
  color: var(--accent-deep);
  filter: none;
}

.acct-dash .api-copy:hover,
.acct-dash .plan-track:hover {
  background: #f4f4f5;
}

/* Revoke stays red, as a quiet warning. */
.acct-dash .device-revoke {
  color: #b91c1c;
}

.acct-dash .device-revoke:hover {
  background: #fef2f2;
  border-color: #fecaca;
}

.acct-dash .ref-copy,
.acct-dash .api-new,
.acct-dash .api-new:hover {
  padding: 9px 18px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  transform: none;
  filter: none;
}

.acct-dash .ref-copy:hover,
.acct-dash .api-new:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

.acct-dash .ref-link {
  border-color: var(--line);
  border-radius: 12px;
}

/* The invite numbers: one card, rows split by hairlines. */
.acct-dash #ref-stats:not([hidden]) {
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.acct-dash #ref-stats .usage-line {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.acct-dash #ref-stats .usage-line + .usage-line {
  border-top: 1px solid var(--line);
}

.acct-dash #ref-stats .usage-reset:not(:empty) {
  padding: 10px 16px;
  border-top: 1px solid var(--line);
}

.acct-dash .task,
.acct-dash .task-empty,
.acct-dash .pay-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.acct-dash .task[data-state="ready"] {
  background: #fff7ed;
  border-color: #fed7aa;
}

.acct-dash .device-row {
  border-bottom-color: var(--line);
}

/* The plan you're on: soft orange, like the selected tab. */
.acct-dash .acct-pane .plan-option.is-current {
  background: #fff7ed;
  border-color: #fed7aa;
}

/* "Websites" and "AI usage included" get their drawings back, in the same
   frame as the "Uses your PC" scene: a light box with a hairline border. */
.bento-art.art-site,
.bento-art.art-meter {
  display: block;
  position: relative;
  width: min(100%, 340px);
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fafafa;
  overflow: hidden;
}

/* Websites: a little browser window - three dots, then the page's blocks. */
.bento-art.art-site {
  display: grid;
  height: 96px;
  padding: 24px 10px 10px;
  gap: 6px;
}

.bento-art.art-site::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 9px;
  width: 30px;
  height: 6px;
  background:
    radial-gradient(circle, #e4e4e7 2.6px, transparent 3px) 0 0 / 10px 6px repeat-x;
}

.art-site i {
  border-radius: 6px;
  background: #ececee;
}

.art-site i:first-child {
  background: linear-gradient(120deg, #fed7aa, #fdba74);
}

.feature:hover .art-site i {
  background: #e4e4e7;
}

.feature:hover .art-site i:first-child {
  background: linear-gradient(120deg, #fdba74, #fb923c);
}

/* AI usage: one slim meter on a track, filling as the card comes in. */
.bento-art.art-meter {
  height: 54px;
  padding: 0 16px;
}

.bento-art.art-meter::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 50%;
  height: 8px;
  translate: 0 -50%;
  border-radius: 999px;
  background: #ececee;
}

.art-meter span {
  position: relative;
  height: 8px;
  margin-top: 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, #fb923c, var(--accent));
}

/* The three drawings fill their card's width, so each reads as part of the
   card rather than a small box in its corner. */
.bento-art.art-site,
.bento-art.art-pc,
.bento-art.art-meter {
  width: 100%;
  margin-top: 20px;
}

.bento-art.art-site {
  height: 112px;
}

.bento-art.art-pc {
  height: 60px;
}

/* ── Pricing: one hero, the rest quiet ──
   Only the featured plan keeps the orange button and gets a soft orange wash
   at the top of its card; the others choose with a white outline button that
   warms to orange on hover. */
.plans .card:not(.featured) .buy {
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: none;
  color: var(--ink);
}

.plans .card:not(.featured) .buy:hover {
  background: #fff7ed;
  border-color: #fdba74;
  color: var(--accent-deep);
  box-shadow: none;
}

.plans .card:not(.featured) .buy:active {
  background: #ffedd5;
}

.plans .card.featured {
  background: linear-gradient(180deg, #fff7ed 0%, var(--paper) 42%);
  box-shadow: 0 1px 2px rgba(24, 24, 27, 0.04), 0 24px 50px -30px rgba(234, 88, 12, 0.45);
}

/* ═══════════════════════════════════════════════════════════════════════
   Night mode
   theme.js puts data-theme="dark" on <html> (from the visitor's choice, or
   their system setting until they choose). The tokens flip first, so most of
   the site follows on its own; the rules after them cover the surfaces that
   name a light colour outright.
   ═══════════════════════════════════════════════════════════════════════ */

/* The sun/moon button in the header. */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.theme-toggle:hover {
  background: var(--paper-deep);
  color: var(--ink);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle .theme-icon-sun,
html[data-theme="dark"] .theme-toggle .theme-icon-moon {
  display: none;
}

html[data-theme="dark"] .theme-toggle .theme-icon-sun {
  display: block;
}

/* In the header pill it sits just before the account pair, close to the
   hairline that separates them from the page links. */
.nav.has-menu .theme-toggle {
  margin-right: -14px;
}

@media (max-width: 720px) {
  .nav.has-menu .theme-toggle {
    margin: 0 0 0 auto;
  }

  .nav.has-menu .nav-auth {
    margin-left: 4px;
  }
}

html[data-theme="dark"] {
  color-scheme: dark;

  --ink: #f4f4f5;
  --ink-soft: #a1a1aa;
  --ink-faint: #8b8b94;
  --graphite: #f4f4f5;
  --accent: #f97316;
  --accent-deep: #fb923c;
  --accent-soft: rgba(249, 115, 22, 0.14);
  --azure: #f97316;
  --azure-deep: #fb923c;
  --sanguine: #f97316;
  --leaf: #4ade80;

  --paper: #18181b;
  --paper-deep: #232327;
  --page: #0e0e10;
  --line: #2b2b31;
  --line-strong: #3b3b42;
  --pencil: rgba(255, 255, 255, 0.06);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px -14px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.4), 0 26px 52px -22px rgba(0, 0, 0, 0.7);

  /* Night-only helpers: a raised fill, and the warm tint the light theme
     draws with #fff7ed and #fed7aa. */
  --dk-sub: #232327;
  --dk-sub-2: #2c2c32;
  --dk-warm: rgba(249, 115, 22, 0.12);
  --dk-warm-line: rgba(251, 146, 60, 0.35);
}

html[data-theme="dark"] .sky {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(249, 115, 22, 0.1), transparent 70%),
    var(--page);
}

/* Dark ink was the fill of a few buttons; at night they turn light. */
html[data-theme="dark"] .nav .nav-signup,
html[data-theme="dark"] .nav.has-menu .nav-auth .nav-signup {
  background: #f4f4f5;
  color: #18181b;
}

html[data-theme="dark"] .nav .nav-signup:hover,
html[data-theme="dark"] .nav.has-menu .nav-auth .nav-signup:hover {
  background: #ffffff;
}

html[data-theme="dark"] .art-pc-btn {
  background: #f4f4f5;
  color: #18181b;
}

html[data-theme="dark"] .feature:hover .art-pc-btn {
  background: var(--accent);
  color: #fff;
}

/* The header pill. */
html[data-theme="dark"] .nav,
html[data-theme="dark"] .nav.has-menu,
html[data-theme="dark"] .nav.has-menu.is-scrolled {
  background: rgba(24, 24, 27, 0.8);
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 30px -14px rgba(0, 0, 0, 0.7);
}

html[data-theme="dark"] .brand-name::before {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .nav.nav-simple .nav-back:hover {
  background: var(--dk-sub-2);
}

/* Raised greys: switches, frames, hovers. */
html[data-theme="dark"] .plans .card .plan-switch,
html[data-theme="dark"] .show-foot .show-tabs,
html[data-theme="dark"] .show-os,
html[data-theme="dark"] .acct-dash .usage-bar,
html[data-theme="dark"] .bento-art.art-pc,
html[data-theme="dark"] .bento-art.art-site,
html[data-theme="dark"] .bento-art.art-meter,
html[data-theme="dark"] .authz-box,
html[data-theme="dark"] .plan-table thead th {
  background: var(--dk-sub);
}

html[data-theme="dark"] .acct-pane .plan-option:not(.is-current) {
  background: var(--paper);
}

html[data-theme="dark"] .plans .card .plan-switch-opt.is-on,
html[data-theme="dark"] .show-foot .show-tab.is-on,
html[data-theme="dark"] .show-os-opt.is-on {
  background: var(--dk-sub-2);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .plans .card .plan-switch-opt.is-on {
  color: #fdba74;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--dk-warm-line);
}

html[data-theme="dark"] body .site-foot .foot-links a:hover,
html[data-theme="dark"] .show-bar .cli-install-copy:hover,
html[data-theme="dark"] .authz-btn.deny:hover,
html[data-theme="dark"] .acct-dash .acct-tab:hover,
html[data-theme="dark"] .acct-side-signout:hover,
html[data-theme="dark"] .acct-dash .plan-track:hover,
html[data-theme="dark"] .acct-dash .api-copy:hover {
  background: var(--dk-sub-2);
  border-color: var(--line-strong);
}

html[data-theme="dark"] .show-dots i,
html[data-theme="dark"] .art-site i,
html[data-theme="dark"] .bento-art.art-meter::before {
  background: var(--dk-sub-2);
}

html[data-theme="dark"] .feature:hover .art-site i {
  background: #36363d;
}

html[data-theme="dark"] .bento-art.art-site::before {
  background: radial-gradient(circle, #3b3b42 2.6px, transparent 3px) 0 0 / 10px 6px repeat-x;
}

html[data-theme="dark"] .art-site i:first-child {
  background: linear-gradient(120deg, rgba(251, 146, 60, 0.45), rgba(249, 115, 22, 0.7));
}

html[data-theme="dark"] .feature:hover .art-site i:first-child {
  background: linear-gradient(120deg, rgba(251, 146, 60, 0.65), #f97316);
}

/* Warm tints: the selected, the current, the featured. */
html[data-theme="dark"] .glance-item:hover,
html[data-theme="dark"] .authz-pc-mark,
html[data-theme="dark"] .acct-dash .acct-tab[aria-selected="true"],
html[data-theme="dark"] .acct-dash .ref-share-btn:hover,
html[data-theme="dark"] .acct-dash .plan-choose:hover,
html[data-theme="dark"] .acct-dash .task[data-state="ready"],
html[data-theme="dark"] .acct-dash .acct-pane .plan-option.is-current,
html[data-theme="dark"] .plans .card:not(.featured) .buy:hover,
html[data-theme="dark"] .plans .card:not(.featured) .buy:active {
  background: var(--dk-warm);
  border-color: var(--dk-warm-line);
  color: #fdba74;
}

html[data-theme="dark"] .acct-dash .acct-tab[aria-selected="true"] {
  box-shadow: inset 0 0 0 1px var(--dk-warm-line);
}

html[data-theme="dark"] .glance-item:hover {
  color: inherit;
}

html[data-theme="dark"] .plans .card.featured {
  background: linear-gradient(180deg, rgba(249, 115, 22, 0.14) 0%, var(--paper) 45%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 24px 50px -30px rgba(249, 115, 22, 0.45);
}

/* Notes and badges. */
html[data-theme="dark"] .authz-warn {
  background: rgba(234, 179, 8, 0.08);
  border-color: rgba(234, 179, 8, 0.3);
  color: #fcd34d;
}

html[data-theme="dark"] .authz-warn a {
  color: #fcd34d;
}

html[data-theme="dark"] .trial-tag,
html[data-theme="dark"] .amount-save,
html[data-theme="dark"] body .welcome-tag {
  background: rgba(34, 197, 94, 0.14);
  color: #4ade80;
}

html[data-theme="dark"] .acct-dash .device-revoke {
  color: #f87171;
}

html[data-theme="dark"] .acct-dash .device-revoke:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.35);
}

/* Greys that were tuned for white, lifted so they read on dark. */
html[data-theme="dark"] .show-foot .show-said,
html[data-theme="dark"] .acct-dash .usage-window-top,
html[data-theme="dark"] .acct-dash .acct-tab {
  color: var(--ink-soft);
}

html[data-theme="dark"] .acct-dash .acct-tab:hover {
  color: var(--ink);
}

/* The dark banner already is dark: a hairline keeps its edge on the dark page. */
html[data-theme="dark"] .closer {
  border-color: rgba(255, 255, 255, 0.08);
}

/* The usage chart and the purchase card: their light fills and dark ink. */
html[data-theme="dark"] .uc-tab[aria-selected="true"] {
  background: #f4f4f5;
  color: #18181b;
}

html[data-theme="dark"] .uc-mark {
  background: var(--dk-sub-2);
}

html[data-theme="dark"] .uc-legend .is-you {
  background: rgba(74, 222, 128, 0.12);
}

html[data-theme="dark"] .uc-legend .is-go {
  background: rgba(185, 180, 172, 0.12);
}

html[data-theme="dark"] .uc-legend .is-cc {
  background: rgba(127, 156, 196, 0.14);
}

html[data-theme="dark"] .uc-tag.is-free {
  background: rgba(74, 222, 128, 0.12);
}

html[data-theme="dark"] .uc-tag {
  border-color: var(--line-strong);
}

html[data-theme="dark"] .act-plan {
  color: var(--ink);
}

html[data-theme="dark"] .act-when {
  color: var(--ink-soft);
}

/* sketch.css sets reading text to a fixed near-black. At night the same list
   takes the light ink instead; :where() keeps each selector's own weight, so
   anything that already overrode the old rule still does. */
:where(html[data-theme="dark"]) body,
:where(html[data-theme="dark"]) p,
:where(html[data-theme="dark"]) li,
:where(html[data-theme="dark"]) .note,
:where(html[data-theme="dark"]) .fine,
:where(html[data-theme="dark"]) .models-fine,
:where(html[data-theme="dark"]) .trial-note,
:where(html[data-theme="dark"]) .perks li,
:where(html[data-theme="dark"]) .pay-hint,
:where(html[data-theme="dark"]) .key-note,
:where(html[data-theme="dark"]) .plan-note {
  color: var(--ink);
}

html[data-theme="dark"] .fine {
  color: var(--ink-faint);
}

html[data-theme="dark"] .about-avatar {
  color: #fff;
}

html[data-theme="dark"] .builders-today,
html[data-theme="dark"] .builders-today strong {
  color: #4ade80;
}

/* Plans, in detail (plans.css paints its cards white). */
html[data-theme="dark"] .pl-card,
html[data-theme="dark"] .pl-how li,
html[data-theme="dark"] .pl-free {
  background: var(--paper);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}

html[data-theme="dark"] .pl-card.is-featured {
  border-color: var(--accent);
  box-shadow: 0 10px 28px -14px rgba(249, 115, 22, 0.45);
}

html[data-theme="dark"] .pl-main {
  background: var(--dk-sub);
}

html[data-theme="dark"] .pl-how .pl-num {
  background: #f4f4f5;
  color: #18181b;
}

html[data-theme="dark"] .pl-free dt,
html[data-theme="dark"] .pl-free dd {
  border-bottom-color: var(--line);
}

html[data-theme="dark"] .price-note {
  background: var(--dk-warm);
  border-color: var(--dk-warm-line);
  color: var(--ink);
}

html[data-theme="dark"] .price-note strong {
  color: #fdba74;
}

html[data-theme="dark"] .pl-card.is-featured .pl-choose:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

/* Mac and Linux install pages: their note boxes. */
html[data-theme="dark"] .mac-note,
html[data-theme="dark"] .lx-note {
  background: var(--dk-sub);
  border-color: var(--line);
}

/* The model list dialog: its striped rows. */
html[data-theme="dark"] .model-row:nth-child(odd) {
  background: var(--dk-sub);
}

/* The phone menu: its Log in / Get started pair, and the menu button. */
html[data-theme="dark"] .nav-drawer-account a {
  background: var(--dk-sub);
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .nav-drawer-account a:last-child {
  background: #f4f4f5;
  border-color: #f4f4f5;
  color: #18181b;
}

html[data-theme="dark"] .nav-menu-btn {
  background: transparent;
  color: var(--ink);
}