/* ============================================================================
   KALDUNE new-landing · "The whole practice" polish (2026-07-27, founder-
   ordered). CSS-only overrides on the bundle's own #practice DOM — the
   bundle stays byte-identical, the accordions stay bundle-driven.

   COPY, DON'T CREATE: every value is the page's own register — Instrument
   Serif display, the white/0.06–0.14 hairline family (enhance.css plates),
   #e8c98e accent + --color-accent-mute, the 10px/.32em eyebrow voice.

   THE MOVE: the four columns stop being stacks of generic rounded dark
   pills and become ruled index lists — italic serif head over a hairline,
   each practice a hairline-separated row, the + wearing a thin ring so the
   clickable reads as a clickable. The sector card becomes a colophon band
   between two rules. No motion added beyond a one-breath fade on the
   answer (the head <style> already kills all #root animation under
   prefers-reduced-motion).

   SELECTOR KEYS (all bundle-emitted, and the bundle is frozen):
   · #practice — the section id (nav anchors depend on it)
   · #practice .grid > div — the four phase columns (one .grid in section)
   · .glass-card inside .grid — the accordion items
   · button[aria-expanded] / span[aria-hidden] — the bundle's own semantics
   · .glass-card.text-center — the Travel/Leisure sector card
   RTL: logical properties throughout; the i18n layer mirrors the page.
   ========================================================================== */

/* ------------------------------------------------------------ the columns
   gap-2.5 between pills goes to 0 — the rules carry the rhythm now. */
#practice .grid > div {
  gap: 0;
}

/* the italic phase head sits ON the list: rule beneath, in the stronger
   hairline weight, so head and rows read as one composed index */
#practice .grid > div > h3 {
  margin-bottom: 0;
  padding-block-end: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  letter-spacing: -0.01em;
  color: rgba(248, 244, 236, 0.94);
}

/* four hairline-separated columns at the four-column width — the ledger
   look the rest of the page keeps (gated to lg so the 2-col md grid and
   1-col phone stack never inherit a stray rule) */
@media (min-width: 1024px) {
  #practice .grid > div + div {
    border-inline-start: 1px solid rgba(255, 255, 255, 0.06);
    padding-inline-start: 22px;
  }
}

/* phone: the stacked phase groups need more air than gap-6 gives */
@media (max-width: 767px) {
  #practice .grid {
    gap: 36px;
  }
}

/* -------------------------------------------------------------- the rows
   the pill becomes a ruled line: no plate, no radius, no blur — just the
   hairline under each row. Hover warms the rule and paper a breath
   (the bundle's own .35s transition carries it). */
#practice .grid .glass-card {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
#practice .grid .glass-card:hover {
  background: rgba(232, 201, 142, 0.03);
  border-color: rgba(232, 201, 142, 0.26);
  box-shadow: none;
}

/* the row door: flush with the head's left edge (logical, so Arabic
   mirrors), a touch more vertical air than py-3 gave */
#practice .grid .glass-card > button {
  padding-inline: 2px;
  padding-block: 14px;
  text-align: start;
}
#practice .grid .glass-card > button:focus-visible {
  outline: 2px solid var(--color-accent, #e8c98e);
  outline-offset: -2px;
}

/* the title, one step quieter and more set than Tailwind's font-medium
   text-sm default */
#practice .grid .glass-card > button > span:first-child {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.45;
  color: rgba(248, 244, 236, 0.88);
}
#practice .grid .glass-card:hover > button > span:first-child,
#practice .grid .glass-card > button[aria-expanded="true"] > span:first-child {
  color: rgba(248, 244, 236, 1);
}

/* the + wears a thin ring — the affordance the founder asked to read as a
   clickable, in the play-glyph anatomy enhance.css already uses (thin
   ring, quiet glass). The bundle's inline transform still turns + to ×;
   color needs !important because the bundle sets it inline per state. */
#practice .grid .glass-card > button > span[aria-hidden] {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 22px;
  block-size: 22px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 300;
  color: rgba(248, 244, 236, 0.55) !important;
  transition-property: transform, border-color, color;
  transition-duration: 300ms;
}
#practice .grid .glass-card:hover > button > span[aria-hidden] {
  border-color: rgba(232, 201, 142, 0.45);
  color: rgba(248, 244, 236, 0.8) !important;
}
#practice .grid .glass-card > button[aria-expanded="true"] > span[aria-hidden] {
  border-color: rgba(232, 201, 142, 0.55);
  color: #e8c98e !important;
}

/* ------------------------------------------------------------ the answer
   React mounts the copy on open, so a one-breath fade fires on entry and
   collapse stays instant — nothing performed. The head <style> already
   zeroes #root animation under prefers-reduced-motion. */
#practice .grid .glass-card > p {
  padding-inline: 2px;
  padding-block: 2px 18px;
  line-height: 1.7;
  animation: kl-practice-reveal 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes kl-practice-reveal {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
}

/* --------------------------------------------------- the sector colophon
   the Travel/Leisure card stops floating as a glass plate and sits as a
   band between two rules — the register of a colophon, not a widget.
   It is not a door, so the bundle's gold hover chrome goes quiet. */
#practice .mt-10 {
  margin-top: 56px;
}
#practice .mt-10 > p.uppercase {
  color: rgba(248, 244, 236, 0.66);
  margin-bottom: 18px;
}
#practice .glass-card.text-center,
#practice .glass-card.text-center:hover {
  background: transparent;
  border: 0;
  border-block: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  padding-block: 28px;
}
#practice .glass-card.text-center h3 {
  letter-spacing: -0.01em;
}
#practice .glass-card.text-center p {
  max-width: 46rem;
  margin-inline: auto;
  color: rgba(166, 166, 171, 0.95);
}