/* Ditto: a quiet page, with motion coming from the paper and handwriting. */

:root {
  --section: clamp(104px, 12vw, 180px);
}

.view {
  position: relative;
}
.landing {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background: var(--air);
}

/* ------------------------------------------------------------------ sky */
.sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
/* ------------------------------------------------------------------ nav */
.nav {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 28px);
  width: min(calc(100% - 24px), 1180px);
  height: 60px;
  padding: 0 10px 0 18px;
  transform: translateX(-50%);
  border-radius: 999px;
  color: var(--on-sky);
  transition: background var(--t-3) var(--ease), box-shadow var(--t-3) var(--ease), color var(--t-2), top var(--t-3) var(--ease);
}
.nav .brand {
  color: inherit;
}
.nav.scrolled {
  top: 10px;
  color: var(--ink);
  background: var(--veil);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: inset 0 0 0 1px var(--veil-edge), var(--sh-float);
}
.nav .brand .logo-slot {
  width: 84px;
  height: 34px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: clamp(4px, 2vw, 30px);
}
.nav-links a {
  position: relative;
  padding: 8px 13px;
  border-radius: 999px;
  color: inherit;
  opacity: 0.86;
  font-size: calc(14.5px * var(--ts, 1));
  font-weight: 520;
  text-decoration: none;
  transition: opacity var(--t-1), background var(--t-1);
}
.nav-links a:hover {
  opacity: 1;
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.nav-links a[aria-current="page"] {
  opacity: 1;
}
.nav .spacer {
  flex: 1;
}
.nav .theme-toggle {
  color: inherit;
  background: color-mix(in srgb, currentColor 8%, transparent);
  box-shadow: none;
}
.nav-cta {
  margin-left: 2px;
}
.pricing-view .nav {
  color: var(--ink);
}

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative;
  min-height: max(100svh, 820px);
  padding: clamp(112px, 15vh, 150px) var(--gutter) clamp(60px, 8vh, 96px);
  display: flex;
  align-items: center;
  color: var(--on-sky);
  isolation: isolate;
}
.hero-sky {
  position: absolute;
  inset: 0 0 auto;
  height: calc(100% + 100px);
  z-index: -1;
  background: linear-gradient(132deg,
    color-mix(in srgb, var(--sky-1) 72%, var(--air-hi)) 0%,
    color-mix(in srgb, var(--sky-2) 76%, var(--air)) 46%,
    color-mix(in srgb, var(--air) 88%, var(--lilac) 12%) 100%);
  -webkit-mask: linear-gradient(180deg, #000 88%, transparent);
  mask: linear-gradient(180deg, #000 88%, transparent);
}
.hero-sky::after,
.finale-sky::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* stars only at night: in daylight they read as dust */
  opacity: 0;
  background-image:
    radial-gradient(circle at 5% 12%, var(--on-sky) 0 0.7px, transparent 1.2px),
    radial-gradient(circle at 13% 31%, var(--on-sky) 0 0.55px, transparent 1.05px),
    radial-gradient(circle at 19% 8%, var(--on-sky) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 27% 23%, var(--on-sky) 0 0.55px, transparent 1.05px),
    radial-gradient(circle at 34% 13%, var(--on-sky) 0 0.7px, transparent 1.2px),
    radial-gradient(circle at 42% 6%, var(--on-sky) 0 0.55px, transparent 1.05px),
    radial-gradient(circle at 48% 27%, var(--on-sky) 0 0.85px, transparent 1.35px),
    radial-gradient(circle at 56% 11%, var(--on-sky) 0 0.55px, transparent 1.05px),
    radial-gradient(circle at 63% 19%, var(--on-sky) 0 0.7px, transparent 1.2px),
    radial-gradient(circle at 71% 7%, var(--on-sky) 0 0.55px, transparent 1.05px),
    radial-gradient(circle at 78% 29%, var(--on-sky) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 86% 13%, var(--on-sky) 0 0.55px, transparent 1.05px),
    radial-gradient(circle at 94% 24%, var(--on-sky) 0 0.7px, transparent 1.2px),
    radial-gradient(circle at 9% 48%, var(--on-sky) 0 0.55px, transparent 1.05px),
    radial-gradient(circle at 23% 58%, var(--on-sky) 0 0.7px, transparent 1.2px),
    radial-gradient(circle at 39% 43%, var(--on-sky) 0 0.55px, transparent 1.05px),
    radial-gradient(circle at 57% 54%, var(--on-sky) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 74% 46%, var(--on-sky) 0 0.55px, transparent 1.05px),
    radial-gradient(circle at 91% 57%, var(--on-sky) 0 0.7px, transparent 1.2px);
}
:root[data-theme="dark"] .hero-sky::after,
:root[data-theme="dark"] .finale-sky::after {
  opacity: 0.58;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-sky::after,
  :root:not([data-theme="light"]) .finale-sky::after {
    opacity: 0.58;
  }
}
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: center;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}
.hero-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  animation: rise-in 1.2s var(--ease) both;
}
.hero-title {
  font-size: clamp(54px, 7.4vw, 118px);
  color: var(--on-sky);
}
.ht-type {
  display: block;
  white-space: nowrap;
}
.ht-hand {
  position: relative;
  display: block;
  height: 1.12em;
  margin-top: 0.04em;
}
.ht-hand canvas {
  position: absolute;
  top: 0;
}
.hero-lede {
  max-width: 31em;
  margin-top: clamp(18px, 2.6vh, 28px);
  font-size: clamp(17px, 1.35vw, 19.5px);
  line-height: 1.58;
  color: var(--on-sky-2);
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: clamp(24px, 3.6vh, 36px);
}
.hero-ctas .btn {
  --h: 52px;
  padding: 0 24px;
  font-size: calc(16px * var(--ts, 1));
}
.btn .ico.nib {
  width: 18px;
  height: 18px;
  margin-right: -2px;
  color: var(--gold-hi);
}
:root[data-theme="dark"] .hero-copy .hero-lede,
:root[data-theme="dark"] .finale .lede,
:root[data-theme="dark"] .hero-micro {
  text-shadow: 0 1px 12px rgba(8, 10, 34, 0.9);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-copy .hero-lede,
  :root:not([data-theme="light"]) .finale .lede,
  :root:not([data-theme="light"]) .hero-micro {
    text-shadow: 0 1px 12px rgba(8, 10, 34, 0.9);
  }
}
.hero-micro {
  margin-top: 18px;
  font-size: calc(13.5px * var(--ts, 1));
  color: var(--on-sky-2);
  opacity: 0.85;
}

/* the page, caught in a light breeze */
.hero-desk {
  position: relative;
  justify-self: center;
  width: min(100%, 460px);
  animation: sheet-land 1.8s var(--ease) 0.15s both;
}
@keyframes sheet-land {
  from {
    opacity: 0;
    transform: translate3d(0, 60px, 0);
  }
}
.hd-float {
  position: relative;
  perspective: 1400px;
  transform-style: preserve-3d;
  animation: paper-buoy 5.8s var(--ease-io) infinite;
}
@keyframes paper-buoy {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  25% {
    transform: translate3d(-14px, -9px, 0) rotate(0.9deg);
  }
  52% {
    transform: translate3d(-3px, -24px, 0) rotate(-0.4deg);
  }
  78% {
    transform: translate3d(12px, -12px, 0) rotate(-1.1deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}
.hd-sheet {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 148 / 156;
  border-radius: 3px;
  background: #fbf7ee;
  box-shadow:
    0 1px 0 rgba(32, 35, 48, 0.1),
    0 14px 28px -18px rgba(20, 24, 36, 0.42),
    0 40px 62px -42px rgba(20, 24, 36, 0.34);
  transform: rotateX(3deg) rotateY(-3.5deg) rotateZ(0.55deg);
  transform-origin: 50% 70%;
  transition: transform 0.9s var(--ease), box-shadow 0.9s var(--ease), opacity 0.45s var(--ease-soft);
}
.hero-desk:hover .hd-sheet {
  transform: rotateX(0.8deg) rotateY(-1.2deg) rotateZ(0.15deg) translateY(-3px);
  box-shadow:
    0 1px 0 rgba(32, 35, 48, 0.1),
    0 18px 34px -18px rgba(20, 24, 36, 0.42),
    0 48px 70px -42px rgba(20, 24, 36, 0.34);
}
.hd-sheet canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* A narrow, soft contact shadow keeps the page grounded while it floats (in the flow, at the page's foot, taking
   no room). */
.hd-shadow {
  position: relative;
  height: 40px;
  margin: -26px 14% -14px;
  z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(20, 23, 30, 0.2) 50%, transparent);
  filter: blur(7px);
  transform: translateY(12px);
  pointer-events: none;
  animation: drift-shadow 5.8s var(--ease-io) infinite;
}
@keyframes drift-shadow {
  100% {
    transform: translateY(25px) scaleX(0.82);
    opacity: 0.62;
  }
}
.pen-tip {
  position: absolute;
  left: 0;
  top: 0;
  width: 120px;
  height: 120px;
  margin: -118px 0 0 -2px;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
  transition: opacity 0.3s;
  filter: drop-shadow(8px 14px 10px rgba(50, 30, 70, 0.3));
}
/* ------------------------------------------------------------------ the director */
.director {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--section) var(--gutter) 0;
}
.dir-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(56px, 7vw, 96px) clamp(18px, 4vw, 64px) clamp(48px, 6vw, 80px);
  border-radius: 34px;
  background: linear-gradient(145deg, var(--sky-1), var(--sky-2) 58%, var(--sky-3));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 50px 100px -50px rgba(110, 70, 140, 0.45);
}
:root[data-theme="dark"] .dir-panel {
  background: linear-gradient(145deg, var(--sky-1), var(--sky-2) 58%, var(--sky-3));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 50px 100px -50px rgba(0, 0, 0, 0.7);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dir-panel {
    background: linear-gradient(145deg, var(--sky-1), var(--sky-2) 58%, var(--sky-3));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 50px 100px -50px rgba(0, 0, 0, 0.7);
  }
}
.dir-sky {
  z-index: -1;
}
.dir-panel .section-head {
  position: relative;
  color: var(--ink);
}
.dir-panel .h2 {
  color: var(--ink);
}
.dir-panel .lede {
  color: var(--ink-2);
}
:root[data-theme="dark"] .dir-panel .section-head,
:root[data-theme="dark"] .dir-panel .h2,
:root[data-theme="dark"] .dir-panel .lede {
  color: #fff4f4;
}
:root[data-theme="dark"] .dir-panel .h2 em {
  color: #ffd0c4;
}
:root[data-theme="dark"] .dir-panel .kicker {
  color: #ffd2a8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dir-panel .section-head,
  :root:not([data-theme="light"]) .dir-panel .h2,
  :root:not([data-theme="light"]) .dir-panel .lede {
    color: #fff4f4;
  }
  :root:not([data-theme="light"]) .dir-panel .h2 em {
    color: #ffd0c4;
  }
  :root:not([data-theme="light"]) .dir-panel .kicker {
    color: #ffd2a8;
  }
}
.section-head.center {
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section-head.center .lede {
  margin-left: auto;
  margin-right: auto;
}
.dir-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  margin-top: clamp(40px, 5vw, 64px);
}
/* the console: the studio's command bar (director.css), as the landing page shows it. Frosted pearl by
   day, indigo glass at night; what it did over the next steps, then the field. */
.dir-console {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-radius: 26px;
  color: var(--ink);
  background: var(--veil-strong);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
  box-shadow: inset 0 0 0 1px var(--veil-edge), var(--sh-float), 0 40px 80px -40px rgba(80, 50, 120, 0.35);
}
.dir-log {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px 8px;
  font-size: calc(14px * var(--ts, 1));
  line-height: 1.45;
  border-bottom: 1px solid var(--line);
}
.dl-reply {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 6px 4px 4px;
  animation: rise-in 0.45s var(--ease) both;
}
.dl-tick,
.dl-orb {
  grid-column: 1;
  grid-row: 1;
}
.dl-tick {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--gold);
  transition: opacity var(--t-2);
}
.dl-reply[data-kind="info"] .dl-tick {
  color: var(--ink-3);
}
/* while the pen works: an orb that breathes where the tick will be */
.dl-orb {
  width: 9px;
  height: 9px;
  margin: 7px 0 0 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff6dc, var(--gold-hi) 45%, var(--gold));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 18%, transparent), 0 0 14px color-mix(in srgb, var(--gold-hi) 70%, transparent);
  opacity: 0;
  transition: opacity var(--t-2);
}
.dl-working .dl-orb {
  opacity: 1;
  animation: dl-breathe 1.2s var(--ease-io) infinite alternate;
}
.dl-working .dl-tick {
  opacity: 0;
}
@keyframes dl-breathe {
  to {
    transform: scale(0.72);
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--gold) 5%, transparent), 0 0 6px color-mix(in srgb, var(--gold-hi) 40%, transparent);
  }
}
.dl-body {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
.dl-say {
  margin: 0;
  font: 400 calc(18px * var(--ts, 1))/1.32 var(--font-display);
  color: var(--ink);
  text-wrap: pretty;
}
.dl-meta {
  margin: 3px 0 0;
  font: 500 calc(12.5px * var(--ts, 1))/1.3 var(--font-body);
  color: var(--ink-3);
}
.dl-steps {
  list-style: none;
  display: grid;
  gap: 1px;
  margin: 4px 0 0;
  padding: 0 0 0 30px;
  font: 500 calc(13.5px * var(--ts, 1))/1.3 var(--font-body);
  animation: rise-in 0.45s var(--ease) 0.2s both;
}
.dl-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 26px;
  color: var(--ink-3);
  transition: color var(--t-2);
}
.dl-steps li i {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--line-3);
  transition: background var(--t-2), box-shadow var(--t-2);
}
.dl-steps li.now {
  color: var(--ink);
}
.dl-steps li.now span {
  background: linear-gradient(100deg, var(--ink) 0%, var(--ink) 38%, var(--gold) 50%, var(--ink) 62%, var(--ink) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: dl-shimmer 2.1s linear infinite;
}
@keyframes dl-shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}
.dl-steps li.now i {
  box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 0 4px color-mix(in srgb, var(--gold) 18%, transparent);
  animation: live 0.8s var(--ease-io) infinite alternate;
}
.dl-steps li.done {
  color: var(--ink-2);
}
.dl-steps li.done i {
  background: linear-gradient(135deg, var(--gold-hi), var(--gold));
  box-shadow: none;
}
.dl-steps li.done i::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 2.5px;
  width: 3.5px;
  height: 6.5px;
  border: solid #3a2a0c;
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(42deg);
}
.dir-log .link-arrow {
  color: var(--accent);
}
/* three next steps, as rows; the one playing lit gold (and, as you type, what Enter will do) */
.dir-chips {
  display: grid;
  gap: 2px;
  padding: 4px 0 0;
}
.dir-chips[hidden] {
  display: none;
}
.dir-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
  font: 500 calc(14.5px * var(--ts, 1))/1.25 var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-1), color var(--t-1), box-shadow var(--t-1);
}
.dir-chip svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--ink-3);
  transition: color var(--t-1);
}
.dir-chip:hover {
  background: var(--hover);
}
.dir-chip:hover svg {
  color: var(--gold);
}
.dir-chip[aria-pressed="true"],
.dir-preview {
  background: color-mix(in srgb, var(--gold) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 26%, transparent);
}
.dir-chip[aria-pressed="true"] svg,
.dir-preview svg {
  color: var(--gold);
}
.dir-preview {
  margin-top: 4px;
  animation: rise-in 0.3s var(--ease) both;
}
.dir-preview .dp-t {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  overflow: hidden;
  white-space: nowrap;
}
.dir-preview b {
  flex: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
.dir-preview em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font: italic 400 calc(15.5px * var(--ts, 1))/1.2 var(--font-display);
  color: var(--ink-2);
}
.dir-preview small {
  flex: none;
  font: 560 calc(12px * var(--ts, 1))/1 var(--font-body);
  color: var(--ink-3);
}
.dir-preview kbd {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  border-radius: 7px;
  font: 600 calc(11.5px * var(--ts, 1))/1 var(--font-body);
  color: var(--ink-3);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 0 var(--line-2);
}
/* the field: the studio's pill */
.dir-ask {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 6px 0 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: box-shadow var(--t-2) var(--ease);
}
.dir-ask:focus-within {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 60%, transparent), 0 0 0 4px color-mix(in srgb, var(--gold) 14%, transparent);
}
.dir-ask .ico {
  flex: none;
  width: 19px;
  height: 19px;
  color: var(--gold);
}
.dir-ask input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 500 calc(15.5px * var(--ts, 1))/1 var(--font-body);
  text-overflow: ellipsis;
}
.dir-ask input:focus {
  outline: none;
}
.dir-ask input::placeholder {
  color: var(--ink-3);
}
.dir-go {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--gold-hi);
  background: var(--primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent), 0 6px 16px -8px var(--primary-glow);
  transition: background var(--t-1), transform var(--t-1);
}
.dir-go svg {
  width: 19px;
  height: 19px;
}
.dir-go:hover {
  background: var(--primary-hi);
}
.dir-go:active {
  transform: scale(0.94);
}
.dir-go:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
:root[data-theme="dark"] .dir-go {
  color: var(--on-primary);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dir-go {
    color: var(--on-primary);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dl-working .dl-orb,
  .dl-steps li.now i,
  .dl-steps li.now span {
    animation: none;
  }
  .dl-steps li.now span {
    background: none;
    -webkit-text-fill-color: currentColor;
  }
}
.dir-page {
  position: relative;
  width: 100%;
  aspect-ratio: 172 / 122;
  border-radius: 3px;
  background: #fdfbf6;
  box-shadow: 0 1px 0 rgba(60, 30, 20, 0.08), 0 20px 44px -16px rgba(90, 40, 80, 0.45), 0 60px 110px -44px rgba(60, 30, 120, 0.5);
  transform: rotate(0.8deg);
}
.dir-page canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------------------------ sections */
.section,
.learn,
.photo {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--section) var(--gutter) 0;
}
.section-head {
  max-width: 760px;
}
.section-head .kicker + .h2 {
  margin-top: 18px;
}
.h2 {
  font-size: clamp(40px, 5vw, 72px);
  color: var(--ink);
}
.h2 em {
  color: var(--ink-2);
}
.section-head .lede {
  margin-top: 22px;
  max-width: 36em;
}

/* reveal on scroll: visible at rest; JS adds .pre only below the fold */
.reveal {
  transition: opacity 0.7s var(--ease), transform 0.9s var(--ease);
  transition-delay: calc(var(--ri, 0) * 90ms);
}
.reveal.pre {
  opacity: 0;
  transform: translateY(22px);
}

/* ------------------------------------------------------------------ how it works */
.learn-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 6vw, 104px);
  margin-top: clamp(24px, 4vw, 48px);
}
.lstep {
  min-height: 74vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 400px;
  opacity: 0.5;
  transition: opacity 0.7s var(--ease);
}
.lstep.on {
  opacity: 1;
}
.lstep-n {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-3);
  font-family: var(--font-display);
  font-size: calc(17px * var(--ts, 1));
  font-weight: 450;
  color: var(--ink-2);
}
.lstep.on .lstep-n {
  background: var(--ink);
  color: var(--air);
  box-shadow: none;
}
.lstep h3 {
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 380;
  letter-spacing: -0.016em;
  line-height: 1.08;
}
.lstep p {
  margin-top: 14px;
  font-size: calc(17px * var(--ts, 1));
  line-height: 1.62;
  color: var(--ink-2);
}
.lstep .link-arrow {
  margin-top: 22px;
}
.learn-stage {
  position: sticky;
  top: max(90px, calc(50vh - 290px));
  height: min(580px, 74vh);
  align-self: start;
}
.ls-frame {
  position: relative;
  height: calc(100% - 44px);
  border-radius: var(--r-xl);
  background:
    radial-gradient(70% 60% at 22% 12%, color-mix(in srgb, var(--glow-warm) 70%, transparent), transparent 70%),
    linear-gradient(160deg, var(--air-hi), var(--air-lo));
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-2);
  overflow: hidden;
}
.ls-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.9s var(--ease), transform 1.2s var(--ease);
  pointer-events: none;
}
.ls-layer.on {
  opacity: 1;
  transform: none;
}
.ls-photo-wrap {
  position: relative;
  height: 84%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-2.4deg);
}
.ls-photo canvas {
  display: block;
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  border-radius: 3px;
  box-shadow: var(--sh-paper);
}
.ls-scan {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 0;
  height: 18%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(120, 150, 255, 0), rgba(120, 150, 255, 0.16) 80%, rgba(150, 175, 255, 0.5));
  border-bottom: 1.5px solid rgba(110, 140, 255, 0.85);
  box-shadow: 0 6px 18px -4px rgba(110, 140, 255, 0.55);
  opacity: 0;
}
.ls-layer.on .ls-scan {
  animation: ls-scan 3.6s var(--ease-io) 0.4s infinite;
}
@keyframes ls-scan {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  10% {
    opacity: 1;
  }
  86% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(440%);
  }
}
.ls-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  width: min(88%, 520px);
}
.ls-cell {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(14px) scale(0.92);
  transition: opacity 0.6s var(--ease), transform 0.8s var(--ease);
  transition-delay: calc(var(--i) * 34ms);
}
.ls-letters.on .ls-cell {
  opacity: 1;
  transform: none;
}
.ls-cell canvas {
  width: 78%;
  height: 78%;
}
.ls-cell i {
  position: absolute;
  left: 7px;
  top: 5px;
  font-style: normal;
  font-size: calc(10.5px * var(--ts, 1));
  font-weight: 600;
  color: var(--ink-4);
}
.ls-cell::after {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 13px;
  height: 13px;
  border-radius: 99px;
  background: var(--good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 9px no-repeat;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.4s var(--ease), transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);
  transition-delay: calc(0.9s + var(--i) * 70ms);
}
.ls-letters.on .ls-cell::after {
  opacity: 0.92;
  transform: none;
}
.ls-write canvas {
  position: absolute;
  width: min(80%, 470px);
  height: auto;
  border-radius: 2px;
  box-shadow: var(--sh-paper);
}
.ls-write canvas.overlay {
  box-shadow: none;
  background: transparent;
}
.ls-caption {
  height: 44px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-size: calc(13.5px * var(--ts, 1));
  color: var(--ink-3);
}

/* ------------------------------------------------------------------ on a photo */
.photo-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(32px, 6vw, 100px);
  align-items: center;
}
.photo-copy .h2 {
  margin-top: 18px;
  font-size: clamp(38px, 3.7vw, 54px);
}
.photo-copy .lede {
  margin-top: 22px;
}
.photo-points {
  list-style: none;
  margin: 30px 0 34px;
  display: grid;
  gap: 14px;
}
.photo-points li {
  position: relative;
  padding-left: 26px;
  font-size: calc(15.5px * var(--ts, 1));
  line-height: 1.55;
  color: var(--ink-2);
}
.photo-points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 12px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--ink-3);
}
.photo-points b {
  color: var(--ink);
  font-weight: 600;
}
.ba {
  --x: 50%;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 4.6;
  border-radius: var(--r-l);
  overflow: hidden;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  background: #d9d3c7;
  box-shadow: var(--sh-3);
  transform: rotate(1deg);
}
.ba canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ba-before {
  clip-path: inset(0 calc(100% - var(--x)) 0 0);
}
.ba::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x);
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 0 18px rgba(0, 0, 0, 0.18);
}
.ba-handle {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: var(--x);
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: rgba(255, 255, 255, 0.96);
  color: #191d29;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}
.ba-handle svg {
  width: 13px;
  height: 13px;
}
.ba-handle svg:first-child {
  transform: rotate(180deg);
}
.ba-tag {
  position: absolute;
  z-index: 2;
  bottom: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(20, 20, 24, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: calc(12.5px * var(--ts, 1));
  font-weight: 560;
}
.ba-tag.l {
  left: 16px;
}
.ba-tag.r {
  right: 16px;
}
.ba-cap {
  margin: 14px 4px 0;
  color: var(--ink-3, rgba(20, 20, 24, 0.62));
  font-size: calc(13.5px * var(--ts, 1));
  line-height: 1.5;
  text-wrap: pretty;
}

/* ------------------------------------------------------------------ writing lines */
.lines-band {
  position: relative;
  margin: var(--section) 0 0;
  height: 86px;
  transform: rotate(-2.4deg);
}
.lines-strip {
  height: 100%;
  overflow: hidden;
  background: #fefefc;
  box-shadow: var(--sh-2);
  opacity: 0;
  transition: opacity 1s var(--ease);
}
.lines-band .lines-strip.ready,
.lines-strip:has(.go) {
  opacity: 1;
}
.lines-track {
  display: flex;
  width: max-content;
  height: 100%;
}
.lines-track.go {
  animation: lines-run 60s linear infinite;
}
@keyframes lines-run {
  to {
    transform: translateX(-50%);
  }
}

/* ------------------------------------------------------------------ not a font */
.overlay-test {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--r-xl);
  background: linear-gradient(170deg, var(--surface), var(--surface-2));
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-2);
}
.ot-head h3 {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 380;
  line-height: 1.1;
  letter-spacing: -0.014em;
}
.ot-head p {
  margin-top: 14px;
  color: var(--ink-2);
  font-size: calc(16px * var(--ts, 1));
}
.ot-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.ot-hint {
  font-size: calc(13px * var(--ts, 1));
  color: var(--ink-3);
}
.ot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ot-panel {
  margin: 0;
  border-radius: var(--r-m);
  overflow: hidden;
  background: #fefefc;
  box-shadow: inset 0 0 0 1px rgba(25, 29, 41, 0.08), var(--sh-1);
}
.ot-panel canvas {
  width: 100%;
  height: auto;
}
.ot-panel figcaption {
  display: grid;
  gap: 2px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(25, 29, 41, 0.07);
  font-size: calc(13px * var(--ts, 1));
  color: #6b6f7a;
}
.ot-panel figcaption b {
  color: #191d29;
  font-size: calc(14px * var(--ts, 1));
  font-weight: 600;
}
.trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  margin-top: clamp(14px, 1.8vw, 22px);
}
.t-card {
  padding: 14px 14px 22px;
  border-radius: var(--r-xl);
  background: linear-gradient(170deg, var(--surface), var(--surface-2));
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
}
.t-card h3 {
  margin: 20px 8px 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.t-card p {
  margin: 8px 8px 0;
  font-size: calc(15px * var(--ts, 1));
  line-height: 1.58;
  color: var(--ink-2);
}
.t-visual {
  position: relative;
  aspect-ratio: 120 / 107;
  border-radius: var(--r-m);
  overflow: hidden;
  background: #fefefc;
  box-shadow: inset 0 0 0 1px rgba(25, 29, 41, 0.07);
}
.t-visual > canvas {
  width: 100%;
  height: 100%;
}
.slip-toggle {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(253, 252, 249, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(25, 29, 41, 0.08), 0 6px 16px -6px rgba(70, 52, 30, 0.3);
}
.slip-toggle button {
  height: 28px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #4c5161;
  font-size: calc(12.5px * var(--ts, 1));
  font-weight: 560;
  cursor: pointer;
}
.slip-toggle button[aria-pressed="true"] {
  background: #191d29;
  color: #fbf9f4;
}
.speed-key {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(11.5px * var(--ts, 1));
  color: #6b6f7a;
}
.speed-key i {
  width: 70px;
  height: 5px;
  border-radius: 9px;
  background: linear-gradient(90deg, rgb(27, 35, 120), rgb(122, 91, 214), rgb(255, 170, 60));
}
.compare {
  --x: 50%;
  position: absolute;
  inset: 0;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
}
.compare .side {
  position: absolute;
  inset: 0;
}
.compare .side canvas {
  width: 100%;
  height: 100%;
}
.compare .side.font {
  clip-path: inset(0 calc(100% - var(--x)) 0 0);
}
.compare .tag {
  position: absolute;
  top: 12px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(253, 252, 249, 0.9);
  box-shadow: 0 0 0 1px rgba(25, 29, 41, 0.08);
  font-size: calc(11.5px * var(--ts, 1));
  font-weight: 600;
  color: #4c5161;
}
.compare .tag.l {
  left: 12px;
}
.compare .tag.r {
  right: 12px;
}
.compare .handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x);
  width: 2px;
  margin-left: -1px;
  background: #191d29;
}
.compare .handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 99px;
  background: #191d29 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5' fill='none' stroke='%23fbf9f4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.works-on {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  margin-top: clamp(48px, 6vw, 80px);
}
.works-label {
  font-size: calc(13.5px * var(--ts, 1));
  font-weight: 560;
  color: var(--ink-3);
}
.works-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.works-row > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: calc(14px * var(--ts, 1));
  color: var(--ink-2);
}
.works-row canvas {
  border-radius: 2px;
  box-shadow: var(--sh-1);
}

/* ------------------------------------------------------------------ uses */
.uses-strip {
  display: flex;
  gap: clamp(14px, 2vw, 26px);
  margin: clamp(32px, 4vw, 52px) calc(-1 * var(--gutter)) 0;
  padding: 18px var(--gutter) 40px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.uses-strip::-webkit-scrollbar {
  display: none;
}
.use {
  flex: none;
  display: grid;
  gap: 16px;
  width: clamp(200px, 22vw, 260px);
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
}
.use .obj {
  height: clamp(220px, 24vw, 280px);
  display: grid;
  place-items: center;
  border-radius: var(--r-l);
  background:
    radial-gradient(80% 70% at 24% 8%, color-mix(in srgb, var(--glow-warm) 55%, transparent), transparent 70%),
    var(--air-lo);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform var(--t-3) var(--ease), box-shadow var(--t-3) var(--ease);
}
.use .obj canvas {
  max-width: 82%;
  max-height: 82%;
  width: auto;
  height: auto;
  border-radius: 2px;
  box-shadow: var(--sh-paper);
  transform: rotate(-1.6deg);
  transition: transform var(--t-3) var(--ease);
}
.use:nth-child(even) .obj canvas {
  transform: rotate(1.4deg);
}
.use:hover .obj canvas {
  transform: rotate(0) translateY(-6px) scale(1.02);
}
.use .cap {
  display: grid;
  gap: 2px;
  padding: 0 4px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 400;
  color: var(--ink);
}
.use .cap span {
  font-family: var(--font-body);
  font-size: calc(13.5px * var(--ts, 1));
  color: var(--ink-3);
}

/* ------------------------------------------------------------------ why */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  margin-top: clamp(40px, 5vw, 64px);
}
.why-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: linear-gradient(170deg, var(--surface), var(--surface-2));
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
}
.why-visual {
  position: relative;
  height: 250px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(80% 70% at 20% 0%, color-mix(in srgb, var(--glow-warm) 55%, transparent), transparent 70%),
    var(--air-lo);
  overflow: hidden;
}
.why-body {
  padding: 24px 24px 28px;
}
.why-kicker {
  font-size: calc(13px * var(--ts, 1));
  font-weight: 560;
  color: var(--ink-3);
}
.why-body h3 {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.012em;
}
.why-list {
  list-style: none;
  display: grid;
  gap: 12px;
  margin-top: 16px;
  font-size: calc(14.5px * var(--ts, 1));
  line-height: 1.55;
  color: var(--ink-2);
}
.why-list b {
  color: var(--ink);
  font-weight: 600;
}
.env-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 86%;
}
.env-grid canvas {
  width: 100%;
  aspect-ratio: 120 / 67;
  border-radius: 2px;
  background: #fbfaf5;
  box-shadow: var(--sh-2);
  transform: rotate(var(--r, 0deg));
}
.why-count {
  position: absolute;
  bottom: 12px;
  right: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--veil-strong);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: calc(12px * var(--ts, 1));
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.why-count b {
  color: var(--ink);
}
.mini-card {
  width: 70%;
  aspect-ratio: 148 / 104;
  background: #fbf7ef;
  border-radius: 2px;
  box-shadow: var(--sh-paper);
  transform: rotate(-2deg);
}
.mini-card canvas {
  width: 100%;
  height: 100%;
}
.hand-file {
  position: absolute;
  bottom: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--veil-strong);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
  font-size: calc(12px * var(--ts, 1));
  font-weight: 560;
  color: var(--ink-2);
}
.hand-file svg {
  width: 15px;
  height: 15px;
}
.hand-file i {
  font-style: normal;
  color: var(--good);
}
.phone {
  position: relative;
  width: 118px;
  height: 222px;
  padding: 7px;
  border-radius: 24px;
  background: #16181d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), var(--sh-3);
  transform: rotate(3deg);
}
.phone canvas {
  width: 100%;
  height: 100%;
  border-radius: 17px;
  background: #fbf8f1;
}
.phone-bar {
  position: absolute;
  top: 12px;
  left: 50%;
  width: 34px;
  height: 9px;
  margin-left: -17px;
  border-radius: 9px;
  background: #16181d;
}
.real-ink {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin-top: clamp(14px, 1.8vw, 22px);
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--r-xl);
  background: linear-gradient(170deg, var(--surface), var(--surface-2));
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
}
.ri-text h3 {
  margin-top: 16px;
  font-size: clamp(28px, 2.6vw, 36px);
}
.ri-text p {
  margin-top: 14px;
  color: var(--ink-2);
}
.ri-visual {
  --cx: 50%;
  --cy: 50%;
  position: relative;
  aspect-ratio: 1.6;
  border-radius: var(--r-l);
  background: #fefefc;
  box-shadow: inset 0 0 0 1px rgba(25, 29, 41, 0.08);
  overflow: hidden;
}
.ri-visual svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ri-visual .plot path {
  fill: none;
  stroke: #1d2946;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--l) var(--l);
  stroke-dashoffset: var(--l);
}
.ri-visual .carriage {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--cy);
  height: 10px;
  margin-top: -5px;
  background: linear-gradient(180deg, rgba(25, 29, 41, 0.08), rgba(25, 29, 41, 0.14));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.ri-visual .head {
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  width: 22px;
  height: 30px;
  margin: -27px 0 0 -11px;
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(180deg, #2a2d36, #16181d);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}
.ri-visual .head::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 0 0 2px 2px;
  background: #1d2946;
}
.ri-tag {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-size: calc(11.5px * var(--ts, 1));
  font-weight: 560;
  color: #6b6f7a;
}
.proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  margin-top: clamp(48px, 6vw, 80px);
}
.stat {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 26px 4px 0;
  border-top: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
}
.stat b {
  font-family: var(--font-display);
  font-size: clamp(38px, 3.6vw, 52px);
  font-weight: 340;
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat span {
  font-size: calc(15px * var(--ts, 1));
  line-height: 1.55;
  color: var(--ink-2);
}
.stat cite {
  font-style: normal;
  font-size: calc(12.5px * var(--ts, 1));
  color: var(--ink-3);
  transition: color var(--t-1);
}
.stat:hover cite {
  color: var(--accent);
}
.proof-honest {
  max-width: 780px;
  margin-top: clamp(40px, 5vw, 64px);
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.5;
  font-weight: 360;
  color: var(--ink-2);
}
.proof-honest b {
  font-weight: 500;
  color: var(--ink);
}

/* ------------------------------------------------------------------ finale */
.finale {
  position: relative;
  isolation: isolate;
  margin-top: var(--section);
  padding: clamp(150px, 18vw, 240px) var(--gutter) clamp(240px, 26vw, 360px);
  text-align: center;
  color: var(--on-sky);
}
.finale-sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  background: linear-gradient(132deg,
    color-mix(in srgb, var(--air) 88%, var(--sky-1) 12%) 0%,
    color-mix(in srgb, var(--sky-1) 80%, var(--sky-2)) 52%,
    color-mix(in srgb, var(--sky-2) 60%, var(--air)) 100%);
}
.finale-inner {
  position: relative;
  display: grid;
  justify-items: center;
}
.finale-hand {
  display: flex;
  justify-content: center;
  width: min(92vw, 720px);
  min-height: 60px;
  margin-bottom: clamp(18px, 3vw, 30px);
}

.finale h2 {
  font-size: clamp(64px, 10vw, 150px);
  line-height: 0.92;
  color: var(--on-sky);
}
.finale .lede {
  max-width: 30em;
  margin-top: 22px;
  color: var(--on-sky-2);
}
.finale .hero-ctas {
  justify-content: center;
}

/* ------------------------------------------------------------------ footer */
.footer {
  position: relative;
  border-top: 1px solid var(--line);
  background: var(--air-lo);
}
.footer-in {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 88px) var(--gutter) 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 32px;
}
.footer .logo-slot {
  width: 92px;
  height: 38px;
}
.footer .tagline {
  max-width: 300px;
  margin-top: 16px;
  font-size: calc(14.5px * var(--ts, 1));
  color: var(--ink-3);
}
.footer h5 {
  font-size: calc(13px * var(--ts, 1));
  font-weight: 600;
  color: var(--ink);
}
.footer ul {
  list-style: none;
  display: grid;
  gap: 9px;
  margin-top: 16px;
}
.footer ul a,
.footer ul button {
  padding: 0;
  border: 0;
  background: none;
  font-size: calc(14px * var(--ts, 1));
  color: var(--ink-3);
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  transition: color var(--t-1);
}
.footer ul a:hover,
.footer ul button:hover {
  color: var(--ink);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: calc(13px * var(--ts, 1));
  color: var(--ink-3);
}
.footer .status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer .status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 20%, transparent);
}

/* ------------------------------------------------------------------ pricing */
.pricing-view {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  padding-bottom: var(--section);
  background:
    linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 22%, color-mix(in srgb, var(--horizon) 55%, var(--air)) 46%, var(--air) 82%) top / 100% 1100px no-repeat,
    var(--air);
}
.pricing-top,
.pricing-top h1 {
  color: var(--on-sky);
}

.pricing-view .pricing-top .eyebrow,
.pricing-top .lede {
  color: var(--on-sky-2);
}
.pricing-view::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 900px;
  z-index: -1;
  background:
    radial-gradient(44% 46% at 16% 0%, var(--glow-warm), transparent 72%),
    radial-gradient(36% 40% at 90% 12%, var(--glow-cool), transparent 74%);
  pointer-events: none;
}
.pricing-top {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(130px, 18vh, 180px) var(--gutter) 0;
  text-align: center;
}
.pricing-top .eyebrow {
  font-size: calc(13px * var(--ts, 1));
  font-weight: 560;
  color: var(--ink-3);
}
.pricing-top h1 {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: clamp(46px, 6.4vw, 92px);
  font-weight: 340;
  line-height: 0.98;
  letter-spacing: -0.022em;
}
.pricing-top .lede {
  max-width: 34em;
  margin: 22px auto 0;
}
.billing {
  display: inline-flex;
  margin-top: 36px;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
}
.billing button {
  height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font-size: calc(14px * var(--ts, 1));
  font-weight: 560;
  cursor: pointer;
  transition: background var(--t-1), color var(--t-1);
}
.billing button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--air-hi);
}
.billing .save {
  margin-left: 4px;
  font-size: calc(12px * var(--ts, 1));
  color: var(--accent);
}
.billing button[aria-pressed="true"] .save {
  color: inherit;
  opacity: 0.7;
}
.plans-wrap {
  position: relative;
}
.plans-note {
  display: none;
}
.plans {
  max-width: var(--max);
  margin: 52px auto 0;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  text-align: left;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-2);
}
.plan.featured {
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--ink), var(--sh-3);
}
:root[data-theme="dark"] .plan.featured {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1.5px var(--ink-2), var(--sh-3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .plan.featured {
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1.5px var(--ink-2), var(--sh-3);
  }
}
.plan .p-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 420;
}
.plan .p-name svg {
  width: 22px;
  height: 22px;
  color: var(--accent);
}
.plan .p-for {
  margin-top: 4px;
  font-size: calc(14.5px * var(--ts, 1));
  /* (ink-3 measured 4.2 on a night card's rose glow) */
  color: color-mix(in srgb, var(--ink-2) 55%, var(--ink-3));
}
.plan .price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 28px;
}
.plan .price b {
  font-family: var(--font-display);
  font-size: 58px;
  font-weight: 340;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums tabular-nums;
}
.plan .price span {
  font-size: calc(14.5px * var(--ts, 1));
  color: var(--ink-3);
}
.plan .billed {
  min-height: 20px;
  margin-top: 6px;
  font-size: calc(13.5px * var(--ts, 1));
  color: var(--ink-3);
}
.plan .student-price {
  margin-top: 6px;
  font-size: calc(13.5px * var(--ts, 1));
  color: var(--ink-2);
}
.plan .student-price b {
  font-weight: 600;
  color: var(--ink);
}
.plan ul {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 26px 0 30px;
  font-size: calc(15px * var(--ts, 1));
  color: var(--ink-2);
}
.plan li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
}
.plan li svg {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--ink);
}
.plan .btn {
  width: 100%;
  margin-top: auto;
}
.plan .badge {
  position: absolute;
  top: 24px;
  right: 24px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--air-hi);
  font-size: calc(11.5px * var(--ts, 1));
  font-weight: 600;
  letter-spacing: 0.02em;
}
.daypass {
  max-width: calc(var(--max) - 2 * var(--gutter));
  margin: 18px auto 0;
  padding: 22px 26px;
  border-radius: var(--r-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.daypass .dp-l {
  display: flex;
  align-items: center;
  gap: 18px;
}
.daypass .dp-l b {
  font-size: calc(16.5px * var(--ts, 1));
  font-weight: 600;
}
.daypass .dp-l span {
  display: block;
  font-size: calc(14.5px * var(--ts, 1));
  color: var(--ink-2);
}
.daypass .ticket {
  padding: 6px 14px;
  border: 1.5px dashed var(--line-3);
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums;
}
.compare-table {
  /* (positioned: the cells' screen-reader words are placed within it and scroll with it, not off the page's edge) */
  position: relative;
  max-width: calc(var(--max) - 2 * var(--gutter));
  margin: clamp(64px, 8vw, 110px) auto 0;
  overflow-x: auto;
}
.compare-table table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: calc(15px * var(--ts, 1));
}
.compare-table th,
.compare-table td {
  padding: 16px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.compare-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--air);
  font-family: var(--font-display);
  font-size: calc(19px * var(--ts, 1));
  font-weight: 420;
}
.compare-table td:not(:first-child),
.compare-table th:not(:first-child) {
  width: 18%;
  text-align: center;
}
.compare-table td {
  color: var(--ink-2);
}
.compare-table td:first-child {
  color: var(--ink);
}
.compare-table td svg {
  width: 18px;
  height: 18px;
  margin: 0 auto;
  color: var(--ink);
}
.compare-table .no {
  color: var(--ink-4);
}
.fine-print {
  max-width: 720px;
  margin: 26px auto 0;
  text-align: center;
  font-size: calc(14px * var(--ts, 1));
  color: var(--ink-3);
}
.pricing-view .section {
  max-width: 860px;
}
.pricing-view .section-head {
  text-align: center;
  margin: 0 auto;
}
.pricing-view .section-head .eyebrow {
  font-size: calc(13px * var(--ts, 1));
  font-weight: 560;
  color: var(--ink-3);
}
.pricing-view .section-head .h2 {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 360;
  letter-spacing: -0.018em;
  line-height: 1.04;
}
.faq {
  margin-top: 44px;
  border-top: 1px solid var(--line-2);
}
.faq-item {
  border-bottom: 1px solid var(--line-2);
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 22px 2px;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}
.faq-q svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--ink-3);
  transition: transform var(--t-2) var(--ease);
}
.faq-item.open .faq-q svg {
  transform: rotate(180deg);
}
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-3) var(--ease);
}
.faq-item.open .faq-a {
  grid-template-rows: 1fr;
}
.faq-a > div {
  overflow: hidden;
}
.faq-a p {
  max-width: 44em;
  padding: 0 2px 24px;
  color: var(--ink-2);
  font-size: calc(15.5px * var(--ts, 1));
  line-height: 1.65;
}
.pricing-view .nav {
  position: fixed;
}

/* ------------------------------------------------------------------ small screens */
@media (max-width: 1080px) {
  .nav-links a:nth-child(4) {
    display: none;
  }
  .dir-stage {
    grid-template-columns: 1fr;
  }
  .dir-page {
    order: -1;
  }
  .dir-log {
    min-height: 0;
  }
}
@media (max-width: 960px) {
  .hero {
    min-height: 0;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .learn-grid {
    grid-template-columns: 1fr;
  }
  .learn-stage {
    position: sticky;
    top: 72px;
    z-index: 2;
    height: 46vh;
    order: -1;
  }
  .lstep {
    min-height: 56vh;
  }
  .photo-grid,
  .overlay-test,
  .real-ink {
    grid-template-columns: 1fr;
  }
  .trio,
  .why-grid,
  .proof {
    grid-template-columns: 1fr;
  }
  .plans {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-grid > :first-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 760px) {
  .nav-links {
    display: none;
  }
  .nav {
    height: 54px;
    padding-left: 14px;
  }
  .hero-desk {
    width: min(100%, 340px);
  }
  .dir-panel {
    border-radius: 26px;
  }
  .nav-cta {
    --h: 36px;
    padding: 0 14px;
    font-size: calc(14px * var(--ts, 1));
  }
  .hero-title {
    font-size: clamp(48px, 13.4vw, 76px);
  }
  .ht-type {
    white-space: normal;
  }
  .hero-ctas .btn {
    flex: 1 1 auto;
  }
  .ot-grid {
    grid-template-columns: 1fr;
  }
  .lines-band {
    height: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hd-float,
  .hd-shadow {
    animation: none;
  }
}

/* ------------------------------------------------------------------ colour: pieces of sky
   Every section carries some of the sky down the page: the sunrise in the
   italic halves of headings, a band of blue behind the desk, warm and cool
   light on the cards' top edges. */
:root {
  --sunrise-text: linear-gradient(100deg, #8f5f12 0%, #b04a2a 50%, #a53d66 100%); /* (deep enough for 5:1 on the page, still the sunrise) */
  --sky-wash: linear-gradient(170deg, color-mix(in srgb, var(--sky-3) 38%, var(--surface)) 0%, var(--surface) 46%, color-mix(in srgb, var(--horizon) 50%, var(--surface)) 100%);
  --warm-wash: linear-gradient(170deg, color-mix(in srgb, var(--horizon) 60%, var(--surface)) 0%, var(--surface) 50%, color-mix(in srgb, var(--lilac) 18%, var(--surface)) 100%);
}
:root[data-theme="dark"] {
  --sunrise-text: linear-gradient(100deg, #f7dd9f 0%, #f3c38c 50%, #e9a6c0 100%);
  --sky-wash: linear-gradient(170deg, #17245a 0%, var(--surface) 50%, #2b1d4a 100%);
  --warm-wash: linear-gradient(170deg, #2e2050 0%, var(--surface) 50%, #182456 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sunrise-text: linear-gradient(100deg, #f7dd9f 0%, #f3c38c 50%, #e9a6c0 100%);
    --sky-wash: linear-gradient(170deg, #17245a 0%, var(--surface) 50%, #2b1d4a 100%);
    --warm-wash: linear-gradient(170deg, #2e2050 0%, var(--surface) 50%, #182456 100%);
  }
}
.landing .h2 em,
.pricing-view h1 em {
  color: transparent;
  background: var(--sunrise-text);
  -webkit-background-clip: text;
  background-clip: text;
  padding-right: 0.06em;
}
.dir-panel .h2 em {
  background: var(--sunrise-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:root[data-theme="dark"] .dir-panel .h2 em {
  background: linear-gradient(100deg, #ffd9b8, #ffb3c8);
  -webkit-background-clip: text;
  background-clip: text;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dir-panel .h2 em {
    background: linear-gradient(100deg, #ffd9b8, #ffb3c8);
    -webkit-background-clip: text;
    background-clip: text;
  }
}
.ls-frame {
  background:
    radial-gradient(70% 60% at 85% 100%, color-mix(in srgb, var(--sunrise) 40%, transparent), transparent 70%),
    radial-gradient(70% 60% at 10% 0%, color-mix(in srgb, var(--sky-2) 45%, transparent), transparent 70%),
    color-mix(in srgb, var(--sky-4) 70%, var(--surface));
}
.overlay-test,
.real-ink {
  background: var(--warm-wash);
}
.t-card,
.why-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--sky-4) 55%, var(--surface)), var(--surface) 38%);
}
.t-card:nth-child(2),
.why-card:nth-child(2) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--horizon) 65%, var(--surface)), var(--surface) 38%);
}
.t-card:nth-child(3),
.why-card:nth-child(3) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--lilac) 22%, var(--surface)), var(--surface) 38%);
}
.stat b {
  color: transparent;
  background: linear-gradient(100deg, var(--accent), #b9822a);
  -webkit-background-clip: text;
  background-clip: text;
}
:root[data-theme="dark"] .stat b {
  background: linear-gradient(100deg, #9fc0ff, #ffb3c8);
  -webkit-background-clip: text;
  background-clip: text;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stat b {
    background: linear-gradient(100deg, #9fc0ff, #ffb3c8);
    -webkit-background-clip: text;
    background-clip: text;
  }
}
.lstep.on .lstep-n {
  color: var(--on-primary);
  background: linear-gradient(180deg, var(--primary-top), var(--primary));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent), 0 6px 16px -6px var(--primary-glow);
}
.footer {
  margin-top: -1px;
  border-top: 0;
  background: var(--air);
}

.btn:focus-visible,
.nav-links a:focus-visible,
.link-arrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ the cloud sea (cloudsea.js) */
.cloudsea {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1.03);
  transform-origin: 60% 60%;
  transition: opacity 1.6s var(--ease);
  animation: sea-breathe 38s var(--ease-io) infinite alternate;
}
.cloudsea.in {
  opacity: 1;
}
@keyframes sea-breathe {
  to {
    transform: scale(1.07) translate3d(-1.2%, 0.4%, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cloudsea {
    animation: none;
  }
}
/* the words sit over the sky; a soft wash keeps them clear of the brightest cloud */
.hero-sky::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(60% 55% at 22% 48%, color-mix(in srgb, var(--air) 42%, transparent), transparent 72%);
}
.hero-sky::after,
.finale-sky::after {
  z-index: 1;
  -webkit-mask: linear-gradient(180deg, #000 30%, transparent 58%);
  mask: linear-gradient(180deg, #000 30%, transparent 58%);
}

/* the round ink-and-gold send button (the director's form); its styles left with the hero's old input */
/* the paper list wraps inside the column on a phone, not past it */
.works-on > .works-row {
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 560px) {
  .works-on {
    flex-direction: column;
    align-items: stretch;
  }
}
/* the finale's sky rises out of the page above it rather than starting at a line */
.finale-sky {
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 16%);
  mask: linear-gradient(180deg, transparent 0, #000 16%);
}

/* ------------------------------------------------------------------ pass 2 polish */
/* one grid: the nav pill, the hero and every section share --max and --gutter */
@media (min-width: 1600px) {
  :root {
    --max: 1280px;
  }
}
.nav {
  width: min(calc(100% - 24px), calc(var(--max) - 2 * var(--gutter) + 40px));
}
.hero-grid,
.director {
  max-width: calc(var(--max) - 2 * var(--gutter));
}
.director {
  max-width: var(--max);
}
/* a fluid type ramp: UI type grows with the screen so it never reads like a zoomed-out page */
body {
  font-size: clamp(15px, 0.6vw + 8px, 18px);
}
.nav-links a {
  font-size: clamp(14px, 0.25vw + 10px, 15.5px);
}
.kicker,
.eyebrow,
.guess-kicker {
  font-size: clamp(12.5px, 0.2vw + 9px, 14px);
  letter-spacing: 0.06em;
}
.hero-micro {
  font-size: clamp(13px, 0.25vw + 9px, 15px);
}
.plan li,
.compare-table table {
  font-size: clamp(14px, 0.25vw + 10px, 16px);
}
/* the nav's second door: back to the studio, for anyone who has been there */
.nav-open {
  white-space: nowrap;
}
@media (max-width: 960px) {
  .nav-open {
    display: none;
  }
}
/* a hand still learning, from anywhere on the site */
.learning-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: calc(14px * var(--ts, 1));
  font-weight: 560;
  color: var(--ink);
  text-decoration: none;
  background: var(--veil, rgba(255, 255, 255, 0.7));
  box-shadow: inset 0 0 0 1px var(--veil-edge, var(--line));
  white-space: nowrap;
}
.lc-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f0a43a;
  box-shadow: 0 0 0 0 rgba(240, 164, 58, 0.6);
  animation: lc-pulse 1.8s ease-out infinite;
}
@keyframes lc-pulse {
  70% {
    box-shadow: 0 0 0 8px rgba(240, 164, 58, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(240, 164, 58, 0);
  }
}
@media (max-width: 600px) {
  .learning-chip span {
    display: none;
  }
  .learning-chip {
    width: 36px;
    padding: 0;
    justify-content: center;
  }
}
/* how it works: a tighter runway, steps that stay readable, numerals that register, and a rail that fills */
.lstep {
  min-height: 62vh;
  opacity: 0.58;
}
.lstep-n {
  width: 48px;
  height: 48px;
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 680;
  font-variant-numeric: lining-nums;
}
.learn-steps {
  position: relative;
  padding-left: 22px;
}
.learn-steps::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12vh;
  bottom: 12vh;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--ink) 0 var(--how-p, 0%), var(--line-2, var(--line)) var(--how-p, 0%));
}
@media (max-width: 960px) {
  .lstep {
    min-height: 0;
    padding: 28px 0;
  }
  .learn-steps {
    padding-left: 0;
  }
  .learn-steps::before {
    display: none;
  }
}
/* the paper swatches: one even strip */
#works-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px 16px;
}
#works-row > span {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* dark: depth and a dim dusk glow, so night is still above the clouds */
:root[data-theme="dark"] {
  --elev-1: #141633;
  --elev-2: #1b1e42;
  --elev-3: #23275a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --elev-1: #141633;
    --elev-2: #1b1e42;
    --elev-3: #23275a;
  }
}
:root[data-theme="dark"] .plan,
:root[data-theme="dark"] .compare-table,
:root[data-theme="dark"] .daypass {
  background: var(--elev-2);
  box-shadow: inset 0 1px 0 rgba(255, 220, 190, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}
:root[data-theme="dark"] .plan.featured {
  background: var(--elev-3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .plan,
  :root:not([data-theme="light"]) .compare-table,
  :root:not([data-theme="light"]) .daypass {
    background: var(--elev-2);
    box-shadow: inset 0 1px 0 rgba(255, 220, 190, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 60px -30px rgba(0, 0, 0, 0.6);
  }
  :root:not([data-theme="light"]) .plan.featured {
    background: var(--elev-3);
  }
}
/* pricing: the featured tab sits above its card; one tier column is tinted */
.plan .badge {
  position: absolute;
  top: -14px;
  left: 50%;
  right: auto;
  width: auto;
  transform: translateX(-50%);
  padding: 5px 14px;
  font-size: calc(12.5px * var(--ts, 1));
  text-align: center;
  white-space: nowrap;
}
.plan.featured {
  overflow: visible;
}
.compare-table td:nth-child(3),
.compare-table th:nth-child(3) {
  background: color-mix(in srgb, #f0a43a 7%, transparent);
}
/* FAQ: its own band, grouped and roomy */
#faq {
  margin-top: clamp(64px, 8vw, 110px);
  padding-top: clamp(56px, 6vw, 88px);
  border-top: 1px solid var(--line-2, var(--line));
}
.faq-q {
  padding: 22px 4px;
  font-family: var(--font-body);
  font-size: calc(18px * var(--ts, 1));
  font-weight: 560;
  letter-spacing: -0.005em;
}
/* the guess page: the horizon stays under the fold on a form */
/* (the sky layer only, never the nav: header.nav.on-sky matched and blurred) */
.guess-view [class*="sky"]:not(.nav):not(.nav *) {
  filter: blur(8px) saturate(0.85);
}
@media (max-width: 960px) {
  /* the sticky picture keeps its caption on its own ground, so the step text scrolls under it, never through it */
  .learn-stage {
    background: var(--air);
    padding-bottom: 6px;
    box-shadow: 0 18px 18px -6px var(--air);
  }
  .lstep {
    padding: 36px 0;
  }
}

/* ================================================================== landing review fixes (2026-10-09), scoped to #landing */
/* rhythm: one section step, from the spacing scale */
#landing main > section:not(.hero):not(.finale) {
  padding-top: var(--sp-section);
}
#landing .section-head .kicker + .h2 { margin-top: var(--sp-3); }
#landing .section-head .lede { margin-top: var(--sp-5); }
#landing .learn-grid { gap: clamp(var(--sp-6), 6vw, var(--sp-9)); margin-top: clamp(var(--sp-5), 4vw, var(--sp-7)); }
/* how it works: dimmed by colour, not opacity, so inactive steps still read at AA */
#landing .lstep,
#landing .lstep.on {
  opacity: 1;
  min-height: 56vh;
}
#landing .lstep h3 { margin-top: var(--sp-5); transition: color 0.5s var(--ease); }
#landing .lstep p { margin-top: var(--sp-3); transition: color 0.5s var(--ease); }
#landing .lstep .link-arrow { margin-top: var(--sp-5); }
#landing .lstep:not(.on) h3 { color: var(--ink-2); }
#landing .lstep:not(.on) p { color: var(--ink-3); }
@media (max-width: 960px) {
  #landing .lstep,
  #landing .lstep.on { min-height: auto; padding-block: var(--sp-7); }
}
/* the uses carousel runs to the screen edges and fades there */
#landing .uses-strip {
  margin-inline: calc(50% - 50vw);
  /* (the first card on the heading's edge; its scroll padding is set from this in landing.js initUses) */
  padding-inline: calc(50vw - 50%);
  margin-top: clamp(var(--sp-6), 4vw, var(--sp-7));
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
}
/* paper swatches: equal squares on columns, label at the top */
#landing .works-on { align-items: flex-start; }
#landing .works-label { align-self: flex-start; padding-top: 9px; }
#landing .works-on > .works-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-5);
}
#landing .works-row canvas {
  flex: none;
  width: 36px !important;
  height: 36px !important;
  aspect-ratio: 1;
  object-fit: contain;
  box-shadow: none;
  filter: drop-shadow(0 1px 2px rgba(20, 20, 40, 0.18));
}
@media (max-width: 760px) {
  #landing .works-on > .works-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* finale: no void below the CTAs; the cloud fades into the footer */
#landing .finale {
  margin-top: var(--sp-section);
  padding-bottom: clamp(var(--sp-8), 10vw, 160px);
}
#landing .finale .finale-sky {
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 16%, #000 calc(100% - 180px), transparent 100%);
  mask: linear-gradient(180deg, transparent 0, #000 16%, #000 calc(100% - 180px), transparent 100%);
}
@media (max-width: 760px) {
  #landing .why { padding-bottom: 0; }
  #landing .why .proof-honest { margin-top: var(--sp-7); }
  #landing .finale { padding-top: clamp(var(--sp-8), 18vw, var(--sp-9)); }
}
/* phone hero: primary and sample link both full width, on one edge */
@media (max-width: 560px) {
  #landing .hero .hero-ctas { align-self: stretch; justify-self: stretch; width: 100%; }
  #landing .hero-ctas .btn.hero-primary,
  #landing .hero-sample {
    flex: 0 0 auto;
    align-self: stretch;
    width: 100%;
    justify-content: center;
  }
}
/* tap targets: at least 24px */
.footer ul a,
.footer ul button {
  display: inline-block;
  padding-block: 6px;
}
#landing .link-arrow { min-height: 24px; padding-block: 2px; }
/* the finale's cloud runs into the footer with no rule between */
body:has(#landing:not([hidden]) .finale) #site-footer { border-top-color: transparent; }
/* a frosted band behind the floating nav, so the page never shows through the gap above the pill */
.nav-scrim {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 39;
  height: 92px;
  pointer-events: none;
  opacity: 0;
  background: color-mix(in srgb, var(--bg, var(--air)) 55%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-mask-image: linear-gradient(#000 62%, transparent);
  mask-image: linear-gradient(#000 62%, transparent);
  transition: opacity var(--t-3) var(--ease);
}
.nav-scrim:has(+ .nav.scrolled) {
  opacity: 1;
}

/* ---- the Assistant demo (#director), 2026-10-09: the whole panel in one screen at 1920x1080, tidy on a phone ---- */
#landing .director {
  padding-top: clamp(72px, 7vw, 120px);
}
#landing .dir-panel {
  padding: clamp(36px, 3.6vw, 56px) clamp(18px, 4vw, 64px) clamp(32px, 3.4vw, 52px);
}
#landing .dir-panel .h2 {
  font-size: clamp(36px, 3.9vw, 60px);
}
#landing .dir-panel .lede {
  max-width: 640px;
  margin-top: 14px;
}
#landing .dir-stage {
  margin-top: clamp(24px, 2.6vw, 40px);
  align-items: start;
}
#landing .dir-log {
  min-height: 0;
  max-height: 320px;
  overflow: auto;
  scrollbar-width: none;
}
#landing .dir-log::-webkit-scrollbar {
  display: none;
}
#landing .dir-log .dl-note {
  margin: 2px 0 0 34px;
  font-size: calc(13px * var(--ts, 1));
  line-height: 1.45;
  color: var(--ink-2);
  text-wrap: pretty;
}
#landing .dir-log .link-arrow {
  align-self: flex-start;
  margin: 6px 0 2px 34px;
  font-weight: 600;
}
@media (max-width: 1080px) {
  #landing .dir-log {
    max-height: none;
  }
}
@media (max-width: 760px) {
  #landing .dir-panel {
    padding: 32px 14px 22px;
  }
  #landing .dir-stage {
    gap: 16px;
  }
  #landing .dir-console {
    padding: 6px;
    border-radius: 22px;
  }
  #landing .dir-chip {
    min-height: 44px;
  }
  #landing .dir-preview .dp-t {
    flex-wrap: wrap;
    row-gap: 1px;
    white-space: normal;
    padding: 6px 0;
  }
  #landing .dir-preview em {
    flex-basis: 100%;
    white-space: nowrap;
  }
  #landing .dir-preview kbd {
    display: none;
  }
  #landing .dir-ask {
    height: 50px;
  }
}

/* ------------------------------------------------------------------ the air behind the page
   Between the hero's sky and the finale's, the page sits on a soft sky of its own, not flat paper: lilac, rose and
   sunrise light, very slowly drifting behind everything (the skies, panels and cards above it keep their own). */
.landing::before,
.pricing-view::after,
.guess-view::after {
  content: "";
  position: fixed;
  inset: -12vh -12vw;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 34% at 12% 16%, color-mix(in srgb, var(--lilac) 34%, transparent), transparent 70%),
    radial-gradient(36% 30% at 88% 24%, color-mix(in srgb, var(--rose) 26%, transparent), transparent 70%),
    radial-gradient(46% 36% at 74% 88%, color-mix(in srgb, var(--sunrise) 22%, transparent), transparent 72%),
    radial-gradient(42% 34% at 18% 84%, color-mix(in srgb, var(--sky-1) 60%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--sky-2) 60%, var(--air)), var(--air) 46%, color-mix(in srgb, var(--sky-4) 64%, var(--air)));
  animation: air-drift 52s ease-in-out infinite alternate;
}
@keyframes air-drift {
  from {
    transform: translate3d(-2vw, -1.5vh, 0) scale(1);
  }
  to {
    transform: translate3d(2vw, 1.5vh, 0) scale(1.05);
  }
}
/* (each page's own stacking context holds it: above the page's paper colour, under everything on the page) */
.pricing-view {
  position: relative;
  isolation: isolate;
}
/* (pricing and #guess keep their own sky band at the top in ::before; the page's sky goes under it) */
.pricing-view::after,
.guess-view::after {
  z-index: -2;
}
@media (prefers-reduced-motion: reduce) {
  .landing::before,
  .pricing-view::after,
  .guess-view::after {
    animation: none;
  }
}

/* ---- How it works, ii: the whole alphabet found (nine to a row; seven on a phone), each with a small gold tick
   off its corner, never a green one over the letter */
.ls-grid {
  grid-template-columns: repeat(9, 1fr);
  gap: 7px;
  width: min(90%, 560px);
}
.ls-cell::after {
  right: 3px;
  bottom: 3px;
  width: 11px;
  height: 11px;
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 8px no-repeat;
  box-shadow: 0 0 0 1.5px var(--paper);
}
@media (max-width: 760px) {
  .ls-grid {
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
  }
  .ls-cell::after {
    right: 2px;
    bottom: 2px;
    width: 9px;
    height: 9px;
    background-size: 6.5px;
  }
}

/* ---- How it works on a phone: the sticky picture frosts what scrolls under it (a flat band over the page's sky
   read as a hard edge), fading out at its foot; the band runs edge to edge (a rectangle behind the rounded card
   showed its square corners) and sits right under the nav (8 px below it a cut heading showed through) */
@media (max-width: 960px) {
  .learn-stage {
    top: 64px;
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
    padding-bottom: 22px;
    background: color-mix(in oklab, var(--air) 80%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: none;
    -webkit-mask-image: linear-gradient(#000 calc(100% - 18px), transparent);
    mask-image: linear-gradient(#000 calc(100% - 18px), transparent);
  }
}

/* ---- the pricing page's small labels wear the landing's gold sun too */
.pricing-view .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.pricing-view .eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8e6, var(--gold-hi) 45%, var(--gold) 100%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 20%, transparent), 0 0 12px color-mix(in srgb, var(--gold-hi) 70%, transparent);
}

/* ---- the plan table on a phone: the feature names stay put while the plans scroll, the edge fades to say there is
   more, and a line says so */
@media (max-width: 700px) {
  .compare-table {
    padding-right: 28px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  }
  .compare-table::before {
    content: "Swipe to compare the plans →";
    position: sticky;
    left: 0;
    display: block;
    margin: 0 0 10px;
    font-size: calc(12.5px * var(--ts, 1));
    font-weight: 560;
    color: var(--ink-3);
  }
  .compare-table th:first-child,
  .compare-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 128px;
    min-width: 128px;
    max-width: 128px;
    padding-inline: 10px;
    font-size: calc(13px * var(--ts, 1));
    line-height: 1.3;
    white-space: normal;
    background: color-mix(in oklab, var(--air) 92%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

/* ---- the phone's menu: the section links, in a frosted sheet under the nav */
.nav-menu {
  display: none;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  place-items: center;
  color: inherit;
  background: color-mix(in srgb, currentColor 8%, transparent);
  cursor: pointer;
}
.nav-menu svg {
  width: 18px;
  height: 18px;
}
.nav-menu[aria-expanded="true"] {
  background: color-mix(in srgb, currentColor 16%, transparent);
}
@media (max-width: 760px) {
  .nav-menu {
    display: inline-grid;
  }
}
.nav-sheet {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: grid;
  padding: 8px;
  border-radius: 22px;
  background: var(--veil-strong);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: inset 0 0 0 1px var(--veil-edge), var(--sh-3);
  animation: nav-sheet-in 220ms var(--ease) both;
}
.nav-sheet a {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 16px;
  border-radius: 14px;
  color: var(--ink);
  font-weight: 560;
  text-decoration: none;
}
.nav-sheet a:hover,
.nav-sheet a:focus-visible {
  background: var(--hover);
  outline: none;
}
.nav-sheet a[aria-current="page"] {
  color: var(--accent);
}
@keyframes nav-sheet-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-sheet {
    animation: none;
  }
}

/* ---- one scale: every section heading at one size (it was 72, 60 and 54 across peer sections), and panels and
   cards on the radius tokens (the Assistant's panel and console were 34 and 26 beside cards of 30 and 22) */
.h2,
#landing .dir-panel .h2,
.photo-copy .h2 {
  font-size: clamp(38px, 4.3vw, 64px);
}
.dir-panel {
  border-radius: var(--r-xl);
}
.dir-console {
  border-radius: var(--r-l);
}



/* ---- the Assistant's panel: its own sky gradient stays (the sea's zenith painted it periwinkle); the cloud sea is
   only along its foot, fading in */
#landing .dir-panel .dir-sky {
  position: absolute;
  inset: auto 0 0 0;
  height: 44%;
  -webkit-mask-image: linear-gradient(transparent, #000 48%);
  mask-image: linear-gradient(transparent, #000 48%);
}

/* ---- pricing's header band: the sky the page opens on, from its glow down into the page's own sky */
.pricing-view::before {
  height: 760px;
  background:
    radial-gradient(44% 46% at 16% 0%, var(--glow-warm), transparent 72%),
    radial-gradient(36% 40% at 90% 12%, var(--glow-cool), transparent 74%),
    linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 32%, color-mix(in srgb, var(--horizon) 55%, transparent) 66%, transparent 100%);
  -webkit-mask-image: linear-gradient(#000 58%, transparent);
  mask-image: linear-gradient(#000 58%, transparent);
}

/* ---- the finale's sky meets the footer softly: its foot fades into the page's own colour, which the footer is (it
   ended in a straight line where the footer began) */
.finale-sky {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 160px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 160px), transparent);
}

/* ---- How it works: gold italic numerals i-iii in a hairline ring, as the first run's steps (the navy discs and bold
   1 2 3 read as a template) */
.lstep-n {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  color: color-mix(in srgb, var(--gold-lo, #8f6620) 85%, var(--ink));
  background: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent);
}
.lstep.on .lstep-n {
  color: color-mix(in srgb, var(--gold-lo, #8f6620) 90%, var(--ink));
  background: color-mix(in srgb, var(--gold-hi) 26%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 18px -4px color-mix(in srgb, var(--gold-hi) 80%, transparent);
}
:root[data-theme="dark"] .lstep-n,
:root[data-theme="dark"] .lstep.on .lstep-n {
  color: var(--gold-hi);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lstep-n,
  :root:not([data-theme="light"]) .lstep.on .lstep-n {
    color: var(--gold-hi);
  }
}

/* ---- small labels in the site's gold, not template pills: the plan badge a gold hairline */
.plan .badge {
  background: color-mix(in srgb, var(--gold-hi) 24%, var(--surface));
  color: color-mix(in srgb, var(--gold-lo, #8f6620) 92%, var(--ink));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent);
}
:root[data-theme="dark"] .plan .badge {
  color: var(--gold-hi);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .plan .badge {
    color: var(--gold-hi);
  }
}
/* (the menu's sheet: the two ways in at its foot, a scrim between it and the page so the hero's button below doesn't
   read as part of it; blue hour at night) */
.nav-sheet {
  z-index: 2;
  padding-bottom: 12px;
}
.nav-sheet .ns-acts {
  display: grid;
  gap: 8px;
  margin-top: 6px;
  padding: 12px 8px 2px;
  border-top: 1px solid var(--line);
}
.nav-sheet .ns-acts .btn {
  height: 46px;
  justify-content: center;
}
.nav-sheet a:not(.btn)::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 12px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gold) 70%, transparent);
}
.nav-scrim-sheet {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(14, 16, 40, 0.28);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: nav-sheet-in 220ms var(--ease) both;
}
:root[data-theme="dark"] .nav-sheet {
  background: linear-gradient(170deg, color-mix(in srgb, var(--sky-3) 70%, #15173a), #15173a 70%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav-sheet {
    background: linear-gradient(170deg, color-mix(in srgb, var(--sky-3) 70%, #15173a), #15173a 70%);
  }
}

/* ---- night cards are blue hour, not flat navy: a violet body with a rose glow at the top corner and a rose
   hairline (pricing's plans, #guess's round) */
:root[data-theme="dark"] .plan,
:root[data-theme="dark"] .guess-setup,
:root[data-theme="dark"] .guess-compare {
  background:
    radial-gradient(110% 70% at 0% 0%, color-mix(in srgb, var(--rose) 26%, transparent), transparent 62%),
    linear-gradient(172deg, color-mix(in srgb, var(--lilac) 22%, var(--surface)), var(--surface) 72%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rose) 26%, transparent), var(--sh-3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .plan,
  :root:not([data-theme="light"]) .guess-setup,
  :root:not([data-theme="light"]) .guess-compare {
    background:
      radial-gradient(110% 70% at 0% 0%, color-mix(in srgb, var(--rose) 26%, transparent), transparent 62%),
      linear-gradient(172deg, color-mix(in srgb, var(--lilac) 22%, var(--surface)), var(--surface) 72%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rose) 26%, transparent), var(--sh-3);
  }
}


/* ================================================================== visitor pages, polish pass (2026-10-16) */
/* ---- skip to content: the first stop for a keyboard, out of sight until it is reached */
/* (a pill just under the nav, in the middle: clear of the logo and the links it skips) */
.skip-link {
  position: fixed;
  top: 84px;
  left: 50%;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: calc(15px * var(--ts, 1));
  font-weight: 600;
  color: var(--on-primary);
  text-decoration: none;
  white-space: nowrap;
  background: var(--primary);
  box-shadow: var(--sh-float);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -8px);
  transition: transform var(--t-2) var(--ease), opacity var(--t-1);
}
.skip-link:focus {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
main[tabindex="-1"]:focus {
  outline: none;
}

/* ---- the nav on the narrowest phones (320-360px): the controls keep their size, Sign in moves into the menu */
.nav > .brand,
.nav > .nav-menu,
.nav > .theme-toggle,
.nav > .nav-account,
.nav > .nav-signup {
  flex: none;
}
.nav-sheet .ns-signin {
  display: none;
}
@media (max-width: 400px) {
  .nav {
    gap: 6px;
    padding: 0 8px 0 12px;
  }
  .nav .brand .logo-slot {
    width: 72px;
    height: 30px;
  }
}
@media (max-width: 370px) {
  .nav > .nav-account:not(.is-in) {
    display: none;
  }
  .nav-sheet .ns-signin {
    display: inline-flex;
  }
}
/* (a link in the menu's sheet shows its focus as a ring, not only a faint wash) */
.nav-sheet a:not(.btn):focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
}
/* (the sheet's link colour was winning over the ink button's own: navy words on a navy button) */
.nav-sheet a.btn-ink {
  color: var(--on-primary);
}
.nav-sheet a.btn-ink .ico {
  color: var(--gold-hi);
}
.nav-sheet .ns-acts .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- a demo that plays by itself: what it is writing, and a round pause button (the hero's under its page, the
   Assistant's under its stage); "Watch it write" when motion is reduced */
.demo-ctl {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: calc(13px * var(--ts, 1));
  font-weight: 560;
  line-height: 1;
  color: var(--on-sky-2);
  transition: opacity var(--t-2) var(--ease);
}
.hero-desk .demo-ctl {
  position: absolute;
  top: calc(100% + 26px);
  right: 2px;
  z-index: 2;
}
.demo-ctl.dc-center {
  display: flex;
  justify-content: center;
  margin-top: clamp(18px, 2vw, 26px);
  color: var(--ink-2);
}
.demo-ctl.is-gone {
  opacity: 0;
  pointer-events: none;
}
.dc-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.dc-status:has(.dc-text:empty) {
  display: none;
}
.dc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 24%, transparent);
  animation: dc-pulse 2.2s var(--ease-io) infinite;
}
.demo-ctl.is-paused .dc-dot {
  background: var(--ink-3);
  box-shadow: none;
  animation: none;
}
@keyframes dc-pulse {
  50% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 6%, transparent);
  }
}
.dc-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  font: inherit;
  color: var(--ink);
  background: var(--veil-strong);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--veil-edge), var(--sh-1);
  cursor: pointer;
  transition: background var(--t-1), transform var(--t-1);
}
/* (44px to a finger, 36px to the eye) */
.dc-btn::before {
  content: "";
  position: absolute;
  inset: -4px;
}
.dc-btn:hover {
  background: var(--surface);
}
.dc-btn:active {
  transform: scale(0.94);
}
.dc-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.dc-btn svg {
  width: 14px;
  height: 14px;
}
.dc-btn.dc-watch {
  display: inline-flex;
  gap: 8px;
  width: auto;
  padding: 0 16px 0 13px;
  font-size: calc(13.5px * var(--ts, 1));
  font-weight: 600;
}
/* (paused: the page's float and the clouds behind it hold still too) */
.hero.demo-paused .hd-float,
.hero.demo-paused .hd-shadow,
.hero.demo-paused .cloudsea {
  animation-play-state: paused;
}
@media (max-width: 960px) {
  .hero-desk .demo-ctl {
    top: calc(100% + 20px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dc-dot {
    animation: none;
  }
}

/* ---- the Assistant's field: a focus ring that shows on the pearl as well as at night (gold alone was 2:1) */
.dir-ask:focus-within {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 70%, var(--ink)), 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent);
}
/* ---- the Assistant's stage on the narrowest phones: one column that never runs past the panel */
@media (max-width: 1080px) {
  .dir-stage {
    grid-template-columns: minmax(0, 1fr);
  }
}
.dir-chip span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---- the plan table: its feature names are row headers now (styled as the cells were), ticks read aloud */
.compare-table tbody th {
  font-weight: 450;
  color: var(--ink);
}
.compare-table .yes,
.compare-table .no {
  display: block;
}
.compare-table:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 12px;
}
/* (on a phone: in from the screen's edge like everything else, the names column a fixed 128px and the three plans
   sharing the rest evenly; it had grown to three quarters of the screen and squeezed the plans off it) */
@media (max-width: 700px) {
  .compare-table {
    margin-inline: var(--gutter) 0;
  }
  .compare-table table {
    min-width: 540px;
    table-layout: fixed;
  }
  .compare-table td:not(:first-child),
  .compare-table th:not(:first-child) {
    width: auto;
    padding-inline: 8px;
  }
  .compare-table thead th {
    font-size: calc(17px * var(--ts, 1));
  }
}

/* ---- FAQ: each question a heading (the accordion pattern); a closed answer is out of reach of the keyboard and
   screen readers, not only out of sight */
.faq-h {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}
.faq-a {
  visibility: hidden;
  transition: grid-template-rows var(--t-3) var(--ease), visibility 0s linear var(--t-3);
}
.faq-item.open .faq-a {
  visibility: visible;
  transition: grid-template-rows var(--t-3) var(--ease), visibility 0s;
}
.faq-q {
  border-radius: 12px;
}
.faq-q:hover svg {
  color: var(--ink);
}
.faq-q:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- small text at AA (4.5:1) where it was measured short against what is really behind it: the nav's links on
   the sky (3.8 at 86% opacity), the hero's fine print (4.2), a step not being read (3.7), the photo's caption (3.9) */
.nav-links a {
  opacity: 1;
}
.hero-micro {
  opacity: 1;
}
#landing .lstep:not(.on) p,
.ba-cap {
  color: color-mix(in srgb, var(--ink-2) 55%, var(--ink-3));
}
/* (by day on a phone the hero's words sit on the brightest of the sunrise: 78% ink measured 4.0 there) */
.hero-lede {
  color: rgba(34, 34, 62, 0.88);
}
/* (at night the hero's and the finale's words sit over the moonlit cloud: 82% white measured 3.1-3.9 there) */
:root[data-theme="dark"] .hero-lede,
:root[data-theme="dark"] .hero-micro,
:root[data-theme="dark"] .finale .lede {
  color: rgba(240, 242, 255, 0.95);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-lede,
  :root:not([data-theme="light"]) .hero-micro,
  :root:not([data-theme="light"]) .finale .lede {
    color: rgba(240, 242, 255, 0.95);
  }
}
/* (and the finale's line has the moon and its lit horizon right behind it: a soft dusk under the words) */
.finale .lede {
  position: relative;
}
:root[data-theme="dark"] .finale .lede::before {
  content: "";
  position: absolute;
  inset: -22px -48px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(9, 11, 38, 0.74), rgba(9, 11, 38, 0.4) 62%, transparent);
}
:root[data-theme="dark"] .hero-micro {
  color: #f4f5ff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .finale .lede::before {
    content: "";
    position: absolute;
    inset: -22px -48px;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(9, 11, 38, 0.74), rgba(9, 11, 38, 0.4) 62%, transparent);
  }
  :root:not([data-theme="light"]) .hero-micro {
    color: #f4f5ff;
  }
}
/* (the hero's "What happens to my pages?" is a sentence's word, but a finger still gets 24px of it) */
.hero-micro .hero-trust {
  padding-block: 4px;
  margin-block: -4px;
}
.ot-hint {
  color: color-mix(in srgb, var(--ink-2) 55%, var(--ink-3));
}

/* ---- a tablet in one column: the headline at a size that holds the width, and the before/after page at a size
   that fits a screen (at full width a portrait page ran a screen and a half tall) */
@media (min-width: 761px) and (max-width: 960px) {
  .hero-title {
    font-size: clamp(64px, 10vw, 96px);
  }
  .hero-lede {
    max-width: 34em;
  }
}
@media (max-width: 960px) {
  .photo-visual {
    width: min(100%, 560px);
    justify-self: center;
  }
}

/* ---- the finale comes up out of the section above it without a screen of empty page first */
@media (min-width: 761px) {
  #landing .finale {
    margin-top: clamp(var(--sp-6), 5vw, var(--sp-8));
    padding-top: clamp(var(--sp-9), 14vw, 200px);
  }
}