:root{
  --bg:#0b0d10;
  --bg-elev:#13171b;
  --bg-elev-2:#181d22;
  --ink:#f4f1ed;
  --ink-mute:#b3bcc5;       /* bumped from #a4adb6 for AA */
  --ink-faint:#8a929c;      /* bumped from #6c757f for AA */
  --brass:#b8732e;
  --brass-light:#f0c987;
  --brass-deep:#8a5a23;
  --brass-warm:#c98e3f;     /* CTA gradient top stop, between --brass and --brass-light */
  --rule:#23282e;
  --rule-strong:#2c3239;
  /* Inverse / on-brass text. Used on top of --brass-warm to --brass-deep gradient. */
  --ink-on-brass:#1a0e02;
  /* Device-shell chrome (hero mockup). Slightly elevated above --bg-elev. */
  --device-shell-top:#1a1f24;
  --device-shell-bottom:#0d1115;
  --device-shell-border:#2a3037;
  /* Code/blockquote surface. Pulled out so doc styles match site palette. */
  --code-bg:#1c2228;
  /* Warning palette. Used by safety-rail and recipe-error (recipe.html, /app/).
     Mirrors iOS BTColor.warning family in tone. */
  --warn-edge:#d96a4e;
  --warn-text:#f0c1b3;
  --warn-strong:#ffb39c;
  --radius:14px;
  --radius-lg:18px;
  --maxw:1080px;
  --shadow-card:0 1px 0 rgba(255,255,255,.02) inset, 0 12px 32px -16px rgba(0,0,0,.6);
  --shadow-device:0 30px 80px -20px rgba(0,0,0,.7), 0 8px 24px -8px rgba(184,115,46,.15);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}
body{
  background:
    radial-gradient(1100px 600px at 80% -10%, rgba(184,115,46,.08), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(240,201,135,.04), transparent 55%),
    var(--bg);
  color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%}
a{color:var(--brass-light);text-decoration:none}
a:hover{text-decoration:underline}

/* Type system: kill mid-word hyphenation in display type, balance wrap, prevent
   widow/orphan in headings. Body copy uses pretty-wrap. Mirrors Apple HIG +
   Linear/Vercel conventions: sentence-case headlines, no auto-hyphen on display. */
h1,h2,h3,h4,h5,h6{
  hyphens:manual;
  -webkit-hyphens:manual;
  text-wrap:balance;
  overflow-wrap:break-word;
  word-break:normal;
}
p,li,dd{text-wrap:pretty}

/* Clause-break utility. Hidden below 720px so we don’t force breaks on phones,
   visible at tablet+ where the line budget allows the semantic break. */
.brk-md{display:none}
@media (min-width:720px){
  .brk-md{display:inline}
  .brk-md::after{content:"\A";white-space:pre}
}

/* Mobile-first orphan guard. Use within headings to glue the last two words. */
.nowrap{white-space:nowrap}

/* a11y focus ring */
:focus-visible{
  outline:2px solid var(--brass-light);
  outline-offset:3px;
  border-radius:6px;
}

.skip{position:absolute;left:-999px;top:0;background:#000;color:#fff;padding:.5rem 1rem}
.skip:focus{left:1rem;top:1rem;z-index:10}

/* nav */
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
  max-width:var(--maxw);margin:0 auto;padding:1.25rem 1.5rem;
}
.brand{display:flex;align-items:center;gap:.65rem;color:var(--ink);font-weight:600}
.brand:hover{text-decoration:none}
.brand-logo{flex-shrink:0;display:block}
.brand-name{font-size:1.05rem;letter-spacing:-.01em}
.nav nav{
  display:flex;flex-wrap:wrap;align-items:center;
  column-gap:1.25rem;row-gap:.4rem;
  justify-content:flex-end;
}
.nav nav a{
  color:var(--ink-mute);
  font-size:14px;
}
.nav nav a:hover{color:var(--ink);text-decoration:none}

/* hero */
.hero{
  max-width:var(--maxw);margin:0 auto;padding:3rem 1.5rem 2.5rem;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:2.5rem;
  align-items:center;
}
.hero-copy{text-align:left}
.kicker{
  text-transform:uppercase;letter-spacing:.18em;font-size:11px;
  color:var(--brass-light);margin:0 0 1rem;font-weight:600;
}
.kicker-sm{
  text-transform:uppercase;letter-spacing:.16em;font-size:10px;
  color:var(--brass-light);margin:0 0 .6rem;font-weight:600;
}
h1{
  font:700 clamp(2.4rem,5.6vw,3.8rem)/1.04 -apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;
  margin:0 0 .65rem;letter-spacing:-.025em;text-wrap:balance;
}
.sub{
  margin:0 0 1.4rem;color:var(--brass-light);
  font:500 clamp(1.05rem,1.6vw,1.2rem)/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  letter-spacing:-.005em;
}
.lede{
  max-width:560px;margin:0 0 1.75rem;color:var(--ink-mute);font-size:1.05rem;
  /* `balance` evens line lengths on the short hero lede so we don't
     get a 1- or 2-word orphan on the last line on a narrow phone. */
  text-wrap:balance;line-height:1.6;
}
/* R35: above-the-fold pain + verbatim customer quote (W-13, W-17). */
.hero-pain{
  max-width:560px;margin:0 0 1rem;
  color:var(--ink);font-size:1rem;font-weight:600;
  line-height:1.5;
}
.hero-quote{
  max-width:560px;margin:0 0 .25rem;
  color:var(--brass-light);font-size:.98rem;font-style:italic;
  line-height:1.5;
}
.hero-quote-answer{
  max-width:560px;margin:0 0 1.5rem;
  color:var(--ink-mute);font-size:.95rem;
  line-height:1.5;
}
.cta-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.btn-primary{
  /* App Store-grade lockup: black surface, white type and glyph. The
     download badge has to read as 'official App Store CTA' from
     across the page; brass on brass collapsed the hierarchy when
     the same button sat inside a brass-bordered card. The brass
     accent stays as a 1px hairline so it still belongs to the
     palette. Same shape and padding as before so layout reflows are
     minimal. */
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.85rem 1.4rem;border-radius:999px;
  background:#0b0d10;
  color:#f4f1ed;
  font-weight:600;font-size:.97rem;letter-spacing:.005em;
  border:1px solid rgba(240,201,135,.55);
  box-shadow:0 8px 22px -12px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  text-decoration:none;
}
.btn-primary:hover,.btn-primary:focus-visible{
  transform:translateY(-1px);
  text-decoration:none;
  border-color:var(--brass-light);
  box-shadow:0 12px 28px -12px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 1px rgba(240,201,135,.18);
}
.btn-primary svg{display:block;color:#f4f1ed}
/* Tiny supporting label that sits above the wordmark when a button
   is asked to read like the official Apple badge ('Download on the').
   Hidden by default; opt-in by adding the `btn-store` class. */
.btn-primary .btn-store-pre{display:block;font-size:.62rem;line-height:1;letter-spacing:.06em;text-transform:uppercase;opacity:.78;margin-bottom:.18rem}
.btn-primary .btn-store-stack{display:flex;flex-direction:column;align-items:flex-start;gap:0;line-height:1.05;text-align:left}
.btn-secondary{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.75rem 1.15rem;border-radius:999px;
  background:transparent;color:var(--brass-light);
  font-weight:600;font-size:.92rem;letter-spacing:-.005em;
  border:1px solid rgba(240,201,135,.28);
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.btn-secondary:hover{
  border-color:rgba(240,201,135,.55);
  color:var(--ink);text-decoration:none;
  background:rgba(240,201,135,.06);
}
.cta-note{
  color:var(--ink-mute);font-size:.92rem;
  /* Short price/value strap-line; balance keeps `primers` from being
     stranded on its own line on a 6-inch phone. */
  text-wrap:balance;max-width:34ch;
}

/* hero device mockup */
.hero-device{
  position:relative;
  display:flex;justify-content:center;align-items:center;
  perspective:1200px;
}
/* R53: real hero illustration replaces the SVG phone mockup. The image is
   the visual story: chaos of manuals, ledgers, and brass on the left,
   tidy app data on the right. */
.hero-illustration{
  margin:0;
  display:flex;flex-direction:column;align-items:center;gap:.75rem;
}
.hero-illustration img{
  width:100%;max-width:560px;
  height:auto;display:block;
  border-radius:14px;
  border:1px solid var(--brass-hairline,#5a4220);
  box-shadow:0 18px 48px rgba(0,0,0,.45);
}
.hero-illustration figcaption{
  font-size:.78rem;letter-spacing:.04em;
  color:var(--ink-mute,#9b8b73);
  text-align:center;font-style:italic;
  /* Tighter cap + balance so a centered caption can never widow a
     single word ("chaos.") on its own line on mobile. */
  max-width:38ch;line-height:1.4;
  text-wrap:balance;
}
.device-shell{
  position:relative;
  width:280px;height:570px;
  background:linear-gradient(155deg,var(--device-shell-top) 0%,var(--device-shell-bottom) 100%);
  border:1px solid var(--device-shell-border);
  border-radius:42px;
  padding:9px;
  box-shadow:var(--shadow-device);
  transform:rotate(-2.5deg);
}
.device-notch{
  position:absolute;
  top:18px;left:50%;transform:translateX(-50%);
  width:90px;height:24px;
  background:#000;
  border-radius:14px;
  z-index:2;
}
.device-screen{
  width:100%;height:100%;
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg-elev) 100%);
  border-radius:34px;
  overflow:hidden;
  display:flex;flex-direction:column;
  position:relative;
}
.device-status{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 28px 6px;
  font-size:11px;font-weight:600;color:var(--ink);
  letter-spacing:.02em;
}
.device-status-right{display:inline-flex;align-items:center;gap:5px}
.device-title{
  padding:14px 18px 4px;
  font:700 1.6rem/1 -apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;
  letter-spacing:-.02em;color:var(--ink);
}
.device-search{
  margin:6px 18px 10px;
  padding:6px 10px;
  background:rgba(255,255,255,.06);
  border-radius:8px;
  font-size:12px;
  color:var(--ink-faint);
  display:flex;align-items:center;gap:6px;
}
.device-list{
  list-style:none;margin:0;padding:0 8px;
  display:flex;flex-direction:column;gap:2px;
  flex:1;overflow:hidden;
}
.device-list li{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:10px;
}
.device-list li:hover{background:rgba(255,255,255,.03)}
.dl-icon{
  flex-shrink:0;width:32px;height:32px;
  display:grid;place-items:center;
  background:rgba(184,115,46,.1);
  border:1px solid rgba(184,115,46,.25);
  border-radius:8px;
}
.dl-body{flex:1;min-width:0}
.dl-title{
  font-size:12.5px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:-.01em;
}
.dl-sub{
  font-size:10.5px;color:var(--ink-mute);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-top:1px;
}
.dl-meta{
  flex-shrink:0;font-size:11px;font-weight:600;
  color:var(--ink-mute);
}
.dl-fav{color:var(--brass-light);font-size:13px}
.dl-meta-mute{color:var(--ink-faint)}
.device-tabbar{
  display:flex;justify-content:space-around;
  padding:10px 6px 18px;
  border-top:1px solid rgba(255,255,255,.05);
  /* Five tabs in the iOS app (Brass / Loads / Firearms / Range / Armory).
     Font shrunk from 10px so all five labels fit at 240px and 230px shell widths. */
  font-size:9px;color:var(--ink-faint);font-weight:600;letter-spacing:.01em;
}
.device-tabbar span{flex:1;text-align:center;white-space:nowrap}
.device-tabbar .active{color:var(--brass-light)}

/* promise band */
.promise{
  max-width:var(--maxw);margin:1.5rem auto 1rem;padding:0 1.5rem;
}
.promise-grid{
  background:var(--bg-elev);
  border:1px solid var(--rule);
  border-radius:var(--radius-lg);
  padding:2rem 2.25rem;
  display:grid;gap:2rem;
  grid-template-columns:1.4fr 1fr;
  align-items:start;
  box-shadow:var(--shadow-card);
}
.promise-grid h2{
  font:700 1.55rem/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;
  margin:0 0 .9rem;letter-spacing:-.02em;text-wrap:balance;
}
.promise-grid p{margin:0 0 .8rem;color:var(--ink-mute);font-size:1rem;line-height:1.65}
.promise-stack{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.promise-stack li{
  background:var(--bg-elev-2);
  border:1px solid var(--rule);
  border-radius:10px;
  padding:.75rem .95rem;
  display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;
}
.promise-stack span{color:var(--brass-light);font-weight:700;font-size:.95rem;flex-shrink:0;letter-spacing:-.005em}
.promise-stack em{color:var(--ink-mute);font-style:normal;font-size:.9rem;text-align:right}
/* Mobile: stack the gold label above the description so the value text
   gets the full row width instead of squeezing into the right column.
   Without this, items like "Down to the primer / Cost-per-round that
   recalculates as components change." wrap onto five lines on a 390px
   phone with single-word orphans. */
@media (max-width:520px){
  .promise-stack li{
    flex-direction:column;align-items:flex-start;gap:.2rem;
  }
  .promise-stack em{text-align:left;font-size:.92rem;line-height:1.45}
}

/* features */
.features{max-width:var(--maxw);margin:0 auto;padding:3.5rem 1.5rem 1rem}
.features h2{
  font:700 1.7rem/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;
  margin:0 0 .8rem;letter-spacing:-.02em;
}
.features-lede{
  color:var(--ink-mute);max-width:62ch;margin:0 0 1.75rem;
  font-size:1rem;line-height:1.55;
}
.grid{
  list-style:none;padding:0;margin:0;
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.grid li{
  position:relative;
  background:var(--bg-elev);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:1.4rem 1.4rem 1.3rem;
  overflow:hidden;
  box-shadow:var(--shadow-card);
}
.grid li::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--brass) 30%,var(--brass-light) 50%,var(--brass) 70%,transparent 100%);
  opacity:.5;
}
.grid h3{
  margin:.7rem 0 .4rem;font-size:1.02rem;color:var(--ink);
  letter-spacing:-.005em;font-weight:600;
}
.grid p{margin:0;color:var(--ink-mute);font-size:.95rem;line-height:1.6}
.feat-icon{
  display:inline-grid;place-items:center;
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,rgba(184,115,46,.18) 0%,rgba(240,201,135,.06) 100%);
  border:1px solid rgba(184,115,46,.4);
  color:var(--brass-light);
}

/* value stack */
.stack{
  max-width:var(--maxw);margin:3.5rem auto 1rem;padding:0 1.5rem;
}
.stack h2{
  font:700 1.7rem/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;
  margin:0 0 .35rem;letter-spacing:-.02em;
}
.stack-lede{margin:0 0 1.4rem;color:var(--ink-mute);font-size:1rem}
.stack-list{
  list-style:none;margin:0;padding:1rem 1.25rem;
  background:var(--bg-elev);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  /* Two-column grid so a long capability label cannot push the
     'Included' marker onto a second line. The check column auto-
     sizes; the label column takes the rest. */
  display:grid;
  grid-template-columns:1fr;
  gap:0;
}
.stack-list li{
  display:grid;
  grid-template-columns:1.25rem 1fr;
  align-items:start;
  gap:.65rem;
  padding:.55rem 0;
  font-size:.97rem;
  border-bottom:1px dashed var(--rule);
  line-height:1.45;
}
.stack-list li:last-child{border-bottom:none}
.stack-list li::before{
  content:"";
  display:inline-block;
  width:1.05rem;height:1.05rem;
  margin-top:.18rem;
  background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='%23f0c987' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M4 10.5l4 4 8-9'/></svg>");
  flex-shrink:0;
}
.stack-name{color:var(--ink);font-weight:500}
/* Visually hidden marker, kept in DOM for screen-reader pages that
   skim the list as a definition list. */
.stack-val{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.stack-total{
  margin-top:1.1rem;padding:1.4rem 1.5rem;
  background:linear-gradient(135deg,var(--bg-elev-2) 0%,var(--bg-elev) 100%);
  border:1px solid var(--brass-deep);
  border-radius:var(--radius);
  text-align:center;
}
.stack-total p{margin:.25rem 0;color:var(--ink-mute);font-size:.95rem}
.stack-total-val{color:var(--ink);font-weight:600;font-size:1.05rem}
.stack-price{
  color:var(--ink);margin-top:.7rem;font-size:1.05rem;
  /* Same one-line value strap; tighten + balance so the dot-separated
     phrases break in pleasant, even chunks on mobile. */
  text-wrap:balance;max-width:36ch;
}
.stack-price strong{color:var(--brass-light)}
.stack-foot{margin-top:.9rem}
.stack-foot a{color:var(--brass-light);font-weight:600;text-decoration:none}
.stack-foot a:hover{text-decoration:underline}

/* Pro tier (R8) - the one place subscriptions enter the conversation. Visually
   distinct from the base app sections so the reader knows it's optional and
   additive, never required. */
.pro{max-width:var(--maxw);margin:3.5rem auto 1rem;padding:0 1.5rem}
.pro-inner{
  border:1px solid rgba(240,201,135,.28);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(240,201,135,.06), rgba(240,201,135,.015));
  padding:2rem 1.85rem 1.85rem;
}
.pro-kicker{color:var(--brass-light);margin:0 0 .35rem}
.pro h2{
  font:700 1.7rem/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;
  letter-spacing:-.02em;
  margin:0 0 .9rem;
  color:var(--ink);
  max-width:30ch;
}
.pro-lede{color:var(--ink-mute);font-size:1rem;line-height:1.55;margin:0 0 1.4rem;max-width:62ch}
.pro-grid{
  list-style:none;padding:0;margin:0 0 1.4rem;
  display:grid;gap:.85rem 1.15rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.pro-grid li{
  border:1px solid var(--rule);
  border-radius:12px;
  padding:.95rem 1.05rem;
  background:var(--bg-elev);
  display:flex;flex-direction:column;gap:.3rem;
}
.pro-grid strong{color:var(--ink);font-size:.98rem;font-weight:600}
.pro-grid span{color:var(--ink-mute);font-size:.9rem;line-height:1.45}
.pro-price{
  margin:.4rem 0 0;color:var(--ink-mute);font-size:.97rem;
  /* Pricing line with two clauses; balance evens out the wrap on
     phones so the trailing sentence doesn't widow a single word. */
  text-wrap:balance;
}
.pro-price strong{color:var(--brass-light);margin-right:.3rem}
.pro-cta{margin:1.1rem 0 0}
.pro-notify{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1rem;border:1px solid var(--brass);border-radius:.6rem;color:var(--brass-light);text-decoration:none;font-size:.95rem;font-weight:500;transition:background-color .15s ease,color .15s ease}
.pro-notify:hover{background:var(--brass);color:var(--ink-strong);text-decoration:none}
@media (max-width:600px){
  .pro-inner{padding:1.5rem 1.25rem 1.35rem}
  .pro h2{font-size:1.4rem}
}

/* who it's for */
.who{max-width:var(--maxw);margin:3.5rem auto 1rem;padding:0 1.5rem}
.who h2{
  font:700 1.7rem/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;
  margin:0 0 1.4rem;letter-spacing:-.02em;
}
.who-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.who-grid > div{
  position:relative;
  background:var(--bg-elev);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:1.4rem 1.4rem;
  overflow:hidden;
  box-shadow:var(--shadow-card);
}
.who-grid > div::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--brass) 50%,transparent 100%);
  opacity:.4;
}
.who-grid h3{margin:0 0 .55rem;font-size:1.02rem;color:var(--ink);font-weight:600;letter-spacing:-.005em}
.who-grid p{margin:0;color:var(--ink-mute);font-size:.95rem;line-height:1.6}

/* learn page byline (article footer, E-E-A-T signal) */
.byline{
  margin-top:2.4rem;padding-top:1.2rem;
  border-top:1px solid var(--rule);
  color:var(--ink-mute);font-size:.88rem;line-height:1.6;
  font-style:italic;
}

/* swap (community pain → BrassTracker answer) */
.swap{max-width:var(--maxw);margin:3.5rem auto 1rem;padding:0 1.5rem}
.swap h2{
  font:700 1.7rem/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;
  margin:0 0 .55rem;letter-spacing:-.02em;
}
.swap-lede{margin:0 0 1.4rem;color:var(--ink-mute);font-size:.98rem;max-width:62ch;line-height:1.6}
.swap-list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.swap-list li{
  display:grid;grid-template-columns:1fr auto 1.2fr;align-items:center;gap:1rem;
  background:var(--bg-elev);border:1px solid var(--rule);border-radius:var(--radius);
  padding:.95rem 1.2rem;box-shadow:var(--shadow-card);
}
.swap-old{color:var(--ink-mute);text-decoration:line-through;text-decoration-color:rgba(212,160,90,.45);font-size:.96rem}
.swap-arrow{color:var(--brass);font-weight:700;font-size:1.1rem;justify-self:center}
.swap-new{color:var(--ink);font-weight:500;font-size:.98rem;line-height:1.5}
.swap-foot{margin:1.2rem 0 0;color:var(--ink-mute);font-size:.9rem;font-style:normal;max-width:62ch;line-height:1.55}
@media (max-width:640px){
  .swap-list li{grid-template-columns:1fr;gap:.35rem;padding:.85rem 1rem}
  .swap-arrow{display:none}
  .swap-old{font-size:.92rem}
}

/* breadcrumb on /learn/ articles */
.breadcrumb{
  font-size:.88rem;color:var(--ink-mute);margin:0 0 1.4rem;
  letter-spacing:.005em;
}
.breadcrumb a{color:var(--ink-mute);text-decoration:none;border-bottom:1px solid transparent}
.breadcrumb a:hover{color:var(--brass);border-bottom-color:rgba(212,160,90,.45)}
.breadcrumb span{color:var(--ink)}

/* recipe-link demo (shows the /r/ URL format) */
.recipe-link{max-width:var(--maxw);margin:3.5rem auto 1rem;padding:0 1.5rem}
.recipe-link h2{
  font:700 1.7rem/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;
  margin:0 0 .55rem;letter-spacing:-.02em;
}
.recipe-link-lede{margin:0 0 1.4rem;color:var(--ink-mute);font-size:.98rem;max-width:62ch;line-height:1.6}
.recipe-link-demo{
  background:var(--bg-elev);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1.4rem 1.5rem;box-shadow:var(--shadow-card);text-align:center;
}
.recipe-link-url{
  display:inline-block;max-width:100%;
  font:600 1.1rem/1.4 ui-monospace,Menlo,Consolas,monospace;
  color:var(--brass);background:rgba(212,160,90,.08);
  padding:.55rem 1rem;border-radius:8px;letter-spacing:0;
  word-break:normal;overflow-wrap:anywhere;white-space:normal;
}
.recipe-link-foot{margin:.95rem 0 0;color:var(--ink-mute);font-size:.92rem;line-height:1.55}
@media (max-width:640px){
  .recipe-link-url{font-size:.85rem;padding:.5rem .75rem}
}
@media (max-width:380px){
  .recipe-link-url{font-size:.78rem;padding:.45rem .65rem}
}

/* related-guides (R7 IA-2, R52 retighten) - appended below learn-page
   article body. Renders 3 curated cross-link cards. Visually muted vs
   the article so the hierarchy stays "article first, then go deeper".
   Spacing was too generous; the cards looked orphaned from the body
   above. Top margin tightened, hairline rule kept light, gap reduced. */
.related-guides{
  margin:1.75rem 0 .25rem;
  padding:1.1rem 0 0;
  border-top:1px solid var(--rule);
}
.related-guides h2{
  font:600 1.05rem/1.25 -apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;
  margin:0 0 .8rem;letter-spacing:-.005em;color:var(--brass-light);
  text-transform:uppercase;font-size:.8rem;letter-spacing:.08em;
}
.related-grid{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;grid-template-columns:repeat(3,1fr)}
.related-grid > li{margin:0;padding:0}
.related-card{
  display:block;background:var(--bg-elev);border:1px solid var(--rule);border-radius:var(--radius);
  padding:.85rem .95rem;text-decoration:none;color:inherit;height:100%;
  transition:border-color .15s ease, transform .15s ease;
}
.related-card:hover{border-color:var(--brass);transform:translateY(-1px)}
.related-card h3{margin:0 0 .25rem;font-size:.95rem;color:var(--ink);font-weight:600;letter-spacing:-.005em}
.related-card p{margin:0;color:var(--ink-mute);font-size:.84rem;line-height:1.5}
@media (max-width:760px){
  .related-grid{grid-template-columns:1fr}
}

/* R52: Previous / Next lesson pager. Sits below related-guides on
   every /learn/ article. Two equal-width cards on desktop, stacked
   on phones. Uses the same surface tokens as the related cards so
   the article footer reads as one cohesive cluster. */
.lesson-pager{
  margin:1.5rem 0 .25rem;
  padding:1.1rem 0 0;
  border-top:1px solid var(--rule);
}
.pager-position{
  margin:0 0 .75rem;
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-mute);font-weight:500;
}
.pager-grid{
  display:grid;gap:.6rem;
  grid-template-columns:repeat(2,1fr);
}
.pager-card{
  display:flex;flex-direction:column;gap:.3rem;
  padding:.95rem 1.05rem;
  background:var(--bg-elev);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  text-decoration:none;color:inherit;
  transition:border-color .15s ease, transform .15s ease;
  min-height:60px;
}
.pager-card:hover{border-color:var(--brass);transform:translateY(-1px)}
.pager-card.pager-prev{align-items:flex-start;text-align:left}
.pager-card.pager-next{align-items:flex-end;text-align:right;grid-column:2}
.pager-card.pager-prev:only-child,
.pager-card.pager-next:only-child{grid-column:auto}
.pager-row{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brass-light);font-weight:600;
}
.pager-arrow{display:block;color:var(--brass-light)}
.pager-title{
  font-size:.97rem;color:var(--ink);font-weight:600;
  letter-spacing:-.005em;line-height:1.3;
}
@media (max-width:560px){
  .pager-grid{grid-template-columns:1fr}
  .pager-card.pager-next{grid-column:auto;align-items:flex-start;text-align:left}
}

/* learn-block ("From the bench" link cards on home) */
.learn-block{max-width:var(--maxw);margin:3.5rem auto 1rem;padding:0 1.5rem}
.learn-block h2{
  font:700 1.7rem/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;
  margin:0 0 .55rem;letter-spacing:-.02em;
}
.learn-block-lede{margin:0 0 1.4rem;color:var(--ink-mute);font-size:.98rem;max-width:62ch;line-height:1.6}
.learn-block-grid{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
.learn-block-grid > li{margin:0;padding:0}
.learn-block-grid a{
  display:block;background:var(--bg-elev);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1.2rem 1.35rem;box-shadow:var(--shadow-card);text-decoration:none;color:inherit;
}
.learn-block-grid h3{margin:0 0 .45rem;font-size:1.02rem;color:var(--ink);font-weight:600;letter-spacing:-.005em}
.learn-block-grid p{margin:0;color:var(--ink-mute);font-size:.94rem;line-height:1.55}
.learn-block-foot{margin:1.2rem 0 0;font-size:.96rem}
.learn-block-foot a{color:var(--brass);text-decoration:none;font-weight:600}
.learn-block-foot a:hover{text-decoration:underline}
@media (max-width:640px){
  .learn-block-grid{grid-template-columns:1fr}
}

/* faq */
.faq{max-width:var(--maxw);margin:3.5rem auto 1rem;padding:0 1.5rem}
.faq h2{
  font:700 1.7rem/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;
  margin:0 0 1.4rem;letter-spacing:-.02em;
}
.faq-grid{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
.faq-grid > div{
  background:var(--bg-elev);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:1.25rem 1.35rem;
  box-shadow:var(--shadow-card);
}
.faq-grid h3{margin:0 0 .5rem;font-size:1rem;color:var(--ink);font-weight:600;letter-spacing:-.005em}
.faq-grid p{margin:0;color:var(--ink-mute);font-size:.94rem;line-height:1.6}

/* closing CTA */
.cta-final{
  max-width:var(--maxw);margin:4rem auto 1rem;padding:0 1.5rem;
}
.cta-final-inner{
  background:
    radial-gradient(800px 300px at 50% 0%, rgba(184,115,46,.18), transparent 70%),
    var(--bg-elev);
  border:1px solid var(--brass-deep);
  border-radius:var(--radius-lg);
  padding:3rem 2rem;
  text-align:center;
  box-shadow:var(--shadow-card);
}
.cta-final-inner h2{
  font:700 clamp(1.7rem,3vw,2.2rem)/1.15 -apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;
  margin:0 0 .85rem;letter-spacing:-.025em;text-wrap:balance;
}
.cta-final-inner p{
  max-width:520px;margin:0 auto 1.5rem;
  color:var(--ink-mute);font-size:1.02rem;line-height:1.6;
}
.cta-final-inner .btn-primary{margin:0 auto}
.cta-final-note{
  margin-top:1rem !important;
  font-size:.88rem !important;
  color:var(--ink-faint) !important;
  /* Short ·-separated value strap; balance prevents "tracking"
     orphaning to its own line on phones. */
  text-wrap:balance;
  max-width:34ch;
  margin-left:auto;margin-right:auto;
}

/* legal cards */
.legal-cards{
  max-width:var(--maxw);margin:3rem auto 1rem;padding:0 1.5rem;
  display:grid;gap:.75rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.legal-card{
  display:block;background:var(--bg-elev);border:1px solid var(--rule);
  border-radius:var(--radius);padding:1.1rem 1.2rem;color:var(--ink);
}
.legal-card:hover{border-color:var(--brass);text-decoration:none}
.legal-card h3{margin:0 0 .3rem;font-size:.97rem;color:var(--brass-light);font-weight:600}
.legal-card p{margin:0;color:var(--ink-mute);font-size:.87rem}

/* footer */
footer{
  max-width:var(--maxw);margin:4rem auto 2rem;padding:1.75rem 1.5rem;
  border-top:1px solid var(--rule);
  text-align:center;color:var(--ink-mute);font-size:.88rem;
}
footer p{margin:.25rem 0}
/* Easter egg: when the bench opened. Subdued italic so it reads as a
   craftsman's mark in the corner, not a metric. */
.footer-bench{
  margin-top:.85rem !important;
  font-size:.78rem;
  color:var(--ink-faint);
  letter-spacing:.04em;
  font-style:italic;
}

/* legal page (markdown rendered) */
.doc{
  max-width:760px;margin:1rem auto 4rem;padding:1rem 1.5rem;
  position:relative;
}
.doc h1{font-size:2rem;margin:1.5rem 0 1rem}
.doc h2{font-size:1.25rem;margin:2rem 0 .5rem;color:var(--brass-light);border-bottom:1px solid var(--rule);padding-bottom:.4rem}
.doc h3{font-size:1.05rem;margin:1.5rem 0 .5rem}
.doc p,.doc li{color:var(--ink);line-height:1.65}
.doc ul,.doc ol{padding-left:1.4rem}
.doc code{background:var(--code-bg);padding:.1em .35em;border-radius:5px;font-size:.92em}
.doc pre{background:var(--code-bg);padding:.9rem 1rem;border-radius:9px;overflow-x:auto}
.doc table{border-collapse:collapse;width:100%;margin:1rem 0}
.doc th,.doc td{border:1px solid var(--rule);padding:.45rem .65rem;text-align:left;font-size:.92rem}
.doc th{background:var(--code-bg)}
.doc blockquote{
  border-left:3px solid var(--brass);
  margin:1rem 0;padding:.5rem 1rem;color:var(--ink-mute);
  background:var(--bg-elev);border-radius:0 9px 9px 0;
}
.doc a{color:var(--brass-light)}
.doc hr{border:none;border-top:1px solid var(--rule);margin:2rem 0}

/* hover transitions */
@media (prefers-reduced-motion: no-preference){
  .grid li,.legal-card,.who-grid > div,.faq-grid > div{transition:transform .18s ease,border-color .18s ease}
  .grid li:hover,.legal-card:hover,.who-grid > div:hover,.faq-grid > div:hover{transform:translateY(-2px);border-color:var(--rule-strong)}
  .device-shell{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
  .hero:hover .device-shell{transform:rotate(-1deg) translateY(-4px)}
}

/* tablet */
@media (max-width:920px){
  .hero{
    grid-template-columns:1fr;
    text-align:center;
    padding:2.5rem 1.5rem 2rem;
    gap:2rem;
  }
  .hero-copy{text-align:center}
  .lede{margin-left:auto;margin-right:auto}
  .cta-row{justify-content:center}
  .device-shell{transform:rotate(-1.5deg) scale(.92)}
  .promise-grid{grid-template-columns:1fr;padding:1.75rem 1.6rem}
  .faq-grid{grid-template-columns:1fr}
}

/* mobile */
@media (max-width:600px){
  .nav{padding:.85rem 1.1rem;gap:.5rem}
  .brand-name{font-size:1rem}
  .nav nav{
    width:100%;justify-content:flex-start;
    column-gap:1rem;row-gap:.35rem;
    padding-top:.25rem;
    border-top:1px solid rgba(255,255,255,.05);
  }
  .nav nav a{font-size:13px;padding:.25rem 0}
  .hero{padding:2rem 1.25rem 1.5rem}
  h1{font-size:clamp(2rem,9vw,2.6rem)}
  .lede{font-size:1rem}
  .cta-note{font-size:.85rem}
  .promise-grid{padding:1.4rem 1.25rem}
  .features,.stack,.who,.faq,.cta-final{padding-left:1.25rem;padding-right:1.25rem}
  .stack-list{padding:.85rem 1rem}
  .stack-list li{padding:.55rem 0}
  .cta-final-inner{padding:2.25rem 1.25rem}
  .device-shell{width:240px;height:490px}
}

/* ===== Learn hub + primer pages =====
   Reuses the same chrome as the legal pages (the .doc article block in
   LEGAL_TEMPLATE), so we only need a few extra rules for the grid of
   primer cards on /learn/ and the disclaimer footer. */

/* Crayon easter egg: hidden link from the /learn/ hub to bulletz-4-adultz.
   Tucked in the top-right corner. Sizing/position handled inline so a
   stale stylesheet can never blow it up. CSS only handles hover feedback. */
.crayon-egg:hover,
.crayon-egg:focus-visible{
  opacity:1 !important;
  transform:rotate(35deg) scale(1.25) !important;
  outline:none;
}
.crayon-egg:focus-visible{
  outline:2px dashed var(--brass);
  outline-offset:4px;
  border-radius:4px;
}

/* Bulletz 4 Adultz hero logo. Sits at the top of the destination page,
   tilted slightly to keep the hand-drawn feel of the rest of the page. */
.crayon-logo-figure{
  margin:0 auto 1.5rem;
  padding:0;
  text-align:center;
  max-width:520px;
}
.crayon-logo{
  display:block;
  width:100%;
  height:auto;
  max-width:480px;
  margin:0 auto;
  border-radius:14px 18px 12px 16px;
  border:2px dashed #f0c987;
  transform:rotate(-1deg);
}
@media (max-width:780px){
  .crayon-logo{max-width:88vw}
}

/* Visually-hidden text for screen readers only. */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Vintage manual-style illustrations on /learn/ pages.
   Replaces the old hand-coded SVGs. Used by all 8 articles that
   carry an illustration (cartridge anatomy, workflow, group sizes,
   velocity histogram, bolt-action, shotshell). */
.learn-illus{
  display:block;
  width:100%;
  max-width:760px;
  height:auto;
  margin:1.5rem auto;
  border-radius:8px;
  border:1px solid var(--rule);
  background:#0b0d10;
}

.hub-lede{
  color:var(--ink-mute);
  font-size:1.05rem;
  margin:.25rem 0 1.5rem;
  max-width:55ch;
}

.learn-grid{
  list-style:none;
  padding:0;
  margin:0 0 2rem;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1rem;
}

.learn-card{
  display:block;
  background:var(--bg-elev);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:1.25rem 1.35rem;
  text-decoration:none;
  color:inherit;
  transition:border-color .15s ease, transform .15s ease;
}

.learn-card:hover,
.learn-card:focus-visible{
  border-color:var(--brass);
  transform:translateY(-1px);
}
.learn-card:focus-visible{
  outline:2px solid var(--brass-light);
  outline-offset:3px;
}

.learn-card h2{
  font-size:1.1rem;
  margin:0 0 .35rem;
  color:var(--ink);
}

.learn-card p{
  margin:0;
  color:var(--ink-mute);
  font-size:.95rem;
  line-height:1.45;
}

.hub-foot{
  margin-top:2rem;
  padding:1rem 1.15rem;
  border-radius:10px;
  background:rgba(217,106,78,.07);
  border:1px solid rgba(217,106,78,.25);
  font-size:.9rem;
  color:var(--ink-mute);
}

/* IA-3 (R8) - cohort gateway on /learn/ hub. Three opinionated cards above
   the full guide index, so a first-time visitor lands on the path that
   matches the bench they actually load on. */
.cohort-heading{
  font-size:1.35rem;
  margin:1.25rem 0 .85rem;
  color:var(--ink);
  letter-spacing:-.01em;
}

.cohort-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1rem;
  margin:0 0 2.5rem;
}

.cohort-card{
  background:linear-gradient(180deg, rgba(240,201,135,.045), rgba(240,201,135,.015));
  border:1px solid rgba(240,201,135,.22);
  border-radius:var(--radius);
  padding:1.35rem 1.4rem 1.15rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}

.cohort-card h2{
  font-size:1.15rem;
  margin:0;
  color:var(--ink);
  letter-spacing:-.005em;
}

.cohort-desc{
  margin:0;
  color:var(--ink-mute);
  font-size:.93rem;
  line-height:1.5;
}

.cohort-links{
  list-style:none;
  padding:0;
  margin:.35rem 0 0;
  display:flex;
  flex-direction:column;
  gap:.45rem;
}

.cohort-links a{
  color:var(--ink);
  text-decoration:none;
  font-size:.95rem;
  padding:.45rem .65rem;
  margin:0 -.65rem;
  border-radius:8px;
  border:1px solid transparent;
  transition:border-color .15s ease, background-color .15s ease;
}

.cohort-links a:hover,
.cohort-links a:focus-visible{
  border-color:var(--brass);
  background:rgba(240,201,135,.06);
}
.cohort-links a:focus-visible{
  outline:2px solid var(--brass-light);
  outline-offset:3px;
}

.cohort-links a::before{
  content:"\2192";
  color:var(--brass);
  margin-right:.5rem;
  opacity:.75;
}

.all-heading{
  font-size:1.2rem;
  margin:.5rem 0 1rem;
  color:var(--ink);
  letter-spacing:-.005em;
}

@media (max-width:600px){
  .learn-grid{grid-template-columns:1fr}
  .cohort-grid{grid-template-columns:1fr}
}

/* learn-page app callout (injected by build.py) */
.app-callout{
  max-width:760px;margin:2.5rem auto 4rem;padding:0 1.5rem;
}
.app-callout-inner{
  border:1px solid rgba(240,201,135,.22);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(240,201,135,.05), rgba(240,201,135,.02));
  padding:1.5rem 1.5rem 1.25rem;
  text-align:center;
}
.app-callout-inner h2{
  margin:0 0 .35rem;font-size:1.15rem;letter-spacing:-.01em;
  color:var(--brass-light);
}
.app-callout-inner p{
  margin:.25rem 0;color:var(--ink-mute);font-size:.97rem;line-height:1.45;
}
.app-callout-cta{margin-top:1rem !important}
.app-callout-cta .btn-primary{display:inline-flex;margin:0 auto}

/* learn-page reference figures (R15) */
.learn-figure{
  margin:1.5rem 0 1.75rem;
  padding:0;
  border:1px solid rgba(240,201,135,.18);
  border-radius:10px;
  background:#0b0d10;
  overflow:hidden;
}
.learn-figure svg{
  display:block;
  width:100%;
  height:auto;
  max-height:240px;
}
.learn-figure img{
  display:block;
  width:100%;
  height:auto;
  max-height:420px;
  object-fit:contain;
  background:#fff8ec;
}
.learn-figure figcaption{
  padding:.55rem .9rem .7rem;
  color:var(--ink-mute);
  font-size:.86rem;
  line-height:1.35;
  border-top:1px solid rgba(240,201,135,.10);
  text-align:center;
}

/* Bulletz 4 Adultz crayon Easter egg (R15) */
.crayon-link{
  display:inline-flex;align-items:center;gap:.4rem;
  margin-left:.5rem;
  padding:.15rem .55rem;
  border:1.5px dashed rgba(240,201,135,.35);
  border-radius:14px 18px 12px 16px;
  font-family:"Comic Sans MS","Marker Felt","Chalkduster",cursive;
  font-size:.78rem;color:#f0c987;
  text-decoration:none;
  transform:rotate(-1deg);
  transition:transform .15s;
}
.crayon-link:hover{transform:rotate(1deg) scale(1.05)}
.crayon-page h1,.crayon-page h2,.crayon-page h3{
  font-family:"Comic Sans MS","Marker Felt","Chalkduster",cursive;
  letter-spacing:.5px;
}
.crayon-page p,.crayon-page li{
  font-family:"Comic Sans MS","Marker Felt","Chalkduster",cursive;
  font-size:1.05rem;line-height:1.6;
}
.crayon-page .learn-figure{
  border-style:dashed;border-width:2px;
  border-radius:18px 22px 16px 20px;
  transform:rotate(-.5deg);
}
.crayon-page .learn-figure:nth-of-type(even){transform:rotate(.7deg)}
.crayon-disclaimer{
  border:2px dashed #f0c987;
  border-radius:14px 18px 12px 16px;
  padding:1rem 1.25rem;
  background:rgba(240,201,135,.05);
  color:#f0c987;
  font-family:"Comic Sans MS","Marker Felt","Chalkduster",cursive;
  margin:2rem 0;
}

/* ===== Why BrassTracker (moat differentiators) ===== */
.moat{
  max-width:var(--maxw);margin:3.5rem auto 1rem;padding:0 1.5rem;
}
.moat-kicker{color:var(--brass-light);margin:0 0 .35rem}
.moat h2{
  font-size:clamp(1.6rem,3.4vw,2rem);
  margin:0 0 .65rem;color:var(--ink);letter-spacing:-.02em;
}
.moat-lede{
  color:var(--ink-mute);font-size:1rem;line-height:1.55;
  margin:0 0 1.6rem;max-width:62ch;
}
.moat-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;
}
.moat-grid li{
  position:relative;
  background:var(--bg-elev);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:1.4rem 1.4rem 1.3rem 4.2rem;
  min-height:44px; /* tap target safety on touch */
}
.moat-num{
  position:absolute;top:1.25rem;left:1.4rem;
  font:700 1.4rem/1 -apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;
  color:var(--brass-light);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.moat-grid h3{
  margin:0 0 .35rem;font-size:1.05rem;color:var(--ink);
  letter-spacing:-.01em;
}
.moat-grid p{margin:0;color:var(--ink-mute);font-size:.95rem;line-height:1.55}
@media (prefers-reduced-motion: no-preference){
  .moat-grid li{transition:transform .18s ease,border-color .18s ease}
  .moat-grid li:hover{transform:translateY(-2px);border-color:var(--rule-strong)}
}

/* ===== Three-screen showcase ===== */
.screens{
  max-width:var(--maxw);margin:3.5rem auto 1rem;padding:0 1.5rem;
}
.screens-kicker{color:var(--brass-light);margin:0 0 .35rem}
.screens h2{
  font-size:clamp(1.6rem,3.4vw,2rem);
  margin:0 0 .65rem;color:var(--ink);letter-spacing:-.02em;
}
.screens-lede{
  color:var(--ink-mute);font-size:1rem;line-height:1.55;
  margin:0 0 1.8rem;max-width:62ch;
}
.screens-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;
  align-items:start;
}
.screen-item{margin:0;display:flex;flex-direction:column;align-items:center;gap:1rem}
.screen-item figcaption{
  color:var(--ink-mute);font-size:.88rem;line-height:1.5;
  text-align:center;max-width:24ch;
}
/* Smaller, upright phone for the showcase row. Reuses .device-shell base. */
.screen-shell{
  width:240px;height:490px;
  transform:none;            /* no tilt in the showcase row */
}
.screen-meta{
  padding:0 18px 8px;
  font-size:11px;color:var(--ink-mute);letter-spacing:.01em;
}
.screen-cards{
  list-style:none;margin:0;padding:0 12px;
  display:flex;flex-direction:column;gap:8px;flex:1;
}
.screen-cards li{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
  border-radius:10px;padding:9px 10px;
}
.sc-head{display:flex;justify-content:space-between;gap:6px;margin-bottom:5px}
.sc-rifle{font-size:11.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.sc-load{font-size:10.5px;color:var(--brass-light)}
.sc-stats{display:flex;gap:10px;font-size:10px;color:var(--ink-mute);margin-bottom:7px}
.sc-actions{display:flex;gap:5px}
.sc-actions span{
  flex:1;text-align:center;
  background:rgba(184,115,46,.12);
  border:1px solid rgba(184,115,46,.28);
  color:var(--brass-light);
  border-radius:6px;padding:5px 2px;
  font-size:9.5px;font-weight:600;letter-spacing:.01em;
}
.screen-hero{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  padding:6px 14px 10px;
}
.sh-stat{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
  border-radius:8px;padding:8px 6px;text-align:center;
}
.sh-num{display:block;font-size:14px;font-weight:700;color:var(--brass-light);letter-spacing:-.02em}
.sh-lbl{display:block;font-size:8.5px;color:var(--ink-mute);margin-top:2px;letter-spacing:.02em;text-transform:uppercase}
.screen-section{
  padding:8px 18px 4px;
  font-size:9.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em;font-weight:600;
}
.screen-chart{display:block;width:calc(100% - 28px);margin:0 14px 6px;height:auto}
.screen-rows{
  list-style:none;margin:0;padding:0 12px;display:flex;flex-direction:column;gap:4px;
}
.screen-rows li{
  display:flex;justify-content:space-between;
  padding:7px 8px;
  border-radius:7px;
  background:rgba(255,255,255,.02);
  font-size:10.5px;color:var(--ink);
}
.screen-rows li span:last-child{color:var(--brass-light);font-variant-numeric:tabular-nums}
.screen-armory{
  list-style:none;margin:0;padding:0 12px;display:flex;flex-direction:column;gap:8px;flex:1;
}
.screen-armory li{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
  border-radius:9px;padding:9px 10px;
}
.arm-name{font-size:11.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.arm-meta{font-size:10px;color:var(--ink-mute);margin:3px 0 6px}
.arm-bar{
  height:4px;background:rgba(255,255,255,.05);border-radius:3px;overflow:hidden;
}
.arm-bar span{
  display:block;height:100%;
  background:linear-gradient(90deg,var(--brass) 0%,var(--brass-light) 100%);
}

/* ===== Responsive: moat + screens ===== */
@media (max-width:920px){
  .moat-grid{grid-template-columns:1fr}
  .screens-grid{grid-template-columns:1fr;gap:2.25rem;justify-items:center}
}
@media (max-width:600px){
  .moat,.screens{padding-left:1.25rem;padding-right:1.25rem}
  .moat-grid li{padding:1.2rem 1.2rem 1.15rem 3.6rem}
  .moat-num{top:1.05rem;left:1.2rem;font-size:1.2rem}
  .screen-shell{width:230px;height:470px}
}

/* ===== Free reloader's calculators (/tools/*) ============================
   Each tool page uses .doc.tool-doc with a breadcrumb, lede, and stacked
   .tool-card sections. Forms are vertical flow with .tool-row groupings
   that wrap on small screens. Outputs use a definition list with grid
   layout to keep label/value pairs aligned. */
.tool-doc .tool-crumb{
  font-size:.85rem;color:var(--ink-mute);margin:0 0 .35rem;
}
.tool-doc .tool-crumb a{color:var(--brass);text-decoration:none;}
.tool-doc .tool-crumb a:hover,.tool-doc .tool-crumb a:focus-visible{text-decoration:underline}
.tool-doc .tool-lede{
  font-size:1.05rem;color:var(--ink-mute);margin:.25rem 0 1.5rem;line-height:1.55;
}
.tool-card{
  margin:1.5rem 0;
  padding:1.25rem 1.35rem;
  border:1px solid rgba(240,201,135,.18);
  border-radius:12px;
  background:rgba(255,255,255,.02);
}
.tool-card h2{
  margin:0 0 .85rem;font-size:1.05rem;letter-spacing:.02em;
}
.tool-card h3{
  margin:1.1rem 0 .55rem;font-size:.95rem;color:var(--brass-warm);
  text-transform:uppercase;letter-spacing:.12em;
}
.tool-card.tool-explainer{
  background:rgba(240,201,135,.04);
  border-color:rgba(240,201,135,.12);
}
.tool-card.tool-explainer p{font-size:.95rem;line-height:1.6;color:var(--ink)}
.tool-card.tool-explainer code{
  background:rgba(0,0,0,.35);padding:.05em .35em;border-radius:4px;
  font-size:.9em;
}

.tool-form{display:flex;flex-direction:column;gap:.85rem}
.tool-row{
  display:flex;flex-wrap:wrap;gap:.85rem;align-items:flex-end;
}
.tool-field{
  display:flex;flex-direction:column;gap:.3rem;
  flex:1 1 160px;min-width:140px;
}
.tool-field-wide{flex:1 1 100%;}
.tool-field span{
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-mute);
}
.tool-field input,
.tool-field select,
.tool-field textarea{
  width:100%;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(240,201,135,.22);
  border-radius:8px;
  color:var(--ink);
  padding:.6rem .7rem;
  font:inherit;
  font-size:.95rem;
  min-height:44px;          /* respect 44pt min-touch */
}
.tool-field textarea{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9rem;line-height:1.4;
  min-height:120px;resize:vertical;
}
.tool-field input:focus,
.tool-field select:focus,
.tool-field textarea:focus{
  outline:2px solid var(--brass);outline-offset:1px;border-color:var(--brass);
}

.tool-help{
  font-size:.85rem;color:var(--ink-mute);margin:.25rem 0 .5rem;line-height:1.5;
}

.tool-output{
  margin:1.1rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:.75rem;
}
.tool-output-wide{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.tool-output > div{
  margin:0;padding:.7rem .85rem;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(240,201,135,.10);
  border-radius:8px;
}
.tool-output dt{
  margin:0;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-mute);
}
.tool-output dd{
  margin:.2rem 0 0;font-size:1.15rem;color:var(--ink);
  font-variant-numeric:tabular-nums;font-weight:600;
}
.tool-output .tool-out-total{
  background:rgba(240,201,135,.10);
  border-color:rgba(240,201,135,.32);
  grid-column:span 2;
}
.tool-output .tool-out-total dd{font-size:1.5rem;color:var(--brass-light)}
@media (max-width:520px){
  .tool-output .tool-out-total{grid-column:auto}
}

/* Tool-page action buttons (Calculate, Reset, etc.). Scoped under
   .tool-form so the App Store badge styling at the top of this file
   stays the source of truth for .btn-primary anywhere else. */
.tool-form button{
  display:inline-block;padding:.7rem 1.1rem;
  background:var(--brass);color:#1a1108;
  border:0;border-radius:8px;font-weight:600;cursor:pointer;
  font-size:.95rem;text-decoration:none;min-height:44px;
}
.tool-form button:hover,
.tool-form button:focus-visible{
  background:var(--brass-light);outline:none;
}

/* Charge ladder table */
.ladder-table{margin:1rem 0 .5rem;overflow-x:auto;}
table.ladder{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;}
table.ladder thead th{
  text-align:left;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-mute);
  border-bottom:1px solid rgba(240,201,135,.2);padding:.55rem .65rem;
}
table.ladder tbody td{
  padding:.55rem .65rem;border-bottom:1px solid rgba(255,255,255,.04);
  font-size:.95rem;
}
table.ladder tbody tr:last-child td{border-bottom:0;}
table.ladder tbody tr:nth-child(odd){background:rgba(255,255,255,.015)}

/* Cartridge spec table */
.cart-table-wrap{margin-top:1rem;overflow-x:auto}
table.cart-table{
  width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;
  font-size:.92rem;min-width:640px;
}
table.cart-table thead th{
  text-align:left;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-mute);
  border-bottom:1px solid rgba(240,201,135,.2);
  padding:.55rem .65rem;background:rgba(0,0,0,.25);
  position:sticky;top:0;
}
table.cart-table tbody td{
  padding:.55rem .65rem;border-bottom:1px solid rgba(255,255,255,.04);
}
table.cart-table tbody tr:nth-child(odd){background:rgba(255,255,255,.015)}
table.cart-table tbody tr:hover{background:rgba(240,201,135,.06)}
table.cart-table tbody tr.cart-desc-row{background:rgba(240,201,135,.025)}
table.cart-table tbody tr.cart-desc-row:hover{background:rgba(240,201,135,.05)}
table.cart-table tbody tr.cart-desc-row td{
  padding:.45rem .9rem .75rem;border-bottom:1px solid rgba(255,255,255,.04);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem;
}
.cart-desc-blurb{font-size:.85rem;color:var(--ink-mute);line-height:1.4;flex:1 1 60%;}
.cart-desc-source{
  font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-mute);background:rgba(240,201,135,.08);
  border:1px solid rgba(240,201,135,.18);border-radius:999px;
  padding:.15rem .55rem;white-space:nowrap;
}

/* ============================================================
   Tool diagrams (hero illustration above the lede on each tool)
   ============================================================ */
.tool-diagram{
  margin:0 0 1.25rem 0;
  display:block;
  border-radius:14px;
  overflow:hidden;
  background:#0a0c0e;
  border:1px solid rgba(240,201,135,.18);
}
.tool-diagram img{
  display:block;
  width:100%;
  height:auto;
  max-height:340px;
  object-fit:cover;
  object-position:center;
}
@media (max-width:640px){
  .tool-diagram img{max-height:240px}
}

/* ============================================================
   Plain-English glossary card (top of every tool)
   ============================================================ */
.tool-card.tool-glossary{
  background:linear-gradient(180deg, rgba(240,201,135,.04), rgba(240,201,135,.015));
  border:1px solid rgba(240,201,135,.2);
}
.tool-glossary-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:.85rem 1.5rem;
  margin:0;
  padding:0;
}
.tool-glossary-list > div{
  display:block;
  padding:0;
  margin:0;
}
.tool-glossary-list dt{
  font-weight:600;
  color:var(--brass-light);
  font-size:.95rem;
  margin-bottom:.18rem;
  letter-spacing:.01em;
}
.tool-glossary-list dd{
  margin:0;
  font-size:.92rem;
  line-height:1.5;
  color:var(--ink);
}

/* ============================================================
   Inline tooltip badge: <span class="tool-tip" data-tip="...">?</span>
   ============================================================ */
.tool-tip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:50%;
  border:1px solid rgba(240,201,135,.5);
  color:var(--brass-light);
  background:rgba(240,201,135,.08);
  font-size:.72rem;
  font-weight:600;
  line-height:1;
  margin-left:.4rem;
  cursor:help;
  position:relative;
  font-family:ui-sans-serif,system-ui,sans-serif;
  vertical-align:baseline;
}
.tool-tip::after{
  content:attr(data-tip);
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  width:max-content;
  max-width:260px;
  padding:.55rem .7rem;
  background:#16191d;
  border:1px solid rgba(240,201,135,.3);
  border-radius:8px;
  color:var(--ink);
  font-size:.82rem;
  font-weight:400;
  line-height:1.45;
  text-align:left;
  white-space:normal;
  opacity:0;
  pointer-events:none;
  transform-origin:bottom center;
  transition:opacity .15s ease;
  z-index:10;
  box-shadow:0 6px 24px rgba(0,0,0,.45);
}
.tool-tip:hover::after,
.tool-tip:focus::after{opacity:1}

/* ============================================================
   Tab switcher (Zero / Move / Visualize / Math)
   ============================================================ */
.tool-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:0 0 1rem 0;
  padding:.4rem;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(240,201,135,.12);
  border-radius:12px;
}
.tool-tab{
  flex:1 1 auto;
  min-height:44px;
  min-width:80px;
  padding:.55rem .9rem;
  background:transparent;
  border:1px solid transparent;
  border-radius:9px;
  color:var(--ink-mute);
  font-size:.9rem;
  font-weight:600;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
  font-family:inherit;
}
.tool-tab:hover{color:var(--ink)}
.tool-tab[aria-selected="true"],
.tool-tab.is-active{
  background:rgba(240,201,135,.14);
  color:var(--brass-light);
  border-color:rgba(240,201,135,.4);
}
.tool-tab:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:2px;
}

/* ============================================================
   Visualize tab: target + interactive turrets
   ============================================================ */
.viz-stage{
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(220px,300px);
  gap:1.25rem;
  align-items:start;
  margin-top:.5rem;
}
@media (max-width:680px){
  .viz-stage{grid-template-columns:1fr; gap:1.5rem}
}
.viz-target{
  width:100%;
  max-width:420px;
  height:auto;
  background:#0a0c0e;
  border:1px solid rgba(240,201,135,.18);
  border-radius:12px;
  margin:0 auto;
  display:block;
}
.viz-target #viz-poi{transition:cx .25s ease, cy .25s ease}
.viz-turrets{
  display:flex;
  flex-direction:column;
  gap:1rem;
  align-items:stretch;
}
.viz-turret{
  background:rgba(255,255,255,.02);
  border:1px solid rgba(240,201,135,.18);
  border-radius:12px;
  padding:.85rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
}
.viz-turret-label{
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-mute);
  font-weight:600;
}
.viz-turret-knob{
  width:90px;
  height:90px;
  display:block;
  position:relative;
}
.viz-turret-knob svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  transform-origin:50% 50%;
}
.viz-turret-knob svg.viz-turret-dial{
  z-index:1;
  transition:transform .25s ease;
}
.viz-turret-pointer{
  z-index:2;
  pointer-events:none;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.6));
}
.viz-turret-controls{
  display:flex;
  align-items:center;
  gap:.45rem;
  width:100%;
  justify-content:center;
}
.btn-turret{
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  border-radius:50%;
  background:rgba(240,201,135,.1);
  border:1px solid rgba(240,201,135,.4);
  color:var(--brass-light);
  font-size:1.4rem;
  font-weight:600;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:inherit;
  line-height:1;
  padding:0;
  transition:background .15s ease, transform .1s ease;
}
.btn-turret:hover{background:rgba(240,201,135,.2)}
.btn-turret:active{transform:scale(0.95)}
.btn-turret:focus-visible{outline:2px solid var(--brass); outline-offset:2px}
.viz-turret-value{
  flex:1;
  text-align:center;
  font-size:1rem;
  font-weight:600;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  min-width:80px;
}
.viz-turret-meta{
  font-size:.78rem;
  color:var(--ink-mute);
  font-variant-numeric:tabular-nums;
  text-align:center;
}
.viz-reset{
  align-self:center;
  min-height:44px;
  padding:.55rem 1rem;
  font-size:.85rem;
}

/* ============================================================
   Help fineprint (smaller, less prominent than tool-help)
   ============================================================ */
.tool-fineprint{
  font-size:.82rem;
  color:var(--ink-mute);
  margin-top:.85rem;
  line-height:1.5;
  font-style:italic;
}

/* ============================================================
   Easter egg: brass-colored crosshair cursor on the price straps.
   Hovering the price on desktop swaps the standard pointer for a
   tiny reticle. Touch devices skip this entirely (no cursor, so
   the rule does nothing); fine-pointer devices get the surprise.

   The SVG is a 24x24 reticle in BTColor brass (#f0c987): outer
   ring, inner ring, crosshair lines, and a center dot. URL-
   encoded inline so there is no extra HTTP request.
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  .cta-note,
  .stack-price,
  .cta-final-note,
  .pro-price {
    cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0c987' stroke-width='1.4'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 1v6M12 17v6M1 12h6M17 12h6'/%3E%3Ccircle cx='12' cy='12' r='1' fill='%23f0c987'/%3E%3C/svg%3E") 12 12, crosshair;
  }
}