/* PartCaddy app styles — consumes the tokens in /partcaddy-brand.css.
   Rules that must not drift (hex-nut kit, 2026-08-08):
   · ORANGE is in-stock / primary action / the answer only. Never a second warm
     colour, never decoration. Out-of-stock and secondary states are ZINC.
   · Corners are effectively square: 2px (--pcd-radius). Nothing is a pill.
   · Barlow Semi Condensed throughout — the condensed width is deliberate,
     part numbers are long.
   · Grounds: GROUND for the catalogue, WHITE for part cards and spec sheets,
     GRAPHITE for the footer. STEEL tints table rows.
   · Part numbers: same family at 500, letterspaced 0.04em, never italic. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--pcd-ground);color:var(--pcd-text);
  font:400 15px/1.55 var(--pcd-font);
}
h1,h2,h3{font-family:var(--pcd-font);font-weight:800;letter-spacing:-.02em;text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--pcd-accent-deep);outline-offset:2px}

/* A part number, wherever it appears. */
.maf-pn,.maf-stat-v,.maf-table .num{font-weight:500;letter-spacing:.04em;font-variant-numeric:tabular-nums}

.maf-wrap{max-width:900px;margin:0 auto;padding:0 20px 64px}

/* ── Masthead lockup ───────────────────────────────────────────────────────
   Mark then wordmark, flush left. Clear space = 25% of the mark width. */
.maf-top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 0;border-bottom:var(--pcd-rule) solid color-mix(in srgb,var(--pcd-text) 16%,transparent);
  margin-bottom:24px}
.maf-top .pcd-lockup{font-size:23px}
/* We render the mark as one inline SVG instead of the kit's nested spans, so
   fill the .pcd-mark box with it (that box is `position:relative` and sets
   `> * { position:absolute }`, which would otherwise collapse the svg). */
.pcd-mark > svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.maf-topnav{font-family:var(--pcd-font);font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--pcd-text-muted)}
.maf-topnav a{color:var(--pcd-text-muted);text-decoration:none}
.maf-topnav a:hover{color:var(--pcd-accent-deep)}

/* ── Page head ─────────────────────────────────────────────────────────── */
.maf-crumb{font-size:13px;color:var(--pcd-text-muted);margin-bottom:12px}
.maf-crumb a{color:var(--pcd-text-muted)}
/* Thumbnail + H1 on one row. The chip matches the tool-card chips so the icon
   reads as the same object across the site. Sized in CSS to the same 56px the
   <img> declares, so the reserved box and the painted box agree (no shift). */
.maf-head-row{display:flex;align-items:center;gap:14px;margin:0 0 10px}
.maf-head-ico{width:56px;height:56px;flex:none;background:var(--pcd-white);padding:11px;
  border:var(--pcd-rule) solid color-mix(in srgb,var(--pcd-text) 12%,transparent);
  border-radius:var(--pcd-radius)}
.maf-head h1{font-size:clamp(28px,4.6vw,42px);letter-spacing:-.025em;margin:0;line-height:1.08}
.maf-promise{font-size:17px;line-height:1.5;color:var(--pcd-text);margin:0 0 10px;max-width:64ch}
.maf-meta{font-size:13px;color:var(--pcd-text-muted);margin:4px 0}

/* ── The tool (a spec sheet: white ground) ─────────────────────────────── */
.maf-tool{background:var(--pcd-white);
  border:var(--pcd-rule) solid color-mix(in srgb,var(--pcd-text) 12%,transparent);
  border-radius:var(--pcd-radius-card);padding:22px;margin:20px 0}
.maf-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:15px}
.maf-field{display:grid;gap:6px;font-family:var(--pcd-font);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pcd-text-muted)}
.maf-field>span em{color:var(--pcd-accent-deep);font-style:normal}
.maf-field input,.maf-field select{
  width:100%;padding:10px 13px;
  border:var(--pcd-rule) solid color-mix(in srgb,var(--pcd-text) 22%,transparent);
  border-radius:var(--pcd-radius);
  font:400 15px/1.4 var(--pcd-font);letter-spacing:0;text-transform:none;
  color:var(--pcd-text);background:var(--pcd-white);appearance:none}
.maf-field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--pcd-zinc) 50%),linear-gradient(135deg,var(--pcd-zinc) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;padding-right:34px}
.maf-field input:focus-visible,.maf-field select:focus-visible{
  outline:2px solid var(--pcd-accent-deep);outline-offset:-1px}
.maf-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}

.maf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;
  font:700 14px/1 var(--pcd-font);
  border:var(--pcd-rule) solid color-mix(in srgb,var(--pcd-text) 22%,transparent);
  border-radius:var(--pcd-radius-pill);background:var(--pcd-white);color:var(--pcd-text);
  text-decoration:none;cursor:pointer}
.maf-btn:hover{background:var(--pcd-steel);text-decoration:none}
/* Primary action = orange, per kit rule 8. */
.maf-btn-primary{background:var(--pcd-orange);border-color:var(--pcd-orange);color:var(--pcd-white)}
.maf-btn-primary:hover{background:var(--pcd-accent-deep);border-color:var(--pcd-accent-deep)}

/* 📷 scan — an input affordance, not the answer, so it stays graphite. */
.maf-btn-scan{border-color:color-mix(in srgb,var(--pcd-text) 30%,transparent);color:var(--pcd-text)}
.maf-btn-scan:hover{background:var(--pcd-steel)}
.maf-btn-scan[disabled]{opacity:.55;cursor:progress}
.maf-scan-note{grid-column:1/-1;margin:2px 0 0;padding:11px 14px;font-size:13.5px;line-height:1.45;
  background:var(--pcd-ground);color:var(--pcd-text);
  border:var(--pcd-rule) solid color-mix(in srgb,var(--pcd-text) 12%,transparent);
  border-left:3px solid var(--pcd-zinc);border-radius:var(--pcd-radius)}
.maf-scan-note.is-bad{border-left-color:var(--pcd-accent-deep);color:var(--pcd-accent-deep)}

.maf-examples{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px}
.maf-ex-lbl{font-family:var(--pcd-font);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pcd-text-muted)}
.maf-chip{font:600 13px/1 var(--pcd-font);padding:7px 13px;
  border:var(--pcd-rule) solid color-mix(in srgb,var(--pcd-text) 18%,transparent);
  border-radius:var(--pcd-radius-pill);background:var(--pcd-white);color:var(--pcd-text);cursor:pointer}
.maf-chip:hover{background:var(--pcd-steel)}

/* ── Result ────────────────────────────────────────────────────────────────
   The verdict is the answer, so it carries the orange. Graphite ground,
   light type, orange rule — the single strongest element on the page. */
.maf-result:empty{display:none}
.maf-result{margin-top:20px}
.maf-verdict{background:var(--pcd-graphite);color:var(--pcd-text-on-ink);
  font-family:var(--pcd-font);font-size:19px;font-weight:700;line-height:1.32;letter-spacing:-.015em;
  padding:16px 19px;border-left:5px solid var(--pcd-orange);
  border-radius:var(--pcd-radius);margin-bottom:16px;text-wrap:pretty}
.maf-v-good{border-left-color:var(--pcd-orange)}
.maf-v-ok{border-left-color:var(--pcd-zinc)}
.maf-v-warn{border-left-color:var(--pcd-accent-deep)}
/* Out-of-stock / negative is ZINC, never a second warm colour (kit rule 8). */
.maf-v-bad{border-left-color:var(--pcd-zinc)}

.maf-stats{display:flex;flex-wrap:wrap;gap:var(--pcd-rule);margin-bottom:16px;
  background:color-mix(in srgb,var(--pcd-text) 12%,transparent);
  border:var(--pcd-rule) solid color-mix(in srgb,var(--pcd-text) 12%,transparent);
  border-radius:var(--pcd-radius)}
.maf-stat{background:var(--pcd-white);padding:12px 18px;flex:1 1 auto;min-width:124px}
.maf-stat-v{font-size:23px;font-weight:700;letter-spacing:-.01em;color:var(--pcd-text)}
.maf-stat-l{font-family:var(--pcd-font);font-size:10px;font-weight:700;color:var(--pcd-text-muted);
  text-transform:uppercase;letter-spacing:.14em;margin-top:3px}

/* ── Tables — steel tints the rows ─────────────────────────────────────── */
.maf-tablewrap{overflow-x:auto;background:var(--pcd-white);
  border:var(--pcd-rule) solid color-mix(in srgb,var(--pcd-text) 12%,transparent);
  border-radius:var(--pcd-radius-card)}
.maf-table{border-collapse:collapse;width:100%;font-size:14px;min-width:420px}
.maf-table th{position:sticky;top:0;background:var(--pcd-graphite);text-align:left;
  font-family:var(--pcd-font);font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:var(--pcd-text-on-ink);padding:11px 13px}
.maf-table td{padding:11px 13px;border-bottom:var(--pcd-rule) solid var(--pcd-steel);color:var(--pcd-text)}
.maf-table tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--pcd-steel) 45%,transparent)}
.maf-table tr:last-child td{border-bottom:0}
.maf-table tbody tr:hover td{background:var(--pcd-steel)}
.maf-table .r{text-align:right}
.maf-db td:last-child{color:var(--pcd-text-muted);font-size:13px}

/* Status pills: orange = in stock / fits. Everything else zinc. */
.maf-pill{display:inline-block;font-family:var(--pcd-font);font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;
  border:var(--pcd-rule) solid currentColor;border-radius:var(--pcd-radius);white-space:nowrap}
.maf-pill-ok{color:var(--pcd-accent-deep)}
.maf-pill-warn{color:var(--pcd-text-muted)}
.maf-pill-bad{color:var(--pcd-text-muted)}
.maf-pill-neut{color:var(--pcd-zinc)}

/* ── Steps ─────────────────────────────────────────────────────────────── */
.maf-steps{margin-top:20px}
.maf-steps h3{font-family:var(--pcd-font);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pcd-text-muted);margin:0 0 8px}
.maf-steps ul{margin:0;padding-left:18px}
.maf-steps li{margin:6px 0;color:var(--pcd-text);text-wrap:pretty}
.maf-steps li::marker{color:var(--pcd-orange)}

/* ── Monetization ──────────────────────────────────────────────────────── */
.maf-monetization{margin-top:20px;
  border-top:var(--pcd-rule) solid color-mix(in srgb,var(--pcd-text) 12%,transparent);padding-top:18px}
.maf-disclosure{font-size:12.5px;color:var(--pcd-text-muted);margin:0 0 12px}
.maf-aff-card{background:var(--pcd-ground);
  border:var(--pcd-rule) solid color-mix(in srgb,var(--pcd-text) 12%,transparent);
  border-left:3px solid var(--pcd-orange);border-radius:var(--pcd-radius);padding:17px}
.maf-aff-card h3{margin:0 0 6px;font-size:17px;letter-spacing:-.02em}
.maf-aff-card p{margin:0 0 13px;font-size:14px;color:var(--pcd-text-muted)}
.maf-aff-links{display:flex;flex-wrap:wrap;gap:10px}
.maf-btn-aff{background:var(--pcd-white)}
.maf-btn-aff:hover{background:var(--pcd-white);border-color:var(--pcd-orange);color:var(--pcd-accent-deep)}
.maf-ad{margin:18px 0;min-height:0}

/* ── Panels / methodology / FAQ ────────────────────────────────────────── */
.maf-panel{margin:32px 0}
.maf-panel h2{font-size:22px;letter-spacing:-.025em;margin:0 0 12px;padding-bottom:9px;
  border-bottom:2px solid var(--pcd-graphite)}
.maf-method p,.maf-method li{color:var(--pcd-text-muted);text-wrap:pretty}
.maf-method ul{padding-left:18px}
.maf-method li::marker{color:var(--pcd-zinc)}
.maf-method strong{color:var(--pcd-text)}
.maf-note{padding:12px 15px;font-size:14px;border-radius:var(--pcd-radius)}
.maf-note-bad{background:var(--pcd-white);color:var(--pcd-accent-deep);
  border:var(--pcd-rule) solid color-mix(in srgb,var(--pcd-text) 12%,transparent);
  border-left:3px solid var(--pcd-accent-deep)}

.maf-faq details{background:var(--pcd-white);
  border:var(--pcd-rule) solid color-mix(in srgb,var(--pcd-text) 12%,transparent);
  border-radius:var(--pcd-radius);padding:0 16px;margin:0 0 -1px}
.maf-faq summary{font-family:var(--pcd-font);font-weight:700;font-size:15.5px;letter-spacing:-.01em;
  cursor:pointer;padding:14px 0;list-style:none}
.maf-faq summary::-webkit-details-marker{display:none}
.maf-faq summary::after{content:"+";float:right;color:var(--pcd-orange);font-weight:800}
.maf-faq details[open] summary::after{content:"–"}
.maf-faq details[open]{background:var(--pcd-ground)}
.maf-faq details p{margin:0 0 14px;color:var(--pcd-text-muted);font-size:14.5px}

/* ── Card grid (tools + related) ───────────────────────────────────────── */
/* Hairlines are drawn by each CARD's box-shadow, not by the grid's background.
   A background-plus-gap grid leaks its colour through the empty tracks of a
   short row — which showed up as a grey slab beside the single-tool categories
   on /apps/. With box-shadow, an incomplete row reads as white space instead. */
/* Each card carries its own border and pulls 1px into its neighbour, so shared
   edges collapse to a single hairline. This matters because /apps/ has
   single-tool categories: a container-drawn grid (background or border) leaves
   an empty panel beside a lone card, which reads as a broken layout. Here the
   empty tracks are simply page ground. */
.maf-cards,.maf-related{display:grid;gap:0;background:transparent;border:0}
.maf-cards{grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
.maf-related{grid-template-columns:repeat(auto-fill,minmax(238px,1fr))}
.maf-card,.maf-relcard{display:flex;flex-direction:column;gap:5px;padding:20px;
  background:var(--pcd-white);text-decoration:none;
  border:var(--pcd-rule) solid color-mix(in srgb,var(--pcd-text) 12%,transparent);
  margin:0 calc(var(--pcd-rule) * -1) calc(var(--pcd-rule) * -1) 0}
.maf-card:hover,.maf-relcard:hover{background:var(--pcd-ground);text-decoration:none}
.maf-card-ico{width:52px;height:52px;background:var(--pcd-ground);padding:12px;margin-bottom:10px;
  border-radius:var(--pcd-radius)}
.maf-card:hover .maf-card-ico{background:var(--pcd-white)}
.maf-card-ico svg{display:block;width:100%;height:100%}
.maf-card-cat,.maf-relcard-cat{font-family:var(--pcd-font);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;color:var(--pcd-accent-deep)}
.maf-card strong,.maf-relcard strong{font-size:17px;font-weight:800;letter-spacing:-.02em;
  color:var(--pcd-text);line-height:1.2}
.maf-card-p,.maf-relcard span{font-size:13.5px;line-height:1.5;color:var(--pcd-text-muted);text-wrap:pretty}
.maf-relcard{gap:4px}

/* ── Home hero ─────────────────────────────────────────────────────────── */
.maf-hero{padding:28px 0 32px}
.maf-hero h1{font-size:clamp(34px,6.4vw,54px);margin:0 0 12px;letter-spacing:-.03em;line-height:1.02}
.maf-hero h1 em{font-style:normal;color:var(--pcd-orange)}
.maf-hero p{font-size:18px;line-height:1.5;color:var(--pcd-text-muted);margin:0;max-width:54ch}
.maf-rule{width:240px;height:12px;background:var(--pcd-orange);margin-top:26px}

/* /apps/ hub: smaller hero than the homepage (it's an index, not a pitch), and
   a one-line lede under each category heading. */
.maf-hero--index{padding:14px 0 26px}
.maf-hero--index h1{font-size:clamp(28px,5vw,40px)}
.maf-hero--index p{font-size:16.5px;max-width:64ch}
.maf-cat-blurb{margin:-4px 0 12px;font-size:14px;color:var(--pcd-text-muted);max-width:70ch}

/* ── Footer — graphite ground, per kit rule 1 ──────────────────────────── */
.maf-foot{margin-top:44px;background:var(--pcd-graphite);color:var(--pcd-muted-on-ink);
  border-radius:var(--pcd-radius-card);padding:20px 22px}
.maf-foot .maf-meta,.maf-foot .maf-disclosure{color:var(--pcd-muted-on-ink);font-size:12.5px}
.maf-foot a{color:var(--pcd-text-on-ink);text-decoration-color:var(--pcd-orange)}
.maf-foot a:hover{color:var(--pcd-orange)}

@media (max-width:520px){
  /* Narrow screens wrap the H1 over 2–3 lines; anchor the chip to the first
     line instead of letting it float against the middle of the block. */
  .maf-head-row{gap:11px;align-items:flex-start}
  .maf-head-ico{width:44px;height:44px;padding:9px}
  .maf-tool{padding:16px}
  .maf-stat{padding:11px 14px;min-width:108px}
  .maf-topnav{display:none}
  .maf-top .pcd-lockup{font-size:20px}
}

/* ── Identity pages (/about/, /privacy/, …) ───────────────────────────────
   Long-form prose, measured for reading rather than scanning. */
.maf-prose{max-width:72ch}
.maf-prose h2{font-size:20px;letter-spacing:-.02em;margin:30px 0 10px;padding-bottom:7px;
  border-bottom:2px solid var(--pcd-graphite)}
.maf-prose h2:first-child{margin-top:14px}
.maf-prose p{margin:0 0 13px;color:var(--pcd-text);line-height:1.6}
.maf-prose ul{margin:0 0 15px;padding-left:19px}
.maf-prose li{margin:7px 0;color:var(--pcd-text);line-height:1.55;text-wrap:pretty}
.maf-prose li::marker{color:var(--pcd-orange)}
.maf-prose strong{font-weight:700}
.maf-prose a{text-decoration:underline;text-decoration-color:var(--pcd-orange);text-underline-offset:2px}

.maf-footnav{font-size:12.5px;margin:0 0 8px;color:var(--pcd-muted-on-ink)}
.maf-footnav a{color:var(--pcd-text-on-ink);text-decoration-color:var(--pcd-orange)}
.maf-footnav a:hover{color:var(--pcd-orange)}