/* brassdeck.css — the Brassdeck product page.
 *
 * NOT a legacy extract. Written 2026-08-26 against the live app, and it is
 * self-contained the way every page stylesheet here has to be: its own
 * reset, its own :root, its own body{}. It is linked alone by /brassdeck
 * and must never be loaded beside another page stylesheet.
 *
 * WHY THE TOKENS ARE COPIED RATHER THAN INVENTED
 *
 * Every --bd-* value below is read verbatim out of the running app's
 * :root (brassdeck.scalewiseva.com/assets/css/app.css). A product page
 * that approximates its product's palette looks like a page about some
 * other product. The dark block is the app's own [data-theme="dark"]
 * values, so both themes are ones the app already ships and neither is
 * a fresh contrast guess.
 *
 * NO WEBFONT, DELIBERATELY. The app itself is on the system stack, and
 * matching it costs nothing and requests nothing. Do not add Sora/DM Sans
 * here to match the agency site — this page is branded standalone.
 */

/* ─── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── TOKENS, from the app ──────────────────────────────────── */
:root {
  --bd-ground:   #E8E0D2;
  --bd-grid:     rgba(27, 26, 22, .06);
  --bd-grid-big: rgba(27, 26, 22, .095);
  --bd-card:     #FFFDF9;
  --bd-ink:      #1B1A16;
  --bd-soft:     #56534A;
  --bd-faint:    #686459;
  --bd-rule:     #D2C7B2;
  --bd-chrome:   rgba(255, 253, 249, .92);
  --bd-shadow:   rgba(27, 26, 22, .12);
  --bd-lip:      rgba(27, 26, 22, .10);
  --bd-cast:     rgba(27, 26, 22, .07);
  --bd-brass:    #835D1D;
  --bd-patina:   #3B6D60;
  --bd-clay:     #995037;
  --bd-slate:    #4A5A6B;
  --bd-plum:     #6E4462;
  --bd-moss:     #5A6A36;

  --bd-max:      1180px;
  --bd-gutter:   2rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bd-ground:   #141D15;
    --bd-grid:     rgba(226, 238, 222, .05);
    --bd-grid-big: rgba(226, 238, 222, .08);
    --bd-card:     #242931;
    --bd-ink:      #E9E5DC;
    --bd-soft:     #A29C90;
    --bd-faint:    #948E85;
    --bd-rule:     #2F3730;
    --bd-chrome:   rgba(36, 41, 49, .92);
    --bd-shadow:   rgba(0, 0, 0, .32);
    --bd-lip:      rgba(0, 0, 0, .46);
    --bd-cast:     rgba(0, 0, 0, .26);
    --bd-brass:    #8FBF7A;
    --bd-patina:   #6FAA96;
    --bd-clay:     #D08363;
    --bd-slate:    #8AA0B8;
    --bd-plum:     #B486A6;
    --bd-moss:     #9DB169;
  }
}

/* ─── BASE ──────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  /* The ROOT background, not the body's. What a browser paints between one
     document leaving and the next arriving is html's, and leaving it
     transparent is what made the portal flash white on every navigation. */
  background-color: var(--bd-ground);
}
body {
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bd-ground);
  /* The canvas grid, at the same two scales the app draws it. */
  background-image:
    linear-gradient(var(--bd-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bd-grid) 1px, transparent 1px),
    linear-gradient(var(--bd-grid-big) 1px, transparent 1px),
    linear-gradient(90deg, var(--bd-grid-big) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px, 140px 140px, 140px 140px;
  color: var(--bd-ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }

h1, h2, h3, h4 { letter-spacing: -.028em; line-height: 1.1; font-weight: 650; }

.bd-wrap { max-width: var(--bd-max); margin: 0 auto; padding: 0 var(--bd-gutter); }

/* ─── REVEAL ────────────────────────────────────────────────── */
.bd-fu { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.bd-fu.vis { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .bd-fu { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ─── BUTTONS ───────────────────────────────────────────────── */
.bd-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  padding: .7rem 1.3rem;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
  /* 44px on a phone. Every control on this page clears it. */
  min-height: 44px;
}
.bd-btn-primary { background: var(--bd-brass); color: var(--bd-card); }
.bd-btn-primary:hover { transform: translateY(-1px); }
/* --bd-faint, NOT --bd-rule.
 *
 * --bd-rule is the app's divider colour and measures 1.28:1 against the
 * page in light and 1.41:1 in dark. That is fine for a line between two
 * table rows and wrong for the only thing marking where a button is:
 * WCAG 1.4.11 wants 3:1 for the visual boundary of a control. --bd-faint
 * measures 4.51 and 5.32 on the page, 5.81 and 4.50 on a card, so it
 * clears it on every surface this button appears on.
 *
 * Same trap as --edge-strong in the portal. A border can be a real colour,
 * a valid rule and still invisible, and nothing in the toolchain says so.
 * Measure it against the surface behind it. */
.bd-btn-quiet { border-color: var(--bd-faint); color: var(--bd-ink); }
.bd-btn-quiet:hover { border-color: var(--bd-ink); }

/* ─── NAV ───────────────────────────────────────────────────── */
.bd-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem clamp(1rem, 4vw, 2.5rem);
  background: transparent;
  transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
  border-bottom: 1px solid transparent;
}
.bd-nav.scrolled {
  background: var(--bd-chrome);
  border-bottom-color: var(--bd-rule);
  box-shadow: 0 1px 0 var(--bd-cast);
}
/* A 44px target, not a 26px one. It is a link and it is the only way back
   to the top of the page from the nav. */
.bd-nav-brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.bd-nav-links { display: flex; gap: 1.6rem; }
.bd-nav-link { font-size: .875rem; color: var(--bd-soft); transition: color .18s ease; }
.bd-nav-link:hover { color: var(--bd-ink); }
.bd-nav-cta { display: flex; align-items: center; gap: .7rem; }
@media (max-width: 820px) { .bd-nav-links { display: none; } }

/* ─── HERO ──────────────────────────────────────────────────── */
.bd-hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  max-width: var(--bd-max);
  margin: 0 auto;
  padding: clamp(7rem, 14vh, 10rem) var(--bd-gutter) clamp(3.5rem, 8vh, 6rem);
}
/* A grid item's automatic minimum size is its CONTENT, so a long word or a
   wide child resolves the track wider than the container and the whole page
   scrolls sideways. min-width:0 is what lets it shrink. This is the same
   defect that pushed /invoices/:id 176px off a 390px phone. */
.bd-hero-left { min-width: 0; }

.bd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bd-faint);
  margin-bottom: 1.5rem;
}
.bd-eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--bd-brass);
}
.bd-h1 {
  /* 3.1rem, not 3.9rem, and 4.2vw rather than 5.2vw.
     Measured on production: the h1 is written as three lines and rendered
     as FIVE, because 62.4px of "Everything you stopped." does not fit a
     552px column. 52px was the largest that held three lines, so 3.1rem
     leaves a margin for a wider system font on Windows. The vw term is
     tuned to the COLUMN, which is ~0.47 of the viewport, not to the
     viewport itself — the old 5.2vw wrapped again at every width between
     the breakpoint and the max-width. */
  font-size: clamp(2.1rem, 4.2vw, 3.1rem);
  text-wrap: balance;
  font-weight: 680;
  margin-bottom: 1.4rem;
}
.bd-h1 em { font-style: normal; color: var(--bd-brass); }
.bd-lede {
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  color: var(--bd-soft);
  max-width: 46ch;
  margin-bottom: 2rem;
}
.bd-ctas { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 2.6rem; }
.bd-proof { display: flex; align-items: center; gap: 1.15rem; flex-wrap: wrap; }
.bd-proof-item { font-size: .78rem; color: var(--bd-faint); line-height: 1.3; }
.bd-proof-item strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 680;
  color: var(--bd-ink);
  letter-spacing: -.02em;
}
.bd-proof-sep { width: 1px; height: 26px; background: var(--bd-rule); }

/* ─── CANVAS MOCK ───────────────────────────────────────────── */
/* Four real cards from a real canvas, at the angles a canvas actually
   ends up at. Built from divs rather than a screenshot so it stays sharp,
   themes with the page, and costs no image request. */
.bd-canvas { position: relative; min-height: 360px; }
.bd-card {
  background: var(--bd-card);
  border: 1px solid var(--bd-rule);
  border-left: 3px solid var(--bd-brass);
  border-radius: 9px;
  padding: .85rem .95rem .7rem;
  box-shadow: 0 8px 22px var(--bd-cast), 0 1px 2px var(--bd-lip);
  width: 232px;
}
/* Two columns of 48% always fit, whatever the canvas is. A fixed 236px
   overflowed the canvas by 44px at viewports between the 900px breakpoint
   and the 1180px max-width, where the column is narrower but the cards
   were not. body{overflow-x:hidden} would have hidden that as a clipped
   card rather than as a scrollbar. */
.bd-canvas .bd-card { width: min(232px, 48%); }
.bd-card.is-moss   { border-left-color: var(--bd-moss); }
.bd-card.is-clay   { border-left-color: var(--bd-clay); }
.bd-card.is-slate  { border-left-color: var(--bd-slate); }
.bd-card.is-patina { border-left-color: var(--bd-patina); }

.bd-card-title { font-size: .82rem; font-weight: 650; margin-bottom: .5rem; }
.bd-card-steps { list-style: none; display: grid; gap: .3rem; margin-bottom: .6rem; }
.bd-step {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  font-size: .72rem;
  color: var(--bd-soft);
  line-height: 1.35;
}
.bd-step-box {
  flex: 0 0 auto;
  width: 10px; height: 10px;
  margin-top: 3px;
  border: 1px solid var(--bd-rule);
  border-radius: 2px;
}
.bd-step.done { color: var(--bd-faint); text-decoration: line-through; }
.bd-step.done .bd-step-box { background: var(--bd-brass); border-color: var(--bd-brass); }
.bd-card-foot {
  display: flex;
  align-items: center;
  gap: .5rem;
  border-top: 1px solid var(--bd-rule);
  padding-top: .5rem;
}
.bd-stage {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--bd-brass);
}
.bd-count { font-size: .68rem; color: var(--bd-faint); }
.bd-when { font-size: .68rem; color: var(--bd-faint); margin-left: auto; }

/* Positions are PX for top and % for left, and the four are laid out so no
   card ever covers another's footer. The first version put them at loose
   percentages and measured three collisions on production, the worst
   hiding 106px of a card's stage label and count. Overlapping cards read
   as a canvas; a covered footer reads as a rendering fault. The 14px
   horizontal gaps absorb the rotations. */
.bd-canvas .bd-card { position: absolute; }
.bd-c1 { top: 0;     left: 2%;  transform: rotate(-1.4deg); }
.bd-c3 { top: 34px;  left: 52%; transform: rotate(1.8deg);  }
.bd-c2 { top: 196px; left: 0;   transform: rotate(.9deg);   }
.bd-c4 { top: 230px; left: 50%; transform: rotate(-.6deg);  }

@media (max-width: 900px) {
  .bd-hero { grid-template-columns: 1fr; }
  .bd-canvas { min-height: 340px; margin-top: 1rem; }
}
@media (max-width: 560px) {
  .bd-canvas { min-height: 0; display: grid; gap: .8rem; justify-items: start; }
  .bd-canvas .bd-card { position: static; transform: none; width: 100%; max-width: 320px; }
  .bd-c4 { display: none; }
}

/* ─── VOCABULARY STRIP ──────────────────────────────────────── */
.bd-strip {
  border-top: 1px solid var(--bd-rule);
  border-bottom: 1px solid var(--bd-rule);
  background: var(--bd-chrome);
  overflow: hidden;
  padding: .8rem 0;
}
.bd-strip-track {
  display: flex;
  gap: 2.4rem;
  width: max-content;
  animation: bd-slide 42s linear infinite;
}
.bd-strip-item {
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--bd-faint);
  white-space: nowrap;
}
.bd-strip-item span { color: var(--bd-brass); margin-left: 2.4rem; }
@keyframes bd-slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bd-strip-track { animation: none; } }

/* ─── SECTIONS ──────────────────────────────────────────────── */
.bd-section { padding: clamp(3.5rem, 9vh, 6.5rem) 0; }
.bd-section-card { background: var(--bd-chrome); border-block: 1px solid var(--bd-rule); }
.bd-sec-head { max-width: 640px; margin-bottom: 2.8rem; }
.bd-sec-title { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: .9rem; }
.bd-sec-sub { color: var(--bd-soft); font-size: 1rem; }

/* ─── STAGES ────────────────────────────────────────────────── */
.bd-stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.bd-stage-card {
  background: var(--bd-card);
  border: 1px solid var(--bd-rule);
  border-radius: 10px;
  padding: 1.3rem 1.2rem;
}
.bd-stage-bar { height: 3px; border-radius: 2px; margin-bottom: 1rem; background: var(--bd-rule); }
.bd-stage-card:nth-child(1) .bd-stage-bar { background: var(--bd-slate); }
.bd-stage-card:nth-child(2) .bd-stage-bar { background: var(--bd-patina); }
.bd-stage-card:nth-child(3) .bd-stage-bar { background: var(--bd-brass); }
.bd-stage-card:nth-child(4) .bd-stage-bar { background: var(--bd-moss); }
.bd-stage-name { font-size: 1.05rem; margin-bottom: .45rem; }
.bd-stage-desc { font-size: .86rem; color: var(--bd-soft); }
@media (max-width: 820px) { .bd-stages { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .bd-stages { grid-template-columns: 1fr; } }

/* ─── FEATURES ──────────────────────────────────────────────── */
.bd-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--bd-rule); border: 1px solid var(--bd-rule); border-radius: 12px; overflow: hidden; }
.bd-feat { background: var(--bd-card); padding: 1.7rem 1.5rem; }
.bd-feat-num { font-size: .68rem; font-weight: 700; letter-spacing: .14em; color: var(--bd-brass); margin-bottom: .9rem; }
.bd-feat h3 { font-size: 1.02rem; margin-bottom: .5rem; }
.bd-feat p { font-size: .875rem; color: var(--bd-soft); }
@media (max-width: 900px) { .bd-feats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bd-feats { grid-template-columns: 1fr; } }

/* ─── PRINCIPLES ────────────────────────────────────────────── */
.bd-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.bd-quote {
  border-left: 2px solid var(--bd-brass);
  padding: .3rem 0 .3rem 1.15rem;
}
.bd-quote p { font-size: 1rem; margin-bottom: .6rem; }
.bd-quote-src { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bd-faint); }
@media (max-width: 880px) { .bd-quotes { grid-template-columns: 1fr; gap: 1.6rem; } }

/* ─── ORIGIN ────────────────────────────────────────────────── */
.bd-origin { display: grid; grid-template-columns: 1fr .85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.bd-origin p { color: var(--bd-soft); margin-bottom: 1rem; max-width: 52ch; }
.bd-list { list-style: none; display: grid; gap: .6rem; margin-top: 1.6rem; }
.bd-list li { display: flex; gap: .6rem; font-size: .9rem; }
.bd-list li::before { content: '—'; color: var(--bd-brass); flex: 0 0 auto; }
@media (max-width: 900px) { .bd-origin { grid-template-columns: 1fr; } }

/* The Focus panel, reproduced. */
.bd-panel { background: var(--bd-card); border: 1px solid var(--bd-rule); border-radius: 12px; padding: 1.5rem 1.4rem; box-shadow: 0 10px 30px var(--bd-cast); }
.bd-panel-title { font-size: 1.1rem; margin-bottom: .3rem; }
.bd-panel-sub { font-size: .82rem; color: var(--bd-soft); margin-bottom: 1.3rem; }
.bd-bars { display: grid; gap: .75rem; margin-bottom: 1.3rem; }
.bd-bar-row { display: grid; gap: .3rem; }
.bd-bar-head { display: flex; justify-content: space-between; font-size: .8rem; }
.bd-bar-head span { color: var(--bd-faint); }
.bd-bar-track { height: 3px; background: var(--bd-rule); border-radius: 2px; overflow: hidden; }
.bd-bar-fill { height: 100%; background: var(--bd-brass); border-radius: 2px; }
.bd-panel-note { font-size: .8rem; color: var(--bd-soft); border-left: 2px solid var(--bd-brass); padding-left: .8rem; }

/* ─── HOW IT WORKS ──────────────────────────────────────────── */
.bd-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.bd-step-card { border-top: 1px solid var(--bd-rule); padding-top: 1.1rem; }
.bd-step-idx { font-size: .68rem; font-weight: 700; letter-spacing: .14em; color: var(--bd-brass); margin-bottom: .7rem; }
.bd-step-card h4 { font-size: 1rem; margin-bottom: .45rem; }
.bd-step-card p { font-size: .86rem; color: var(--bd-soft); }
@media (max-width: 820px) { .bd-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .bd-steps { grid-template-columns: 1fr; } }

/* ─── CTA ───────────────────────────────────────────────────── */
.bd-cta { padding: clamp(3.5rem, 9vh, 6rem) 0; }
.bd-cta-inner {
  background: var(--bd-card);
  border: 1px solid var(--bd-rule);
  border-radius: 14px;
  padding: clamp(2rem, 5vw, 3.2rem);
  text-align: center;
  box-shadow: 0 12px 34px var(--bd-cast);
}
.bd-cta-inner h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin-bottom: .9rem; }
.bd-cta-inner p { color: var(--bd-soft); max-width: 48ch; margin: 0 auto 1.8rem; }
.bd-cta-note { font-size: .82rem; color: var(--bd-faint); margin-top: 1.4rem; }
.bd-cta-note a { color: var(--bd-brass); font-weight: 600; }
.bd-cta .bd-ctas { justify-content: center; margin-bottom: 0; }

/* ─── FOOTER ────────────────────────────────────────────────── */
.bd-foot {
  border-top: 1px solid var(--bd-rule);
  padding: 2.2rem var(--bd-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: var(--bd-max);
  margin: 0 auto;
}
.bd-foot-brand { font-weight: 650; font-size: .95rem; }
.bd-foot-nav { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.bd-foot-nav a { font-size: .82rem; color: var(--bd-soft); }
.bd-foot-nav a:hover { color: var(--bd-ink); }
.bd-foot-copy { font-size: .78rem; color: var(--bd-faint); width: 100%; }

/* ─── PHONE ─────────────────────────────────────────────────── */
@media (max-width: 560px) {
  :root { --bd-gutter: 1.15rem; }
  .bd-proof-sep { display: none; }
  .bd-proof { gap: 1.4rem; }
  .bd-btn { width: 100%; justify-content: center; }
  .bd-nav-cta .bd-btn { width: auto; }

  /* The cards were capped at 320px and the phone gives them 354, so a
     34px strip of dead space sat down the right of every one. */
  .bd-canvas .bd-card { max-width: none; }

  /* 44px targets. These four are NAVIGATION, so the rule applies; the
     brassdeck.scalewiseva.com link two lines above them sits inside a
     sentence and is deliberately left alone. A blanket `a { min-height }`
     would catch every link in a paragraph and wreck the prose, which is
     the mistake the portal sweep made and had to undo. */
  .bd-foot-nav { gap: .35rem 1.2rem; }
  .bd-foot-nav a { display: inline-flex; align-items: center; min-height: 44px; }
}