:root {
  --paper:#f7f8f6; --panel:#ffffff; --panel-2:#eef2ef; --ink:#12312e; --ink-soft:#3c534f;
  --ink-faint:#6b807b; --line:#d6ded9; --line-strong:#b9c6bf; --teal:#a07629; --teal-deep:#7a5618;
  --gold:#b7791f; --gold-soft:#f3ead6; --good-bg:#dcefe7; --good-fg:#0a5f52; --warn-bg:#f6e8cf;
  --warn-fg:#8a5a10; --crit-bg:#f4dcd4; --crit-fg:#9c3a24;
  --shadow:0 1px 2px rgba(18,49,46,.06),0 8px 24px rgba(18,49,46,.05);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code","Roboto Mono",Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#0e1a19; --panel:#142524; --panel-2:#1a302e; --ink:#ecefe9; --ink-soft:#b7c6c1;
    --ink-faint:#859791; --line:#27403c; --line-strong:#345450; --teal:#c9a24e; --teal-deep:#dcb45f;
    --gold:#d7a24a; --gold-soft:#2a2417; --good-bg:#123a32; --good-fg:#74d8c2; --warn-bg:#3a2f14;
    --warn-fg:#e2b467; --crit-bg:#3d1f16; --crit-fg:#e79a80;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.28); }
}
:root[data-theme="dark"]{ --paper:#0e1a19; --panel:#142524; --panel-2:#1a302e; --ink:#ecefe9; --ink-soft:#b7c6c1;
  --ink-faint:#859791; --line:#27403c; --line-strong:#345450; --teal:#c9a24e; --teal-deep:#dcb45f;
  --gold:#d7a24a; --gold-soft:#2a2417; --good-bg:#123a32; --good-fg:#74d8c2; --warn-bg:#3a2f14;
  --warn-fg:#e2b467; --crit-bg:#3d1f16; --crit-fg:#e79a80; --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.28); }
:root[data-theme="light"]{ --paper:#f7f8f6; --panel:#ffffff; --panel-2:#eef2ef; --ink:#12312e; --ink-soft:#3c534f;
  --ink-faint:#6b807b; --line:#d6ded9; --line-strong:#b9c6bf; --teal:#a07629; --teal-deep:#7a5618;
  --gold:#b7791f; --gold-soft:#f3ead6; --good-bg:#dcefe7; --good-fg:#0a5f52; --warn-bg:#f6e8cf;
  --warn-fg:#8a5a10; --crit-bg:#f4dcd4; --crit-fg:#9c3a24; --shadow:0 1px 2px rgba(18,49,46,.06),0 8px 24px rgba(18,49,46,.05); }

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.55; -webkit-font-smoothing:antialiased; }
.wrap { max-width:900px; margin:0 auto; padding:clamp(16px,4vw,40px) clamp(14px,4vw,32px) 90px; }

/* top bar */
.topbar { display:flex; justify-content:space-between; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; }
.brand .logo { width:34px; height:34px; border-radius:9px; flex:0 0 auto; }
.brand b { font-family:var(--serif); font-size:19px; font-weight:600; letter-spacing:-.01em; }
.brand .tag { font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); display:block; }
.themebtn { font-family:var(--mono); font-size:12px; background:var(--panel); color:var(--ink-soft); border:1px solid var(--line-strong); border-radius:8px; padding:7px 11px; cursor:pointer; }

header.mast { margin-top:26px; }
.kicker { font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-deep); margin:0 0 10px; }
h1 { font-family:var(--serif); font-weight:600; font-size:clamp(24px,4.4vw,38px); line-height:1.09; letter-spacing:-.01em; margin:0 0 10px; text-wrap:balance; }
.dek { font-size:clamp(14px,2vw,17px); color:var(--ink-soft); max-width:66ch; margin:0; }

section { margin-top:34px; }
.eyebrow { font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:10px; margin:0 0 6px; }
.eyebrow::before{ content:""; width:20px; height:2px; background:var(--gold); display:inline-block; }
h2 { font-family:var(--serif); font-weight:600; font-size:clamp(19px,3.2vw,25px); margin:0 0 4px; letter-spacing:-.01em; }
h2 .n { font-family:var(--mono); font-size:12px; color:var(--teal-deep); font-weight:700; margin-right:5px; }
.lede { font-size:14px; color:var(--ink-soft); max-width:70ch; margin:0 0 4px; }
p { margin:0 0 12px; } p:last-child{ margin-bottom:0; }

.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:17px 19px; box-shadow:var(--shadow); margin-top:13px; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:13px 20px; } @media (max-width:620px){ .grid{ grid-template-columns:1fr; } }
label.f { display:block; font-size:11.5px; font-family:var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 5px; }
.inl { display:flex; align-items:center; gap:8px; }
.inl .pre { font-family:var(--serif); font-size:18px; color:var(--ink-soft); min-width:16px; }
input[type=number], input[type=text], input[type=password], select { width:100%; font-family:var(--mono); font-size:16px; padding:9px 11px; background:var(--paper); color:var(--ink); border:1px solid var(--line-strong); border-radius:8px; }
select { font-family:var(--sans); cursor:pointer; }
input[type=number]:focus, input[type=text]:focus, input[type=password]:focus, select:focus { outline:2px solid var(--teal); outline-offset:1px; }
input.sm { font-size:14px; padding:6px 8px; }
.hint { font-size:11px; color:var(--ink-faint); margin-top:4px; }
.hint a, a { color:var(--teal-deep); }

.rails { display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.rails button { font-family:var(--sans); font-size:13px; font-weight:600; padding:9px 13px; border-radius:9px; border:1px solid var(--line-strong); background:var(--paper); color:var(--ink-soft); cursor:pointer; text-align:left; }
.rails button.on { background:var(--teal); border-color:var(--teal); color:#fff; box-shadow:var(--shadow); }
.rails button .s { display:block; font-size:10px; font-weight:400; opacity:.85; font-family:var(--mono); margin-top:1px; }

.fxrow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; font-size:12px; color:var(--ink-faint); font-family:var(--mono); }
.fxrow .dot { width:8px; height:8px; border-radius:50%; background:var(--ink-faint); display:inline-block; }
.fxrow.live .dot { background:var(--good-fg); } .fxrow.stale .dot { background:var(--warn-fg); }
.fxrow button { font-family:var(--mono); font-size:11px; background:none; border:0; color:var(--teal-deep); cursor:pointer; text-decoration:underline; padding:0; }

.readout { display:flex; flex-wrap:wrap; gap:14px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.stat { flex:1 1 150px; min-width:128px; }
.stat .k { font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:3px; }
.stat .v { font-family:var(--serif); font-weight:600; font-size:clamp(19px,3.4vw,26px); line-height:1.05; color:var(--ink); font-variant-numeric:tabular-nums; }
.stat .v.good{ color:var(--good-fg); } .stat .v.leak{ color:var(--crit-fg); }
.stat .sub { font-size:11.5px; color:var(--ink-soft); margin-top:2px; }
.railnote { font-size:12px; color:var(--ink-faint); margin-top:12px; }

.cathead, .cat { display:grid; grid-template-columns:1fr 66px 116px 26px; gap:8px; align-items:center; }
.cathead { font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); padding-bottom:6px; border-bottom:2px solid var(--line-strong); }
.cathead span:nth-child(2),.cathead span:nth-child(3){ text-align:right; }
.cat { padding:6px 0; border-bottom:1px solid var(--line); }
.cat:last-of-type{ border-bottom:0; }
.cat .nm input { font-family:var(--sans); font-size:14px; padding:5px 7px; width:100%; background:transparent; border:1px solid transparent; border-radius:6px; color:var(--ink); }
.cat .nm input:focus { background:var(--paper); border-color:var(--line-strong); outline:none; }
.cat .pct input { text-align:right; }
.cat .peso { font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; font-size:14px; }
.cat .del { background:none; border:0; color:var(--ink-faint); cursor:pointer; font-size:15px; line-height:1; }
.cat .del:hover { color:var(--crit-fg); }
.bar { height:12px; border-radius:7px; background:var(--panel-2); overflow:hidden; margin-top:14px; display:flex; }
.bar i { display:block; height:100%; }
.totrow { display:flex; justify-content:space-between; align-items:baseline; margin-top:10px; font-size:13px; gap:10px; flex-wrap:wrap; }
.totrow .warn { color:var(--warn-fg); font-weight:600; } .totrow .ok{ color:var(--good-fg); font-weight:600; }
.addcat { margin-top:10px; font-family:var(--mono); font-size:12px; background:var(--panel-2); border:1px dashed var(--line-strong); color:var(--ink-soft); border-radius:8px; padding:7px 12px; cursor:pointer; }

.drift { margin-top:16px; padding:15px 17px; border-radius:9px; border:1px solid var(--line); background:var(--panel-2); font-size:15px; }
.drift.tight { border-left:4px solid var(--crit-fg); } .drift.ahead { border-left:4px solid var(--good-fg); } .drift.flat{ border-left:4px solid var(--teal); }
.drift b { color:var(--ink); }

.saved { margin-top:12px; }
.saved .row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; }
.saved .row:last-child{ border-bottom:0; }
.saved .row .mo { font-family:var(--serif); font-weight:600; }
.saved .row .amt { font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--ink-soft); }
.saved .row .del { background:none; border:0; color:var(--ink-faint); cursor:pointer; font-size:14px; }
.saved .empty { font-size:13px; color:var(--ink-faint); }
.btn { font-family:var(--sans); font-size:13px; font-weight:600; padding:9px 15px; border-radius:9px; border:1px solid var(--teal); background:var(--teal); color:#fff; cursor:pointer; }
.btn.ghost { background:var(--panel); color:var(--teal-deep); }

.box { background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--teal); border-radius:6px; padding:16px 18px; box-shadow:var(--shadow); }
.box.gold { border-left-color:var(--gold); } .box.aff { border-left-color:var(--good-fg); }
.box .tag { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; display:block; margin-bottom:8px; color:var(--teal-deep); }
.box.gold .tag { color:var(--warn-fg); } .box.aff .tag { color:var(--good-fg); }
.box ul { margin:6px 0 0; padding-left:18px; } .box li { margin-bottom:5px; font-size:13.5px; }
.box p { font-size:14px; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:13px; } @media (max-width:680px){ .two{ grid-template-columns:1fr; } }
.pill { display:inline-block; font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:var(--warn-bg); color:var(--warn-fg); padding:2px 8px; border-radius:4px; margin-left:6px; vertical-align:middle; }

details.asm { margin-top:14px; } details.asm summary{ cursor:pointer; font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--gold); }
details.asm .grid{ margin-top:12px; }
.reset { margin-top:12px; font-family:var(--mono); font-size:11px; background:none; border:0; color:var(--ink-faint); cursor:pointer; text-decoration:underline; }

.foot { margin-top:48px; padding-top:20px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-faint); } .foot p{ margin-bottom:8px; }
strong { color:var(--ink); }
.drift .ok{ color:var(--good-fg); font-weight:700; } .drift .warn{ color:var(--crit-fg); font-weight:700; }
.saved .row{ flex-wrap:wrap; }
.saved .row .act{ display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); }
.saved .row .act input{ width:96px; }
.rhead { display:flex; justify-content:space-between; align-items:center; gap:10px; font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); padding-bottom:6px; border-bottom:2px solid var(--line-strong); }
.rgroup { font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); padding:10px 0 4px; }
.rrow { display:grid; grid-template-columns:1fr 116px 26px; gap:8px; align-items:center; padding:6px 0; border-bottom:1px solid var(--line); }
.rrow:last-of-type { border-bottom:0; }
.rrow .when { font-size:13px; color:var(--ink-soft); }
.rrow .amt input { text-align:right; }
.rrow .del { background:none; border:0; color:var(--ink-faint); cursor:pointer; font-size:15px; line-height:1; }
.rrow .del:hover { color:var(--crit-fg); }
.rrow.unpriced .when::after { content:" · needs an amount"; color:var(--warn-fg); }
/* A credit and a deliberate zero must never be mistakable for a failed scan or a typo — both say
   so in words, not just colour, so the meaning survives a colourblind reader and a mono screen. */
.rrow.credit .when::after { content:" · credit — money back"; color:var(--good-fg); font-weight:600; }
.rrow.credit .amt input { color:var(--good-fg); font-weight:600; }
.rrow.zero .when::after { content:" · zero — nothing paid"; color:var(--ink-faint); }
.rsum { font-size:12px; color:var(--ink-faint); margin-top:10px; font-family:var(--mono); }
.remptynote { font-size:13px; color:var(--ink-faint); padding:10px 0 0; }
.rbtns { display:flex; gap:6px; flex-wrap:wrap; }
.snapbtn { font-family:var(--sans); font-size:12px; font-weight:700; background:var(--teal); border:1px solid var(--teal); color:#fff; border-radius:8px; padding:7px 12px; cursor:pointer; }
.snapbtn:disabled, .addcat:disabled { opacity:.55; cursor:default; }
.rrow { grid-template-columns:44px 1fr 116px 26px; }
.rthumb { width:44px; height:44px; border-radius:7px; object-fit:cover; background:var(--panel-2); border:1px solid var(--line); display:block; }
.rthumb.none { display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--ink-faint); }
.scanmsg { font-size:12px; margin-top:6px; font-family:var(--mono); color:var(--ink-faint); min-height:1em; }
.scanmsg.err { color:var(--crit-fg); }
.scanmsg.ok { color:var(--good-fg); }
.rrow { grid-template-columns:44px 1fr 58px 100px 26px; }
.kindtog { font-family:var(--mono); font-size:9px; letter-spacing:.04em; text-transform:uppercase; padding:4px 6px; border-radius:6px; border:1px solid var(--line-strong); background:var(--panel-2); color:var(--ink-faint); cursor:pointer; }
.kindtog.quote { background:var(--warn-bg); color:var(--warn-fg); border-color:var(--warn-fg); }
.lockscreen { display:none; position:fixed; inset:0; background:var(--paper); z-index:9999; align-items:center; justify-content:center; padding:24px; }
html.locked .lockscreen { display:flex; }
html.locked .wrap { display:none; }
.lockbox { text-align:center; max-width:280px; width:100%; }
.lockbox .locklogo { width:56px; height:56px; border-radius:14px; }
.lockbox b { display:block; font-family:var(--serif); font-size:21px; margin-top:12px; }
.lockbox input { text-align:center; letter-spacing:.5em; font-size:26px; padding:12px; margin-top:14px; }
.lockerr { font-size:12px; color:var(--crit-fg); min-height:1.2em; margin-top:8px; font-family:var(--mono); }
.rsearchrow { display:flex; gap:8px; align-items:center; margin-top:10px; }
.rsearchrow input[type=search] { width:100%; font-family:var(--sans); font-size:14px; padding:8px 11px; background:var(--paper); color:var(--ink); border:1px solid var(--line-strong); border-radius:8px; }
.rsearchrow input[type=search]:focus { outline:2px solid var(--teal); outline-offset:1px; }
.rfound { font-size:12px; font-family:var(--mono); color:var(--teal-deep); margin-top:8px; min-height:1em; }
.rnomatch { font-size:13px; color:var(--ink-faint); padding:12px 0 0; }
.railcmp { display:grid; gap:12px; margin-top:12px; }
.railcmp > div { padding:11px 13px; background:var(--paper); border:1px solid var(--line); border-radius:9px; }
.railcmp b { display:block; font-family:var(--serif); font-size:16px; margin-bottom:3px; }
.railcmp span { display:block; font-size:13px; color:var(--ink-soft); line-height:1.5; }
/* A row that exists but is still being read. Declared AFTER .unpriced so it wins the ::after on a
   row that is legitimately both — while the scan runs, "reading the total" is the useful message,
   not "needs an amount". The amount field stays editable on purpose: whatever the user types wins. */
.rrow.reading .when::after { content:" · reading the total…"; color:var(--teal-deep); }
.rrow.reading .rthumb { animation:rpulse 1.2s ease-in-out infinite; }
@keyframes rpulse { 0%,100% { opacity:1; } 50% { opacity:.45; } }
@media (prefers-reduced-motion:reduce) { .rrow.reading .rthumb { animation:none; } }

/* ---------- views + tab bar (v0.20) ----------
   The app used to be one 5,900px page. Sections are now views; only one is in the document flow at
   a time. display:none rather than visibility so hidden views cost no layout and cannot be tabbed
   into by a keyboard user — but note the nodes still EXIST, which is what lets every render
   function keep writing to its element whether or not that view is on screen. */
.view { display:none; }
.view.on { display:block; }

.tabs { display:flex; gap:2px; margin-top:14px; overflow-x:auto; scrollbar-width:none;
  border-bottom:1px solid var(--line); }
.tabs::-webkit-scrollbar { display:none; }
.tabs a { flex:0 0 auto; padding:10px 14px; font-family:var(--sans); font-size:14px; font-weight:600;
  color:var(--ink-faint); text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap; }
.tabs a:hover { color:var(--ink-soft); }
.tabs a.on { color:var(--teal-deep); border-bottom-color:var(--teal); }
.tabs a:focus-visible { outline:2px solid var(--teal); outline-offset:-2px; border-radius:6px 6px 0 0; }

.topbtns { display:flex; align-items:center; gap:6px; }
.topbtns a.themebtn { text-decoration:none; display:inline-flex; align-items:center; line-height:1; padding:8px 11px; }
:root.in-settings .topbtns a.themebtn { background:var(--teal); border-color:var(--teal); color:#fff; }

/* Snap is the most-used control in the app and now sits at the top of Today, not 5.7 screens down. */
.snaprow { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.snaprow .snapbtn { flex:1 1 auto; min-width:150px; }

/* The first section in a view carries the page's top margin; without this every view starts with a
   34px gap that reads as a rendering glitch on the short ones. */
.view > section:first-child, .view > header.mast:first-child { margin-top:20px; }

/* ---------- phone first (v0.21) ----------
   Most people use this on a phone, so the phone is the design target and the desktop is the
   adaptation — not the other way round. Three things were wrong when measured at 375x812:
   tap targets below the 44px both Apple and Google specify, a tab bar overflowing by 8px so the
   last tab looked clipped rather than scrollable, and navigation pinned to the TOP of the screen
   where a thumb cannot comfortably reach it on a modern tall phone. */
@media (max-width:620px) {
  /* Navigation moves to the bottom, where the thumb already is. */
  .tabs {
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    background:var(--panel); border-top:1px solid var(--line); border-bottom:0;
    padding-bottom:env(safe-area-inset-bottom);   /* clear the iPhone home indicator */
    box-shadow:0 -2px 14px rgba(18,49,46,.07);
    overflow-x:visible; margin-top:0;
  }
  /* flex:1 1 0 makes five tabs share the width exactly, so nothing is ever clipped. */
  .tabs a {
    flex:1 1 0; min-width:0; padding:10px 3px; font-size:11.5px; min-height:52px;
    display:flex; align-items:center; justify-content:center; text-align:center;
    border-bottom:0; border-top:2px solid transparent;
  }
  .tabs a.on { border-top-color:var(--teal); border-bottom-color:transparent; }

  /* Content must clear the fixed bar, or the last control sits underneath it. */
  .wrap { padding-bottom:calc(84px + env(safe-area-inset-bottom)); }

  /* Every control you tap gets a real target. Snap is the one used most; it gets the full width. */
  .snaprow { gap:10px; }
  .snaprow .snapbtn { flex:1 1 100%; min-height:48px; font-size:16px; }
  .snaprow .addcat { flex:1 1 0; min-height:44px; }
  .rhead .rbtns .snapbtn, .rhead .rbtns .addcat { min-height:44px; }
  .rrow .del { min-width:34px; min-height:34px; }

  /* 16px stops iOS zooming the page when a field takes focus — a jarring, uninvited zoom that
     then leaves the layout shifted. Anything smaller triggers it. */
  input[type=number], input[type=text], input[type=password], input[type=search], select { font-size:16px; }
}

/* Terms and Privacy must be reachable WITHOUT an account and without hunting — someone deciding
   whether to trust this with their spending should be able to read them before committing to
   anything. Footer placement, on every view, at a size that is actually legible. */
.foot .legal { font-size:12.5px; margin-top:10px; }
.foot .legal a { font-weight:600; }

/* ---------- welcome / landing (v0.23) ----------
   The first thing a stranger sees. Sized so the headline, the one-line reason and the button all
   land above the fold on a phone — a call to action below the fold is a call to action nobody sees. */
:root.in-welcome .tabs { display:none; }
:root.in-welcome .wrap { padding-bottom:40px; }

.hero { text-align:center; padding:26px 0 8px; }
.hero h1 { font-size:clamp(27px,7vw,44px); margin:0 0 12px; text-wrap:balance; }
.hero .kicker { margin-bottom:12px; }
.hero .dek { margin:0 auto 22px; max-width:56ch; text-align:left; }

.cta {
  display:inline-block; background:var(--teal); color:#fff; text-decoration:none;
  font-family:var(--sans); font-size:17px; font-weight:600; letter-spacing:-.01em;
  padding:15px 30px; border-radius:11px; box-shadow:var(--shadow); min-height:52px; line-height:1.4;
}
.cta:hover { background:var(--teal-deep); }
.cta:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.trustline { font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); margin:12px 0 0; }
.trustline a { color:var(--ink-faint); }

.sell { display:grid; gap:12px; margin-top:26px; }
@media (min-width:760px) { .sell { grid-template-columns:repeat(3,1fr); } }
.sellcard { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 18px; box-shadow:var(--shadow); }
.sellcard b { display:block; font-family:var(--serif); font-size:17px; font-weight:600; margin-bottom:6px; letter-spacing:-.01em; }
.sellcard span { font-size:14px; color:var(--ink-soft); line-height:1.55; }

/* ---------- marketing page (about.html) ----------
   The public face. Same visual language as the app on purpose — a landing page that looks like a
   different product than the thing it is selling makes the reader wonder which one they will get. */
.hero.mkt { padding:34px 0 6px; }
.hero.mkt h1 { font-size:clamp(29px,7.4vw,50px); }
.ctarow { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.cta.ghost { background:transparent; color:var(--teal-deep); border:1px solid var(--line-strong); box-shadow:none; }
.cta.ghost:hover { background:var(--panel-2); }

/* A picture of the app, drawn in CSS rather than a screenshot — a screenshot goes stale the moment
   the app changes, and this page has to stay true or it is just advertising. */
.phone { max-width:340px; margin:30px auto 8px; border:1px solid var(--line-strong); border-radius:22px;
  background:var(--panel); box-shadow:var(--shadow); overflow:hidden; }
.phonebar { display:flex; justify-content:space-between; align-items:center; padding:11px 15px;
  border-bottom:1px solid var(--line); font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); }
.phonebody { padding:15px; display:grid; gap:11px; }
.pstat { display:grid; }
.pstat .k { font-family:var(--mono); font-size:8.5px; letter-spacing:.08em; color:var(--ink-faint); }
.pstat .v { font-family:var(--serif); font-size:25px; font-weight:600; line-height:1.1; }
.pstat .v.good { color:var(--good-fg); }
.pstat .s { font-size:11px; color:var(--ink-soft); }
.pverdict { font-size:11.5px; line-height:1.5; padding:9px 11px; border-radius:8px; }
.pverdict.ahead { background:var(--good-bg); color:var(--good-fg); }
.pverdict.tight { background:var(--warn-bg); color:var(--warn-fg); }
.phonetabs { display:flex; border-top:1px solid var(--line); }
.phonetabs span { flex:1; text-align:center; padding:9px 2px; font-size:9.5px; color:var(--ink-faint);
  border-top:2px solid transparent; }
.phonetabs span.on { color:var(--teal-deep); border-top-color:var(--teal); font-weight:600; }
.mktnote { text-align:center; font-size:12px; color:var(--ink-faint); max-width:52ch; margin:0 auto; }

.chapter { margin-top:46px; }
.chapkick { font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); margin:0 0 8px; }
.chaphead { font-family:var(--serif); font-weight:600; font-size:clamp(21px,4vw,30px); letter-spacing:-.01em;
  margin:0 0 10px; text-wrap:balance; }
.chaplede { font-size:15px; color:var(--ink-soft); max-width:68ch; margin:0 0 18px; }