/* ==========================================================================
   lebaneselawstudy.com
   The Lebanese family's own design system (lebanesesarl.com, byte-identical
   styles.css across the four formation sites, matched in Lebanese Businesses
   and Lebanese Legislation), reused as the base. Only the --- Study: ---
   section at the bottom is new, in the family's own idiom (panels, --radius,
   --lift shadows, pills), for components the marketing sites never needed:
   flashcards, questions, cases, progress, exam.
   Arabic-first, fully RTL via dir="rtl" + logical CSS properties. Fonts
   self-hosted (assets/fonts/): Inter (Latin), IBM Plex Sans Arabic (Arabic
   UI), Noto Naskh Arabic (verbatim law text, the family's --font-law).
   ========================================================================== */

/* --- Fonts, self-hosted (CSP: font-src 'self' only) --------------------- */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/assets/fonts/IBMPlexSansArabic-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/assets/fonts/IBMPlexSansArabic-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/assets/fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2");
  font-weight: 600 700;
  font-display: swap;
}
@font-face {
  font-family: "Noto Naskh Arabic";
  src: url("/assets/fonts/NotoNaskhArabic-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

/* --- Tokens ------------------------------------------------------------- */

:root {
  --canvas:      #ffffff;
  --surface:     #f6f6f7;
  --panel:       #f1f1f3;
  --panel-hi:    #fafafb;
  --divider:     rgba(255, 255, 255, 0.85);
  --lift:        0 1px 2px rgba(17, 17, 19, 0.04), 0 10px 28px -14px rgba(17, 17, 19, 0.16);
  --lift-hi:     0 2px 4px rgba(17, 17, 19, 0.05), 0 18px 40px -16px rgba(17, 17, 19, 0.22);
  --surface-2:   #101010;
  --ink:         #111113;
  --ink-soft:    #1d1d1f;
  --muted:       #6e6e73;
  --muted-2:     #8a8a8f;
  --line:        rgba(0, 0, 0, 0.09);
  --line-strong: rgba(0, 0, 0, 0.16);
  --accent:      #2b5c97;
  --accent-ink:  #ffffff;
  --accent-soft: #e4ecf5;
  --on-dark:     #f5f5f7;
  --on-dark-mut: #8e8e93;
  --ok:          #1f7a4d;
  --ok-soft:     #e3f0e8;
  --off:         #b3261e;
  --off-soft:    #f6e4e2;

  --shell: 1120px;
  --gutter: clamp(20px, 5vw, 40px);
  --section-y: clamp(80px, 11vw, 168px);
  --radius: 16px;
  --radius-lg: 26px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
    Arial, sans-serif;
  --font-ar: "IBM Plex Sans Arabic", var(--font);
  --font-law: "Noto Naskh Arabic", "IBM Plex Sans Arabic", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  color-scheme: light;
}

/* Manual override (assets/theme.js sets data-theme on <html>) always wins
   over the OS preference below it; prefers-color-scheme only applies while
   no choice has been made ([data-theme] is absent, the :not() guard). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas:      #000000;
    --surface:     #0c0c0d;
    --panel:       #141417;
    --panel-hi:    #1e1e23;
    --divider:     rgba(255, 255, 255, 0.07);
    --lift:        0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 28px -14px rgba(0, 0, 0, 0.7);
    --lift-hi:     0 2px 4px rgba(0, 0, 0, 0.5), 0 18px 40px -16px rgba(0, 0, 0, 0.8);
    --surface-2:   #101012;
    --ink:         #f5f5f7;
    --ink-soft:    #ededf0;
    --muted:       #8e8e93;
    --muted-2:     #6e6e73;
    --line:        rgba(255, 255, 255, 0.12);
    --line-strong: rgba(255, 255, 255, 0.22);
    --accent:      #8ab4e8;
    --accent-ink:  #0a1726;
    --accent-soft: #1b2733;
    --ok:          #6fd3a0;
    --ok-soft:     #163626;
    --off:         #ff8a80;
    --off-soft:    #3a2220;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --canvas:      #000000;
  --surface:     #0c0c0d;
  --panel:       #141417;
  --panel-hi:    #1e1e23;
  --divider:     rgba(255, 255, 255, 0.07);
  --lift:        0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 28px -14px rgba(0, 0, 0, 0.7);
  --lift-hi:     0 2px 4px rgba(0, 0, 0, 0.5), 0 18px 40px -16px rgba(0, 0, 0, 0.8);
  --surface-2:   #101012;
  --ink:         #f5f5f7;
  --ink-soft:    #ededf0;
  --muted:       #8e8e93;
  --muted-2:     #6e6e73;
  --line:        rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.22);
  --accent:      #8ab4e8;
  --accent-ink:  #0a1726;
  --accent-soft: #1b2733;
  --ok:          #6fd3a0;
  --ok-soft:     #163626;
  --off:         #ff8a80;
  --off-soft:    #3a2220;
  color-scheme: dark;
}

/* --- Reset -------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv05" 1, "cv11" 1, "ss01" 1;
  overflow-x: hidden;
}

/* Arabic edition: IBM Plex Sans Arabic for UI, no Latin letter-spacing (it
   reads as broken tracking on Arabic glyphs), right to left throughout.
   Scoped to :lang(ar) rather than [dir="rtl"] alone so an embedded Latin
   phrase inside an Arabic page (a <bdi>, a citation) keeps Inter. */
html[dir="rtl"] body,
:lang(ar) { font-family: var(--font-ar); letter-spacing: 0; }
html[dir="rtl"] .display,
html[dir="rtl"] h2.title,
html[dir="rtl"] h3 { font-family: var(--font-ar); letter-spacing: 0; }
/* The verbatim law text: a naskh book face, never the UI sans. */
.art__ar, [lang="ar"].law-text { font-family: var(--font-law); }

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Type --------------------------------------------------------------- */

.display {
  font-size: clamp(2.7rem, 7.1vw, 5.25rem);
  line-height: 1.03;
  font-weight: 600;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.display em { font-style: normal; color: var(--accent); }

h2.title {
  font-size: clamp(1.95rem, 4.4vw, 3.15rem);
  line-height: 1.07;
  font-weight: 600;
  letter-spacing: -0.038em;
  text-wrap: balance;
}

h3 {
  font-size: 1.1875rem;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.022em;
}

.lead {
  font-size: clamp(1.125rem, 1.75vw, 1.4375rem);
  line-height: 1.5;
  letter-spacing: -0.016em;
  color: var(--muted);
  font-weight: 400;
  text-wrap: pretty;
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}

.muted { color: var(--muted); }
.small { font-size: 0.9375rem; line-height: 1.6; }
.tiny  { font-size: 0.8125rem; line-height: 1.55; color: var(--muted-2); letter-spacing: -0.005em; }

a { color: inherit; text-decoration: none; }

.link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  padding-bottom: 1px;
  transition: border-color 0.25s var(--ease);
}
.link:hover { border-bottom-color: var(--accent); }

/* --- Layout ------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(60px, 8vw, 110px); }
/* Tone now comes from the panels, so sections stay on one canvas. */
.section--surface { background: var(--canvas); }
.section--rule { border-top: 1px solid var(--line); }

.measure { max-width: 46ch; }
.measure-wide { max-width: 62ch; }

.head { margin-bottom: clamp(48px, 6vw, 80px); }

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding-inline: 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.014em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease),
    border-color 0.25s var(--ease), opacity 0.25s var(--ease);
}

.btn:active { transform: scale(0.975); }
/* Overridden by --ms once the magnetic binding is applied. */

.btn--primary {
  background: var(--ink);
  color: var(--canvas);
}
.btn--primary:hover { opacity: 0.84; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--ink); }

.btn--sm { height: 40px; padding-inline: 20px; font-size: 0.9375rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}

.arrow { transition: transform 0.3s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* --- Nav ---------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: 60px;
  display: flex;
  align-items: center;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease),
    backdrop-filter 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}

.nav[data-stuck="true"] {
  background: color-mix(in srgb, var(--canvas) 72%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--line);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  gap: 24px;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.wordmark::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
  transform: translateY(-1px) rotate(45deg);
  flex: none;
}

.wordmark span { font-weight: 400; color: var(--muted); }

.nav__links {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.875rem;
  letter-spacing: -0.008em;
  color: var(--muted);
}

/* Padding rather than margin: it grows the hit box the cursor can hold onto
   without shifting anything on screen. The gap above absorbs it. */
.nav__links a { padding: 11px 8px; }

.nav__links a { transition: color 0.2s var(--ease); }
.nav__links a:hover { color: var(--ink); }

/* Guides sits on the right with the CTA because it leaves the page, while
   Services and About are jumps within it. */
.nav__end {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
}

.nav__out {
  font-size: 0.875rem;
  letter-spacing: -0.008em;
  color: var(--muted);
  white-space: nowrap;
  padding: 11px 8px;
  transition: color 0.2s var(--ease);
}

.nav__out:hover { color: var(--ink); }

@media (max-width: 860px) {
  .nav__links { display: none; }
}

/* Guides was hidden below 520px, which took the only route into the reference
   section off every phone. There is room for it: at 520px the bar was mostly
   empty between the wordmark and the CTA. It stays now, and the padding that
   widens its hit box is what gives way first when the bar gets tight. */
@media (max-width: 460px) {
  .nav__out { padding-inline: 0; }
  .nav__end { gap: 14px; }
}

/* The lockup runs longer than hobeichlegal's short wordmark (two words
   plus "by taktek" vs one), so on a narrow phone the bar cannot also hold
   the preview pill without pushing the theme toggle and the menu button
   off screen (measured: nav__inner scrollWidth 462px at a 390px viewport).
   The pill gives way first: the language switch, the toggle and the menu
   are the only way to reach the other edition, dark mode and the rest of
   the site from here, so they stay; the preview notice does not. */
@media (max-width: 640px) {
  .nav__end > .preview-badge { display: none; }
}
/* Shown instead, inside the opened mobile menu, so the notice is not lost,
   only moved out of the bar that has no room for it. */
.mobile-nav__badge { display: none; margin-block: 10px 4px; }
@media (max-width: 640px) {
  .mobile-nav__badge { display: inline-flex; }
}

/* --- Sub navigation ------------------------------------------------------
   In-page anchors belong to the page, not to the site, so they get their own
   bar. It sits under the fixed header and sticks there.
   ------------------------------------------------------------------------ */

.subnav {
  position: sticky;
  top: 60px;
  z-index: 90;
  margin-top: 60px;
  background: color-mix(in srgb, var(--canvas) 78%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}

.subnav__inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: 50px;
}

.subnav__title {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
  flex: none;
}

.subnav__links {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  font-size: 0.875rem;
  letter-spacing: -0.008em;
  color: var(--muted);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-inline-start: auto;
}

.subnav__links::-webkit-scrollbar { display: none; }
.subnav__links a { white-space: nowrap; padding: 14px 0; transition: color 0.2s var(--ease); }
.subnav__links a:hover { color: var(--accent); }

/* The bar already provides the gap the hero was reserving for the header. */
.has-subnav .hero { padding-top: clamp(56px, 7vw, 96px); }

@media (max-width: 620px) {
  .subnav__title { display: none; }
  .subnav__links { margin-inline-start: 0; }
}

/* --- Hero --------------------------------------------------------------- */

.hero {
  padding-top: clamp(130px, 19vw, 210px);
  padding-bottom: clamp(70px, 10vw, 120px);
}

.hero .eyebrow { margin-bottom: 14px; }

.stats-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 32px;
  padding-inline: 12px 14px;
  border-radius: 999px;
  background: var(--panel);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}

.hero .display { margin-top: 0; }

.hero .lead { margin-top: 28px; max-width: 34ch; }

.hero__note {
  margin-top: 30px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--muted-2);
  font-size: 0.8125rem;
  letter-spacing: -0.004em;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* Keeps the dot on the first line when the note wraps on narrow screens. */
.hero__note .dot { margin-top: 7px; }

/* --- Ledger (hero figure / tax comparison) ------------------------------ */

.ledger {
  margin-top: clamp(64px, 9vw, 104px);
  border: 0;
  box-shadow: var(--lift);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--panel);
}

.ledger__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 26px clamp(22px, 3.4vw, 40px);
  border-bottom: 1px solid var(--divider);
}

.ledger__row:last-child { border-bottom: 0; }

.ledger__row--head {
  background: transparent;
  padding-block: 16px;
}

.ledger__label { font-size: 1.0625rem; letter-spacing: -0.014em; }
.ledger__label b { font-weight: 600; }
.ledger__sub { display: block; color: var(--muted); font-size: 0.875rem; margin-top: 3px; }

.ledger__val {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* The USD estimate rides alongside the LBP figure, never below it. */
.ledger__val i {
  font-style: normal;
  font-weight: 500;
  font-size: 0.62em;
  letter-spacing: -0.02em;
  color: var(--muted);
  margin-left: 2px;
}

.ledger__val--zero { color: var(--accent); }
.ledger__val--strike { color: var(--muted-2); text-decoration: line-through; text-decoration-thickness: 1.5px; }

.ledger__foot {
  padding: 20px clamp(22px, 3.4vw, 40px);
  border-top: 1px solid var(--divider);
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* --- Stat strip --------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(32px, 4vw, 56px) 32px;
}

.stat__n {
  font-size: clamp(2.2rem, 4.4vw, 3.1rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat__t { margin-top: 12px; color: var(--muted); font-size: 0.9375rem; line-height: 1.5; max-width: 26ch; }

/* --- Cards / grids ------------------------------------------------------ */

.grid {
  display: grid;
  gap: clamp(24px, 3vw, 36px);
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* Four partner services. auto-fit leaves the fourth stranded on its own row at
   desktop, so this set gets explicit tracks: two by two, then four across. */
@media (min-width: 700px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  border: 0;
  border-radius: var(--radius);
  padding: clamp(26px, 3vw, 34px);
  background: var(--panel);
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 0.9375rem; line-height: 1.6; }

.card .card__num {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--accent);
  margin-bottom: 18px;
}

/* --- Linked cards -------------------------------------------------------- */

.card--link {
  display: flex;
  flex-direction: column;
  color: inherit;
}

/* Lifted off the page: lighter, with the shadow doing the work a border used
   to do. No colour change beyond the lift itself. */
.card--link:hover {
  background: var(--panel-hi);
  box-shadow: var(--lift-hi);
}

.card--link:hover p { color: var(--ink-soft); }

/* Same swell the buttons get. */
.card--link[data-magnetic]:hover { --ms: 1.02; }
.card--link[data-magnetic]:active { --ms: 0.99; }

.card__go {
  margin-top: auto;
  padding-top: 22px;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--accent) !important;
}

.card--link:hover .arrow { transform: translateX(3px); }

/* --- Comparison ----------------------------------------------------------
   Four columns is more than a phone can hold legibly, so below the breakpoint
   the table scrolls sideways rather than shrinking into unreadability.
   ------------------------------------------------------------------------ */

.compare {
  border: 0;
  box-shadow: var(--lift);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--panel);
}

.compare__row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr;
  min-width: 660px;
  gap: 20px;
  align-items: start;
  padding: 18px clamp(20px, 3vw, 32px);
  border-bottom: 1px solid var(--divider);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.compare__row:last-child { border-bottom: 0; }

.compare__row--head {
  background: transparent;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 1rem;
  position: sticky;
  top: 0;
}

.compare__row--head a { border-bottom: 1px solid transparent; transition: border-color 0.25s var(--ease); }
.compare__row--head a:hover { border-bottom-color: var(--accent); color: var(--accent); }

.compare__k { color: var(--muted); }
.compare__row b { font-weight: 600; color: var(--accent); }
.compare .tiny { display: block; margin-top: 2px; }

/* --- Checklist ---------------------------------------------------------- */

.checklist { display: grid; gap: 2px; }

.checklist li {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: start;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
  letter-spacing: -0.012em;
}

.checklist li:last-child { border-bottom: 0; }
.checklist li span { color: var(--muted); display: block; font-size: 0.875rem; margin-top: 3px; }

.tick,
.cross {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.65;
}
.tick { color: var(--accent); }
.cross { color: var(--muted-2); font-weight: 500; font-size: 1.05rem; }

/* --- Two-column split --------------------------------------------------- */

.split {
  display: grid;
  gap: clamp(40px, 6vw, 80px);
  grid-template-columns: 1fr;
}

@media (min-width: 880px) {
  .split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); align-items: start; }
  .split--sticky > :first-child { position: sticky; top: 112px; }
  /* Pricing leads with the card, so it takes the larger column. */
  .split--lead { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
}

/* --- Steps -------------------------------------------------------------- */

.steps { counter-reset: step; border-top: 1px solid var(--line); }

.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: clamp(16px, 3vw, 40px);
  align-items: start;
  padding: clamp(28px, 3.4vw, 42px) 0;
  border-bottom: 1px solid var(--line);
}

.step::before {
  content: "0" counter(step);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
  padding-top: 5px;
}

.step h3 { margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 0.9375rem; max-width: 56ch; }

.step__when {
  font-size: 0.8125rem;
  color: var(--muted-2);
  white-space: nowrap;
  padding-top: 5px;
  text-align: right;
}

@media (max-width: 700px) {
  .step { grid-template-columns: 40px minmax(0, 1fr); }
  .step__when { grid-column: 2; text-align: left; padding-top: 10px; }
}

/* --- Pricing ------------------------------------------------------------ */

.price {
  border: 0;
  box-shadow: var(--lift);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--panel);
}

.price__top { padding: clamp(32px, 4vw, 48px); }

.price__amount {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.price__amount b {
  font-size: clamp(3rem, 7.5vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.price__amount i {
  font-style: normal;
  color: var(--muted);
  font-size: 1.0625rem;
  letter-spacing: -0.014em;
}

.price__breakdown { border-top: 1px solid var(--divider); }

.price__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 16px clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--divider);
  font-size: 0.9375rem;
}

.price__line:last-child { border-bottom: 0; }
.price__line span:first-child { color: var(--muted); }
.price__line span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }

.price__foot {
  padding: clamp(24px, 3vw, 32px) clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--divider);
}

.price__foot .price__line {
  padding: 11px 0;
  border: 0;
  gap: 24px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding-inline: 13px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--muted);
  margin-bottom: 22px;
}

/* --- FAQ ---------------------------------------------------------------- */

/* Separate tiles rather than rows divided by hairlines, so each one is a
   target the cursor can land on and visibly take. */
.faq { display: grid; gap: 8px; }

.faq__item {
  background: var(--panel);
  border-radius: var(--radius);
  padding-inline: clamp(18px, 2.6vw, 26px);
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.faq__item:hover,
.faq__item[data-open="true"] {
  background: var(--panel-hi);
  box-shadow: var(--lift-hi);
}

.faq__item[data-magnetic]:hover { --ms: 1.008; }

.faq__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  background: none;
  border: 0;
  padding: 26px 0;
  text-align: left;
  cursor: pointer;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.45;
  transition: color 0.2s var(--ease);
}

.faq__q:hover { color: var(--accent); }

.faq__icon {
  flex: none;
  width: 14px;
  height: 14px;
  position: relative;
  margin-top: 6px;
  color: var(--muted);
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 1px;
  inset: 50% 0 auto 0;
  height: 1.5px;
  transform: translateY(-50%);
  transition: transform 0.35s var(--ease), opacity 0.25s var(--ease);
}

.faq__icon::after { transform: translateY(-50%) rotate(90deg); }

.faq__item[data-open="true"] .faq__icon::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.faq__item[data-open="true"] .faq__q { color: var(--accent); }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s var(--ease);
}

.faq__item[data-open="true"] .faq__a { grid-template-rows: 1fr; }

.faq__a > div { overflow: hidden; }

.faq__a p {
  color: var(--muted);
  font-size: 0.9875rem;
  line-height: 1.65;
  max-width: 68ch;
  padding-bottom: 28px;
}

.faq__a p + p { padding-top: 14px; }

/* --- Reference contents --------------------------------------------------- */

/* --- Bio ---------------------------------------------------------------- */

.bio__name {
  font-size: clamp(1.75rem, 3.4vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.038em;
  line-height: 1.1;
}

.bio__role {
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-top: 14px;
}

.bio__body { margin-top: 26px; display: grid; gap: 16px; color: var(--muted); max-width: 58ch; }

/* --- CTA band ----------------------------------------------------------- */

.band {
  background: var(--surface-2);
  color: var(--on-dark);
  border-radius: var(--radius-lg);
  padding: clamp(48px, 7vw, 92px) clamp(28px, 5vw, 76px);
  text-align: center;
}

.band .title { color: var(--on-dark); }
.band .lead { color: var(--on-dark-mut); margin-inline: auto; margin-top: 22px; max-width: 44ch; }
.band .btn-row { justify-content: center; }
.band .btn--primary { background: var(--on-dark); color: #000; }
.band .btn--ghost { color: var(--on-dark); border-color: rgba(255, 255, 255, 0.25); }
.band .btn--ghost:hover { border-color: var(--on-dark); }
.band .tiny { color: rgba(255, 255, 255, 0.45); margin-top: 26px; }

/* --- Footer ------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(48px, 6vw, 72px) 44px;
}

.footer__top {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
  padding-bottom: 44px;
}

@media (min-width: 620px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .footer__top { grid-template-columns: 1.4fr 1fr 1fr; }
  /* The service pages carry a Contact column that the guide pages do not, so
     the track count follows the markup rather than being stated twice. */
  .footer__top:has(> :nth-child(4)) { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

.footer__heading {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.footer ul { display: grid; gap: 2px; font-size: 0.9375rem; }
.footer ul a {
  display: inline-block;
  padding: 5px 8px;
  margin-inline-start: -8px;
  color: var(--muted);
  transition: color 0.2s var(--ease);
}
.footer ul a:hover { color: var(--ink); }

.footer__legal {
  border-top: 1px solid var(--line);
  padding-top: 28px;
  display: grid;
  gap: 16px;
}

.footer__legal p { max-width: 90ch; }

/* --- Reveal ------------------------------------------------------------- */

/* Hidden only once JS has confirmed it can animate. Without JS the class is
   never added and every section renders normally.

   The entrance offset travels in --ry rather than in `transform` directly, so
   it can be composed with the cursor field's translate further down. Setting
   `transform` here outright is what previously stopped magnetic cards moving:
   this rule outranks [data-magnetic], so its `transform: none` won. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: var(--d, 0ms);
}

.js [data-reveal].is-in { opacity: 1; transform: none; }

/* A magnetic element cannot also have its transform driven by the reveal, so
   it fades in without the slide and leaves transform to the cursor field.
   Declared at equal specificity after the rules above, and repeated for .is-in
   so neither state hands the transform back. */
.js [data-reveal][data-magnetic],
.js [data-reveal][data-magnetic].is-in {
  transform: translate(var(--mx, 0px), var(--my, 0px)) scale(var(--ms, 1));
  transition: opacity 0.85s var(--ease), transform 0.22s var(--ease),
    background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal][data-magnetic] { opacity: 1; transform: none; transition: none; }
  .btn, .card, .arrow { transition: none !important; }
}

/* --- Magnetic targets ---------------------------------------------------
   Set from script: --mx/--my are the pull toward the pointer, --ms the hover
   swell. Declared last so this transform composes over the component rules.
   ------------------------------------------------------------------------ */

[data-magnetic] {
  transform: translate(var(--mx, 0px), var(--my, 0px)) scale(var(--ms, 1));
  transition: transform 0.22s var(--ease), color 0.2s var(--ease),
    background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  will-change: transform;
}

.btn[data-magnetic]:hover { --ms: 1.03; }
.btn[data-magnetic]:active { --ms: 0.97; }

@media (prefers-reduced-motion: reduce) {
  [data-magnetic] { transform: none; transition: none; }
}

/* --- Prose (terms page) ------------------------------------------------- */

.prose { max-width: 70ch; }
.prose h2 {
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-top: 48px;
  margin-bottom: 14px;
}
.prose h2:first-of-type { margin-top: 0; }
.prose p, .prose li { color: var(--muted); font-size: 1rem; line-height: 1.7; }
.prose p + p { margin-top: 14px; }
.prose ul { margin-top: 12px; display: grid; gap: 8px; }
.prose ul li { padding-inline-start: 20px; position: relative; }
.prose ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line-strong);
}


/* --- Small screens -------------------------------------------------------
   The layout already reflows through its own clamps and auto-fit grids; what
   follows fixes the things that reflow alone does not.
   ------------------------------------------------------------------------ */

@media (max-width: 560px) {
  /* Ragged part-width buttons read as a mistake stacked on top of each other,
     and full width doubles the tap area at the same time. */
  .btn-row { gap: 10px; }
  .btn-row .btn { width: 100%; }

  /* Priced rows put a nowrap figure beside a label. In one column that
     squeezes the label into a four-line sliver, so stack them instead. */
  .price__line {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    padding-block: 14px;
  }
  .price__line span:last-child { font-size: 1rem; }

  /* Apple and WCAG both want 44px of touchable height. */
  .btn--sm { height: 44px; }
  .footer ul { gap: 0; }
  .footer ul a { padding: 11px 8px; }
  .nav__inner { gap: 12px; }
  .wordmark { padding-block: 9px; }

  /* The caption alongside the ledger heading squeezes it to a sliver in one
     column, so it drops underneath instead. */
  .ledger__row--head {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

@media (max-width: 420px) {
  /* A nowrap figure beside a label leaves the label four words wide at this
     size, so the ledger drops to one column and the figure sits underneath. */
  .ledger__row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .ledger__val {
    text-align: left;
    font-size: 1.6rem;
  }
}

@media (max-width: 380px) {
  /* Below this the nav wordmark and the CTA start competing for the same
     row. Dropping the lighter half of the wordmark buys back the space. */
  .nav .wordmark span { display: none; }
}

/* --- Reference pages -----------------------------------------------------
   Long-form guide layout. Optimised to be read by a person and parsed by a
   machine: strict heading order, real tables, a stated answer before the
   detail, and visible sources.
   ------------------------------------------------------------------------ */

.doc { max-width: 74ch; }

.doc h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-top: 64px;
  margin-bottom: 16px;
  scroll-margin-top: 90px;
}

.doc h3 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 36px;
  margin-bottom: 10px;
}

.doc p { color: var(--muted); line-height: 1.7; }
.doc p + p { margin-top: 14px; }
.doc h2 + p, .doc h3 + p { margin-top: 0; }

/* Lists need space under them too, or the next paragraph butts against
   the final bullet. */
.doc ul, .doc ol { margin-block: 14px 20px; display: grid; gap: 9px; }
.doc li { color: var(--muted); line-height: 1.65; padding-inline-start: 20px; position: relative; }
.doc ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line-strong);
}
.doc ol { counter-reset: n; }
.doc ol li { counter-increment: n; }
.doc ol li::before {
  content: counter(n) ".";
  position: absolute;
  inset-inline-start: 0;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
}
.doc strong, .doc b { color: var(--ink); font-weight: 600; }

/* The stated answer, first thing on the page and first thing a model reads. */
.answer {
  border-inline-start: 2px solid var(--accent);
  padding: 4px 0 4px 22px;
  padding-inline: 22px 0;
  margin: 32px 0 8px;
}
.answer p {
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.6;
  letter-spacing: -0.012em;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding-top: 20px;
  margin-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--muted-2);
}

/* --- Reference tables ---------------------------------------------------- */

.tablewrap {
  margin-top: 22px;
  border: 0;
  box-shadow: var(--lift);
  border-radius: var(--radius);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--panel);
}

table.ref {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

table.ref th,
table.ref td {
  text-align: left;
  vertical-align: top;
  padding: 13px clamp(14px, 2vw, 20px);
  border-bottom: 1px solid var(--divider);
  line-height: 1.5;
}

table.ref thead th {
  background: transparent;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  white-space: nowrap;
}

table.ref tbody th {
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
}

table.ref td { color: var(--ink); }
table.ref tr:last-child th,
table.ref tr:last-child td { border-bottom: 0; }
table.ref .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.ref .ar {
  font-size: 1.05rem;
  direction: rtl;
  unicode-bidi: isolate;
  white-space: nowrap;
}

/* --- Contents ------------------------------------------------------------ */

.toc {
  border: 0;
  border-radius: var(--radius);
  padding: 22px clamp(20px, 3vw, 28px);
  margin-top: 40px;
  background: var(--panel);
}
.toc h2 {
  font-size: 0.75rem !important;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 14px !important;
}
.toc ol { display: grid; gap: 8px; margin: 0; counter-reset: t; }
/* .doc ol li::before outranks a bare .toc li::before, so its number was being
   drawn at left:0 on top of text with no indent. Match the specificity and
   give the number somewhere to sit. */
.toc ol li { padding-inline-start: 26px; counter-increment: t; }
.toc ol li::before {
  content: counter(t) ".";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  line-height: 1.7;
}
.toc a { color: var(--muted); font-size: 0.9375rem; }
.toc a:hover { color: var(--accent); }

/* --- Sources ------------------------------------------------------------- */

.sources { margin-top: 20px; }
.sources li { font-size: 0.875rem; color: var(--muted-2); }


/* --- Co-brand lockup -----------------------------------------------------
   The site's own name, and who operates it underneath: "by Taktek". Who
   does the legal work is said in the nav, the hero and the footer.
   ------------------------------------------------------------------------ */

.lockup { display: inline-grid; gap: 3px; line-height: 1.08; padding-block: 8px; }

.lockup__firm {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.lockup__firm span { font-weight: 400; color: var(--muted); }

.lockup__by {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: -0.006em;
  color: var(--muted-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Lower case, set as written. The wide tracking that made the uppercase form
   read is wrong for it, so it goes. */
.lockup__by b { color: var(--accent); font-weight: 600; }
.lockup__firm, .lockup__by { white-space: nowrap; }
/* On a narrow phone the bar cannot hold the lockup, the our partner law firm link
   and the button. The link gives way: the page names our partner law firm again
   within the first screen. */
@media (max-width: 480px) { .nav .nav__out { display: none; } }

.footer .lockup__firm { color: var(--ink); }



/* Out of the way until it is tabbed to, which is the only moment it helps. */
.skip { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 200; }
.skip:focus {
  inset-inline-start: 12px;
  top: 12px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--canvas);
  font-size: 0.875rem;
  font-weight: 500;
}


/* --- Two packages --------------------------------------------------------
   Standard is what nearly everyone buys. Bespoke is the formation that carries
   a licence, a consulate or a condition of its own, which used to be a caveat
   under the price and is a thing you can buy now.
   ------------------------------------------------------------------------ */

.tiers {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  grid-template-columns: 1fr;
  margin-bottom: clamp(22px, 2.6vw, 32px);
}
@media (min-width: 880px) { .tiers { grid-template-columns: 1fr 1fr; } }

.tier {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.4vw, 40px);
  border-radius: 20px;
  background: var(--panel);
}
.tier--alt { background: var(--panel-hi); border: 1px solid var(--line); }

.tier__name {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

/* The two prices mean different things, so each says which it is on the line
   above rather than one of them wearing an inline qualifier the other lacks.
   That also lets both numbers start at the same x. */
.tier__label {
  font-size: 0.9375rem;
  color: var(--muted);
  margin-bottom: 6px;
}

.tier__price {
  font-size: clamp(2rem, 4.4vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}
.tier__sub { margin-top: 10px; font-size: 0.9375rem; color: var(--muted); line-height: 1.55; }
.tier .ticks { margin-top: 20px; }
.tier .btn { margin-top: 26px; align-self: flex-start; }


/* --- Tick lists ----------------------------------------------------------
   The global reset strips list markers and these never got their own, so an
   "It works if" list and an "It does not work if" list have been rendering
   identically since launch. The mark is the entire point of the pair.
   ------------------------------------------------------------------------ */

.ticks { display: grid; gap: 10px; }

.ticks li {
  position: relative;
  padding-inline-start: 26px;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.ticks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 3px;
  top: 0.36em;
  width: 10px;
  height: 5px;
  border-inline-start: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* A rule, not a cross. These are things the structure does not do, which is a
   statement of fact rather than an error. */
.ticks--no li::before {
  top: 0.72em;
  inset-inline-start: 2px;
  width: 12px;
  height: 2px;
  border: 0;
  transform: none;
  background: var(--muted-2);
}

/* --- Justified prose -----------------------------------------------------
   Justified body text, which is the house preference. It stops at prose:
   headings stay ragged, because justifying a display line opens gaps you can
   see across the room, and the centred bands stay centred. hyphens:auto is
   not decoration here. Without it a justified column at these measures tears
   into rivers, so the two ship together. */

.lead,
.answer p,
.doc p,
.doc li,
.prose p,
.prose li,
.card p,
.step p,
.faq__a p,
.bio__body p,
.svc > div > p,
.tier__sub {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* The call-to-action band is centred by design, and a block that is centred
   and justified at once is neither. */
.band .lead,
.band .tiny {
  text-align: center;
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* "taktek" set the way taktek.io sets its wordmark: JetBrains Mono, bold,
   lower case, tight. */
.lockup__by b { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; letter-spacing: -0.045em; }


/* ==========================================================================
   Study: components the marketing sites never needed. Same idiom as above
   (--panel backgrounds, var(--radius), var(--lift) shadows, pill buttons,
   .eyebrow/.tiny type scale) rather than a second visual language.
   ========================================================================== */

/* --- Preview badge, status pills ----------------------------------------- */

.preview-badge {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding-inline: 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}

.status, .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding-inline: 11px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  background: var(--panel);
  color: var(--ink);
  white-space: nowrap;
}
.status::before, .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; }
.status.good, .badge.good { background: var(--ok-soft); color: var(--ok); }
.status.bad, .badge.bad, .status--repealed { background: var(--off-soft); color: var(--off); }
.status.bad::before, .badge.bad::before, .status--repealed::before { background: var(--off); }

/* --- Header additions: many nav items need a mobile menu the four
   formation sites never had (four anchors fit the bar; eight pages don't).
   nav__links already hides below 860px (see --- Nav --- above); this adds
   what takes its place there. --------------------------------------------- */

.menu-toggle {
  display: none;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  flex: none;
}
.menu-toggle:hover { border-color: var(--ink); }
@media (max-width: 860px) { .menu-toggle { display: inline-flex; } }

/* .nav is itself a flex row (its only other child is .nav__inner), so without
   this the dropdown became a flex item in that same row instead of a panel
   below it: positioning it absolutely, against .nav's own fixed/positioned
   box, takes it out of that row and anchors it to the full width right
   under the 60px bar, open or not. */
.mobile-nav {
  display: none;
  position: absolute;
  top: 100%;
  inset-inline: 0;
  flex-direction: column;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  border-top: 1px solid var(--line);
  background: var(--canvas);
  padding: 6px var(--gutter) 14px;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  padding: 13px 6px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}
.mobile-nav a:last-child { border-bottom: 0; }
.mobile-nav a[aria-current="page"] { color: var(--accent); font-weight: 500; }
@media (min-width: 861px) { .mobile-nav { display: none !important; } }

.lang-switch { white-space: nowrap; }
/* Study-specific: the family hides .nav__out below 480px (sarl's "our
   partner law firm" link can afford to; its page repeats that link in the
   first screen). The language switch cannot give way the same way, since it
   is the only route to the other edition, so it stays visible at every
   width. #theme-toggle reuses the same quiet text-button look. */
.nav .nav__out.lang-switch,
.nav .nav__out#theme-toggle { display: inline-block; }
#theme-toggle {
  inline-size: 44px;
  min-block-size: 44px;
  display: inline-grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: 50%;
  font: inherit;
  cursor: pointer;
}
#theme-toggle:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* --- Notice / disclaimer -------------------------------------------------- */

.notice {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 18px 20px;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.notice a { color: var(--accent); }

/* --- Subject / topic cards: the family's linked-card pattern, denser ----- */

.subject-card, .topic-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  padding: clamp(20px, 2.4vw, 26px);
  background: var(--panel);
  color: inherit;
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.subject-card:hover, .topic-card:hover { background: var(--panel-hi); box-shadow: var(--lift-hi); }
.subject-card h3, .topic-card h3 { margin-bottom: 8px; }
.subject-card .meta, .topic-card .meta { color: var(--muted); font-size: 0.8125rem; margin-bottom: 10px; }
.subject-card p, .topic-card p { color: var(--muted); font-size: 0.9375rem; line-height: 1.6; }

/* --- Article blocks: the verbatim law, set in --font-law --------------- */

.article-block {
  background: var(--surface);
  border-inline-start: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: clamp(18px, 2.2vw, 24px);
  margin-block: 12px;
}
.article-num { display: block; font-weight: 600; color: var(--accent); margin-bottom: 10px; font-size: 0.9375rem; }
.article-text { font-family: var(--font-law); font-size: 1.1875rem; line-height: 2.05; text-align: justify; text-justify: inter-word; }
.article-why { color: var(--muted); font-size: 0.875rem; margin-top: 12px; line-height: 1.6; }
.article-changes { background: var(--off-soft); border-radius: 10px; padding: 12px 14px; margin-top: 10px; font-family: var(--font-law); font-size: 0.9375rem; }
.article-changes p { margin: 0 0 6px; }
.article-changes p:last-child { margin-bottom: 0; }
.article-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--muted);
}
.article-footer a { color: var(--accent); }

.explanation-block { background: var(--panel-hi); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--lift); }
.explanation-label { display: inline-block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 10px; }

/* --- Flashcards ----------------------------------------------------------- */

.flashcard { background: var(--panel); border-radius: var(--radius); padding: clamp(20px, 2.4vw, 26px); margin-bottom: 12px; box-shadow: var(--lift); }
.flashcard .front { font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.012em; }
.flashcard .back { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line-strong); color: var(--ink-soft); display: none; line-height: 1.6; }
.flashcard .back.shown { display: block; }
.flashcard .actions { margin-top: 16px; display: none; gap: 10px; flex-wrap: wrap; }
.flashcard .actions.shown { display: flex; }

/* --- Questions -------------------------------------------------------------- */

.question-block { background: var(--panel); border-radius: var(--radius); padding: clamp(20px, 2.4vw, 26px); margin-bottom: 12px; box-shadow: var(--lift); }
.question-block .stem { font-weight: 600; margin-bottom: 16px; line-height: 1.5; }
.choice-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.choice-list button {
  width: 100%;
  text-align: start;
  background: var(--panel-hi);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 16px;
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
  color: var(--ink);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.choice-list button:hover { border-color: var(--line-strong); }
.choice-list button.correct { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.choice-list button.incorrect { background: var(--off-soft); border-color: var(--off); color: var(--off); }
.question-explanation { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line-strong); display: none; font-size: 0.9375rem; color: var(--ink-soft); line-height: 1.6; }
.question-explanation.shown { display: block; }

/* --- Cases -------------------------------------------------------------- */

.case-block { background: var(--panel); border-radius: var(--radius); padding: clamp(20px, 2.4vw, 26px); margin-bottom: 14px; box-shadow: var(--lift); }
.case-scenario { font-size: 1rem; line-height: 1.65; }
.case-answer, .case-rubric { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line-strong); display: none; }
.case-answer.shown, .case-rubric.shown { display: block; }
.rubric-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rubric-list label { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9375rem; line-height: 1.5; }

/* --- Forms / inputs ------------------------------------------------------- */

textarea, input[type="date"], input[type="text"], input[type="email"], select {
  width: 100%;
  font: inherit;
  font-size: 0.9375rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--canvas);
  color: var(--ink);
}
textarea:focus, input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { min-height: 150px; resize: vertical; }
label.field-label { display: block; font-size: 0.8125rem; color: var(--muted); margin-bottom: 8px; font-weight: 600; }

/* --- Stats / progress ------------------------------------------------------ */

.stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-block: 20px; }
@media (min-width: 640px) { .stat-row { grid-template-columns: repeat(4, 1fr); } }
.stat-tile { background: var(--panel); border-radius: var(--radius); padding: 18px; text-align: center; }
.stat-tile .num { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.03em; color: var(--accent); font-variant-numeric: tabular-nums; font-family: var(--font); }
.stat-tile .label { font-size: 0.8125rem; color: var(--muted); margin-top: 6px; }

table.progress-table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 0.9375rem; }
table.progress-table th, table.progress-table td { padding: 11px 10px; border-bottom: 1px solid var(--line); text-align: start; }
table.progress-table th { color: var(--muted); font-weight: 600; font-size: 0.8125rem; }

.timer { font-family: var(--font); font-variant-numeric: tabular-nums; font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; text-align: center; color: var(--accent); }

.empty-state { text-align: center; color: var(--muted); padding: 56px 20px; }

.storage-blocked-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  background: var(--panel);
  border-top: 1px solid var(--line);
  padding: 12px 16px;
  font-size: 0.8125rem;
  text-align: center;
  color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .choice-list button, .subject-card, .topic-card, .flashcard, .question-block, .case-block { transition: none; }
}

/* --- Page-level top clearance -------------------------------------------
   .nav is position:fixed (60px tall). A page that opens with .hero gets
   enough clearance from .hero's own clamp(130px..210px) padding-top; one
   with a .subnav gets it from the subnav's own margin-top:60px. Every other
   page (review, exam, plan, progress, method, about, notice, subjects
   index, 404) needs main to make the same room itself. */
main { padding-bottom: var(--section-y); }
main { padding-top: 84px; }
.has-subnav main { padding-top: 28px; }
main:has(> .wrap > .hero:first-child) { padding-top: 0; }

/* --- Aliases: build-site.js's own grid/row names, in the family's grid --- */
.feature-grid, .card-grid { display: grid; gap: clamp(20px, 2.6vw, 32px); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.feature-card { border-radius: var(--radius); padding: clamp(22px, 2.8vw, 30px); background: var(--panel); }
.feature-card h3 { margin-bottom: 10px; }
.feature-card p { color: var(--muted); font-size: 0.9375rem; line-height: 1.6; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.breadcrumb { display: block; margin-bottom: 20px; color: var(--muted); }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent); }