/* =====================================================================
   QUIET CONFIDENCE. Loaded after style.css.
   Bricolage Grotesque 600 · soft blue tint · cobalt is the only accent ·
   one yellow per view · no shadows, only 1 px hairlines ·
   one spacing scale (4 8 12 16 24 32 48 64 96) · 96/64 section rhythm.
   Tokens and rules: DESIGN.md.
   ===================================================================== */
:root {
  /* colour: paper, ink, one cobalt accent, one yellow sticker */
  --paper: #fafaf7; --card: #ffffff; --sunk: #f1f1ec; --tint: #eef0fa;
  --ink: #1a1b22; --ink-2: #555764; --muted: #666873; --line: #e8e8e2; --line-2: #d6d6cf;
  --cobalt: #3443b4; --cobalt-2: #2a378f; --cobalt-soft: #e4e7f7;
  --brand: #3443b4; --brand-2: #2a378f; --brand-soft: #e4e7f7;
  --sun: #ffe38a; --on-ink: #ffffff;
  --warn: #8a5a00; --warn-soft: #fff4d6; --bad: #c8381f; --bad-soft: #fbe6e1;

  /* spacing: only these steps. 4 8 12 16 24 32 48 64 96 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px;

  /* layout */
  --container: 1180px;
  --gutter: 24px;
  --gutter-sm: 16px;
  --sec: var(--sp-24);          /* section rhythm, desktop */
  --sec-sm: var(--sp-16);       /* section rhythm, mobile */

  /* type: heading scale, body, meta */
  --fs-display: clamp(40px, 5.1vw, 72px);
  --fs-h2: clamp(32px, 3.8vw, 48px);
  --fs-body: 17px;
  --fs-meta: 13px;
  --lh-display: 1.05;
  --lh-body: 1.6;

  /* shape */
  --hair: 1px solid var(--line);
  --hair-2: 1px solid var(--line-2);
  --r-card: 20px; --r-ctl: 12px; --r-photo: 16px; --r-pill: 999px;

  /* controls */
  --btn-h: 44px; --btn-h-sm: 40px; --btn-h-lg: 48px;
  --field-h: 44px;
  --form-gap: var(--sp-4);
  --field-gap: var(--sp-2);

  /* cards */
  --pad-card: var(--sp-6);      /* 24 */
  --pad-card-lg: 28px;
  --pad-card-xl: var(--sp-8);   /* 32 */
  --head-lead: var(--sp-4);     /* headline → lead */

  /* no shadows on the public surface */
  --shadow: none;
  --shadow-lg: none;

  --serif: "Bricolage Grotesque", system-ui, sans-serif;
  --sans: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); font-variation-settings: "opsz" 14; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
p { text-wrap: pretty; }
.display { font-family: var(--sans); font-weight: 600; letter-spacing: -.035em; line-height: var(--lh-display); font-variation-settings: "opsz" 96; }
.label { font-weight: 500; letter-spacing: .06em; color: var(--muted); font-size: var(--fs-meta); }
.muted { color: var(--muted); }
::selection { background: var(--cobalt-soft); }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }

/* controls: one set of measurements — 40 / 44 / 48 high */
.btn { height: var(--btn-h); padding: 0 var(--sp-6); border-radius: var(--r-pill);
  font-weight: 600; letter-spacing: -.005em; line-height: 1;
  transition: background .2s, color .2s, border-color .2s, transform .2s; }
.btn:hover { transform: none; }
.btn.sm { height: var(--btn-h-sm); padding: 0 var(--sp-4); font-size: 14px; }
.btn.lg { height: var(--btn-h-lg); padding: 0 var(--sp-6); font-size: 16px; }
.btn.brand, .landing .btn:not(.quiet):not(.ghost) { background: var(--cobalt); color: #fff; border-color: transparent; box-shadow: none; }
.btn.brand:hover, .landing .btn:not(.quiet):not(.ghost):hover { background: var(--cobalt-2); box-shadow: none; transform: none; }
.btn.quiet { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn.quiet:hover { border-color: var(--ink); background: transparent; }

/* fields: 44 high, 8 from label, 16 between fields */
input, textarea, select { border-radius: var(--r-ctl); border-color: var(--line-2); }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select { height: var(--field-h); padding: 0 var(--sp-3); }
textarea { padding: var(--sp-2) var(--sp-3); }
input:focus, textarea:focus, select:focus { border-color: var(--cobalt); box-shadow: 0 0 0 4px var(--cobalt-soft); }
.field { gap: var(--field-gap); font-weight: 500; }

/* surfaces: hairline, never a shadow */
.card, .stepbox, .plan, .mock-win, .quota { border: var(--hair); box-shadow: none; border-radius: var(--r-card); }
.dropzone { border-radius: var(--r-card); }
.tag { height: 24px; font-weight: 500; font-size: 12.5px; }
.tag::before { display: none; }
.tag.listed { background: var(--cobalt-soft); color: var(--cobalt); }
.note { border-radius: var(--r-ctl); }

/* header */
.wrap { max-width: var(--container); padding: 0 var(--gutter); }
.top { background: color-mix(in srgb, var(--paper) 82%, transparent); }
.top .wrap { height: 72px; }
.top.scrolled { border-bottom-color: var(--line); }
.logo { font-weight: 600; font-size: 20px; letter-spacing: -.025em; }
.top nav { gap: var(--sp-1); }
.top nav a { font-weight: 500; color: var(--ink-2); }
.top nav a:hover { background: var(--sunk); color: var(--ink); }

/* hero: a soft blue field, headline across, text and the live demo below */
.hero { background: linear-gradient(180deg, var(--paper) 0%, var(--tint) 100%); padding: var(--sp-12) 0 var(--sec); }
.hero h1 { font-size: var(--fs-display); line-height: var(--lh-display); color: var(--ink); }
.hero h1 em { font-style: normal; color: var(--cobalt); background: none; animation: none; }
.hero .lead { font-size: 19px; color: var(--ink-2); max-width: 27em; line-height: 1.55; }
.hero .cta-note { color: var(--muted); font-size: 14px; }
.stats { border-top: var(--hair-2); gap: var(--sp-8); margin-top: var(--sp-8); padding-top: var(--sp-6); }
.stats b { font-family: var(--sans); font-weight: 600; font-size: 30px; letter-spacing: -.03em; }
.stats span { color: var(--muted); font-size: 14px; }
.hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; column-gap: 80px; row-gap: 0; }
.hero .wrap > div:first-child { display: contents; }
.hero h1 { grid-column: 1 / -1; margin-bottom: var(--sp-8); max-width: 14em; }
.hero .lead { grid-column: 1; margin: 0; }
.hero .cta-row { grid-column: 1; margin-top: var(--sp-8); }
.hero .cta-note, .hero .stats { grid-column: 1; }
.hero .mock { grid-column: 2; grid-row: 2 / span 4; min-width: 0; }

/* the live demo */
.mock-win { border: var(--hair); border-radius: var(--r-card); box-shadow: none; }
.mock-bar { border-bottom: var(--hair); }
.mock-bar i { background: var(--line); }
.mock-body { grid-template-columns: 128px 32px minmax(0, 1fr); padding: var(--sp-6); gap: var(--sp-2); }
.mock-photo { border-radius: var(--r-photo); }
.mock-item { border: var(--hair); background: var(--paper); border-radius: var(--r-ctl); padding: var(--sp-3) var(--sp-3); }
.mock-item .mk { font-weight: 500; }
.mock-item .mk code { background: var(--card); font-weight: 500; }
.mock-item .t { font-weight: 600; font-size: 14.5px; }
.mock-fan { width: 32px; color: var(--cobalt); opacity: .55; }
.mock-meta b { font-weight: 600; }
/* the one playful element: a yellow sticker, no shadow */
.mock-price { top: -30px; right: -22px; bottom: auto; width: 112px; height: 112px; border-radius: 50%; background: var(--sun); color: var(--ink);
  display: grid; place-content: center; text-align: center; padding: 0; transform: rotate(8deg); box-shadow: none; }
.mock-price::before { display: none; }
.mock-price .label { color: #3f3714; font-size: 10px; letter-spacing: .05em; }
.mock-price b { font-weight: 600; font-size: 19px; line-height: 1.1; }
.demo-bar { margin-top: var(--sp-6); }
.demo-try { border: 1px dashed var(--line-2); background: var(--card); font-weight: 600; }
.demo-try:hover { border-color: var(--cobalt); color: var(--cobalt); }
.demo-cta { background: var(--card); border: var(--hair); border-radius: var(--r-ctl); box-shadow: none; }

/* sections: one rhythm — 96 desktop, 64 mobile */
.sec { padding: var(--sec) 0; }
.sec-head { margin-bottom: var(--sp-12); }
.sec-head h2, .final h2 { font-family: var(--sans); font-weight: 600; letter-spacing: -.03em; font-size: var(--fs-h2); line-height: var(--lh-display); }
.sec-head p { font-size: 18px; color: var(--ink-2); }
.logos { border-color: var(--line); padding: var(--sp-6) 0; }
.logos .label { color: var(--muted); }
.logos span.m { font-weight: 600; color: #a3a5ad; font-size: 16px; }
.steps { border: 0; background: transparent; gap: var(--sp-8); box-shadow: none; grid-template-columns: repeat(3, 1fr); border-radius: 0; overflow: visible; }
.step { border: 0 !important; background: transparent; padding: var(--sp-6) 0 0; border-top: var(--hair-2) !important; box-shadow: none; }
.step .n { font-family: var(--sans); font-weight: 500; color: var(--cobalt); font-size: 14px; letter-spacing: .06em; margin-bottom: var(--sp-4); width: auto; height: auto; border: 0; background: none; box-shadow: none; display: block; }
.step .n::before { content: "0"; }
.step h3 { font-weight: 600; font-size: 20px; }
.step p { color: var(--ink-2); }
.step .time { color: var(--muted); font-weight: 500; }
.plans { gap: var(--sp-4); }
.plan { padding: var(--pad-card-lg); }
.plan .price { font-family: var(--sans); font-weight: 600; letter-spacing: -.03em; font-size: 48px; }
.plan.featured { border: 1px solid var(--cobalt); box-shadow: none; transform: none; }
.plan .pop { background: var(--cobalt); font-weight: 500; }
.plan li svg { color: var(--cobalt); }
.faq summary { font-weight: 600; font-size: 18px; }
.faq details { border-color: var(--line); }
.final { padding: var(--sec) 0; border-top: 0; background: var(--tint); }
.final h2 { font-size: var(--fs-h2); }
.foot { background: var(--paper); }

/* soft reveal on scroll (set up by a tiny script on the landing page) */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
  .reveal.in { opacity: 1; transform: none; }
  .mock-item { animation: rise .6s cubic-bezier(.2,.7,.2,1) both; }
  .mock-item:nth-child(1) { animation-delay: .25s; } .mock-item:nth-child(2) { animation-delay: .4s; } .mock-item:nth-child(3) { animation-delay: .55s; }
  .mock-price { animation: rise .6s cubic-bezier(.2,.7,.2,1) .75s both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* app */
.side nav a { font-weight: 500; }
.side nav a.on { box-shadow: none; border: var(--hair); background: var(--card); }
.side nav a.on svg { color: var(--cobalt); }
.meter i { background: var(--cobalt); }
.bar-top h1 { font-weight: 600; font-size: 22px; }
.tile .ph { border: var(--hair); border-radius: var(--r-photo); }
.tile .tt { font-weight: 600; }
.stepbox > header h2 { font-weight: 600; }
.stepbox.done > header .num { background: var(--cobalt); }
.mchip { font-weight: 500; }
.mchip.on { border-color: var(--cobalt); box-shadow: none; }
.mchip.on .box { background: var(--cobalt); border-color: var(--cobalt); }
.price-big { font-family: var(--sans); font-weight: 600; letter-spacing: -.03em; }
.switch input:checked + span { background: var(--cobalt); }
.switch span::after { box-shadow: none; }
.seg button.on { box-shadow: none; border: var(--hair); }
.tile:hover .ph { box-shadow: none; }
.auth .art { background: var(--tint); color: var(--ink); }
.auth .art .label { color: var(--muted); }
.auth .art .mini div { background: var(--card); color: var(--ink); border: var(--hair); box-shadow: none; }
.auth .art .mini b { color: var(--ink-2); opacity: 1; }
.auth h1, .auth .art blockquote, .legal h1, .dropzone h2 { font-family: var(--sans); font-weight: 600; letter-spacing: -.03em; }
.dropzone .ic { background: var(--cobalt-soft); color: var(--cobalt); }
.calc-out tr.best td { background: var(--cobalt-soft); }
.fees-hero h1 { font-weight: 600; }
.grid > *, .flow > *, .filters > * { min-width: 0; }

@media (max-width: 960px) {
  :root { --sec: var(--sec-sm); }
  .hero { padding: var(--sp-8) 0 var(--sp-16); }
  .hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .hero .mock { grid-column: 1; grid-row: auto; margin-top: var(--sp-12); }
  .mock-price { right: 10px; top: -48px; width: 96px; height: 96px; }
  .mock-price b { font-size: 16px; }
  .steps { grid-template-columns: 1fr; gap: var(--sp-6); }
}
@media (max-width: 760px) {
  .wrap { padding: 0 var(--gutter-sm); }
  .hero h1 { font-size: 40px; }
  .stats { gap: 24px; }
  .stats b { font-size: 24px; }
  .mock-body { grid-template-columns: 84px 22px minmax(0, 1fr); gap: 8px; padding: 14px; }
  .mock-fan { width: 22px; }
  .logos .wrap { gap: 14px 22px; }
  .calc-out { table-layout: fixed; }
  .calc-out td, .calc-out th { padding: 10px 6px; overflow-wrap: anywhere; }
  .fee-table th:nth-child(4), .fee-table td:nth-child(4) { display: none; }
  .fees .card { max-width: 100%; }
  .fees-hero h1 { font-size: 40px; }
}
@media (max-width: 440px) { body:has(.fees) .top .lang-select { display: none; } }

/* real photo in the demo */
.mock-photo { overflow: hidden; background: var(--sunk); }
.mock-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* logo lockup (drawn wordmark, no font needed) */
.logo img.lockup { width: auto; height: 32px; display: block; }
.auth .logo img.lockup { height: 34px; }
.side .logo img { width: 30px; height: 30px; }

/* Marketplace pages: link row to the other marketplaces */
.mkt-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 14px; }
.mkt-links a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.mkt-links a:hover { color: var(--cobalt); border-color: var(--cobalt); }
.logos a.m { text-decoration: none; color: inherit; }
.logos a.m:hover { color: var(--cobalt); }

/* Items top bar: camera / many items / new item */
.bar-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.bulk-hint { text-align: center; margin-top: var(--sp-6); color: var(--muted); font-size: 15px; }
.bulk-hint a { color: var(--cobalt); }

/* Bulk mode: one row per photo */
.bulk { display: grid; gap: 10px; max-width: 760px; }
.brow { display: flex; align-items: center; gap: 16px; padding: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.brow.ok { border-color: var(--cobalt-soft); }
.bph { width: 64px; height: 64px; flex: none; border-radius: 12px; background: var(--sunk) center/cover no-repeat; }
.bt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.bulk > .brow { min-width: 0; }
.bt b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt b a { color: var(--ink); text-decoration: none; }
.bt b a:hover { color: var(--cobalt); }
.bt .spin { display: inline-block; vertical-align: -3px; }

@media (max-width: 640px) {
  .bar-top:has(.bar-actions) { flex-wrap: wrap; }
  .bar-actions { width: 100%; justify-content: stretch; }
  .bar-actions .btn { flex: 1; justify-content: center; }
}

/* Usage meter: label left, count right, same rhythm in the sidebar and on the plan page */
.qrow { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.qrow b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.quota .meter, .quota-card .meter { margin: 10px 0 12px; }
.quota-card { padding: var(--pad-card); margin-bottom: var(--sp-8); max-width: 440px; display: flex; flex-direction: column; }
.quota-card .qrow { font-size: 16px; line-height: 1.4; }
.quota-card .qrow b { font-weight: 600; }
.quota-card .small { margin: 0 0 6px !important; line-height: 1.4; }
.quota-card a { font-size: 15px; font-weight: 600; color: var(--cobalt); text-decoration: none; }
.quota-card a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Tradera publish form */
.trf { display: grid; gap: var(--form-gap); margin-top: var(--sp-2); container-type: inline-size; }
.trf h4 { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: var(--sp-4) 0 0; line-height: 1; }
.trf > h4:first-child { margin-top: 4px; }
.trf #tattr > h4 { margin-top: var(--sp-3); }
.trf #tattr { display: grid; gap: var(--form-gap); }
.trf #tattr:empty { display: none; }
.trf .field { display: grid; gap: var(--field-gap); }
.trf .field { margin: 0; }
.trgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.trgrid .field[hidden] { display: none; }
.trseg { display: flex; width: 100%; }
.trseg button { flex: 1; padding: 9px 12px; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--ink-2); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--cobalt); }
.trship { display: grid; gap: 8px; }
.trs { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 1.4fr) 96px; align-items: center; gap: var(--sp-3); padding: var(--sp-3); background: var(--sunk); border-radius: var(--r-ctl); }
.trs .check { color: var(--ink); font-weight: 500; }
.trs select, .trs input[type=number] { width: 100%; min-width: 0; }
.trs .cost { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
/* Narrow panel (side column or phone): carrier name on its own line, weight class and price below */
@container (max-width: 520px) {
  .trs { grid-template-columns: minmax(0, 1fr) 92px; row-gap: 8px; }
  .trs .check { grid-column: 1 / -1; }
  .trs > span:empty { display: none; }
}

/* Tradera shipping: weight once, carriers with Tradera's price */
.trship > .field { margin-bottom: 4px; }
.trs { grid-template-columns: minmax(0, 1fr) auto !important; }
.trs .check { grid-column: auto !important; }
.trs .price { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.trs.na { opacity: .5; }
.trs.na .price { font-weight: 500; color: var(--muted); }
.trs .cost input { width: 88px; }

/* Extension install page */
.legal .lead { font-size: 19px; line-height: 1.55; color: var(--ink-2); margin: 8px 0 24px; max-width: 620px; }
.ext-list { padding-left: 22px; display: grid; gap: 10px; line-height: 1.55; max-width: 620px; }
.ext-list li::marker { color: var(--cobalt); font-weight: 600; }

/* ---------- Spacing pass (2026-11-07) ---------- */
/* Legal and info pages: paragraphs need air between them */
.legal main p + p, .legal main p + ul, .legal main ul + p, .legal main p + ol, .legal main ol + p { margin-top: 14px; }
.legal main h1 + p { margin-top: 12px; }
/* Price sticker: small label sits just above the amount */
.mock-price .label { margin-bottom: 3px; }
/* Plan cards: name and its one-line description */
.plan h3 + .sub { margin-top: 6px; }
/* Thumb-sized tap targets on phones (at least 40 px) */
@media (pointer: coarse) {
  .btn.sm { min-height: 40px; }
  .seg button { min-height: 40px; }
  .thumb button[data-del] { width: 32px; height: 32px; opacity: 1; } /* no hover on phones, so always visible */
  .top .btn.sm { min-height: 40px; padding-inline: 16px; }
}

/* Tradera price hint under the price field */
.trprice { margin: -4px 0 0; padding: var(--sp-3); background: var(--cobalt-soft); border-radius: var(--r-ctl); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.trprice b { color: var(--ink); font-weight: 600; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--cobalt); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Anchor targets must clear the sticky header. */
.sec, .final { scroll-margin-top: 84px; }

/* ---------- Publishing matrix: what actually happens on each marketplace ---------- */
.pubgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pub { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  background: var(--card); border: var(--hair); border-radius: var(--r-ctl); }
.pub .nm { color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none; }
.pub .nm:hover { color: var(--cobalt); }
.pub .chip { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px; background: var(--sunk); color: var(--ink-2); white-space: nowrap; }
.pub.direct { border-color: var(--cobalt-soft); background: var(--tint); }
.pub.direct .chip { background: var(--cobalt); color: #fff; }
.pub.soon { border-style: dashed; }
.pub.soon .chip { background: transparent; border: 1px solid var(--line-2); color: var(--muted); }
.pubnote { margin-top: 16px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.pubnote a { color: var(--cobalt); font-weight: 600; text-decoration: none; }
.pubnote a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .pubgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pubgrid { grid-template-columns: 1fr; } .pub { padding: 12px 14px; } }

/* ---------- Real examples: photo + finished listings ---------- */
.how-note { max-width: 760px; margin-top: 32px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.how-note a { color: var(--cobalt); font-weight: 600; text-decoration: none; }
.how-note a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pricing-all { margin-top: 24px; text-align: center; color: var(--muted); font-size: 14px; }
.examples { display: grid; grid-template-columns: 1fr; max-width: 900px; }
.proofcard { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: 1fr;
  background: var(--card); border: var(--hair); border-radius: var(--r-card); overflow: hidden; box-shadow: none; }
.proofphoto { position: relative; background: var(--sunk); }
.proofphoto img { display: block; width: 100%; height: auto; }
.proofbadge { position: absolute; top: 14px; left: 14px; padding: 5px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: var(--ink-2); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; }
.prooflist { display: grid; gap: var(--sp-4); align-content: center; padding: var(--pad-card-lg); }
.proofrow { display: grid; gap: 4px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.proofrow:last-child { padding-bottom: 0; border-bottom: 0; }
.proofrow .mk { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.proofrow .mk code { font: inherit; color: var(--ink-2); }
.proofrow b { font-size: 17px; line-height: 1.35; letter-spacing: -.01em; }
.proofrow p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.proofrow .pr { font-size: 15px; font-weight: 600; color: var(--ink); }
@media (max-width: 820px) { .proofcard { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } }
@media (max-width: 520px) { .prooflist { padding: 18px; } .proofrow b { font-size: 16px; } }

/* ---------- Email verification banner ---------- */
.verifybar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  flex-wrap: wrap; padding: var(--sp-3) var(--sp-6); background: var(--warn-soft); color: var(--warn); font-size: 14px; font-weight: 500; }
.verifybar .btn { background: var(--card); color: var(--ink); border: 1px solid var(--line-2); }

/* ---------- Publish modes inside the app ---------- */
.sellmode { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); align-items: baseline; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-ctl); background: var(--sunk); margin-bottom: var(--sp-4); }
.sellmode b { font-size: 13px; font-weight: 600; }
.sellmode span { font-size: 13px; color: var(--ink-2); }
.sellmode.direct { background: var(--cobalt-soft); }
.sellmode.soon, .sellmode.off { background: transparent; border: 1px dashed var(--line-2); }
.tag.mode-direct { background: var(--cobalt-soft); color: var(--cobalt); }
.tag.mode-ext { background: var(--sunk); color: var(--ink-2); }
.tag.mode-soon, .tag.mode-off { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); }
.posted-row { flex-wrap: wrap; }
.row-actions { display: flex; align-items: center; gap: 12px; }
.lf-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bmeta { display: flex; align-items: center; gap: var(--sp-4); max-width: 760px; margin: 0 0 var(--sp-6); }
.bmeta .meter { flex: 1; margin: 0; height: 8px; }
.bmeta .btn { flex: none; }
.bdone { margin: 0 0 20px; }
.queuebar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-6); border-radius: var(--r-ctl); background: var(--cobalt-soft); }
.queuebar > span { font-size: 13px; font-weight: 600; color: var(--cobalt); }
.toast { display: flex; align-items: center; gap: 14px; }
.toast-action { border: 0; background: none; padding: 0; color: #fff; font: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 520px) { .sellmode { padding: 10px 12px; } .row-actions { gap: 8px; } }

/* ---------- 404 ---------- */
.nf-main { min-height: 70vh; padding: 48px 0 96px; }
.nf-main .lead { max-width: 520px; }
.nf-main .cta-row { margin-top: 8px; }

/* ---------- Hidden honeypot field (only bots fill it) ---------- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Mobile menu on the landing pages ---------- */
.mmenu { display: none; }
@media (max-width: 960px) {
  .mmenu { display: block; position: relative; }
  .mmenu > summary { list-style: none; cursor: pointer; width: 40px; height: 40px; display: grid; place-items: center;
    border-radius: var(--r-ctl); color: var(--ink); border: 1px solid var(--line); background: var(--card); }
  .mmenu > summary::-webkit-details-marker { display: none; }
  .mmenu[open] > summary { background: var(--sunk); }
  .mmenu-panel { position: fixed; left: 12px; right: 12px; top: 70px; z-index: 40;
    display: grid; gap: 2px; padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); }
  .mmenu-panel > a { text-decoration: none; color: var(--ink-2); font-size: 16px; font-weight: 500; padding: 12px 12px; border-radius: 10px; }
  .mmenu-panel > a:hover { background: var(--sunk); color: var(--ink); }
  .mmenu-langs { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 4px 4px; border-top: 1px solid var(--line); margin-top: 6px; }
  .mmenu-langs a { text-decoration: none; color: var(--ink-2); font-size: 13px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; }
  .mmenu-langs a[aria-current="true"] { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
}

/* ---------- Fee table and calculator: real cards on phones ---------- */
@media (max-width: 700px) {
  .fee-table, .calc-out { display: block; }
  .fee-table thead, .calc-out thead { display: none; }
  .fee-table tbody, .calc-out tbody { display: grid; gap: 12px; }
  .fee-table tr, .calc-out tr { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
  .fee-table td, .fee-table td:nth-child(4), .calc-out td, .calc-out td:nth-child(4) { display: grid; gap: 2px; padding: 0; border: 0; }
  .fee-table td::before, .calc-out td::before { content: attr(data-label); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .fee-table td:first-child, .calc-out td:first-child { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .fee-table td:first-child::before, .calc-out td:first-child::before { display: none; }
  .fee-table td:first-child b, .calc-out td:first-child { font-size: 17px; }
  .fee-table td a { font-size: 12px; }
  .calc-out tr.best { border-color: var(--cobalt); box-shadow: 0 0 0 1px var(--cobalt); }
  .calc-out tr.best td { background: none; }
  .calc-out td:nth-child(2) b { font-size: 20px; }
}

/* ---------- App: summary below the steps on phones, no repeated cover ---------- */
@media (max-width: 960px) {
  .summary { order: 0; }
  .summary .cover { display: none; }
}
.side .logo img.lockup { width: auto; height: 26px; }
.side .logo img.mark { display: none; width: 30px; height: 30px; }
@media (max-width: 760px) {
  .side .logo img.lockup { display: none; }
  .side .logo img.mark { display: block; }
  .side nav a { padding: 6px 9px; }
  .legal h1 { font-size: 34px; }
}
/* Signup consent line */
.consent { margin: -4px 0 0; font-size: 13px; line-height: 1.5; max-width: 34em; }
.consent a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Business page (/business) ---------- */
.biz-hero .wrap { grid-template-columns: minmax(0, 1fr); }
.biz-hero h1 { max-width: 15em; }
.wholist { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; max-width: 680px; }
.wholist li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); font-size: 17px; line-height: 1.5; }
.wholist li svg { flex: none; margin-top: 4px; color: var(--cobalt); }
.bizform { padding: 40px; max-width: 820px; }
.bizform form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bizform .field-wide, .bizform-foot { grid-column: 1 / -1; }
.bizform-foot { display: flex; align-items: center; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.bizform textarea { min-height: 88px; resize: vertical; }
@media (max-width: 760px) {
  .bizform { padding: 24px 20px; }
  .bizform form { grid-template-columns: 1fr; }
  .biz-hero h1 { font-size: 38px; }
}

/* [hidden] must win over the flex rules above (form success notes) */
.note[hidden], .demo-cta[hidden] { display: none !important; }

/* ============================================================
   B landing: cobalt hero, paper catalogue.
   Scoped to body.bp so the app and other pages are untouched.
   ============================================================ */
body.bp { background: var(--paper); }
body.bp .bhead { background: var(--cobalt); color: #fff; }
body.bp .bhead-in { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
  min-height: 72px; display: flex; align-items: center; gap: var(--sp-8); }
body.bp .bhead .logo img { height: 26px; }
body.bp .bhead nav { display: flex; gap: var(--sp-6); margin-left: auto; align-items: center; }
body.bp .bhead nav a { color: rgba(255,255,255,.84); text-decoration: none; font-size: 15px; }
body.bp .bhead nav a:hover { color: #fff; }
body.bp .bhead-right { display: flex; align-items: center; gap: var(--sp-4); }
body.bp .bhead .lang-select { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.28); border-radius: var(--r-pill); padding: 0 var(--sp-3); height: var(--btn-h-sm); font-size: var(--fs-meta); font-weight: 500; }
body.bp .bhead .lang-select option { color: #15171c; }
body.bp .blink { color: #fff; text-decoration: none; font-size: 15px; }
body.bp .blink:hover { text-decoration: underline; text-underline-offset: 4px; }
/* header action: white outline, never the yellow (double class beats .landing .btn) */
body.bp .bhead .btn.btn { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
body.bp .bhead .btn.btn:hover { background: rgba(255,255,255,.12); border-color: #fff; }

body.bp .bhero { background: var(--cobalt); color: #fff; padding: var(--sp-12) 0 var(--sec); }
body.bp .bwrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--sp-16); align-items: center; }
body.bp .beyebrow { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.74); }
body.bp .bh1 { font-size: clamp(34px, 3.9vw, 56px); line-height: 1.05; letter-spacing: -.045em; margin: 20px 0 24px; color: #fff; }
body.bp .bh1 em { font-style: normal; color: var(--sun); }
body.bp .blead { font-size: 20px; line-height: 1.5; color: rgba(255,255,255,.9); max-width: 29em; }
body.bp .bcta { display: flex; align-items: center; gap: var(--sp-6); margin-top: var(--sp-8); flex-wrap: wrap; }
/* the one yellow per view is the word in the H1; the action is white on cobalt */
body.bp .bcta .btn.btn { background: var(--sun); color: #1a1b22; border-color: var(--sun); }
body.bp .bcta .btn.btn:hover { background: #ffd75e; border-color: #ffd75e; }
body.bp .bnote { color: rgba(255,255,255,.74); font-size: 14px; }
body.bp .bvisual { position: relative; }
body.bp .bphoto { border-radius: var(--r-card); overflow: hidden; }
body.bp .bphoto img { width: 100%; height: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }

body.bp .bpaper { max-width: var(--container); margin: 0 auto; padding: var(--sec) var(--gutter) 0; }
body.bp .bsec { padding-bottom: var(--sec); }
body.bp .bh2 { font-size: clamp(28px, 2.9vw, 40px); letter-spacing: -.035em; line-height: 1.1; }
body.bp .bproof-head { max-width: 720px; margin-bottom: var(--sp-8); }
body.bp .bproof-head p { color: var(--ink-2); font-size: var(--fs-body); line-height: 1.55; margin-top: var(--head-lead); }
body.bp .bproof-note { margin-top: var(--sp-6); font-size: var(--fs-meta); color: var(--ink-2); max-width: 62ch; }
body.bp .bproof-tag { display: inline-flex; padding: var(--sp-1) 9px; margin-bottom: var(--sp-3); border-radius: var(--r-pill); background: var(--cobalt-soft); color: var(--cobalt); font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }

body.bp .bproof-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--sp-12); align-items: center; }
body.bp .bdemo-photo { border-radius: var(--r-card); overflow: hidden; background: var(--sunk) center/cover no-repeat; aspect-ratio: 4/3; }
body.bp [hidden] { display: none !important; }
body.bp .bdemo-photo img { width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
body.bp .bfound { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
body.bp .label { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
body.bp .bfound b { font-size: 15px; }
body.bp .bchip { display: inline-flex; padding: 3px 7px; border-radius: var(--r-pill); background: var(--sunk); color: var(--ink-2); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
body.bp .bchip.soft { background: var(--cobalt-soft); color: var(--cobalt); }
body.bp .brows { display: grid; }
body.bp .brow { display: grid; gap: 3px; padding: var(--sp-3) 0; border-top: var(--hair); }
body.bp .brow:last-child { border-bottom: var(--hair); }
body.bp .brow .mk { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
body.bp .brow .mk code { font: inherit; color: var(--ink-2); }
body.bp .brow .t { font-size: 15px; line-height: 1.35; font-weight: 600; }
body.bp .brow .p { font-size: var(--fs-meta); color: var(--ink-2); }
body.bp .bprice-line { display: flex; align-items: baseline; gap: var(--sp-2); margin-top: var(--sp-4); }
body.bp .bprice-line b { font-size: 17px; }
body.bp .bdemo-bar { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-6); flex-wrap: wrap; }
body.bp .bdemo-status { font-size: var(--fs-meta); color: var(--ink-2); }
body.bp .bdemo-cta { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); flex-wrap: wrap; }
body.bp .bdemo-cta b { font-size: 15px; }

body.bp .bplans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); align-items: stretch; }
body.bp .bplan { display: flex; flex-direction: column; background: var(--card); border: var(--hair); border-radius: var(--r-card); padding: var(--pad-card-lg); }
body.bp .bplan.featured { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
body.bp .bplan h3 { display: flex; align-items: center; gap: var(--sp-2); font-size: 18px; }
body.bp .bpop { background: rgba(255,255,255,.16); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-pill); }
body.bp .bamount { font-size: 44px; letter-spacing: -.04em; margin: var(--sp-4) 0 2px; }
body.bp .bper { color: var(--muted); font-size: var(--fs-meta); margin-bottom: var(--sp-6); }
body.bp .bplan ul { display: grid; gap: var(--sp-2); padding: 0; margin: 0 0 var(--sp-6); list-style: none; color: var(--ink-2); font-size: 16px; }
body.bp .bplan li::before { content: '✓'; color: var(--cobalt); margin-right: var(--sp-2); }
body.bp .bplan.featured .bper, body.bp .bplan.featured ul { color: rgba(255,255,255,.86); }
body.bp .bplan.featured li::before { color: #fff; }
body.bp .bplan-cta { margin-top: auto; display: flex; justify-content: center; align-items: center; min-height: var(--btn-h); padding: 0 var(--sp-4); border: var(--hair-2); border-radius: var(--r-pill); color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; }
body.bp .bplan-cta:hover { border-color: var(--cobalt); color: var(--cobalt); }
body.bp .bplan.featured .bplan-cta { background: #fff; border-color: #fff; color: var(--cobalt); }
body.bp .bplan.featured .bplan-cta:hover { background: var(--paper); border-color: var(--paper); }
body.bp .bplans-all { margin-top: var(--sp-4); font-size: 14px; color: var(--ink-2); }

body.bp .bfaq-head { margin-bottom: var(--sp-6); }
body.bp .bdetails { border-top: var(--hair); }
body.bp .bdetails details { border-bottom: var(--hair); }
body.bp .bdetails summary { padding: var(--sp-4) 0; cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: var(--sp-4); }
body.bp .bdetails summary::-webkit-details-marker { display: none; }
body.bp .bdetails summary::after { content: '+'; color: var(--cobalt); font-size: 20px; line-height: 1; font-weight: 400; }
body.bp .bdetails summary:hover { color: var(--cobalt); }
body.bp .bdetails details[open] summary::after { content: '–'; }
body.bp .bdetails p { padding: 0 0 var(--sp-4); margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.6; max-width: 66ch; }

body.bp .bfinal { background: var(--cobalt); color: #fff; border-radius: var(--r-card); padding: var(--sp-12) var(--pad-card-xl); text-align: center; }
body.bp .bfinal h2 { color: #fff; font-size: var(--fs-h2); line-height: var(--lh-display); letter-spacing: -.04em; margin-bottom: 24px; }
body.bp .bfinal p { color: rgba(255,255,255,.86); margin: var(--sp-3) 0 var(--sp-6); font-size: 16px; }
/* the closing action is white on cobalt — the yellow already had its turn */
body.bp .bfinal .btn.btn { background: #fff; color: var(--cobalt); border-color: #fff; }
body.bp .bfinal .btn.btn:hover { background: var(--paper); border-color: var(--paper); }
body.bp .bmail { margin-top: var(--sp-6); font-size: var(--fs-meta); color: rgba(255,255,255,.72); }
body.bp .bmail a { color: #fff; }

body.bp .bfoot { max-width: var(--container); margin: 0 auto; padding: var(--sp-8) var(--gutter) var(--sp-12); border-top: var(--hair); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; color: var(--muted); font-size: var(--fs-meta); }
body.bp main + .bfoot { margin-top: var(--sec); }
body.bp .bfoot nav { display: flex; gap: 20px; flex-wrap: wrap; }
body.bp .bfoot nav a { color: var(--ink-2); text-decoration: none; }
body.bp .bfoot nav a:hover { color: var(--ink); }
body.bp .bfoot .logo img { height: 24px; }
body.bp .bfoot span a { color: var(--ink-2); }


@media (max-width: 900px) {
  body.bp .bwrap { grid-template-columns: 1fr; gap: var(--sp-12); }
  body.bp .bphoto img { aspect-ratio: 4/3; }
  body.bp .bproof-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  body.bp .bplans { grid-template-columns: 1fr; }
  body.bp .bhead nav { display: none; }
  body.bp .bhead-right { margin-left: auto; }
}
@media (max-width: 560px) {
  body.bp .bhead-in { padding: 0 var(--gutter-sm); gap: var(--sp-2); min-height: 64px; }
  body.bp .bhead .logo img { height: 22px; }
  body.bp .bhead .lang-select { font-size: 11px; padding: 0 var(--sp-2); }
  body.bp .bhead .blink { font-size: var(--fs-meta); }
  body.bp .bhead .btn.sm { font-size: var(--fs-meta); padding: 0 var(--sp-3); height: var(--btn-h); }
  body.bp .bhero { padding: var(--sp-8) 0 var(--sec); }
  body.bp .bwrap, body.bp .bpaper, body.bp .bfoot { padding-left: var(--gutter-sm); padding-right: var(--gutter-sm); }
  body.bp .bh1 { font-size: 40px; }
  body.bp .blead { font-size: 18px; }
  body.bp .bpaper { padding-top: var(--sec); }
  body.bp .bsec { padding-bottom: var(--sec); }
  body.bp .bfinal { padding: var(--sp-8) var(--sp-6); }
  body.bp .bfoot { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
}
/* Primary actions in the app match the brand, not near-black. */
body:not(.landing) .btn:not(.quiet):not(.ghost):not(.danger) { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
body:not(.landing) .btn:not(.quiet):not(.ghost):not(.danger):hover { background: var(--cobalt-2); border-color: var(--cobalt-2); }
body.bp .bplan-sub { font-size: 13px; color: var(--ink-2); margin-top: 6px; }
body.bp .bplan.featured .bplan-sub { color: rgba(255,255,255,.72); }
/* auth: split screen, 380 column centred in the left pane, art block centred as one unit */
.auth .pane { padding: var(--sp-8) var(--gutter); align-items: center; }
.auth .pane .logo { width: 100%; max-width: 380px; margin-inline: auto; }
.auth .form { max-width: 380px; margin: auto; gap: var(--form-gap); }
.auth h1 { font-size: clamp(34px, 3.2vw, 44px); line-height: var(--lh-display); letter-spacing: -.03em; margin: 0; }
.auth .form > div:first-child { display: grid; gap: var(--sp-3); }
.auth .sub { margin: 0; font-size: var(--fs-body); line-height: 1.5; color: var(--ink-2); }
.auth .consent { margin: 0; }

.auth .art { justify-content: center; align-items: center; padding: var(--sp-12) var(--sp-6); }
.auth .art > * { width: 100%; max-width: 360px; }
.auth .art .art-photo { border-radius: var(--r-photo); overflow: hidden; margin-bottom: var(--sp-6); }
.auth .art .art-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.auth .art .mini { margin: 0 0 var(--sp-8); gap: var(--sp-2); }
.auth .art .mini div { border-radius: var(--r-ctl); padding: var(--sp-3) var(--sp-4); font-size: 14px; }
.auth .art .label { margin: 0 0 var(--sp-2); max-width: 360px; }
.auth .art blockquote { font-size: 30px; line-height: 1.15; margin: 0; width: 100%; max-width: 360px; }
@media (max-height: 950px) { .auth .art .art-photo img { height: 190px; } .auth .art .mini div { padding: var(--sp-2) var(--sp-3); } }
@media (max-width: 760px) { .auth .pane { padding: var(--sp-6) var(--gutter-sm); } }
/* B shell for inner pages (fees, 404, guides) */
body.bp .bpage-head { max-width: 820px; padding-bottom: var(--sp-8); }
body.bp .bpage-head .blead { margin-top: var(--head-lead); }
body.bp .bh1.ink { color: var(--ink); }
body.bp .blead.ink { color: var(--ink-2); }
body.bp .bcalc { background: var(--card); border: var(--hair); border-radius: var(--r-card); padding: var(--pad-card); max-width: 780px; box-shadow: none; }
body.bp .bnote-ink { color: var(--ink-2); font-size: 14px; line-height: 1.55; margin-top: var(--sp-4); max-width: 68ch; }
body.bp .bsec-ink { padding-top: var(--sec); }
body.bp .bsec-ink .bh2 { margin-bottom: var(--sp-6); }
body.bp .bcard-scroll { background: var(--card); border: var(--hair); border-radius: var(--r-photo); overflow-x: auto; }
body.bp .bfinal { margin-top: var(--sec); }
/* sections already carry their own bottom rhythm; don't add a second gap */
body.bp .bsec + .bfinal { margin-top: 0; }
/* Market pages share the B shell */
body.bp.mkt-page .hero { background: var(--paper); }
body.bp.mkt-page .mock-win { box-shadow: none; border: var(--hair); }
body.bp.mkt-page .final { background: var(--cobalt); color: #fff; border-top: 0; padding: var(--sec) 0; }
body.bp.mkt-page .final h2, body.bp.mkt-page .final p { color: #fff; }
body.bp.mkt-page .final .label { color: rgba(255,255,255,.7); }
body.bp.mkt-page .mkt-links a { color: rgba(255,255,255,.85); }
body.bp.mkt-page .mkt-links a:hover { color: #fff; }
.side .newitem { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); height: var(--btn-h); margin: 2px 0 var(--sp-3); border-radius: var(--r-pill); background: var(--cobalt); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; }
.side .newitem:hover { background: var(--cobalt-2); color: #fff; }
.side .newitem svg { width: 16px; height: 16px; }
@media (max-width: 760px) { .side .newitem { display: none; } }
@media (min-width: 761px) { .bar-top #new { display: none; } }
body.bp .bext-list { max-width: 70ch; padding-left: 22px; display: grid; gap: var(--sp-2); color: var(--ink-2); font-size: var(--fs-body); line-height: 1.55; }
body.bp .bext-list li::marker { color: var(--cobalt); font-weight: 600; }
.steps-nav { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.snav { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-3); height: var(--btn-h-sm); border: var(--hair); border-radius: var(--r-pill); background: var(--card); color: var(--ink-2); font: inherit; font-size: var(--fs-meta); font-weight: 600; cursor: pointer; }
.snav i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--sunk); color: var(--ink-2); font-style: normal; font-size: 11px; }
.snav.now { border-color: var(--cobalt); color: var(--ink); }
.snav.now i { background: var(--cobalt); color: #fff; }
.snav.done i { background: var(--cobalt-soft); color: var(--cobalt); }
.sline { flex: 1; min-width: 10px; height: 1px; background: var(--line); }
.card.next { border-color: var(--cobalt); }
.card.next .nexttxt { margin: var(--sp-2) 0 var(--sp-4); font-size: 15px; line-height: 1.45; color: var(--ink-2); }

/* ============================================================
   LOCKED MEASUREMENTS (task J)
   One set of numbers for every public page. These rules win over
   biz.css and mkt.css, which load after pop.css, without !important.
   ============================================================ */

/* Hero and the paper start share one gap, not two. */
body.bp .bhero { padding-bottom: 40px; }

/* Cards: 24 standard, 28 plans, 32 feature/form. */
body.bp .bizpage.bizpage .biz-report,
body.bp .bizpage.bizpage .biz-form { padding: var(--pad-card-xl); border-radius: var(--r-card); }
body.bp .bizpage.bizpage .biz-plan { padding: var(--pad-card-lg); border-radius: var(--r-card); border-top: 1px solid var(--cobalt); }
body.bp .bizpage.bizpage .biz-steps li,
body.bp .bizpage.bizpage .biz-cards li { padding: var(--pad-card-lg); }

/* Forms: 16 between fields, 44 field height, 8 label-to-control. */
body.bp .bizpage.bizpage .biz-form form { gap: var(--form-gap); margin-top: var(--sp-6); }
body.bp .bizpage.bizpage .biz-form .field { gap: var(--field-gap); }
body.bp .bizpage.bizpage .biz-form-foot { gap: var(--sp-4); }
body.bp .bizpage.bizpage .blead { margin-top: var(--head-lead); }

/* Section rhythm is the same on business pages as the rest of the shell. */
body.bp .bizpage.bizpage .bsec-ink { padding-top: var(--sec); }
body.bp .bizpage.bizpage .biz-stats { margin-top: var(--sp-8); padding-top: var(--sp-6); gap: var(--sp-6); }
body.bp .bizpage.bizpage .biz-actions { gap: var(--sp-4); margin-top: var(--sp-8); }
body.bp .bizpage.bizpage .biz-sub { margin-top: var(--head-lead); }

/* Market pages use the same step between blocks and one hairline grid. */
body.bp.mkt-page.mkt-page .mkt-tips { column-gap: var(--sp-12); }
body.bp.mkt-page.mkt-page .mkt-tips article { padding: var(--sp-6) 0; }
body.bp.mkt-page.mkt-page .bfinal .mkt-others { margin-top: var(--sp-12); }

/* App shell inside the same rhythm: 40 px page gutter, 24 px cards. */
.calc-in input, .calc-in select { height: var(--field-h); }
.stepbox { border-radius: var(--r-card); }
.stepbox > header { padding: var(--sp-6) var(--sp-6) var(--sp-2); }
.stepbox .body { padding: 0 var(--sp-6) var(--sp-6); }
.tabs { margin: 0 calc(var(--sp-6) * -1) var(--sp-6); padding: 0 var(--sp-6); }
.summary .card { padding: var(--pad-card); }
.search input { height: var(--btn-h-sm); }
.toast { box-shadow: none; border: 1px solid rgba(255,255,255,.18); }
.mmenu-panel { box-shadow: none; }
.calc-out tr.best { box-shadow: none; }

@media (max-width: 900px) {
  body.bp .bizpage.bizpage .biz-report { padding: var(--pad-card-lg); gap: var(--sp-8); }
  body.bp .bizpage.bizpage .biz-split { gap: var(--sp-8); }
}
@media (max-width: 760px) {
  body.bp .bizpage.bizpage .biz-form { padding: var(--pad-card); }
  body.bp .bizpage.bizpage .biz-form form { grid-template-columns: 1fr; }
  body.bp .bizpage.bizpage .biz-steps li,
  body.bp .bizpage.bizpage .biz-cards li,
  body.bp .bizpage.bizpage .biz-plan { padding: var(--pad-card); }
  body.bp .bizpage.bizpage .biz-report { padding: var(--pad-card); }
  .verifybar { padding: var(--sp-3) var(--gutter-sm); }
  .btn.sm { height: var(--btn-h); }
  .mmenu > summary { width: var(--btn-h); height: var(--btn-h); }
}
body.bp .bfoot-langs { display: flex; gap: 14px; flex-wrap: wrap; }
body.bp .bfoot-langs a { color: var(--ink-2); text-decoration: none; font-size: 13px; }
body.bp .bfoot-langs a[aria-current="true"] { color: var(--ink); font-weight: 600; }
body.bp .bfoot { display: grid; grid-template-columns: auto 1fr auto; gap: 14px 32px; align-items: center; }
body.bp .bfoot-legal { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 16px; color: var(--muted); font-size: 13px; }
@media (max-width: 700px) {
  body.bp .bfoot { grid-template-columns: 1fr; gap: 10px; }
  body.bp .bfoot nav, body.bp .bfoot-langs { flex-wrap: wrap; }
}
/* Small targets: keep every link at least 24px tall (WCAG 2.5.8). */
body.bp .bfoot a, body.bp .bhead .logo { display: inline-flex; align-items: center; min-height: 24px; }
body.bp .bhead .logo { min-height: 44px; }