/* =========================================================================
   Agenta partner program + referral system
   Design tokens first, then layout, then components, then the form.
   Mobile first. One breakpoint at 720px, one at 980px.
   ========================================================================= */

:root {
  /* Warm cream canvas with near-white cards lifted on top of it, a muted
     ink instead of flat black, and a deep editorial blue rather than a
     bright UI blue. Text tokens keep their old names and meanings (ink =
     most prominent, ink-3 = quietest) so every component below reads the
     same regardless of which theme is live. */
  --ink:        #16171B;
  --ink-2:      #625D55;   /* 6.5:1 on white, 5.9:1 on the cream canvas */
  --ink-3:      #706D68;   /* 5.2:1 on white, 4.65:1 on the cream canvas */

  --bg:         #F6F3EE;   /* page canvas, and sunken fields */
  --surface:    #FFFFFF;   /* cards lifted off the canvas */
  --panel:      #EEF2FA;   /* the blue-tinted panels: the maths, the form */
  --bg-soft:    #EFEBE2;   /* video slots, ghost button hover */

  --line:       rgba(22, 23, 27, .12);
  --line-soft:  rgba(22, 23, 27, .08);

  --blue:       #3B62B5;
  --blue-dark:  #2F4F92;
  --blue-line:  rgba(59, 98, 181, .28);

  --danger-bg:   #FEF2F2;
  --danger-line: #FBCDCD;
  --danger-ink:  #9B1C1C;

  --shell:      640px;
  --radius:     14px;
  --radius-sm:  10px;

  /* A display serif for headlines and the big figures (prices, stats, the
     numbered steps); everything else stays in Inter. */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;

  --shadow:     0 1px 2px rgba(22, 23, 27, .04), 0 8px 20px rgba(22, 23, 27, .05);

  /* The signature treatment, reserved for a handful of anchor moments (the
     three "how it works" steps, the math card, the qualify gate, the form):
     a solid ink border and a hard, unblurred offset shadow, like a card
     sitting slightly off the page rather than sunk into it. */
  --shadow-lift: 6px 6px 0 0 var(--ink);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  position: relative;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }

::selection { background: rgba(59, 98, 181, .18); color: var(--ink); }

.skip {
  position: absolute; left: -9999px;
  background: var(--blue); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 50;
}
.skip:focus { left: 12px; top: 12px; }

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

/* ----------------------------------------------------------------- shell */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 20px;
}

/* Clear the sticky header when an anchor or scrollIntoView lands on a section */
section[id], .form-card { scroll-margin-top: 72px; }

.section        { padding: 56px 0; }
.section-tight  { padding: 20px 0; }
.section-apply  { padding: 56px 0 72px; }

/* A tight section is attached to the one above it, so the next full section
   does not need its whole top pad to read as a new block. */
.section-tight + .section { padding-top: 36px; }

/* A hairline under each major block, so sections read as deliberate bands
   instead of floating in one undifferentiated field. */
#how, #transparency, #protection, #referrals, #faq {
  border-top: 1px solid var(--line-soft);
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(246, 243, 238, .82);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}

.header-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 56px;
}

.wordmark {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 18px; letter-spacing: -.03em;
  color: var(--ink); text-decoration: none;
}

.wordmark-icon { width: 26px; height: 26px; flex: 0 0 auto; }

.pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px; font-weight: 500; line-height: 1.3;
  color: var(--ink-2);
  white-space: nowrap;
}

/* ------------------------------------------------------------- type scale */

.eyebrow {
  margin: 0 0 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow-blue   { color: var(--blue); }
.eyebrow-center { text-align: center; }

h1 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(34px, 8.6vw, 54px);
  line-height: 1.1;
  letter-spacing: -.012em;
  font-weight: 800;
}
.accent { color: var(--blue); }

h2 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(26px, 6.2vw, 36px);
  line-height: 1.2;
  letter-spacing: -.01em;
  font-weight: 700;
}
.h2-center { text-align: center; }

h3 {
  margin: 0 0 6px;
  font-size: 16px; font-weight: 600; letter-spacing: -.015em;
}

p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

.lede {
  color: var(--ink-2);
  font-size: 17px;
  margin-bottom: 24px;
}
.lede-sm     { font-size: 15.5px; }
.lede-center { text-align: center; }

.micro {
  margin: 10px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
}
.micro-left { text-align: left; }
.micro a { color: var(--blue); }

/* -------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 14px 20px;
  font: inherit; font-weight: 600; font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); }

.btn-ghost {
  background: transparent; color: var(--ink-2); border-color: var(--line);
}
.btn-ghost:hover { background: var(--bg-soft); color: var(--ink); }

.btn-block { display: flex; width: 100%; }
.btn-block + .btn-block { margin-top: 10px; }

/* ----------------------------------------------------------------- hero */

/* The stats row is hero proof, so let it sit close rather than a section away */
.hero { padding-top: 44px; padding-bottom: 24px; }

.ticks {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.ticks li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  color: var(--ink-2);
}
.ticks li::before {
  content: "";
  position: absolute; left: 0; top: .45em;
  width: 13px; height: 9px;
  border-left: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(-45deg);
}

/* ---------------------------------------------------------------- stats */

.stats { display: grid; gap: 10px; }

.stat {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 16px;
  text-align: center;
  background: var(--surface);
}
.stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 34px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1;
}
.stat-label {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--ink-2);
}

/* ---------------------------------------------------------------- cards */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}

.card-blue {
  background: var(--panel);
  border-color: var(--blue-line);
  box-shadow: none;
}

.card-title {
  margin: 0 0 14px;
  font-size: 16px; font-weight: 700; letter-spacing: -.015em;
}

/* ---------------------------------------------------------------- steps */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

/* One of the handful of "signature" cards: solid border, hard offset
   shadow, no corner radius. Separate rule rather than a shared class, so
   editing the step markup elsewhere can't accidentally lose the treatment. */
.step {
  text-align: center;
  padding: 26px 20px 24px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}

.step-num {
  display: block;
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 36px; font-weight: 800; line-height: 1;
  color: var(--blue);
}

.step p { color: var(--ink-2); font-size: 14.5px; }

.step-time {
  margin-top: 10px !important;
  font-size: 13px; font-weight: 500;
  color: var(--blue) !important;
}

/* ------------------------------------------------------------- the math */

.math {
  padding: 28px 24px;
  border: 1.5px solid var(--ink);
  box-shadow: var(--shadow-lift);
}

.price {
  margin: 0 0 10px;
  letter-spacing: -.01em;
  line-height: 1;
}
.price span { font-family: var(--font-display); font-size: 48px; font-weight: 800; }
.price em {
  font-style: normal;
  font-size: 17px; font-weight: 600;
  color: var(--ink-2);
}

.math-note { color: var(--ink-2); font-size: 15px; margin-bottom: 20px; }

.ledger { margin: 0; font-size: 14.5px; }
.ledger > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--blue-line);
}
.ledger dt { color: var(--ink-2); margin: 0; }
.ledger dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger-total { font-weight: 700; }
.ledger-total dt { color: var(--ink) !important; }

/* -------------------------------------------------------- do / never do */

.two-up { display: grid; gap: 12px; }

.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.list li {
  position: relative;
  padding-left: 28px;
  font-size: 14.5px;
  color: var(--ink-2);
}
.list li::before {
  position: absolute; left: 0; top: 0;
  font-size: 14px; font-weight: 700;
  line-height: 1.6;
}
.list-yes li::before { content: "\2713"; color: var(--blue); }
.list-no  li::before { content: "\2715"; color: var(--ink-3); }

/* ------------------------------------------------------------- features */

.feature-grid { display: grid; gap: 12px; }

.feature { display: flex; align-items: flex-start; gap: 14px; }
.feature p { color: var(--ink-2); font-size: 14.5px; }

.icon {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--blue);
}
.icon svg { width: 18px; height: 18px; }

/* ----------------------------------------------------------- video reel */

/* Full-bleed: the reel sits outside .shell so cards drift off both edges. */
.reel {
  position: relative;
  overflow: hidden;
  /* No bottom margin: the reel ends the section, so the section's own
     padding is the gap. An extra margin here double-spaces it. */
  margin: 26px 0 0;
  /* Fade the cards out at the edges instead of clipping them dead */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

.reel-track {
  display: flex;
  width: max-content;
  animation: reel-drift 64s linear infinite;
}

/* Pause while someone is looking at a card or tabbing through one */
/* The drift must yield to intent. `is-settled` is set from JS the moment the
   pointer enters the whole section, which is a far bigger target than the reel
   itself, so a card has long stopped moving by the time you reach it. */
.reel:hover .reel-track,
.reel:focus-within .reel-track,
.reel.is-playing .reel-track,
.reel.is-settled .reel-track { animation-play-state: paused; }

/* The trailing padding is the inter-set gap. Without it the loop jumps,
   because translateX(-50%) lands half a gap short of one full set. */
.reel-set {
  display: flex;
  gap: 12px;
  padding: 0 12px 0 0;
  margin: 0;
  list-style: none;
}

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

.reel-card { width: 168px; flex: 0 0 auto; }

/* A button, so clicking it is reachable by keyboard and announced properly.
   A <video> without `controls` is not interactive content, so it is legal
   inside a button. */
.reel-media {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-soft);
  overflow: hidden;
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* Lift the clip you are pointing at, in the same hard-shadow language as
   the signature cards, so the reel reads as part of the same system. */
.reel-media:hover,
.reel-media:focus-visible {
  border-color: var(--ink);
  box-shadow: 5px 5px 0 0 var(--ink);
  transform: translate(-2px, -2px);
}
.reel-card.is-playing .reel-media {
  border-color: var(--ink);
  box-shadow: 5px 5px 0 0 var(--ink);
  transform: translate(-2px, -2px);
}

.reel-media video,
.reel-media img {
  display: block;
  width: 100%; height: 100%;
  /* Covers the pillarbox bars on the one clip shot in landscape */
  object-fit: cover;
  background: #0B0C0E;
}

/* Play badge, with a soft scrim so it stays legible on a bright poster */
.reel-play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 12px rgba(22, 23, 27, .25);
  transition: transform .15s ease, opacity .15s ease;
}
.reel-media:hover .reel-play { transform: translate(-50%, -50%) scale(1.07); }

.reel-play::after {
  content: "";
  margin-left: 3px;
  border-left: 13px solid var(--blue);
  border-top: 8.5px solid transparent;
  border-bottom: 8.5px solid transparent;
}

/* Once it is playing, get out of the way */
.reel-card.is-playing .reel-play { opacity: 0; pointer-events: none; }

/* preload="none" means the clip is fetched on click, which is a beat of
   nothing on a slow line. Swap the triangle for a spinner so the click
   always registers visibly. */
.reel-card.is-loading .reel-play::after {
  margin: 0;
  width: 16px; height: 16px;
  border: 2px solid var(--blue-line);
  border-top-color: var(--blue);
  border-radius: 999px;
  animation: reel-spin .7s linear infinite;
}

@keyframes reel-spin { to { transform: rotate(360deg); } }

.reel-who {
  margin: 10px 0 0;
  display: flex; flex-direction: column;
  line-height: 1.35;
}
.reel-who strong { font-size: 13.5px; font-weight: 600; }
.reel-who span   { font-size: 12px; color: var(--ink-3); }

/* No drift in two cases, both for the same reason: there is no way to stop it.
   Touch devices have no hover, so a drifting card is a target you cannot catch.
   Reduced motion must also come after the global reduced-motion rule near the
   top, which would otherwise leave the marquee flickering at 0.01ms.
   Both become an ordinary swipe strip instead. */
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .reel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .reel-track { animation: none !important; width: auto; }
  .reel-set + .reel-set { display: none; }
  .reel-set { padding-left: 20px; }
  .reel-card { scroll-snap-align: center; }
}

/* ----------------------------------------------------------------- gate */

.gate {
  text-align: center;
  padding: 28px 24px;
  border: 1.5px solid var(--ink);
  box-shadow: var(--shadow-lift);
}
.gate-half h3 { font-size: 20px; letter-spacing: -.025em; }
.gate-half p  { color: var(--ink-2); font-size: 14.5px; }

.gate-or {
  position: relative;
  margin: 18px 0;
}
.gate-or::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1px solid var(--line);
}
.gate-or span {
  position: relative;
  background: var(--surface);
  padding: 0 12px;
  font-size: 13px;
  color: var(--ink-3);
}

/* ------------------------------------------------------------ referrals */

.reflink { margin-top: 12px; }
.reflink-note { color: var(--ink-2); font-size: 14.5px; margin-bottom: 16px; }

.reflink-out { display: flex; gap: 8px; }
.reflink-out input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  color: var(--ink-2);
  background: var(--bg);
}
.reflink-out .btn { flex: 0 0 auto; padding-left: 18px; padding-right: 18px; }

/* ------------------------------------------------------------------ faq */

.faq { display: grid; gap: 10px; }

.faq .card { padding: 0; }

.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 20px;
  cursor: pointer;
  font-size: 15px; font-weight: 600; letter-spacing: -.012em;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 18px; font-weight: 400; line-height: 1.35;
  color: var(--ink-3);
}
.faq details[open] summary::after { content: "\2212"; }

.faq-body {
  padding: 0 20px 20px;
  color: var(--ink-2);
  font-size: 14.5px;
}

/* ----------------------------------------------------------------- form */

.form-card {
  padding: 24px 22px;
  margin-top: 8px;
  border: 1.5px solid var(--ink);
  box-shadow: var(--shadow-lift);
}

/* .field / .field-label / input[type="text"] are still live: the referral
   link widget in #referrals uses all three. Everything else that used to
   live here (segmented control, hint, divider, form-error, the select
   arrow, the "not a fit" outcome) belonged only to the qualify form that
   used to sit in front of this card, and went with it. */

.field {
  display: block;
  border: 0; padding: 0;
  margin: 0 0 16px;
}

.field-label {
  display: block;
  margin-bottom: 7px;
  padding: 0;
  font-size: 13.5px; font-weight: 500;
  color: var(--ink);
}

input[type="text"] {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 13px;
  appearance: none;
  -webkit-appearance: none;
}
input::placeholder { color: var(--ink-3); }
input:focus { border-color: var(--blue); }

.calendly-mount {
  min-height: 820px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg);
}

/* Calendly is supposed to resize its own iframe to fit its content via a
   postMessage handshake, but that handshake silently fails to fire in a
   lot of real embedding contexts (reproduced here on our own domain, on
   localhost, and in an in-app browser) and leaves the iframe stuck at its
   unsized default of 150px, with everything below the header blank.
   Forcing a fixed height sidesteps Calendly's resize logic entirely: the
   real content was always rendering fine, just squeezed into a sliver.
   The iframe is a normal scrollable element (Calendly doesn't set
   scrolling="no"), so anything taller than this still scrolls inside the
   box rather than getting clipped. !important is required because
   Calendly sets its broken height as an inline style, which otherwise
   always wins over a stylesheet rule. */
.calendly-mount iframe {
  height: 820px !important;
  width: 100% !important;
}

/* ============================= breakpoints ============================= */

@media (min-width: 720px) {
  :root { --shell: 720px; }

  .section       { padding: 76px 0; }
  .section-apply { padding: 76px 0 96px; }
  .hero          { padding-top: 64px; padding-bottom: 32px; }

  /* Must be restated here. Both selectors are (0,1,0), so the .section rule
     above would otherwise win on source order and a "tight" section would
     quietly render at the full 76px. */
  .section-tight            { padding: 28px 0; }
  .section-tight + .section { padding-top: 44px; }

  .stats        { grid-template-columns: repeat(3, 1fr); }
  .steps        { grid-template-columns: repeat(3, 1fr); }
  .two-up       { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }

  .reel-card { width: 208px; }
  .reel-set  { gap: 16px; padding-right: 16px; }

  .ticks {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 22px;
  }

  /* Stretch the row so the "or" divider can be a full-height vertical rule */
  .gate {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 8px;
    padding: 32px 26px;
  }
  .gate-half { display: flex; flex-direction: column; justify-content: center; }
  .gate-or {
    display: flex; align-items: center; justify-content: center;
    margin: 0; padding: 0 18px;
  }
  .gate-or::before {
    /* Bleed into the card's padding so the rule reads as a real divider */
    top: -16px; bottom: -16px; left: 50%; right: auto;
    border-top: 0;
    border-left: 1px solid var(--line);
  }
  .gate-or span { padding: 8px 0; }

  .hero .btn-block,
  .section-apply .form-card { max-width: none; }

  .hero .btn-primary { display: inline-flex; width: auto; min-width: 280px; }
  .micro { text-align: left; }

  .form-card { padding: 30px; }
}

@media (min-width: 980px) {
  :root { --shell: 880px; }
  .section-apply .shell { max-width: 620px; }
}