/* ============================================================================
   BRAND TOKENS — the only block a new hub needs to change.
   Everything below this block is structural and reads from these variables.
   Current values: MyBagFits (leather / sand / ink).
   ========================================================================== */
:root{
  /* Core palette */
  --ink:#241D18;          /* titles, glyph strokes, dark grounds */
  --deep:#4A3021;         /* kickers, links, wordmark on light */
  --accent:#8A5A3C;       /* LEATHER — mark tile on light, accent stroke */
  --accent-on-ink:#C99A6C;/* TAN — the dark-ground stand-in for accent */
  --tint:#F4ECE3;         /* SAND — icon chips, card hover */
  --ground:#FCFAF7;       /* page background */
  --line:#E3DFD9;         /* hairline rules */
  --muted:#736E69;        /* descriptions on light */
  --muted-on-ink:#BFB2A6; /* descriptions on ink */
  --card:#fff;

  /* Verdict semantics — extension beyond the brand kit, warm-shifted to sit
     with the palette while staying distinguishable and AA-legible. */
  --good:#2C6E49; --good-bg:#E9F0EA;
  --okc:var(--deep); --ok-bg:var(--tint);
  --warn:#8A6114; --warn-bg:#F7EEDD;
  --bad:#A3301F;  --bad-bg:#F7E7E3;

  /* Type */
  --font:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* System constants — the kit mandates zero radius everywhere. */
  --radius:0;
}

/* Archivo 400/700 is loaded via <link> in build/build.mjs (with preconnect) —
   deliberately not @import'ed here, which would serialise the request behind
   this stylesheet. The stack falls back to system sans if it fails to load. */

*{box-sizing:border-box}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font:400 15px/1.55 var(--font);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--deep);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,strong,b{font-weight:700}
.maf-wrap{max-width:860px;margin:0 auto;padding:24px 18px 72px}

/* ---- Kicker: 700, 9.5–10px, .13em, uppercase, DEEP ---------------------- */
.maf-crumb,.maf-card-cat,.maf-stat-l,.maf-table th{
  font-weight:700;text-transform:uppercase;letter-spacing:.13em;
}
.maf-crumb{font-size:10px;color:var(--deep);margin-bottom:14px}
.maf-crumb a{color:var(--deep)}

/* ---- Head -------------------------------------------------------------- */
.maf-head{border-top:2px solid var(--ink);padding-top:18px;margin-bottom:22px}
.maf-head h1{
  font-size:clamp(28px,5vw,42px);letter-spacing:-.03em;line-height:1.08;
  margin:0 0 12px;text-wrap:balance;
}
.maf-promise{font-size:16.5px;color:var(--muted);margin:0 0 10px;max-width:62ch;text-wrap:pretty}
.maf-meta{font-size:12.5px;color:var(--muted);margin:4px 0}

/* ---- Tool panel -------------------------------------------------------- */
.maf-tool{
  background:var(--card);border:1px solid var(--line);border-top:2px solid var(--ink);
  border-radius:var(--radius);padding:22px;margin:20px 0;
}
/* 190px min so long option labels ("Basic economy / cheapest fare") aren't
   clipped by the native select, which can't ellipsise. */
.maf-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
/* Labels bottom-align to a 2-line box so a wrapped label keeps its input on the
   same baseline as its neighbours. */
.maf-field{display:grid;grid-template-rows:auto 1fr;gap:6px;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.11em;color:var(--deep);align-items:end}
.maf-field>span{display:flex;align-items:flex-end;min-height:2.4em;line-height:1.2}
.maf-field>span em{color:var(--bad);font-style:normal}
.maf-field input,.maf-field select{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:var(--radius);
  font:400 15px/1.4 var(--font);background:#fff;color:var(--ink);
  text-transform:none;letter-spacing:0;
}
.maf-field input:focus,.maf-field select:focus{outline:2px solid var(--accent);outline-offset:-2px;border-color:var(--accent)}
.maf-actions{grid-column:1/-1;display:flex;gap:10px;margin-top:4px;flex-wrap:wrap}

.maf-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:12px 20px;border-radius:var(--radius);border:1px solid var(--ink);
  background:#fff;color:var(--ink);font:700 14px/1 var(--font);
  letter-spacing:-.01em;cursor:pointer;
}
.maf-btn:hover{background:var(--tint)}
.maf-btn-primary{background:var(--ink);border-color:var(--ink);color:#fff}
.maf-btn-primary:hover{background:var(--deep)}

/* Optional 📷 scan — only present when the hub has a vision key configured. */
.maf-btn-scan{border-color:var(--accent);color:var(--deep)}
.maf-btn-scan:hover{background:var(--tint)}
.maf-btn-scan[disabled]{opacity:.55;cursor:progress}
.maf-scan-note{grid-column:1/-1;margin:2px 0 0;padding:10px 13px;font-size:13px;line-height:1.45;
  background:var(--tint);color:var(--deep);border-left:3px solid var(--accent);border-radius:var(--radius)}
.maf-scan-note.is-bad{background:var(--bad-bg);color:var(--bad);border-left-color:var(--bad)}

.maf-examples{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px}
.maf-ex-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--deep)}
.maf-chip{
  font:400 13px/1 var(--font);padding:8px 12px;border:1px solid var(--line);
  background:#fff;color:var(--deep);border-radius:var(--radius);cursor:pointer;
}
.maf-chip:hover{background:var(--tint);border-color:var(--accent)}

/* ---- Result ------------------------------------------------------------ */
.maf-result:empty{display:none}
.maf-result{margin-top:20px}
.maf-verdict{
  font-size:17px;font-weight:700;line-height:1.35;letter-spacing:-.015em;
  padding:15px 17px;border-radius:var(--radius);margin-bottom:16px;
  border-left:3px solid currentColor;text-wrap:pretty;
}
.maf-v-good{background:var(--good-bg);color:var(--good)}
.maf-v-ok{background:var(--ok-bg);color:var(--okc)}
.maf-v-warn{background:var(--warn-bg);color:var(--warn)}
.maf-v-bad{background:var(--bad-bg);color:var(--bad)}

.maf-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:0;margin-bottom:18px;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.maf-stat{background:#fff;padding:13px 15px;box-shadow:1px 0 0 var(--line),0 1px 0 var(--line)}
.maf-stat-v{font-size:23px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.15}
.maf-stat-l{font-size:9.5px;color:var(--muted);margin-top:3px}

/* ---- Tables ------------------------------------------------------------ */
.maf-tablewrap{overflow-x:auto;border:1px solid var(--line);border-top:2px solid var(--ink);border-radius:var(--radius)}
.maf-table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:440px}
.maf-table th{
  position:sticky;top:0;background:var(--tint);text-align:left;font-size:9.5px;
  color:var(--deep);padding:10px 12px;border-bottom:1px solid var(--line);
}
.maf-table td{padding:10px 12px;border-bottom:1px solid var(--line);color:var(--ink)}
.maf-table tr:last-child td{border-bottom:0}
.maf-table .r{text-align:right}.maf-table .num{font-variant-numeric:tabular-nums}
.maf-db td:last-child{color:var(--muted);font-size:12.5px}
.maf-pill{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;padding:3px 9px;border-radius:var(--radius);white-space:nowrap}
.maf-pill-ok{background:var(--good-bg);color:var(--good)}
.maf-pill-warn{background:var(--warn-bg);color:var(--warn)}
.maf-pill-bad{background:var(--bad-bg);color:var(--bad)}
.maf-pill-neut{background:var(--tint);color:var(--deep)}

.maf-steps{margin-top:20px}
.maf-steps h3{font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:var(--deep);margin:0 0 8px}
.maf-steps ul{margin:0;padding-left:18px}
.maf-steps li{margin:7px 0;color:var(--muted);text-wrap:pretty}

/* ---- Monetization ------------------------------------------------------ */
.maf-monetization{margin-top:22px;border-top:1px solid var(--line);padding-top:18px}
.maf-disclosure{font-size:12px;color:var(--muted);margin:0 0 12px;text-wrap:pretty}
.maf-aff-card{background:var(--tint);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.maf-aff-card h3{margin:0 0 6px;font-size:16px;letter-spacing:-.015em}
.maf-aff-card p{margin:0 0 14px;font-size:14px;color:var(--muted);text-wrap:pretty}
.maf-aff-links{display:flex;flex-wrap:wrap;gap:10px}
.maf-btn-aff{background:#fff;border-color:var(--accent);color:var(--deep)}
.maf-btn-aff:hover{background:#fff;border-color:var(--ink)}
.maf-ad{margin:18px 0;min-height:0}

/* ---- Panels ------------------------------------------------------------ */
.maf-panel{margin:34px 0}
.maf-panel h2{font-size:21px;letter-spacing:-.025em;margin:0 0 12px;padding-top:14px;
  border-top:2px solid var(--ink);text-wrap:balance}
.maf-method p,.maf-method li{color:var(--muted);text-wrap:pretty}
.maf-method ul{padding-left:18px}
.maf-method strong{color:var(--ink)}
.maf-method code{font-size:.9em;background:var(--tint);padding:1px 5px}
.maf-note{padding:12px 15px;border-radius:var(--radius);font-size:14px;border-left:3px solid currentColor}
.maf-note-bad{background:var(--bad-bg);color:var(--bad)}
/* Provenance note: "Showing X — matched from '…'". Must read as information
   about the MATCH, never as part of the verified result. */
.maf-note-info{background:var(--tint);color:var(--ink);margin:0 0 14px}

.maf-faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:0 16px;margin:0 0 -1px}
.maf-faq summary{font-weight:700;cursor:pointer;padding:13px 0;list-style:none;letter-spacing:-.015em}
.maf-faq summary::-webkit-details-marker{display:none}
.maf-faq summary::after{content:"+";float:right;color:var(--accent);font-weight:700}
.maf-faq details[open] summary::after{content:"–"}
.maf-faq details p{margin:0 0 14px;color:var(--muted);text-wrap:pretty}

/* ---- Card grid (tool cards + related) ----------------------------------
   Hairlines are drawn by box-shadow on each card so a short last row reads
   as white space, not a hole. Container supplies the top/left edges. */
.maf-cards,.maf-related{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0;
  border-top:2px solid var(--ink);border-left:1px solid var(--line);
}
.maf-card,.maf-relcard{
  display:flex;flex-direction:column;gap:6px;background:var(--card);
  border:0;border-radius:var(--radius);padding:20px;
  box-shadow:1px 0 0 var(--line),0 1px 0 var(--line);
  transition:background .12s;
}
.maf-card:hover,.maf-relcard:hover{text-decoration:none;background:var(--tint)}
.maf-card-cat{font-size:9.5px;color:var(--deep)}
.maf-card strong,.maf-relcard strong{font-size:17px;letter-spacing:-.02em;color:var(--ink);line-height:1.2}
.maf-card-p,.maf-relcard span{font-size:13px;color:var(--muted);line-height:1.5;text-wrap:pretty}

/* 52px icon on a tint chip, per the tool-card pattern */
.maf-ico{width:52px;height:52px;background:var(--tint);display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.maf-ico svg{width:26px;height:26px;display:block}

/* ---- Home hero + lockup ------------------------------------------------ */
.maf-hero{padding:34px 0 22px}
.maf-hero h1{font-size:clamp(30px,6vw,46px);margin:0 0 10px;letter-spacing:-.03em;line-height:1.06;text-wrap:balance}
.maf-hero p{font-size:17px;color:var(--muted);margin:0;max-width:56ch;text-wrap:pretty}
.maf-lockup{display:inline-flex;align-items:center;gap:11px;margin-bottom:20px}
.maf-lockup-tile{width:44px;height:44px;background:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.maf-lockup-tile svg{width:20px;height:20px;display:block}
.maf-lockup-name{font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--deep)}

.maf-foot{margin-top:44px;border-top:2px solid var(--ink);padding-top:18px}
.maf-foot .maf-meta{max-width:70ch;text-wrap:pretty}

@media (max-width:520px){
  .maf-wrap{padding:18px 14px 56px}
  .maf-tool{padding:16px}
  .maf-card,.maf-relcard{padding:16px}
}

/* ============================================================================
   StillGoodFor additions — the programmatic per-product / browse surfaces.
   ========================================================================== */

/* The one-line answer at the top of a product page: the thing the visitor came
   for, set larger than body copy and never below the fold. */
.maf-answer{
  font-size:19px;line-height:1.5;margin:0;text-wrap:pretty;color:var(--ink);
  border-left:3px solid var(--accent);padding-left:14px;
}
@media(max-width:560px){.maf-answer{font-size:17px;padding-left:11px}}

/* Inline CTA back into the interactive tool. */
.maf-cta-link{font-weight:700;color:var(--deep)}

/* Homepage / browse search results reuse .maf-related, but with more, smaller
   cards — cap the grid so 12 hits don't push the page over. */
#sgf-results:empty{display:none}
#sgf-results{margin-top:14px}
#sgf-results .maf-relcard{padding:12px 14px}
#sgf-results .maf-relcard strong{font-size:15px}
/* Status / provenance lines inside the results grid span the full row. */
#sgf-results .sgf-msg{grid-column:1/-1;margin:0;font-size:13.5px;color:var(--muted);line-height:1.55}
#sgf-results .sgf-msg strong{color:var(--ink)}

/* Long category tables: keep the header readable while scrolling the body. */
.maf-db thead th{position:sticky;top:0;background:var(--card);z-index:1}