/* ============================================================
   The Sales Lab funnel
   Order of this file: tokens, base, layout, then components.
   Every colour lives in :root. Never hardcode one below.
   Light theme. Gold accent pulled from The Sales Lab logo.
   Token names kept from the original dark build so nothing
   else had to be renamed: --void is the page base, --deep is
   the alternating band, --slab is a card surface.
   ============================================================ */

:root {
  --void:      #ffffff;
  --deep:      #faf6ed;
  --slab:      #fdfaf3;
  --slab-2:    #f4eddd;
  --line:      rgba(26, 26, 26, .12);
  --line-hot:  rgba(183, 126, 29, .45);
  --signal:    #c8922a;
  --signal-hi: #e3b957;
  --signal-lo: #a4741a;
  --ink:       #131313;
  --mute:      #4a4a45;
  --dim:       #8a857a;
  --danger:    #b8443c;

  --font-display: 'Archivo', sans-serif;
  --font-kicker: 'Sora', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --w-display: 800;
}

/* ---------- base ---------- */

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

html {
  scroll-behavior: smooth;
}

body {
  background: var(--void);
  color: var(--mute);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--signal-lo);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  color: var(--ink);
  text-wrap: balance;
}

h2 {
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.15;
}

h3 {
  font-size: clamp(17px, 2.2vw, 22px);
  line-height: 1.3;
}

[hidden] {
  display: none !important;
}

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

@media (max-width: 640px) {
  body { font-size: 16px; }
}

/* ---------- layout ---------- */

.shell {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

.shell-wide {
  max-width: 1180px;
}

.band {
  padding: 70px 0;
  background: var(--void);
  border-top: 1px solid var(--line);
}

.band-alt {
  background: var(--deep);
}

@media (max-width: 640px) {
  .band { padding: 52px 0; }
}

.center {
  text-align: center;
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--signal-lo);
  margin-bottom: 14px;
}

.section-sub {
  margin: 12px auto 0;
  max-width: 56ch;
}

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

.hero {
  border-top: 0;
  padding: 56px 0 70px;
  text-align: center;
  background:
    radial-gradient(58% 46% at 50% 22%, rgba(217, 162, 52, .16), transparent 68%),
    linear-gradient(180deg, #fbf5e9 0%, var(--void) 76%);
}

@media (max-width: 640px) {
  .hero { padding: 44px 0 52px; }
}

/* The real logo is a wide lockup with a chart mark, so it needs more
   height than a plain wordmark would. Capped by width on small screens. */
.logo {
  height: 78px;
  width: auto;
  max-width: 300px;
  object-fit: contain;
  margin: 0 auto 30px;
}

@media (max-width: 640px) {
  .logo {
    height: 62px;
    max-width: 232px;
    margin-bottom: 24px;
  }
}

.logo-fallback {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: 18px;
  letter-spacing: .18em;
  color: var(--ink);
  border: 1px solid var(--line-hot);
  border-radius: 6px;
  padding: 12px 22px;
  margin-bottom: 30px;
}

h1 .lead {
  display: block;
  font-size: clamp(34px, 6.4vw, 60px);
  line-height: 1.04;
  letter-spacing: -.015em;
}

/* The kicker carries the actual argument, so it runs wider and heavier
   than a subhead would. Sora here on purpose, to separate it from the
   Archivo lead line above it. */
h1 .kicker {
  display: block;
  font-family: var(--font-kicker);
  font-weight: 700;
  font-size: clamp(19px, 2.9vw, 30px);
  line-height: 1.32;
  letter-spacing: -.008em;
  color: #1f1f1c;
  max-width: 46ch;
  margin: 22px auto 0;
}

@media (max-width: 640px) {
  h1 .kicker {
    max-width: 30ch;
    margin-top: 18px;
  }
}

.hl {
  color: var(--signal);
  text-shadow: 0 0 26px rgba(217, 162, 52, .5);
}

.nowrap {
  white-space: nowrap;
}

/* Hand-drawn underline for the headline figure. The stroke colour is
   baked into the data URI because var() cannot reach inside one. It
   matches --signal. Change both together. */
.scrawl {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M3 7 Q 40 3 70 6 T 117 5' fill='none' stroke='%23c8922a' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M10 10 Q 50 7 80 9 T 114 8' fill='none' stroke='%23c8922a' stroke-width='2.2' stroke-linecap='round' opacity='.85'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 100% .16em;
  padding-bottom: .14em;
}

.cite {
  font-size: 12.5px;
  color: var(--dim);
  margin-top: 16px;
}

/* No max-width here on purpose. This line is meant to hold on one line at
   desktop, so the 900px shell is the only limit. It wraps on mobile, which
   is fine. */
.lede {
  font-family: var(--font-kicker);
  font-size: clamp(15px, 1.7vw, 17.5px);
  font-weight: 400;
  line-height: 1.5;
  color: #2a2a26;
  margin: 26px auto 30px;
}

/* ---------- video player facade ---------- */

.player {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #17130a;
}

.player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.player-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}

.player-face img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96px;
  height: 66px;
  transform: translate(-50%, -50%);
  border-radius: 14px;
  background: rgba(217, 162, 52, .82);
  transition: transform .18s ease, filter .18s ease;
}

.play-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #ffffff;
}

.player-face:hover .play-btn,
.player-face:focus-visible .play-btn {
  transform: translate(-50%, -50%) scale(1.05);
  filter: brightness(1.08);
}

.runtime {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-size: 13px;
  font-weight: 500;
  color: #ffffff;
  background: rgba(20, 16, 6, .72);
  border-radius: 6px;
  padding: 3px 9px;
}

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

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: 17px;
  color: #1c1303;
  text-decoration: none;
  background: linear-gradient(180deg, var(--signal-hi), var(--signal));
  border: 0;
  border-radius: 8px;
  padding: 16px 34px;
  cursor: pointer;
  box-shadow: 0 0 28px rgba(217, 162, 52, .38);
  transition: filter .15s ease;
}

.btn:hover {
  filter: brightness(1.05);
}

.btn:disabled {
  filter: saturate(.4) brightness(.95);
  cursor: default;
}

.cta-row {
  margin-top: 40px;
}

/* ---------- Typeform application ----------
   The application is a Typeform embed, so the styling here is only the frame
   around it. The min-height reserves space before the iframe arrives, which
   keeps the section from collapsing and then jumping. Everything inside the
   iframe is styled in Typeform itself, not here. */

#apply {
  scroll-margin-top: 24px;
}

.tf-wrap {
  margin-top: 34px;
  background: var(--slab);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  text-align: left;
}

.tf-wrap::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--signal-lo), var(--signal-hi), var(--signal-lo));
}

/* Typeform ships a 500px tall iframe. A six question application is cramped
   at that height, and the reserved space has to match the iframe exactly or
   the difference shows as a band of empty background. Both numbers are set
   here together. The !important is needed because Typeform sets the height
   inline. */
.tf-wrap [data-tf-live] {
  min-height: 640px;
}

.tf-wrap iframe {
  display: block;
  width: 100%;
  height: 640px !important;
  border: 0;
}

@media (max-width: 640px) {
  .tf-wrap [data-tf-live] {
    min-height: 580px;
  }
  .tf-wrap iframe {
    height: 580px !important;
  }
}
/* ---------- student stories ---------- */

.story {
  margin-top: 44px;
}

.story h3 {
  text-align: center;
  margin-bottom: 18px;
}

/* ---------- proof wall ----------
   Cards are CSS message blocks. To swap one for a real screenshot,
   replace the .msg block with a plain <img> inside the same .wall-card.
   The message surface stays dark on purpose. It should read as a
   screenshot of Discord, which is a different app to this page. */

.wall {
  margin-top: 44px;
  columns: 3 300px;
  column-gap: 18px;
}

@media (max-width: 820px) {
  .wall { columns: 2; }
}

@media (max-width: 620px) {
  .wall { columns: 1; }
}

.wall-card {
  break-inside: avoid;
  margin-bottom: 18px;
  background: var(--deep);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
}

/* height:auto is load bearing. The width and height attributes on each shot are
   there to reserve space and stop the wall reflowing as images arrive, but they
   also act as presentational hints, so without this the height attribute wins
   and every screenshot renders squashed. */
.wall-card > img {
  border-radius: 8px;
  width: 100%;
  height: auto;
  display: block;
}

.msg {
  background: #151a20;
  border-radius: 8px;
  padding: 12px 14px;
  text-align: left;
}

.msg + .msg {
  margin-top: 10px;
}

.msg-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.avatar {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 500;
  color: #10141a;
}

.uname {
  font-size: 14.5px;
  font-weight: 500;
}

.tstamp {
  font-size: 12px;
  color: #7d8590;
  margin-left: 8px;
}

.u1 { color: #5eb9f0; } .av1 { background: #5eb9f0; }
.u2 { color: #c084f0; } .av2 { background: #c084f0; }
.u3 { color: #5cd6b0; } .av3 { background: #5cd6b0; }
.u4 { color: #f0a35e; } .av4 { background: #f0a35e; }
.u5 { color: #8f9ff5; } .av5 { background: #8f9ff5; }
.u6 { color: #f07a9c; } .av6 { background: #f07a9c; }

.msg-body {
  font-size: 14.5px;
  line-height: 1.5;
  color: #dbdee1;
}

.msg-fig {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: 26px;
  color: #dbdee1;
}

.embed {
  border-left: 3px solid var(--signal);
  background: #101418;
  border-radius: 4px;
  padding: 10px 12px;
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #b8c0c9;
}

.reacts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.react {
  font-size: 12.5px;
  color: #dbdee1;
  background: rgba(217, 162, 52, .14);
  border: 1px solid rgba(217, 162, 52, .3);
  border-radius: 999px;
  padding: 2px 9px;
}

/* ---------- footer ---------- */

.footer {
  padding: 56px 0 64px;
  background: var(--deep);
  border-top: 1px solid var(--line);
  text-align: center;
}

.disclaimer {
  font-size: 13.5px;
  color: var(--dim);
  max-width: 64ch;
  margin: 0 auto 28px;
}

.footer-org {
  font-size: 14px;
  color: var(--dim);
}

.footer-org a {
  color: var(--mute);
}

.footer-links {
  margin-top: 12px;
  font-size: 14px;
}

.footer-links a {
  color: var(--mute);
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

.dot {
  color: var(--dim);
  margin: 0 8px;
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}