/* ==========================================================================
   Auravita — brand system
   Palette, type and components taken from the Auravita logo:
   butter-yellow disc, rose lotus, cornflower + blush book, mint wordmark.
   Hand-authored, build-free CSS. Tokens first, then primitives, then blocks.
   ========================================================================== */

:root {
  /* Brand — straight off the logo */
  --blue-700: #2c5f9e;
  --blue-600: #356fb8;
  --blue: #3e7cc4;          /* the "Auravita" wordmark */
  --blue-400: #6fa3dc;
  --blue-200: #b9d4f0;
  --blue-50: #eaf3fc;

  --rose-600: #e06a87;
  --rose-700: #c85874;
  --rose: #ee7a93;          /* the lotus */
  --rose-400: #f2a8bc;      /* the right-hand page */
  --rose-200: #f9d3dd;
  --rose-50: #fdeef2;

  --butter-600: #e5bf55;
  --butter: #f9dd88;        /* the disc */
  --butter-300: #fdeec0;
  --butter-100: #fef7e2;
  --butter-50: #fffcf3;

  --mint-700: #3f9c72;
  --mint: #5cbf8f;          /* "LEARN FRENCH" */
  --mint-100: #e6f6ee;

  --gold: #efb944;          /* the flame tip */

  /* Surfaces */
  --cream: #fffaef;
  --cream-deep: #fef4dd;
  --paper: #ffffff;
  --ink: #2e3a52;
  --ink-soft: #4a5670;
  --muted: #7c869d;
  --line: rgba(62, 124, 196, 0.14);
  --line-strong: rgba(62, 124, 196, 0.28);

  /* Feedback */
  --ok: #3f9c72;
  --ok-bg: #e6f6ee;
  --warn: #a9791b;
  --warn-bg: #fdf3d9;
  --err: #c04a63;
  --err-bg: #fdeaee;

  /* Type scale (fluid)
     The floors are set for a 360–400px phone: body lands near 15px and the
     display sizes stay inside one screen width. The ceilings are unchanged,
     so nothing about the desktop rendering moves. */
  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.9rem);
  --step-0: clamp(0.94rem, 0.92rem + 0.14vw, 1.06rem);
  --step-1: clamp(1.05rem, 1rem + 0.3vw, 1.35rem);
  --step-2: clamp(1.22rem, 1.1rem + 0.62vw, 1.85rem);
  --step-3: clamp(1.42rem, 1.2rem + 1.15vw, 2.5rem);
  --step-4: clamp(1.62rem, 1.25rem + 1.95vw, 3.35rem);
  --step-5: clamp(1.85rem, 1.3rem + 2.7vw, 4.1rem);

  /* Rhythm */
  --gutter: clamp(0.95rem, 0.6rem + 1.7vw, 2rem);
  --section-y: clamp(2.6rem, 1.6rem + 5vw, 7rem);
  --shell: 1180px;
  --header-h: 96px;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 34px;

  --shadow-sm: 0 1px 2px rgba(46, 58, 82, 0.05), 0 3px 10px rgba(46, 58, 82, 0.04);
  --shadow: 0 12px 32px -14px rgba(46, 58, 82, 0.22), 0 3px 10px rgba(46, 58, 82, 0.05);
  --shadow-lg: 0 34px 70px -30px rgba(46, 58, 82, 0.34);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 var(--step-0)/1.68 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video, iframe { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 {
  font-family: 'Quicksand', ui-rounded, 'Trebuchet MS', 'Segoe UI', sans-serif;
  font-weight: 700; line-height: 1.18; margin: 0 0 0.5em; letter-spacing: -0.005em;
  color: var(--blue-700);
  overflow-wrap: break-word;
}

/* A long unbroken string — an email, a payment reference, a URL — must wrap
   rather than widen its column and push the page sideways. */
p, li, td, th, dd, dt, figcaption, label, summary { overflow-wrap: break-word; }
code, .badge, a[href^='mailto:'], a[href^='tel:'] { overflow-wrap: anywhere; }

/* Grid and flex children default to min-width:auto, which lets wide content
   (a table, a long word) blow out the track it sits in. */
.grid > *, .stack > *, .between > *, .split > * { min-width: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
figure, figcaption { margin: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
::selection { background: var(--butter); color: var(--blue-700); }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--blue); color: #fff; padding: 0.7rem 1.1rem; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* Font Awesome sizing behaves better when icons are inline-blocks. */
.fa-solid, .fa-regular, .fa-brands { display: inline-block; line-height: 1; }

/* ------------------------------------------------------------- layout -- */
.shell { width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; }
.shell--wide { width: min(100% - (var(--gutter) * 2), 1400px); }
.shell--narrow { width: min(100% - (var(--gutter) * 2), 760px); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.2rem, 1.5rem + 3vw, 4rem); }
.section--paper { background: var(--paper); }
.section--cream { background: var(--cream-deep); }
.section--butter { background: linear-gradient(160deg, var(--butter-300), var(--butter-100)); }
.section--blue { background: linear-gradient(155deg, var(--blue-700), var(--blue)); color: #e8f1fb; }
.section--blue h1, .section--blue h2, .section--blue h3, .section--blue h4 { color: #fff; }

.grid { display: grid; gap: clamp(1rem, 0.6rem + 1.6vw, 2rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.stack > * + * { margin-top: var(--stack-gap, 1rem); }
.cluster { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.between { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.center { text-align: center; }
.measure { max-width: 62ch; }
.center .measure { margin-inline: auto; }

/* --------------------------------------------------------- typography -- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--mint-700); margin-bottom: 0.9rem;
}
.section--blue .eyebrow { color: var(--butter); }
.display { font-size: var(--step-5); }
.h1 { font-size: var(--step-4); }
.h2 { font-size: var(--step-3); }
.h3 { font-size: var(--step-2); }
.h4 { font-size: var(--step-1); }
.lead { font-size: var(--step-1); color: var(--ink-soft); line-height: 1.62; }
.section--blue .lead { color: #cfe1f5; }
.small { font-size: var(--step--1); }
.muted { color: var(--muted); }
.section--blue .muted { color: #aec8e6; }
.accent { color: var(--rose-700); }
.accent-blue { color: var(--blue); }
.rounded { font-family: 'Quicksand', ui-rounded, 'Trebuchet MS', sans-serif; }
.fr { font-style: italic; color: var(--rose-700); }

.rule {
  width: 72px; height: 5px; border-radius: 999px;
  background: linear-gradient(90deg, var(--rose), var(--butter) 55%, var(--mint));
  margin: 0 0 1.4rem;
}
.center .rule { margin-inline: auto; }

/* ------------------------------------------------------------ buttons -- */
.btn {
  --btn-bg: var(--blue);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.85rem 1.7rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: 'Quicksand', ui-rounded, 'Trebuchet MS', sans-serif;
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background-color 0.25s, color 0.25s, border-color 0.25s;
}
/* An author `display` beats the user agent's [hidden] rule, and plenty here
   set one (.btn, .plan-option, …). Without this, hiding them does nothing. */
[hidden] { display: none !important; }

.btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, rgba(255,255,255,0.32), rgba(255,255,255,0));
  transform: translateX(-110%); transition: transform 0.6s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:hover::after { transform: translateX(0); }
.btn:active { transform: translateY(0); }
.btn--rose { --btn-bg: var(--rose); --btn-fg: #fff; }
.btn--rose:hover { --btn-bg: var(--rose-700); }
.btn--butter { --btn-bg: var(--butter); --btn-fg: #6a4f10; }
.btn--butter:hover { --btn-bg: var(--butter-600); }
.btn--mint { --btn-bg: var(--mint); --btn-fg: #fff; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--blue-700); border-color: var(--line-strong); }
.btn--ghost:hover { --btn-bg: var(--blue); --btn-fg: #fff; border-color: var(--blue); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--blue-700); }
.btn--danger { --btn-bg: var(--err); }
.btn--sm { padding: 0.5rem 1.05rem; font-size: 0.84rem; border-width: 1.5px; }
.btn--lg { padding: 1rem 2.1rem; font-size: var(--step-1); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.55; pointer-events: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: 'Quicksand', ui-rounded, sans-serif;
  font-weight: 700; font-size: var(--step--1); color: var(--blue);
  transition: gap 0.3s var(--ease), color 0.25s;
}
.link-arrow:hover { gap: 0.8rem; color: var(--rose-700); }

/* -------------------------------------------------------------- cards -- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.3rem, 1rem + 1vw, 2rem);
  box-shadow: var(--shadow-sm);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.3s;
}
.card--hover:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--blue-200); }
.card--flat { box-shadow: none; }
.card--blue { background: var(--blue-700); border-color: rgba(255,255,255,0.12); color: #d8e6f6; }
.card--butter { background: linear-gradient(150deg, var(--butter-300), var(--butter-100)); border-color: rgba(229,191,85,.35); }

/* Icon tiles — Font Awesome glyphs on a soft brand wash. */
.card__icon {
  width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 16px; background: var(--blue-50); color: var(--blue);
  margin-bottom: 1.1rem; font-size: 1.15rem;
}
.card__icon--rose { background: var(--rose-50); color: var(--rose-700); }
.card__icon--mint { background: var(--mint-100); color: var(--mint-700); }
.card__icon--butter { background: var(--butter-100); color: var(--butter-600); }
.card__icon--sm { width: 38px; height: 38px; border-radius: 12px; font-size: 0.95rem; margin: 0; }

.badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.32rem 0.75rem; border-radius: 999px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--butter-100); color: var(--butter-600);
}
.badge--ok { background: var(--ok-bg); color: var(--ok); }
.badge--warn { background: var(--warn-bg); color: var(--warn); }
.badge--err { background: var(--err-bg); color: var(--err); }
.badge--blue { background: var(--blue-50); color: var(--blue); }
.badge--rose { background: var(--rose-50); color: var(--rose-700); }

/* ------------------------------------------------------------ header -- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 250, 239, 0.84);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.site-header.is-stuck { background: rgba(255, 250, 239, 0.97); border-color: var(--line); box-shadow: var(--shadow-sm); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); }

/* The mark is a disc, so it needs real diameter to read at all. */
.brand { display: inline-flex; align-items: center; gap: 0.85rem; }
.brand__logo {
  width: 72px; height: 72px; border-radius: 50%; flex: none;
  object-fit: cover; background: var(--butter-300);
  box-shadow: 0 4px 16px -6px rgba(46, 58, 82, 0.35);
  transition: transform 0.5s var(--ease);
}
.brand:hover .brand__logo { transform: rotate(-6deg) scale(1.04); }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: 'Quicksand', ui-rounded, 'Trebuchet MS', sans-serif;
  font-size: 1.6rem; font-weight: 700; color: var(--blue); letter-spacing: -0.01em;
}
.brand__tag {
  font-family: 'Quicksand', ui-rounded, sans-serif;
  font-size: 0.63rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--mint); margin-top: 0.42rem;
}
@media (max-width: 640px) {
  :root { --header-h: 80px; }
  .brand__logo { width: 56px; height: 56px; }
  .brand__name { font-size: 1.3rem; }
}

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a {
  position: relative; font-family: 'Quicksand', ui-rounded, sans-serif;
  font-size: var(--step-0); font-weight: 600; color: var(--ink-soft); padding: 0.3rem 0;
}
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: -2px; height: 3px; width: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--rose), var(--butter));
  transform: scaleX(0); transform-origin: right; transition: transform 0.35s var(--ease);
}
.nav a:hover::after, .nav a[aria-current='page']::after { transform: scaleX(1); transform-origin: left; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--blue); }

/* Auth buttons inside the nav belong to the collapsed mobile menu only. */
.nav__only-mobile { display: none; }

.nav-toggle {
  display: none; width: 46px; height: 46px; border: 1.5px solid var(--line-strong);
  border-radius: 14px; background: transparent; cursor: pointer; color: var(--blue);
  align-items: center; justify-content: center; font-size: 1.05rem;
}
.nav-toggle .fa-xmark { display: none; }
.nav-toggle[aria-expanded='true'] .fa-bars { display: none; }
.nav-toggle[aria-expanded='true'] .fa-xmark { display: inline-block; }

/* The scrim sits under the drawer and above the page; it only exists below
   the desktop breakpoint, where the nav becomes a right-hand sidebar. */
.nav-scrim {
  position: fixed; inset: 0; z-index: 55; display: none;
  background: rgba(46, 58, 82, 0.42); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease);
}

@media (max-width: 980px) {
  .nav-toggle { display: inline-flex; }
  .header-actions { display: none; }

  /* The drawer is a fixed child of the header, so the header must NOT be a
     containing block for it — and `backdrop-filter` makes an element exactly
     that. Drop the blur here (and make the bar opaque in its place) or the
     drawer inherits the header's 80px height instead of the viewport's. */
  .site-header {
    z-index: 70;                 /* the bar stays clickable above the scrim */
    backdrop-filter: none;
    background: var(--cream);
  }
  .site-header.is-stuck { background: var(--cream); }

  /* Slide-in sidebar from the right, full height, over the page. */
  .nav {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto; z-index: 60;
    width: min(320px, 84vw);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: calc(var(--header-h) + 0.75rem) 1.4rem 2rem;
    background: var(--cream); border-left: 1px solid var(--line);
    box-shadow: -18px 0 44px -22px rgba(46, 58, 82, 0.5);
    transform: translateX(100%); opacity: 1; pointer-events: none;
    transition: transform 0.32s var(--ease);
    /* A long menu on a short phone scrolls inside itself instead of running off. */
    overflow-y: auto; overscroll-behavior: contain;
  }
  .nav.is-open { transform: none; pointer-events: auto; }
  .nav a { padding: 0.9rem 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .nav .btn { margin-top: 1rem; }
  .nav__only-mobile { display: inline-flex; }

  /* The drawer is positioned, so it would otherwise paint over its own
     siblings in the bar. Lift the logo and the close button back on top. */
  .brand, .nav-toggle { position: relative; z-index: 61; }

  .nav-scrim { display: block; }
  .nav-scrim.is-open { opacity: 1; pointer-events: auto; }

  body.is-nav-open { overflow: hidden; }
}

/* -------------------------------------------------------------- hero -- */
.hero { position: relative; padding-block: clamp(2.5rem, 1.5rem + 5vw, 4rem); overflow: hidden; }
.hero__grid {
  display: grid; grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center;
}
.hero__title { font-size: var(--step-5); margin-bottom: 1rem; }
.hero__title em { font-style: normal; color: var(--rose); }
.hero__art { position: relative; }
.hero__art img {
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5; object-fit: cover; width: 100%;
}
.hero__frame {
  position: absolute; inset: -14px -14px 14px 14px; border-radius: var(--radius-xl);
  border: 2px dashed var(--butter-600); opacity: 0.55; z-index: -1;
}
.hero__chip {
  position: absolute; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 0.75rem 1rem; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 0.7rem;
  font-family: 'Quicksand', ui-rounded, sans-serif; font-size: var(--step--1); font-weight: 700;
}
.hero__chip--tl { top: 7%; left: -5%; }
.hero__chip--br { bottom: 7%; right: -4%; }
/* Once the hero stacks, the art is full-bleed — the chips must tuck back in. */
@media (max-width: 980px) {
  .hero__chip--tl { left: 0.75rem; }
  .hero__chip--br { right: 0.75rem; }
}
@media (max-width: 560px) {
  .hero__chip { padding: 0.55rem 0.75rem; font-size: 0.78rem; }
}

/* Desktop: the hero is capped at 90vh and everything inside fits that box. */
@media (min-width: 981px) {
  /* Header + hero together fill exactly one viewport. */
  .hero {
    min-height: calc(100vh - var(--header-h));
    max-height: calc(100vh - var(--header-h));
    display: grid; align-items: center;
    padding-block: clamp(0.5rem, 2vh, 2rem);
  }
  .hero__grid { max-height: 100%; }
  .hero__art img { height: min(70vh, 680px); aspect-ratio: auto; }
  .hero__title { font-size: clamp(2.1rem, 1rem + 3.4vw, 3.5rem); }
  /* Keep both hero CTAs on one line at desktop widths. */
  .hero .btn--lg, .hero__grid .btn--lg, .cta-band .btn--lg { font-size: var(--step-0); padding: 0.95rem 1.75rem; }
  .hero .lead { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem); }
}
@media (max-width: 980px) { .hero__grid { grid-template-columns: minmax(0, 1fr); } }

.blob { position: absolute; border-radius: 50%; filter: blur(74px); opacity: 0.55; z-index: -1; pointer-events: none; }
.blob--butter { width: 440px; height: 440px; background: var(--butter); top: -140px; right: -90px; }
.blob--rose { width: 380px; height: 380px; background: var(--rose-200); bottom: -170px; left: -130px; }
.blob--blue { width: 340px; height: 340px; background: var(--blue-200); top: 40%; left: 45%; opacity: 0.4; }

/* ------------------------------------------------------------- stats -- */
.stat { text-align: center; }
.stat__num {
  font-family: 'Quicksand', ui-rounded, sans-serif;
  font-size: var(--step-4); font-weight: 700; color: var(--blue); line-height: 1;
}
.section--blue .stat__num { color: var(--butter); }
.stat__label {
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin-top: 0.5rem;
}

/* ---------------------------------------------------------- accordion -- */
.accordion { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--paper); }
.accordion__item + .accordion__item { border-top: 1px solid var(--line); }
.accordion__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem clamp(1rem, 0.6rem + 1.2vw, 1.6rem);
  background: transparent; border: 0; cursor: pointer; text-align: left;
}
.accordion__head:hover { background: var(--butter-50); }
.accordion__title { font-family: 'Quicksand', ui-rounded, sans-serif; font-weight: 700; font-size: var(--step-1); color: var(--blue-700); }
.accordion__meta { font-size: var(--step--1); color: var(--muted); white-space: nowrap; }
.accordion__chevron { transition: transform 0.35s var(--ease); color: var(--rose); }
.accordion__head[aria-expanded='true'] .accordion__chevron { transform: rotate(180deg); }
.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
.accordion__panel[data-open='true'] { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__list { list-style: none; margin: 0; padding: 0 clamp(1rem, 0.6rem + 1.2vw, 1.6rem) 1.2rem; }
.accordion__list li {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.62rem 0; border-top: 1px dashed var(--line); font-size: var(--step-0);
}
.accordion__list li:first-child { border-top: 0; }

/* -------------------------------------------------------------- forms -- */
.field { display: block; margin-bottom: 1.05rem; }
.field__label {
  display: block; font-family: 'Quicksand', ui-rounded, sans-serif;
  font-size: var(--step--1); font-weight: 700; color: var(--blue-700); margin-bottom: 0.42rem;
}
.field__hint { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 0.35rem; }
.input, .select, .textarea {
  width: 100%; padding: 0.8rem 1rem;
  background: var(--paper); border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--blue-400); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-50);
}
.textarea { min-height: 140px; resize: vertical; }
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--blue) 50%), linear-gradient(135deg, var(--blue) 50%, transparent 50%);
  background-position: right 1.05rem center, right 0.75rem center;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.2rem;
}
.field--error .input, .field--error .select, .field--error .textarea { border-color: var(--err); }
.error { display: block; color: var(--err); font-size: 0.8rem; margin-top: 0.35rem; }
.check { display: flex; align-items: flex-start; gap: 0.6rem; font-size: var(--step--1); }
.check input { margin-top: 0.25rem; width: 17px; height: 17px; accent-color: var(--blue); }

.alert {
  display: flex; gap: 0.75rem; align-items: flex-start;
  padding: 0.9rem 1.1rem; border-radius: var(--radius-sm);
  border: 1px solid transparent; font-size: var(--step--1); margin-bottom: 1.2rem;
}
.alert i { margin-top: 0.15rem; }
.alert--ok { background: var(--ok-bg); border-color: rgba(63,156,114,0.28); color: #2c7554; }
.alert--err { background: var(--err-bg); border-color: rgba(192,74,99,0.28); color: #96374b; }
.alert--warn { background: var(--warn-bg); border-color: rgba(169,121,27,0.28); color: #7d590f; }
.alert--info { background: var(--blue-50); border-color: var(--line-strong); color: var(--blue-700); }

/* --------------------------------------------------------- auth pages -- */
/* Desktop: the brand panel is pinned to the viewport and the form column
   scrolls inside its own track, so a long form never stretches the panel. */
.auth { height: 100vh; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.auth__aside { height: 100vh; overflow: hidden; }
.auth__main { height: 100vh; overflow-y: auto; overscroll-behavior: contain; }

.auth__aside {
  background: linear-gradient(160deg, var(--blue-700), var(--blue));
  color: #e2eefb; padding: clamp(1.5rem, 3vh, 3rem) clamp(1.75rem, 1rem + 3vw, 3.5rem);
  display: flex; flex-direction: column; justify-content: center; gap: clamp(1.25rem, 3vh, 2.25rem);
  position: relative;
}
.auth__aside::after {
  content: ''; position: absolute; width: 480px; height: 480px; border-radius: 50%;
  background: rgba(249, 221, 136, 0.22); filter: blur(70px); bottom: -170px; right: -130px;
}
.auth__aside .brand__name { color: #fff; }
.auth__aside .brand__tag { color: var(--butter); }

.auth__photo {
  border-radius: var(--radius-lg); object-fit: cover; width: 100%;
  height: clamp(120px, 18vh, 200px);
  position: relative; z-index: 1; box-shadow: var(--shadow-lg);
}
.auth__main { display: grid; place-items: center; padding: clamp(2rem, 1rem + 4vw, 4rem) var(--gutter); background: var(--cream); }
.auth__card { width: min(100%, 440px); }
@media (max-height: 700px) { .auth__photo { display: none; } }

.auth__logo { display: none; width: 84px; height: 84px; border-radius: 50%; margin-bottom: 1.4rem; }

/* Phones and small tablets: drop the brand panel entirely — it is decoration,
   and half a screen of it above the form is half a screen of scrolling. The
   card shows the logo instead. This block has to sit after the declarations
   above, or they win on source order and the panel comes back. */
@media (max-width: 900px) {
  .auth { height: auto; min-height: 100dvh; grid-template-columns: 1fr; overflow: visible; }
  .auth__aside { display: none; }
  .auth__main { height: auto; overflow: visible; align-items: start; }
  .auth__logo { display: block; margin-inline: auto; }
}

/* ------------------------------------------------------- app (panel) -- */
.app { display: grid; grid-template-columns: 272px 1fr; min-height: 100vh; background: var(--cream); }

.sidebar {
  background: linear-gradient(180deg, var(--blue-700), #24518a); color: #cddff2;
  padding: 1.5rem 1.1rem; display: flex; flex-direction: column; gap: 1.3rem;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}

/* Below the desktop breakpoint the sidebar becomes a drawer. Dropping it into
   the flow instead would push the actual page content a full screen down —
   the admin menu alone is a dozen links. */
.panel-toggle, .panel-scrim { display: none; }

@media (max-width: 1024px) {
  .app { grid-template-columns: 1fr; }

  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 90;
    width: min(84vw, 292px); height: 100dvh;
    padding-block: 1.1rem;
    transform: translateX(-100%);
    transition: transform 0.3s var(--ease);
    box-shadow: var(--shadow-lg);
  }
  .sidebar.is-open { transform: none; }

  .panel-scrim {
    display: block; position: fixed; inset: 0; z-index: 80;
    background: rgba(24, 38, 62, 0.5);
    opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease);
    border: 0; padding: 0; cursor: pointer;
  }
  .panel-scrim.is-open { opacity: 1; pointer-events: auto; }

  .panel-toggle {
    display: inline-grid; place-items: center; flex: none;
    width: 42px; height: 42px; border-radius: 12px;
    border: 1.5px solid var(--line-strong); background: var(--paper);
    color: var(--blue-700); font-size: 1rem; cursor: pointer;
  }
  .panel-toggle:hover { background: var(--blue-50); border-color: var(--blue-200); }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

/* Set while the drawer is open so the page behind it cannot scroll. */
body.is-drawer-open { overflow: hidden; }
.sidebar .brand { padding-inline: 0.4rem; }
.sidebar .brand__logo { width: 56px; height: 56px; }
.sidebar .brand__name { color: #fff; font-size: 1.25rem; }
.sidebar .brand__tag { color: var(--butter); }
.sidebar__label {
  font-family: 'Quicksand', ui-rounded, sans-serif;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: #8aa9cd; margin: 0.6rem 0 0.35rem; padding-inline: 0.85rem;
}
.sidebar__nav { display: flex; flex-direction: column; gap: 0.15rem; }
.sidebar__link {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.7rem 0.85rem; border-radius: 12px;
  font-family: 'Quicksand', ui-rounded, sans-serif; font-size: var(--step--1); font-weight: 600;
  transition: background 0.2s, color 0.2s, transform 0.2s var(--ease);
}
.sidebar__link i { width: 18px; text-align: center; opacity: 0.85; }
.sidebar__link:hover { background: rgba(255,255,255,0.09); color: #fff; transform: translateX(2px); }
.sidebar__link.is-active { background: var(--butter); color: #6a4f10; font-weight: 700; }
.sidebar__link.is-active i { opacity: 1; }
.sidebar__foot { margin-top: auto; font-size: 0.75rem; color: #8aa9cd; }

.panel-main { min-width: 0; display: flex; flex-direction: column; }
.panel-top {
  background: var(--paper); border-bottom: 1px solid var(--line);
  padding: 1rem var(--gutter); display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1rem;
  position: sticky; top: 0; z-index: 20;
}
.panel-title { font-size: var(--step-2); margin: 0; flex: 1; min-width: 0; }
.panel-top__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.panel-top__actions:empty { display: none; }
.panel-top__side { display: flex; align-items: center; gap: 0.75rem; flex: none; margin-left: auto; }
.panel-body { padding: clamp(1.2rem, 0.8rem + 1.8vw, 2.4rem) var(--gutter); flex: 1; min-width: 0; }

@media (max-width: 860px) {
  .panel-top { padding: 0.7rem var(--gutter); gap: 0.6rem; }
  .panel-title { font-size: var(--step-1); flex: 1; }
  /* Page actions take the full second row rather than squeezing the title. */
  .panel-top__actions {
    order: 3; width: 100%;
    padding-top: 0.6rem; border-top: 1px solid var(--line);
  }
  .panel-top__side { gap: 0.5rem; }
}

.avatar {
  width: 42px; height: 42px; border-radius: 50%; object-fit: cover;
  display: grid; place-items: center; background: var(--blue); color: #fff;
  font-family: 'Quicksand', sans-serif; font-size: 0.85rem; font-weight: 700; flex: none;
}
@media (max-width: 860px) {
  .avatar { width: 36px; height: 36px; font-size: 0.75rem; }
}

/* ------------------------------------------------------------ tables -- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.table { width: 100%; border-collapse: collapse; font-size: var(--step--1); min-width: 640px; }
.table th, .table td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th {
  font-family: 'Quicksand', ui-rounded, sans-serif;
  font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); background: var(--butter-50); font-weight: 700;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background 0.2s; }
.table tbody tr:hover { background: var(--butter-50); }
.table td.nowrap, .table th.nowrap { white-space: nowrap; }

/* Two-column "label: value" tables rather than listings. They already fit a
   phone, so they keep their shape at every width — only the split moves. */
.table--facts { min-width: 0; }
.table--facts th { width: 38%; font-family: inherit; letter-spacing: 0; text-transform: none; font-size: var(--step--1); }
@media (max-width: 420px) {
  .table--facts th, .table--facts td { padding: 0.6rem 0.55rem; }
  .table--facts th { width: 44%; }
}

/* ------------------------------------------------------ hierarchy -- */
/* Breadcrumbs + drill-down rows for course > module > lesson. */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem;
  font-size: var(--step--1); color: var(--muted); margin-bottom: 1.1rem;
}
.crumbs a { font-weight: 600; color: var(--blue); }
.crumbs a:hover { color: var(--rose-700); }
.crumbs i { font-size: 0.55rem; opacity: 0.45; }
.crumbs [aria-current='page'] { color: var(--ink-soft); font-weight: 600; }

.row-list { display: grid; gap: 0.6rem; }

.row-item {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.8rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s var(--ease);
}
.row-item:hover { border-color: var(--blue-200); box-shadow: var(--shadow-sm); transform: translateX(2px); }

.row-item__index {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center; border-radius: 10px;
  background: var(--blue-50); color: var(--blue);
  font-family: 'Quicksand', ui-rounded, sans-serif; font-weight: 700; font-size: 0.85rem;
}
.row-item__main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.row-item__title {
  display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
  font-family: 'Quicksand', ui-rounded, sans-serif; font-weight: 700; color: var(--blue-700);
}
.row-item__meta { font-size: var(--step--1); color: var(--muted); }
.row-item__actions { display: flex; align-items: center; gap: 0.35rem; flex: none; }

.row-move {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--paper); color: var(--muted);
  font-size: 0.65rem; cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.row-move:hover { color: var(--blue); border-color: var(--blue-200); background: var(--blue-50); }
.row-move[disabled] { opacity: 0.3; cursor: default; }
.row-move[disabled]:hover { color: var(--muted); border-color: var(--line); background: var(--paper); }

@media (max-width: 640px) {
  .row-item { flex-wrap: wrap; }
  .row-item__actions { width: 100%; justify-content: flex-end; }
}

/* ------------------------------------------------------ stat tiles -- */
/* Compact KPI tiles for the panels. Tiles stretch to match within a row so the
   bottom edge stays level when one of them carries a hint line. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr));
  gap: 0.9rem;
}

.stat-tile {
  display: flex; align-items: center; gap: 0.85rem;
  min-height: 74px;
  padding: 0.85rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.3s;
}
.stat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--blue-200); }

.stat-tile__icon {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px; font-size: 0.95rem;
  background: var(--blue-50); color: var(--blue);
}
.stat-tile__icon--rose { background: var(--rose-50); color: var(--rose-700); }
.stat-tile__icon--mint { background: var(--mint-100); color: var(--mint-700); }
.stat-tile__icon--butter { background: var(--butter-100); color: var(--butter-600); }

.stat-tile__body { display: flex; flex-direction: column; min-width: 0; }
.stat-tile__label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted); line-height: 1.3;
}
.stat-tile__value {
  font-family: 'Quicksand', ui-rounded, sans-serif;
  font-size: 1.45rem; font-weight: 700; color: var(--blue); line-height: 1.2;
}
.stat-tile__hint { font-size: 0.7rem; color: var(--muted); line-height: 1.3; }

/* A slim row of shortcuts, rather than a card pretending to be a statistic. */
.quick-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--butter-50);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.quick-actions__label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted); margin-right: 0.35rem;
}

.empty { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.empty i { display: block; font-size: 1.8rem; color: var(--blue-200); margin-bottom: 0.8rem; }

/* ---------------------------------------------------------- progress -- */
.progress { height: 10px; border-radius: 999px; background: var(--blue-50); overflow: hidden; }
.progress__bar {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--rose), var(--butter));
  width: 0; transition: width 0.8s var(--ease);
}
.progress--slim { height: 6px; }

.ring {
  --p: 0; width: 124px; height: 124px; display: grid; place-items: center;
  border-radius: 50%; flex: none; position: relative;
  background: conic-gradient(var(--rose) calc(var(--p) * 1%), var(--blue-50) 0);
}
.ring__inner {
  width: 96px; height: 96px; border-radius: 50%; background: var(--paper);
  display: grid; place-items: center; text-align: center; line-height: 1.15;
}
.ring__value { font-family: 'Quicksand', ui-rounded, sans-serif; font-size: 1.55rem; font-weight: 700; color: var(--blue); }

/* ------------------------------------------------------------ player -- */
.learn { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: clamp(1rem, 0.6rem + 1.5vw, 2rem); align-items: start; }
@media (max-width: 1100px) { .learn { grid-template-columns: minmax(0, 1fr); } }
.player {
  position: relative; aspect-ratio: 16 / 9; background: #16233a;
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
}
.player iframe { width: 100%; height: 100%; border: 0; }
.player__empty { display: grid; place-items: center; height: 100%; color: #93a8c6; text-align: center; padding: 2rem; }
.player__empty i { font-size: 2.2rem; margin-bottom: 0.8rem; display: block; }

.playlist {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; position: sticky; top: 88px; max-height: calc(100vh - 116px);
  display: flex; flex-direction: column;
}
.playlist__head { padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--line); background: var(--butter-50); }
.playlist__scroll { overflow-y: auto; }
.playlist__section {
  padding: 0.85rem 1.2rem 0.35rem;
  font-family: 'Quicksand', ui-rounded, sans-serif;
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 700;
}
.playlist__item {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 1.2rem;
  border-left: 4px solid transparent; font-size: var(--step--1);
  transition: background 0.2s, border-color 0.2s;
}
.playlist__item:hover { background: var(--butter-50); }
.playlist__item.is-current { background: var(--rose-50); border-left-color: var(--rose); font-weight: 700; }
.playlist__tick {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong);
  display: grid; place-items: center; font-size: 0.62rem; color: transparent; flex: none;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.playlist__item.is-done .playlist__tick { background: var(--mint); border-color: var(--mint); color: #fff; }
.playlist__time { margin-left: auto; font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Stacked under the player, the playlist is just another block: sticking it to
   the viewport would trap the page inside a scrolling box. */
@media (max-width: 1100px) {
  .playlist { position: static; max-height: none; }
  .playlist__scroll { max-height: none; overflow: visible; }
  .playlist__item { padding-block: 0.85rem; }
}

.locked {
  display: grid; place-items: center; text-align: center; gap: 1rem;
  padding: clamp(2rem, 1rem + 4vw, 4rem); background: var(--paper);
  border: 2px dashed var(--line-strong); border-radius: var(--radius-lg);
}
.locked i { font-size: 2.2rem; color: var(--butter-600); }

/* -------------------------------------------------------------- misc -- */
.pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.95rem; border-radius: 999px; background: var(--paper);
  border: 1px solid var(--line); font-size: var(--step--1); font-weight: 600;
}
.pill i { color: var(--mint); }

.media {
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
  position: relative; background: var(--butter-100);
}
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media--tall img { aspect-ratio: 3 / 4; }
.media--wide img { aspect-ratio: 16 / 10; }
.media--square img { aspect-ratio: 1 / 1; }
.media__caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem 1.1rem 1.2rem;
  background: linear-gradient(transparent, rgba(20, 32, 54, 0.78));
  color: #fff; font-size: var(--step--1); font-weight: 600; line-height: 1.35;
}

/* ---------------------------------------------------- showcase (100vh) -- */
.showcase__grid {
  display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: clamp(1.5rem, 1rem + 2.4vw, 3.25rem); align-items: center;
}
.showcase--reverse .showcase__grid { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
.showcase__art { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.7rem, 0.4rem + 0.8vw, 1.1rem); }
.showcase__art .media { height: 100%; }
[data-parallax] { will-change: transform; }
@media (prefers-reduced-motion: reduce) { [data-parallax] { transform: none !important; } }
.showcase__art img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 3 / 4; }

/* A section sitting directly under the sticky header: header + section fill
   the requested fraction of the viewport, so the fold has no overhang. */
@media (min-width: 981px) {
  .page-hero {
    min-height: calc(90vh - var(--header-h));
    display: grid; align-items: center;
    padding-block: clamp(1rem, 3vh, 2.5rem);
  }
  .page-hero .media img { max-height: 62vh; }

}

@media (min-width: 981px) {
  /* Full-viewport band: the art is sized off the viewport so the whole
     section — copy included — always lands inside 100vh. */
  .showcase {
    min-height: 100vh;
    display: grid; align-items: center;
    padding-block: clamp(2rem, 5vh, 4.5rem);
  }
  /* The ratio drives the size; vh is only a ceiling on short screens. */
  .showcase__art img { max-height: 68vh; }
}

/* A shorter variant for a band sitting directly under the header: header plus
   section fill 90vh. On the standard shell the copy needs an even split, or it
   wraps tall and pushes the band past that target. */
@media (min-width: 981px) {
  .showcase.showcase--short { min-height: calc(90vh - var(--header-h)); }
  .showcase--short .showcase__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .showcase--short .showcase__art img { max-height: 46vh; }
  .showcase--short .lead { font-size: var(--step-0); }
}

@media (max-width: 980px) {
  /* Every variant has to be named here. `.showcase--reverse .showcase__grid`
     is two classes to this rule's one, and a media query adds no specificity —
     leave it out and the About page keeps two columns on a phone. */
  .showcase__grid,
  .showcase--reverse .showcase__grid,
  .showcase--short .showcase__grid,
  .showcase--reverse.showcase--short .showcase__grid { grid-template-columns: minmax(0, 1fr); }
  .showcase__art { order: 2; }
  .showcase__copy { order: 1; }
  .showcase__art img { aspect-ratio: 4 / 5; }
}

@media (max-width: 480px) {
  .showcase__art { grid-template-columns: minmax(0, 1fr); }
  .showcase__art img { aspect-ratio: 16 / 10; }
}

/* ------------------------------------------------------------ CTA band -- */
.cta-band {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 0; padding: 0; overflow: hidden; align-items: stretch;
}
.cta-band__text { padding: clamp(1.75rem, 1.2rem + 2.6vw, 3.25rem); }
.cta-band__text .lead { max-width: 46ch; }
.cta-band__art { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }

@media (max-width: 900px) {
  .cta-band { grid-template-columns: minmax(0, 1fr); }
  .cta-band__art { order: -1; min-height: 220px; max-height: 300px; }
}

.price-card { position: relative; overflow: hidden; }
.price-card__amount { font-family: 'Quicksand', ui-rounded, sans-serif; font-size: var(--step-4); font-weight: 700; color: var(--blue); line-height: 1; }
.price-card__strike { color: var(--muted); text-decoration: line-through; font-size: var(--step-1); margin-left: 0.5rem; }

.tick-list { list-style: none; margin: 0; padding: 0; }
.tick-list li { position: relative; padding-left: 2rem; margin-bottom: 0.7rem; }
.tick-list li::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute; left: 0; top: 0.1rem;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--mint-100); color: var(--mint-700);
  display: grid; place-items: center; font-size: 0.65rem;
}

.quote {
  border-left: 4px solid var(--butter); padding-left: 1.2rem;
  font-family: 'Quicksand', ui-rounded, sans-serif; font-size: var(--step-1); font-style: italic;
}

.site-footer { background: linear-gradient(160deg, var(--blue-700), #24518a); color: #b6cee8; padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) 2rem; }
.site-footer a:hover { color: #fff; }
.site-footer .brand__name { color: #fff; }
.site-footer .brand__tag { color: var(--butter); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2rem; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-title {
  color: #fff; font-family: 'Quicksand', ui-rounded, sans-serif;
  font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 1rem;
}
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; font-size: var(--step--1); }
.footer-list a { display: inline-flex; align-items: center; gap: 0.55rem; }
.footer-list i { width: 14px; color: var(--butter); opacity: 0.8; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 2.5rem; padding-top: 1.5rem; font-size: 0.8rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }
.social {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,0.1); color: #fff;
  transition: background 0.25s, transform 0.25s var(--ease);
}
.social:hover { background: var(--butter); color: var(--blue-700); transform: translateY(-3px); }

.pagination { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 1.2rem; font-size: var(--step--1); }
.pagination a, .pagination span {
  padding: 0.45rem 0.85rem; border-radius: 10px; border: 1px solid var(--line); background: var(--paper);
}
.pagination .is-active { background: var(--blue); color: #fff; border-color: var(--blue); }

/* --------------------------------------------------------- animation -- */
[data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal='left'] { transform: translateX(-28px); }
[data-reveal='right'] { transform: translateX(28px); }
[data-reveal='zoom'] { transform: scale(0.95); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Once the layouts are single-column the sideways slide buys nothing, and a
   full-width block offset by 28px hangs off the edge until it reveals —
   which is a real horizontal scroll on a phone. Slide up instead. */
@media (max-width: 980px) {
  [data-reveal='left'], [data-reveal='right'] { transform: translateY(26px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ================================================================
   Responsive utilities
   ================================================================ */

/* Two-column page splits. The ratio is passed in as --split so a page can keep
   its own proportions, and every one of them collapses at the same width —
   a hard-coded grid-template-columns in a style attribute cannot do that. */
.split {
  display: grid;
  gap: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  grid-template-columns: var(--split, minmax(0, 1fr) minmax(0, 1fr));
  align-items: start;
}
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
}

/* Side cards that follow the scroll on a wide screen, and simply sit in the
   flow once the split has collapsed. */
.is-sticky { position: sticky; top: 84px; }
@media (max-width: 1024px) {
  .is-sticky { position: static; }
}

/* Filter bars above the admin listings. */
.filters { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.filters .input { flex: 1 1 220px; max-width: 320px; min-width: 0; }
.filters .select { flex: 0 1 210px; min-width: 0; }
@media (max-width: 640px) {
  .filters { display: grid; grid-template-columns: 1fr 1fr; }
  .filters .input { grid-column: 1 / -1; max-width: none; }
  .filters .select { width: 100%; }
  .filters .select:only-of-type { grid-column: 1 / -1; }
  .filters .btn { grid-column: 1 / -1; width: 100%; }
  .filters > a { grid-column: 1 / -1; text-align: center; }
}

/* ---------------------------------------------------------------- tables -- */
/* A six-column table cannot be read on a 380px screen, and side-scrolling it
   hides half the record. Below 720px each row becomes a small card and every
   cell carries its own heading, taken from the th via data-label. */
@media (max-width: 720px) {
  .table--stack { display: block; min-width: 0; font-size: var(--step--1); }
  .table--stack thead { display: none; }
  .table--stack tbody, .table--stack tr, .table--stack td { display: block; width: 100%; }

  .table--stack tr {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--line);
  }
  .table--stack tr:last-child { border-bottom: 0; }

  .table--stack td {
    padding: 0.24rem 0;
    border: 0;
    display: grid;
    grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
  }
  /* Only labelled cells have a second column to place children into. */
  .table--stack td[data-label] > * { grid-column: 2; }
  /* Pills size to their text instead of stretching across the value column. */
  .table--stack td[data-label] > .badge,
  .table--stack td[data-label] > .pill,
  .table--stack td[data-label] > code { justify-self: start; }
  .table--stack td::before {
    grid-column: 1; grid-row: 1;
    content: attr(data-label);
    font-family: 'Quicksand', ui-rounded, sans-serif;
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--muted);
    padding-top: 0.15rem;
  }
  /* Cells with nothing to label — an actions column — span the whole card. */
  /* An unlabelled cell is the row's actions: give them their own line, right. */
  .table--stack td:not([data-label]) { grid-template-columns: 1fr; justify-items: end; padding-top: 0.6rem; }
  .table--stack td:not([data-label])::before { content: none; }
  .table--stack td.nowrap, .table--stack th.nowrap { white-space: normal; }
  .table--stack td .cluster { gap: 0.45rem; }
  .table--stack tbody tr:hover { background: transparent; }

  /* The "nothing here" row is a single cell spanning the table. */
  .table--stack td.empty { display: block; grid-template-columns: 1fr; padding: 2rem 1rem; }
  .table--stack td.empty::before { content: none; }
}

/* ================================================================
   Small screens — density pass
   Phones get tighter padding and smaller ornaments so a page shows
   more than two cards at a time. Nothing here changes desktop.
   ================================================================ */
@media (max-width: 640px) {
  .card { padding: 1.05rem 1rem; border-radius: var(--radius); }

  /* A 4:5 photo is taller than a phone screen. Crop it to a band — object-fit
     is already cover — so the hero reads as a section, not a wallpaper. The
     px ceiling keeps large phones and tablets in the same place. */
  .hero__art img { max-height: min(52vh, 400px); }
  .hero { padding-block: clamp(1.5rem, 1rem + 3vw, 2.5rem); }
  .section { padding-block: var(--section-y); }

  .btn { padding: 0.72rem 1.3rem; }
  .btn--lg { padding: 0.82rem 1.45rem; font-size: var(--step-0); }
  .btn--sm { padding: 0.45rem 0.9rem; font-size: 0.76rem; }
  /* A lone button in a stack is easier to hit at full width. */
  .cluster > .btn:only-child { width: 100%; }

  /* Paired CTAs stay side by side on a phone rather than stacking. They split
     the row evenly and their labels wrap onto a second line when the width is
     tight — the point is to shrink to fit, never to clip a label. */
  .cluster--cta { flex-wrap: nowrap; gap: 0.5rem; align-items: stretch; }
  .cluster--cta > .btn { flex: 1 1 0; min-width: 0; }
  .cluster--cta > .btn:only-child { width: auto; }
  .cluster--cta > .btn,
  .cluster--cta > .btn--lg {
    padding: 0.7rem 0.75rem; font-size: 0.82rem; gap: 0.35rem;
    white-space: normal; text-align: center; line-height: 1.25;
  }
  /* The trailing arrow is decoration; it may go, the words may not. */
  .cluster--cta > .btn > i { flex: none; }

  /* The hero's two feature pills share one row, scaled down to fit. */
  .pill-row--inline { flex-wrap: nowrap; gap: 0.4rem; }
  .pill-row--inline .pill {
    flex: 0 1 auto; min-width: 0; padding: 0.35rem 0.65rem;
    font-size: 0.7rem; gap: 0.3rem;
  }
  .pill-row--inline .pill i { flex: none; }

  /* KPI tiles pair up instead of becoming a single tall column. */
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .stat-tile {
    flex-direction: column; align-items: flex-start;
    gap: 0.45rem; padding: 0.7rem 0.75rem; min-height: 0;
  }
  .stat-tile__icon { width: 32px; height: 32px; border-radius: 10px; font-size: 0.8rem; }
  .stat-tile__label { font-size: 0.62rem; letter-spacing: 0.07em; }
  .stat-tile__value { font-size: 1.15rem; }
  .stat-tile__hint { font-size: 0.66rem; }

  .quick-actions { padding: 0.65rem 0.75rem; gap: 0.4rem; }
  .quick-actions__label { width: 100%; margin: 0 0 0.15rem; }

  .ring { width: 96px; height: 96px; }
  .ring__inner { width: 74px; height: 74px; }
  .ring__value { font-size: 1.2rem; }

  .row-item { padding: 0.7rem 0.8rem; gap: 0.65rem; }
  .row-item__index { width: 28px; height: 28px; border-radius: 9px; font-size: 0.75rem; }

  .card__icon { width: 44px; height: 44px; border-radius: 14px; margin-bottom: 0.9rem; }
  .eyebrow { letter-spacing: 0.14em; margin-bottom: 0.7rem; }
  .rule { width: 56px; height: 4px; margin-bottom: 1.1rem; }
  .quote { padding-left: 0.9rem; }
  .tick-list li { padding-left: 1.7rem; }

  .accordion__head { padding: 0.9rem 1rem; gap: 0.6rem; }
  .accordion__title { font-size: var(--step-0); }
  .accordion__meta { white-space: normal; text-align: right; }

  .alert { padding: 0.75rem 0.85rem; }
  .pagination a, .pagination span { padding: 0.4rem 0.7rem; }
  .empty { padding: 2rem 0.75rem; }

  /* Auth pages: the card should not float in the middle of a tall screen. */
  .auth__main { padding: 1.75rem var(--gutter) 2.5rem; align-items: start; }
  .auth__logo { width: 64px; height: 64px; margin-bottom: 1rem; }

  .site-footer { padding-block: 2.25rem 1.5rem; }
  .footer-bottom { margin-top: 1.75rem; padding-top: 1.1rem; gap: 0.5rem; }
  .social { width: 36px; height: 36px; }
}

/* Very narrow phones (320–360px). */
@media (max-width: 380px) {
  .cluster--cta > .btn, .cluster--cta > .btn--lg { padding: 0.6rem 0.5rem; font-size: 0.75rem; }
  .pill-row--inline .pill { padding: 0.3rem 0.5rem; font-size: 0.64rem; }
  .stat-grid { grid-template-columns: 1fr; }
  .brand__tag { letter-spacing: 0.16em; }
  .table--stack td { grid-template-columns: minmax(0, 6rem) minmax(0, 1fr); gap: 0.5rem; }
}

/* ============================================================
   Modal — a centred dialog over a scrim. Used for the contact
   form's success confirmation; opened and closed from JS.
   ============================================================ */
.modal {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  padding: var(--gutter);
  background: rgba(46, 58, 82, 0.5); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.28s var(--ease);
}
.modal.is-open { opacity: 1; pointer-events: auto; }

.modal__box {
  position: relative; width: min(440px, 100%);
  background: var(--paper); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 2.25rem 1.75rem 1.9rem;
  text-align: center;
  transform: translateY(14px) scale(0.97);
  transition: transform 0.32s var(--ease);
}
.modal.is-open .modal__box { transform: none; }

.modal__icon {
  width: 64px; height: 64px; margin: 0 auto 1.1rem;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--ok-bg); color: var(--ok); font-size: 1.75rem;
}
.modal__title { font-size: var(--step-2); margin-bottom: 0.5rem; }
.modal__text { color: var(--ink-soft); margin-bottom: 1.6rem; }

.modal__close {
  position: absolute; top: 0.7rem; right: 0.7rem;
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); cursor: pointer;
  display: grid; place-items: center; font-size: 1rem;
  transition: background 0.25s, color 0.25s;
}
.modal__close:hover { background: var(--blue-50); color: var(--blue); }

body.is-modal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .modal, .modal__box { transition: none; }
}

/* ================================================================
   Plan picker — checkout and the membership page
   ================================================================ */
.plan-picker {
  display: grid; gap: 0.8rem; margin-top: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.plan-option {
  position: relative; display: block; cursor: pointer;
  padding: 1rem 1.05rem;
  background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius);
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.plan-option:hover { border-color: var(--line-strong); }
.plan-option.is-selected { border-color: var(--rose); background: var(--rose-50); box-shadow: var(--shadow-sm); }
/* The radio stays reachable by keyboard but the whole card is the target. */
.plan-option input {
  position: absolute; top: 1rem; right: 1rem;
  width: 18px; height: 18px; accent-color: var(--rose); cursor: pointer;
}
.plan-option__body { display: block; padding-right: 1.6rem; }
.plan-option__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.plan-option__price {
  display: block; margin-bottom: 0.35rem;
  font-family: 'Quicksand', ui-rounded, sans-serif;
  font-size: var(--step-2); font-weight: 700; color: var(--blue-700);
}
.plan-option__per { font-size: var(--step--1); font-weight: 600; color: var(--muted); }

.plan-months {
  margin-top: 1.1rem; padding: 1rem;
  background: var(--butter-50); border: 1px solid var(--line); border-radius: var(--radius);
}
.plan-months__row { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.5rem; }
.plan-months__row .select { flex: 1 1 auto; min-width: 0; }
.plan-step {
  flex: none; width: 42px; height: 42px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid var(--line-strong); background: var(--paper); color: var(--blue-700);
  display: grid; place-items: center;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.plan-step:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

/* A grouped block of related settings inside a longer admin form. */
.fieldset {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.15rem 1.3rem; margin: 0;
}
.fieldset > legend { font-size: var(--step-1); }

/* The monthly card on the public membership page. */
.price-card__per { font-size: var(--step-0); font-weight: 600; color: var(--muted); }
.plan-note {
  display: flex; align-items: flex-start; gap: 0.55rem;
  margin-top: 1rem; padding: 0.75rem 0.9rem;
  background: var(--mint-100); border-radius: var(--radius-sm);
  font-size: var(--step--1); color: var(--ink-soft);
}
.plan-note i { color: var(--mint-700); margin-top: 0.15rem; }

@media (max-width: 640px) {
  .plan-picker { grid-template-columns: minmax(0, 1fr); }
  .plan-option { padding: 0.85rem 0.9rem; }
  .plan-step { width: 38px; height: 38px; }
}

/* ================================================================
   Membership cards — the two plans on the public page
   ================================================================ */
.plan-card { display: flex; flex-direction: column; }
.plan-card__price { margin: 1.2rem 0 0.4rem; }
/* The call to action sits on the floor of the card, so two cards of
   different heights still line their buttons up. */
.plan-card__foot { margin-top: auto; padding-top: 1.6rem; }
.plan-card--featured { border: 2px solid var(--rose-200); box-shadow: var(--shadow-lg); }
/* Both cards' buttons match, whatever their labels do at a given width. */
.plan-card__cta { min-height: 56px; text-align: center; }

/* ================================================================
   Joining — the one-page registration
   ================================================================ */
/* No panels here. Joining is one continuous page, and boxing each part of it
   in its own white card only made the page longer and the shape harder to
   read. Sections are told apart by a heading and a hairline, and the only
   white left is inside the inputs, where it means "type here". */
.join { --join-line: 1px solid var(--line); }

.join-section { padding-bottom: 1.1rem; margin-bottom: 1.1rem; border-bottom: var(--join-line); }
.join-section:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.join-section__title {
  display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.7rem;
  font-family: 'Quicksand', ui-rounded, sans-serif;
  font-size: var(--step-0); font-weight: 700; color: var(--blue-700);
}
.join-section__title i { color: var(--rose-700); font-size: 0.95em; }

/* Everything about joining is a notch tighter than the rest of the site: the
   whole thing has to be taken in at a glance. */
.join .field { margin-bottom: 0.6rem; }
.join .field__label { font-size: 0.76rem; margin-bottom: 0.22rem; }
.join .field__hint { font-size: 0.7rem; margin-top: 0.18rem; }
.join .input, .join .select, .join .textarea {
  padding: 0.5rem 0.7rem; font-size: 0.92rem; border-radius: 10px;
}
.join .textarea { min-height: 68px; }
.join .select { background-position: right 0.8rem center, right 0.55rem center; padding-right: 1.9rem; }
.join .error { font-size: 0.72rem; margin-top: 0.18rem; }
.join .alert { padding: 0.6rem 0.8rem; font-size: 0.82rem; }

/* Fields that belong on one line: expiry and CVV, city and postcode. */
.join-row { display: grid; gap: 0.6rem; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }

/* The plan choice keeps its outline — it is a control, and has to look like
   one — but sheds the fill that made it a card. */
.join .plan-picker { gap: 0.5rem; margin-top: 0; }
.join .plan-option { padding: 0.6rem 0.7rem; background: transparent; border-width: 1.5px; }
.join .plan-option.is-selected { background: var(--rose-50); }
.join .plan-option input { top: 0.6rem; right: 0.6rem; width: 15px; height: 15px; }
.join .plan-option__body { padding-right: 1.3rem; }
.join .plan-option__head { gap: 0.35rem; margin-bottom: 0.2rem; }
.join .plan-option__price { font-size: var(--step-0); margin-bottom: 0.1rem; }
.join .plan-months { margin-top: 0.6rem; padding: 0.6rem 0.7rem; background: transparent; border: var(--join-line); }
.join .plan-months__row { gap: 0.4rem; }
.join .plan-step { width: 34px; height: 34px; border-radius: 9px; }
.join .plan-note { margin-top: 0.6rem; padding: 0.55rem 0.7rem; font-size: 0.78rem; }

/* The summary: a column of facts beside the form, not a panel on top of it. */
.join-summary { position: sticky; top: 84px; }
.join-summary__row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.42rem 0; border-bottom: var(--join-line); font-size: 0.85rem;
}
.join-summary__total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 0.7rem; font-family: 'Quicksand', ui-rounded, sans-serif;
  font-size: var(--step-1); font-weight: 700; color: var(--blue-700);
}
.join-summary .tick-list { margin-top: 0.7rem; font-size: 0.8rem; }
.join-summary .tick-list li { margin-bottom: 0.3rem; }

@media (max-width: 900px) {
  .join-summary { position: static; padding-top: 1.1rem; border-top: var(--join-line); }
}

/* Wallets and bank transfer: a row of buttons above the card form, not tabs. */
.pay-quick {
  display: grid; gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
}
.pay-quick__btn {
  display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 44px; padding: 0.5rem 0.9rem; cursor: pointer;
  border: 1.5px solid var(--line-strong); border-radius: 999px;
  background: transparent; color: var(--blue-700);
  font-family: 'Quicksand', ui-rounded, sans-serif; font-size: 0.86rem; font-weight: 700;
  transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.2s;
}
.pay-quick__btn:hover { transform: translateY(-1px); border-color: var(--blue); }

/* The wallet marks are the brands' own and carry their own wordmark, so the
   buttons show the mark alone — the accessible name is on the button. Both are
   inline SVG: a payment button whose only content comes from a CDN webfont is
   an empty box on the day that font does not arrive. */
.pay-quick__btn--wallet { padding-inline: 1.2rem; }
.pay-quick__btn--applepay { background: #000; border-color: #000; color: #fff; }
.pay-quick__btn--applepay:hover { background: #1c1c1e; border-color: #1c1c1e; }
.pay-quick__btn--googlepay { background: #fff; border-color: #dadce0; color: #3c4043; }
.pay-quick__btn--googlepay:hover { background: #f8f9fa; border-color: #202124; }
.pay-quick__mark { display: block; height: 24px; width: auto; }

/* A rule with the alternative written into it. */
.pay-or {
  display: flex; align-items: center; gap: 0.7rem;
  margin: 0.9rem 0 0.7rem; color: var(--muted);
  font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.pay-or::before, .pay-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.join-card-mark {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.join-card-mark i { font-size: 0.85rem; color: var(--blue); }

/* Bank details, shown as facts rather than as a table in a box. */
.join-bank { padding: 0.6rem 0.8rem; border: var(--join-line); border-radius: var(--radius-sm); margin-bottom: 0.7rem; }
.join-bank .join-summary__row:last-child { border-bottom: 0; }

@media (max-width: 640px) {
  .join-row { --cols: 1; }
  .join-row--keep { --cols: 2; }
}

/* ================================================================
   Ebooks — the shop, a book's page, and the buyer's library
   ================================================================ */
/* auto-*fill*, not auto-fit: a shop with one book in it should show one
   book-sized card, not one card stretched across the whole page. */
.ebook-grid {
  display: grid; gap: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
}

.ebook-card { display: flex; flex-direction: column; }
.ebook-card__cover {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius-sm); background: var(--cream);
  aspect-ratio: 3 / 4;
}
.ebook-card__cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s var(--ease);
}
.ebook-card:hover .ebook-card__cover img { transform: scale(1.04); }
.ebook-card__flag { position: absolute; top: 0.6rem; left: 0.6rem; }
/* The price and the button sit on the floor, so a row of cards lines up. */
.ebook-card__foot { margin-top: auto; padding-top: 1rem; }

.ebook-hero__cover {
  width: 100%; max-width: 340px; display: block;
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.ebook-facts { margin: 1.2rem 0 0; max-width: 340px; }
.ebook-facts > div { margin: 0; }
.ebook-facts dt, .ebook-facts dd { margin: 0; }

.library-row { display: flex; gap: 1rem; align-items: flex-start; }
.library-row__cover {
  flex: none; width: 82px; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
}

@media (max-width: 640px) {
  .ebook-hero__cover { max-width: 240px; margin-inline: auto; }
  .library-row__cover { width: 64px; }
}

/* ================================================================
   Website content editor (admin)
   ================================================================ */
.content-tile { display: block; }
.content-tile__meta { margin-top: 1rem; }

.content-form { max-width: 860px; }
.content-group { margin-bottom: 1.4rem; }
.content-group__head { border-bottom: 1px solid var(--line); padding-bottom: 0.9rem; margin-bottom: 1.2rem; }
.content-group__head .h4 { margin-bottom: 0.2rem; }

.content-form__foot {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  padding: 1rem; margin-top: 1.4rem;
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.content-reset { margin-top: 1.6rem; }

/* ---------------------------------------------------------- image slot -- */
.content-image {
  display: grid; grid-template-columns: 140px minmax(0, 1fr);
  gap: 1.1rem; align-items: start;
  padding: 1rem; margin-bottom: 1.1rem;
  background: var(--butter-50); border: 1px solid var(--line); border-radius: var(--radius);
}
.content-image__preview {
  border-radius: var(--radius-sm); overflow: hidden;
  background: var(--paper); border: 1px solid var(--line);
}
.content-image__preview img { display: block; width: 100%; height: 140px; object-fit: cover; }
.content-image__body > * + * { margin-top: 0.6rem; }
.content-image__size { font-size: var(--step--1); }
.content-image__size i { color: var(--mint); }
.content-image__size strong { color: var(--blue-700); }
.content-image__remove {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: var(--step--1); color: var(--err); cursor: pointer;
}

/* ----------------------------------------------------------- repeaters -- */
.repeater {
  padding: 1rem; margin-bottom: 1.1rem;
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
}
.repeater__head { margin-bottom: 0.9rem; }
.repeater__row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 36px;
  gap: 0.7rem; align-items: start;
  padding: 0.85rem; margin-bottom: 0.7rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.repeater__handle {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: var(--blue-50); color: var(--blue-700);
  font-size: 0.78rem; font-weight: 700;
}
.repeater__fields { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.repeater__fields .field { margin: 0; }
.repeater__remove {
  width: 36px; height: 36px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--err);
  transition: background 0.25s, border-color 0.25s;
}
.repeater__remove:hover { background: var(--err-bg); border-color: var(--err); }
[data-repeater-add][disabled] { opacity: 0.5; pointer-events: none; }

@media (max-width: 640px) {
  .content-image { grid-template-columns: minmax(0, 1fr); }
  .content-image__preview img { height: 180px; }
  .repeater__row { grid-template-columns: 30px minmax(0, 1fr); }
  .repeater__remove { grid-column: 2; justify-self: end; }
  .content-form__foot { padding: 0.85rem; gap: 0.6rem; }
}

/* ---------------------------------------------------- design credit -- */
.footer-credit a { color: var(--butter); font-weight: 700; }
.footer-credit a:hover { color: #fff; text-decoration: underline; }

@media print {
  .site-header, .site-footer, .sidebar, .panel-top, .btn { display: none !important; }
  body { background: #fff; }
}