/* ============================================================
   Leadkita landing page
   Every colour, face and space value comes from styles/tokens.css.
   Nothing here invents a new brand value.

   Gold budget, deliberately small:
     1. the lead dot in the mark
     2. the primary button
     3. the lead dot in flight, in the launch sequence, which is the
        same dot doing the thing the brand is named after
   Gold is never text on a light background. It measures 1.9:1 there.
   ============================================================ */

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

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin: 0;
  font: var(--lk-body);
  color: var(--lk-ink);
  background: var(--lk-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(15,42,63,.12);
  overflow-x: hidden;
}

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

:where(a, button, summary):focus-visible{
  outline: 2px solid var(--lk-ink);
  outline-offset: 3px;
  border-radius: 3px;
}
.lk-on-dark :where(a, button, summary):focus-visible{ outline-color: var(--lk-gold); }

.sr{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip{
  position: fixed; top: 10px; left: 10px; z-index: 200;
  transform: translateY(-160%);
  background: var(--lk-ink); color: var(--lk-paper);
  padding: 12px 18px; border-radius: var(--lk-r-sm);
  font: 700 15px/1 var(--lk-sans); text-decoration: none;
  transition: transform .18s ease;
}
.skip:focus{ transform: none; }

/* ---------- layout primitives ---------- */
.wrap{
  --gut: clamp(20px, 4.4vw, 34px);
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: var(--gut);
}

.sec{ padding-block: clamp(64px, 8.4vw, 116px); scroll-margin-top: 84px; }
.sec-tint{ background: var(--lk-mist); }
/* The dark band has to set its own colour. .lk-on-dark in the token file is a
   scoping hook for buttons and focus rings, it does not paint text. */
.sec-dark{ background: var(--lk-deep); color: var(--lk-on-dark); }
.sec-dark h2, .sec-dark h3{ color: var(--lk-paper); }

.head{ max-width: 66ch; margin-bottom: clamp(34px, 4.4vw, 56px); }
.head h2{ margin-top: 12px; }
.head .lead{
  font: var(--lk-body-l);
  color: var(--lk-muted);
  margin-top: 16px;
  max-width: 58ch;
  text-wrap: pretty;
}
.head-left{ max-width: 46ch; margin-bottom: 0; }
.lead-s{ font: var(--lk-body); }
.sec-dark .head .lead{ color: var(--lk-on-dark-dim); }
.sec-dark .lk-label{ color: var(--lk-on-dark-dim); }

.num{ font-variant-numeric: tabular-nums; }
.ta-r{ text-align: right; }

/* ---------- reveal on scroll ---------- */
.reveal{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .62s cubic-bezier(.22,.75,.3,1), transform .62s cubic-bezier(.22,.75,.3,1);
}
.reveal.is-in{ opacity: 1; transform: none; }

/* ============================================================
   HEADER
   ============================================================ */
/* The header is painted, not transparent. It matches the hero exactly, so it
   still reads as one surface, but the white wordmark now has a real
   background behind it instead of borrowing the hero's. */
.hdr{
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  color: var(--lk-paper);
  background: var(--lk-deep);
  border-bottom: 1px solid transparent;
  transition: background-color .28s ease, border-color .28s ease, color .28s ease, backdrop-filter .28s ease;
}
.hdr.is-stuck{
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  border-bottom-color: var(--lk-line);
  color: var(--lk-ink);
}
.hdr-in{
  display: flex; align-items: center; gap: 18px;
  min-height: 68px;
}
.hdr-logo{ text-decoration: none; color: inherit; margin-right: auto; }
.hdr-logo .lk-mark{ width: 1.65rem; height: 1.65rem; color: currentColor; }
.hdr-word{
  font-size: 21px; color: currentColor;
  letter-spacing: var(--lk-wordmark-tracking);
}

.hdr-nav{ display: flex; align-items: center; gap: 4px; }
.hdr-nav a{
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 12px;
  font: 500 14.5px/1 var(--lk-sans);
  letter-spacing: -0.01em;
  text-decoration: none;
  border-radius: var(--lk-r-sm);
  opacity: .82;
  transition: opacity .16s ease, background-color .16s ease;
}
.hdr-nav a:hover{ opacity: 1; background: rgba(255,255,255,.1); }
.hdr.is-stuck .hdr-nav a:hover{ background: var(--lk-mist); }
.hdr-nav a.is-here{ opacity: 1; font-weight: 700; }

.hdr-act{ display: flex; align-items: center; gap: 10px; }
.hdr-cta{ padding: 10px 18px; min-height: 42px; font-size: 15px; }

.hdr-burger{
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  background: none; border: 1px solid currentColor; border-radius: var(--lk-r-sm);
  opacity: .7; cursor: pointer;
}
.hdr-burger span{
  display: block; width: 17px; height: 1.8px;
  background: currentColor; border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.hdr-burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.8px) rotate(45deg); }
.hdr-burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.hdr-burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.8px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position: relative;
  background: var(--lk-deep);
  color: var(--lk-on-dark);
  padding-block: clamp(112px, 13vw, 168px) clamp(64px, 8vw, 104px);
  overflow: hidden;
}
.hero::after{
  content: "";
  position: absolute; inset: auto 0 0 0; height: 1px;
  background: rgba(255,255,255,.1);
}
.hero-arc, .cta-arc{
  position: absolute;
  pointer-events: none;
  color: rgba(255,255,255,.055);
}
.hero-arc{ width: 720px; top: -140px; right: -190px; }
.cta-arc{ width: 700px; bottom: -290px; right: -170px; }
.hero-arc svg, .cta-arc svg{ width: 100%; height: auto; }

.hero-in{
  position: relative;
  display: grid;
  gap: clamp(40px, 5vw, 60px);
  align-items: center;
}
@media (min-width: 1040px){
  .hero-in{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: 56px; }
}

.hero-eyebrow{ color: var(--lk-on-dark-dim); }
.hero-h{
  margin-top: 20px;
  color: var(--lk-paper);
  text-wrap: balance;
  max-width: 15ch;
}
.hero-sub{
  margin-top: 22px;
  color: var(--lk-on-dark-dim);
  max-width: 48ch;
  text-wrap: pretty;
}
.hero-cta{
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 32px;
}
.hero-meta{
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 26px;
}
.hero-meta .lk-label{ color: var(--lk-on-dark-dim); }
.hero-meta .dot{
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255,255,255,.34);
}

/* ---------- the 90 second launch ---------- */
.stage-shell{ position: relative; }

.stage{
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.028));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--lk-r-lg);
  padding: clamp(16px, 2.2vw, 22px);
  box-shadow: 0 24px 60px rgba(0,0,0,.32);
}

.stage-top{
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.stage-top .lk-label{ color: var(--lk-on-dark-dim); }
.stage-clock{
  font-family: var(--lk-mono);
  font-size: 30px; font-weight: 500; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--lk-paper);
  margin-top: 6px;
}
.stage-play{
  width: 44px; height: 44px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--lk-r-pill);
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}
.stage-play:hover{ background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); }
.stage-play svg{ width: 19px; height: 19px; fill: var(--lk-paper); }
.stage-play .ic-play, .stage-play .ic-replay{ display: none; }
.stage-play[data-state="paused"] .ic-pause{ display: none; }
.stage-play[data-state="paused"] .ic-play{ display: block; }
.stage-play[data-state="done"] .ic-pause{ display: none; }
.stage-play[data-state="done"] .ic-replay{ display: block; }

.stage-rail{
  height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.14);
  margin: 16px 0 18px;
  overflow: hidden;
}
.stage-rail i{
  display: block; height: 100%; width: 100%;
  background: var(--lk-paper);
  transform: scaleX(0); transform-origin: 0 50%;
}

/* Tall enough for the longest pane, which is the five generated headlines.
   The panes are absolutely positioned, so this height is what holds them. */
.stage-view{
  position: relative;
  min-height: 254px;
  border-radius: var(--lk-r-md);
  background: rgba(8,23,36,.42);
  border: 1px solid rgba(255,255,255,.08);
  padding: 18px;
  overflow: hidden;
}
.pane{
  position: absolute; inset: 18px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .42s ease, transform .42s cubic-bezier(.22,.75,.3,1);
  pointer-events: none;
}
.pane.is-on{ opacity: 1; transform: none; }

.pane-k{
  font-family: var(--lk-mono);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: var(--lk-track-label);
  text-transform: uppercase;
  color: var(--lk-on-dark-dim);
  margin-bottom: 14px;
}

.fake-field{
  display: flex; align-items: center;
  min-height: 42px; padding: 0 14px;
  border-radius: var(--lk-r-sm);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  font: 500 15px/1.2 var(--lk-sans);
  color: var(--lk-paper);
}
.fake-url{ font-family: var(--lk-mono); font-size: 13px; margin-top: 10px; }

.pane-rows{ display: grid; gap: 8px; margin-top: 14px; }
.pane-rows i{ height: 9px; border-radius: 4px; background: rgba(255,255,255,.08); }
.pane-rows i:nth-child(2){ width: 74%; }
.pane-rows i:nth-child(3){ width: 46%; }

.chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.chips + .chips{ margin-top: 10px; }
.chip{
  display: inline-flex; align-items: center;
  min-height: 30px; padding: 0 12px;
  border-radius: var(--lk-r-pill);
  border: 1px solid rgba(255,255,255,.2);
  font: 500 13.5px/1 var(--lk-sans);
  color: rgba(255,255,255,.7);
}
.chip-on{
  background: var(--lk-paper);
  border-color: var(--lk-paper);
  color: var(--lk-ink);
  font-weight: 700;
}

.writes{ display: grid; gap: 6px; }
.writes li{
  font: 500 14px/1.3 var(--lk-sans);
  color: rgba(255,255,255,.86);
  padding: 6px 12px;
  border-radius: var(--lk-r-sm);
  background: rgba(255,255,255,.06);
  border-left: 2px solid rgba(255,255,255,.24);
  opacity: 0;
  transform: translateX(-8px);
}
.pane.is-on .writes li{ animation: writeIn .34s cubic-bezier(.22,.75,.3,1) forwards; }
.pane.is-on .writes li:nth-child(1){ animation-delay: .06s; }
.pane.is-on .writes li:nth-child(2){ animation-delay: .18s; }
.pane.is-on .writes li:nth-child(3){ animation-delay: .3s; }
.pane.is-on .writes li:nth-child(4){ animation-delay: .42s; }
.pane.is-on .writes li:nth-child(5){ animation-delay: .54s; }
@keyframes writeIn{ to{ opacity: 1; transform: none; } }

.pane-big{
  font: 800 40px/1 var(--lk-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--lk-paper);
}
.pane-big .cur{ font-size: .48em; font-weight: 700; vertical-align: .38em; margin-right: .16em; }
.pane-big .per{ font: var(--lk-body-s); color: var(--lk-on-dark-dim); letter-spacing: 0; }
.fake-btn{
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 16px; min-height: 42px; padding: 0 26px;
  border-radius: var(--lk-r-sm);
  background: var(--lk-gold); color: var(--lk-ink);
  font: 700 15px/1 var(--lk-sans);
}
.pane.is-on .fake-btn{ animation: pressIn .5s cubic-bezier(.3,1.4,.5,1) .5s both; }
@keyframes pressIn{ 0%{ transform: scale(.94); } 60%{ transform: scale(1.03); } 100%{ transform: scale(1); } }

.flight{ width: 100%; height: 78px; color: var(--lk-on-dark-dim); overflow: visible; }
/* The dot lives inside the SVG so it rides the same coordinate system as the
   path it follows. Outside it, the two drift apart at every other width. */
.flight-dot{
  fill: var(--lk-gold);
  offset-path: path("M18 22 C 96 22, 150 74, 282 74");
  offset-distance: 0%;
  offset-rotate: 0deg;
  opacity: 0;
}
.pane.is-on .flight-dot{ animation: fly 1.5s cubic-bezier(.5,0,.3,1) .25s forwards; }
@keyframes fly{
  0%{ offset-distance: 0%; opacity: 0; }
  12%{ opacity: 1; }
  88%{ opacity: 1; }
  100%{ offset-distance: 100%; opacity: 1; }
}
.chips-plat{ position: absolute; left: 0; top: 34px; }
.lead-row{
  position: absolute; right: 0; bottom: 2px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 14px; border-radius: var(--lk-r-sm);
  background: var(--lk-paper); color: var(--lk-ink);
  min-width: 150px;
  opacity: 0; transform: translateY(8px);
}
.lead-row b{ font: 700 14.5px/1.2 var(--lk-sans); }
.lead-row span{ font: var(--lk-body-s); color: var(--lk-muted); }
.pane.is-on .lead-row{ animation: writeIn .4s cubic-bezier(.22,.75,.3,1) 1.55s forwards; }

.close-line{
  font: 500 17px/1.45 var(--lk-sans);
  color: var(--lk-on-dark-dim);
  max-width: 34ch;
}
.close-line b{ color: var(--lk-paper); font-weight: 800; font-variant-numeric: tabular-nums; }
.close-line--us{ margin-top: 12px; color: var(--lk-paper); }

.beats{ display: grid; gap: 1px; margin-top: 16px; }
.beats button{
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 40px;
  padding: 8px 10px;
  background: none; border: 0; border-radius: var(--lk-r-sm);
  text-align: left; cursor: pointer;
  font: 500 14px/1.35 var(--lk-sans);
  color: rgba(255,255,255,.46);
  transition: color .2s ease, background-color .2s ease;
}
.beats button:hover{ color: rgba(255,255,255,.82); background: rgba(255,255,255,.05); }
.beats .bt{
  font-family: var(--lk-mono); font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  flex: 0 0 auto; opacity: .78;
}
.beats button[aria-current="true"]{
  color: var(--lk-paper);
  background: rgba(255,255,255,.09);
  font-weight: 700;
}
/* Narrow screens show only the beat you are on. The .is-live class comes from
   the script, so without JavaScript the full list stays readable. */
@media (max-width: 719px){
  .beats.is-live button{ display: none; }
  .beats.is-live button[aria-current="true"]{ display: flex; }
}

.stage-foot{
  font: var(--lk-body-s);
  color: rgba(255,255,255,.44);
  margin-top: 14px;
  max-width: 52ch;
}

/* ============================================================
   COST BAND
   ============================================================ */
.band{
  background: var(--lk-paper);
  border-bottom: 1px solid var(--lk-line);
  padding-block: clamp(44px, 5.4vw, 68px);
}
/* .band-in also carries .wrap, so it must not set its own max-width or the
   whole block drifts off the page grid. The measure goes on the text. */
.band-line{
  font: 500 clamp(19px, 2.3vw, 25px)/1.45 var(--lk-sans);
  letter-spacing: -0.018em;
  text-wrap: pretty;
  max-width: 68ch;
}
.band-line b{ font-weight: 800; }
.band-note{
  font: var(--lk-body-s);
  color: var(--lk-muted);
  margin-top: 16px;
  padding-left: 14px;
  border-left: 2px solid var(--lk-line-strong);
  max-width: 62ch;
}

/* ============================================================
   CARDS AND GRIDS
   ============================================================ */
.grid-3{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}

.feat{
  display: grid;
  align-content: start;
  gap: 10px;
  padding: var(--lk-s5);
  background: var(--lk-paper);
  transition: border-color .2s ease, transform .2s cubic-bezier(.22,.75,.3,1), box-shadow .2s ease;
}
.feat:hover{
  border-color: var(--lk-line-strong);
  transform: translateY(-2px);
  box-shadow: var(--lk-shadow-card);
}
.feat-n{
  font-family: var(--lk-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--lk-track-label);
  color: var(--lk-muted);
}
.feat p{ color: var(--lk-muted); font: var(--lk-body-s); }
.feat-wide{
  grid-template-columns: auto 1fr;
  gap: 22px;
  margin-top: 18px;
  padding: clamp(22px, 3vw, 32px);
  border-color: var(--lk-ink);
  border-width: 2px;
}
.feat-wide h3{ margin-bottom: 8px; }
.feat-wide-p{ font: var(--lk-body); color: var(--lk-muted); max-width: 62ch; }

.note-wide{ margin-top: 22px; max-width: 76ch; }
.note-wide strong{ font-weight: 800; }
.note-wide a{ color: var(--lk-ink); text-underline-offset: 3px; }

/* platform tiles: no card chrome, just a rule. Quieter than the ads section
   on purpose, because AI Ad Launcher is the thing that has to lead. */
.grid-plat{ gap: 0; border-top: 1px solid var(--lk-line); }
.plat{
  padding: 26px 26px 26px 0;
  border-bottom: 1px solid var(--lk-line);
  transition: background-color .2s ease;
}
.plat p{ color: var(--lk-muted); font: var(--lk-body-s); margin-top: 8px; max-width: 40ch; }
/* Locked to 3 columns, because the divider rules below count in threes.
   auto-fit would give 4 at 1160px and the borders would land wrong. */
@media (min-width: 780px){
  .grid-plat{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plat{ padding-inline: 26px; border-right: 1px solid var(--lk-line); }
  .plat:nth-child(3n){ border-right: 0; padding-right: 0; }
  .plat:nth-child(3n+1){ padding-left: 0; }
}
@media (min-width: 560px) and (max-width: 779px){
  .grid-plat{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Needs .plat in front of it: .plat p is more specific than .plat-note alone
   and would win on colour, size and margin. */
.plat .plat-note{
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px dashed var(--lk-line-strong);
  font: var(--lk-body-s);
  color: var(--lk-muted);
}
.plat-note .lk-label{ display: block; margin-bottom: 6px; }
.plat-note strong{ color: var(--lk-ink); font-weight: 700; }

.plat-foot{
  margin-top: 30px;
  font: var(--lk-body);
  color: var(--lk-ink);
}
.plat-foot-x{ color: var(--lk-muted); }

/* ============================================================
   PRICING
   ============================================================ */
.tiers{
  display: grid;
  gap: 20px;
  align-items: start;
}
@media (min-width: 860px){ .tiers{ grid-template-columns: 1fr 1fr; } }

.tier{
  padding: clamp(24px, 3vw, 34px);
  background: var(--lk-paper);
}
.tier .lk-price{ margin-top: 18px; }
.tier-pick{ box-shadow: var(--lk-shadow-raised); }
.tier-who{
  font: var(--lk-body-s); color: var(--lk-muted);
  margin-top: 12px; max-width: 40ch;
}
.tier-btn{ width: 100%; margin-top: 22px; }
.tier-plus{
  font: 700 14.5px/1.4 var(--lk-sans);
  margin-top: 26px;
}
.tier-sup{
  font: var(--lk-body-s); color: var(--lk-muted);
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid var(--lk-line);
}

.ticks, .crosses{ display: grid; gap: 9px; margin-top: 22px; }
/* Marker is absolute, not a grid column. A grid column would turn every
   inline <b> in the item into its own cell and stack the words. */
.ticks li, .crosses li{
  position: relative;
  padding-left: 30px;
  font: var(--lk-body-s);
}
.ticks li::before, .crosses li::before{
  position: absolute; left: 0; top: 0;
  width: 20px; text-align: center;
  font-family: var(--lk-sans);
  font-weight: 800; font-size: 13px; line-height: 1.62;
}
.ticks li::before{ content: "\2713"; color: var(--lk-success); }
.crosses li::before{ content: "\00D7"; color: var(--lk-muted); font-size: 15px; }
.crosses li{ color: var(--lk-muted); }
.ticks-dark li{ color: var(--lk-on-dark-dim); }
.ticks-dark li::before{ color: #6FD3AC; }
.crosses-dark li{ color: var(--lk-on-dark-dim); }
.crosses-dark li::before{ color: #E79A93; }

.note-buy{ margin-top: 24px; max-width: none; }

.pay{
  margin-top: 24px;
  padding: 20px 24px;
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-r-md);
  background: var(--lk-paper);
}
.pay p{ font: var(--lk-body); margin-top: 8px; }
.pay-x{ font: var(--lk-body-s) !important; color: var(--lk-muted); }

.addon{ margin-top: clamp(40px, 5vw, 64px); }
.addon h3{ margin-bottom: 16px; }
.addon-note{ font: var(--lk-body-s); color: var(--lk-muted); margin-top: 14px; }

/* Second add-on table: the premium, ask-first block. Separated from the plain
   add-ons above by a rule, because the two are sold differently. */
.addon-h2{
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--lk-line);
}
.addon-lead{
  font: var(--lk-body-s); color: var(--lk-muted);
  max-width: 68ch; margin-bottom: 16px;
}

/* AI Ad Launcher: the three detail columns under the feature cards. */
.ads-more{ margin-top: 22px; }
.ads-more-col{
  padding-top: 14px;
  border-top: 2px solid var(--lk-ink);
}
.ads-more-col .lk-label{ margin-bottom: 10px; }
.ads-list{ display: grid; gap: 7px; }
.ads-list li{
  font: var(--lk-body-s); color: var(--lk-muted);
  padding-left: 15px; position: relative;
}
.ads-list li::before{
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 1px; background: var(--lk-muted);
}
.ads-list b{ color: var(--lk-ink); font-weight: 650; }
.ads-foot{
  margin-top: 18px; max-width: 72ch;
  font: var(--lk-body-s); color: var(--lk-muted);
}

/* ---------- tables ---------- */
.tbl-scroll{ overflow-x: auto; border-radius: var(--lk-r-md); }
.tbl{
  width: 100%; min-width: 540px;
  border-collapse: collapse;
  background: var(--lk-paper);
  font: var(--lk-body-s);
}
.tbl thead th{
  font-family: var(--lk-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: var(--lk-track-label); text-transform: uppercase;
  color: var(--lk-muted);
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--lk-line-strong);
}
.tbl tbody th, .tbl tbody td{
  padding: 15px 16px;
  border-bottom: 1px solid var(--lk-line);
  vertical-align: top;
  text-align: left;
}
.tbl tbody th{ font-weight: 700; color: var(--lk-ink); }
.tbl tbody td{ color: var(--lk-muted); }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td{ border-bottom: 0; }
.tbl .ta-r{ text-align: right; font-weight: 700; color: var(--lk-ink); white-space: nowrap; }
.tbl-dfy{ min-width: 620px; }

.dfy-rules{
  margin-top: 20px;
  font: var(--lk-body-s); color: var(--lk-muted);
  max-width: 72ch;
}

/* ============================================================
   NOT INCLUDED
   ============================================================ */
.nx{
  display: grid; gap: clamp(28px, 4vw, 48px);
}
@media (min-width: 860px){ .nx{ grid-template-columns: 1fr 1fr; } }
.nx-col .lk-label{ color: var(--lk-on-dark-dim); }
.nx-col .ticks, .nx-col .crosses{ margin-top: 16px; }
.nx-script{
  margin-top: 20px;
  padding: 14px 18px;
  border-radius: var(--lk-r-sm);
  background: rgba(255,255,255,.055);
  border-left: 2px solid rgba(255,255,255,.24);
  font: var(--lk-body-s);
  color: var(--lk-on-dark-dim);
}
.nx-script .lk-label{ display: block; margin-bottom: 6px; }

/* ============================================================
   PREREQUISITES
   ============================================================ */
.prereq-wrap{
  display: grid; gap: clamp(26px, 4vw, 52px);
  align-items: start;
}
@media (min-width: 900px){ .prereq-wrap{ grid-template-columns: 1fr 1fr; } }
.prereq{ display: grid; gap: 0; border-top: 1px solid var(--lk-line-strong); }
.prereq li{
  position: relative;
  padding: 15px 0 15px 34px;
  border-bottom: 1px solid var(--lk-line);
  font: var(--lk-body);
  color: var(--lk-muted);
  counter-increment: pq;
}
.prereq li::before{
  content: counter(pq);
  position: absolute; left: 0; top: 15px;
  width: 22px;
  font-family: var(--lk-mono); font-size: 11px; font-weight: 500;
  color: var(--lk-muted); line-height: 2.2;
}
.prereq{ counter-reset: pq; }
.prereq b{ color: var(--lk-ink); font-weight: 700; }
.prereq-x{
  grid-column: 1 / -1;
  font: var(--lk-body-s); color: var(--lk-muted);
}
.prereq-x a{ color: var(--lk-ink); font-weight: 700; text-underline-offset: 3px; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-wrap{ display: grid; gap: clamp(28px, 4vw, 48px); align-items: start; }
@media (min-width: 900px){ .faq-wrap{ grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); } }

.faq{ border-top: 1px solid var(--lk-line-strong); }
.faq details{ border-bottom: 1px solid var(--lk-line); }
.faq summary{
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 60px; padding: 14px 0;
  cursor: pointer; list-style: none;
  font: 700 16.5px/1.4 var(--lk-sans);
  letter-spacing: -0.015em;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{
  content: ""; flex: 0 0 auto;
  width: 13px; height: 13px;
  background:
    linear-gradient(var(--lk-ink), var(--lk-ink)) center/13px 1.8px no-repeat,
    linear-gradient(var(--lk-ink), var(--lk-ink)) center/1.8px 13px no-repeat;
  transition: transform .24s cubic-bezier(.22,.75,.3,1);
}
.faq details[open] summary::after{ transform: rotate(135deg); }
.faq summary:hover{ color: var(--lk-muted); }
.faq-a{ padding: 0 0 20px; max-width: 62ch; }
.faq-a p{ font: var(--lk-body); color: var(--lk-muted); }
.faq-a p + p{ margin-top: 12px; }
.faq-a a{ color: var(--lk-ink); font-weight: 700; text-underline-offset: 3px; }
.faq details[open] .faq-a{ animation: faqIn .28s cubic-bezier(.22,.75,.3,1); }
@keyframes faqIn{ from{ opacity: 0; transform: translateY(-4px); } to{ opacity: 1; transform: none; } }

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta{
  position: relative;
  background: var(--lk-ink);
  color: var(--lk-on-dark);
  padding-block: clamp(72px, 9vw, 118px);
  overflow: hidden;
}
/* Same rule as .band-in: this element is also the .wrap. */
.cta-in{ position: relative; }
.cta-tag{
  font: 800 clamp(20px, 2.6vw, 27px)/1.2 var(--lk-sans);
  letter-spacing: var(--lk-wordmark-tracking);
  color: var(--lk-on-dark-dim);
}
.cta-h{ margin-top: 14px; color: var(--lk-paper); text-wrap: balance; max-width: 17ch; }
.cta-sub{
  font: var(--lk-body-l); color: var(--lk-on-dark-dim);
  margin-top: 18px; max-width: 46ch;
}
.cta-btns{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ============================================================
   FOOTER
   ============================================================ */
.ft{
  background: var(--lk-deep);
  color: var(--lk-on-dark);
  padding-block: clamp(48px, 6vw, 76px) 28px;
}
.ft-in{
  display: grid; gap: clamp(32px, 4vw, 56px);
}
@media (min-width: 880px){ .ft-in{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
.ft-brand .lk-mark{ width: 1.6rem; height: 1.6rem; }
.ft-word{ font-size: 20px; color: var(--lk-paper); }
.ft-note{
  font: var(--lk-body-s); color: var(--lk-on-dark-dim);
  margin-top: 16px; max-width: 44ch;
}
.ft-nav{
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.ft-nav .lk-label{ color: rgba(255,255,255,.5); margin-bottom: 12px; }
.ft-nav a{
  display: block;
  font: var(--lk-body-s);
  color: var(--lk-on-dark-dim);
  text-decoration: none;
  padding: 7px 0;
  transition: color .16s ease;
}
.ft-nav a:hover{ color: var(--lk-paper); }
/* This row is also a .wrap, so a border-top would draw across the gutters and
   overshoot the text above it. The rule is inset to the content edges. */
.ft-legal{
  position: relative;
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  justify-content: space-between;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 22px;
  font: var(--lk-body-s);
  color: rgba(255,255,255,.5);
}
.ft-legal::before{
  content: "";
  position: absolute; top: 0; left: var(--gut); right: var(--gut);
  height: 1px; background: rgba(255,255,255,.12);
}

/* ============================================================
   SMALL SCREENS
   ============================================================ */
@media (max-width: 899px){
  .hdr-burger{ display: flex; }
  .hdr-cta{ display: none; }
  .hdr-nav{
    position: fixed; inset: 68px 0 auto 0;
    display: grid; gap: 2px;
    padding: 14px clamp(20px, 4.4vw, 34px) 22px;
    background: var(--lk-deep);
    border-bottom: 1px solid rgba(255,255,255,.12);
    color: var(--lk-paper);
    transform: translateY(-12px);
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .hdr-nav a{ min-height: 48px; padding: 0 14px; font-size: 16px; opacity: 1; }
  .hdr.is-open .hdr-nav{ opacity: 1; visibility: visible; transform: none; }
  .hdr.is-open{ background: var(--lk-deep); color: var(--lk-paper); border-bottom-color: transparent; }
}

@media (max-width: 560px){
  .stage-view{ min-height: 272px; }
  .stage-clock{ font-size: 26px; }
  .feat-wide{ grid-template-columns: 1fr; gap: 12px; }
  .ft-legal{ flex-direction: column; }
}

/* Ultra-wide: keep the measure honest instead of stretching the page. */
@media (min-width: 1600px){
  .wrap{ max-width: 1240px; }
}

/* ============================================================
   REDUCED MOTION
   tokens.css kills every animation and transition globally. Anything whose
   resting state is "invisible until its animation runs" has to be given its
   finished state back here, or those users get an empty panel.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; }
  .writes li{ opacity: 1; transform: none; }
  .lead-row{ opacity: 1; transform: none; }
  .flight-dot{ opacity: 1; offset-distance: 100%; }
  .pane.is-on{ opacity: 1; transform: none; }
}
/* ============================================================
   SIGN UP FORM
   One card, four steps divided by hairlines, rather than four
   floating boxes. The step headings use the same mono label and
   ink rule as the rest of the page, so the form reads as part of
   the site instead of a browser default.
   Every field here is one the sub-account or the PayMongo charge
   genuinely needs. Nothing is collected "just in case".
   ============================================================ */
.su-wrap{ max-width: 820px; }
.su-req{ font: var(--lk-body-s); color: var(--lk-muted); margin-top: 14px; }

.su{
  margin-top: clamp(26px, 3.5vw, 36px);
  background: var(--lk-paper);
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-r-md);
  padding: clamp(20px, 3vw, 34px);
}

/* fieldsets carry the grouping for screen readers, not the look */
.su-set{ border: 0; padding: 0; margin: 0; }
.su-set + .su-set{ margin-top: clamp(34px, 4.4vw, 52px); }
.su-leg{
  display: block; width: 100%;
  padding: 0 0 11px;
  margin-bottom: 22px;
  border-bottom: 2px solid var(--lk-ink);
  font-family: var(--lk-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--lk-track-label);
  text-transform: uppercase;
  color: var(--lk-ink);
}

/* radios: the whole tile is the hit target, no dead zone */
.su-radios{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.su-radio{ display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.su-radio input{ position: absolute; opacity: 0; width: 0; height: 0; }
.su-radio-b{
  display: grid; gap: 3px;
  min-height: 66px; align-content: center;
  padding: 13px 16px;
  border: 1px solid var(--lk-line-strong);
  border-radius: var(--lk-r-sm);
  transition: border-color .16s ease, background-color .16s ease;
}
.su-radio-b b{ font-weight: 700; }
.su-radio-s{ font: var(--lk-body-s); color: var(--lk-muted); }
.su-radio:hover .su-radio-b{ border-color: var(--lk-ink); }
.su-radio input:checked + .su-radio-b{
  border-color: var(--lk-ink);
  border-width: 2px;
  padding: 12px 15px;
  background: var(--lk-mist);
}
.su-radio input:focus-visible + .su-radio-b{
  outline: 2px solid var(--lk-ink);
  outline-offset: 2px;
}
.su-sub{
  font: var(--lk-body-s); font-weight: 700;
  color: var(--lk-ink); margin: 24px 0 10px;
}

/* text fields */
.su-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.su-f{ display: grid; align-content: start; gap: 7px; }
.su-f-wide{ grid-column: 1 / -1; }
.su-f label{ font: var(--lk-body-s); font-weight: 700; color: var(--lk-ink); }
.su-opt{ font-weight: 400; color: var(--lk-muted); }
.su-f input{
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  font: var(--lk-body);
  color: var(--lk-ink);
  background: var(--lk-paper);
  border: 1px solid var(--lk-line-strong);
  border-radius: var(--lk-r-sm);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.su-f-sm input{ max-width: 170px; }
.su-f input::placeholder{ color: var(--lk-muted); opacity: .7; }
.su-f input:hover{ border-color: var(--lk-ink); }
.su-f input:focus-visible{
  outline: none;
  border-color: var(--lk-ink);
  box-shadow: 0 0 0 3px rgba(15,42,63,.13);
}
.su-f input[aria-invalid="true"]{ border-color: var(--lk-danger); }

.su-hint{ font: var(--lk-body-s); font-size: 13.5px; line-height: 1.45; color: var(--lk-muted); }
.su-err{
  font: var(--lk-body-s); font-size: 13.5px; font-weight: 700;
  color: var(--lk-danger);
}
.su-err::before{ content: "! "; font-weight: 800; }

/* consent: the gate before the button, so it gets a surface of its own */
.su-check{
  display: grid; grid-template-columns: auto 1fr; gap: 13px;
  align-items: start; cursor: pointer;
  padding: 16px 18px;
  background: var(--lk-mist);
  border-radius: var(--lk-r-sm);
  font: var(--lk-body-s); color: var(--lk-muted);
}
.su-check input{
  width: 21px; height: 21px; margin: 1px 0 0;
  accent-color: var(--lk-ink); cursor: pointer;
}
.su-check b{ color: var(--lk-ink); font-weight: 700; }
.su-check:hover{ background: #E5EDF3; }

.su-send{
  margin-top: 22px;
  display: grid; gap: 22px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}
.su-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.su-btn[disabled]{ opacity: .72; cursor: progress; }
.su-spin{
  width: 15px; height: 15px; flex: none;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%;
  animation: su-spin .7s linear infinite;
}
@keyframes su-spin{ to{ transform: rotate(360deg); } }

.su-status{ margin-top: 16px; font: var(--lk-body-s); }
.su-status:empty{ margin: 0; }
.su-status.is-ok{ color: var(--lk-success); font-weight: 700; }
.su-status.is-bad{ color: var(--lk-danger); font-weight: 700; }

@media (max-width: 620px){
  .su-grid{ grid-template-columns: minmax(0, 1fr); }
  .su-f-sm input{ max-width: none; }
  .su-send{ grid-template-columns: minmax(0, 1fr); }
  .su-btn{ width: 100%; }
}

/* ============================================================
   FOOTER ADDRESS
   PayMongo requires a visible Philippine address and a contact
   route on the site before they will activate the account.
   ============================================================ */
.ft-addr{
  margin-top: 20px;
  font: var(--lk-body-s); font-style: normal;
  color: var(--lk-on-dark-dim);
  line-height: 1.7;
}
.ft-addr b{ color: var(--lk-paper); font-weight: 700; }
.ft-addr a{ color: var(--lk-on-dark-dim); text-underline-offset: 3px; }
.ft-addr a:hover{ color: var(--lk-paper); }

/* ============================================================
   LEGAL PAGES
   Terms, privacy and refunds. One measured column, because these
   are read, not scanned. Every one opens with a plain-Tagalog
   summary so nobody has to parse the English to know where they
   stand.
   ============================================================ */
.legal{ padding-block: clamp(96px, 10vw, 140px) clamp(56px, 7vw, 88px); }
.legal-wrap{ max-width: 760px; }
.legal h1{ margin-top: 10px; }
.legal-date{
  margin-top: 14px;
  font: var(--lk-body-s); color: var(--lk-muted);
}

.legal-tldr{
  margin-top: clamp(28px, 3.5vw, 40px);
  padding: clamp(18px, 2.4vw, 26px);
  background: var(--lk-gold-tint);
  border-left: 3px solid var(--lk-gold);
  border-radius: 0 var(--lk-r-sm) var(--lk-r-sm) 0;
}
.legal-tldr .lk-label{ color: var(--lk-muted); margin-bottom: 8px; }
.legal-tldr p:last-child{ font: var(--lk-body); color: var(--lk-ink); }

.legal-toc{
  margin-top: clamp(30px, 4vw, 44px);
  padding: 22px 24px;
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-r-md);
}
.legal-toc ol{
  list-style: none;
  display: grid; gap: 4px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.legal-toc a{
  display: block; padding: 5px 0;
  font: var(--lk-body-s); color: var(--lk-muted);
  text-decoration: none;
}
.legal-toc a:hover{ color: var(--lk-ink); text-decoration: underline; text-underline-offset: 3px; }

.legal-s{ margin-top: clamp(34px, 4.4vw, 52px); scroll-margin-top: 96px; }
.legal-s h2{ padding-bottom: 10px; border-bottom: 2px solid var(--lk-ink); }
.legal-s p{
  margin-top: 14px;
  font: var(--lk-body); color: var(--lk-muted);
  max-width: 68ch;
}
.legal-s p b{ color: var(--lk-ink); font-weight: 700; }
.legal-s a{ color: var(--lk-ink); text-underline-offset: 3px; }
.legal-ul{
  margin-top: 14px; display: grid; gap: 9px;
  max-width: 68ch;
}
.legal-ul li{
  font: var(--lk-body); color: var(--lk-muted);
  padding-left: 18px; position: relative;
}
.legal-ul li::before{
  content: ""; position: absolute; left: 0; top: .68em;
  width: 8px; height: 1px; background: var(--lk-muted);
}
.legal-ul b{ color: var(--lk-ink); font-weight: 700; }
.legal-s .tbl-scroll{ margin-top: 18px; }
.legal-s .tbl th[scope="row"]{ width: 34%; }

.legal-back{
  margin-top: clamp(44px, 5.5vw, 68px);
  padding-top: 26px;
  border-top: 1px solid var(--lk-line);
  font: var(--lk-body-s);
}

/* the legal pages reuse .ft-legal as a link row rather than a note row */
.ft-legal a{
  color: rgba(255,255,255,.62);
  text-decoration: none;
  padding: 4px 0;
}
.ft-legal a:hover{ color: var(--lk-paper); text-decoration: underline; text-underline-offset: 3px; }
.ft-legal a[aria-current="page"]{ color: var(--lk-paper); }
.ft-base{
  margin-top: 20px;
  font: var(--lk-body-s); color: rgba(255,255,255,.5);
}