/* ===================================================================
   FarPoint Educational Systems - styles.css

   Refactor changelog (this version):
   1. Z-index system: hardcoded values replaced with --z-* variables
   2. Dark mode: consolidated via variable reassignment under html.dark
      (component-specific overrides retained only where values diverge
      from the variable system — gradients, navbar translucent surface,
      footer deepest black, marquee tinted background)
   3. Marquee: padding-right balances the gap for seamless loop math,
      translate3d in keyframes, hover-pause, will-change removed,
      manual scroll enabled under reduced-motion
   4. Float cards: !important removed from animations so reduced-motion
      can cleanly override
   5. Reduced-motion block: cleaner organization, explicit suppression
      for slowSpin/glowPulse/portraitBreathe, manual scroll fallback
   6. Box-sizing reset extended to pseudo-elements
   =================================================================== */

/* === Base Styles & Variables === */
:root {
    /* 
     * NAV BREAKPOINT PLACEHOLDER 
     * To change this breakpoint, you MUST update:
     * 1. This CSS variable (for reference)
     * 2. @media (min-width: 769px) and (max-width: 1279px) in styles.css
     * 3. @media (max-width: 1279px) in styles.css
     * 4. window.innerWidth < 1280 and >= 1280 in script.js
     */
    --nav-breakpoint: 1280px;

    --primary-navy: #0f172a;
    --secondary-slate: #334155;
    --accent-blue: #0ea5e9;
    --accent-hover: #0284c7;
    --accent-amber: #f59e0b;
    --coral-accent: var(--accent-amber); /* Deprecated alias */
    --status-red: #ef4444; /* Promoted from bare hex — CBM Tracker V1 rebuild */

    /* Phase 1 Violet/Indigo System */
    --hero-bg: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%); /* Note: hardcodes #1e1b4b rather than referencing --indigo-hero */
    --hero-bg-teal: linear-gradient(135deg, #0f172a 0%, #134e4a 50%, #0f172a 100%);
    --indigo-hero: #1e1b4b;
    --violet-primary: #7c3aed;
    --indigo-primary: #4f46e5;
    --violet-light: #a78bfa;
    --violet-mid: #8b5cf6;
    --emerald-accent: #34d399;
    --cta-gradient: linear-gradient(135deg, var(--violet-primary), var(--indigo-primary));
    --cta-shadow: rgba(124, 58, 237, 0.4);
    --headline-gradient: linear-gradient(90deg, var(--violet-light), var(--emerald-accent));
    --grid-texture: rgba(139, 92, 246, 0.08); /* Derived from --violet-mid */
    --card-surface: rgba(255, 255, 255, 0.95);
    --card-border-light: rgba(255, 255, 255, 0.8);
    --shadow-card: 0 20px 40px -5px rgba(37, 99, 235, 0.15), 0 10px 20px -6px rgba(37, 99, 235, 0.1);
    --text-on-dark: #cbd5e1;
    --radius-pill: 9999px; /* Reserved for Phase 3 eyebrow pills */
    --tint-lavender-start: #ede9fe;
    --tint-lavender-base: #f5f3ff;

    --bg-light: #f8fafc;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --white: #ffffff;
    --border-color: #cbd5e1;

    /* Content-box tier — shared by the reference-article pages (fba-/cbm-/eval-)
       and the tool-shell chrome (mp-/mz-), which had independently declared
       identical or near-identical local copies of these values. */
    --content-body: #475569;
    --content-hair: #e2e8f0;
    --content-goal: #8b5cf6;
    --content-good: #059669;
    --content-warn: #d97706;
    --content-tab-off: #f1f5f9;

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;

    /* Z-index scale — single source of truth */
    --z-behind: -1;
    --z-content: 1;
    --z-fade: 2;
    --z-tooltip: 10;
    --z-nav: 100;
    --z-dropdown: 101;
    --z-modal: 1000;
}

/* Dark mode via variable reassignment. Component-specific overrides
   that genuinely differ from the variable system live near their
   components at the bottom of the file. */
html.dark {
    --primary-navy: #f1f5f9;
    --secondary-slate: #94a3b8;
    --bg-light: #0f172a;
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --white: #111827;
    --border-color: #1e293b;

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
}

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

html, body {
    overflow-x: clip;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-main);
    line-height: 1.6;
    background-color: var(--white);
    -webkit-font-smoothing: antialiased;
}

/* Slight zoom-out on desktop — scales all rem-based sizing ~6% smaller.
   Mobile stays at the browser default (16px). */
@media (min-width: 769px) {
    html { font-size: 14px; }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.bg-light { background-color: var(--bg-light); }
.text-center { text-align: center; }

/* Typography */
h1, h2, h3, h4 {
    color: var(--primary-navy);
    line-height: 1.2;
    margin-bottom: 1rem;
}
h1 { font-size: 3.5rem; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 2.5rem; font-weight: 600; }
h3 { font-size: 1.25rem; font-weight: 600; }
p { margin-bottom: 1rem; color: var(--secondary-slate); }

/* Navigation */
.navbar {
    background-color: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(203, 213, 225, 0.6);
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    padding: 1rem 0;
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.06);
}
.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--primary-navy);
    text-decoration: none;
    display: inline-block;
}
.brand-name {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--primary-navy);
}
.brand-tagline {
    font-weight: 500;
    font-size: 0.65rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}
.nav-links {
    list-style: none;
    display: flex;
    gap: 2rem;
    align-items: center;
}
.nav-links > li > a {
    text-decoration: none;
    color: var(--secondary-slate);
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.5rem 0;
    position: relative;
    transition: color 0.3s ease;
    white-space: nowrap;
}
.nav-links > li > a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    bottom: 0;
    left: 0;
    background-color: var(--accent-blue);
    transition: width 0.3s ease;
    border-radius: 2px;
}
.nav-links > li > a:hover, .nav-links > li > a.active {
    color: var(--accent-blue);
}
.nav-links > li > a:hover::after, .nav-links > li > a.active::after {
    width: 100%;
}

/* Dropdown trigger button: inline caret via ::after, never wraps.
   Overrides the inherited underline ::after animation for plain links. */
.dropbtn {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}
.dropbtn::after,
.dropbtn:hover::after {
    content: '' !important;
    display: inline-block !important;
    width: 0.36em !important;
    height: 0.36em !important;
    border: 0 !important;
    border-right: 1.5px solid currentColor !important;
    border-bottom: 1.5px solid currentColor !important;
    background: none !important;
    border-radius: 0 !important;
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    margin-left: 0.5em;
    flex-shrink: 0;
    opacity: 0.6;
    transform: translateY(-0.1em) rotate(45deg);
    transition: transform 0.2s ease !important;
}

.dropdown:hover > .dropbtn::after,
.dropdown:focus-within > .dropbtn::after,
.dropdown.mobile-open > .dropbtn::after {
    transform: translateY(0.05em) rotate(225deg);
    opacity: 1;
}

.nav-stacked { display: inline-flex; align-items: center; }
.nav-stacked-text {
    display: inline-flex;
    flex-direction: column;
    font-size: 0.82em;
    line-height: 1.1;
    text-align: left;
}
.nav-stacked::after { align-self: center; transform: rotate(45deg); }
.dropdown:hover > .nav-stacked::after,
.dropdown:focus-within > .nav-stacked::after,
.dropdown.mobile-open > .nav-stacked::after { transform: rotate(225deg); }

/* Dropdown */
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--white);
    min-width: 220px;
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-sm);
    z-index: var(--z-dropdown);
    top: 100%;
    left: 0;
    overflow: hidden;
    border: 1px solid var(--border-color);
}
.dropdown-content a {
    color: var(--secondary-slate);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--bg-light);
    transition: all 0.2s ease;
}
.dropdown-content a:hover {
    background-color: var(--bg-light);
    color: var(--accent-blue);
    padding-left: 20px;
}
.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
    display: block;
    animation: fadeInNav 0.2s ease;
}
@keyframes fadeInNav {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Buttons */
.btn-primary, .btn-secondary, .btn-primary-small {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}
.btn-primary {
    background: var(--cta-gradient);
    color: var(--white);
    border: none;
    box-shadow: 0 4px 20px var(--cta-shadow);
}
.btn-primary:hover {
    box-shadow: 0 6px 24px var(--cta-shadow);
    transform: translateY(-2px);
}
.btn-primary-small {
    padding: 0.5rem 1rem;
    background-color: var(--primary-navy);
    color: var(--white) !important;
    border-radius: var(--radius-md);
}
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.02); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}
.btn-primary-small:hover {
    background-color: var(--secondary-slate);
}
/* Contact button: restore side padding on the desktop nav only */
.nav-links > li > a.btn-primary-small::after { display: none; }
@media (min-width: 1280px) {
    .nav-links > li > a.btn-primary-small { padding: 0.5rem 1.1rem; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
    .nav-links > li > a.btn-primary-small { padding: 0.35rem 0.75rem; }
}
.btn-secondary {
    background-color: transparent;
    color: var(--primary-navy);
    border: 1px solid var(--border-color);
}
.btn-secondary:hover {
    background-color: var(--bg-light);
    border-color: var(--secondary-slate);
}
.btn-secondary--on-dark {
    color: #f1f5f9;
    border-color: rgba(241, 245, 249, 0.4);
}
.btn-secondary--on-dark:hover {
    color: #0f172a;
    background-color: #f1f5f9;
    border-color: #f1f5f9;
}

.section-dark .btn-secondary,
.bg-hero .btn-secondary {
    border: 1px solid rgba(139, 92, 246, 0.4);
    color: var(--violet-light);
    background: var(--grid-texture);
}
.section-dark .btn-secondary:hover,
.bg-hero .btn-secondary:hover {
    background: rgba(139, 92, 246, 0.15);
}

.headline-gradient {
    background: var(--headline-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Layout Grids */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.align-center { align-items: center; }

/* Hero Section Redesigned */
.hero {
    padding: 8rem 0;
    background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 100%);
    text-align: center;
}
.hero-redesigned {
    padding: 2rem 0 0;
    text-align: left;
    position: relative;
    overflow: visible;
    background: linear-gradient(135deg, #f0f7ff 0%, #e0f2fe 100%);
}
.page-hero {
    position: relative;
    padding: 7rem 0 4rem;
    background: linear-gradient(135deg, #f0f7ff 0%, #e0f2fe 100%);
    text-align: center;
    overflow: hidden;
}
.page-hero h1 {
    color: var(--primary-navy);
    font-size: 3rem;
    margin-bottom: 1rem;
}
.page-hero .hero-subtitle {
    color: var(--secondary-slate);
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.25rem;
    line-height: 1.6;
}
.hero-bg-pattern {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: linear-gradient(rgba(37, 99, 235, 0.06) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(37, 99, 235, 0.06) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 0;
    overflow: hidden;
}
.hero-bg-pattern::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.08) 0%, transparent 40%),
                radial-gradient(circle at 80% 20%, rgba(14, 165, 233, 0.08) 0%, transparent 30%);
    animation: slowSpin 25s ease-in-out infinite alternate;
    z-index: var(--z-behind);
}
@keyframes slowSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    position: relative;
    z-index: var(--z-content);
    padding-bottom: 2.5rem;
}
.hero-text-col {
    max-width: 600px;
}
.hero-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: rgba(37, 99, 235, 0.1);
    color: var(--accent-blue);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
    border: 1px solid rgba(37, 99, 235, 0.2);
}
.hero-subtitle {
    font-size: 1.15rem;
    color: var(--secondary-slate);
    margin: 1.5rem 0 2.5rem;
    max-width: 100%;
}
.hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
}

/* Floating Cards Visual */
.hero-visual-col {
    position: relative;
    height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.floating-cards-container {
    position: relative;
    width: 100%;
    height: 100%;
}
.visual-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(37,99,235,0.15) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    z-index: 0;
    animation: glowPulse 5s ease-in-out infinite;
}
.hero-portrait-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 340px;
    height: 340px;
    border-radius: 50%;
    overflow: hidden;
    z-index: 0;
    border: 4px solid var(--white);
    box-shadow: 0 20px 40px -5px rgba(37, 99, 235, 0.15), 0 10px 20px -6px rgba(37, 99, 235, 0.1);
    background: var(--white);
    animation: portraitBreathe 4s ease-in-out infinite;
}
.hero-portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.float-card {
    position: absolute;
    background: var(--card-surface);
    backdrop-filter: blur(12px);
    border: 1px solid var(--card-border-light);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--primary-navy);
    z-index: var(--z-content);
    transition: box-shadow 0.3s ease;
}
.float-card--featured {
    background: linear-gradient(135deg, var(--indigo-hero), #2e1065);
    border: 1px solid rgba(167, 139, 250, 0.5); /* Derived from --violet-light */
    box-shadow: 0 8px 30px rgba(124, 58, 237, 0.35); /* Derived from --violet-primary */
}
.float-card:hover {
    box-shadow: 0 25px 50px -5px rgba(124, 58, 237, 0.3), 0 15px 30px -6px rgba(124, 58, 237, 0.15);
}
.float-card .icon {
    font-size: 1.25rem;
}

/* Per-card float animations — varied paths for organic feel */
@keyframes float1 {
  0%   { transform: translate(0px, 0px) rotate(0deg); }
  33%  { transform: translate(-12px, -10px) rotate(-1deg); }
  66%  { transform: translate(8px, -18px) rotate(1deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}
@keyframes float2 {
  0%   { transform: translate(0px, 0px) rotate(0deg); }
  30%  { transform: translate(10px, -12px) rotate(1deg); }
  60%  { transform: translate(-15px, 8px) rotate(-1deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}
@keyframes float3 {
  0%   { transform: translate(0px, 0px) rotate(0deg); }
  25%  { transform: translate(-10px, 12px) rotate(-1deg); }
  75%  { transform: translate(15px, -8px) rotate(1deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}
@keyframes float4 {
  0%   { transform: translate(0px, 0px) rotate(0deg); }
  40%  { transform: translate(12px, -14px) rotate(1deg); }
  80%  { transform: translate(-8px, 10px) rotate(-1deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}
@keyframes float5 {
  0%   { transform: translate(0px, 0px) rotate(0deg); }
  20%  { transform: translate(-14px, -10px) rotate(-1deg); }
  70%  { transform: translate(18px, 12px) rotate(1deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}
@keyframes float6 {
  0%   { transform: translate(0px, 0px) rotate(0deg); }
  30%  { transform: translate(20px, -8px) rotate(1deg); }
  60%  { transform: translate(-12px, 14px) rotate(-1deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}
@keyframes float7 {
  0%   { transform: translate(0px, 0px) rotate(0deg); }
  35%  { transform: translate(-10px, 8px) rotate(-1deg); }
  70%  { transform: translate(14px, -12px) rotate(1deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}
@keyframes glowPulse {
    0%   { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
    50%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
    100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
}
@keyframes portraitBreathe {
    0%   { box-shadow: 0 20px 60px rgba(124,58,237,0.3), 0 0 0 8px rgba(139,92,246,0.1); }
    50%  { box-shadow: 0 25px 70px rgba(124,58,237,0.45), 0 0 0 12px rgba(139,92,246,0.15); }
    100% { box-shadow: 0 20px 60px rgba(124,58,237,0.3), 0 0 0 8px rgba(139,92,246,0.1); }
}

/* Per-card positions */
.card-1 { top: 8%; left: -2%; }
.card-2 { top: 8%; right: 0%; border: 2px solid var(--accent-amber); box-shadow: 0 8px 30px rgba(245, 158, 11, 0.4); color: var(--accent-amber); }
.card-3 { top: 45%; left: 0%; }
.card-4 { top: 45%; right: 0%; }
.card-5 { bottom: 5%; left: 30%; transform: translateX(-50%); }
.card-6 { bottom: 5%; right: 30%; transform: translateX(50%); }
.stat-card {
    background: var(--bg-light);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

/* Services Section */
.services {
    padding: 6rem 0;
}
.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4rem;
}
.service-card {
    background: var(--white);
    padding: 2.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}
.citation {
    font-size: 0.9rem;
    margin-bottom: 0;
}

@media (max-width: 768px) {
}
.gallery-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.gallery-img:hover {
    transform: scale(1.05);
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: var(--z-modal);
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(15, 23, 42, 0.9);
}
.modal-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    animation: zoom 0.3s;
}
@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}
.close-modal {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}
.close-modal:hover,
.close-modal:focus {
    color: #cbd5e1;
    text-decoration: none;
    cursor: pointer;
}

/* CTA & Contact */
.cta {
    padding: 6rem 0;
    background: var(--bg-light);
}
.contact-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
}
.contact-form {
    padding: 4rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: center;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.contact-form input, .contact-form textarea, .contact-form select {
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    background: var(--white);
    transition: all 0.2s ease;
    color: var(--text-main);
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    background: #f8fafc;
}
.form-submit-btn {
    transition: all 0.2s ease;
}
.form-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.35);
}
.form-submit-btn:active {
    transform: translateY(0);
}
footer {
    background: var(--primary-navy);
    color: #cbd5e1;
    padding: 4rem 0;
    border-top: 1px solid #1e293b;
}
footer p {
    color: #94a3b8;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {.grid-2,
.grid-3,
.hero-grid {
        grid-template-columns: 1fr;
    }
    .nav-links {
        display: none;
    }
    h1 { font-size: 2.5rem; }
    .hero-redesigned {
        padding: 2rem 0 0;
        text-align: center;
    }
    .hero-actions {
        justify-content: center;
    }
    .hero-visual-col {
        height: 350px;
    }
    .hero-grid {
        padding-bottom: 2rem;
    }
}

/* Resource Gallery Styles */
.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.resource-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.resource-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}
.resource-image {
    margin: -1.5rem -1.5rem 1.5rem -1.5rem;
    width: calc(100% + 3rem);
    height: 140px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
    border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
    display: block;
}
.resource-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform 0.3s ease;
}
.resource-card:hover .resource-image img {
    transform: scale(1.05);
}
.resource-badge-container {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.resource-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    background: rgba(37, 99, 235, 0.1);
    color: var(--accent-blue);
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
}
.resource-badge.external {
    background: #f1f5f9;
    color: var(--secondary-slate);
}
.resource-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}
.resource-card p {
    flex-grow: 1;
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
}
.resource-card .btn-primary, .resource-card .btn-secondary {
    align-self: flex-start;
    text-align: center;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

/* Make action links look distinctly like clickable buttons */
.resource-card .btn-secondary:not([disabled]) {
    background-color: #0891a5;
    color: #ffffff;
    border: 1px solid #0891a5;
    padding: 0.6rem 1.2rem;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.2s ease;
}
.resource-card .btn-secondary:not([disabled]):hover {
    background-color: #067283;
    border-color: #067283;
    color: #ffffff;
}

/* Video Wrapper */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    background: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
}
.video-wrapper iframe, .video-wrapper video, .video-wrapper > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ===================================================================
   MEET ANDREW PAGE
   =================================================================== */
.bio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}
.bio-grid--reversed {
    direction: rtl;
}
.bio-grid--reversed > * {
    direction: ltr;
}
.bio-image {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    object-fit: cover;
    box-shadow: var(--shadow-md);
}
.bio-text h2 {
    font-size: 2rem;
    margin-bottom: 1.25rem;
}
.bio-text p {
    margin-bottom: 1rem;
    line-height: 1.75;
    color: var(--secondary-slate);
}
.bio-text p:last-of-type {
    margin-bottom: 1.5rem;
}

.work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}
.work-card {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 2rem 1.75rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.work-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}
.work-card__label {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.75rem;
    padding: 0.3rem 0.7rem;
    border-radius: 20px;
}
.work-card:nth-child(1) .work-card__label {
    background: rgba(59, 130, 246, 0.1); color: #2563eb;
}
.work-card:nth-child(2) .work-card__label {
    background: rgba(139, 92, 246, 0.1); color: #7c3aed;
}
.work-card:nth-child(3) .work-card__label {
    background: rgba(13, 148, 136, 0.1); color: #0d9488;
}
.work-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}
.work-card p {
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--secondary-slate);
    margin: 0;
}

.credentials-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}
.credentials-col h3 {
    font-size: 1.15rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--accent-blue);
}
.credentials-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.credentials-col li {
    padding: 0.7rem 0;
    padding-left: 1.25rem;
    position: relative;
    font-size: 0.92rem;
    color: var(--secondary-slate);
    border-bottom: 1px solid var(--bg-light);
}
.credentials-col li:last-child { border-bottom: none; }
.credentials-col li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-blue);
}

.assessment-block {
    margin-bottom: 2rem;
}
.assessment-block:last-child { margin-bottom: 0; }
.assessment-block h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-navy);
    margin-bottom: 0.5rem;
}
.assessment-block p {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--secondary-slate);
    margin: 0;
}

.research-featured {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2.5rem;
    align-items: start;
}
.research-poster-link {
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.research-poster-link:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.research-poster-link img {
    width: 100%;
    height: auto;
    display: block;
}
.research-details .citation {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--secondary-slate);
    margin-bottom: 1rem;
}
.research-details .description {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--secondary-slate);
}
.view-poster-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-blue);
    text-decoration: none;
    margin-top: 0.75rem;
}
.view-poster-link:hover { text-decoration: underline; }

.recognition-card {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2.5rem;
    align-items: center;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 2rem;
    transition: box-shadow 0.25s ease;
}
.recognition-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.recognition-card img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    object-fit: cover;
}
.recognition-card h3 {
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
}
.recognition-card .recognition-sub {
    font-size: 0.85rem;
    color: var(--accent-blue);
    font-weight: 600;
    margin-bottom: 0.75rem;
}
.recognition-card p:last-child {
    font-size: 0.92rem;
    color: var(--secondary-slate);
    line-height: 1.65;
    margin: 0;
}

.honors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.honors-block h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--primary-navy);
}
.honors-block p {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--secondary-slate);
    margin: 0;
}

/* Mobile overrides for Meet Andrew */
@media (max-width: 768px) {
    .bio-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .bio-grid--reversed {
        direction: ltr;
    }
    .bio-image {
        max-width: 400px;
        margin: 0 auto;
    }
    .bio-text h2 {
        font-size: 1.65rem;
    }
    .work-grid {
        grid-template-columns: 1fr;
    }
    .credentials-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .research-featured {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .research-poster-link {
        max-width: 280px;
    }
    .recognition-card {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .recognition-card img {
        max-width: 280px;
        margin: 0 auto;
    }
    .honors-grid {
        grid-template-columns: 1fr;
    }
}
.product-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}
.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.1);
}
.product-card__header {
    padding: 2rem 1.75rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}
.product-card--accent .product-card__header {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.02));
    border-bottom-color: rgba(16, 185, 129, 0.15);
}
.product-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.product-card--accent .product-card__icon { background: rgba(16, 185, 129, 0.12); }
.product-card__header h3 {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}
.product-card__tagline {
    font-size: 0.92rem;
    color: var(--secondary-slate);
    margin: 0;
    font-style: italic;
}
.product-card__features {
    list-style: none;
    padding: 1.5rem 1.75rem 2rem;
    margin: 0;
}
.product-card__features li {
    padding: 0.65rem 0;
    padding-left: 1.6rem;
    position: relative;
    font-size: 0.92rem;
    color: var(--primary-navy);
    border-bottom: 1px solid var(--bg-light);
}
.product-card__features li:last-child { border-bottom: none; }
.product-card__features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    font-weight: 700;
}
.product-card--accent .product-card__features li::before { color: #10b981; }
.product-card__badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(16, 185, 129, 0.1);
    color: #065f46;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    border: 1px solid rgba(16, 185, 129, 0.25);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    .product-card__header { padding: 1.5rem 1.25rem 1.25rem; }
    .product-card__features { padding: 1.25rem; }
}

/* ===================================================================
   MARQUEE SECTION (homepage)
   =================================================================== */
.marquee-section {
    padding: 5rem 0;
    background: linear-gradient(180deg, #f8f6ff 0%, #f0eeff 100%);
    border-top: 1px solid #e9d5ff;
    border-bottom: 1px solid #e9d5ff;
    overflow: hidden;
}
.marquee-heading { text-align: center; margin-bottom: 2.75rem; }
.marquee-heading .mq-label {
    display: inline-block;
    font-size: 0.7rem; font-weight: 800; letter-spacing: 1.5px;
    text-transform: uppercase;
    background: linear-gradient(90deg, #7c3aed, #0d9488);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    margin-bottom: 0.75rem;
}
.marquee-heading h2 { font-size: 2rem; font-weight: 700; color: #1e1047; margin-bottom: 0.5rem; }
.marquee-heading p { font-size: 1rem; color: #6b5fa0; max-width: 520px; margin: 0 auto; }

.marquee-track-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.marquee-track-wrap::before,
.marquee-track-wrap::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 120px;
    z-index: var(--z-fade);
    pointer-events: none;
}
.marquee-track-wrap::before { left: 0; background: linear-gradient(90deg, #f0eeff, transparent); }
.marquee-track-wrap::after  { right: 0; background: linear-gradient(-90deg, #f0eeff, transparent); }
html.dark .marquee-track-wrap::before { background: linear-gradient(90deg, #0f172a, transparent); }
html.dark .marquee-track-wrap::after  { background: linear-gradient(-90deg, #0f172a, transparent); }

/* Marquee track: padding-right balances the gap so the duplicated set
   loops seamlessly. Without it the loop is off by 0.5*gap per cycle. */
.marquee-track {
    display: flex;
    gap: 0.75rem;
    padding-right: 0.75rem;
    width: max-content;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-track.fwd { animation: scrollL 38s linear infinite; }
.marquee-track.rev { animation: scrollR 42s linear infinite; }

@keyframes scrollL {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes scrollR {
    from { transform: translate3d(-50%, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

.mq-tag {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.55rem 1.15rem; border-radius: 30px;
    font-size: 0.83rem; font-weight: 600; white-space: nowrap;
    border: 1px solid; transition: transform 0.15s; cursor: default;
}
.mq-tag:hover { transform: scale(1.05); }
.mq-v { background: rgba(124,58,237,0.09); color: #5b21b6; border-color: rgba(124,58,237,0.25); }
.mq-t { background: rgba(13,148,136,0.09); color: #0f766e; border-color: rgba(13,148,136,0.25); }
.mq-a { background: rgba(217,119,6,0.09); color: #92400e; border-color: rgba(217,119,6,0.25); }
.mq-e { background: rgba(5,150,105,0.09); color: #065f46; border-color: rgba(5,150,105,0.25); }
.mq-r { background: rgba(220,38,38,0.07); color: #991b1b; border-color: rgba(220,38,38,0.2); }

.marquee-cta { text-align: center; margin-top: 2.75rem; }
.marquee-cta a {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.75rem 2rem;
    background: linear-gradient(135deg, #7c3aed, #0d9488);
    color: white; text-decoration: none; border-radius: 30px;
    font-weight: 700; font-size: 0.9rem;
    box-shadow: 0 4px 20px rgba(124,58,237,0.28); transition: all 0.2s;
}
.marquee-cta a:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(124,58,237,0.38); }

/* ===================================================================
   HAMBURGER MENU — Base Styles (hidden on desktop)
   =================================================================== */
.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    padding: 8px;
    transition: all 0.2s ease;
    z-index: var(--z-dropdown);
    flex-shrink: 0;
}
.hamburger-btn:hover {
    background: var(--bg-light);
    border-color: var(--secondary-slate);
}
.hamburger-line {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--primary-navy);
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}
.hamburger-btn.active .hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.hamburger-btn.active .hamburger-line:nth-child(2) {
    opacity: 0;
}
.hamburger-btn.active .hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ===================================================================
   MEDIUM VIEWPORT NAV FIX (769–1024px)
   =================================================================== */
@media (min-width: 769px) and (max-width: 1279px) {
    .nav-links {
        gap: 1.25rem;
    }
    .nav-links > li > a {
        font-size: 0.88rem;
    }
    .logo {
        font-size: 1.1rem;
    }
    .btn-primary-small {
        padding: 0.4rem 0.85rem;
        font-size: 0.85rem;
    }
}

/* ===================================================================
   MOBILE LAYOUT & OVERFLOW FIXES
   =================================================================== */
@media (max-width: 768px) {
    .hero-redesigned h1 {
        font-size: 1.85rem !important;
        line-height: 1.25;
    }
    .hero-redesigned .hero-subtitle {
        font-size: 0.95rem;
    }
    .hero-redesigned .container {
        padding: 0 1.5rem;
    }
    .hero-redesigned .hero-badge {
        font-size: 0.75rem;
    }
    .hero-actions {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    .hero-actions .btn-primary,
    .hero-actions .btn-secondary {
        padding: 0.65rem 1.25rem;
        font-size: 0.9rem;
    }
    .float-card {
        display: none !important;
    }
    .visual-glow {
        display: none;
    }
    .hero-visual-col {
        height: auto;
        min-height: 220px;
    }
    .hero-portrait-wrapper {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 200px !important;
        height: 200px !important;
        margin: 1rem auto 0;
    }
    #platform-mockup {
        padding: 3rem 0 !important;
        overflow: hidden;
    }
    #platform-mockup > .container {
        padding: 0 1rem;
        overflow: hidden;
    }
    #platform-mockup .section-header h2 {
        font-size: 1.75rem !important;
    }
    #platform-mockup .section-header p {
        font-size: 0.95rem !important;
    }
    .mockup-app {
        flex-direction: column !important;
        overflow: hidden;
        border-radius: 12px !important;
    }
    .mockup-sidebar {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid #1e293b;
        padding: 1rem !important;
    }
    .mockup-sidebar > div:first-child {
        margin-bottom: 0.75rem !important;
        font-size: 1rem !important;
    }
    .mockup-sidebar ul {
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 0.3rem !important;
    }
    .mockup-sidebar ul li {
        padding: 0.4rem 0.65rem !important;
        font-size: 0.7rem !important;
        white-space: nowrap;
    }
    .mockup-main {
        padding: 1.25rem !important;
    }
    .mockup-topbar {
        flex-wrap: wrap !important;
        gap: 0.5rem;
    }
    .mockup-grid {
        grid-template-columns: 1fr !important;
    }
    .mockup-status {
        flex-wrap: wrap !important;
        gap: 0.5rem;
        justify-content: center !important;
        text-align: center;
    }
    .mockup-status span {
        font-size: 0.7rem !important;
    }
    .marquee-section {
        padding: 3rem 0 !important;
    }
    .marquee-heading h2 {
        font-size: 1.5rem;
    }
    .cbm-feature-block {
        padding: 3rem 0 !important;
    }
    .cbm-feature-text h2 {
        font-size: 1.6rem !important;
    }
    .hamburger-btn {
        display: flex;
    }
    .nav-content {
        position: relative;
    }
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: -2rem;
        right: -2rem;
        background: var(--white);
        flex-direction: column;
        padding: 0.5rem 2rem 1.25rem;
        border-bottom: 1px solid var(--border-color);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        gap: 0;
        z-index: var(--z-nav);
    }
    .nav-links.nav-open {
        display: flex;
    }
    .nav-links > li {
        width: 100%;
    }
    .nav-links > li > a {
        display: block;
        padding: 0.85rem 0;
        border-bottom: 1px solid var(--bg-light);
        width: 100%;
        font-size: 1rem;
    }
    .nav-links > li > a::after {
        display: none;
    }
    .nav-links > li > a:hover::after {
        display: none;
    }
    .dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
        display: none;
    }
    .dropdown.mobile-open > .dropdown-content {
        display: block !important;
        position: static;
        box-shadow: none;
        border: none;
        border-radius: 0;
        min-width: 100%;
        padding: 0 0 0 1rem;
        background: transparent;
        animation: none;
    }
    .dropdown.mobile-open > .dropdown-content a {
        padding: 0.65rem 1rem;
        border-bottom: none;
        font-size: 0.9rem;
        color: var(--secondary-slate);
    }
    .dropdown.mobile-open > .dropdown-content a:hover {
        padding-left: 1.25rem;
        color: var(--accent-blue);
        background: transparent;
    }
    .nav-links .btn-primary-small {
        display: inline-block;
        margin-top: 0.5rem;
        text-align: center;
        width: 100%;
        padding: 0.75rem 1rem;
    }
}

/* ===================================================================
   ACCESSIBILITY
   =================================================================== */
:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Reduced motion: respect the user's accessibility preference.
   Marquee gets manual horizontal scroll as a graceful fallback. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Explicit suppression for decorative animations.
       Listed by name so the kill is unambiguous, not just throttled. */
    .visual-glow,
    .hero-bg-pattern::after,
    .hero-portrait-wrapper,
    .float-card {
        animation: none !important;
    }

    .marquee-track {
        animation: none !important;
        flex-wrap: wrap;
        width: 100%;
    }
    
    .marquee-dupe {
        display: none;
    }
}

/* ===================================================================
   DARK MODE — COMPONENT-SPECIFIC OVERRIDES

   Only overrides that genuinely differ from the variable system live
   here: gradients, translucent surfaces with specific tints, the
   deepest footer black, and the marquee section's purple-tinted bg.
   The bulk of dark mode is handled by the html.dark variable
   reassignment block at the top of this file.
   =================================================================== */

/* Page surface — darker than the elevated card surface (--white) */
html.dark body { background: #0a0f1e; }

/* Navbar uses a translucent surface that needs an explicit dark rgba */
html.dark .navbar {
    background: rgba(8, 13, 26, 0.92);
    border-color: #1e293b;
}

/* Footer needs the deepest black to anchor the page */
html.dark footer { background: #060a14; }
html.dark .btn-primary-small { background-color: #7c3aed; }
html.dark .btn-primary-small:hover { background-color: #6d28d9; }

/* Tinted-gradient sections — purple/navy variants for dark mode */
html.dark .cbm-feature-block {
    background: linear-gradient(180deg, #1e1b4b 0%, #0f172a 60%) !important;
}
html.dark .cta {
    background: linear-gradient(180deg, #0a0f1e 0%, #0a0f1e 100%) !important;
}
html.dark .contact-card {
    background: rgba(8, 13, 26, 0.98) !important;
    border-color: rgba(139, 92, 246, 0.25) !important;
}
html.dark .marquee-section {
    background: #0f172a !important;
    border-color: #1e293b !important;
}
html.dark .page-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
}

/* Nav link hover accent shifts to purple in dark mode */
html.dark .nav-links a:hover,
html.dark .nav-links .active { color: #a78bfa; }
html.dark .dropdown-content a:hover { background: #1e293b; color: #a78bfa; }

/* Work card label tints — color shifts for dark contrast */
html.dark .work-card:nth-child(1) .work-card__label {
    background: rgba(59,130,246,0.15); color: #60a5fa;
}
html.dark .work-card:nth-child(2) .work-card__label {
    background: rgba(139,92,246,0.15); color: #a78bfa;
}
html.dark .work-card:nth-child(3) .work-card__label {
    background: rgba(13,148,136,0.15); color: #2dd4bf;
}
html.dark .recognition-card .recognition-sub { color: #60a5fa; }
html.dark .credentials-col h3 { border-color: #3b82f6; }
html.dark .view-poster-link { color: #60a5fa; }

/* Product card — badge tint shifts in dark mode */
html.dark .product-card__badge {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.3);
}

/* Dark toggle button */
#darkToggle {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #cbd5e1;
    cursor: pointer;
    font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    line-height: 1;
}
#darkToggle:hover { background: rgba(124,58,237,0.1); border-color: #a78bfa; }
html.dark #darkToggle { border-color: #334155; color: #f1f5f9; }

/* Mobile dark mode nav menu (translucent overlay) */
@media (max-width: 768px) {
    html.dark .nav-links {
        background: #080d1a;
        border-color: #1e293b;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    }
    html.dark .nav-links > li > a {
        border-color: #1e293b;
    }
    html.dark .dropdown.mobile-open > .dropdown-content a {
        color: #94a3b8;
    }
    html.dark .dropdown.mobile-open > .dropdown-content a:hover {
        color: #a78bfa;
    }
}

/* ===================================================================
   UNIFIED FOOTER
   =================================================================== */
.site-footer-unified {
    margin-top: 0;
    background: #0f172a;
    color: #94a3b8;
    font-size: 0.88rem;
    border-top: 1px solid rgba(139, 92, 246, 0.15);
}
.footer-grid-main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3rem;
    padding-top: 3.5rem;
    padding-bottom: 3rem;
    align-items: start;
}
.footer-col-brand .footer-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 0.5rem;
}
.footer-col-brand .footer-tagline {
    margin: 0;
    line-height: 1.6;
    color: #64748b;
    font-size: 0.82rem;
}
.footer-col-nav nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.footer-col-nav nav a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.15s ease;
}
.footer-col-nav nav a:hover {
    color: #2dd4bf;
}
.footer-col-contact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.footer-col-contact a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.15s ease;
    word-break: break-all;
}
.footer-col-contact a:hover {
    color: #2dd4bf;
}
.footer-bottom {
    border-top: 1px solid #1e293b;
    padding: 1.25rem 0;
}
.footer-bottom p {
    margin: 0 0 0.3rem;
    font-size: 0.78rem;
    color: #475569;
    line-height: 1.5;
}
.footer-bottom p:last-child {
    margin: 0;
}
.footer-privacy {
    color: #475569 !important;
}
.footer-privacy a {
    color: #64748b;
    text-decoration: underline;
}
.footer-privacy a:hover {
    color: #2dd4bf;
}

.video-embed-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.video-embed-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 768px) {
    .footer-grid-main {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding-top: 2.5rem;
        padding-bottom: 2rem;
    }
    .footer-col-contact a {
        word-break: normal;
    }
}
@media (max-width: 480px) {
    .footer-grid-main {
        padding-top: 2rem;
        padding-bottom: 1.5rem;
    }
}
.nav-credential {
    padding: 0.4rem 1rem;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: var(--bg-light);
    font-size: 0.8rem;
    color: var(--secondary-slate);
    font-weight: 500;
    margin-left: 1rem;
    margin-right: 1.5rem;
    white-space: nowrap;
}
@media (max-width: 1279px) {
    .nav-credential {
        display: none !important;
    }
}
/* --- Dark Section --- */
/* NOTE: uses --primary-navy (bg) and --bg-light (text), both of
   which invert under html.dark. If dark mode is ever reactivated,
   this section needs explicit html.dark overrides. */
.bg-hero {
    background: var(--hero-bg);
}

.text-on-dark-label {
    font-size: 0.8rem;
    color: var(--text-on-dark);
}

.flex-row-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-dark {
    position: relative;
    background: var(--primary-navy);
    color: var(--bg-light);
    padding: 5rem 0;
    overflow: hidden;
}
.section-dark .hero-bg-pattern {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: linear-gradient(rgba(139, 92, 246, 0.08) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(139, 92, 246, 0.08) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 0;
}
.section-dark .container {
    position: relative;
    z-index: 1;
}
.section-dark h2, .section-dark h3 {
    color: var(--white);
}
.section-dark p {
    color: var(--bg-light);
}

/* Problem / Solution Grid */
.problem-solution-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 768px) {
    .problem-solution-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.card-neutral {
    background: rgba(51, 65, 85, 0.5); /* var(--secondary-slate) slightly translucent */
    border: 1px solid var(--secondary-slate);
    border-radius: var(--radius-lg);
    padding: 2rem;
}
.card-accent-edge {
    background: rgba(14, 165, 233, 0.05);
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-top: 4px solid var(--accent-blue);
    border-radius: var(--radius-lg);
    padding: 2rem;
}
@media (min-width: 768px) {
    .card-accent-edge {
        border-top: 1px solid rgba(14, 165, 233, 0.2);
        border-left: 4px solid var(--accent-blue);
    }
}
.card-eyebrow {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 0.75rem;
}
.card-neutral .card-eyebrow {
    color: var(--text-muted);
}
.card-accent-edge .card-eyebrow {
    color: var(--accent-blue);
}
/* --- Process Stepper --- */
.process-stepper {
    display: flex;
    flex-direction: column;
}
.process-stepper .step {
    display: flex;
    position: relative;
    padding-bottom: 2rem;
}
.process-stepper .step:last-child {
    padding-bottom: 0;
}
.process-stepper .step::before {
    content: '';
    position: absolute;
    left: 1.25rem;
    top: 2.5rem;
    bottom: 0;
    width: 2px;
    background: var(--border-color);
    transform: translateX(-50%);
}
.process-stepper .step:last-child::before {
    display: none;
}
.process-stepper .step-circle {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--accent-blue);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.process-stepper .step-content {
    margin-left: 1.5rem;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--secondary-slate);
    padding-top: 0.4rem;
}

/* ===================================================================
   REDAssist Batch 2 Hero Visual
   =================================================================== */
.redassist-hero-visual {
    position: relative;
    width: 112%;
    margin-left: -6%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 350px;
}

.redassist-screenshot-wrapper {
    position: relative;
    z-index: 1;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    width: 100%;
    max-width: 600px;
    border: 1px solid var(--card-border-light);
}

.redassist-screenshot {
    display: block;
    width: 100%;
    height: auto;
}

/* Below 768px */
@media (max-width: 768px) {
    .redassist-hero-visual {
        flex-direction: column;
        height: auto;
        gap: 2rem;
        margin-top: 2rem;
        width: 100%;
        margin-left: 0;
    }
}

/* ===================================================================
   REDAssist Timeline Card (Phase 3 Batch 3)
   =================================================================== */
.timeline-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.timeline-node {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1rem;
    border-radius: 6px;
    background: var(--bg-light);
    border-left: 3px solid var(--border-color);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    opacity: 1;
    transform: translateY(0);
}

/* JS Decorative Reveal State (only visible to JS users before scroll) */
.timeline-node.pre-reveal {
    opacity: 0.8;
    transform: translateY(10px);
}

.timeline-node.success {
    background: rgba(52,211,153,0.08);
    border-left-color: #34d399;
}
.timeline-node.success .timeline-label { color: var(--secondary-slate); }
.timeline-node.success .timeline-value { color: #059669; }

.timeline-node.amber {
    background: rgba(245,158,11,0.08);
    border-left-color: #f59e0b;
}
.timeline-node.amber .timeline-label { color: var(--secondary-slate); }
.timeline-node.amber .timeline-value {
    color: #d97706;
    font-size: 0.85rem;
    font-weight: 600;
}

.timeline-label {
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.timeline-value {
    font-size: 0.9rem;
    font-weight: 600;
}
.timeline-value.count-red {
    color: #ef4444 !important;
}


.resource-card-actions{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 1rem;
    align-self: stretch;
}
/* Every button in a resource card is the same width and sits flush to the
   card edges. Overrides the align-self: flex-start set higher up on
   .resource-card .btn-secondary, which was letting each button shrink to
   its own label length. */
.resource-card-actions .btn-primary,
.resource-card-actions .btn-secondary{
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}


/* ═══════════════════════════════════════════════════════════════════════
   PART E: NAV: five top-level items (Oct 2026 consolidation)
   About ▾ · Tools ▾ · PD Courses ▾ · Work With Me ▾ · [REDAssist ▾]
   Full nav at 1280px+, hamburger below (see --nav-breakpoint).
   ═══════════════════════════════════════════════════════════════════════ */

/* REDAssist button in nav */
.nav-links .btn-redassist {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #f5f3ff !important;
    padding: 0.35rem 0.8rem !important;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8rem;
    border: 1px solid rgba(0, 0, 0, 0.35);
    box-shadow: 0 2px 10px rgba(124, 58, 237, 0.45);
    transition: filter 0.15s, box-shadow 0.15s, transform 0.15s;
}
.nav-links .btn-redassist:hover {
    filter: brightness(1.12);
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.65);
    transform: translateY(-1px);
}
.nav-links .btn-redassist::after { display: none !important; }

/* REDAssist is now a dropdown trigger: keep the button look, add the caret */
.nav-links .dropdown--redassist > .btn-redassist { display: inline-flex; align-items: center; }
.nav-links .dropdown--redassist > .btn-redassist::after {
    display: inline-block !important;
    opacity: 0.85;
}
.nav-links .btn-redassist.active {
    box-shadow: 0 0 0 2px var(--white), 0 0 0 4px rgba(124, 58, 237, 0.55), 0 2px 10px rgba(124, 58, 237, 0.45);
}

/* Right-aligned panel for the last item so it never runs off-screen */
.dropdown-content--right { left: auto; right: 0; }

/* Group labels inside a dropdown (Tools) */
.dropdown-label {
    display: block;
    padding: 0.7rem 16px 0.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: default;
}
.dropdown-content a + .dropdown-label {
    margin-top: 0.25rem;
    border-top: 1px solid var(--content-hair);
}
.dropdown-content--grouped { min-width: 240px; }

/* Current page inside a dropdown */
.dropdown-content a[aria-current="page"] {
    color: var(--violet-primary);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--violet-primary);
}
.dropdown-content .nav-external-mark {
    margin-left: 0.3rem;
    opacity: 0.6;
    font-size: 0.85em;
}

/* Below 1280px: hamburger (overrides existing 768px nav rules) */
@media (max-width: 1279px) {
    .hamburger-btn { display: flex; }
    .nav-content   { position: relative; }
    .nav-links {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--white);
        flex-direction: column;
        padding: 0.5rem 2rem 1.25rem;
        border-bottom: 1px solid var(--border-color);
        box-shadow: 0 8px 24px rgba(0,0,0,0.1);
        gap: 0;
        z-index: var(--z-nav);
    }
    .nav-links.nav-open { display: flex; }
    .nav-links > li    { width: 100%; }
    .nav-links > li > a { display: block; padding: 0.85rem 0; border-bottom: 1px solid var(--bg-light); width: 100%; font-size: 1rem; }
    .nav-links > li > a::after        { display: none; }
    .nav-links > li > a:hover::after  { display: none; }
    .dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content { display: none; }
    .dropdown.mobile-open > .dropdown-content {
        display: block !important;
        position: static; box-shadow: none; border: none; border-radius: 0;
        min-width: 100%; padding: 0 0 0 1rem;
        background: transparent; animation: none;
    }
    .dropdown.mobile-open > .dropdown-content a { padding: 0.65rem 1rem; border-bottom: none; font-size: 0.9rem; color: var(--secondary-slate); }
    .dropdown.mobile-open > .dropdown-content a:hover { padding-left: 1.25rem; color: var(--accent-blue); background: transparent; }
    .nav-links .btn-primary-small { display: inline-block; margin-top: 0.5rem; text-align: center; width: 100%; padding: 0.75rem 1rem; }
    /* In the hamburger menu the REDAssist button becomes a plain violet row */
    .nav-links .btn-redassist { padding: 0.85rem 0 !important; background: none; color: #7c3aed !important; border: 0; border-radius: 0; box-shadow: none; font-size: 1rem; }
    .nav-links .btn-redassist:hover { transform: none; box-shadow: none; filter: none; }
    .nav-links .dropdown--redassist > .btn-redassist { display: block; }
    .nav-links .btn-redassist.active { box-shadow: none; }
    .dropdown-content--right { right: auto; }
    .dropdown.mobile-open > .dropdown-content .dropdown-label { padding: 0.75rem 1rem 0.2rem; border-top: 0; margin-top: 0; }
}

/* dark mode support for new nav items */
html.dark .nav-links .btn-redassist { color: #c4b5fd !important; background: none; }
@media (max-width: 1279px) {
    html.dark .nav-links { background: var(--bg-dark, #0f172a); }
}

@media (max-width: 1439px) {
    .redassist-hero-visual {
        width: 100%;
        margin-left: 0;
    }
}

/* Horizontal overflow clamped and nav breakpoint derived */


/* ═══════════════════════════════════════════════════════════════════════
   PART F: Contact button (home hero). Replaces the old "Explore the Tools"
   ═══════════════════════════════════════════════════════════════════════ */
.btn-contact {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.45rem 1.4rem 0.45rem 0.45rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--violet-primary) 0%, var(--indigo-primary) 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 28px rgba(79, 70, 229, 0.38);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-contact__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26);
    flex-shrink: 0;
}
.btn-contact svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.btn-contact__arrow { transition: transform 0.2s ease; }
.btn-contact:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 14px 34px rgba(79, 70, 229, 0.5);
}
.btn-contact:hover .btn-contact__arrow { transform: translateX(3px); }
.btn-contact:focus-visible {
    outline: 3px solid #c4b5fd;
    outline-offset: 3px;
    border-radius: var(--radius-pill);
}
@media (max-width: 768px) {
    .btn-contact { font-size: 0.98rem; padding-right: 1.2rem; }
    .btn-contact__icon { width: 2.1rem; height: 2.1rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PART G: REDAssist guide + FERPA & Data Privacy pages (ra-*)
   Shared by redassist-guide.html and ferpa-data.html.
   ═══════════════════════════════════════════════════════════════════════ */
.ra-ico {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Hero --- */
.ra-hero { padding: 6.5rem 0 4.5rem; text-align: center; }
.ra-hero .container { position: relative; z-index: 1; }
.ra-hero h1 {
    color: #ffffff;
    font-size: 3.3rem;
    line-height: 1.1;
    margin-bottom: 1.25rem;
    text-shadow: 0 2px 20px rgba(139, 92, 246, 0.3);
}
.ra-hero .hero-subtitle {
    color: var(--text-on-dark);
    max-width: 760px;
    margin: 0 auto 2.25rem;
    font-size: 1.2rem;
    line-height: 1.7;
}
.ra-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1.1rem;
    margin-bottom: 1.5rem;
    border-radius: var(--radius-pill);
    background: rgba(139, 92, 246, 0.14);
    border: 1px solid rgba(167, 139, 250, 0.4);
    color: #ddd6fe;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ra-eyebrow--amber {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.35);
    color: #fbbf24;
}
.ra-hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2.25rem;
}
.ra-hero-actions .btn-primary,
.ra-hero-actions .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.ra-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    list-style: none;
    max-width: 900px;
    margin: 0 auto;
}
.ra-chips li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.95rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #e2e8f0;
    font-size: 0.88rem;
    font-weight: 500;
}
.ra-chips .ra-ico { width: 1rem; height: 1rem; color: var(--emerald-accent); }

/* --- Sections --- */
.ra-section { padding: 5rem 0; background: var(--white); }
.ra-section--tint { background: var(--bg-light); }
.ra-section--lavender { background: linear-gradient(180deg, var(--tint-lavender-base) 0%, var(--white) 100%); }
.ra-wrap { max-width: 1120px; }
.ra-narrow { max-width: 860px; }
.ra-section-head { max-width: 760px; margin: 0 auto 3rem; text-align: center; }
.ra-section-head h2 { font-size: 2.3rem; margin-bottom: 0.85rem; }
.ra-section-head p { font-size: 1.12rem; line-height: 1.7; color: var(--content-body); margin-bottom: 0; }
.ra-kicker {
    display: inline-block;
    margin-bottom: 0.6rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--violet-primary);
}

/* --- Jump links --- */
.ra-toc {
    background: var(--white);
    border-bottom: 1px solid var(--content-hair);
    padding: 1rem 0;
}
.ra-toc ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}
.ra-toc .ra-toc-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-right: 0.35rem;
}
.ra-toc a {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--content-hair);
    background: var(--bg-light);
    color: var(--secondary-slate);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.ra-toc a:hover {
    border-color: rgba(124, 58, 237, 0.45);
    color: var(--violet-primary);
    background: var(--tint-lavender-base);
}

/* --- Quick start --- */
.ra-steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    counter-reset: rastep;
}
.ra-steps li {
    position: relative;
    padding: 1.6rem 1.4rem 1.4rem;
    border-radius: var(--radius-lg);
    background: var(--white);
    border: 1px solid var(--content-hair);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(79, 70, 229, 0.18);
    counter-increment: rastep;
}
.ra-steps li::before {
    content: counter(rastep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.9rem;
    border-radius: 50%;
    background: var(--cta-gradient);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
}
.ra-steps h3 { font-size: 1.08rem; margin-bottom: 0.4rem; }
.ra-steps p { font-size: 0.95rem; line-height: 1.6; color: var(--content-body); margin-bottom: 0; }

/* --- Workflow strip (M1 to M5, then the draft) --- */
.ra-flow {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.9rem;
}
.ra-flow a {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.25rem 1.1rem;
    border-radius: var(--radius-lg);
    background: var(--white);
    border: 1px solid var(--content-hair);
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ra-flow a:hover {
    transform: translateY(-3px);
    border-color: rgba(124, 58, 237, 0.4);
    box-shadow: 0 14px 30px -14px rgba(79, 70, 229, 0.35);
}
.ra-flow strong {
    display: block;
    color: var(--primary-navy);
    font-size: 1rem;
    line-height: 1.3;
    margin: 0.75rem 0 0.4rem;
}
.ra-flow span.ra-flow-text { color: var(--content-body); font-size: 0.88rem; line-height: 1.55; }
.ra-flow .ra-flow-end a {
    background: linear-gradient(160deg, #1e1b4b 0%, #312e81 100%);
    border-color: transparent;
}
.ra-flow .ra-flow-end strong { color: #ffffff; }
.ra-flow .ra-flow-end span.ra-flow-text { color: #c7d2fe; }

.ra-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    padding: 0.2rem 0.55rem;
    border-radius: 0.45rem;
    background: var(--violet-primary);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.4;
    align-self: flex-start;
}
.ra-badge--draft { background: var(--emerald-accent); color: #064e3b; }
.ra-badge--light { background: rgba(124, 58, 237, 0.1); color: var(--violet-primary); }

/* --- Feature rows (text + screenshot) --- */
.ra-feature {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 3.5rem;
    align-items: center;
}
.ra-feature--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.ra-feature--flip .ra-feature__text { order: 2; }
.ra-feature--flip .ra-feature__media { order: 1; }
.ra-feature--tall { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }
.ra-feature--tall.ra-feature--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.ra-feature__text h2 { font-size: 2.1rem; margin-bottom: 0.85rem; }
.ra-feature__title { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.85rem; }
.ra-feature__title h2 { margin-bottom: 0; }
.ra-feature__text > p { font-size: 1.08rem; line-height: 1.7; color: var(--content-body); }
.ra-stack { max-width: 1120px; }
.ra-stack > * + * {
    margin-top: 5rem;
    padding-top: 5rem;
    border-top: 1px solid var(--content-hair);
}
.ra-feature > .ra-list { margin-top: 0; }
.ra-stack > [id], .ra-section[id], .ra-feature[id] { scroll-margin-top: 6rem; }

.ra-list { list-style: none; margin: 1.25rem 0 0; }
.ra-list li {
    position: relative;
    padding-left: 1.85rem;
    margin-bottom: 0.7rem;
    color: var(--content-body);
    line-height: 1.6;
}
.ra-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.2rem;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 0.7rem no-repeat;
}
.ra-list li strong { color: var(--primary-navy); font-weight: 600; }

.ra-shot { margin: 0; }
.ra-shot__frame {
    position: relative;
    border-radius: 0.9rem;
    overflow: hidden;
    background: #0f172a;
    background-clip: padding-box;
    border: 1px solid rgba(15, 23, 42, 0.12);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 24px 48px -18px rgba(30, 27, 75, 0.45);
}
.ra-shot__frame img {
    display: block;
    width: 100%;
    height: auto;
    cursor: zoom-in;
}
.ra-shot__frame img:focus-visible { outline: 3px solid var(--violet-mid); outline-offset: -3px; }
.ra-shot__zoom {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-pill);
    background: rgba(15, 23, 42, 0.72);
    color: #e2e8f0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.ra-shot__frame:hover .ra-shot__zoom { opacity: 1; }
.ra-shot figcaption {
    margin-top: 0.8rem;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--text-muted);
    text-align: center;
}
.ra-shot--narrow { max-width: 520px; margin: 0 auto; }
.ra-shot--small { max-width: 300px; margin: 0 auto; }
.ra-shot--wide { margin-top: 2.5rem; }

.ra-tip {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding: 1rem 1.15rem;
    border-radius: 0.75rem;
    background: var(--tint-lavender-base);
    border: 1px solid rgba(124, 58, 237, 0.18);
    color: var(--content-body);
    font-size: 0.97rem;
    line-height: 1.6;
}
.ra-tip .ra-ico { color: var(--violet-primary); margin-top: 0.15rem; }
.ra-tip strong { color: var(--primary-navy); }
.ra-tip p { margin: 0; color: inherit; }

.ra-inline-links { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.5rem; }
.ra-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--violet-primary);
    font-weight: 600;
    text-decoration: none;
}
.ra-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ra-link .ra-ico { width: 1rem; height: 1rem; transition: transform 0.2s ease; }
.ra-link:hover .ra-ico { transform: translateX(2px); }

/* --- FAQ --- */
.ra-faq { max-width: 860px; margin: 0 auto; }
.ra-faq details {
    border: 1px solid var(--content-hair);
    border-radius: 0.85rem;
    background: var(--white);
    margin-bottom: 0.75rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ra-faq details[open] {
    border-color: rgba(124, 58, 237, 0.35);
    box-shadow: 0 10px 28px -16px rgba(79, 70, 229, 0.35);
}
.ra-faq summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--primary-navy);
}
.ra-faq summary::-webkit-details-marker { display: none; }
.ra-faq summary::after {
    content: '';
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid var(--violet-primary);
    border-bottom: 2px solid var(--violet-primary);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.ra-faq details[open] summary::after { transform: rotate(225deg) translateY(-1px); }
.ra-faq summary:focus-visible { outline: 2px solid var(--violet-mid); outline-offset: 2px; border-radius: 0.85rem; }
.ra-faq .ra-answer { padding: 0 1.35rem 1.2rem; }
.ra-faq .ra-answer p { color: var(--content-body); line-height: 1.7; margin-bottom: 0.6rem; }
.ra-faq .ra-answer p:last-child { margin-bottom: 0; }
.ra-faq .ra-answer a { color: var(--violet-primary); font-weight: 600; }

/* --- Dark call-to-action band --- */
.ra-cta { text-align: center; }
.ra-cta h2 { font-size: 2.3rem; margin-bottom: 0.85rem; }
.ra-cta p { color: var(--text-on-dark); font-size: 1.12rem; max-width: 640px; margin: 0 auto 2rem; }
.ra-cta .ra-hero-actions { margin-bottom: 0; }

/* --- Privacy page: where data lives --- */
.ra-where {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.ra-card {
    position: relative;
    padding: 1.75rem 1.5rem 1.6rem;
    border-radius: var(--radius-lg);
    background: var(--white);
    border: 1px solid var(--content-hair);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 30px -18px rgba(30, 27, 75, 0.3);
}
.ra-card h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.ra-card p { font-size: 0.97rem; line-height: 1.65; color: var(--content-body); margin-bottom: 0; }
.ra-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1rem;
    border-radius: 0.8rem;
    background: rgba(124, 58, 237, 0.1);
    color: var(--violet-primary);
}
.ra-card__tag {
    position: absolute;
    top: 1.5rem;
    right: 1.4rem;
    padding: 0.15rem 0.6rem;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--content-tab-off);
    color: var(--text-muted);
}
.ra-card__tag--always { background: rgba(16, 185, 129, 0.12); color: #047857; }
.ra-card__tag--optional { background: rgba(14, 165, 233, 0.12); color: #0369a1; }

.ra-banner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1.25rem;
    padding: 1.4rem 1.6rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 100%);
    border: 1px solid rgba(16, 185, 129, 0.35);
}
.ra-banner__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: #10b981;
    color: #ffffff;
    flex-shrink: 0;
}
.ra-banner h3 { font-size: 1.15rem; margin-bottom: 0.25rem; color: #064e3b; }
.ra-banner p { margin: 0; color: #065f46; line-height: 1.6; }

/* --- Privacy page: protections grid --- */
.ra-protect {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.25rem;
}
.ra-protect li {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 1.3rem;
    border-radius: var(--radius-lg);
    background: var(--white);
    border: 1px solid var(--content-hair);
}
.ra-protect .ra-card__icon { width: 2.5rem; height: 2.5rem; margin-bottom: 0; border-radius: 0.7rem; }
.ra-protect h3 { font-size: 1.04rem; margin-bottom: 0.3rem; }
.ra-protect p { font-size: 0.95rem; line-height: 1.6; color: var(--content-body); margin: 0; }

/* --- Privacy page: menu figure + .json note --- */
.ra-split {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 3rem;
    align-items: center;
    margin-top: 3.5rem;
}
.ra-note {
    padding: 1.5rem 1.6rem;
    border-radius: var(--radius-lg);
    background: var(--white);
    border: 1px dashed rgba(124, 58, 237, 0.4);
}
.ra-note h3 { display: flex; align-items: center; gap: 0.6rem; font-size: 1.12rem; margin-bottom: 0.6rem; }
.ra-note h3 .ra-ico { color: var(--violet-primary); }
.ra-note p { color: var(--content-body); line-height: 1.65; margin-bottom: 0.75rem; }
.ra-note p:last-child { margin-bottom: 0; }
.ra-note code {
    padding: 0.1rem 0.35rem;
    border-radius: 0.3rem;
    background: var(--content-tab-off);
    font-size: 0.9em;
}

/* --- Privacy page: the federal-rules bubble --- */
.ra-bubble {
    max-width: 900px;
    margin: 0 auto;
    padding: 2.5rem 2.5rem 2rem;
    border-radius: 1.5rem;
    background:
        linear-gradient(var(--white), var(--white)) padding-box,
        linear-gradient(135deg, rgba(124, 58, 237, 0.55), rgba(52, 211, 153, 0.55)) border-box;
    border: 2px solid transparent;
    box-shadow: 0 24px 60px -30px rgba(30, 27, 75, 0.45);
}
.ra-bubble__head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.5rem; }
.ra-bubble__head h2 { font-size: 1.85rem; margin: 0; }
.ra-bubble__head .ra-card__icon { margin: 0; }
.ra-points { list-style: none; counter-reset: rapoint; }
.ra-points li {
    position: relative;
    padding: 0 0 1.1rem 2.75rem;
    color: var(--content-body);
    line-height: 1.7;
    counter-increment: rapoint;
}
.ra-points li::before {
    content: counter(rapoint);
    position: absolute;
    left: 0;
    top: 0.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--tint-lavender-start);
    color: var(--violet-primary);
    font-weight: 700;
    font-size: 0.9rem;
}
.ra-points li strong { color: var(--primary-navy); }
.ra-more {
    margin-top: 0.75rem;
    border-top: 1px solid var(--content-hair);
}
.ra-more summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1.1rem;
    padding: 0.55rem 1.1rem;
    border-radius: var(--radius-pill);
    background: var(--tint-lavender-base);
    border: 1px solid rgba(124, 58, 237, 0.25);
    color: var(--violet-primary);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.ra-more summary::-webkit-details-marker { display: none; }
.ra-more summary:hover { background: var(--tint-lavender-start); }
.ra-more summary:focus-visible { outline: 2px solid var(--violet-mid); outline-offset: 2px; }
.ra-more summary .ra-ico { width: 1rem; height: 1rem; transition: transform 0.2s ease; }
.ra-more[open] summary .ra-ico { transform: rotate(180deg); }
.ra-more .ra-more-label-open { display: none; }
.ra-more[open] .ra-more-label-open { display: inline; }
.ra-more[open] .ra-more-label-closed { display: none; }
.ra-more__body { padding-top: 1.5rem; }
.ra-more__body h3 { font-size: 1.08rem; margin: 1.4rem 0 0.4rem; }
.ra-more__body h3:first-child { margin-top: 0; }
.ra-more__body p { color: var(--content-body); line-height: 1.7; margin-bottom: 0.5rem; }
.ra-cite { font-size: 0.88rem; }
.ra-footnote,
.ra-feature__text > p.ra-footnote { margin: 1.25rem 0 0; font-size: 0.9rem; line-height: 1.55; color: var(--text-muted); }
.ra-cite a { color: var(--violet-primary); font-weight: 600; text-decoration: none; }
.ra-cite a:hover { text-decoration: underline; }
.ra-disclaimer {
    max-width: 900px;
    margin: 1.5rem auto 0;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* --- REDAssist overview page: showcase gallery --- */
.ra-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.ra-gallery .ra-shot figcaption { text-align: left; }
.ra-gallery .ra-shot figcaption strong { display: block; color: var(--primary-navy); font-size: 0.98rem; margin-bottom: 0.15rem; }
.ra-gallery .ra-shot__frame { aspect-ratio: 16 / 10; }
.ra-gallery .ra-shot__frame img { height: 100%; object-fit: cover; object-position: top left; }

/* --- Responsive --- */
@media (max-width: 1100px) {
    .ra-flow { grid-template-columns: repeat(3, 1fr); }
    .ra-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .ra-feature,
    .ra-feature--flip,
    .ra-feature--tall,
    .ra-feature--tall.ra-feature--flip { grid-template-columns: 1fr; gap: 2rem; }
    .ra-feature--flip .ra-feature__text,
    .ra-feature--flip .ra-feature__media { order: initial; }
    .ra-where { grid-template-columns: 1fr; }
    .ra-protect { grid-template-columns: 1fr; }
    .ra-split { grid-template-columns: 1fr; gap: 2rem; }
    .ra-gallery { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .ra-hero { padding: 4.5rem 0 3.5rem; }
    .ra-hero h1 { font-size: 2.3rem; }
    .ra-hero .hero-subtitle { font-size: 1.02rem; }
    .ra-section { padding: 3.5rem 0; }
    .ra-section-head h2,
    .ra-cta h2 { font-size: 1.75rem; }
    .ra-feature__text h2 { font-size: 1.65rem; }
    .ra-stack > * + * { margin-top: 3.5rem; padding-top: 3.5rem; }
    .ra-flow { grid-template-columns: repeat(2, 1fr); }
    .ra-steps { grid-template-columns: 1fr; }
    .ra-bubble { padding: 1.75rem 1.25rem 1.5rem; border-radius: 1.1rem; }
    .ra-bubble__head h2 { font-size: 1.4rem; }
    .ra-banner { flex-direction: column; align-items: flex-start; }
    .ra-toc .ra-toc-label { width: 100%; text-align: center; margin: 0 0 0.25rem; }
}
@media (max-width: 420px) {
    .ra-flow { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .btn-contact, .btn-contact__arrow, .ra-flow a, .ra-link .ra-ico { transition: none; }
    .btn-contact:hover, .ra-flow a:hover { transform: none; }
}

/* Dark mode (html.dark) keeps the page readable: cards follow --white */
html.dark .ra-banner { background: rgba(16, 185, 129, 0.08); }
html.dark .ra-banner h3, html.dark .ra-banner p { color: #a7f3d0; }
html.dark .ra-tip, html.dark .ra-more summary { background: rgba(124, 58, 237, 0.12); }
html.dark .ra-points li::before { background: rgba(124, 58, 237, 0.2); }

/* ═══════════════════════════════════════════════════════════════════════
   PART H: Home hero cards (index.html, .home-cards)
   Light frosted cards, as the hero has always had, with a little more
   presence: an icon chip, a crisper shadow and a lift on hover.
   REDAssist and FERPA & Data are featured with a colored edge, a soft
   glow and an arrow. No dark fills and no animation. Colors are set
   here, not from the theme variables, so the cards read the same when
   the site is in dark mode.
   ═══════════════════════════════════════════════════════════════════════ */
.home-cards .float-card {
    z-index: 2;
    text-decoration: none;
    color: #1e1b4b;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 26px rgba(15, 10, 50, 0.3), 0 2px 6px rgba(15, 10, 50, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: translate 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.home-cards .float-card .label {
    font-weight: 700;
    white-space: nowrap;
    user-select: none;
}
.home-cards .float-card .icon {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    background: #f1edff;
    font-size: 0.98rem;
    line-height: 1;
}
.home-cards .float-card:hover,
.home-cards .float-card:focus-visible {
    translate: 0 -3px;
    border-color: #c4b5fd;
    box-shadow: 0 16px 34px rgba(15, 10, 50, 0.36), 0 0 0 4px rgba(167, 139, 250, 0.3);
}
.home-cards .float-card:focus-visible {
    outline: 2px solid #f5f3ff;
    outline-offset: 3px;
}

/* Featured cards: a colored edge, a soft glow and an arrow */
.home-cards .float-card--featured {
    padding: 0.8rem 1.25rem;
    font-size: 1rem;
    border: 2px solid transparent;
}
.home-cards .float-card__arrow {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-left: -0.15rem;
    transition: translate 0.2s ease;
}
.home-cards .float-card--featured:hover .float-card__arrow,
.home-cards .float-card--featured:focus-visible .float-card__arrow {
    translate: 3px 0;
}
.home-cards .float-card--redassist {
    color: #5b21b6;
    background: linear-gradient(180deg, #ffffff 0%, #faf7ff 100%) padding-box,
                linear-gradient(135deg, #c4b5fd 0%, #7c3aed 55%, #34d399 100%) border-box;
    box-shadow: 0 10px 28px rgba(46, 16, 101, 0.42), 0 0 22px rgba(139, 92, 246, 0.4);
}
.home-cards .float-card--redassist .icon { background: #ede9fe; }
.home-cards .float-card--ferpa {
    color: #92400e;
    background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%) padding-box,
                linear-gradient(135deg, #fde68a 0%, #f59e0b 60%, #f97316 100%) border-box;
    box-shadow: 0 10px 28px rgba(46, 16, 101, 0.42), 0 0 22px rgba(245, 158, 11, 0.38);
}
.home-cards .float-card--ferpa .icon { background: #fef3c7; }
.home-cards .float-card--redassist:hover,
.home-cards .float-card--redassist:focus-visible {
    box-shadow: 0 16px 36px rgba(46, 16, 101, 0.48), 0 0 0 4px rgba(167, 139, 250, 0.35), 0 0 30px rgba(139, 92, 246, 0.5);
}
.home-cards .float-card--ferpa:hover,
.home-cards .float-card--ferpa:focus-visible {
    box-shadow: 0 16px 36px rgba(46, 16, 101, 0.48), 0 0 0 4px rgba(251, 191, 36, 0.35), 0 0 30px rgba(245, 158, 11, 0.45);
}

/* Phones: the four plain cards stay hidden (as before); the two featured
   cards sit in a row under the portrait so they are still seen. */
@media (max-width: 768px) {
    .home-cards {
        display: grid;
        grid-template-columns: repeat(2, auto);
        justify-content: center;
        align-items: center;
        gap: 1rem 0.75rem;
        height: auto;
        padding-bottom: 0.5rem;
    }
    .home-cards .hero-portrait-wrapper {
        grid-column: 1 / -1;
        justify-self: center;
        order: -1;
    }
    .home-cards .float-card--featured {
        display: inline-flex !important;
        position: static;
        justify-self: center;
        padding: 0.65rem 1rem;
        font-size: 0.92rem;
    }
    .home-cards {
        margin-bottom: 1.75rem;
    }
}
@media (max-width: 520px) {
    .home-cards {
        grid-template-columns: minmax(0, 15.5rem);
    }
    .home-cards .float-card--featured {
        justify-self: stretch;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-cards .float-card,
    .home-cards .float-card__arrow { transition: none; }
    .home-cards .float-card:hover,
    .home-cards .float-card:focus-visible,
    .home-cards .float-card--featured:hover .float-card__arrow { translate: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PART I: AASP 2026 session (home band and Meet Andrew card)
   The home band hides itself after November 6, 2026 (inline script in
   index.html); the Meet Andrew card reads correctly before and after.
   ═══════════════════════════════════════════════════════════════════════ */
.aasp-band {
    background: #ede9fe;
    padding: 2.25rem 0 0;
}
.aasp-band__card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    max-width: 980px;
    margin: 0 auto;
    padding: 1.1rem 1.4rem;
    background: #ffffff;
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px -12px rgba(76, 29, 149, 0.35);
    text-decoration: none;
    color: #0f172a;
    transition: translate 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.aasp-band__card:hover,
.aasp-band__card:focus-visible {
    translate: 0 -2px;
    border-color: rgba(124, 58, 237, 0.45);
    box-shadow: 0 16px 36px -12px rgba(76, 29, 149, 0.45);
}
.aasp-band__card:focus-visible {
    outline: 2px solid #7c3aed;
    outline-offset: 3px;
}
.aasp-band__date {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, #7c3aed, #4338ca);
    color: #ffffff;
    line-height: 1;
    box-shadow: 0 6px 16px rgba(76, 29, 149, 0.35);
}
.aasp-band__month {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.9;
}
.aasp-band__day {
    font-size: 1.6rem;
    font-weight: 800;
    margin-top: 0.15rem;
}
.aasp-band__text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1;
}
.aasp-band__eyebrow {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6d28d9;
}
.aasp-band__title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    color: #0f172a;
}
.aasp-band__meta {
    font-size: 0.85rem;
    color: #475569;
}
.aasp-band__cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: #6d28d9;
    white-space: nowrap;
}
.aasp-band__cta svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: translate 0.2s ease;
}
.aasp-band__card:hover .aasp-band__cta svg,
.aasp-band__card:focus-visible .aasp-band__cta svg {
    translate: 3px 0;
}
@media (max-width: 768px) {
    .aasp-band {
        padding-top: 1.5rem;
    }
    .aasp-band__card {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .aasp-band__text {
        flex-basis: calc(100% - 5.25rem);
    }
    .aasp-band__cta {
        margin-left: 5.25rem;
    }
}

/* Meet Andrew: the session card above the 2023 poster */
.session-card {
    max-width: 900px;
    margin: 0 auto 3rem;
    padding: 1.5rem 1.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #1e293b;
    border-left: 3px solid #8b5cf6;
    border-radius: var(--radius-lg);
}
.session-card h3 {
    color: #f1f5f9;
    margin: 0.75rem 0 0.5rem;
    font-size: 1.25rem;
    line-height: 1.35;
}
.session-card .citation {
    color: var(--text-on-dark);
}
.session-card .description {
    color: #cbd5e1;
}
.session-card a {
    color: #c4b5fd;
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .aasp-band__card,
    .aasp-band__cta svg {
        transition: none;
    }
    .aasp-band__card:hover,
    .aasp-band__card:focus-visible,
    .aasp-band__card:hover .aasp-band__cta svg {
        translate: none;
    }
}