/* ==========================================================================
   AI with Pelumi — styles
   Tokens per DESIGN-PLAN.md / PRD v2.0
   ========================================================================== */

: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: #e0e0e0;
  --white: #000000;  /* text ink */
  --grey: #6a6a6a;
  --orange: #e58848;
  --orange-tint: rgba(229, 136, 72, 0.12);
  --red-muted: #c0564a;
  --glass-grad: linear-gradient(180deg, #ffffffd9, #ffffffa6);
  /* 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(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0) 42%);
  --metal-edge: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  --steel-rule: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0));
  --font-sans: "Inter", -apple-system, "Segoe UI", sans-serif; /* headlines */
  --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-mono);
  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;
  animation: radio-static 0.55s steps(1, end) infinite;
}

@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; }

/* Chrome-plated display type */
h1, h2 {
  background-image: var(--chrome-grad);
  background-size: 220% 100%;
  background-position: 50% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero h1 { animation: chrome-sheen 9s ease-in-out infinite; }
@keyframes chrome-sheen {
  0%   { background-position: 130% 0; }
  50%  { background-position: -30% 0; }
  100% { background-position: 130% 0; }
}
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(--orange);
  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: #e6d2d8; color: #000000; }

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

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  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(--orange); }
.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(--orange);
  padding: 0.5rem 1.1rem;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--glass-grad);
  -webkit-backdrop-filter: blur(2rem);
  backdrop-filter: blur(2rem);
  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: 99px;
  background: var(--metal-face), var(--carbon);
  box-shadow: var(--metal-edge);
  transition: border-color 0.3s;
}
.signup-form:focus-within { border-color: var(--orange); }

.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: 99px;
  transition: background-color 999999s;
}
.signup-form input:autofill {
  box-shadow: 0 0 0 1000px var(--carbon) inset;
  -webkit-text-fill-color: var(--white);
}

.signup-form button {
  background: linear-gradient(180deg, #f4ab70 0%, #e58848 52%, #c9702f 100%);
  color: #000000; /* black ink on orange regardless of theme tokens */
  border: 0;
  border-radius: 99px;
  padding: 0.75rem 1.75rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(96, 47, 10, 0.55);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s;
}
.signup-form button:hover {
  transform: scale(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(96, 47, 10, 0.55),
    0 0 24px rgba(229, 136, 72, 0.4);
}

.signup-form.is-done { border-color: var(--orange); justify-content: center; }
.signup-form .form-success {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--orange);
  padding: 0.85rem 1rem;
  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; }
}

.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(--orange);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 136, 72, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(229, 136, 72, 0); }
}

/* ---------- 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(--orange), rgba(229, 136, 72, 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(--orange);
  box-shadow: 0 0 12px rgba(229, 136, 72, 0.6);
}

/* ---------- 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(--orange);
  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;
  box-shadow: var(--metal-edge), 0 24px 60px rgba(0, 0, 0, 0.12);
}
.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: 99px;
  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(--orange-tint);
  border-left: 2px solid var(--orange);
  border-radius: 0 0.4rem 0.4rem 0;
  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;
  box-shadow: var(--metal-edge), 0 24px 60px rgba(0, 0, 0, 0.12);
}
.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: 99px;
}
.flow-node i {
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: var(--orange);
  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;
  box-shadow: var(--metal-edge), 0 24px 60px rgba(0, 0, 0, 0.12);
}
.mock-workforce img {
  width: 100%;
  height: auto;
}

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

.mock-prompt {
  background: var(--metal-face), var(--carbon);
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  overflow: hidden;
  box-shadow: var(--metal-edge), 0 24px 60px rgba(0, 0, 0, 0.12);
}
.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(--orange);
  border: 1px solid var(--orange);
  border-radius: 99px;
  padding: 0.2rem 0.7rem;
  background: var(--orange-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(--orange);
  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: 99px;
  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(--orange);
  border: 1px solid var(--orange);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 99px;
  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(229, 136, 72, 0.45);
  box-shadow: var(--metal-edge), 0 0 48px rgba(229, 136, 72, 0.08);
}
.icon-check { color: var(--orange); }

/* ---------- 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;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.14);
  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(229, 136, 72, 0.24);
  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;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}
.letter-stamp b {
  display: block;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  color: var(--orange);
  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);
  box-shadow: var(--metal-edge), 0 14px 30px -12px rgba(0, 0, 0, 0.2);
}

@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(--orange); }
.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;
}
.faq-q[aria-expanded="true"] { color: var(--orange); }

.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: linear-gradient(160deg, #ffffff 0%, #f1f1f1 55%, #e4e4e4 100%);
  color: #000000;
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(135, 135, 135, 0.35),
    0 30px 70px rgba(0, 0, 0, 0.5);
}
@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: linear-gradient(180deg, #1f1f1f, #000000 60%);
  color: #ffffff;
  border-radius: 99px;
  padding: 0.8rem 1.5rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: background 0.3s, transform 0.2s var(--ease-out);
}
.btn-touch:hover { background: var(--orange); color: #000000; transform: scale(1.03); }
.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-metal orange */
  background-image: linear-gradient(180deg, #ffd9b3 0%, #e58848 55%, #b05e28 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(--orange); }

.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(--orange); border-color: var(--orange); transform: translateY(-2px); }
.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; }
  *, *::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);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  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;
  box-shadow: var(--metal-edge), 0 24px 64px rgba(0, 0, 0, 0.22);
  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(--orange); 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; }
}