/* Latorium — shared stylesheet.
 *
 * Deliberate constraints, held across every page:
 *   · Typeface is a grotesk system stack, never Inter.
 *   · No gradients, no coloured glows, no glassmorphism, no colour-edged cards.
 *   · Sentence case everywhere. No all-caps labels, no badges above headings.
 *   · One layout primitive — the chapter — repeated instead of mixed card styles.
 *   · Colour is black, white, one grey, and a single accent taken from the mark.
 *
 * ANTI-AI ADDITIONS:
 *   · Subtle film grain on the background so it isn't flat plastic.
 *   · Monospace for all meta, captions, and figures (it is a dev tool).
 *   · Asymmetric border-radius and varied spacing so things don't align too cleanly.
 *   · A serif voice for pull-quotes and emphasis — one human voice in the machine.
 *   · Selection colour that bleeds gold.
 */

:root {
  --ink: #f2f2f5;
  --ink-2: #a6a6b0;
  --paper: #0b0b0e;
  --paper-2: #141419;
  --rule: #26262e;
  --rule-dark: #35353f;
  --accent: #e0bc77;
  --night: #141419;
  --night-ink: #f2f2f5;
  --night-ink-2: #a6a6b0;
  --measure: 40ch;
  --page: 1220px;
  --ease: cubic-bezier(.28, .11, .32, 1);
  --font-sans: "Helvetica Neue", "Haas Grotesk Display", Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-serif: Georgia, "Times New Roman", serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* Film grain overlay so the background isn't dead flat.
 * This is a tiny base64 SVG noise tile — no external request. */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}

.page { max-width: var(--page); margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .page { padding: 0 20px; } }
a { color: inherit; text-decoration: none; }

::selection {
  background: var(--accent);
  color: var(--paper);
  text-shadow: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; background: var(--ink); color: var(--paper);
  border-radius: 6px; font-size: 14px;
  transition: top .2s var(--ease);
}
.skip:focus-visible { top: 12px; }
mono, code, .mono { font-family: var(--font-mono); }

/* ------------------------------------------------------------------ nav */
.masthead {
  position: sticky; top: 0; z-index: 40;
  background: rgba(11, 11, 14, .82);
  backdrop-filter: blur(8px) saturate(120%);
  border-bottom: 1px solid var(--rule);
}
.masthead nav {
  display: flex; align-items: center; gap: 40px;
  height: 56px; max-width: var(--page); margin: 0 auto; padding: 0 32px;
}
.wordmark { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; flex: none; }
.wordmark img { width: 27px; height: 27px; display: block; border-radius: 6px; }
.masthead .links { display: flex; gap: 34px; font-size: 14px; color: var(--ink-2); font-family: var(--font-mono); letter-spacing: 0; }
.masthead .links a { transition: color .25s var(--ease); }
.masthead .links a:hover, .masthead .links a[aria-current] { color: var(--ink); }
.masthead .tail { margin-left: auto; display: flex; gap: 26px; align-items: center; font-size: 14px; }
@media (max-width: 820px) { .masthead .links { display: none; } .masthead nav { padding: 0 20px; gap: 20px; } }

/* --------------------------------------------------------------- opener */
/* Asymmetric padding — the human hand doesn't measure symmetrically. */
.opener { padding: 96px 0 64px; }
.opener h1 {
  margin: 0 0 24px;
  font-size: clamp(34px, 5.2vw, 64px);
  line-height: 1.06;
  letter-spacing: -.026em;
  font-weight: 500;
  max-width: 21ch;
  text-wrap: balance;
}
.opener .standfirst {
  margin: 0; max-width: 52ch;
  font-size: clamp(18px, 1.9vw, 21px);
  line-height: 1.5; letter-spacing: -.012em; color: var(--ink-2);
  text-wrap: pretty;
}
.opener .actions { margin-top: 32px; display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }

.opener > .page { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 72px; align-items: start; }
.opener .aside { padding-top: 8px; }
.opener .aside .cap {
  margin: 0 0 4px; font-size: 12px; color: var(--ink-2);
  padding-bottom: 14px; border-bottom: 1px solid var(--ink);
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em;
}
.opener .aside .ledger { margin-top: 0; border-top: 0; }
.opener .aside .ledger dd { font-size: 24px; font-weight: 500; font-family: var(--font-mono); letter-spacing: -.02em; }
.opener .aside .note { margin: 16px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); font-family: var(--font-mono); }
@media (max-width: 1000px) {
  .opener > .page { grid-template-columns: 1fr; gap: 44px; }
  .opener .aside { max-width: 46ch; }
}

/* Underline that draws on hover — kept, but slightly slower and rougher. */
.pull { font-size: 17px; position: relative; padding-bottom: 3px; }
.pull::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform-origin: left; transform: scaleX(0);
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.pull:hover::after { transform: scaleX(1); }
.pull.lead { color: var(--accent); }

/* ------------------------------------------------------------- chapters */
.chapter { padding: 108px 0; border-top: 1px solid var(--rule); }
/* Every second chapter gets slightly different padding so the rhythm breathes. */
.chapter:nth-child(even) { padding: 96px 0 120px; }

.chapter > .page { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: start; }
.chapter h2 {
  margin: 0; font-size: clamp(30px, 4.6vw, 56px); line-height: 1.04;
  letter-spacing: -.026em; font-weight: 500; max-width: 18ch;
  text-wrap: balance;
}
.chapter .body { max-width: var(--measure); }
.chapter .body p { margin: 0 0 20px; color: var(--ink-2); font-size: 18px; line-height: 1.55; text-wrap: pretty; }
.chapter .body p.first { color: var(--ink); font-size: 21px; line-height: 1.45; letter-spacing: -.014em; }
.chapter .body p:last-child { margin-bottom: 0; }
@media (max-width: 900px) { .chapter > .page { grid-template-columns: 1fr; gap: 28px; } .chapter { padding: 76px 0; } }

.chapter.night { background: var(--paper-2); border-top-color: var(--rule); }
.chapter.night .body p { color: var(--night-ink-2); }
.chapter.night .body p.first { color: var(--night-ink); }
.chapter.night .slab { border-color: var(--rule-dark); }
.chapter.night .ledger div { border-color: var(--rule-dark); }

/* --------------------------------------------------------------- slabs */
/* Asymmetric radius: looks like a panel that was cut by hand, not generated. */
.slab {
  border: 1px solid var(--rule);
  border-radius: 4px 10px 10px 4px;
  border-left: 2px solid var(--accent);
  overflow: hidden;
  margin-top: 34px;
}
.slab.tight { margin-top: 0; }
.slab pre {
  margin: 0; padding: 26px; overflow-x: auto; white-space: pre-wrap;
  font-family: var(--font-mono);
  font-size: 13px; line-height: 1.85; letter-spacing: 0;
}
.chapter.night .slab pre { color: var(--night-ink); }
.q { color: var(--ink-2); } .chapter.night .q { color: var(--night-ink-2); }
.a { color: var(--ink); font-weight: 500; }
.chapter.night .a, .stage .slab .a { color: #ffffff; font-weight: 500; }
.caret { display: inline-block; width: 7px; height: 14px; background: currentColor; vertical-align: -2px; animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* Ledger — figures as typography, now in monospace because they are measurements. */
.ledger { margin-top: 34px; border-top: 1px solid var(--rule); }
.chapter.night .ledger { border-top-color: var(--rule-dark); }
.ledger div { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 17px 0; border-bottom: 1px solid var(--rule); }
.ledger dt { margin: 0; font-size: 15px; color: var(--ink-2); font-family: var(--font-sans); }
.chapter.night .ledger dt { color: var(--night-ink-2); }
.ledger dd { margin: 0; font-size: 21px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }

.draw { transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease); }
.draw.in { transform: scaleX(1); }

/* --------------------------------------------------------------- prices */
.prices { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); }
.prices > div { padding: 40px 32px 44px; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); }
.prices > div:last-child { border-right: 0; }
.prices h3 { margin: 0 0 22px; font-size: 15px; font-weight: 500; color: var(--ink-2); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }
.prices .figure { font-size: 42px; letter-spacing: -.03em; font-weight: 500; line-height: 1; font-family: var(--font-mono); }
.prices .figure em { font-style: normal; font-size: 16px; font-weight: 400; color: var(--ink-2); letter-spacing: -.01em; font-family: var(--font-sans); }
.prices .terms { margin: 10px 0 30px; font-size: 14px; color: var(--ink-2); min-height: 20px; font-family: var(--font-mono); }
.prices ul { list-style: none; margin: 0 0 32px; padding: 0; }
.prices li { padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 15px; color: var(--ink-2); }
.prices li:last-child { border-bottom: 0; }
.prices li b { color: var(--ink); font-weight: 500; }
@media (max-width: 900px) { .prices { grid-template-columns: 1fr; } .prices > div { border-right: 0; } }

/* ----------------------------------------------------------------- misc */
.steps { list-style: none; margin: 30px 0 0; padding: 0; counter-reset: none; }
.steps li { padding: 18px 0; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: 17px; }
.chapter.night .steps li { border-top-color: var(--rule-dark); }
.footnote { margin-top: 30px; font-size: 14px; line-height: 1.6; color: var(--ink-2); max-width: 62ch; font-family: var(--font-mono); }

/* Editorial side-notes that break the grid on wide screens. */
.margin-note {
  float: right;
  clear: right;
  width: 16ch;
  margin-right: -20ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  font-family: var(--font-mono);
  border-top: 1px solid var(--accent);
  padding-top: 8px;
}
@media (max-width: 1200px) { .margin-note { float: none; width: auto; margin: 20px 0; border-top: 0; border-left: 2px solid var(--accent); padding: 0 0 0 14px; } }

.qa { border-top: 1px solid var(--rule); }
.qa details { border-bottom: 1px solid var(--rule); }
.qa summary { cursor: pointer; list-style: none; padding: 26px 0; font-size: 21px; letter-spacing: -.018em; display: flex; justify-content: space-between; gap: 28px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; width: 13px; height: 13px; flex: none; margin-top: 9px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: rotate(45deg); transition: transform .4s var(--ease); }
.qa details[open] summary::after { transform: rotate(225deg); }
.qa details p { margin: 0 0 28px; max-width: 62ch; color: var(--ink-2); font-size: 17px; }

footer { border-top: 1px solid var(--rule); padding: 44px 0 72px; font-size: 13px; color: var(--ink-2); font-family: var(--font-mono); }
footer .row { display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
footer .row a:hover { color: var(--ink); }
footer .cols { display: flex; gap: 34px; flex-wrap: wrap; }

/* Entrance: short travel, long ease. Nothing bounces. */
.enter { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.enter.in { opacity: 1; transform: none; }
.enter.s1 { transition-delay: .08s } .enter.s2 { transition-delay: .16s } .enter.s3 { transition-delay: .24s }

/* ================================================================ motion */
@view-transition { navigation: auto; }
.masthead { view-transition-name: masthead; }
.wordmark img { view-transition-name: mark; }
::view-transition-old(root) { animation: vt-out .28s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .42s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 50;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  opacity: .85;
}
@supports (animation-timeline: scroll()) {
  .progress { animation: fill linear; animation-timeline: scroll(root block); }
  @keyframes fill { to { transform: scaleX(1); } }
}

.split { display: inline-block; overflow: hidden; vertical-align: bottom; }
.split > i {
  display: inline-block; font-style: inherit;
  transform: translateY(105%); transition: transform .82s var(--ease);
}
.split.in > i { transform: none; }

/* -------------------------------------------------------- pinned sequence */
.sequence { border-top: 1px solid var(--rule); background: var(--paper-2); }
.sequence > .page { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: start; }
.stage { position: sticky; top: 96px; padding: 96px 0; }
.stage h2 { margin: 0 0 30px; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.05; letter-spacing: -.026em; font-weight: 500; max-width: 15ch; }
.stage .slab { margin-top: 0; border-color: var(--rule-dark); background: #08080b; border-left: 2px solid var(--accent); border-radius: 4px 10px 10px 4px; }
.stage .slab pre { color: var(--night-ink); min-height: 132px; }

.beats { padding: 96px 0; }
.beat {
  min-height: 58vh; display: flex; flex-direction: column; justify-content: center;
  border-top: 1px solid var(--rule);
  opacity: .34; transition: opacity .55s var(--ease);
}
.beat:first-child { border-top: 0; }
.beat.live { opacity: 1; }
.beat h3 { margin: 0 0 14px; font-size: 23px; letter-spacing: -.02em; font-weight: 500; }
.beat p { margin: 0; color: var(--ink-2); font-size: 17px; max-width: 40ch; text-wrap: pretty; }
.beat .figure {
  margin-top: 22px; font-size: clamp(34px, 4.2vw, 50px); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1; font-weight: 500;
  font-family: var(--font-mono);
}
.beat .figure small { font-size: 15px; letter-spacing: -.01em; color: var(--ink-2); display: block; margin-top: 10px; font-weight: 400; font-family: var(--font-sans); }
@media (max-width: 900px) {
  .sequence > .page { grid-template-columns: 1fr; gap: 0; }
  .stage { position: static; padding: 76px 0 0; }
  .beats { padding: 40px 0 76px; }
  .beat { min-height: 0; padding: 34px 0; opacity: 1; }
}

@supports (animation-timeline: view()) {
  .chapter h2 { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
  @keyframes drift { from { transform: translateY(26px); } to { transform: translateY(-10px); } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .enter { opacity: 1; transform: none; }
  .draw { transform: scaleX(1); }
  .split > i { transform: none; }
  .beat { opacity: 1; }
  .progress { display: none; }
  .chapter h2 { transform: none; }
  body::before { display: none; }
}

/* ------------------------------------------------------------ screenshots */
.shot { margin: 34px 0 0; }
.shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule-dark); border-radius: 8px; background: #08080b;
  /* Slight physical shadow so it feels like a screen on a desk, not a floating card. */
  box-shadow: 0 18px 42px -12px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.4);
}
.shot figcaption { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; font-family: var(--font-mono); }
.shot.wide { grid-column: 1 / -1; }
.shot.narrow img { max-width: 380px; }

/* Pull quote — a human voice in the machine. */
.pull-quote {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1.35;
  color: var(--ink);
  font-style: italic;
  max-width: 28ch;
  margin: 0;
  padding: 0;
}
.pull-quote::before {
  content: "“";
  display: block;
  font-size: 64px;
  line-height: 1;
  color: var(--accent);
  font-family: var(--font-sans);
  margin-bottom: -18px;
  opacity: .7;
}
/* ---------------------------------------------------------------- buttons */
/* Cursor leads with a solid primary button and demotes everything else to a
 * text link with an arrow. That hierarchy is worth borrowing: the old site
 * gave every action the same weight, so nothing read as the next step.
 * A flat fill, not a gradient — the slop list objects to the gradient, not
 * to the button. */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 8px;
  background: var(--ink); color: var(--paper);
  font-size: 15px; font-weight: 500; letter-spacing: -.011em;
  border: 1px solid var(--ink);
  transition: transform .18s var(--ease), background .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); background: #ffffff; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule-dark); }
.btn.ghost:hover { background: transparent; border-color: var(--ink); }

/* The arrow is Cursor's most portable motif: it marks a link as forward
 * motion without needing colour or weight to do it. */
.pull.go::before {
  content: "92"; margin-right: 8px; display: inline-block;
  transition: transform .3s var(--ease);
}
.pull.go:hover::before { transform: translateX(4px); }

/* Product shots carry more of the page, so give them room and lift rather
 * than sitting flush in the column. */
.shot.hero { margin-top: 56px; }
.shot.hero img { border-color: var(--rule-dark); }
.shot figcaption { max-width: 62ch; }

/* ----------------------------------------------------- pricing correction */
/* The three columns were not comparable at a glance:
 *   - a worded figure ("No ceiling") rendered at the same size as "5k" and
 *     swamped the row, so the cheapest plan looked smallest;
 *   - the card with one extra feature pushed its button lower than the others;
 *   - the three calls to action were a ghost button, a solid button and a bare
 *     text link, which reads as three different kinds of thing.
 */
.prices > div { display: flex; flex-direction: column; }
/* Push every call to action to the same baseline regardless of list length. */
.prices ul { flex: 1 0 auto; }
.prices > div > .btn { align-self: flex-start; margin-top: 8px; }

/* A figure made of words needs less size to carry the same weight than a
 * two-character one does. */
.figure.words { font-size: 30px; letter-spacing: -.02em; line-height: 1.15; }
.figure.words em { display: block; margin-top: 6px; }

/* Reserve one box for every figure and sit the content on its floor, so a
 * one-line "5k" and a two-line "No ceiling" both put the line beneath them at
 * the same height. Without this the three columns drift out of step and the
 * eye cannot compare them. */
.prices .figure {
  min-height: 78px;
  display: flex; flex-direction: column; justify-content: flex-end;
}

/* Only the recommended plan is solid; the other two are equals beside it. */
.prices .btn { min-width: 132px; justify-content: center; }

/* ------------------------------------------------- tiers that do not exist yet */
/* A plan you cannot buy must not look like a button you can press. Same shape as
 * the real call to action so the columns still align, but visibly inert. */
.btn.soon {
  background: none;
  border: 1px dashed var(--rule);
  color: var(--ink-3, #8a8a94);
  cursor: default;
  font-style: italic;
}
.btn.soon:hover { background: none; transform: none; }