/* =============================================================================
   Kaarobar — stylesheet for every page that is NOT the homepage.

   Why this file exists at all: the homepage carries ~300 lines of CSS for
   seventeen sections no sub-page has, and /cod-profit-calculator/ answered that
   by inlining its own trimmed copy. That was right for ONE extra page. It is
   wrong for twenty — the same 6 KB would be re-downloaded per page and every
   future nav change would mean editing twenty files. One cached stylesheet is
   one request on the first sub-page view and zero on every view after it.

   Tokens are copied EXACTLY from index.html and the calculator page so the
   whole site is one house. Deliberately single-theme (white ground, black ink,
   brand red) for the same reason the homepage is: the design is a paper ledger.
   ============================================================================= */

:root{
  --paper:#ffffff; --ink:#111111; --ink-2:#4b5563; --ink-3:#9ca3af;
  --rule:#e5e7eb; --brand:#dc2626; --brand-2:#a81a1a; --wash:#fafafa;
  --kept:#15803d; --lost:#dc2626; --wash-red:#fdeceb;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
     font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
     font-variant-numeric:tabular-nums}
img,svg{max-width:100%}
a{color:var(--brand)}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.narrow{max-width:72ch}

/* --- header ---------------------------------------------------------------- */
header.top{border-bottom:1px solid var(--rule);padding:16px 0;position:sticky;top:0;
           background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);z-index:20}
header.top .wrap{display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
       font-family:var(--serif);font-weight:700;font-size:19px;flex:none}
.brand .mark{width:25px;height:25px;border-radius:7px;flex:none}
nav.site{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap}
nav.site a{color:var(--ink-2);text-decoration:none;font-size:14.5px;white-space:nowrap}
nav.site a:hover,nav.site a[aria-current=page]{color:var(--ink)}
nav.site a[aria-current=page]{font-weight:600}
.top .btn{flex:none;background:var(--ink);color:#fff;text-decoration:none;padding:9px 15px;
          border-radius:8px;font-size:14px;font-weight:600;white-space:nowrap}
.top .btn:hover{background:var(--brand)}
/* ☠️ nav.site sets flex-wrap:wrap for the desktop case. Below 940px the nav moves
   to its own row and is meant to SCROLL, not wrap — but wrap:wrap wins over
   overflow-x:auto (a wrapping flex container never overflows, it grows taller),
   so the links stacked onto two ragged rows instead. nowrap is what makes the
   scroll actually happen. */
@media(max-width:940px){
  header.top{position:static;padding:14px 0}
  header.top .wrap{flex-wrap:wrap;row-gap:10px;gap:12px}
  nav.site{order:3;width:100%;margin-left:0;gap:18px;flex-wrap:nowrap;
           overflow-x:auto;-webkit-overflow-scrolling:touch;
           scrollbar-width:none;padding-bottom:2px}
  nav.site::-webkit-scrollbar{display:none}
  .top .btn{margin-left:auto}
}
@media(max-width:400px){
  .brand{font-size:17px}
  .top .btn{padding:8px 12px;font-size:13px}
  nav.site{gap:15px}
  nav.site a{font-size:14px}
}

/* --- breadcrumbs ----------------------------------------------------------- */
.crumbs{font-size:13px;color:var(--ink-3);padding:20px 0 0}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--ink-2);text-decoration:underline}
.crumbs span{margin:0 7px}

/* --- hero ------------------------------------------------------------------ */
.hero{padding:26px 0 34px}
.stub{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
      color:var(--brand);font-weight:600}
h1{font-family:var(--serif);font-weight:700;font-size:clamp(30px,5vw,46px);line-height:1.12;
   margin:10px 0 16px;letter-spacing:-.01em;text-wrap:balance}
.lede{max-width:64ch;color:var(--ink-2);font-size:18px;margin:0}

/* --- prose sections -------------------------------------------------------- */
section.prose{padding:40px 0;border-top:1px solid var(--rule)}
section.prose h2{font-family:var(--serif);font-size:clamp(22px,3vw,30px);margin:0 0 6px;
                 line-height:1.2;text-wrap:balance}
section.prose h2+.sub{color:var(--ink-3);font-size:14.5px;margin:0 0 18px;max-width:70ch}
section.prose h3{font-size:17.5px;margin:28px 0 6px;font-family:var(--sans);font-weight:700}
section.prose p{max-width:72ch;color:var(--ink-2);margin:0 0 13px}
section.prose ul,section.prose ol{max-width:72ch;color:var(--ink-2);padding-left:20px;margin:0 0 13px}
section.prose li{margin:6px 0}
section.prose strong{color:var(--ink)}

/* --- the ledger strip: a stack of named amounts ---------------------------- */
.ledger{border:1px solid var(--rule);border-radius:10px;overflow:hidden;max-width:640px;
        background:var(--wash);margin:6px 0 4px}
.ledger .lrow{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
              padding:11px 18px;border-bottom:1px solid var(--rule);background:var(--paper)}
.ledger .lrow:last-child{border-bottom:0}
.ledger .lrow .l{font-size:14.5px}
.ledger .lrow .l small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:2px}
.ledger .lrow .a{font-family:var(--mono);font-size:14.5px;font-weight:600;white-space:nowrap}
.ledger .lrow .a.neg{color:var(--ink-2)}
.ledger .lrow.total{border-top:2px solid var(--ink);background:var(--wash)}
.ledger .lrow.total .l{font-weight:700;font-size:15.5px}
.ledger .lrow.total .a{color:var(--kept);font-size:19px}

/* --- cards ----------------------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px;margin:20px 0 4px}
.card{border:1px solid var(--rule);border-radius:10px;padding:18px;background:var(--paper)}
.card h3{margin:0 0 6px;font-size:16.5px}
.card p{margin:0;font-size:14.5px;color:var(--ink-2)}
a.card{text-decoration:none;display:block;color:inherit}
a.card:hover{border-color:var(--ink-3);box-shadow:0 10px 26px -20px rgba(17,17,17,.5)}
a.card h3{color:var(--brand)}

/* --- comparison / spec tables ---------------------------------------------- */
.tablewrap{overflow-x:auto;margin:18px 0;border:1px solid var(--rule);border-radius:10px}
table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:560px}
th,td{text-align:left;padding:11px 15px;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{background:var(--wash);font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;
         color:var(--ink-2);font-weight:600;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td.yes{color:var(--kept);font-weight:600}
td.no{color:var(--ink-3)}

/* --- callout: the thing that is true but awkward --------------------------- */
.callout{border-left:3px solid var(--brand);background:var(--wash-red);padding:14px 18px;
         border-radius:0 8px 8px 0;margin:18px 0;max-width:72ch}
.callout p{margin:0;color:var(--ink-2);font-size:15px}
.callout p+p{margin-top:9px}
.callout .k{font-weight:700;color:var(--ink)}

/* --- FAQ ------------------------------------------------------------------- */
dl.faq{max-width:74ch;margin:0}
dl.faq dt{font-weight:700;margin-top:20px;color:var(--ink)}
dl.faq dd{margin:5px 0 0;color:var(--ink-2)}

/* --- pricing --------------------------------------------------------------- */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:16px;margin:22px 0}
.tier{border:1px solid var(--rule);border-radius:12px;padding:20px;background:var(--paper);
      display:flex;flex-direction:column}
.tier.pick{border-color:var(--brand);box-shadow:0 14px 34px -26px rgba(220,38,38,.8)}
.tier .name{font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px}
.tier .tag{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
           background:var(--brand);color:#fff;border-radius:99px;padding:3px 7px}
.tier .amt{font-family:var(--serif);font-size:33px;font-weight:700;margin:10px 0 0}
.tier .per{color:var(--ink-3);font-size:13px}
.tier .cap{font-family:var(--mono);font-size:13px;color:var(--ink);margin:12px 0 0;
           padding-top:12px;border-top:1px solid var(--rule)}
.tier ul{list-style:none;padding:0;margin:12px 0 0;font-size:14px;color:var(--ink-2)}
.tier li{margin:7px 0;padding-left:17px;position:relative}
.tier li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:2px;
                 background:var(--brand);opacity:.5}

/* --- CTA ------------------------------------------------------------------- */
.cta{display:inline-block;margin-top:18px;background:var(--ink);color:#fff;text-decoration:none;
     padding:12px 20px;border-radius:8px;font-weight:600;font-size:15px}
.cta:hover{background:var(--brand)}
.cta.ghost{background:none;color:var(--ink);border:1px solid var(--rule);margin-left:10px}
.cta.ghost:hover{border-color:var(--ink);background:none}
@media(max-width:520px){.cta.ghost{margin:10px 0 0}}

/* --- related links --------------------------------------------------------- */
.related{padding:34px 0;border-top:1px solid var(--rule);background:var(--wash)}
.related h2{font-size:15px;font-family:var(--sans);margin:0 0 14px;text-transform:uppercase;
            letter-spacing:.07em;color:var(--ink-2)}

/* --- footer ---------------------------------------------------------------- */
footer{border-top:1px solid var(--rule);padding:30px 0 48px;color:var(--ink-3);font-size:13.5px}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:22px;
             margin-bottom:22px}
footer h3{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2);
          margin:0 0 9px;font-family:var(--sans);font-weight:600}
footer a{color:var(--ink-2);text-decoration:none;display:block;margin:6px 0}
footer a:hover{color:var(--ink)}
footer p{margin:0;max-width:70ch;line-height:1.55}

/* --- figures: inline SVG diagrams -------------------------------------------
   No <img>, no external request. The container scrolls on narrow screens rather
   than letting a wide diagram push the page sideways. */
.fig{margin:22px 0 6px;max-width:760px}
.fig .svgfig{display:block;width:100%;height:auto;
             border:1px solid var(--rule);border-radius:10px;background:var(--paper);
             padding:20px 22px}
.fig figcaption{margin-top:9px;font-size:13.5px;color:var(--ink-3);line-height:1.5;max-width:70ch}
@media(max-width:640px){
  .fig .svgfig{padding:14px}
  .fig figcaption{font-size:13px}
}

/* --- articles: guides, blog posts, research ---------------------------------- */
.byline{margin:14px 0 0;font-family:var(--mono);font-size:12.5px;color:var(--ink-3);
        letter-spacing:.01em}
.postlist{max-width:820px;margin:8px 0 0}
.postlist a{display:block;text-decoration:none;color:inherit;padding:20px 0;
            border-bottom:1px solid var(--rule)}
.postlist a:last-child{border-bottom:0}
.postlist h3{margin:0 0 5px;font-size:19px;color:var(--brand);font-family:var(--serif);
             font-weight:700;line-height:1.25}
.postlist a:hover h3{text-decoration:underline}
.postlist p{margin:0;font-size:14.5px;color:var(--ink-2);max-width:70ch}
.postlist .meta{display:block;margin-top:7px;font-family:var(--mono);font-size:11.5px;
                color:var(--ink-3);letter-spacing:.02em}
.keytake{border:1px solid var(--rule);border-left:3px solid var(--ink);border-radius:0 10px 10px 0;
         background:var(--wash);padding:16px 20px;margin:20px 0;max-width:72ch}
.keytake h3{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.09em;
            color:var(--ink-2);font-family:var(--sans)}
.keytake ul{margin:0;padding-left:19px}
.keytake li{margin:6px 0;font-size:14.5px;color:var(--ink-2)}

/* --- hero banners -----------------------------------------------------------
   HTML first, SVG as a wide-screen enhancement.
   ☠️ The first version was SVG-only on a 1080-wide viewBox. On a phone that is
   squashed to ~310px, which renders its 11px labels at roughly 3px — an SVG
   scales its text along with the artwork, so no single fixed diagram is legible
   at every width. The words are therefore real HTML that reflows, and the
   diagram is hidden below 760px where it would be unreadable anyway. */
.banner{background:var(--ink);color:#fff;padding:26px 0 30px;margin:0}
.banner .bwrap{max-width:1080px;margin:0 auto;padding:0 24px}
.beyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
          color:rgba(255,255,255,.42);margin:0 0 12px}
.bhead{font-family:var(--serif);font-size:clamp(19px,3.4vw,27px);line-height:1.25;font-weight:700;
       color:#fff;margin:0;max-width:34ch;text-wrap:balance}
.bhead em{font-style:normal;color:var(--brand)}
.bstat{display:flex;align-items:baseline;gap:8px 20px;flex-wrap:wrap;margin:6px 0 0}
.bstat strong{font-family:var(--serif);font-size:clamp(40px,11vw,64px);line-height:.95;
              color:var(--brand);font-weight:700;flex:none}
.bstat .bhead{margin:0;flex:1 1 15ch;min-width:0}
.bfacts{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;padding:0;
        margin:18px 0 0;font-family:var(--mono);font-size:11.5px;
        color:rgba(255,255,255,.45);letter-spacing:.02em}
.bfacts li{white-space:nowrap}
.bart{margin:20px 0 0}
.bart svg{display:block;width:100%;height:auto}
/* Below this width the diagram carries labels too small to read AND is cramped
   against the copy, so it goes entirely. The HTML above already says everything
   the diagram does. */
@media(max-width:980px){
  .banner{padding:20px 0 24px}
  .bart{display:none}
  .bfacts{gap:6px 16px;font-size:11px}
  .bfacts li{white-space:normal}
}

/* ---------------- product shots ----------------
   Screenshots of the real app rendered against invented data (scripts/qa-seed-demo-store.ts),
   framed by figures.mjs `shot()`. The frame is a title bar and a hairline, not a laptop mockup:
   a fake device around a screenshot makes the picture about the device. */
.shot{border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--paper);
      box-shadow:0 1px 2px rgba(17,17,17,.05),0 22px 48px -30px rgba(17,17,17,.45);margin:26px 0}
.shot-bar{display:flex;align-items:center;gap:6px;padding:9px 13px;
          border-bottom:1px solid var(--rule);background:var(--wash)}
.shot-bar i{width:9px;height:9px;border-radius:50%;background:var(--rule);display:block}
.shot-bar .u{margin-left:12px;font:500 .72rem/1 var(--mono);color:var(--ink-3)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{padding:11px 14px;font-size:.82rem;color:var(--ink-2);
                 border-top:1px solid var(--rule)}
.shot figcaption b{color:var(--ink);font-weight:600}