/* ============================================================
   INTERSTATE MEDICINE — THE DESIGN SYSTEM
   One file. One language. 18 August 2026, third rewrite.

   ------------------------------------------------------------
   WHY THIS FILE WAS REWRITTEN RATHER THAN EXTENDED
   ------------------------------------------------------------
   The first two versions of it were a layer of overrides sitting on
   top of six unrelated legacy stylesheets — one per page, each with
   its own type scale, its own card, its own label, its own idea of a
   content width. Every fix was `.im-doc .thing { … !important }`, and
   every fix made the next one harder. Adeel, correctly, kept finding
   seams:

       "there's going to be a gap in the design language"
       "these headers look COMPLETELY different now"
       "the widths of each section vary, it's noticeable"
       "find one design language for the full site"

   An override layer cannot produce one design language. It can only
   reduce the distance between several. So the marketing pages —
   index, pro_landing, courses, enterprise, faq, contact — no longer
   carry their own stylesheet at all. They are built from the
   COMPONENT VOCABULARY below, and that vocabulary is the only thing
   that defines how this site looks.

   ------------------------------------------------------------
   THE VOCABULARY — if a page needs something that is not here,
   the right move is to add it here, not to style it on the page.
   ------------------------------------------------------------
     CHROME     header.site · footer.site · .trustband
     LAYOUT     .im-sec (.on-dark .on-paper-2 .tight) · .wrap · .narrow
     TYPE       h1 h2 h3 · .eyebrow · .lede · .fineprint · .pullquote
     ACTION     .btn-primary · .btn-ghost · .cta-row
     FIGURES    .statrow · .tiers
     STRUCTURE  .cols · .num-grid · .feat (.rev) · .closer · .finalcta
     FRAGMENTS  .feat-visual · .rowline · .chip · .addr · .mini
     CONTENT    .ticks · .cmp (comparison table) · .qa-list · .ladder
     PRICING    .price-wrap · .price-card

   ------------------------------------------------------------
   TWO SCOPES, AND ONLY TWO
   ------------------------------------------------------------
     .im       the pages built in this system. They have no <style>
               block of their own; everything they look like is here.
     .im-doc   the 62 GENERATED pages (52 states, 10 guides) plus the
               two legal pages. These keep their own data layout —
               tables, requirement cards, a planner — because that
               layout is doing a job. They take the chrome, the type
               and the rhythm from section 20 and nothing else.

   ------------------------------------------------------------
   NON-NEGOTIABLES INHERITED FROM brand.css
   ------------------------------------------------------------
     · Colour comes from tokens. No hex in this file except inside
       rgba() over the ink surface, where a token cannot express alpha.
     · --disp (Fraunces) is for headings and figures ONLY. Never body,
       never labels, never buttons.
     · Everything is rem. Nothing computes below 0.875rem. check-type.mjs
       scans this file and fails the deploy if either is violated.
     · The status family (--signal-*, --red, --amber) means SIGNAL.
       It is never decoration.
   ============================================================ */


/* ============================================================
   1. SCALE
   A 76px headline against 17px body reads as confident; 38px against
   16px reads as a form. The ratio is the signal, not the size.
   ============================================================ */
:root {
  --fs-display: clamp(2.75rem, 6.4vw, 4.75rem);   /* 44 → 76px */
  --fs-h2:      clamp(2.125rem, 4.4vw, 3.25rem);  /* 34 → 52px */
  --fs-h3:      1.5rem;                           /* 24px */
  --fs-body:    1.0625rem;                        /* 17px */
  --fs-lede:    1.3125rem;                        /* 21px */
  --fs-figure:  clamp(2.125rem, 3.2vw, 2.75rem);  /* 34 → 44px */

  --air:        128px;   /* between sections */
  --air-tight:  84px;

  /* ⚠ THE SHELL IS PRO'S SHELL. The application's .wrap is
     max-width:1080px with 20px gutters (src/styles/base.css), and both
     its bars — signed-in .topbar/.appnav and signed-out .authnav — sit
     in it. A visitor crossing the seam (free page → Sign in →
     pro.interstatemedicine.com/login) must not watch the brand mark
     jump sideways. Before this, free was 1120/32 and Pro 1080/20 —
     an 8px shift at 1440 and growing at wider viewports. If Pro's
     shell ever changes, change THIS, in the same release. */
  --shell:      1080px;
  --gutter:     20px;
  --ease-out:   cubic-bezier(.2, .7, .3, 1);
}

@media (max-width: 900px) {
  :root { --air: 80px; --air-tight: 56px; --gutter: 20px; --fs-h3: 1.375rem; }
}


/* ============================================================
   1b. BOX MODEL

   ⚠ NOT boilerplate — this line is why the widths match.

   Every legacy page declares `*{box-sizing:border-box}` inside its own
   <style> block, and Pro's base.css does the same. The six rebuilt
   pages carry no stylesheet of their own, so they silently fell back
   to content-box — and a .wrap with max-width:1080 and 20px gutters
   rendered 1120px wide: content-box adds the padding OUTSIDE the cap.
   Every system page was exactly 40px wider than every legacy page and
   the Pro app, with `--shell` computing 1080 on all of them.

   Found by measuring getBoundingClientRect against computed --shell —
   the computed max-width LOOKED right everywhere, which is why reading
   the CSS could never have caught it.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* 2026-08-21 review: six of the rebuilt pages have no <style> of their
   own (by design), so nothing was resetting the UA's 8px body margin —
   they rendered inside a visible white ring while courses/privacy/terms
   (which carry legacy inline resets) sat flush. One reset, here, scoped to
   the two page classes (every page carries one) so the guard against
   unscoped body rules stays meaningful. */
body.im, body.im-doc { margin: 0; }

/* 2026-08-21 review: the waitlist submit button's focus outline computed
   to paper-on-paper — keyboard users saw nothing. Every interactive
   element gets a visible ring; :focus-visible keeps it off mouse clicks. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================================
   2. THE NAVIGATION BAR — identical on all 70 pages, and
   pixel-matched to the Pro application's AuthNav.

   Two rows, each with one job: row 1 is who you are, row 2 is where
   you go. That is what makes the Pro bar read as clean, and copying
   the tone without the structure is what made the first attempt fail.

   The mark is the CANONICAL BrandMark SVG — the same artwork as the
   favicon and the Pro app's <Brand>. It replaced a CSS ::before that
   drew the letters "IM" in the UI sans: close enough to look right
   alone, and obviously different the moment the two bars were seen
   side by side. Every measurement below is Pro's: 24px mark, 10px
   gap, --fs-lg wordmark, 14px row padding, 36px controls.
   ============================================================ */
header.site {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(247, 245, 241, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  padding: 0;
  color: var(--ink);
}
/* Some legacy blocks paint header.site with a navy radial gradient. */
header.site::before,
header.site::after { content: none; }

/* Every property here is stated, including ones that look redundant.
   Host pages carry their own `.wrap` rules (the cme landing has
   `.wrap{display:flex;justify-content:space-between;height:64px}`),
   and any property the system leaves unset leaks through. That rule
   spread the six tabs across the full row before `justify-content`
   and `height` were pinned. */
header.site > .wrap,
header.site .navrow {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: auto;
  min-height: 0;
}
header.site > .wrap { display: block; }

header.site > .wrap > .nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 14px 0;
  height: auto;
}

header.site .brand { margin: 0; display: flex; }

header.site .wm {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  border: none;
  padding: 0;
}

/* ============================================================
   THE WORDMARK (2026-08-24) — Adeel: "I want the logo we made that was
   just the word Interstate Medicine and it had a dashed line
   underneath it." That is 08_Outreach/brand/Interstate Medicine
   Wordmark.png: bold sans, "Interstate" in ink, "Medicine" in the
   accent, a dashed rule the full width of the words. No tile.

   Built in type, not as an image, so it scales with the chrome, takes
   the tokens, and needs NO markup change on the 70 pages: the inline
   IM-tile <svg class="mk"> every page carries is simply hidden (it
   stays the favicon — a wordmark cannot be a 16px icon). The dashed
   rule is a repeating gradient rather than border-style:dashed so the
   dash/gap rhythm is the same in every browser. Ratios from the PNG:
   rule ≈ 1/9 of cap height, gap under the baseline ≈ 1/4. */
header.site .wm .mk { display: none; }
header.site .wm .wt {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  padding-bottom: 5px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 5px, transparent 5px 8px) 0 100% / 100% 2px no-repeat;
}
header.site .wm span span,
header.site .wm .wt > span { color: var(--accent); font-weight: 700; }

header.site .navlinks {
  display: block;
  border-top: 1px solid var(--line);
  background: none;
}
header.site .navrow {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
header.site .navrow::-webkit-scrollbar { display: none; }

header.site .navlinks a {
  display: inline-flex;
  align-items: center;
  height: auto;
  min-height: 0;
  padding: 11px 14px;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  font: 600 var(--fs-sm)/1.2 var(--sans);
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color .16s var(--ease-out), background .16s var(--ease-out);
}
/* Hover paints the tab's surface — the same feedback as the Pro app's
   .appnav-link:hover, so the two bars behave alike as well as look
   alike (2026-08-24; was colour-only here, surface there). */
header.site .navlinks a:hover { color: var(--ink); background: var(--surface); text-decoration: none; }

/* The active tab is marked by the row's own bottom border, so the
   marker cannot drift when the padding changes. */
header.site .navlinks a.on {
  color: var(--accent-ink);
  border-bottom-color: var(--accent);
  background: none;
}
/* The first tab shares its left edge with the wordmark above it —
   that shared edge is what makes the two rows read as one column. */
/* Negative margin rather than zero padding: zero padding also cut off
   the left half of the hover surface, so the first tab lit up from its
   first letter rightwards while every other tab lit up around its label.
   Matches Pro's .appnav-row .appnav-link:first-child. */
header.site .navrow > a:first-child { margin-left: -14px; }

/* The one control in the chrome. Outlined, not filled: every page
   carries a filled primary button in its own content, and a second
   filled control fixed to the top competes with it at every scroll
   position. */
header.site .signin {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  font: 600 var(--fs-sm)/1 var(--sans);
  color: var(--ink) !important;
  text-decoration: none;
  white-space: nowrap;
  transition: background .16s var(--ease-out), border-color .16s var(--ease-out), color .16s var(--ease-out);
}
header.site .signin:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper) !important;
}

header.site .navlinks a:focus-visible,
header.site .signin:focus-visible,
header.site .wm:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 6px;
}

@media (max-width: 560px) {
  header.site .wm { font-size: var(--fs-base); }
  header.site .signin { padding: 0 14px; }
}


/* ============================================================
   3. PAGE + TYPE
   ============================================================ */
.im {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

.im h1, .im h2, .im h3, .im h4 {
  font-family: var(--disp);
  letter-spacing: -0.02em;
  margin: 0;
  color: inherit;
}
.im h1 { font-weight: 500; font-size: var(--fs-display); line-height: 1.06; max-width: 20ch; }
.im h2 { font-weight: 500; font-size: var(--fs-h2);      line-height: 1.1;  max-width: 24ch; }
.im h3 { font-weight: 600; font-size: var(--fs-h3);      line-height: 1.28; letter-spacing: -0.01em; }
.im h4 { font-weight: 600; font-size: var(--fs-lg);      line-height: 1.3; }

/* Headings that set their own line breaks opt out of the measure cap,
   otherwise the cap fights the <br> and produces a ragged third line. */
.im h1:has(br), .im h2:has(br) { max-width: none; }

.im h1 em, .im h2 em, .im h3 em { font-style: normal; color: var(--accent); }
.im .on-dark h1 em, .im .on-dark h2 em, .im .on-dark h3 em { color: var(--accent-light); }

.im p { margin: 0; }
.im .lede {
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 58ch;
  margin: 26px 0 0;
}
.im .fineprint {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 60ch;
  margin: 20px 0 0;
}
.im .fineprint b { color: var(--ink-2); font-weight: 600; }

/* Prose links. Underlined in a hairline so a paragraph does not
   develop hot spots, and the underline firms up on hover. */
.im p a, .im li a, .im .fineprint a, .im dd a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
}
.im p a:hover, .im li a:hover, .im .fineprint a:hover { text-decoration-color: currentColor; }

.im .on-dark p, .im .on-dark .lede { color: rgba(255, 255, 255, 0.74); }
.im .on-dark .fineprint { color: rgba(255, 255, 255, 0.55); }
.im .on-dark h1, .im .on-dark h2, .im .on-dark h3, .im .on-dark h4 { color: #fff; }
.im .on-dark p a, .im .on-dark li a { color: var(--accent-light); text-decoration-color: rgba(255,255,255,.3); }


/* ============================================================
   4. SECTIONS
   The alternation of ivory, second-surface and full-bleed ink is what
   gives a long page a pulse. Without it the page is one continuous
   field and the visitor loses any sense of having moved through parts.
   ============================================================ */
.im .im-sec { padding: var(--air) 0; }
.im .im-sec.tight { padding: var(--air-tight) 0; }
.im .on-dark { background: var(--ink); color: var(--paper); }
.im .on-paper-2 { background: var(--surface-2); }

.im .wrap {
  max-width: var(--shell) !important;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.im .narrow { max-width: 720px; }

/* The label above every section heading. The rule to its left is what
   stops it reading as a stray line of shouty text — and it is drawn
   with ::before on ONE class, so a label cannot appear with a rule on
   one page and without it on the next. */
/* ⚠ The background / border / padding / radius resets are NOT
   redundant. courses.html keeps the planner's legacy stylesheet, and
   that file styles a bare `.eyebrow` as a bordered pill. A rule that
   only sets colour and type leaves the pill behind — which is exactly
   what shipped for one render. A system component must state
   everything it wants, not only what differs from nothing. */
.im .eyebrow {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 20px;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  font: 600 var(--fs-xs)/1.5 var(--sans);  /* 1.5, not 1: a long eyebrow (Teams) wraps, and line-height 1 stacks the lines touching */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.im .eyebrow::before {
  content: '';
  flex: none;
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: .55;
  margin-top: calc(.75em - .5px);  /* optically centers the dash on the FIRST line whether or not the text wraps */
}
.im .on-dark .eyebrow { color: var(--accent-light); }

/* Spacing between a section's heading block and its body. One value,
   so every section on every page has the same joint. */
.im .im-sec > .wrap > * + .lede { margin-top: 26px; }
.im .body-gap { margin-top: 64px; }


/* ============================================================
   5. BUTTONS
   Ink is the decision. Accent is reserved for meaning, not for
   emphasis, so the primary button is ink and the accent stays
   available to signal compliance state elsewhere on the page.
   ============================================================ */
.im .btn-primary,
.im .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font: 600 var(--fs-sm)/1 var(--sans);
  padding: 15px 26px;
  border-radius: 8px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .14s var(--ease-out), background .14s var(--ease-out), border-color .14s var(--ease-out);
}
.im .btn-primary:hover, .im .btn-ghost:hover { transform: translateY(-1px); }
.im .btn-primary { background: var(--ink); color: var(--paper); }
.im .btn-primary:hover { background: var(--accent-700); color: #fff; }
.im .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.im .btn-ghost:hover { border-color: var(--ink); }
.im .on-dark .btn-primary { background: var(--accent); color: #fff; }
.im .on-dark .btn-primary:hover { background: var(--accent-light); color: var(--ink); }
.im .on-dark .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.28); }
.im .on-dark .btn-ghost:hover { border-color: #fff; }

.im .cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 38px; }

.im .btn-primary:focus-visible,
.im .btn-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }


/* ============================================================
   6. HERO
   ============================================================ */
.im .hero-sec { position: relative; overflow: hidden; padding: 100px 0 var(--air); }
.im .hero-sec > .wrap { position: relative; }
.im .hero-sec h1 { max-width: none; }

/* Concentric arcs — a nod to renewal cycles, and the reason this site
   needs no photography. Decorative, aria-hidden, first to go narrow. */
.im .arcs {
  position: absolute;
  right: -170px;
  top: -30px;
  width: 620px;
  height: 620px;
  opacity: .55;
  pointer-events: none;
}
@media (max-width: 1080px) { .im .arcs { display: none; } }
@media (max-width: 900px)  { .im .hero-sec { padding: 60px 0 var(--air); } }

/* Hero with a product screenshot beside the copy. */
.im .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 64px;
  align-items: center;
}
/* A hero that shares its row with a screenshot has roughly half the
   measure of a full-width hero, so the display size steps down with
   it. At the full 76px, "How Pro keeps every license — and every
   credential — current" ran to five lines and pushed the call to
   action below the fold on a 13" laptop. */
.im .hero-grid h1 { font-size: clamp(2.25rem, 3.6vw, 3.25rem); }
.im .hero-grid .lede { font-size: var(--fs-lg); }

.im .shotframe {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(16,26,28,.04), 0 18px 46px rgba(16,26,28,.08);
}
.im .shotframe img { display: block; width: 100%; height: auto; }
.im .shotcap { margin-top: 14px; font-size: var(--fs-xs); color: var(--ink-3); }


/* The course waitlist. A live Netlify form, so the markup inside it is
   untouched; only the frame around it belongs to the system. */
.im .waitlist {
  margin-top: 34px;
  padding: 22px 22px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  max-width: 460px;
}
.im .waitlist .wl-h { font-weight: 600; font-size: var(--fs-sm); margin-bottom: 12px; }
.im .waitlist .wl-form { display: flex; gap: 10px; flex-wrap: wrap; }
.im .waitlist input[type=email] {
  flex: 1 1 200px;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--paper);
  font: 400 var(--fs-sm)/1 var(--sans);
  color: var(--ink);
}
.im .waitlist input[type=email]:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.im .waitlist button {
  flex: none;
  height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font: 600 var(--fs-sm)/1 var(--sans);
  cursor: pointer;
}
.im .waitlist button:hover { background: var(--accent-700); color: #fff; }
.im .waitlist .wl-fine { margin-top: 12px; font-size: var(--fs-xs); color: var(--ink-3); }
.im .waitlist .wl-thanks { margin-top: 12px; font-size: var(--fs-sm); color: var(--accent-ink); }

/* ============================================================
   7. FIGURES — brass numerals, on a rule, never in a box
   brand.css reserves brass for figures: a number set in brass reads
   as data, and brass on prose makes a page look decorated.
   ============================================================ */
.im .statrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  border-top: 1px solid var(--line);
  margin-top: 88px;
  padding-top: 36px;
}
.im .on-dark .statrow { border-top-color: rgba(255, 255, 255, 0.16); }
.im .statrow .t b {
  display: block;
  font-family: var(--disp);
  font-size: var(--fs-figure);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.im .statrow .t b small { font-family: var(--sans); font-size: var(--fs-sm); font-weight: 500; color: var(--ink-3); }
.im .statrow .t span { display: block; margin-top: 8px; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.45; }
.im .on-dark .statrow .t span { color: rgba(255, 255, 255, 0.6); }
.im .statrow .t a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-2); }
.im .statrow .t a:hover { border-bottom-color: var(--ink); }

/* Price tiers — the same figure treatment, in a row of ruled columns. */
.im .tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  margin-top: 56px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.im .tiers .tier { background: var(--paper); padding: 30px 26px; }
.im .on-paper-2 .tiers .tier { background: var(--surface-2); }
.im .tiers .tier b {
  display: block;
  font-family: var(--disp);
  font-size: var(--fs-3xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.im .tiers .tier b small { font-family: var(--sans); font-size: var(--fs-sm); font-weight: 500; color: var(--ink-3); }
.im .tiers .tier span { display: block; margin-top: 10px; font-size: var(--fs-sm); color: var(--ink-3); }


/* ============================================================
   8. RULED COLUMNS
   The system's answer to "three related things side by side". 1px
   gaps over a contrasting field draw the rules; there are no card
   borders. It scales to a fourth column without inventing a fourth
   colour, which is exactly what the old coloured-top-bar cards could
   not do.
   ============================================================ */
.im .cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 64px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.im .cols.two  { grid-template-columns: repeat(2, 1fr); }
.im .cols.four { grid-template-columns: repeat(4, 1fr); }
.im .cols > * { background: var(--paper); padding: 34px 28px 38px; }
.im .on-paper-2 .cols > * { background: var(--surface-2); }
.im .on-dark .cols { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.16); }
.im .on-dark .cols > * { background: var(--ink); }
.im .cols h3 { margin-bottom: 12px; }
.im .cols p { font-size: var(--fs-base); line-height: 1.62; color: var(--ink-2); }
.im .on-dark .cols p { color: rgba(255, 255, 255, 0.72); }

/* The numbered variant — the index is brass, and it is the only
   decoration the column gets. */
.im .cols .n {
  display: block;
  margin-bottom: 24px;
  font-family: var(--disp);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--brass);
}
.im .on-dark .cols .n { color: var(--brass-wash); opacity: .82; }

.im .pullquote {
  margin-top: 60px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
  font-family: var(--disp);
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.015em;
  max-width: 62ch;
}
.im .on-dark .pullquote { border-top-color: rgba(255, 255, 255, 0.16); color: #fff; }
.im .pullquote b { color: var(--accent-ink); font-weight: 500; }
.im .on-dark .pullquote b { color: var(--accent-light); }


/* ============================================================
   9. FEATURE ROWS
   Copy on one side, one honest fragment of the real interface on the
   other. Not a stock photo and not a full screenshot: a screenshot at
   this size is unreadable, and a visitor who cannot read it learns
   nothing. `.rev` alternates the sides down a long page.
   ============================================================ */
/* Grid items default to min-width:auto, so one unbreakable child —
   a long email address, a wide inline fragment — silently widens the
   whole page at phone width instead of wrapping. Found as a 5px
   page-wide horizontal scroll at 390 by review. Applies to every
   multi-column component in the system. */
.im .feat > *, .im .cols > *, .im .hero-grid > *, .im .price-wrap > *, .im .closer > * { min-width: 0; }

.im .feat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  /* START, not center: the copy column and the interface fragment are
     rarely the same height, and centring floats the shorter one in the
     middle of the taller with a gap above it that reads as a fault. */
  align-items: start;
  margin-top: 72px;
}
.im .feat + .feat { margin-top: 88px; padding-top: 88px; border-top: 1px solid var(--line); }
.im .on-dark .feat + .feat { border-top-color: rgba(255, 255, 255, 0.16); }
.im .feat.rev > *:first-child { order: 2; }

.im .feat .k {
  margin-bottom: 16px;
  font-family: var(--disp);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--brass);
}
.im .feat h3 { margin-bottom: 14px; }
.im .feat p { color: var(--ink-2); font-size: var(--fs-body); line-height: 1.65; }
.im .on-dark .feat p { color: rgba(255, 255, 255, 0.74); }

.im .feat-visual {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(16, 26, 28, .04), 0 12px 34px rgba(16, 26, 28, .05);
}
.im .on-dark .feat-visual { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); box-shadow: none; }


/* ============================================================
   10. INTERFACE FRAGMENTS
   The pieces the feature rows are built from. Deliberately few: a
   labelled row, a chip, a mono address, a mini status tile.
   ============================================================ */
/* ⚠ .chip and .dot are scoped to their parents ON PURPOSE. The free
   planner on courses.html writes elements with those exact class names
   from JavaScript at runtime, and courses.html is a .im page. An
   unscoped .im .chip would restyle the planner's state chips with no
   error and no static check able to see it. */
.im .chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.im .chip-row .chip {
  padding: 6px 11px;
  border-radius: 999px;
  font: 600 var(--fs-xs)/1.3 var(--sans);
  background: var(--accent-wash);
  color: var(--accent-ink);
}
.im .chip-row .chip.warn { background: var(--brass-wash); color: var(--amber-ink); }
.im .chip-row .chip.bad  { background: var(--red-wash);   color: var(--red-ink); }

.im .rowline {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.im .rowline:last-child { border-bottom: 0; }
.im .on-dark .rowline { border-bottom-color: rgba(255,255,255,.12); }
.im .rowline .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--signal-good); }
.im .rowline .dot.w { background: var(--signal-warn); }
.im .rowline .dot.c { background: var(--signal-alert); }
.im .rowline .m { flex: 1; min-width: 0; }
.im .rowline .m b { display: block; font-size: var(--fs-sm); font-weight: 600; }
.im .rowline .m span { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.45; }
.im .on-dark .rowline .m span { color: rgba(255,255,255,.6); }
.im .rowline .r {
  font: 600 var(--fs-xs)/1 var(--sans);
  color: var(--ink-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.im .addr {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}
.im .mailhead { border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 4px; }
.im .mailhead .mr { display: flex; gap: 10px; font-size: var(--fs-xs); padding: 3px 0; }
.im .mailhead .mr b { color: var(--ink-3); font-weight: 600; min-width: 52px; }


/* ============================================================
   11. TICK LISTS
   The system's only bulleted list. The mark is a hairline check in
   the accent, never a filled disc — a filled disc at 15 sizes was
   half of what made the old pages look busy.
   ============================================================ */
.im .ticks { list-style: none; padding: 0; margin: 28px 0 0; }
.im .ticks li {
  position: relative;
  padding: 0 0 0 30px;
  margin-bottom: 16px;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink-2);
}
.im .ticks li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .5em;
  width: 12px;
  height: 6px;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
.im .ticks li b { color: var(--ink); font-weight: 600; }
.im .on-dark .ticks li { color: rgba(255, 255, 255, 0.74); }
.im .on-dark .ticks li b { color: #fff; }
.im .on-dark .ticks li::before { border-color: var(--accent-light); }


/* ============================================================
   12. PRICING
   ============================================================ */
.im .price-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  margin-top: 60px;
}
.im .price-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 38px;
  box-shadow: 0 1px 2px rgba(16, 26, 28, .04), 0 18px 46px rgba(16, 26, 28, .07);
  position: relative;
  max-width: 460px;
}
.im .price-card.flag { border-color: var(--line-2); }
.im .price-card .rec {
  position: absolute;
  top: -13px;
  left: 38px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: 700 var(--fs-xs)/1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.im .price-card .pn { font-family: var(--disp); font-size: var(--fs-xl); font-weight: 600; }
.im .price-card .pd { margin-top: 4px; font-size: var(--fs-sm); color: var(--ink-3); }
.im .price-card .amt { display: flex; align-items: baseline; gap: 8px; margin-top: 24px; }
.im .price-card .amt b {
  font-family: var(--disp);
  font-size: clamp(3rem, 4.6vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}
.im .price-card .amt span { font-size: var(--fs-base); color: var(--ink-3); }
.im .price-card ul { list-style: none; padding: 0; margin: 26px 0 28px; }
.im .price-card li {
  position: relative;
  padding: 8px 0 8px 28px;
  font-size: var(--fs-base);
  line-height: 1.5;
}
.im .price-card li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 1.05em;
  width: 11px;
  height: 5px;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
.im .price-card .btn-primary,
.im .price-card .btn-ghost { width: 100%; }
.im .price-card .fineprint { margin-top: 16px; }


/* ============================================================
   13. COMPARISON TABLE
   Six vendors × six capabilities. A table, because it is a table —
   but ruled horizontally only, with the own-column tinted rather
   than outlined, so it reads as a document and not as a grid of
   boxes.
   ============================================================ */
.im .cmp-scroll { margin-top: 56px; overflow-x: auto; }
.im table.cmp { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 860px; }
.im table.cmp th,
.im table.cmp td {
  text-align: left;
  vertical-align: top;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  line-height: 1.45;
}
.im table.cmp thead th {
  font: 600 var(--fs-xs)/1.3 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom-color: var(--line-2);
}
.im table.cmp tbody th { font-weight: 600; color: var(--ink); width: 22%; }
.im table.cmp td { color: var(--ink-2); }
.im table.cmp .us { background: var(--accent-wash); }
.im table.cmp thead .us { color: var(--accent-ink); }
.im table.cmp .yes  { font-weight: 600; color: var(--accent-ink); }
.im table.cmp .part { color: var(--amber-ink); }
.im table.cmp .no   { color: var(--ink-3); }


/* ============================================================
   14. THE Q&A LIST
   Rules instead of boxes. A question is a row; the row's own hairline
   separates it. The open row gains an accent left edge so you can see
   where you are in a long section. `name=` groups give one-open-at-a-
   time with no JavaScript.
   ============================================================ */
.im .qa-list { margin-top: 52px; border-top: 1px solid var(--line); }
.im .on-dark .qa-list { border-top-color: rgba(255, 255, 255, 0.16); }
.im .qa { border-bottom: 1px solid var(--line); padding-left: 0; transition: padding-left .18s var(--ease-out); }
.im .on-dark .qa { border-bottom-color: rgba(255, 255, 255, 0.16); }
.im .qa > summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 22px 44px 22px 0;
  position: relative;
  cursor: pointer;
  list-style: none;
  font-family: var(--disp);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.im .qa > summary::-webkit-details-marker { display: none; }
.im .on-dark .qa > summary { color: #fff; }
.im .qa > summary:hover { color: var(--accent-ink); }
.im .on-dark .qa > summary:hover { color: var(--accent-light); }
.im .qa[open] { box-shadow: inset 2px 0 0 var(--accent); padding-left: 20px; }
.im .on-dark .qa[open] { box-shadow: inset 2px 0 0 var(--accent-light); }

.im .qa-mark {
  position: absolute;
  right: 6px;
  top: 30px;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg);
  transform-origin: 70% 70%;
  transition: transform .18s var(--ease-out);
}
.im .on-dark .qa-mark { border-color: rgba(255, 255, 255, 0.5); }
.im .qa[open] .qa-mark { transform: rotate(225deg); }

/* Above the question, not inline: inline, a five-character chip in
   front of a two-line question knocked its second line out of
   alignment with the first. */
.im .qa-tag {
  position: absolute;
  top: 0;
  left: 0;
  font: 700 var(--fs-xs)/1 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal-alert);
}
.im .on-dark .qa-tag { color: #e0918a; }
.im .qa > summary:has(.qa-tag) { padding-top: 34px; }
.im .qa-q { display: block; }

.im .qa-a { padding: 0 44px 26px 0; max-width: 74ch; font-size: var(--fs-base); line-height: 1.7; color: var(--ink-2); }
.im .on-dark .qa-a { color: rgba(255, 255, 255, 0.76); }
.im .qa-a b { color: var(--ink); font-weight: 600; }
.im .on-dark .qa-a b { color: #fff; }
.im .qa-a a { color: var(--accent-ink); }
.im .on-dark .qa-a a { color: var(--accent-light); }
.im .qa-a p + p { margin-top: 12px; }
.im .qa-src { margin: 26px 0 0; font-size: var(--fs-xs); line-height: 1.9; color: var(--ink-3); }
.im .on-dark .qa-src { color: rgba(255, 255, 255, 0.5); }
.im .qa-src a { color: inherit; }

.im .jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.im .jump a {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 15px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font: 500 var(--fs-sm)/1 var(--sans);
  color: var(--ink-2);
  text-decoration: none;
}
.im .jump a:hover { border-color: var(--ink); color: var(--ink); }


/* ============================================================
   15. THE LADDER — a numbered sequence with real prose
   Used for the four consent levels and the three onboarding paths.
   ============================================================ */
.im .ladder { margin-top: 56px; border-top: 1px solid var(--line); }
.im .ladder .step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 22px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.im .on-dark .ladder,
.im .on-dark .ladder .step { border-color: rgba(255, 255, 255, 0.16); }
.im .ladder .step .n {
  font-family: var(--disp);
  font-size: var(--fs-2xl);
  font-weight: 500;
  line-height: 1;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}
.im .ladder .step h4 { margin-bottom: 8px; }
.im .ladder .step p { color: var(--ink-2); font-size: var(--fs-base); line-height: 1.6; }
.im .on-dark .ladder .step p { color: rgba(255, 255, 255, 0.74); }


/* ============================================================
   16. CLOSERS
   ============================================================ */
.im .closer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
  padding: 46px 0;
  border-top: 1px solid var(--line);
}
.im .on-dark .closer { border-top-color: rgba(255,255,255,.16); }
.im .closer h3 { margin-bottom: 10px; }
.im .closer p { color: var(--ink-2); font-size: var(--fs-base); max-width: 62ch; }

/* The full-bleed final call to action that ends a long page. */
.im .finalcta { text-align: center; }
.im .finalcta h2 { margin: 0 auto; max-width: 20ch; }
.im .finalcta p { margin: 22px auto 0; max-width: 60ch; }
.im .finalcta .cta-row { justify-content: center; }


/* ============================================================
   17. THE TRUST STRIP
   Four claims on one rule. It is not a section; it is a caption for
   the page above it, so it gets a rule and no padding of its own.
   ============================================================ */
.im .trustband {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.im .trustband .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  justify-content: center;
  align-items: center;
  padding-top: 16px;
  padding-bottom: 16px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.im .trustband b { color: var(--ink); font-weight: 600; }
.im .trustband a { color: inherit; }


/* ============================================================
   18. THE FOOTER — all 70 pages
   The old one ran sixty-two links together in a single grey
   paragraph. Dark, columned, and the state index demoted to a
   labelled rail beneath the legal line: the links still earn their
   keep in search, they just stop competing with the three
   destinations that matter.
   ============================================================ */
footer.site {
  background: var(--ink) !important;
  color: rgba(255, 255, 255, 0.62);
  border-top: 0;
  padding: 76px 0 44px;
  font-size: var(--fs-sm);
  line-height: 1.65;
}
footer.site > .wrap {
  display: block !important;
  max-width: var(--shell) !important;
  margin: 0 auto;
  padding: 0 var(--gutter);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.62);
}
footer.site a { color: rgba(255, 255, 255, 0.82); text-decoration: none; min-height: 24px; }
footer.site a:hover { color: #fff; text-decoration: underline; }
/* Same wordmark as the header, reversed (the PNG's "on brand teal"
   variant): white words, dashed rule in the light accent. */
footer.site .fbrand {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: 16px;
  padding-bottom: 6px;
  background: repeating-linear-gradient(90deg, var(--accent-light) 0 6px, transparent 6px 10px) 0 100% / 100% 2px no-repeat;
}
footer.site .fgrid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 52px; }
footer.site .fgrid h4 {
  margin: 0 0 16px;
  font: 600 var(--fs-xs)/1 var(--sans);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
footer.site .fgrid a { display: block; padding: 6px 0; }
footer.site .fgrid p { color: rgba(255, 255, 255, 0.62); margin: 0; }
footer.site .flegal {
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.46);
}
footer.site .flegal a { color: rgba(255, 255, 255, 0.7); }

/* The legacy footers on the generated pages are a flat list of spans
   plus two link rails. Same treatment, no markup change. */
footer.site > .wrap > span { display: block; padding: 5px 0; }
footer.site .fstates,
footer.site .all-states {
  display: block;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  line-height: 2.1;
  font-size: var(--fs-xs);
}
footer.site .fstates a,
footer.site .all-states a { color: rgba(255, 255, 255, 0.55); margin-right: 14px; font-size: var(--fs-xs); }
footer.site .fstates a:hover,
footer.site .all-states a:hover { color: #fff; }
footer.site .fstates-h,
footer.site > .wrap > p:not([class]) {
  display: block;
  margin: 32px 0 8px !important;
  font: 600 var(--fs-xs)/1 var(--sans) !important;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42) !important;
}
footer.site > .wrap > p:not([class]):first-child { margin-top: 0 !important; }
footer.site a:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; }


/* ============================================================
   19. RESPONSIVE — one breakpoint for the whole system
   Every multi-column component collapses at the same width, so the
   page does not reflow in three separate stages as it narrows.
   ============================================================ */
@media (max-width: 900px) {
  .im .hero-grid,
  .im .feat,
  .im .price-wrap,
  .im .cols,
  .im .cols.four,
  .im .closer { grid-template-columns: 1fr; }
  .im .cols.two { grid-template-columns: 1fr; }
  .im .feat { gap: 34px; }
  .im .feat.rev > *:first-child { order: 0; }
  .im .feat + .feat { margin-top: 56px; padding-top: 56px; }
  .im .statrow { grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; }
  .im .closer { gap: 22px; }
  .im .price-card { max-width: none; padding: 30px; }
  .im .qa > summary { font-size: var(--fs-lg); padding-right: 34px; }
  .im .qa-a { padding-right: 0; }
  .im .ladder .step { grid-template-columns: 1fr; gap: 8px; }
  footer.site { padding: 56px 0 36px; }
  footer.site .fgrid { grid-template-columns: 1fr; gap: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .im .btn-primary:hover, .im .btn-ghost:hover { transform: none; }
  html { scroll-behavior: auto; }
}


/* ============================================================
   20. THE GENERATED PAGES  (.im-doc)

   52 state pages, 10 guides, and the two legal pages. These keep
   their own layout because that layout is doing a job — requirement
   tables, per-profession sections, a planner. What they take from the
   system is the chrome (sections 2 and 18, which are unscoped and
   already apply), the type, and the rhythm.

   Everything here is a NORMALISATION of what their own stylesheet
   already declares, never a new component. If one of these pages
   needs a new component, it should be rebuilt in `.im` instead.
   ============================================================ */

/* ---- type: one weight system ----
   These pages set Fraunces at weight 800, which is a chunky slab; the
   same face at 500 is editorial. That single difference is most of
   what read as "the homepage uses a different font". */
.im-doc h1, .im-doc header.hero h1 {
  font-family: var(--disp);
  font-weight: 500;
  font-size: clamp(2.25rem, 4.8vw, 3.5rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 20px;
  max-width: 22ch;
}
.im-doc h2, .im-doc h2.sec, .im-doc .band h2.bh, .im-doc .finalcta h2 {
  font-family: var(--disp);
  font-weight: 500;
  font-size: clamp(1.625rem, 3.2vw, 2.375rem);
  letter-spacing: -0.02em;
  line-height: 1.16;
  margin: 0 0 14px;
}
.im-doc h3, .im-doc .pillar h3, .im-doc .feat h3 {
  font-family: var(--disp);
  font-weight: 600;
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.im-doc h1 em, .im-doc h2 em { font-style: normal !important; color: var(--accent) !important; }
.im-doc p, .im-doc li { font-size: var(--fs-base); line-height: 1.7; }
.im-doc header.hero p.sub,
.im-doc header.hero p.lede,
.im-doc .lede {
  font-size: var(--fs-lg) !important;
  line-height: 1.6 !important;
  color: var(--ink-2) !important;
  max-width: 58ch;
}

/* ---- one content column, identical to the .im pages ----
   var(--shell)/var(--gutter) — 1080px with 20px gutters, Pro's shell.
   Before this, .im pages sat in one width and these in another,
   which on a page alternating contained and full-bleed bands reads as
   the sections being different widths. */
.im-doc .wrap,
.im-doc .band > .wrap,
.im-doc main.wrap,
.im-doc header.hero > .wrap,
.im-doc footer.site > .wrap {
  max-width: var(--shell) !important;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}
.im-doc .wrap .wrap { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }

/* ---- the hero band ----
   Was a grey surface-2 tray with a bottom hairline. Paper, like every
   other page, with rhythm doing the separating instead of a fill. */
.im-doc header.hero {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-bottom: 0 !important;
  padding: 80px 0 68px !important;
}

/* ---- one label style ----
   The rule comes from ::before on every label class, rather than from
   a .d span that only some of them carry — which is how one page ended
   up showing a label with a rule and another without, three inches
   apart. */
.im-doc .eyebrow,
.im-doc .kicker,
.im-doc .why-kick,
.im-doc .mkt-kicker,
.im-doc .kick {
  display: flex !important;
  align-items: center;
  gap: 10px;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 18px !important;
  font: 600 var(--fs-xs)/1 var(--sans) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--accent) !important;
}
.im-doc .eyebrow::before,
.im-doc .kicker::before,
.im-doc .why-kick::before,
.im-doc .mkt-kicker::before,
.im-doc .kick::before {
  content: '' !important;
  position: static !important;
  display: block;
  flex: none;
  width: 26px !important;
  height: 1px !important;
  background: var(--accent) !important;
  opacity: .55;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.im-doc .eyebrow .d,
.im-doc .eyebrow .pulse { display: none !important; }

/* ---- one button ---- */
.im-doc .btn, .im-doc a.btn-el {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid transparent;
  border-radius: 8px;
  font: 600 var(--fs-sm)/1 var(--sans);
  padding: 14px 24px;
  text-decoration: none;
}
.im-doc .btn:hover, .im-doc a.btn-el:hover { background: var(--accent-700); color: #fff; }
.im-doc .btn.ghost, .im-doc .btn.btn-ghost, .im-doc .btn-ghost, .im-doc a.btn-el.ghost, .im-doc header.hero .btn.ghost {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-2) !important;
}
.im-doc .btn.ghost:hover, .im-doc .btn.btn-ghost:hover, .im-doc .btn-ghost:hover, .im-doc a.btn-el.ghost:hover { border-color: var(--ink) !important; }

/* ---- one rhythm ----
   Measured across these pages before this rule: 34, 60, 64, 72, 74
   and 0 px of first-section padding. No section starts flush against
   a band edge; a pair of same-tone bands keeps a half gap so it still
   reads as one field. */
.im-doc main.wrap { padding-top: 68px; padding-bottom: 88px; }
.im-doc main.wrap > section,
.im-doc main.wrap > .panel { margin-bottom: 64px; }
.im-doc main > section,
.im-doc body > section,
.im-doc section.band,
.im-doc section.band-dark,
.im-doc section.why { padding-top: 84px !important; padding-bottom: 84px !important; }
.im-doc section.band + section.band,
.im-doc section.band.alt + section.band.alt { padding-top: 42px !important; }
.im-doc section.trust { padding: 40px 0 !important; }
.im-doc section.panel { padding: 32px !important; margin-bottom: 32px !important; }

/* ---- one card ----
   The coloured 3px top bars cycling accent/red/teal across a row of
   three are gone: brand.css reserves status colour for signal, and a
   red rule over "The clocks never line up" is not a warning, it is
   stripes. Status colour still works everywhere it carries meaning. */
.im-doc .why-card,
.im-doc .card,
.im-doc .panel,
.im-doc .pillar,
.im-doc .fact,
.im-doc .cf-card,
.im-doc .tile,
.im-doc .plan {
  border-radius: var(--radius) !important;
  border-color: var(--line) !important;
}
.im-doc .why-card::before,
.im-doc .why-card:nth-child(2)::before,
.im-doc .why-card:nth-child(3)::before { height: 1px !important; background: var(--line-2) !important; }
.im-doc .why-ic,
.im-doc .why-card:nth-child(2) .why-ic,
.im-doc .why-card:nth-child(3) .why-ic {
  background: var(--surface-2) !important;
  color: var(--ink-2) !important;
  border-radius: 10px !important;
}
.im-doc .tile, .im-doc .tile.c, .im-doc .tile.w, .im-doc .tile.n, .im-doc .tile.k {
  border-top-color: var(--line-2) !important;
}
.im-doc .scopebanner,
.im-doc .pro-upsell,
.im-doc .matebar,
.im-doc .app-note {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-left: 2px solid var(--accent) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}

.im-doc main p a, .im-doc main li a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
}
.im-doc main p a:hover, .im-doc main li a:hover { text-decoration-color: currentColor; }

@media (max-width: 900px) {
  .im-doc header.hero { padding: 52px 0 44px !important; }
  .im-doc main.wrap { padding-top: 44px; padding-bottom: 60px; }
  .im-doc main > section,
  .im-doc body > section,
  .im-doc section.band,
  .im-doc section.band-dark,
  .im-doc section.why { padding-top: 56px !important; padding-bottom: 56px !important; }
}

/* ============================================================
   21. THE PLANNER ISLAND  (courses.html only)

   The free planner is kept verbatim with its own stylesheet — see the
   note in the markup. The system does not restyle anything inside it;
   it only makes the island sit in the same column as everything above
   and below, so the page has one left edge rather than two.
   ============================================================ */
.im .planner-island { padding: var(--air-tight) 0; }
.im .planner-island .wrap {
  max-width: var(--shell) !important;
  margin: 0 auto;
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}
/* The island's own panels already carry their internal padding. */
.im .planner-island section.panel > .wrap,
.im .planner-island .panel .wrap { padding-left: 0 !important; padding-right: 0 !important; }