:root {
      --bg: oklch(24% 0.066 245);
      --surface: oklch(99% 0.005 235);
      --fg: oklch(96% 0.012 235);
      --ink: oklch(28% 0.072 246);
      --muted: oklch(75% 0.032 237);
      --border: oklch(100% 0 0 / 16%);
      --accent: oklch(79% 0.105 224);
      --accent-soft: oklch(91% 0.044 226);
      --signal: oklch(73% 0.12 57);
      --success: oklch(71% 0.14 154);
      --danger: oklch(64% 0.18 28);
      --font-display: "Avenir Next", "Segoe UI", system-ui, sans-serif;
      --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
      --page: min(1440px, calc(100% - 64px));
      --radius: 10px;
      --ease-standard: cubic-bezier(.2, 0, 0, 1);
      --motion-ui: 160ms;
      --motion-enter: 460ms;
    }

    * { box-sizing: border-box; }
    html { color-scheme: dark; scrollbar-gutter: stable; }
    body {
      margin: 0;
      min-width: 320px;
      overflow-x: hidden;
      background: var(--bg);
      color: var(--fg);
      font: 400 16px/1.5 var(--font-body);
      -webkit-font-smoothing: antialiased;
    }
    button, input, select { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    a { color: inherit; text-decoration: none; }
    :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

    .page-shell {
      position: relative;
      min-height: 100svh;
      isolation: isolate;
      overflow: hidden;
      background: #001533;
    }
    .page-shell.is-leaving {
      animation: leave-home 240ms var(--ease-standard) both;
    }
    .page-shell::before {
      content: "РАВВ";
      position: absolute;
      right: clamp(120px, 9vw, 188px);
      top: calc(50svh - 330px);
      z-index: -1;
      transform: translateY(-50%) rotate(-90deg);
      transform-origin: right center;
      color: transparent;
      -webkit-text-stroke: 1px oklch(100% 0 0 / 7%);
      font: 600 clamp(112px, 16.8vw, 273px)/.8 var(--font-display);
      letter-spacing: -0.06em;
      pointer-events: none;
    }
    .page-shell::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      z-index: -2;
      width: 100%;
      height: 100%;
      min-height: max(100svh, 940px);
      pointer-events: none;
      background: var(--bg) url("/assets/academy-raww-tech-background.png") center top / cover no-repeat;
    }

    @keyframes enter-stage {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes leave-home {
      to { opacity: 0; transform: translateY(-8px); }
    }

    /* The empty [data-site-header] slot reserves the header height before
       site-chrome.js replaces it, so the injection causes no layout shift.
       The header itself is a static site frame and never animates; only
       page content below it does (owner decision, 2026-09-25). */
    [data-site-header] {
      display: block;
      height: 82px;
    }
    .site-header {
      position: relative;
      z-index: 10;
      width: var(--page);
      height: 82px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 260px minmax(0, 1fr) auto;
      align-items: center;
      border-bottom: 1px solid var(--border);
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-height: 44px;
      width: fit-content;
      font: 600 15px/1.05 var(--font-display);
      letter-spacing: -0.01em;
    }
    .brand-mark {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border: 1px solid var(--fg);
      border-radius: 2px;
      color: var(--fg);
      font-size: 11px;
      letter-spacing: 0.1em;
    }
    .brand-mark img {
      width: 28px;
      height: 28px;
      display: block;
      object-fit: contain;
      filter: brightness(0) invert(1);
    }
    .brand-text { display: grid; gap: 3px; }
    .brand-text small {
      color: var(--muted);
      font-size: 9px;
      font-weight: 550;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }
    .site-nav { display: flex; align-items: center; justify-content: center; gap: clamp(22px, 3vw, 46px); }
    .site-nav a {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      color: var(--muted);
      font-size: 16px;
      font-weight: 550;
      letter-spacing: 0.02em;
      transition: color var(--motion-ui) var(--ease-standard);
    }
    .site-nav a:hover { color: var(--fg); }
    .header-side { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 14px; white-space: nowrap; }
    .phone {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.03em;
      white-space: nowrap;
    }
    .menu-button {
      width: 44px;
      height: 44px;
      display: none;
      place-items: center;
      border: 1px solid var(--border);
      border-radius: 2px;
      background: transparent;
      color: var(--fg);
      cursor: pointer;
    }

    .hero {
      width: var(--page);
      min-height: calc(100svh - 82px);
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1.18fr) minmax(430px, .82fr);
      grid-template-rows: 1fr auto;
      column-gap: clamp(34px, 5vw, 86px);
    }
    .hero-copy {
      min-width: 0;
      padding: clamp(54px, 7vh, 90px) 0 42px;
      align-self: center;
      animation: enter-stage var(--motion-enter) var(--ease-standard) 60ms both;
    }
    .eyebrow {
      margin: 0 0 22px;
      display: flex;
      align-items: center;
      gap: 11px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }
    .eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--signal); }
    h1 {
      max-width: 850px;
      margin: 0;
      font: 600 clamp(58px, 6.8vw, 108px)/.89 var(--font-display);
      letter-spacing: -0.045em;
      text-wrap: balance;
    }
    h1 .accent-word { color: var(--accent); }
    .hero-support {
      max-width: 720px;
      margin-top: clamp(28px, 4vh, 44px);
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      justify-items: start;
      gap: 22px;
    }
    .hero-lead {
      max-width: 54ch;
      margin: 0;
      color: var(--muted);
      font-size: clamp(15px, 1.2vw, 18px);
      line-height: 1.55;
      text-wrap: pretty;
    }
    .primary-action {
      min-width: 190px;
      min-height: 54px;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 0 18px;
      border: 1px solid var(--fg);
      border-radius: 2px;
      background: var(--fg);
      color: var(--ink);
      font-weight: 600;
      letter-spacing: 0.02em;
      cursor: pointer;
      transition: transform var(--motion-ui) var(--ease-standard), background-color var(--motion-ui) var(--ease-standard);
    }
    .primary-action:active { transform: translateY(1px) scale(.99); }
    .primary-action svg {
      flex: 0 0 auto;
      transition: transform var(--motion-ui) var(--ease-standard);
    }

    @media (hover: hover) {
      .primary-action:hover { transform: translateY(-2px); background: var(--fg); }
      .primary-action:hover svg { transform: translateX(4px); }
      .primary-action:hover:active { transform: translateY(1px) scale(.99); }
      .primary-action:active svg { transform: translateX(1px); }
    }

    .course-navigator {
      position: relative;
      z-index: 3;
      min-width: 0;
      align-self: center;
      padding: clamp(40px, 6vh, 74px) 0 36px;
      animation: enter-stage var(--motion-enter) var(--ease-standard) 120ms both;
    }
    .navigator-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 13px;
    }
    .navigator-head p {
      margin: 0;
      color: var(--muted);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }
    .navigator-index { color: var(--fg); font: 500 12px/1 ui-monospace, monospace; letter-spacing: .08em; }
    .course-board {
      position: relative;
      z-index: 3;
      overflow: hidden;
      border: 1px solid oklch(100% 0 0 / 24%);
      border-radius: var(--radius);
      background: var(--surface);
      color: var(--ink);
      box-shadow: 22px 28px 0 oklch(15% 0.05 245 / 42%);
    }
    .course-tabs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-bottom: 1px solid oklch(74% 0.03 235 / 42%);
      background: oklch(96% 0.012 232);
    }
    .course-tab {
      min-height: 54px;
      border: 0;
      border-right: 1px solid oklch(74% 0.03 235 / 42%);
      background: transparent;
      color: var(--ink);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .07em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background-color var(--motion-ui) var(--ease-standard), color var(--motion-ui) var(--ease-standard);
    }
    .course-tab:last-child { border-right: 0; }
    .course-tab:hover:not([aria-selected="true"]) { background: oklch(92% 0.02 230); }
    .course-tab[aria-selected="true"] { background: var(--ink); color: var(--fg); }
    .course-board[aria-busy="true"]::after {
      content: "";
      position: absolute;
      inset: 53px auto auto 0;
      z-index: 4;
      width: 38%;
      height: 2px;
      background: var(--signal);
      animation: course-progress .7s cubic-bezier(.2, 0, 0, 1) infinite alternate;
    }
    @keyframes course-progress { to { transform: translateX(165%); } }
    .featured-course { height: 560px; min-height: 560px; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
    .featured-course > * { transition: opacity var(--motion-ui) var(--ease-standard), transform var(--motion-ui) var(--ease-standard); }
    .featured-course.is-switching > * { opacity: 0; transform: translateY(7px); }
    /* HOME UI FIX 03. The badge row that used to open this block is gone, so
       the block is no longer padded as if something sat above the title: the
       top inset drops from clamp(24px, 3vw, 34px) to 20px and the bottom one
       to 14px, and the title's own top margin is carried by .course-date
       below instead of being added to it. The HORIZONTAL inset is unchanged,
       which is what keeps the date, the title and the content block on one
       left line.
       Nothing is flush: 20px above the date and 6px between the date and the
       title keep the two apart without the empty band the badge left behind.
       Measured: the title now starts 49px below the top of the block instead
       of 72px. The bottom inset is 14px rather than a symmetrical 20px: that
       was room taken back for the description in FIX 03, and it is kept as-is
       in FIX 03A so the accepted composition does not move. */
    .course-color-block { padding: 20px clamp(24px, 3vw, 34px) 14px; background: var(--accent); }
    .course-color-block.palette-webinar { background: #d9eef9; }
    .course-color-block.palette-dpo { background: #b9d9ee; }
    .course-color-block.palette-express { background: #7fb1d1; }
    .course-color-block.palette-practice { background: #c7b7e8; }
    .course-color-block.palette-seminar { background: #d2deea; }
    .course-color-block.palette-intensive { background: #aebccd; }
    .course-color-block.palette-neutral { background: #dce4ea; }
    /* HOME UI FIX 03. The date used to be a 12px caption in the right-hand
       corner of the badge row. It is now the FIRST LINE of the card's main
       text flow, a block element inside the same padding box as the title, so
       its left edge is the title's left edge by construction rather than by a
       matching offset.
       Owner decision: the SAME font-size as the course title, which means the
       same clamp() expression rather than a copied number - the two cannot
       drift apart at any viewport width - and the same 1.2 line-height, so the
       vertical rhythm of the two lines agrees. The hierarchy is carried by
       weight and colour only (500 against the title's 600, and a softened
       ink), which is what keeps the title dominant at an equal size. */
    .course-date {
      margin: 0 0 6px;
      font: 500 clamp(18px, 1.25vw, 19px)/1.2 var(--font-display);
      letter-spacing: -0.02em;
      color: color-mix(in oklch, var(--ink) 68%, white);
    }
    /* HOME UI FIX 01. The showcase card carries one course at a time and has
       to leave room below the title for the expert block and a short extra
       line about the course. At 30px/1.06 the title alone took 86px for a
       two-line name and 149px for a long one, which is most of the coloured
       block. Measured on short / medium / long titles at 1500px and 390px, the
       values below bring the title-area footprint to roughly half for every
       title that wraps: 53% desktop and 50% mobile for a long name, 52% mobile
       for a medium one. A one-line title lands higher (~64%) simply because
       its footprint is the margin plus a single line, and shrinking that
       further would cost legibility for no real gain.

       Nothing is clamped or truncated: the title still wraps freely and is
       rendered in full. The family stays var(--font-display) - the Academy
       design system - and only the vertical metrics move.

       The floor is 18px rather than 17px so the scale stays monotonic: the
       <=620px rule below is also 18px, and with a 17px floor the title would
       have grown by a pixel as the screen got NARROWER, between 621px and the
       width where 1.25vw overtakes the floor. */
    .featured-course h2 {
      max-width: none;
      width: 100%;
      /* HOME UI FIX 03: the 12px that used to separate the title from the
         badge row now lives on .course-date as its bottom margin, so the
         gap is declared once. The FIX 01 type scale is unchanged. */
      margin: 0;
      font: 600 clamp(18px, 1.25vw, 19px)/1.2 var(--font-display);
      letter-spacing: -0.025em;
      text-wrap: balance;
    }
    /* HOME UI FIX 03. This block used to be a scroll box: it carried
       `overflow-y: auto` and a styled thin scrollbar, because the parameter
       list made the content taller than the fixed-height card. With the
       parameters gone the content fits, so the scrollbar is gone with them -
       the card is a showcase, and a showcase does not scroll inside itself.
       `overflow: hidden` replaces it as a guard rather than as a mechanism:
       it is what stops an extreme record from spilling out of the card, and
       the description's line clamp below is what stops it from getting there.
       The fixed .featured-course height is deliberately unchanged, so the card
       is the same size whichever of the three showcase tabs is open. */
    .course-content {
      min-height: 0;
      overflow: hidden;
      padding: 18px clamp(24px, 3vw, 34px);
      display: flex;
      flex-direction: column;
    }
    /* HOME UI FIX 03: a STABLE TWO-COLUMN grid on this surface, replacing the
       shared flex row. `.expert-cast` in expert-cast.css is `flex-wrap` with
       `flex: 1 1 210px` on each card, and flex-GROW is what made a single
       expert stretch across the whole width as one long empty tile, and a
       trailing odd card stretch across the last row. A grid has neither
       behaviour: every card is exactly one half-width column, the odd last
       card stays in the LEFT column, and nothing spans both. `flex` is inert
       on a grid item, so the shared declarations simply stop applying - they
       are not overridden anywhere, and no other surface is touched.
       align-items: start keeps a short card from stretching to the height of
       a taller neighbour in the same row.
       Scoped to a direct child of .course-content, which only this card uses:
       the catalogue, the archive and the course page place the cast
       themselves. It also carries the separation from the description that
       the fact list used to provide when the cast sat underneath it. */
    .course-content > .expert-cast {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
      gap: 8px;
      /* flex-shrink 0: with a crowded card the EXPERTS are never the thing
         that gives way. Nothing grows either, so a sparse card leaves its
         spare room at the bottom, above the CTA, instead of stretching. */
      flex: 0 0 auto;
      margin-bottom: 12px;
    }
    /* HOME UI FIX 03A. «Краткое описание для карточки» is AUTHORED CONTENT,
       not an excerpt. The editor types it into the admin textarea specifically
       for this card - its wording, its length and its line breaks are all
       deliberate - so the showcase renders it as written instead of treating
       it as overflow to be managed.

       FIX 03 clamped it to two lines with an ellipsis. On the owner's own
       four-line text that threw away three quarters of the message:

           Курс для специалистов очистных сооружений: ... решения.
           12 июля 2025
           Участие бесплатное.
           Необходима регистрация.

       So the clamp is gone, and with it the -webkit-box display it needed.

       white-space: pre-line is what keeps the editor's structure: the newlines
       typed in the textarea become line breaks, while runs of spaces still
       collapse and long lines still wrap normally. It does this WITHOUT any
       markup - home.js still emits one escaped text node, so a textarea that
       happens to contain <b> renders as the literal characters, exactly as
       before. No <br>, no HTML, no sanitizer involved.

       overflow-wrap: anywhere is the same protection .expert-chip-name already
       carries: an unbroken 120-character token wraps instead of running out of
       the card sideways.

       flex: 0 0 auto, not 0 1 auto. With no clamp there is nothing left to
       shrink TO, and shrinking would cut a line in half - the description now
       takes exactly the height its text needs. The card's own
       .course-content { overflow: hidden } stays as the outer guard, so this
       still cannot produce an internal scrollbar; it is a boundary, not a
       mechanism, and at realistic lengths it is never reached (measured: the
       owner's four-line text on the live Вебинар and ДПО cards). Deciding a
       sensible length is the editor's job at this stage, by owner decision. */
    .course-description {
      margin: 0;
      flex: 0 0 auto;
      color: color-mix(in oklch, var(--ink) 70%, white);
      font-size: 15px;
      line-height: 1.52;
      white-space: pre-line;
      overflow-wrap: anywhere;
    }
    .course-footer { padding: 0 clamp(24px, 3vw, 34px) 24px; display: grid; grid-template-columns: minmax(190px, 250px) 1fr; gap: 12px; }
    .course-footer.course-footer-single { grid-template-columns: minmax(190px, 250px); }
    .course-footer .primary-action { min-height: 48px; min-width: 0; border-color: var(--ink); border-radius: 6px; background: var(--ink); color: var(--fg); }
    .course-footer .text-link { justify-self: end; }
    .text-link { min-height: 48px; display: inline-flex; align-items: center; padding: 0 4px; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
    .catalog-flight-button {
      position: fixed;
      z-index: 2;
      margin: 0;
      pointer-events: none;
      transform-origin: left center;
      will-change: transform, opacity, box-shadow;
    }
    .course-state {
      min-height: 560px;
      padding: 34px;
      display: grid;
      align-content: center;
      justify-items: start;
      gap: 12px;
      background: var(--surface);
    }
    .course-state[hidden] { display: none; }
    .course-state strong { font: 600 28px/1.08 var(--font-display); letter-spacing: -.02em; }
    .course-state p { max-width: 42ch; margin: 0; color: color-mix(in oklch, var(--ink) 65%, white); font-size: 13px; }
    .course-state button { margin-top: 8px; min-width: 170px; }
    .board-caption {
      margin: 10px 0 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 20px;
      padding-right: 4px;
      color: var(--muted);
      font-size: 11px;
      text-align: right;
    }

    .program-rail {
      grid-column: 1 / -1;
      min-height: 132px;
      display: grid;
      grid-template-columns: 220px repeat(3, 1fr);
      border-top: 1px solid var(--border);
      animation: enter-stage var(--motion-enter) var(--ease-standard) 180ms both;
    }
    .rail-intro { padding: 23px 24px 22px 0; display: flex; flex-direction: column; justify-content: space-between; }
    .rail-intro span { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
    .rail-intro span::before { content: ""; width: 18px; height: 2px; background: var(--accent); }
    .rail-intro strong { font: 600 21px/1.08 var(--font-display); letter-spacing: -.02em; }
    .rail-card {
      position: relative;
      min-width: 0;
      padding: 22px 24px;
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      align-content: center;
      gap: 16px;
      border-left: 1px solid var(--border);
    }
    .rail-copy { display: grid; align-content: center; gap: 9px; }
    .rail-icon { width: 48px; height: 56px; color: var(--accent); stroke: currentColor; stroke-width: 1.25; opacity: .9; }
    .rail-kicker { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
    .rail-title { align-self: end; max-width: 34ch; font-size: 12.5px; font-weight: 550; line-height: 1.38; text-wrap: pretty; }

    .site-footer {
      margin-top: 0;
      border-top: 1px solid var(--border);
      background: linear-gradient(90deg, #01132c 0%, #001533 100%);
      color: var(--fg);
    }
    .footer-inner {
      width: var(--page);
      min-height: 260px;
      margin: 0 auto;
      padding: 40px 0 34px;
      display: grid;
      grid-template-columns: minmax(300px, 1.6fr) repeat(3, minmax(150px, 1fr));
      column-gap: clamp(32px, 5vw, 74px);
      row-gap: 38px;
    }
    .footer-identity { display: flex; flex-direction: column; align-items: flex-start; }
    .footer-brand { display: flex; align-items: flex-start; gap: 16px; }
    .footer-logo { width: 108px; height: 76px; object-fit: contain; object-position: left top; filter: brightness(0) invert(1); opacity: .92; }
    .footer-brand p { margin: 2px 0 0; color: var(--fg); font-size: 14px; line-height: 1.22; }
    .footer-contact-actions { display: flex; gap: 10px; margin-top: 26px; }
    .footer-contact-actions a {
      width: 32px;
      height: 32px;
      display: inline-grid;
      place-items: center;
      border-radius: 50%;
      background: var(--fg);
      color: var(--bg);
      font-size: 10px;
      font-weight: 800;
      text-decoration: none;
      transition: transform var(--motion-ui) var(--ease-standard), background-color var(--motion-ui) var(--ease-standard);
    }
    .footer-contact-actions a:hover { transform: translateY(-2px); background: var(--accent-soft); }
    .footer-copyright { margin: auto 0 0; padding-top: 28px; color: var(--fg); font-size: 13px; font-weight: 600; }
    /* FOOTER PRIVACY LINK: the service zone of the first column - copyright,
       then the policy link right under it. The group (not the copyright
       alone) is what sits at the bottom of the column now. The link is a
       quiet secondary item: copyright size, muted colour, thin underline. */
    .footer-legal { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
    .footer-policy { max-width: 100%; color: var(--muted); font-size: 13px; line-height: 1.35; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(255, 255, 255, .28); text-underline-offset: 3px; transition: color var(--motion-ui) var(--ease-standard); }
    .footer-policy:hover { color: #b9d9ee; }
    .footer-column { display: grid; min-width: 0; align-content: start; gap: 17px; }
    .footer-column h2 { margin: 0 0 7px; color: var(--fg); font: 600 19px/1.1 var(--font-display); letter-spacing: .05em; text-transform: uppercase; }
    .footer-column a { width: fit-content; color: var(--fg); font-size: 16px; text-decoration: none; transition: color var(--motion-ui) var(--ease-standard); }
    .footer-column a:hover { color: #b9d9ee; }
    .footer-contacts { justify-self: stretch; }

    @media (max-width: 1120px) {
      .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px 28px; }
      .footer-contacts { justify-self: start; }
    }

    dialog {
      width: min(560px, calc(100% - 32px));
      padding: 0;
      border: 1px solid oklch(70% 0.03 235 / 38%);
      border-radius: var(--radius);
      background: var(--surface);
      color: var(--ink);
      box-shadow: 0 40px 120px oklch(10% 0.04 245 / 55%);
    }
    dialog::backdrop { background: oklch(12% 0.04 245 / 74%); backdrop-filter: blur(6px); }
    .dialog-head { padding: 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-bottom: 1px solid oklch(70% 0.03 235 / 36%); }
    .dialog-head h2 { margin: 0; font: 600 30px/1.06 var(--font-display); letter-spacing: -.025em; }
    .dialog-head p { margin: 8px 0 0; color: color-mix(in oklch, var(--ink) 62%, white); font-size: 13px; }
    .close-button { width: 44px; height: 44px; border: 1px solid oklch(70% 0.03 235 / 38%); border-radius: 2px; background: transparent; color: var(--ink); cursor: pointer; }
    .course-form { padding: 24px; display: grid; gap: 17px; }
    .field { display: grid; gap: 7px; }
    .field label { font-size: 12px; font-weight: 600; letter-spacing: .02em; }
    .field input, .field select { width: 100%; min-height: 48px; padding: 0 13px; border: 1px solid oklch(70% 0.03 235 / 44%); border-radius: 2px; background: var(--surface); color: var(--ink); }
    .course-form .primary-action { border-color: var(--ink); background: var(--ink); color: var(--fg); }
    .primary-action:disabled { opacity: .55; cursor: not-allowed; transform: none; }
    .field input[aria-invalid="true"] { border-color: var(--danger); }
    .form-status { min-height: 21px; margin: 0; color: color-mix(in oklch, var(--ink) 62%, white); font-size: 12px; }
    .form-status.success { color: oklch(47% 0.13 154); }
    .form-status.error { color: var(--danger); }

    @media (max-width: 1120px) {
      :root { --page: min(100% - 40px, 860px); }
      .site-header { grid-template-columns: 1fr auto; }
      .site-nav, .phone { display: none; }
      .menu-button { display: grid; }
      .site-nav.open {
        position: absolute;
        top: 72px;
        left: 20px;
        right: 20px;
        z-index: 30;
        display: grid;
        padding: 10px 18px;
        border: 1px solid var(--border);
        background: #011b35;
        box-shadow: 0 22px 60px oklch(10% 0.04 245 / 55%);
      }
      .site-nav.open a { min-height: 48px; border-bottom: 1px solid var(--border); color: var(--fg); font-size: 16px; }
      .site-nav.open a:last-child { border-bottom: 0; }
      .hero { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
      .hero-copy { padding-bottom: 12px; }
      h1 { max-width: 760px; font-size: clamp(64px, 10vw, 94px); }
      .course-navigator { width: min(600px, 100%); padding-top: 30px; }
      .program-rail { grid-template-columns: 1fr 1fr; margin-top: 36px; }
      .rail-intro { padding-left: 0; }
      .rail-card:nth-child(2) { border-left: 1px solid var(--border); }
      .rail-card:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); }
      .rail-card:nth-child(4) { border-top: 1px solid var(--border); }
    }

    @media (max-width: 620px) {
      :root { --page: calc(100% - 28px); }
      .site-header { height: 70px; }
      [data-site-header] { height: 70px; }
      .brand-text small { display: none; }
      .page-shell::before { display: none; }
      .page-shell::after { display: none; }
      .hero { min-height: auto; }
      .hero-copy { padding: 46px 0 18px; }
      .eyebrow { margin-bottom: 17px; }
      h1 { font-size: clamp(52px, 15.7vw, 74px); line-height: .93; }
      .hero-support { margin-top: 26px; grid-template-columns: 1fr; gap: 22px; }
      .primary-action { width: 100%; }
      .course-navigator { padding: 24px 0 26px; }
      .course-board { box-shadow: 10px 12px 0 oklch(15% 0.05 245 / 42%); }
      .featured-course { height: auto; min-height: 0; overflow: visible; }
      .course-state { min-height: 0; }
      .course-color-block { padding: 22px; }
      /* HOME UI FIX 01: same reduction on a phone, where a long title used to
         run to six lines and 187px. 18px keeps it comfortably readable - the
         card description is 15px - and inherits the 1.2 line-height above. */
      .featured-course h2 { font-size: 18px; }
      /* HOME UI FIX 03: the date follows the title down to 18px, because the
         two being the same size is the rule, not the desktop value. */
      .course-date { font-size: 18px; }
      .course-content { padding: 22px; }
      /* HOME UI FIX 03: ONE column on a phone. The desktop two-column grid is
         not carried over - two half-width cards on a 390px screen would be
         neither a readable card nor a comfortable tap target - so each card
         takes the full content width, which is the whole touch target. Same
         data, same markup, same interaction component; only the track count
         differs. */
      .course-content > .expert-cast { grid-template-columns: minmax(0, 1fr); }
      .course-footer { padding: 0 22px 22px; grid-template-columns: 1fr; }
      .text-link { justify-content: center; }
      .program-rail { grid-template-columns: 1fr; margin-top: 30px; }
      .rail-intro { min-height: 112px; }
      .rail-card, .rail-card:nth-child(2), .rail-card:nth-child(3), .rail-card:nth-child(4) { min-height: 112px; border-left: 0; border-top: 1px solid var(--border); }
      .site-footer { margin-top: 0; }
      .footer-inner { padding: 32px 0 30px; grid-template-columns: 1fr; gap: 32px; }
      .footer-logo { width: 94px; height: 66px; }
      .footer-column { gap: 13px; }
      .footer-column h2 { font-size: 18px; }
      .footer-column a { font-size: 15px; }
      /* FOOTER PRIVACY LINK, phone: the single-column footer used to show the
         copyright right after the logo, ABOVE the navigation. The service zone
         (copyright + policy link) now closes the footer instead, after the
         navigation and contacts. The identity box is flattened so its parts
         become items of the one-column grid; the contact buttons keep their
         26px distance from the logo (32px grid gap - 6px). */
      .footer-identity { display: contents; }
      .footer-contact-actions { margin-top: -6px; }
      .footer-legal { order: 1; margin-top: 0; }
      .footer-legal .footer-copyright { padding-top: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
      .page-shell.is-leaving { animation: none; }
      *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
      .featured-course.is-switching > * { opacity: 1; transform: none; }
      .site-header, .hero-copy, .course-navigator, .program-rail { animation-delay: 0ms !important; transform: none; }
    }