/* ============================================================
   Tutorise, base styles & design tokens
   ============================================================ */

/* The hidden attribute must win.
   Its only backing is a user-agent rule, [hidden] { display: none }, which any
   class that sets display beats on specificity. So a button with .btn, a form
   with .chat-composer or a grid with .portal-grid stayed on screen while the
   DOM said hidden, and every check that asked el.hidden agreed it was hidden.

   Found on four pages at once: Remove picture offered with no picture to
   remove, the chat composer sitting there before a conversation was chosen,
   the repeat-until fields showing for a one-off slot, and a Cancel button on a
   form with nothing to cancel. .combo-list[hidden] had already been patched
   individually, which suggests this had been met before and treated as a
   one-off. */
[hidden] { display: none !important; }

:root {
  --green:       #1a3c1a;
  --green-dark:  #112611;
  --green-mid:   #245024;
  --green-pale:  #edf3ed;
  --gold:        #c58c1c;
  --gold-light:  #daa740;
  --white:       #ffffff;
  --off-white:   #f8f8f6;
  --text:        #171717;
  --text-2:      #555555;
  --text-3:      #888888;
  --border:      #e2e2de;
  --radius:      12px;

  /* ---- Semantic aliases (map onto the existing palette) ---- */
  --brand:        var(--green);
  --brand-soft:   var(--green-pale);
  --brand-strong: var(--green-dark);
  --accent:       var(--gold);
  --accent-soft:  var(--gold-light);
  --surface:      var(--white);
  --surface-2:    var(--off-white);
  --muted:        var(--text-2);

  --header-h:     72px;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  line-height: 1.2;
}

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

img {
  max-width: 100%;
  display: block;
}

ul, ol {
  list-style: none;
}

button {
  font-family: inherit;
}

/* ---------- Layout helpers ---------- */
.section-wrap {
  max-width: 1120px;
  margin: 0 auto;
}

/* Marketing page only. Every portal page loads this stylesheet as well as
   portal.css, so as a bare element selector this put 5.5rem, 88px, of padding
   above and below every <section> in the portal, and horizontal padding that
   ate width on a phone. That is the unexplained blank band above the admin
   console's filters and between the calendar's filters and its grid: both
   pages wrap their content in a <section>. */
body:not(.portal) section {
  padding: 5.5rem clamp(1rem, 3vw, 2.5rem);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

/* The hero is the exception and has to be stated here rather than on .hero,
   because the rule above is more specific than a bare class and its `padding`
   SHORTHAND silently overwrote `padding-bottom: 0`. That put 5.5rem of empty
   space under the phone on every screen size.

   The phone image is cropped flat across the bottom, so it has to meet the
   section's bottom edge exactly or the cut reads as a mistake. The sides still
   come from the shorthand above, which is what keeps the copy off the screen
   edge on a narrow window. */
body:not(.portal) section.hero {
  padding-top: 4.5rem;
  padding-bottom: 0;
}

/* ---------- Accessibility: focus ---------- */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.7rem 1.25rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-accent {
  background: linear-gradient(135deg, var(--accent-soft), var(--accent));
  color: var(--brand-strong);
  box-shadow: 0 6px 16px -7px rgba(197,140,28,.55);
}
.btn-accent:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(197,140,28,.65); }

.btn-outline {
  background: transparent;
  color: var(--brand);
  border-color: var(--border);
}
.btn-outline:hover { border-color: var(--brand); background: var(--brand-soft); }

.btn-block { width: 100%; }
.btn-lg { padding: 0.95rem 1.7rem; font-size: 1rem; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border-bottom-color: var(--border);
  box-shadow: 0 8px 28px -20px rgba(17,38,17,.55);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--header-h);
  padding: 0.7rem clamp(1rem, 3vw, 2.5rem);
}

/* Brand / logo */
.brand { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--brand); }
.brand-mark { color: var(--accent); display: inline-flex; }
.brand-name {
  font-family: 'DM Serif Display', serif;
  font-size: 1.55rem;
  line-height: 1;
  color: var(--brand);
  letter-spacing: .2px;
}

/* Desktop nav (centred) */
.nav-desktop { display: flex; gap: 1.5rem; margin: 0 auto; }
.nav-desktop a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--muted);
  position: relative;
  padding: 0.35rem 0;
  white-space: nowrap;
  transition: color .2s ease;
}
.nav-desktop a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.nav-desktop a:hover { color: var(--brand); }
.nav-desktop a:hover::after { transform: scaleX(1); }

/* Right actions */
.header-actions { display: flex; align-items: center; gap: 1rem; }
.link-signin {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  transition: color .2s ease;
}
.link-signin:hover { color: var(--brand); }

/* Burger */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.burger span {
  width: 24px; height: 2px;
  background: var(--brand);
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1rem clamp(1rem, 3vw, 2.5rem) 1.6rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
  animation: menuDrop .25s ease;
}
.mobile-nav { display: flex; flex-direction: column; }
.mobile-nav a {
  padding: 0.85rem 0.2rem;
  font-weight: 500;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.mobile-actions { display: flex; flex-direction: column; gap: 0.6rem; }

@keyframes menuDrop {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mobile-signin { display: none; }

@media (max-width: 940px) {
  .nav-desktop, .header-actions { display: none; }
  .burger { display: flex; }
  .brand-name { margin-right: auto; }
  .mobile-menu:not([hidden]) { display: flex; }
  .mobile-signin {
    display: inline-flex; align-items: center;
    font-size: 0.92rem; font-weight: 600; color: var(--text);
    padding: 0.4rem 0.7rem; border: 1px solid var(--border); border-radius: 999px;
  }
  .mobile-signin:hover { color: var(--brand); border-color: var(--brand); }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: 4.5rem;
  padding-bottom: 0; /* phone cutoff sits flush with the hero's bottom line */
  background:
    radial-gradient(1100px 560px at 88% -12%, var(--brand-soft), transparent 60%),
    radial-gradient(820px 480px at -8% 112%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 58%),
    var(--surface-2);
}

/* Subtle academic-mark background pattern */
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-bg span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-family: 'DM Serif Display', serif;
  font-size: var(--s);
  color: var(--brand);
  opacity: 0.05;
  transform: rotate(var(--r));
  user-select: none;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: stretch;
}
.hero-copy { align-self: center; padding-bottom: 3rem; }

/* Rating badge */
.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  font-size: 0.88rem;
  color: var(--muted);
  box-shadow: 0 10px 26px -18px rgba(17,38,17,.5);
}
.rating-stars { color: var(--accent); letter-spacing: 1.5px; font-size: 0.85rem; }
.rating-text strong { color: var(--text); font-weight: 700; }

/* Headline */
.hero-title {
  font-size: clamp(3rem, 6.4vw, 5.2rem);
  line-height: 1.0;
  letter-spacing: -1px;
  margin: 1.6rem 0 1.4rem;
}
.hero-title .line { display: block; }
.hero-title .line + .line { margin-top: 0.1em; }
.w-real    { color: #131613; }
.w-tutors  { color: var(--accent); }
.w-results { color: var(--brand); }

.hero-sub {
  font-size: 1.14rem;
  color: var(--muted);
  max-width: 31rem;
  margin-bottom: 2.2rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 2.4rem; }

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  padding-top: 1.7rem;
  border-top: 1px solid var(--border);
}
.hero-trust li { font-size: 0.92rem; color: var(--muted); padding-left: 1.5rem; position: relative; }
.hero-trust li::before {
  content: '✓';
  position: absolute; left: 0; top: 0;
  color: var(--accent);
  font-weight: 700;
}
.hero-trust strong { color: var(--text); font-weight: 700; }

/* ---------- Hero phone visual ---------- */
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end; /* anchor the phone to the bottom (the hero line) */
  align-self: end;
}

/* Static top-half iPhone cutout (already cropped + transparent by the
   Python script, no CSS cropping, masking, fading or animation). */
.hero-phone {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 0 auto -1px; /* flat cut aligns exactly with the hero's bottom line */
  filter: drop-shadow(0 30px 55px rgba(17, 38, 17, 0.26));
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.report-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.4rem 1.4rem 1.25rem;
  box-shadow: 0 40px 90px -45px rgba(17,38,17,.5);
}
.report-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}
.report-tag {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-soft);
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
}
.report-stamp { font-size: 0.74rem; color: var(--text-3); }

.report-student {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.4rem;
}
.report-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--surface);
  background: linear-gradient(135deg, var(--brand-mid, var(--green-mid)), var(--brand));
}
.report-name { font-weight: 700; font-size: 0.95rem; }
.report-meta { font-size: 0.78rem; color: var(--text-3); }

.report-list { display: flex; flex-direction: column; }
.report-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
}
.report-item dt { color: var(--text-3); font-size: 0.82rem; }
.report-item dd { font-weight: 600; font-size: 0.88rem; text-align: right; }
.report-done { color: var(--green-mid); }

.report-grade { flex-direction: column; align-items: stretch; gap: 0.5rem; }
.report-grade dt { font-size: 0.82rem; }
.grade-track { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.85rem; }
.grade-from { color: var(--text-3); }
.grade-arrow { color: var(--accent); }
.grade-to { color: var(--brand); }
.bar { display: block; height: 8px; background: var(--brand-soft); border-radius: 999px; overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green-mid), var(--accent)); }

.report-note { padding-top: 0.9rem; }
.report-note-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--text-3);
}
.report-note p { font-size: 0.86rem; color: var(--text-2); margin-top: 0.3rem; font-style: italic; }

/* Floating chips */
.floati {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.6rem 0.85rem;
  box-shadow: 0 24px 50px -28px rgba(17,38,17,.55);
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.floati strong { font-size: 0.95rem; }
.floati span { font-size: 0.72rem; color: var(--text-3); }
.floati--rating { top: 6%; left: -4%; }
.floati--rating strong { font-family: 'DM Serif Display', serif; color: var(--brand); font-size: 1.3rem; }
.floati--rating span { color: var(--accent); letter-spacing: 1px; }
.floati--grade { bottom: 24%; right: -4%; }
.floati--grade strong { color: var(--green-mid); }

/* ---------- Entrance animation ---------- */
[data-anim] {
  opacity: 0;
  transform: translateY(16px);
  animation: heroIn .7s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes heroIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Hero responsive ---------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 38rem; }
  .hero-visual { margin-top: 0.5rem; }
}
@media (max-width: 540px) {
  .report-card { max-width: 100%; }
  .floati--rating { left: 0; top: -2%; }
  .floati--grade { right: 0; bottom: -2%; }
}
@media (max-width: 380px) {
  .floati { display: none; }
}

/* ============================================================
   TRUST MARQUEE
   ============================================================ */
.trust {
  padding-top: 3rem;
  padding-bottom: 3rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.trust-label {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 2rem;
  padding-left: clamp(1rem, 3vw, 2.5rem);
  padding-right: clamp(1rem, 3vw, 2.5rem);
}

.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  /* Fade edges */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: marqueeScroll 64s linear infinite;
  will-change: transform;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.logo-card {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 158px;
  height: 78px;
  margin: 0 0.625rem; /* uniform spacing both sides → seamless -50% loop */
  padding: 0 1.4rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.logo-card img {
  max-width: 100%;
  max-height: 38px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.6;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

@media (max-width: 540px) {
  .logo-card { width: 132px; height: 68px; }
  .logo-card img { max-height: 32px; }
}

/* Reduced motion → static wrapped row, no animation */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .marquee-track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
  .marquee-track .logo-card[aria-hidden="true"] { display: none; }
}

/* ============================================================
   SECTION HEADINGS (shared)
   ============================================================ */
.section-head { max-width: 40rem; margin: 0 auto 3rem; text-align: center; }
.section-label {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
}
.section-title { font-size: clamp(1.9rem, 4vw, 2.8rem); color: var(--text); }
.section-intro { margin-top: 1rem; font-size: 1.08rem; color: var(--muted); }

/* ============================================================
   SERVICES
   ============================================================ */
.services { background: var(--surface-2); }

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.service-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.9rem 1.7rem;
  box-shadow: 0 18px 40px -32px rgba(17,38,17,.5);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* Gold top-border animation on hover */
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 50px -30px rgba(17,38,17,.55);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.service-card:hover::before { transform: scaleX(1); }

.service-icon {
  display: inline-grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 12px;
  color: var(--brand);
  background: var(--brand-soft);
  margin-bottom: 1.2rem;
}
.service-name { font-size: 1.3rem; color: var(--text); margin-bottom: 0.6rem; }
.service-desc { font-size: 0.95rem; color: var(--muted); margin-bottom: 1.2rem; }

.service-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.service-tags li {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--green-mid);
  background: var(--brand-soft);
  border-radius: 999px;
  padding: 0.32rem 0.7rem;
}

@media (max-width: 900px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   WHY TUTORISE
   ============================================================ */
.why { background: var(--surface); }

.why-layout {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

/* Left intro panel */
.why-intro {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2.2rem;
}
.why-title {
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  color: var(--text);
  margin: 0.9rem 0 1rem;
}
.why-lead { font-size: 1.02rem; color: var(--muted); }

.why-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--border);
}
.why-flow li {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--brand);
  background: var(--brand-soft);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
}
.why-flow .why-flow-sep {
  background: none;
  padding: 0;
  color: var(--accent);
  font-weight: 600;
}

/* Right feature grid */
.why-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.why-card {
  display: flex;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem 1.4rem;
  box-shadow: 0 18px 40px -34px rgba(17,38,17,.5);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.why-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 50px -32px rgba(17,38,17,.5);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
}
.why-icon {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  color: var(--brand);
  background: var(--brand-soft);
}
.why-name { font-size: 1.08rem; color: var(--text); margin-bottom: 0.35rem; }
.why-desc { font-size: 0.9rem; color: var(--muted); line-height: 1.55; }

@media (max-width: 900px) {
  .why-layout { grid-template-columns: 1fr; }
  .why-intro { position: static; }
}
@media (max-width: 560px) {
  .why-features { grid-template-columns: 1fr; }
}

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews { background: var(--surface-2); overflow: hidden; }
.reviews-head { margin-bottom: 2.5rem; }
.reviews-summary {
  margin-top: 1.2rem;
  font-size: 0.95rem;
  color: var(--muted);
}
.reviews-summary .stars { color: var(--accent); letter-spacing: 1px; margin-right: .35rem; }
.reviews-summary strong { color: var(--text); }

.reviews-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
}

.reviews-viewport {
  flex: 1 1 auto;
  min-width: 0; /* allow the flex child to shrink so the section never overflows */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 1.5rem;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.reviews-viewport::-webkit-scrollbar { display: none; }
.reviews-viewport:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 16px; }
.reviews-viewport.is-dragging { scroll-behavior: auto; cursor: grabbing; }
.reviews-viewport.is-dragging .review-card { cursor: grabbing; }

.reviews-track {
  display: flex;
  gap: 1.25rem;
  /* Generous inner padding so the card shadows sit fully inside the scroll
     viewport (which clips overflow), preventing a hard cut-off line and
     stopping the first/last cards from touching the edges. */
  padding: 1rem 1.5rem 2.75rem;
  width: max-content;
}

/* Chat-mockup review card */
.review-card {
  flex: 0 0 344px;
  max-width: 84vw;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 16px 38px -28px rgba(17,38,17,.34);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  user-select: none;
}
.review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 46px -30px rgba(17,38,17,.36);
  border-color: color-mix(in srgb, var(--accent) 26%, var(--border));
}

/* Header */
.rev-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.1rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.rev-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--surface);
  background: linear-gradient(135deg, var(--green-mid), var(--brand));
}
.rev-id { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.rev-role { font-weight: 600; font-size: 0.9rem; color: var(--text); }
.rev-status { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.74rem; color: var(--text-3); }
.rev-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green-mid);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-mid) 22%, transparent);
}
.rev-brand { margin-left: auto; color: var(--accent); display: inline-flex; opacity: .85; }

/* Message thread */
.rev-thread {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.15rem 1.1rem;
  background:
    radial-gradient(700px 320px at 110% -20%, var(--brand-soft), transparent 60%),
    var(--surface);
}
.rev-bubble {
  align-self: flex-start;
  max-width: 92%;
  background: var(--brand-soft);
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.5;
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  border-top-left-radius: 5px;
}
.rev-bubble + .rev-bubble { border-top-left-radius: 14px; }

/* Footer */
.rev-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.8rem 1.1rem;
  border-top: 1px solid var(--border);
}
.rev-tag {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--green-mid);
  background: var(--brand-soft);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
}
.rev-stars { color: var(--accent); letter-spacing: 2px; font-size: 0.9rem; }

.rev-arrow {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--brand);
  cursor: pointer;
  box-shadow: 0 12px 28px -20px rgba(17,38,17,.5);
  transition: transform .2s ease, border-color .2s ease, background .2s ease, opacity .2s ease;
}
.rev-arrow:hover { border-color: var(--brand); background: var(--brand-soft); transform: translateY(-2px); }
.rev-arrow:disabled { opacity: .4; cursor: default; transform: none; }

@media (max-width: 700px) {
  /* Keep the same drag interaction, just ~25% smaller so it feels less oversized */
  .reviews { padding-top: 3.75rem; padding-bottom: 3.75rem; }
  .rev-arrow { display: none; } /* natural swipe on mobile */
  .reviews-track { gap: 0.9rem; }
  .review-card { flex-basis: 228px; max-width: 76vw; border-radius: 14px; }
  .rev-head { padding: 0.65rem 0.8rem; gap: 0.55rem; }
  .rev-avatar { width: 32px; height: 32px; font-size: 0.78rem; }
  .rev-role { font-size: 0.82rem; }
  .rev-status { font-size: 0.68rem; }
  .rev-thread { padding: 0.9rem 0.8rem; gap: 0.45rem; }
  .rev-bubble { font-size: 0.84rem; padding: 0.55rem 0.75rem; }
  .rev-foot { padding: 0.65rem 0.8rem; }
  .rev-tag { font-size: 0.68rem; }
  .rev-stars { font-size: 0.82rem; }

  /* Softer, more premium edges on mobile, no harsh shadow/divider lines */
  .reviews-track { padding-top: 0.5rem; padding-bottom: 1.25rem; }
  .review-card {
    box-shadow: 0 12px 26px -20px rgba(17,38,17,.28);
    border-color: color-mix(in srgb, var(--border) 55%, var(--surface));
  }
  .rev-head { border-bottom-color: color-mix(in srgb, var(--border) 45%, var(--surface)); }
  .rev-foot { border-top-color: color-mix(in srgb, var(--border) 45%, var(--surface)); }
}

/* ============================================================
   FUTURE PATHWAYS
   ============================================================ */
.paths { background: var(--surface); }

.paths-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.85rem;
  max-width: 1180px;
  margin: 0 auto;
}

.path-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 44px -34px rgba(17,38,17,.5);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.path-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 56px -32px rgba(17,38,17,.5);
  border-color: color-mix(in srgb, var(--accent) 26%, var(--border));
}

.path-media {
  position: relative;
  height: 220px; /* image is now ~50% of card height and visually dominant */
  background: var(--brand-strong); /* fallback while image loads */
  color: rgba(255,255,255,.95);
  display: flex;
  align-items: flex-end;
  padding: 0.9rem;
  overflow: hidden;
}
.path-media img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* consistent framing, no distortion */
  object-position: center;
}
.path-media::after { /* green-tinted overlay so pill/icon stay readable */
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(17,38,17,.30) 0%, rgba(17,38,17,.05) 38%, rgba(17,38,17,.55) 100%),
    radial-gradient(180px 120px at 82% 8%, rgba(255,255,255,.12), transparent 70%);
  pointer-events: none;
  z-index: 1;
}
.path-pill { z-index: 2; }
.path-icon { position: relative; z-index: 2; }
.path-card:hover .path-media img { transform: scale(1.04); }
.path-media img { transition: transform .35s ease; }
.path-pill {
  position: absolute;
  top: 0.85rem;
  left: 0.9rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--white);
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  backdrop-filter: blur(4px);
}
.path-icon { display: inline-flex; opacity: .95; }

.path-body { padding: 1.5rem 1.6rem 1.7rem; }
.path-title { font-size: 1.42rem; color: var(--text); margin-bottom: 0.5rem; }
.path-desc { font-size: 0.97rem; color: var(--muted); line-height: 1.55; }

.paths-foot { text-align: center; margin-top: 2.2rem; font-size: 0.85rem; color: var(--text-3); }

@media (max-width: 900px) {
  .paths-grid { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
  .path-media { height: 190px; }
}
@media (max-width: 560px) {
  .paths-grid { grid-template-columns: 1fr; }
  .path-media { height: 200px; }
  .path-title { font-size: 1.35rem; }
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how { background: var(--surface-2); }

.how-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
/* Subtle connecting line behind the cards on desktop */
.how-steps::before {
  content: '';
  position: absolute;
  top: 46px;
  left: 16%;
  right: 16%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--border) 12%, var(--border) 88%, transparent);
  z-index: 0;
}

.how-step {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 2rem 1.7rem;
  box-shadow: 0 18px 44px -34px rgba(17,38,17,.5);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.how-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 54px -32px rgba(17,38,17,.5);
  border-color: color-mix(in srgb, var(--accent) 26%, var(--border));
}

.how-num {
  display: block;
  font-family: 'DM Serif Display', serif;
  font-size: 2.4rem;
  line-height: 1;
  color: color-mix(in srgb, var(--accent) 55%, var(--border));
  margin-bottom: 1rem;
}
.how-icon {
  display: inline-grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  color: var(--brand);
  background: var(--brand-soft);
  margin-bottom: 1.1rem;
}
.how-title { font-size: 1.25rem; color: var(--text); margin-bottom: 0.5rem; }
.how-desc { font-size: 0.95rem; color: var(--muted); line-height: 1.55; }

.how-pill {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--green-mid);
  background: var(--brand-soft);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
}

.how-cta { text-align: center; margin-top: 2.6rem; }

@media (max-width: 820px) {
  .how-steps { grid-template-columns: 1fr; gap: 1.1rem; }
  .how-steps::before { display: none; }
}

/* ============================================================
   PRICING & PACKAGES
   ============================================================ */
.pricing { background: var(--surface-2); }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  /* stretch, not start: `start` sized every card to its own content, so the
     tier with the shortest description ended up visibly shorter. The cards are
     flex columns and .price-line already has margin-top:auto, so stretching
     them pins each CTA to the same baseline. */
  align-items: stretch;
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.9rem 1.7rem;
  box-shadow: 0 18px 44px -34px rgba(17,38,17,.5);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.price-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 56px -32px rgba(17,38,17,.5);
  border-color: color-mix(in srgb, var(--accent) 26%, var(--border));
}
/* Subtly highlighted featured card */
.price-card--featured {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 30px 60px -32px rgba(197,140,28,.45);
}
.price-flag {
  position: absolute;
  top: -12px;
  left: 1.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--brand-strong);
  background: linear-gradient(135deg, var(--accent-soft), var(--accent));
  border-radius: 999px;
  padding: 0.32rem 0.8rem;
  box-shadow: 0 8px 18px -8px rgba(197,140,28,.6);
}

.price-title { font-size: 1.4rem; color: var(--text); margin-bottom: 0.5rem; }
.price-desc { font-size: 0.93rem; color: var(--muted); line-height: 1.55; margin-bottom: 1.2rem; }

.price-list { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.4rem; }
.price-list li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.92rem;
  color: var(--text);
}
.price-list li::before {
  content: '✓';
  position: absolute; left: 0; top: 0;
  color: var(--accent);
  font-weight: 700;
}

.price-line {
  font-size: 0.86rem;
  color: var(--text-3);
  margin-top: auto;
  margin-bottom: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.pricing-reassure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.4rem;
  margin-top: 2.4rem;
  font-size: 0.86rem;
  color: var(--muted);
}
.pricing-reassure span { position: relative; padding-left: 1.4rem; }
.pricing-reassure span::before {
  content: '✓';
  position: absolute; left: 0; top: 0;
  color: var(--accent);
  font-weight: 700;
}

@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FINAL CTA / BOOKING
   ============================================================ */
.booking { background: var(--surface); }
.booking-inner {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: clamp(2rem, 4vw, 3.5rem);
}
.booking-title { font-size: clamp(1.9rem, 4vw, 2.8rem); color: var(--text); }
.booking-sub { margin-top: 1rem; font-size: 1.1rem; color: var(--muted); max-width: 34rem; }
.booking-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }
.booking-trust { margin-top: 1.4rem; font-size: 0.9rem; color: var(--text-3); }

.booking-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.7rem;
  box-shadow: 0 24px 50px -34px rgba(17,38,17,.5);
}
.booking-checklist { display: grid; gap: 0.9rem; }
.booking-checklist li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  color: var(--text);
}
.bc-tick {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.8rem;
  color: var(--brand);
  background: var(--brand-soft);
}

@media (max-width: 760px) {
  .booking-inner { grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--surface-2);
  color: var(--text-2);
  border-top: 1px solid var(--border);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 2.2rem;
  padding: 3.5rem clamp(1rem, 3vw, 2.5rem) 2.5rem;
}
.brand--footer { color: var(--brand); }
.brand--footer .brand-mark { color: var(--accent); }
.brand--footer .brand-name { color: var(--brand); }
.footer-tagline { margin-top: 0.9rem; font-size: 0.92rem; color: var(--muted); max-width: 22rem; }

.footer-h {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text);
  margin-bottom: 1rem;
}
.footer-col { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col a {
  font-size: 0.92rem;
  color: var(--muted);
  width: fit-content;
  transition: color .2s ease;
}
.footer-col a:hover { color: var(--brand); }
.footer-subjects { font-size: 0.92rem; line-height: 1.7; color: var(--muted); }
.footer-contact { font-size: 0.92rem; color: var(--muted); }
.footer-contact span { color: var(--text-3); }
.footer-cta { margin-top: 0.6rem; width: fit-content; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1.4rem clamp(1rem, 3vw, 2.5rem);
  border-top: 1px solid var(--border);
  font-size: 0.84rem;
  color: var(--text-3);
}
.footer-credit { color: var(--text-2); }
.footer-credit a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.footer-credit a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

@media (max-width: 980px) {
  .footer-inner { grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }
}
@media (max-width: 680px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .footer-inner { grid-template-columns: 1fr; }
}

/* ============================================================
   RESULTS / PROGRESS DASHBOARD
   ============================================================ */
.results { background: var(--surface-2); }

.results-layout {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

/* Left: hero stat + mini proofs */
.results-hero-stat {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: 2rem;
  padding: 1.3rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 18px 44px -34px rgba(17,38,17,.5);
}
.rhs-num {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.6rem, 6vw, 3.4rem);
  line-height: 1;
  color: var(--brand);
}
.rhs-text { font-size: 0.98rem; font-weight: 600; color: var(--text); }
.rhs-text small { display: block; margin-top: 0.3rem; font-weight: 400; font-size: 0.76rem; color: var(--text-3); line-height: 1.45; }

.results-mini { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.1rem; }
.rmini {
  flex: 1 1 0;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.9rem 1.1rem;
  background: var(--brand-soft);
  border-radius: 14px;
}
.rmini-num { font-family: 'DM Serif Display', serif; font-size: 1.5rem; line-height: 1; color: var(--brand); }
.rmini-star { color: var(--accent); font-size: 0.6em; vertical-align: super; margin-left: 1px; }
.rmini-label { font-size: 0.82rem; color: var(--muted); }

/* Right: animated progress timeline */
.timeline-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 2rem 2rem 1.5rem;
  box-shadow: 0 40px 80px -44px rgba(17,38,17,.5);
}
.timeline { position: relative; display: flex; flex-direction: column; gap: 1.4rem; }
/* The vertical line (track + animated fill) */
.timeline::before,
.timeline::after {
  content: '';
  position: absolute;
  left: 17px;
  top: 16px;
  bottom: 16px;
  width: 2px;
}
.timeline::before { background: var(--border); }
.timeline::after {
  background: linear-gradient(var(--green-mid), var(--accent));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.4s cubic-bezier(.22,.61,.36,1);
}
.timeline-card.is-visible .timeline::after { transform: scaleY(1); }

.tl-step { position: relative; display: flex; gap: 1rem; align-items: flex-start; }
.tl-marker {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--surface);
  background: linear-gradient(135deg, var(--green-mid), var(--brand));
  box-shadow: 0 0 0 4px var(--surface);
}
.tl-title { font-size: 1.05rem; color: var(--text); margin-bottom: 0.15rem; }
.tl-text { font-size: 0.9rem; color: var(--muted); line-height: 1.5; }

/* Steps fade in one by one on scroll */
.tl-step { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.timeline-card.is-visible .tl-step { opacity: 1; transform: none; }
.timeline-card.is-visible .tl-step:nth-child(1) { transition-delay: .15s; }
.timeline-card.is-visible .tl-step:nth-child(2) { transition-delay: .30s; }
.timeline-card.is-visible .tl-step:nth-child(3) { transition-delay: .45s; }
.timeline-card.is-visible .tl-step:nth-child(4) { transition-delay: .60s; }
.timeline-card.is-visible .tl-step:nth-child(5) { transition-delay: .75s; }

/* Small anonymous case card */
.results-case {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.1rem;
  max-width: 620px;
  margin: 2.5rem auto 0;
  padding: 1.1rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 18px 44px -36px rgba(17,38,17,.5);
}
.rc-badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--green-mid);
  background: var(--brand-soft);
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
}
.rc-jump { font-family: 'DM Serif Display', serif; font-size: 1.4rem; color: var(--text); }
.rc-jump strong { color: var(--brand); }
.rc-jump .rc-to { color: var(--gold); }
.rc-jump span { color: var(--accent); margin: 0 0.2em; }
.rc-note { flex: 1 1 240px; font-size: 0.78rem; color: var(--text-3); line-height: 1.45; }

@media (max-width: 880px) {
  .results-layout { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .results-hero-stat { flex-direction: column; align-items: flex-start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .timeline::after,
  .tl-step { transition: none; }
}

/* ============================================================
   Scroll reveal (gentle entrance)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Checkboxes and radios were the only controls still rendering in the
   browser's default blue, against a green and gold palette where the sliders,
   buttons, pills and badges are all styled. One property, and it keeps native
   controls, their keyboard behaviour and their accessibility intact. */
input[type="checkbox"],
input[type="radio"] { accent-color: var(--brand); }