/* Lightshot site styles, merged by scripts/build.mjs from tokens.css, base.css, components.css, content.css, layout.css. Edit the sources in src/assets/css. */

/* ---- tokens.css ---- */
/* lightshot design tokens.
   Ink #0A0813, porcelain #F4F1E7, brand green #76FF03, accessible moss #4E600F.
   The closing footer uses its own charcoal and green palette in both themes.

   Depth: one soft key light from above. Lime is the one accent colour; it
   fills controls and small marks, and never glows. Surfaces sit on three levels (sunken
   wells, the paper canvas, raised cards) and shadows are tinted with the warm
   ink of the photography rather than neutral black. A raised surface gets a
   1px catch light on its top edge and a faint edge ring instead of a border. */

@font-face {
  font-family: "Outfit";
  src: url("/fonts/outfit-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-outfit: "Outfit";
  --paper: #f4f1e7;
  --ink: #0a0813;
  --muted: #68665f;
  --line: #d8d5cb;
  --surface: #e9e6db;
  --lime: #76ff03;
  --accent-text: #4e600f;
  --inverse: #f4f1e7;
  --error: #a3332f;

  /* Surfaces, lowest to highest. */
  --sunken: #ebe7da;
  --raised: #fbfaf6;
  --raised-strong: #ffffff;
  --edge: rgb(46 38 26 / .07);
  --catch-light: inset 0 1px 0 rgb(255 255 255 / .8);
  --well: inset 0 1px 2px rgb(46 38 26 / .09), inset 0 0 0 1px rgb(46 38 26 / .05);

  /* Elevation. Each level stacks a contact shadow, a mid shadow and a long,
     soft ambient one. */
  --shadow-1: 0 1px 2px rgb(46 38 26 / .05), 0 4px 12px -6px rgb(46 38 26 / .1);
  --shadow-2: 0 1px 2px rgb(46 38 26 / .05), 0 12px 28px -16px rgb(46 38 26 / .2);
  --shadow-3: 0 2px 4px rgb(46 38 26 / .05), 0 24px 56px -30px rgb(46 38 26 / .3);
  --shadow-device: 0 1px 2px rgb(10 8 19 / .14), 0 14px 28px -14px rgb(10 8 19 / .32), 0 36px 64px -32px rgb(10 8 19 / .36);
  /* The green is a colour, never a light source: a lime control gets the same
     contact shadow as any other raised control, not a bloom. */
  --glow-lime: 0 1px 2px rgb(40 90 0 / .2);

  /* Composite elevations: catch light, edge ring and shadow in one value, so
     every raised card uses the same recipe. Re-declared on .tone-stage, whose
     components differ. */
  --raise-1: var(--catch-light), 0 0 0 1px var(--edge), var(--shadow-1);
  --raise-2: var(--catch-light), 0 0 0 1px var(--edge), var(--shadow-2);
  --raise-3: var(--catch-light), 0 0 0 1px var(--edge), var(--shadow-3);

  /* A lit product stage: a soft key light from above, falling off toward
     the floor. --stage-light stands alone on the page; --bay is the recessed
     version used inside a raised card. */
  --stage-light:
    radial-gradient(60% 50% at 50% 28%, color-mix(in srgb, var(--raised-strong) 80%, transparent), transparent 75%),
    linear-gradient(180deg, var(--raised) 0%, var(--sunken) 100%);
  --bay:
    radial-gradient(60% 50% at 50% 30%, color-mix(in srgb, var(--raised-strong) 70%, transparent), transparent 75%),
    var(--sunken);

  /* One dark surface for every ink stage: the workflow chapter, the
     subscription card, the call to action, the mobile menu and the footer. */
  --stage: #15141a;
  --stage-glow: rgb(255 255 255 / .035);

  /* Titanium phone frame, lit from the upper left. */
  --device-frame: linear-gradient(150deg, #5d5c66 0%, #1c1b22 14%, #0a0813 42%, #0a0813 70%, #26252d 88%, #6b6a73 100%);

  /* Radii: tighter on inner elements, softer on containers. A box nested in
     another takes a smaller step, roughly the outer radius minus the padding. */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* Spacing: one 4px-based scale. Components use these steps rather than
     one-off values, so gaps repeat across the site. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  /* Vertical rhythm. --section-gap is the space between two top-level
     sections; each section pads half of it (--section-y) above and below, so
     any two neighbours add up to exactly one gap. A panel with its own
     background (an ink stage, a raised card) takes --section-y as margin.
     --section-gap-sm separates blocks inside a long page. */
  --section-gap: clamp(80px, 10vw, 144px);
  --section-y: calc(var(--section-gap) / 2);
  --section-gap-sm: clamp(56px, 6vw, 88px);
  /* The page gutter, shared by the header and every content column. */
  --gutter: 56px;
  /* Space from the header to the first line of a page (the breadcrumb). */
  --page-top: 32px;
  /* Card grids and the inside of a card. */
  --grid-gap: 20px;
  --card-pad: clamp(24px, 2.4vw, 32px);

  /* Type: the smallest text on the site is 12px; labels are 14px. */
  --text-caption: 12px;
  --text-small: 14px;
  --text-body: 16px;
  --text-lead: clamp(18px, 1.4vw, 20px);

  /* Paper tooth on the canvas only; raised surfaces stay smooth. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  /* Motion: one ease-out for entrances and hovers, one slight overshoot for
     press releases and toggles, and three durations. */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: .18s;
  --dur-base: .3s;
  --dur-slow: .5s;
  /* Disclosures (lib/motion.js): opening decelerates softly from a gentle
     first frame; closing eases in and out so it never lurches. */
  --ease-expand: cubic-bezier(.32, .72, 0, 1);
  --ease-collapse: cubic-bezier(.4, 0, .2, 1);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --paper: #111117;
  --ink: #f4f1e7;
  --muted: #aaa8a1;
  --line: #36353a;
  --surface: #1d1d23;
  --accent-text: #76ff03;
  --inverse: #0a0813;
  --error: #ffaaa2;
  --sunken: #0b0b10;
  --raised: #1a1920;
  --raised-strong: #232229;
  --edge: rgb(255 255 255 / .06);
  --catch-light: inset 0 1px 0 rgb(255 255 255 / .06);
  --well: inset 0 1px 3px rgb(0 0 0 / .5), inset 0 0 0 1px rgb(255 255 255 / .04);
  --shadow-1: 0 1px 2px rgb(0 0 0 / .3), 0 6px 16px -8px rgb(0 0 0 / .5);
  --shadow-2: 0 1px 2px rgb(0 0 0 / .3), 0 10px 24px -10px rgb(0 0 0 / .55), 0 30px 60px -28px rgb(0 0 0 / .6);
  --shadow-3: 0 2px 4px rgb(0 0 0 / .35), 0 22px 44px -16px rgb(0 0 0 / .6), 0 64px 110px -40px rgb(0 0 0 / .7);
  --shadow-device: 0 1px 2px rgb(0 0 0 / .4), 0 18px 34px -12px rgb(0 0 0 / .6), 0 50px 90px -30px rgb(0 0 0 / .7);
  --stage: #1a1920;
  --stage-glow: rgb(255 255 255 / .03);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111117;
    --ink: #f4f1e7;
    --muted: #aaa8a1;
    --line: #36353a;
    --surface: #1d1d23;
    --accent-text: #76ff03;
    --inverse: #0a0813;
    --error: #ffaaa2;
    --sunken: #0b0b10;
    --raised: #1a1920;
    --raised-strong: #232229;
    --edge: rgb(255 255 255 / .06);
    --catch-light: inset 0 1px 0 rgb(255 255 255 / .06);
    --well: inset 0 1px 3px rgb(0 0 0 / .5), inset 0 0 0 1px rgb(255 255 255 / .04);
    --shadow-1: 0 1px 2px rgb(0 0 0 / .3), 0 6px 16px -8px rgb(0 0 0 / .5);
    --shadow-2: 0 1px 2px rgb(0 0 0 / .3), 0 10px 24px -10px rgb(0 0 0 / .55), 0 30px 60px -28px rgb(0 0 0 / .6);
    --shadow-3: 0 2px 4px rgb(0 0 0 / .35), 0 22px 44px -16px rgb(0 0 0 / .6), 0 64px 110px -40px rgb(0 0 0 / .7);
    --shadow-device: 0 1px 2px rgb(0 0 0 / .4), 0 18px 34px -12px rgb(0 0 0 / .6), 0 50px 90px -30px rgb(0 0 0 / .7);
    --stage: #1a1920;
    --stage-glow: rgb(255 255 255 / .03);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}

/* A dark stage in either theme. Descendants read the dark tokens, so any
   component placed on it (links, checks, segmented controls) adapts without
   its own overrides. */
.tone-stage {
  --paper: var(--stage);
  --ink: #f4f1e7;
  --muted: #aeacb3;
  --line: rgb(255 255 255 / .1);
  --surface: #1f1e26;
  --sunken: rgb(0 0 0 / .28);
  --raised: #24222c;
  --raised-strong: #2c2a34;
  --accent-text: #76ff03;
  --inverse: #0a0813;
  --edge: rgb(255 255 255 / .07);
  --catch-light: inset 0 1px 0 rgb(255 255 255 / .09);
  --well: inset 0 1px 3px rgb(0 0 0 / .55), inset 0 0 0 1px rgb(255 255 255 / .06);
  --shadow-1: 0 1px 2px rgb(0 0 0 / .4), 0 8px 18px -8px rgb(0 0 0 / .6);
  --raise-1: var(--catch-light), 0 0 0 1px var(--edge), var(--shadow-1);
  --raise-2: var(--catch-light), 0 0 0 1px var(--edge), var(--shadow-1), 0 18px 40px -24px rgb(0 0 0 / .5);
  color: var(--ink);
  color-scheme: dark;
}

/* The gutter and rhythm narrow with the viewport. */
@media (max-width: 1180px) {
  :root { --gutter: 32px; }
}
@media (max-width: 700px) {
  :root { --gutter: 20px; --page-top: 16px; --grid-gap: 12px; --card-pad: 22px; }
}
@media (max-width: 380px) {
  :root { --gutter: 16px; }
}

/* ---- base.css ---- */
/* Reset, document defaults and the shared typographic scale. */

* { box-sizing: border-box; }

/* The hidden attribute must win over component display rules such as the
   mobile navigation's display:flex. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 100px; }

body {
  margin: 0;
  /* Paper tooth on the canvas; raised surfaces paint over it and stay smooth. */
  background: var(--grain), var(--paper);
  color: var(--ink);
  font-family: var(--font-outfit), Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.5;
}

::selection { background: var(--lime); color: #0a0813; }

/* The previous build reset these through Tailwind's preflight. Without it a
   control keeps the browser's own margins and padding, which shifts the consent
   checkbox and changes the footer form's height. */
button, input, textarea { font: inherit; margin: 0; padding: 0; }
svg { display: block; vertical-align: middle; }
button, a, input, summary, textarea { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; color: inherit; background: none; }
button:disabled { cursor: wait; }
button, fieldset { border: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 450; }
h2 { font-size: clamp(40px, 4.8vw, 72px); line-height: 1.05; letter-spacing: -.05em; text-wrap: balance; }

:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 6px; }
.site-footer :focus-visible { outline-color: var(--lime); }

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

.skip-link {
  position: fixed;
  top: 10px;
  left: 16px;
  z-index: 100;
  background: var(--lime);
  color: #0a0813;
  padding: 12px 20px;
  transform: translateY(-160%);
  border-radius: var(--radius-xs);
}
.skip-link:focus { transform: translateY(0); }

.soft-text { color: var(--muted); }
.mobile-only { display: none; }
/* One label style above every heading on the site: sentence case, the moss
   accent on paper and lime on the ink stage, never tracked capitals. */
.eyebrow, .section-index, .footer-kicker {
  display: block;
  color: var(--accent-text);
  font-size: var(--text-small);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}

.spin { animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Viewport reveals. The element is visible by default, so content is never lost
   if IntersectionObserver or the module script is unavailable; the class only
   replays the original entrance keyframes. */
/* Opacity and transform only, so the compositor runs it: a filter such as
   blur can't be composited and would put every reveal on the main thread. */
[data-reveal].is-visible { animation: reveal .9s var(--ease-out) var(--reveal-delay, 0s) both; }
@keyframes reveal {
  from { opacity: .65; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

.is-swapping { animation: figure-swap .35s var(--ease-out) both; }
@keyframes figure-swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 700px) {
  /* The sticky header is 60px plus its 10px offset. */
  html { scroll-padding-top: 86px; }
  h2 { font-size: 40px; letter-spacing: -.045em; }
  .eyebrow, .section-index, .footer-kicker { font-size: 13px; }
  .mobile-only { display: block; }
}

@media (max-width: 380px) {
  h2 { font-size: 36px; }
}

/* Last in this file so the reduced-motion scroll behaviour wins. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---- components.css ---- */
/* Reusable pieces: buttons, links, icon buttons, disclosures, forms and the
   shared paid-offer block.

   Loaded before layout.css on purpose. Header and footer placement rules such
   as .header-cta and .footer-download have the same specificity as .button, so
   the generic component has to come first for those overrides to win. */

/* ---------------------------------------------------------------- buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 99px;
  color: #0a0813;
  /* The exact brand green, flat. A hairline shade on the lower lip and a
     small contact shadow give it weight; it never glows. */
  background: var(--lime);
  box-shadow: inset 0 -1px 0 rgb(10 8 19 / .12), var(--glow-lime);
  font-size: 15px;
  font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform var(--dur-base) var(--ease-spring), background-color var(--dur-fast), box-shadow var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .button:hover {
    transform: translateY(-1px);
    background-color: #6cf000;
    box-shadow: inset 0 -1px 0 rgb(10 8 19 / .12), 0 1px 2px rgb(40 90 0 / .2), 0 8px 16px -10px rgb(40 90 0 / .45);
  }
}
.button:active { transform: scale(.97); transition-duration: .1s; box-shadow: inset 0 1px 2px rgb(10 8 19 / .16); }
.button > svg:last-child { transition: transform .25s; }
@media (hover: hover) {
  .button:hover > svg:last-child { transform: translate(2px, -2px); }
}
/* Download buttons lead with the Apple mark: lightshot is sold only on the App Store.
   The mark and label share a span, so the button's gap still spaces the arrow. */
.app-label { display: inline-flex; align-items: center; gap: .5em; }
.app-label svg { flex: none; }
.button-small { min-height: 40px; padding: 0 16px; font-size: 14px; gap: 10px; }
.button-outline { background: var(--raised); border-color: transparent; color: var(--ink); box-shadow: var(--raise-1); }
@media (hover: hover) {
  .button-outline:hover { background-color: var(--raised-strong); box-shadow: var(--raise-2); }
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-small);
  border-bottom: 1px solid var(--line);
  padding-block: 7px;
  position: relative;
  transition: opacity var(--dur-fast);
}
/* A 46px tall touch target without moving the underline. */
.text-link::before { content: ""; position: absolute; inset: -6px 0; }
/* The arrow slides on hover (a transform, so nothing reflows). */
.text-link > svg { transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) {
  .text-link:hover > svg { transform: translateX(5px); }
}

.icon-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--raised);
  box-shadow: var(--raise-1);
  transition: background var(--dur-fast), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring);
}
@media (hover: hover) {
  .icon-button:hover { background: var(--raised-strong); box-shadow: var(--raise-2); }
}

/* The toggle shows the glyph for the theme it switches to. */
.sun-icon { display: none; }
:root[data-theme="dark"] .sun-icon { display: block; }
:root[data-theme="dark"] .moon-icon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sun-icon { display: block; }
  :root:not([data-theme="light"]) .moon-icon { display: none; }
}

/* ---------------------------------------------------------------- disclosures */

.faq-section { padding-block: var(--section-y); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; }
/* The heading stays beside the answers while the list scrolls past it,
   below the floating header. */
.faq-section > div:first-child { position: sticky; top: 110px; }
.faq-section .section-index { margin-bottom: var(--space-4); }
.faq-section h2 { font-size: clamp(40px, 4.2vw, 60px); }
.faq-section .text-link { margin-top: var(--space-6); }
.faq-list { padding: var(--space-2) var(--space-6); border-radius: var(--radius-lg); background: var(--raised); box-shadow: var(--raise-1); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 0; }
.faq-list summary { display: flex; align-items: center; gap: var(--space-4); padding: 22px 0; cursor: pointer; font-size: 17px; line-height: 1.4; list-style: none; transition: color var(--dur-fast); }
.faq-list summary::-webkit-details-marker { display: none; }
/* A fixed column, so every answer starts on the question's left edge. */
.faq-number { flex: 0 0 20px; color: var(--muted); font-size: var(--text-caption); font-variant-numeric: tabular-nums; }
.faq-plus {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--sunken);
  box-shadow: var(--well);
  font-size: 20px;
  line-height: 1;
  font-weight: 300;
  transition: transform var(--dur-base) var(--ease-spring), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), color var(--dur-base);
}
details[open]:not(.is-closing) .faq-plus { transform: rotate(45deg); background: var(--lime); color: #0a0813; box-shadow: var(--glow-lime); }
@media (hover: hover) {
  .faq-list summary:hover .faq-plus { background: var(--raised-strong); box-shadow: var(--raise-1); }
  .faq-list details[open]:not(.is-closing) summary:hover .faq-plus { background: var(--lime); }
}
/* components/disclosure.js animates the answer (see lib/motion.js). Its
   spacing is padding, never margin, so the height it measures is the height
   the answer ends at. */
.faq-list details p { color: var(--muted); font-size: 15px; line-height: 1.75; margin: 0; padding: 0 48px 24px 36px; max-width: 64ch; }
.disclosure-body { display: flow-root; }
.faq-list summary:active .faq-plus { transform: scale(.85); }
details[open]:not(.is-closing) .faq-plus:active, .faq-list details[open]:not(.is-closing) summary:active .faq-plus { transform: rotate(45deg) scale(.85); }

/* ---------------------------------------------------------------- press feedback */

/* Every tappable control answers a press, including on touch where there is no
   hover. The release springs back through --ease-spring. */
.button-outline:active, .icon-button:active, .email-field button:active,
.billing-switch button:active, .style-choices button:active, .line-choices button:active { transform: scale(.95); transition-duration: .1s; }
.text-link:active { opacity: .6; }

/* ---------------------------------------------------------------- forms */

.trap-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { color: #ffb4ac; font-size: 12px; margin-top: 12px; }

/* Shown until a form's module takes over, so a visitor without working
   JavaScript is told plainly rather than left with a dead control. */
.form-fallback { font-size: var(--text-caption); line-height: 1.6; color: #a8a5ad; margin-top: 12px; }

/* The pending and idle contents are swapped inside the button, so they must not
   create a box of their own or the button's own gap would collapse. */
[data-submit-idle], [data-submit-pending] { display: contents; }

.email-field { display: flex; border-bottom: 1px solid #aaa6b1; }
.email-field input {
  min-width: 0;
  flex: 1;
  background: transparent;
  border: 0;
  color: #f4f1e7;
  border-radius: 0;
  padding: 12px 0 16px;
  font-size: 18px;
}
.email-field input::placeholder { color: #bdb9c2; opacity: 1; }
/* Round and small controls get a tactile press. */
.email-field button { transition: background var(--dur-fast), transform var(--dur-base) var(--ease-spring); display: grid; place-items: center; width: 50px; height: 50px; color: var(--lime); border-radius: 50%; }
@media (hover: hover) {
  .email-field button:hover { background: #24222c; }
}

.consent { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; color: #a8a5ad; line-height: 1.6; margin-top: 15px; }
.consent input { width: 15px; height: 15px; margin-top: 1px; accent-color: var(--lime); flex-shrink: 0; }
.consent a { text-decoration: underline; text-underline-offset: 3px; color: #e5e1e9; }

.signup-success { animation: reveal .6s var(--ease-out) both; display: flex; gap: 15px; align-items: center; padding: 20px 0; border-top: 1px solid #524f5b; }
.signup-success svg { color: var(--lime); }
.signup-success strong { font-size: 22px; font-weight: 400; }
.signup-success p { color: #aaa6b1; font-size: 13px; margin-top: 5px; }

/* ---------------------------------------------------------------- paid offer */

.pricing-section { padding-block: var(--section-y); }
.pricing-intro h1 { font-size: clamp(50px, 6.4vw, 94px); letter-spacing: -.06em; line-height: 1.03; margin-top: var(--space-4); }
.pricing-intro > p { color: var(--muted); font-size: 17px; line-height: 1.65; max-width: 460px; margin-top: var(--space-5); }

.plan-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 96px); margin-top: var(--space-7); align-items: center; }
.plan-inclusions :is(h2, h3) { font-size: 36px; line-height: 1.16; letter-spacing: -.04em; }
.plan-inclusions > p { color: var(--muted); font-size: var(--text-small); margin-top: var(--space-3); }
.plan-inclusions ul { list-style: none; padding: 0; margin: var(--space-6) 0; }
.plan-inclusions li { display: flex; align-items: center; gap: var(--space-3); margin-block: var(--space-3); font-size: 15px; line-height: 1.5; }
/* Each check sits in a small tinted disc. */
.plan-inclusions li svg {
  box-sizing: content-box;
  flex-shrink: 0;
  padding: 5px;
  border-radius: 50%;
  color: var(--accent-text);
  background: color-mix(in srgb, var(--lime) 18%, var(--raised));
}

.plan { border-radius: var(--radius-lg); padding: var(--space-6); }
/* The subscription card is an ink stage in both themes. The green is the
   action it leads to, not the card. */
.plan-pro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: clamp(28px, 3vw, 40px);
  background: linear-gradient(180deg, var(--stage-glow), transparent 40%), var(--stage);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 0 0 1px rgb(10 8 19 / .4), var(--shadow-2);
}
.plan-heading { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-5); }
.plan-heading :is(h2, h3) { font-size: 28px; letter-spacing: -.03em; }
.plan-heading > span { color: var(--muted); font-size: 13px; }

.billing-switch { display: flex; padding: var(--space-1); border: 0; border-radius: 99px; width: 100%; margin-top: var(--space-5); gap: var(--space-1); background: var(--sunken); box-shadow: var(--well); }
.billing-switch button {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border-radius: 99px;
  gap: 2px;
  padding: 10px 13px;
  font-size: 13px;
  color: var(--muted);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring);
}
@media (hover: hover) {
  .billing-switch button:hover { color: var(--ink); }
}
.billing-switch button[aria-pressed="true"] {
  color: #0a0813;
  background: var(--lime);
  box-shadow: inset 0 -1px 0 rgb(10 8 19 / .12), var(--glow-lime);
}
.billing-switch button > span { font-size: var(--text-caption); line-height: 1.2; opacity: .8; }

.plan-options { margin-top: var(--space-3); font-size: var(--text-caption); line-height: 1.6; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }

.plan-price { display: flex; gap: var(--space-3); align-items: baseline; margin-top: var(--space-6); }
.plan-price strong { font-size: clamp(56px, 5.6vw, 83px); line-height: 1.12; font-weight: 450; letter-spacing: -.065em; font-variant-numeric: tabular-nums; }
.plan-price > span { font-size: 16px; color: var(--muted); }
.plan-billing-note { font-size: var(--text-small); margin-top: var(--space-2); }
.plan-saving { font-size: 13px; color: var(--accent-text); margin-top: var(--space-2); min-height: 20px; }
.plan-pro > .button { width: 100%; margin-top: var(--space-6); }
.plan-pro :focus-visible { outline-color: var(--lime); }
.plan-bottom { font-size: 13px; line-height: 1.65; margin-top: var(--space-4); color: var(--muted); }

/* Two columns on the same tracks as the plan grid above, so the fine print
   lines up with the feature list and the card. */
.pricing-fine-print {
  margin-top: var(--space-7);
  padding-top: 0;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(48px, 6vw, 96px);
  color: var(--muted);
  font-size: var(--text-caption);
  line-height: 1.7;
}
.pricing-fine-print a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.pricing-details { margin-top: var(--space-5); }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
  .plan-grid, .pricing-fine-print { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); }
  .plan-inclusions :is(h2, h3) { font-size: 30px; }
  .plan-inclusions li { font-size: var(--text-small); }
  .plan-heading :is(h2, h3) { font-size: 24px; }
  .billing-switch button { gap: 2px; padding-inline: 8px; }
}

@media (max-width: 900px) {
  .faq-section { gap: var(--space-6); }
  .faq-list summary { font-size: 15px; }
  /* Two columns would squeeze the card below the width its billing switch
     needs, so the offer stacks: the card first, the feature list under it. */
  .plan-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .plan-pro { width: 100%; max-width: 560px; }
  .plan-inclusions { grid-row: 2; }
  .pricing-fine-print { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
}

@media (max-width: 700px) {
  .faq-section { display: block; }
  .faq-section > div:first-child { position: static; }
  .faq-list { padding: var(--space-1) var(--space-5); }
  .faq-plus { width: 30px; height: 30px; font-size: 20px; }
  .plan-pro { padding: var(--space-6) var(--space-5); border-radius: var(--radius-lg); }
  .faq-section h2 { font-size: 40px; }
  .faq-section .text-link { margin-top: var(--space-5); }
  .faq-list { margin-top: var(--space-6); }
  .faq-list summary { font-size: 15px; gap: var(--space-3); padding-block: 20px; }
  .faq-list details p { font-size: var(--text-small); padding-inline: 32px 0; }

  .pricing-intro h1 { font-size: clamp(43px, 10.5vw, 64px); }
  .pricing-intro > p { font-size: 16px; margin-top: var(--space-4); }
  .plan-grid { grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-6); }
  .plan-inclusions { grid-row: 2; }
  .plan-inclusions :is(h2, h3) { font-size: 30px; }
  .plan-inclusions li { font-size: var(--text-small); margin-block: var(--space-4); }
  .plan { padding: var(--space-5); }
  .plan-heading :is(h2, h3) { font-size: 26px; }
  .billing-switch button { font-size: 13px; min-height: 52px; }
  .plan-price { margin-top: var(--space-5); }
  .plan-price strong { font-size: 68px; }
  .plan-billing-note { font-size: 13px; }
  .plan-saving { font-size: var(--text-caption); }
  .plan-pro > .button { margin-top: var(--space-5); }
  .pricing-fine-print { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* ---- content.css ---- */
/* Shared content blocks the build generates or any page can include:
   breadcrumb, the updated/byline line, link cards (hub listings and related
   pages) and the long-form call to action. Merged into the site stylesheet
   after components.css and before layout.css. Colours come from tokens.css,
   so light and dark themes follow automatically. */

/* ---------------------------------------------------------------- breadcrumb */

.breadcrumb { margin-bottom: var(--space-7); font-size: 13px; line-height: 1.5; color: var(--muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding: 0; list-style: none; }
.breadcrumb li { display: inline-flex; align-items: center; min-width: 0; }
/* A drawn chevron, so screen readers don't announce a separator character. */
.breadcrumb li + li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-inline: 10px 12px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: .55;
  flex-shrink: 0;
}
.breadcrumb a { padding-block: 12px; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: color .2s, text-decoration-color .2s; }
@media (hover: hover) {
  .breadcrumb a:hover { color: var(--ink); text-decoration-color: currentColor; }
}
.breadcrumb [aria-current="page"] { color: var(--ink); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- page label */

/* Every page opens with the same label as the homepage: the first line of
   each page family's header, in the shared kicker style (base.css), with one
   fixed step to the headline below it. */
:is(
  .reading-page .article-header > .reading-category,
  .hub-header > .hub-kicker,
  .showcase-header > .showcase-kicker,
  .feature-header > .product-kicker,
  .about-header > .about-kicker,
  .pricing-hero .section-index,
  .support-intro > .section-index,
  .privacy-intro > .section-index,
  .account-intro > .section-index,
  .auth-card > .section-index,
  .download-page .section-index,
  .not-found-intro > .section-index,
  .notice-card > .section-index
) {
  display: block;
  margin-bottom: var(--space-4);
  color: var(--accent-text);
  font-size: var(--text-small);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}

/* ---------------------------------------------------------------- updated line */

.article-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); color: var(--muted); font-size: 13px; line-height: 1.5; }
.article-byline { color: var(--ink); }
.article-byline + span::before { content: "·"; margin-right: var(--space-3); color: var(--muted); }

/* ---------------------------------------------------------------- lifting cards */

/* Cards that rise on hover. The deeper shadow is drawn once on a
   pseudo-element and faded in, so a hover animates only transform and
   opacity, which the compositor runs, instead of repainting a large blurred
   shadow on every frame. */
:is(.link-card, .explore-paths > a, .home-story .native-features article, .hub-pathway-list > li, .hub-help-shortcuts a, .about-use-links > a, .about-preview) { position: relative; isolation: isolate; }
:is(.link-card, .explore-paths > a, .home-story .native-features article, .hub-pathway-list > li, .hub-help-shortcuts a, .about-use-links > a, .about-preview)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: var(--shadow-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  :is(.link-card, .explore-paths > a, .home-story .native-features article, .hub-pathway-list > li, .hub-help-shortcuts a, .about-use-links > a, .about-preview):hover::after { opacity: 1; }
}

/* ---------------------------------------------------------------- link cards */

/* One card per page: the title's link covers the whole card, so the link's
   accessible name is the title alone and the description stays plain text. */
.link-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--grid-gap); margin: 0; padding: 0; list-style: none; }
.link-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 100%;
  padding: var(--card-pad) 56px var(--card-pad) var(--card-pad);
  border-radius: var(--radius-lg);
  background: var(--raised);
  box-shadow: var(--raise-1);
  transition: transform var(--dur-slow) var(--ease-spring);
}
@media (hover: hover) {
  .link-card:hover { transform: translateY(-3px); }
}
.link-card-title { margin: 0; font-size: 20px; font-weight: 450; line-height: 1.25; letter-spacing: -.02em; }
.link-card-title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
/* The focus ring goes round the whole card, on the overlay the link draws. */
.link-card-title a:focus-visible { outline: none; }
.link-card-title a:focus-visible::after { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.link-card-description { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.link-card-arrow { position: absolute; top: var(--card-pad); right: var(--card-pad); color: var(--accent-text); transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) {
  .link-card:hover .link-card-arrow { transform: translate(2px, -2px); }
}
.link-card:active { transform: scale(.985); transition-duration: .1s; }

/* ---------------------------------------------------------------- related pages */

.related-links { padding-block: var(--section-gap-sm) 0; }
.related-links > h2 { font-size: clamp(30px, 3vw, 40px); line-height: 1.12; letter-spacing: -.035em; margin-bottom: var(--space-6); }
.related-links .link-card { padding: var(--card-pad) 60px var(--card-pad) var(--card-pad); gap: var(--space-3); }
.related-links .link-card-title { font-size: 22px; line-height: 1.2; letter-spacing: -.025em; }
.related-links .link-card-description { max-width: 38ch; }
.related-links .link-card-arrow { top: var(--card-pad); right: var(--card-pad); }
@media (hover: hover) {
  .related-links .link-card:hover .link-card-title { color: var(--accent-text); }
}

/* ---------------------------------------------------------------- call to action */

/* The closing offer sits on the ink stage (the partial adds .tone-stage). The
   actions share the copy's baseline grid: they sit at the foot of the
   column, level with the last line of text. */
.article-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-6) var(--space-8);
  align-items: end;
  margin-block: var(--section-gap-sm) 0;
  padding: clamp(40px, 5vw, 64px);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--stage-glow), transparent 50%), var(--stage);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 0 0 1px rgb(10 8 19 / .4), var(--shadow-2);
}
.article-cta .section-index { margin-bottom: var(--space-4); }
.article-cta h2 { max-width: 19ch; font-size: clamp(34px, 3.7vw, 52px); line-height: 1.06; letter-spacing: -.045em; text-wrap: balance; }
.article-cta-copy > p:last-child { margin-top: var(--space-4); color: var(--muted); font-size: 16px; line-height: 1.7; max-width: 60ch; }
.article-cta-actions { display: flex; flex-direction: column; align-items: flex-start; justify-self: end; gap: var(--space-4); }

@media (max-width: 900px) {
  .article-cta { grid-template-columns: 1fr; align-items: start; padding: var(--space-7) var(--space-6); }
  .article-cta-actions { justify-self: start; }
}

@media (max-width: 700px) {
  .breadcrumb { margin-bottom: var(--space-6); }
  .link-card { padding-right: 52px; border-radius: var(--radius-md); }
  .link-card-title { font-size: 19px; }
  .related-links .link-card { padding-right: 52px; }
  .related-links .link-card-title { font-size: 20px; }
  .article-cta { padding: var(--space-7) var(--space-5) var(--space-5); gap: var(--space-6); border-radius: var(--radius-lg); }
  .article-cta-actions { align-items: stretch; width: 100%; }
  .article-cta-actions .text-link { align-self: center; }
  .article-cta .button { width: 100%; white-space: normal; justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .link-card:hover, .link-card:hover .link-card-arrow { transform: none; }
}

/* ---- layout.css ---- */
/* Page frame: the shared content column, the site header and the site footer. */

.section-wrap { width: min(1440px, calc(100% - 2 * var(--gutter))); margin-inline: auto; }

/* ---------------------------------------------------------------- header */

/* A floating bar that stays with the reader. It is opaque on purpose: a
   backdrop-filter on a sticky bar is recomputed on every scroll frame, which
   costs smoothness on phones. The mobile menu is positioned against it. */
.site-header {
  --header-gap: 14px;
  width: min(1440px, calc(100% - 2 * var(--gutter)));
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin: var(--header-gap) auto 0;
  /* The inner padding matches the 12px inset of the action, so the wordmark
     and the button sit the same distance from the bar's ends. */
  padding: 0 12px 0 16px;
  border-radius: var(--radius-md);
  background: var(--raised);
  box-shadow: var(--raise-2);
  position: sticky;
  top: var(--header-gap);
  z-index: 30;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 29px;
  font-weight: 550;
  letter-spacing: -1.6px;
  line-height: 1;
  flex-shrink: 0;
  white-space: nowrap;
}
.brand img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 3px 4px rgb(46 38 26 / .22)); }
.brand-period { color: var(--accent-text); }

.desktop-nav { display: flex; align-items: center; gap: var(--space-1); margin-left: var(--space-7); font-size: var(--text-small); }
.desktop-nav a {
  position: relative;
  padding: 10px 14px;
  border-radius: 99px;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  transition: background var(--dur-fast), color var(--dur-fast);
}
@media (hover: hover) {
  .desktop-nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
}
.desktop-nav a:active { opacity: .7; }

.header-actions { display: flex; align-items: center; gap: var(--space-2); }
.header-signin { font-size: 13px; white-space: nowrap; padding-block: 12px; }
@media (hover: hover) {
  .header-signin:hover { text-decoration: underline; text-underline-offset: 5px; }
}

.menu-toggle {
  display: none;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: var(--raised);
  box-shadow: var(--raise-1);
  color: var(--ink);
  transition: background .25s, border-color .25s, color .25s, transform var(--dur-base) var(--ease-spring);
}
@media (hover: hover) {
  .menu-toggle:hover { transform: translateY(-1px); }
}
.menu-toggle:active { transform: scale(.93); transition-duration: .1s; }
.menu-toggle[aria-expanded="true"] { background: var(--lime); border-color: var(--lime); color: #0a0813; }
.menu-toggle-lines { position: relative; display: block; width: 20px; height: 20px; }
.menu-toggle-lines span {
  position: absolute;
  left: 1px;
  top: 9px;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: translateY(-3px);
  transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}
/* The lines move with transform only, so the morph to a cross never reflows. */
.menu-toggle-lines span:last-child { transform: translateY(4px); }
.menu-toggle[aria-expanded="true"] .menu-toggle-lines span:first-child { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-lines span:last-child { transform: rotate(-45deg); }

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

/* The closing sheet: charcoal in both themes, rounded where it meets the page
   so it reads as a layer drawn over it. A faint green light falls from the
   upper right and the photo-filled wordmark rests on the bottom edge. The
   heading and form keep the same order for keyboard and screen reader users;
   only the decorative wordmark is moved below the legal row visually. */
.site-footer {
  --footer-accent: var(--lime);
  --footer-text: #f4f4f2;
  --footer-muted: #b5b5b1;
  --footer-glass: rgb(255 255 255 / .045);
  --footer-edge: rgb(255 255 255 / .085);
  --footer-pad: var(--gutter);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas:
    "top top"
    "title title"
    "signup nav"
    "signup social"
    "bottom bottom"
    "art art";
  column-gap: clamp(32px, 6vw, 96px);
  padding: clamp(40px, 4.4vw, 64px) var(--footer-pad) 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  /* The same ink as every stage on the page, so the site has one dark. */
  background: linear-gradient(180deg, var(--stage-glow), transparent 30%), var(--stage);
  color: var(--footer-text);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .07), 0 -24px 60px -48px rgb(46 38 26 / .4);
  scroll-margin-top: 20px;
}
.site-footer :focus-visible { outline-color: var(--footer-accent); }

.footer-top { grid-area: top; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.footer-kicker { color: var(--footer-accent); }

.back-top {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: var(--footer-accent);
  background: var(--footer-glass);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 0 0 1px var(--footer-edge);
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-base) var(--ease-spring);
}
.back-top svg { width: 20px; height: 20px; transform: rotate(-45deg); }
@media (hover: hover) {
  .back-top:hover { background: var(--footer-accent); color: #131313; transform: translateY(-2px); }
}
.back-top:active { transform: scale(.94); transition-duration: .1s; }

.site-footer h2 {
  grid-area: title;
  margin: var(--space-5) 0 0;
  font-size: clamp(52px, 8.4vw, 136px);
  letter-spacing: -.065em;
  line-height: .98;
  font-weight: 400;
  white-space: nowrap;
}
.site-footer .lime-dot { color: var(--footer-accent); }

/* Signup and navigation take their own grid areas. */
.footer-middle { display: contents; }

.footer-signup {
  grid-area: signup;
  align-self: start;
  min-width: 0;
  margin-top: var(--space-7);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: rgb(255 255 255 / .04);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .07), 0 0 0 1px var(--footer-edge);
}
.footer-download {
  width: 100%;
  min-height: 60px;
  justify-content: space-between;
  padding: 8px 8px 8px 24px;
  font-size: 16px;
}
.footer-download > svg:last-child {
  box-sizing: content-box;
  padding: 11px;
  border-radius: 50%;
  background: #0a0813;
  color: var(--footer-accent);
}
.footer-signup > p { color: var(--footer-muted); font-size: var(--text-small); line-height: 1.55; margin: var(--space-5) 0 var(--space-3); }

.site-footer .email-field {
  align-items: center;
  border: 0;
  padding: 5px 5px 5px 22px;
  border-radius: 99px;
  background: rgb(0 0 0 / .3);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / .55), inset 0 0 0 1px rgb(255 255 255 / .08);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
/* The field's ring replaces the input's own outline, which would otherwise
   sit outside the rounded field. */
.site-footer .email-field:focus-within { box-shadow: inset 0 1px 3px rgb(0 0 0 / .55), inset 0 0 0 1px rgb(118 255 3 / .6), 0 0 0 4px rgb(118 255 3 / .14); }
.site-footer .email-field input { min-height: 46px; color: var(--footer-text); font-size: 15px; padding-block: 12px; }
.site-footer .email-field input:focus-visible { outline: none; }
.site-footer .email-field input::placeholder { color: var(--footer-muted); }
.site-footer .email-field button {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #0a0813;
  background: var(--lime);
  box-shadow: inset 0 -1px 0 rgb(10 8 19 / .12);
}
.site-footer .email-field button:disabled { opacity: .4; box-shadow: none; }
@media (hover: hover) {
  .site-footer .email-field button:not(:disabled):hover { background: #6cf000; }
}
.site-footer .consent { margin-top: 14px; color: var(--footer-muted); font-size: 12px; }
.site-footer .consent input { accent-color: var(--footer-accent); }
.site-footer .consent a { color: var(--footer-text); }
.site-footer .form-fallback, .site-footer .form-error { padding: 5px 0; }
.site-footer .form-fallback { color: var(--footer-muted); font-size: 12px; }
.site-footer .signup-success { border-top-color: var(--footer-edge); }

.footer-nav {
  grid-area: nav;
  align-self: start;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-7);
}
.footer-nav > div { display: flex; flex-direction: column; align-items: flex-start; }
.footer-nav > div > span:first-child { color: var(--footer-muted); font-size: var(--text-small); margin-bottom: var(--space-3); }
.footer-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  color: #e7e7e4;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.35;
  transition: color var(--dur-fast);
}
.footer-nav svg { width: 12px; height: 12px; color: var(--footer-accent); opacity: .55; transition: opacity var(--dur-fast), transform var(--dur-base) var(--ease-out); }
@media (hover: hover) {
  .footer-nav a:hover { color: var(--footer-accent); }
  .footer-nav a:hover svg { opacity: 1; transform: translate(2px, -2px); }
}
.footer-nav a:active { opacity: .6; }
.footer-location { color: var(--footer-muted); font-size: 13px; line-height: 1.55; margin-top: var(--space-4); }

.footer-social { grid-area: social; align-self: end; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.footer-social > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  color: #e7e7e4;
  background: var(--footer-glass);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 0 0 1px var(--footer-edge);
}
.footer-social svg { display: block; width: 20px; height: 20px; }

.footer-bottom {
  grid-area: bottom;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-8);
  padding-block: var(--space-5);
  border-top: 1px solid var(--footer-edge);
  font-size: 13px;
  color: var(--footer-muted);
}
.footer-bottom > span:first-child { grid-column: 2; grid-row: 1; color: var(--footer-accent); }
.footer-bottom > span:nth-child(2) { grid-column: 1; grid-row: 1; }
.footer-bottom > .footer-legal { grid-column: 3; grid-row: 1; justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1) var(--space-5); }
.footer-bottom a { display: flex; align-items: center; gap: 8px; min-height: 24px; transition: color var(--dur-fast); }
.footer-bottom a:hover { color: var(--footer-accent); }

/* Decorative: the image-filled wordmark rests on the bottom edge, full width,
   and fades into the charcoal. */
.footer-art { grid-area: art; position: relative; margin-inline: calc(-1 * var(--footer-pad)); margin-bottom: -3.6vw; pointer-events: none; }
.footer-wordmark {
  display: block;
  font-weight: 600;
  font-size: 24vw;
  letter-spacing: -.05em;
  line-height: .92;
  text-align: center;
  white-space: nowrap;
  padding: 0 .04em .04em 0;
  background-image: linear-gradient(100deg, #ffffff12, #ffffff30 48%, #13131355), url("/images/creator-studio.webp");
  background-size: cover;
  background-position: center 43%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: grayscale(1) brightness(1.2);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 98%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 98%);
}
.footer-ribbon, .footer-art-note { display: none; }

@media (min-width: 701px) and (max-width: 900px) {
  .footer-signup { padding: var(--space-5); }
  .footer-download { font-size: 14px; padding-left: 18px; }
  .footer-nav { gap: var(--space-4); }
}

@media (max-width: 700px) {
  .site-footer {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "title" "signup" "nav" "social" "bottom" "art";
    padding: var(--space-6) var(--gutter) 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .back-top { width: 44px; height: 44px; }
  .site-footer h2 { margin-top: var(--space-4); font-size: clamp(46px, 13vw, 78px); line-height: 1; white-space: normal; }
  .footer-signup { margin-top: var(--space-6); padding: var(--space-5); border-radius: var(--radius-lg); }
  .footer-download { min-height: 58px; padding-left: 20px; font-size: 14px; }
  .footer-download > svg:last-child { padding: 9px; }
  .footer-nav { margin-top: var(--space-6); }
  .footer-nav a { min-height: 44px; font-size: 16px; }
  .footer-bottom a { min-height: 44px; }
  .footer-social { margin-top: var(--space-6); }
  .footer-bottom { grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-3); margin-top: var(--space-7); padding-block: var(--space-4); }
  .footer-bottom > span:first-child { grid-column: 1; }
  .footer-bottom > span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; text-align: center; }
  .footer-bottom > .footer-legal { grid-column: 2; grid-row: 1; gap: 4px 14px; }
  .footer-art { margin-bottom: -4.5vw; }
  .footer-wordmark { font-size: 24vw; }
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1180px) {
  .desktop-nav { margin-left: 0; gap: 0; }
  .desktop-nav a { padding-inline: 12px; }
}

@media (max-width: 900px) {
  .header-actions { gap: 10px; }
}

@media (max-width: 1000px) {
  .desktop-nav { display: none; }
  .menu-toggle { display: grid; }
  .mobile-nav {
    position: absolute;
    z-index: 40;
    right: 0;
    top: calc(100% + 9px);
    display: block;
    width: min(420px, 100%);
    max-height: calc(100dvh - 100px);
    overflow: hidden auto;
    padding: var(--space-5);
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--stage);
    color: #f4f1e7;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 0 0 1px rgb(255 255 255 / .06), 0 24px 56px -20px rgb(10 8 19 / .5), 0 8px 20px -10px rgb(10 8 19 / .35);
    transform: translate3d(0, -13px, 0) scale(.985);
    transform-origin: top right;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, transform .32s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .32s;
    overscroll-behavior: contain;
  }
  .mobile-nav.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .3s ease, transform .46s cubic-bezier(.22, 1, .36, 1), visibility 0s;
  }
  .mobile-nav-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid #ffffff21;
    color: var(--lime);
    font-size: var(--text-small);
    font-weight: 500;
  }
  .mobile-nav-heading span:last-child { color: #a3a2a9; font-size: var(--text-caption); font-variant-numeric: tabular-nums; font-weight: 400; }
  .mobile-nav-links a {
    display: grid;
    grid-template-columns: 27px 1fr 18px;
    align-items: center;
    gap: 13px;
    min-height: 59px;
    border-bottom: 1px solid #ffffff1e;
    color: #f4f1e7;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -.035em;
    opacity: 0;
    transform: translate3d(0, 9px, 0);
    transition: color .2s, opacity .25s, transform .36s cubic-bezier(.22, 1, .36, 1);
  }
  .mobile-nav.is-open .mobile-nav-links a { opacity: 1; transform: none; }
  .mobile-nav.is-open .mobile-nav-links a:nth-child(1) { transition-delay: .06s; }
  .mobile-nav.is-open .mobile-nav-links a:nth-child(2) { transition-delay: .09s; }
  .mobile-nav.is-open .mobile-nav-links a:nth-child(3) { transition-delay: .12s; }
  .mobile-nav.is-open .mobile-nav-links a:nth-child(4) { transition-delay: .15s; }
  .mobile-nav.is-open .mobile-nav-links a:nth-child(5) { transition-delay: .18s; }
  .mobile-nav.is-open .mobile-nav-links a:nth-child(6) { transition-delay: .21s; }
  .mobile-nav-links a:hover { color: var(--lime); }
  .mobile-nav-links a > span:first-child { color: #8f9095; font-size: var(--text-caption); font-variant-numeric: tabular-nums; letter-spacing: 0; }
  .mobile-nav-links a svg { width: 18px; height: 18px; color: var(--lime); }
  .mobile-nav a:focus-visible { outline-color: var(--lime); outline-offset: -3px; }
  .mobile-nav-footer {
    padding-top: var(--space-5);
    opacity: 0;
    transform: translate3d(0, 9px, 0);
    transition: opacity .25s, transform .36s cubic-bezier(.22, 1, .36, 1);
  }
  .mobile-nav.is-open .mobile-nav-footer { opacity: 1; transform: none; transition-delay: .24s; }
  .mobile-nav-footer p { margin-bottom: var(--space-3); color: #aaa9ae; font-size: 13px; }
  .mobile-nav-footer a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 0 20px;
    border-radius: 99px;
    background: var(--lime);
    color: #0a0813;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    transition: background .2s, transform .2s;
  }
  .mobile-nav-footer a:hover { background: #6cf000; }
  .mobile-nav-footer a:focus-visible { outline-color: #f4f1e7; outline-offset: 3px; }
  .mobile-nav-footer svg { flex: 0 0 auto; }
}

@media (max-width: 700px) {
  .site-header { --header-gap: 10px; height: 60px; gap: var(--space-3); padding: 0 10px 0 12px; border-radius: var(--radius-md); }
  .brand { font-size: 26px; letter-spacing: -1.4px; gap: 4px; }
  .brand img { width: 32px; height: 32px; }
  .header-actions { gap: 8px; }
  .header-signin { display: none; }
  .menu-toggle { width: 40px; height: 40px; }
  .theme-toggle { width: 40px; height: 40px; }
  .brand { padding-block: 8px; }
  .header-cta { min-height: 40px; padding: 0 14px; font-size: 13px; gap: 6px; }
  .header-cta > svg:last-child { display: none; }

}

@media (max-width: 380px) {
  .site-header { gap: var(--space-2); padding-inline: 10px 6px; }
  .theme-toggle { width: 34px; height: 34px; }
  .brand { font-size: 23px; }
  .brand img { width: 28px; height: 28px; }
  .header-actions { gap: 4px; }
  .header-cta { padding: 0 12px; font-size: 12px; }
  .header-cta > svg:last-child { display: none; }
  .menu-toggle { width: 38px; height: 38px; }
  .mobile-nav { padding: 18px; }
  .mobile-nav-links a { min-height: 55px; font-size: 20px; }
}

/* The narrowest phones: the header row (wordmark, theme, action, menu) must
   still fit inside the glass bar. */
@media (max-width: 340px) {
  .site-header { gap: 6px; padding-inline: 8px 5px; }
  .brand { font-size: 20px; letter-spacing: -1.1px; gap: 3px; }
  .brand img { width: 24px; height: 24px; }
  .header-actions { gap: 3px; }
  .theme-toggle { width: 32px; height: 32px; }
  .header-cta { padding: 8px 9px; }
  .menu-toggle { width: 36px; height: 36px; }
}