/* ============================================================================
   Poker Homie — "Clay & Ledger" site styles
   Tokens mirror the app's design system (src/lib/navColors.ts / global.css)
   so the site and the product read as one thing.
   ========================================================================= */
:root{
  --ink:#0F1417; --surface:#161C20; --surface-2:#1E252A; --hairline:#2A333A;
  --text-hi:#ECE6D8; --text:#B7BEC4; --text-mid:#7B848B; --text-dim:#4E565D;
  --brass:#C9A25A; --brass-press:#B08B45; --profit:#45C08A; --loss:#E5595E; --info:#5B9DD9;
  --sans:"SF Pro Display",-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;
  --mono:"SF Mono",ui-monospace,"JetBrains Mono","Roboto Mono",monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow-2:0 8px 24px rgba(0,0,0,.42); --shadow-3:0 18px 50px rgba(0,0,0,.55);
  --gut:clamp(20px,5vw,32px);
  --maxw:1080px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:80px}
body{
  margin:0; background:var(--ink); color:var(--text);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{color:var(--text-hi); margin:0; line-height:1.15; font-weight:700}
p{margin:0}
a{color:var(--brass); text-decoration:none}
a:hover{color:var(--brass-press)}
::selection{background:rgba(201,162,90,.28); color:var(--text-hi)}
:focus-visible{outline:2px solid var(--brass); outline-offset:3px; border-radius:4px}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut)}

/* micro-label: the signature ledger eyebrow */
.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-mid);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::after{content:""; flex:1; height:1px; background:var(--hairline)}

.skip{position:absolute; left:-9999px}
.skip:focus{left:var(--gut); top:12px; z-index:100; background:var(--surface-2);
  color:var(--text-hi); padding:10px 16px; border-radius:9px; border:1px solid var(--hairline)}

/* ---------------------------------- nav --------------------------------- */
header.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(15,20,23,.82); backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--hairline);
}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:62px}
.mark{display:flex; align-items:center; gap:10px; color:var(--text-hi); font-weight:700; letter-spacing:-.01em}
.mark:hover{color:var(--text-hi)}
/* The white brand mark — the same artwork the app shows on its login screen, where it is
   tinted to bone at runtime (src/app/auth/login.tsx). Pre-tinted here so it needs no filter. */
.mark img.logo{width:28px; height:28px; flex:none; display:block}
.nav-links{display:flex; align-items:center; gap:26px}
.nav-links a{font-size:14px; color:var(--text-mid); font-weight:500; transition:color .18s var(--ease)}
.nav-links a:hover{color:var(--text-hi)}
.nav-links .cta{color:var(--ink); background:var(--brass); padding:8px 16px; border-radius:999px; font-weight:650}
.nav-links .cta:hover{background:var(--brass-press); color:var(--ink)}
/* The demo pill: same shape as Download, outlined instead of filled, so the pair reads as
   "try / commit" rather than two competing primaries. */
.nav-links .cta-ghost{color:var(--brass); border:1px solid rgba(201,162,90,.45); padding:7px 15px;
  border-radius:999px; font-weight:650;
  transition:border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease)}
.nav-links .cta-ghost:hover{color:var(--brass); border-color:var(--brass); background:rgba(201,162,90,.10)}
/* Both pills survive the phone breakpoint. Hiding the demo here would bury the lowest-friction
   path on the devices where installing an app is the biggest ask. */
@media(max-width:680px){
  .nav-links a:not(.cta):not(.cta-ghost){display:none}
  .nav-links{gap:10px}
  .nav-links .cta,.nav-links .cta-ghost{font-size:13.5px; padding:7px 13px}
}

/* ------------------------------- sections ------------------------------- */
section{padding-block:clamp(60px,9vw,104px)}
.sec-head{margin-bottom:clamp(28px,4vw,44px)}
.sec-head h2{font-size:clamp(28px,4.4vw,40px); letter-spacing:-.03em; margin-top:16px}
.sec-head .lede{margin-top:14px; max-width:60ch; color:var(--text)}

/* --------------------------------- hero --------------------------------- */
.hero{padding-top:clamp(48px,7vw,84px); padding-bottom:clamp(52px,8vw,92px); position:relative}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(720px 380px at 78% 6%, rgba(201,162,90,.10), transparent 66%);
}
.hero-grid{position:relative; display:grid; gap:clamp(38px,6vw,64px); grid-template-columns:1fr}
@media(min-width:900px){ .hero-grid{grid-template-columns:1.05fr .95fr; align-items:center} }
.hero h1{font-size:clamp(38px,6.6vw,62px); letter-spacing:-.035em; margin-top:18px; text-wrap:balance}
.hero h1 em{font-style:normal; color:var(--brass)}
.hero .sub{margin-top:20px; font-size:clamp(17px,2vw,19px); max-width:46ch; color:var(--text)}

.btns{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.btn{
  display:inline-flex; align-items:center; gap:9px; border-radius:999px;
  padding:13px 22px; font-weight:650; font-size:15px; letter-spacing:-.01em;
  transition:transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brass); color:var(--ink)}
.btn-primary:hover{background:var(--brass-press); color:var(--ink)}
.btn-ghost{background:var(--surface-2); color:var(--text-hi); border:1px solid var(--hairline)}
.btn-ghost:hover{color:var(--text-hi); border-color:var(--brass)}
.btn svg{flex:none}
.note{margin-top:16px; font-size:13.5px; color:var(--text-dim)}

/* ---- browser-demo entry point (hero) ------------------------------------
   Its own row above the store buttons, read first. Brass OUTLINE, not fill: the one filled brass
   button in the hero stays the App Store. This is the step before that one, not a rival to it. */
.btns-try{margin-top:26px; align-items:center; gap:14px}
.btn-try{background:transparent; color:var(--brass); border:1px solid rgba(201,162,90,.55)}
.btn-try:hover{color:var(--ink); background:var(--brass); border-color:var(--brass)}
.btn-try svg{transition:transform .18s var(--ease)}
.btn-try:hover svg{transform:translateX(2px)}
.try-aside{font-size:13.5px; color:var(--text-dim)}
.btns + .btns{margin-top:14px}


/* ----------------------------- ledger showpiece --------------------------
   Also the hero's primary doorway to the demo (see index.html). It is a link, so it must opt out
   of the global `a{color:var(--brass)}` — every descendant sets its own colour, and inheriting
   brass here would tint the whole card on hover. */
.ledger{background:var(--surface); border:1px solid var(--hairline); border-radius:14px;
  box-shadow:var(--shadow-3); overflow:hidden}
.ledger-link{display:block; color:var(--text);
  transition:transform .24s var(--ease), border-color .24s var(--ease), box-shadow .24s var(--ease)}
.ledger-link:hover,.ledger-link:focus-visible{color:var(--text); border-color:rgba(201,162,90,.55);
  box-shadow:0 26px 62px rgba(0,0,0,.6); transform:translateY(-3px)}
.ledger-link:active{transform:translateY(-1px)}

/* The app's own pinned action bar — the component a real ledger screen ends with. Persistent
   rather than hover-revealed, because phones have no hover and this is the card's main affordance. */
.ledger-cta{padding:14px 18px 16px; border-top:1px solid var(--hairline);
  background:linear-gradient(var(--surface-2),var(--surface)); display:grid; gap:9px}
.ledger-cta-btn{display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; border-radius:11px; background:var(--brass); color:var(--ink);
  font-weight:700; font-size:15px; letter-spacing:-.01em; transition:background .18s var(--ease)}
.ledger-link:hover .ledger-cta-btn,.ledger-link:focus-visible .ledger-cta-btn{background:var(--brass-press)}
.ledger-cta-note{text-align:center; font-family:var(--mono); font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--text-dim)}

@media(prefers-reduced-motion:reduce){
  .ledger-link,.ledger-link:hover,.ledger-link:focus-visible,.ledger-link:active{transform:none}
}

/* Once the hero stacks to one column the card would stretch to the full 1080px wrap, stranding the
   money columns a long way from the names and making a tight ledger look like a sparse table. Cap it
   at its intended measure and centre it — the same rule the demo app follows for its own column. */
@media(max-width:899px){
  .ledger{max-width:470px; margin-inline:auto}
}
.ledger-top{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:16px 18px 13px; border-bottom:1px solid var(--hairline);
  background:linear-gradient(var(--surface-2),var(--surface))}
.ledger-top .title{color:var(--text-hi); font-weight:700; letter-spacing:-.01em; font-size:16px}
.ledger-top .live{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brass); display:inline-flex; align-items:center; gap:6px}
.ledger-top .live::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--brass)}
.col-head{display:grid; grid-template-columns:1fr 74px 84px; gap:10px; padding:10px 18px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--text-mid); border-bottom:1px solid var(--hairline)}
.col-head span:not(:first-child){text-align:right}
.row{display:grid; grid-template-columns:1fr 74px 84px; gap:10px; align-items:center;
  padding:13px 18px; border-bottom:1px solid rgba(42,51,58,.55)}
.row .who{display:flex; align-items:center; gap:10px; min-width:0}
.av{width:26px; height:26px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-size:11px; font-weight:700; color:var(--ink)}
.nm{color:var(--text-hi); font-size:15px; font-weight:550; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.num{font-family:var(--mono); font-size:15px; text-align:right; font-variant-numeric:tabular-nums; color:var(--text)}
.net{font-family:var(--mono); font-size:15px; text-align:right; font-variant-numeric:tabular-nums; font-weight:600}
.up{color:var(--profit)} .down{color:var(--loss)}
.settle{padding:16px 18px 18px; background:var(--surface-2)}
.settle .eyebrow{margin-bottom:12px}
.pay{display:flex; align-items:center; gap:10px; padding:9px 0; font-size:14.5px; color:var(--text-hi)}
.pay + .pay{border-top:1px solid rgba(42,51,58,.5)}
.pay .amt{margin-left:auto; font-family:var(--mono); font-weight:650; color:var(--brass); font-variant-numeric:tabular-nums}
.arrow{color:var(--text-dim); flex:none}

/* -------------------------------- features ------------------------------- */
.quotes{display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:760px){ .quotes{grid-template-columns:repeat(3,1fr)} }

/* -------------------------------- reviews -------------------------------- */
.quote{background:var(--surface); border:1px solid var(--hairline); border-radius:14px; padding:24px;
  display:flex; flex-direction:column; gap:16px; margin:0}
.stars{color:var(--brass); font-size:13px; letter-spacing:.16em}
.quote blockquote{margin:0}
.quote p{color:var(--text-hi); font-size:16px; line-height:1.55}
.by{margin-top:auto; font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-mid)}

/* --------------------------------- panels -------------------------------- */
.panel{background:var(--surface); border:1px solid var(--hairline); border-radius:14px;
  padding:clamp(24px,4vw,36px)}
.panel h3{font-size:17px; letter-spacing:-.01em; margin:26px 0 10px}
.panel h3:first-of-type{margin-top:0}
.panel p{color:var(--text); font-size:16px}
.panel p + p{margin-top:12px}
.panel ul{margin:10px 0 0; padding-left:20px; color:var(--text); font-size:16px}
.panel li{margin-bottom:8px}
.panel li::marker{color:var(--brass)}
.steps{list-style:none; padding:0; margin:12px 0 0; counter-reset:s}
.steps li{counter-increment:s; position:relative; padding-left:38px; margin-bottom:12px; color:var(--text)}
.steps li::before{content:counter(s); position:absolute; left:0; top:1px;
  width:25px; height:25px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--hairline);
  font-family:var(--mono); font-size:12px; font-weight:700; color:var(--brass)}
.callout{margin-top:20px; padding:15px 17px; border-radius:10px;
  background:var(--surface-2); border:1px solid var(--hairline);
  border-left:2px solid var(--brass); font-size:15px; color:var(--text)}
/* The download panel's secondary line — the demo, offered to someone who read the whole page and
   still hasn't installed. */
.panel-alt{margin-top:20px; padding-top:18px; border-top:1px solid var(--hairline);
  font-size:14.5px; color:var(--text-mid)}
.panel-alt a{font-weight:650; border-bottom:1px solid rgba(201,162,90,.4)}
.panel-alt a:hover{border-bottom-color:var(--brass)}
.mailbtn{margin-top:22px}
strong{color:var(--text-hi); font-weight:650}

/* ============================ legal / long-form ========================== */
.legal-hero{padding-block:clamp(44px,6vw,72px) clamp(24px,3vw,36px); border-bottom:1px solid var(--hairline)}
.legal-hero h1{font-size:clamp(32px,5.2vw,46px); letter-spacing:-.03em; margin-top:16px}
.legal-hero .lede{margin-top:16px; max-width:62ch; font-size:17.5px}
.updated{margin-top:20px; font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  color:var(--text-dim); text-transform:uppercase}

.legal-layout{display:grid; gap:clamp(28px,4vw,52px); grid-template-columns:1fr; padding-block:clamp(40px,6vw,64px)}
@media(min-width:960px){ .legal-layout{grid-template-columns:216px 1fr; align-items:start} }

.toc{position:sticky; top:86px; display:none}
@media(min-width:960px){ .toc{display:block} }
.toc h4{font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--text-mid); margin-bottom:14px; font-weight:600}
.toc ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.toc a{display:block; padding:6px 12px; border-left:1px solid var(--hairline);
  color:var(--text-mid); font-size:14px; transition:color .18s var(--ease), border-color .18s var(--ease)}
.toc a:hover{color:var(--text-hi); border-left-color:var(--brass)}

.doc{min-width:0; max-width:74ch}
.doc > section{padding-block:0; margin-bottom:clamp(40px,5vw,60px); scroll-margin-top:86px}
.doc > section:last-child{margin-bottom:0}
.doc h2{font-size:clamp(23px,3vw,29px); letter-spacing:-.025em; padding-bottom:14px;
  border-bottom:1px solid var(--hairline); margin-bottom:22px}
.doc h3{font-size:17px; letter-spacing:-.01em; margin:28px 0 10px; color:var(--text-hi)}
.doc p{margin-bottom:14px}
.doc ul,.doc ol{margin:0 0 16px; padding-left:22px}
.doc li{margin-bottom:9px}
.doc li::marker{color:var(--brass)}
.doc dl{margin:0 0 16px}
.doc dt{color:var(--text-hi); font-weight:650; margin-top:14px}
.doc dd{margin:6px 0 0 0}

.tbl{width:100%; overflow-x:auto; margin:6px 0 18px; border:1px solid var(--hairline); border-radius:12px}
.tbl table{border-collapse:collapse; width:100%; min-width:520px; font-size:15px}
.tbl th,.tbl td{text-align:left; padding:12px 16px; border-bottom:1px solid var(--hairline); vertical-align:top}
.tbl th{font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--text-mid); background:var(--surface-2); font-weight:600}
.tbl tr:last-child td{border-bottom:none}
.tbl td strong{color:var(--text-hi)}

/* --------------------------------- footer -------------------------------- */
footer{border-top:1px solid var(--hairline); padding-block:44px 52px; background:var(--surface)}
.foot-grid{display:grid; gap:32px; grid-template-columns:1fr}
@media(min-width:760px){ .foot-grid{grid-template-columns:1.6fr 1fr 1fr} }
.foot-grid h4{font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--text-mid); margin:0 0 14px; font-weight:600}
.foot-links{display:flex; flex-direction:column; gap:10px}
.foot-links a{color:var(--text); font-size:15px}
.foot-links a:hover{color:var(--brass)}
.colophon{margin-top:38px; padding-top:22px; border-top:1px solid var(--hairline);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  font-size:13.5px; color:var(--text-dim)}

/* ============================== /join/<CODE> =============================
   The page a shared invite falls through to when the tapped link was NOT
   intercepted by an installed app — i.e. the visitor does not have it yet.
   ONE layout serves every /join route; there is no error variant. The whole
   page is a single centred column that puts the invite and the store buttons
   above the fold on a phone, with the pitch kept short and pushed to the end.
   ====================================================================== */
.join-hero{
  padding-block:clamp(44px,8vw,80px) clamp(48px,8vw,84px);
  border-bottom:1px solid var(--hairline); position:relative; overflow:hidden;
}
.join-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(620px 320px at 50% -6%, rgba(201,162,90,.13), transparent 68%);
}
.join-wrap{position:relative; max-width:560px; text-align:center}
.join-hero h1{
  font-size:clamp(32px,7vw,48px); letter-spacing:-.035em;
  margin-top:16px; text-wrap:balance;
}
.join-sub{
  margin:16px auto 0; max-width:40ch;
  font-size:clamp(16px,2vw,18px); color:var(--text);
}

/* --------------------------------- the CTA ------------------------------- */
.join-acts{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:clamp(26px,4vw,34px)}
.join-acts .btn{flex:1 1 auto; justify-content:center; min-width:210px}
.join-trust{margin-top:16px; font-size:13.5px; color:var(--text-dim)}

/* ------------------------------- the game id -----------------------------
   Secondary by design: the call to action is the store button. This exists
   because there is no deferred deep linking — the id has to survive the trip
   to the store or the visitor installs the app and still cannot get in. */
.join-id{
  margin-top:clamp(28px,4vw,36px); padding:18px 20px 16px;
  background:var(--surface); border:1px solid var(--hairline); border-radius:12px;
}
.join-id-label{
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-mid);
}
.join-id-value{
  font-family:var(--mono); font-weight:700; color:var(--brass);
  font-size:clamp(24px,6vw,30px); letter-spacing:.12em;
  font-variant-numeric:tabular-nums; line-height:1.2;
  margin-top:8px; word-break:break-all; text-indent:.12em;
}
.join-id-pw{margin-top:6px; font-size:14px; color:var(--text-mid)}
.join-id-pw b{font-family:var(--mono); color:var(--text-hi); font-weight:650}
.join-id-hint{margin-top:12px; font-size:13px; color:var(--text-dim)}
.copy-btn{
  margin-top:12px; appearance:none; cursor:pointer;
  background:var(--surface-2); color:var(--text-hi);
  border:1px solid var(--hairline); border-radius:999px;
  padding:8px 20px; font-family:var(--sans); font-size:13.5px; font-weight:600;
  transition:border-color .18s var(--ease), color .18s var(--ease);
}
.copy-btn:hover{border-color:var(--brass); color:var(--brass)}
.copy-btn.is-copied{border-color:var(--profit); color:var(--profit)}

.join-open{margin-top:18px; font-size:14.5px; color:var(--text-mid)}

/* ------------------------------ what it does ----------------------------- */
.join-about{padding-block:clamp(44px,7vw,72px); text-align:center}
.join-about .wrap{max-width:600px}
.join-about-lede{
  margin-top:18px; font-size:clamp(16px,2vw,18px); color:var(--text);
}
.join-about-lede em{font-style:normal; color:var(--text-hi); font-weight:600}
/* the worked-example ledger, reused from the home page. The section is centred; the ledger's own
   grid rows are not, so reset the alignment rather than let it inherit. */
.join-ledger{margin-top:clamp(26px,4vw,34px); text-align:left}

.join-about-list{
  list-style:none; margin:26px 0 0; padding:0; text-align:left;
  border-top:1px solid var(--hairline);
}
.join-about-list li{
  padding:15px 2px; border-bottom:1px solid var(--hairline);
  font-size:15.5px; color:var(--text); line-height:1.55;
}
.join-about-list b{color:var(--text-hi); font-weight:650}
.join-about-more{margin-top:26px; font-size:15px}

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

/* ==========================================================================
   ONE TABLE, EVERY SEAT — the same live session, switched between the seat
   you're in. The app really does render per-role action bars, so this shows
   a true difference rather than a marketing device.
   ========================================================================== */
.seat-switch{display:inline-flex; padding:4px; gap:3px; border-radius:999px;
  background:var(--surface); border:1px solid var(--hairline); margin-bottom:26px}
.seat-switch button{
  appearance:none; border:0; cursor:pointer; border-radius:999px; padding:9px 18px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.11em; text-transform:uppercase;
  font-weight:600; color:var(--text-mid); background:transparent;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.seat-switch button:hover{color:var(--text-hi)}
.seat-switch button[aria-selected="true"]{background:var(--brass); color:var(--ink)}

.seat-grid{display:grid; gap:clamp(26px,4vw,44px); grid-template-columns:1fr; align-items:start}
@media(min-width:900px){ .seat-grid{grid-template-columns:minmax(0,420px) minmax(0,1fr)} }

/* the shared ledger card */
.tcard{background:var(--surface); border:1px solid var(--hairline); border-radius:14px;
  box-shadow:var(--shadow-3); overflow:hidden}
.tcard-top{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 17px 13px; border-bottom:1px solid var(--hairline);
  background:linear-gradient(var(--surface-2),var(--surface))}
.tcard-top .title{color:var(--text-hi); font-weight:700; letter-spacing:-.01em; font-size:16px}
.livedot{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--brass)}
.livedot::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--brass);
  animation:pulse 2.2s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.32}}

.review{display:flex; align-items:center; gap:11px; padding:12px 17px;
  border-bottom:1px solid var(--hairline); background:rgba(201,162,90,.07);
  border-left:2px solid var(--brass)}
.review .txt{font-size:14px; color:var(--text-hi)}
.review .go{margin-left:auto; color:var(--brass); font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase}

.colhead{display:grid; grid-template-columns:1fr 76px 78px; gap:10px; padding:10px 17px;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-mid); border-bottom:1px solid var(--hairline)}
.colhead span:not(:first-child){text-align:right}
.prow{display:grid; grid-template-columns:1fr 76px 78px; gap:10px; align-items:center;
  padding:12px 17px; border-bottom:1px solid rgba(42,51,58,.55); position:relative}
.prow:last-of-type{border-bottom:0}
.who{display:flex; align-items:center; gap:10px; min-width:0}
.av{width:25px; height:25px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-size:10.5px; font-weight:700; color:var(--ink)}
.nm{color:var(--text-hi); font-size:14.5px; font-weight:550; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.you-tag{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); background:var(--brass); padding:2px 6px; border-radius:4px; flex:none}
.n{font-family:var(--mono); font-size:14.5px; text-align:right; font-variant-numeric:tabular-nums; color:var(--text)}
.net{font-family:var(--mono); font-size:14.5px; text-align:right; font-variant-numeric:tabular-nums; font-weight:600}
.up{color:var(--profit)} .down{color:var(--loss)} .idle{color:var(--text-dim)}
/* your seat is marked by a rule, not a highlight box — ledger grammar */
.prow.mine{background:rgba(201,162,90,.05)}
.prow.mine::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--brass)}
.pending{grid-column:1/-1; display:flex; align-items:center; gap:8px; margin-top:9px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--brass)}
.pending .dot{width:5px; height:5px; border-radius:50%; background:var(--brass)}

.tcard-foot{padding:13px 17px 15px; background:var(--surface-2); border-top:1px solid var(--hairline)}
.tally{display:flex; justify-content:space-between; gap:12px; font-family:var(--mono); font-size:11.5px;
  color:var(--text-mid); letter-spacing:.04em; margin-bottom:12px}
.tally b{color:var(--text-hi); font-weight:600}
.acts{display:flex; gap:9px}
.act{flex:1; text-align:center; border-radius:9px; padding:10px 12px; font-size:14px; font-weight:650;
  border:1px solid transparent}
.act.primary{background:var(--brass); color:var(--ink)}
.act.ghost{background:transparent; color:var(--text-hi); border-color:var(--hairline)}
.act.wide{flex:none; width:100%}

/* capability lists as ruled ledger lines rather than icon cards */
.caps{border-top:1px solid var(--hairline)}
.caps ul{margin:0; padding:0}
.caps li{list-style:none; display:grid; grid-template-columns:26px 1fr; gap:14px;
  padding:15px 2px; border-bottom:1px solid var(--hairline); align-items:start}
.caps .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--brass); padding-top:4px}
.caps h3{font-size:16.5px; letter-spacing:-.015em; margin-bottom:4px}
.caps p{font-size:15px; color:var(--text)}
.caps-title{font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--text-mid); margin-bottom:4px}

.pane[hidden]{display:none}
.pane{animation:fade .32s var(--ease)}
@keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* the record — activity feed */
.record{display:grid; gap:clamp(26px,4vw,44px); grid-template-columns:1fr; align-items:center}
@media(min-width:900px){ .record{grid-template-columns:minmax(0,1fr) minmax(0,460px)} }
.feed{background:var(--surface); border:1px solid var(--hairline); border-radius:14px;
  overflow:hidden; box-shadow:var(--shadow-3)}
.feed-top{padding:13px 17px; border-bottom:1px solid var(--hairline); background:var(--surface-2);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--text-mid); display:flex; justify-content:space-between}
.frow{display:grid; grid-template-columns:54px 1fr auto; gap:12px; align-items:baseline;
  padding:11px 17px; border-bottom:1px solid rgba(42,51,58,.5); font-size:14.5px}
.frow:last-child{border-bottom:0}
.frow .t{font-family:var(--mono); font-size:11.5px; color:var(--text-dim); font-variant-numeric:tabular-nums}
.frow .e{color:var(--text)}
.frow .e b{color:var(--text-hi); font-weight:600}
.frow .amt{font-family:var(--mono); font-size:13.5px; font-variant-numeric:tabular-nums; color:var(--text-mid)}
.frow.req .amt{color:var(--brass)}

.footnote{margin-top:clamp(34px,4vw,48px); padding-top:22px; border-top:1px solid var(--hairline);
  display:flex; gap:14px; align-items:baseline; flex-wrap:wrap}
.footnote .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brass)}
.footnote p{font-size:15.5px; color:var(--text); max-width:62ch}