/* Chord Lens — /partners (P919, design "P919 · /partners in the homepage's language"). The page is built from the
   home page's own parts: tokens.css, shell.css (header, final call, footer), hero.css (stage, tape, headline, circle,
   marker, actions and their load sequence), plans.css (the FAQ and its Still stuck? card) and motion.css (headings
   that rise on the beat). This sheet only lays out what is the page's own: the link card, the section heads, the
   step cards, plan tiles, callout, audience cards and the fine print. Tilts use `rotate` and entrances animate
   `translate`, as on the home page, so an entrance never fights a resting tilt. */

/* ---------- Hero ---------- */

.pt-hero { padding-bottom: 96px; }

/* No stage photo here: the stage is the red light alone, from above as well as behind the card. */
.pt-hero .lp-hero__stage::before {
  content: '';
  position: absolute;
  inset: -10% 0 auto;
  height: 70%;
  background: radial-gradient(45% 60% at 50% 0%, #e0184f88, #0000 70%);
  animation: lp-breathe 8s var(--lp-ease-inout) infinite alternate;
}

.pt-hero .lp-hero__title { max-width: none; }
.pt-hero .lp-hero__line { font-size: clamp(52px, 9.2vw, 136px); }

/* The 20% line leaves room above and below for the gold circle, which the line's mask would otherwise cut. */
.pt-hero__earn { padding-block: 0.22em; margin-block: -0.16em -0.22em; }
.pt-hero__earn .lp-hero__word { animation-name: pt-rise; }
.pt-hero__earn .lp-hero__word:nth-child(1) { animation-delay: 330ms; }
.pt-hero__earn .lp-hero__word:nth-child(3) { animation-delay: 470ms; }

/* 20% rises, then takes the home page's downbeat kick as the circle draws (hero.css' circle timing). Scoped like the
   rules above, so it outranks hero.css' nth-child delay and the line's animation-name. */
.pt-hero__earn .pt-hero__rate {
  position: relative;
  color: var(--lp-hot);
  animation: pt-rise 700ms var(--lp-ease-out) 400ms both, lp-kick 160ms var(--lp-ease-out) 1.56s both;
}

@keyframes pt-rise { from { translate: 0 140%; } }

.pt-hero__marker {
  translate: none;
  margin-top: 0.5em;
  font-size: clamp(20px, 2vw, 28px);
  text-transform: uppercase;
  animation-delay: 1s;
}

.pt-hero__sub {
  max-width: 740px;
  margin: 26px 0 0;
  text-align: center;
  animation: lp-fade 600ms var(--lp-ease-out) 800ms both;
}

.pt-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 30px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  font: 400 12.5px/1.4 var(--lp-mono);
  letter-spacing: 0.04em;
  color: var(--lp-ink-3);
  animation: lp-fade 600ms var(--lp-ease-out) 1s both;
}

.pt-trust li::before { content: '✓'; margin-right: 12px; color: var(--lp-ink-2); }

/* An approved partner (nav.js marks the header from /v1/auth/me) is offered the dashboard instead of Apply. */
.pt-dash { display: none; }
.lp-nav[data-partner] ~ .pt .pt-apply { display: none; }
.lp-nav[data-partner] ~ .pt .pt-dash { display: inline; }

/* ---------- Your link at work ---------- */

.pt-link {
  max-width: 1120px;
  margin: 28px auto 0;
  padding: 26px 32px 22px;
  box-sizing: border-box;
  border: 1px solid var(--lp-line);
  border-radius: 24px;
  background: #101014e6;
  box-shadow: 0 40px 120px #000c;
  animation: lp-player-rise 800ms var(--lp-ease-out) 900ms both;
}

.pt-link__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }

.pt-link__label,
.pt-link__status,
.pt-link__foot {
  font: 400 11.5px/1.4 var(--lp-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-ink-3);
}

.pt-link__url {
  padding: 9px 16px;
  border: 1px solid var(--lp-line-strong);
  border-radius: 999px;
  background: var(--lp-surface-2);
  font: 400 15px/1.2 var(--lp-mono);
  color: var(--lp-ink);
  overflow-wrap: anywhere;
}

.pt-link__status { margin-left: auto; color: #4ade80; letter-spacing: 0.06em; text-transform: none; }
.pt-link__status::before { content: '●'; margin-right: 8px; font-size: 9px; vertical-align: 2px; }

.pt-link__body { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; margin-top: 14px; }
.pt-link__who { margin: 0; font-size: 16px; color: var(--lp-ink); }
.pt-link__fee { margin: 8px 0 0; font: 400 12px/1.4 var(--lp-mono); letter-spacing: 0.04em; color: var(--lp-ink-3); }
.pt-link__earn { display: flex; align-items: flex-end; gap: 14px; margin: 0; color: var(--lp-gold); }
.pt-link__amount { font-size: clamp(64px, 7vw, 100px); line-height: 0.85; font-variant-numeric: tabular-nums; }
.pt-link__to { padding-bottom: 6px; font: 400 22px/1 var(--lp-hand); text-transform: uppercase; rotate: -3deg; }

.pt-link__months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; margin: 22px 0 14px; padding: 0; list-style: none; }
.pt-link__months li { height: 13px; border-radius: 3px; background: var(--lp-surface-2); transition: background-color 300ms var(--lp-ease-out); }
.pt-link__months li.is-lit { background: var(--lp-hot); }

.pt-link__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; letter-spacing: 0.16em; }
.pt-link__month { color: var(--lp-hot); }

/* ---------- Section heads ---------- */

.pt-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 32px clamp(32px, 6vw, 120px);
  align-items: end;
}

.pt-head .lp-hand,
.pt-section > .lp-shell > .lp-hand { font-size: clamp(20px, 2vw, 26px); text-transform: uppercase; }
.pt-lede { margin: 0; font-size: 17px; }

/* ---------- 01 · Step cards ---------- */

.pt-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}

.pt-step {
  padding: 28px 34px 40px;
  border-radius: 24px;
  color: #fff;
}

.pt-step h3 { margin: 18px 0 14px; font-size: 26px; font-weight: 600; }
.pt-step p { margin: 0; font-size: 16px; line-height: 1.55; }
.pt-step__n { display: block; font-size: clamp(110px, 10vw, 150px); line-height: 0.8; }

.pt-step--apply { background: linear-gradient(170deg, #ff2d55 0%, #e0187a 50%, #7c3aed 100%); rotate: 1.4deg; box-shadow: 0 30px 80px #e0187a40; }
.pt-step--share { background: var(--lp-gold); color: var(--lp-paper-ink); rotate: -1.4deg; box-shadow: 0 30px 80px #ffd16626; }
.pt-step--earn { border: 1px solid var(--lp-line); background: var(--lp-surface); rotate: 1.2deg; }
.pt-step--earn .pt-step__n { color: var(--lp-hot); }
.pt-step--earn p { color: var(--lp-ink-2); }

/* ---------- 02 · Plan tiles and callout ---------- */

.pt-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}

.pt-tile {
  padding: 26px 28px 28px;
  border: 1px solid var(--lp-line-strong);
  border-radius: 18px;
  background: var(--lp-surface);
}

.pt-tile__plan { margin: 0; font: 400 12px/1 var(--lp-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--lp-ink-3); }
.pt-tile__price { margin: 12px 0 0; font-size: clamp(44px, 4.4vw, 64px); text-transform: none; color: var(--lp-ink); }
.pt-tile__you { margin: 16px 0 0; font: 400 17px/1 var(--lp-hand); text-transform: uppercase; color: var(--lp-gold); }
.pt-tile__earn { margin: 10px 0 0; font-size: clamp(36px, 3.4vw, 50px); text-transform: none; color: var(--lp-gold); font-variant-numeric: tabular-nums; }
.pt-tile__over { margin: 12px 0 0; font-size: 14px; color: var(--lp-ink-2); }

.pt-tile--pro { border-color: transparent; background: var(--lp-pro); }
.pt-tile--pro .pt-tile__plan,
.pt-tile--pro .pt-tile__over { color: #ffffffcc; }
.pt-tile--pro .pt-tile__price { color: #fff; }
.pt-tile--year { border-color: #ffd16666; }

.pt-fine { margin: 26px 0 0; font: 400 12px/1.6 var(--lp-mono); letter-spacing: 0.02em; color: var(--lp-ink-3); }

.pt-callout {
  max-width: 640px;
  margin-top: 40px;
  padding: 28px 32px;
  border-radius: 14px;
  background: var(--lp-cream);
  color: var(--lp-paper-ink);
  rotate: 1.2deg;
  box-shadow: 0 24px 50px #0008;
}

.pt-callout p { margin: 0; font-size: 15px; line-height: 1.5; }
.pt-callout .pt-callout__title { margin-bottom: 10px; font-size: clamp(28px, 2.6vw, 36px); line-height: 0.95; }

/* ---------- 03 · Who it's for ---------- */

.pt-who {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

.pt-card {
  padding: 28px 28px 30px;
  border: 1px solid var(--lp-line);
  border-radius: 18px;
  background: var(--lp-surface);
}

.pt-card h3 { margin: 16px 0 12px; font-size: 19px; font-weight: 600; line-height: 1.3; }
.pt-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--lp-ink-2); }
.pt-who .pt-card:nth-child(1) { rotate: -1.2deg; }
.pt-who .pt-card:nth-child(2) { rotate: 1deg; }
.pt-who .pt-card:nth-child(3) { rotate: -0.8deg; }
.pt-who .pt-card:nth-child(4) { rotate: 1.2deg; }

.pt-icon { width: 30px; height: 30px; fill: currentColor; }
.pt-icon--red { color: var(--lp-hot); }
.pt-icon--gold { color: var(--lp-gold); }
.pt-icon--violet { color: #a78bfa; }
.pt-icon--green { color: #4ade80; }

/* ---------- 04 · The fine print ---------- */

.pt-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; margin-top: 40px; }
.pt-counts .pt-card { padding: 30px 30px 26px; }
.pt-card .pt-counts__head { margin: 0 0 6px; font: 400 12px/1 var(--lp-mono); letter-spacing: 0.16em; text-transform: uppercase; }
.pt-counts__head--yes { color: #4ade80; }
.pt-counts__head--no { color: var(--lp-hot); }

.pt-list { margin: 0; padding: 0; list-style: none; }
.pt-list li { position: relative; margin-top: 12px; padding-left: 22px; font-size: 16px; line-height: 1.5; color: var(--lp-ink); }
.pt-list li::before { position: absolute; left: 0; top: 0; }
.pt-list--yes li::before { content: '✓'; }
.pt-list--no li::before { content: '✕'; }

.pt-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 40px 0 0; padding: 0; list-style: none; }
.pt-facts li { padding-top: 18px; border-top: 2px solid var(--lp-line); }
.pt-facts h3 { display: grid; justify-items: start; gap: 8px; margin: 0; font-weight: 400; }
.pt-facts .lp-display { font-size: clamp(38px, 3.6vw, 52px); }
.pt-facts__hand { font: 400 17px/1 var(--lp-hand); text-transform: uppercase; color: var(--lp-gold); rotate: -2deg; }
.pt-facts p { margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: var(--lp-ink-2); }

/* ---------- Final call ---------- */

.pt-final__sub { margin: 0; padding-inline: var(--lp-gutter); font-size: 17px; }
.pt-final__mail { margin: 0; font: 400 13px/1.4 var(--lp-mono); color: var(--lp-ink-3); }
.pt-final__mail a { color: inherit; text-decoration: none; }
.pt-final__mail a:hover { color: var(--lp-ink); }
.pt-final__mail a:focus-visible { outline: 2px solid var(--lp-gold); outline-offset: 3px; border-radius: 2px; }

/* ---------- Motion: blocks rise as they enter (reveal.ts' entrance), only once the script has hidden them ---------- */

@media (prefers-reduced-motion: no-preference) {
  .pt-callout.is-waiting:not(.is-in),
  :is(.pt-steps, .pt-tiles, .pt-who, .pt-counts, .pt-facts).is-waiting:not(.is-in) > * { opacity: 0; }
  :is(.pt-steps, .pt-tiles, .pt-who, .pt-facts).is-in > * { animation: lp-player-rise 750ms var(--lp-ease-out) backwards; }
  :is(.pt-steps, .pt-tiles, .pt-who, .pt-facts).is-in > :nth-child(2) { animation-delay: 140ms; }
  :is(.pt-steps, .pt-tiles, .pt-who, .pt-facts).is-in > :nth-child(3) { animation-delay: 280ms; }
  :is(.pt-steps, .pt-tiles, .pt-who, .pt-facts).is-in > :nth-child(4) { animation-delay: 420ms; }
  .pt-counts.is-in > * { animation: lp-player-rise 750ms var(--lp-ease-out) backwards; }
  .pt-counts.is-in > :nth-child(2) { animation-delay: 140ms; }
  /* The callout slaps on like the home page's stickers. */
  .pt-callout.is-in { animation: lp-slap 350ms var(--lp-ease-spring) backwards; }
}

/* Reduced motion: everything is already in place (tokens.css lands every animation at its end); the page fades in once. */
@media (prefers-reduced-motion: reduce) {
  body.lp:has(.pt) { animation: pt-fade 200ms ease-out; }
  /* tokens.css shortens every animation but keeps its delay; here nothing waits, so the hero is whole at once. */
  .pt *, .pt *::before, .pt *::after { animation-delay: 0s !important; }
}

@keyframes pt-fade { from { opacity: 0; } }

/* ---------- Narrow screens ---------- */

@media (max-width: 1100px) {
  .pt-who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
}

@media (max-width: 860px) {
  .pt-head { grid-template-columns: minmax(0, 1fr); }
  .pt-steps,
  .pt-tiles,
  .pt-counts { grid-template-columns: minmax(0, 1fr); }
  .pt-steps { gap: 24px; }
}

@media (max-width: 720px) {
  .pt-hero__tape-more,
  .pt-link__label,
  .pt-link__status,
  .pt-link__fee { display: none; }
  .pt-hero .lp-hero__line { font-size: clamp(36px, 11.4vw, 64px); }
  .pt-hero__sub { font-size: 16px; }
  .pt-trust { display: grid; justify-items: start; justify-self: stretch; gap: 8px; }
  .pt-link { padding: 20px 20px 18px; border-radius: 20px; }
  .pt-link__body { display: block; margin-top: 16px; }
  .pt-link__earn { margin-top: 10px; }
  .pt-link__amount { font-size: 64px; }
  .pt-link__to { font-size: 18px; }
  .pt-link__months { gap: 4px; margin-top: 16px; }
  .pt-link__months li { height: 10px; }
  .pt-link__foot { display: block; }
  .pt-link__foot > * + *::before { content: ' · '; }
  .pt-step { padding: 22px 26px 28px; }
  .pt-step__n { font-size: 96px; }
  .pt-who { grid-template-columns: minmax(0, 1fr); }
  .pt-facts { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .pt-facts h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
  .pt-facts p { margin-top: 8px; }
  .pt-final__sub { font-size: 15px; }
  .pt-final .lp-final__title { font-size: clamp(40px, 13.4vw, 64px); }
}