/* ============================================================
   LearnVector — launch page

   Direction: warm editorial. Soft butter-yellow fields on warm
   paper, deep warm ink, one terracotta accent. No black fields.
   A deliberately narrow type scale — headings and body sit close
   together so the page reads calm rather than shouty.
   ============================================================ */

:root {
  /* ---- colour ---- */
  --yellow:      #F4DFA6;   /* large fields — soft, not saturated */
  --yellow-hi:   #FAEDC9;
  --yellow-lo:   #EBD08A;
  --orange:      #D9601C;   /* accent only */
  --orange-deep: #A8460F;   /* accent text, meets contrast on paper + yellow */
  --ink:         #241F14;
  --ink-soft:    #554E3C;
  --muted:       #6E6754;
  --paper:       #FFFDF8;
  --paper-warm:  #FAF4E6;
  --hairline:    rgba(36, 31, 20, .15);
  --hairline-yl: rgba(36, 31, 20, .22);

  /* ---- type ---- */
  /* Headings. An old-style garalde: lighter and narrower than Fraunces, so
     headings carry a touch more weight and looser tracking to compensate.
     Falls back to Georgia, the closest serif that ships everywhere. */
  --f-heading: 'EB Garamond', Georgia, 'Times New Roman', serif;
  /* Retained for the pull quote, blockquote, signature, wordmark and the
     funding figure — everything that is not an H element. */
  --f-display: 'Fraunces', Georgia, serif;
  --f-body:    'Archivo', 'Helvetica Neue', Arial, sans-serif;

  /* A compressed scale: h1 is only ~3.2x body, not ~6x. */
  --fs-h1:      clamp(2.25rem, 3.9vw, 3.35rem);
  --fs-h2:      clamp(1.78rem, 2.7vw, 2.35rem);
  --fs-h3:      clamp(1.1rem,  1.3vw, 1.24rem);
  --fs-flip:    clamp(1.5rem,  2.4vw, 2.05rem);
  --fs-lead:    clamp(1.06rem, 1.1vw, 1.16rem);
  --fs-body:    1.0625rem;
  --fs-small:   .95rem;
  --fs-eyebrow: .95rem;

  /* ---- rhythm ---- */
  --gut:  clamp(20px, 5vw, 48px);
  --bay:  clamp(68px, 9.5vw, 124px);
  --ease: cubic-bezier(.22, .68, .28, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Clear the fixed nav (and the banner, when locked) so in-page anchors do
     not land underneath them. */
  scroll-padding-top: calc(var(--conf-h) + 74px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; }
p, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }

::selection { background: var(--orange); color: #fff; }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: 14px 20px; font-weight: 600;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gut); }
.wrap--mid    { max-width: 860px; }
.wrap--narrow { max-width: 720px; }

/* ---------- shared type ---------- */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--orange-deep);
  margin-bottom: .95em;
}

.h2 {
  font-family: var(--f-heading);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -.017em;
  text-wrap: balance;
}

.lead-p { font-size: var(--fs-lead); }

/* ---------- buttons — flat, tight radius, no drop shadow ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-body);
  font-size: .935rem;
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1;
  text-decoration: none;
  padding: .92em 1.5em;
  border: 1px solid var(--ink);
  border-radius: 7px;
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn:hover { background: var(--orange); border-color: var(--orange); color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: rgba(36, 31, 20, .3);
}
.btn--ghost:hover { background: transparent; color: var(--ink); border-color: var(--ink); }

.btn--sm { padding: .68em 1.15em; font-size: .865rem; border-radius: 6px; }

/* The confidential banner has been removed. --conf-h is kept at 0 rather than
   deleted: scroll-padding-top still references it, and it is the single value
   to restore if a top bar is ever reinstated. */
:root { --conf-h: 0px; }

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav__in {
  max-width: 1180px; margin-inline: auto;
  padding: 14px var(--gut);
  display: flex; align-items: center; gap: 28px;
}
.nav.is-stuck {
  background: rgba(255, 253, 248, .9);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--hairline);
}

/* Wordmark only — no logo mark until there's a real one. */
.brand {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 30;
  font-weight: 650;
  font-size: 1.16rem;
  letter-spacing: -.012em;
  text-decoration: none;
  margin-right: auto;
}

.nav__links { display: flex; gap: 26px; }
.nav__links a {
  font-size: .885rem; font-weight: 500;
  text-decoration: none; color: var(--ink-soft);
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
  transition: color .18s, border-color .18s;
}
.nav__links a:hover { color: var(--ink); border-bottom-color: var(--orange); }

@media (max-width: 980px) { .nav__links { display: none; } }

/* =========================================================
   HERO
   ========================================================= */
/* Hero yellows are the section yellows mixed ~50% with paper — the field reads
   as a warm tint rather than a block of colour. The later yellow sections keep
   their full strength. */
.hero {
  background: linear-gradient(170deg, #FCF5E0 0%, #F9EECF 52%, #F5E6C1 100%);
  padding: clamp(112px, 14vh, 156px) 0 clamp(64px, 7vw, 92px);
  border-bottom: 1px solid var(--hairline);
}

.hero__in {
  display: grid;
  /* 25% wider than the previous 230/27%/340 track. At that size the portrait
     nearly matches the copy column's height, so the leftover gap is small —
     and centring splits what remains above and below instead of dumping it
     all underneath. */
  grid-template-columns: minmax(0, 1fr) clamp(288px, 34%, 425px);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.hero__portrait { margin: 0; }
.hero__portrait img {
  width: 100%; height: auto;
  border-radius: 20px;
  /* Matches the source photograph's 560x720, so nothing is cropped. */
  aspect-ratio: 7 / 9;
  object-fit: cover;
}

/* Below this the portrait would squeeze the headline; drop it under the copy
   at a size that still reads as a portrait rather than a banner. */
@media (max-width: 800px) {
  .hero__in { grid-template-columns: 1fr; }
  .hero__portrait { order: -1; max-width: 275px; }
}

.hero__h1 {
  font-family: var(--f-heading);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: 1.06;
  letter-spacing: -.021em;
  /* No cap here: the two setup lines are hard-broken and short, and a cap set
     in `ch` at the h1's own size would also constrain the smaller rebuttal
     below it. The hero grid column bounds the width instead. */
}
.hero__h1 span, .hero__h1 em { display: block; }

/* Rebuttal set at the same size as the setup lines — one continuous statement
   that changes colour rather than scale. */
.hero__h1 em {
  /* Explicit: <em> is italic by default in every browser. */
  font-style: normal;
  font-weight: 650;
  color: var(--orange-deep);
  font-size: 1em;
  line-height: 1.06;
  letter-spacing: -.021em;
  margin-top: .34em;
}

.hero__attr {
  display: flex; align-items: center; gap: .8em;
  margin-top: 1.5em;
  font-size: .82rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft);
}
.hero__attr .rule {
  display: block; width: clamp(24px, 4vw, 48px); height: 1.5px;
  background: var(--ink-soft); flex: none;
}

.hero__lead {
  margin-top: 1.7em;
  max-width: 44ch;
  font-size: var(--fs-lead);
  line-height: 1.6;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 2.1em; }

/* The funding line is a headline fact, not a footnote — it gets display type. */
.funding {
  margin-top: 2.3em; padding-top: 1.3em;
  border-top: 1px solid var(--hairline-yl);
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  color: var(--ink-soft);
  letter-spacing: -.008em;
}
.funding strong {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 48;
  font-weight: 700;
  font-size: 1.16em;
  color: var(--ink);
  letter-spacing: -.018em;
}

/* Narrow screens: let the headline set as flowing text rather than forced
   line breaks. */
@media (max-width: 560px) {
  .hero__h1 span { display: inline; }
  .hero__h1 em { display: block; margin-top: .25em; }
}

/* =========================================================
   MISSION
   ========================================================= */
.mission { padding: var(--bay) 0 clamp(52px, 7vw, 84px); }

/* "Our mission" spans the top so it labels the whole section, not just the
   left column. Beneath it: the statement on the left, and the claim it rests
   on set off at the right behind a rule — smaller, so it reads as support
   rather than a second headline, and starting below the label. */
.mission__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  column-gap: clamp(26px, 5vw, 76px);
  align-items: start;
}
.mission__eyebrow { grid-column: 1 / -1; }
.mission__aside {
  border-left: 2px solid var(--orange);
  padding-left: clamp(18px, 2.2vw, 30px);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 34ch;
  /* Drops below the heading's first line rather than sitting level with it. */
  margin-top: .5em;
}
@media (max-width: 820px) {
  .mission__in { grid-template-columns: 1fr; gap: 26px; }
  .mission__aside { max-width: 46ch; }
}

/* =========================================================
   THE IDEA
   ========================================================= */
.idea {
  background: var(--paper-warm);
  border-block: 1px solid var(--hairline);
  padding: var(--bay) 0;
}
.idea__head { margin-bottom: clamp(26px, 3.5vw, 40px); }
.idea__body p + p { margin-top: 1.15em; }
.idea__body a {
  color: var(--orange-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--orange);
}
.idea__body a:hover { background: rgba(217, 96, 28, .1); }

.idea__body .pull {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 60;
  font-weight: 600;
  font-size: clamp(1.24rem, 1.9vw, 1.52rem);
  line-height: 1.3;
  letter-spacing: -.012em;
  color: var(--orange-deep);
  margin: 1.15em 0;
  padding-left: 1em;
  border-left: 2px solid var(--orange);
  text-wrap: balance;
}

/* =========================================================
   THE FLIPS
   ========================================================= */
.flips {
  background: linear-gradient(172deg, var(--yellow-hi), var(--yellow));
  border-bottom: 1px solid var(--hairline-yl);
  padding: var(--bay) 0;
}
.flips__head { margin-bottom: clamp(28px, 3.6vw, 44px); }

.flip {
  padding: clamp(24px, 3vw, 34px) 0;
  border-top: 1px solid var(--hairline-yl);
  display: grid;
  grid-template-columns: minmax(160px, 190px) minmax(0, 1fr);
  gap: 6px clamp(20px, 3.5vw, 44px);
  align-items: baseline;
}
.flip:last-child { border-bottom: 1px solid var(--hairline-yl); }

.flip__label {
  font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--orange-deep);
  padding-top: .55em;
}
.flip__pair {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: .2em clamp(.4em, 1.2vw, .6em);
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 84;
  font-size: var(--fs-flip);
  line-height: 1.12;
  letter-spacing: -.018em;
}
/* .58 alpha, not lighter: composited over the yellow this is the point where
   the de-emphasised "before" word still clears 3:1 for large text. */
.flip__from { font-weight: 400; color: rgba(36, 31, 20, .58); }
.flip__to   { font-weight: 700; }
.flip__arrow {
  color: var(--orange);
  font-family: var(--f-body);
  font-size: .78em;
  font-weight: 400;
  transform: translateY(-.08em);
}

.flip__note {
  grid-column: 2;
  margin-top: .3em;
  max-width: 50ch;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
@media (max-width: 660px) {
  .flip { grid-template-columns: 1fr; }
  .flip__label { padding-top: 0; }
  .flip__note { grid-column: 1; }
}

/* =========================================================
   WHAT WE'RE BUILDING  — text only, no panels
   ========================================================= */
.building { padding: var(--bay) 0; }
.building__head { max-width: 640px; }
.building__lead {
  margin-top: 1.1em; max-width: 48ch;
  color: var(--ink-soft);
  font-size: var(--fs-lead);
}

.verbs {
  margin-top: clamp(38px, 4.6vw, 56px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(26px, 3.2vw, 40px) clamp(24px, 3vw, 44px);
}
.verb { border-top: 1px solid var(--hairline); padding-top: 16px; }
.verb__n {
  display: block;
  font-family: var(--f-body);
  font-weight: 600; font-size: .78rem;
  letter-spacing: .12em;
  color: var(--orange-deep);
  margin-bottom: .8em;
}
.verb h3 {
  font-family: var(--f-heading);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.22;
  letter-spacing: -.012em;
  text-wrap: balance;
}

.building__foot {
  margin-top: clamp(38px, 4.6vw, 56px);
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: 18px clamp(32px, 6vw, 72px);
  align-items: start;
}
.agentic { flex: 1 1 340px; max-width: 52ch; color: var(--ink-soft); }
.agentic strong { color: var(--ink); font-weight: 650; }
.tease {
  flex: 0 1 auto;
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 48;
  font-weight: 500; font-style: italic;
  font-size: 1.12rem;
  line-height: 1.35;
  color: var(--orange-deep);
/*  max-width: 24ch; */
  text-wrap: balance;
}

/* =========================================================
   LETTER
   ========================================================= */
.letter {
  background: var(--paper-warm);
  border-block: 1px solid var(--hairline);
  padding: var(--bay) 0;
}
.letter__head { margin-bottom: clamp(26px, 3.5vw, 40px); }

/* The portrait lives in the hero only — a single, larger appearance carries
   more weight than the same face twice on one page. */
.letter__body p + p { margin-top: 1.1em; }
.letter__body a {
  color: var(--orange-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--orange);
}
.letter__body a:hover { background: rgba(217, 96, 28, .1); }
.letter__body > p:not(.draft-tag):not(.sig):not(.sig__role):not(.ph-note) {
  font-size: var(--fs-lead);
  line-height: 1.7;
}
.draft-tag {
  display: inline-block;
  font-size: .7rem; font-weight: 650;
  letter-spacing: .11em; text-transform: uppercase;
  color: #fff; background: var(--orange-deep);
  padding: .35em .8em; border-radius: 4px;
  margin-bottom: 1.4em;
}
.ph-note {
  font-size: var(--fs-small); color: var(--muted); font-style: italic;
  background: rgba(217, 96, 28, .08);
  border-left: 2px dashed var(--orange);
  padding: .75em 1em;
}
.sig {
  margin-top: 1.5em !important;
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 48;
  font-weight: 600; font-size: 1.2rem;
  letter-spacing: -.012em;
}
.sig__role { margin-top: .15em !important; font-size: .845rem; color: var(--muted); }

/* =========================================================
   INVESTOR QUOTE

   Sits on plain paper rather than a fourth yellow band — yellow is kept for
   the hero, the flips and the careers block. The oversized mark and the
   italic display face are what set it apart, not the background.
   ========================================================= */
.quote { padding: var(--bay) 0 clamp(56px, 7vw, 88px); }
.quote__fig { margin: 0; }

/* Both marks sit in normal flow rather than absolutely positioned: floated
   over the text they collided with the eyebrow above. Open mark leads at the
   left, close mark answers it at the right, framing the quote.

   The closing mark hangs off the blockquote, not the figure — on the figure
   it renders after <figcaption> and lands below the attribution. */
.quote__fig::before,
.quote blockquote::after {
  display: block;
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 144;
  font-weight: 700;
  font-style: normal;
  font-size: clamp(3.4rem, 6.8vw, 5.6rem);
  line-height: .58;
  color: var(--orange);
  opacity: .26;
  pointer-events: none;
}
.quote__fig::before      { content: '\201C'; margin-bottom: .2em; }
.quote blockquote::after { content: '\201D'; margin-top: .22em; text-align: right; }

.quote blockquote {
  margin: 0;
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 72;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.24rem, 2.1vw, 1.66rem);
  line-height: 1.42;
  letter-spacing: -.011em;
  text-wrap: pretty;
}

/* A plain attribution line — no rule, no boxes — so it reads as part of the
   quote rather than a separate block. */
.quote figcaption {
  margin-top: 1em;
  font-size: clamp(1.02rem, 1.15vw, 1.14rem);
  color: var(--ink-soft);
  line-height: 1.5;
}
.quote__dash { color: var(--muted); margin-right: .35em; }
.quote__name { font-weight: 650; color: var(--ink); }
.quote__role { color: var(--ink-soft); }

/* Sits below the attribution, set smaller so it reads as a pointer rather
   than part of the quote. */
.quote__link {
  margin-top: 1.1em;
  /* Matches .tease — this is a real call to action, not a footnote. */
  font-size: 1.12rem;
  color: var(--ink-soft);
}
.quote__link a {
  color: var(--orange-deep);
  font-weight: 550;
  text-decoration: none;
  border-bottom: 1px solid var(--orange);
}
.quote__link a:hover { background: rgba(217, 96, 28, .1); }

/* =========================================================
   IN BRIEF
   ========================================================= */
.facts { padding: var(--bay) 0; }
.facts__head { margin-bottom: clamp(24px, 3.2vw, 36px); }

.facts__list { border-top: 1.5px solid var(--ink); }
.fact {
  display: grid;
  grid-template-columns: minmax(180px, 290px) minmax(0, 1fr);
  gap: 5px clamp(20px, 3.5vw, 40px);
  padding: clamp(16px, 2vw, 22px) 0;
  border-bottom: 1px solid var(--hairline);
}
@media (max-width: 620px) { .fact { grid-template-columns: 1fr; } }

.fact dt {
  font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--orange-deep);
  padding-top: .2em;
}
.fact dd { margin: 0; color: var(--ink-soft); font-size: var(--fs-small); }
.fact dd a { text-decoration: none; border-bottom: 1px solid var(--orange); color: var(--ink); }
.fact dd a:hover { color: var(--orange-deep); }
.sep { opacity: .4; margin: 0 .4em; }

/* =========================================================
   CAREERS + FORM
   ========================================================= */
.join {
  background: linear-gradient(174deg, var(--yellow-hi), var(--yellow-lo));
  border-top: 1px solid var(--hairline-yl);
  padding: var(--bay) 0 clamp(60px, 7vw, 92px);
}
/* Intro sits directly under the heading. It reads wider than it did — the
   measure is generous rather than the tight column it started as — but it
   stays below ~75 characters, past which lines get hard to track. */
.join__head { max-width: 820px; }
.join__lead {
  margin-top: 1.15em;
  max-width: 74ch;
  font-size: var(--fs-lead);
}

/* Plain list, no panels — the role count never divides evenly into the
   column count, and boxed cells leave conspicuous holes. */
.roles {
  margin: clamp(36px, 4.4vw, 52px) 0 clamp(42px, 5.5vw, 64px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
  column-gap: clamp(26px, 4vw, 56px);
}
.role { border-top: 1px solid var(--hairline-yl); padding: 20px 0 22px; }
.role h3 {
  font-family: var(--f-heading);
  font-weight: 650;
  font-size: var(--fs-h3);
  letter-spacing: -.012em;
  margin-bottom: .45em;
}
.role p { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.55; }

/* ---- form ---- */
.form-card {
  background: var(--paper);
  border: 1px solid var(--hairline-yl);
  border-radius: 12px;
  padding: clamp(24px, 3.4vw, 42px);
  max-width: 760px;
}
.form-card__h {
  font-family: var(--f-heading);
  font-weight: 650;
  font-size: clamp(1.32rem, 1.9vw, 1.6rem);
  letter-spacing: -.014em;
}
.form-card__sub { margin-top: .4em; color: var(--muted); font-size: var(--fs-small); }

.form {
  margin-top: 1.8em;
  display: grid; gap: 16px;
  grid-template-columns: 1fr 1fr;
}
.field { display: flex; flex-direction: column; gap: .45em; grid-column: 1 / -1; }
.field--half { grid-column: span 1; }
@media (max-width: 560px) { .field--half { grid-column: 1 / -1; } }

.field label {
  font-size: .755rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-soft);
}
.field .opt { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .7; }

.field input, .field select, .field textarea {
  font-family: var(--f-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper-warm);
  border: 1px solid rgba(36, 31, 20, .22);
  border-radius: 7px;
  padding: .74em .85em;
  width: 100%;
  transition: background .16s, border-color .16s, box-shadow .16s;
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%23554E3C' stroke-width='2'%3E%3Cpath d='M1 1.5 7 7l6-5.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9em center;
  padding-right: 2.6em;
}
.field input:focus, .field select:focus, .field textarea:focus {
  background: #fff;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(217, 96, 28, .16);
}

/* ---- HubSpot embed ----
   HubSpot injects its iframe with inline `height:100%`. A percentage height
   resolves against the parent, the parent is auto-height, and the whole thing
   collapses to 0px — the form renders but is invisible. Giving the container
   a height of its own breaks that circularity.

   The floor has to be generous: HubSpot's resize message fires only
   intermittently, and the iframe is scrolling="no", so if the floor is too
   low the Submit button is simply cut off. Overshooting costs a little
   whitespace; undershooting loses submissions. */
.hs-form-frame { min-height: 560px; }
.hs-form-frame iframe { display: block; }
@media (max-width: 620px) { .hs-form-frame { min-height: 700px; } }

/* The embed brings its own generous internal padding, so the card's padding
   would otherwise double up and leave a wide margin around the form. */
.form-card:has(.hs-form-frame) { padding: clamp(10px, 1.2vw, 16px); }

.form__foot {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  margin-top: .2em;
}
.form__status { font-size: .875rem; color: var(--orange-deep); font-weight: 500; max-width: 42ch; }

/* =========================================================
   FOOTER
   ========================================================= */
.foot {
  background: var(--paper-warm);
  border-top: 1px solid var(--hairline);
  padding: 32px 0;
}
.foot__in {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px 28px;
}
.foot__meta { font-size: .85rem; color: var(--muted); }
.foot__meta a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--hairline); }
.foot__meta a:hover { color: var(--orange-deep); border-bottom-color: var(--orange); }

/* =========================================================
   PLACEHOLDER MARKERS (visible only while the site is locked)
   ========================================================= */
.is-locked .ph {
  background: rgba(217, 96, 28, .13);
  box-shadow: 0 0 0 1px rgba(217, 96, 28, .35);
  border-radius: 3px;
}

/* =========================================================
   MOTION
   ========================================================= */
.rise {
  opacity: 0;
  animation: rise .72s var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
  .rise, .reveal { opacity: 1 !important; transform: none !important; }
}