/* ===================================================================
   PRFCT Form — site stylesheet
   Direction B ("Gallery"): light Apple-neutral field, SF stack,
   #0071e3 reserved for actions, brass reserved for premium.

   Every colour and font below is copied from the v1 token block. No
   new hues, no web fonts. Verdict colours appear as dots rather than
   text, because #30d158 and #ff9f0a on a white field fail contrast.
   =================================================================== */

:root {
  /* Surfaces */
  --ink:        #000000;
  --ink-3:      #1d1d1f;
  --surface:    #f5f5f7;
  --surface-2:  #fbfbfd;

  /* Rules */
  --rule-dark:   rgba(0, 0, 0, 0.08);
  --rule-dark-2: rgba(0, 0, 0, 0.14);
  --rule:        rgba(255, 255, 255, 0.10);

  /* Text */
  --on-dark:    #f5f5f7;
  --on-dark-2:  #a1a1a6;
  --on-light:   #1d1d1f;
  --on-light-2: #6e6e73;
  --on-light-3: #86868b;

  /* Accents */
  --brand:      #2997ff;
  --brand-2:    #0071e3;
  --brass:      #b08d4e;
  --brass-2:    #d3ab68;
  --cobalt:     #5b8def;
  --cyan:       #64d2ff;

  /* Verdicts */
  --admitted: #30d158;
  --pending:  #ff9f0a;
  --objected: #ff453a;

  /* Type */
  --ff-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --ff-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --ff-serif: "Iowan Old Style", "Apple Garamond", "Hoefler Text", Garamond, "Times New Roman", ui-serif, serif;

  /* Layout */
  --gutter:    clamp(22px, 5vw, 80px);
  --section-y: clamp(64px, 8vw, 112px);
  --maxw:      1240px;
  --maxw-text: 720px;

  /* Motion */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Reset ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, ul, ol, table { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

body {
  background: var(--surface-2);
  color: var(--on-light);
  font-family: var(--ff-sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(0, 113, 227, 0.16); }
:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 10px;
  background: var(--brand-2); color: #fff;
  padding: 10px 16px; border-radius: 980px;
  font: 500 14px/1 var(--ff-sans); z-index: 200;
}
.skip:focus { left: 16px; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: var(--maxw-text); }

/* ── Type scale ──────────────────────────────────────────────────── */
h1 {
  font-size: clamp(38px, 5.6vw, 72px);
  font-weight: 600; line-height: 1.06;
  letter-spacing: -0.028em; text-wrap: balance;
}
h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 600; line-height: 1.1;
  letter-spacing: -0.024em; text-wrap: balance;
}
h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.016em; }

.kicker {
  font: 500 12.5px/1 var(--ff-sans);
  color: var(--brand-2);
  letter-spacing: 0.01em;
}
.lede {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--on-light-2);
  text-wrap: pretty;
}
.mono-label {
  font: 400 10.5px/1 var(--ff-mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--on-light-3);
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--brand-2); color: #fff;
  font: 500 15px/1 var(--ff-sans);
  padding: 14px 26px; border-radius: 980px;
  border: 1px solid transparent; cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:hover { background: #0077ed; }
.btn:active { transform: translateY(1px); }

.btn--quiet {
  background: transparent; color: var(--on-light);
  border-color: var(--rule-dark-2);
}
.btn--quiet:hover { background: var(--surface); border-color: var(--on-light-3); }

.link {
  color: var(--brand-2);
  font: 400 15px/1 var(--ff-sans);
  display: inline-flex; align-items: center; gap: 4px;
}
.link:hover { text-decoration: underline; }

/* ── Nav ─────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251, 251, 253, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--rule-dark);
}
.nav__in {
  display: flex; align-items: center; justify-content: space-between;
  height: 66px; gap: 24px;
}
.mark { display: flex; align-items: center; gap: 10px; flex: none; }
.mark svg { width: 22px; height: 22px; color: var(--ink-3); flex: none; }
.mark__stack { display: flex; flex-direction: column; line-height: 1.15; }
.mark__name { font: 600 14.5px/1.15 var(--ff-sans); letter-spacing: 0.01em; white-space: nowrap; }
.mark__by { font: 400 9.5px/1.3 var(--ff-mono); color: var(--on-light-3); white-space: nowrap; }

.nav__links { display: flex; gap: 30px; }
.nav__links a {
  font: 400 13.5px/1 var(--ff-sans);
  color: var(--on-light-2);
  transition: color 0.25s var(--ease);
}
.nav__links a:hover { color: var(--on-light); }
.nav__links a[aria-current="page"] { color: var(--on-light); font-weight: 500; }
.nav .btn { padding: 10px 18px; font-size: 13.5px; }

.nav__toggle { display: none; }

/* ── Page header (every page but home) ───────────────────────────── */
.phead { padding-block: clamp(46px, 6vw, 84px) clamp(30px, 4vw, 52px); }
.phead .kicker { margin-bottom: 14px; }
.phead .lede { margin-top: 20px; max-width: 62ch; }

/* ── Home hero ───────────────────────────────────────────────────── */
.hero { text-align: center; padding-block: clamp(56px, 8vw, 104px) 0; }
.hero h1 { margin-top: 16px; max-width: 15ch; margin-inline: auto; }
.hero .lede { margin: 20px auto 0; max-width: 58ch; }
.hero__cta {
  margin-top: 30px;
  display: flex; justify-content: center; align-items: center;
  gap: 12px 26px; flex-wrap: wrap;
}
.price {
  margin-top: 22px;
  font: 400 13.5px/1.6 var(--ff-mono);
  color: var(--on-light-3);
}
.price b { color: var(--on-light); font-weight: 500; }

/* ── Media placeholders ──────────────────────────────────────────────
   Sized boxes standing in for photography that has not landed yet.
   Each states the crop it wants, so a supplied image drops straight in.
   Replace the whole .ph block with <img> at the same aspect ratio.     */
.ph {
  position: relative;
  background: var(--surface);
  border: 1px dashed var(--rule-dark-2);
  border-radius: clamp(12px, 1.6vw, 22px);
  display: grid; place-items: center;
  overflow: hidden;
}
.ph::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(0,0,0,.022) 0 10px, transparent 10px 20px);
}
.ph__note {
  position: relative;
  font: 400 11.5px/1.5 var(--ff-mono);
  color: var(--on-light-3);
  text-align: center;
  padding: 12px 16px;
}
.ph--hero  { aspect-ratio: 16 / 8.4; margin-top: clamp(40px, 5vw, 68px); }
.ph--wide  { aspect-ratio: 16 / 9; }
.ph--sq    { aspect-ratio: 1 / 1; }
.ph--tall  { aspect-ratio: 4 / 5; }
.ph--phone { aspect-ratio: 9 / 19.5; border-radius: 30px; }

/* ── Section rhythm ──────────────────────────────────────────────── */
.band { padding-block: var(--section-y); }
.band--tint { background: var(--surface); }
.band--edge { border-top: 1px solid var(--rule-dark); }
.band__head { max-width: 60ch; margin-bottom: clamp(28px, 3.6vw, 44px); }
.band__head .lede { margin-top: 16px; }

/* ── Card grids ──────────────────────────────────────────────────── */
.grid { display: grid; gap: 18px; }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card {
  background: var(--surface);
  border-radius: 16px;
  padding: 26px 24px 28px;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease);
}
a.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.09); }
.card--plain { background: transparent; border: 1px solid var(--rule-dark); }
.card__n { font: 400 10.5px/1 var(--ff-mono); color: var(--on-light-3); letter-spacing: 0.14em; }
.card h3 { margin-top: 15px; }
.card p { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--on-light-2); }
.card .link { margin-top: 14px; font-size: 13.5px; }

/* ── Step rows (How it works) ────────────────────────────────────── */
.step {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4.5vw, 68px);
  align-items: center;
  padding-block: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--rule-dark);
}
.step:nth-child(even) .step__copy { order: 2; }
.step__copy .kicker { margin-bottom: 12px; }
.step__copy h3 { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.022em; }
.step__copy p { margin-top: 14px; color: var(--on-light-2); font-size: 16px; }
.tags { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 7px; }
.tag {
  font: 400 11.5px/1 var(--ff-mono);
  color: var(--on-light-2);
  background: var(--surface);
  border: 1px solid var(--rule-dark);
  border-radius: 980px;
  padding: 7px 12px;
}
.band--tint .tag { background: var(--surface-2); }

/* ── Verdict dots ────────────────────────────────────────────────── */
.verdict { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.verdict i {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--on-light-3);
}
.verdict--admitted i { background: var(--admitted); }
.verdict--pending  i { background: var(--pending); }
.verdict--objected i { background: var(--objected); }
.verdict span { font: 400 13px/1 var(--ff-sans); color: var(--on-light-2); }

/* ── Research table ──────────────────────────────────────────────── */
.tablewrap { overflow-x: auto; border: 1px solid var(--rule-dark); border-radius: 14px; background: var(--surface-2); }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
thead th {
  text-align: left;
  font: 400 10.5px/1 var(--ff-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-light-3);
  padding: 16px 18px;
  border-bottom: 1px solid var(--rule-dark);
  white-space: nowrap;
}
tbody td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--rule-dark);
  font-size: 14.5px;
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface); }
td.num { font-family: var(--ff-mono); font-size: 13.5px; white-space: nowrap; }
td.paper { color: var(--on-light-2); font-size: 13.5px; }

/* ── Sport cards ─────────────────────────────────────────────────── */
.sport { background: var(--surface); border-radius: 16px; overflow: hidden; }
/* Title always on its own line, so header height is identical across the
   grid however long the sport name runs. */
.sport__top {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--rule-dark);
}
.sport__top h3 { font-size: 17px; flex: 1 1 100%; }
.phases { display: flex; flex-wrap: wrap; gap: 6px; }
.phase {
  font: 400 10.5px/1 var(--ff-mono);
  color: var(--on-light-2);
  background: var(--surface-2);
  border-radius: 980px; padding: 6px 10px;
  white-space: nowrap;
}
.check {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px; align-items: center;
  padding: 13px 20px; border-bottom: 1px solid var(--rule-dark);
}
.check:last-child { border-bottom: 0; }
.check__name { font-size: 14.5px; font-weight: 500; }
.check__sub { display: block; font: 400 11.5px/1.3 var(--ff-mono); color: var(--on-light-3); margin-top: 3px; }

/* ── Teams ───────────────────────────────────────────────────────── */
.board { background: var(--surface); border-radius: 16px; overflow: hidden; }
.board__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 20px; border-bottom: 1px solid var(--rule-dark);
}
.board__top h3 { font-size: 16px; }
.row {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto;
  gap: 14px; align-items: center;
  padding: 13px 20px; border-bottom: 1px solid var(--rule-dark);
}
.row:last-child { border-bottom: 0; }
.row__rank { font: 400 12.5px/1 var(--ff-mono); color: var(--on-light-3); }
.row__name { font-size: 14.5px; font-weight: 500; }
.row__score { font: 500 15px/1 var(--ff-mono); }
.row__delta { font: 400 12px/1 var(--ff-mono); color: var(--on-light-3); min-width: 34px; text-align: right; }
.row__delta.up   { color: var(--admitted); }
.row__delta.down { color: var(--objected); }

.feed { padding: 6px 0; }
.feed li { padding: 12px 20px; border-bottom: 1px solid var(--rule-dark); }
.feed li:last-child { border-bottom: 0; }
.feed time { display: block; font: 400 11.5px/1 var(--ff-mono); color: var(--on-light-3); margin-bottom: 5px; }
.feed p { font-size: 14px; }

/* ── Closing CTA ─────────────────────────────────────────────────── */
.close { text-align: center; padding-block: clamp(72px, 9vw, 128px); background: var(--surface); }
.close h2 { max-width: 18ch; margin-inline: auto; }
.close .lede { margin: 18px auto 0; max-width: 50ch; }
.close .hero__cta { margin-top: 28px; }

/* ── Footer ──────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--rule-dark); padding-block: 44px 52px; }
.foot__in { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.foot h4 { font: 500 12.5px/1 var(--ff-sans); color: var(--on-light); margin-bottom: 14px; }
.foot ul li + li { margin-top: 9px; }
.foot a, .foot p { font-size: 13.5px; color: var(--on-light-2); }
.foot a:hover { color: var(--on-light); }
.foot__legal {
  margin-top: 36px; padding-top: 22px;
  border-top: 1px solid var(--rule-dark);
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
  font-size: 12.5px; color: var(--on-light-3);
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__in { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__links.is-open {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; left: 0; right: 0; top: 66px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--rule-dark);
    padding: 8px var(--gutter) 18px;
  }
  .nav__links.is-open a { padding: 13px 0; border-bottom: 1px solid var(--rule-dark); font-size: 16px; }
  .nav__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--rule-dark-2); background: transparent;
    cursor: pointer; color: var(--on-light);
  }
  .nav__toggle svg { width: 17px; height: 17px; }
  .step, .step:nth-child(even) .step__copy { grid-template-columns: minmax(0, 1fr); order: 0; }
  .step__copy { order: 0 !important; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .grid--4, .grid--3, .grid--2 { grid-template-columns: minmax(0, 1fr); }
  .foot__in { grid-template-columns: 1fr; gap: 26px; }
  .mark__by { display: none; }
  .hero__cta .btn, .hero__cta .link { width: auto; }
}

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

/* ── Launch-notify form ──────────────────────────────────────────── */
.signup { margin-top: 28px; }
.signup__row {
  display: flex; gap: 10px; flex-wrap: wrap;
  justify-content: center; max-width: 520px; margin-inline: auto;
}
.signup__input {
  flex: 1 1 240px; min-width: 0;
  padding: 14px 20px;
  border-radius: 980px;
  border: 1px solid var(--rule-dark-2);
  background: var(--surface-2);
  color: var(--on-light);
  font: 400 15px/1 var(--ff-sans);
}
.signup__input::placeholder { color: var(--on-light-3); }
.signup__input:focus { outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(0,113,227,.14); }
.signup button[disabled] { opacity: .55; cursor: default; }
/* Off-screen rather than display:none — bots fill what they can parse */
.signup__pot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.signup__msg {
  margin-top: 12px; min-height: 1.2em; text-align: center;
  font: 400 13px/1.4 var(--ff-mono); color: var(--on-light-3);
}
.signup[data-state="done"]  .signup__msg { color: #1a7f37; }
.signup[data-state="error"] .signup__msg { color: #b3261e; }
.signup.is-done .signup__row { display: none; }
.soon {
  display: inline-flex; align-items: center; gap: 8px;
  font: 400 13.5px/1 var(--ff-mono); color: var(--on-light-3);
  white-space: nowrap;
}
.soon svg { width: 14px; height: 17px; flex: none; opacity: .7; }

/* ── Small utilities used by the page markup ─────────────────────── */
.nav__end { display: flex; align-items: center; gap: 10px; }
.after-table { margin-top: 22px; }
.foot__blurb { margin-top: 14px; max-width: 34ch; }