/*
 * Interview Ready — theme stylesheet
 *
 * Four cascade layers, in this order. Later layers win regardless of specificity, so a
 * section never needs to out-specify the base and nothing here uses !important.
 *
 *   tokens    design decisions as custom properties. Nothing else declares a raw value.
 *   base      element defaults and site chrome.
 *   sections  one block per section-kit type, each namespaced .s-<type>.
 *   utils     a deliberately short list of escape hatches.
 *
 * Anything unlayered (plugins, Gravity Forms, RCP) outranks all of it. That is
 * intentional: those own their own components and consume our tokens.
 *
 * RESERVED NAMES — do not define these here. The assessment and interview plugins own
 * them, scope them to .ira-wrap / .ir-wrap, and set them from their own Style Settings
 * screens. Defining one here would create a second source of truth for the same value:
 *
 *   --ira-primary  --ira-question-bg  --ira-question-border  --ira-result-bg
 *   --ira-result-border  --ira-chapter-bg  --ira-font-family  --ira-font-size
 *   --ira-heading-size
 *   --ir-primary  --ir-task-bg  --ir-task-border  --ir-coaching-bg
 *   --ir-coaching-label  --ir-instructions-bg  --ir-font-family  --ir-font-size
 *   --ir-heading-size
 *
 * Note the overlap: the interview plugin uses the --ir- prefix too. Every token below
 * is named to avoid it. Check this list before adding one.
 */

@layer tokens, base, sections, utils;

/* ══ tokens ═══════════════════════════════════════════════════════════════════ */
@layer tokens {

  :root {
    /* Brand — sampled from the logo, not from the legacy stylesheet.
       The old #428bca is Bootstrap 3's default link colour, not a brand decision. */
    --ir-brand:        #026CED;
    --ir-brand-deep:   #0044DB;
    --ir-brand-tint:   #D5E8FD;
    --ir-brand-wash:   #EAF3FE;
    --ir-brand-line:   #B9D8FB;
    --ir-brand-on-deep:#CFE0FC;
    --ir-brand-soft:   #6FA9F5;

    /* Ink and surface. Neutrals carry a slight blue bias so they sit with the brand. */
    --ir-ink:          #0A0C10;
    --ir-body:         #454C56;
    --ir-muted:        #737C88;
    --ir-faint:        #98A1AD;
    --ir-line:         #E3E8EF;
    --ir-line-soft:    #EEF2F7;
    --ir-line-strong:  #D7DEE8;

    --ir-paper:        #FFFFFF;
    --ir-tint:         #F6F9FD;
    --ir-app:          #F1F4F9;
    --ir-deep:         #0A0C10;
    --ir-deep-line:    #23282F;
    --ir-on-deep:      #B7C0CC;
    --ir-on-deep-dim:  #8A94A2;

    /* Semantic — separate from the brand hue on purpose. */
    --ir-good:         #0A7A46;
    --ir-good-bg:      #E4F6EC;
    --ir-warn:         #8A5A00;
    --ir-warn-bg:      #FDF3E2;
    --ir-bad:          #C0392B;
    --ir-bad-bg:       #FCECEA;

    /* Type */
    --ir-font-display: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
    --ir-font-body:    "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
    --ir-font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --ir-fs-xs:   0.8125rem;
    --ir-fs-sm:   0.875rem;
    --ir-fs-base: 1rem;
    --ir-fs-md:   1.0625rem;
    --ir-fs-lg:   1.1875rem;
    --ir-fs-xl:   clamp(1.125rem, 1.06rem + 0.28vw, 1.3125rem);
    --ir-fs-2xl:  clamp(1.375rem, 1.25rem + 0.45vw, 1.5rem);
    --ir-fs-3xl:  clamp(1.625rem, 1.35rem + 0.95vw, 2rem);
    --ir-fs-4xl:  clamp(1.875rem, 1.40rem + 1.60vw, 2.375rem);
    --ir-fs-5xl:  clamp(2.25rem,  1.50rem + 2.60vw, 3.25rem);

    --ir-lh-tight: 1.12;
    --ir-lh-snug:  1.32;
    --ir-lh-body:  1.55;

    /* Space — a 4px-rooted scale. Layout uses gap, never stacked margins. */
    --ir-s1: 0.25rem;
    --ir-s2: 0.5rem;
    --ir-s3: 0.75rem;
    --ir-s4: 1rem;
    --ir-s5: 1.25rem;
    --ir-s6: 1.5rem;
    --ir-s7: 2rem;
    --ir-s8: 2.5rem;
    --ir-s9: 3rem;
    --ir-s10: 4rem;

    /* Vertical rhythm of a section band */
    --ir-rhythm-sm: clamp(2.25rem, 1.7rem + 1.8vw, 3.25rem);
    --ir-rhythm-md: clamp(3.5rem,  2.4rem + 3.6vw, 5.375rem);
    --ir-rhythm-lg: clamp(4.5rem,  3.0rem + 4.9vw, 7rem);

    /* Shape */
    --ir-r-sm:   4px;
    --ir-r:      6px;
    --ir-r-lg:   10px;
    --ir-r-xl:   12px;
    --ir-r-pill: 999px;

    --ir-shadow-card: 0 1px 2px rgb(10 12 16 / 4%), 0 14px 36px rgb(10 12 16 / 8%);
    --ir-shadow-nav:  0 1px 3px rgb(10 12 16 / 8%);

    /* Measure and gutters */
    --ir-container: 1224px;
    --ir-measure:   68ch;
    --ir-gutter:    clamp(1.25rem, 0.6rem + 2.6vw, 3rem);

    --ir-focus: 2px solid var(--ir-brand-deep);
  }

  /* Section background variants set the surface tokens the section's own rules read,
     so a partial never needs to know which background it landed on. */
  .s--paper { --ir-surface: var(--ir-paper); --ir-on-surface: var(--ir-body); --ir-heading: var(--ir-ink); --ir-rule: var(--ir-line); }
  .s--tint  { --ir-surface: var(--ir-tint);  --ir-on-surface: var(--ir-body); --ir-heading: var(--ir-ink); --ir-rule: var(--ir-line); }
  .s--deep  { --ir-surface: var(--ir-deep);  --ir-on-surface: var(--ir-on-deep); --ir-heading: var(--ir-paper); --ir-rule: var(--ir-deep-line); }
  .s--brand { --ir-surface: var(--ir-brand-deep); --ir-on-surface: var(--ir-brand-on-deep); --ir-heading: var(--ir-paper); --ir-rule: #5C93EE; }
}

/* ══ base ═════════════════════════════════════════════════════════════════════ */
@layer base {

  *, *::before, *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms;
      animation-iteration-count: 1;
      transition-duration: 0.01ms;
    }
  }

  body {
    margin: 0;
    background: var(--ir-paper);
    color: var(--ir-body);
    font-family: var(--ir-font-body);
    font-size: var(--ir-fs-base);
    line-height: var(--ir-lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: var(--ir-heading, var(--ir-ink));
    font-family: var(--ir-font-display);
    font-weight: 700;
    line-height: var(--ir-lh-tight);
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  h1 { font-size: var(--ir-fs-5xl); font-weight: 800; line-height: 1.05; }
  h2 { font-size: var(--ir-fs-4xl); line-height: 1.14; }
  h3 { font-size: var(--ir-fs-xl);  line-height: var(--ir-lh-snug); }
  h4 { font-size: var(--ir-fs-md);  line-height: var(--ir-lh-snug); }

  p, ul, ol, dl, figure, blockquote, pre, table { margin: 0; }

  a { color: var(--ir-brand); text-decoration: none; }
  a:hover, a:focus { color: var(--ir-brand-deep); text-decoration: underline; }

  :focus-visible { outline: var(--ir-focus); outline-offset: 2px; border-radius: var(--ir-r-sm); }

  img, svg, video, canvas { max-width: 100%; height: auto; display: block; }

  strong, b { font-weight: 600; color: var(--ir-heading, var(--ir-ink)); }

  code, kbd, pre, samp { font-family: var(--ir-font-mono); font-size: 0.9em; }

  hr { border: 0; border-top: 1px solid var(--ir-rule, var(--ir-line)); margin: 0; }

  ::selection { background: var(--ir-brand-tint); color: var(--ir-ink); }

  /* ── skip link ─────────────────────────────────────────────── */
  .ir-skip {
    position: absolute;
    left: -9999px;
    z-index: 100;
    padding: var(--ir-s3) var(--ir-s5);
    background: var(--ir-paper);
    color: var(--ir-ink);
    font-weight: 600;
    box-shadow: var(--ir-shadow-card);
    border-radius: var(--ir-r);
  }
  .ir-skip:focus { left: var(--ir-s4); top: var(--ir-s4); }

  /* ── containers ────────────────────────────────────────────── */
  .ir-container {
    width: 100%;
    max-width: var(--ir-container);
    margin-inline: auto;
    padding-inline: var(--ir-gutter);
  }
  .ir-container--narrow { max-width: 62rem; }
  .ir-container--prose  { max-width: 48rem; }

  /* ── the section band ──────────────────────────────────────── */
  .s {
    background: var(--ir-surface, var(--ir-paper));
    color: var(--ir-on-surface, var(--ir-body));
    padding-block: var(--ir-rhythm, var(--ir-rhythm-md));
  }
  .s--rhythm-sm { --ir-rhythm: var(--ir-rhythm-sm); }
  .s--rhythm-md { --ir-rhythm: var(--ir-rhythm-md); }
  .s--rhythm-lg { --ir-rhythm: var(--ir-rhythm-lg); }
  .s--flush     { --ir-rhythm: 0rem; }

  /* Two consecutive bands sharing a surface would read as one, so rule them apart. */
  .s + .s { border-top: 0; }
  .s--edge { border-block-end: 1px solid var(--ir-rule, var(--ir-line)); }

  .s__inner { display: flex; flex-direction: column; gap: var(--ir-s8); }

  /* ── shared type pieces ────────────────────────────────────── */
  .ir-eyebrow {
    font-size: var(--ir-fs-xs);
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ir-brand);
  }
  .s--deep .ir-eyebrow, .s--brand .ir-eyebrow { color: var(--ir-brand-soft); }

  .ir-lede { font-size: var(--ir-fs-lg); line-height: var(--ir-lh-body); max-width: var(--ir-measure); }

  .ir-head { display: flex; flex-direction: column; gap: var(--ir-s3); max-width: 42rem; }
  .ir-head--center { align-items: center; text-align: center; margin-inline: auto; }

  /* ── grid and stack primitives ─────────────────────────────── */
  .ir-grid {
    display: grid;
    gap: var(--ir-gap, var(--ir-s6));
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ir-col-min, 15rem)), 1fr));
  }
  .ir-stack { display: flex; flex-direction: column; gap: var(--ir-gap, var(--ir-s4)); }
  .ir-stack--tight { --ir-gap: var(--ir-s1); }

  /* Semantic lists that carry no bullet meaning — card grids, question lists. */
  .ir-bare { list-style: none; margin: 0; padding: 0; }
  .ir-row   { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ir-gap, var(--ir-s3)); }

  .ir-split {
    display: grid;
    gap: clamp(var(--ir-s7), 4vw, var(--ir-s10));
    align-items: center;
    grid-template-columns: 1fr;
  }
  .ir-split--top { align-items: start; }
  .ir-self-center { align-self: center; }

  @media (min-width: 60rem) {
    .ir-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* A split with one child must not reserve an empty second column. */
    .ir-split--single { grid-template-columns: minmax(0, 1fr); }
    .ir-split--wide-first  { grid-template-columns: 1.15fr 1fr; }
    .ir-split--wide-second { grid-template-columns: 1fr 1.15fr; }
    .ir-split--reverse > :first-child { order: 2; }
  }

  /* ── card ──────────────────────────────────────────────────── */
  .ir-card {
    display: flex;
    flex-direction: column;
    gap: var(--ir-s3);
    padding: var(--ir-s7);
    background: var(--ir-paper);
    border: 1px solid var(--ir-line);
    border-radius: var(--ir-r-lg);
  }
  .ir-card--accent { border-color: var(--ir-brand); border-width: 1.5px; }
  .s--deep .ir-card { background: #12151A; border-color: var(--ir-deep-line); }

  /* ── buttons ───────────────────────────────────────────────── */
  .ir-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ir-s2);
    min-height: 3.25rem;
    padding-inline: var(--ir-s6);
    border: 1.5px solid transparent;
    border-radius: var(--ir-r);
    font-family: var(--ir-font-body);
    font-size: var(--ir-fs-base);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
  }
  .ir-btn:hover, .ir-btn:focus { text-decoration: none; }

  .ir-btn--primary { background: var(--ir-brand); color: var(--ir-paper); }
  .ir-btn--primary:hover, .ir-btn--primary:focus { background: var(--ir-brand-deep); color: var(--ir-paper); }

  .ir-btn--ghost { background: var(--ir-paper); border-color: var(--ir-line-strong); color: var(--ir-ink); }
  .ir-btn--ghost:hover, .ir-btn--ghost:focus { border-color: var(--ir-brand); color: var(--ir-brand-deep); }

  .ir-btn--outline { background: transparent; border-color: var(--ir-brand); color: var(--ir-brand); }
  .ir-btn--outline:hover, .ir-btn--outline:focus { background: var(--ir-brand); color: var(--ir-paper); }

  .ir-btn--onDark { background: var(--ir-paper); color: var(--ir-brand-deep); }
  .ir-btn--onDark:hover, .ir-btn--onDark:focus { background: var(--ir-brand-wash); color: var(--ir-brand-deep); }

  .ir-btn--quiet { background: transparent; border-color: var(--ir-rule, var(--ir-line)); color: var(--ir-heading, var(--ir-ink)); }

  .ir-btn--sm { min-height: 2.75rem; padding-inline: var(--ir-s5); font-size: var(--ir-fs-sm); }

  /* ── small parts ───────────────────────────────────────────── */
  .ir-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--ir-s2);
    padding: var(--ir-s2) var(--ir-s4);
    border-radius: var(--ir-r-pill);
    background: var(--ir-brand-wash);
    color: #0A2A5E;
    font-size: var(--ir-fs-sm);
    font-weight: 600;
  }
  .ir-tag {
    align-self: flex-start;
    padding: var(--ir-s1) var(--ir-s3);
    border-radius: var(--ir-r-sm);
    background: var(--ir-good-bg);
    color: var(--ir-good);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }
  .ir-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ir-muted);
  }
  .ir-icon { flex-shrink: 0; }
  .ir-note { font-size: var(--ir-fs-sm); color: var(--ir-muted); }

  .ir-ruled { display: flex; align-items: center; gap: var(--ir-s3); }
  .ir-ruled::after { content: ""; flex-grow: 1; height: 1px; background: var(--ir-rule, var(--ir-line)); }

  /* ── site header ───────────────────────────────────────────── */
  .ir-header { background: var(--ir-paper); border-bottom: 1px solid var(--ir-line); }
  .ir-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ir-s6);
    min-height: 4.875rem;
  }

  .ir-brand { display: flex; align-items: center; gap: var(--ir-s3); text-decoration: none; }
  .ir-brand:hover { text-decoration: none; }
  .ir-brand__mark {
    display: grid;
    place-items: center;
    width: 2.375rem;
    height: 2.375rem;
    border-radius: 9px;
    background: var(--ir-brand-deep);
    color: var(--ir-paper);
    font-family: var(--ir-font-display);
    font-weight: 800;
    font-size: var(--ir-fs-md);
    letter-spacing: -0.04em;
  }
  .ir-brand__name {
    font-family: var(--ir-font-display);
    font-weight: 800;
    font-size: var(--ir-fs-md);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ir-ink);
  }

  .ir-nav { display: flex; align-items: center; gap: var(--ir-s6); }
  .ir-nav ul { display: flex; align-items: center; gap: var(--ir-s6); list-style: none; margin: 0; padding: 0; }
  .ir-nav a { color: var(--ir-body); font-size: var(--ir-fs-sm); font-weight: 500; text-decoration: none; }
  .ir-nav a:hover, .ir-nav .current-menu-item > a, .ir-nav .current-menu-ancestor > a {
    color: var(--ir-brand); text-decoration: none;
  }
  .ir-nav .current-menu-item > a { font-weight: 600; }

  /* Sub-menus stay CSS-only: hover on pointer devices, focus-within for keyboards. */
  .ir-nav li { position: relative; }
  .ir-nav .sub-menu {
    position: absolute;
    inset-inline-start: 0;
    top: 100%;
    z-index: 30;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 13rem;
    padding: var(--ir-s2);
    background: var(--ir-paper);
    border: 1px solid var(--ir-line);
    border-radius: var(--ir-r-lg);
    box-shadow: var(--ir-shadow-card);
  }
  .ir-nav li:hover > .sub-menu,
  .ir-nav li:focus-within > .sub-menu { display: flex; }
  .ir-nav .sub-menu a { display: block; padding: var(--ir-s2) var(--ir-s3); border-radius: var(--ir-r-sm); }
  .ir-nav .sub-menu a:hover { background: var(--ir-brand-wash); }

  .ir-nav__toggle { display: none; }

  @media (max-width: 60rem) {
    .ir-nav__toggle {
      display: inline-flex;
      align-items: center;
      gap: var(--ir-s2);
      min-height: 2.75rem;
      padding-inline: var(--ir-s4);
      background: transparent;
      border: 1.5px solid var(--ir-line-strong);
      border-radius: var(--ir-r);
      color: var(--ir-ink);
      font: 600 var(--ir-fs-sm) / 1 var(--ir-font-body);
      cursor: pointer;
    }
    .ir-nav {
      position: absolute;
      inset-inline: 0;
      z-index: 40;
      flex-direction: column;
      align-items: stretch;
      gap: var(--ir-s2);
      padding: var(--ir-s5) var(--ir-gutter) var(--ir-s7);
      background: var(--ir-paper);
      border-bottom: 1px solid var(--ir-line);
      box-shadow: var(--ir-shadow-nav);
    }
    .ir-nav[hidden] { display: none; }
    .ir-nav ul { flex-direction: column; align-items: stretch; gap: var(--ir-s1); }
    .ir-nav a { display: block; padding-block: var(--ir-s3); font-size: var(--ir-fs-md); }
    .ir-nav .sub-menu {
      position: static;
      display: flex;
      padding: 0 0 0 var(--ir-s4);
      border: 0;
      box-shadow: none;
      min-width: 0;
    }
    .ir-header__inner { position: relative; }
  }

  /* ── site footer ───────────────────────────────────────────── */
  .ir-footer { background: var(--ir-tint); border-top: 1px solid var(--ir-line); padding-block: var(--ir-s9); }
  .ir-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ir-s5); }
  .ir-footer ul { display: flex; flex-wrap: wrap; gap: var(--ir-s6); list-style: none; margin: 0; padding: 0; }
  .ir-footer a { color: var(--ir-muted); font-size: var(--ir-fs-sm); }
  .ir-footer a:hover { color: var(--ir-brand); }
  .ir-footer__legal { font-size: var(--ir-fs-sm); color: var(--ir-muted); }

  /* ── prose (posts, chapters, rich-text sections) ───────────── */
  .ir-prose { max-width: var(--ir-measure); display: flex; flex-direction: column; gap: var(--ir-s5); }
  .ir-prose > * { margin: 0; }
  .ir-prose h2 { font-size: var(--ir-fs-3xl); margin-block-start: var(--ir-s5); }
  .ir-prose h3 { font-size: var(--ir-fs-xl);  margin-block-start: var(--ir-s4); }
  .ir-prose ul, .ir-prose ol { padding-inline-start: var(--ir-s6); display: flex; flex-direction: column; gap: var(--ir-s2); }
  .ir-prose blockquote {
    padding-inline-start: var(--ir-s5);
    border-inline-start: 3px solid var(--ir-brand-line);
    color: var(--ir-heading, var(--ir-ink));
    font-size: var(--ir-fs-lg);
  }
  .ir-prose figure { display: flex; flex-direction: column; gap: var(--ir-s2); }
  .ir-prose figcaption { font-size: var(--ir-fs-sm); color: var(--ir-muted); }
  .ir-prose table { width: 100%; border-collapse: collapse; font-size: var(--ir-fs-sm); }
  .ir-prose th, .ir-prose td { padding: var(--ir-s3); border-bottom: 1px solid var(--ir-line); text-align: start; }
  .ir-prose th { font-weight: 600; color: var(--ir-ink); }
  .ir-prose pre { overflow-x: auto; padding: var(--ir-s5); background: var(--ir-app); border-radius: var(--ir-r); }

  /* Wide content must scroll inside itself, never the page. */
  .ir-scroll-x { overflow-x: auto; }

  /* ── blog ──────────────────────────────────────────────────── */
  .ir-archive { display: flex; flex-direction: column; gap: var(--ir-s8); }
  .ir-postcard { display: flex; flex-direction: column; gap: var(--ir-s3); }
  .ir-postcard__meta { font-size: var(--ir-fs-sm); color: var(--ir-muted); }
  .ir-postcard h2 { font-size: var(--ir-fs-2xl); }
  .ir-postcard__thumb { border-radius: var(--ir-r-lg); overflow: hidden; }

  .ir-pagination { display: flex; flex-wrap: wrap; gap: var(--ir-s2); }
  .ir-pagination .page-numbers {
    display: inline-grid;
    place-items: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding-inline: var(--ir-s3);
    border: 1px solid var(--ir-line);
    border-radius: var(--ir-r);
    color: var(--ir-body);
    text-decoration: none;
  }
  .ir-pagination .page-numbers.current { background: var(--ir-brand); border-color: var(--ir-brand); color: var(--ir-paper); }

  .ir-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ir-s2); font-size: var(--ir-fs-xs); color: var(--ir-muted); }
  .ir-breadcrumb a { color: var(--ir-muted); }
  .ir-breadcrumb [aria-current] { color: var(--ir-ink); font-weight: 600; }

  .ir-widget { display: flex; flex-direction: column; gap: var(--ir-s3); }
  .ir-widget__title { font-size: var(--ir-fs-md); }
  .ir-widget ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ir-s2); }

  /* ── forms ─────────────────────────────────────────────────── */
  .ir-field {
    width: 100%;
    min-height: 3.25rem;
    padding-inline: var(--ir-s4);
    background: var(--ir-paper);
    border: 1.5px solid var(--ir-line-strong);
    border-radius: var(--ir-r);
    color: var(--ir-ink);
    font-family: inherit;
    font-size: var(--ir-fs-base);
  }
  .ir-field::placeholder { color: var(--ir-faint); }
  .ir-field:focus { border-color: var(--ir-brand); outline: var(--ir-focus); outline-offset: 1px; }
}

/* ══ sections ═════════════════════════════════════════════════════════════════ */
@layer sections {

  /* ── hero ──────────────────────────────────────────────────── */
  .s-hero__body { display: flex; flex-direction: column; gap: var(--ir-s6); }
  .s-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ir-s3); }
  .s-hero__media img { border-radius: var(--ir-r-lg); }
  .s-hero__quote blockquote { margin: 0; font-size: var(--ir-fs-lg); line-height: var(--ir-lh-body); color: var(--ir-heading, var(--ir-ink)); }
  .s-hero--center .ir-split { grid-template-columns: 1fr; justify-items: center; text-align: center; }

  /* Inline tool starter — the job-title field that opens the Interview Builder. */
  .s-hero__tool { display: flex; flex-direction: column; gap: var(--ir-s3); }
  .s-hero__toolrow { display: flex; flex-wrap: wrap; gap: var(--ir-s3); }
  .s-hero__toolrow .ir-field { flex: 1 1 16rem; }

  /* ── feature grid / step sequence (one type, numbered toggle) ─ */
  .s-features__grid { --ir-col-min: 17rem; }
  .s-features__grid--2 { --ir-col-min: 22rem; }
  .s-features__grid--3 { --ir-col-min: 17rem; }
  .s-features__grid--4 { --ir-col-min: 14rem; }
  .s-features__item { display: flex; flex-direction: column; gap: var(--ir-s3); }
  .s-features__n {
    font-family: var(--ir-font-display);
    font-size: var(--ir-fs-xs);
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ir-brand);
  }
  .s-features__icon { color: var(--ir-brand); }
  .s-features__note {
    display: flex;
    align-items: flex-start;
    gap: var(--ir-s3);
    padding: var(--ir-s5) var(--ir-s6);
    background: var(--ir-brand-wash);
    border-radius: var(--ir-r);
    color: #0A2A5E;
  }

  /* ── media + text split ────────────────────────────────────── */
  .s-media__text { display: flex; flex-direction: column; gap: var(--ir-s4); }
  .s-media__figure img { border-radius: var(--ir-r-lg); width: 100%; }
  .s-media__figure figcaption { margin-block-start: var(--ir-s2); font-size: var(--ir-fs-sm); color: var(--ir-muted); }

  /* ── sample output ─────────────────────────────────────────── */
  .s-sample__card {
    background: var(--ir-paper);
    border: 1px solid var(--ir-line);
    border-radius: var(--ir-r-lg);
    box-shadow: var(--ir-shadow-card);
    overflow: hidden;
  }
  .s-sample__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ir-s3);
    padding: var(--ir-s4) var(--ir-s5);
    background: #FBFCFE;
    border-bottom: 1px solid var(--ir-line-soft);
  }
  .s-sample__body { display: flex; flex-direction: column; gap: var(--ir-s5); padding: var(--ir-s6); }
  .s-sample__q { display: flex; flex-direction: column; gap: var(--ir-s2); }
  .s-sample__comp {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ir-brand);
  }
  .s-sample__detail {
    display: flex;
    flex-direction: column;
    gap: var(--ir-s3);
    padding-inline-start: var(--ir-s4);
    border-inline-start: 2px solid var(--ir-brand-line);
  }
  .s-sample__foot {
    display: flex;
    align-items: center;
    gap: var(--ir-s2);
    padding-block-start: var(--ir-s4);
    border-top: 1px solid var(--ir-line-soft);
    font-size: var(--ir-fs-sm);
    color: var(--ir-muted);
  }

  /* ── audience chooser ──────────────────────────────────────── */
  .s-audience__grid { --ir-col-min: 14rem; --ir-gap: var(--ir-s5); }
  .s-audience__card { gap: var(--ir-s3); }
  .s-audience__more { margin-block-start: auto; font-weight: 600; color: var(--ir-brand); }

  /* ── plan chooser ──────────────────────────────────────────── */
  .s-plans__grid { --ir-col-min: 15rem; --ir-gap: var(--ir-s5); }
  .s-plans__card { padding: 0; overflow: hidden; gap: 0; }
  .s-plans__top {
    display: flex;
    flex-direction: column;
    gap: var(--ir-s4);
    padding: var(--ir-s7) var(--ir-s6) var(--ir-s6);
    border-bottom: 1px solid var(--ir-line-soft);
  }
  .s-plans__who { min-height: 4.125rem; }
  .s-plans__price { display: flex; align-items: baseline; gap: var(--ir-s2); }
  .s-plans__amount {
    font-family: var(--ir-font-display);
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--ir-ink);
    font-variant-numeric: tabular-nums;
  }
  .s-plans__term { font-size: var(--ir-fs-sm); color: var(--ir-muted); }
  .s-plans__foot { display: flex; flex-direction: column; gap: var(--ir-s3); padding: var(--ir-s6); }
  .s-plans__includes { --ir-col-min: 17rem; --ir-gap: var(--ir-s7); }
  .s-plans__include { display: flex; flex-direction: column; gap: var(--ir-s3); }
  .s-plans__include svg { color: var(--ir-brand); }

  /* ── tier CTA ──────────────────────────────────────────────── */
  .s-tier__panel {
    display: flex;
    flex-direction: column;
    gap: var(--ir-s4);
    padding: var(--ir-s8);
    border: 1px solid var(--ir-line);
    border-radius: var(--ir-r-lg);
  }
  .s-tier__price { display: flex; align-items: baseline; gap: var(--ir-s2); }
  .s-tier__amount {
    font-family: var(--ir-font-display);
    font-size: 2.625rem;
    font-weight: 800;
    line-height: 1;
    color: var(--ir-ink);
    font-variant-numeric: tabular-nums;
  }

  /* ── proof band ────────────────────────────────────────────── */
  .s-proof__grid { --ir-col-min: 18rem; }
  .s-proof__quote { display: flex; flex-direction: column; gap: var(--ir-s4); }
  .s-proof__quote blockquote { margin: 0; font-size: var(--ir-fs-md); line-height: var(--ir-lh-body); color: var(--ir-heading, var(--ir-ink)); }
  .s-proof__photo { width: 3.5rem; height: 3.5rem; border-radius: var(--ir-r-pill); object-fit: cover; }
  .s-proof__cite { display: flex; flex-direction: column; gap: 1px; margin-block-start: auto; font-style: normal; }
  .s-proof__name { font-size: var(--ir-fs-sm); font-weight: 600; color: var(--ir-heading, var(--ir-ink)); }
  .s-proof__where { font-size: var(--ir-fs-sm); color: var(--ir-on-surface, var(--ir-muted)); }

  .s-proof__stats {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    background: var(--ir-rule, var(--ir-line));
    border: 1px solid var(--ir-rule, var(--ir-line));
    border-radius: var(--ir-r);
    overflow: hidden;
  }
  .s-proof__stat {
    display: flex;
    flex-direction: column;
    gap: var(--ir-s1);
    padding: var(--ir-s5) var(--ir-s6);
    background: var(--ir-surface, var(--ir-paper));
  }
  .s-proof__figure {
    font-family: var(--ir-font-display);
    font-size: var(--ir-fs-3xl);
    font-weight: 800;
    line-height: 1;
    color: var(--ir-heading, var(--ir-ink));
    font-variant-numeric: tabular-nums;
  }

  /* ── FAQ ───────────────────────────────────────────────────── */
  .s-faq__list { display: flex; flex-direction: column; }
  .s-faq__item { padding-block: var(--ir-s5); border-bottom: 1px solid var(--ir-rule, var(--ir-line)); }
  .s-faq__item:last-child { border-bottom: 0; }
  .s-faq__q { display: flex; flex-direction: column; gap: var(--ir-s2); }
  .s-faq__a { display: flex; flex-direction: column; gap: var(--ir-s3); }

  /* Accordion variant — <details>, so it works with JavaScript off. */
  .s-faq__item[open] .s-faq__marker { transform: rotate(45deg); }
  .s-faq__summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ir-s4);
    cursor: pointer;
    list-style: none;
  }
  .s-faq__summary::-webkit-details-marker { display: none; }
  .s-faq__marker { flex-shrink: 0; color: var(--ir-brand); transition: transform 140ms ease; }

  /* ── content teaser feed ───────────────────────────────────── */
  .s-feed__grid { --ir-col-min: 17rem; }
  .s-feed__item { display: flex; flex-direction: column; gap: var(--ir-s3); }
  .s-feed__thumb { border-radius: var(--ir-r-lg); overflow: hidden; }
  .s-feed__meta { font-size: var(--ir-fs-xs); color: var(--ir-muted); }

  /* ── grouped checklist ─────────────────────────────────────── */
  .s-checklist__grid { --ir-col-min: 22rem; --ir-gap: var(--ir-s7); }
  .s-checklist__grid--1 { --ir-col-min: 100%; }
  .s-checklist__grid--2 { --ir-col-min: 22rem; }
  .s-checklist__grid--3 { --ir-col-min: 17rem; }
  .s-checklist__group { gap: var(--ir-s4); padding: var(--ir-s8); }
  .s-checklist__list { display: flex; flex-direction: column; gap: var(--ir-s3); }
  .s-checklist__item { display: flex; align-items: flex-start; gap: var(--ir-s3); line-height: 1.45; }
  .s-checklist__mark { flex-shrink: 0; margin-block-start: 0.2em; color: var(--ir-brand); }
  .s-checklist__mark svg { stroke-width: 2.2; }

  /* ── people ────────────────────────────────────────────────── */
  .s-people__grid { --ir-col-min: 20rem; }
  .s-people__card { gap: var(--ir-s4); }
  .s-people__photo { width: 4.5rem; height: 4.5rem; border-radius: var(--ir-r-pill); object-fit: cover; }
  .s-people__id { display: flex; flex-direction: column; gap: var(--ir-s1); }
  .s-people__role { font-size: var(--ir-fs-sm); font-weight: 600; color: var(--ir-brand); }
  .s-people__bio { display: flex; flex-direction: column; gap: var(--ir-s3); font-size: var(--ir-fs-sm); }

  /* ── rich text ─────────────────────────────────────────────── */
  .s-rich .ir-prose { margin-inline: auto; }

  /* ── CTA band ──────────────────────────────────────────────── */
  .s-cta__inner { display: flex; flex-direction: column; align-items: center; gap: var(--ir-s5); text-align: center; }
  .s-cta__inner h2 { max-width: 22ch; }
  .s-cta__inner p { max-width: 56ch; }
  .s-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ir-s3); }
  .s-cta--split .s-cta__inner { align-items: flex-start; text-align: start; }

  /* ── inline form ───────────────────────────────────────────── */
  .s-form__panel {
    padding: var(--ir-s8);
    background: var(--ir-paper);
    border: 1px solid var(--ir-line);
    border-radius: var(--ir-r-lg);
  }
}

/* ══ utils ════════════════════════════════════════════════════════════════════ */
@layer utils {
  .ir-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .ir-center { text-align: center; }
  .ir-tabular { font-variant-numeric: tabular-nums; }
  [hidden] { display: none; }
}