/* ============================================================================
   BRAVE AND BONKERS — site layer.
   Sits on top of site/ds.css (the design-system foundation). This file carries
   the things the Claude Design prototype expressed through runtime state or
   non-standard attributes: the responsive nav swap, card hover lifts, the
   print host, and the page frame.
   ========================================================================== */

html, body { margin: 0; padding: 0; background: #e9e6df; }
body { font-family: 'Lexend', system-ui, sans-serif; color: #1b1b1b; }
a { color: #2c7d33; }
a:hover { color: #1f5a26; }
::selection { background: #43B24A; color: #10300f; }

/* The comp is a 1440px page centred on a warm ground. */
.bb-frame { max-width: 1440px; margin: 0 auto; background: #fffdf6; box-shadow: 0 0 40px rgba(0, 0, 0, .07); }

/* Page-level container so the comps' cqi units resolve against page width. */
.bb-page {
  container-type: inline-size;
  background: #fffdf6;
  color: #1b1b1b;
  font-family: 'Lexend', system-ui, sans-serif;
  line-height: 1.6;
  min-height: 60vh;
}

/* ---- Nav registers ------------------------------------------------------
   Both navs are emitted; CSS picks one at the design's 760px breakpoint so
   the correct nav is painted before JS runs. */
.bb-nav--narrow { display: none; }
@media (max-width: 759.98px) {
  .bb-nav--wide { display: none !important; }
  .bb-nav--narrow { display: block; }
}

/* ---- Card hover lift ----------------------------------------------------
   The prototype used a style-hover attribute; these are the real rules. */
.bb-herocard { transition: transform .12s ease, box-shadow .12s ease; }
.bb-herocard:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #1b1b1b; }
.bb-pickcard { transition: transform .12s ease, box-shadow .12s ease; }
.bb-pickcard:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }

/* Reassurance callouts replace the diamond bullet with a spot illustration. */
.bb-callout__label--spot::before { display: none; }

/* The design comps carry inline `display` on several panels that also ship
   `hidden` (the post-download confirmation, the welcome-back bar). An inline
   display beats the UA's [hidden]{display:none}, so those panels would be
   permanently visible — including a "confirmation email sent" message that
   had confirmed nothing. Make hidden win. */
[hidden] { display: none !important; }

/* Visible focus for keyboard users across both registers. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid #1b1b1b;
  outline-offset: 2px;
}

/* Screen-reader-only helper for status messages. */
.bb-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;
}

@keyframes bb-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---- Customizer ---------------------------------------------------------
   Steps and the seven embedded sheets are all present in the markup; the
   customizer script reveals one at a time. Hidden by default so the page is
   coherent before JS runs (step 1 is un-hidden immediately on load). */
[data-cust-step], [data-sheet] { display: none; }
[data-cust-step].is-active, [data-sheet].is-active { display: block; }
.bb-cust-noscript { display: none; }
.no-js .bb-cust-noscript { display: block; }
.no-js [data-cust-step="1"] { display: block; }

/* ---- Printing a hero sheet ---------------------------------------------
   The sheet is cloned into a print host, the fit-to-column scale is dropped
   so it prints at its true 7.75in, and the rest of the page is hidden:
   one Letter sheet, no site chrome, no buttons. */
@media print {
  @page { size: letter; margin: 0.38in; }
  html.bb-printing, html.bb-printing body {
    background: #fff !important; margin: 0 !important; padding: 0 !important; height: auto !important;
  }
  html.bb-printing body > * { display: none !important; }
  html.bb-printing body > #bb-print-host { display: block !important; }
  #bb-print-host, #bb-print-host * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #bb-print-host, #bb-print-host > * {
    width: auto !important; max-width: none !important; margin: 0 !important; transform: none !important;
  }
  #bb-print-host .sheet {
    width: auto !important; min-height: auto !important; margin: 0 !important;
    border-radius: 0 !important; box-shadow: none !important; border-width: 2.5px !important;
  }
}

/* ---- Homepage promise stickers -----------------------------------------
   The three promises under the hero are stickers slapped on the page, not a
   features grid: each card sits at its own slight angle, the middle one
   hangs lower, and the title is a tilted label overhanging the top edge. The
   label is ink with paper type and no shadow: the dice-notation register, not
   the button one, so it does not read as clickable. The numbered step cards
   below stay tidy on purpose; these are the loose ones. */
.bb-promises {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px 24px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 30px 28px 64px;
}
.bb-promise {
  position: relative;
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop-lg);
  padding: 30px 22px 22px;
  transform: rotate(var(--tilt, 0deg)) translateY(var(--drop, 0));
  transition: transform .15s ease;
}
.bb-promise:hover { transform: rotate(0deg) translateY(var(--drop, 0)); }
.bb-promise--1 { --tilt: -1.6deg; }
.bb-promise--2 { --tilt: 1.1deg; --drop: 18px; background: var(--line-soft); }
.bb-promise--3 { --tilt: -0.8deg; background: var(--tier-mid-soft); }
.bb-promise__label {
  position: absolute;
  top: -19px;
  left: 16px;
  margin: 0;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  padding: 9px 16px 10px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-md);
  transform: rotate(var(--label-tilt, 0deg));
  white-space: nowrap;
}
.bb-promise--1 .bb-promise__label { --label-tilt: 2.4deg; }
.bb-promise--2 .bb-promise__label { --label-tilt: -1.8deg; left: 20px; }
.bb-promise--3 .bb-promise__label { --label-tilt: 1.6deg; }
.bb-promise p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 599.98px) {
  .bb-promises { gap: 32px 24px; padding-top: 26px; }
  .bb-promise--2 { --drop: 0; }
}