/* ==========================================================================
   Saja Medflix — theme.css
   Tokens, base, and the chrome every page shares.

   THE BRAND

   The mark is a play triangle in Saja red with an "M" cut out of it in Saja
   green, over a dark field. So the site is dark: a library you watch things
   in, not a brochure you read. Green does the work — it is the CTA, the
   progress, the tick — and red is kept for the one thing red should mean
   here: play, live, on now. Used for anything else it reads as an error.

   A DARK THEME, NAMED LIKE A LIGHT ONE

   The token names are the same ones the ARACME site uses, because
   tebzone.css is deployed byte-identical to every partner and reads them by
   name. Here they hold dark values: `--surface` is a near-black card, and
   the `--ink-*` ramp runs from near-white (900) down to the dimmest legible
   grey (300) — the reverse of what those numbers mean on a light site.
   assets/css/tebzone-dark.css picks up the few that cannot be expressed that
   way.

   BOTH DIRECTIONS, ONE STYLESHEET

   Arabic and English on one document, mirrored. Nearly every offset is
   logical; physical values are left only where a thing should not flip.
   ========================================================================== */

@layer reset, base, theme, components, utilities;

@layer theme {
  :root {
    /* --- Saja green: the M, and everything the visitor can act on ------ */
    --accent-900: #003b20;
    --accent-800: #00522c;
    --accent-700: #006837;   /* the logo's green */
    --accent-600: #00844a;
    --accent-500: #00a651;
    --accent-400: #2ac16f;
    --accent-200: #7fdda6;
    --accent-100: #123a27;   /* a tint that works on black, not on white */
    --accent-50:  #0d2a1d;

    /* --- Saja red: play, live, on now. Nothing else -------------------- */
    --red-600: #c9151c;
    --red-500: #ed1c24;
    --red-400: #ff4a51;
    --red-tint: #2a1012;

    /* --- The field ---------------------------------------------------- */
    --brand-950: #070a09;
    --brand-900: #0b100e;
    --brand-800: #101614;
    --brand-700: #161e1b;
    --brand-600: #1d2723;
    --brand-200: #2b3a34;
    --brand-100: #1a2320;
    --brand-50:  #141b18;

    /* --- Ink, running bright to dim ----------------------------------- */
    --ink-900: #f2f6f4;
    --ink-800: #e4eae7;
    --ink-700: #cfd8d3;
    --ink-600: #b3c0ba;
    --ink-500: #93a49c;
    --ink-400: #74857d;
    --ink-300: #4d5b55;
    --ink-200: #2b3631;
    --ink-100: #1a231f;
    --ink-50:  #121917;

    --surface: #141b18;
    --surface-muted: #101614;
    --surface-deep: #070a09;
    --paper: #f7faf8;          /* the one light band on the page */
    --line: rgb(255 255 255 / 0.09);
    --line-strong: rgb(255 255 255 / 0.18);

    --danger: #ff6a63;
    --danger-soft: #2a1210;
    --danger-line: #55251f;

    /* --- Gradients ----------------------------------------------------- */
    /* Ends at 700, not 500: this one sits behind the white initials in the
       account chip, and #00a651 under white is 3.2:1. */
    --grad-brand: linear-gradient(135deg in oklab, #063d24, var(--accent-700));
    /* Both ends dark enough for the white button text this gradient
       carries: at 500 the light end measured 3.2:1. (The ARACME site runs
       the same token light, because there the buttons carry near-black
       text — same name, opposite requirement.) */
    --grad-accent: linear-gradient(135deg in oklab, var(--accent-800), var(--accent-700));
    --grad-play: linear-gradient(135deg in oklab, var(--red-500), #ff7a3d);
    --grad-stage: radial-gradient(ellipse 80% 60% at 20% 0%, rgb(0 166 81 / 0.22), transparent 60%),
                  radial-gradient(ellipse 70% 60% at 85% 20%, rgb(237 28 36 / 0.16), transparent 60%);

    /* --- Elevation. On a dark field a shadow is a glow ------------------ */
    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.5);
    --shadow-sm: 0 2px 10px rgb(0 0 0 / 0.45);
    --shadow-md: 0 14px 34px -14px rgb(0 0 0 / 0.75);
    --shadow-lg: 0 32px 66px -26px rgb(0 0 0 / 0.85);
    --shadow-accent: 0 14px 34px -14px rgb(0 166 81 / 0.55);
    --shadow-brand: 0 16px 38px -18px rgb(0 0 0 / 0.8);
    --on-accent: #04170d;

    --r-xs: 8px;
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-xl: 30px;
    --r-full: 999px;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --t-fast: 0.18s;
    --t-base: 0.3s;
    --t-slow: 0.58s;

    --font-body: "Readex Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-heading: var(--font-body);
    --font-display: var(--font-body);

    --container: 1220px;
    --gutter: clamp(1.15rem, 4vw, 2.5rem);
    --section-y: clamp(4rem, 8vw, 7.5rem);
    --header-h: 74px;
  }

  /* Readex Pro carries both scripts, so the two languages are the same
     voice rather than two typefaces bolted together. */
}

/* ==========================================================================
   Reset
   ========================================================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-block-start: calc(var(--header-h) + 1.5rem);
    /* The closed mobile drawer is parked off the inline-start edge, and a
       fixed element is clipped by the viewport rather than by an ancestor's
       overflow — so this belongs on the root. `clip` not `hidden`, which
       would make the root a scroll container and break the sticky header. */
    overflow-x: clip;
    color-scheme: dark;
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }

  body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.75;
    font-weight: 300;
    color: var(--ink-600);
    background: var(--brand-950);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }

  h1, h2, h3, h4, h5 {
    margin: 0;
    font-family: var(--font-heading);
    color: var(--ink-900);
    line-height: 1.18;
    font-weight: 600;
    letter-spacing: -0.02em;
  }
  [dir="rtl"] :is(h1, h2, h3, h4, h5) { letter-spacing: 0; line-height: 1.4; }

  p { margin: 0; text-wrap: pretty; }
  ul, ol { margin: 0; padding: 0; list-style: none; }
  img, svg, video { display: block; max-width: 100%; height: auto; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  input, select, textarea { font: inherit; color: inherit; }
}

/* ==========================================================================
   Base
   ========================================================================== */
@layer base {
  :focus-visible {
    outline: 3px solid var(--accent-500);
    outline-offset: 3px;
    border-radius: 4px;
  }
  ::selection { background: var(--accent-700); color: #fff; }

  .container {
    width: min(100% - (var(--gutter) * 2), var(--container));
    margin-inline: auto;
  }
  .container--narrow { --container: 880px; }

  .skip-link {
    position: fixed;
    inset-block-start: -100px;
    inset-inline-start: 1rem;
    z-index: 200;
    padding: 0.75rem 1.25rem;
    border-radius: var(--r-sm);
    background: var(--accent-700);
    color: #fff;
    font-weight: 600;
    transition: inset-block-start var(--t-base) var(--ease-out);
  }
  .skip-link:focus { inset-block-start: 1rem; }

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

/* ==========================================================================
   Components
   ========================================================================== */
@layer components {

  /* ----------------------------------------------------------------------
     Section furniture
     ---------------------------------------------------------------------- */
  .section { padding-block: var(--section-y); position: relative; }
  .section--raised { background: var(--brand-900); }

  /* The one light band. A page that is dark from top to bottom stops having
     a rhythm; one sheet of paper in the middle of it gives the eye a rest
     and makes the dark read as a choice. */
  .section--paper {
    background: var(--paper);
    color: #3f4a45;
  }
  .section--paper :is(h1, h2, h3, h4) { color: #0d1512; }
  .section--paper .eyebrow { color: var(--accent-700); }
  .section--paper .section-lead { color: #5c6963; }

  .section-head { max-width: 62ch; margin-block-end: clamp(2.25rem, 4vw, 3.5rem); }
  .section-head--center { margin-inline: auto; text-align: center; }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-block-end: 1rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-400);
  }
  [dir="rtl"] .eyebrow { letter-spacing: 0.04em; }
  .eyebrow::before {
    content: "";
    inline-size: 22px;
    block-size: 2px;
    border-radius: 2px;
    background: var(--grad-play);
  }

  .section-title {
    font-size: clamp(1.9rem, 1.1rem + 2.8vw, 3.2rem);
    text-wrap: balance;
  }
  .section-lead {
    margin-block-start: 1.1rem;
    font-size: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
    color: var(--ink-500);
  }

  /* ----------------------------------------------------------------------
     Buttons
     ---------------------------------------------------------------------- */
  .btn {
    --btn-bg: var(--accent-600);
    --btn-fg: #fff;
    --btn-line: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-block-size: 46px;
    padding-inline: 1.4rem;
    padding-block: 0.7rem;
    border: 1px solid var(--btn-line);
    border-radius: var(--r-full);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.2;
    white-space: nowrap;
    transition: transform var(--t-base) var(--ease-out),
                box-shadow var(--t-base) var(--ease-out),
                background-color var(--t-base) var(--ease-out),
                border-color var(--t-base) var(--ease-out),
                color var(--t-base) var(--ease-out),
                filter var(--t-base) var(--ease-out);
  }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0); }
  .btn svg { flex-shrink: 0; }

  .btn--primary { background: var(--grad-accent); box-shadow: var(--shadow-accent); }
  .btn--primary:hover { filter: brightness(1.08); }

  .btn--accent { background: var(--grad-accent); --btn-fg: #fff; box-shadow: var(--shadow-accent); }
  .btn--accent:hover { filter: brightness(1.08); }

  /* Saja red at full strength is 4.4:1 against white — just under AA — so
     the button uses the deeper step and goes deeper still on hover. The
     brand red itself is kept for marks and rules, where nothing sits on it. */
  .btn--play { background: var(--red-600); --btn-fg: #fff; box-shadow: 0 14px 30px -14px rgb(237 28 36 / 0.55); }
  .btn--play:hover { background: #ab0f16; }

  .btn--outline {
    --btn-bg: transparent;
    --btn-fg: var(--ink-800);
    --btn-line: var(--line-strong);
  }
  .btn--outline:hover { --btn-line: var(--accent-500); --btn-bg: rgb(0 166 81 / 0.1); }

  .btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink-500); }
  .btn--ghost:hover { --btn-fg: var(--ink-900); --btn-bg: var(--ink-100); }

  .btn--light { --btn-bg: #fff; --btn-fg: #0d1512; }
  .btn--on-deep { --btn-bg: rgb(255 255 255 / 0.08); --btn-fg: #fff; --btn-line: rgb(255 255 255 / 0.2); }
  .btn--on-deep:hover { --btn-bg: rgb(255 255 255 / 0.16); }

  .btn--lg { min-block-size: 54px; padding-inline: 1.9rem; font-size: 1rem; }
  .btn--sm { min-block-size: 38px; padding-inline: 1rem; font-size: 0.86rem; }
  .btn--block { inline-size: 100%; }
  .btn[disabled] { opacity: 0.5; pointer-events: none; }
  .btn.is-busy { pointer-events: none; opacity: 0.8; }

  [dir="rtl"] .i-flip { transform: scaleX(-1); }

  /* ----------------------------------------------------------------------
     Chips
     ---------------------------------------------------------------------- */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.8rem;
    border-radius: var(--r-full);
    background: rgb(255 255 255 / 0.06);
    border: 1px solid var(--line);
    color: var(--ink-700);
    font-size: 0.78rem;
    font-weight: 500;
  }
  .chip--accent { background: rgb(0 166 81 / 0.14); border-color: rgb(0 166 81 / 0.35); color: var(--accent-200); }
  .chip--live { background: rgb(237 28 36 / 0.14); border-color: rgb(237 28 36 / 0.35); color: #ff8b8f; }

  /* ----------------------------------------------------------------------
     Header
     ---------------------------------------------------------------------- */
  /* The frosted bar is drawn by a pseudo-element, not by the header itself.
     A `backdrop-filter` on an element makes it the containing block for every
     fixed-position descendant — which would trap the mobile drawer inside a
     74px-tall header instead of letting it cover the viewport. Moving the
     filter onto ::before keeps the look and gives the drawer the viewport
     back. The header's own z-index makes a stacking context, so a negative
     z-index here stays inside it. */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 90;
    border-block-end: 1px solid transparent;
    transition: border-color var(--t-base) var(--ease-out);
  }
  .site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgb(7 10 9 / 0.72);
    backdrop-filter: blur(16px) saturate(1.3);
    transition: background-color var(--t-base) var(--ease-out);
  }
  .site-header.is-stuck::before { background: rgb(7 10 9 / 0.94); }
  .site-header.is-stuck { border-block-end-color: var(--line); }
  @supports not (backdrop-filter: blur(1px)) {
    .site-header::before { background: var(--brand-950); }
  }

  .header-inner {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 1.75rem);
    min-block-size: var(--header-h);
  }

  .logo { display: inline-flex; align-items: center; gap: 0.7rem; flex-shrink: 0; }
  .logo img { block-size: 42px; inline-size: auto; }
  .logo-text { display: grid; line-height: 1.15; }
  .logo-text strong {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink-900);
    letter-spacing: 0.06em;
  }
  .logo-text span { font-size: 0.64rem; color: var(--ink-400); letter-spacing: 0.04em; }
  @media (max-width: 420px) { .logo-text span { display: none; } }

  .nav-links {
    display: flex;
    align-items: center;
    gap: clamp(0.4rem, 1.3vw, 1.4rem);
    margin-inline-start: auto;
  }
  .nav-links > a {
    position: relative;
    padding-block: 0.4rem;
    font-size: 0.92rem;
    color: var(--ink-500);
    transition: color var(--t-fast) var(--ease-out);
  }
  .nav-links > a::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    inline-size: 0;
    block-size: 2px;
    border-radius: 2px;
    background: var(--grad-play);
    transition: inline-size var(--t-base) var(--ease-out);
  }
  .nav-links > a:hover { color: var(--ink-900); }
  .nav-links > a:hover::after,
  .nav-links > a.is-current::after { inline-size: 100%; }

  .header-tools { display: flex; align-items: center; gap: 0.5rem; }

  .lang-switch {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border-radius: var(--r-full);
    border: 1px solid var(--line-strong);
    background: rgb(255 255 255 / 0.04);
  }
  .lang-switch button {
    min-inline-size: 42px;
    min-block-size: 30px;
    padding-inline: 0.55rem;
    border-radius: var(--r-full);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-500);
    transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
  }
  .lang-switch button[aria-pressed="true"] { background: var(--accent-600); color: #fff; }

  .mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    inline-size: 44px;
    block-size: 44px;
    padding-inline: 10px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-strong);
  }
  .mobile-toggle span {
    display: block;
    block-size: 2px;
    border-radius: 2px;
    background: var(--ink-800);
    transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast) linear;
  }
  .mobile-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mobile-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .mobile-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgb(0 0 0 / 0.65);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-base) var(--ease-out), visibility var(--t-base);
  }
  .nav-overlay.is-open { opacity: 1; visibility: visible; }

  @media (max-width: 1020px) {
    .mobile-toggle { display: flex; }
    .nav-links {
      position: fixed;
      inset-block: 0;
      inset-inline-end: 0;
      z-index: 85;
      inline-size: min(88vw, 340px);
      flex-direction: column;
      align-items: stretch;
      gap: 0.2rem;
      padding: calc(var(--header-h) + 1.5rem) 1.5rem 2rem;
      background: var(--brand-900);
      border-inline-start: 1px solid var(--line);
      overflow-y: auto;
      transform: translateX(105%);
      transition: transform var(--t-slow) var(--ease-out);
    }
    [dir="rtl"] .nav-links { transform: translateX(-105%); }
    .nav-links.is-open,
    [dir="rtl"] .nav-links.is-open { transform: translateX(0); }
    .nav-links > a { padding-block: 0.85rem; border-block-end: 1px solid var(--ink-200); font-size: 1rem; }
    .nav-links > a::after { display: none; }
    .nav-links .header-tools { margin-block-start: 1.25rem; flex-wrap: wrap; }
  }

  /* ----------------------------------------------------------------------
     Footer
     ---------------------------------------------------------------------- */
  .site-footer {
    background: var(--brand-950);
    border-block-start: 1px solid var(--line);
    color: var(--ink-500);
    padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: minmax(240px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
    gap: clamp(2rem, 4vw, 3.5rem);
  }
  .footer-brand .logo img { block-size: 60px; }
  .footer-about { margin-block-start: 1.1rem; font-size: 0.9rem; max-inline-size: 42ch; }
  .footer-col h4 {
    margin-block-end: 1rem;
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-400);
  }
  [dir="rtl"] .footer-col h4 { letter-spacing: 0.02em; }
  .footer-col a {
    display: block;
    padding-block: 0.35rem;
    font-size: 0.9rem;
    transition: color var(--t-fast) var(--ease-out), padding-inline-start var(--t-fast) var(--ease-out);
  }
  .footer-col a:hover { color: var(--ink-900); padding-inline-start: 4px; }

  .footer-partner { display: grid; gap: 0.6rem; }
  .footer-partner img { block-size: 46px; inline-size: auto; opacity: 0.85; }

  .footer-bottom {
    margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.85rem;
  }
  .footer-powered {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.9rem;
    border-radius: var(--r-full);
    background: #fff;
  }
  .footer-powered img { block-size: 24px; inline-size: auto; }
  .footer-powered span {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #5c6963;
    text-transform: uppercase;
  }
  [dir="rtl"] .footer-powered span { letter-spacing: 0.02em; text-transform: none; }

  /* ----------------------------------------------------------------------
     Dialog
     ---------------------------------------------------------------------- */
  .modal {
    inline-size: min(100% - 2rem, 980px);
    max-block-size: min(92dvh, 900px);
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    background: var(--surface);
    color: var(--ink-700);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }
  .modal::backdrop { background: rgb(0 0 0 / 0.7); backdrop-filter: blur(5px); }
  .modal--sm { inline-size: min(100% - 2rem, 560px); }

  @media (prefers-reduced-motion: no-preference) {
    .modal, .modal::backdrop {
      transition: opacity var(--t-base) var(--ease-out),
                  translate var(--t-base) var(--ease-out),
                  overlay var(--t-base) allow-discrete,
                  display var(--t-base) allow-discrete;
    }
    .modal { opacity: 0; translate: 0 14px; }
    .modal::backdrop { opacity: 0; }
    .modal[open] { opacity: 1; translate: 0 0; }
    .modal[open]::backdrop { opacity: 1; }
    @starting-style {
      .modal[open] { opacity: 0; translate: 0 14px; }
      .modal[open]::backdrop { opacity: 0; }
    }
  }

  .modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem clamp(1.15rem, 3vw, 1.9rem);
    border-block-end: 1px solid var(--line);
    background: var(--brand-800);
  }
  .modal-head h3 {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1rem;
    font-weight: 600;
  }
  .modal-close {
    display: grid;
    place-items: center;
    inline-size: 40px;
    block-size: 40px;
    border-radius: var(--r-full);
    color: var(--ink-500);
    transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
  }
  .modal-close:hover { background: rgb(255 255 255 / 0.08); color: var(--ink-900); }
  .modal-body { padding: clamp(1.15rem, 3vw, 1.9rem); overflow-y: auto; max-block-size: calc(92dvh - 76px); }

  /* ----------------------------------------------------------------------
     Reveal on scroll
     ---------------------------------------------------------------------- */
  .js-ready .reveal {
    opacity: 0;
    translate: 0 24px;
    transition: opacity var(--t-slow) var(--ease-out), translate var(--t-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .js-ready .reveal.is-in { opacity: 1; translate: 0 0; }
  @media (prefers-reduced-motion: reduce) {
    .js-ready .reveal { opacity: 1; translate: none; transition: none; }
  }

  .scroll-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 3px;
    z-index: 95;
    background: var(--grad-play);
    transform-origin: left center;
    scale: 0 1;
    pointer-events: none;
  }
  [dir="rtl"] .scroll-progress { transform-origin: right center; }

  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      @keyframes tz-progress { to { scale: 1 1; } }
      .scroll-progress {
        animation: tz-progress linear both;
        animation-timeline: scroll(root block);
      }
    }
  }
}

@layer utilities {
  .text-center { text-align: center; }
  .stack-sm > * + * { margin-block-start: 0.5rem; }
  .stack > * + * { margin-block-start: 1rem; }
  .stack-lg > * + * { margin-block-start: 1.75rem; }
  [hidden] { display: none !important; }
}