/* ==========================================================================
   components.css — header, nav, hero, buttons, cards, CTA band, footer, etc.
   ========================================================================== */

/* ------------------------------ Header ---------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(253, 247, 237, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: var(--bf-line-ghost);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bf-s3);
  /* Longhand so .container's horizontal padding isn't clobbered —
     keeps logo + CTA aligned with the content cards below. */
  padding-top: var(--bf-s2);
  padding-bottom: var(--bf-s2);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-s2);
  color: var(--bf-ink);
  font-family: var(--bf-font-head);
  font-style: italic;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.brand__mark { width: 40px; height: 40px; }
.brand__wordmark { display: none; }

@media (min-width: 720px) {
  .brand__wordmark {
    display: inline;
    font-family: var(--bf-font-head);
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    font-size: 1.3125rem;
    line-height: 1;
    color: var(--bf-ink);
  }
}

/* Primary nav — desktop */
.nav-primary {
  display: none;
  align-items: center;
  gap: var(--bf-s4);
}

.nav-primary a {
  position: relative;
  font-family: var(--bf-font-ui);
  font-size: 0.9375rem;
  color: var(--bf-ink);
  padding-bottom: 10px; /* room for the four-dot accent below the label */
  text-decoration: none;
  transition: color var(--bf-dur-fast) var(--bf-ease),
              transform var(--bf-dur-base) var(--bf-ease-inout);
}

/* Four-dot accent — ordered to mirror the Stack Code ribbon (Teal · Sage · Terra · Honey).
   Hidden by default via clip-path; revealed outward from the centre on hover, fully
   revealed when the link is the current page. (Ref V2 09.ACC.05) */
.nav-primary a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 36px;
  height: 4px;
  transform: translateX(-50%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 4'><circle cx='2' cy='2' r='2' fill='%231E666C'/><circle cx='12' cy='2' r='2' fill='%239FAA65'/><circle cx='22' cy='2' r='2' fill='%23AE4B2C'/><circle cx='34' cy='2' r='2' fill='%23EDBF6A'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  clip-path: inset(0 50% 0 50%);
  pointer-events: none;
  transition: clip-path var(--bf-dur-base) var(--bf-ease-inout);
}

.nav-primary a:hover {
  color: var(--bf-ink);
  transform: translateY(-2px);
}

.nav-primary a:hover::after,
.nav-primary a[aria-current="page"]::after {
  clip-path: inset(0 0 0 0);
}

/* Active page marker — slight raise, dots fully visible */
.nav-primary a[aria-current="page"] {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .nav-primary a,
  .nav-primary a:hover,
  .nav-primary a[aria-current="page"] { transform: none; }
  .nav-primary a::after { transition: none; }
}

@media (min-width: 860px) {
  .nav-primary { display: flex; }
}

/* Mobile nav toggle */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: var(--bf-line-soft);
  border-radius: var(--bf-r-md);
  cursor: pointer;
  color: var(--bf-ink);
}

.nav-toggle__icon {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  position: relative;
}
.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform var(--bf-dur-base) var(--bf-ease);
}
.nav-toggle__icon::before { top: -6px; }
.nav-toggle__icon::after  { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__icon { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after  { transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 860px) {
  .nav-toggle { display: none; }
}

/* Mobile drawer */
.nav-drawer {
  position: fixed;
  inset: 0;
  background: var(--bf-paper);
  padding: var(--bf-s6) var(--bf-s3) var(--bf-s4);
  display: flex;
  flex-direction: column;
  gap: var(--bf-s3);
  transform: translateX(100%);
  transition: transform var(--bf-dur-base) var(--bf-ease);
  z-index: 40;
}

.nav-drawer[aria-hidden="false"] { transform: translateX(0); }

.nav-drawer a {
  font-family: var(--bf-font-head);
  font-size: 1.75rem;
  color: var(--bf-ink);
  padding: var(--bf-s2) 0;
  border-bottom: var(--bf-line-soft);
}

.nav-drawer .cta-pill { margin-top: var(--bf-s3); align-self: flex-start; }

@media (min-width: 860px) {
  .nav-drawer { display: none; }
}

/* ------------------------------ Buttons --------------------------------- */

.cta-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-s1);
  font-family: var(--bf-font-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.75rem 1.375rem;
  border-radius: var(--bf-r-pill);
  background: var(--bf-terra);
  color: var(--bf-paper);
  border: 1px solid var(--bf-terra);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--bf-dur-base) var(--bf-ease-inout),
              color var(--bf-dur-base) var(--bf-ease-inout),
              border-color var(--bf-dur-base) var(--bf-ease-inout),
              transform var(--bf-dur-base) var(--bf-ease-inout),
              box-shadow var(--bf-dur-base) var(--bf-ease-inout);
  white-space: nowrap;
  will-change: transform;
}

.cta-pill:hover,
.cta-pill:focus-visible {
  background: var(--bf-honey);
  border-color: var(--bf-honey);
  color: var(--bf-ink);
  transform: translateY(-10px);
  box-shadow: var(--bf-shadow-lg);
}

.cta-pill:active { transform: translateY(-2px); box-shadow: var(--bf-shadow-sm); }

.cta-pill--ghost {
  background: transparent;
  color: var(--bf-ink);
  border: 1px solid var(--bf-terra);
}

.cta-pill--ghost:hover,
.cta-pill--ghost:focus-visible {
  background: var(--bf-terra);
  color: var(--bf-paper);
  border-color: var(--bf-terra);
}

.cta-pill--on-ink {
  background: var(--bf-terra);
  color: var(--bf-paper);
  border-color: var(--bf-terra);
}
.cta-pill--on-ink:hover,
.cta-pill--on-ink:focus-visible {
  background: var(--bf-honey);
  color: var(--bf-ink);
  border-color: var(--bf-honey);
}

@media (prefers-reduced-motion: reduce) {
  .cta-pill, .cta-pill:hover, .cta-pill:active { transform: none; }
}

.cta-arrow::after {
  content: ' →';
  transition: transform var(--bf-dur-fast) var(--bf-ease);
  display: inline-block;
}

/* ------------------------------ Hero (V2 ref 04.HER.02) ----------------- */

.hero {
  padding: var(--bf-s6) 0;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bf-s4);
  align-items: center;
}

.hero__copy {
  max-width: 52ch;
  text-align: left;
}

.hero h1 {
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 var(--bf-s3);
}

@media (min-width: 720px) {
  .hero h1 {
    font-size: 56px;
    line-height: 1.05;
  }
}

.hero h1 em { font-style: italic; }

.hero__sub {
  font-family: var(--bf-font-head);
  font-size: 1.125rem;  /* 18px mobile */
  color: var(--bf-ink-soft);
  line-height: 1.45;
  margin: 0 0 var(--bf-s4);
  max-width: 44ch;
}

@media (min-width: 720px) {
  .hero__sub { font-size: 1.375rem; }  /* 22px desktop */
}

.hero__ctas {
  display: inline-flex;
  gap: var(--bf-s2);
  flex-wrap: wrap;
}

/* Right-column image placeholder */
.hero__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  background: var(--bf-paper-tint);
  border-radius: var(--bf-r-lg);
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid rgba(26, 54, 60, 0.06);
}

.hero__visual-mark {
  width: 48%;
  height: 48%;
  opacity: 0.55;
}

.hero__visual-label {
  position: absolute;
  bottom: var(--bf-s2);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--bf-font-ui);
  font-size: var(--bf-size-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bf-ink-mute);
  background: rgba(253, 247, 237, 0.85);
  padding: 6px 10px;
  border-radius: var(--bf-r-pill);
  white-space: nowrap;
}

@media (min-width: 720px) {
  .hero { padding: var(--bf-s7) 0 var(--bf-s6); }
  .hero__inner {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--bf-s5);
  }
}

/* ------------------------------ Section intro --------------------------- */

.section-intro {
  max-width: 680px;
  margin: 0 auto var(--bf-s5);
  text-align: center;
}

.section-intro h2 {
  font-size: 30px;
  line-height: 1.15;
}

@media (min-width: 720px) {
  .section-intro h2 {
    font-size: 44px;
    line-height: 1.1;
  }
}

.section-intro h2 em { font-style: italic; }

.section-intro p {
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------ Grids ----------------------------------- */

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bf-s3);
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bf-s4);
  align-items: center;
}
.grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bf-s3);
}

@media (min-width: 720px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); gap: var(--bf-s4); }
  .grid-2 { grid-template-columns: 1fr 1fr; gap: var(--bf-s5); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); gap: var(--bf-s4); }
}

@media (min-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------ Cards ----------------------------------- */

.card {
  background: var(--bf-paper-tint);
  border: var(--bf-line-soft);
  border-radius: var(--bf-r-lg);
  padding: var(--bf-s4);
  transition: transform var(--bf-dur-base) var(--bf-ease),
              box-shadow var(--bf-dur-base) var(--bf-ease),
              border-color var(--bf-dur-base) var(--bf-ease);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--bf-shadow-sm);
  border-color: rgba(26, 54, 60, 0.28);
}

.card__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-bottom: var(--bf-s2);
}

.card__dot--teal  { background: var(--bf-teal); }
.card__dot--sage  { background: var(--bf-sage); }
.card__dot--terra { background: var(--bf-terra); }
.card__dot--honey { background: var(--bf-honey); }
.card__dot--ink   { background: var(--bf-ink); }

.card h3 {
  font-size: 1.375rem;
  margin-bottom: var(--bf-s2);
}

.card p:not(.eyebrow):not(.lede) {
  font-size: 1rem;
  color: var(--bf-ink-soft);
  margin-bottom: 0;
  max-width: none;
}

.card__code {
  font-family: var(--bf-font-ui);
  font-size: var(--bf-size-micro);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bf-ink-mute);
  margin-top: var(--bf-s2);
}

/* ------------------------------ Info alert (03.ALT.02) ------------------ */

.alert-soft {
  background: var(--bf-paper-shade);
  border-left: 3px solid var(--bf-honey);
  padding: var(--bf-s3) var(--bf-s4);
  border-radius: var(--bf-r-md);
  font-size: 1rem;
  color: var(--bf-ink-soft);
}

.alert-soft strong { color: var(--bf-ink); }

/* ------------------------------ Pole-to-pole scales (V2 ref 06.DIA.01) --- */

.scales {
  max-width: 560px;
  margin: 0 auto;
  display: grid;
  gap: var(--bf-s4);
}

.scales__axis {
  display: grid;
  gap: 8px;
}

.scales__poles {
  display: flex;
  justify-content: space-between;
  font-size: var(--bf-size-small);
  color: var(--bf-ink-soft);
  letter-spacing: 0.01em;
}

.scales__track {
  position: relative;
  height: 10px;
  border-radius: var(--bf-r-pill);
  background: linear-gradient(
    to right,
    var(--scale-from, var(--bf-honey)),
    var(--bf-paper-shade),
    var(--scale-to, var(--bf-teal))
  );
}

/* Subtle midpoint tick — marks the 4.5/8 point where the lean flips pole */
.scales__track::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1.5px;
  height: 16px;
  background: var(--bf-ink);
  opacity: 0.28;
  border-radius: 1px;
  pointer-events: none;
  z-index: 1;
}

/* Static marker (non-interactive variant) */
.scales__marker {
  position: absolute;
  left: var(--pos, 50%);
  top: -6px;
  width: 4px;
  height: 22px;
  background: var(--bf-ink);
  border-radius: 2px;
  transform: translateX(-50%);
  box-shadow: 0 0 0 3px var(--bf-paper);
}

/* Interactive slider — styled native range input, thumb acts as the ink marker */
.scales__slider {
  position: absolute;
  top: -7px;
  left: 0;
  right: 0;
  width: 100%;
  height: 24px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}

/* Inverted axis — slider value increases toward the left (T, D, R).
   E stays LTR so "Outward → Inward" reads naturally as the shape opens. */
.scales__slider--rtl { direction: rtl; }

.scales__slider::-webkit-slider-runnable-track {
  height: 24px;
  background: transparent;
  border: none;
}

.scales__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 24px;
  background: var(--bf-ink);
  border-radius: 4px;
  box-shadow: 0 0 0 3px var(--bf-paper);
  border: none;
  cursor: grab;
  margin-top: 0;
  transition: transform 160ms var(--bf-ease, cubic-bezier(0.2, 0.7, 0.2, 1));
}

.scales__slider:hover::-webkit-slider-thumb { transform: scaleY(1.1); }
.scales__slider:active::-webkit-slider-thumb { cursor: grabbing; transform: scaleY(1.15); }

.scales__slider::-moz-range-track {
  height: 24px;
  background: transparent;
  border: none;
}

.scales__slider::-moz-range-thumb {
  width: 10px;
  height: 24px;
  background: var(--bf-ink);
  border-radius: 4px;
  box-shadow: 0 0 0 3px var(--bf-paper);
  border: none;
  cursor: grab;
  transition: transform 160ms var(--bf-ease, cubic-bezier(0.2, 0.7, 0.2, 1));
}

.scales__slider:hover::-moz-range-thumb { transform: scaleY(1.1); }
.scales__slider:active::-moz-range-thumb { cursor: grabbing; transform: scaleY(1.15); }

.scales__slider:focus { outline: none; }

.scales__slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--bf-paper), 0 0 0 6px var(--bf-honey);
}
.scales__slider:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--bf-paper), 0 0 0 6px var(--bf-honey);
}

.scales__label {
  display: flex;
  align-items: baseline;
  gap: var(--bf-s1);
  font-size: var(--bf-size-small);
  color: var(--bf-ink);
}

.scales__label .code {
  font-family: var(--bf-font-head);
  font-style: italic;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--bf-ink);
}

.scales__label .name {
  color: var(--bf-ink-soft);
}

.scales__label .grade {
  margin-left: auto;
  font-family: var(--bf-font-head);
  font-style: italic;
  color: var(--bf-ink-mute);
  transition: color 160ms var(--bf-ease, cubic-bezier(0.2, 0.7, 0.2, 1));
}

/* ------------------------------ Stack Code ribbon (V2 ref 06.DIA.02) ----- */

.stack-ribbon {
  display: flex;
  gap: 4px;
  max-width: 560px;
  margin: 0 auto var(--bf-s4);
}

.stack-ribbon__cell {
  flex: 1;
  padding: var(--bf-s2) var(--bf-s1);
  text-align: center;
  font-family: var(--bf-font-head);
  font-style: italic;
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--bf-ink);
  transition: background-color 180ms var(--bf-ease, cubic-bezier(0.2, 0.7, 0.2, 1));
}

.stack-ribbon__cell:first-child { border-radius: var(--bf-r-sm) 0 0 var(--bf-r-sm); }
.stack-ribbon__cell:last-child  { border-radius: 0 var(--bf-r-sm) var(--bf-r-sm) 0; }

.stack-ribbon__cell--t { background: var(--bf-teal);  color: var(--bf-paper); }
.stack-ribbon__cell--d { background: var(--bf-sage);  color: var(--bf-ink);   }
.stack-ribbon__cell--r { background: var(--bf-terra); color: var(--bf-paper); }
.stack-ribbon__cell--e { background: var(--bf-honey); color: var(--bf-ink);   }

.stack-ribbon__cell .grade-num {
  display: inline-block;
  min-width: 0.7em;
  font-variant-numeric: tabular-nums;
}

/* Compact ribbon variant — for taster placements on home / what-to-expect */
.stack-ribbon--compact .stack-ribbon__cell {
  font-size: 1.375rem;
  padding: var(--bf-s1) var(--bf-s1);
}

/* ------------------------------ CTA band (04.CTA.01) -------------------- */

.cta-band {
  background: var(--bf-paper-tint);
  border-top: var(--bf-line-soft);
  border-bottom: var(--bf-line-soft);
  padding: var(--bf-s6) 0;
  text-align: center;
}

.cta-band h2 {
  font-style: italic;
  font-size: var(--bf-size-h1);
  margin-bottom: var(--bf-s3);
}

.cta-band p {
  margin: 0 auto var(--bf-s4);
  color: var(--bf-ink-soft);
}

/* ------------------------------ Email capture band (05.EMB) ------------- */

.email-band {
  background: var(--bf-ink);
  color: var(--bf-paper);
  padding: var(--bf-s6) 0;
}

.email-band h2 {
  color: var(--bf-paper);
  font-style: italic;
  margin-bottom: var(--bf-s3);
}

.email-band p {
  color: rgba(253, 247, 237, 0.82);
  margin-left: auto;
  margin-right: auto;
  max-width: 52ch;
  text-align: center;
}

.email-band__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.ghl-wrapper {
  background: var(--bf-paper);
  color: var(--bf-ink);
  border-radius: var(--bf-r-lg);
  padding: var(--bf-s4);
  margin-top: var(--bf-s4);
  text-align: left;
}

.ghl-wrapper .ghl-placeholder {
  display: flex;
  flex-direction: column;
  gap: var(--bf-s2);
  align-items: stretch;
  font-family: var(--bf-font-ui);
}

.ghl-wrapper .ghl-placeholder__label {
  font-size: var(--bf-size-micro);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bf-ink-mute);
}

.ghl-wrapper input[type="email"] {
  font-family: var(--bf-font-ui);
  font-size: 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid rgba(26, 54, 60, 0.24);
  border-radius: var(--bf-r-md);
  background: var(--bf-paper);
  color: var(--bf-ink);
  width: 100%;
}

.ghl-wrapper input[type="email"]:focus {
  outline: 2px solid var(--bf-teal);
  outline-offset: 2px;
}

.ghl-wrapper__note {
  display: block;
  margin-top: var(--bf-s2);
  font-size: var(--bf-size-small);
  color: var(--bf-ink-mute);
}

/* Social link row — icon + handle, ink → terra on hover */
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--bf-ink);
  text-decoration: none;
  font-family: var(--bf-font-ui);
  font-size: 0.9375rem;
  transition: color var(--bf-dur-base) var(--bf-ease);
}
.social-link:hover,
.social-link:focus-visible {
  color: var(--bf-terra);
}

.social-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--bf-s2) 0;
  display: flex;
  gap: var(--bf-s3);
  flex-wrap: wrap;
}

/* GHL form submit button — honey hover + lift.
   NOTE: the GHL form renders inside a cross-origin iframe, so these rules
   only take effect if they are also pasted into the form's Custom CSS
   field inside the GHL form builder. */
.form-builder--btn-submit button {
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.form-builder--btn-submit button:hover {
  background-color: #EDBF6A !important;
  border-color: #EDBF6A;
  transform: translateY(-10px);
}

/* ------------------------------ Columns / feature (04.COL.02) ----------- */

.feature-2col { align-items: center; }
.feature-2col__copy h2 {
  font-style: italic;
  font-size: 30px;
  line-height: 1.15;
}

@media (min-width: 720px) {
  .feature-2col__copy h2 {
    font-size: 44px;
    line-height: 1.05;
  }
}
.feature-2col__figure {
  background: var(--bf-paper-tint);
  border: var(--bf-line-soft);
  border-radius: var(--bf-r-lg);
  padding: var(--bf-s4);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}

.feature-2col__figure svg { width: 100%; max-width: 320px; height: auto; }

/* ------------------------------ Mockup figure --------------------------- */

.mockup {
  display: block;
  border-radius: var(--bf-r-lg);
  overflow: hidden;
  box-shadow: var(--bf-shadow-md);
  transition: transform var(--bf-dur-slow) var(--bf-ease),
              box-shadow var(--bf-dur-slow) var(--bf-ease);
  background: var(--bf-paper-tint);
}

.mockup:hover {
  transform: scale(1.015);
  box-shadow: var(--bf-shadow-lg);
}

/* CSS-drawn mockup placeholder — v1 stand-in for a real screenshot */
.mockup-placeholder {
  aspect-ratio: 16 / 10;
  display: grid;
  grid-template-rows: 40px 1fr;
  background: var(--bf-paper);
  border: var(--bf-line-soft);
}

.mockup-placeholder__chrome {
  background: var(--bf-paper-tint);
  border-bottom: var(--bf-line-soft);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--bf-s2);
}

.mockup-placeholder__chrome span {
  width: 10px; height: 10px; border-radius: 999px;
  background: rgba(26, 54, 60, 0.14);
}

.mockup-placeholder__body {
  padding: var(--bf-s3);
  display: flex;
  flex-direction: column;
  gap: var(--bf-s2);
}

.mockup-placeholder__line {
  height: 10px;
  border-radius: 6px;
  background: rgba(26, 54, 60, 0.08);
}

.mockup-placeholder__line--title {
  height: 22px;
  width: 70%;
  background: rgba(26, 54, 60, 0.14);
}

.mockup-placeholder__line--short { width: 55%; }

.mockup-placeholder__pills {
  display: flex;
  gap: 6px;
  margin-top: var(--bf-s2);
}

.mockup-placeholder__pills span {
  height: 18px;
  flex: 1;
  border-radius: 999px;
  opacity: 0.75;
}

.mockup-placeholder__pills span:nth-child(1) { background: var(--bf-teal); }
.mockup-placeholder__pills span:nth-child(2) { background: var(--bf-sage); }
.mockup-placeholder__pills span:nth-child(3) { background: var(--bf-terra); }
.mockup-placeholder__pills span:nth-child(4) { background: var(--bf-honey); }

/* ------------------------------ Portrait placeholder -------------------- */

.portrait {
  aspect-ratio: 1 / 1;
  background: var(--bf-sage);
  border-radius: var(--bf-r-lg);
  position: relative;
  overflow: hidden;
  transition: transform var(--bf-dur-slow) var(--bf-ease);
}

.portrait:hover { transform: scale(1.02); }

.portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 25%, rgba(253, 247, 237, 0.25), transparent 55%);
}

.portrait__initial {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--bf-font-head);
  font-style: italic;
  font-size: 6rem;
  color: rgba(253, 247, 237, 0.9);
  z-index: 1;
}

/* ------------------------------ Footer ---------------------------------- */

.site-footer {
  background: var(--bf-ink);
  color: rgba(253, 247, 237, 0.72);
  /* Generous vertical breathing room — leaves headroom for future nav items
     (blog, whitepaper, books, products) without needing a redesign. */
  padding: calc(var(--bf-s6) * 1.5) 0 var(--bf-s4);
  font-family: var(--bf-font-ui);
  font-size: var(--bf-size-small);
  margin-top: var(--bf-s6);
}

.site-footer a {
  color: var(--bf-paper);
  text-decoration: none;
  transition: color var(--bf-dur-fast) var(--bf-ease), transform var(--bf-dur-fast) var(--bf-ease);
}

.site-footer a:hover {
  color: var(--bf-honey);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bf-s6);
  padding-bottom: var(--bf-s6);
  border-bottom: 1px solid rgba(253, 247, 237, 0.1);
}

@media (min-width: 720px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--bf-s6) var(--bf-s5);
  }
}

@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr 1.6fr;
    gap: var(--bf-s5);
    /* Reserves vertical room for future nav items (blog / whitepaper /
       books / products) without the footer feeling cramped today. */
    min-height: 320px;
  }
}

.site-footer__col {
  min-width: 0;
}

.site-footer__col--brand {
  display: flex;
  flex-direction: column;
  /* Logo pins to the top of the column, social buttons pin to the bottom —
     with plenty of empty air between them, matching the DF footer layout. */
  justify-content: space-between;
  gap: var(--bf-s4);
  min-height: 220px;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-s2);
  color: var(--bf-paper);
}

.footer-brand:hover { color: var(--bf-paper); }

.footer-brand__mark {
  width: 44px;
  height: 44px;
  flex: none;
}

.footer-brand__wordmark {
  font-family: var(--bf-font-head);
  font-style: italic;
  font-weight: 600;
  font-size: 1.3125rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--bf-paper);
}

.site-footer__tagline {
  font-family: var(--bf-font-head);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: rgba(253, 247, 237, 0.75);
  margin: var(--bf-s1) 0 var(--bf-s2);
  max-width: 24ch;
}

.site-footer__social {
  display: flex;
  gap: var(--bf-s1);
  list-style: none;
  padding: 0;
  margin: var(--bf-s1) 0 0;
}

.site-footer__social a {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(253, 247, 237, 0.22);
  border-radius: 50%;
  color: var(--bf-paper);
}

.site-footer__social a:hover {
  border-color: var(--bf-honey);
  color: var(--bf-honey);
  transform: translateY(-1px);
}

.site-footer__social svg {
  width: 16px;
  height: 16px;
}

.site-footer__heading {
  font-family: var(--bf-font-ui);
  /* Heading sits just under body size but visually chunky — the almost-oversized
     column label treatment from the Daniel Francis footer reference. */
  font-size: 1.0625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--bf-honey);
  margin: 0 0 var(--bf-s3);
}

.site-footer__nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.site-footer__nav a {
  display: inline-block;
  padding: 2px 0;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.site-footer__nav a:hover {
  color: var(--bf-honey);
  transform: translateX(2px);
}

.site-footer__nav a.is-cta {
  margin-top: var(--bf-s1);
  font-weight: 600;
  color: var(--bf-honey);
}

.site-footer__nav a.is-cta:hover {
  color: var(--bf-paper);
}

.site-footer__col--newsletter p {
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0 0 var(--bf-s2);
  color: rgba(253, 247, 237, 0.72);
  max-width: 34ch;
}

.site-footer__form-label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.site-footer__form-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.site-footer__form-input {
  flex: 1 1 160px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(253, 247, 237, 0.25);
  background: rgba(253, 247, 237, 0.06);
  color: var(--bf-paper);
  font-family: var(--bf-font-ui);
  font-size: 0.9375rem;
  border-radius: 6px;
  transition: border-color var(--bf-dur-fast) var(--bf-ease), background var(--bf-dur-fast) var(--bf-ease);
}

.site-footer__form-input::placeholder { color: rgba(253, 247, 237, 0.4); }

.site-footer__form-input:focus {
  outline: none;
  border-color: var(--bf-honey);
  background: rgba(253, 247, 237, 0.09);
}

.site-footer__form-submit {
  padding: 10px 16px;
  background: var(--bf-terra);
  color: var(--bf-paper);
  border: 0;
  border-radius: 6px;
  font-family: var(--bf-font-ui);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background var(--bf-dur-base) var(--bf-ease-inout),
              color var(--bf-dur-base) var(--bf-ease-inout);
}

.site-footer__form-submit:hover,
.site-footer__form-submit:focus-visible {
  background: var(--bf-honey);
  color: var(--bf-ink);
}

.site-footer__form-note {
  font-size: 0.75rem;
  font-style: italic;
  color: rgba(253, 247, 237, 0.4);
  margin-top: var(--bf-s1);
}

.site-footer__bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: var(--bf-s4);
  font-size: 0.8125rem;
  color: rgba(253, 247, 237, 0.55);
  text-align: center;
}

.site-footer__bottom p { margin: 0; }

/* ------------------------------ Strata / infographic helpers ------------ */

.infographic-row {
  display: flex;
  justify-content: center;
  padding: var(--bf-s3) 0;
}

/* Prose block, for the About essay */

.prose {
  max-width: 62ch;
  margin: 0 auto;
}

.prose p {
  font-family: var(--bf-font-head);
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--bf-ink-soft);
  max-width: none;
}

.prose p + p { margin-top: var(--bf-s3); }

/* Author / About header */

.author {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bf-s4);
  align-items: center;
}

.author h1 {
  font-style: italic;
  font-size: var(--bf-size-display);
  line-height: 1.02;
  margin-bottom: var(--bf-s3);
}

@media (min-width: 720px) {
  .author { grid-template-columns: 1fr 1.25fr; gap: var(--bf-s5); }
}

/* "What's coming" list for about */
.coming-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bf-s4);
  max-width: var(--bf-container-narrow);
  margin: 0 auto;
}

.coming-list__item h3 {
  font-style: italic;
  margin-bottom: var(--bf-s1);
}

.coming-list__item p {
  color: var(--bf-ink-soft);
  max-width: none;
}

/* Filter colour dot helpers in prose */
.dot {
  display: inline-block;
  width: 10px; height: 10px; border-radius: 999px;
  margin-right: 0.35em;
  vertical-align: middle;
  transform: translateY(-1px);
}
.dot--teal  { background: var(--bf-teal); }
.dot--sage  { background: var(--bf-sage); }
.dot--terra { background: var(--bf-terra); }
.dot--honey { background: var(--bf-honey); }

/* ===================================================================
   MOBILE OPTIMISATIONS
   Applies below the 720px breakpoint that controls the rest of the
   layout. Keep all rules inside a single max-width query so desktop
   behaviour is untouched.
   =================================================================== */
@media (max-width: 719px) {

  /* Hamburger is vestigial on the stripped-down single-page build — the
     drawer only duplicates the visible "Take the test" CTA. Hidden
     everywhere until additional nav items are reintroduced. */
  .nav-toggle { display: none; }

  /* Hero — spinner above headline (flip source order visually) */
  .hero__visual { order: -1; }
  .hero__copy   { order: 0; }

  /* Hero visual a touch smaller on phones so it doesn't dominate */
  .hero__visual {
    max-width: 260px;
    margin: 0 auto;
  }

  /* Card — reduce padding so copy has breathing room against the
     viewport edges on small screens */
  .card {
    padding: var(--bf-s3);
  }

  /* Section padding slightly reduced on phones */
  .section {
    padding: var(--bf-s5) 0;
  }

  /* CTA band — same treatment */
  .cta-band {
    padding: var(--bf-s5) 0;
  }

  /* Section intro — tighten bottom margin so it hugs the next block */
  .section-intro {
    margin-bottom: var(--bf-s4);
  }

  /* Closing CTA band heading — scale down from desktop sizing */
  .cta-band h2 {
    font-size: 30px;
    line-height: 1.15;
  }
}