/* Minor refinements layered on top of Tailwind CDN. */

html { scroll-behavior: smooth; }

/* ============================================================
 * MODERN DESIGN SYSTEM
 * ============================================================
 * Premium, sharp, AI/technology-focused visual language layered
 * on top of Tailwind. Brand palette (--brand-50…900) is wired
 * through Tailwind config in header.ejs; the variables below
 * mirror them for use in custom CSS that runs outside Tailwind.
 *
 * Scale conventions:
 *   - Radii: 0/2/4/8/12 (sharp), pill reserved for badges only.
 *   - Spacing: vertical section rhythm in multiples of 8px.
 *   - Typography: Inter, weight 400-800, tracking tightens with size.
 * ============================================================ */

:root {
  --ds-radius-xs: 2px;
  --ds-radius-sm: 4px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 12px;

  --ds-section-y-sm: clamp(3.5rem, 5vw, 5rem);
  --ds-section-y:    clamp(5rem,  8vw, 8rem);
  --ds-section-y-lg: clamp(6rem, 10vw, 10rem);

  --ds-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 1px rgba(15, 23, 42, 0.03);
  --ds-shadow-md: 0 8px 24px -12px rgba(15, 23, 42, 0.18);
  --ds-shadow-lg: 0 30px 60px -30px rgba(15, 23, 42, 0.35);
  --ds-shadow-glow: 0 0 0 1px rgba(99, 102, 241, 0.08), 0 30px 60px -30px rgba(15, 23, 42, 0.25);

  /* Motion design tokens — one source of truth for hover/focus easing so
   * components don't drift into their own timings. Use ds-ease-out for
   * snap, ds-ease-in-out for state changes, ds-ease-fast for hover. */
  --ds-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ds-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --ds-dur-fast:    0.16s;
  --ds-dur-base:    0.22s;
  --ds-dur-slow:    0.32s;
}

/* Slightly tighter, sharper base typography. */
body {
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headlines: tighter line-height and letter-spacing for premium feel. */
h1, .ds-h1, h2, .ds-h2, h3, .ds-h3 {
  letter-spacing: -0.02em;
  line-height: 1.08;
}
h2 { line-height: 1.12; }
h3 { line-height: 1.2; letter-spacing: -0.015em; }

/* Display-grade hero headline */
.ds-display {
  font-weight: 800;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.ds-display-lg {
  font-weight: 800;
  font-size: clamp(3rem, 6vw, 5.5rem);
  letter-spacing: -0.04em;
  line-height: 0.98;
}

/* Eyebrow — monospace-styled small caps for a technical AI feel. */
.ds-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brand-500, #4a6794);
}
.ds-eyebrow::before {
  content: '';
  width: 1.25rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.ds-eyebrow.no-rule::before { display: none; }

/* Section helpers — used directly by sections, not just inside cards. */
.ds-section {
  position: relative;
  padding-top: var(--ds-section-y);
  padding-bottom: var(--ds-section-y);
}
.ds-section.tight { padding-top: var(--ds-section-y-sm); padding-bottom: var(--ds-section-y-sm); }
.ds-section.spacious { padding-top: var(--ds-section-y-lg); padding-bottom: var(--ds-section-y-lg); }

.ds-container { max-width: 80rem; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
@media (min-width: 768px)  { .ds-container { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1280px) { .ds-container { padding-left: 2.5rem; padding-right: 2.5rem; } }

/* Hairline divider — used between sections for subtle structure. */
.ds-hairline { height: 1px; width: 100%; background: linear-gradient(90deg, transparent, rgba(15,23,42,0.08) 30%, rgba(15,23,42,0.08) 70%, transparent); }

/* Gradient text helper for accenting one phrase in a headline. */
.ds-grad-text {
  background-image: linear-gradient(110deg, var(--brand-700, #2a3d63) 0%, var(--brand-500, #4a6794) 50%, var(--brand-700, #2a3d63) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Decorative grid background for hero/feature sections — extremely subtle. */
.ds-grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(15, 23, 42, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.ds-grid-bg.dark {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}
.ds-grid-bg.dense { background-size: 40px 40px; }

/* Radial glow accent layered behind dark heroes. */
.ds-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(99, 102, 241, 0.25), transparent 70%),
    radial-gradient(ellipse 50% 50% at 80% 100%, rgba(56, 189, 248, 0.18), transparent 60%);
}

/* Corner-clip ornament — Lunit-style precision marker on tiles. */
.ds-clip-corner {
  position: relative;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

/* ============================================================
 * BUTTONS
 * Sharp, modern, with subtle hover lift + chevron animation.
 * ============================================================ */
.ds-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--ds-radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  line-height: 1.2;
}
.ds-btn:focus-visible {
  outline: 2px solid var(--brand-500, #4a6794);
  outline-offset: 2px;
}
.ds-btn-lg { padding: 0.95rem 1.85rem; font-size: 0.95rem; }
.ds-btn-sm { padding: 0.55rem 1.1rem; font-size: 0.8rem; }

.ds-btn-primary {
  background: var(--brand-900, #1a2540);
  color: #fff;
}
.ds-btn-primary:hover {
  background: var(--brand-700, #2a3d63);
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-md);
}
.ds-btn-secondary {
  background: transparent;
  color: var(--brand-900, #1a2540);
  border-color: rgba(15, 23, 42, 0.18);
}
.ds-btn-secondary:hover {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.32);
  transform: translateY(-1px);
}
.ds-btn-ghost {
  background: transparent;
  color: var(--brand-900, #1a2540);
  padding-left: 0;
  padding-right: 0;
}
.ds-btn-ghost .ds-btn-arrow {
  transition: transform 0.2s ease;
}
.ds-btn-ghost:hover .ds-btn-arrow { transform: translateX(4px); }

.ds-btn-on-dark.ds-btn-secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}
.ds-btn-on-dark.ds-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
}
.ds-btn-on-dark.ds-btn-primary {
  background: #fff;
  color: var(--brand-900, #1a2540);
}
.ds-btn-on-dark.ds-btn-primary:hover {
  background: rgba(255, 255, 255, 0.92);
}

.ds-btn-arrow {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
}

/* ============================================================
 * CARDS — sharp, thin border, hover lift.
 * ============================================================ */
.ds-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--ds-radius-md);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.ds-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--ds-shadow-md);
  border-color: rgba(15, 23, 42, 0.15);
}
.ds-card-dark {
  background: var(--brand-900, #1a2540);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.06);
}
.ds-card-dark.ds-card-hover:hover {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 30px 60px -25px rgba(15, 23, 42, 0.6);
}

/* Accent top line on featured cards */
.ds-card-accent {
  position: relative;
  overflow: hidden;
}
.ds-card-accent::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-500, #4a6794), var(--brand-900, #1a2540));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s ease;
}
.ds-card-accent:hover::before { transform: scaleX(1); }

/* Numbered indicator chip used in process/timeline blocks. */
.ds-numchip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--ds-radius-sm);
  background: var(--brand-900, #1a2540);
  color: #fff;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-weight: 600;
  font-size: 0.95rem;
}

/* Badge / pill (still rounded — these are intentionally pills). */
.ds-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.05);
  color: var(--brand-900, #1a2540);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ds-pill-dot {
  width: 0.4rem; height: 0.4rem; border-radius: 9999px;
  background: var(--brand-500, #4a6794);
  box-shadow: 0 0 0 3px rgba(74, 103, 148, 0.18);
}
.ds-pill-on-dark {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* ============================================================
 * REVEAL ANIMATIONS — IntersectionObserver-driven.
 * Elements with `data-ds-reveal` start invisible; the public.js
 * runtime adds `.is-visible` when they enter the viewport.
 * ============================================================ */
/* Hidden pre-reveal state is gated behind html.js (added pre-paint by
 * theme.js) so content is never lost for no-JS visitors or crawlers. */
.js [data-ds-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[data-ds-reveal].is-visible { opacity: 1; transform: none; }
[data-ds-reveal][data-ds-reveal="fade"] { transform: none; }
[data-ds-reveal][data-ds-reveal="left"] { transform: translateX(-32px); }
[data-ds-reveal][data-ds-reveal="right"] { transform: translateX(32px); }
[data-ds-reveal][data-ds-reveal="scale"] { transform: scale(0.96); }
[data-ds-reveal].is-visible { transform: none; }

.js [data-ds-stagger] > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-ds-stagger].is-visible > * { opacity: 1; transform: none; }
[data-ds-stagger].is-visible > *:nth-child(1) { transition-delay: 0.04s; }
[data-ds-stagger].is-visible > *:nth-child(2) { transition-delay: 0.10s; }
[data-ds-stagger].is-visible > *:nth-child(3) { transition-delay: 0.16s; }
[data-ds-stagger].is-visible > *:nth-child(4) { transition-delay: 0.22s; }
[data-ds-stagger].is-visible > *:nth-child(5) { transition-delay: 0.28s; }
[data-ds-stagger].is-visible > *:nth-child(6) { transition-delay: 0.34s; }
[data-ds-stagger].is-visible > *:nth-child(7) { transition-delay: 0.40s; }
[data-ds-stagger].is-visible > *:nth-child(8) { transition-delay: 0.46s; }

@media (prefers-reduced-motion: reduce) {
  [data-ds-reveal], [data-ds-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  section { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* The legacy per-section fade still applies — make it subtler so it doesn't
 * fight the new reveal system. */
section { opacity: 1; transform: none; animation: none; }
@keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }

/* ============================================================
 * FAQ ACCORDION
 * ============================================================ */
.ds-faq-item {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.ds-faq-item:last-child { border-bottom: 1px solid rgba(15, 23, 42, 0.08); }
.ds-faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.5rem 0;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--brand-900, #1a2540);
  letter-spacing: -0.01em;
}
.ds-faq-trigger:hover { color: var(--brand-500, #4a6794); }
.ds-faq-icon {
  flex-shrink: 0;
  width: 1.5rem; height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 9999px;
  transition: transform 0.3s ease, background 0.2s ease, color 0.2s ease;
}
.ds-faq-item.is-open .ds-faq-icon {
  background: var(--brand-900, #1a2540);
  color: #fff;
  transform: rotate(45deg);
}
.ds-faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ds-faq-item.is-open .ds-faq-body { grid-template-rows: 1fr; }
.ds-faq-body > div {
  overflow: hidden;
  color: #475569;
  line-height: 1.7;
}
.ds-faq-item.is-open .ds-faq-body > div { padding-bottom: 1.5rem; }

/* ============================================================
 * TIMELINE
 * ============================================================ */
.ds-timeline {
  position: relative;
  padding-left: 2rem;
}
.ds-timeline::before {
  content: '';
  position: absolute;
  left: 0.95rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--brand-500, #4a6794), rgba(15,23,42,0.08));
}
.ds-timeline-step {
  position: relative;
  padding-bottom: 2.5rem;
}
.ds-timeline-step:last-child { padding-bottom: 0; }
.ds-timeline-step::before {
  content: '';
  position: absolute;
  left: -2rem;
  top: 0.3rem;
  width: 2rem;
  height: 2rem;
  margin-left: 0;
  background: #fff;
  border: 2px solid var(--brand-900, #1a2540);
  border-radius: 9999px;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(15,23,42,0.06);
}
.ds-timeline-step[data-step]::after {
  content: attr(data-step);
  position: absolute;
  left: -2rem;
  top: 0.3rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--brand-900, #1a2540);
}

/* ============================================================
 * COMPARISON TABLE
 * ============================================================ */
.ds-compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.ds-compare th, .ds-compare td {
  padding: 1.1rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.ds-compare th {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--brand-900, #1a2540);
  background: rgba(15, 23, 42, 0.02);
}
.ds-compare th.featured {
  background: var(--brand-900, #1a2540);
  color: #fff;
  border-radius: var(--ds-radius-md) var(--ds-radius-md) 0 0;
}
.ds-compare td.featured {
  background: rgba(74, 103, 148, 0.06);
  font-weight: 600;
  color: var(--brand-900, #1a2540);
}
.ds-compare tr:last-child td.featured {
  border-radius: 0 0 var(--ds-radius-md) var(--ds-radius-md);
}
.ds-check { color: var(--brand-700, #2a3d63); }
.ds-cross { color: rgba(15, 23, 42, 0.3); }

/* ============================================================
 * STICKY SCROLL STORY
 * Left column scrolls steps, right column shows a sticky visual
 * that updates when a step becomes "active".
 * ============================================================ */
.ds-sticky-story {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
@media (min-width: 1024px) {
  .ds-sticky-story { grid-template-columns: 1fr 1fr; gap: 5rem; }
}
.ds-sticky-story-visual {
  position: relative;
}
@media (min-width: 1024px) {
  .ds-sticky-story-visual {
    position: sticky;
    top: 6rem;
    align-self: start;
    height: calc(100vh - 12rem);
    min-height: 400px;
  }
}
.ds-sticky-story-frame {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 360px;
  border-radius: var(--ds-radius-md);
  overflow: hidden;
  background: var(--brand-900, #1a2540);
}
.ds-sticky-story-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.5s ease, transform 0.7s ease;
}
.ds-sticky-story-slide.is-active { opacity: 1; transform: scale(1); }
.ds-sticky-story-slide img { width: 100%; height: 100%; object-fit: cover; }

.ds-sticky-story-steps { display: flex; flex-direction: column; gap: 5rem; }
.ds-sticky-story-step { position: relative; padding-left: 0; }
.ds-sticky-story-step .step-num {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--brand-500, #4a6794);
}
.ds-sticky-story-step h3 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  margin-top: 0.5rem;
  color: var(--brand-900, #1a2540);
}
.ds-sticky-story-step p { color: #475569; line-height: 1.7; margin-top: 0.85rem; }

/* ============================================================
 * ANIMATED COUNTERS
 * Numeric stats animate from 0 → value when they enter view.
 * The value class is read by public.js and bumped each tick.
 * ============================================================ */
.ds-counter {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ============================================================
 * MARQUEE — used by logo cloud for slow continuous scroll.
 * ============================================================ */
.ds-marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
}
.ds-marquee-track {
  display: flex;
  gap: 4rem;
  width: max-content;
  animation: ds-marquee 38s linear infinite;
}
.ds-marquee:hover .ds-marquee-track { animation-play-state: paused; }
@keyframes ds-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
 * NAV — premium AI/SaaS-style header.
 * ============================================================
 * The header is sticky + frosted; scrolling past 12px tightens the chrome
 * (smaller padding, sharper hairline border, slightly stronger backdrop blur).
 * A 2px brand-gradient scroll-progress bar sits flush against the bottom edge
 * so the header reacts to page position without losing its calm.
 * ============================================================ */
.site-header {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition:
    background 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    backdrop-filter 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-header-inner {
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
  transition: padding 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02), 0 10px 30px -22px rgba(15, 23, 42, 0.18);
}
.site-header.is-scrolled .site-header-inner {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}
.site-header-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.04), transparent);
  overflow: hidden;
  pointer-events: none;
}
.site-header-progress-bar {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--brand-500, #4a6794), var(--brand-900, #1a2540));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.12s linear;
}
.site-brand-mark {
  box-shadow: 0 8px 24px -12px rgba(15, 23, 42, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Nav links — sharper hit area, underline reveal, refined active state. */
.site-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  color: #334155;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: -0.005em;
  border-radius: var(--ds-radius-sm);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.site-nav-link .site-nav-link-label {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.site-nav-link .site-nav-link-label::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--brand-900, #1a2540);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-nav-link:hover { color: var(--brand-900, #1a2540); background: rgba(15, 23, 42, 0.04); }
.site-nav-link:hover .site-nav-link-label::after,
.site-nav-link.is-active .site-nav-link-label::after { transform: scaleX(1); }
.site-nav-link.is-active { color: var(--brand-900, #1a2540); }

/* Hamburger toggle (mobile) — premium square with crisp icons. */
.site-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--ds-radius-sm);
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.6);
  color: #334155;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.site-menu-toggle:hover {
  border-color: var(--brand-900, #1a2540);
  color: var(--brand-900, #1a2540);
  background: #fff;
  transform: translateY(-1px);
}
.site-menu-toggle:active { transform: translateY(0); }

/* ============================================================
 * LANGUAGE SWITCHER — desktop + mobile
 * ============================================================ */
.lang-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem 0.45rem 0.55rem;
  height: 2.25rem;
  border-radius: var(--ds-radius-sm);
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.6);
  color: #334155;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.lang-switcher-btn:hover {
  border-color: var(--brand-900, #1a2540);
  color: var(--brand-900, #1a2540);
  background: #fff;
}
.lang-switcher-btn.is-open {
  border-color: var(--brand-900, #1a2540);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74, 103, 148, 0.14);
}
.lang-switcher-btn:focus-visible {
  outline: 2px solid var(--brand-500, #4a6794);
  outline-offset: 2px;
}
/* Unified flag wrap — shared sizing/aspect across header, menu, mobile chip,
 * social row icon slot. Uses an outline rather than an inset box-shadow so
 * the ring doesn't become a visible dark artifact on light flags. */
.lang-flag-wrap {
  display: inline-flex;
  width: 1.4rem;
  height: 1.05rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 2px;
  outline: 1px solid rgba(15, 23, 42, 0.08);
  outline-offset: -1px;
  background: rgba(15, 23, 42, 0.04);
  flex-shrink: 0;
}
.lang-flag-wrap .fi {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0;
  background-size: cover;
  background-position: center;
}
.lang-flag-wrap .lang-flag-emoji {
  font-size: 0.95rem;
  line-height: 1;
}
.lang-code-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.72rem;
}
.lang-switcher-chevron {
  width: 0.7rem;
  height: 0.7rem;
  opacity: 0.7;
  transition: transform 0.22s ease, opacity 0.18s ease;
}
.lang-switcher-btn.is-open .lang-switcher-chevron { transform: rotate(180deg); opacity: 1; }

.lang-switcher-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 16rem;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-lg);
  padding: 0.4rem;
  z-index: 60;
  transform-origin: top right;
  animation: lang-switcher-pop 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.lang-switcher-menu.hidden { display: none; }
@keyframes lang-switcher-pop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lang-switcher-menu-label {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.45);
  padding: 0.5rem 0.8rem 0.4rem;
}
.lang-switcher-menu ul { list-style: none; margin: 0; padding: 0; }
.lang-switcher-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--ds-radius-sm);
  color: #334155;
  font-size: 0.875rem;
  transition: background 0.16s ease, color 0.16s ease;
}
.lang-switcher-item:hover {
  background: rgba(15, 23, 42, 0.04);
  color: var(--brand-900, #1a2540);
}
.lang-switcher-item.is-active {
  background: rgba(74, 103, 148, 0.08);
  color: var(--brand-900, #1a2540);
  font-weight: 600;
}
.lang-switcher-item .lang-flag-wrap {
  width: 1.55rem;
  height: 1.15rem;
}
.lang-name { font-weight: inherit; }
.lang-code-pill {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.4);
  background: rgba(15, 23, 42, 0.04);
  padding: 0.2rem 0.45rem;
  border-radius: 9999px;
  grid-column: 3;
}
.lang-switcher-item.is-active .lang-code-pill {
  background: rgba(74, 103, 148, 0.12);
  color: var(--brand-700, #2a3d63);
}
.lang-check {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--brand-900, #1a2540);
  grid-column: 3;
}
.lang-switcher-item.is-active .lang-code-pill { display: none; } /* check takes its slot */
.lang-flag-emoji { font-size: 1rem; line-height: 1; }
.lang-flag-code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.5);
  background: rgba(15, 23, 42, 0.06);
  padding: 0.2rem 0.4rem;
  border-radius: 2px;
}

/* ============================================================
 * MOBILE NAV DRAWER
 * ============================================================ */
.site-mobile-nav {
  position: absolute;
  inset: 100% 0 auto 0;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  animation: mobile-nav-drop 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-mobile-nav.hidden { display: none; }
@keyframes mobile-nav-drop {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.site-mobile-nav-inner {
  padding: 0.5rem 1.25rem 1.5rem;
}
.site-mobile-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
}
.site-mobile-nav-lang {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.site-mobile-nav-lang-title {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.45);
  margin: 0 0 0.75rem;
}
.site-mobile-nav-lang-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.site-mobile-lang-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  border-radius: var(--ds-radius-sm);
  border: 1px solid rgba(15, 23, 42, 0.1);
  font-size: 0.8rem;
  font-weight: 500;
  color: #334155;
  background: #fff;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.site-mobile-lang-chip:hover {
  border-color: var(--brand-900, #1a2540);
  color: var(--brand-900, #1a2540);
  transform: translateY(-1px);
}
.site-mobile-lang-chip.is-active {
  background: var(--brand-900, #1a2540);
  color: #fff;
  border-color: var(--brand-900, #1a2540);
}
/* mobile chip uses default 1.4×1.05rem flag-wrap sizing */

/* Lock body scroll when the mobile drawer is open. */
body.site-nav-open { overflow: hidden; }

/* ============================================================
 * FOOTER — dark brand band, sharp grid, hover-slide links.
 * Layout is fully token-driven so the markup stays semantic and
 * dark/light themes plus brand recolouring all "just work".
 * ============================================================ */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--brand-900, #1a2540);
  color: rgba(255, 255, 255, 0.72);
}
/* Hairline accent across the top — bright in light brand, dimmed in dark. */
.site-footer-hairline {
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  z-index: 0;
  pointer-events: none;
}
/* Soft brand glow behind the brand column. Replaces the heavy
 * grid-bg overlay that was reducing footer text contrast. */
.site-footer-glow {
  position: absolute;
  top: -6rem;
  left: -4rem;
  width: 28rem;
  height: 28rem;
  background: radial-gradient(closest-side, rgba(74, 103, 148, 0.28), transparent 70%);
  filter: blur(8px);
  z-index: 0;
  pointer-events: none;
}
.site-footer-inner {
  position: relative;
  z-index: 1;
  max-width: 80rem;
  margin: 0 auto;
  padding: 5rem 1.5rem 2.5rem;
}
@media (min-width: 1024px) {
  .site-footer-inner { padding-left: 2rem; padding-right: 2rem; }
}
.site-footer-grid {
  display: grid;
  gap: 3rem;
}
@media (min-width: 1024px) {
  .site-footer-grid { grid-template-columns: 5fr 7fr; gap: 4rem; }
}
.site-footer-brand { min-width: 0; }
.site-footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
}
.site-footer-logo-mark {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--ds-radius-sm);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
}
.site-footer-logo-name {
  font-weight: 700;
  color: #fff;
  font-size: 1.125rem;
  letter-spacing: -0.015em;
}
.site-footer-tagline {
  margin-top: 1.5rem;
  max-width: 28rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.65;
  font-size: 0.9375rem;
}
.site-footer-contact {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  font-size: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.site-footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}
.site-footer-contact li svg {
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}
.site-footer-contact a { text-decoration: none; }
.site-footer-socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
}
.site-footer h4 {
  color: #fff;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 1.25rem;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.site-footer a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.18s ease;
}
.site-footer a:hover { color: #fff; }
.site-footer-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 640px)  { .site-footer-columns { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px)  { .site-footer-columns { grid-template-columns: repeat(3, 1fr); } }
.site-footer-column ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.875rem;
}

/* Footer social tiles — sharp, hairline border, no layout shift on hover.
 * The previous `translateY(-2px)` jostled siblings on a flex wrap row; we
 * switch to a contained scale so the row stays put. */
.site-footer .footer-social {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--ds-radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.02);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.site-footer .footer-social:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  transform: translateY(-1px);
}
.site-footer .footer-social:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}
.site-footer .footer-social svg { display: block; }

.site-footer .footer-bottom {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.75rem;
}
.footer-bottom-copy {
  color: rgba(255, 255, 255, 0.5);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  letter-spacing: 0.06em;
}
.footer-bottom-tag {
  color: rgba(255, 255, 255, 0.4);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  letter-spacing: 0.14em;
}

/* ============================================================
 * Mega submenu — sharp, premium, with hover-fill items.
 * Overrides earlier rules where present.
 * ============================================================ */
.mega-submenu {
  border-radius: var(--ds-radius-md);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.02),
    0 30px 60px -25px rgba(15, 23, 42, 0.22);
  padding: 0.35rem;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
}
.mega-submenu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem;
  border-radius: var(--ds-radius-sm);
  font-weight: 500;
  color: #334155;
  white-space: nowrap;
  transition: background 0.16s ease, color 0.16s ease;
}
.mega-submenu-link-label { display: inline-flex; align-items: center; }
.mega-submenu-arrow {
  width: 0.8rem;
  height: 0.8rem;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.mega-submenu-link:hover .mega-submenu-arrow { opacity: 1; transform: translateX(0); }
.mega-submenu-link.is-active {
  color: var(--brand-900, #1a2540);
  background: rgba(15, 23, 42, 0.04);
  font-weight: 600;
}
.has-submenu.is-active > .site-nav-link { color: var(--brand-900, #1a2540); }

/* ============================================================
 * RTE body — refined for premium reading rhythm.
 * ============================================================ */
.rte-body { line-height: 1.7; }
.rte-body p { margin: 0 0 1rem; }

/* ============================================================
 * MISC HOVER & LINK BEHAVIOUR
 * ============================================================ */
a.ds-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  color: var(--brand-900, #1a2540);
  font-size: 0.9rem;
}
a.ds-arrow-link svg { transition: transform 0.25s ease; }
a.ds-arrow-link:hover svg { transform: translateX(4px); }
a.ds-arrow-link:hover { color: var(--brand-500, #4a6794); }

/* ============================================================
 * TESTIMONIAL CARD QUOTE MARK
 * ============================================================ */
.ds-quote::before {
  content: '\201C';
  display: block;
  font-family: Georgia, serif;
  font-size: 4rem;
  line-height: 0.6;
  color: var(--brand-500, #4a6794);
  opacity: 0.35;
  margin-bottom: 0.5rem;
}

/* ============================================================
 * BLOG POST CARD
 * ============================================================ */
.ds-post-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--ds-radius-md);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.ds-post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ds-shadow-md);
  border-color: rgba(15, 23, 42, 0.15);
}
.ds-post-card .ds-post-image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.04);
}
.ds-post-card .ds-post-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s ease;
}
.ds-post-card:hover .ds-post-image img { transform: scale(1.05); }

/* ============================================================
 * INPUT / FORM SHARED STYLING
 * ============================================================ */
.ds-input {
  width: 100%;
  background: #fff;
  color: var(--brand-900, #1a2540);
  padding: 0.85rem 1rem;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: var(--ds-radius-sm);
  font-size: 0.95rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.ds-input:focus {
  outline: none;
  border-color: var(--brand-500, #4a6794);
  box-shadow: 0 0 0 4px rgba(74, 103, 148, 0.12);
}
.ds-input::placeholder { color: rgba(15, 23, 42, 0.4); }

/* ============================================================
 * TESTIMONIAL AVATAR
 * ============================================================ */
.ds-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--brand-500, #4a6794), var(--brand-900, #1a2540));
  color: #fff;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}
.ds-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
 * METRICS BAND
 * ============================================================ */
.ds-metric-band {
  position: relative;
  background: var(--brand-900, #1a2540);
  color: #fff;
  overflow: hidden;
}
.ds-metric-band .metric-value {
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.ds-metric-band .metric-label {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 0.5rem;
  font-weight: 500;
}

/* ============================================================
 * COMPARISON-STYLE STAT TILE
 * ============================================================ */
.ds-stat-tile {
  position: relative;
  padding: 1.75rem;
  border-radius: var(--ds-radius-md);
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  overflow: hidden;
}
.ds-stat-tile::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-500, #4a6794) 50%, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.ds-stat-tile:hover::after { opacity: 1; }
.ds-stat-tile .stat-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ds-radius-sm);
  background: rgba(74, 103, 148, 0.08);
  color: var(--brand-700, #2a3d63);
  margin-bottom: 1rem;
}

/* ============================================================
 * MOBILE MENU REFINEMENTS
 * ============================================================ */
@media (max-width: 767px) {
  .site-nav-link .site-nav-link-label::after { display: none; }
  .site-nav-link {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 0.95rem 0.25rem;
    border-radius: 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  }
  .site-nav-link:hover { background: transparent; }
  .site-nav-link.is-active { color: var(--brand-900, #1a2540); }
  .has-submenu.no-submenu:last-child > .site-nav-link { border-bottom: 0; }
}


/* ============================================================
 * Canvas blocks — rendered identically on the public site and in
 * the admin preview iframe. The stage is laid out at its design
 * width; on narrower viewports we shrink it proportionally so
 * absolute element positions still line up correctly.
 * ============================================================ */
.canvas-block { width: 100%; padding: 1rem 0; }
.canvas-frame {
  position: relative;
  width: 100%;
  max-width: var(--canvas-w);
  margin: 0 auto;
  /* Reserve the scaled-down height; JS would do it more precisely but
   * keeping this CSS-only avoids a per-element layout pass. */
  height: var(--canvas-h);
}
.canvas-stage {
  position: relative;
  transform-origin: top left;
}
@media (max-width: 1280px) {
  .canvas-frame {
    overflow: hidden;
    height: auto;
    aspect-ratio: var(--canvas-w) / var(--canvas-h);
  }
  .canvas-stage {
    transform: scale(calc(100vw / var(--canvas-w)));
  }
}
@media (min-width: 1281px) {
  .canvas-frame { overflow: visible; }
  .canvas-stage { transform: none; }
}
.canvas-el { position: absolute; box-sizing: border-box; }
.canvas-text { line-height: 1.4; }
.canvas-text > p:last-child { margin-bottom: 0; }
.canvas-button:hover { filter: brightness(1.05); }

/* Rich-text body styling — lightly opinionated defaults that mirror the
 * Quill toolbar (alignment, lists, blockquote). */
.rte-body p { margin: 0 0 0.75rem; }
.rte-body p:last-child { margin-bottom: 0; }
.rte-body ul, .rte-body ol { padding-left: 1.5rem; margin: 0 0 0.75rem; }
.rte-body ul { list-style: disc; }
.rte-body ol { list-style: decimal; }
.rte-body li { margin: 0.15rem 0; }
.rte-body blockquote { border-left: 3px solid currentColor; opacity: 0.85; padding-left: 0.75rem; margin: 0.5rem 0; }
.rte-body h1, .rte-body h2, .rte-body h3, .rte-body h4 { font-weight: 700; margin: 0.5rem 0; }
.rte-body h1 { font-size: 1.6em; }
.rte-body h2 { font-size: 1.35em; }
.rte-body h3 { font-size: 1.15em; }
.rte-body a { text-decoration: underline; }
.rte-body .ql-align-center { text-align: center; }
.rte-body .ql-align-right  { text-align: right; }
.rte-body .ql-align-justify { text-align: justify; }


/* Section reveal: subtle fade on load. */
section { opacity: 0; transform: translateY(8px); animation: fadeIn 0.5s ease forwards; }
section:nth-child(1) { animation-delay: 0.05s; }
section:nth-child(2) { animation-delay: 0.10s; }
section:nth-child(3) { animation-delay: 0.15s; }
section:nth-child(4) { animation-delay: 0.20s; }

@keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }

/* Prevent Tailwind's preflight from squishing iframes. */
iframe { display: block; }

/* ============================================================
 * Admin page editor — split-pane layout with live preview iframe.
 * Layout is grid-area driven so the preview pane can flip between
 * left and right without DOM reordering. CSS variable `--preview-w`
 * drives the preview column width and is updated by the drag-resize
 * handle in admin-editor.js.
 * ============================================================ */
.editor-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 70px);
  --preview-w: clamp(360px, 42vw, 720px);
}
.editor-toolbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.75rem 1.25rem;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #e2e8f0;
}
.editor-toolbar-actions {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
}
.editor-viewport-toggle, .editor-side-toggle {
  display: inline-flex;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
}
.editor-viewport-toggle button, .editor-side-toggle button {
  padding: 0.4rem 0.7rem;
  background: #fff;
  color: #64748b;
  font-size: 0.8rem;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.editor-viewport-toggle button:hover,
.editor-side-toggle button:hover { background: #f1f5f9; color: #1e293b; }
.editor-viewport-toggle button.active,
.editor-side-toggle button.active { background: #4338ca; color: #fff; }
.toolbar-btn {
  padding: 0.4rem 0.7rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  background: #fff;
  color: #475569;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.toolbar-btn:hover:not(:disabled) { background: #eef2ff; color: #4338ca; }
.toolbar-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6px var(--preview-w);
  grid-template-areas: "editor splitter preview";
  flex: 1;
  min-height: 0;
  align-items: stretch;
  transition: grid-template-columns 0.25s ease;
}
.editor-shell.preview-left .editor-grid {
  grid-template-columns: var(--preview-w) 6px minmax(0, 1fr);
  grid-template-areas: "preview splitter editor";
}
.editor-shell.preview-hidden .editor-grid {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "editor";
}
.editor-shell.preview-hidden .editor-preview,
.editor-shell.preview-hidden .editor-splitter { display: none; }

.editor-panel {
  grid-area: editor;
  min-width: 0;
  padding: 1.25rem;
  overflow-y: auto;
  scroll-behavior: smooth;
}
.editor-splitter {
  grid-area: splitter;
  cursor: col-resize;
  background: transparent;
  position: relative;
  user-select: none;
  transition: background 0.15s ease;
}
.editor-splitter:hover,
.editor-splitter.dragging { background: #c7d2fe; }
.editor-splitter::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 36px;
  background: #cbd5e1;
  border-radius: 2px;
  transition: background 0.15s ease;
}
.editor-splitter:hover::before { background: #6366f1; }

.editor-preview {
  grid-area: preview;
  position: sticky;
  top: 70px;
  align-self: start;
  height: calc(100vh - 70px);
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: #eef2f7;
  border-left: 1px solid #e2e8f0;
}
.editor-shell.preview-left .editor-preview {
  border-left: 0;
  border-right: 1px solid #e2e8f0;
}
.editor-preview-stage {
  flex: 1;
  position: relative;
  padding: 1rem;
  background: #f1f5f9;
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  min-height: 0;
}
/* The iframe renders at the TRUE device width for the selected viewport
   (desktop 1280 / tablet 820 / mobile 390) and is scaled down with a CSS
   transform to fit the pane — see fitPreview() in admin-editor.js. This way
   responsive breakpoints (md:, lg:) behave inside the preview exactly as
   they do on the live site. */
.editor-preview-stage iframe {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 100%;
  height: calc(100% - 2rem);
  min-height: 540px;
  background: #fff;
  border: 0;
  border-radius: 0.5rem;
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.18);
  transform-origin: top left;
  transition: opacity 0.2s ease;
}
/* No-JS fallback widths (overridden inline by fitPreview). */
.editor-preview-stage[data-viewport="tablet"] iframe { width: 820px; max-width: 100%; }
.editor-preview-stage[data-viewport="mobile"] iframe { width: 390px; max-width: 100%; }

.block-card {
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.block-card:focus-within {
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.35);
}

@media (max-width: 1100px) {
  /* On narrow viewports we stack: editor scrolls, then preview collapses to
   * a fixed-height pane below it. The splitter hides — it isn't useful in
   * a vertical layout. */
  .editor-grid,
  .editor-shell.preview-left .editor-grid {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "editor" "preview";
  }
  .editor-splitter { display: none; }
  .editor-preview {
    position: static;
    height: 60vh;
    border-left: 0;
    border-top: 1px solid #e2e8f0;
  }
}

/* ============================================================
 * Canvas builder (admin/canvas.ejs + admin-canvas.js).
 * Three-column grid: palette | workspace | (layers + properties).
 * The center stage scrolls independently; side panels are sticky
 * (each scrolls internally on small viewports). CSS variables
 * `--canvas-side-l` and `--canvas-side-r` drive resizable widths.
 * ============================================================ */
.canvas-shell {
  background: #f1f5f9;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  --canvas-side-l: 240px;
  --canvas-side-r: 300px;
}
.canvas-layout {
  display: grid;
  grid-template-columns:
    var(--canvas-side-l)
    6px
    minmax(0, 1fr)
    6px
    var(--canvas-side-r);
  grid-template-areas: "palette splitter-l stage splitter-r side";
  flex: 1;
  min-height: 0;
  align-items: stretch;
}
.canvas-palette {
  grid-area: palette;
  background: #fff;
  border-right: 1px solid #e2e8f0;
  padding: 1rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.canvas-side {
  grid-area: side;
  background: #fff;
  border-left: 1px solid #e2e8f0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.canvas-side-block {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.canvas-side-block:not(:last-child) {
  border-bottom: 1px solid #f1f5f9;
}
.canvas-side-block.canvas-side-layers { flex: 0 0 auto; max-height: 45%; }
.canvas-side-block.canvas-side-props { flex: 1 1 auto; overflow-y: auto; }

.canvas-splitter {
  cursor: col-resize;
  background: transparent;
  position: relative;
  user-select: none;
  transition: background 0.15s ease;
}
.canvas-splitter--l { grid-area: splitter-l; }
.canvas-splitter--r { grid-area: splitter-r; }
.canvas-splitter:hover,
.canvas-splitter.dragging { background: #c7d2fe; }
.canvas-splitter::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 36px;
  background: #cbd5e1;
  border-radius: 2px;
}
.canvas-splitter:hover::before { background: #6366f1; }

.palette-section-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.palette-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}
.palette-btn {
  padding: 0.6rem 0.4rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  background: #fff;
  color: #1e293b;
  font-size: 0.8rem;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.palette-btn:hover { background: #eef2ff; border-color: #818cf8; }
.palette-btn:active { transform: translateY(1px); }

.palette-field {
  display: flex;
  flex-direction: column;
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 0.5rem;
  gap: 0.25rem;
}
.palette-field-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: #475569;
  margin-top: 0.5rem;
}
.palette-field input[type="number"], .palette-field input[type="text"] {
  border: 1px solid #cbd5e1;
  border-radius: 0.4rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
}

/* Canvas sub-toolbar — sits above the workspace and surrounds the canvas
 * with zoom/grid/snap controls. */
.canvas-subtoolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.55rem 0.9rem;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}
.canvas-subtoolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.canvas-subtoolbar label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: #475569;
}
.canvas-zoom {
  display: inline-flex;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 0.4rem;
  overflow: hidden;
  background: #fff;
}
.canvas-zoom button {
  border: 0;
  background: #fff;
  color: #475569;
  padding: 0.25rem 0.55rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.canvas-zoom button:hover { background: #eef2ff; color: #4338ca; }
.canvas-zoom-value {
  padding: 0 0.5rem;
  font-size: 0.75rem;
  color: #475569;
  min-width: 3rem;
  text-align: center;
}

.canvas-workspace {
  grid-area: stage;
  background: #e5e9f0;
  background-image:
    linear-gradient(45deg, #eef1f6 25%, transparent 25%),
    linear-gradient(-45deg, #eef1f6 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eef1f6 75%),
    linear-gradient(-45deg, transparent 75%, #eef1f6 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem;
  min-height: 0;
  position: relative;
}
.canvas-area {
  position: relative;
  margin: auto;
  transform-origin: top center;
  transition: transform 0.2s ease;
}
.canvas-grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    linear-gradient(to right, rgba(99, 102, 241, 0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(99, 102, 241, 0.10) 1px, transparent 1px),
    linear-gradient(to right, rgba(99, 102, 241, 0.22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(99, 102, 241, 0.22) 1px, transparent 1px);
  background-size: 8px 8px, 8px 8px, 80px 80px, 80px 80px;
}
.canvas-stage-edit {
  position: relative;
  background: #fff;
  box-shadow: 0 20px 60px -20px rgba(15, 23, 42, 0.35);
  border: 1px solid #cbd5e1;
  border-radius: 2px;
  margin: 0;
  z-index: 0;
}
.canvas-stage-edit::before {
  /* Page-edge ruler-style label so the canvas boundary is always visible
   * even when no elements have been placed. */
  content: attr(data-size);
  position: absolute;
  top: -1.6rem;
  left: 0;
  font-size: 0.7rem;
  color: #64748b;
  letter-spacing: 0.05em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.canvas-edit-el {
  position: absolute;
  box-sizing: border-box;
  cursor: move;
  touch-action: none;
  user-select: none;
  outline: 1px dashed rgba(99, 102, 241, 0);
  transition: outline-color 0.12s ease, box-shadow 0.12s ease;
  z-index: 2;
}
.canvas-edit-el:hover { outline-color: rgba(99, 102, 241, 0.65); }
.canvas-edit-el.selected {
  outline: 2px solid #4338ca;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.85), 0 0 0 3px rgba(99,102,241,0.25);
}
.canvas-edit-el.dragging {
  outline-color: #4338ca;
  box-shadow: 0 8px 24px -8px rgba(67, 56, 202, 0.45);
}
.canvas-edit-el-inner { width: 100%; height: 100%; pointer-events: none; }
.canvas-handle {
  position: absolute;
  width: 12px; height: 12px;
  background: #fff;
  border: 2px solid #4338ca;
  border-radius: 9999px;
  display: none;
  z-index: 1000;
  box-shadow: 0 1px 3px rgba(15,23,42,0.25);
}
.canvas-edit-el.selected .canvas-handle { display: block; }
.canvas-handle-nw { left: -7px; top: -7px;   cursor: nwse-resize; }
.canvas-handle-n  { left: 50%;  top: -7px;   transform: translateX(-50%); cursor: ns-resize; }
.canvas-handle-ne { right: -7px; top: -7px;  cursor: nesw-resize; }
.canvas-handle-e  { right: -7px; top: 50%;   transform: translateY(-50%); cursor: ew-resize; }
.canvas-handle-se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.canvas-handle-s  { left: 50%; bottom: -7px; transform: translateX(-50%); cursor: ns-resize; }
.canvas-handle-sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
.canvas-handle-w  { left: -7px; top: 50%;   transform: translateY(-50%); cursor: ew-resize; }

/* Floating position badge on the selected element while dragging — gives
 * a precise readout that matches the X/Y inputs in the props panel. */
.canvas-edit-el.selected::after {
  content: attr(data-pos);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: #1e293b;
  color: #fff;
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  border-radius: 0.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.canvas-edit-el.selected.dragging::after,
.canvas-edit-el.selected.resizing::after { opacity: 1; }

/* Alignment guide lines that flash while dragging. */
.canvas-guide {
  position: absolute;
  background: #ef4444;
  pointer-events: none;
  z-index: 999;
  opacity: 0;
  transition: opacity 0.1s ease;
}
.canvas-guide.visible { opacity: 0.85; }
.canvas-guide.v { width: 1px; top: 0; bottom: 0; }
.canvas-guide.h { height: 1px; left: 0; right: 0; }

.canvas-layers {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.canvas-layer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.4rem;
  margin-bottom: 0.25rem;
  background: #fff;
  font-size: 0.8rem;
  color: #1e293b;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.canvas-layer:hover { background: #f8fafc; }
.canvas-layer.active { background: #eef2ff; border-color: #818cf8; color: #4338ca; }
.canvas-layer-grip { cursor: grab; color: #94a3b8; }
.canvas-layer-name { flex: 1; text-transform: capitalize; }
.canvas-layer-del {
  background: transparent;
  border: 0;
  color: #94a3b8;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}
.canvas-layer-del:hover { color: #dc2626; }

.canvas-props label.canvas-prop {
  display: flex;
  flex-direction: column;
  font-size: 0.72rem;
  color: #64748b;
  margin-bottom: 0.6rem;
  gap: 0.25rem;
}
.canvas-props input[type="text"],
.canvas-props input[type="number"],
.canvas-props select,
.canvas-props textarea {
  border: 1px solid #cbd5e1;
  border-radius: 0.4rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
  color: #1e293b;
  background: #fff;
}
.canvas-props input[type="color"] { width: 100%; height: 2rem; padding: 0; border: 1px solid #cbd5e1; border-radius: 0.4rem; }
.canvas-geom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.canvas-geom label {
  display: flex;
  flex-direction: column;
  font-size: 0.7rem;
  color: #64748b;
  gap: 0.2rem;
}
.canvas-geom input { width: 100%; }
.canvas-upload {
  padding: 0.35rem 0.6rem;
  background: #f1f5f9;
  color: #1e293b;
  border-radius: 0.35rem;
  font-size: 0.75rem;
  border: 1px solid #cbd5e1;
  cursor: pointer;
}
.canvas-upload:hover { background: #e2e8f0; }
.canvas-prop-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.canvas-prop-actions button {
  padding: 0.4rem 0.5rem;
  border-radius: 0.4rem;
  border: 1px solid #cbd5e1;
  background: #fff;
  font-size: 0.75rem;
  color: #1e293b;
  cursor: pointer;
  transition: background 0.15s ease;
}
.canvas-prop-actions button:hover { background: #f1f5f9; }
.canvas-prop-actions .canvas-delete { color: #dc2626; border-color: #fecaca; }
.canvas-prop-actions .canvas-delete:hover { background: #fee2e2; }

/* Library — empty-state + create-block visual treatment.
 * Empty state is a centered call-to-action card; with items the header
 * action stays on the right but wraps cleanly on narrow viewports. */
.library-empty {
  background: #fff;
  border: 1px dashed #cbd5e1;
  border-radius: 0.75rem;
  padding: 3rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 540px;
  margin: 2rem auto;
}
.library-empty-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, #818cf8, #4338ca);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}
.library-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.library-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* On narrow viewports we collapse side panels into stackable sections so
 * the canvas stays centered and usable. Splitters hide — vertical
 * resizing isn't worth the complexity here. */
@media (max-width: 1024px) {
  .canvas-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "palette"
      "stage"
      "side";
  }
  .canvas-splitter { display: none; }
  .canvas-palette, .canvas-side {
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #e2e8f0;
  }
  .canvas-side-block.canvas-side-layers { max-height: 200px; }
}

/* Quill toolbar tweaks so it doesn't dwarf the small block-edit cards. */
.rte-editor {
  min-height: 6rem;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-top: 0;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.ql-toolbar.ql-snow {
  border: 1px solid #cbd5e1;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  border-bottom: 0;
  background: #f8fafc;
}
.ql-container.ql-snow { border: 0; }

/* ============================================================
 * Admin page-tree drag-and-drop affordances (admin-pages.js).
 * ============================================================ */
.pagetree-list, .pagetree-children { list-style: none; padding-left: 0; margin: 0; }
.pagetree-list .pagetree-list, .pagetree-children { padding-left: 1.5rem; }
.pagetree-item.pagetree-chosen .pagetree-row { box-shadow: 0 0 0 2px rgba(79,70,229,0.35); }
.pagetree-item.pagetree-drag .pagetree-row { opacity: 0.85; transform: rotate(0.5deg); }
.pagetree-ghost .pagetree-row {
  background: rgba(79,70,229,0.05) !important;
  border: 2px dashed #6366f1 !important;
}
.pagetree-ghost .pagetree-row > * { visibility: hidden; }
.pagetree-handle:active { cursor: grabbing; }

/* ============================================================
 * Public-site mega menu (partials/header.ejs).
 * ============================================================ */
.mega-nav { position: relative; }
.mega-nav .has-submenu { position: relative; }
.mega-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: var(--ds-radius-md);
  padding: 0.35rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.18s cubic-bezier(0.22, 1, 0.36, 1), transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0.2s;
  z-index: 50;
}
.mega-submenu .mega-submenu {
  /* second-level submenu pops out to the right */
  top: 0;
  left: 100%;
  margin-left: 4px;
}
@media (hover: hover) and (min-width: 768px) {
  .mega-nav .has-submenu:hover > .mega-submenu,
  .mega-nav .has-submenu:focus-within > .mega-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
  }
}
.mega-nav .has-submenu.open > .mega-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}
.mega-caret {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-left: 0.35rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  vertical-align: middle;
  opacity: 0.55;
  transition: transform 0.22s ease, opacity 0.18s ease;
}
.mega-nav .has-submenu:hover > a > .mega-caret,
.mega-nav .has-submenu.open > a > .mega-caret {
  transform: rotate(225deg) translateY(-1px);
  opacity: 1;
}

/* Mobile drawer */
@media (max-width: 767px) {
  .mega-submenu {
    position: static;
    box-shadow: none;
    border: none;
    border-left: 2px solid rgba(15, 23, 42, 0.06);
    border-radius: 0;
    padding: 0.15rem 0 0.15rem 0.85rem;
    margin: 0.25rem 0 0.5rem 0.5rem;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    display: none;
    background: transparent;
    backdrop-filter: none;
  }
  .mega-nav .has-submenu.open > .mega-submenu { display: block; }
  .mega-submenu .mega-submenu { left: auto; margin-left: 0; }
  .mega-submenu-link { white-space: normal; }
}

/* ================================================================
   Media library
   ================================================================ */

.media-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.25rem;
  min-height: calc(100vh - 130px);
}
@media (max-width: 900px) {
  .media-shell { grid-template-columns: 1fr; }
}

.media-sidebar {
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(15,23,42,0.06);
  padding: 1rem;
  height: fit-content;
  position: sticky;
  top: 1rem;
}
.media-sidebar h3 {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
  margin: 0 0 0.5rem;
}
.media-folder-tree { list-style: none; padding: 0; margin: 0; }
.media-folder-tree ul { list-style: none; padding: 0 0 0 0.9rem; margin: 0.2rem 0 0; border-left: 1px dashed #e2e8f0; }
.media-folder-node {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.5rem;
  border-radius: 0.4rem;
  cursor: pointer;
  font-size: 0.85rem;
  color: #334155;
  user-select: none;
}
.media-folder-node:hover { background: #f1f5f9; }
.media-folder-node.active { background: #eef2ff; color: #4338ca; font-weight: 600; }
.media-folder-node .twirl { width: 0.8rem; color: #94a3b8; }
.media-folder-node .twirl.empty { visibility: hidden; }
.media-folder-icon { color: #64748b; }
.media-folder-node.active .media-folder-icon { color: #4338ca; }
.media-folder-actions {
  display: none;
  margin-left: auto;
  gap: 0.25rem;
}
.media-folder-node:hover .media-folder-actions { display: flex; }
.media-folder-actions button {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #94a3b8;
  padding: 0 0.25rem;
  font-size: 0.8rem;
}
.media-folder-actions button:hover { color: #4338ca; }

.media-main {
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(15,23,42,0.06);
  padding: 1rem 1.25rem 1.5rem;
}
.media-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #e2e8f0;
}
.media-toolbar .media-search {
  flex: 1 1 200px;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  font-size: 0.85rem;
}
.media-toolbar select {
  padding: 0.5rem 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  background: #fff;
}
.media-view-toggle { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 0.5rem; overflow: hidden; }
.media-view-toggle button {
  background: #fff; border: 0; padding: 0.45rem 0.7rem; font-size: 0.8rem; cursor: pointer; color: #475569;
}
.media-view-toggle button.active { background: #4338ca; color: #fff; }

.media-dropzone {
  position: relative;
  border: 2px dashed #cbd5e1;
  border-radius: 0.75rem;
  padding: 1rem;
  text-align: center;
  color: #64748b;
  margin-bottom: 1rem;
  transition: background 120ms, border-color 120ms;
}
.media-dropzone.dragover {
  background: #eef2ff;
  border-color: #4338ca;
  color: #4338ca;
}
.media-dropzone strong { color: #1e293b; }

.media-progress-list { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.35rem; }
.media-progress-row {
  display: grid;
  grid-template-columns: 1fr 80px 60px;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: #334155;
}
.media-progress-bar {
  background: #e2e8f0;
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}
.media-progress-bar > div {
  background: #4338ca;
  height: 100%;
  width: 0%;
  transition: width 120ms ease-out;
}
.media-progress-row.error .media-progress-bar > div { background: #dc2626; }

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.85rem;
}
.media-card {
  border: 1px solid #e2e8f0;
  border-radius: 0.65rem;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 100ms, transform 100ms;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.media-card:hover { box-shadow: 0 4px 12px rgba(15,23,42,0.08); transform: translateY(-1px); }
.media-card.selected { box-shadow: 0 0 0 3px #4338ca; }
.media-thumb {
  aspect-ratio: 1 / 1;
  background:
    linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
    linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.media-thumb.media-thumb-other { background: #f8fafc; color: #64748b; font-size: 0.75rem; padding: 0.5rem; text-align: center; }
.media-card-meta {
  padding: 0.5rem 0.6rem;
  font-size: 0.72rem;
  color: #64748b;
  border-top: 1px solid #f1f5f9;
}
.media-card-meta .name {
  color: #1e293b;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-list { display: flex; flex-direction: column; gap: 0.25rem; }
.media-row {
  display: grid;
  grid-template-columns: 48px 2fr 1fr 100px 80px;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.6rem;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  cursor: pointer;
  border: 1px solid transparent;
}
.media-row:hover { background: #f8fafc; border-color: #e2e8f0; }
.media-row.selected { background: #eef2ff; border-color: #4338ca; }
.media-row .thumb { width: 48px; height: 48px; border-radius: 0.4rem; overflow: hidden; background: #f1f5f9; display: flex; align-items: center; justify-content: center; }
.media-row .thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.media-row .name { font-weight: 600; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-row .meta { color: #64748b; font-size: 0.75rem; }
@media (max-width: 700px) {
  .media-row { grid-template-columns: 48px 1fr 90px; }
  .media-row > .col-mime, .media-row > .col-date { display: none; }
}

.media-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: #64748b;
  border: 1px dashed #e2e8f0;
  border-radius: 0.5rem;
}

.media-pagination {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 1rem; font-size: 0.85rem; color: #64748b;
}
.media-pagination button {
  padding: 0.35rem 0.7rem;
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 0.8rem;
}
.media-pagination button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Asset preview modal ---- */
.media-modal-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,0.6);
  z-index: 1000; display: none; align-items: center; justify-content: center; padding: 1rem;
}
.media-modal-backdrop.open { display: flex; }
.media-modal {
  background: #fff;
  width: min(960px, 100%);
  max-height: 92vh;
  border-radius: 0.85rem;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  box-shadow: 0 20px 50px rgba(15,23,42,0.25);
}
@media (max-width: 800px) { .media-modal { grid-template-columns: 1fr; max-height: 95vh; } }
.media-modal-preview {
  background:
    linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
    linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  display: flex; align-items: center; justify-content: center;
  min-height: 280px;
  padding: 1rem;
}
.media-modal-preview img { max-width: 100%; max-height: 60vh; object-fit: contain; }
.media-modal-info {
  padding: 1.25rem;
  display: flex; flex-direction: column; gap: 0.85rem;
  overflow-y: auto;
}
.media-modal-info h2 { font-size: 1rem; font-weight: 700; color: #1e293b; word-break: break-all; }
.media-modal-info label { font-size: 0.75rem; color: #475569; font-weight: 600; display: block; }
.media-modal-info input, .media-modal-info select, .media-modal-info textarea {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  margin-top: 0.25rem;
}
.media-modal-actions {
  display: flex; gap: 0.5rem; margin-top: auto; flex-wrap: wrap;
}
.media-modal-actions button {
  padding: 0.5rem 0.85rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
}
.btn-primary  { background: #4338ca; color: #fff; border-color: #4338ca; }
.btn-primary:hover  { background: #3730a3; }
.btn-secondary { background: #fff; color: #334155; border-color: #cbd5e1; }
.btn-secondary:hover { background: #f8fafc; }
.btn-danger { background: #fff; color: #b91c1c; border-color: #fecaca; }
.btn-danger:hover { background: #fef2f2; }

.media-meta-row { display: grid; grid-template-columns: 90px 1fr; gap: 0.5rem; font-size: 0.78rem; color: #475569; }
.media-meta-row .k { color: #64748b; }

/* ---- Reusable media picker (embedded modal) ---- */
.mp-modal {
  position: fixed; inset: 0; background: rgba(15,23,42,0.6);
  z-index: 1100; display: none; align-items: center; justify-content: center; padding: 1rem;
}
.mp-modal.open { display: flex; }
.mp-panel {
  background: #fff;
  border-radius: 0.85rem;
  width: min(1000px, 100%);
  max-height: 92vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15,23,42,0.25);
}
.mp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid #e2e8f0;
}
.mp-tabs { display: flex; gap: 0.25rem; }
.mp-tabs button {
  padding: 0.35rem 0.85rem;
  border: 0; background: transparent; cursor: pointer;
  border-radius: 0.5rem; font-size: 0.85rem; color: #475569; font-weight: 500;
}
.mp-tabs button.active { background: #eef2ff; color: #4338ca; }
.mp-body { padding: 1rem; overflow-y: auto; flex: 1 1 auto; min-height: 280px; }
.mp-foot {
  padding: 0.75rem 1.1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  border-top: 1px solid #e2e8f0;
  flex-wrap: wrap;
}
.mp-foot .selected-info { font-size: 0.8rem; color: #475569; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-foot button { padding: 0.45rem 0.85rem; border-radius: 0.5rem; border: 1px solid #cbd5e1; background: #fff; cursor: pointer; font-size: 0.85rem; }
.mp-foot button.primary { background: #4338ca; color: #fff; border-color: #4338ca; }
.mp-foot button.primary:disabled { opacity: 0.5; cursor: not-allowed; }
.mp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.6rem;
}
.mp-grid .media-card .media-thumb { aspect-ratio: 1 / 1; }
.mp-search-row {
  display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; flex-wrap: wrap;
}
.mp-search-row input, .mp-search-row select {
  padding: 0.4rem 0.6rem; border: 1px solid #cbd5e1; border-radius: 0.5rem; font-size: 0.8rem;
}
.mp-search-row input { flex: 1 1 180px; min-width: 0; }

/* ============================================================
 * TEAM SOCIAL ICONS — public-site team grid.
 * Replaces the legacy 2-letter abbreviation tiles with proper SVG icons.
 * ============================================================ */
.team-socials {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
.team-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--ds-radius-sm);
  border: 1px solid rgba(15, 23, 42, 0.1);
  color: rgba(15, 23, 42, 0.55);
  background: #fff;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.team-social:hover {
  color: var(--brand-900, #1a2540);
  border-color: var(--brand-900, #1a2540);
  background: rgba(15, 23, 42, 0.04);
  transform: translateY(-1px);
}

/* Contact section social icons — light variant for use over the dark
 * brand-900 background of the contact_form block. */
.contact-socials {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.contact-socials-form { margin-top: 1rem; }
.contact-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--ds-radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.04);
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.contact-social:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

/* Footer link refinement — transform-based slide so the row never reflows
 * on hover. A short hairline indicator scales-in from 0 to 0.6rem to keep
 * the cue intact, but using transform: scaleX avoids layout passes. */
.site-footer .footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  color: rgba(255, 255, 255, 0.72);
  will-change: transform;
  transition: color 0.2s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-footer .footer-link::before {
  content: '';
  display: inline-block;
  width: 0.6rem;
  height: 1px;
  background: currentColor;
  opacity: 0.65;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-footer .footer-link:hover {
  color: #fff;
  transform: translateX(2px);
}
.site-footer .footer-link:hover::before { transform: scaleX(1); }
.site-footer .footer-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
 * MODERN SCROLLBAR — minimal, neutral, theme-aware.
 * Applies project-wide; admin pages also benefit.
 * ============================================================ */
html { scrollbar-width: thin; scrollbar-color: rgba(15, 23, 42, 0.24) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.16);
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 9999px;
  transition: background 0.18s ease;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, 0.32); background-clip: content-box; }
*::-webkit-scrollbar-corner { background: transparent; }

/* Focus rings — uniform, accessible, brand-coloured. Uses `:where()` so any
 * component-specific focus rule wins without `!important`. */
:where(button, [role="button"], a, input, select, textarea):focus-visible {
  outline: 2px solid var(--brand-500, #4a6794);
  outline-offset: 2px;
}
[data-theme="dark"] :where(button, [role="button"], a, input, select, textarea):focus-visible {
  outline-color: var(--brand-100, #d6deec);
}

/* Selection colour — picks up the brand for a polished feel. */
::selection { background: var(--brand-900, #1a2540); color: #fff; }

/* ============================================================
 * ADMIN CHROME — table / card / button polish.
 * Keeps the admin visual language consistent with the new public design
 * (sharp edges, hairline borders, premium hover states). Tailwind classes
 * stay in place for layout; these utility classes harden the visual rhythm.
 * ============================================================ */
.admin-page-title {
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
}
.admin-page-subtitle {
  font-size: 0.875rem;
  color: #64748b;
  margin-top: 0.25rem;
  max-width: 60ch;
}

.admin-card {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: var(--ds-radius-md);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  padding: 1.25rem 1.5rem 1.5rem;
}
.admin-card-header { margin-bottom: 1.25rem; }
.admin-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -0.005em;
}
.admin-card-subtitle {
  font-size: 0.78rem;
  color: #64748b;
  margin-top: 0.25rem;
}

.admin-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: #475569;
  margin-bottom: 0.35rem;
  letter-spacing: -0.005em;
}

.admin-input {
  display: block;
  width: 100%;
  padding: 0.55rem 0.75rem;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: var(--ds-radius-sm);
  font-size: 0.875rem;
  color: #0f172a;
  transition:
    border-color var(--ds-dur-fast) var(--ds-ease-out),
    box-shadow var(--ds-dur-fast) var(--ds-ease-out),
    background var(--ds-dur-fast) var(--ds-ease-out);
}
.admin-input:hover { border-color: rgba(15, 23, 42, 0.22); }
.admin-input:focus {
  outline: none;
  border-color: var(--brand-500, #4a6794);
  box-shadow: 0 0 0 3px rgba(74, 103, 148, 0.18);
}
.admin-input::placeholder { color: rgba(15, 23, 42, 0.35); }
.admin-input-sm { padding: 0.4rem 0.55rem; font-size: 0.82rem; }
.admin-input[disabled],
.admin-input:disabled {
  background: rgba(15, 23, 42, 0.025);
  color: rgba(15, 23, 42, 0.5);
  cursor: not-allowed;
}

select.admin-input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  background-size: 0.85rem;
  padding-right: 2rem;
  appearance: none;
  -webkit-appearance: none;
}

.admin-check {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: #334155;
  cursor: pointer;
}
.admin-check input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--brand-900, #1a2540);
}

.admin-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border-radius: var(--ds-radius-sm);
  font-size: 0.85rem;
  border: 1px solid transparent;
}
.admin-alert-success {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}
.admin-alert-error {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}

.admin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.85rem;
}
.admin-table thead th {
  padding: 0.75rem 0.85rem;
  text-align: left;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2, #64748b);
  border-bottom: 1px solid var(--border-1, rgba(15, 23, 42, 0.08));
  background: rgba(15, 23, 42, 0.025);
  white-space: nowrap;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.admin-table thead th:first-child { padding-left: 1rem; }
.admin-table thead th:last-child  { padding-right: 1rem; }
.admin-table tbody td {
  padding: 0.8rem 0.85rem;
  border-bottom: 1px solid var(--border-1, rgba(15, 23, 42, 0.05));
  vertical-align: middle;
  color: var(--text-1, #1e293b);
}
.admin-table tbody td:first-child { padding-left: 1rem; }
.admin-table tbody td:last-child  { padding-right: 1rem; }
.admin-table tbody tr {
  transition: background var(--ds-dur-fast) var(--ds-ease-out);
}
.admin-table tbody tr:hover { background: rgba(15, 23, 42, 0.025); }
.admin-table tbody tr:last-child td { border-bottom: 0; }
[data-theme="dark"] .admin-table tbody tr:hover { background: rgba(148, 163, 184, 0.04); }

.admin-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: var(--ds-radius-xs);
}
.admin-pill-amber { background: #fef3c7; color: #92400e; }
.admin-pill-green { background: #d1fae5; color: #065f46; }
.admin-pill-slate { background: #f1f5f9; color: #475569; }

.admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.95rem;
  border-radius: var(--ds-radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background var(--ds-dur-fast) var(--ds-ease-out),
    border-color var(--ds-dur-fast) var(--ds-ease-out),
    color var(--ds-dur-fast) var(--ds-ease-out),
    transform var(--ds-dur-fast) var(--ds-ease-out),
    box-shadow var(--ds-dur-fast) var(--ds-ease-out);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.1;
}
.admin-btn:active { transform: translateY(0); }
.admin-btn-xs { padding: 0.3rem 0.55rem; font-size: 0.72rem; }
.admin-btn-sm { padding: 0.4rem 0.75rem; font-size: 0.78rem; }
.admin-btn-primary {
  background: var(--brand-900, #1a2540);
  color: #fff;
}
.admin-btn-primary:hover {
  background: var(--brand-700, #2a3d63);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px rgba(15, 23, 42, 0.4);
}
.admin-btn-secondary {
  background: #fff;
  color: #334155;
  border-color: rgba(15, 23, 42, 0.12);
}
.admin-btn-secondary:hover {
  border-color: var(--brand-900, #1a2540);
  color: var(--brand-900, #1a2540);
}
.admin-btn-ghost {
  background: transparent;
  color: var(--brand-700, #2a3d63);
  border-color: rgba(15, 23, 42, 0.08);
}
.admin-btn-ghost:hover {
  background: rgba(15, 23, 42, 0.04);
  color: var(--brand-900, #1a2540);
  border-color: rgba(15, 23, 42, 0.18);
}
.admin-btn-danger {
  background: #fff;
  color: #b91c1c;
  border-color: #fecaca;
}
.admin-btn-danger:hover {
  background: #fef2f2;
  border-color: #f87171;
}

/* ============================================================
 * ADMIN HEADER NAV — premium polish on _layout_header.ejs
 * ============================================================ */
.admin-shell-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.admin-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.75rem;
  border-radius: var(--ds-radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  color: #475569;
  white-space: nowrap;
  text-decoration: none;
  transition:
    color var(--ds-dur-fast) var(--ds-ease-out),
    background var(--ds-dur-fast) var(--ds-ease-out);
  position: relative;
}
.admin-nav-link:hover { color: var(--brand-900, #1a2540); background: rgba(15, 23, 42, 0.04); }
.admin-nav-link:focus-visible {
  outline: 2px solid var(--brand-500, #4a6794);
  outline-offset: 2px;
}
.admin-nav-link.is-active {
  color: var(--brand-900, #1a2540);
  background: rgba(74, 103, 148, 0.1);
  font-weight: 600;
}

/* ============================================================
 * LANGUAGE / FLAG ADMIN PICKER (admin/languages.ejs)
 * ============================================================ */
.lang-flag-row {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.lang-flag-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 1.5rem;
  border-radius: 2px;
  overflow: hidden;
  outline: 1px solid var(--border-1, rgba(15, 23, 42, 0.1));
  outline-offset: -1px;
  background: var(--surface-muted, #f8fafc);
  flex-shrink: 0;
}
.lang-flag-preview .fi {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0;
  background-size: cover;
  background-position: center;
}
.lang-flag-input { width: 4.5rem; text-transform: lowercase; font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
[data-theme="dark"] .lang-flag-preview { background: rgba(148, 163, 184, 0.06); }
[data-theme="dark"] .lang-flag-wrap { outline-color: rgba(148, 163, 184, 0.18); background: rgba(148, 163, 184, 0.06); }

/* ============================================================
 * SOCIAL ROW PICKER (admin/settings.ejs + team_member_editor.ejs)
 * Grid keeps all rows aligned; SortableJS handle on the left.
 * ============================================================ */
.social-row-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.social-row {
  display: grid;
  grid-template-columns: auto auto minmax(140px, 1.1fr) minmax(200px, 2fr) minmax(140px, 1fr) auto auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  background: var(--surface-2, #fff);
  border: 1px solid var(--border-1, rgba(15, 23, 42, 0.08));
  border-radius: var(--ds-radius-sm);
  transition:
    border-color var(--ds-dur-fast) var(--ds-ease-out),
    box-shadow var(--ds-dur-fast) var(--ds-ease-out),
    background var(--ds-dur-fast) var(--ds-ease-out),
    transform var(--ds-dur-fast) var(--ds-ease-out);
}
.social-row:hover {
  border-color: var(--border-2, rgba(15, 23, 42, 0.16));
  box-shadow: var(--shadow-1);
}
.social-row:focus-within {
  border-color: var(--brand-500, #4a6794);
  box-shadow: 0 0 0 3px rgba(74, 103, 148, 0.14);
}
.social-row.social-row-blank {
  background: rgba(15, 23, 42, 0.015);
  border-style: dashed;
}
[data-theme="dark"] .social-row.social-row-blank {
  background: rgba(148, 163, 184, 0.03);
}
.social-row-ghost {
  opacity: 0.55;
  background: var(--accent-soft, rgba(74, 103, 148, 0.08));
  border-style: dashed !important;
  border-color: var(--accent, #2a3d63) !important;
}

/* Drag handle — vertical dots glyph in a subtle button shape, becomes the
 * brand accent on hover so the affordance is obvious without clutter. */
.social-row-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-sm);
  color: var(--text-3, #94a3b8);
  cursor: grab;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  line-height: 1;
  transition:
    color var(--ds-dur-fast) var(--ds-ease-out),
    background var(--ds-dur-fast) var(--ds-ease-out),
    border-color var(--ds-dur-fast) var(--ds-ease-out);
}
.social-row-handle:active { cursor: grabbing; }
.social-row-handle:hover {
  color: var(--accent, #2a3d63);
  background: var(--accent-soft, rgba(74, 103, 148, 0.08));
  border-color: var(--accent-soft, rgba(74, 103, 148, 0.18));
}

/* Platform icon chip — uses surface-muted in light, surface-1 in dark. */
.social-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--ds-radius-sm);
  background: var(--surface-muted, #f1f5f9);
  color: var(--text-1, #334155);
  flex-shrink: 0;
  transition: background var(--ds-dur-fast) var(--ds-ease-out);
}
.social-row-icon svg { display: block; }
.social-row:hover .social-row-icon { background: var(--accent-soft, rgba(74, 103, 148, 0.1)); color: var(--accent, #2a3d63); }
[data-theme="dark"] .social-row-icon { background: rgba(148, 163, 184, 0.08); color: var(--text-2); }
[data-theme="dark"] .social-row:hover .social-row-icon { background: var(--accent-soft); color: var(--text-1); }

.social-row-platform, .social-row-url, .social-row-label { min-width: 0; }

/* Visibility toggle — pill-shaped chip so it reads as a setting, not text. */
.social-row-visible {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  white-space: nowrap;
  color: var(--text-2, #64748b);
  padding: 0.3rem 0.6rem;
  border-radius: 9999px;
  background: var(--surface-muted, #f1f5f9);
  border: 1px solid var(--border-1, rgba(15, 23, 42, 0.06));
  transition:
    background var(--ds-dur-fast) var(--ds-ease-out),
    color var(--ds-dur-fast) var(--ds-ease-out),
    border-color var(--ds-dur-fast) var(--ds-ease-out);
  cursor: pointer;
}
.social-row-visible:hover { background: var(--accent-soft, rgba(74, 103, 148, 0.08)); border-color: var(--accent-soft, rgba(74, 103, 148, 0.18)); }
.social-row-visible input[type="checkbox"] {
  width: 0.85rem;
  height: 0.85rem;
  accent-color: var(--accent, #2a3d63);
}
.social-row-visible:has(input:checked) {
  color: var(--accent, #2a3d63);
  background: var(--accent-soft, rgba(74, 103, 148, 0.1));
  border-color: var(--accent-soft, rgba(74, 103, 148, 0.18));
  font-weight: 600;
}
[data-theme="dark"] .social-row-visible { background: rgba(148, 163, 184, 0.06); border-color: var(--border-1); }
[data-theme="dark"] .social-row-visible:has(input:checked) {
  color: var(--brand-100, #d6deec);
  background: var(--accent-soft);
  border-color: var(--accent-soft);
}

/* Remove button — quiet by default, danger-tinted on hover. */
.social-row-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  background: transparent;
  color: var(--text-3, #94a3b8);
  border: 1px solid transparent;
  border-radius: var(--ds-radius-sm);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  transition:
    color var(--ds-dur-fast) var(--ds-ease-out),
    background var(--ds-dur-fast) var(--ds-ease-out),
    border-color var(--ds-dur-fast) var(--ds-ease-out),
    transform var(--ds-dur-fast) var(--ds-ease-out);
}
.social-row-remove:hover {
  color: #b91c1c;
  background: #fef2f2;
  border-color: #fecaca;
}
[data-theme="dark"] .social-row-remove { color: var(--text-3); }
[data-theme="dark"] .social-row-remove:hover {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: rgba(253, 164, 175, 0.25);
}

/* Responsive: collapse to a stacked layout where each field gets a label.
 * Visibility + remove sit on a single trailing row so the touch targets stay
 * comfortable. */
@media (max-width: 920px) {
  .social-row {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      'handle icon platform remove'
      'handle icon url      remove'
      'handle icon label    remove'
      'handle icon visible  remove';
    row-gap: 0.45rem;
  }
  .social-row-handle  { grid-area: handle; align-self: stretch; }
  .social-row-icon    { grid-area: icon; align-self: stretch; height: auto; }
  .social-row-platform { grid-area: platform; }
  .social-row-url      { grid-area: url; }
  .social-row-label    { grid-area: label; }
  .social-row-visible  { grid-area: visible; justify-self: start; }
  .social-row-remove   { grid-area: remove; align-self: start; }
}

/* Reduced motion preferences — disable big transitions site-wide. */
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-nav-link,
  .site-nav-link .site-nav-link-label::after,
  .lang-switcher-btn,
  .lang-switcher-menu,
  .site-mobile-nav,
  .footer-social,
  .team-social,
  .ds-post-card,
  .admin-btn,
  .block-tile,
  .bp-card {
    transition: none !important;
    animation: none !important;
  }
  .site-footer .footer-link:hover { transform: none; }
  .footer-social:hover { transform: none; }
  .admin-btn-primary:hover { transform: none; }
}

/* ============================================================
 * LEGACY ADMIN UTILITY HARMONIZATION
 * ============================================================
 * Several admin templates predate the design-system tokens and use raw
 * Tailwind utilities (`bg-white rounded-xl shadow-sm p-6`, `bg-indigo-700`,
 * `text-indigo-700`, etc.) for cards, inputs, and primary buttons.
 *
 * Rewriting every template is high-risk churn for a polish pass. Instead,
 * this block visually unifies those legacy patterns with `.admin-card`,
 * `.admin-input`, `.admin-btn-primary` so the chrome feels coherent in both
 * light and dark themes. When a template is touched in future work, prefer
 * the explicit tokens — but until then, the look stays consistent.
 *
 * We scope these rules to inside `body` (admin pages) and avoid clobbering
 * the public-site cards / inputs / buttons by either checking the parent or
 * limiting to selectors that only appear in admin chrome.
 * ============================================================ */

/* Cards: rounded-xl + shadow-sm + bg-white is the legacy admin card. Tighten
 * the radius to match `.admin-card` (8px), drop the visible shadow for a
 * hairline border so the surfaces line up. */
body.bg-slate-50 .bg-white.rounded-xl.shadow-sm,
body.bg-slate-50 .bg-white.rounded-xl.shadow-sm\/.. {
  border: 1px solid var(--border-1);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--shadow-1);
}
[data-theme="dark"] body.bg-slate-50 .bg-white.rounded-xl.shadow-sm {
  background-color: var(--surface-2) !important;
  border-color: var(--border-1);
  color: var(--text-1);
}

/* Legacy inputs (`border border-slate-300 rounded-lg`) — pull them in line
 * with `.admin-input`: sharper corners, brand focus ring, no jitter. */
body.bg-slate-50 input.border.border-slate-300,
body.bg-slate-50 select.border.border-slate-300,
body.bg-slate-50 textarea.border.border-slate-300 {
  border-radius: var(--ds-radius-sm) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  transition:
    border-color var(--ds-dur-fast) var(--ds-ease-out),
    box-shadow var(--ds-dur-fast) var(--ds-ease-out),
    background var(--ds-dur-fast) var(--ds-ease-out);
}
body.bg-slate-50 input.border.border-slate-300:hover,
body.bg-slate-50 select.border.border-slate-300:hover,
body.bg-slate-50 textarea.border.border-slate-300:hover {
  border-color: rgba(15, 23, 42, 0.24) !important;
}
body.bg-slate-50 input.border.border-slate-300:focus,
body.bg-slate-50 select.border.border-slate-300:focus,
body.bg-slate-50 textarea.border.border-slate-300:focus {
  outline: none !important;
  border-color: var(--brand-500, #4a6794) !important;
  box-shadow: 0 0 0 3px rgba(74, 103, 148, 0.18) !important;
}
[data-theme="dark"] body.bg-slate-50 input.border.border-slate-300,
[data-theme="dark"] body.bg-slate-50 select.border.border-slate-300,
[data-theme="dark"] body.bg-slate-50 textarea.border.border-slate-300 {
  background-color: var(--surface-1) !important;
  color: var(--text-1) !important;
  border-color: var(--border-2) !important;
}
[data-theme="dark"] body.bg-slate-50 input.border.border-slate-300:hover,
[data-theme="dark"] body.bg-slate-50 select.border.border-slate-300:hover,
[data-theme="dark"] body.bg-slate-50 textarea.border.border-slate-300:hover {
  border-color: var(--border-strong) !important;
}
[data-theme="dark"] body.bg-slate-50 input.border.border-slate-300:focus,
[data-theme="dark"] body.bg-slate-50 select.border.border-slate-300:focus,
[data-theme="dark"] body.bg-slate-50 textarea.border.border-slate-300:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-ring) !important;
}

/* Legacy primary buttons & links: `bg-indigo-700 hover:bg-indigo-800` text
 * is mapped onto the brand palette so the accent is consistent. */
body.bg-slate-50 .bg-indigo-700,
body.bg-slate-50 .bg-indigo-800 { background-color: var(--brand-900, #1a2540) !important; }
body.bg-slate-50 .hover\:bg-indigo-800:hover { background-color: var(--brand-700, #2a3d63) !important; }
body.bg-slate-50 .hover\:bg-indigo-700:hover { background-color: var(--brand-700, #2a3d63) !important; }
body.bg-slate-50 .text-indigo-700,
body.bg-slate-50 .text-indigo-800 { color: var(--brand-700, #2a3d63); }
body.bg-slate-50 a.text-indigo-700:hover,
body.bg-slate-50 .hover\:text-indigo-700:hover { color: var(--brand-900, #1a2540); }

/* Legacy "filter/secondary" buttons (`bg-slate-700 hover:bg-slate-900`)
 * — map to a quieter dark accent so it doesn't compete with the primary. */
body.bg-slate-50 button.bg-slate-700 { background-color: var(--brand-700, #2a3d63) !important; }
body.bg-slate-50 button.bg-slate-700:hover { background-color: var(--brand-900, #1a2540) !important; }

/* Legacy table-row hover (`hover:bg-slate-50`) feels invisible inside a card
 * that's already white. Use the same hover token as `.admin-table`. */
body.bg-slate-50 tr.hover\:bg-slate-50:hover { background-color: rgba(15, 23, 42, 0.025); }
[data-theme="dark"] body.bg-slate-50 tr.hover\:bg-slate-50:hover { background-color: rgba(148, 163, 184, 0.04); }

/* Status / role pills used throughout (bg-emerald-100/text-emerald-700, etc.)
 * — switch to uppercase mono and tighter padding so they read as system tags
 * rather than coloured blobs. Doesn't override colour; just typography. */
body.bg-slate-50 :where(.bg-emerald-100, .bg-red-100, .bg-amber-100, .bg-slate-100, .bg-slate-200, .bg-indigo-50, .bg-indigo-100):where(.rounded) {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* Dropdowns (user menu, etc.) often use `ring-1 ring-slate-200/60` for the
 * border. Match the admin-card hairline so the seam disappears in dark. */
[data-theme="dark"] body.bg-slate-50 .ring-1.ring-slate-200\/60,
[data-theme="dark"] body.bg-slate-50 .ring-1.ring-slate-200 {
  --tw-ring-color: var(--border-1) !important;
  background-color: var(--surface-3) !important;
}
[data-theme="dark"] body.bg-slate-50 .ring-1.ring-slate-200\/60 a,
[data-theme="dark"] body.bg-slate-50 .ring-1.ring-slate-200 a {
  color: var(--text-2);
}
[data-theme="dark"] body.bg-slate-50 .ring-1.ring-slate-200\/60 a:hover,
[data-theme="dark"] body.bg-slate-50 .ring-1.ring-slate-200 a:hover {
  background-color: rgba(148, 163, 184, 0.06);
  color: var(--text-1);
}
[data-theme="dark"] body.bg-slate-50 .hover\:bg-slate-50:hover {
  background-color: rgba(148, 163, 184, 0.06) !important;
}

/* Dark-mode polish for the mobile language chip + admin language pills. */
[data-theme="dark"] .site-mobile-lang-chip {
  background: rgba(148, 163, 184, 0.04);
  border-color: var(--border-1);
  color: var(--text-2);
}
[data-theme="dark"] .site-mobile-lang-chip:hover {
  border-color: var(--border-2);
  color: var(--text-1);
}
[data-theme="dark"] .site-mobile-lang-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
[data-theme="dark"] .site-mobile-nav-lang-title { color: var(--text-3); }

/* ============================================================
 * THEME TOKENS — site-wide dark/light system.
 * ============================================================
 * The two themes are driven by `<html data-theme="light|dark">`.
 * `theme.js` sets that attribute *before paint* so the page never
 * flashes the wrong colours. The brand palette stays the same in
 * both themes — only neutral surfaces/text/borders flip.
 *
 * Naming convention:
 *   --surface-1: page background
 *   --surface-2: card / panel background (one step up from page)
 *   --surface-3: elevated surface (modals, popovers)
 *   --text-1:    primary copy
 *   --text-2:    secondary copy (labels, captions)
 *   --text-3:    tertiary (placeholders, meta)
 *   --border-1:  hairline (cards, tables)
 *   --border-2:  emphasised border (hovers, focus rings)
 *   --accent:    brand-700 in light, brand-500 in dark for contrast
 *   --accent-soft: tinted brand background
 * ============================================================ */
:root,
:root[data-theme="light"] {
  --surface-0: #f1f5f9;
  --surface-1: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #ffffff;
  --surface-muted: #f8fafc;
  --surface-overlay: rgba(15, 23, 42, 0.55);
  --text-1: #0f172a;
  --text-2: #475569;
  --text-3: #94a3b8;
  --text-inverse: #ffffff;
  --border-1: rgba(15, 23, 42, 0.08);
  --border-2: rgba(15, 23, 42, 0.18);
  --border-strong: rgba(15, 23, 42, 0.32);
  --accent: var(--brand-700, #2a3d63);
  --accent-soft: rgba(74, 103, 148, 0.10);
  --accent-ring: rgba(74, 103, 148, 0.18);
  --danger: #b91c1c;
  --danger-soft: #fef2f2;
  --success: #047857;
  --success-soft: #ecfdf5;
  --warning: #92400e;
  --warning-soft: #fef3c7;
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-2: 0 8px 24px -12px rgba(15, 23, 42, 0.18);
  --shadow-3: 0 30px 60px -25px rgba(15, 23, 42, 0.35);
  --canvas-grid-1: rgba(15, 23, 42, 0.05);
  --canvas-grid-2: rgba(15, 23, 42, 0.18);
}

:root[data-theme="dark"] {
  --surface-0: #0b1220;
  --surface-1: #0f172a;
  --surface-2: #131c30;
  --surface-3: #1a2540;
  --surface-muted: #131c30;
  --surface-overlay: rgba(2, 6, 23, 0.7);
  --text-1: #e2e8f0;
  --text-2: #94a3b8;
  --text-3: #64748b;
  --text-inverse: #0f172a;
  --border-1: rgba(148, 163, 184, 0.12);
  --border-2: rgba(148, 163, 184, 0.22);
  --border-strong: rgba(148, 163, 184, 0.4);
  --accent: var(--brand-500, #4a6794);
  --accent-soft: rgba(74, 103, 148, 0.18);
  --accent-ring: rgba(74, 103, 148, 0.35);
  --danger: #fda4af;
  --danger-soft: rgba(220, 38, 38, 0.12);
  --success: #6ee7b7;
  --success-soft: rgba(5, 150, 105, 0.12);
  --warning: #fcd34d;
  --warning-soft: rgba(180, 83, 9, 0.18);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 8px 24px -12px rgba(0, 0, 0, 0.55);
  --shadow-3: 0 30px 60px -20px rgba(0, 0, 0, 0.7);
  --canvas-grid-1: rgba(148, 163, 184, 0.08);
  --canvas-grid-2: rgba(148, 163, 184, 0.2);
}

/* System theme follows OS preference. `theme.js` will set the attribute
 * explicitly once it runs; until then this media query handles SSR. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --surface-0: #0b1220;
    --surface-1: #0f172a;
    --surface-2: #131c30;
    --surface-3: #1a2540;
    --surface-muted: #131c30;
    --surface-overlay: rgba(2, 6, 23, 0.7);
    --text-1: #e2e8f0;
    --text-2: #94a3b8;
    --text-3: #64748b;
    --text-inverse: #0f172a;
    --border-1: rgba(148, 163, 184, 0.12);
    --border-2: rgba(148, 163, 184, 0.22);
    --border-strong: rgba(148, 163, 184, 0.4);
    --accent: var(--brand-500, #4a6794);
    --accent-soft: rgba(74, 103, 148, 0.18);
    --accent-ring: rgba(74, 103, 148, 0.35);
  }
}

/* Smooth crossfade when toggling. `.theme-ready` is added by theme.js after
 * first paint, so the initial render doesn't animate. */
html.theme-ready,
html.theme-ready body,
html.theme-ready .admin-card,
html.theme-ready .admin-shell-header,
html.theme-ready .editor-toolbar,
html.theme-ready .editor-preview,
html.theme-ready .editor-sidebar,
html.theme-ready .block-tile,
html.theme-ready .ds-card,
html.theme-ready .site-header,
html.theme-ready .site-footer {
  transition: background-color 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              color 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  html.theme-ready,
  html.theme-ready body,
  html.theme-ready * {
    transition: none !important;
  }
}

/* ---- DARK-MODE OVERRIDES ---- */
/* Body backgrounds — both the public and admin shells use slate-50 or
 * white in light mode. Re-point them at surface tokens. */
[data-theme="dark"] body {
  background-color: var(--surface-0) !important;
  color: var(--text-1);
}
[data-theme="dark"] body.bg-slate-50 { background-color: var(--surface-0) !important; }
[data-theme="dark"] body.bg-white   { background-color: var(--surface-0) !important; }
[data-theme="dark"] body.text-slate-800 { color: var(--text-1) !important; }

/* Public site chrome — header, mobile nav, mega menu. */
[data-theme="dark"] .site-header {
  background: rgba(15, 23, 42, 0.78);
  border-bottom-color: transparent;
}
[data-theme="dark"] .site-header.is-scrolled {
  background: rgba(11, 18, 32, 0.92);
  border-bottom-color: var(--border-1);
}
[data-theme="dark"] .site-nav-link { color: var(--text-2); }
[data-theme="dark"] .site-nav-link:hover { color: var(--text-1); background: rgba(148, 163, 184, 0.08); }
[data-theme="dark"] .site-nav-link.is-active { color: var(--text-1); }
[data-theme="dark"] .site-brand span.font-bold,
[data-theme="dark"] .site-brand .text-brand-900 { color: var(--text-1); }

[data-theme="dark"] .mega-submenu {
  background: rgba(19, 28, 48, 0.98);
  border-color: var(--border-1);
}
[data-theme="dark"] .mega-submenu-link { color: var(--text-2); }
[data-theme="dark"] .mega-submenu-link:hover,
[data-theme="dark"] .mega-submenu-link.is-active {
  color: var(--text-1); background: rgba(148, 163, 184, 0.06);
}
[data-theme="dark"] .lang-switcher-btn {
  background: rgba(148, 163, 184, 0.06);
  border-color: var(--border-1);
  color: var(--text-2);
}
[data-theme="dark"] .lang-switcher-btn:hover,
[data-theme="dark"] .lang-switcher-btn.is-open {
  color: var(--text-1); background: rgba(148, 163, 184, 0.1); border-color: var(--border-2);
}
[data-theme="dark"] .lang-switcher-menu {
  background: var(--surface-3); border-color: var(--border-1);
}
[data-theme="dark"] .lang-switcher-item { color: var(--text-2); }
[data-theme="dark"] .lang-switcher-item:hover,
[data-theme="dark"] .lang-switcher-item.is-active { color: var(--text-1); background: rgba(148, 163, 184, 0.08); }
/* Dark-mode fixes for the language-switcher sub-elements. These kept light-only
 * colours (dark slate text / brand-900 navy) that were invisible on the dark
 * dropdown surface — the menu caption, the per-language code pills, the active
 * check mark, and the flag chrome. Remap them onto the dark theme tokens so the
 * whole selector stays readable with proper contrast in both themes. */
[data-theme="dark"] .lang-switcher-menu-label { color: var(--text-3); }
[data-theme="dark"] .lang-code-pill {
  color: var(--text-3);
  background: rgba(148, 163, 184, 0.12);
}
[data-theme="dark"] .lang-switcher-item.is-active .lang-code-pill {
  color: var(--text-2);
  background: rgba(148, 163, 184, 0.18);
}
[data-theme="dark"] .lang-check { color: var(--text-1); }
[data-theme="dark"] .lang-flag-wrap {
  outline-color: var(--border-1);
  background: rgba(148, 163, 184, 0.06);
}
[data-theme="dark"] .lang-flag-code {
  color: var(--text-3);
  background: rgba(148, 163, 184, 0.12);
}
[data-theme="dark"] .site-mobile-nav {
  background: rgba(15, 23, 42, 0.98);
  border-color: var(--border-1);
}
[data-theme="dark"] .site-menu-toggle {
  background: rgba(148, 163, 184, 0.06);
  border-color: var(--border-1);
  color: var(--text-2);
}
[data-theme="dark"] .site-menu-toggle:hover {
  color: var(--text-1); background: rgba(148, 163, 184, 0.12); border-color: var(--border-2);
}

/* Public design-system surfaces, cards, hairlines. */
[data-theme="dark"] .ds-card {
  background: var(--surface-2);
  border-color: var(--border-1);
  color: var(--text-1);
}
[data-theme="dark"] .ds-card-hover:hover {
  border-color: var(--border-2);
  box-shadow: var(--shadow-2);
}
[data-theme="dark"] .ds-hairline {
  background: linear-gradient(90deg, transparent, var(--border-1) 30%, var(--border-1) 70%, transparent);
}
[data-theme="dark"] .ds-grid-bg {
  background-image:
    linear-gradient(to right, rgba(148, 163, 184, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, 0.06) 1px, transparent 1px);
}
[data-theme="dark"] .ds-pill {
  background: rgba(148, 163, 184, 0.08);
  color: var(--text-1);
}
[data-theme="dark"] .ds-btn-primary {
  background: var(--brand-500, #4a6794); color: #fff;
}
[data-theme="dark"] .ds-btn-primary:hover {
  background: var(--brand-700, #2a3d63);
}
[data-theme="dark"] .ds-btn-secondary {
  color: var(--text-1); border-color: var(--border-2);
}
[data-theme="dark"] .ds-btn-secondary:hover {
  background: rgba(148, 163, 184, 0.08); border-color: var(--border-strong);
}
[data-theme="dark"] .ds-faq-item { border-color: var(--border-1); }
[data-theme="dark"] .ds-faq-trigger { color: var(--text-1); }
[data-theme="dark"] .ds-faq-body > div { color: var(--text-2); }
[data-theme="dark"] .ds-compare th { background: rgba(148, 163, 184, 0.05); color: var(--text-1); border-bottom-color: var(--border-1); }
[data-theme="dark"] .ds-compare td { color: var(--text-2); border-bottom-color: var(--border-1); }
[data-theme="dark"] .ds-stat-tile { background: var(--surface-2); border-color: var(--border-1); }
[data-theme="dark"] .ds-stat-tile .stat-icon { background: rgba(74, 103, 148, 0.18); color: var(--brand-100, #d6deec); }
[data-theme="dark"] .ds-post-card { background: var(--surface-2); border-color: var(--border-1); }
[data-theme="dark"] .ds-post-card:hover { border-color: var(--border-2); }
[data-theme="dark"] .ds-input {
  background: var(--surface-2); color: var(--text-1); border-color: var(--border-1);
}
[data-theme="dark"] .ds-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
[data-theme="dark"] .ds-input::placeholder { color: var(--text-3); }
[data-theme="dark"] .team-social {
  background: var(--surface-2); border-color: var(--border-1); color: var(--text-2);
}
[data-theme="dark"] .team-social:hover {
  background: rgba(148, 163, 184, 0.08); color: var(--text-1); border-color: var(--border-2);
}
[data-theme="dark"] .ds-grad-text {
  background-image: linear-gradient(110deg, var(--brand-100, #d6deec) 0%, var(--brand-500, #4a6794) 60%, var(--brand-100, #d6deec) 100%);
}
[data-theme="dark"] .ds-eyebrow { color: var(--brand-100, #d6deec); }

/* Site footer in dark mode — slightly darker than the brand-900 hero so the
 * page has a clear closing band, with the glow + hairline kept subtle. */
[data-theme="dark"] .site-footer { background: #060a14; }
[data-theme="dark"] .site-footer-hairline {
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.22), transparent);
}
[data-theme="dark"] .site-footer-glow {
  background: radial-gradient(closest-side, rgba(74, 103, 148, 0.22), transparent 70%);
}
[data-theme="dark"] .site-footer .footer-bottom { border-top-color: rgba(148, 163, 184, 0.08); }

/* Headings and body text fall through Tailwind utility classes. */
[data-theme="dark"] .text-slate-900 { color: var(--text-1) !important; }
[data-theme="dark"] .text-slate-800 { color: var(--text-1) !important; }
[data-theme="dark"] .text-slate-700 { color: var(--text-2) !important; }
[data-theme="dark"] .text-slate-600 { color: var(--text-2) !important; }
[data-theme="dark"] .text-slate-500 { color: var(--text-3) !important; }
[data-theme="dark"] .text-slate-400 { color: var(--text-3) !important; }
[data-theme="dark"] .text-brand-900 { color: var(--brand-100, #d6deec) !important; }
[data-theme="dark"] .bg-white  { background-color: var(--surface-2) !important; }
[data-theme="dark"] .bg-slate-50 { background-color: var(--surface-1) !important; }
[data-theme="dark"] .bg-slate-100 { background-color: rgba(148, 163, 184, 0.08) !important; }
[data-theme="dark"] .bg-emerald-50 { background-color: var(--success-soft) !important; color: var(--success); }
[data-theme="dark"] .bg-amber-50 { background-color: var(--warning-soft) !important; color: var(--warning); }
[data-theme="dark"] .bg-red-50   { background-color: var(--danger-soft)  !important; color: var(--danger); }
[data-theme="dark"] .bg-emerald-100 { background-color: var(--success-soft) !important; }
[data-theme="dark"] .bg-amber-100   { background-color: var(--warning-soft) !important; }
[data-theme="dark"] .bg-red-100     { background-color: var(--danger-soft)  !important; }
[data-theme="dark"] .bg-indigo-50  { background-color: var(--accent-soft) !important; }
[data-theme="dark"] .bg-indigo-100 { background-color: var(--accent-soft) !important; }
[data-theme="dark"] .text-emerald-700,
[data-theme="dark"] .text-emerald-800 { color: var(--success) !important; }
[data-theme="dark"] .text-amber-700,
[data-theme="dark"] .text-amber-800 { color: var(--warning) !important; }
[data-theme="dark"] .text-red-600,
[data-theme="dark"] .text-red-700 { color: var(--danger) !important; }
[data-theme="dark"] .text-indigo-700,
[data-theme="dark"] .text-indigo-800 { color: var(--brand-100, #d6deec) !important; }
[data-theme="dark"] .border-slate-100 { border-color: var(--border-1) !important; }
[data-theme="dark"] .border-slate-200 { border-color: var(--border-1) !important; }
[data-theme="dark"] .border-slate-300 { border-color: var(--border-2) !important; }
[data-theme="dark"] .border-emerald-200 { border-color: rgba(110, 231, 183, 0.25) !important; }
[data-theme="dark"] .border-amber-200   { border-color: rgba(252, 211, 77, 0.25) !important; }
[data-theme="dark"] .border-red-200     { border-color: rgba(253, 164, 175, 0.3) !important; }
[data-theme="dark"] .ring-slate-200\/60 { --tw-ring-color: var(--border-1) !important; }
[data-theme="dark"] .divide-slate-200 > * + * { border-color: var(--border-1) !important; }
[data-theme="dark"] .divide-slate-100 > * + * { border-color: var(--border-1) !important; }
[data-theme="dark"] .text-slate-300 { color: var(--text-3) !important; }
[data-theme="dark"] .hover\:bg-slate-50:hover { background-color: rgba(148, 163, 184, 0.06) !important; }

/* Admin chrome — header, cards, tables, inputs, buttons. */
[data-theme="dark"] .admin-shell-header {
  background: rgba(15, 23, 42, 0.95);
  border-bottom-color: var(--border-1);
}
[data-theme="dark"] .admin-nav-link { color: var(--text-2); }
[data-theme="dark"] .admin-nav-link:hover { color: var(--text-1); background: rgba(148, 163, 184, 0.08); }
[data-theme="dark"] .admin-nav-link.is-active { color: var(--text-1); background: var(--accent-soft); }
[data-theme="dark"] .admin-card {
  background: var(--surface-2);
  border-color: var(--border-1);
  box-shadow: var(--shadow-1);
}
[data-theme="dark"] .admin-card-title { color: var(--text-1); }
[data-theme="dark"] .admin-card-subtitle { color: var(--text-2); }
[data-theme="dark"] .admin-label { color: var(--text-2); }
[data-theme="dark"] .admin-input {
  background: var(--surface-1); color: var(--text-1); border-color: var(--border-2);
}
[data-theme="dark"] .admin-input:hover { border-color: var(--border-strong); }
[data-theme="dark"] .admin-input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring);
}
[data-theme="dark"] .admin-input::placeholder { color: var(--text-3); }
[data-theme="dark"] select.admin-input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
[data-theme="dark"] .admin-table thead th {
  background: rgba(148, 163, 184, 0.04); color: var(--text-2); border-bottom-color: var(--border-1);
}
[data-theme="dark"] .admin-table tbody td { color: var(--text-1); border-bottom-color: var(--border-1); }
[data-theme="dark"] .admin-table tbody tr:hover { background: rgba(148, 163, 184, 0.04); }
[data-theme="dark"] .admin-btn-secondary {
  background: var(--surface-1); color: var(--text-1); border-color: var(--border-2);
}
[data-theme="dark"] .admin-btn-secondary:hover { border-color: var(--accent); color: var(--text-1); }
[data-theme="dark"] .admin-btn-ghost { color: var(--text-2); border-color: var(--border-1); }
[data-theme="dark"] .admin-btn-ghost:hover { background: rgba(148, 163, 184, 0.06); color: var(--text-1); border-color: var(--border-2); }
[data-theme="dark"] .admin-btn-danger {
  background: var(--surface-1); color: var(--danger); border-color: rgba(253, 164, 175, 0.3);
}
[data-theme="dark"] .admin-btn-danger:hover { background: var(--danger-soft); }
[data-theme="dark"] .admin-pill-amber { background: var(--warning-soft); color: var(--warning); }
[data-theme="dark"] .admin-pill-green { background: var(--success-soft); color: var(--success); }
[data-theme="dark"] .admin-pill-slate { background: rgba(148, 163, 184, 0.1); color: var(--text-2); }
[data-theme="dark"] .admin-alert-success { background: var(--success-soft); color: var(--success); border-color: rgba(110, 231, 183, 0.25); }
[data-theme="dark"] .admin-alert-error { background: var(--danger-soft); color: var(--danger); border-color: rgba(253, 164, 175, 0.3); }
[data-theme="dark"] .admin-page-title { color: var(--text-1); }
[data-theme="dark"] .admin-page-subtitle { color: var(--text-2); }

/* Generic inputs/textareas/selects used throughout admin templates.
 * Many forms apply Tailwind classes directly. */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="color"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--surface-1);
  color: var(--text-1);
  border-color: var(--border-2);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--text-3); }

/* Editor toolbar + preview pane in dark mode. */
[data-theme="dark"] .editor-toolbar {
  background: rgba(15, 23, 42, 0.95);
  border-bottom-color: var(--border-1);
  color: var(--text-1);
}
[data-theme="dark"] .editor-viewport-toggle,
[data-theme="dark"] .editor-side-toggle {
  background: var(--surface-2); border-color: var(--border-1);
}
[data-theme="dark"] .editor-viewport-toggle button,
[data-theme="dark"] .editor-side-toggle button {
  background: var(--surface-2); color: var(--text-2);
}
[data-theme="dark"] .editor-viewport-toggle button:hover,
[data-theme="dark"] .editor-side-toggle button:hover {
  background: rgba(148, 163, 184, 0.08); color: var(--text-1);
}
[data-theme="dark"] .editor-viewport-toggle button.active,
[data-theme="dark"] .editor-side-toggle button.active {
  background: var(--accent); color: #fff;
}
[data-theme="dark"] .toolbar-btn {
  background: var(--surface-2); color: var(--text-2); border-color: var(--border-1);
}
[data-theme="dark"] .toolbar-btn:hover:not(:disabled) {
  background: var(--accent-soft); color: var(--text-1);
}
[data-theme="dark"] .editor-preview {
  background: var(--surface-0); border-left-color: var(--border-1);
}
[data-theme="dark"] .editor-shell.preview-left .editor-preview { border-right-color: var(--border-1); }
[data-theme="dark"] .editor-preview-stage {
  background: var(--surface-0); border-color: var(--border-1);
}
[data-theme="dark"] .editor-splitter:hover,
[data-theme="dark"] .editor-splitter.dragging { background: var(--accent-soft); }
[data-theme="dark"] .editor-splitter::before { background: var(--border-2); }
[data-theme="dark"] .editor-splitter:hover::before { background: var(--accent); }
[data-theme="dark"] .editor-panel { color: var(--text-1); }

/* Canvas builder dark mode. */
[data-theme="dark"] .canvas-shell { background: var(--surface-0); }
[data-theme="dark"] .canvas-palette,
[data-theme="dark"] .canvas-side {
  background: var(--surface-1); border-color: var(--border-1);
}
[data-theme="dark"] .canvas-side-block:not(:last-child) { border-bottom-color: var(--border-1); }
[data-theme="dark"] .canvas-subtoolbar {
  background: var(--surface-1); border-bottom-color: var(--border-1);
}
[data-theme="dark"] .canvas-workspace {
  background: var(--surface-0);
  background-image:
    linear-gradient(45deg, rgba(148, 163, 184, 0.04) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(148, 163, 184, 0.04) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(148, 163, 184, 0.04) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(148, 163, 184, 0.04) 75%);
}
[data-theme="dark"] .canvas-grid-overlay {
  background-image:
    linear-gradient(to right, var(--canvas-grid-1) 1px, transparent 1px),
    linear-gradient(to bottom, var(--canvas-grid-1) 1px, transparent 1px),
    linear-gradient(to right, var(--canvas-grid-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--canvas-grid-2) 1px, transparent 1px);
}
[data-theme="dark"] .canvas-stage-edit {
  background: #ffffff; /* keep stage white — it represents the published page */
  border-color: var(--border-2);
}
[data-theme="dark"] .palette-section-title { color: var(--text-3); }
[data-theme="dark"] .palette-btn {
  background: var(--surface-2); color: var(--text-1); border-color: var(--border-1);
}
[data-theme="dark"] .palette-btn:hover {
  background: var(--accent-soft); border-color: var(--accent);
}
[data-theme="dark"] .canvas-layer {
  background: var(--surface-2); color: var(--text-1); border-color: var(--border-1);
}
[data-theme="dark"] .canvas-layer:hover { background: rgba(148, 163, 184, 0.08); }
[data-theme="dark"] .canvas-layer.active {
  background: var(--accent-soft); border-color: var(--accent); color: var(--text-1);
}
[data-theme="dark"] .canvas-splitter:hover,
[data-theme="dark"] .canvas-splitter.dragging { background: var(--accent-soft); }
[data-theme="dark"] .canvas-splitter::before { background: var(--border-2); }
[data-theme="dark"] .canvas-splitter:hover::before { background: var(--accent); }

/* Media library dark mode. */
[data-theme="dark"] .media-sidebar,
[data-theme="dark"] .media-main { background: var(--surface-2); }
[data-theme="dark"] .media-folder-node { color: var(--text-2); }
[data-theme="dark"] .media-folder-node:hover { background: rgba(148, 163, 184, 0.06); color: var(--text-1); }
[data-theme="dark"] .media-folder-node.active { background: var(--accent-soft); color: var(--text-1); }
[data-theme="dark"] .media-card { background: var(--surface-2); border-color: var(--border-1); }
[data-theme="dark"] .media-card.selected { box-shadow: 0 0 0 3px var(--accent); }
[data-theme="dark"] .media-dropzone {
  border-color: var(--border-2); color: var(--text-2); background: var(--surface-1);
}
[data-theme="dark"] .media-dropzone.dragover {
  border-color: var(--accent); background: var(--accent-soft); color: var(--text-1);
}
[data-theme="dark"] .media-row:hover { background: rgba(148, 163, 184, 0.04); }
[data-theme="dark"] .media-row.selected { background: var(--accent-soft); border-color: var(--accent); }
[data-theme="dark"] .media-empty { color: var(--text-2); border-color: var(--border-1); }
[data-theme="dark"] .media-modal-backdrop,
[data-theme="dark"] .mp-modal { background: var(--surface-overlay); }
[data-theme="dark"] .media-modal,
[data-theme="dark"] .mp-panel { background: var(--surface-2); color: var(--text-1); }
[data-theme="dark"] .mp-tabs button { color: var(--text-2); }
[data-theme="dark"] .mp-tabs button.active { background: var(--accent-soft); color: var(--text-1); }
[data-theme="dark"] .mp-head, [data-theme="dark"] .mp-foot { border-color: var(--border-1); }

/* Quill toolbar dark mode. Quill's CSS is loaded from a CDN so we re-skin
 * here rather than forking its stylesheet. */
[data-theme="dark"] .ql-toolbar.ql-snow {
  background: var(--surface-1); border-color: var(--border-2);
}
[data-theme="dark"] .ql-toolbar.ql-snow .ql-stroke { stroke: var(--text-2); }
[data-theme="dark"] .ql-toolbar.ql-snow .ql-fill { fill: var(--text-2); }
[data-theme="dark"] .ql-toolbar.ql-snow .ql-picker-label { color: var(--text-2); }
[data-theme="dark"] .ql-toolbar.ql-snow button:hover .ql-stroke,
[data-theme="dark"] .ql-toolbar.ql-snow button.ql-active .ql-stroke { stroke: var(--accent); }
[data-theme="dark"] .ql-toolbar.ql-snow button:hover .ql-fill,
[data-theme="dark"] .ql-toolbar.ql-snow button.ql-active .ql-fill { fill: var(--accent); }
[data-theme="dark"] .rte-editor {
  background: var(--surface-1); color: var(--text-1); border-color: var(--border-2);
}
[data-theme="dark"] .ql-container.ql-snow { color: var(--text-1); }
[data-theme="dark"] .ql-editor.ql-blank::before { color: var(--text-3); }

/* Scrollbar in dark mode. */
[data-theme="dark"] html { scrollbar-color: rgba(148, 163, 184, 0.32) transparent; }
[data-theme="dark"] *::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.24); background-clip: content-box; }
[data-theme="dark"] *::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.4); background-clip: content-box; }
[data-theme="dark"] ::selection { background: var(--accent); color: var(--text-inverse); }

/* ============================================================
 * THEME TOGGLE BUTTON
 * Shared between admin chrome and public site.
 * ============================================================ */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--ds-radius-sm);
  border: 1px solid var(--border-1);
  background: var(--surface-2);
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.theme-toggle:hover {
  background: var(--accent-soft);
  border-color: var(--border-2);
  color: var(--text-1);
  transform: translateY(-1px);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.theme-toggle svg { width: 1.05rem; height: 1.05rem; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.theme-toggle .theme-toggle-sun  { display: inline-block; }
.theme-toggle .theme-toggle-moon { display: none; }
[data-theme="dark"] .theme-toggle .theme-toggle-sun  { display: none; }
[data-theme="dark"] .theme-toggle .theme-toggle-moon { display: inline-block; }
[data-theme="dark"] .theme-toggle svg { transform: rotate(360deg); }

/* ============================================================
 * EDITOR SIDEBAR — modern block list with collapsible cards.
 * The page editor splits into:
 *   - .editor-sidebar    (left, scrollable, draggable list of blocks)
 *   - .editor-preview    (right, iframe — existing)
 * ============================================================ */
.editor-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1rem 1rem 4rem;
  min-height: 100%;
  background: var(--surface-0);
}
[data-theme="dark"] .editor-sidebar { background: var(--surface-0); }

/* Page settings / language switcher cards inside the sidebar. */
.editor-sidebar > details,
.editor-sidebar > section.admin-card { width: 100%; }

/* "Add Content Block" toolbar within the sidebar. */
.block-list-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--shadow-1);
  position: sticky;
  top: 0;
  z-index: 5;
}
.block-list-toolbar-title {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--text-3);
  margin-right: auto;
}
.block-list-toolbar-count {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.7rem;
  color: var(--text-3);
  background: var(--surface-1);
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border-1);
}
.block-list-toolbar button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--ds-radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.block-list-toolbar button:hover {
  background: var(--brand-900, #1a2540);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px rgba(15, 23, 42, 0.45);
}
.block-list-toolbar button svg { width: 0.85rem; height: 0.85rem; }

/* Block tiles — the collapsible cards. */
.block-tile {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.block-tile:hover {
  border-color: var(--border-2);
  box-shadow: var(--shadow-2);
}
.block-tile.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring), var(--shadow-2);
}
.block-tile.is-dragging {
  opacity: 0.6;
  transform: rotate(0.4deg);
}
.block-tile-ghost {
  background: var(--accent-soft) !important;
  border: 2px dashed var(--accent) !important;
}
.block-tile-ghost > * { visibility: hidden; }
.block-tile.is-hidden { opacity: 0.65; }

/* Block tile header (always visible). */
.block-tile-head {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.7rem;
  cursor: pointer;
  user-select: none;
}
.block-tile-grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--text-3);
  cursor: grab;
  border-radius: var(--ds-radius-sm);
  transition: color 0.15s ease, background 0.15s ease;
}
.block-tile-grip:hover { color: var(--text-1); background: var(--accent-soft); }
.block-tile-grip:active { cursor: grabbing; }
.block-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--ds-radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}
.block-tile-icon svg { width: 1rem; height: 1rem; }
.block-tile-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.block-tile-type {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.block-tile-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.block-tile-badges { display: inline-flex; gap: 0.25rem; }
.block-tile-badge {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  border-radius: 2px;
  background: var(--surface-1);
  color: var(--text-3);
  border: 1px solid var(--border-1);
  line-height: 1;
}
.block-tile-badge.is-library { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.block-tile-badge.is-draft   { color: var(--warning); border-color: rgba(252, 211, 77, 0.3); background: var(--warning-soft); }
.block-tile-badge.is-hidden  { color: var(--text-3); }
.block-tile-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--ds-radius-sm);
  background: transparent;
  border: 0;
  color: var(--text-3);
  cursor: pointer;
  transition: transform 0.2s ease, color 0.15s ease, background 0.15s ease;
}
.block-tile-toggle:hover { color: var(--text-1); background: var(--accent-soft); }
.block-tile.is-open .block-tile-toggle { transform: rotate(180deg); color: var(--accent); }

/* Block tile body (form fields, hidden until expanded). */
.block-tile-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.block-tile.is-open .block-tile-body { grid-template-rows: 1fr; }
.block-tile-body > .block-tile-body-inner {
  overflow: hidden;
  min-height: 0;
}
.block-tile-body-content {
  padding: 0.1rem 0.85rem 0.85rem;
  border-top: 1px solid var(--border-1);
}
.block-tile-body-content > .block-form { padding-top: 0.85rem; }

/* Inline action chips inside an open block tile. */
.block-tile-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.block-tile-action {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 500;
  border-radius: var(--ds-radius-sm);
  background: var(--surface-1);
  color: var(--text-2);
  border: 1px solid var(--border-1);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.block-tile-action:hover {
  background: var(--accent-soft);
  border-color: var(--border-2);
  color: var(--text-1);
  transform: translateY(-1px);
}
.block-tile-action.is-danger { color: var(--danger); border-color: rgba(253, 164, 175, 0.3); }
.block-tile-action.is-danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.block-tile-action svg { width: 0.85rem; height: 0.85rem; }

/* Empty state for the block list. */
.block-list-empty {
  padding: 2.5rem 1.5rem;
  text-align: center;
  border: 1px dashed var(--border-2);
  border-radius: var(--ds-radius-md);
  background: var(--surface-2);
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}
.block-list-empty-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
}

/* ============================================================
 * HOVER PREVIEW TOOLTIP — appears next to a block tile on hover.
 * Position is set inline via JS; layout is fixed.
 * ============================================================ */
.block-hover-preview {
  position: fixed;
  z-index: 70;
  width: 260px;
  background: var(--surface-3);
  border: 1px solid var(--border-1);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--shadow-3);
  opacity: 0;
  transform: translateY(4px) scale(0.98);
  transform-origin: left center;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  overflow: hidden;
}
.block-hover-preview.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.block-hover-preview-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border-1);
  background: var(--surface-2);
}
.block-hover-preview-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--ds-radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
}
.block-hover-preview-icon svg { width: 0.95rem; height: 0.95rem; }
.block-hover-preview-meta { min-width: 0; }
.block-hover-preview-type {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.block-hover-preview-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-1);
  margin-top: 0.05rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.block-hover-preview-body {
  padding: 0.75rem;
  background: var(--surface-3);
}
.block-hover-preview-schema {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.55rem;
  border-radius: var(--ds-radius-sm);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
}
.bhp-line { height: 6px; border-radius: 3px; background: var(--border-2); }
.bhp-line.lg { height: 9px; }
.bhp-line.sm { height: 4px; }
.bhp-line.accent { background: var(--accent); opacity: 0.8; }
.bhp-line.short { width: 35%; }
.bhp-line.medium { width: 70%; }
.block-hover-preview-row { display: flex; gap: 0.4rem; }
.bhp-tile {
  flex: 1;
  height: 36px;
  border-radius: 4px;
  background: var(--border-1);
  border: 1px solid var(--border-1);
}
.block-hover-preview-quick {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.6rem;
  font-size: 0.7rem;
  color: var(--text-2);
}
.block-hover-preview-quick span {
  padding: 0.2rem 0.45rem;
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: 2px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============================================================
 * ADD-BLOCK PICKER MODAL — grid of cards with search/filters.
 * ============================================================ */
.block-picker-backdrop {
  position: fixed;
  inset: 0;
  background: var(--surface-overlay);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.block-picker-backdrop.is-open { display: flex; opacity: 1; }

.block-picker {
  width: min(1080px, 100%);
  max-height: 88vh;
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--shadow-3);
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "head head"
    "side body";
  overflow: hidden;
  transform: translateY(12px) scale(0.98);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.block-picker-backdrop.is-open .block-picker { transform: none; }
.block-picker-head {
  grid-area: head;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid var(--border-1);
  background: var(--surface-2);
}
.block-picker-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.01em;
}
.block-picker-search {
  flex: 1 1 280px;
  position: relative;
  max-width: 420px;
}
.block-picker-search input {
  width: 100%;
  padding: 0.55rem 0.75rem 0.55rem 2.1rem;
  background: var(--surface-1);
  color: var(--text-1);
  border: 1px solid var(--border-2);
  border-radius: var(--ds-radius-sm);
  font-size: 0.85rem;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.block-picker-search input::placeholder { color: var(--text-3); }
.block-picker-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.block-picker-search svg {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.95rem;
  height: 0.95rem;
  color: var(--text-3);
  pointer-events: none;
}
.block-picker-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--ds-radius-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.block-picker-close:hover { background: var(--surface-1); color: var(--text-1); border-color: var(--border-1); }

.block-picker-side {
  grid-area: side;
  background: var(--surface-1);
  border-right: 1px solid var(--border-1);
  padding: 0.85rem 0.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.block-picker-side-label {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0.55rem 0.75rem 0.3rem;
}
.block-picker-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-size: 0.82rem;
  font-weight: 500;
  text-align: left;
  border-radius: var(--ds-radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.block-picker-tab:hover { background: var(--surface-2); color: var(--text-1); }
.block-picker-tab.is-active {
  background: var(--accent-soft);
  color: var(--text-1);
  font-weight: 600;
}
.block-picker-tab-count {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.68rem;
  color: var(--text-3);
  font-weight: 600;
}
.block-picker-tab.is-active .block-picker-tab-count { color: var(--accent); }

.block-picker-body {
  grid-area: body;
  padding: 1.1rem 1.2rem;
  overflow-y: auto;
  background: var(--surface-2);
}
.block-picker-section { margin-bottom: 1.5rem; }
.block-picker-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.block-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}
@media (max-width: 880px) {
  .block-picker { grid-template-columns: 200px minmax(0, 1fr); }
  .block-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .block-picker {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "head" "side" "body";
  }
  .block-picker-side { flex-direction: row; overflow-x: auto; gap: 0.25rem; border-right: 0; border-bottom: 1px solid var(--border-1); }
  .block-picker-side-label { display: none; }
  .block-picker-grid { grid-template-columns: 1fr; }
}

.bp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--ds-radius-md);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.bp-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-2);
}
.bp-card-thumb {
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-1);
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
  overflow: hidden;
}
.bp-card-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 65%, var(--surface-2));
  pointer-events: none;
}
.bp-card-meta {
  padding: 0.6rem 0.75rem 0.75rem;
}
.bp-card-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.005em;
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.bp-card-cat {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.bp-card-fav {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.6rem;
  height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--ds-radius-sm);
  color: var(--text-3);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.16s ease, transform 0.16s ease, color 0.16s ease, background 0.16s ease;
}
.bp-card:hover .bp-card-fav,
.bp-card-fav.is-fav { opacity: 1; transform: scale(1); }
.bp-card-fav:hover { color: #f59e0b; background: var(--warning-soft); }
.bp-card-fav.is-fav { color: #f59e0b; }
.bp-card-fav svg { width: 0.95rem; height: 0.95rem; }

/* Mini schematic preview inside the picker card thumb. */
.bp-line {
  height: 5px;
  border-radius: 3px;
  background: var(--border-2);
}
.bp-line.lg { height: 8px; }
.bp-line.sm { height: 3px; }
.bp-line.accent { background: var(--accent); opacity: 0.85; }
.bp-line.short { width: 35%; }
.bp-line.medium { width: 65%; }
.bp-tile-row { display: flex; gap: 0.35rem; }
.bp-tile {
  flex: 1;
  border-radius: 3px;
  background: var(--border-1);
  border: 1px solid var(--border-1);
}
.bp-stack { display: flex; flex-direction: column; gap: 0.35rem; }
.bp-row { display: flex; align-items: center; gap: 0.35rem; }
.bp-frame {
  flex: 1; height: 100%; border-radius: 3px;
  background: linear-gradient(135deg, var(--accent-soft), transparent);
  border: 1px solid var(--border-1);
}
.bp-circle {
  width: 22px; height: 22px; border-radius: 9999px;
  background: var(--accent-soft); border: 1px solid var(--accent);
}

/* Library template picker (separate row inside the picker). */
.block-picker-library {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.block-picker-library-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--ds-radius-sm);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.block-picker-library-row:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.block-picker-library-row strong { font-size: 0.85rem; color: var(--text-1); font-weight: 600; }
.block-picker-library-row .meta { font-size: 0.7rem; color: var(--text-3); font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
.block-picker-library-row button {
  padding: 0.4rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: var(--ds-radius-sm);
  cursor: pointer;
}
.block-picker-library-row button:hover { background: var(--brand-900, #1a2540); }

/* ============================================================
 * MISC EDITOR POLISH — sticky toolbar, action buttons, splitter
 * ============================================================ */
.editor-shell { background: var(--surface-0); }
.editor-toolbar a { color: var(--text-2); }
.editor-toolbar a:hover { color: var(--accent); }
.editor-toolbar .text-slate-300 { color: var(--text-3) !important; }
.editor-toolbar .text-slate-800,
.editor-toolbar .text-slate-600 { color: var(--text-1) !important; }

/* Block-form within a tile should look like a tighter inline form. */
.block-tile .block-form input[type="text"],
.block-tile .block-form input[type="number"],
.block-tile .block-form input[type="url"],
.block-tile .block-form input[type="email"],
.block-tile .block-form textarea,
.block-tile .block-form select {
  background-color: var(--surface-1);
  color: var(--text-1);
  border-color: var(--border-1);
  border-radius: var(--ds-radius-sm);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.block-tile .block-form input:focus,
.block-tile .block-form textarea:focus,
.block-tile .block-form select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
[data-theme="dark"] .block-tile .block-form label { color: var(--text-2); }
.block-tile .block-form label.block { color: var(--text-2); }
.block-tile .block-form label.block input,
.block-tile .block-form label.block textarea,
.block-tile .block-form label.block select { margin-top: 0.25rem; }
.block-tile-save-row {
  display: flex; align-items: center; gap: 0.85rem; padding-top: 0.65rem;
  border-top: 1px solid var(--border-1); margin-top: 0.65rem; flex-wrap: wrap;
}
.block-tile-save-row label { font-size: 0.78rem; color: var(--text-2); display: inline-flex; align-items: center; gap: 0.35rem; }
.block-tile-save-row .submit-btn {
  margin-left: auto;
  padding: 0.5rem 0.95rem;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: var(--ds-radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.block-tile-save-row .submit-btn:hover {
  background: var(--brand-900, #1a2540);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px rgba(15, 23, 42, 0.45);
}

/* Keyboard reorder hint chip next to the grip. */
.block-tile-grip[data-keyboard-hint]::after {
  content: attr(data-keyboard-hint);
  position: absolute;
  background: var(--surface-3);
  color: var(--text-1);
  padding: 0.25rem 0.45rem;
  border-radius: 2px;
  font-size: 0.6rem;
  border: 1px solid var(--border-1);
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(-110%);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.block-tile-grip:focus-visible[data-keyboard-hint]::after { opacity: 1; }


/* ============================================================
 * NEW BLOCK COMPONENTS (pricing / bento / tabs / gallery /
 * before-after / newsletter / process steps) + shared polish.
 * Added with the block-partial refactor; everything below uses
 * the same tokens defined at the top of this file.
 * ============================================================ */

/* Arrow-link now works on spans too (card grids use it inside <a> cards). */
.ds-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  color: var(--brand-900, #1a2540);
  font-size: 0.9rem;
}

/* Inputs sitting on dark/navy sections — replaces the old inline styles. */
.ds-input-on-dark {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.ds-input-on-dark::placeholder { color: rgba(255, 255, 255, 0.45); }
.ds-input-on-dark:focus {
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.10);
}

/* Flat card used by the card-grid "minimal" variant. */
.ds-card-flat {
  background: transparent;
  border: 0;
}
.ds-card-flat .ds-gallery-frame img,
.ds-card-flat img { border-radius: var(--ds-radius-md); }

/* Gradient CTA banner variant. */
.ds-cta-gradient {
  background:
    radial-gradient(ellipse 70% 60% at 20% 0%, rgba(255, 255, 255, 0.14), transparent 60%),
    linear-gradient(120deg, var(--brand-700, #2a3d63) 0%, var(--brand-900, #1a2540) 55%, var(--brand-700, #2a3d63) 100%);
}

/* ---------------- PRICING ---------------- */
.ds-price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--ds-radius-md);
  padding: 2rem 1.75rem;
  transition: transform var(--ds-dur-slow) var(--ds-ease-out), box-shadow var(--ds-dur-slow) var(--ds-ease-out);
}
.ds-price-card:hover { transform: translateY(-4px); box-shadow: var(--ds-shadow-md); }
.ds-price-card.is-featured {
  background: var(--brand-900, #1a2540);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: var(--ds-shadow-lg);
}
.ds-price-badge {
  position: absolute;
  top: -0.7rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: linear-gradient(90deg, var(--brand-500, #4a6794), var(--brand-700, #2a3d63));
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.85rem;
  border-radius: 9999px;
  box-shadow: 0 6px 16px -6px rgba(15, 23, 42, 0.4);
}
.ds-price-name {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-500, #4a6794);
}
.ds-price-card.is-featured .ds-price-name { color: rgba(255, 255, 255, 0.65); }
.ds-price-value { display: flex; align-items: baseline; gap: 0.35rem; margin-top: 1rem; }
.ds-price-value .amount {
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--brand-900, #1a2540);
  font-variant-numeric: tabular-nums;
}
.ds-price-card.is-featured .ds-price-value .amount { color: #fff; }
.ds-price-value .period { font-size: 0.85rem; color: #64748b; }
.ds-price-card.is-featured .ds-price-value .period { color: rgba(255, 255, 255, 0.55); }
.ds-price-desc { font-size: 0.875rem; color: #64748b; margin-top: 0.85rem; line-height: 1.6; }
.ds-price-card.is-featured .ds-price-desc { color: rgba(255, 255, 255, 0.7); }
.ds-price-features {
  margin: 1.4rem 0 1.75rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(15, 23, 42, 0.07);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.ds-price-card.is-featured .ds-price-features { border-top-color: rgba(255, 255, 255, 0.12); }
.ds-price-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: #475569;
  line-height: 1.5;
}
.ds-price-card.is-featured .ds-price-features li { color: rgba(255, 255, 255, 0.8); }
.ds-price-features .tick {
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--brand-500, #4a6794);
}
.ds-price-card.is-featured .ds-price-features .tick { color: #7dd3fc; }

/* ---------------- BENTO GRID ---------------- */
.ds-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .ds-bento {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(220px, auto);
    grid-auto-flow: dense;
  }
  .ds-bento-tile.is-wide { grid-column: span 2; }
  .ds-bento-tile.is-tall { grid-row: span 2; }
}
.ds-bento-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
  transition: transform var(--ds-dur-slow) var(--ds-ease-out), box-shadow var(--ds-dur-slow) var(--ds-ease-out), border-color var(--ds-dur-slow) var(--ds-ease-out);
}
.ds-bento-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--ds-shadow-md);
  border-color: rgba(15, 23, 42, 0.15);
}
.ds-bento-image { flex: 1; min-height: 140px; overflow: hidden; }
.ds-bento-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ds-ease-out); }
.ds-bento-tile:hover .ds-bento-image img { transform: scale(1.04); }
.ds-bento-body { padding: 1.6rem; }
.ds-bento-tile.has-image .ds-bento-body { padding-top: 1.25rem; }
.ds-bento-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--ds-radius-sm);
  background: rgba(15, 23, 42, 0.045);
  color: var(--brand-900, #1a2540);
}

/* ---------------- TABS ---------------- */
.ds-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 2.5rem;
}
.ds-tab-trigger {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  color: #64748b;
  padding: 0.65rem 1.1rem;
  transition: color var(--ds-dur-fast) ease, background var(--ds-dur-fast) ease, border-color var(--ds-dur-fast) ease;
}
.ds-tab-trigger:focus-visible { outline: 2px solid var(--brand-500, #4a6794); outline-offset: 2px; }
.ds-tabs-underline .ds-tabs-nav { border-bottom: 1px solid rgba(15, 23, 42, 0.08); gap: 0; }
.ds-tabs-underline .ds-tab-trigger {
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: 0;
}
.ds-tabs-underline .ds-tab-trigger:hover { color: var(--brand-900, #1a2540); }
.ds-tabs-underline .ds-tab-trigger.is-active {
  color: var(--brand-900, #1a2540);
  border-bottom-color: var(--brand-900, #1a2540);
}
.ds-tabs-pills .ds-tabs-nav { justify-content: center; }
.ds-tabs-pills .ds-tab-trigger { border-radius: 9999px; border: 1px solid transparent; }
.ds-tabs-pills .ds-tab-trigger:hover { color: var(--brand-900, #1a2540); background: rgba(15, 23, 42, 0.04); }
.ds-tabs-pills .ds-tab-trigger.is-active {
  color: #fff;
  background: var(--brand-900, #1a2540);
}
.ds-tab-panel { display: none; }
.ds-tab-panel.is-active { display: block; animation: ds-tab-in 0.35s var(--ds-ease-out); }
@keyframes ds-tab-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------- GALLERY + LIGHTBOX ---------------- */
.ds-gallery-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.ds-gallery-open:focus-visible { outline: 2px solid var(--brand-500, #4a6794); outline-offset: 3px; border-radius: var(--ds-radius-md); }
.ds-gallery-frame {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--ds-radius-md);
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #f1f5f9;
}
.ds-gallery-frame img { width: 100%; height: 100%; object-fit: cover; }

.ds-masonry { column-gap: 1rem; }
.ds-masonry-2 { columns: 2; }
.ds-masonry-3 { columns: 2; }
.ds-masonry-4 { columns: 2; }
@media (min-width: 1024px) {
  .ds-masonry-3 { columns: 3; }
  .ds-masonry-4 { columns: 4; }
}
.ds-masonry-item { break-inside: avoid; margin-bottom: 1rem; }
.ds-masonry-item img {
  width: 100%;
  height: auto;
  border-radius: var(--ds-radius-md);
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.ds-masonry-item figcaption { font-size: 0.8rem; color: #64748b; margin-top: 0.4rem; font-family: ui-monospace, 'SF Mono', Menlo, monospace; }

.ds-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  background: rgba(10, 15, 30, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.ds-lightbox.is-open { opacity: 1; pointer-events: auto; }
.ds-lightbox img {
  max-width: min(1100px, 100%);
  max-height: calc(100vh - 8rem);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-lg);
}
.ds-lightbox figcaption {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  letter-spacing: 0.04em;
}
.ds-lightbox-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
  transition: background 0.18s ease;
}
.ds-lightbox-close:hover { background: rgba(255, 255, 255, 0.16); }
.ds-lightbox-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------------- BEFORE / AFTER ---------------- */
.ds-ba {
  position: relative;
  overflow: hidden;
  border-radius: var(--ds-radius-md);
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: var(--ds-shadow-md);
  --ba-pos: 50%;
}
.ds-ba img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.ds-ba-before-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0);
}
.ds-ba-before { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.ds-ba-label {
  position: absolute;
  top: 1rem;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(10, 15, 30, 0.65);
  color: #fff;
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.ds-ba-label.is-before { left: 1rem; }
.ds-ba-label.is-after { right: 1rem; }
.ds-ba-handle { position: absolute; inset: 0; }
.ds-ba-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.ds-ba-grip {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ba-pos);
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(10, 15, 30, 0.2);
  pointer-events: none;
}
.ds-ba-grip svg {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  color: var(--brand-900, #1a2540);
}
.ds-ba-grip::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background: #fff;
  box-shadow: var(--ds-shadow-md);
}
.ds-ba-grip svg:first-of-type { left: 50%; transform: translate(-135%, -50%); }
.ds-ba-grip svg:last-of-type  { left: 50%; transform: translate(35%, -50%); }
.ds-ba-range:focus-visible ~ .ds-ba-grip::before { outline: 2px solid var(--brand-500, #4a6794); outline-offset: 2px; }

/* ---------------- NEWSLETTER ---------------- */
.ds-newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.ds-newsletter-form .ds-input { flex: 1 1 240px; }
.ds-newsletter-form .ds-btn { flex: 0 0 auto; }

/* ---------------- HORIZONTAL PROCESS STEPS ---------------- */
.ds-process {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  counter-reset: ds-process;
}
@media (min-width: 768px) {
  .ds-process { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; }
}
.ds-process-marker { position: relative; display: flex; align-items: center; }
.ds-process-line {
  flex: 1;
  height: 1px;
  margin-left: 1rem;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0.04));
}
.ds-process-step:last-child .ds-process-line { display: none; }

/* ---------------- MOTION & FOCUS POLISH ---------------- */
/* Marquee respects reduced motion: stop scrolling, allow natural wrap. */
@media (prefers-reduced-motion: reduce) {
  .ds-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; }
  .ds-marquee { mask-image: none; -webkit-mask-image: none; }
  .ds-tab-panel.is-active { animation: none; }
  .ds-sticky-story-slide { transition: none; }
  .ds-lightbox { transition: none; }
}

/* Keyboard focus parity for interactive block elements. */
.ds-faq-trigger:focus-visible {
  outline: 2px solid var(--brand-500, #4a6794);
  outline-offset: 4px;
  border-radius: var(--ds-radius-xs);
}

/* ============================================================
 * Admin sign-in — premium split-panel login.
 * Standalone page (no Tailwind): everything below is self-
 * contained and theme-aware via the shared tokens. The left
 * visual panel stays dark in both themes (brand identity);
 * the form panel follows the light/dark surface tokens.
 * ============================================================ */
.login-page {
  min-height: 100vh;
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--surface-0, #f1f5f9);
  color: var(--text-1, #0f172a);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.login-shell {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}
@media (min-width: 1024px) {
  .login-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---- Left visual panel (desktop only) ---- */
.login-visual {
  display: none;
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(60rem 40rem at 120% -20%, rgba(74, 103, 148, 0.38), transparent 60%),
    radial-gradient(50rem 36rem at -20% 120%, rgba(74, 103, 148, 0.28), transparent 60%),
    linear-gradient(160deg, var(--brand-900, #1a2540) 0%, #0d1526 55%, var(--brand-700, #2a3d63) 135%);
}
@media (min-width: 1024px) { .login-visual { display: block; } }
.login-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(80rem 60rem at 30% 40%, #000 0%, transparent 75%);
  mask-image: radial-gradient(80rem 60rem at 30% 40%, #000 0%, transparent 75%);
}
.login-visual-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
  height: 100%;
  box-sizing: border-box;
  padding: 3rem 3.5rem;
}
.login-visual-brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1.02rem;
}
.login-visual-copy { max-width: 26rem; }
.login-visual-eyebrow {
  margin: 0 0 1.2rem;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.login-visual-copy h2 {
  margin: 0;
  font-size: clamp(1.9rem, 2.6vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
}
.login-visual-sub {
  margin: 1.15rem 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.95rem;
  line-height: 1.65;
}
.login-visual-points {
  list-style: none;
  margin: 2.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.login-visual-points li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
}
.login-point-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--brand-100, #d6deec);
}
.login-visual-foot {
  margin: 0;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}

/* ---- Form panel ---- */
.login-main {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 1.5rem 2.5rem;
  box-sizing: border-box;
  background:
    radial-gradient(46rem 30rem at 85% -10%, var(--accent-soft, rgba(74, 103, 148, 0.12)), transparent 60%),
    var(--surface-0, #f1f5f9);
}
.login-box {
  width: 100%;
  max-width: 24.5rem;
  animation: login-rise 0.45s var(--ds-ease-out, cubic-bezier(0.22, 1, 0.36, 1)) both;
}
@keyframes login-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.login-head { margin-bottom: 2rem; }
.login-mark {
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1.4rem;
  border-radius: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--brand-500, #4a6794), var(--brand-900, #1a2540));
  box-shadow: 0 10px 24px -10px rgba(26, 37, 64, 0.55);
}
.login-mark.sm {
  width: 2.4rem;
  height: 2.4rem;
  margin: 0;
  border-radius: 0.6rem;
  font-size: 0.78rem;
}
.login-title {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-1, #0f172a);
}
.login-subtitle {
  margin: 0.45rem 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-2, #475569);
}

/* ---- Alerts ---- */
.login-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.65rem;
  font-size: 0.85rem;
  line-height: 1.45;
}
.login-alert svg { flex: none; margin-top: 0.1rem; }
.login-alert.error {
  background: var(--danger-soft, #fef2f2);
  border: 1px solid rgba(185, 28, 28, 0.25);
  color: var(--danger, #b91c1c);
  animation: login-shake 0.4s var(--ds-ease-out, ease-out) 0.35s both;
}
@keyframes login-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* ---- Fields ---- */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
.login-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--text-2, #475569);
}
.login-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.login-forgot {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--accent, #2a3d63);
  text-decoration: none;
  border-radius: 0.25rem;
}
.login-forgot:hover { text-decoration: underline; }
.login-forgot:focus-visible {
  outline: 2px solid var(--accent, #2a3d63);
  outline-offset: 2px;
}
.login-input-wrap { position: relative; }
.login-input-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3, #94a3b8);
  pointer-events: none;
  display: inline-flex;
  transition: color var(--ds-dur-fast, 0.16s) ease;
}
.login-input-wrap:focus-within .login-input-icon { color: var(--accent, #2a3d63); }
.login-field input[type="text"],
.login-field input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  height: 2.8rem;
  padding: 0 0.9rem 0 2.55rem;
  font: inherit;
  font-size: 0.92rem;
  color: var(--text-1, #0f172a);
  background: var(--surface-1, #fff);
  border: 1px solid var(--border-2, rgba(15, 23, 42, 0.18));
  border-radius: 0.65rem;
  box-shadow: var(--shadow-1, 0 1px 2px rgba(15, 23, 42, 0.05));
  transition: border-color var(--ds-dur-fast, 0.16s) ease, box-shadow var(--ds-dur-fast, 0.16s) ease;
}
.login-field input::placeholder { color: var(--text-3, #94a3b8); }
.login-field input:focus {
  outline: none;
  border-color: var(--accent, #2a3d63);
  box-shadow: 0 0 0 3px var(--accent-ring, rgba(74, 103, 148, 0.18));
}
.login-field.has-toggle input { padding-right: 2.9rem; }
.login-field.is-invalid input {
  border-color: var(--danger, #b91c1c);
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12);
}
.login-field.is-invalid .login-input-icon { color: var(--danger, #b91c1c); }
.login-field-error {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
  color: var(--danger, #b91c1c);
}
.login-field-error[hidden] { display: none; }
.login-capslock {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
  color: var(--warning, #92400e);
}
.login-capslock[hidden] { display: none; }

/* Show/hide password toggle */
.login-eye {
  position: absolute;
  right: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text-3, #94a3b8);
  cursor: pointer;
  transition: color var(--ds-dur-fast, 0.16s) ease, background-color var(--ds-dur-fast, 0.16s) ease;
}
.login-eye:hover { color: var(--text-1, #0f172a); background: var(--accent-soft, rgba(74, 103, 148, 0.1)); }
.login-eye:focus-visible {
  outline: 2px solid var(--accent, #2a3d63);
  outline-offset: 1px;
}
.login-eye .eye-off { display: none; }
.login-eye.is-visible .eye-on { display: none; }
.login-eye.is-visible .eye-off { display: inline; }

/* Remember me */
.login-remember {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  color: var(--text-2, #475569);
  cursor: pointer;
  user-select: none;
}
.login-remember input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--accent, #2a3d63);
  cursor: pointer;
}
.login-remember input:focus-visible {
  outline: 2px solid var(--accent, #2a3d63);
  outline-offset: 2px;
}

/* ---- Submit ---- */
.login-submit {
  position: relative;
  margin-top: 0.25rem;
  width: 100%;
  height: 2.85rem;
  border: 0;
  border-radius: 0.65rem;
  background: linear-gradient(135deg, var(--brand-700, #2a3d63), var(--brand-900, #1a2540));
  color: #fff;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform var(--ds-dur-fast, 0.16s) ease, box-shadow var(--ds-dur-fast, 0.16s) ease, filter var(--ds-dur-fast, 0.16s) ease, opacity var(--ds-dur-fast, 0.16s) ease;
}
.login-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.1);
  box-shadow: 0 12px 28px -12px rgba(26, 37, 64, 0.6);
}
.login-submit:active:not(:disabled) { transform: translateY(0); filter: brightness(0.98); }
.login-submit:focus-visible {
  outline: 2px solid var(--accent, #2a3d63);
  outline-offset: 2px;
}
.login-submit:disabled { cursor: not-allowed; opacity: 0.75; }
.login-submit .label { transition: opacity var(--ds-dur-fast, 0.16s) ease; }
.login-submit .spinner {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
}
.login-submit .spinner::after {
  content: '';
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: login-spin 0.7s linear infinite;
}
.login-submit.is-loading .label { opacity: 0; }
.login-submit.is-loading .spinner { display: flex; }
@keyframes login-spin { to { transform: rotate(360deg); } }

/* ---- Foot / meta ---- */
.login-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.75rem 0 0;
  font-size: 0.78rem;
}
.login-foot a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-3, #94a3b8);
  text-decoration: none;
  border-radius: 0.25rem;
  transition: color var(--ds-dur-fast, 0.16s) ease;
}
.login-foot a:hover { color: var(--accent, #2a3d63); text-decoration: underline; }
.login-foot a:focus-visible {
  outline: 2px solid var(--accent, #2a3d63);
  outline-offset: 2px;
}
.login-secure {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3, #94a3b8);
}

/* ---- Theme toggle (top-right of form panel) ---- */
.login-theme-toggle {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border-radius: 0.7rem;
  border: 1px solid var(--border-1, rgba(15, 23, 42, 0.08));
  background: var(--surface-1, #fff);
  color: var(--text-2, #475569);
  box-shadow: var(--shadow-1, 0 1px 2px rgba(15, 23, 42, 0.05));
  cursor: pointer;
  transition: color var(--ds-dur-fast, 0.16s) ease, border-color var(--ds-dur-fast, 0.16s) ease, transform var(--ds-dur-fast, 0.16s) ease;
}
.login-theme-toggle:hover { color: var(--text-1, #0f172a); transform: translateY(-1px); }
.login-theme-toggle:focus-visible {
  outline: 2px solid var(--accent, #2a3d63);
  outline-offset: 2px;
}
.login-theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .login-theme-toggle .icon-sun { display: inline; }
[data-theme="dark"] .login-theme-toggle .icon-moon { display: none; }

/* ---- Info page variant (forgot password) ---- */
.login-steps {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: login-step;
  display: grid;
  gap: 0.9rem;
}
.login-steps li {
  counter-increment: login-step;
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 0.9rem 1rem;
  background: var(--surface-1, #fff);
  border: 1px solid var(--border-1, rgba(15, 23, 42, 0.08));
  border-radius: 0.7rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-2, #475569);
}
.login-steps li::before {
  content: counter(login-step, decimal-leading-zero);
  flex: none;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent, #2a3d63);
  padding-top: 0.15rem;
}
.login-steps strong { color: var(--text-1, #0f172a); font-weight: 600; }

@media (max-width: 480px) {
  .login-main { padding: 3.25rem 1.25rem 2rem; }
  .login-head { margin-bottom: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .login-box { animation: none; }
  .login-alert.error { animation: none; }
  .login-submit,
  .login-theme-toggle { transition: none; }
}

/* ============================================================
 * Admin form-control polish — consistent accent focus ring for
 * the block-editor forms and page-settings inputs (the inline
 * Tailwind classes only style the resting border).
 * ============================================================ */
.block-form input[type="text"]:focus,
.block-form input[type="url"]:focus,
.block-form input[type="number"]:focus,
.block-form textarea:focus,
.block-form select:focus,
.admin-card input[type="text"]:focus,
.admin-card input[type="url"]:focus,
.admin-card textarea:focus,
.admin-card select:focus {
  outline: none;
  border-color: var(--accent, #2a3d63) !important;
  box-shadow: 0 0 0 3px var(--accent-ring, rgba(74, 103, 148, 0.18));
}
.block-form input[type="text"],
.block-form input[type="url"],
.block-form input[type="number"],
.block-form textarea,
.block-form select {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Brand-tinted text selection on the public site + admin. */
::selection {
  background: var(--brand-100, #d6deec);
  color: var(--brand-900, #1a2540);
}
[data-theme="dark"] ::selection {
  background: var(--brand-700, #2a3d63);
  color: #fff;
}

/* ============================================================
 * BLOCKS — video hero, section dividers, columns, events
 * ============================================================ */

/* ---- Video hero ---- */
.ds-vhero-overlay-dark {
  background: linear-gradient(75deg, rgba(2, 6, 23, 0.85) 0%, rgba(2, 6, 23, 0.55) 45%, rgba(2, 6, 23, 0.25) 100%);
}
.ds-vhero-overlay-brand {
  /* Static fallback first; colour-mix picks up custom brand palettes. */
  background: linear-gradient(75deg, rgba(26, 37, 64, 0.88), rgba(42, 61, 99, 0.6) 55%, rgba(74, 103, 148, 0.35));
  background: linear-gradient(75deg,
    color-mix(in srgb, var(--brand-900, #1a2540) 88%, transparent),
    color-mix(in srgb, var(--brand-700, #2a3d63) 60%, transparent) 55%,
    color-mix(in srgb, var(--brand-500, #4a6794) 35%, transparent));
}
.ds-vhero-scroll {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 26px;
  height: 42px;
  box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
}
.ds-vhero-scroll span {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  animation: ds-vhero-drop 2.2s var(--ds-ease-in-out, ease-in-out) infinite;
}
@keyframes ds-vhero-drop {
  0%   { transform: translateY(0);    opacity: 1; }
  60%  { transform: translateY(13px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 0; }
}
.ds-vhero-toggle {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(2, 6, 23, 0.35);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color var(--ds-dur-fast, 0.16s) ease, border-color var(--ds-dur-fast, 0.16s) ease;
}
.ds-vhero-toggle:hover {
  background: rgba(2, 6, 23, 0.55);
  border-color: rgba(255, 255, 255, 0.6);
}
.ds-vhero-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.ds-vhero-toggle .vhero-play { display: none; }
.ds-vhero-toggle.is-paused .vhero-pause { display: none; }
.ds-vhero-toggle.is-paused .vhero-play { display: inline; }

/* ---- Multi-column content: "divided" variant ----
 * The rule sits at each column's left edge; the .cols-N class matches the
 * lg grid column count so row-start items drop their rule. gap-10 (2.5rem)
 * plus 2.5rem padding keeps the rule visually centred between columns. */
@media (min-width: 1024px) {
  .ds-columns-divided > * {
    border-left: 1px solid var(--border-1, rgba(15, 23, 42, 0.08));
    padding-left: 2.5rem;
  }
  .ds-columns-divided.cols-2 > :nth-child(2n + 1),
  .ds-columns-divided.cols-3 > :nth-child(3n + 1),
  .ds-columns-divided.cols-4 > :nth-child(4n + 1) {
    border-left: 0;
    padding-left: 0;
  }
}

/* ---- Section dividers ---- */
.ds-divider-fade {
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    transparent,
    var(--brand-100, #d6deec) 18%,
    var(--brand-500, #4a6794) 50%,
    var(--brand-100, #d6deec) 82%,
    transparent);
  opacity: 0.7;
}
[data-theme="dark"] .ds-divider-fade { opacity: 0.45; }
.ds-divider-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.ds-divider-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border-strong, rgba(15, 23, 42, 0.32));
}
.ds-divider-dots span:nth-child(2) { background: var(--accent, #2a3d63); }
.ds-divider-angle {
  height: 56px;
  background: var(--surface-muted, #f8fafc);
  clip-path: polygon(0 62%, 100% 0, 100% 38%, 0 100%);
}

/* ---- Events: floating calendar chip on card images ---- */
.ds-event-chip {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 3.1rem;
  box-sizing: border-box;
  padding: 0.45rem 0.55rem 0.4rem;
  border-radius: var(--ds-radius-md, 8px);
  background: var(--surface-1, #fff);
  border: 1px solid var(--border-1, rgba(15, 23, 42, 0.08));
  box-shadow: var(--ds-shadow-md, 0 8px 24px -12px rgba(15, 23, 42, 0.18));
}
.ds-event-chip .day {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-1, #0f172a);
}
.ds-event-chip .mon {
  margin-top: 2px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3, #94a3b8);
}

@media (prefers-reduced-motion: reduce) {
  .ds-vhero-scroll span { animation: none; }
}