/* Marketing + auth pages (landing, sign in, sign up). Ported from the
   design-preview prototype onto the design.css token set. Loaded only by the
   marketing templates; app pages never include this file. */

.site{max-width:1140px; margin:0 auto; padding-inline:28px}
@media(max-width:640px){.site{padding-inline:18px} section.band{padding-block:56px} .hero{padding-block:44px 8px}}
@media(max-width:860px){.mktnav{display:none}}

.tick{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:13px; letter-spacing:-.02em}

.btn-lg{height:46px; padding:0 24px; font-size:15px}
.btn-block{width:100%}

/* hero */
.hero{padding-block:76px 12px}
.hero-kicker{display:inline-flex; align-items:center; gap:9px; padding:5px 12px 5px 8px; border:1px solid var(--brand-line);
  background:var(--brand-soft); color:var(--brand-hi); border-radius:999px; font-size:12px; font-weight:600; margin-bottom:26px}
.hero-kicker .tick{width:6px; height:6px; border-radius:999px; background:var(--brand); margin-left:4px; padding:0}
.hero h1{font-family:"Newsreader",Georgia,serif; font-weight:400;
  font-size:clamp(2.6rem,5.4vw,4.15rem); line-height:1.02; letter-spacing:-.032em; max-width:15ch}
.hero h1 em{font-style:italic; color:var(--brand)}
.hero-sub{margin-top:22px; max-width:58ch; font-size:17px; line-height:1.6; color:var(--ink-2)}
.hero-acts{display:flex; gap:12px; align-items:center; margin-top:30px; flex-wrap:wrap}
.hero-fine{font-size:13px; color:var(--ink-3)}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center}
@media(max-width:1000px){.hero-grid{grid-template-columns:1fr; gap:40px}}

/* the tape panel: this morning's board, straight from the run */
.tape{border:1px solid var(--rule-2); border-radius:10px; background:var(--surface); box-shadow:var(--shadow-lg); overflow:hidden}
.tape-head{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--rule); background:var(--surface-2)}
.tape-head b{font-size:12.5px; font-weight:600}
.tape-live{display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.tape-live i{width:6px; height:6px; border-radius:999px; background:var(--up); box-shadow:0 0 0 3px var(--up-soft)}
.tape-row{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:11px 16px; border-bottom:1px solid var(--rule); font-size:13.5px}
.tape-row:last-of-type{border-bottom:0}
.tape-row .tr-rk{font-size:11px; color:var(--ink-3); font-variant-numeric:tabular-nums; width:14px}
.tape-row .tr-nm{color:var(--ink-2); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tape-row .tr-sc{display:flex; align-items:center; gap:8px; font-variant-numeric:tabular-nums; font-weight:600}
.tape-foot{padding:11px 16px; border-top:1px solid var(--rule); background:var(--surface-2); font-size:11.5px; color:var(--ink-3); display:flex; justify-content:space-between; gap:10px}
.sbar{width:52px; height:5px; border-radius:3px; background:var(--surface-3); overflow:hidden; flex:none}
.sbar i{display:block; height:100%; background:var(--brand); border-radius:3px}

/* the ledger: hero comparison object */
.ledger-wrap{margin:58px 0 0; border:1px solid var(--rule-2); border-radius:10px; background:var(--surface);
  box-shadow:var(--shadow); overflow:hidden}
.ledger-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:16px 22px; border-bottom:1px solid var(--rule); flex-wrap:wrap}
.ledger-head h2{font-size:15px; font-weight:600}
.ledger-scroll{overflow-x:auto}
table.ledger{min-width:720px; font-size:14px; width:100%; border-collapse:collapse}
table.ledger th, table.ledger td{padding:15px 20px; text-align:left; vertical-align:top; border-bottom:1px solid var(--rule)}
table.ledger thead th{padding-top:18px; padding-bottom:14px; border-bottom:1px solid var(--rule-2)}
table.ledger tbody tr:last-child td{border-bottom:0}
.ledger .rowlab{width:24%; color:var(--ink-2); font-weight:500}
.ledger col.ours, .ledger .ours{background:var(--surface-2)}
.ledger th.ours{border-bottom-color:var(--brand)}
.colhead{display:flex; flex-direction:column; gap:3px}
.colhead b{font-size:15px; font-weight:600}
.colhead .colsub{font-size:12px; color:var(--ink-3); font-weight:400}
.colhead.brand b{color:var(--brand-hi)}
.ledger td{color:var(--ink-2)}
.ledger td.ours{color:var(--ink); font-weight:500}
.ledger .cost{font-size:19px; font-weight:600; color:var(--ink); letter-spacing:-.02em}
.ledger tfoot td{border-top:1px solid var(--rule-2); background:var(--surface-2); font-size:12.5px; color:var(--ink-3); line-height:1.6}

/* section scaffolding */
section.band{padding-block:84px}
section.band.tight{padding-block:60px}
.band-head{max-width:60ch; margin-bottom:36px}
.band-head h2{font-family:"Newsreader",Georgia,serif; font-weight:400; font-size:clamp(1.9rem,3.4vw,2.6rem);
  line-height:1.12; letter-spacing:-.025em; margin-top:12px}
.band-head p{margin-top:14px; color:var(--ink-2); font-size:16px; max-width:56ch}
h2.bandtitle{font-family:"Newsreader",Georgia,serif; font-weight:400; font-size:clamp(1.9rem,3.4vw,2.6rem);
  line-height:1.12; letter-spacing:-.025em; margin:12px 0 14px}

/* screen cards */
.screens-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:16px}
.screen-card{border:1px solid var(--rule); background:var(--surface); border-radius:9px; padding:20px 20px 16px;
  display:flex; flex-direction:column; gap:14px; transition:border-color .15s, transform .15s, box-shadow .15s; text-decoration:none}
.screen-card:hover{border-color:var(--rule-2); box-shadow:var(--shadow); transform:translateY(-1px)}
.sc-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.sc-name{font-size:16px; font-weight:600; display:flex; align-items:center; gap:8px; color:var(--ink)}
.sc-desc{font-size:13.5px; color:var(--ink-2); line-height:1.5}
.sc-perf{display:flex; align-items:flex-end; gap:14px; justify-content:space-between; margin-top:auto}
.sc-ret{font-size:24px; font-weight:600; letter-spacing:-.03em}
.sc-ret small{font-size:11px; font-weight:600; color:var(--ink-3); display:block; letter-spacing:.06em; text-transform:uppercase; margin-bottom:1px}
.sc-sub{font-size:12px; color:var(--ink-3); text-align:right; line-height:1.5}

/* proof / transparency split */
.split{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr; gap:32px}}
.proof-list{display:flex; flex-direction:column; gap:0; margin-top:8px}
.proof-item{display:grid; grid-template-columns:auto 1fr; gap:16px; padding:18px 0; border-bottom:1px solid var(--rule)}
.proof-item:last-child{border-bottom:0}
.proof-idx{font-size:11px; font-weight:600; color:var(--brand); letter-spacing:.06em; padding-top:3px}
.proof-item h3{font-size:15px; font-weight:600; margin-bottom:4px}
.proof-item p{font-size:14px; color:var(--ink-2); line-height:1.55}

/* specimen: a real object from the product, shown in a window */
.specimen{border:1px solid var(--rule); background:var(--surface); border-radius:9px; overflow:hidden; box-shadow:var(--shadow)}
.specimen-bar{display:flex; align-items:center; justify-content:space-between; padding:11px 16px; border-bottom:1px solid var(--rule); background:var(--surface-2); gap:10px}
.specimen-bar span{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.specimen-body{padding:18px}
.spec-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule); border-top:1px solid var(--rule)}
@media(max-width:640px){.spec-stats{grid-template-columns:1fr 1fr}}
.spec-stat{background:var(--surface); padding:12px 14px}
.spec-stat span{display:block; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-bottom:2px}
.spec-stat b{font-size:16px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.spec-formula{font-family:"IBM Plex Mono",monospace; font-size:11.5px; background:var(--surface-2); border:1px solid var(--rule);
  padding:7px 10px; border-radius:5px; color:var(--ink); overflow-x:auto; white-space:nowrap}
.spec-inputs{display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:7px; font-size:11px; color:var(--ink-3); font-family:"IBM Plex Mono",monospace}
.spec-inputs b{color:var(--ink-2); font-weight:500}

/* pricing */
.price-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media(max-width:800px){.price-grid{grid-template-columns:1fr}}
.plan{border:1px solid var(--rule); background:var(--surface); border-radius:10px; padding:26px; display:flex; flex-direction:column; gap:20px}
.plan.featured{border-color:var(--brand-line); box-shadow:var(--shadow-lg); position:relative}
.plan.featured::before{content:""; position:absolute; inset:0 0 auto; height:2px; background:var(--brand); border-radius:10px 10px 0 0}
.plan-name{display:flex; align-items:center; justify-content:space-between}
.plan-name h3{font-size:16px; font-weight:600}
.plan-price{display:flex; align-items:baseline; gap:7px}
.plan-price b{font-family:"Newsreader",Georgia,serif; font-weight:400; font-size:46px; letter-spacing:-.03em; line-height:1}
.plan-price span{font-size:13px; color:var(--ink-3)}
.plan ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; font-size:14px; color:var(--ink-2)}
.plan li{display:grid; grid-template-columns:16px 1fr; gap:10px; align-items:start}
.plan li svg{margin-top:4px}
.plan li b{color:var(--ink); font-weight:600}

/* footer */
.sitefoot{border-top:1px solid var(--rule); background:var(--surface-2); margin-top:20px}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:36px; padding-block:52px 34px}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr; gap:28px}}
.foot-col h4{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-bottom:14px}
.foot-col a{display:block; font-size:13.5px; color:var(--ink-2); padding:4px 0; text-decoration:none}
.foot-col a:hover{color:var(--ink)}
.foot-fine{border-top:1px solid var(--rule); padding-block:22px 46px; font-size:11.5px; line-height:1.65; color:var(--ink-3)}
.foot-fine p+p{margin-top:9px}

/* auth */
.auth{min-height:100vh; display:grid; grid-template-columns:1fr 1fr}
@media(max-width:900px){.auth{grid-template-columns:1fr}}
.auth-form{display:flex; flex-direction:column; justify-content:center; padding:48px; max-width:520px; width:100%; margin:0 auto}
.auth-form h1{font-family:"Newsreader",Georgia,serif; font-weight:400; font-size:34px; letter-spacing:-.025em; margin:34px 0 8px}
.auth-form p.lede{color:var(--ink-2); font-size:15px; margin-bottom:28px}
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:15px}
.field label{font-size:12.5px; font-weight:600; color:var(--ink-2)}
.field input{height:42px; padding:0 13px; border:1px solid var(--rule-2); border-radius:6px; background:var(--surface); font-size:14.5px; color:var(--ink)}
.field input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.auth-alt{margin-top:20px; font-size:13.5px; color:var(--ink-2)}
.auth-alt a{color:var(--brand-hi); font-weight:600}
.auth-aside{background:var(--surface-2); border-left:1px solid var(--rule); padding:48px; display:flex; flex-direction:column; justify-content:center; gap:26px}
@media(max-width:900px){.auth-aside{display:none}}
.aside-quote{font-family:"Newsreader",Georgia,serif; font-size:24px; line-height:1.35; letter-spacing:-.02em; max-width:22ch}
.aside-stats{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:8px; overflow:hidden}
.aside-stat{background:var(--surface); padding:16px 18px}
.aside-stat b{display:block; font-size:22px; font-weight:600; letter-spacing:-.025em}
.aside-stat span{font-size:11.5px; color:var(--ink-3)}
.auth-error{border-left:2px solid var(--down); background:var(--down-soft); color:var(--ink);
  padding:10px 14px; border-radius:0 6px 6px 0; font-size:13.5px; margin-bottom:16px}
.tsw-float{position:absolute; top:18px; right:18px; z-index:5}

/* mobile: additive-only queries; the desktop layout above is untouched.
   The header is the main offender — at phone width the full CTA row is
   wider than the screen and drags the whole page sideways. */
@media(max-width:640px){
  body{overflow-x:clip}
  .sitebar-in{gap:10px}
  .sitebar-cta{gap:6px}
  .sitebar-cta .btn-quiet{display:none}
  .sitebar-cta .btn-sm{padding:0 9px; font-size:12.5px}
  .mark{gap:8px}
  .mark-word b{font-size:15px}
  .mark-word span{display:none}
  .tsw button{width:24px}
  .hero-acts .btn-lg{height:42px; padding:0 16px; font-size:14px}
  .tape-head{flex-wrap:wrap; row-gap:4px}
  .tape-foot{flex-wrap:wrap; row-gap:4px}
  .ledger-wrap{margin-top:40px}
  .auth-form{padding:28px 20px}
  .aside-quote{font-size:20px}
}