/* ==========================================================
   /qacowboy/ : "AI is a wild horse. These are the gear."
   Shared by qacowboy/index.html, for-teams/index.html, and
   for-education/index.html (one stylesheet, three pages, per spec).

   NEW western-frontier palette, deliberately distinct from the site's
   navy/cyan system (course.css, promo.css, qa-guides/index.html). Same
   variable-naming SHAPE as those files (background steps, an accent
   pair, ink/mute/dim text steps, a hairline, --maxw/--display/--mono)
   but every value is new: weathered wood browns, sunlit leather tan,
   golden-hour amber, cream-white ink, rust-red reserved for anything
   representing "the horse" (AI itself).

   Structure mirrors promo.css/course.css: intro comment -> :root ->
   base reset -> corner-bracket frame -> nav -> hero -> shared section
   scaffolding -> one block per page section, in page order -> shared
   buy button + guide-card block (guide covers keep their OWN native
   navy/cyan styling, hardcoded, not tied to these tokens, per spec) ->
   branch-page form block (for-teams / for-education) -> footer ->
   responsive queries last.
   ========================================================== */

:root {
  --bg-0: #140d07;
  --bg-1: #1c130a;
  --bg-2: #26190d;
  --panel-edge: rgba(217, 168, 99, .18);
  --tan: #c99a5b;
  --amber: #dc9a3c;
  --amber-bright: #ecb15a;
  --rust: #b13b25;
  --rust-bright: #d0533a;
  --cream: #f4e9d8;
  --ink-mute: #cdbb9c;
  --ink-dim: #93805f;
  --line: rgba(244, 233, 216, .14);
  --maxw: 1240px;
  --display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-1);
  color: var(--cream);
  font-family: var(--display);
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: var(--amber); text-decoration: none; }
img { max-width: 100%; display: block; }
.mono { font-family: var(--mono); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 2px;
}

/* ───────── corner-bracket frame (same technique as promo.css/course.css,
   recolored to amber so it reads as this page's own equipment mark) ───────── */
.framed { position: relative; }
.framed::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  --b: var(--amber); --len: 16px; --w: 1.5px; opacity: .55;
  background:
    linear-gradient(var(--b),var(--b)) left 0 top 0 / var(--len) var(--w) no-repeat,
    linear-gradient(var(--b),var(--b)) left 0 top 0 / var(--w) var(--len) no-repeat,
    linear-gradient(var(--b),var(--b)) right 0 top 0 / var(--len) var(--w) no-repeat,
    linear-gradient(var(--b),var(--b)) right 0 top 0 / var(--w) var(--len) no-repeat,
    linear-gradient(var(--b),var(--b)) left 0 bottom 0 / var(--len) var(--w) no-repeat,
    linear-gradient(var(--b),var(--b)) left 0 bottom 0 / var(--w) var(--len) no-repeat,
    linear-gradient(var(--b),var(--b)) right 0 bottom 0 / var(--len) var(--w) no-repeat,
    linear-gradient(var(--b),var(--b)) right 0 bottom 0 / var(--w) var(--len) no-repeat;
}

/* ───────── nav (sticky) ─────────
   Same structural shape as course/index.html's nav (wrap+nav-inner
   combined class, matching this page's own .wrap max-width convention
   the way qa-guides/index.html's nav does), recolored to the western
   palette. Three anchor links instead of course's two, wraps to a
   second line on narrow phones instead of overflowing. */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(20, 13, 7, .92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; row-gap: 8px;
  min-height: 64px; padding-top: 10px; padding-bottom: 10px;
}
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-weight: 700; color: var(--cream); font-size: 13px; letter-spacing: 0.03em; }
.logo .mk {
  width: 28px; height: 28px; display: grid; place-items: center; flex: none;
  border: 1.5px solid var(--amber); color: var(--amber);
  font-weight: 700; font-size: 13px; border-radius: 3px;
}
.nav-links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.nav-links a {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-mute); position: relative; padding-bottom: 3px; white-space: nowrap;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--amber); transition: right .2s ease;
}
.nav-links a:hover { color: var(--cream); }
.nav-links a:hover::after { right: 0; }
.back-link {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-mute);
}
.back-link:hover { color: var(--amber); }

/* "Solutions" dropdown, part of the consistent nav across every funnel page */
.nav-drop { position: relative; display: inline-flex; }
.nav-drop-toggle {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-mute); background: none; border: 0; margin: 0; padding: 0 0 3px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.nav-drop-toggle:hover,
.nav-drop:hover .nav-drop-toggle,
.nav-drop-toggle[aria-expanded="true"] { color: var(--cream); }
.nd-caret { font-size: 8px; transition: transform .2s ease; }
.nav-drop:hover .nd-caret,
.nav-drop-toggle[aria-expanded="true"] .nd-caret { transform: rotate(180deg); }
/* invisible bridge so the menu stays open across the gap under the toggle */
.nav-drop::after { content: ""; position: absolute; top: 100%; right: 0; height: 12px; width: 190px; }
.nav-drop-menu {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 190px;
  background: var(--bg-2); border: 1px solid var(--panel-edge); border-radius: 8px;
  padding: 8px; display: none; flex-direction: column; gap: 2px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .55);
}
.nav-drop:hover .nav-drop-menu,
.nav-drop.open .nav-drop-menu { display: flex; }
.nav-drop-menu a {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-mute); padding: 9px 12px; border-radius: 6px; white-space: nowrap;
}
.nav-drop-menu a::after { display: none; }
.nav-drop-menu a:hover { background: rgba(217, 168, 99, .12); color: var(--amber-bright); }

#the-gear, #the-guides { scroll-margin-top: 84px; }
/* Alias anchor so /qacowboy/#gear (used by the rider "Rides With" chips)
   lands on the gear section, alongside the existing #the-gear id. */
.anchor-alias { display: block; height: 0; scroll-margin-top: 84px; }

/* ───────── "Meet the riders" strip (links to /qacowboy/riders/) ───────── */
.riders-strip h2 { margin-bottom: 30px; }
.riders-strip .rs-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 26px; }
@media (max-width: 620px) { .riders-strip .rs-row { grid-template-columns: 1fr; max-width: 360px; } }
.riders-strip .rs-item {
  display: flex; flex-direction: column; color: var(--cream);
  border: 1px solid var(--panel-edge); border-radius: 8px; overflow: hidden; background: var(--bg-1);
  transition: border-color .16s ease, transform .16s ease;
}
.riders-strip .rs-item:hover { border-color: var(--amber); transform: translateY(-2px); }
.riders-strip .rs-item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
.riders-strip .rs-title { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); padding: 16px 16px 0; }
.riders-strip .rs-name { font-family: var(--display); font-weight: 800; font-size: clamp(19px, 2.1vw, 23px); line-height: 1.12; color: var(--cream); padding: 8px 16px 0; }
.riders-strip .rs-role { font-family: var(--mono); font-size: 15px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tan); padding: 8px 16px 18px; }

/* ───────── hero ─────────
   Full-bleed single photo, cover-cropped. A bottom-heavy scrim carries
   the headline contrast since the source photo has no burned-in text
   space. */
.hero-cow {
  position: relative; height: 92vh; min-height: 560px; max-height: 880px;
  overflow: hidden; display: flex; align-items: flex-end;
}
/* On very wide screens the 92vh/880px box turns wide-and-short and object-fit
   crops the top of the frame; more height keeps heads in view at 2560x1440. */
@media (min-width: 2000px) { .hero-cow { max-height: 1120px; } }
.hero-media { position: absolute; inset: 0; z-index: 0; }
/* Carousel slides stack and crossfade. Each slide sets its own
   object-position inline so the subject's head stays framed at any ratio. */
.hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 32%; display: block;
  opacity: 0; transition: opacity 1s ease;
}
.hero-slide.is-active { opacity: 1; }
.hero-dots {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 20px;
  display: flex; gap: 9px; justify-content: center; padding: 0 20px;
}
.hero-dot {
  width: 10px; height: 10px; border-radius: 50%; padding: 0; cursor: pointer;
  background: rgba(244, 233, 216, .28); border: 1px solid rgba(244, 233, 216, .75);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.hero-dot:hover { border-color: var(--amber); background: rgba(220, 154, 60, .5); }
.hero-dot.is-on { background: var(--amber); border-color: var(--amber); transform: scale(1.15); }
@media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } }
/* Scrim weighted toward the bottom-left so the headline reads as an intentional
   caption on every slide, while the top-right stays light enough to show the image. */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(20,13,7,.18) 0%, rgba(20,13,7,.30) 40%, rgba(20,13,7,.72) 78%, rgba(20,13,7,.96) 100%),
    linear-gradient(90deg, rgba(20,13,7,.80) 0%, rgba(20,13,7,.44) 34%, rgba(20,13,7,0) 66%);
}
.hero-copy { position: relative; z-index: 2; width: 100%; padding-bottom: 64px; }
.hero-copy h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(30px, 6.4vw, 62px); line-height: 1.08; letter-spacing: -0.02em;
  color: var(--cream); margin: 0 0 18px; text-shadow: 0 3px 26px rgba(0,0,0,.55);
}
/* Two deliberate lines: the setup in cream, the payoff on its own line in
   amber, echoing the "Quality Engineer" accent further down the page. */
.hero-copy h1 .h1-lead { display: block; }
.hero-copy h1 .h1-tame {
  display: block; color: var(--amber); margin-top: 0.12em;
}
.hero-sub {
  font-size: clamp(15px, 2vw, 19px); line-height: 1.5; color: var(--ink-mute);
  max-width: 560px; margin: 0; text-shadow: 0 2px 18px rgba(0,0,0,.55);
}
/* On slides tagged data-copy="right" (people on the left of the photo), the
   headline and scrim move to the right so the left of the image stays clear. */
.hero-cow.copy-right .hero-copy { text-align: right; }
.hero-cow.copy-right .hero-sub { margin-left: auto; }
.hero-cow.copy-right .hero-scrim {
  background:
    linear-gradient(180deg, rgba(20,13,7,.18) 0%, rgba(20,13,7,.30) 40%, rgba(20,13,7,.72) 78%, rgba(20,13,7,.96) 100%),
    linear-gradient(270deg, rgba(20,13,7,.80) 0%, rgba(20,13,7,.44) 34%, rgba(20,13,7,0) 66%);
}
/* Center slides: people on the left, horse on the right, open desert in the
   middle. Positioned viewport-relative so the small headline stays in that
   gap at any window width (element-relative shifting drifts by viewport). */
.hero-cow.copy-center .hero-copy {
  position: absolute; left: 42%; right: 16%; bottom: 56px; width: auto;
  padding-bottom: 0; text-align: center;
}
.hero-cow.copy-center .hero-copy h1 { font-size: clamp(22px, 2.4vw, 34px); }
.hero-cow.copy-center .hero-sub { margin-left: auto; margin-right: auto; }
/* Subtitle line appears on the first slide only. */
.hero-cow.hide-sub .hero-sub { display: none; }
.hero-cow.copy-center .hero-scrim {
  background:
    linear-gradient(180deg, rgba(20,13,7,.14) 0%, rgba(20,13,7,.24) 44%, rgba(20,13,7,.62) 80%, rgba(20,13,7,.9) 100%),
    radial-gradient(90% 70% at 63% 106%, rgba(20,13,7,.6) 0%, rgba(20,13,7,0) 60%);
}
/* Top-right slides: subject and load fill the lower frame, open sky up top.
   Small headline tucked into the top-right over a darkened top-right wash. */
.hero-cow.copy-topright .hero-copy {
  position: absolute; top: 92px; right: 6%; left: auto; bottom: auto; width: auto;
  padding-bottom: 0; text-align: right;
}
.hero-cow.copy-topright .hero-copy h1 { font-size: clamp(20px, 2.1vw, 30px); margin-bottom: 0; }
.hero-cow.copy-topright .hero-scrim {
  background:
    linear-gradient(180deg, rgba(20,13,7,.6) 0%, rgba(20,13,7,.16) 32%, rgba(20,13,7,.2) 68%, rgba(20,13,7,.34) 100%),
    linear-gradient(270deg, rgba(20,13,7,.55) 0%, rgba(20,13,7,.06) 52%);
}

/* ── "Quality Engineer" annotation over the cowboy ──
   A field-manual leader: a mono label sitting in the open desert to the
   cowboy's left, a dashed line, then an amber dot landing on the cowboy.
   Anchored by its RIGHT edge (right:%) so the dot pins to the subject
   precisely regardless of label width; retuned per breakpoint since
   object-fit: cover moves the subject. DOM order label -> line -> dot. */
.qe-anno {
  position: absolute; z-index: 2; pointer-events: none;
  right: 51%; top: 30%; left: auto;
  display: flex; align-items: center;
}
.qe-anno .qe-anno-label {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  color: var(--cream); padding-right: 10px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .9);
}
.qe-anno .qe-line {
  flex: none; width: clamp(150px, 22vw, 340px); height: 0;
  border-top: 1.5px dashed var(--amber); opacity: .92;
}
.qe-anno .qe-dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%; margin-left: 3px;
  background: var(--amber); box-shadow: 0 0 0 3px rgba(20, 13, 7, .4);
}
@media (max-width: 760px) {
  .hero-cow { height: 88vh; min-height: 620px; max-height: none; }
  .hero-copy { padding-bottom: 44px; }
  /* On the portrait phone box the full image height already shows, so heads are
     never cropped; each slide's inline object-position handles horizontal framing. */
  .hero-dots { bottom: 14px; }
}

/* ───────── shared section scaffolding ───────── */
.sect { padding: 88px 0; }
.sect-alt { background: var(--bg-2); }
.kicker {
  font-family: var(--mono); font-size: 16px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); margin: 0 0 16px;
}
.sect h2 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(26px, 4vw, 42px); line-height: 1.16; letter-spacing: -0.01em;
  color: var(--cream); margin: 0 0 20px; max-width: 780px;
}
/* Amber rule under "Quality Engineer" in the section 01 heading. Uses
   text-decoration rather than a border so it tracks the text across a
   line wrap instead of underlining the whole block. */
.qe-underline {
  text-decoration: underline;
  text-decoration-color: var(--amber);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
  text-decoration-skip-ink: none;
}
.sect-lede { font-size: 16px; line-height: 1.65; color: var(--ink-mute); max-width: 720px; margin: 0 0 44px; }
@media (max-width: 760px) { .sect { padding: 56px 0; } }

/* ───────── section 01 // the gear (overhead photo + 9 cards) ───────── */
.gear-table-photo { max-width: 720px; margin: 0 auto 56px; }
.gear-table-photo img {
  width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--panel-edge);
}

.gear-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .gear-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gear-grid { grid-template-columns: 1fr; } }

/* Label sits directly beneath the image (or, for the horse card, the
   rust visual) with no connecting line, per the design constraint. */
.gear-card {
  background: var(--bg-2); border: 1px solid var(--panel-edge); border-radius: 6px;
  overflow: hidden; display: flex; flex-direction: column;
}
.gear-card .gc-img-wrap { aspect-ratio: 3 / 2; overflow: hidden; }
.gear-card .gc-img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.gear-card .gc-label {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--amber); padding: 14px 16px 0; margin: 0;
}
/* Each card carries two blocks: what the real piece of tack actually is,
   then what it maps to in testing. .gc-def is the plain historical fact,
   set dimmer and slightly smaller so it reads as background; the QA FOCUS
   label is the hinge between the two. */
.gear-card .gc-def {
  padding: 8px 16px 0; margin: 0;
  font-size: 13px; line-height: 1.55; color: var(--ink-dim);
}
/* the middle beat: what the piece of tack DOES in the field. Same size
   family as .gc-def but a step brighter and italic, so the three beats
   read as fact / job / QA focus. */
.gear-card .gc-job {
  padding: 6px 16px 0; margin: 0;
  font-size: 13px; line-height: 1.55; font-style: italic; color: var(--ink-mute);
}
.gear-card .gc-focus {
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--tan);
  margin: 14px 16px 0; padding: 12px 0 0; border-top: 1px solid var(--panel-edge);
}
.gear-card .gc-body { padding: 6px 16px 18px; font-size: 14px; line-height: 1.6; color: var(--ink-mute); margin: 0; }

/* the horse, ninth card, rust-red, visually distinct */
.gear-card.horse {
  border-color: rgba(177, 59, 37, .5);
  background: linear-gradient(165deg, rgba(177, 59, 37, .16), var(--bg-2) 62%);
}
.gear-card.horse .gc-img-wrap { border-bottom: 1px solid rgba(177, 59, 37, .35); }
/* horse.jpg is a portrait source cover-cropped into this landscape card, biased up
   to keep the head and front legs rather than centering into the dust below. */
.gear-card.horse .gc-img-wrap img { object-position: 50% 30%; }
.gear-card.horse .gc-label { color: var(--rust-bright); }
.gear-card.horse .gc-body { color: #e3c3b8; }
.gear-card.horse .gc-def { color: #b8907f; }
.gear-card.horse .gc-job { color: #d3a99b; }
.gear-card.horse .gc-focus { color: var(--rust-bright); border-top-color: rgba(177, 59, 37, .35); }

/* ───────── section 02 // up close (alternating image/text rows) ─────────
   Reuses the same gear photos from section 01 at larger size, no new
   images. order: N on the media/text children flips the visual side
   without needing an RTL/LTR hack. */
.uc-row {
  display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center;
  margin-bottom: 60px;
}
.uc-row:last-child { margin-bottom: 0; }
.uc-media { order: 1; }
.uc-text { order: 2; }
.uc-row.reverse .uc-media { order: 2; }
.uc-row.reverse .uc-text { order: 1; }
.uc-media img {
  width: 100%; height: auto; max-width: 300px; margin: 0 auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 55%;
  border-radius: 6px; border: 1px solid var(--panel-edge); display: block;
}
.uc-text .uc-eyebrow {
  font-family: var(--mono); font-size: 16px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--tan); margin: 0 0 12px;
}
.uc-text h3 {
  font-family: var(--display); font-weight: 700; font-size: clamp(22px, 3vw, 28px);
  line-height: 1.25; color: var(--cream); margin: 0 0 14px;
}
.uc-text p { font-size: 15.5px; line-height: 1.65; color: var(--ink-mute); margin: 0; }
@media (min-width: 760px) {
  .uc-row { grid-template-columns: 320px 1fr; gap: 56px; }
  /* order reassigns which grid track each child fills, not just paint order, so the
     reversed row needs its own column swap to keep the image column fixed-width
     on either side instead of stretching into the 1fr track. */
  .uc-row.reverse { grid-template-columns: 1fr 320px; }
  .uc-media img { max-width: none; }
}

/* ───────── section 03 // the guides ─────────
   Guide covers keep their NATIVE navy/cyan styling per spec (no
   recolor/filter to match the warm page) -- the panel background
   behind each cover is hardcoded navy, not tied to the western
   tokens above, so the contrast reads as deliberate rather than
   accidental. Buy buttons stay in the western amber, same as the
   rest of this page's CTAs, so the page still reads as one system. */
.guides-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
@media (min-width: 640px) { .guides-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .guides-grid { grid-template-columns: repeat(3, 1fr); } }

.guide-card {
  background: var(--bg-1); border: 1px solid var(--panel-edge); border-radius: 8px;
  overflow: hidden; display: flex; flex-direction: column;
  text-decoration: none; color: inherit; transition: border-color .2s ease, transform .2s ease;
}
.guide-card:hover { border-color: var(--amber); transform: translateY(-2px); }
.guide-card:hover .btn-buy-west { background: var(--amber-bright); }
.guide-card .cover-wrap { aspect-ratio: 2 / 3; overflow: hidden; background: #17100a; }
.guide-card .cover-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.guide-card .btn-buy-west { margin: 16px; justify-content: center; align-self: stretch; }

.btn-buy-west {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--amber); color: var(--bg-0);
  font-family: var(--mono); font-weight: 700; font-size: 13px;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 13px 20px; border-radius: 4px; border: none; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.btn-buy-west:hover { background: var(--amber-bright); transform: translateY(-1px); }
.btn-buy-west .price { opacity: .82; }

.bundle-band {
  position: relative; border: 1px solid var(--panel-edge); border-radius: 8px;
  background: linear-gradient(160deg, rgba(220, 154, 60, .14), transparent 62%);
  padding: 30px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.bundle-band .bb-left { display: flex; align-items: center; gap: 22px; flex: 1 1 0%; min-width: min(100%, 420px); }
.bundle-band .bb-cover { flex: 0 0 auto; width: 176px; border-radius: 6px; overflow: hidden; border: 1px solid var(--panel-edge); box-shadow: 0 10px 28px rgba(0, 0, 0, .45); }
.bundle-band .bb-cover img { display: block; width: 100%; height: auto; }
.bundle-band .bb-text h3 { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--cream); margin: 0 0 6px; }
.bundle-band .bb-text p { font-size: 14.5px; color: var(--ink-mute); margin: 0; }
.bundle-band .bb-save { color: var(--amber); font-weight: 700; }
@media (max-width: 560px) { .bundle-band .bb-cover { width: 132px; } }
/* stacked bundle + free-prompts bands */
.bundle-band + .bundle-band { margin-top: 18px; }
/* a row of five covers: shown large, above its text, at every width */
.bundle-band .bb-left-wide { flex-wrap: wrap; }
.bundle-band .bb-cover-wide { width: 100%; max-width: 640px; }
/* below ~900px the button drops under the text so the picture can fill the band */
@media (max-width: 900px) { .bundle-band .bb-left-wide { flex-basis: 100%; } }
/* band pictures link to their pages */
.bundle-band a.bb-cover { transition: border-color .2s ease, transform .2s ease; }
.bundle-band a.bb-cover:hover { border-color: var(--amber); transform: translateY(-2px); }

/* ───────── section 04 // three ways in ───────── */
.three-ways { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 760px) { .three-ways { grid-template-columns: repeat(3, 1fr); } }
.tw-card {
  position: relative;
  border: 1px solid var(--panel-edge); border-radius: 8px; padding: 26px;
  background: var(--bg-2); display: flex; flex-direction: column;
  transition: border-color .2s ease, transform .2s ease;
}
.tw-card:hover { border-color: var(--amber); transform: translateY(-2px); }
/* whole-card click: stretch the card's single link over the entire card */
.tw-card .tw-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tw-card .tw-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--amber); margin: 0 0 14px;
}
.tw-card .tw-eyebrow::before {
  content: ""; flex: none; width: 22px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--amber-bright), var(--amber));
}
.tw-card h3 { font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--cream); margin: 0 0 10px; }
.tw-card p { font-size: 14.5px; line-height: 1.6; color: var(--ink-mute); margin: 0 0 18px; flex: 1; }
.tw-link {
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--amber); display: inline-flex; align-items: center; gap: 6px;
}
.tw-link:hover { color: var(--amber-bright); }

/* ───────── contact page ───────── */
.contact-sect { padding: 112px 0 84px; }
.contact-sect h1 { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 4.6vw, 44px); line-height: 1.08; letter-spacing: -0.02em; color: var(--cream); margin: 0 0 12px; }
.contact-lede { font-size: 16px; line-height: 1.6; color: var(--ink-mute); max-width: 620px; margin: 0 0 40px; }
.contact-cols { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: start; }

/* left: contact information */
.ci-heading { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--cream); margin: 0 0 24px; }
.ci-list { display: flex; flex-direction: column; gap: 20px; }
.ci-row { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.ci-icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(220, 154, 60, .1); border: 1px solid var(--panel-edge); display: flex; align-items: center; justify-content: center; color: var(--amber); flex: none; }
.ci-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ci-label { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.ci-value { font-family: var(--mono); font-size: 14px; color: var(--amber); overflow: hidden; text-overflow: ellipsis; }
.ci-row:hover .ci-value { color: var(--amber-bright); }
.ci-cred { margin-top: 28px; border: 1px solid var(--panel-edge); border-radius: 12px; background: var(--bg-2); padding: 20px 22px; }
.ci-cred-name { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--cream); margin: 0 0 12px; }
.ci-cred-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ci-cred-list li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--ink-mute); }
.ci-cred-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }

/* right: send a message panel */
.cform-panel { border: 1px solid var(--panel-edge); border-radius: 14px; background: var(--bg-2); padding: 30px; }
.cform-panel h2 { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--cream); margin: 0 0 24px; }
.cform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cform input, .cform textarea { width: 100%; background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px; color: var(--cream); font-family: var(--display); font-size: 15px; padding: 13px 15px; margin-bottom: 14px; }
.cform input::placeholder, .cform textarea::placeholder { color: var(--ink-dim); }
.cform input:focus, .cform textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(220, 154, 60, .16); }
.cform textarea { resize: vertical; min-height: 150px; }
.cform-btn { width: 100%; background: var(--bg-1); border: 1px solid var(--panel-edge); border-radius: 8px; color: var(--cream); font-family: var(--mono); font-weight: 700; font-size: 14px; letter-spacing: .04em; padding: 15px; cursor: pointer; transition: border-color .15s ease, color .15s ease; margin-top: 2px; }
.cform-btn:hover { border-color: var(--amber); color: var(--amber-bright); }
.cform-btn:disabled { opacity: .55; cursor: default; }
.cform-hint { text-align: center; font-size: 13px; color: var(--ink-dim); margin: 14px 0 0; }
.cform-done { display: none; }
.cform-done.show { display: block; }
.cform-done .cd-title { font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--cream); margin: 0 0 10px; }
.cform-done .cd-body { font-size: 14.5px; line-height: 1.6; color: var(--ink-mute); margin: 0 0 10px; }
.cform-done .cd-mailto { font-family: var(--mono); font-size: 13px; color: var(--amber); }

/* ───────── author page ───────── */
.author-sect { padding: 116px 0 88px; }
.author-grid { display: grid; grid-template-columns: 360px 1fr; gap: 50px; align-items: center; }
.author-portrait { position: relative; margin: 0; border: 1px solid var(--panel-edge); border-radius: 10px; overflow: hidden; background: var(--bg-2); }
.author-portrait img { width: 100%; height: auto; display: block; }
.author-portrait .au-corner { position: absolute; left: 14px; bottom: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-mute); text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.author-portrait .au-corner b { color: var(--amber); font-weight: 700; }
.author-body h1 { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -0.02em; color: var(--cream); margin: 0 0 20px; }
.author-body p { color: var(--ink-mute); font-size: 16px; line-height: 1.7; margin: 0 0 18px; max-width: 640px; }
.author-body p strong { color: var(--cream); font-weight: 700; }
.author-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line); }
.author-stat { display: flex; flex-direction: column; gap: 6px; }
.author-stat .k { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 2.6vw, 30px); line-height: 1; color: var(--cream); }
.author-stat .v { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
@media (max-width: 860px) {
  .author-grid { grid-template-columns: 1fr; gap: 32px; }
  .author-portrait { max-width: 360px; }
  .author-stats { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; }
}

/* branch lead-form spam honeypot + error state (for-teams / for-education / contact) */
.bf-hp { display: none !important; }
.bf-error { color: var(--rust-bright); font-size: 14px; line-height: 1.5; margin: 14px 0 0; }
.bf-error a { color: var(--amber); }

@media (max-width: 860px) { .contact-cols { grid-template-columns: 1fr; gap: 34px; } }
@media (max-width: 520px) { .cform-row { grid-template-columns: 1fr; gap: 0; } }
/* branch pages use the same panel, constrained and left-aligned under the hero */
.branch-form-section .cform-panel { max-width: 560px; }
/* gear-band form variant: image fills one side to the form's height, form the other */
.gear-band .gb-split.gb-split-form { align-items: stretch; grid-template-columns: 1.4fr 1fr; }
.gear-band .gb-split.gb-split-form .gb-media { aspect-ratio: auto; position: relative; min-height: 240px; }
.gear-band .gb-split.gb-split-form .gb-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gb-form h2 { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--cream); margin: 0 0 20px; }
@media (max-width: 760px) {
  .gear-band .gb-split.gb-split-form { grid-template-columns: 1fr; }
  .gear-band .gb-split.gb-split-form .gb-media { min-height: 200px; }
}

/* ───────── branch pages (for-teams / for-education, new) ─────────
   Reuses this same stylesheet, no per-page CSS file. A short hero
   plus a client-only form, following the shipped [data-waitlist]
   pattern from the root site's script.js (hide the form, reveal a
   sibling confirmation state), adapted with a fuller confirmation
   message and a mailto fallback as an escape hatch inside that
   confirmation, not as the form's primary action. */
.branch-hero { padding: 120px 0 56px; border-bottom: 1px solid var(--line); }
.branch-hero .kicker { margin-bottom: 16px; }
.branch-hero h1 {
  font-family: var(--display); font-weight: 800; font-size: clamp(30px, 5vw, 48px);
  line-height: 1.15; color: var(--cream); margin: 0 0 18px; max-width: 760px;
}
.branch-hero .lede { font-size: 17px; line-height: 1.65; color: var(--ink-mute); max-width: 620px; margin: 0; }

/* photographic band under the branch-hero copy (for-teams / for-education) */
.branch-photo {
  margin: 44px 0 0; border: 1px solid var(--panel-edge); border-radius: 8px;
  overflow: hidden; background: var(--bg-2);
}
.branch-photo img { width: 100%; height: auto; display: block; }
@media (max-width: 760px) { .branch-photo { margin-top: 32px; } }

/* the gear-system band (split image + copy) on the branch pages */
.gear-band { padding: 56px 0; background: var(--bg-1); border-bottom: 1px solid var(--line); }
.gear-band .gb-split {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center;
  background: var(--bg-2); border: 1px solid var(--panel-edge); border-radius: 10px; padding: 26px;
}
.gear-band .gb-media { border-radius: 8px; overflow: hidden; border: 1px solid var(--panel-edge); aspect-ratio: 4 / 3; }
.gear-band .gb-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gear-band .gb-copy .kicker { margin-bottom: 12px; }
.gear-band .gb-copy h2 {
  font-family: var(--display); font-weight: 800; font-size: clamp(21px, 2.4vw, 26px);
  line-height: 1.15; color: var(--cream); margin: 0 0 12px;
}
.gear-band .gb-copy p { font-size: 15px; line-height: 1.6; color: var(--ink-mute); margin: 0 0 16px; max-width: 46ch; }
@media (max-width: 760px) {
  .gear-band { padding: 40px 0; }
  .gear-band .gb-split { grid-template-columns: 1fr; gap: 22px; padding: 20px; }
}

.branch-course-note {
  margin-top: 24px; padding: 18px 20px; border-left: 3px solid var(--amber);
  border-radius: 0 6px 6px 0; background: linear-gradient(160deg, rgba(220,154,60,.1), transparent 65%);
  max-width: 620px;
}
.branch-course-note p { font-size: 14px; line-height: 1.6; color: var(--ink-mute); margin: 0; }
.branch-course-note a { font-weight: 700; }

.branch-form-section { padding: 60px 0 110px; }
.branch-form-section h2 { font-family: var(--display); font-weight: 700; font-size: 24px; color: var(--cream); margin: 0 0 22px; }

.branch-form {
  max-width: 520px; background: var(--bg-2); border: 1px solid var(--panel-edge);
  border-radius: 8px; padding: 28px;
}
.branch-form .bf-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.branch-form label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
.branch-form input, .branch-form textarea {
  background: var(--bg-1); border: 1px solid var(--line); color: var(--cream);
  font-family: var(--display); font-size: 15px; padding: 12px 14px; border-radius: 4px; width: 100%;
}
.branch-form input:focus, .branch-form textarea:focus {
  outline: none; border-color: var(--amber); box-shadow: 0 0 0 4px rgba(220, 154, 60, .16);
}
.branch-form textarea { resize: vertical; min-height: 96px; }
.branch-form .btn-buy-west { width: 100%; justify-content: center; margin-top: 4px; }

.branch-done { display: none; flex-direction: column; gap: 12px; }
.branch-done.show { display: flex; }
.branch-done .bd-title { font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--cream); margin: 0; }
.branch-done .bd-body { font-size: 14.5px; line-height: 1.6; color: var(--ink-mute); margin: 0; }
.branch-done .bd-mailto { font-family: var(--mono); font-size: 13px; color: var(--amber); }

/* ───────── footer ───────── */
footer { border-top: 1px solid var(--line); padding: 40px 0 60px; margin-top: 20px; }
footer .foot-links { display: flex; gap: 20px; flex-wrap: wrap; font-family: var(--mono); font-size: 12.5px; color: var(--ink-mute); }
footer .foot-links a:hover { color: var(--amber); }
footer .foot-copy { margin-top: 16px; font-family: var(--mono); font-size: 11px; color: var(--ink-dim); }

/* ───────── responsive ───────── */
@media (max-width: 480px) {
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 12px; }
  .bundle-band { padding: 22px; }
  .branch-hero { padding: 104px 0 44px; }
  .branch-form { padding: 22px; }
}

/* ───────── shared utilities (definitions also exist in episodes.css; kept
   here so pages that load only qacowboy.css, like the home page, get them) ───────── */
.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; }
.btn-amber { display: inline-block; padding: 12px 22px; border-radius: 6px; background: var(--amber); color: var(--bg-0); font-family: var(--display); font-weight: 700; font-size: 14px; border: 0; cursor: pointer; }
.btn-amber:hover { background: var(--amber-bright); }
.btn-amber:disabled { opacity: .6; cursor: default; }

/* ───────── "Watch this lesson" buttons on gear (home page) ───────── */
/* gear-table CTA: an amber button overlaid on the big table photo so it
   reads as part of the picture instead of floating below it */
.gear-table-photo { position: relative; }
.gear-table-photo .gear-table-btn {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
}
/* released-episode CTA inside a gear card */
.gear-card .gear-card-btn { margin-top: 16px; display: inline-flex; align-items: center; justify-content: center; text-align: center; }

/* ───────── newsletter band (home page only; every rule scoped under .nl-band) ─────────
   Panel sits on --bg-0 so the --ink-dim fine print clears AA (it does not on --bg-2). */
.nl-band .nl-panel {
  background: var(--bg-0); border: 1px solid var(--panel-edge); border-radius: 12px;
  padding: 32px 34px; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 22px 40px;
}
.nl-band .nl-copy { flex: 1 1 300px; }
.nl-band .nl-copy .kicker { margin-bottom: 10px; }
.nl-band .nl-title { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 3vw, 30px); line-height: 1.1; color: var(--cream); margin: 0 0 8px; }
.nl-band .nl-lede { font-family: var(--mono); font-size: 13px; letter-spacing: .02em; color: var(--ink-mute); margin: 0; }
.nl-band .nl-form-wrap { flex: 0 1 400px; }
.nl-band .nl-form { display: flex; gap: 10px; }
.nl-band .nl-form input {
  flex: 1 1 auto; min-width: 0; background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 8px; color: var(--cream); font-family: var(--display); font-size: 15px; padding: 13px 15px;
}
.nl-band .nl-form input::placeholder { color: var(--ink-dim); }
.nl-band .nl-form input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(220, 154, 60, .16); }
.nl-band .nl-form .btn-amber { flex: 0 0 auto; }
.nl-band .nl-fine { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-dim); margin: 10px 0 0; }
.nl-band .nl-msg { font-family: var(--mono); font-size: 12px; margin: 10px 0 0; }
.nl-band .nl-error { color: var(--rust-bright); }
.nl-band .nl-done { color: var(--amber-bright); }
@media (max-width: 620px) {
  .nl-band .nl-panel { flex-direction: column; align-items: stretch; padding: 26px 22px; }
  .nl-band .nl-form { flex-direction: column; }
  .nl-band .nl-form .btn-amber { width: 100%; }
}

/* ───────── nav CTA (home page only; .nav-cta class exists only on qacowboy/index.html) ───────── */
.nav-links a.nav-cta {
  color: var(--amber); border: 1px solid var(--amber); border-radius: 6px; padding: 6px 12px;
}
.nav-links a.nav-cta::after { display: none; }
.nav-links a.nav-cta:hover { color: var(--bg-0); background: var(--amber); border-color: var(--amber-bright); }