/* =========================================================
   EtherealMinds — /seeo/ conversion layer
   Ad-traffic landing components. Built on the tokens in
   styles.css (:root) so everything stays visually native.
   ========================================================= */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- shared rhythm ---------- */
.conv-section { padding: 92px 0; position: relative; }
.conv-section.tight { padding: 64px 0; }
.conv-section.warm { background: var(--bg-warm); }
.conv-section.edge { border-top: 1px solid var(--border-soft); }

.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-glow);
  padding: 7px 14px; border-radius: 100px; margin-bottom: 18px;
}
.kicker.gold { color: #8a6d28; background: rgba(201, 169, 97, .16); }

.conv-h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.1; letter-spacing: -.02em;
  color: var(--ink); margin: 0 0 16px;
}
.conv-h2 em { font-style: italic; color: var(--accent); }
.conv-h2 .strike { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--ink-dim); opacity: .55; }
.conv-lead {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(1rem, 2.4vw, 1.18rem); line-height: 1.65; color: var(--ink-soft);
  max-width: 660px; margin: 0;
}
.conv-center { text-align: center; }
.conv-center .conv-lead { margin-left: auto; margin-right: auto; }
.conv-head { max-width: 760px; margin: 0 auto 44px; }

/* =========================================================
   1. HERO — the 10-second test
   ========================================================= */
.seeo-hero { position: relative; padding: 104px 0 68px; overflow: hidden; }
.seeo-hero .container { position: relative; z-index: 2; }
/* Desktop: copy stacks in column 1, the demo spans both rows in column 2.
   Mobile: source order takes over — headline, demo, then the CTA block —
   so the hook visual lands inside the first screen. */
.seeo-hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  column-gap: 56px; row-gap: 26px; align-items: center;
}
.seeo-hero-grid .hero-copy-top { grid-column: 1; grid-row: 1; align-self: end; }
.seeo-hero-grid .hero-copy-bottom { grid-column: 1; grid-row: 2; align-self: start; }
.seeo-hero-grid .ai-demo,
.seeo-hero-grid .founders-hero { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.seeo-h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 2.9rem); line-height: 1.1; letter-spacing: -.025em;
  color: var(--ink); margin: 0 0 22px;
}
.seeo-h1 em { font-style: italic; color: var(--accent); }

/* rotating specialty word */
.spin-word {
  display: inline-grid; vertical-align: baseline;
  position: relative; text-align: left;
}
.spin-word > span {
  grid-area: 1 / 1; white-space: nowrap;
  color: var(--accent); font-style: italic;
  opacity: 0; transform: translateY(.42em);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.spin-word > span.on { opacity: 1; transform: translateY(0); }
.spin-word > span.out { opacity: 0; transform: translateY(-.42em); }

.hero-proof-row {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0;
}
.hero-proof-row .platform-pill { margin: 0; }

/* ---- AI answer demo card ---- */
.ai-demo {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xl);
  overflow: hidden; position: relative;
}
.ai-demo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}
.ai-demo-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 18px; border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, #fff, #FCFBF8);
}
.ai-demo-dots { display: flex; gap: 6px; }
.ai-demo-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--border); display: block; }
.ai-demo-dots i:first-child { background: #E8A0A0; }
.ai-demo-dots i:nth-child(2) { background: var(--gold); opacity: .6; }
.ai-demo-title {
  margin-left: 6px; font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px; font-weight: 600; color: var(--ink-dim); letter-spacing: .01em;
}
.ai-demo-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent);
}
.ai-demo-live i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  animation: livePulseDot 1.6s ease-in-out infinite;
}
/* Every child below reserves its own space, so the box height never
   changes as the query types, the answer streams or the cites appear.
   That's what kept the layout from jumping on mobile. */
.ai-demo-body { padding: 22px 22px 24px; }

.ai-q {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: var(--bg-warm); border: 1px solid var(--border-soft);
  border-radius: 100px; padding: 11px 18px;
  font-family: 'Inter', system-ui, sans-serif; font-size: 14.5px; color: var(--ink);
}
.ai-q #aiQText { white-space: nowrap; overflow: hidden; text-overflow: clip; min-width: 0; }
.ai-q .mag { opacity: .5; flex: none; }
.ai-q .caret {
  display: inline-block; width: 2px; height: 1.05em; background: var(--accent);
  animation: caretBlink 1s steps(1) infinite; vertical-align: -2px;
}
@keyframes caretBlink { 50% { opacity: 0; } }

.ai-thinking {
  position: absolute; inset: 0; display: flex; align-items: flex-start; gap: 9px; margin: 0;
  font-family: 'Inter', system-ui, sans-serif; font-size: 13.5px; color: var(--ink-dim);
}
.ai-thinking b { display: flex; gap: 4px; }
.ai-thinking b i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .35;
  animation: thinkDot 1.1s ease-in-out infinite;
}
.ai-thinking b i:nth-child(2) { animation-delay: .18s; }
.ai-thinking b i:nth-child(3) { animation-delay: .36s; }
@keyframes thinkDot { 0%,100% { opacity:.25; transform: translateY(0);} 45% { opacity:1; transform: translateY(-3px);} }

/* thinking + answer share one reserved slot, so neither adds height when it
   appears — the box stays a fixed size and nothing below it moves. */
.ai-answer-slot { position: relative; margin: 18px 0 0; min-height: 3.24em; }
.ai-answer {
  margin: 0; font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px; line-height: 1.62; color: var(--ink-soft);
}
.ai-answer .sparkle { color: var(--gold); }

.ai-cites { margin: 18px 0 0; display: grid; gap: 9px; }
.ai-cite {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--border-soft); background: #FCFBF8;
  font-family: 'Inter', system-ui, sans-serif; font-size: 14px; color: var(--ink);
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.ai-cite.on { opacity: 1; transform: translateY(0); }
.ai-cite .num {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--accent-glow); color: var(--accent);
}
.ai-cite .tag {
  margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #4b8f6b;
}
.ai-cite.you {
  border: 1px dashed #D9A0A0; background: rgba(232,160,160,.07);
}
.ai-cite.you .num { background: rgba(216,120,120,.14); color: #b95c5c; }
.ai-cite.you .tag { color: #b95c5c; }
.ai-cite.you .label { color: var(--ink-dim); }

.ai-demo-foot {
  border-top: 1px solid var(--border-soft); padding: 14px 22px;
  background: #FCFBF8; font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px; color: var(--ink-dim); text-align: center;
}
.ai-demo-foot b { color: var(--ink); font-weight: 600; }

/* =========================================================
   1b. RESULTS BAND — animated proof strip under the hero
   ========================================================= */
.results-band { padding: 40px 0 12px; }
.rw-head { text-align: center; margin-bottom: 26px; }
.rw-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.rw-stat {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 22px 18px; text-align: center; box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rw-stat::after { /* thin accent bar that sweeps in on reveal */
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.2,.8,.2,1) .2s;
}
.rw-grid.on .rw-stat::after { transform: scaleX(1); }
.rw-stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.rw-top { display: inline-flex; align-items: baseline; gap: 6px; }
.rw-num {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.1rem, 5.4vw, 2.9rem); line-height: 1; letter-spacing: -.02em;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.rw-arrow {
  color: #4b8f6b; font-size: 14px; font-weight: 700; line-height: 1;
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s ease .9s, transform .4s ease .9s;
}
.rw-grid.on .rw-arrow { opacity: 1; transform: translateY(0); }
.rw-label {
  font-family: 'Inter', system-ui, sans-serif; font-size: 13.5px; line-height: 1.45;
  color: var(--ink-soft); margin-top: 10px;
}
.rw-note {
  text-align: center; font-family: 'Inter', system-ui, sans-serif; font-size: 12px;
  color: var(--ink-dim); margin: 18px 0 0;
}

/* =========================================================
   2. ONE-LINER — what we do, in one breath
   ========================================================= */
.oneliner-wrap { max-width: 940px; margin: 0 auto; text-align: center; }
.oneliner {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 3.9vw, 2.5rem); line-height: 1.32; letter-spacing: -.02em;
  color: var(--ink); margin: 0;
}
.oneliner .hl {
  position: relative; display: inline-block; color: var(--accent); font-style: italic;
}
.oneliner .hl::after {
  content: ""; position: absolute; left: -2px; right: -2px; bottom: .06em; height: .34em;
  background: rgba(201,169,97,.28); border-radius: 3px; z-index: -1;
  transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.in-view .oneliner .hl::after, .oneliner.in-view .hl::after { transform: scaleX(1); }
.oneliner .hl:nth-of-type(2)::after { transition-delay: .18s; }

.surface-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  max-width: 780px; margin: 42px auto 0;
}
.surface {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 22px 18px; text-align: center; box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.surface:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.surface .ico { font-size: 26px; line-height: 1; margin-bottom: 12px; display: block; }
.surface .nm {
  font-family: 'Inter', system-ui, sans-serif; font-weight: 600; font-size: 15px; color: var(--ink);
  margin-bottom: 5px;
}
.surface .ds { font-family: 'Inter', system-ui, sans-serif; font-size: 13px; color: var(--ink-dim); line-height: 1.5; }

/* =========================================================
   3. THEN vs NOW — the SERP changed
   ========================================================= */
.thennow {
  display: grid; grid-template-columns: 1fr 62px 1fr; gap: 0; align-items: stretch;
  max-width: 1000px; margin: 0 auto;
}
.tn-panel {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 24px; box-shadow: var(--shadow-md); position: relative;
}
.tn-panel.now {
  border-color: var(--accent); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; justify-content: center;
}
.tn-label {
  font-family: 'Inter', system-ui, sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 16px;
}
.tn-panel.now .tn-label { color: var(--accent); }

.blue-links { display: grid; gap: 13px; }
/* each "result" loads in staggered, then stays clearly blue (not grayed out) */
.blue-link { opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; }
.blue-link.in { opacity: 1; transform: none; }
.blue-link .bl-t {
  height: 9px; border-radius: 4px; background: var(--accent); opacity: 1; width: 78%; margin-bottom: 6px;
}
.blue-link .bl-u { height: 6px; border-radius: 4px; background: var(--border); width: 46%; margin-bottom: 6px; }
.blue-link .bl-s { height: 6px; border-radius: 4px; background: var(--border-soft); width: 92%; }
.blue-link:nth-child(1) .bl-t { width: 84%; }
.blue-link:nth-child(3) .bl-t { width: 68%; }
.blue-link:nth-child(4) .bl-t { width: 74%; }

.tn-arrow {
  display: grid; place-items: center; color: var(--ink-dim); font-size: 22px;
}
.tn-arrow span { animation: nudgeRight 2.2s ease-in-out infinite; }
@keyframes nudgeRight { 0%,100% { transform: translateX(-3px); opacity:.5; } 50% { transform: translateX(3px); opacity:1; } }

.ai-box {
  border: 1px solid var(--accent); border-radius: 16px; padding: 16px;
  background: linear-gradient(180deg, rgba(79,118,180,.05), rgba(79,118,180,.01));
}
.ai-box-h {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-family: 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}
.ai-box-lines { display: grid; gap: 7px; margin-bottom: 14px; }
.ai-box-lines i { display: block; height: 7px; border-radius: 4px; background: rgba(79,118,180,.22); }
.ai-box-lines i:nth-child(1) { width: 96%; }
.ai-box-lines i:nth-child(2) { width: 88%; }
.ai-box-lines i:nth-child(3) { width: 71%; }
.ai-box-names { display: flex; flex-wrap: wrap; gap: 7px; }
.ai-box-names span {
  font-family: 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 600;
  padding: 6px 11px; border-radius: 100px; background: var(--white);
  border: 1px solid var(--border); color: var(--ink);
}
.ai-box-names span.miss { border-style: dashed; border-color: #D9A0A0; color: #b95c5c; background: rgba(232,160,160,.07); }
.tn-foot {
  margin-top: 16px; font-family: 'Inter', system-ui, sans-serif; font-size: 13px;
  line-height: 1.55; color: var(--ink-dim);
}
.tn-foot b { color: var(--ink); font-weight: 600; }

/* =========================================================
   4. DIAGNOSTIC — why AI can't read you (animated meters)
   ========================================================= */
.diag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.diag-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 26px 24px 24px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.diag-num {
  font-family: 'Inter', system-ui, sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 14px;
}
.diag-card h3 {
  font-family: var(--serif); font-weight: 400; font-size: 1.28rem; line-height: 1.25;
  color: var(--ink); margin: 0 0 10px; letter-spacing: -.01em;
}
.diag-card p {
  font-family: 'Inter', system-ui, sans-serif; font-size: 14.5px; line-height: 1.6;
  color: var(--ink-soft); margin: 0 0 20px; flex: 1;
}
.meter { margin-top: auto; }
.meter-top {
  display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px;
  font-family: 'Inter', system-ui, sans-serif;
}
.meter-top .lbl { font-size: 12px; font-weight: 600; color: var(--ink-dim); letter-spacing: .02em; }
.meter-top .val { font-size: 20px; font-weight: 700; color: #b95c5c; font-variant-numeric: tabular-nums; }
.meter-bar { height: 8px; border-radius: 100px; background: var(--bg-warm); overflow: hidden; }
.meter-fill {
  height: 100%; border-radius: 100px; width: 0;
  background: linear-gradient(90deg, #D98A8A, #C97070);
  transition: width 1.3s cubic-bezier(.2,.8,.2,1);
}
.meter-note {
  margin-top: 9px; font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; color: var(--ink-dim);
}

/* =========================================================
   5. MATRIX — a page for every service × every city
   ========================================================= */
.matrix-wrap {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 28px; max-width: 940px; margin: 0 auto;
  overflow-x: auto;
}
.matrix { border-collapse: separate; border-spacing: 6px; width: auto; margin: 0 auto; min-width: 520px; }
.matrix th {
  font-family: 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 600;
  color: var(--ink-dim); text-align: left; padding: 0 6px 6px; white-space: nowrap;
  letter-spacing: .02em;
}
.matrix th.corner { color: var(--ink); font-weight: 700; }
.matrix td.rowhead {
  font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 600;
  color: var(--ink); white-space: nowrap; padding-right: 10px;
}
.matrix td.cell {
  width: 40px; height: 34px; border-radius: 9px;
  background: var(--bg-warm); border: 1px solid var(--border-soft);
  text-align: center; vertical-align: middle;
  transition: background .35s ease, border-color .35s ease, transform .35s ease;
}
.matrix td.cell span {
  display: inline-block; color: var(--white); font-size: 13px; font-weight: 700; line-height: 1;
  opacity: 0; transform: scale(.4); transition: opacity .3s ease, transform .35s cubic-bezier(.2,1.5,.4,1);
}
.matrix td.cell.lit {
  background: var(--accent); border-color: var(--accent);
}
.matrix td.cell.lit span { opacity: 1; transform: scale(1); }
.matrix-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border-soft);
  font-family: 'Inter', system-ui, sans-serif; font-size: 14px; color: var(--ink-soft);
}
.matrix-count {
  font-family: var(--serif); font-size: 2rem; font-weight: 400; color: var(--accent);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.matrix-count + span { font-size: 13px; color: var(--ink-dim); }

/* =========================================================
   6. TIMELINE — how it works, 3 steps with scroll progress
   ========================================================= */
.tl { position: relative; max-width: 780px; margin: 0 auto; padding-left: 62px; }
.tl-rail {
  position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px;
  background: var(--border);
}
.tl-rail i {
  position: absolute; left: 0; top: 0; width: 100%; height: 0;
  background: linear-gradient(180deg, var(--accent), var(--gold));
  transition: height .2s linear;
}
.tl-step { position: relative; padding-bottom: 46px; }
.tl-step:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute; left: -62px; top: 0; width: 44px; height: 44px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--border);
  display: grid; place-items: center; font-size: 19px;
  transition: border-color .4s ease, box-shadow .4s ease, transform .4s ease;
}
.tl-step.on .tl-dot {
  border-color: var(--accent); box-shadow: 0 0 0 6px var(--accent-glow); transform: scale(1.06);
}
.tl-step h3 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.25rem, 3vw, 1.6rem);
  line-height: 1.2; color: var(--ink); margin: 6px 0 10px; letter-spacing: -.015em;
}
.tl-step h3 .n {
  font-family: 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; color: var(--accent); display: block; margin-bottom: 8px;
  text-transform: uppercase;
}
.tl-step p {
  font-family: 'Inter', system-ui, sans-serif; font-size: 15.5px; line-height: 1.65;
  color: var(--ink-soft); margin: 0;
}
.tl-step p strong { color: var(--ink); font-weight: 600; }
.tl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tl-chips span {
  font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; font-weight: 500;
  padding: 6px 12px; border-radius: 100px; background: var(--white);
  border: 1px solid var(--border); color: var(--ink-soft);
}

/* =========================================================
   7. COMPOUNDING CURVE
   ========================================================= */
.curve-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 30px 28px 24px; max-width: 880px; margin: 0 auto;
}
.curve-legend {
  display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 18px;
  font-family: 'Inter', system-ui, sans-serif; font-size: 13.5px; color: var(--ink-soft);
}
.curve-legend b { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.curve-legend i { width: 22px; height: 3px; border-radius: 3px; display: block; }
.curve-legend i.ads { background: var(--ink-dim); opacity: .55; }
.curve-legend i.seo { background: var(--accent); }
.curve-svg { width: 100%; height: auto; display: block; overflow: visible; }
.curve-svg .draw {
  stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200);
  transition: stroke-dashoffset 2.1s cubic-bezier(.35,.1,.25,1);
}
.curve-card.on .curve-svg .draw { stroke-dashoffset: 0; }
.curve-card.on .curve-svg .draw.late { transition-delay: .35s; }
/* paths that keep their own dash pattern fade in instead of drawing */
.curve-svg .fade { opacity: 0; transition: opacity .6s ease 1.4s; }
.curve-card.on .curve-svg .fade { opacity: .55; }
.curve-svg .lbl {
  font-family: 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 600;
  opacity: 0; transition: opacity .5s ease .9s;
}
.curve-card.on .curve-svg .lbl { opacity: 1; }
.curve-foot {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border-soft);
  font-family: 'Inter', system-ui, sans-serif; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft);
}
.curve-foot strong { color: var(--ink); font-weight: 600; }

/* =========================================================
   8. ASK-THEM-THIS card
   ========================================================= */
.ask-card {
  max-width: 760px; margin: 0 auto; background: var(--ink);
  border-radius: var(--radius-lg); padding: 40px 38px; box-shadow: var(--shadow-xl);
  position: relative; overflow: hidden;
}
.ask-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 62% 78% at 88% 34%, rgba(201,169,97,.20), transparent 68%);
  pointer-events: none;
}
.ask-card > * { position: relative; z-index: 1; }
.ask-card .kicker { background: rgba(201,169,97,.18); color: var(--gold); }
.ask-card h2 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1.18; color: #fff; margin: 0 0 10px; letter-spacing: -.02em;
}
.ask-card h2 em { font-style: italic; color: var(--gold); }
.ask-card .ask-sub {
  font-family: 'Inter', system-ui, sans-serif; font-size: 15px; line-height: 1.6;
  color: rgba(255,255,255,.68); margin: 0 0 26px;
}
.ask-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ask-list li {
  display: flex; gap: 13px; align-items: flex-start;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px; padding: 15px 17px;
  font-family: 'Inter', system-ui, sans-serif; font-size: 15px; line-height: 1.55;
  color: rgba(255,255,255,.90);
  transition: background .25s ease, border-color .25s ease;
}
.ask-list li:hover { background: rgba(255,255,255,.08); border-color: rgba(201,169,97,.35); }
.ask-list li .q {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: rgba(201,169,97,.20); color: var(--gold);
}
.ask-out {
  margin: 26px 0 0; font-family: 'Inter', system-ui, sans-serif; font-size: 15px;
  line-height: 1.6; color: rgba(255,255,255,.78);
}
.ask-out strong { color: #fff; font-weight: 600; }
/* the page's primary button is dark navy — invert it on the dark card */
.ask-card .btn-primary {
  background: var(--gold); color: var(--ink); border-color: var(--gold);
}
.ask-card .btn-primary:hover { background: #d8bb79; border-color: #d8bb79; color: var(--ink); }

/* =========================================================
   9. FOUNDER NOTE
   ========================================================= */
.founder-note {
  display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: center;
  max-width: 900px; margin: 0 auto;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 34px; box-shadow: var(--shadow-md);
}
.founder-photo {
  border-radius: var(--radius-md); overflow: hidden; background: var(--bg-warm);
  aspect-ratio: 4 / 5;
}
.founder-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.founder-note .fn-body p {
  font-family: 'Inter', system-ui, sans-serif; font-size: 15.5px; line-height: 1.7;
  color: var(--ink-soft); margin: 0 0 14px;
}
.founder-note .fn-body p strong { color: var(--ink); font-weight: 600; }
.fn-sign {
  font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--ink);
  margin-top: 18px;
}
.fn-sign span { display: block; font-family: 'Inter', system-ui, sans-serif; font-style: normal;
  font-size: 12.5px; color: var(--ink-dim); letter-spacing: .04em; margin-top: 4px; }

/* =========================================================
   10. STAT STRIP
   ========================================================= */
.stat-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--border-soft); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); overflow: hidden; max-width: 900px; margin: 0 auto;
}
.stat-cell { background: var(--white); padding: 28px 20px; text-align: center; }
.stat-cell .big {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 5vw, 2.7rem);
  color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.stat-cell .cap {
  font-family: 'Inter', system-ui, sans-serif; font-size: 13.5px; line-height: 1.5;
  color: var(--ink-soft); margin-top: 10px;
}
.stat-src {
  text-align: center; font-family: 'Inter', system-ui, sans-serif; font-size: 12px;
  color: var(--ink-dim); margin-top: 14px;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px) {
  .seeo-hero-grid { grid-template-columns: 1fr; row-gap: 30px; }
  .seeo-hero-grid .hero-copy-top,
  .seeo-hero-grid .hero-copy-bottom,
  .seeo-hero-grid .ai-demo,
  .seeo-hero-grid .founders-hero { grid-column: 1; grid-row: auto; align-self: auto; }
  .diag-grid { grid-template-columns: 1fr; }
  .founder-note { grid-template-columns: 1fr; gap: 26px; text-align: center; }
  .founder-photo { max-width: 240px; margin: 0 auto; }
}
@media (max-width: 900px) {
  .rw-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 760px) {
  .conv-section { padding: 68px 0; }
  .conv-section.tight { padding: 52px 0; }
  .seeo-hero { padding: 84px 0 52px; }
  .thennow { grid-template-columns: 1fr; gap: 16px; }
  .tn-arrow { transform: rotate(90deg); padding: 4px 0; }
  .surface-row { grid-template-columns: 1fr; gap: 12px; max-width: 420px; }
  .surface { display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px 18px; }
  .surface .ico { margin: 0; font-size: 22px; }
  .stat-strip { grid-template-columns: 1fr; }
  .ask-card { padding: 30px 22px; }
  .curve-card { padding: 22px 18px 18px; }
  /* the grid has to fit a phone without a sideways scroll nobody discovers */
  .matrix-wrap { padding: 18px 14px; }
  .matrix { min-width: 0; width: 100%; border-spacing: 4px; }
  .matrix th { font-size: 9.5px; white-space: normal; line-height: 1.25; text-align: center; }
  .matrix th.corner { font-size: 11px; text-align: left; }
  .matrix td.rowhead { font-size: 12px; padding-right: 4px; white-space: normal; line-height: 1.25; }
  .matrix td.cell { width: 30px; height: 28px; border-radius: 7px; }
  .matrix td.cell span { font-size: 11px; }
  .matrix-foot { font-size: 13px; }
  .matrix-count { font-size: 1.7rem; }

  /* the chart is drawn in viewBox units — scale the type up so it stays legible */
  .curve-svg text { font-size: 21px; }
  .curve-svg text.tiny { font-size: 18px; }
  .curve-svg path { stroke-width: 6; }
  .curve-svg circle { r: 9; }
  .curve-legend { gap: 10px 20px; font-size: 12.5px; }
  .tl { padding-left: 50px; }
  .tl-rail { left: 17px; }
  .tl-dot { left: -50px; width: 36px; height: 36px; font-size: 16px; }
  .ai-demo-body { padding: 18px 16px 20px; }
  .ai-answer-slot { min-height: 4.9em; } /* 3 lines at mobile width */
}

@media (prefers-reduced-motion: reduce) {
  .curve-svg .draw { transition: none; stroke-dashoffset: 0; }
  .spin-word > span { transition: none; }
  .ai-demo-live i, .tn-arrow span { animation: none; }
}


/* =========================================================
   ==========  CONVERSION LAYER (2026-08-05)  ==============
   Same pattern approved on /seeo/, adapted for the indexed
   page. Nothing here removes copy: the long form text stays
   in the DOM inside .depth blocks so crawlers still read it,
   while a visitor sees a short, scannable version.
   ========================================================= */

/* ---------- HERO: founders instead of a booking iframe ---------- */
.hero .seeo-hero-grid { align-items: center; }
.hero .hero-sub { margin-bottom: 0; }
/* the shared h1 scales to 4.4rem, which in a half width column wraps to five
   lines and pushes the button under the fold. Sized to the column instead. */
.hero .hero-title {
  font-size: clamp(2rem, 3.5vw, 3.15rem); line-height: 1.08; margin-bottom: 0;
}
.hero { padding: 56px 0 72px; }
.hero-service-line {
  margin: 16px 0 0; font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-soft); opacity: .75;
}

.founders-hero {
  position: relative; margin: 0; width: 100%; max-width: 420px; justify-self: end;
}
.fh-photo {
  position: relative; overflow: hidden; aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg); border: 1px solid var(--border);
  background: var(--bg-warm); box-shadow: var(--shadow-xl);
}
.fh-photo img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center 12%;
}
.fh-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 52px 20px 18px;
  background: linear-gradient(180deg, rgba(11,26,46,0) 0%, rgba(11,26,46,.72) 55%, rgba(11,26,46,.93) 100%);
}
.fh-name {
  display: block; font-family: var(--serif); font-weight: 400; font-size: 1.3rem;
  color: #fff; letter-spacing: -.01em;
}
.fh-role {
  display: block; margin-top: 4px;
  font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; line-height: 1.45;
  color: rgba(255,255,255,.78);
}
.fh-badge {
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 100px;
  background: rgba(255,255,255,.93); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  font-family: 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 600; color: var(--ink);
}
.fh-badge i { width: 7px; height: 7px; border-radius: 50%; background: #4b8f6b; display: block; }

.hero-micro {
  display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 14px 0 0;
  font-family: 'Inter', system-ui, sans-serif; font-size: 13px; color: var(--ink-dim);
}
.hero-micro span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

/* ---------- DEPTH: the SEO copy, folded but never removed ----------
   Every word stays in the HTML, so Google and the AI crawlers read the
   full page. The visitor only opens what they actually want. */
.depth {
  margin: 24px auto 0; max-width: 640px; text-align: left;
}
.depth > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  cursor: pointer; list-style: none;
  padding: 14px 20px; border-radius: 100px;
  background: var(--white); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  font-family: 'Inter', system-ui, sans-serif; font-size: 14px; font-weight: 600;
  line-height: 1.4; color: var(--accent); letter-spacing: .01em;
  transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.depth > summary::-webkit-details-marker { display: none; }
.depth > summary::after {
  content: '+'; font-family: var(--serif); font-size: 1.4rem; line-height: 1;
  color: var(--accent); transition: transform .25s ease; flex: none;
}
.depth[open] > summary::after { transform: rotate(45deg); }
.depth > summary:hover { border-color: var(--accent); color: var(--ink); box-shadow: var(--shadow-md); }
.depth[open] > summary { border-radius: 22px; }
.depth-body {
  padding: 18px 22px 2px; animation: depthIn .28s ease;
}
.depth-body > p {
  font-family: 'Inter', system-ui, sans-serif; font-size: 15.5px; line-height: 1.7;
  color: var(--ink-soft); margin: 0 0 14px;
}
.depth-body > p:last-child { margin-bottom: 0; }
.depth-body > p strong { color: var(--ink); font-weight: 600; }
@keyframes depthIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- INLINE CTA: the repeated next step ---------- */
.inline-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 18px; margin: 40px auto 0; max-width: 660px;
  padding: 18px 24px; border-radius: 100px;
  background: var(--white); border: 1px solid var(--border);
  box-shadow: var(--shadow-md); text-align: center;
}
.inline-cta > span {
  font-family: 'Inter', system-ui, sans-serif; font-size: 14.5px; color: var(--ink-soft);
}
.inline-cta > span strong { color: var(--ink); font-weight: 600; }
.inline-cta .btn { flex: none; }

/* ---------- WHO YOU'LL MEET, above the booker ---------- */
.cta-hosts {
  display: flex; align-items: center; gap: 16px;
  max-width: 620px; margin: 28px auto 0; text-align: left;
  padding: 12px 22px 12px 12px; border-radius: 22px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
}
.cta-hosts img {
  width: 60px; height: 74px; border-radius: 16px; flex: none; display: block;
  object-fit: cover; object-position: center 12%; background: rgba(255,255,255,.1);
}
.cta-hosts span {
  font-family: 'Inter', system-ui, sans-serif; font-size: 14px; line-height: 1.55;
  color: rgba(255,255,255,.75);
}
.cta-hosts strong { color: #fff; font-weight: 600; }

/* ---------- BUTTONS ---------- */
.btn-nav { padding: 11px 20px; font-size: .88rem; font-weight: 600; flex: none; }

/* ---------- RHYTHM: these sections ship with 120px of air each ---------- */
.proof-section { padding: 88px 0; }
.faq-section { padding: 78px 0; }
.cta-section { padding: 88px 0; }
.fit-section { padding: 88px 0; }
.proof-section .section-header,
.faq-section .section-header { margin-bottom: 38px; }

/* =========================================================
   Responsive — conversion layer
   ========================================================= */
@media (max-width: 980px) {
  .founders-hero { max-width: 100%; justify-self: stretch; }
  /* on a phone the portrait crop would push the button off screen —
     go wide so the faces and the CTA share the same view */
  .fh-photo { aspect-ratio: 3 / 2; }
  .fh-photo img { object-position: center 16%; }
}

@media (max-width: 760px) {
  /* ---- HERO: pull the button up so it lands within a swipe of the faces ---- */
  .hero { padding: 34px 0 44px; }
  .hero .eyebrow { margin-bottom: 16px; }
  .hero .hero-title { margin-bottom: 12px; }
  .hero-service-line { font-size: 12.5px; margin-top: 12px; }
  .hero .hero-sub { font-size: 1rem; margin-top: 12px; }
  .hero-depth { margin-top: 16px; padding-top: 13px; }
  .seeo-hero-grid { row-gap: 20px; }

  /* ---- BUTTONS: full width, tall enough to hit, impossible to miss ---- */
  .hero-cta-row { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 0; }
  .hero-cta-row .btn { width: 100%; justify-content: center; }
  .btn-hero {
    padding: 19px 24px; font-size: 1.04rem; font-weight: 600;
    box-shadow: 0 16px 34px -12px rgba(11,26,46,.55), 0 4px 10px rgba(11,26,46,.18);
  }
  .btn-hero-alt { padding: 12px 0; font-size: .95rem; }
  .hero-micro { justify-content: center; }
  .hero .seeo-hero-grid .hero-copy-top,
  .hero .seeo-hero-grid .hero-copy-bottom { text-align: center; }
  .hero .hero-sub { margin-left: auto; margin-right: auto; }
  .hero .platform-pills { justify-content: center; }
  .inline-cta {
    flex-direction: column; border-radius: var(--radius-md); padding: 20px 18px; gap: 14px;
    margin-top: 32px;
  }
  .inline-cta .btn { width: 100%; justify-content: center; padding: 16px 22px; font-size: .98rem; }

  .cta-hosts { gap: 12px; padding: 10px 16px 10px 10px; border-radius: 18px; }
  .cta-hosts img { width: 48px; height: 60px; border-radius: 13px; }
  .cta-hosts span { font-size: 13px; }

  .proof-section { padding: 60px 0; }
  .faq-section { padding: 56px 0; }
  .cta-section { padding: 56px 0; }
  .fit-section { padding: 60px 0; }
  .proof-section .section-header,
  .faq-section .section-header { margin-bottom: 26px; }

  .depth > summary { font-size: 13.5px; }
  .depth-body > p { font-size: 15px; }
}

/* the shared sheet hyphenates on small screens; a broken word with a dash in
   it reads cheap on a page a client is judging us by */
@media (max-width: 600px) {
  h1, h2, h3, h4, p, li, a, span, em, strong,
  .section-title, .hero-title, .section-eyebrow, .eyebrow, .section-sub {
    word-break: normal; hyphens: manual; -webkit-hyphens: manual;
  }
  .hero-title { font-size: clamp(1.7rem, 7.6vw, 2.4rem); }
  .eyebrow { max-width: 100%; white-space: normal; line-height: 1.35; }
}