/* ─────────────────────────────────────────────────────────────────────────────
   Components — reusable pieces. Sections compose these; they do not restyle them.
   ───────────────────────────────────────────────────────────────────────────── */

/* Registered so these angles animate smoothly: the magic button's gradient
   border and the sweep that draws a scribble. */
@property --magic-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@property --scribble-sweep {
  syntax: "<angle>";
  inherits: false;
  initial-value: 360deg;
}

@layer components {

  /* ── Buttons ──────────────────────────────────────────────────────────── */
  .btn {
    --btn-bg: var(--pink-strong);
    --btn-fg: var(--white);
    --btn-border: transparent;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 3.25rem;
    padding: 0 var(--s-6);
    border-radius: var(--r-pill);
    border: 1px solid var(--btn-border);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: 1;
    white-space: nowrap;
    isolation: isolate;
    transition:
      transform var(--dur-base) var(--ease-out),
      background-color var(--dur-fast) linear,
      box-shadow var(--dur-base) var(--ease-out);
  }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0) scale(0.98); transition-duration: var(--dur-fast); }

  .btn--primary { box-shadow: var(--shadow-pink); }
  .btn--primary:hover { --btn-bg: var(--pink-deeper); box-shadow: var(--shadow-pink-hover); }

  .btn--ghost {
    --btn-bg: rgb(255 255 255 / 0.55);
    --btn-fg: var(--ink);
    --btn-border: var(--line-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
  }
  .btn--ghost:hover { --btn-bg: var(--white); --btn-border: var(--pink-border); }

  .btn--sm { min-height: 2.6rem; padding: 0 var(--s-5); font-size: var(--fs-small); }

  .btn__icon { width: 1.15em; height: 1.15em; flex: none; }
  /* Arrows point to the reading direction's end: left in RTL. */
  .btn:hover .btn__icon--arrow { transform: translateX(-3px); }
  .btn__icon--arrow { transition: transform var(--dur-base) var(--ease-out); }

  /* Magic button (sign in): a slowly orbiting gradient border, a light sheen
     that crosses the face every few seconds, and twinkling sparkles. Hover
     speeds everything up and adds a soft halo. */
  .btn--magic {
    --btn-border: transparent;
    overflow: hidden;
    border-width: 1.5px;
    background:
      linear-gradient(var(--btn-bg), var(--btn-bg)) padding-box,
      conic-gradient(from var(--magic-angle), var(--pink-border), var(--pink), var(--pink-deeper), #FF9BBB, var(--pink-border)) border-box;
    animation: magic-orbit 5s linear infinite;
  }
  .btn--magic::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(100deg, transparent 32%, rgb(255 255 255 / 0.5) 48%, rgb(255 255 255 / 0.12) 56%, transparent 68%);
    translate: 120% 0;
    animation: magic-sheen 5.5s var(--ease-out) 1.2s infinite;
    pointer-events: none;
  }
  .btn--magic:hover { box-shadow: 0 0 0 5px rgb(244 63 117 / 0.14), var(--shadow-pink-hover); animation-duration: 1.8s; }
  .btn--magic:hover::after { animation: magic-sheen-once 0.9s var(--ease-out); }

  .btn__sparkles { fill: currentColor; overflow: visible; }
  .btn__sparkles .spark {
    transform-box: fill-box;
    transform-origin: center;
    animation: spark-twinkle 2.8s ease-in-out infinite;
  }
  .btn__sparkles .spark--b { animation-delay: 0.6s; }
  .btn__sparkles .spark--c { animation-delay: 1.2s; }
  .btn--magic:hover .spark { animation-duration: 0.9s; }

  @keyframes magic-orbit { to { --magic-angle: 360deg; } }
  /* The sheen travels from the start of the button (right in RTL) and rests. */
  @keyframes magic-sheen { 0% { translate: 120% 0; } 24%, 100% { translate: -120% 0; } }
  @keyframes magic-sheen-once { from { translate: 120% 0; } to { translate: -120% 0; } }
  @keyframes spark-twinkle {
    0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
    50%      { opacity: 0.35; transform: scale(0.5) rotate(45deg); }
  }

  /* ── Autoplay toggle ──────────────────────────────────────────────────────
     Pause/play for anything that advances on its own. While playing, a ring
     traces the time left before the next step (JS restarts .is-counting). */
  .autoplay-toggle { position: relative; }
  .icon-btn .autoplay-toggle__ring {
    position: absolute;
    inset: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    rotate: -90deg;
    pointer-events: none;
  }
  .autoplay-toggle__ring circle {
    fill: none;
    stroke: var(--pink);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
  }
  .autoplay-toggle.is-counting .autoplay-toggle__ring circle {
    animation: autoplay-count var(--autoplay-ms, 3000ms) linear forwards;
  }
  @keyframes autoplay-count { to { stroke-dashoffset: 0; } }
  .autoplay-toggle__icon--play,
  .autoplay-toggle[data-state="paused"] .autoplay-toggle__icon--pause { display: none; }
  .autoplay-toggle[data-state="paused"] .autoplay-toggle__icon--play { display: block; }

  /* ── Sticker (decorative illustration) ──────────────────────────────────── */
  .sticker { display: block; pointer-events: none; user-select: none; }
  .sticker img { width: 100%; height: auto; }
  @keyframes sticker-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
  }

  /* ── Floral corners: flowers and butterflies framing a surface ────────────
     A pair on opposite corners of a positioned, clipped surface (the founder
     card, the sign-in panel). The artwork is a bottom corner — flowers up one
     side and along the foot; turned half a turn it becomes the opposite top
     corner. The surface decides the size and keeps its content above them. */
  .floral-corner {
    position: absolute;
    width: clamp(10rem, 5rem + 16vw, 20rem);
    pointer-events: none;
    user-select: none;
  }
  .floral-corner img { width: 100%; height: auto; }
  .floral-corner--start { top: 0; inset-inline-start: 0; rotate: 180deg; }
  .floral-corner--end { bottom: 0; inset-inline-end: 0; }

  /* ── Scribble: a hand-drawn loop around a word ───────────────────────────
     The loop draws itself around the word when its heading is revealed
     (a conic mask sweeps a full turn).

     A loop is fitted to its word, not guessed: the word's ink (rendered with
     the page font) and the loop's closed interior (from the artwork) are
     measured, and the smallest loop that holds the ink with 0.06em to spare
     gives the insets below — in em, so the fit holds at every font size.
     Each use sets --scribble-inset (top right bottom left) and the space it
     needs before the previous word, --scribble-gap. */
  .scribble { position: relative; display: inline-block; margin-inline-start: var(--scribble-gap, 0); }
  .scribble__mark {
    position: absolute;
    inset: var(--scribble-inset, -0.3em -0.4em -0.1em -0.4em);
    max-width: none; /* base caps pictures at 100%; the loop must be wider than its word */
    pointer-events: none;
  }
  .scribble__mark img { width: 100%; height: 100%; }
  .is-revealed .scribble__mark {
    mask-image: conic-gradient(from 200deg, #000 var(--scribble-sweep), transparent 0);
    animation: scribble-draw 0.75s var(--ease-out) 0.35s both;
  }
  @keyframes scribble-draw {
    from { --scribble-sweep: 0deg; }
    to   { --scribble-sweep: 360deg; }
  }

  /* ── Highlight: a marker swash behind a phrase ───────────────────────────
     The swash covers the letter bodies (they rise about 0.42em above the
     baseline) and dips just under the baseline, the way a highlighter pen
     crosses a line. Measured for
     El Messiri: the baseline sits --hl-baseline below the top of the line box
     (0.833em at the headings' line height of 1.22). It sweeps in from the
     start of the phrase when its heading is revealed. */
  /* inline-block: its box is its own line box, so the baseline offset holds. */
  .highlight { position: relative; z-index: 0; display: inline-block; white-space: nowrap; }
  .highlight::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: calc(var(--hl-baseline, 0.833em) - 0.44em);
    height: 0.6em;
    inset-inline: -0.16em -0.12em;
    background: var(--highlight-ink, rgb(255 196 211 / 0.92));
    mask: url("../assets/images/marks/highlight.svg") center / 100% 100% no-repeat;
    rotate: -0.8deg;
  }
  .is-revealed .highlight::before {
    animation: highlight-draw 0.8s var(--ease-out) 0.4s both;
  }
  @keyframes highlight-draw {
    from { clip-path: inset(0 0 0 100%); }
    to   { clip-path: inset(0 0 0 0); }
  }

  /* ── Small labels ─────────────────────────────────────────────────────── */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--pink-strong);
  }
  .eyebrow::before {
    content: "";
    width: 1.6rem;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
  }

  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    min-height: 1.75rem;
    padding: 0 var(--s-3);
    border-radius: var(--r-pill);
    background: var(--pink-soft);
    color: var(--pink-strong);
    font-size: var(--fs-caption);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
  }
  .chip--quiet { background: var(--bg-deep); color: var(--ink-2); }
  .chip__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
  }

  /* ── Section heading ──────────────────────────────────────────────────── */
  .section-head {
    position: relative;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--s-8);
    margin-bottom: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem);
  }
  .section-head__text { max-width: 40rem; display: grid; gap: var(--s-3); }
  @media (max-width: 900px) {
    .section-head { flex-direction: column; align-items: start; }
  }
  .section-head__title { font-size: var(--fs-h2); line-height: var(--lh-tight); }
  /* Centred heading: the eyebrow's rule is drawn on both sides of its label. */
  .section-head--center { justify-content: center; text-align: center; }
  .section-head--center .section-head__text { justify-items: center; margin-inline: auto; }
  .section-head--center .eyebrow::after { content: ""; width: 1.6rem; height: 1px; background: currentColor; opacity: 0.55; }
  @media (max-width: 900px) {
    .section-head--center { align-items: center; }
  }
  .section-head__lead { color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.8; }

  .text-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--pink-strong);
    font-weight: 500;
    white-space: nowrap;
    background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px;
    transition: background-size var(--dur-base) var(--ease-out);
    padding-bottom: 2px;
  }
  .text-link:hover { background-size: 100% 1px; background-position: 0 100%; }
  .text-link svg { width: 1.05em; height: 1.05em; transition: transform var(--dur-base) var(--ease-out); }
  .text-link:hover svg { transform: translateX(-3px); }

  /* ── Glass surface ────────────────────────────────────────────────────── */
  .glass {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-inset), var(--shadow-md);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
  }

  /* Pointer-following light for interactive cards. JS writes --mx / --my. */
  .glow { position: relative; overflow: hidden; }
  .glow::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgb(255 255 255 / 0.55), transparent 42%);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
    pointer-events: none;
  }
  .glow:hover::after { opacity: 1; }

  /* ── Icon tile ────────────────────────────────────────────────────────── */
  .icon-tile {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    flex: none;
    border-radius: var(--r-sm);
    background: var(--white);
    color: var(--pink);
    box-shadow: var(--shadow-sm);
  }
  .icon-tile svg { width: 1.5rem; height: 1.5rem; }

  /* ── Course card ──────────────────────────────────────────────────────── */
  .course-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--s-3);
    border-radius: var(--r-lg);
    background: var(--glass-solid);
    border: 1px solid var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-sm);
    transition:
      transform var(--dur-slow) var(--ease-out),
      box-shadow var(--dur-slow) var(--ease-out);
  }
  .course-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-inset), var(--shadow-lg); }

  .course-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: calc(var(--r-lg) - var(--s-3));
    overflow: hidden;
    background: var(--pink-mist);
  }
  .course-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease-out);
  }
  .course-card:hover .course-card__media img { transform: scale(1.035); }

  .course-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding: var(--s-5) var(--s-3) var(--s-3);
  }
  .course-card__title { font-size: var(--fs-h3); }
  .course-card__title a::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-lg); }
  .course-card__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .course-card__desc {
    color: var(--ink-2);
    font-size: var(--fs-small);
    line-height: 1.85;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .course-card__foot {
    margin-top: auto;
    padding-top: var(--s-4);
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--ink-2);
    font-size: var(--fs-small);
  }
  .course-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--pink-strong);
    font-weight: 500;
  }
  .course-card__cta svg { width: 1.05em; height: 1.05em; transition: transform var(--dur-base) var(--ease-out); }
  .course-card:hover .course-card__cta svg { transform: translateX(-4px); }

  /* ── Teacher card ─────────────────────────────────────────────────────── */
  .teacher-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    padding: var(--s-6);
    border-radius: var(--r-md);
    background: var(--glass-solid);
    border: 1px solid var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-sm);
    transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
  }
  .teacher-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-inset), var(--shadow-md); }

  .teacher-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }

  /* Monogram medallion — no stock photo, no emoji: the teacher's initial. */
  .monogram {
    display: grid;
    place-items: center;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--pink-strong);
    background:
      radial-gradient(circle at 30% 25%, var(--white), transparent 60%),
      var(--pink-soft);
    box-shadow: 0 0 0 1px var(--pink-border), 0 0 0 6px var(--pink-mist);
  }
  .teacher-card__name { font-size: 1.3rem; }
  .teacher-card__role { color: var(--ink); font-size: var(--fs-small); font-weight: 500; line-height: 1.8; }
  .teacher-card__bio {
    color: var(--ink-2);
    font-size: var(--fs-small);
    line-height: 1.85;
    padding-top: var(--s-4);
    border-top: 1px solid var(--line);
  }

  /* ── Read more (long texts marked [data-clamp]) ─────────────────────────── */
  [data-clamp].is-clamped:not(.is-expanded) {
    display: -webkit-box;
    -webkit-line-clamp: var(--clamp-lines, 8);
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .read-more { color: var(--pink-strong); font-size: var(--fs-small); font-weight: 500; }
  .read-more:hover { color: var(--pink-deeper); }

  /* ── FAQ item (native <details>) ──────────────────────────────────────── */
  .faq-item {
    border-radius: var(--r-md);
    background: var(--glass-solid);
    border: 1px solid var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-sm);
    transition: box-shadow var(--dur-base) var(--ease-out);
  }
  .faq-item[open] { box-shadow: var(--shadow-inset), var(--shadow-md); }
  .faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-5) var(--s-6);
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    list-style: none;
  }
  .faq-item__icon {
    position: relative;
    width: 2rem; height: 2rem;
    flex: none;
    border-radius: 50%;
    background: var(--pink-soft);
    transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  }
  .faq-item__icon::before, .faq-item__icon::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 10px; height: 1.5px;
    background: var(--pink-strong);
    translate: -50% -50%;
    border-radius: 2px;
    transition: rotate var(--dur-base) var(--ease-out);
  }
  .faq-item__icon::after { rotate: 90deg; }
  .faq-item[open] .faq-item__icon { background: var(--pink); }
  .faq-item[open] .faq-item__icon::before,
  .faq-item[open] .faq-item__icon::after { background: var(--white); }
  .faq-item[open] .faq-item__icon::after { rotate: 0deg; }
  .faq-item__answer { overflow: hidden; }
  /* Height animation where the browser supports animating <details> content;
     elsewhere the item simply opens. Items share name="faq": one open at a time. */
  .faq-item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--dur-slow) var(--ease-out), content-visibility var(--dur-slow) allow-discrete;
  }
  .faq-item[open]::details-content { block-size: auto; }
  .faq-item__answer p { padding: 0 var(--s-6) var(--s-6); color: var(--ink-2); }

  /* ── Icon button (rails) ──────────────────────────────────────────────── */
  .icon-btn {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--white);
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast) linear, opacity var(--dur-base) linear;
  }
  .icon-btn:hover { transform: translateY(-2px); color: var(--pink-strong); }
  .icon-btn:disabled { opacity: 0.35; cursor: default; transform: none; }
  .icon-btn svg { width: 1.2rem; height: 1.2rem; }

  /* ── Breadcrumbs ──────────────────────────────────────────────────────── */
  .breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-small); color: var(--ink-2); }
  .breadcrumbs li { display: inline-flex; align-items: center; gap: var(--s-2); }
  .breadcrumbs li + li::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-inline-start: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    rotate: 45deg; /* a chevron pointing to the reading end */
    opacity: 0.55;
  }
  .breadcrumbs a { transition: color var(--dur-fast) linear; }
  .breadcrumbs a:hover { color: var(--pink-strong); }
  .breadcrumbs [aria-current="page"] { color: var(--ink); font-weight: 500; }

  /* ── Stats (figures with labels) ──────────────────────────────────────── */
  .facts__panel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-radius: var(--r-lg);
    padding: var(--s-4);
  }
  .fact {
    display: grid;
    gap: var(--s-1);
    padding: var(--s-5) var(--s-6);
    text-align: center;
  }
  .fact + .fact { border-inline-start: 1px solid var(--line); }
  .fact__value {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.5rem + 1.8vw, 2.9rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--ink);
  }
  .fact__value .star { color: var(--pink); font-size: 0.6em; vertical-align: 0.35em; margin-inline-start: 0.15em; }
  .fact__label { color: var(--ink-2); font-size: var(--fs-small); }
  @media (max-width: 900px) {
    .facts__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fact:nth-child(3) { border-inline-start: 0; }
    .fact:nth-child(n + 3) { border-top: 1px solid var(--line); }
  }
  @media (max-width: 640px) {
    .fact { padding: var(--s-4) var(--s-3); }
  }

  /* ── Check list ───────────────────────────────────────────────────────── */
  .check-list { display: grid; gap: var(--s-3); }
  .check-list li { display: flex; align-items: flex-start; gap: var(--s-3); }
  .check-list li::before {
    content: "";
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.25rem;
    border-radius: 50%;
    background:
      no-repeat center / 0.95rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CC2759' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.2 4.2L19 7'/%3E%3C/svg%3E"),
      var(--pink-soft);
  }

  /* ── Filter chips & search ─────────────────────────────────────────────── */
  .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 2.6rem;
    padding: 0 var(--s-4);
    border-radius: var(--r-pill);
    border: 1px solid var(--line-strong);
    background: rgb(255 255 255 / 0.6);
    color: var(--ink-2);
    font-size: var(--fs-small);
    font-weight: 500;
    white-space: nowrap;
    transition: background-color var(--dur-base) var(--ease-out), color var(--dur-fast) linear, border-color var(--dur-fast) linear;
  }
  .filter-chip:hover { color: var(--ink); border-color: var(--pink-border); }
  .filter-chip[aria-pressed="true"] { background: var(--pink-strong); border-color: var(--pink-strong); color: var(--white); }
  .filter-chip__count {
    min-width: 1.5rem;
    padding: 0 0.35rem;
    border-radius: var(--r-pill);
    background: rgb(42 30 37 / 0.06);
    font-size: var(--fs-caption);
    text-align: center;
  }
  .filter-chip[aria-pressed="true"] .filter-chip__count { background: rgb(255 255 255 / 0.22); }

  /* ── The academy's mark ─────────────────────────────────────────────────
     In the bar every interface wears (the site's header, the admin's and the
     portals' bars) and the site's footer. */
  .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    transition: font-size var(--dur-slow) var(--ease-out);
  }
  /* The platform's own logo mark. Its artwork has rounded corners of ~22%;
     the radius matches them so the shadow follows the shape. */
  .brand__logo {
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    border-radius: 22%;
    box-shadow: 0 8px 18px -10px rgb(204 39 89 / 0.55);
    transition: width var(--dur-slow) var(--ease-out), height var(--dur-slow) var(--ease-out);
  }

  .search-field { position: relative; display: flex; align-items: center; }
  .search-field > svg {
    position: absolute;
    inset-inline-start: var(--s-4);
    width: 1.15rem;
    height: 1.15rem;
    color: var(--ink-2);
    pointer-events: none;
  }
  .search-field .input { padding-inline-start: calc(var(--s-4) * 2 + 1.15rem); }

  /* ── Form fields ──────────────────────────────────────────────────────── */
  .field { display: grid; gap: var(--s-2); align-content: start; }
  .field__label { font-size: var(--fs-small); font-weight: 500; color: var(--ink); }
  .field__label .req { color: var(--pink-strong); }
  .field__hint { font-size: var(--fs-caption); color: var(--ink-2); }
  .field__error { font-size: var(--fs-caption); color: #B42318; }
  .input, .textarea, .select {
    width: 100%;
    min-height: 3.1rem;
    padding: 0 var(--s-4);
    border-radius: var(--r-sm);
    border: 1px solid var(--line-strong);
    background-color: rgb(255 255 255 / 0.85);
    color: var(--ink);
    font-size: var(--fs-body);
    transition: border-color var(--dur-fast) linear, box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-fast) linear;
  }
  .textarea { min-height: 8.5rem; padding-block: var(--s-3); line-height: 1.8; resize: vertical; }
  .select {
    appearance: none;
    padding-inline-end: calc(var(--s-4) * 2 + 0.8rem);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5A63' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 0.8rem;
    background-position: left var(--s-4) center;
  }
  .input::placeholder, .textarea::placeholder { color: #8F7C86; }
  .input:hover, .textarea:hover, .select:hover { border-color: rgb(42 30 37 / 0.24); }
  .input:focus-visible, .textarea:focus-visible, .select:focus-visible {
    outline: none;
    border-color: var(--pink);
    background-color: var(--white);
    box-shadow: 0 0 0 4px rgb(244 63 117 / 0.14);
  }
  .input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: #D92D20; box-shadow: 0 0 0 4px rgb(217 45 32 / 0.1); }
  .input--ltr { direction: ltr; text-align: right; }

  /* Password with a show/hide toggle (JS wires the button). */
  .input-affix { position: relative; }
  .input-affix .input { padding-inline-end: 3.25rem; }
  .input-affix__btn {
    position: absolute;
    top: 50%;
    inset-inline-end: var(--s-2);
    translate: 0 -50%;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--r-xs);
    color: var(--ink-2);
  }
  .input-affix__btn:hover { color: var(--pink-strong); }
  .input-affix__btn svg { width: 1.2rem; height: 1.2rem; }
  /* A leading icon that names the field (mail, lock). */
  .input-affix__lead {
    position: absolute;
    top: 50%;
    inset-inline-start: var(--s-4);
    translate: 0 -50%;
    width: 1.15rem;
    height: 1.15rem;
    color: var(--ink-2);
    pointer-events: none;
    transition: color var(--dur-fast) linear;
  }
  .input-affix--lead .input { padding-inline-start: calc(var(--s-4) * 2 + 1.15rem); }
  /* An LTR field (e-mail) flips its own inline sides; the icon stays on the right. */
  .input-affix--lead .input--ltr { padding-inline: var(--s-4) calc(var(--s-4) * 2 + 1.15rem); }
  .input-affix--lead:focus-within .input-affix__lead { color: var(--pink-strong); }

  .checkbox { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--fs-small); cursor: pointer; }
  .checkbox input {
    appearance: none;
    flex: none;
    display: grid;
    place-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    border-radius: 0.4rem;
    border: 1.5px solid rgb(42 30 37 / 0.3);
    background: var(--white);
    transition: background-color var(--dur-fast) linear, border-color var(--dur-fast) linear;
  }
  .checkbox input::after {
    content: "";
    width: 0.65rem;
    height: 0.35rem;
    /* A tick is not directional: physical sides keep it a tick in RTL. */
    border-left: 2px solid var(--white);
    border-bottom: 2px solid var(--white);
    rotate: -45deg;
    translate: 0 -1px;
    opacity: 0;
  }
  .checkbox input:checked { background: var(--pink-strong); border-color: var(--pink-strong); }
  .checkbox input:checked::after { opacity: 1; }

  /* ── Notice (inline message) ──────────────────────────────────────────── */
  .notice {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    border-radius: var(--r-sm);
    background: var(--pink-mist);
    border: 1px solid var(--pink-border);
    color: var(--ink);
    font-size: var(--fs-small);
    line-height: 1.8;
  }
  .notice svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; color: var(--pink-strong); }
  .notice[hidden] { display: none; }
  .notice--success { background: var(--ok-soft); border-color: var(--ok-border); color: var(--ok-ink); }
  .notice--success svg { color: var(--ok); }
  .notice--error { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger-ink); }
  .notice--error svg { color: var(--danger); }

  /* ── Prose (long-form text: policies, descriptions) ──────────────────────── */
  .prose { display: grid; gap: var(--s-4); color: var(--ink-2); line-height: 2; max-width: 46rem; }
  .prose strong { color: var(--ink); font-weight: 600; }
  .prose__sub { margin-top: var(--s-3); font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
  .prose__sub:first-child { margin-top: 0; }
  .prose__list { display: grid; gap: var(--s-2); }
  .prose__list li { position: relative; padding-inline-start: var(--s-6); }
  .prose__list li::before {
    content: "";
    position: absolute;
    top: 0.85em;
    inset-inline-start: var(--s-1);
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--pink);
    box-shadow: 0 0 0 3px var(--pink-soft);
  }
  .prose a:not(.btn) { color: var(--pink-strong); font-weight: 500; }
  .prose a:not(.btn):hover { color: var(--pink-deeper); }
  .prose__ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
  .prose__action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
  .prose__status { color: var(--ok-ink); font-size: var(--fs-small); font-weight: 500; }

  /* ── Table ─────────────────────────────────────────────────────────────── */
  .table-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
  .nowrap { white-space: nowrap; }

  /* ── Switch (a checkbox shown as a toggle) ─────────────────────────────── */
  .switch { position: relative; display: inline-flex; flex: none; cursor: pointer; }
  .switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
  .switch__track {
    position: relative;
    width: 2.9rem;
    height: 1.7rem;
    border-radius: var(--r-pill);
    background: rgb(42 30 37 / 0.16);
    transition: background-color var(--dur-base) var(--ease-out);
  }
  .switch__track::after {
    content: "";
    position: absolute;
    top: 0.2rem;
    inset-inline-start: 0.2rem;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 1px 3px rgb(42 30 37 / 0.25);
    transition: translate var(--dur-base) var(--ease-out);
  }
  .switch input:checked + .switch__track { background: var(--pink-strong); }
  /* The knob travels toward the inline end: left in RTL. */
  .switch input:checked + .switch__track::after { translate: -1.2rem 0; }
  .switch input:focus-visible + .switch__track { outline: 2px solid var(--pink); outline-offset: 3px; }
  .switch input:disabled { cursor: not-allowed; }
  .switch input:disabled + .switch__track { opacity: 0.55; }

  /* ── Dialog ────────────────────────────────────────────────────────────── */
  .dialog {
    width: min(34rem, calc(100% - 2 * var(--s-4)));
    max-height: calc(100dvh - 2 * var(--s-4));
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--r-lg);
    background: var(--white);
    color: var(--ink);
    box-shadow: var(--shadow-lg);
    overflow: auto;
  }
  .dialog::backdrop { background: rgb(42 30 37 / 0.36); backdrop-filter: blur(4px); }
  .dialog[open] { animation: dialog-in var(--dur-base) var(--ease-out); }
  @keyframes dialog-in { from { opacity: 0; translate: 0 16px; scale: 0.98; } }
  .dialog__panel { display: grid; gap: var(--s-5); padding: var(--s-6); }
  .dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
  .dialog__title { font-size: var(--fs-h3); }
  .dialog__lead { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.9; }
  .dialog__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-3); padding-top: var(--s-2); }

  @media (prefers-reduced-motion: reduce) {
    .btn--magic, .btn--magic::after, .btn__sparkles .spark, .sticker, .is-revealed .scribble__mark, .is-revealed .highlight::before { animation: none; }
    .btn--magic::after { opacity: 0; }
  }
}