/* ==========================================================================
   Izdyhar — site stylesheet
   Design system: calm, confident, premium minimalism.
   One cobalt accent on a cool near-white canvas. See README for tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colour */
  --paper:        #FAFBFC;  /* page canvas — cool near-white, never cream */
  --surface:      #FFFFFF;  /* cards / raised surfaces */
  --ink:          #0F1729;  /* headlines & primary text */
  --slate:        #5A6474;  /* body copy, subheads      — 5.8:1 on paper */
  --mist:         #6B7483;  /* captions, meta, eyebrows — 4.5:1 on paper */
  --mist-on-dark: #8A93A3;  /* same role on the Deep Ink band — 5.9:1 there */
  --line:         #E6E9EF;  /* hairline borders, dividers */
  --line-soft:    #F0F2F6;  /* dividers inside white surfaces */
  --dash:         #B9C2D2;  /* dashed outline (non-text) */

  --cobalt:       #2648E5;  /* the accent — used sparingly */
  --cobalt-deep:  #1D39BE;  /* hover / active */
  --cobalt-tint:  #EEF2FE;  /* very light wash */
  --cobalt-edge:  rgba(38, 72, 229, .22);
  --cobalt-edge-strong: rgba(38, 72, 229, .28);
  --cobalt-lift:  #A9BAFF;  /* accent legible on Deep Ink */
  --deep-ink:     #0B1533;  /* the single dark band */
  --danger:       #B4232A;  /* form errors only — 6.3:1 on paper */

  /* Type */
  --font-sans:  'General Sans', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;

  /* Space */
  --gutter: clamp(20px, 4vw, 40px);
  --shell: 1140px;
  --shell-wide: 1200px;

  /* Radius — one scale, held everywhere */
  --r-sm: 10px;  /* buttons, inputs */
  --r-md: 12px;  /* small cards, tiles */
  --r-lg: 14px;  /* product cards */
  --r-xl: 16px;  /* large surfaces */

  /* Elevation — one recipe */
  --shadow-hair: 0 1px 2px rgba(15, 23, 41, .04);
  --shadow-card: 0 1px 2px rgba(15, 23, 41, .04), 0 8px 24px -16px rgba(15, 23, 41, .12);
  --shadow-card-hover: 0 1px 2px rgba(15, 23, 41, .05), 0 14px 32px -16px rgba(15, 23, 41, .18);
  --shadow-card-accent: 0 1px 2px rgba(15, 23, 41, .04), 0 8px 24px -16px rgba(38, 72, 229, .25);
  --shadow-panel: 0 12px 28px -18px rgba(15, 23, 41, .25);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Sticky 64px nav must not cover anchored headings. */
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--cobalt);
  text-decoration: none;
  transition: color .2s var(--ease);
}
a:hover { color: var(--cobalt-deep); }

img { max-width: 100%; display: block; }

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; }

/* Visible, generous focus ring — cobalt, per the design direction. */
:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 3px;
  border-radius: 4px;
}
.band-dark :focus-visible { outline-color: var(--cobalt-lift); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px; top: -100px;
  z-index: 200;
  background: var(--cobalt);
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  padding: 12px 18px;
  border-radius: var(--r-sm);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.shell {
  max-width: var(--shell);
  margin-inline: auto;
}

/* Section rhythm. The hero and the mission band carry their own top padding;
   the sections that follow lead with zero so the vertical rhythm reads as one
   continuous column rather than doubled gaps. */
.s-hero    { padding: clamp(64px, 9vw, 116px) var(--gutter) clamp(56px, 7vw, 96px); }
.s-mission { padding: clamp(72px, 9vw, 110px) var(--gutter); }
.s-method  { padding: clamp(64px, 9vw, 120px) var(--gutter); }
.s-flow    { padding: 0 var(--gutter) clamp(64px, 9vw, 120px); }
.s-story   { padding: 0 var(--gutter) clamp(72px, 10vw, 128px); }

/* Two-column split that stacks, text-first, when the columns can't fit. */
.split {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: center;
}
.split--wide-gap { gap: clamp(40px, 5vw, 72px); }

/* A hairline that opens a section without meaning anything more than "new topic". */
.rule-top {
  border-top: 1px solid var(--line);
  padding-top: clamp(56px, 7vw, 88px);
}

/* --------------------------------------------------------------------------
   4. Type
   -------------------------------------------------------------------------- */
/* Eyebrows and labels are set in the serif italic, sentence case. Letterspaced
   mono caps read as a slide deck; a small italic kicker reads as editorial and
   sits quietly under the line it introduces. Scale keeps them clear of the
   serif italic used at display size for the mission quote and capstone. */
.eyebrow {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.3;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--cobalt);
}
.eyebrow--mist { color: var(--mist); }
.eyebrow--on-dark { color: var(--mist-on-dark); }

.label {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: .95rem;
  line-height: 1.3;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--mist);
}
.label--cobalt { color: var(--cobalt); }
.label--xs { font-size: .88rem; }

.h1 {
  font-size: clamp(2.9rem, 5.2vw, 4.6rem);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.05;
  text-wrap: balance;
}
.h1 .accent { color: var(--cobalt); }

.h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.h2--tight { font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.25; text-wrap: balance; }

.h3 {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
}
.h3--sm { font-size: 1.3rem; }

.lede {
  color: var(--slate);
  font-size: 1.13rem;
  line-height: 1.6;
  max-width: 34em;
  text-wrap: pretty;
}
.body {
  color: var(--slate);
  font-size: 1.08rem;
  line-height: 1.6;
  max-width: 36em;
  text-wrap: pretty;
}
.body--sm { font-size: .98rem; line-height: 1.55; }

.link-arrow {
  display: inline-block;
  font-weight: 600;
  font-size: 1rem;
}
.link-arrow--sm { font-size: .95rem; }
.link-arrow--xs { font-size: .9rem; }

/* Vertical rhythm inside a text block. Stated once here rather than on every
   section, so eyebrow → heading → body → link spacing stays identical
   everywhere it appears. */
.eyebrow + .h1 { margin-top: 20px; }
.eyebrow + .h2 { margin-top: 16px; }
.h1 + .lede,
.h2 + .lede   { margin-top: 24px; }
.h2 + .body   { margin-top: 18px; }
.body + .link-arrow,
.lede + .link-arrow { margin-top: 24px; }

.center { text-align: center; }
.measure { max-width: 620px; }

/* Spacing utilities — only for the handful of one-off gaps between a block
   and a trailing link. Everything else is owned by a component rule. */
.mt-sm { margin-top: 22px; }
.mt-md { margin-top: 28px; }
.mt-lg { margin-top: 36px; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
  padding: 13px 24px;
  font-size: .98rem;
  transition: background .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .2s var(--ease);
}

.btn--primary { background: var(--cobalt); color: #fff; }
.btn--primary:hover { background: var(--cobalt-deep); color: #fff; transform: translateY(-1px); }
.btn--primary:active { transform: none; }

.btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn--secondary:hover { border-color: var(--mist); color: var(--ink); }

.btn--md { padding: 12px 22px; font-size: .95rem; }
.btn--sm { padding: 10px 18px; font-size: .9rem; }
.btn--xs { padding: 10px 16px; font-size: .9rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

/* Add-to-cart confirmation: the label swaps in place, so the click has a
   visible consequence even when the cart badge is off-screen. */
.btn[data-added="true"] { background: var(--cobalt-deep); color: #fff; }
.btn--secondary[data-added="true"] { background: var(--cobalt-tint); color: var(--ink); border-color: var(--cobalt-edge-strong); }

/* --------------------------------------------------------------------------
   6. Nav
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(250, 251, 252, .88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.nav__inner {
  max-width: var(--shell-wide);
  margin-inline: auto;
  padding: 0 var(--gutter);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: -.01em;
}
.wordmark:hover { color: var(--ink); }
.wordmark__mark {
  width: 26px; height: 26px;
  background: url("../img/socrates-mark.svg") center / contain no-repeat;
  flex: none;
}

.nav__links {
  display: flex;
  gap: 32px;
  align-items: center;
}
.nav__link {
  color: var(--slate);
  font-weight: 500;
  font-size: .95rem;
}
.nav__link:hover { color: var(--ink); }
.nav__link[aria-current="page"] { color: var(--ink); }

.nav__actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav__cart {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--slate);
  font-weight: 500;
  font-size: .95rem;
}
.nav__cart:hover { color: var(--ink); }

.cart-count {
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  background: var(--cobalt);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}
.cart-count[hidden] { display: none; }

.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 14px;
  cursor: pointer;
  color: var(--ink);
  font-weight: 600;
  font-size: .88rem;
}
.nav__toggle:hover { border-color: var(--mist); }

.nav__panel {
  position: absolute;
  top: 64px;
  left: 0;
  right: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-panel);
  display: flex;
  flex-direction: column;
  padding: 10px var(--gutter) 20px;
  gap: 2px;
  z-index: 70;
}
.nav__panel[hidden] { display: none; }
/* :not(.btn) so the panel's CTA keeps its own button colours — a bare
   `.nav__panel a` would out-specify `.btn--primary`. */
.nav__panel a:not(.btn) {
  color: var(--ink);
  font-weight: 500;
  padding: 11px 4px;
  border-bottom: 1px solid var(--line-soft);
}
.nav__panel .btn {
  margin-top: 12px;
  padding: 11px 18px;
  font-size: .92rem;
}

.nav__cta { padding: 9px 18px; font-size: .92rem; }

/* Desktop nav collapses to the menu control below 880px, matching the design. */
@media (max-width: 879px) {
  .nav__links,
  .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
}
@media (min-width: 880px) {
  .nav__panel { display: none; }
}

/* --------------------------------------------------------------------------
   7. Hero — framework diagram
   -------------------------------------------------------------------------- */
.hero__copy   { flex: 1 1 460px; min-width: 0; }
.hero__visual { flex: 1 1 380px; max-width: 520px; min-width: 0; }

/* The signature object. Not a stack of boxes — a structure: plinth at the
   bottom, three columns, a load line, and the capstone resting on top. The
   surface carries a blueprint grid and a little grain so it reads as printed
   rather than drawn, and the capstone is the one dark thing on the light half
   of the page — the same Deep Ink the mission band uses, for the same reason. */
.diagram {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(120% 84% at 50% 0%, rgba(38, 72, 229, .06), transparent 62%),
    linear-gradient(180deg, #FFFFFF 0%, #FCFDFF 52%, #F6F8FC 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(24px, 3.2vw, 36px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    var(--shadow-card),
    0 40px 64px -52px rgba(15, 23, 41, .55);
}

/* Blueprint grid, faded toward the edges so it never competes with the type. */
.diagram::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(to right, rgba(15, 23, 41, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 41, .05) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(108% 80% at 50% 44%, #000 14%, transparent 76%);
          mask-image: radial-gradient(108% 80% at 50% 44%, #000 14%, transparent 76%);
  pointer-events: none;
}

/* Paper grain. Inline SVG turbulence — texture with no extra request. */
.diagram::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .28;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E");
  pointer-events: none;
}

.diagram__peak { position: relative; }

.diagram__capstone {
  position: relative;
  border-radius: var(--r-md);
  padding: 20px 18px 18px;
  text-align: center;
  color: #FFFFFF;
  background:
    radial-gradient(125% 145% at 50% -25%, rgba(64, 102, 255, .5), transparent 58%),
    linear-gradient(165deg, #18265C 0%, var(--deep-ink) 56%, #060D22 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .15),
    inset 0 0 0 1px rgba(255, 255, 255, .05),
    0 20px 34px -22px rgba(11, 21, 51, .78);
}
/* The destination glows a little. Sits behind the panel, inside the figure. */
.diagram__capstone::before {
  content: "";
  position: absolute;
  inset: -16% -8% -34%;
  z-index: -1;
  background: radial-gradient(58% 58% at 50% 52%, rgba(38, 72, 229, .3), transparent 70%);
  filter: blur(16px);
  pointer-events: none;
}
.diagram__capstone .label { color: var(--cobalt-lift); }
.diagram__capstone-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: -.01em;
  line-height: 1.1;
  margin-top: 8px;
}
.diagram__capstone-note {
  color: var(--mist-on-dark);
  font-size: .82rem;
  margin-top: 6px;
}

/* The line of descent: capstone down to the threshold it rests on. */
.diagram__spine {
  display: block;
  width: 1px;
  height: 24px;
  margin: 0 auto;
  background: linear-gradient(180deg, var(--cobalt), rgba(38, 72, 229, .16));
}

.diagram__threshold {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}
.diagram__threshold-line { flex: 1; height: 1px; }
.diagram__threshold-line:first-child { background: linear-gradient(90deg, transparent, var(--cobalt)); }
.diagram__threshold-line:last-child  { background: linear-gradient(270deg, transparent, var(--cobalt)); }
.diagram__threshold-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: .88rem;
  letter-spacing: 0;
  color: var(--cobalt);
  font-weight: 400;
  white-space: nowrap;
}

.diagram__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.pillar {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF 0%, #F3F6FE 100%);
  border: 1px solid var(--cobalt-edge);
  border-radius: var(--r-md);
  padding: 15px 9px 16px;
  text-align: center;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0 1px 2px rgba(15, 23, 41, .04),
    0 12px 20px -16px rgba(38, 72, 229, .5);
}
/* A cobalt cap on each column — this is the part that carries the load. */
.pillar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cobalt), transparent);
  opacity: .5;
}

.pillar__index {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: .8rem;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--cobalt);
  opacity: .55;
}
.pillar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 9px auto 10px;
  border-radius: 50%;
  color: var(--cobalt);
  background: radial-gradient(100% 100% at 50% 0%, #FFFFFF, var(--cobalt-tint));
  box-shadow:
    inset 0 0 0 1px var(--cobalt-edge),
    0 3px 7px -4px rgba(38, 72, 229, .55);
}
.pillar__icon svg { width: 17px; height: 17px; display: block; }

/* "Relationships" is one unbreakable 13-character word in a third of a
   phone-width card — `anywhere` is the guard that keeps it from being
   clipped by the card's own overflow at the very bottom of the range. */
.pillar__name {
  display: block;
  font-weight: 600;
  font-size: clamp(.84rem, 1.6vw, .98rem);
  overflow-wrap: anywhere;
}
/* Balanced so a two-word note never drops a single orphan onto line two. */
.pillar__note {
  display: block;
  color: var(--slate);
  font-size: .76rem;
  margin-top: 4px;
  line-height: 1.4;
  text-wrap: balance;
}

/* The plinth the three columns stand on, with the load-bearing span marked. */
.diagram__base {
  position: relative;
  display: block;
  height: 5px;
  margin: 14px 2px 0;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(15, 23, 41, .09), rgba(15, 23, 41, .2) 50%, rgba(15, 23, 41, .09));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
}
.diagram__base::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 34%;
  height: 100%;
  transform: translateX(-50%);
  border-radius: 3px;
  background: var(--cobalt);
  opacity: .45;
}

.diagram__foot {
  text-align: center;
  margin-top: 14px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: .9rem;
  letter-spacing: 0;
  color: var(--mist);
}

/* Three columns hold down to phone width, but they need to give up padding
   and the icon plate to keep "Relationships" on two lines instead of four. */
@media (max-width: 460px) {
  .diagram { padding: 22px 16px; }
  .pillar { padding: 12px 4px 13px; }
  .pillar__icon { width: 28px; height: 28px; margin: 7px auto 8px; }
  .pillar__icon svg { width: 15px; height: 15px; }
  .pillar__name { font-size: clamp(.72rem, 3.1vw, .84rem); letter-spacing: -.01em; }
  .pillar__note { font-size: .72rem; }
}

/* The one orchestrated hero moment: the foundation lands first, then the
   threshold line, then the capstone settles on top — the build order, animated. */
@keyframes iz-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
/* The spine draws itself downward rather than sliding in — it's a connection
   being made, not an object arriving. */
@keyframes iz-draw {
  from { opacity: 0; transform: scaleY(0); }
  to   { opacity: 1; transform: none; }
}
/* Scoped to --hero: the design direction allows exactly one orchestrated
   moment, so the Method page's larger diagram stays still. Order is the
   argument — plinth, columns, load line, spine, capstone. */
.diagram--hero .diagram__base                         { animation: iz-rise .6s var(--ease) .04s both; }
.diagram--hero .diagram__pillars .pillar:nth-child(1) { animation: iz-rise .6s var(--ease) .14s both; }
.diagram--hero .diagram__pillars .pillar:nth-child(2) { animation: iz-rise .6s var(--ease) .26s both; }
.diagram--hero .diagram__pillars .pillar:nth-child(3) { animation: iz-rise .6s var(--ease) .38s both; }
.diagram--hero .diagram__threshold                    { animation: iz-rise .6s var(--ease) .58s both; }
.diagram--hero .diagram__spine                        { animation: iz-draw .45s var(--ease) .76s both; transform-origin: top; }
.diagram--hero .diagram__capstone                     { animation: iz-rise .6s var(--ease) .88s both; }

/* Method page: same structure, more room to breathe. */
.diagram--lg { padding: clamp(28px, 4vw, 46px); }
.diagram--lg .diagram__capstone { padding: 24px 20px 22px; }
.diagram--lg .diagram__capstone-title { font-size: 1.75rem; margin-top: 10px; }
.diagram--lg .diagram__capstone-note { font-size: .9rem; }
.diagram--lg .diagram__spine { height: 30px; }
.diagram--lg .diagram__threshold { margin: 0 0 22px; }
.diagram--lg .diagram__pillars { gap: 12px; }
.diagram--lg .pillar { padding: 18px 12px 20px; }
.diagram--lg .pillar__icon { width: 40px; height: 40px; margin: 11px auto 12px; }
.diagram--lg .pillar__icon svg { width: 20px; height: 20px; }
.diagram--lg .pillar__name { font-size: clamp(.9rem, 1.8vw, 1.05rem); }
.diagram--lg .pillar__note { font-size: .8rem; margin-top: 5px; }
.diagram--lg .diagram__base { height: 6px; margin-top: 18px; }
.diagram--lg .diagram__foot { margin-top: 16px; }

/* --------------------------------------------------------------------------
   8. Mission band — the single dark surface on the site
   -------------------------------------------------------------------------- */
.band-dark { background: var(--deep-ink); }
.band-dark .mission { max-width: 860px; margin-inline: auto; text-align: center; }

.mission__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  line-height: 1.45;
  color: var(--paper);
  font-weight: 400;
  margin-top: 20px;
  text-wrap: balance;
}
.mission__quote .accent { color: var(--cobalt-lift); }
.mission__note {
  color: var(--mist-on-dark);
  margin: 20px auto 0;
  font-size: 1.02rem;
  max-width: 36em;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   9. Method preview — the ordered steps
   -------------------------------------------------------------------------- */
.method__copy  { flex: 1 1 440px; min-width: 0; }
.method__steps { flex: 1 1 360px; max-width: 460px; min-width: 0; }

.steps { display: flex; flex-direction: column; }
.step {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--line);
}
.step:last-child { border-bottom: 0; }
.step__n {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--cobalt);
  font-weight: 400;
  flex: none;
}
.step__title { display: block; font-weight: 600; }
.step__note { display: block; color: var(--mist); font-size: .88rem; margin-top: 2px; }
/* The destination is not a step — it reads in neutral, not accent. */
.step--destination .step__n { color: var(--mist); }

/* --------------------------------------------------------------------------
   10. Cards
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px;
  margin-top: 44px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-card);
  color: var(--ink);
}

/* Only the whole-card links lift — static cards stay put. */
a.card {
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
a.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  color: var(--ink);
}

/* One highlighted card per grid, max. */
.card--featured {
  border: 1.5px solid var(--cobalt);
  box-shadow: var(--shadow-card-accent);
}
.card--bundle {
  background: var(--cobalt-tint);
  border-color: var(--cobalt-edge-strong);
  box-shadow: none;
}

.card__blurb { margin: 0; color: var(--slate); font-size: .98rem; line-height: 1.55; flex: 1; }
.card__blurb--sm { font-size: .96rem; }

.card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.card__actions { display: flex; gap: 14px; align-items: center; }

.price { font-weight: 600; font-size: 1.05rem; }
.price--lg { font-size: 1.5rem; letter-spacing: -.01em; }

.card__cta { color: var(--cobalt); font-weight: 600; font-size: .95rem; }

/* Bundle band -------------------------------------------------------------- */
.bundle {
  margin-top: 20px;
  background: var(--cobalt-tint);
  border: 1px solid var(--cobalt-edge-strong);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 32px);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}
.bundle__copy { flex: 1 1 340px; min-width: 0; }
.bundle__title { margin-top: 8px; font-size: 1.3rem; }
.bundle__note { margin: 6px 0 0; color: var(--slate); font-size: .98rem; line-height: 1.55; }
.bundle__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   11. Cheatsheet preview rows
   -------------------------------------------------------------------------- */
.sheets__copy { flex: 1 1 440px; min-width: 0; }
.sheets__list {
  flex: 1 1 340px;
  max-width: 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sheet {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-hair);
}
.sheet__title { display: block; font-weight: 600; margin-top: 4px; }
.sheet__price { flex: none; color: var(--slate); font-weight: 600; font-size: .95rem; }

/* --------------------------------------------------------------------------
   12. Mentoring teaser
   -------------------------------------------------------------------------- */
.teaser {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

/* --------------------------------------------------------------------------
   13. Story teaser
   -------------------------------------------------------------------------- */
.story__media { flex: 1 1 300px; max-width: 400px; min-width: 0; }
.story__copy  { flex: 1 1 440px; min-width: 0; }

.story__pull {
  margin-top: 18px;
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.story__body {
  margin-top: 18px;
  color: var(--slate);
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 38em;
  text-wrap: pretty;
}

/* Four values, so a fixed 2×2 — auto-fit would give three columns at this
   width and orphan the fourth on its own row. */
.values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 28px;
  margin-top: 28px;
}
@media (max-width: 420px) {
  .values { grid-template-columns: 1fr; }
}
.values li {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  font-weight: 600;
  font-size: .95rem;
}

/* Image slot — a clearly-marked placeholder until the real portrait lands.
   Swap the whole .image-slot div for <img class="portrait" src="..." alt="..."> */
.image-slot,
.portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
}
.portrait { object-fit: cover; }
.image-slot {
  border: 1px dashed var(--dash);
  background: var(--cobalt-tint);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
}
.image-slot__hint {
  display: block;
  color: var(--slate);
  font-size: .88rem;
  line-height: 1.5;
  max-width: 22em;
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.footer__inner {
  max-width: var(--shell-wide);
  margin-inline: auto;
  padding: 64px var(--gutter) 0;
}
.footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  justify-content: space-between;
  padding-bottom: 56px;
}
.footer__brand {
  flex: 1 1 260px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer__tagline { margin: 0; color: var(--slate); font-size: .95rem; line-height: 1.6; }
.footer__script {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0;
  color: var(--mist);
}
.footer__cols { display: flex; flex-wrap: wrap; gap: 56px; }
.footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 150px;
}
.footer__col--wide { min-width: 220px; max-width: 280px; }
.footer__col h2 {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0;
  color: var(--mist);
  font-weight: 400;
}
.footer__col a {
  color: var(--slate);
  font-size: .92rem;
}
.footer__col a:hover { color: var(--ink); }
.footer__note { margin: 0; color: var(--slate); font-size: .92rem; line-height: 1.55; }

.signup { display: flex; gap: 8px; }
.signup input {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-family: inherit;
  font-size: .9rem;
  color: var(--ink);
  outline: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.signup input::placeholder { color: var(--mist); }
.signup input:focus {
  border-color: var(--cobalt);
  box-shadow: 0 0 0 3px var(--cobalt-tint);
}
.signup input:focus-visible { outline: none; }

/* Kept in the DOM while empty (an empty block has no height) so that
   role="status" announces reliably when it is filled. */
.signup__status {
  margin: 0;
  color: var(--slate);
  font-size: .85rem;
  line-height: 1.5;
}

.footer__social { display: flex; gap: 16px; margin-top: 4px; }
.footer__social a { color: var(--mist); font-size: .85rem; }
.footer__social a:hover { color: var(--ink); }

.footer__bottom {
  border-top: 1px solid var(--line);
  padding: 22px 0 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  justify-content: space-between;
  align-items: center;
}
.footer__bottom span {
  font-size: .82rem;
  letter-spacing: 0;
  color: var(--mist);
}
.footer__entity { text-align: right; }
@media (max-width: 640px) {
  .footer__entity { text-align: left; }
}

/* --------------------------------------------------------------------------
   15. Interior page furniture
   Shared by Method / Courses / Course / Mentoring / Story / Checkout.
   -------------------------------------------------------------------------- */

/* Section paddings. The hero-ish first block carries top padding; the rest
   lead with zero, same as the landing page. */
.s-page-head       { padding: clamp(64px, 9vw, 116px) var(--gutter) clamp(48px, 6vw, 72px); }
.s-page-head--tight{ padding-bottom: clamp(44px, 5vw, 64px); }
.s-course-hero     { padding: clamp(56px, 8vw, 104px) var(--gutter) clamp(48px, 6vw, 72px); }
.s-checkout        { padding: clamp(48px, 7vw, 88px) var(--gutter) clamp(72px, 10vw, 128px); }
.s-empty           { padding: clamp(80px, 12vw, 160px) var(--gutter); min-height: 40vh; }
.s-block           { padding: 0 var(--gutter) clamp(64px, 9vw, 110px); }
.s-block--sm       { padding: 0 var(--gutter) clamp(56px, 7vw, 88px); }
.s-end             { padding: 0 var(--gutter) clamp(72px, 10vw, 128px); }

.shell--narrow  { max-width: 760px; }
.shell--prose   { max-width: 680px; }
.shell--diagram { max-width: 640px; }

.page-head { text-align: center; }
.page-head .lede { margin-inline: auto; }

.h1--page     { font-size: clamp(2.4rem, 4.5vw, 3.6rem); line-height: 1.08; }
.h1--course   { font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1.05; }
.h1--checkout { font-size: clamp(1.9rem, 3.8vw, 2.8rem); letter-spacing: -.03em; }
.h1--sm       { font-size: clamp(1.8rem, 3.5vw, 2.6rem); letter-spacing: -.02em; }
.h2--sub      { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.h2--section  { font-size: clamp(1.5rem, 2.8vw, 2rem); }
.h2--form     { font-size: 1.25rem; letter-spacing: -.01em; }
.h2--summary  { font-size: 1.15rem; letter-spacing: -.01em; }
.lede--wide   { max-width: 38em; }
.eyebrow--sm  { font-size: .95rem; }

/* Long-form prose ---------------------------------------------------------- */
.prose { color: var(--slate); font-size: 1.08rem; line-height: 1.65; text-wrap: pretty; }
.h2--sub + .prose { margin-top: 16px; }
.prose + .prose { margin-top: 14px; }
.prose + .link-arrow { margin-top: 20px; }
.prose strong { color: var(--ink); font-weight: 600; }

.prose-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 72px);
}
.section-block,
.prose-block {
  border-top: 1px solid var(--line);
  padding-top: clamp(32px, 4vw, 48px);
}
.section-block { padding-top: clamp(32px, 4vw, 44px); }

.longform {
  border-top: 1px solid var(--line);
  padding-top: clamp(40px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.longform p { color: var(--slate); font-size: 1.08rem; line-height: 1.7; text-wrap: pretty; }
.longform strong { color: var(--ink); font-weight: 600; }
.longform .longform__lead { color: var(--ink); font-size: 1.18rem; line-height: 1.65; font-weight: 500; }

/* Callouts, promos, closers ------------------------------------------------ */
.callout {
  background: var(--cobalt-tint);
  border: 1px solid var(--cobalt-edge);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 44px);
}
.callout--center { text-align: center; }
.callout--sm { border-radius: var(--r-lg); padding: clamp(24px, 3vw, 32px); }
.callout .prose { margin-top: 16px; }
.callout--center .prose { margin-inline: auto; max-width: 36em; }
.callout--sm .prose { color: var(--ink); font-size: 1.02rem; line-height: 1.6; margin-top: 12px; }

.promo {
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}
.promo--tint    { background: var(--cobalt-tint); border: 1px solid var(--cobalt-edge); }
.promo--surface { background: var(--surface); border: 1px solid var(--line); }
.promo__copy    { flex: 1 1 380px; min-width: 0; }
.promo__title   { font-weight: 600; font-size: 1.2rem; letter-spacing: -.01em; }
.promo__note    { margin-top: 6px; color: var(--slate); font-size: .98rem; line-height: 1.55; }

.closing {
  text-align: center;
  border-top: 1px solid var(--line);
  padding-top: clamp(56px, 7vw, 88px);
}
.closing .body { margin-inline: auto; max-width: 34em; }
.closing .btn { margin-top: 28px; padding: 13px 26px; }

/* Card grids --------------------------------------------------------------- */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 40px; }
.grid-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.grid-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 40px; }
.card-grid--flush { margin-top: 0; }

/* Values (Story) ----------------------------------------------------------- */
.value-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-hair);
}
.value-card__n { font-family: var(--font-serif); font-style: italic; font-size: .95rem; color: var(--cobalt); font-weight: 400; }
.value-card__title { font-weight: 600; font-size: 1.15rem; margin-top: 10px; }
.value-card p { margin-top: 8px; color: var(--slate); font-size: .95rem; line-height: 1.6; }

/* Mentoring tiers ---------------------------------------------------------- */
.tier {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px;
  box-shadow: var(--shadow-card);
}
.tier--featured { border: 1.5px solid var(--cobalt); box-shadow: var(--shadow-card-accent); }
.tier__title { font-weight: 600; font-size: 1.35rem; letter-spacing: -.01em; }
.tier__blurb { color: var(--slate); font-size: .98rem; line-height: 1.6; flex: 1; }
.tier__who   { color: var(--mist); font-size: .9rem; line-height: 1.55; }
.tier__foot {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.tier__price { font-weight: 600; font-size: 1.4rem; letter-spacing: -.01em; }
.tier__unit  { color: var(--mist); font-size: .88rem; }

/* Numbered flow (how mentoring works) -------------------------------------- */
.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-top: 36px; }
.flow__step  { border-top: 1px solid var(--line); padding-top: 16px; }
.flow__n     { font-family: var(--font-serif); font-style: italic; font-size: 1rem; color: var(--cobalt); font-weight: 400; }
.flow__title { font-weight: 600; margin-top: 8px; }
.flow__note  { margin-top: 6px; color: var(--slate); font-size: .92rem; line-height: 1.55; }

.booking {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 44px);
  text-align: center;
  box-shadow: var(--shadow-card);
}
.booking .body { margin: 14px auto 0; max-width: 32em; font-size: 1.02rem; }
.booking .btn { margin-top: 24px; padding: 13px 26px; }

/* Bundle hero (Courses) ---------------------------------------------------- */
.bundle-hero {
  background: var(--cobalt-tint);
  border: 1px solid var(--cobalt-edge-strong);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 44px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 56px);
}
.bundle-hero__copy { flex: 1 1 420px; min-width: 0; }
.bundle-hero__buy {
  flex: 0 1 300px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
}
.bundle-hero__copy .h2 { margin-top: 12px; }
.bundle-hero__copy .prose { margin-top: 12px; font-size: 1.05rem; line-height: 1.6; }

.bundle-list { margin-top: 22px; }
.bundle-list li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 12px 2px;
  border-bottom: 1px solid rgba(38, 72, 229, .16);
}
.bundle-list li:last-child { border-bottom: 0; }
.bundle-list__n    { font-family: var(--font-serif); font-style: italic; font-size: .98rem; color: var(--cobalt); font-weight: 400; }
.bundle-list__name { font-weight: 600; }
.bundle-list__note { color: var(--slate); font-size: .92rem; }

.price-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.price-xl  { font-weight: 600; font-size: 2.1rem; letter-spacing: -.02em; }
.price-was { color: var(--mist); font-size: .95rem; text-decoration: line-through; }
.price-note{ color: var(--slate); font-size: .9rem; line-height: 1.5; }

/* Cheatsheet packs --------------------------------------------------------- */
.pack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px;
  box-shadow: var(--shadow-hair);
  min-height: 120px;
}
.pack__title { font-weight: 600; font-size: 1.08rem; }
.pack__blurb { margin: 0; color: var(--slate); font-size: .9rem; line-height: 1.5; flex: 1; }
.pack__foot  { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; }
.btn--tiny   { padding: 8px 14px; font-size: .85rem; }

/* Course page -------------------------------------------------------------- */
.course-hero__copy  { flex: 1 1 460px; min-width: 0; }
.course-hero__aside { flex: 1 1 320px; max-width: 440px; min-width: 0; }
.course-hero__copy .h1 { margin-top: 18px; }
.course-hero__copy .lede { margin-top: 20px; }

.pillar-map {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(20px, 3vw, 30px);
  box-shadow: var(--shadow-card);
}
.pillar-map__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pillar-tile {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 8px;
  text-align: center;
}
.pillar-tile__name { display: block; font-weight: 600; font-size: clamp(.8rem, 1.6vw, .95rem); color: var(--slate); }
.pillar-tile__tag  { display: block; font-family: var(--font-serif); font-style: italic; font-size: .8rem; letter-spacing: 0; margin-top: 5px; color: var(--mist); }
.pillar-tile--active { background: var(--cobalt); border-color: var(--cobalt); }
.pillar-tile--active .pillar-tile__name { color: #fff; }
/* .82 alpha, not .75 — keeps the tag above 4.5:1 on cobalt. */
.pillar-tile--active .pillar-tile__tag  { color: rgba(255, 255, 255, .82); }
.pillar-map__foot {
  text-align: center;
  margin-top: 14px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: .9rem;
  letter-spacing: 0;
  color: var(--mist);
}

.course-body { display: flex; flex-wrap: wrap; gap: clamp(36px, 4vw, 64px); align-items: flex-start; }
.course-main { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: clamp(48px, 6vw, 72px); }
.course-rail { flex: 0 1 320px; min-width: 260px; position: sticky; top: 84px; }
@media (max-width: 899px) {
  /* Once the rail wraps below the content, sticking it is meaningless —
     the fixed buy bar takes over. */
  .course-rail { position: static; width: 100%; max-width: none; }
}

.rail-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rail-card__price { font-weight: 600; font-size: 1.9rem; letter-spacing: -.02em; }
.rail-card__meta  { border-top: 1px solid var(--line); padding-top: 14px; color: var(--slate); font-size: .9rem; line-height: 1.7; }
.rail-card__meta--tight { line-height: 1.55; }

.outcomes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px 32px; margin-top: 28px; }
.outcome    { border-top: 1px solid var(--line); padding-top: 14px; }
.outcome__t { font-weight: 600; font-size: 1rem; }
.outcome__d { color: var(--slate); font-size: .92rem; line-height: 1.5; margin-top: 5px; }

.modules { display: flex; flex-direction: column; margin-top: 20px; }
.module {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line);
}
.module:last-child { border-bottom: 0; }
.module__n    { font-family: var(--font-serif); font-style: italic; font-size: 1rem; color: var(--cobalt); font-weight: 400; min-width: 24px; flex: none; }
.module__body { flex: 1; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
.module__t    { font-weight: 600; }
.module__d    { color: var(--mist); font-size: .92rem; }

.incl { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 22px; }
.incl__card  { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px; box-shadow: var(--shadow-hair); }
.incl__title { font-weight: 600; margin-top: 6px; font-size: .98rem; }
.incl__blurb { color: var(--slate); font-size: .86rem; line-height: 1.5; margin-top: 4px; }

.note-fine {
  margin-top: 12px;
  font-size: .85rem;
  letter-spacing: 0;
  color: var(--mist);
}

/* Mobile buy bar ----------------------------------------------------------- */
.buybar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px -16px rgba(15, 23, 41, .2);
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  z-index: 50;
}
.buybar__title { font-weight: 600; font-size: 1.02rem; }
.buybar__note  { color: var(--slate); font-size: .88rem; }
@media (min-width: 900px) { .buybar { display: none; } }
/* Keep the bar from covering the end of the footer. */
@media (max-width: 899px) { .has-buybar { padding-bottom: 84px; } }

/* Checkout ----------------------------------------------------------------- */
.checkout-grid {
  display: flex;
  flex-wrap: wrap-reverse;
  gap: clamp(32px, 4vw, 64px);
  align-items: flex-start;
  margin-top: 40px;
}
.checkout-main { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 36px; }
.summary {
  flex: 1 1 340px;
  max-width: 440px;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-card);
}

.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; font-size: .88rem; font-weight: 600; color: var(--ink); }
.field input,
.field select {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 400;
  color: var(--ink);
  outline: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input::placeholder { color: var(--mist); }
.field input:focus,
.field select:focus { border-color: var(--cobalt); box-shadow: 0 0 0 3px var(--cobalt-tint); }
.field input:focus-visible,
.field select:focus-visible { outline: none; }
.field input[aria-invalid="true"] { border-color: var(--danger); }
.field__error { color: var(--danger); font-size: .82rem; font-weight: 500; }

.pay-slot {
  margin-top: 18px;
  border: 1.5px dashed var(--dash);
  border-radius: var(--r-lg);
  padding: 28px;
  text-align: center;
  background: var(--surface);
}
.pay-slot .body { margin: 12px auto 0; max-width: 34em; font-size: .95rem; }

.form-error { margin-top: 14px; color: var(--danger); font-size: .92rem; font-weight: 500; }
.btn--block { width: 100%; padding: 15px 24px; font-size: 1.02rem; margin-top: 18px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn--primary[disabled]:hover { background: var(--cobalt); transform: none; }

.fineprint {
  margin-top: 12px;
  text-align: center;
  font-size: .82rem;
  letter-spacing: 0;
  color: var(--mist);
}

.lines { display: flex; flex-direction: column; margin-top: 14px; }
.line { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.line__main   { min-width: 0; flex: 1; }
.line__title  { font-weight: 600; font-size: .98rem; }
.line__type   { font-size: .82rem; letter-spacing: 0; color: var(--mist); margin-top: 4px; }
.line__actions{ display: flex; gap: 14px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.line__price  { font-weight: 600; white-space: nowrap; }
.line__access { color: var(--slate); font-size: .9rem; margin-top: 2px; }

.qty { display: flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 8px; }
.qty button { background: none; border: none; padding: 8px 12px; cursor: pointer; color: var(--slate); font-size: .95rem; line-height: 1; }
.qty button:hover { color: var(--ink); }
.qty__n { font-size: .9rem; font-weight: 600; min-width: 18px; text-align: center; }

.link-quiet {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--mist);
  font-size: .85rem;
  font-family: inherit;
  text-decoration: underline;
}
.link-quiet:hover { color: var(--ink); }

.totals { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.totals__row { display: flex; justify-content: space-between; gap: 16px; color: var(--slate); font-size: .95rem; }
.totals__row--muted { color: var(--mist); font-size: .9rem; }
.totals__row--total { color: var(--ink); font-weight: 600; font-size: 1.1rem; border-top: 1px solid var(--line); padding-top: 12px; }

.confirm {
  max-width: 620px;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(30px, 5vw, 52px);
  box-shadow: var(--shadow-card);
}
.confirm__mark {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--cobalt);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 600;
}
.confirm .h1 { margin-top: 22px; }

.empty { max-width: 520px; margin-inline: auto; text-align: center; }
.empty .body { margin: 16px auto 0; font-size: 1.05rem; }
.empty .btn { margin-top: 26px; padding: 13px 26px; }

/* --------------------------------------------------------------------------
   16. Motion — scroll reveal
   Applied only when JS is present, so content is never hidden without it.
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}