/* Pocket's own look, on top of base.css: a tool catalogue. Ruled paper, ink hairlines, part numbers, one red.
   Nothing glows, nothing has a shadow, and the only thing that moves by itself is the knife opening once. */

/* ---------- paper and type ---------- */
body { font-weight: 450; }
h1, h2, .display { font-stretch: 112%; }
h1.display { font-size: clamp(46px, 7.4vw, 112px); line-height: 0.9; }
h3, .h3 { font-weight: 700; font-stretch: 105%; }
.kicker { color: var(--ink); font-weight: 500; }
.kicker-dot { border-radius: 2px; transform: rotate(45deg); width: 7px; height: 7px; }
.lede b { color: var(--ink); font-weight: 700; }
.up { color: var(--good); } .down { color: var(--bad); }
.no { font: 600 12px/1 var(--font-mono); letter-spacing: 0.08em; color: var(--muted); }

/* ---------- header ---------- */
#top { background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); border-bottom: 1.5px solid var(--ink); }
.top-bar { gap: 22px; }
.brand { gap: 9px; color: var(--ink); }
.brand .word { margin-top: 5px; }
.nav { gap: 0; }
.nav a { position: relative; padding: 8px 11px; border-radius: 0; font-weight: 600; font-size: 15px; }
.nav a:hover, .nav a[aria-current] { background: none; color: var(--ink); }
.nav a[aria-current]::after, .nav a:hover::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 1px; height: 3px; background: var(--accent); }
.nav a:hover:not([aria-current])::after { background: var(--line-2); }
.demo-strip { background: var(--ink); color: #e9e1d0; font: 500 12.5px/1.4 var(--font-mono); }
.demo-strip b { color: #ffc94a; }

/* ---------- buttons: the handle. A pill with a pivot rivet on the primary ---------- */
.btn { border: 1.5px solid var(--ink); background: var(--surface); font-weight: 700; }
.btn:hover { background: var(--bg-2); border-color: var(--ink); }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--ink); }
.btn.primary::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--on-accent); box-shadow: 0 0 0 1.5px var(--ink); margin-right: 2px; }
.btn.primary:hover { background: var(--accent-2); filter: none; }
.btn[disabled] { background: var(--bg-2); color: var(--muted); border-color: var(--line-2); opacity: 1; }
.btn[disabled]::before { display: none; }
.icon-btn:hover { background: var(--bg-2); }
.link-arrow { font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }

/* ---------- chips, segmented ---------- */
.chip { border-radius: 3px; height: 24px; padding: 0 8px; background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-2); font-weight: 500; }
.chip.done { color: var(--good); border-color: currentColor; }
.chip.demo { color: var(--warn); border-color: currentColor; border-style: dashed; }
.chip.red { color: var(--accent); border-color: currentColor; }
.chip.solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.seg { border: 1.5px solid var(--ink); background: var(--surface); padding: 3px; }
.seg button { font-weight: 600; }
.chips button { border: 1px solid var(--line-2); border-radius: 3px; font: 500 13px var(--font-mono); height: 32px; }
.chips button[aria-pressed="true"] { border-color: var(--ink); }
.ca { border: 1.5px dashed var(--ink); background: var(--surface); border-radius: var(--r); }
.ca.small { border-width: 1px; border-color: var(--line-2); border-radius: 3px; background: none; }
.banner { border: 1.5px solid var(--ink); }
.banner.good { border-color: var(--good); background: color-mix(in srgb, var(--good) 8%, var(--surface)); }

/* ---------- cards ---------- */
.card, .coin-card, .step, .faq details, .coin-stats .stat { border: 1px solid var(--line-2); box-shadow: none; }
a.coin-card:hover { transform: translateY(-2px); border-color: var(--ink); }
.coin-art { border-radius: 50%; }
.coin-art.drawn { background: var(--tok, var(--ink)); color: #fff7ea; font: 800 16px/1 var(--font-display); font-stretch: 100%; letter-spacing: -0.02em; box-shadow: inset 0 0 0 2px rgba(255, 247, 234, 0.55), inset 0 0 0 3.5px var(--tok, var(--ink)), inset 0 0 0 4.5px rgba(255, 247, 234, 0.25); }
.hosts { display: inline-flex; align-items: center; }
.hosts .coin-art { margin-right: -7px; outline: 2px solid var(--surface); }
.hosts-line { display: flex; align-items: center; gap: 16px; font-size: 13.5px; color: var(--ink-2); min-height: 26px; }
.bar { background: var(--surface-2); border-radius: 0; height: 5px; }
.skeleton .sk { background: linear-gradient(90deg, var(--surface-2), var(--bg-2), var(--surface-2)); background-size: 200% 100%; }
.input, .prefix, .drop { background: var(--surface); border-color: var(--line-2); }
.input:focus, .prefix:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.modal-veil { background: rgba(26, 22, 19, 0.5); backdrop-filter: none; }
.modal-panel { border: 1.5px solid var(--ink); }
.menu { background: var(--surface); border: 1.5px solid var(--ink); }
.menu-item:hover, .wallet-row:hover:not([disabled]) { background: var(--bg-2); }
.wallet-row { background: var(--surface); }
.toast { border-radius: 4px; font-family: var(--font-mono); font-size: 13px; }
.live-dot { background: var(--good); }
.flow-steps li.done .flow-mark { color: #fff; }

/* ---------- the knife ---------- */
.knife { width: 100%; height: auto; overflow: visible; }
.k-tool path, .k-tool circle { fill: var(--steel); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.k-tool .k-detail { fill: none; stroke: var(--steel-2); stroke-width: 2; stroke-linecap: round; }
.k-tool .k-dot { fill: var(--ink); stroke: none; }
.k-tool .k-lens { fill: var(--glass); }
.k-tool .k-glint { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; }
.k-handle { fill: var(--accent); stroke: var(--ink); stroke-width: 2.5; }
.k-shine { stroke: rgba(255, 255, 255, 0.34); stroke-width: 5; stroke-linecap: round; fill: none; }
.k-emblem { fill: var(--on-accent); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.k-stitch { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 3 2.6; }
.k-rivet { fill: var(--steel); stroke: var(--ink); stroke-width: 2.5; }
.k-slot { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.k-badge { fill: var(--surface); stroke: var(--ink); stroke-width: 2; transition: fill var(--t-fast) var(--ease); }
.k-no { font: 600 12px var(--font-mono); fill: var(--ink); }
.k-name { font: 800 19px var(--font-display); font-stretch: 112%; letter-spacing: -0.02em; fill: var(--ink); }
.k-sub { font: 500 12px var(--font-mono); fill: var(--muted); }
.k-click { cursor: pointer; }
.k-label:focus-visible { outline: none; }
.k-label:focus-visible .k-badge { stroke: var(--accent); stroke-width: 3.5; }
.k-label.is-hot .k-badge { fill: var(--accent); }
.k-label.is-hot .k-no { fill: var(--on-accent); }
.k-label.is-hot .k-name { fill: var(--accent); }

/* ---------- the plate: a catalogue figure, with crop marks at its corners ---------- */
.plate { position: relative; border: 1.5px solid var(--ink); background:
  linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 28px,
  linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 28px 100%, var(--surface);
  border-radius: 2px; padding: clamp(14px, 3vw, 34px) clamp(8px, 2vw, 24px) 0; }
.plate::before, .plate::after { content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none; }
.plate::before { left: -10px; top: -10px; border-left: 1.5px solid var(--ink); border-top: 1.5px solid var(--ink); }
.plate::after { right: -10px; bottom: -10px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.fig { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: clamp(8px, 2vw, 18px) calc(-1 * clamp(8px, 2vw, 24px)) 0; padding: 9px 14px; border-top: 1.5px solid var(--ink); background: var(--surface); font: 500 12px/1.4 var(--font-mono); color: var(--ink-2); letter-spacing: 0.02em; }

/* ---------- home ---------- */
.hero2 { padding-top: clamp(28px, 4.4vw, 56px); display: grid; gap: clamp(20px, 3vw, 34px); }
.hero-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: end; }
.hero-top .kicker { margin-bottom: 18px; }
.hero-side { display: grid; gap: 20px; justify-items: start; padding-bottom: 6px; }
.hero-under { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); align-items: stretch; }
.check { display: grid; gap: 9px; padding: 16px; border: 1.5px solid var(--ink); border-radius: var(--r); background: var(--surface); }
.check-row { display: flex; gap: 8px; flex-wrap: wrap; }
.check-row .input { flex: 1 1 220px; height: 44px; font-family: var(--font-mono); font-size: 15px; }
.hero-under .ca { margin: 0; align-content: center; }

.tool-index { border-top: 1.5px solid var(--ink); margin-top: 26px; }
.tool-row { display: grid; grid-template-columns: 54px 150px minmax(0, 1.1fr) minmax(0, 1.6fr) 150px 30px; gap: 18px; align-items: center; padding: 20px 6px; border-bottom: 1px solid var(--line-2); transition: background var(--t-fast) var(--ease), padding var(--t) var(--ease); }
.tool-row:hover { background: var(--surface); padding-left: 14px; }
.tool-row:hover .tool-name, .tool-row:hover .tool-go { color: var(--accent); }
.tool-name { font: 800 30px/1 var(--font-display); font-stretch: 112%; letter-spacing: -0.03em; }
.tool-does { font-weight: 700; font-size: 17px; }
.tool-go { justify-self: end; }
.tool-cost { justify-self: start; }

.steps4 { display: grid; grid-template-columns: repeat(4, 1fr); border: 1.5px solid var(--ink); background: var(--surface); margin-top: 26px; border-radius: 2px; }
.steps4 li { padding: 22px 20px 26px; border-left: 1px solid var(--line-2); display: grid; gap: 8px; align-content: start; }
.steps4 li:first-child { border-left: 0; }
.steps4 .step-n { font: 800 44px/1 var(--font-display); font-stretch: 112%; letter-spacing: -0.04em; color: var(--accent); }

.feed-row { grid-template-columns: 74px 84px 1fr auto 70px; border-bottom: 1px solid var(--line); }
.feed-tool { justify-self: start; text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; }
.band { border: 1.5px solid var(--ink); background: var(--accent); color: var(--on-accent); padding: clamp(28px, 5vw, 56px); margin-top: clamp(56px, 8vw, 104px); border-radius: 2px; grid-template-columns: 1fr auto; align-items: center; }
.band .btn { background: var(--on-accent); color: var(--ink); }
.band .btn::before { background: var(--accent); }
.band .btn:hover { background: #fff; }
.band h2 { font-size: clamp(34px, 5vw, 68px); }

/* ---------- a tool's page head: its number, its claim, and the knife with only its tool open ---------- */
.tool-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding-top: clamp(28px, 4.4vw, 56px); }
.tool-head h1 { font-size: clamp(40px, 5.6vw, 80px); line-height: 0.94; }
.tool-head .lede { margin-top: 18px; }
.tool-head .ctas { margin-top: 24px; }
.tool-head .plate { padding-top: 10px; }
.strip { display: flex; flex-wrap: wrap; border: 1.5px solid var(--ink); background: var(--surface); margin-top: 28px; border-radius: 2px; }
.strip .stat { flex: 1 1 150px; padding: 14px 18px; border-left: 1px solid var(--line-2); }
.strip .stat:first-child { border-left: 0; }
.strip .stat-value { font: 800 26px/1.1 var(--font-display); font-stretch: 108%; letter-spacing: -0.02em; }

/* ---------- tables that are really lists: lots, offers, the roster, results ---------- */
.rows { border-top: 1.5px solid var(--ink); }
.rowx { display: grid; gap: 16px; align-items: center; padding: 16px 6px; border-bottom: 1px solid var(--line-2); }
.rowx .who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rowx .who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rowx .cell { display: grid; gap: 1px; }
.rowx .cell .num { font-size: 16px; font-weight: 500; }
.rows-head { display: grid; gap: 16px; padding: 8px 6px; }
.lots .rowx, .rows-head.lots { grid-template-columns: 64px minmax(0, 1.6fr) 1fr 1fr 1fr 110px; }
.offers .rowx, .rows-head.offers { grid-template-columns: 64px minmax(0, 1.5fr) 1fr 1fr 1fr 110px; }
.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.agent { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); transition: border-color var(--t) var(--ease), transform var(--t) var(--ease); }
a.agent:hover { border-color: var(--ink); transform: translateY(-2px); }
.agent-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.agent-nums > div { display: grid; gap: 2px; }
.tape .feed-row { grid-template-columns: 70px 52px 1fr auto; }
.side-buy { color: var(--good); } .side-sell { color: var(--ink); }
.two-pane { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.pane-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }

/* ---------- Loupe and Pick ---------- */
.ask { display: grid; gap: 10px; padding: 18px; border: 1.5px solid var(--ink); background: var(--surface); border-radius: var(--r); margin-top: 28px; }
.ask-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ask-row .input { flex: 1 1 260px; height: 52px; font-family: var(--font-mono); }
.verdict { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; padding: 24px; border: 1.5px solid var(--ink); background: var(--surface); border-radius: 2px; }
.stamp { display: grid; place-items: center; text-align: center; min-width: 190px; padding: 16px 20px; border: 4px double currentColor; border-radius: 6px; transform: rotate(-4deg); font: 800 30px/1 var(--font-display); font-stretch: 112%; letter-spacing: -0.01em; text-transform: uppercase; color: var(--ink); }
.stamp small { display: block; margin-top: 8px; font: 500 11px var(--font-mono); letter-spacing: 0.1em; }
.stamp.good { color: var(--good); } .stamp.bad { color: var(--accent); } .stamp.mid { color: var(--warn); }
.stamp.land { animation: stamp 420ms var(--ease) both; }
@keyframes stamp { from { opacity: 0; transform: rotate(-4deg) scale(1.5); } 70% { opacity: 1; transform: rotate(-4deg) scale(0.97); } }
.score { font: 800 64px/0.9 var(--font-display); font-stretch: 112%; letter-spacing: -0.04em; }
.scale { position: relative; height: 10px; margin-top: 14px; background: linear-gradient(90deg, var(--accent) 0 30%, var(--warn) 30% 55%, var(--good) 55%); border: 1px solid var(--ink); }
.scale i { position: absolute; top: -7px; width: 3px; height: 22px; background: var(--ink); transform: translateX(-1px); }
.scale-ends { display: flex; justify-content: space-between; margin-top: 6px; }
.checks { border-top: 1.5px solid var(--ink); margin-top: 22px; }
.check-line { display: grid; grid-template-columns: 76px minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 16px; align-items: baseline; padding: 13px 6px; border-bottom: 1px solid var(--line-2); }
.state { font: 600 11px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.state.pass { color: var(--good); } .state.warn { color: var(--warn); } .state.fail { color: var(--accent); } .state.nodata { color: var(--muted); }
.picks .rowx, .rows-head.picks { grid-template-columns: 44px minmax(0, 1.4fr) 1fr 1fr 1fr 120px; }
.picks .rowx.original { background: var(--surface); border: 1.5px solid var(--ink); border-radius: 2px; padding: 20px 14px; margin: 10px 0; }
.recent .rowx { grid-template-columns: minmax(0, 1fr) auto auto; padding: 12px 6px; cursor: pointer; background: none; border-width: 0 0 1px; border-color: var(--line-2); width: 100%; text-align: left; font: inherit; color: inherit; }
.recent .rowx:hover { background: var(--surface); }

/* ---------- launch: where the fees go ---------- */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.mode { display: grid; gap: 6px; align-content: start; text-align: left; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); cursor: pointer; }
.mode:hover { border-color: var(--ink); }
.mode[aria-pressed="true"] { border: 1.5px solid var(--ink); background: var(--bg); box-shadow: inset 0 4px 0 var(--accent); }
.mode p { font-size: 13.5px; color: var(--ink-2); }
.host-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.host { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 6px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface); cursor: pointer; font: 500 13px var(--font-mono); }
.host[aria-pressed="true"] { border: 1.5px solid var(--ink); background: var(--ink); color: var(--bg); }
.split { border: 1.5px solid var(--ink); border-radius: 2px; height: 38px; }
.split span { background: var(--surface); border-left: 1.5px solid var(--ink); font-weight: 500; overflow: hidden; white-space: nowrap; padding: 0 6px; }
.split span:first-child { border-left: 0; background: var(--accent); color: var(--on-accent); }
.step-title .step-n { border: 1.5px solid var(--ink); border-radius: 3px; font-weight: 600; }
.notes .icon { color: var(--good); }

/* ---------- how, 404, footer ---------- */
.risks { display: grid; gap: 10px; margin-top: 18px; max-width: 760px; }
.risks li { padding-left: 18px; position: relative; color: var(--ink-2); }
.risks li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 2px; background: var(--accent); }
.lost { display: grid; justify-items: center; gap: 14px; text-align: center; padding-top: clamp(40px, 7vw, 90px); }
.lost .knife { max-width: 620px; }
#foot { border-top: 1.5px solid var(--ink); background: var(--bg-2); }
.foot { grid-template-columns: 1.2fr 1fr; }
.foot-cols { display: grid; grid-template-columns: repeat(3, auto); gap: 12px 44px; justify-content: end; align-items: start; }
.foot-col { display: grid; gap: 8px; font-size: 14.5px; }
.foot-col a:hover { color: var(--accent); }
.foot-base { border-top: 1px solid var(--line-2); }

/* ---------- phones ---------- */
@media (max-width: 1080px) {
  .nav a { padding: 8px 7px; font-size: 14px; }
  .top-actions .ca { display: none; }
  .tool-row { grid-template-columns: 44px 130px minmax(0, 1fr) 120px 26px; }
  .tool-row .tool-text { display: none; }
}
@media (max-width: 860px) {
  .hero-top, .hero-under, .tool-head, .two-pane { grid-template-columns: 1fr; }
  .tool-head .plate { order: -1; }
  .knife .k-label { display: none; }
  .steps4 { grid-template-columns: 1fr 1fr; }
  .steps4 li:nth-child(3) { border-left: 0; }
  .steps4 li:nth-child(n+3) { border-top: 1px solid var(--line-2); }
  .tool-row { grid-template-columns: 34px minmax(0, 1fr) 22px; gap: 4px 12px; padding: 16px 2px; }
  .tool-row .tool-name { font-size: 26px; }
  .tool-row .tool-does { grid-column: 2; font-size: 15px; font-weight: 500; color: var(--ink-2); }
  .tool-row .tool-cost { display: none; }
  .tool-row .tool-go { grid-row: 1; grid-column: 3; }
  .tool-row .no { grid-row: 1; }
  .tabbar { border: 1.5px solid var(--ink); background: var(--surface); backdrop-filter: none; }
  .band { grid-template-columns: 1fr; }
  .feed-row { grid-template-columns: 62px 1fr 56px; }
  .feed-row .feed-sym { display: none; }
  .tape .feed-row { grid-template-columns: 52px 46px 1fr auto; }
  .lots .rowx, .offers .rowx, .picks .rowx { grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 16px 2px; }
  .lots .rowx .who, .offers .rowx .who, .picks .rowx .who { grid-column: 1 / -1; }
  .rowx > .no { display: none; }
  .rowx .btn { grid-column: 1 / -1; }
  .rows-head { display: none; }
  .verdict { grid-template-columns: 1fr; justify-items: start; }
  .check-line { grid-template-columns: 64px 1fr; }
  .check-line .found { grid-column: 2; }
  .modes { grid-template-columns: 1fr; }
  .foot-cols { justify-content: start; gap: 12px 32px; }
  main { padding-bottom: 150px; }
}
@media (max-width: 560px) {
  .steps4 { grid-template-columns: 1fr; }
  .steps4 li { border-left: 0; border-top: 1px solid var(--line-2); }
  .steps4 li:first-child { border-top: 0; }
  .check-row .btn, .ask-row .btn { flex: 1 1 120px; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
}
.rowx > .chip { justify-self: start; }
.rows-head { border: 0; }
h1.display { font-size: clamp(46px, 6.3vw, 94px); }
h1.display span { white-space: nowrap; }
.hero2 .plate .knife { display: block; max-width: 1020px; margin-inline: auto; }