/* Keats: the app's cool blue-grey, carried onto the open web. */

:root {
  --ground: #eef1f6;
  --surface: #f9fafc;
  --raised: #ffffff;
  --line: #dde1e7;
  --ink: #1b1d21;
  --muted: #636a74;
  --faint: #979ea9;
  --accent: #2f5f96;
  --accent-soft: #e6edf6;
  --ghost: #8fa8c4;
  --orb-a: #d7e3f5;
  --orb-b: #e9eef8;
  --bird-alpha: 0.16;
  --grain-alpha: 0.05;
  --frame-shadow:
    0 1px 2px rgba(16, 26, 44, 0.07),
    0 12px 32px rgba(16, 26, 44, 0.09),
    0 32px 80px rgba(16, 26, 44, 0.1);
  --frame-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --glow: #2f5f96;
  --glow-strength: 0.45;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #121417;
    --surface: #191c20;
    --raised: #20242a;
    --line: #2d3238;
    --ink: #e3e6ea;
    --muted: #939ba5;
    --faint: #616870;
    --accent: #89b4e8;
    --accent-soft: #22303c;
    --ghost: #5c748f;
    --orb-a: #1b2635;
    --orb-b: #171f29;
    --bird-alpha: 0.14;
    --grain-alpha: 0.08;
    --frame-shadow:
      0 1px 2px rgba(0, 0, 0, 0.4),
      0 12px 32px rgba(0, 0, 0, 0.42),
      0 32px 80px rgba(0, 0, 0, 0.5);
    --frame-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.045);
    --glow: #89b4e8;
    --glow-strength: 0.3;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 16.5px;
  line-height: 1.65;
  overflow-x: hidden;
}

/* Paper grain over everything, beneath the content's attention. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: var(--grain-alpha);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3 {
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  letter-spacing: -0.02em;
}

a { color: var(--accent); text-decoration: none; }

::selection { background: var(--accent-soft); }

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

/* Key caps. Inline-flex centres every glyph on one axis, so a mixed cap like
   ⌘ → sits level instead of the arrow riding its own baseline. */
kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.8em;
  line-height: 1;
  /* Uneven on purpose: the keycap's 2px bottom border and the font's descender
     space both push the glyph above the middle. One pixel of top padding
     buys it back, and the cap keeps its height. */
  padding: 5px 7px 3px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--surface);
  color: var(--muted);
  white-space: nowrap;
  vertical-align: baseline;
  transform: translateY(1px);
}

/* Each glyph gets its own line box, centred against its neighbours. */
kbd > span { display: block; line-height: 1; }

/* ---------- ambient background ---------- */

.sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
}

.orb-a {
  width: 68vw; height: 68vw;
  min-width: 560px; min-height: 560px;
  top: -24vw; right: -18vw;
  background: radial-gradient(circle, var(--orb-a) 0%, transparent 66%);
  animation: drift-a 80s ease-in-out infinite alternate;
}

.orb-b {
  width: 54vw; height: 54vw;
  min-width: 460px; min-height: 460px;
  bottom: -22vw; left: -16vw;
  background: radial-gradient(circle, var(--orb-b) 0%, transparent 66%);
  animation: drift-b 64s ease-in-out infinite alternate;
}

@keyframes drift-a {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-7vw, 6vh) scale(1.14); }
}
@keyframes drift-b {
  from { transform: translate(0, 0) scale(1.1); }
  to   { transform: translate(6vw, -5vh) scale(1); }
}

/* The nightingale, painted in accent through its own line art. */
.bird {
  position: absolute;
  aspect-ratio: 1;
  background: var(--accent);
  opacity: var(--bird-alpha);
  -webkit-mask: url("/assets/nightingale-mask.png") center / contain no-repeat;
  mask: url("/assets/nightingale-mask.png") center / contain no-repeat;
  will-change: transform;
}

.bird-hero {
  width: min(56vw, 700px);
  top: 6vh;
  right: -7vw;
}

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

.top {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px clamp(20px, 5vw, 56px);
  background: color-mix(in srgb, var(--ground) 70%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
}

.brand-mark {
  display: inline-block;
  width: 30px; height: 30px;
  background: var(--accent);
  -webkit-mask: url("/assets/nightingale-mask.png") center / contain no-repeat;
  mask: url("/assets/nightingale-mask.png") center / contain no-repeat;
}

.brand-mark.small { width: 20px; height: 20px; opacity: 0.7; }

.top nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 28px);
  font-size: 14.5px;
  font-weight: 500;
}

.top nav a { color: var(--muted); transition: color 140ms; }
.top nav a:hover { color: var(--ink); }

/* Two buttons, ranked: Download is the solid one, Account the quiet outline. */
.nav-account {
  appearance: none;
  font: inherit;
  cursor: pointer;
  background: transparent;
  color: var(--accent) !important;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 14px;
  transition: border-color 140ms;
}
.nav-account:hover { border-color: var(--accent); }

/* Three bars that fold into a cross. Hidden until the nav stops fitting. */
.nav-toggle {
  display: none;
  appearance: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 38px;
  height: 34px;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.nav-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--ink);
  transition: transform 200ms ease, opacity 120ms ease;
}

/* Bar centres sit 5.5px apart, so that is how far the outer two travel to
   meet in the middle. The middle bar goes out of the way. */
.top.nav-open .nav-toggle span:first-child { transform: translateY(5.5px) rotate(45deg); }
.top.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.top.nav-open .nav-toggle span:last-child { transform: translateY(-5.5px) rotate(-45deg); }

/* Same fill as the Download button in the page, so the two read as one action. */
.nav-cta {
  color: var(--ground) !important;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 6px 14px;
  transition: background-color 140ms, border-color 140ms;
}
.nav-cta:hover {
  background: color-mix(in srgb, var(--accent) 88%, var(--ink));
  border-color: color-mix(in srgb, var(--accent) 88%, var(--ink));
}

/* ---------- layout ---------- */

main {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 40px);
}

section { padding: clamp(44px, 7vh, 76px) 0; }

/* The story starts straight after the hero, so the window reaches the fold.
   --story-lead centres the window and its caption in whatever room is left
   between the download button and the foot of the screen; site.js measures it
   because the hero's height depends on how the headline wraps. Zero without
   JS, which is the layout this had before. */
.story { padding-top: var(--story-lead, 0px); }

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

/* Deliberately short: the editor window below must break the fold on landing,
   so the first thing that moves is the product, not the headline. The room
   left under it goes to --story-lead, which centres the window in it. */
.hero {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(18px, 3.5vh, 40px) 0 clamp(24px, 4vh, 44px);
}

.hero h1 {
  font-size: clamp(44px, 7.4vw, 82px);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.032em;
}

.h1-ghost { color: var(--ghost); transition: color 700ms ease; }
.h1-ghost.accepted { color: var(--ink); }

.caret {
  display: inline-block;
  width: 3px;
  height: 0.9em;
  margin-left: 2px;
  vertical-align: baseline;
  background: var(--accent);
  animation: blink 1.1s steps(1) infinite;
}

.caret.done { opacity: 0; animation: none; }

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

.lede {
  margin-top: 24px;
  max-width: 33em;
  font-size: clamp(17px, 2.2vw, 20px);
  color: var(--muted);
}

/* The button leads; the qualifiers sit under it rather than beside it. */
.hero-actions {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.button {
  position: relative;
  display: inline-block;
  overflow: hidden;
  background: var(--accent);
  color: var(--ground);
  font-weight: 500;
  font-size: 15.5px;
  padding: 12px 24px;
  border-radius: 10px;
  transition: transform 140ms ease, box-shadow 140ms ease;
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--accent) 70%, transparent);
}

.button:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--accent) 80%, transparent); }

.button:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px -14px color-mix(in srgb, var(--accent) 70%, transparent);
}

.hero-note { font-size: 13.5px; color: var(--faint); }

/* ---------- load choreography ---------- */

.lift {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms ease, transform 700ms ease;
}

.lift-1 { transition-delay: 90ms; }
.lift-2 { transition-delay: 210ms; }
.lift-3 { transition-delay: 330ms; }
body.loaded .lift { opacity: 1; transform: none; }

/* ---------- the story: one window, four demonstrations ---------- */

.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.story-sticky {
  position: sticky;
  top: calc(50vh - 150px);
}

/* The accent light a lit frame sits in, shared with the screenshot below. */
.story-sticky::before,
.shot::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -30% -22%;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(
    58% 52% at 50% 46%,
    color-mix(in srgb, var(--glow) 55%, transparent) 0%,
    transparent 72%
  );
  filter: blur(48px);
  opacity: 0;
  transition: opacity 900ms ease;
}

.story-sticky:has(.window.lit)::before,
.shot.in::before { opacity: var(--glow-strength); }

.window {
  position: relative;
  z-index: 1;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--frame-highlight), var(--frame-shadow);
  overflow: hidden;
  opacity: 0.6;
  transform: scale(0.96) translateY(24px);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* One entrance only, the first time the window meets the viewport. */
.window.lit { opacity: 1; transform: none; }

.window-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}

.dot { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }

.window-title {
  margin-left: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--faint);
}

.window-stage {
  position: relative;
  height: 236px;
}

.scene {
  position: absolute;
  inset: 0;
  padding: 24px 26px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 420ms ease, transform 420ms ease;
  pointer-events: none;
}

.scene.active { opacity: 1; transform: none; }

.ed {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 14px;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink);
}

.ed-tight { font-size: 13px; }

.ghost { color: var(--ghost); transition: color 420ms ease; }
.ghost.accepted { color: var(--ink); }

.ed-caret { height: 1.05em; width: 2px; margin-left: 1px; vertical-align: text-bottom; }

.tab-pill {
  position: absolute;
  right: 18px;
  bottom: 16px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 6px;
  padding: 3px 9px;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 240ms ease,
    transform 200ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.tab-pill.show { opacity: 1; transform: translateY(0); }

/* The demo accepts the suggestion: the key goes down, then lets go. */
.tab-pill.pressed {
  transform: translateY(1px) scale(0.94);
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ground);
  transition-duration: 120ms;
}

/* improve scene */

.scene-improve mark {
  background: var(--accent-soft);
  color: inherit;
  border-radius: 3px;
  padding: 1px 2px;
}

.improve-strip {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.improve-label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px;
  color: var(--faint);
  letter-spacing: 0.06em;
}

.improve-out {
  margin-top: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--accent);
  min-height: 3.4em;
}

/* folder scene */

.folder-split {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 18px;
  height: 100%;
}

.mini-tree {
  list-style: none;
  border-right: 1px solid var(--line);
  padding-right: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 2px;
}

.mini-tree .active { color: var(--accent); }

.mini-tree .lit {
  color: var(--accent);
  text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent);
}

.context-chip {
  position: absolute;
  right: 18px;
  bottom: 16px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 8px;
  opacity: 0;
  transition: opacity 400ms ease;
}

.context-chip.show { opacity: 1; }

/* models scene */

.mini-status {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
  border-top: 1px solid var(--line);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  color: var(--faint);
}

#modelname { color: var(--muted); }

/* steps */

.story-steps {
  display: flex;
  flex-direction: column;
}

.step {
  min-height: 52vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.3;
  transition: opacity 420ms ease;
}

.step.active { opacity: 1; }

/* At both ends of the story the grid, not the scroll, fixes where the window
   sits: on landing it rests on the top edge of the grid, and at the end it
   rests on the bottom edge. The middle steps meet it because a stuck window
   and an active step both sit at the middle of the screen. So pad the first
   and last steps down to a band the height of the window (281px) at the
   matching edge. Their text then centres on the window's centre line at every
   viewport height, instead of drifting by half a step. */
.step:first-child { padding-bottom: max(0px, calc(52vh - 281px)); }
.step:last-child { padding-top: max(0px, calc(52vh - 281px)); }

.step h3 {
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 600;
  margin-bottom: 10px;
}

.step p { color: var(--muted); max-width: 30em; }

/* ---------- the real thing ---------- */

.real { text-align: center; }

.real-lede {
  max-width: 30em;
  margin: 0 auto;
  color: var(--muted);
}

.shot {
  position: relative;
  max-width: 880px;
  margin: clamp(28px, 5vh, 46px) auto 0;
}

.shot img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--frame-highlight), var(--frame-shadow);
}

/* ---------- also in the box ---------- */

.real h2, .more h2, .pricing h2, .download h2 {
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 600;
  margin-bottom: 8px;
}

.more-grid {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 40px;
}

.more-item {
  border-top: 1px solid var(--line);
  padding: 16px 0 22px;
  transition: transform 240ms ease, border-top-color 240ms ease;
}

.more-item h3 { font-size: 15.5px; font-weight: 600; }

.more-item p { margin-top: 4px; font-size: 14px; color: var(--muted); }

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

.pricing-lede { color: var(--muted); max-width: 36em; }

.plans {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 5vw, 56px);
}

/* Tall enough that the action never crowds the lower edge. */
.plan {
  min-height: 330px;
  padding: 4px 0 30px clamp(24px, 3vw, 34px);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform 260ms ease;
}
.plan:first-child { border-left: none; padding-left: 0; }

.plan h3 { font-size: 15px; font-weight: 600; color: var(--muted); }

.price {
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 6px 0 18px;
}

.per { font-size: 15px; font-weight: 500; color: var(--faint); letter-spacing: 0; }

/* One claim per line, so a card is scanned rather than read. */
.plan-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.35;
}

.plan-points li { padding-left: 15px; position: relative; }

.plan-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.56em;
  width: 6px;
  height: 1px;
  background: var(--faint);
}

/* Pushed to the foot of the card by margin-top:auto, then held clear of the
   lower edge by the card's own padding-bottom. */
.plan-action {
  position: relative;
  align-self: flex-start;
  appearance: none;
  margin-top: auto;
  padding-top: 26px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

/* The rule hugs the label, not the padded box above it. */
.plan-action::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: color-mix(in srgb, var(--accent) 40%, transparent);
  transition: background-color 160ms ease;
}

.plan-action:hover::after { background: var(--accent); }

.pricing-note { margin-top: 40px; font-size: 13.5px; color: var(--faint); }

/* ---------- download & footer ---------- */

.download { text-align: center; padding-bottom: clamp(70px, 12vh, 120px); }

.download .button { margin-top: 18px; }

.download-note { margin-top: 18px; font-size: 13.5px; color: var(--faint); }

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

.site-footer {
  border-top: 1px solid var(--line);
  padding: 38px clamp(20px, 5vw, 40px) 46px;
  font-size: 13.5px;
  color: var(--faint);
}

/* A row that wraps whole blocks. A grid squeezed the brand column instead,
   which broke "Keats  A Markdown editor for Mac." onto two lines whenever the
   window was too narrow to hold all three parts side by side. */
.footer-inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px clamp(24px, 5vw, 56px);
}

.footer-brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* Name and line sit together on one row, and wrap only if the column is tight. */
.footer-brand > div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 8px;
}

.footer-name {
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.3;
}

.footer-tag { color: var(--faint); }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  flex: 0 1 auto;
}

.footer-links a { color: var(--muted); transition: color 140ms; }
.footer-links a:hover { color: var(--ink); }

.footer-place { white-space: nowrap; flex: 0 0 auto; }

.footer-legal {
  max-width: 980px;
  margin: 30px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--faint);
}

/* ---------- terms & privacy ---------- */

.legal { max-width: 720px; padding-top: clamp(28px, 5vh, 48px); }

.legal h1 {
  font-size: clamp(30px, 4.6vw, 42px);
  font-weight: 700;
  letter-spacing: -0.028em;
}

.legal-date { margin-top: 10px; font-size: 13.5px; color: var(--faint); }

.legal h2 {
  margin-top: 38px;
  font-size: 19px;
  font-weight: 600;
}

.legal p, .legal li { margin-top: 12px; color: var(--muted); font-size: 15.5px; }

.legal ul { margin-top: 6px; padding-left: 20px; }
.legal li { margin-top: 7px; }

.legal a { border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }

/* ---------- account & Stripe ---------- */

.account-dialog {
  width: min(92vw, 500px);
  max-height: min(86vh, 620px);
  margin: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0;
  background: var(--raised);
  color: var(--ink);
  box-shadow: 0 36px 90px -36px rgba(10, 20, 35, 0.65);
}

.account-dialog::backdrop {
  background: color-mix(in srgb, var(--ink) 32%, transparent);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.account-shell { position: relative; padding: 30px; }

.dialog-close {
  position: absolute;
  top: 14px;
  right: 16px;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--faint);
  font: inherit;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.account-heading { display: flex; align-items: center; gap: 12px; padding-right: 28px; }
.account-heading h2 { font-size: 21px; }
.account-heading p { margin-top: 1px; font-size: 13.5px; color: var(--muted); }

.account-message {
  min-height: 1.5em;
  margin-top: 20px;
  font-size: 13.5px;
  color: var(--muted);
}

.account-message:empty { display: none; }

.account-message.error { color: #b84949; }

.account-form { margin-top: 14px; }
.account-form label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--muted); }
.form-row { display: flex; gap: 9px; }

.account-form input {
  min-width: 0;
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}

.button.compact { appearance: none; border: 0; padding: 10px 16px; cursor: pointer; }
.button.compact:disabled { opacity: 0.55; cursor: wait; transform: none; }

.text-button,
.secondary-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.text-button { margin-top: 10px; }

.account-summary { margin-top: 14px; }
.account-summary dl { border-top: 1px solid var(--line); }
.account-summary dl div {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  padding: 11px 0;
  font-size: 14px;
}
.account-summary dt { color: var(--muted); }
.account-summary dd { text-align: right; font-weight: 500; }
.account-actions { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
.account-actions .secondary-button { margin-left: auto; }

body:has(.account-dialog[open]) { overflow: hidden; }

/* ---------- scroll reveals ---------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 640ms ease, transform 640ms ease;
}

.reveal.in { opacity: 1; transform: none; }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .orb-a, .orb-b, .caret { animation: none; }
  .lift, .reveal, .scene, .step, .window {
    opacity: 1; transform: none; filter: none; transition: none;
  }
  .scene { position: static; display: none; }
  .scene.active { display: block; }
  .sky [data-parallax] { transform: none !important; }
  .h1-ghost { color: var(--ink); }
  .story-sticky::before, .shot::before {
    opacity: var(--glow-strength);
    transition: none;
  }
  .plan, .more-item, .button, .tab-pill { transition: none; }
}

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

@media (max-width: 820px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-sticky { position: sticky; top: 64px; z-index: 5; }
  /* Stacked, so the window sits above the text rather than beside it. Each
     caption starts at the top of its block, right under the window, instead of
     floating in the middle of a tall one. The rest of the block is the scroll
     room that drives the next scene. */
  .step {
    min-height: 46vh;
    justify-content: flex-start;
    padding-top: 26px;
  }
  .step:first-child { padding-bottom: 0; }
  .step:last-child { padding-top: 26px; }
  .more-grid { grid-template-columns: 1fr 1fr; }
  .plans { grid-template-columns: 1fr; gap: 0; }
  .plan {
    min-height: 0;
    border-left: none;
    border-top: 1px solid var(--line);
    padding: 26px 0 30px;
  }
  .plan:first-child { border-top: none; padding-top: 4px; }
  .bird-hero { right: -34vw; opacity: calc(var(--bird-alpha) * 0.6); }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* ---------- the nav becomes a menu ---------- */

@media (max-width: 700px) {
  .nav-toggle { display: inline-flex; }

  .top nav {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: clamp(20px, 5vw, 56px);
    right: clamp(20px, 5vw, 56px);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--frame-shadow);
  }

  .top.nav-open nav { display: flex; }

  .top nav a { padding: 11px 12px; border-radius: 8px; }
  .nav-account, .nav-cta { text-align: center; }
}

@media (max-width: 520px) {
  .more-grid { grid-template-columns: 1fr; }
  .folder-split { grid-template-columns: 92px 1fr; gap: 12px; }
  .account-dialog {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    margin-inline: 12px;
  }
  .account-shell { padding: 26px 20px; }
  .account-form, .form-row, .account-form input { width: 100%; max-width: 100%; }
  .form-row { flex-direction: column; }
  .form-row .button { width: 100%; }
}