/* Nosub v4 — "the Treasury": heraldic royal blue + treasure gold, charges in heraldic red.
   Layout: app shell. Sticky bar with search, then wide panels; tiles for the catalog, rows for detail. */
:root{
  --bg:#eef0f7; --surface:#ffffff; --sunk:#f5f6fb; --ink:#141a3a; --muted:#585f86; --line:#d8dbea;
  --royal:#2337c6; --royal-soft:#e4e7fb; --on-royal:#ffffff;
  --gold:#f4c443; --gold-ink:#7a5200; --gold-soft:#fdf3d6;
  --charge:#c8303b; --charge-soft:#fbe5e7; --ok:#14804f; --ok-soft:#dff3e9; --warn:#a35b00; --warn-soft:#fdecd2;
  --display:"Unbounded", "Arial Black", system-ui, sans-serif;
  --body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-sm:8px; --r-md:12px; --r-lg:22px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0b1030; --surface:#141a45; --sunk:#10153a; --ink:#eef0ff; --muted:#a2a8cf; --line:#283068;
  --royal:#8592ff; --royal-soft:#1f2766; --on-royal:#0b1030;
  --gold:#f6c94c; --gold-ink:#f6c94c; --gold-soft:#2e2a35;
  --charge:#ff7480; --charge-soft:#3a1a2c; --ok:#4fd39a; --ok-soft:#123a35; --warn:#ffb65c; --warn-soft:#3a2a1c; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0b1030; --surface:#141a45; --sunk:#10153a; --ink:#eef0ff; --muted:#a2a8cf; --line:#283068;
  --royal:#8592ff; --royal-soft:#1f2766; --on-royal:#0b1030;
  --gold:#f6c94c; --gold-ink:#f6c94c; --gold-soft:#2e2a35;
  --charge:#ff7480; --charge-soft:#3a1a2c; --ok:#4fd39a; --ok-soft:#123a35; --warn:#ffb65c; --warn-soft:#3a2a1c; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;font-variant-numeric:tabular-nums}
a{color:var(--royal)}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--royal);outline-offset:2px;border-radius:4px}
[hidden]{display:none!important}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.08;text-wrap:balance;margin:0}
h1{font-size:clamp(2rem,5.2vw,3.6rem)}
h2{font-size:clamp(1.25rem,2.4vw,1.7rem)}
h3{font-size:1.1rem}
p{margin:0}
.muted{color:var(--muted)}
.money{font-family:var(--display);font-weight:600;letter-spacing:-.01em}

/* top bar */
.bar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar-in{display:flex;align-items:center;gap:14px;padding-block:10px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:-.03em}
.logo img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid var(--gold)}
.logo b{color:var(--royal)}
.nav{display:flex;gap:2px;margin-left:6px}
.nav a{padding:8px 12px;border-radius:999px;text-decoration:none;color:var(--ink);font-weight:600;font-size:15px}
.nav a:hover{background:var(--royal-soft)}
.nav a[aria-current="page"]{background:var(--ink);color:var(--bg)}
.nav .count{display:inline-block;min-width:20px;padding:0 6px;margin-left:4px;border-radius:999px;background:var(--gold);color:#3a2700;font-size:12px;text-align:center}
.search-wrap{margin-left:auto;position:relative;flex:0 1 320px;min-width:0}
.search{width:100%;font:inherit;font-size:15px;padding:9px 14px 9px 38px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.search-wrap svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted)}
.results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:6px;max-height:60vh;overflow:auto;box-shadow:0 18px 40px -18px rgba(20,26,58,.35)}
.results a{display:flex;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:var(--r-sm);text-decoration:none;color:var(--ink)}
.results a:hover,.results a.on{background:var(--royal-soft)}
.results small{color:var(--muted)}
@media (max-width:860px){.bar-in{flex-wrap:wrap}.search-wrap{order:3;flex-basis:100%}.nav{overflow-x:auto;margin-left:auto}}
@media (max-width:520px){.nav a{padding:7px 9px;font-size:14px}.logo span{display:inline}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:700;font-size:15px;padding:11px 18px;border-radius:999px;border:0;background:var(--royal);color:var(--on-royal);text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{filter:brightness(1.08)}
.btn.gold{background:var(--gold);color:#2e1f00}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--royal)}
.btn.sm{padding:7px 13px;font-size:14px}
.btn.added{background:var(--ok);color:#fff}

/* hero */
.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;padding-block:44px 30px;align-items:stretch}
.hero-copy{display:grid;gap:18px;align-content:center}
.hero-copy .lede{font-size:1.15rem;color:var(--muted);max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px}
.tally{position:relative;background:var(--royal);color:#fff;border-radius:var(--r-lg);padding:26px;display:grid;gap:14px;overflow:hidden}
.tally .knight{position:absolute;right:-18px;bottom:-18px;width:168px;height:168px;border-radius:50%;object-fit:cover;border:4px solid var(--gold);opacity:.95}
.tally-q{font-weight:700;font-size:1.05rem;max-width:26ch}
.tally-num{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,6vw,4.2rem);line-height:1;letter-spacing:-.04em;color:var(--gold)}
.tally-sub{font-size:14px;opacity:.85;max-width:30ch}
.quick{display:flex;flex-wrap:wrap;gap:6px;max-width:calc(100% - 130px)}
.quick button{font:inherit;font-size:13.5px;font-weight:600;padding:6px 11px;border-radius:999px;border:1.5px solid rgba(255,255,255,.35);background:transparent;color:#fff;cursor:pointer}
.quick button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#2e1f00}
.tally .btn{justify-self:start;background:#fff;color:#141a3a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tally{background:#1e2a8f}}
:root[data-theme="dark"] .tally{background:#1e2a8f}
@media (max-width:860px){.hero{grid-template-columns:1fr;padding-block:28px 20px}.tally .knight{width:120px;height:120px}.quick{max-width:calc(100% - 90px)}}

/* section heads */
.sec{padding-block:26px}
.sec-h{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:10px;margin-bottom:16px}
.sec-h p{color:var(--muted);max-width:60ch}

/* category tabs */
.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:14px;scrollbar-width:thin}
.tabs button{font:inherit;font-weight:600;font-size:14px;padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;white-space:nowrap}
.tabs button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* catalog tiles */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.tile{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px;display:grid;gap:10px;grid-template-rows:auto auto 1fr auto}
.tile:hover{border-color:var(--royal)}
.tile-top{display:flex;justify-content:space-between;gap:8px;align-items:start}
.tile h3 a{color:var(--ink);text-decoration:none}
.tile h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.cat{font-size:12.5px;color:var(--muted);font-weight:600}
.cost{color:var(--charge);font-weight:700;font-size:15px;white-space:nowrap}
.cost small{font-weight:500;color:var(--muted)}
.swaps-mini{font-size:14px;color:var(--muted)}
.swaps-mini b{color:var(--ok)}
.tile-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;position:relative;z-index:1}
.save-pill{font-size:13px;font-weight:700;color:var(--gold-ink);background:var(--gold-soft);padding:3px 9px;border-radius:999px}
.sponsor{background:var(--gold-soft);border:1.5px dashed var(--gold-ink)}
.sponsor .cat{color:var(--gold-ink)}

/* strips */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.deal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px;display:grid;gap:8px;align-content:start}
.deal-h{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.badge{display:inline-block;font-size:12.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--royal-soft);color:var(--royal)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.red{background:var(--charge-soft);color:var(--charge)}

/* app detail */
.crumbs{font-size:14px;color:var(--muted);padding-top:22px}
.crumbs a{color:var(--muted)}
.app-head{display:grid;grid-template-columns:1fr 360px;gap:22px;padding-block:14px 8px;align-items:start}
.app-head .lede{color:var(--muted);font-size:1.08rem;max-width:56ch;margin-top:12px}
.pricecard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;display:grid;gap:12px}
.pricecard h2{font-size:1rem}
.plans{width:100%;border-collapse:collapse;font-size:15px}
.plans th{text-align:left;font-weight:600;color:var(--muted);font-size:13px;padding:0 0 6px}
.plans td{padding:8px 0;border-top:1px solid var(--line)}
.plans td.p{color:var(--charge);font-weight:700;text-align:right;white-space:nowrap}
.plans th.p{text-align:right}
.src{font-size:13px;color:var(--muted)}
.trialnote{font-size:14px;background:var(--warn-soft);color:var(--warn);padding:8px 10px;border-radius:var(--r-sm)}
.promonote{font-size:14px;background:var(--ok-soft);color:var(--ok);padding:8px 10px;border-radius:var(--r-sm)}
@media (max-width:860px){.app-head{grid-template-columns:1fr}}

.rows{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.row{display:grid;grid-template-columns:1fr auto;gap:6px 18px;padding:16px 20px;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row > div{min-width:0}
.row h3{font-family:var(--body);font-weight:800;font-size:1.08rem;letter-spacing:0}
.row h3 a{color:var(--ink);text-decoration-color:var(--line);text-underline-offset:3px}
.row p{color:var(--muted);font-size:15px;margin-top:3px;max-width:68ch}
.row .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.tag{font-size:12.5px;padding:2px 9px;border-radius:999px;background:var(--sunk);border:1px solid var(--line);color:var(--muted)}
.row-side{display:grid;gap:8px;justify-items:end;align-content:start}
.safe{font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.safe.est{background:var(--ok-soft);color:var(--ok)}
.safe.ok{background:var(--royal-soft);color:var(--royal)}
.safe.alpha{background:var(--warn-soft);color:var(--warn)}
.zero{font-family:var(--display);font-weight:700;color:var(--ok);font-size:1.05rem}
@media (max-width:600px){.row{grid-template-columns:1fr}.row-side{justify-items:start;grid-auto-flow:column;justify-content:start;align-items:center}}

.share{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:14px}
.share > span{font-weight:700;font-size:14px;margin-right:4px}
.sh{font:inherit;font-size:13.5px;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;cursor:pointer}
.sh:hover{border-color:var(--royal);color:var(--royal)}

/* stack dashboard */
.stack-top{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px;display:grid;gap:2px}
.kpi .v{font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-.03em}
.kpi .l{font-size:14px;color:var(--muted)}
.kpi.charge .v{color:var(--charge)} .kpi.gold{background:var(--gold-soft);border-color:transparent} .kpi.gold .v{color:var(--gold-ink)}
@media (max-width:760px){.stack-top{grid-template-columns:1fr 1fr}}
.stack-grid{display:grid;grid-template-columns:1fr 360px;gap:16px;align-items:start;margin-top:16px}
@media (max-width:900px){.stack-grid{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;display:grid;gap:14px;min-width:0}
.panel-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.sub{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.sub:first-of-type{border-top:0}
.sub .ini{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-family:var(--display);font-weight:700;background:var(--royal-soft);color:var(--royal)}
.sub.trial .ini{background:var(--warn-soft);color:var(--warn)}
.sub.cancelled .ini{background:var(--ok-soft);color:var(--ok)}
.sub .nm{font-weight:800;min-width:0}
.sub .meta{font-size:13.5px;color:var(--muted)}
.sub .amt{text-align:right;font-weight:800}
.sub .amt small{display:block;font-weight:500;color:var(--muted);font-size:12.5px}
.sub-actions{grid-column:2 / -1;display:flex;flex-wrap:wrap;gap:6px}
.lk{font:inherit;font-size:13.5px;font-weight:600;padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:var(--sunk);color:var(--ink);cursor:pointer;text-decoration:none}
.lk:hover{border-color:var(--royal)}
.lk.go{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.lk.del{color:var(--charge)}
.meter{height:7px;border-radius:999px;background:var(--sunk);overflow:hidden;margin-top:6px}
.meter i{display:block;height:100%;background:var(--warn);border-radius:inherit}
.empty{padding:22px;border:1.5px dashed var(--line);border-radius:var(--r-md);text-align:center;color:var(--muted);display:grid;gap:10px;justify-items:center}
form.add{display:grid;gap:10px}
.fld{display:grid;gap:5px}
.fld label{font-weight:700;font-size:14px}
.fld input,.fld select,.fld textarea{font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--sunk);color:var(--ink);min-width:0;width:100%}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seg{display:flex;background:var(--sunk);border:1px solid var(--line);border-radius:999px;padding:3px}
.seg button{flex:1;font:inherit;font-weight:700;font-size:14px;border:0;background:transparent;color:var(--muted);padding:7px;border-radius:999px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(20,26,58,.18)}
.suggest-swap{font-size:14px;background:var(--ok-soft);color:var(--ok);padding:8px 10px;border-radius:var(--r-sm)}
.suggest-swap a{color:inherit;font-weight:700}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:999px;font-weight:700;z-index:50}

/* makers */
.pkgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.pkg{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:18px;display:grid;gap:10px;align-content:start}
.pkg.star{border:2px solid var(--royal)}
.pkg .pr{font-family:var(--display);font-weight:800;font-size:1.7rem;letter-spacing:-.03em}
.pkg .pr small{font-family:var(--body);font-size:14px;color:var(--muted);font-weight:600}
.pkg ul{margin:0;padding-left:18px;display:grid;gap:5px;color:var(--muted);font-size:15px}
.badge-demo{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.code{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:12.5px;background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;overflow-x:auto;white-space:pre-wrap;word-break:break-all;margin:0}

/* journey + misc */
.log{display:grid;gap:12px}
.day{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px}
.day-h{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
.day ul{margin:10px 0 0;padding-left:18px;display:grid;gap:5px}
.day time{color:var(--muted);font-size:14px}
.prose{max-width:68ch;display:grid;gap:12px}
.prose ul{margin:0;padding-left:20px;display:grid;gap:6px}
form.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;display:grid;gap:10px;max-width:620px}

footer{margin-top:40px;border-top:1px solid var(--line);padding-block:26px 40px;color:var(--muted);font-size:14px;display:grid;gap:10px}
footer a{color:var(--muted)}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.foot-cols b{display:block;color:var(--ink);margin-bottom:6px}
.foot-cols a{display:block;padding:2px 0;text-decoration:none}
.foot-cols a:hover{color:var(--royal)}

/* embed widget */
body.embed{background:var(--surface)}
.ew{display:grid;font-size:14px}
.ew-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;padding:12px 14px;border-bottom:1px solid var(--line);font-weight:700}
.ew-l{list-style:none;margin:0;padding:0}
.ew-l li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.ew-l a{color:var(--ink);font-weight:700}
.ew-f{padding:10px 14px;font-size:13px;font-weight:700;color:var(--royal);text-decoration:none}
@media (prefers-reduced-motion:no-preference){.tally-num{transition:color .2s}.bump{animation:bump .35s ease}@keyframes bump{50%{transform:scale(1.06)}}}