/* ═══════════════════════════════════════════════════════════ THE LEDGER ═══
   OutbidMacApp — an auction price sheet for Mac & iOS apps.
   Warm paper, hairline rules, editorial serif, tabular figures, one ink accent.
   ═════════════════════════════════════════════════════════════════════════ */

:root{
  /* paper + ink, every neutral tinted warm — no #fff, no #000 */
  --paper:      oklch(98.2% 0.006 150);
  --paper-sunk: oklch(96% 0.008 150);
  --paper-card: oklch(99.4% 0.003 150);
  --ink:        oklch(23% 0.012 160);
  --ink-2:      oklch(46% 0.012 155);
  --ink-3:      oklch(63% 0.010 155);
  --rule:       oklch(89% 0.008 150);
  --rule-firm:  oklch(81% 0.010 150);

  /* one committed accent: printer's vermilion */
  --accent:     oklch(52% 0.132 158);      /* ledger green: money, not marketplace */
  --accent-ink: oklch(44% 0.120 158);
  --accent-tint:oklch(95.4% 0.030 158);
  --accent-edge:oklch(84% 0.070 158);
  --gold:       oklch(72% 0.140 78);
  --green:      oklch(52% 0.115 152);

  --display: "Outfit", "Poppins", ui-sans-serif, system-ui, sans-serif;  /* matches the wordmark */
  --sans:    "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease:  cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);

  --pad: clamp(20px, 5vw, 64px);
  --max: 1240px;
  --r: 4px;           /* the ledger is square; radius is a whisper, not a pill */
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }

body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums;
  overflow-x:hidden;
}

/* paper grain — fixed, never repainted by scroll */
body::after{
  content:""; position:fixed; inset:0; z-index:9; pointer-events:none;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }
[hidden]{ display:none !important }
h1,h2,h3{ margin:0; font-weight:400; letter-spacing:-.02em; line-height:1.02 }
h1,h2{ font-family:var(--display); font-weight:600 }
p{ margin:0 }
::selection{ background:var(--accent-tint); color:var(--accent-ink) }

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--ink); color:var(--paper); padding:12px 18px; font-size:14px;
}
.skip:focus{ left:12px; top:12px }

.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--pad) }

/* ══════════════════════════════════════════════════════════════ notice ═══ */
.notice{
  background:var(--ink); color:var(--paper);
  font-size:13px; letter-spacing:.01em; text-align:center; padding:9px 18px;
}
.notice b{ font-weight:600; color:oklch(88% 0.09 60) }

/* ═════════════════════════════════════════════════════════════════ nav ═══ */
.nav{
  position:sticky; top:0; z-index:20;
  background:color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.nav-in{
  max-width:var(--max); margin-inline:auto; padding:0 var(--pad);
  height:62px; display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.brand{ min-width:0; flex:0 1 auto; overflow:hidden; display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:600; font-size:21px; letter-spacing:-.03em }
.brand-mark{ width:26px; height:20px; flex:none }
.brand b{ font-weight:600 }
.brand small{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--rule); padding:2px 5px; align-self:center;
}
.nav-links{ display:flex; align-items:center; gap:26px; flex:0 0 auto }
.nav-links a:not(.btn){
  font-size:14.5px; color:var(--ink-2); padding:4px 0; position:relative;
  transition:color 160ms var(--ease);
}
.nav-links a:not(.btn):hover{ color:var(--ink) }
.nav-links a:not(.btn)[aria-current]{ color:var(--ink) }
.nav-links a:not(.btn)[aria-current]::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent);
}

/* ══════════════════════════════════════════════════════════════ button ═══ */
.btn{
  --bg:var(--ink); --fg:var(--paper);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-size:15px; font-weight:500; letter-spacing:-.005em;
  padding:12px 20px; border:1px solid var(--bg); border-radius:var(--r);
  background:var(--bg); color:var(--fg); cursor:pointer; white-space:nowrap;
  transition:transform 140ms var(--ease), background 180ms var(--ease),
             border-color 180ms var(--ease), color 180ms var(--ease);
}
.btn:active{ transform:scale(.97) }
.btn-accent{ --bg:var(--accent); --fg:#ffffff }
.btn-line{ --bg:transparent; --fg:var(--ink); border-color:var(--rule-firm) }
.btn-lg{ padding:15px 26px; font-size:16px }
.btn-sm{ padding:10px 22px; font-size:14px }
@media (hover:hover) and (pointer:fine){
  .btn:hover{ background:var(--accent-ink); border-color:var(--accent-ink); color:#ffffff }
  .btn-line:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper) }
}

/* ════════════════════════════════════════════════════════════════ hero ═══ */
.hero{ border-bottom:1px solid var(--rule); padding-block:clamp(34px,6vw,64px) clamp(30px,4.5vw,48px) }
.hero-in{ max-width:820px; margin-inline:auto; padding-inline:var(--pad); text-align:center }

.pill{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:22px;
  padding:6px 14px; border:1px solid var(--rule-firm); border-radius:99px;
  background:var(--paper-card); font-family:var(--mono); font-size:11.5px; color:var(--ink-2);
}

.hero h1{
  font-size:clamp(34px,6.4vw,62px); line-height:1.02; letter-spacing:-.035em;
  text-wrap:balance;
}
.hero h1 span{ color:var(--accent) }

.price{ margin-top:22px; display:flex; flex-direction:column; align-items:center; gap:2px }
.price span{
  font-family:var(--display); font-weight:700; font-size:clamp(40px,7vw,64px);
  line-height:1; letter-spacing:-.04em; color:var(--accent);
}
.price em{
  font-style:normal; font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}

/* one field, one button — the whole listing flow starts here */
.claim{
  margin:26px auto 0; max-width:620px;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px;
  padding:7px 7px 7px 16px; border:1px solid var(--rule-firm); border-radius:99px;
  background:var(--paper-card);
  transition:border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.claim:focus-within{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-tint) }
.claim-ico{ width:19px; height:19px; color:var(--ink-3); flex:none }
.claim input{
  border:0; background:none; outline:none; min-width:0; width:100%;
  font-family:var(--sans); font-size:16px; color:var(--ink); padding:11px 0;
}
.claim input::placeholder{ color:var(--ink-3) }
.claim .btn{ border-radius:99px; padding:12px 24px }

.hint{
  margin:16px auto 0; max-width:60ch; font-size:14px; color:var(--ink-3); line-height:1.6;
  text-wrap:pretty;
}
.hint b{ color:var(--ink-2); font-weight:600 }

/* ════════════════════════════════════════════════════ ledger stat line ═══ *//* ════════════════════════════════════════════════════ ledger stat line ═══ */
.tape{
  border-bottom:1px solid var(--rule); background:var(--paper-sunk);
  font-family:var(--mono); font-size:12px; letter-spacing:.02em; color:var(--ink-2);
}
.tape-in{
  max-width:var(--max); margin-inline:auto; padding:11px var(--pad);
  display:flex; flex-wrap:wrap; gap:8px 30px;
}
.tape b{ color:var(--ink); font-weight:500 }
.tape-live{ margin-left:auto }
.tape span{ color:var(--ink-3) }

/* ═══════════════════════════════════════════════════════════════ board ═══ */
.board-sec{ padding-block:clamp(26px,3.5vw,40px) clamp(48px,6vw,80px) }
.board-hd{
  display:flex; align-items:center; gap:14px; padding-bottom:12px; margin-bottom:2px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); border-bottom:2px solid var(--ink);
}
.prefill{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border:1px solid var(--rule); background:var(--paper-card); font-size:13.5px; color:var(--ink-2);
}
.prefill img{ width:52px; height:52px; border-radius:12px; border:1px solid var(--rule) }
.sec-hd{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  flex-wrap:wrap; padding-bottom:14px; border-bottom:2px solid var(--ink);
}
.sec-hd h2{ font-size:clamp(26px,3.4vw,38px); letter-spacing:-.028em }
.sec-hd p{ font-size:13.5px; color:var(--ink-3) }

.board{ list-style:none; margin:0; padding:0 }
.line{
  position:relative; display:grid; align-items:center;
  grid-template-columns:52px 48px minmax(0,1fr) auto auto;
  gap:18px; padding:15px 12px 16px;
  border-bottom:1px solid var(--rule);
  transition:background 180ms var(--ease);
}
/* stagger the first paint only — the live poller re-renders these rows every few
   seconds, and replaying the entrance each time reads as a flicker */
.board.intro-anim .line{
  animation:rise 400ms var(--ease) backwards;
  animation-delay:calc(var(--i,0) * 30ms);
}
@keyframes rise{ from{ opacity:0; transform:translateY(6px) } }
@media (hover:hover) and (pointer:fine){ .line:hover{ background:var(--paper-card) } }
.line.top{ background:oklch(96.5% 0.038 82) }
.line.top .no{ color:oklch(58% 0.120 78) }

/* the measured heat rule — a printed bar, not a glow */
.line::after{
  content:""; position:absolute; left:12px; bottom:-1px; height:2px;
  width:var(--heat,0%); background:var(--accent); opacity:.5;
  transition:width 700ms var(--ease-io);
}
.no{
  font-family:var(--display); font-weight:600; font-size:30px; line-height:1; color:var(--ink-3);
  text-align:right; letter-spacing:-.03em;
}
.shot{
  display:grid; place-items:center;
  width:48px; height:48px; border-radius:11px; overflow:hidden; background:var(--paper-sunk);
  border:1px solid var(--rule); flex:none;
}
.shot img{ width:100%; height:100%; object-fit:cover }
.shot-none{
  width:100%; height:100%; display:grid; place-items:center; background:var(--paper-sunk);
  font-family:var(--display); font-weight:600; font-size:20px; color:var(--ink-3);
}
.cell{ min-width:0 }
.title{ font-size:16.5px; font-weight:600; letter-spacing:-.015em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
@media (hover:hover) and (pointer:fine){ .title:hover{ color:var(--accent) } }
.sub{ font-size:14px; color:var(--ink-2); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.marks{ display:flex; gap:7px; margin-top:7px; flex-wrap:wrap }
.mark{
  font-family:var(--mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--rule); padding:2px 6px;
}
.mark-heat{ display:none }
.figure{ text-align:right }
.figure b{ font-family:var(--mono); font-size:16px; font-weight:500; display:block }
.figure span{ font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3) }
.act{ display:flex; flex-direction:column; align-items:flex-end; gap:5px }
.act .btn{ min-width:118px }
.act small{ font-size:11.5px; color:var(--ink-3); max-width:150px; text-align:right;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* empty board — a composed invitation, not a shrug */
.vacant{
  border:1px dashed var(--rule-firm); padding:clamp(38px,6vw,64px) var(--pad); text-align:center;
}
.vacant h3{ font-family:var(--display); font-weight:600; font-size:clamp(26px,3.4vw,38px); letter-spacing:-.025em }
.vacant p{ margin:12px auto 24px; max-width:44ch; color:var(--ink-2); font-size:15.5px; line-height:1.6 }

/* ════════════════════════════════════════════════════════════════ tape ═══ */
.feed-sec{ padding-bottom:clamp(52px,6vw,84px) }
.feed{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule) }
.feed li{
  display:flex; align-items:baseline; gap:12px; padding:11px 12px;
  border-bottom:1px solid var(--rule); font-size:14.5px; color:var(--ink-2);
}
.feed b{ color:var(--ink); font-weight:600 }
.feed .amt{ font-family:var(--mono); font-size:13.5px; color:var(--accent) }
.feed .at{ margin-left:auto; font-family:var(--mono); font-size:11.5px; color:var(--ink-3); white-space:nowrap }
.feed .none{ color:var(--ink-3); justify-content:center }

/* ═══════════════════════════════════════════════════════════════ pages ═══ */
.page{ padding-block:clamp(44px,6vw,78px) clamp(56px,7vw,96px) }
.page-narrow{ max-width:760px }
.page h1{ font-size:clamp(36px,5.6vw,62px); letter-spacing:-.032em; text-wrap:balance }
.page-lede{ margin-top:18px; font-size:17px; color:var(--ink-2); line-height:1.62; max-width:60ch }
.crumb{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); display:inline-block; margin-bottom:26px }
@media (hover:hover) and (pointer:fine){ .crumb:hover{ color:var(--accent) } }
.prose h2{ font-size:clamp(23px,2.8vw,30px); letter-spacing:-.025em; margin-top:44px; padding-bottom:10px;
  border-bottom:1px solid var(--rule) }
.prose p{ margin-top:14px; font-size:15.5px; color:var(--ink-2); line-height:1.72; max-width:68ch }
.prose code{ font-family:var(--mono); font-size:13.5px; background:var(--paper-sunk);
  border:1px solid var(--rule); padding:1px 5px; color:var(--accent-ink) }

/* ════════════════════════════════════════════════════════════════ form ═══ */
.form{ margin-top:34px; display:grid; gap:20px }
.f{ display:grid; gap:7px }
.f > label{ font-size:14px; font-weight:600; letter-spacing:-.01em }
.f > label em{ font-style:normal; font-weight:400; color:var(--ink-3); margin-left:7px; font-size:13px }
.f input, .f select{
  font-family:var(--sans); font-size:15.5px; color:var(--ink);
  padding:12px 14px; border:1px solid var(--rule-firm); border-radius:var(--r);
  background:var(--paper-card); width:100%;
  transition:border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.f input::placeholder{ color:var(--ink-3) }
.f input:focus, .f select:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-tint);
}
.f input[aria-invalid="true"]{ border-color:var(--accent) }
.f small{ font-size:13px; color:var(--ink-3); min-height:1.2em }
.f small.good{ color:var(--green) }
.f small.bad{ color:var(--accent) }
.f-pair{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.f-inline{ display:flex; gap:9px }
.f-inline input{ flex:1; min-width:0 }
.f-icon{ width:56px; height:56px; border-radius:13px; border:1px solid var(--rule); margin-top:9px; object-fit:cover }
.fine{ font-size:13px; color:var(--ink-3); line-height:1.65; max-width:62ch }
.alert{
  margin-top:24px; padding:13px 16px; border:1px solid var(--accent-edge);
  background:var(--accent-tint); color:var(--accent-ink); font-size:14.5px;
}

/* ══════════════════════════════════════════════════════════════ detail ═══ */
.head{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:26px; align-items:center;
  padding-bottom:28px; border-bottom:2px solid var(--ink) }
.head .shot{ width:88px; height:88px; border-radius:20px }
.head .shot-none{ font-size:38px }
.head h1{ font-size:clamp(30px,4.4vw,46px); margin-top:8px }
.head-sub{ margin-top:9px; font-size:16.5px; color:var(--ink-2); max-width:52ch }
.standing{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent) }
.head-act{ display:grid; gap:8px; justify-items:end; text-align:right }
.head-act small{ font-size:12.5px; color:var(--ink-3); max-width:190px }
.ledger{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr)) }
.ledger li{ padding:20px 0; border-bottom:1px solid var(--rule) }
.ledger b{ font-family:var(--mono); font-size:23px; font-weight:500; display:block; letter-spacing:-.02em }
.ledger span{ font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3) }
.runs{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule) }
.runs li{ display:flex; align-items:baseline; gap:14px; padding:12px 0; border-bottom:1px solid var(--rule); font-size:14.5px }
.runs b{ font-family:var(--mono); font-weight:500; color:var(--accent); min-width:76px }
.runs span{ color:var(--ink-2) }
.runs .at{ margin-left:auto; font-family:var(--mono); font-size:11.5px; color:var(--ink-3) }

/* ══════════════════════════════════════════════════════════════ result ═══ */
.result{ max-width:520px; padding-block:clamp(40px,7vw,80px) }
.seal{ width:54px; height:54px; border:1px solid var(--rule-firm); display:grid; place-items:center; margin-bottom:26px }
.seal svg{ width:24px; height:24px }
.seal.win{ border-color:var(--green); color:var(--green) }
.seal.hold{ border-color:var(--accent-edge); color:var(--accent) }
.result h1{ font-size:clamp(34px,5vw,50px) }
.result .page-lede{ margin-bottom:30px }
.result-actions{ display:flex; gap:12px; flex-wrap:wrap }

/* ══════════════════════════════════════════════════════════════ footer ═══ */
.foot{ border-top:1px solid var(--rule); background:var(--paper-sunk); padding-block:34px 40px }
.foot-in{ max-width:var(--max); margin-inline:auto; padding-inline:var(--pad);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:baseline }
.foot p{ font-size:13.5px; color:var(--ink-3); max-width:40ch; line-height:1.6 }
.foot nav{ display:flex; gap:22px; flex-wrap:wrap; font-size:13.5px; color:var(--ink-2) }
@media (hover:hover) and (pointer:fine){ .foot nav a:hover{ color:var(--accent) } }

/* ═════════════════════════════════════════════════════════ responsive ═══ */
@media (max-width:960px){
  .hero-grid{ grid-template-columns:1fr; align-items:start }
  .book{ max-width:460px }
  .laws-in{ grid-template-columns:1fr; gap:26px }
}
@media (max-width:720px){
  /* one compact line per app: rank, icon, what it is, what it costs to take.
     the old layout stacked price and action onto their own rows, which pushed
     each entry past 200px and left only three visible on a phone. */
  .line{
    grid-template-columns:26px 40px minmax(0,1fr) auto;
    gap:10px; padding:11px 6px 12px; align-items:center;
  }
  .line::after{ left:6px }
  .no{ font-size:19px }
  .shot{ width:40px; height:40px; border-radius:9px }
  .shot-none{ font-size:17px }
  .title{ font-size:15px }
  .sub{ font-size:13px }
  .marks{ margin-top:5px; gap:5px }
  .mark{ font-size:9.5px; padding:2px 5px }
  .mark-heat{ display:inline; color:var(--accent-ink); border-color:var(--accent-edge) }
  .figure{ display:none }
  .act{ align-items:flex-end; gap:0 }
  .act small{ display:none }
  .act .btn{ min-width:0; padding:9px 13px; font-size:13.5px }

  .claim{
    grid-template-columns:auto minmax(0,1fr); border-radius:18px; padding:10px 12px; row-gap:2px;
  }
  .claim .btn{ grid-column:1/-1; width:100%; border-radius:12px; padding:13px 20px }
  .claim input{ font-size:15.5px }
  .head{ grid-template-columns:1fr; gap:18px }
  .head-act{ justify-items:stretch; text-align:center }
  .head-act .btn{ width:100% }
  .f-pair{ grid-template-columns:1fr }
  .nav-links{ gap:16px }
  .foot-in{ flex-direction:column; gap:16px }
}

@media (max-width:560px){
  .nav-links{ gap:14px }
  .nav-in{ gap:10px }
  .nav-links a:not(.btn){ font-size:14px }
  .btn-sm{ padding:9px 16px; font-size:13.5px }
}

@media (max-width:520px){
  .brand b{ display:none }          /* mark alone; the bar cannot fit both */
  .brand-mark{ width:30px; height:23px }
  .nav-in{ height:58px }
}

@media (max-width:430px){
  .sub{ display:none }              /* name and price carry the row at this size */
  .marks .mark:not(.mark-heat){ display:none }
}

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

/* ═══════════════════════════════════════════════ claim row + category ═══ */
.claim{ grid-template-columns:auto minmax(0,1fr) auto auto }
.claim select{
  border:0; border-left:1px solid var(--rule); background:none; outline:none;
  font-family:var(--sans); font-size:14.5px; color:var(--ink-2);
  padding:11px 8px 11px 14px; max-width:190px; cursor:pointer;
}

/* ══════════════════════════════════════════════════════ category chips ═══ */
.cats{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px }
.cat{
  font-size:12.5px; padding:6px 13px; border-radius:99px; border:1px solid var(--rule-firm);
  color:var(--ink-2); background:var(--paper-card); white-space:nowrap;
  transition:background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.cat:hover{ border-color:var(--ink-3); color:var(--ink) }
.cat[aria-current]{ background:var(--ink); border-color:var(--ink); color:var(--paper) }
.cat span{ opacity:.55; margin-left:5px }

/* ════════════════════════════════════════════════════════════ rating ═════ */
.stars{ color:var(--gold); letter-spacing:.5px }
.mark-rating{ color:var(--accent-ink); border-color:var(--accent-edge) }
.disclaim{
  margin-top:10px; font-size:12.5px; color:var(--ink-3); line-height:1.55; max-width:52ch;
}

@media (max-width:720px){
  .claim{ grid-template-columns:auto minmax(0,1fr); }
  .claim select{ grid-column:1/-1; border-left:0; border-top:1px solid var(--rule); max-width:none; width:100% }
  .step-amt{ min-width:104px }
}

/* ══════════════════════════════════════════ reference layout: two columns ═ */
.nav-in{ max-width:1360px }
.nav-right{ display:flex; align-items:center; gap:12px }
.nav-plain{ font-size:14.5px; color:var(--ink-2); padding:4px 2px }
.nav-plain:hover{ color:var(--ink) }
.stat-pill{
  display:inline-flex; align-items:center; gap:7px; padding:7px 13px;
  border:1px solid var(--rule); border-radius:99px; background:var(--paper-card);
  font-size:13px; color:var(--ink-2); white-space:nowrap;
}
.stat-pill b{ color:var(--ink); font-weight:600 }
.dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none;
  animation:beat 2.4s var(--ease) infinite;
}
.dot-sep{ display:inline-flex; align-items:center; gap:5px; margin-left:9px }
.dot-sep .dot{ animation:none; opacity:.75 }

.split{
  max-width:1360px; margin-inline:auto; padding:26px var(--pad) 72px;
  display:grid; grid-template-columns:392px minmax(0,1fr); gap:30px; align-items:start;
}

/* ─────────────────────────────────────────────────────────────── sidebar ── */
.side{ position:sticky; top:78px }
.side h1{ font-size:clamp(30px,3.2vw,40px); line-height:1.05; letter-spacing:-.035em }
.side h1 span{ color:var(--ink-3) }
.side-lede{ margin-top:14px; font-size:14.5px; color:var(--ink-2); line-height:1.6 }

.promo-card{
  margin-top:20px; padding:14px; border:1px solid var(--rule); border-radius:16px;
  background:var(--paper-card); display:grid; gap:10px;
  box-shadow:0 1px 2px rgba(20,40,30,.04);
}
.field-line{
  display:flex; align-items:center; gap:10px; padding:0 13px;
  border:1px solid var(--rule-firm); border-radius:11px; background:var(--paper);
  transition:border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.field-line:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint) }
.field-line svg{ width:17px; height:17px; color:var(--ink-3); flex:none }
.field-line input, .field-line select{
  flex:1; min-width:0; border:0; background:none; outline:none; padding:12px 0;
  font-family:var(--sans); font-size:14.5px; color:var(--ink);
}
.field-line input::placeholder{ color:var(--ink-3) }
.select-line select{ cursor:pointer; padding-right:6px }

.amount-row{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px;
  border:1px solid var(--rule-firm); border-radius:11px; background:var(--paper); padding:6px;
}
.step-btn{
  width:38px; height:38px; flex:none; display:grid; place-items:center; border:0;
  border-radius:9px; cursor:pointer; background:var(--paper-sunk); color:var(--ink-2);
  font-size:20px; line-height:1; font-family:var(--sans);
  transition:background 150ms var(--ease), transform 130ms var(--ease);
}
.step-btn:hover{ background:var(--accent-tint); color:var(--accent-ink) }
.step-btn:active{ transform:scale(.93) }
.amount-val{
  display:flex; align-items:baseline; justify-content:center; gap:2px;
  font-family:var(--display); font-weight:700; letter-spacing:-.03em; color:var(--ink);
}
.amount-val em{ font-style:normal; font-size:20px }
.amount-val input{
  width:auto; min-width:2ch; max-width:6ch; field-sizing:content;
  border:0; background:none; outline:none; padding:0; text-align:left;
  font:inherit; color:inherit; font-size:27px;
}
@supports not (field-sizing:content){ .amount-val input{ width:3.4ch; max-width:none } }
.amount-val input::-webkit-outer-spin-button,.amount-val input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.promo-go{ width:100%; padding:13px; border-radius:11px; font-size:15px }
.promo-note{ text-align:center; font-size:12.5px; color:var(--ink-3) }

/* sponsor slots */
.slots-cap{
  margin-top:20px; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}
.slots{ margin-top:9px; display:grid; grid-template-columns:1fr 1fr; gap:10px }
.slot{
  display:grid; place-items:center; gap:5px; text-align:center; padding:16px 12px; min-height:104px;
  border:1px dashed var(--rule-firm); border-radius:13px; color:var(--ink-3); font-size:12.5px;
  transition:border-color 150ms var(--ease), background 150ms var(--ease);
}
.slot:hover{ border-color:var(--accent); background:var(--accent-tint); color:var(--accent-ink) }
.slot i{ font-style:normal; font-size:19px; width:30px; height:30px; display:grid; place-items:center;
  border:1px solid currentColor; border-radius:50%; opacity:.6 }
.slot.filled{
  border-style:solid; border-color:var(--rule); background:var(--paper-card); color:var(--ink-2);
}
.slot.filled b{ font-size:13.5px; color:var(--ink); font-weight:600 }
.slot.filled span{ font-size:11.5px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden }
.slot .shot{ width:32px; height:32px; border-radius:9px }

/* ────────────────────────────────────────────────────────── main column ── */
.toolbar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px }
.refresh{
  padding:8px 14px; border:1px solid var(--rule-firm); border-radius:10px;
  background:var(--paper-card); font-size:13.5px; color:var(--ink-2);
}
.refresh:hover{ border-color:var(--accent); color:var(--accent-ink) }
.toolbar-stats{ font-size:13px; color:var(--ink-3) }

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

/* top three: raised cards */
.card{
  display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; align-items:center; gap:16px;
  padding:16px; border:1px solid var(--accent-edge); border-radius:15px;
  background:var(--accent-tint);
  animation:rise 400ms var(--ease) backwards; animation-delay:calc(var(--i,0) * 40ms);
}
.board:not(.intro-anim) .card{ animation:none }
.rankpill{
  display:grid; place-items:center; min-width:44px; padding:7px 11px; border-radius:10px;
  background:var(--paper-card); color:var(--accent-ink); font-weight:700; font-size:14.5px;
}
.card .shot.lg{ width:60px; height:60px; border-radius:13px }
.card-name{ font-size:17px; font-weight:650; letter-spacing:-.015em; color:var(--ink) }
.card-name:hover{ color:var(--accent-ink) }
.card-desc{ margin-top:3px; font-size:14px; color:var(--ink-2); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.card-meta{ margin-top:6px; font-size:12.5px; color:var(--ink-3) }
.card-side{ display:grid; justify-items:end; gap:8px }
.amount{ font-family:var(--display); font-weight:700; font-size:26px; letter-spacing:-.03em; color:var(--accent) }

/* the rest: ruled rows */
.line{
  display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; align-items:center; gap:16px;
  padding:14px 16px; border:1px solid var(--rule); border-radius:13px; background:var(--paper-card);
  transition:border-color 160ms var(--ease);
}
.line:hover{ border-color:var(--rule-firm) }
.line .no{ font-family:var(--sans); font-weight:600; font-size:14px; color:var(--ink-3);
  min-width:34px; text-align:right }
.line .shot{ width:44px; height:44px; border-radius:11px }
.line .title{ font-size:15.5px; font-weight:600; letter-spacing:-.01em }
.line .sub{ margin-top:2px; font-size:13.5px; color:var(--ink-2); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.line .amount{ font-size:21px }

.divider{
  display:flex; align-items:center; gap:14px; margin:8px 2px; color:var(--ink-3);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
}
.divider::before,.divider::after{ content:""; flex:1; height:1px; background:var(--rule) }
.divider span{ padding:4px 11px; border:1px solid var(--rule); border-radius:99px; background:var(--paper-card) }

@media (max-width:1040px){
  .split{ grid-template-columns:1fr; gap:24px }
  .side{ position:static }
  .promo-card{ max-width:520px }
  .slots{ max-width:520px }
  .stat-pill.wide{ display:none }
}
@media (max-width:640px){
  .card,.line{ grid-template-columns:auto auto minmax(0,1fr); gap:12px; padding:13px }
  .card-side{ grid-column:1/-1; grid-auto-flow:column; justify-items:stretch; align-items:center;
    justify-content:space-between; padding-top:11px; border-top:1px solid var(--rule) }
  .card .shot.lg{ width:46px; height:46px }
  .stat-pill{ display:none }
  .nav-right{ gap:10px }
}