/* KarateShowCase tenant — pages-public
 *
 * Generated by tools/consolidate-tenant-css.mjs from 15 source files,
 * concatenated in their original cascade order. Edit the sources, re-run the
 * tool; do not hand-edit this file.
 */

/* ══════════════════════════════════════════════════════════════════════
   dojo-global-hero-lockup.v1.css
   ══════════════════════════════════════════════════════════════════════ */
    /* ── HERO LOCKUP ─────────────────────────────────────────────────────────── */
    .hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: clamp(.85rem, 2vw, 1.25rem) 1.5rem .35rem;
      position: relative
    }

    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.035) 24%, transparent 62%),
        radial-gradient(ellipse at 50% 30%, color-mix(in oklab, var(--accent) 4%, transparent) 0%, transparent 60%);
      pointer-events: none
    }

    .hero-lockup {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: .35rem;
      width: 100%;
      max-width: 680px;
    }


/* ══════════════════════════════════════════════════════════════════════
   dojo-home-spotlight-banner.v1.css
   ══════════════════════════════════════════════════════════════════════ */
    /* ── Spotlight Banner (Apple-style) ─────────────────────────────────────── */
    .ks-spotlight-banner {
      display: none;
      width: 100%;
      max-width: 900px;
      margin: 2.5rem auto 0;
      text-align: center;
      padding: 14px 1.5rem 12px;
      background: linear-gradient(135deg, #0A1324 0%, #111D2E 50%, #0A1324 100%);
      border: 1px solid color-mix(in oklab, var(--accent) 18%, transparent);
      border-bottom: none;
      border-radius: 14px 14px 0 0;
      position: relative;
      overflow: hidden;
      z-index: 10;
    }

    .ks-spotlight-banner.visible {
      /* One line, composed: the mark sits BESIDE the words at their size
         instead of floating small above them, and together they own the
         band's width. Wrapping children, so a kicker, a subtitle or a tag
         joins the line when the admin wrote one and the line closes up when
         they did not. */
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      column-gap: .9rem;
      row-gap: .35rem;
    }

    /* Subtle ambient glow */
    .ks-spotlight-banner::before {
      content: '';
      position: absolute;
      top: -50%;
      left: 25%;
      width: 50%;
      height: 200%;
      background: radial-gradient(ellipse, color-mix(in oklab, var(--accent) 6%, transparent) 0%, transparent 70%);
      pointer-events: none;
    }

    /* Animated shimmer sweep */
    .ks-spotlight-banner::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 50%;
      height: 100%;
      background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 6%, transparent), transparent);
      animation: spotlightSweep 4s ease-in-out infinite;
      pointer-events: none;
    }

    @keyframes spotlightSweep {
      0% {
        left: -50%;
      }

      100% {
        left: 150%;
      }
    }

    .ks-spotlight-kicker {
      font-family: var(--ks-display);
      font-size: .58rem;
      font-weight: 800;
      letter-spacing: 3.5px;
      text-transform: uppercase;
      background: linear-gradient(90deg, #B8943E 0%, var(--ks-accent) 40%, #F5E6A8 50%, var(--ks-accent) 60%, #B8943E 100%);
      background-size: 200% 100%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: kickerShimmer 3s ease-in-out infinite;
      margin-bottom: 3px;
      display: block;
    }

    @keyframes kickerShimmer {

      0%,
      100% {
        background-position: 0% center;
      }

      50% {
        background-position: 100% center;
      }
    }

    .ks-spotlight-text {
      font-family: 'Inter', sans-serif;
      /* Display type, not a caption: this line is the whole reason the band
         exists, and at .88rem it sat as a whisper on a full-measure dark
         strip (measured 14px on homann 2026-08-15). Sized to OWN the band —
         the compact preset below stays deliberately quieter, feature goes
         larger still. */
      font-size: clamp(1.35rem, 1.1rem + 1.6vw, 2rem);
      font-weight: 700;
      color: #F0F6FC;
      line-height: 1.25;
      letter-spacing: .2px;
      text-shadow: 0 1px 8px color-mix(in oklab, var(--accent) 8%, transparent);
    }

    /* In the flex composition the divider is a stray line between siblings —
       the shared baseline is the relationship now. */
    .ks-spotlight-banner.visible .ks-spotlight-divider {
      display: none;
    }

    .ks-spotlight-sub {
      font-size: .64rem;
      font-weight: 500;
      color: rgba(148, 163, 184, 0.85);
      margin-top: 3px;
      letter-spacing: .2px;
    }

    /* The banner is a cap on the card below it, not a card of its own: no
       bottom border, no bottom radius, and the card beneath loses its top ones
       so the two read as a single object.

       That card used to be .team-usa-showcase. The home rewrite replaced it
       with .ks-highlight / .ks-highlight-inner and this rule was left pointing
       at an element the page no longer contains, so a configured banner floated
       above a fully rounded card of a different width.

       The box below reproduces .ks-highlight-inner's at every width -- the same
       measure, the same gutter -- because two stacked objects of different
       widths do not read as one however they are joined. */
    .ks-spotlight-banner {
      width: calc(100% - 2 * var(--ks-gutter));
      max-width: var(--ks-measure);
    }

    .ks-spotlight-banner.visible+.ks-highlight .ks-highlight-inner {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      border-top: none;
    }

    @media (max-width: 767px) {
      .ks-spotlight-banner {
        padding: 10px 1rem 8px;
        border-radius: 10px 10px 0 0;
      }

      .ks-spotlight-kicker {
        font-size: .5rem;
        letter-spacing: 2.5px;
      }

      .ks-spotlight-text {
        font-size: 1.15rem;
      }

      .ks-spotlight-sub {
        font-size: .58rem;
      }
    }

    /* ══ FEATURE BANNER PREMIUM UPGRADE ═══════════════════════════════════ */

    .ks-spotlight-top-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .4rem;
    }

    .ks-spotlight-icon {
      line-height: 1;
      flex-shrink: 0;
      display: inline-flex;
      color: var(--accent, #C9A84C);
    }

    /* The mark at the text's own scale — it shares the line with display
       type now, not a caption. The emoji this replaced needed a filter to
       sit in the design at all; a stroke glyph inherits its colour. */
    .ks-spotlight-icon .ks-icon {
      width: clamp(20px, 1.6vw, 26px);
      height: clamp(20px, 1.6vw, 26px);
    }

    .ks-spotlight-divider {
      width: 40px;
      height: 1px;
      margin: 5px auto 6px;
      background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 45%, transparent), transparent);
      border-radius: 1px;
    }

    .ks-spotlight-bottom-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      flex-wrap: wrap;
    }

    .ks-spotlight-tag {
      font-size: .5rem;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: var(--ks-accent-strong);
      padding: 2px 8px;
      border: 1px solid color-mix(in oklab, var(--accent) 25%, transparent);
      border-radius: 3px;
      background: color-mix(in oklab, var(--accent) 6%, transparent);
      white-space: nowrap;
      flex-shrink: 0;
    }

    /* Disable default ::after shimmer when any preset is active (admin-controlled) */
    .ks-spotlight-banner[class*="feature-banner--"]::after {
      animation: none;
      display: none;
    }

    /* ── Classic Premium ─────────────────────────────────────────────────── */
    .ks-spotlight-banner.feature-banner--classic {
      background: linear-gradient(135deg, #0A1324 0%, #111D2E 50%, #0A1324 100%);
      border-color: color-mix(in oklab, var(--accent) 22%, transparent);
    }

    .feature-banner--classic .ks-spotlight-kicker {
      background: linear-gradient(90deg, #B8943E 0%, var(--ks-accent) 35%, #F5E6A8 50%, var(--ks-accent) 65%, #B8943E 100%);
      background-size: 200% 100%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      letter-spacing: 4.5px;
    }

    .feature-banner--classic .ks-spotlight-text {
      color: #FFFFFF;
      text-shadow: 0 1px 12px color-mix(in oklab, var(--accent) 10%, transparent);
    }

    .feature-banner--classic .ks-spotlight-divider {
      background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 45%, transparent), transparent);
      box-shadow: 0 0 6px color-mix(in oklab, var(--accent) 12%, transparent);
    }

    /* ── Gold Foil Glow ──────────────────────────────────────────────────── */
    .ks-spotlight-banner.feature-banner--gold {
      background: linear-gradient(135deg, #0F1520 0%, #1A1508 50%, #0F1520 100%);
      border-color: rgba(240, 220, 154, 0.3);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2), inset 0 0 30px color-mix(in oklab, var(--accent) 4%, transparent);
    }

    .feature-banner--gold .ks-spotlight-kicker {
      background: linear-gradient(90deg, #D4A63A, #F5E6A8, #FFD700, #F5E6A8, #D4A63A);
      background-size: 200% 100%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      letter-spacing: 5px;
      filter: drop-shadow(0 0 4px color-mix(in oklab, var(--accent) 25%, transparent));
    }

    .feature-banner--gold .ks-spotlight-text {
      background: linear-gradient(180deg, #FFFFFF 0%, var(--ks-accent) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0 1px 8px color-mix(in oklab, var(--accent) 15%, transparent));
    }

    .feature-banner--gold .ks-spotlight-divider {
      background: linear-gradient(90deg, transparent, rgba(240, 220, 154, 0.6), transparent);
      box-shadow: 0 0 10px color-mix(in oklab, var(--accent) 20%, transparent);
      height: 1.5px;
    }

    /* ── Championship Badge ──────────────────────────────────────────────── */
    .ks-spotlight-banner.feature-banner--championship {
      background: linear-gradient(135deg, #0C1628 0%, #0F1A2F 50%, #0C1628 100%);
      border: 1.5px solid color-mix(in oklab, var(--accent) 35%, transparent);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 0 1px color-mix(in oklab, var(--accent) 8%, transparent);
    }

    .feature-banner--championship .ks-spotlight-kicker {
      background: linear-gradient(90deg, var(--ks-accent), var(--ks-accent), var(--ks-accent));
      background-size: 200% 100%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      letter-spacing: 5px;
      font-weight: 900;
    }

    .feature-banner--championship .ks-spotlight-text {
      color: #FFFFFF;
      font-weight: 900;
      text-shadow: 0 2px 15px color-mix(in oklab, var(--accent) 12%, transparent);
    }

    .feature-banner--championship .ks-spotlight-divider {
      width: 60px;
      height: 2px;
      background: linear-gradient(135deg, var(--ks-accent) 0%, var(--ks-accent) 50%, var(--ks-accent) 100%);
      box-shadow: 0 0 8px color-mix(in oklab, var(--accent) 25%, transparent);
    }

    /* ── Spotlight Sweep ─────────────────────────────────────────────────── */
    .ks-spotlight-banner.feature-banner--spotlight {
      background: linear-gradient(135deg, #080E1A 0%, #0D1526 50%, #080E1A 100%);
      border-color: color-mix(in oklab, var(--accent) 15%, transparent);
    }

    .feature-banner--spotlight .ks-spotlight-kicker {
      background: linear-gradient(90deg, #9E8A4F, var(--ks-accent), #9E8A4F);
      background-size: 200% 100%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      letter-spacing: 4px;
    }

    .feature-banner--spotlight .ks-spotlight-text {
      color: #E8EDF5;
      text-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
    }

    /* ── Minimal Elite ───────────────────────────────────────────────────── */
    .ks-spotlight-banner.feature-banner--minimal {
      background: #0A1324;
      border-color: rgba(255, 255, 255, 0.06);
      box-shadow: none;
    }

    .feature-banner--minimal .ks-spotlight-kicker {
      color: color-mix(in oklab, var(--accent) 70%, transparent);
      -webkit-text-fill-color: color-mix(in oklab, var(--accent) 70%, transparent);
      background: none;
      letter-spacing: 6px;
      font-size: .52rem;
    }

    .feature-banner--minimal .ks-spotlight-text {
      color: rgba(255, 255, 255, 0.9);
      font-weight: 600;
    }

    .feature-banner--minimal .ks-spotlight-divider {
      background: rgba(255, 255, 255, 0.06);
      width: 30px;
    }

    .feature-banner--minimal .ks-spotlight-tag {
      border-color: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.4);
      background: none;
    }

    /* ── Animation: Subtle Shimmer (scoped to #ks-spotlight-banner) ────── */
    .ks-spotlight-banner.feature-banner--anim-shimmer::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 50%;
      height: 100%;
      background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 7%, transparent), transparent);
      animation: fbShimmerSweep 4s ease-in-out infinite;
      pointer-events: none;
      display: block;
    }

    @keyframes fbShimmerSweep {
      0% { left: -50%; }
      100% { left: 150%; }
    }

    /* ── Animation: Soft Glow Pulse ──────────────────────────────────────── */
    .ks-spotlight-banner.feature-banner--anim-glow .ks-spotlight-kicker {
      animation: fbGlowPulse 3s ease-in-out infinite;
    }

    @keyframes fbGlowPulse {
      0%, 100% { filter: drop-shadow(0 0 0 transparent); }
      50% { filter: drop-shadow(0 0 8px color-mix(in oklab, var(--accent) 30%, transparent)); }
    }

    /* ── Size: Compact ───────────────────────────────────────────────────── */
    .ks-spotlight-banner.feature-banner--size-compact {
      padding: 8px 1.2rem 6px;
    }

    .feature-banner--size-compact .ks-spotlight-kicker {
      font-size: .48rem;
      letter-spacing: 3px;
      margin-bottom: 1px;
    }

    .feature-banner--size-compact .ks-spotlight-text {
      font-size: 1.05rem;
    }

    .feature-banner--size-compact .ks-spotlight-sub {
      font-size: .54rem;
    }

    .feature-banner--size-compact .ks-spotlight-divider {
      margin: 3px auto 4px;
    }

    /* ── Size: Feature ───────────────────────────────────────────────────── */
    .ks-spotlight-banner.feature-banner--size-feature {
      padding: 18px 1.8rem 14px;
    }

    .feature-banner--size-feature .ks-spotlight-kicker {
      font-size: .68rem;
      letter-spacing: 5px;
      margin-bottom: 5px;
    }

    .feature-banner--size-feature .ks-spotlight-text {
      font-size: clamp(1.7rem, 1.4rem + 2vw, 2.4rem);
    }

    .feature-banner--size-feature .ks-spotlight-sub {
      font-size: .72rem;
    }

    .feature-banner--size-feature .ks-spotlight-divider {
      margin: 7px auto 8px;
      width: 55px;
    }

    /* ── Feature Banner: Reduced Motion ──────────────────────────────────── */
    @media (prefers-reduced-motion: reduce) {
      .ks-spotlight-banner.feature-banner--anim-shimmer::after {
        animation: none;
        display: none;
      }

      .ks-spotlight-banner.feature-banner--anim-glow .ks-spotlight-kicker {
        animation: none;
      }
    }

    /* ── Feature Banner: Mobile ──────────────────────────────────────────── */
    @media (max-width: 767px) {
      .ks-spotlight-banner .ks-spotlight-icon {
        font-size: .5rem;
      }

      .ks-spotlight-banner .ks-spotlight-tag {
        font-size: .42rem;
        padding: 1px 6px;
      }

      .ks-spotlight-banner .ks-spotlight-divider {
        width: 28px;
        margin: 3px auto 4px;
      }

      .ks-spotlight-banner .ks-spotlight-bottom-row {
        gap: .35rem;
      }

      .ks-spotlight-banner.feature-banner--size-feature {
        padding: 12px 1.2rem 10px;
      }

      .feature-banner--size-feature .ks-spotlight-kicker {
        font-size: .55rem;
        letter-spacing: 3.5px;
      }

      .feature-banner--size-feature .ks-spotlight-text {
        font-size: .88rem;
      }
    }


    /* The two ambient shimmers are brand atmosphere, not information — the
       first thing reduced-motion should remove. */
    @media (prefers-reduced-motion: reduce) {
      .ks-spotlight-banner::after {
        animation: none;
        display: none;
      }

      .ks-spotlight-kicker,
      .feature-banner--classic .ks-spotlight-kicker {
        animation: none;
      }
    }


/* ══════════════════════════════════════════════════════════════════════
   dojo-home-announcement-bar.v1.css
   ══════════════════════════════════════════════════════════════════════ */
    /* ── Announcement Bar ─────────────────────────────────────────────────── */
    .cc-announcement {
      background: linear-gradient(135deg, #0A1324 0%, #1A2942 100%);
      border: 1px solid color-mix(in oklab, var(--accent) 20%, transparent);
      border-radius: 12px;
      padding: 1rem 1.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      box-shadow: 0 4px 16px rgba(10, 19, 36, 0.25);
      text-align: center;
    }

    .cc-announcement-icon {
      font-size: 1.2rem;
      color: var(--ks-accent-strong);
      flex-shrink: 0;
    }

    .cc-announcement-label {
      font-family: var(--ks-display);
      font-size: .78rem;
      font-weight: 800;
      color: var(--ks-accent-strong);
      letter-spacing: 1.5px;
      text-transform: uppercase;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .cc-announcement-text {
      font-size: 1.15rem;
      color: #FFFFFF;
      font-weight: 800;
      line-height: 1.5;
      text-align: center;
      letter-spacing: .3px;
    }

    /* Subtle gold shimmer (default) — respects prefers-reduced-motion */
    @keyframes ann-shimmer-anim {

      0%,
      100% {
        background-position: 200% 0;
      }

      50% {
        background-position: -100% 0;
      }
    }

    .cc-announcement-text.ann-shimmer {
      background: linear-gradient(90deg, #B8943E 0%, var(--ks-accent) 50%, #B8943E 100%);
      background-size: 200% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
      animation: ann-shimmer-anim 6s ease-in-out infinite;
    }

    @media (prefers-reduced-motion: reduce) {
      .cc-announcement-text.ann-shimmer {
        animation: none;
        background: none;
        -webkit-background-clip: initial;
        background-clip: initial;
        -webkit-text-fill-color: var(--ks-accent-strong);
        color: var(--ks-accent-strong);
      }
    }


/* ══════════════════════════════════════════════════════════════════════
   dojo-home-announcement-link-section.v1.css
   ══════════════════════════════════════════════════════════════════════ */
    .cc-announcement-section {
      display: flex;
      flex-direction: column;
    }

    .cc-announcement-section>.cc-events-header {
      margin-bottom: .65rem;
    }

    .cc-announcement-link {
      font-size: .68rem;
      font-weight: 800;
      color: var(--ks-accent-strong);
      letter-spacing: 1px;
      text-transform: uppercase;
      cursor: pointer;
      text-decoration: none;
      white-space: nowrap;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: .3rem;
      padding: .5rem 1.1rem;
      border-radius: 6px;
      border: 1px solid color-mix(in oklab, var(--accent) 50%, transparent);
      background: color-mix(in oklab, var(--accent) 12%, transparent);
      transition: all .25s ease;
    }

    .cc-announcement-link:hover {
      background: color-mix(in oklab, var(--accent) 25%, transparent);
      border-color: var(--ks-accent);
      color: var(--ks-accent-strong);
    }


/* ══════════════════════════════════════════════════════════════════════
   dojo-home-announcement-sheen-keyframes.v1.css
   ══════════════════════════════════════════════════════════════════════ */
    @keyframes cc-sheen-pass {
      0% {
        transform: translateX(-120%);
      }

      100% {
        transform: translateX(250%);
      }
    }


/* ══════════════════════════════════════════════════════════════════════
   dojo-home-command-center-selected-pulse-keyframes.v1.css
   ══════════════════════════════════════════════════════════════════════ */
    @keyframes cc-selected-pulse {

      0%,
      100% {
        box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 40%, transparent);
      }

      50% {
        box-shadow: 0 0 0 5px transparent;
      }
    }


/* ══════════════════════════════════════════════════════════════════════
   dojo-home-command-center-fade-up-keyframes.v1.css
   ══════════════════════════════════════════════════════════════════════ */
    @keyframes cc-fade-up {
      from {
        opacity: 0;
        transform: translateY(20px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }


/* ══════════════════════════════════════════════════════════════════════
   dojo-home-announcement-sheen.v1.css
   ══════════════════════════════════════════════════════════════════════ */
    /* ── Announcement banner sheen pass every 12s ──────────────────────── */
    .cc-announcement {
      position: relative;
      overflow: hidden;
    }

    .cc-announcement::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 30%;
      height: 100%;
      background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 8%, transparent), transparent);
      transform: translateX(-120%);
      animation: cc-sheen-pass .8s ease-in-out 12s infinite;
      pointer-events: none;
    }


/* ══════════════════════════════════════════════════════════════════════
   dojo-home-command-center-calendar-card-polish.v1.css
   ══════════════════════════════════════════════════════════════════════ */
    /* ── Calendar date hover scale ──────────────────────────────────────── */
    .cc-calendar-grid .home-calendar-mini-cell {
      transition: transform .15s ease, background .2s ease, color .2s ease;
    }

    .cc-calendar-grid .home-calendar-mini-cell:hover:not(.is-empty) {
      transform: scale(1.04);
    }

    /* ── Calendar selected day pulse ring ──────────────────────────────── */
    .cc-calendar-grid .home-calendar-mini-cell.selected {
      animation: cc-selected-pulse 2s ease-in-out infinite;
    }


/* ══════════════════════════════════════════════════════════════════════
   dojo-home-command-center-reduced-motion.v1.css
   ══════════════════════════════════════════════════════════════════════ */
    /* ── prefers-reduced-motion ─────────────────────────────────────────── */
    @media (prefers-reduced-motion: reduce) {

      .cc-btn-gold::after,
      .cc-announcement::after {
        animation: none;
      }

      .cc-calendar-grid .home-calendar-mini-cell.selected {
        animation: none;
      }

      .cc-event-card {
        opacity: 1;
        transform: none;
      }

      .cc-event-card.cc-revealed {
        animation: none;
        opacity: 1;
        transform: none;
      }

      .cc-card,
      .cc-event-card,
      .cc-btn-gold,
      .cc-btn-outline,
      .cc-quick-link {
        transition-duration: 0s !important;
      }
    }


/* ══════════════════════════════════════════════════════════════════════
   dojo-home-command-center-energy-pulse-keyframes.v1.css
   ══════════════════════════════════════════════════════════════════════ */
    @keyframes energyPulse {
      0% {
        box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 60%, transparent), 0 0 0 2px rgba(240, 220, 154, 0.5);
      }

      70% {
        box-shadow: 0 0 0 6px transparent, 0 0 0 2px rgba(240, 220, 154, 0.5);
      }

      100% {
        box-shadow: 0 0 0 0 transparent, 0 0 0 2px rgba(240, 220, 154, 0.5);
      }
    }


/* ══════════════════════════════════════════════════════════════════════
   dojo-home-special-banner-mobile.v1.css
   ══════════════════════════════════════════════════════════════════════ */
    @media(max-width:640px) {
      .home-special-banner {
        padding: .8rem 1rem
      }
    }


/* ══════════════════════════════════════════════════════════════════════
   dojo-home-upcoming-widget.v1.css
   ══════════════════════════════════════════════════════════════════════ */
    /* ── HOME UPCOMING WIDGET ────────────────────────────────────────────────── */
    .home-calendar {
      width: 100%;
      max-width: 900px;
      margin: 0 auto 2.25rem;
      background: linear-gradient(180deg, rgba(24, 38, 64, 0.94) 0%, rgba(17, 31, 54, 0.96) 100%);
      border: 1px solid color-mix(in oklab, var(--accent) 20%, transparent);
      border-radius: 14px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
      padding: 1rem 1rem 1.05rem
    }

    .home-calendar-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
      margin-bottom: .85rem;
      flex-wrap: wrap
    }

    .home-calendar-layout {
      display: grid;
      grid-template-columns: 280px minmax(0, 1fr);
      gap: 1rem;
      align-items: start
    }

    @media(max-width:850px) {
      .home-calendar-layout {
        grid-template-columns: 1fr
      }
    }

    .home-calendar-mini {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid color-mix(in oklab, var(--accent) 18%, transparent);
      border-radius: 12px;
      padding: .85rem
    }

    .home-calendar-mini-month {
      font-family: var(--ks-display);
      font-size: .8rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--ks-accent-strong);
      margin-bottom: .65rem;
      text-align: center
    }

    .home-calendar-mini-weekdays,
    .home-calendar-mini-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: .28rem
    }

    .home-calendar-mini-weekday {
      text-align: center;
      font-size: .54rem;
      font-weight: 800;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: var(--dim);
      padding: .2rem 0
    }

    .home-calendar-mini-cell {
      min-height: 34px;
      border-radius: 9px;
      border: 1px solid transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      font-size: .72rem;
      color: var(--text);
      background: rgba(255, 255, 255, 0.02)
    }

    .home-calendar-mini-cell.is-empty {
      background: transparent;
      color: rgba(255, 255, 255, 0.18)
    }

    .home-calendar-mini-cell.has-event {
      border-color: color-mix(in oklab, var(--accent) 28%, transparent);
      background: color-mix(in oklab, var(--accent) 9%, transparent)
    }

    .home-calendar-mini-cell.is-today {
      border-color: rgba(240, 220, 154, 0.5);
      box-shadow: 0 0 0 1px rgba(240, 220, 154, 0.18) inset;
      color: var(--white)
    }

    .home-calendar-mini-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--ks-accent)
    }

    .home-calendar-main {
      min-width: 0
    }

    .home-calendar-title {
      font-family: var(--ks-display);
      font-size: .82rem;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--ks-accent-strong)
    }

    .home-calendar-sub {
      font-size: .72rem;
      color: var(--muted)
    }

    .home-calendar-reminder {
      display: none;
      text-align: left;
      background: linear-gradient(135deg, rgba(72, 143, 229, 0.18) 0%, rgba(10, 19, 36, 0.95) 100%);
      border: 1px solid rgba(93, 173, 226, 0.35);
      border-left: 3px solid #5dade2;
      border-radius: 12px;
      padding: .9rem 1rem;
      margin-bottom: .85rem;
      box-shadow: 0 4px 24px rgba(52, 152, 219, 0.14), inset 0 0 20px rgba(52, 152, 219, 0.04);
      position: relative;
      overflow: hidden
    }

    .home-calendar-reminder::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, rgba(93, 173, 226, 0.6), transparent)
    }

    .home-calendar-reminder.show {
      display: block
    }

    .home-calendar-reminder-kicker {
      font-size: .62rem;
      letter-spacing: 2.2px;
      text-transform: uppercase;
      color: #7EC8E3;
      font-weight: 800;
      margin-bottom: .35rem
    }

    .home-calendar-reminder-name {
      font-family: var(--ks-display);
      font-size: 1rem;
      color: var(--white);
      margin-bottom: .3rem
    }

    .home-calendar-reminder-meta {
      font-size: .76rem;
      color: var(--text);
      line-height: 1.55
    }

    .home-calendar-list {
      display: flex;
      flex-direction: column;
      gap: .65rem
    }

    .home-calendar-item {
      display: flex;
      align-items: flex-start;
      gap: .8rem;
      padding: .8rem .85rem;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 10px
    }

    .home-calendar-date {
      width: 56px;
      min-width: 56px;
      border-radius: 9px;
      padding: .45rem .35rem;
      text-align: center;
      background: color-mix(in oklab, var(--accent) 10%, transparent);
      border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent)
    }

    .home-calendar-date-mon {
      font-size: .58rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--ks-accent-strong);
      font-weight: 800
    }

    .home-calendar-date-day {
      font-family: var(--ks-display);
      font-size: 1.45rem;
      line-height: 1;
      color: var(--white);
      margin-top: .15rem
    }

    .home-calendar-body {
      flex: 1;
      min-width: 0;
      text-align: left
    }

    .home-calendar-name {
      font-family: var(--ks-display);
      font-size: .88rem;
      color: var(--white);
      margin-bottom: .22rem;
      line-height: 1.3
    }

    .home-calendar-meta {
      font-size: .73rem;
      color: var(--muted);
      line-height: 1.6
    }

    .home-calendar-badges {
      display: flex;
      gap: .35rem;
      flex-wrap: wrap;
      margin-top: .35rem
    }

    .home-calendar-badge {
      display: inline-flex;
      align-items: center;
      padding: 3px 9px;
      border-radius: 999px;
      font-size: .56rem;
      font-weight: 800;
      letter-spacing: 1.3px;
      text-transform: uppercase
    }

    .home-calendar-badge-reminder {
      background: color-mix(in oklab, var(--accent) 15%, transparent);
      color: var(--ks-accent-strong);
      border: 1px solid color-mix(in oklab, var(--accent) 28%, transparent)
    }

    .home-calendar-badge-today {
      background: rgba(60, 179, 113, 0.14);
      color: #77d49d;
      border: 1px solid rgba(60, 179, 113, 0.26)
    }

    .home-calendar-actions {
      display: flex;
      gap: .4rem;
      align-items: center;
      flex-shrink: 0
    }

    .home-calendar-empty {
      text-align: center;
      padding: 1.25rem .75rem;
      border: 1px dashed rgba(255, 255, 255, 0.08);
      border-radius: 10px;
      font-size: .74rem;
      color: var(--dim)
    }

    .admin-calendar-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
      flex-wrap: wrap;
      margin-bottom: .9rem
    }

    .admin-calendar-month {
      font-family: var(--ks-display);
      font-size: .9rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--ks-accent-strong)
    }

    .admin-calendar-actions {
      display: flex;
      gap: .45rem;
      flex-wrap: wrap
    }

    .admin-calendar-selected {
      font-size: .72rem;
      color: var(--muted);
      padding: .65rem .85rem;
      margin-bottom: .9rem;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.07);
      border-radius: 10px
    }

    .admin-calendar-grid-wrap {
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid color-mix(in oklab, var(--accent) 12%, transparent);
      border-radius: 14px;
      padding: .55rem
    }

    .admin-calendar-weekdays,
    .admin-calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: .2rem
    }

    .admin-calendar-weekday {
      text-align: center;
      font-size: .5rem;
      font-weight: 800;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--dim);
      padding: .15rem 0
    }

    .admin-calendar-day {
      min-height: 54px;
      border-radius: 9px;
      padding: .25rem .22rem .2rem;
      cursor: pointer;
      background: rgba(20, 34, 58, 0.92);
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: border-color .2s, transform .2s, box-shadow .2s
    }

    .admin-calendar-day:hover {
      border-color: color-mix(in oklab, var(--accent) 30%, transparent);
      transform: translateY(-1px)
    }

    .admin-calendar-day.other-month {
      opacity: .32
    }

    .admin-calendar-day.today {
      border-color: rgba(240, 220, 154, 0.42);
      box-shadow: 0 0 0 1px rgba(240, 220, 154, 0.18) inset
    }

    .admin-calendar-day.selected {
      border-color: color-mix(in oklab, var(--accent) 45%, transparent);
      background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 14%, transparent) 0%, rgba(8, 16, 35, 0.92) 100%);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28)
    }

    .admin-calendar-day-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: .15rem
    }

    .admin-calendar-day-num {
      font-family: var(--ks-display);
      font-size: .72rem;
      color: var(--white)
    }

    .admin-calendar-day-add {
      font-size: .42rem;
      font-weight: 800;
      letter-spacing: .8px;
      text-transform: uppercase;
      color: var(--ks-accent-strong);
      opacity: .75
    }

    .admin-calendar-items {
      display: flex;
      flex-direction: column;
      gap: .14rem
    }

    .admin-calendar-item {
      border: none;
      text-align: left;
      width: 100%;
      cursor: pointer;
      border-radius: 6px;
      padding: .12rem .18rem;
      background: rgba(255, 255, 255, 0.05);
      color: var(--text);
      font-size: .5rem;
      line-height: 1.15;
      border: 1px solid rgba(255, 255, 255, 0.08)
    }

    .admin-calendar-item:hover {
      border-color: color-mix(in oklab, var(--accent) 28%, transparent)
    }

    .admin-calendar-item.practice {
      background: color-mix(in oklab, var(--accent) 11%, transparent);
      border-color: color-mix(in oklab, var(--accent) 22%, transparent)
    }

    .admin-calendar-item.event {
      background: rgba(52, 152, 219, 0.11);
      border-color: rgba(52, 152, 219, 0.22)
    }

    .admin-calendar-item-title {
      font-weight: 800;
      color: var(--white)
    }

    .admin-calendar-item-meta {
      display: none
    }

    .calendar-modal-selected {
      display: none;
      margin-bottom: .85rem;
      padding: .75rem .85rem;
      border-radius: 10px;
      background: color-mix(in oklab, var(--accent) 8%, transparent);
      border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent);
      font-size: .72rem;
      color: var(--text)
    }

    .calendar-modal-selected.show {
      display: block
    }



/* ══════════════════════════════════════════════════════════════════════
   dojo-team-preview.v1.css
   ══════════════════════════════════════════════════════════════════════ */
    /* ──────────────────────────────────────────────────────────────────────────
       Team preview.

       The first impression a stranger gets of a dojo's competition programme,
       so it is given room rather than packed in. Token-driven throughout: this
       page is read on the same site in the same theme as everything else, and a
       preview that looked like a different product would read as an advert
       bolted on rather than as part of the dojo.

       Every block is content the dojo wrote. There is no call-to-action button,
       because there is nothing behind one yet -- a button that does nothing is
       worse than a sentence telling someone to ask their instructor.
       ────────────────────────────────────────────────────────────────────────── */

    #view-team-preview {
      --tp-gap: clamp(2rem, 5vw, 3.25rem);
      /* The view owns its canvas, the way #view-admin does. Without this the
         page falls through to the shell underneath and the tokens -- which
         resolve light -- put dark ink on a dark background. */
      background: var(--ks-canvas);
      /* min-height dropped: the body is a flex column and .view.active grows
         into the space instead, so the canvas still reaches the bottom of a
         short page without a viewport of it appearing above the footer. */
    }

    #team-preview-root {
      display: flex;
      flex-direction: column;
      gap: var(--tp-gap);
      max-width: var(--ks-measure, 72rem);
      margin: 0 auto;
      padding: clamp(1.5rem, 4vw, 2.75rem) var(--ks-gutter, 1.25rem) 4rem;
    }

    /* (.tp-header / .tp-title removed: the page's heading is the shared
       .ks-pagehead band in the markup now, not a JS-built h1 in the root.) */

    .tp-section-title {
      margin: 0 0 1.15rem;
      font-size: clamp(1.15rem, 2.4vw, 1.45rem);
      font-weight: 800;
      letter-spacing: -.01em;
      color: var(--ks-ink);
    }

    /* ── Cards: what the team offers ────────────────────────────────────────── */
    .tp-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
      gap: 1rem;
    }

    .tp-card {
      padding: 1.35rem 1.4rem;
      border: 1px solid var(--ks-line);
      border-radius: 14px;
      background: var(--ks-surface-raised, var(--ks-surface));
      box-shadow: var(--ks-shadow-1);
    }

    .tp-card-title {
      margin: 0 0 .5rem;
      font-size: 1.02rem;
      font-weight: 750;
      color: var(--ks-ink);
    }

    .tp-card-body {
      margin: 0;
      font-size: .93rem;
      line-height: 1.65;
      color: var(--ks-ink-2);
    }

    /* ── Steps: how it works ────────────────────────────────────────────────── */
    .tp-steps {
      counter-reset: tp-step;
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .tp-step {
      counter-increment: tp-step;
      position: relative;
      padding: 1.15rem 1.35rem 1.15rem 3.75rem;
      border: 1px solid var(--ks-line);
      border-radius: 14px;
      background: var(--ks-surface-raised, var(--ks-surface));
    }

    /* The number is decoration on top of an <ol>: the sequence is already in
       the markup, so a reader who never sees this still gets the order. */
    .tp-step::before {
      content: counter(tp-step);
      position: absolute;
      left: 1.2rem;
      top: 1.15rem;
      display: grid;
      place-items: center;
      width: 1.9rem;
      height: 1.9rem;
      border-radius: 999px;
      background: var(--ks-accent);
      color: var(--ks-on-accent, #fff);
      font-size: .85rem;
      font-weight: 800;
    }

    .tp-step-title {
      margin: 0 0 .4rem;
      font-size: 1rem;
      font-weight: 750;
      color: var(--ks-ink);
    }

    .tp-step-body {
      margin: 0;
      font-size: .93rem;
      line-height: 1.65;
      color: var(--ks-ink-2);
    }

    /* ── Prose: stories ─────────────────────────────────────────────────────── */
    .tp-prose {
      display: flex;
      flex-direction: column;
      gap: 1.75rem;
      max-width: var(--ks-measure-narrow, 65ch);
    }

    .tp-story-title {
      margin: 0 0 .45rem;
      font-size: 1.06rem;
      font-weight: 750;
      color: var(--ks-ink);
    }

    .tp-story-body {
      margin: 0;
      font-size: .98rem;
      line-height: 1.75;
      color: var(--ks-ink-2);
      white-space: pre-wrap;
    }

    /* ── Q&A ────────────────────────────────────────────────────────────────── */
    .tp-qa {
      margin: 0;
      max-width: var(--ks-measure-narrow, 65ch);
    }

    .tp-qa-q {
      margin: 0 0 .35rem;
      font-size: 1rem;
      font-weight: 750;
      color: var(--ks-ink);
    }

    .tp-qa-a {
      margin: 0 0 1.5rem;
      padding-bottom: 1.5rem;
      border-bottom: 1px solid var(--ks-line-soft, var(--ks-line));
      font-size: .95rem;
      line-height: 1.7;
      color: var(--ks-ink-2);
      white-space: pre-wrap;
    }

    .tp-qa-a:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }

    /* ── Empty ──────────────────────────────────────────────────────────────── */
    .tp-empty {
      padding: 3rem 1.5rem;
      border: 1px dashed var(--ks-line);
      border-radius: 16px;
      background: var(--ks-surface-sunken);
      text-align: center;
    }

    .tp-empty-title {
      margin: 0 0 .5rem;
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--ks-ink);
    }

    .tp-empty-body {
      margin: 0 auto;
      max-width: 44ch;
      font-size: .95rem;
      line-height: 1.65;
      color: var(--ks-ink-2);
    }

    /* ── Pictures ───────────────────────────────────────────────────────────── */
    .tp-photo {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 14px;
      background: var(--ks-surface-sunken);
    }

    /* The runtime marks a reference it could not resolve -- an item taken down,
       or a reader the gateway refused. Hidden rather than left as a broken
       frame: on a page a stranger reads, a missing picture should look like
       nothing, not like a fault. */
    .tp-photo[data-media-state="error"],
    .tp-photo[data-media-state="empty"] {
      display: none;
    }

    .tp-gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
      gap: 1.25rem;
    }

    .tp-gallery-item {
      margin: 0;
      padding: 0;
      border: 1px solid var(--ks-line);
      border-radius: 16px;
      overflow: hidden;
      background: var(--ks-surface-raised, var(--ks-surface));
      box-shadow: var(--ks-shadow-1);
    }

    .tp-gallery-item .tp-photo {
      border-radius: 0;
      aspect-ratio: 4 / 3;
      object-fit: cover;
    }

    .tp-gallery-caption {
      padding: 1.1rem 1.25rem 1.35rem;
    }

    .tp-gallery-title {
      margin: 0 0 .4rem;
      font-size: 1rem;
      font-weight: 750;
      color: var(--ks-ink);
    }

    .tp-gallery-body {
      margin: 0;
      font-size: .92rem;
      line-height: 1.65;
      color: var(--ks-ink-2);
    }

    /* A story's picture sits between its heading and its text. */
    .tp-story .tp-photo {
      margin: .75rem 0 .9rem;
    }

    /* ── The lead: the dojo's own about text and published contact ─────────
       Reads as the page's opening statement, not another boxed section — the
       promotional sections below keep their card shapes. */
    .tp-lead {
      max-width: 46rem;
    }

    .tp-lead-about {
      margin: 0 0 .9rem;
      font-size: 1.05rem;
      line-height: 1.7;
      color: var(--ks-ink);
    }

    .tp-lead-contact {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: .35rem 1.1rem;
      margin: 1.1rem 0 0;
      padding: .9rem 1.1rem;
      background: var(--ks-surface);
      border: 1px solid var(--ks-line);
      border-radius: var(--radius-md, 10px);
    }

    .tp-lead-contact-key {
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--ks-ink-3);
      align-self: baseline;
      margin: 0;
    }

    .tp-lead-contact-value {
      margin: 0;
      font-size: .95rem;
      line-height: 1.55;
      color: var(--ks-ink);
      white-space: pre-line;
    }


/* ══════════════════════════════════════════════════════════════════════
   ks-how-it-works.v1.css
   ══════════════════════════════════════════════════════════════════════ */
/* ── How it works — the member's guide ──────────────────────────────────────
 *
 * ONE file, replacing six.
 *
 * The view it dresses used to be 275 lines of inline styles, and the six
 * stylesheets that tried to civilise it — section-header, feature-cards,
 * feature-cards-motion, step-cards, mobile-responsive, hero-align — spent
 * ~300 lines and roughly ninety `!important`s overriding markup that said the
 * opposite of what shipped. Their own comments record the cost: cards whose
 * markup said `background:#FFF` while the screen showed `#0B1F3A`, selectors
 * like `>div:nth-child(2)>div>div>div>h2` that a single wrapper would have
 * silently detached, and three separate hand-pinned accent overrides chasing
 * measured failures at 2.09:1, 1.85:1, 1.66:1 and 1.04:1.
 *
 * None of that machinery survives here, and not because it was rewritten more
 * carefully — because the markup stopped lying. Every element carries a class,
 * every dark surface is `.ks-card--inverse` (which re-points the type roles to
 * the band inks, so the accent needs no pinning at all), and every colour is a
 * token that already knows which theme it is in. There is no `!important` in
 * this file, and nothing here paints a hex.
 *
 * Named to land in bundle 4 `pages-public` — tools/consolidate-tenant-css.mjs
 * classifies on the filename, and `how-it-works` is one of its tokens. Keep
 * the words `responsive`, `polish`, `patch` and `tweak` out of the name or it
 * is reclassified into bundle 6.
 *
 * Mobile-first throughout, deliberately: the tenant sheets are largely
 * desktop-first with max-width queries, and dojo-global-theme-tokens.v1.css
 * says the two must not be interleaved inside one stylesheet. This is a new
 * file, so it takes the convention the token file recommends and holds it end
 * to end. Breakpoints are the documented 640 / 960.
 * ────────────────────────────────────────────────────────────────────────── */

/* ── The view's ambient ink ─────────────────────────────────────────────────
 * The shell's inherited text colour is the legacy `--text: #E0DCD2`, from the
 * days when every tenant surface was dark. It does not follow the theme, and
 * `.ks-t-heading` and `.ks-t-body` deliberately set no colour of their own —
 * they take the ink of whatever they are placed on. On this view's light cards
 * that inheritance measured #E0DCD2 on #FFFFFF: 1.25:1, caught in the browser
 * rather than in the stylesheet, which is the only place it is visible.
 *
 * So the view states its ink once, from the theme. Nothing below repeats it.
 * `.ks-band` and `.ks-card--inverse` both set their own colour directly on the
 * element, and a directly-applied declaration always beats an inherited one,
 * so the dark surfaces inside this view are unaffected by this rule and keep
 * the band inks they came with. */
#view-how-it-works {
  color: var(--ks-ink);
}

/* The jump buttons in the pagehead. `.ks-btn-ghost` already corrects itself on
   a band (dojo-tenant-surface-components.v1.css scopes `.ks-band .ks-btn-ghost`),
   so these need layout and nothing else. */
.hiw-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ks-s-2);
}

/* Where a jump lands. The nav is fixed, so a section scrolled to `block: start`
   sits underneath it — measured at top: 0 with a 60px bar over it. The margin
   is the nav's own token plus a little air, so it tracks the bar's height
   instead of guessing at it (--ks-nav-h is 72px, 60px under 900px). */
#view-how-it-works .ks-section[id] {
  scroll-margin-top: calc(var(--ks-nav-h) + var(--ks-s-3));
}

/* ── Shared card body ───────────────────────────────────────────────────────
   `.ks-card` is a column flex box with a border, a radius and a shadow, and
   deliberately no padding — padding belongs to `.ks-card-head`/`-body`. These
   cards hold prose directly, so they supply their own. The `gap` is what
   spaces the headings and paragraphs, all of which reset their own margins. */
.hiw-door,
.hiw-step-card,
.hiw-feature,
.hiw-after-card,
.hiw-help {
  gap: var(--ks-s-3);
  padding: clamp(1.15rem, 3vw, 1.6rem);
}

/* An icon plate at the top of a card. Sized in `em` off the icon's own box so
   it scales with the reader's type, and tinted from the accent rather than
   filled: a filled accent plate on every card would make six equal things
   compete with the one primary action on the page. */
.hiw-door-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--ks-r-md);
  background: var(--ks-accent-soft);
  color: var(--ks-accent-strong);
  border: 1px solid var(--ks-line);
}

.hiw-door-icon .ks-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* ── The three doors ────────────────────────────────────────────────────────
   minmax(0, 1fr), never a bare 1fr: a bare track is minmax(AUTO, 1fr), whose
   floor is the widest unbreakable content, so one long word makes the row
   wider than its container instead of wrapping. That is the mobile card
   overflow class recorded on 2026-08-28. */
.hiw-doors,
.hiw-grid,
.hiw-after {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ks-s-4);
}

@media (min-width: 640px) {

  .hiw-grid,
  .hiw-after {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .hiw-doors {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── Notes ──────────────────────────────────────────────────────────────────
   A statement the reader needs before they act, not a decoration. Two tones:
   `--info` for the member/competitor distinction, `--lock` for the footage
   rule. Both take their tint from the theme file, which is the one place a
   value already knows whether the page is light or dark — a fixed pale tint
   here would be unreadable the moment the reader is in dark mode. */
.hiw-note {
  display: flex;
  gap: var(--ks-s-3);
  align-items: flex-start;
  margin-top: var(--ks-s-5);
  padding: clamp(1rem, 2.5vw, 1.35rem);
  border-radius: var(--ks-r-lg);
  border: 1px solid;
}

.hiw-note-body {
  display: grid;
  gap: var(--ks-s-2);
  min-width: 0;
}

.hiw-note-icon {
  display: inline-flex;
  flex-shrink: 0;
}

.hiw-note-icon .ks-icon {
  width: 1.35rem;
  height: 1.35rem;
}

.hiw-note--info {
  background: var(--ks-info-bg);
  border-color: var(--ks-info-line);
}

.hiw-note--lock {
  background: var(--ks-warning-bg);
  border-color: var(--ks-warning-line);
}

/* No ink is pinned on these two. Both tints are theme-aware — #EFF6FF /
   #FFFBEB in light, #0F1D33 / #2A1F10 in dark — so the theme-following
   `--ks-ink-2` that `.ks-t-body` already carries is the correct ink on both,
   and pinning a dark ink here would reproduce, in dark mode, exactly the
   failure the retired sheets were pinning against in light. The icon colours
   are the status roles, which the token verifier already measures against
   their own tint at 4.5:1. */
.hiw-note--info .hiw-note-icon {
  color: var(--ks-info);
}

.hiw-note--lock .hiw-note-icon {
  color: var(--ks-warning);
}

/* ── The numbered steps ─────────────────────────────────────────────────────
   An ordered list that keeps its semantics: the number is presentational
   (aria-hidden) and the <ol> carries the sequence for anyone listening. */
.hiw-steps {
  display: grid;
  gap: var(--ks-s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hiw-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--ks-s-3);
  align-items: start;
}

.hiw-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--ks-r-pill);
  background: var(--ks-accent);
  color: var(--ks-on-accent);
  font-family: var(--ks-display);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
}

@media (min-width: 640px) {
  .hiw-step {
    gap: var(--ks-s-4);
  }

  .hiw-step-n {
    width: 3rem;
    height: 3rem;
    font-size: 1.25rem;
  }
}

/* The two ways into the match form. */
.hiw-paths {
  display: grid;
  gap: var(--ks-s-2);
  margin: 0;
  padding-left: 1.1rem;
  font-size: var(--ks-body-sm);
  color: var(--ks-ink-2);
  line-height: 1.6;
}

/* ── The field reference ────────────────────────────────────────────────────
   A description list, because that is what it is: each control paired with
   what to put in it. Stacked on a phone, two columns from 640 where the
   labels can sit beside their descriptions without either being cramped. */
.hiw-fields {
  display: grid;
  gap: 0;
  margin: 0;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-r-md);
  overflow: hidden;
}

.hiw-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ks-s-1);
  padding: var(--ks-s-3);
  border-top: 1px solid var(--ks-line-soft);
}

.hiw-field:first-child {
  border-top: 0;
}

.hiw-field dt {
  font-family: var(--ks-display);
  font-size: var(--ks-body-sm);
  font-weight: 800;
  color: var(--ks-ink);
  line-height: 1.35;
}

.hiw-field dd {
  margin: 0;
  font-size: var(--ks-body-sm);
  color: var(--ks-ink-2);
  line-height: 1.6;
}

@media (min-width: 640px) {
  .hiw-field {
    grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr);
    gap: var(--ks-s-3);
    align-items: baseline;
  }
}

/* "Required" — the only badge on the page, because exactly one field is. */
.hiw-req {
  display: inline-block;
  margin-left: var(--ks-s-1);
  padding: .1rem .45rem;
  border-radius: var(--ks-r-control-sm);
  background: var(--ks-accent-soft);
  border: 1px solid var(--ks-line);
  color: var(--ks-accent-strong);
  font-size: var(--ks-label);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hiw-after {
  margin-top: var(--ks-s-5);
}

/* ── Who can see what ───────────────────────────────────────────────────────
   Three marks, and none of them is danger red. "Not visible" is a correct,
   intended outcome — the privacy model working — so painting it in the colour
   the product reserves for errors would be a lie about severity. Neutral for
   no, success for yes, info for conditional. */
.hiw-seelist {
  display: grid;
  gap: var(--ks-s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hiw-see {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--ks-s-3);
  align-items: start;
  padding: var(--ks-s-4);
  background: var(--ks-surface);
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-r-lg);
  box-shadow: var(--ks-shadow-1);
}

.hiw-see>div {
  display: grid;
  gap: var(--ks-s-1);
  min-width: 0;
}

.hiw-see-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--ks-r-pill);
  border: 1px solid;
}

.hiw-see-mark .ks-icon {
  width: 1.05rem;
  height: 1.05rem;
}

.hiw-see-mark--no {
  background: var(--ks-surface-sunken);
  border-color: var(--ks-line);
  color: var(--ks-ink-3);
}

.hiw-see-mark--yes {
  background: var(--ks-success-bg);
  border-color: var(--ks-success-line);
  color: var(--ks-success);
}

.hiw-see-mark--some {
  background: var(--ks-info-bg);
  border-color: var(--ks-info-line);
  color: var(--ks-info);
}

@media (min-width: 640px) {
  .hiw-seelist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Help ───────────────────────────────────────────────────────────────────
   The closing card is inverse rather than accent-filled: the page's one filled
   accent is the step numbers, and a second full-width accent block at the foot
   would compete with them for the same job. */
.hiw-help-section {
  padding-top: 0;
}

.hiw-help {
  align-items: flex-start;
}

.hiw-help-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ks-s-2);
  margin-top: var(--ks-s-2);
}

/* An outbound link in prose. Underlined rather than colour-only, so it is
   still a link to a reader who cannot separate the accent from the text. */
.hiw-link {
  color: var(--ks-accent-strong);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .15em;
}

.hiw-link:hover,
.hiw-link:focus-visible {
  color: var(--ks-accent);
}