@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap");
/* ==========================================================================
   AI with Pelumi — styles
   Tokens per PRD.md v4 (black, white and green; light by day, dark by night)
   ========================================================================== */

:root {
  /* Light theme: Pure White ground #FFFFFF · Black ink text · Neutral grey structure
     Token names kept from the dark build — --black is the page ground,
     --white is the text ink — so every component follows the flip.
     Cards share the white ground and read through their 1px borders. */
  --black: #ffffff;
  --carbon: #ffffff; /* card fill */
  --line: rgba(11, 12, 16, 0.12);
  --white: #0b0c10;  /* text ink */
  --grey: #5b5d64;
  --green: #0f9a63;  /* the one accent colour, same as the home page */
  --pill: #0b0c10;   /* primary button fill */
  --pill-ink: #ffffff;
  --accent: #0b0c10; /* brand accent = the logo's ink; site is monochrome since the 2026-07 rebrand */
  --accent-tint: rgba(0, 0, 0, 0.07);
  --red-muted: #c0564a;
  --glass-grad: #ffffff;
  /* Metallic system — dark ink chrome on a white ground */
  --chrome-grad: linear-gradient(100deg, #000000 0%, #161616 28%, #3d3d3d 48%, #0d0d0d 66%, #000000 100%);
  --metal-face: linear-gradient(transparent, transparent);
  --metal-edge: 0 0 0 transparent;
  --steel-rule: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0));
  --font-sans: "Geist", -apple-system, "Segoe UI", sans-serif; /* headlines + body */
  --font-mono: "Geist Mono", "SF Mono", ui-monospace, "Menlo", monospace; /* body + labels */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset & base ---------- */

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

/* overflow-x on the root is what iOS Safari actually honours — body
   alone still lets full-bleed layers rubber-band the page sideways.
   `hidden` is the fallback for Safari < 16, `clip` avoids creating a
   scroll container on everything newer. */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Pure-white backdrop with the faintest settle toward the foot of the
   page — just enough that the frame doesn't feel airless. Fixed layer
   instead of background-attachment (which iOS Safari ignores). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 62%, #fafafa 100%);
}

/* Radio static: procedural grain laid over the whole frame like film,
   flickering in hard steps like an analog channel. Screen blend means it
   speckles the dark sky and surfaces but can't dirty white text. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60; /* over content, under the glass cursor (99) */
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.9' intercept='-0.45'/%3E%3CfeFuncG type='linear' slope='1.9' intercept='-0.45'/%3E%3CfeFuncB type='linear' slope='1.9' intercept='-0.45'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: 0.055; /* multiply on a light ground needs a far lighter touch */
  mix-blend-mode: multiply;
}

@keyframes radio-static {
  0%   { background-position: 0 0; }
  14%  { background-position: -46px 28px; }
  28%  { background-position: 34px -58px; }
  42%  { background-position: -72px -20px; }
  56%  { background-position: 58px 44px; }
  70%  { background-position: -24px 66px; }
  84%  { background-position: 40px -36px; }
  100% { background-position: 0 0; }
}

/* keep the grain but stop the flicker where it can cost battery or comfort */
@media (max-width: 600px), (hover: none) {
  body::after { animation: none; }
}

img, svg { display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; }
input { font: inherit; }

h1, h2, h3 { font-family: var(--font-sans); font-weight: 600; line-height: 1.08; letter-spacing: -0.03em; }

/* Display type: solid ink (the chrome gradient read as generated) */
h1, h2 {
  color: var(--white);
}
h1 { font-size: clamp(2.125rem, 1rem + 4.5vw, 3.4375rem); max-width: 17ch; margin-inline: auto; }
h2 { font-size: clamp(1.8rem, 1rem + 3vw, 3rem); }
h3 { font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem); letter-spacing: -0.02em; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

::selection { background: #000000; color: #ffffff; }

/* ---------- Utility type ---------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

/* ---------- Strict grid (PRD 1.3) ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
  padding-inline: 2rem;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
}
@media (min-width: 601px) {
  .grid { grid-template-columns: repeat(12, 1fr); }
}
@media (min-width: 1025px) {
  .grid { grid-template-columns: repeat(24, 1fr); gap: 2rem; padding-inline: 4rem; }
}
.grid > * { grid-column: 1 / -1; }

/* Custom glass cursor removed (2026-07-05, Pelumi's call): the native
   cursor reads more human — aiwithremy.com uses no cursor effect either. */

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.5rem 2rem;
  z-index: 10;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0));
}
@media (min-width: 1025px) { .site-header { padding: 2rem 4rem; } }

.wordmark {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.wordmark .amp { color: var(--accent); }
.wordmark img { height: 1.75rem; width: auto; display: block; }

/* ---------- S1 · Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  align-content: center;
  padding-top: 6rem;
  padding-bottom: 4rem;
}

/* The pill + headline + sub sit in their own positioned block so the
   globe centres on the words alone — the signup form below can never
   end up inside the circle, whatever the device size. */
.hero-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* ASCII globe (shopify.vc hero reference, redrawn in our palette) */
.hero-globe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(92vw, 46rem);
  height: min(92vw, 46rem);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1; /* behind the copy it is anchored to */
}

/* never wider than the phone screen — an overspilling circle is what
   caused the sideways scroll wobble on iOS */
@media (max-width: 600px) {
  .hero-globe {
    width: 100vw;
    height: 100vw;
  }
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
@media (min-width: 1025px) { .hero-inner { grid-column: 4 / 22; } }

.eyebrow-pill {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--accent);
  padding: 0.5rem 1.1rem;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--glass-grad);
  margin-bottom: 2rem;
}

.hero-sub {
  color: var(--grey);
  max-width: 30rem; /* never wider than the 3-line headline above it */
  margin-top: 1.5rem;
  font-size: clamp(0.6875rem, 0.5875rem + 0.5vw, 0.875rem);
  font-weight: 600; /* heaviest Geist Mono weight we load — keeps it legible over the globe */
}

/* ---------- Signup form (hero + mid-page) ---------- */

.signup-form {
  display: flex;
  width: 100%;
  max-width: 30rem;
  margin-top: 2.5rem;
  padding: 0.375rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--metal-face), var(--carbon);
  box-shadow: var(--metal-edge);
  transition: border-color 0.3s;
}
.signup-form:focus-within { border-color: var(--accent); }

.signup-form input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--white);
  padding: 0.75rem 1.25rem;
}
.signup-form input::placeholder { color: var(--grey); }
.signup-form input:focus { outline: none; }

/* Kill the white browser-autofill fill inside the dark pill */
.signup-form input:-webkit-autofill,
.signup-form input:-webkit-autofill:hover,
.signup-form input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--carbon) inset;
  box-shadow: 0 0 0 1000px var(--carbon) inset;
  -webkit-text-fill-color: var(--white);
  caret-color: var(--white);
  border-radius: 6px;
  transition: background-color 999999s;
}
.signup-form input:autofill {
  box-shadow: 0 0 0 1000px var(--carbon) inset;
  -webkit-text-fill-color: var(--white);
}

/* The post-signup masterclass link wears the same chrome as the submit button
   — it is the one thing to press once the form is done, so it should read as
   the primary action, not as body copy with a link in it. */
.signup-form button,
.signup-form .masterclass-cta {
  background: #000000;
  color: #ffffff; /* white ink on the black pill regardless of theme tokens */
  border: 0;
  border-radius: 6px;
  padding: 0.75rem 1.75rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s;
}
.signup-form .masterclass-cta {
  display: inline-block;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}
.signup-form button:hover,
.signup-form .masterclass-cta:hover {
  background: #2b2b2b;
}

/* Sits under every signup form. Says what the button actually does, and that
   the masterclass costs money, so neither the offer nor the fact that it is
   sold is sprung on someone. Quiet by design — it explains, it doesn't sell. */
.signup-note {
  max-width: 30rem;
  margin: 1rem auto 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--grey);
}
.signup-popup-card .signup-note {
  max-width: 20rem;
  font-size: 0.6875rem;
}

/* Why the signup failed, in the reader's words. Same type as the success
   note; the one muted red on an otherwise monochrome page, because this is
   the only string that has to read as a problem. */
.signup-error {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--red-muted);
}

/* Signed-up state. The pill becomes a card: two stacked lines never sat
   comfortably inside a 99px radius, and the softer corner reads as a
   different, finished thing rather than a form still waiting on you. */
.signup-form.is-done {
  border-color: var(--accent);
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  border-radius: 1.5rem;
  padding: 1.4rem 1.25rem 1.25rem;
}
.signup-form .form-success {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-align: center;
}

@media (max-width: 600px) {
  .signup-form { flex-direction: column; gap: 0.5rem; border-radius: 1.25rem; padding: 0.5rem; }
  .signup-form input { padding: 0.85rem 1rem; text-align: center; }
  .signup-form button { width: 100%; padding: 0.95rem; }
  /* Full-width tap target, and the label wraps instead of overflowing the
     card on a narrow phone. */
  .signup-form .masterclass-cta { width: 100%; padding: 0.95rem 1rem; text-align: center; white-space: normal; }
  .signup-form.is-done { padding: 1.25rem 1rem 1rem; }
}

.micro-trust {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600; /* heaviest Geist Mono weight we load */
  letter-spacing: 0.08em;
  color: var(--grey);
}

.pulse-dot {
  width: 0.45rem; height: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- Pipeline spine (signature) ---------- */

.spine {
  position: relative;
  width: 1px;
  height: 6rem;
  margin: 0.5rem auto;
  background: var(--line);
}
.spine::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--accent), rgba(0, 0, 0, 0.2));
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1.1s var(--ease-out);
}
.spine-node {
  position: absolute;
  bottom: -0.3rem; left: 50%;
  width: 0.55rem; height: 0.55rem;
  transform: translateX(-50%) rotate(45deg);
  background: var(--line);
  transition: background 0.5s 0.8s, box-shadow 0.5s 0.8s;
  z-index: 1;
}
.spine.in-view::after { transform: scaleY(1); }
.spine.in-view .spine-node {
  background: var(--accent);
}

/* ---------- Scroll reveals ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
[data-reveal].in-view { opacity: 1; transform: none; }

/* ---------- Section heads ---------- */

.section-head { text-align: center; margin-bottom: clamp(3rem, 6vw, 5rem); }
.section-head h2 { max-width: 40rem; margin-inline: auto; }

.pillars, .problem, .proof { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

/* ---------- S2 · Pillars ---------- */

/* Vertical, centre-aligned — same layout rhythm as the hero */
.pillars { padding-block: clamp(1.5rem, 3vw, 2.75rem); }
.pillars .section-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}
.pillar + .pillar {
  border-top: 1px solid transparent;
  border-image: var(--steel-rule) 1;
}

.stage {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 1rem;
}
.pillar-text h3 { margin-bottom: 1rem; }
.pillar-text p:not(.stage) { color: var(--grey); max-width: 32rem; margin-inline: auto; }
.pillar-visual { width: 100%; max-width: 30rem; }

/* --- Visual: newsletter mockup --- */

.mock-newsletter {
  background: var(--metal-face), var(--carbon);
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  overflow: hidden;
}
.mock-chrome {
  display: flex;
  gap: 0.4rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--line);
}
.mock-chrome i {
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  background: var(--line);
}
.mock-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.85rem; }
.mock-subject {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 0.25rem;
}
.mock-line {
  display: block;
  height: 0.55rem;
  border-radius: 6px;
  background: var(--line);
}
.mock-line.w60 { width: 60%; } .mock-line.w70 { width: 70%; }
.mock-line.w80 { width: 80%; } .mock-line.w90 { width: 90%; }
.mock-line.w95 { width: 95%; }
.mock-line.hl {
  height: auto;
  background: var(--accent-tint);
  border-radius: 0.4rem;
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.6rem 0.9rem;
}

/* Content-format rows inside the Content Engine mock */
.format-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.format-tag {
  flex-shrink: 0;
  min-width: 6.5em;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--grey);
}

/* --- Visual: Context → Prompt → Image pipeline --- */

.mock-flow {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 20rem;
  margin-inline: auto;
  text-align: left;
}
.flow-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}
.flow-tag {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.65rem;
  border-radius: 0.35rem;
  border: 1px solid var(--line);
  background: var(--carbon);
  color: var(--white);
}
.flow-tag--out {
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
}
.flow-card {
  width: 100%;
  background: var(--metal-face), var(--carbon);
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  padding: 1rem 1.25rem;
}
.flow-card p {
  max-width: 30ch;
  margin-inline: auto;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--white);
}
.flow-card--image {
  display: flex;
  justify-content: center;
  padding: 0.9rem 1.25rem 0.75rem;
}
.flow-portrait { width: min(10rem, 60%); height: auto; }

/* connector: spine echo — hairline through a three-dot node */
.flow-link {
  position: relative;
  height: 1.6rem;
  width: 100%;
}
.flow-link::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.flow-node {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 0.3rem;
  padding: 0.32rem 0.6rem;
  background: var(--carbon);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.flow-node i {
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.85;
}

/* --- Visual: agents hub diagram (transparent, sits on the page sky) --- */

.agents-map {
  width: 100%;
  height: auto;
}

/* --- Visual: AI workforce illustration --- */

.mock-workforce {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  overflow: hidden;
}
.mock-workforce img {
  width: 100%;
  height: auto;
}
/* The looping animation that stands in for the still. It is a self-contained
   document in an iframe, so it needs its own box: an iframe has no intrinsic
   aspect ratio and would otherwise collapse to the 150px default height.
   pointer-events: none keeps it decorative — no scroll trapping, no clicks
   landing inside the frame.

   The iframe is deliberately larger than the box it shows through, and the
   overflow is clipped. The export centres its artwork inside a fixed 78x44px
   margin — fixed in pixels, so it is 8% of the frame on desktop but a quarter
   of it on a phone, and no percentage rule can undo it. Growing the iframe by
   exactly that margin and pulling it back by half cancels it at every width,
   and stays exact because 78/44 is itself 16:9: the artwork ends up filling
   the box edge to edge with nothing cropped off the picture. Verified at
   1440, 1024, 390 and 360. If a future export changes that margin these two
   numbers are what to re-measure. */
.hero-anim {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.hero-anim iframe {
  position: absolute;
  top: -22px;
  left: -39px;
  width: calc(100% + 78px);
  height: calc(100% + 44px);
  border: 0;
  pointer-events: none;
}
/* One or the other, never both. The still is the fallback, so it is the one
   that hides by default; see the reduced-motion block for the swap. */
.hero-anim ~ img {
  display: none;
}

/* --- Visual: prompt terminal --- */

.mock-prompt {
  background: var(--metal-face), var(--carbon);
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  overflow: hidden;
}
.mock-prompt-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 1.25rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--grey);
}
.copy-chip {
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 0.2rem 0.7rem;
  background: var(--accent-tint);
}
.mock-prompt-body {
  padding: 1.5rem 1.25rem 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--white);
}
.caret {
  display: inline-block;
  width: 0.55em; height: 1.1em;
  margin-left: 0.3em;
  vertical-align: text-bottom;
  background: var(--accent);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- S3 · Problem grid ---------- */

.problem-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 601px) { .problem-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1025px) { .problem-grid { gap: 2rem; } }

.problem-card {
  position: relative;
  background: var(--metal-face), var(--carbon);
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  padding: 1.5rem;
  overflow: hidden;
  box-shadow: var(--metal-edge);
}
.blur-mock {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding-bottom: 1.5rem;
  filter: blur(3px);
  opacity: 0.5;
}
.blur-mock span {
  display: block;
  height: 0.55rem;
  border-radius: 6px;
  background: var(--grey);
}
.blur-mock span:nth-child(1) { width: 90%; }
.blur-mock span:nth-child(2) { width: 75%; }
.blur-mock span:nth-child(3) { width: 95%; height: 2.4rem; border-radius: 0.4rem; opacity: 0.6; }
.blur-mock span:nth-child(4) { width: 65%; }
.blur-mock span:nth-child(5) { width: 85%; }
.problem-tag {
  position: absolute;
  top: 1.1rem; right: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--accent);
  border: 1px solid var(--accent);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  padding: 0.3rem 0.75rem;
  transform: rotate(3deg);
}
.problem-note {
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  color: var(--grey);
  font-size: 0.9375rem;
}

/* ---------- S3 · Comparison ---------- */

.compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 601px) { .compare { grid-template-columns: 1fr 1fr; align-items: stretch; } }
@media (min-width: 1025px) { .compare { grid-column: 3 / 23; gap: 2rem; } }

.compare-col {
  border-radius: 0.9rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.compare-col h3 { margin-bottom: 1.5rem; font-size: 1.2rem; }
.compare-col li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding-block: 0.8rem;
}
.compare-col li + li {
  border-top: 1px solid transparent;
  border-image: var(--steel-rule) 1;
}
.compare-col svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.3rem; }

.compare-them {
  border: 1px solid var(--line);
  color: var(--grey);
}
.compare-them h3 { color: var(--grey); }
.icon-x { color: var(--red-muted); }

.compare-us {
  background: var(--metal-face), var(--carbon);
  border: 1px solid rgba(0, 0, 0, 0.45);
}
.icon-check { color: var(--accent); }

/* ---------- S3 · Letter to the reader (aiwithremy.com style) ---------- */

.letter {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

.letter-paper {
  position: relative;
  width: 100%;
  max-width: 46rem;
  /* ruled cream paper */
  background:
    repeating-linear-gradient(180deg, rgba(122, 110, 84, 0) 0 35px, rgba(122, 110, 84, 0.18) 35px 36px),
    linear-gradient(180deg, #faf6ec, #f2ecdc);
  color: #2b2c30;
  border-radius: 4px;
  padding: 54px clamp(1.5rem, 5vw, 4rem) 72px;
  font-size: 0.9375rem;
  line-height: 36px;
}
.letter-paper p + p { margin-top: 36px; }

.letter-meta { margin-bottom: 72px; }
.letter-meta div { display: flex; gap: 1rem; }
.letter-meta dt {
  flex: 0 0 5.5ch;
  color: #8d8672;
  letter-spacing: 0.08em;
}
.letter-meta dd { margin: 0; }
.letter-paper mark {
  background: rgba(0, 0, 0, 0.12);
  color: inherit;
  padding: 0.05em 0.15em;
  border-radius: 2px;
}
.letter-sign { font-weight: 600; }

.letter-stamp {
  position: absolute;
  top: -1.4rem;
  right: 1.5rem;
  transform: rotate(6deg);
  border: 1.5px dashed #b6ac93;
  background: #faf6ec;
  padding: 0.8rem 1rem;
  text-align: center;
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  line-height: 1.6;
  color: #8d8672;
}
.letter-stamp b {
  display: block;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin: 0.2rem 0;
}

/* ---------- S3 · Mid-page CTA ---------- */

.midcta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: clamp(3rem, 6vw, 5rem);
}
.icp-line {
  font-size: clamp(1.05rem, 1rem + 0.6vw, 1.3rem);
  font-weight: 500;
  max-width: 32rem;
}
.midcta .signup-form { margin-top: 1.75rem; }

/* ---------- S4 · Proof + FAQ ---------- */

.count { font-size: clamp(1.95rem, 0.75rem + 4.5vw, 3.75rem); }

/* Wall of love: full-bleed marquee, aiwithremy-style. Each track holds
   its card set twice, so translating to -50% passes exactly one copy and
   the loop restarts on identical pixels — no visible seam. Rows run in
   opposite directions; hovering anywhere pauses both. */
.love-marquee {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.love-row {
  overflow-x: clip;
  overflow-y: visible;
  padding-block: 0.5rem;
}

.love-track {
  display: flex;
  width: max-content;
  align-items: stretch;
  gap: 1rem;
  will-change: transform;
  animation: love-scroll 55s linear infinite;
}

.love-row--left  .love-track { animation-direction: normal; }
.love-row--right .love-track { animation-direction: reverse; }

@keyframes love-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.love-marquee:hover .love-track { animation-play-state: paused; }

/* lifted on hover */
.love-track .testimonial {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.love-track .testimonial:hover {
  transform: translateY(-3px);
}

@media (max-width: 600px) {
  .love-track { animation-duration: 40s; }
  .testimonial { width: 80vw; } /* Remy's mobile card width */
}

@media (prefers-reduced-motion: reduce) {
  .love-track { animation: none; }
  .love-row { overflow-x: auto; }
}

.testimonial {
  flex: 0 0 auto;
  width: clamp(280px, 28vw, 380px); /* aiwithremy.com's exact card width */
  background: var(--metal-face), var(--carbon);
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  box-shadow: var(--metal-edge);
}
.testimonial blockquote { font-size: 0.875rem; line-height: 1.55; }
.testimonial blockquote::before { content: "“"; color: var(--accent); }
.testimonial figcaption {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}

.faq {
  margin-top: clamp(3.5rem, 7vw, 6rem);
}
@media (min-width: 1025px) { .faq { grid-column: 5 / 21; } }

.faq-item {
  border-bottom: 1px solid transparent;
  border-image: var(--steel-rule) 1;
}
.faq-item:first-of-type { border-top: 1px solid transparent; }
.faq-item h3 { font-size: inherit; letter-spacing: normal; }

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  background: none;
  border: 0;
  color: var(--white);
  text-align: left;
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.25rem);
  font-weight: 500;
  padding: 1.4rem 0.25rem;
  transition: color 0.3s;
}
/* Open state reads through the plus→minus icon; the question text is
   already full ink, so no colour flip since the monochrome rebrand. */

.faq-icon {
  position: relative;
  width: 0.9rem; height: 0.9rem;
  flex-shrink: 0;
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 1.5px;
  background: currentColor;
  transition: transform 0.35s var(--ease-out);
}
.faq-icon::after { transform: rotate(90deg); }
.faq-q[aria-expanded="true"] .faq-icon::after { transform: rotate(0deg); }

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease-out);
}
.faq-a-inner { overflow: hidden; }
.faq-a-inner p {
  color: var(--grey);
  max-width: 38rem;
  padding: 0 0.25rem 1.5rem;
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }

/* ---------- S5 · Founder ---------- */

/* Founder panel follows the light theme: white plate, black type
   (was the dark anchor block until Pelumi flipped it on 2026-07-05). */
.founder { padding: clamp(1rem, 3vw, 2rem) 0 clamp(4rem, 8vw, 7rem); }

.founder-inner {
  /* brushed-metal panel: vertical grain over the machined face */
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.014) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
    var(--metal-face),
    var(--carbon);
  border: 1px solid var(--line);
  box-shadow: var(--metal-edge);
  border-radius: 1.25rem;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  row-gap: 3.5rem;
  align-content: space-between;
}
@media (min-width: 601px) {
  .founder-inner { min-height: min(85vh, 50rem); }
}
@media (min-width: 1025px) {
  .founder-inner { max-width: calc(1440px - 4rem); }
}

.founder-note { grid-column: 1 / -1; align-self: start; }
@media (min-width: 601px) { .founder-note { grid-column: 1 / 11; } }
@media (min-width: 1025px) { .founder-note { grid-column: 2 / 16; } }

.founder-line-grey {
  color: var(--grey);
  font-family: var(--font-sans);
  font-size: clamp(1.4rem, 1rem + 2vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.founder-line-white {
  color: #000000;
  font-family: var(--font-sans);
  font-size: clamp(1.4rem, 1rem + 2vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
/* dayy.com-style floating card: text left, photo filling the right edge,
   button + email on one row along the bottom of the text column */
.founder-card {
  grid-column: 1 / -1;
  align-self: end;
  display: flex;
  gap: 1.5rem;
  align-items: stretch;
  /* polished aluminum */
  background: #ffffff;
  border: 1px solid var(--line);
  color: #000000;
  border-radius: 1.25rem;
  padding: 1.5rem;
}
@media (min-width: 601px) { .founder-card { grid-column: 5 / 13; } }
@media (min-width: 1025px) { .founder-card { grid-column: 12 / 24; } }

.founder-card-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.founder-name { font-family: var(--font-sans); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.01em; }
.founder-role { color: #6a6a6a; margin-top: 0.3rem; font-size: 1.1rem; }

.founder-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
}
.btn-touch {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  background: #000000;
  color: #ffffff;
  border-radius: 6px;
  padding: 0.8rem 1.5rem;
  transition: background 0.3s;
}
.btn-touch:hover { background: #ffffff; color: #000000; box-shadow: inset 0 0 0 1px #000000; }
.founder-email {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: #9e9e9e;
}

.founder-photo {
  flex-shrink: 0;
  width: clamp(7rem, 34%, 13rem);
  border-radius: 0.9rem;
  object-fit: cover;
  object-position: center top;
}

@media (max-width: 600px) {
  .founder-card { flex-direction: column; }
  /* source headshot is square (800×800) — matching the ratio shows the
     full face instead of the 16/10 crop that chopped head and chin */
  .founder-photo { order: -1; width: 100%; aspect-ratio: 1 / 1; }
  .founder-actions { padding-top: 1.75rem; }
  .btn-touch { white-space: nowrap; }
}

/* ---------- Footer (aiwithremy.com arrangement) ---------- */

.site-footer {
  border-top: 1px solid transparent;
  border-image: var(--steel-rule) 1;
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

.footer-inner { row-gap: 3rem; align-items: start; }

.footer-brand { grid-column: 1 / -1; text-align: center; }
.footer-side {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.25rem;
}
@media (min-width: 601px) {
  .footer-brand { grid-column: 1 / 8; }
  .footer-side { grid-column: 9 / 13; align-items: flex-end; }
}
@media (min-width: 1025px) {
  .footer-brand { grid-column: 4 / 14; }
  .footer-side { grid-column: 17 / 24; }
}

.footer-mark {
  font-family: "Silkscreen", var(--font-mono);
  font-size: clamp(1.3rem, 1rem + 1.6vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: 0.04em;
  /* molten ink — same pour as the chrome headlines */
  background-image: linear-gradient(180deg, #b3b3b3 0%, #3a3a3a 55%, #000000 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 1.75rem;
}
.footer-meta {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--grey);
}
.footer-meta + .footer-meta { margin-top: 0.6rem; }
.footer-credit { color: var(--white); transition: color 0.25s; }
.footer-credit:hover { color: var(--grey); }

.socials { display: flex; gap: 0.8rem; }
.social-tile {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: var(--metal-face), var(--carbon);
  color: var(--white);
  box-shadow: var(--metal-edge);
  transition: color 0.25s, border-color 0.25s, transform 0.2s var(--ease-out);
}
.social-tile:hover { color: var(--accent); border-color: var(--accent); }
.social-tile svg { width: 1.25rem; height: 1.25rem; }

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  text-align: right;
}
.footer-nav a {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--grey);
  transition: color 0.25s;
}
.footer-nav a:hover { color: var(--white); }
@media (max-width: 600px) { .footer-nav { text-align: center; } }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero h1 { animation: none; }
  body::after { animation: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .spine::after { transition: none; }
  .spine-node { transition: none; }
  .pulse-dot, .caret { animation: none; }
  .cursor { display: none; }
  /* Swap the looping animation for the still it replaced. Hiding the iframe
     also stops it being fetched at all, so nobody on reduced motion pays for
     a 1.1MB document they will not see. */
  .hero-anim { display: none; }
  .hero-anim ~ img { display: block; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ---------- Timed signup popup ---------- */

.signup-popup {
  position: fixed;
  inset: 0;
  z-index: 80; /* over the static grain (60), under the glass cursor (99) */
  display: flex;
  overflow-y: auto; /* short landscape phones can still reach the button */
  padding: max(1.25rem, env(safe-area-inset-top))
           max(1.25rem, env(safe-area-inset-right))
           max(1.25rem, env(safe-area-inset-bottom))
           max(1.25rem, env(safe-area-inset-left));
}
.signup-popup[hidden] { display: none; }

body.popup-open { overflow: hidden; }

.signup-popup-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 15, 0.45);
  opacity: 0;
  transition: opacity 0.25s;
}

.signup-popup-card {
  position: relative;
  margin: auto; /* centers; keeps the card reachable if taller than the screen */
  width: 100%;
  max-width: 27rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--metal-face), var(--carbon);
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  padding: 2.75rem 2rem 2rem;
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  outline: none;
}
.signup-popup.is-open .signup-popup-backdrop { opacity: 1; }
.signup-popup.is-open .signup-popup-card { opacity: 1; transform: none; }

.signup-popup-card .eyebrow-pill { margin-bottom: 1.25rem; }

.signup-popup-card h2 {
  font-family: var(--font-sans);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.signup-popup-sub {
  color: var(--grey);
  font-size: 0.875rem;
  max-width: 20rem;
  margin-top: 0.75rem;
}

.signup-popup-card .signup-form { margin-top: 1.5rem; }

.signup-popup-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--carbon);
  color: var(--grey);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.signup-popup-close:hover { color: var(--white); border-color: var(--white); }
.signup-popup-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 600px) {
  .signup-popup-card { padding: 2.5rem 1.25rem 1.5rem; border-radius: 1.25rem; }
  .signup-popup-card h2 { font-size: 1.35rem; }
}

/* Honeypot field for the signup forms — visually gone, present for bots. */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ==========================================================================
   Newsletter archive + post pages (/posts/)
   Every issue lives on this domain now. The old footer link pointed at
   Substack, which meant the strongest proof the site has — the writing —
   was hosted on somebody else's page with somebody else's subscribe box on
   it. Substack keeps the posts too; it's a social account now, next to X
   and LinkedIn in the footer.
   Nothing below invents a colour or a typeface: same tokens as index.html.
   ========================================================================== */

/* ---------- Shared page furniture ---------- */

/* The header is fixed, so any page that opens on copy instead of the hero
   needs its own top pad or the wordmark sits on the first line. */
.page-head {
  padding-block: clamp(7rem, 13vw, 9.5rem) clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}
.page-head-inner { grid-column: 1 / -1; }
@media (min-width: 1025px) { .page-head-inner { grid-column: 5 / 21; } }

.page-head h1 {
  font-size: clamp(2rem, 1rem + 3.6vw, 3.2rem);
  max-width: 18ch;
  margin-inline: auto;
}
.page-head .eyebrow-pill { display: inline-block; margin-bottom: 1.5rem; }
.page-lede {
  color: var(--grey);
  font-size: 0.9375rem;
  line-height: 1.7;
  max-width: 36rem;
  margin: 1.25rem auto 0;
}

/* Back link — mono caps, same language as .footer-nav. */
.back-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  transition: color 0.25s;
}
.back-link:hover { color: var(--white); }

/* ---------- Archive ---------- */

.archive { padding-bottom: clamp(4rem, 8vw, 6rem); }
.archive-inner { grid-column: 1 / -1; }
@media (min-width: 1025px) { .archive-inner { grid-column: 4 / 22; } }

.archive-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

/* Featured pair. Two cards on desktop, stacked on phones. The two Pelumi
   picked sit here rather than in the run of the list, because a reader who
   lands cold should hit the best thing first, not the newest thing. */
.featured-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: clamp(3.5rem, 7vw, 5rem);
}
@media (min-width: 801px) { .featured-grid { grid-template-columns: 1fr 1fr; } }

.post-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--metal-face), var(--carbon);
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.post-card:hover {
  border-color: var(--accent);
}
.post-card-thumb {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  object-position: center top;
  border-bottom: 1px solid var(--line);
  background: #f4f4f4;
}
.post-card-text { padding: 1.5rem 1.5rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
.post-card h3 {
  font-size: 1.25rem;
  line-height: 1.2;
  margin: 0.85rem 0 0.7rem;
}
.post-card p {
  color: var(--grey);
  font-size: 0.875rem;
  line-height: 1.65;
  margin-bottom: 1.25rem;
}
.post-card .post-read { margin-top: auto; }

/* Date + read time. One line, mono, grey — the same register as .stage. */
.post-meta {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}
.post-meta .dot { margin: 0 0.5rem; opacity: 0.5; }

.post-read {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
}
.post-card:hover .post-read { color: var(--accent); }

/* The run of every issue. A row, not a card: date on the left where it can
   be scanned, thumbnail small enough that ten of them still fit on a screen. */
.post-list { display: grid; }
.post-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2rem) 0;
  border-top: 1px solid var(--line);
  transition: opacity 0.3s;
}
.post-row:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 701px) {
  .post-row { grid-template-columns: 8rem 1fr 12rem; gap: 2rem; align-items: start; }
}
.post-row:hover .post-row-title { color: var(--grey); }
.post-row-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center top;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: #f4f4f4;
}
@media (min-width: 701px) { .post-row-thumb { order: 1; } }
/* On a phone the row has no side column to put the thumbnail in, so it goes
   on top and the row reads as a card. */
@media (max-width: 700px) {
  .post-row-thumb { order: -1; aspect-ratio: 16 / 9; }
  .post-row-date { padding-top: 0; }
}
/* h2 inherits the chrome-plated fill from the global rule, which paints the
   text transparent — it can't then take a hover colour. Rows want plain ink. */
.post-row-title {
  background-image: none;
  color: var(--white);
  -webkit-text-fill-color: currentColor;
  font-family: var(--font-sans);
  font-size: clamp(1.1rem, 0.9rem + 0.7vw, 1.4rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  transition: color 0.25s;
}
.post-row-sub {
  color: var(--grey);
  font-size: 0.875rem;
  line-height: 1.65;
  margin-top: 0.6rem;
}
.post-row-date { padding-top: 0.2rem; }

/* ---------- Single post ---------- */

/* Same top clearance as .page-head — the header is fixed. */
.post { padding-block: clamp(7rem, 13vw, 9.5rem) clamp(3rem, 6vw, 4rem); }
.post-head-inner { grid-column: 1 / -1; text-align: center; }
@media (min-width: 1025px) { .post-head-inner { grid-column: 6 / 20; } }

.post-head-inner h1 {
  font-size: clamp(1.85rem, 1rem + 3.2vw, 2.9rem);
  max-width: 22ch;
  margin: 1.25rem auto 0;
}
.post-standfirst {
  color: var(--grey);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 34rem;
  margin: 1.25rem auto 0;
}

.post-cover-wrap { grid-column: 1 / -1; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 1025px) { .post-cover-wrap { grid-column: 4 / 22; } }
.post-cover-wrap img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 1rem;
}

/* Body measure. Mono at 17px runs long, so the column is tighter than the
   grid would give it — roughly 68 characters. */
.post-body { grid-column: 1 / -1; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 1025px) { .post-body { grid-column: 7 / 19; } }

.post-body > * + * { margin-top: 1.35rem; }
.post-body p { color: #262626; line-height: 1.75; }
.post-body strong { color: var(--white); font-weight: 600; }
.post-body em { font-style: italic; }

.post-body h2 {
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem);
  margin-top: clamp(2.75rem, 5vw, 3.5rem);
  letter-spacing: -0.025em;
}
.post-body h3 { font-size: 1.2rem; margin-top: 2.5rem; }
/* Substack's h5 is a small centred aside, not a heading level we use. */
.post-body h5 {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  color: var(--grey);
  margin-top: 2.25rem;
}

.post-body a {
  color: var(--white);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 0.25s;
}
.post-body a:hover { color: var(--grey); }

.post-body ul, .post-body ol { padding-left: 1.4rem; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li { color: #262626; line-height: 1.75; }
.post-body li + li { margin-top: 0.6rem; }
.post-body li > p + p { margin-top: 0.6rem; }
.post-body li::marker { color: var(--grey); }

.post-body blockquote {
  border-left: 2px solid var(--white);
  padding: 0.15rem 0 0.15rem 1.25rem;
  color: var(--white);
  font-size: 0.9375rem;
}
.post-body blockquote p + p { margin-top: 0.75rem; }

/* Prompts. These are the thing readers came to copy, so they get a real
   block with its own scroll rather than wrapping into the prose. */
.post-body pre {
  background: #f6f6f6;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: 1.25rem;
  overflow-x: auto;
}
.post-body pre code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  white-space: pre;
  color: #1a1a1a;
}
.post-body :not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--accent-tint);
  border-radius: 0.35rem;
  padding: 0.1em 0.4em;
}

.post-body hr {
  border: 0;
  height: 1px;
  background: var(--steel-rule);
  margin-block: clamp(2.5rem, 5vw, 3.25rem);
}

.post-body figure { margin-block: clamp(2rem, 4vw, 2.75rem); }
.post-body figure img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
}
.post-body figcaption {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--grey);
  text-align: center;
  margin-top: 0.85rem;
}

/* End-of-post subscribe. Same pill form as the hero, boxed so it reads as
   the end of the piece rather than one more paragraph. */
.post-outro {
  grid-column: 1 / -1;
  margin-top: clamp(3.5rem, 7vw, 5rem);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: var(--metal-face), var(--carbon);
  padding: clamp(2rem, 5vw, 3rem);
  text-align: center;
}
@media (min-width: 1025px) { .post-outro { grid-column: 6 / 20; } }
.post-outro h2 { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem); }
.post-outro p { color: var(--grey); font-size: 0.875rem; margin-top: 0.85rem; }
.post-outro .signup-form { margin-inline: auto; }
.post-outro .signup-note { margin-inline: auto; }

.post-nav {
  grid-column: 1 / -1;
  margin-top: clamp(3rem, 6vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
@media (min-width: 1025px) { .post-nav { grid-column: 6 / 20; } }

/* ---------- Home: latest issues strip ---------- */

.issues { padding-block: clamp(3rem, 7vw, 5rem); }
.issues-grid {
  grid-column: 1 / -1;
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
@media (min-width: 1025px) { .issues-grid { grid-column: 3 / 23; } }
@media (min-width: 801px) { .issues-grid { grid-template-columns: repeat(3, 1fr); } }
.issues-more { grid-column: 1 / -1; text-align: center; margin-top: clamp(2rem, 4vw, 2.75rem); }

/* ---------- Claude 101 unlock page ---------- */

.unlock-inner { grid-column: 1 / -1; max-width: 44rem; margin-inline: auto; width: 100%; }

.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 1.1rem;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--metal-face), var(--carbon);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  text-align: left;
}
.step + .step { margin-top: 1rem; }
.step-num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--grey);
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 2rem; height: 2rem;
  display: grid;
  place-items: center;
}
.step h2 { font-size: 1.0625rem; letter-spacing: -0.02em; }
.step p { color: var(--grey); font-size: 0.875rem; line-height: 1.65; margin-top: 0.5rem; }
.step-body { min-width: 0; }
.step-body .signup-form { margin-top: 1.1rem; }
.step-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.1rem; }

/* The tick is the reader's own word that they did it. No tracking pixel
   could tell us anyway, and pretending otherwise would be theatre. */
.step-check {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--grey);
  cursor: pointer;
}
.step-check input { accent-color: var(--accent); width: 1rem; height: 1rem; }
.step:has(.step-check input:checked) { border-color: var(--accent); }
.step:has(.step-check input:checked) .step-num { border-color: var(--accent); color: var(--white); }

.unlock {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  text-align: center;
}
.unlock[hidden] { display: none; }
.unlock h2 { font-size: 1.35rem; }
.unlock p { color: var(--grey); font-size: 0.875rem; margin-top: 0.75rem; }
.unlock .btn-touch { margin-top: 1.5rem; display: inline-block; }
.unlock-locked {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--grey);
  text-align: center;
}


/* ==========================================================================
   v4 · light by day, dark by night (2026-10-02)
   The theme is set on <html data-theme> by a tiny script in each page head,
   before paint. Everything above is the light theme; this block is the
   dark one plus the few places that had colours written in directly.
   ========================================================================== */
::selection { background: var(--white); color: var(--black); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.pulse-dot, .dot { background: var(--green); }
.signup-form button,
.signup-form .masterclass-cta,
.btn-touch { background: var(--pill); color: var(--pill-ink); border-radius: 999px; }
.btn-touch:hover { background: var(--black); color: var(--white); box-shadow: inset 0 0 0 1px var(--white); }

[data-theme="dark"] {
  --black: #0d0e11;   /* page ground */
  --carbon: #15171c;  /* card fill */
  --line: rgba(236, 234, 229, 0.12);
  --white: #eceae5;   /* text ink */
  --grey: #9b9a95;
  --green: #5be3a6;
  --accent: #eceae5;
  --accent-tint: rgba(236, 234, 229, 0.08);
  --glass-grad: #15171c;
  --pill: #eceae5;
  --pill-ink: #0d0e11;
  --chrome-grad: linear-gradient(100deg, #eceae5 0%, #ffffff 40%, #cfcdc8 100%);
  --steel-rule: linear-gradient(90deg, rgba(236, 234, 229, 0), rgba(236, 234, 229, 0.22) 50%, rgba(236, 234, 229, 0));
  color-scheme: dark;
}
[data-theme="dark"] body::before { background: linear-gradient(180deg, #0d0e11 0%, #0d0e11 62%, #111318 100%); }
[data-theme="dark"] body::after { mix-blend-mode: screen; opacity: 0.035; }
[data-theme="dark"] .site-header { background: linear-gradient(180deg, rgba(13, 14, 17, 0.92), rgba(13, 14, 17, 0)); }
[data-theme="dark"] .wordmark img,
[data-theme="dark"] img[src*="logo.png"],
[data-theme="dark"] img[src*="email-logo-mark"] { filter: invert(1); }
[data-theme="dark"] .post-body p,
[data-theme="dark"] .post-body li { color: #d6d4cf; }
[data-theme="dark"] .post-body pre,
[data-theme="dark"] .post-card-thumb,
[data-theme="dark"] .post-row-thumb { background: #15171c; }
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select { background: #15171c; color: var(--white); border-color: var(--line); }
[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--grey); }

/* The sun/moon button script.js adds to every page's header. */
.theme-toggle {
  position: fixed; top: 1.1rem; right: 1.1rem; z-index: 70;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  color: var(--white); background: color-mix(in oklab, var(--carbon) 82%, transparent);
  border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.theme-toggle svg { display: block; }
[data-theme="light"] .theme-toggle .i-sun, [data-theme="dark"] .theme-toggle .i-moon,
:root:not([data-theme]) .theme-toggle .i-sun { display: none; }
@media (min-width: 1025px) { .theme-toggle { top: 1.6rem; right: 2rem; } }

/* Pages that style their own .btn-solid in an inline <style> still follow
   the theme: the extra `html` makes these win over the page's own rule. */
html .btn { border-radius: 999px; }
html .btn-solid { background: var(--pill); color: var(--pill-ink); }
html .btn-solid:hover:not(:disabled) { background: var(--pill); opacity: 0.88; }