/* ============================================================
   Gemini Enterprise Training Portal — Premium Styles
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* ── Purdue brand: Boilermaker Black + Old Gold ── */
  --primary: #0C0B08;         /* Boilermaker Black — main interactive/brand */
  --primary-dark: #000000;
  --primary-light: #F4EDDA;   /* Dust — light gold tint for active/hover surfaces */
  --primary-glow: rgba(142, 111, 62, 0.30);   /* gold glow */

  /* Purdue gold family */
  /* Boilermaker Gold, per Purdue Brand Studio 2026-08-27: rgb(207,185,145).
     Was #CEB888 -- the older print-era value. Sampling purdue.edu's own CTA
     buttons returns #D0B991, i.e. this value plus screenshot compression, so
     this is what the university actually ships on the web today. */
  --gold: #CFB991;            /* Boilermaker Gold */
  --gold-hover: #BCA67C;      /* Gold darkened ~8% for button hover only */
  --black: #000000;           /* Purdue's button black is pure, not --neutral-950 */
  --gold-rush: #C9A227;       /* Rush — brighter gold accent */
  --gold-aged: #8E6F3E;       /* Aged — deep gold, readable on white */
  --gold-field: #DDB945;
  --gold-dust: #EBD99F;

  --gemini-blue: #4285F4;
  --gemini-red: #C41E3A;
  --gemini-yellow: #FBBC05;
  --gemini-green: #34A853;
  /* Google's Gemini purple. Added when the learning path grew to six steps and the
     four colours above no longer gave each marker a distinct one. */
  --gemini-purple: #A142F4;

  --neutral-950: #0A0A14;
  --neutral-900: #16162A;
  --neutral-800: #252540;
  --neutral-700: #3D3D56;
  --neutral-600: #555770;
  --neutral-500: #71738A;
  --neutral-400: #9395A8;
  --neutral-300: #B5B7C5;
  --neutral-200: #DDDEE6;
  --neutral-100: #F0F1F5;
  --neutral-50: #F8F9FC;
  --white: #FFFFFF;

  --gradient-hero: linear-gradient(160deg, #FBF7EE 0%, #F4ECD6 38%, #FAF6EC 68%, #FFFDF8 100%);
  --gradient-primary: linear-gradient(135deg, #0C0B08 0%, #3A2F1C 50%, #8E6F3E 100%);
  --gradient-gemini: linear-gradient(90deg, #0C0B08, #8E6F3E, #CEB888, #C9A227, #0C0B08);
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.6) 100%);

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.04);
  --shadow-xl: 0 24px 64px rgba(0,0,0,0.12);
  --shadow-glow-green: 0 0 40px rgba(142,111,62,0.22);
  --shadow-glow-blue: 0 0 40px rgba(206,184,136,0.20);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  /* Purdue's CTA buttons are effectively square-cornered; 2px keeps the corner
     from looking like a rendering artefact without reading as a rounded pill. */
  --radius-btn: 2px;

  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px;
  --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Condensed display face for CTA labels, approximating Purdue's United Sans.
     Falls back through the body stack, so a blocked font request degrades to
     the old look rather than to a serif. */
  --font-display: 'Big Shoulders Display', 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem;
  --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 2rem; --text-4xl: 2.75rem; --text-5xl: 3.5rem;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms;

  --z-header: 100; --z-modal-bg: 200; --z-modal: 300;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font); font-size: var(--text-base);
  line-height: 1.6; color: var(--neutral-900);
  background: var(--neutral-50); overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { max-width: 100%; height: auto; display: block; }
.container { max-width: 1440px; margin: 0 auto; padding: 0 var(--space-2xl); }

/* ── Gemini Line ───────────────────────────────────────────── */
.gemini-line {
  height: 3px;
  background: var(--gradient-gemini);
  background-size: 300% 100%;
  animation: shimmer 6s ease-in-out infinite;
}
@keyframes shimmer { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ── Page Sections ─────────────────────────────────────────── */
.page-section { display: none; }
.page-section.active { display: block; animation: pageFadeIn 0.4s var(--ease-out); }
@keyframes pageFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ══════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════ */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
/* Header spans the full window width so the logos start near the left edge
   (rest of the site stays centered inside .container). */
.site-header .container { max-width: none; padding: 0 var(--space-lg); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between; height: 72px;
  gap: var(--space-xl);
}
.header-logos {
  display: flex; align-items: center; gap: var(--space-sm);
  flex-shrink: 0;            /* logos keep their size; nav flexes instead */
}
.header-logos > a { display: inline-flex; align-items: center; }
.header-logo { height: 40px; width: auto; object-fit: contain; transition: opacity var(--dur-base) var(--ease); }
.header-logo:hover { opacity: 0.75; }
.header-logo--purdue { height: 32px; }
.header-logo--gemini { height: 36px; }
.header-logo--zcs { height: 36px; border-radius: 4px; }
.logo-divider { width: 1px; height: 30px; background: var(--neutral-200); border-radius: 1px; flex-shrink: 0; }

.header-powered-by {
  display: flex;
  align-items: center;
  gap: 6px;
}
.powered-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--neutral-400);
  line-height: 1;
  white-space: nowrap;
}

.header-nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
/* Square corners and Boilermaker Gold on the active tab, so the nav speaks the
   same language as the CTA buttons. Purdue's own nav is plain black text, but
   this hub needs a visible "you are here", so the gold chip carries it. */
.nav-link {
  padding: 8px 14px; font-size: var(--text-sm); font-weight: 600; white-space: nowrap;
  color: var(--neutral-600); border-radius: var(--radius-btn);
  transition: all var(--dur-base) var(--ease);
}
.nav-link:hover { color: var(--black); background: var(--neutral-100); }
.nav-link.active { color: var(--black); background: var(--gold); font-weight: 700; }

.mobile-menu-btn { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: var(--radius-sm); }
.mobile-menu-btn svg { width: 22px; height: 22px; stroke: var(--neutral-600); }

/* ══════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════ */
/* Purdue Brand Studio CTA buttons (brand-studio/blocks/cta-banner). Three
   variants in the university's own order of preference -- gold, black, white --
   sharing one shape: near-square corners, uppercase, heavy, letter-spaced.
   No gradients: branding asked for flat colour throughout.

   .btn-primary = Boilermaker Gold on black text
   .btn-black   = black on white text
   .btn-ghost   = white on black text  (kept under its old name so the five
                  existing call sites in index.html do not have to move) */
.btn-primary,
.btn-black,
.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 30px;
  font-family: var(--font-display);
  font-size: var(--text-base); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
  border-radius: var(--radius-btn);
  border: 2px solid transparent;
  transition: background-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}

.btn-primary { color: var(--black); background: var(--gold); border-color: var(--gold); }
.btn-primary:hover { background: var(--gold-hover); border-color: var(--gold-hover); }

.btn-black { color: var(--white); background: var(--black); border-color: var(--black); }
.btn-black:hover { background: var(--neutral-800); border-color: var(--neutral-800); }

.btn-ghost { color: var(--black); background: var(--white); border-color: var(--black); }
.btn-ghost:hover { color: var(--white); background: var(--black); }

.btn-primary:focus-visible,
.btn-black:focus-visible,
.btn-ghost:focus-visible { outline: 3px solid var(--gold-aged); outline-offset: 2px; }

.btn-lg { padding: 16px 36px; font-size: var(--text-base); }

/* ══════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════ */
.hero {
  background: var(--gradient-hero);
  padding: 100px 0 80px;
  position: relative; overflow: hidden;
  min-height: 520px;
  display: flex; align-items: center;
}
.hero-banner-bg {
  position: absolute; inset: 0; z-index: 0;
  background: url('assets/learning-path-banner.png') center center / cover no-repeat;
  opacity: 0.35;
  pointer-events: none;
}
.hero-banner-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(248,249,252,0.7) 0%, rgba(248,249,252,0.4) 40%, rgba(248,249,252,0.75) 100%);
  pointer-events: none;
}

/* Animated floating orbs */
.hero-orb {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(60px); opacity: 0.5;
}
.hero-orb--1 {
  width: 420px; height: 420px; top: -120px; right: -80px;
  background: radial-gradient(circle, rgba(66,133,244,0.3), transparent 70%);
  animation: floatOrb1 12s ease-in-out infinite;
}
.hero-orb--2 {
  width: 350px; height: 350px; bottom: -100px; left: -60px;
  background: radial-gradient(circle, rgba(142,111,62,0.25), transparent 70%);
  animation: floatOrb2 15s ease-in-out infinite;
}
.hero-orb--3 {
  width: 250px; height: 250px; top: 40%; left: 55%;
  background: radial-gradient(circle, rgba(251,188,5,0.2), transparent 70%);
  animation: floatOrb3 10s ease-in-out infinite;
}
@keyframes floatOrb1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(-30px, 40px) scale(1.05); }
  66% { transform: translate(20px, -20px) scale(0.95); }
}
@keyframes floatOrb2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(40px, -30px) scale(1.08); }
}
@keyframes floatOrb3 {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-25px, 25px) scale(1.1); }
}

/* Subtle dot grid */
.hero-grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black, transparent);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black, transparent);
}

.hero-content {
  position: relative; z-index: 2;
  text-align: center; max-width: 900px; margin: 0 auto;
}

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 18px;
  background: rgba(255,255,255,0.85); backdrop-filter: blur(12px);
  border: 1px solid rgba(142,111,62,0.28); border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 700; color: var(--gold-aged);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: var(--space-xl);
  box-shadow: var(--shadow-sm);
  animation: fadeDown 0.6s var(--ease-out);
}
.hero-badge-dot {
  width: 7px; height: 7px; background: var(--primary);
  border-radius: 50%; animation: pulse 2s ease-in-out infinite;
}

.hero h1 {
  margin-bottom: var(--space-lg);
  animation: fadeUp 0.7s var(--ease-out) 0.1s both;
}
/* Set in the condensed display face, uppercase, echoing the headline treatment
   on purdue.edu ("EVERY GIANT LEAP STARTS WITH ONE SMALL STEP"). Tracking is
   positive rather than negative here: Big Shoulders is already condensed, so
   the tight -0.04em that suited Inter would close the counters up. */
.hero-line-1 {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-3xl); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.01em;
  color: var(--neutral-900);
  margin-bottom: 2px;
}
.hero-line-2 {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-5xl); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.05;
  color: var(--neutral-950);
}
/* Flat Aged Gold, mandated by Purdue branding 2026-08-27. The gradient, the
   background-clip:text trick and the shimmer animation are all deliberately
   gone -- "the gradient effects should be removed" applies to the motion too,
   not just the colour ramp. */
.highlight {
  color: var(--gold-aged);
}

.hero-subtitle {
  font-size: var(--text-lg); color: var(--neutral-500);
  line-height: 1.8; margin-bottom: var(--space-xl);
  animation: fadeUp 0.7s var(--ease-out) 0.2s both;
}

.hero-actions {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-md); flex-wrap: wrap;
  animation: fadeUp 0.7s var(--ease-out) 0.3s both;
}

/* ══════════════════════════════════════════════════════════════
   STATS STRIP
   ══════════════════════════════════════════════════════════════ */
.stats-strip {
  background: var(--white);
  border-top: 1px solid var(--neutral-100);
  border-bottom: 1px solid var(--neutral-100);
  padding: var(--space-lg) 0;
}
.stats-inner {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-2xl);
}
.stat-item { text-align: center; }
.stat-number {
  display: block;
  font-size: var(--text-2xl); font-weight: 800; color: var(--neutral-900);
  letter-spacing: -0.02em; line-height: 1.2;
}
.stat-label {
  font-size: var(--text-xs); font-weight: 600; color: var(--neutral-400);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.stat-divider {
  width: 1px; height: 36px; background: var(--neutral-200);
}

/* ══════════════════════════════════════════════════════════════
   LEARNING PATH
   ══════════════════════════════════════════════════════════════ */
/* ── Learning Path Banner ─────────────────────────────────── */
.lp-banner {
  position: relative;
  width: 100%;
  max-height: 220px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-2xl);
  background: linear-gradient(135deg, #f0f4ff 0%, #e8ecf8 50%, #f0f4ff 100%);
  box-shadow: 0 4px 24px rgba(59, 130, 246, 0.08);
}
.lp-banner-img {
  width: 100%;
  height: 100%;
  max-height: 220px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.learning-path-section { padding: var(--space-4xl) 0 var(--space-3xl); }

.section-header { text-align: center; margin-bottom: var(--space-3xl); }
.section-label {
  display: inline-block; font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--primary);
  background: var(--primary-light); padding: 5px 16px;
  border-radius: var(--radius-full); margin-bottom: var(--space-md);
}
.section-title {
  font-size: var(--text-3xl); font-weight: 800; color: var(--neutral-950);
  letter-spacing: -0.03em; margin-bottom: var(--space-sm);
}
.section-subtitle { font-size: var(--text-lg); color: var(--neutral-500); }

/* Timeline */
.learning-path {
  position: relative; max-width: 920px; margin: 0 auto;
  padding-left: 56px;
}
.learning-path::before {
  content: ''; position: absolute; left: 26px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(to bottom,
    var(--gemini-blue) 0%,
    var(--gemini-red) 25%,
    var(--gemini-yellow) 50%,
    var(--primary) 75%,
    var(--gemini-green) 100%
  );
  border-radius: 2px;
}

.path-step {
  position: relative; margin-bottom: var(--space-xl);
  animation: fadeUp 0.5s var(--ease-out) both;
}
.path-step:last-child { margin-bottom: 0; }

.path-step-marker {
  position: absolute; left: -56px; top: 4px;
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xl); font-weight: 900; color: var(--white);
  z-index: 2;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease);
}
.path-step:hover .path-step-marker {
  transform: scale(1.15);
  box-shadow: 0 8px 28px rgba(0,0,0,0.2);
}

.path-step-card {
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
  position: relative; overflow: hidden;
  transition: all var(--dur-base) var(--ease);
}
/* Colored left accent */
.path-step-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; border-radius: 0 4px 4px 0;
  transition: width var(--dur-base) var(--ease);
}
.path-step:hover .path-step-card {
  border-color: var(--neutral-300);
  box-shadow: var(--shadow-lg);
  transform: translateX(4px);
}
.path-step:hover .path-step-card::before { width: 5px; }

.path-step-header { margin-bottom: 6px; }
.path-step-subtitle {
  font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 2px;
}
.path-step-title { font-size: var(--text-xl); font-weight: 700; color: var(--neutral-900); }
.path-step-desc {
  font-size: var(--text-sm); color: var(--neutral-500);
  line-height: 1.7; margin-bottom: var(--space-md);
}

.path-resources { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.path-resource-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px;
  background: var(--neutral-50); border: 1px solid var(--neutral-200);
  border-radius: var(--radius-btn);
  font-size: var(--text-sm); font-weight: 600; color: var(--neutral-700);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease);
}
.path-resource-chip svg { width: 14px; height: 14px; flex-shrink: 0; }
.path-resource-chip:hover {
  background: var(--gold); border-color: var(--gold);
  color: var(--black);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.path-resource-chip .chip-type {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.5;
}

/* stagger */
.path-step:nth-child(1) { animation-delay: 0.05s; }
.path-step:nth-child(2) { animation-delay: 0.12s; }
.path-step:nth-child(3) { animation-delay: 0.19s; }
.path-step:nth-child(4) { animation-delay: 0.26s; }
.path-step:nth-child(5) { animation-delay: 0.33s; }

/* CTA at bottom */
.path-cta { margin-top: var(--space-3xl); text-align: center; }
.path-cta-inner {
  background: var(--gradient-hero); border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xl); padding: var(--space-2xl);
  max-width: 640px; margin: 0 auto;
  box-shadow: var(--shadow-md);
}
.path-cta-emoji { font-size: 3rem; margin-bottom: var(--space-md); }
.path-cta h3 { font-size: var(--text-xl); font-weight: 800; color: var(--neutral-900); margin-bottom: var(--space-xs); }
.path-cta p { font-size: var(--text-sm); color: var(--neutral-500); margin-bottom: var(--space-lg); line-height: 1.7; }

/* ══════════════════════════════════════════════════════════════
   LIBRARY HEADER
   ══════════════════════════════════════════════════════════════ */
.library-header {
  background: var(--gradient-hero); padding: var(--space-xl) 0 var(--space-2xl);
  border-bottom: 1px solid var(--neutral-200);
}
.back-btn {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  font-size: var(--text-sm); font-weight: 500; color: var(--neutral-500);
  margin-bottom: var(--space-lg); padding: 6px 14px; border-radius: var(--radius-sm);
  transition: all var(--dur-base) var(--ease);
}
.back-btn:hover { color: var(--primary); background: var(--primary-light); }
.library-title {
  font-size: var(--text-3xl); font-weight: 800; color: var(--neutral-950);
  letter-spacing: -0.02em; margin-bottom: var(--space-sm);
}
.library-subtitle { font-size: var(--text-base); color: var(--neutral-500); margin-bottom: var(--space-lg); }

/* Search */
.search-container { max-width: 600px; position: relative; }
.search-bar {
  width: 100%; padding: 16px 20px 16px 52px;
  font-family: var(--font); font-size: var(--text-base); color: var(--neutral-900);
  background: var(--white); border: 2px solid var(--neutral-200);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  transition: all var(--dur-base) var(--ease); outline: none;
}
.search-bar::placeholder { color: var(--neutral-400); }
.search-bar:focus { border-color: var(--primary); box-shadow: var(--shadow-lg), 0 0 0 4px var(--primary-glow); }
.search-icon {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--neutral-400); pointer-events: none;
}
.search-bar:focus ~ .search-icon { color: var(--primary); }
.search-clear {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--neutral-400);
  opacity: 0; pointer-events: none; transition: all var(--dur-base) var(--ease);
}
.search-clear.visible { opacity: 1; pointer-events: auto; }
.search-clear:hover { background: var(--neutral-100); color: var(--neutral-700); }

/* ── Tabs ──────────────────────────────────────────────────── */
.category-tabs {
  display: flex; gap: var(--space-sm); padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--neutral-200); overflow-x: auto; scrollbar-width: none;
}
.category-tabs::-webkit-scrollbar { display: none; }
.category-tab {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  padding: 10px 20px; font-size: var(--text-sm); font-weight: 500;
  color: var(--neutral-500); border: 1.5px solid transparent;
  border-radius: var(--radius-full); white-space: nowrap;
  transition: all var(--dur-base) var(--ease);
}
.category-tab:hover { color: var(--neutral-900); background: var(--neutral-100); }
.category-tab.active {
  color: var(--primary-dark); background: var(--primary-light);
  border-color: rgba(142,111,62,0.2); font-weight: 600;
}
.tab-count {
  min-width: 22px; height: 22px; padding: 0 6px;
  font-size: var(--text-xs); font-weight: 700;
  background: var(--neutral-200); color: var(--neutral-600);
  border-radius: var(--radius-full); display: inline-flex;
  align-items: center; justify-content: center;
  transition: all var(--dur-base) var(--ease);
}
.category-tab.active .tab-count { background: var(--primary); color: var(--white); }

.results-info { padding: var(--space-lg) 0; }
.results-count { font-size: var(--text-sm); color: var(--neutral-500); font-weight: 500; }
.results-count strong { color: var(--neutral-900); font-weight: 700; }

/* ══════════════════════════════════════════════════════════════
   MATERIAL CARDS
   ══════════════════════════════════════════════════════════════ */
.materials-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg); padding-bottom: var(--space-4xl);
}
.material-card {
  background: var(--white); border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg); padding: var(--space-lg);
  display: flex; flex-direction: column; gap: var(--space-md);
  position: relative; overflow: hidden;
  transition: all var(--dur-base) var(--ease);
  animation: fadeUp 0.4s var(--ease-out) both;
}
.material-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gradient-gemini); background-size: 300% 100%;
  opacity: 0; transition: opacity var(--dur-base) var(--ease);
}
.material-card:hover {
  border-color: rgba(142,111,62,0.2);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(142,111,62,0.05);
  transform: translateY(-6px);
}
.material-card:hover::before { opacity: 1; animation: shimmer 3s ease-in-out infinite; }
.material-card:nth-child(1) { animation-delay: 0.03s; }
.material-card:nth-child(2) { animation-delay: 0.06s; }
.material-card:nth-child(3) { animation-delay: 0.09s; }
.material-card:nth-child(4) { animation-delay: 0.12s; }
.material-card:nth-child(5) { animation-delay: 0.15s; }
.material-card:nth-child(6) { animation-delay: 0.18s; }

.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); }
.card-type-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; font-size: var(--text-xs); font-weight: 700;
  border-radius: var(--radius-full); text-transform: uppercase;
  letter-spacing: 0.04em; white-space: nowrap; flex-shrink: 0;
}
.card-type-badge svg { width: 13px; height: 13px; }
.badge-pdf { background: #FEE2E2; color: #DC2626; }
.badge-doc { background: #DBEAFE; color: #2563EB; }
.badge-slides { background: #FEF3C7; color: #D97706; }
.badge-video { background: #F3E8FF; color: #7C3AED; }
.badge-link { background: #D1FAE5; color: #059669; }
.badge-demo { background: #E0E7FF; color: #4338CA; }

.card-external-btn {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); color: var(--neutral-400);
  transition: all var(--dur-fast) var(--ease);
}
.card-external-btn:hover { background: var(--neutral-100); color: var(--primary); }
.card-external-btn svg { width: 15px; height: 15px; }

.card-title {
  font-size: var(--text-base); font-weight: 700; color: var(--neutral-900); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-description {
  font-size: var(--text-sm); color: var(--neutral-500); line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; flex-grow: 1;
}
.card-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--space-md); border-top: 1px solid var(--neutral-100); margin-top: auto;
}
.card-category-tag { font-size: var(--text-xs); font-weight: 500; color: var(--neutral-400); }
.card-view-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 18px; font-size: var(--text-sm); font-weight: 600;
  color: var(--white); background: var(--primary); border-radius: var(--radius-sm);
  box-shadow: 0 2px 8px var(--primary-glow);
  transition: all var(--dur-base) var(--ease);
}
.card-view-btn:hover {
  background: var(--primary-dark);
  box-shadow: 0 4px 16px var(--primary-glow);
  transform: translateY(-1px);
}
.card-view-btn svg { width: 14px; height: 14px; }

.empty-state { grid-column: 1/-1; text-align: center; padding: var(--space-4xl) var(--space-lg); }
.empty-state-icon { width: 64px; height: 64px; margin: 0 auto var(--space-lg); color: var(--neutral-300); }
.empty-state h3 { font-size: var(--text-xl); font-weight: 700; color: var(--neutral-700); margin-bottom: var(--space-sm); }
.empty-state p { font-size: var(--text-sm); color: var(--neutral-400); }

/* ══════════════════════════════════════════════════════════════
   DOCUMENT VIEWER
   ══════════════════════════════════════════════════════════════ */
.viewer-backdrop {
  position: fixed; inset: 0; background: rgba(10,10,20,0.55);
  backdrop-filter: blur(10px); z-index: var(--z-modal-bg);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-slow) var(--ease);
}
.viewer-backdrop.open { opacity: 1; pointer-events: auto; }

.viewer-modal {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 85%; max-width: 1100px; background: var(--white);
  z-index: var(--z-modal); box-shadow: -24px 0 80px rgba(0,0,0,0.18);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease);
  display: flex; flex-direction: column;
}
.viewer-modal.open { transform: translateX(0); }

.viewer-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--neutral-200); background: var(--neutral-50); flex-shrink: 0;
}
.viewer-title-group { display: flex; align-items: center; gap: var(--space-md); min-width: 0; flex: 1; }
.viewer-doc-title {
  font-size: var(--text-sm); font-weight: 600; color: var(--neutral-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.viewer-actions { display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; }
.viewer-action-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; font-size: var(--text-sm); font-weight: 500;
  color: var(--neutral-600); background: var(--white);
  border: 1px solid var(--neutral-200); border-radius: var(--radius-sm);
  transition: all var(--dur-fast) var(--ease);
}
.viewer-action-btn:hover { border-color: var(--neutral-300); background: var(--neutral-100); }
.viewer-action-btn svg { width: 15px; height: 15px; }
.viewer-close-btn {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); color: var(--neutral-500);
  transition: all var(--dur-fast) var(--ease);
}
.viewer-close-btn:hover { background: var(--error); color: var(--white); }
.viewer-close-btn svg { width: 18px; height: 18px; }

.viewer-content { flex: 1; overflow: hidden; position: relative; background: var(--neutral-100); }
.viewer-content iframe, .viewer-content video { width: 100%; height: 100%; border: none; }
.viewer-content video { background: #000; object-fit: contain; }
.viewer-loading {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--space-md); background: var(--neutral-50);
  transition: opacity 0.3s var(--ease);
}
.viewer-spinner {
  width: 36px; height: 36px; border: 3px solid var(--neutral-200);
  border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite;
}
.viewer-loading p { font-size: var(--text-sm); color: var(--neutral-400); }

/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */
.site-footer { background: var(--neutral-950); padding: var(--space-xl) 0; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.footer-brand { display: flex; align-items: center; gap: var(--space-md); }
.footer-logo { height: 40px; width: auto; opacity: 0.9; border-radius: var(--radius-sm); }
.footer-powered { font-size: var(--text-sm); color: var(--neutral-500); }
.footer-powered strong { color: var(--neutral-300); font-weight: 600; }
.footer-copyright { font-size: var(--text-xs); color: var(--neutral-600); }

/* ══════════════════════════════════════════════════════════════
   CONTENT PAGES (Prompts & FAQs)
   ══════════════════════════════════════════════════════════════ */
.content-page { padding: var(--space-2xl) 0 var(--space-4xl); }
.content-block { margin-bottom: var(--space-3xl); }
.section-header--left { text-align: left; margin-bottom: var(--space-xl); }

/* ── Comparison Table ──────────────────────────────────────── */
.comparison-table-wrap {
  overflow-x: auto; border-radius: var(--radius-lg);
  border: 1px solid var(--neutral-200); background: var(--white);
  box-shadow: var(--shadow-sm);
}
.comparison-table {
  width: 100%; border-collapse: collapse;
  font-size: var(--text-sm);
}
.comparison-table th {
  padding: 14px 20px; text-align: left;
  font-weight: 700; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--neutral-500); background: var(--neutral-50);
  border-bottom: 2px solid var(--neutral-200);
}
.comparison-table td {
  padding: 16px 20px; border-bottom: 1px solid var(--neutral-100);
  color: var(--neutral-700); line-height: 1.6; vertical-align: top;
}
.comparison-table tr:last-child td { border-bottom: none; }
.comparison-table tr:hover td { background: var(--neutral-50); }
.comparison-table td:last-child { font-style: italic; color: var(--neutral-500); font-size: var(--text-xs); }
.tool-badge {
  display: inline-block; padding: 4px 10px;
  border-radius: var(--radius-sm); font-weight: 700;
  font-size: var(--text-xs); white-space: nowrap;
}
.tool-badge--blue { background: #DBEAFE; color: #2563EB; }
.tool-badge--purple { background: #F3E8FF; color: #7C3AED; }
.tool-badge--green { background: #D1FAE5; color: #059669; }
.tool-badge--orange { background: #FEF3C7; color: #D97706; }
.tool-badge--red { background: #FEE2E2; color: #DC2626; }
.tool-badge--yellow { background: #FFF7D4; color: #B45309; }

/* ── Best Practices Grid ───────────────────────────────────── */
.practices-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.practice-card {
  background: var(--white); border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg); padding: var(--space-xl);
  transition: all var(--dur-base) var(--ease);
}
.practice-card:hover {
  border-color: var(--neutral-300); box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.practice-icon { font-size: 2rem; margin-bottom: var(--space-md); }
.practice-card h3 {
  font-size: var(--text-base); font-weight: 700;
  color: var(--neutral-900); margin-bottom: var(--space-sm);
}
.practice-card p {
  font-size: var(--text-sm); color: var(--neutral-500);
  line-height: 1.7;
}

/* ── Context Banner ────────────────────────────────────────── */
.context-banner {
  display: flex; align-items: flex-start; gap: var(--space-md);
  background: linear-gradient(135deg, #EEF7ED 0%, #E3F0FF 100%);
  border: 1px solid rgba(142,111,62, 0.2);
  border-radius: var(--radius-lg); padding: var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-2xl);
  position: relative; overflow: hidden;
}
.context-banner::before {
  content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%;
  background: var(--gradient-primary); border-radius: 4px 0 0 4px;
}
.context-banner-icon {
  flex-shrink: 0; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-light); border-radius: var(--radius-sm);
  color: var(--primary);
}
.context-banner-text { flex: 1; }
.context-banner-title {
  font-size: var(--text-base); font-weight: 700; color: var(--neutral-900);
  margin-bottom: 4px;
}
.context-banner-desc {
  font-size: var(--text-sm); color: var(--neutral-600); line-height: 1.6;
}
.context-banner-desc strong { color: var(--primary-dark); }

/* ── Department Filter Bar ────────────────────────────────── */
.dept-filter-bar {
  display: flex; flex-wrap: wrap; gap: var(--space-sm);
  padding: var(--space-md) 0; margin-bottom: var(--space-lg);
  position: sticky; top: 64px; z-index: 10;
  background: var(--white);
  border-bottom: 1px solid var(--neutral-100);
  padding-bottom: var(--space-md);
}
.dept-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; font-size: var(--text-sm); font-weight: 600;
  color: var(--neutral-600); background: var(--neutral-50);
  border: 1px solid var(--neutral-200); border-radius: var(--radius-btn);
  cursor: pointer; white-space: nowrap;
  transition: all var(--dur-base) var(--ease);
}
.dept-tab:hover {
  color: var(--black); background: var(--neutral-100);
  border-color: var(--neutral-300);
}
.dept-tab.active {
  color: var(--black); background: var(--gold);
  border-color: var(--gold);
}
.dept-tab .dept-tab-count {
  font-size: 10px; font-weight: 700;
  padding: 1px 7px; border-radius: var(--radius-full);
  background: rgba(0,0,0,0.08); color: inherit;
  min-width: 20px; text-align: center;
}
.dept-tab.active .dept-tab-count {
  background: rgba(255,255,255,0.25);
}
.dept-tab-icon {
  width: 14px; height: 14px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.dept-tab-icon svg {
  width: 14px; height: 14px;
}

/* ── Department Badge on Prompt Cards ─────────────────────── */
.prompt-dept-badge {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 3px 10px;
  border-radius: var(--radius-full); white-space: nowrap;
}
.prompt-dept-badge--medical { background: #EDE9FE; color: #6D28D9; }
.prompt-dept-badge--hr { background: #FEF3C7; color: #92400E; }
.prompt-dept-badge--sales { background: #DBEAFE; color: #1E40AF; }
.prompt-dept-badge--legal { background: #FEE2E2; color: #991B1B; }
.prompt-dept-badge--finance { background: #D1FAE5; color: #065F46; }
.prompt-dept-badge--marketing { background: #FCE7F3; color: #9D174D; }
.prompt-dept-badge--general { background: var(--neutral-100); color: var(--neutral-600); }

/* ── Prompt section empty state ───────────────────────────── */
.prompt-grid-empty {
  grid-column: 1 / -1; text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  color: var(--neutral-400); font-size: var(--text-sm);
}

/* ── Prompt Cards ──────────────────────────────────────────── */
.prompt-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}
.prompt-card {
  background: var(--white); border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg); padding: var(--space-lg);
  position: relative; overflow: hidden;
  transition: all var(--dur-base) var(--ease);
}
.prompt-card:hover {
  border-color: var(--neutral-300); box-shadow: var(--shadow-md);
}
.prompt-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-md); gap: var(--space-sm);
}
.prompt-card-title {
  font-size: var(--text-base); font-weight: 700; color: var(--neutral-900);
}
.prompt-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 3px 10px;
  background: var(--primary-light); color: var(--primary-dark);
  border-radius: var(--radius-full); white-space: nowrap;
}
.prompt-text {
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 12px; line-height: 1.7;
  color: var(--neutral-600); background: var(--neutral-50);
  border: 1px solid var(--neutral-100); border-radius: var(--radius-sm);
  padding: var(--space-md); margin-bottom: var(--space-md);
  white-space: pre-wrap; word-wrap: break-word;
  max-height: 180px; overflow-y: auto;
}
.prompt-copy-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; font-size: var(--text-sm); font-weight: 600;
  color: var(--neutral-600); background: var(--neutral-100);
  border-radius: var(--radius-sm);
  transition: all var(--dur-base) var(--ease);
}
.prompt-copy-btn svg { width: 14px; height: 14px; }
.prompt-copy-btn:hover { background: var(--primary-light); color: var(--primary-dark); }
.prompt-copy-btn.copied { background: #D1FAE5; color: #059669; }

/* ── FAQ Accordion ─────────────────────────────────────────── */
.faq-list { max-width: 100%; }
.faq-item {
  border: 1px solid var(--neutral-200); border-radius: var(--radius-lg);
  margin-bottom: var(--space-md); background: var(--white);
  overflow: hidden;
  transition: all var(--dur-base) var(--ease);
}
.faq-item:hover { border-color: var(--neutral-300); }
.faq-item.open { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-glow); }
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md); padding: var(--space-lg) var(--space-xl);
  font-size: var(--text-base); font-weight: 600; color: var(--neutral-900);
  text-align: left; cursor: pointer;
  transition: all var(--dur-base) var(--ease);
}
.faq-question:hover { color: var(--primary-dark); }
.faq-chevron {
  width: 20px; height: 20px; flex-shrink: 0;
  color: var(--neutral-400);
  transition: transform var(--dur-base) var(--ease);
}
.faq-item.open .faq-chevron { transform: rotate(180deg); color: var(--primary); }
.faq-answer {
  max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease);
}
.faq-item.open .faq-answer { max-height: 400px; }
.faq-answer p {
  padding: 0 var(--space-xl) var(--space-xl);
  font-size: var(--text-sm); color: var(--neutral-600);
  line-height: 1.8;
}

/* ── Quotas Section ───────────────────────────────────────── */
.quotas-section { margin-top: var(--space-3xl); max-width: 100%; }

.quota-callout {
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-xl);
  margin-bottom: var(--space-xl);
  display: flex; align-items: flex-start; gap: var(--space-lg);
  transition: all var(--dur-base) var(--ease);
}
.quota-callout:hover { border-color: var(--neutral-300); box-shadow: var(--shadow-sm); }

.quota-callout-icon {
  width: 40px; height: 40px; min-width: 40px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
}
.quota-callout-icon svg { width: 20px; height: 20px; }
.quota-callout-icon--blue { background: rgba(66,133,244,0.1); color: var(--gemini-blue); }
.quota-callout-icon--green { background: rgba(52,168,83,0.1); color: var(--gemini-green); }

.quota-callout-body h3 {
  font-size: var(--text-base); font-weight: 700;
  color: var(--neutral-900); margin-bottom: var(--space-xs);
}
.quota-callout-body p {
  font-size: var(--text-sm); color: var(--neutral-500);
  line-height: 1.75; margin: 0;
}
.quota-callout-body code {
  display: inline-block; margin-top: var(--space-sm);
  background: var(--neutral-50); border: 1px solid var(--neutral-200);
  padding: 4px 12px; border-radius: var(--radius-sm);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: var(--text-xs); color: var(--neutral-700);
}

.quota-group { margin-bottom: var(--space-xl); }
.quota-group-header {
  display: flex; align-items: center; gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.quota-group-icon {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
}
.quota-group-icon svg { width: 14px; height: 14px; }
.quota-group-icon--purple { background: rgba(124,58,237,0.1); color: #7C3AED; }
.quota-group-icon--blue { background: rgba(66,133,244,0.1); color: var(--gemini-blue); }
.quota-group-title {
  font-size: var(--text-sm); font-weight: 700;
  color: var(--neutral-900); letter-spacing: -0.01em;
}

.quota-table-wrap {
  border-radius: var(--radius-md);
  overflow: hidden; border: 1px solid var(--neutral-200);
  background: var(--white);
}
.quota-table-wrap .comparison-table { margin: 0; }
.quota-table-wrap .comparison-table td:last-child { font-style: normal; font-size: var(--text-sm); }

.quota-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--radius-full);
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; background: rgba(66,133,244,0.08);
  color: var(--gemini-blue);
}
.quota-badge svg { width: 11px; height: 11px; }

/* ══════════════════════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════════════════════ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.8); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .materials-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-line-2 { font-size: var(--text-4xl); }
  .viewer-modal { width: 92%; }
  .practices-grid { grid-template-columns: repeat(2, 1fr); }
  /* Collapse the full nav to the hamburger before the three logos crowd it */
  .header-nav { display: none; }
  .header-nav.open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: 72px; left: 0; right: 0;
    background: var(--white); padding: var(--space-md);
    border-bottom: 1px solid var(--neutral-200); box-shadow: var(--shadow-lg);
  }
  .mobile-menu-btn { display: flex; }
}
@media (max-width: 768px) {
  .hero { padding: 72px 0 56px; min-height: auto; }
  .hero-line-1 { font-size: var(--text-lg); }
  .hero-line-2 { font-size: var(--text-3xl); }
  .materials-grid { grid-template-columns: 1fr; }
  .viewer-modal { width: 100%; }
  .footer-inner { flex-direction: column; text-align: center; }
  .stats-inner { gap: var(--space-lg); }
  .learning-path { padding-left: 44px; }
  .learning-path::before { left: 19px; }
  .path-step-marker { width: 40px; height: 40px; left: -44px; font-size: var(--text-base); }
  .path-step-card { padding: var(--space-md); }
  .practices-grid { grid-template-columns: 1fr; }
  .prompt-grid { grid-template-columns: 1fr; }
  .dept-filter-bar { gap: 6px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: var(--space-md); }
  .dept-tab { font-size: 12px; padding: 6px 14px; }
  .context-banner { flex-direction: column; padding: var(--space-md); }
  .lp-banner { max-height: 140px; margin-bottom: var(--space-lg); }
  .lp-banner-img { max-height: 140px; }
  .header-powered-by { display: none; }
}
@media (max-width: 480px) {
  .hero-line-1 { font-size: var(--text-base); }
  .hero-line-2 { font-size: var(--text-2xl); }
  .hero-subtitle { font-size: var(--text-base); }
  .header-logos { gap: var(--space-sm); }
  .header-logo--purdue { height: 26px; }
  .header-logo--gemini { height: 30px; }
  .header-logo--zcs { height: 28px; }
  .hero-actions { flex-direction: column; }
  .btn-primary, .btn-lg, .btn-ghost { width: 100%; justify-content: center; }
  .stats-inner { flex-wrap: wrap; gap: var(--space-md); }
  .stat-divider { display: none; }
}

body.viewer-open { overflow: hidden; }
body.gs-open { overflow: hidden; }

/* ══════════════════════════════════════════════════════════════
   GLOBAL SEARCH MODAL
   ══════════════════════════════════════════════════════════════ */

/* Header trigger button */
.global-search-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 12px;
  font-size: var(--text-sm); font-weight: 500;
  color: var(--neutral-500);
  background: var(--neutral-50);
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius-btn);   /* squared to match the nav and buttons */
  cursor: pointer;
  transition: all var(--dur-base) var(--ease);
  margin-left: var(--space-sm);
}
.global-search-trigger:hover {
  color: var(--neutral-700);
  border-color: var(--neutral-300);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.global-search-trigger svg { width: 16px; height: 16px; flex-shrink: 0; }
.search-trigger-label { font-size: var(--text-sm); }
.search-kbd {
  font-family: var(--font);
  font-size: 10px; font-weight: 600;
  padding: 2px 6px;
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: 4px;
  color: var(--neutral-400);
  line-height: 1.3;
}

/* Hub Sign-In Container (Google-rendered button) */
.hub-signin-container {
  display: inline-flex; align-items: center;
  margin-left: var(--space-xs);
}

/* Hub Signed-In User Pill */
.hub-user-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 3px 10px 3px 3px;
  background: var(--neutral-50);
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius-full);
  margin-left: var(--space-xs);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--neutral-700);
}
.hub-user-avatar { border-radius: 50%; object-fit: cover; }
/* Name over campus. The column keeps the pill's height driven by the two lines
   rather than by the avatar, so it stays a pill rather than growing lopsided. */
.hub-user-identity {
  display: inline-flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  line-height: 1.15; min-width: 0;
}
.hub-user-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-signout-btn {
  border: none; background: none; cursor: pointer;
  color: var(--neutral-400); font-size: 14px; line-height: 1;
  padding: 0 2px; transition: color var(--dur-base) var(--ease);
}
.hub-signout-btn:hover { color: var(--danger); }
/* Backdrop */
.global-search-backdrop {
  position: fixed; inset: 0;
  background: rgba(10, 10, 20, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 400;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease);
}
.global-search-backdrop.open { opacity: 1; pointer-events: auto; }

/* Modal */
.global-search-modal {
  position: fixed;
  top: max(10vh, 80px); left: 50%;
  transform: translateX(-50%) scale(0.96);
  width: 90%; max-width: 680px;
  max-height: 70vh;
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: 0 32px 100px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.05);
  z-index: 401;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
  overflow: hidden;
}
.global-search-modal.open {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) scale(1);
}

/* Input area */
.gs-input-wrap {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--neutral-100);
}
.gs-search-icon { color: var(--neutral-400); flex-shrink: 0; }
.gs-input {
  flex: 1;
  border: none; outline: none;
  font-family: var(--font); font-size: var(--text-lg);
  font-weight: 500;
  color: var(--neutral-900);
  background: transparent;
  padding: var(--space-sm) 0;
}
.gs-input::placeholder { color: var(--neutral-400); font-weight: 400; }
.gs-esc-badge {
  font-family: var(--font);
  font-size: 10px; font-weight: 700;
  padding: 3px 8px;
  background: var(--neutral-100);
  border: 1px solid var(--neutral-200);
  border-radius: 5px;
  color: var(--neutral-400);
  flex-shrink: 0; line-height: 1.3;
}

/* Results container */
.gs-results-container {
  flex: 1; overflow-y: auto;
  padding: var(--space-sm);
  scrollbar-width: thin;
  scrollbar-color: var(--neutral-200) transparent;
}
.gs-results-container::-webkit-scrollbar { width: 6px; }
.gs-results-container::-webkit-scrollbar-track { background: transparent; }
.gs-results-container::-webkit-scrollbar-thumb { background: var(--neutral-200); border-radius: 3px; }

/* Empty state */
.gs-empty-state {
  text-align: center;
  padding: var(--space-3xl) var(--space-lg);
}
.gs-empty-icon {
  width: 64px; height: 64px;
  margin: 0 auto var(--space-lg);
  color: var(--neutral-300);
  background: var(--neutral-50);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.gs-empty-title {
  font-size: var(--text-lg); font-weight: 700;
  color: var(--neutral-700);
  margin-bottom: var(--space-xs);
}
.gs-empty-hint {
  font-size: var(--text-sm); color: var(--neutral-400);
  line-height: 1.6;
}

/* Suggestion chips */
.gs-suggestions {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  max-width: 480px; margin-left: auto; margin-right: auto;
}
.gs-suggestion-chip {
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  font-size: var(--text-xs); font-weight: 600;
  color: var(--neutral-600);
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.gs-suggestion-chip:hover {
  color: var(--primary-dark);
  background: var(--primary-light);
  border-color: rgba(142,111,62, 0.3);
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
}

/* No results */
.gs-no-results {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
}
.gs-no-results-icon {
  width: 56px; height: 56px;
  margin: 0 auto var(--space-md);
  color: var(--neutral-300);
}
.gs-no-results-title {
  font-size: var(--text-base); font-weight: 700;
  color: var(--neutral-700);
  margin-bottom: var(--space-xs);
}
.gs-no-results-hint {
  font-size: var(--text-sm); color: var(--neutral-400);
}

/* Section group */
.gs-section-group { margin-bottom: var(--space-xs); }
.gs-section-label {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--neutral-400);
}
.gs-section-count {
  font-weight: 600;
  color: var(--neutral-300);
}

/* Result items */
.gs-result-item {
  display: flex; align-items: flex-start; gap: var(--space-md);
  padding: var(--space-md) var(--space-md);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  position: relative;
}
.gs-result-item:hover,
.gs-result-item.gs-active {
  background: var(--neutral-50);
}
.gs-result-item.gs-active {
  background: var(--primary-light);
}

.gs-result-icon {
  width: 36px; height: 36px; min-width: 36px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.gs-result-icon svg { width: 16px; height: 16px; }
.gs-result-icon--resource { background: #DBEAFE; color: #2563EB; }
.gs-result-icon--prompt { background: #F3E8FF; color: #7C3AED; }
.gs-result-icon--faq { background: #FEF3C7; color: #D97706; }
.gs-result-icon--learning { background: #D1FAE5; color: #059669; }
.gs-result-icon--page { background: #E0E7FF; color: #4338CA; }

.gs-result-body { flex: 1; min-width: 0; }
.gs-result-title {
  font-size: var(--text-sm); font-weight: 600;
  color: var(--neutral-900);
  line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}
.gs-result-title mark {
  background: rgba(142,111,62, 0.15);
  color: var(--primary-dark);
  border-radius: 2px;
  padding: 0 1px;
}
.gs-result-desc {
  font-size: var(--text-xs); color: var(--neutral-500);
  line-height: 1.5; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}
.gs-result-desc mark {
  background: rgba(142,111,62, 0.1);
  color: var(--primary-dark);
  border-radius: 2px;
  padding: 0 1px;
}
.gs-result-meta {
  display: flex; align-items: center; gap: var(--space-sm);
  margin-top: 4px;
}
.gs-result-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 8px; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.gs-badge--resources { background: #DBEAFE; color: #2563EB; }
.gs-badge--prompts { background: #F3E8FF; color: #7C3AED; }
.gs-badge--faqs { background: #FEF3C7; color: #D97706; }
.gs-badge--learning { background: #D1FAE5; color: #059669; }
.gs-badge--page { background: #E0E7FF; color: #4338CA; }

.gs-result-arrow {
  width: 20px; height: 20px;
  color: var(--neutral-300);
  flex-shrink: 0; align-self: center;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.gs-result-item:hover .gs-result-arrow,
.gs-result-item.gs-active .gs-result-arrow { opacity: 1; }

/* Footer */
.gs-footer {
  border-top: 1px solid var(--neutral-100);
  padding: var(--space-sm) var(--space-lg);
  background: var(--neutral-50);
}
.gs-footer-hints {
  display: flex; align-items: center; gap: var(--space-lg);
  font-size: 11px; color: var(--neutral-400); font-weight: 500;
}
.gs-footer-hints kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px;
  padding: 0 4px; margin-right: 3px;
  font-family: var(--font);
  font-size: 10px; font-weight: 700;
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: 4px;
  color: var(--neutral-500);
}

/* Responsive */
@media (max-width: 768px) {
  .global-search-trigger .search-trigger-label { display: none; }
  .global-search-trigger .search-kbd { display: none; }
  .global-search-trigger { padding: 7px 10px; margin-left: 0; }
  .global-search-modal {
    top: 0; left: 0; right: 0; bottom: 0;
    transform: none; width: 100%; max-width: 100%;
    max-height: 100vh; border-radius: 0;
  }
  .global-search-modal.open { transform: none; }
  .gs-footer-hints { display: none; }
}

/* ==============================================================
   EXPERT SESSIONS -- Calendar & Booking
   ============================================================== */

/* -- Timezone Selector Bar ----------------------------------- */
.tz-selector-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-md) var(--space-xl);
  background: var(--gradient-glass); backdrop-filter: blur(16px);
  border: 1px solid rgba(0,0,0,0.06); border-radius: var(--radius-lg);
  margin-bottom: var(--space-xl); flex-wrap: wrap; gap: var(--space-md);
  box-shadow: var(--shadow-sm);
}
.tz-selector-left {
  display: flex; align-items: center; gap: var(--space-sm);
}
.tz-selector-icon {
  color: var(--primary); flex-shrink: 0;
}
.tz-selector-label {
  font-size: var(--text-sm); color: var(--neutral-600); font-weight: 500;
  white-space: nowrap;
}
.tz-display-select {
  padding: 8px 36px 8px 14px; border-radius: var(--radius-md);
  border: 1.5px solid var(--neutral-200); background: var(--white);
  font-size: var(--text-sm); font-weight: 600; color: var(--neutral-900);
  cursor: pointer; transition: all var(--dur-base) var(--ease);
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  min-width: 220px;
}
.tz-display-select:hover {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow);
}
.tz-display-select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}
.tz-selector-detected {
  font-size: var(--text-xs); color: var(--neutral-400);
  font-style: italic; white-space: nowrap;
}

/* Legacy tz-dot colors for booking modal previews */
.tz-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.tz-dot--local { background: var(--primary); box-shadow: 0 0 8px var(--primary-glow); }
.tz-dot--cst { background: var(--gemini-blue); box-shadow: 0 0 8px rgba(66,133,244,0.3); }
.tz-dot--bst { background: var(--gemini-red); box-shadow: 0 0 8px rgba(234,67,53,0.3); }
.tz-dot--cet { background: var(--gemini-yellow); box-shadow: 0 0 8px rgba(251,188,4,0.3); }
.tz-dot--jst { background: var(--gemini-green); box-shadow: 0 0 8px rgba(52,168,83,0.3); }

/* -- Week Navigator ------------------------------------------- */
.cal-week-nav {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-lg); margin-bottom: var(--space-xl);
}
.cal-week-title {
  font-size: var(--text-xl); font-weight: 700;
  color: var(--neutral-900); min-width: 280px; text-align: center;
}
.cal-nav-btn {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full); border: 1.5px solid var(--neutral-200);
  background: var(--white); color: var(--neutral-600);
  transition: all var(--dur-base) var(--ease); box-shadow: var(--shadow-xs);
}
.cal-nav-btn:hover {
  border-color: var(--primary); color: var(--primary);
  box-shadow: var(--shadow-md); transform: scale(1.05);
}

/* -- Calendar Grid -------------------------------------------- */
.cal-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md); margin-bottom: var(--space-xl);
}
.cal-day-col { display: flex; flex-direction: column; gap: var(--space-sm); }
.cal-day-header {
  text-align: center; padding: var(--space-md) var(--space-sm);
  background: var(--neutral-100); border-radius: var(--radius-md);
  border: 1.5px solid var(--neutral-200);
  transition: all var(--dur-base) var(--ease);
}
.cal-day--today {
  background: var(--primary-light) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 16px var(--primary-glow);
}
.cal-day-name {
  display: block; font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--neutral-500);
}
.cal-day--today .cal-day-name { color: var(--primary-dark); }
.cal-day-num {
  display: block; font-size: var(--text-sm); font-weight: 700;
  color: var(--neutral-900); margin-top: 2px;
}

/* -- Slot Base ------------------------------------------------ */
.cal-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-md) var(--space-sm); min-height: 90px;
  border-radius: var(--radius-md); border: 1.5px solid var(--neutral-200);
  background: var(--white); text-align: center; width: 100%;
  font-family: var(--font); cursor: default;
  transition: all var(--dur-base) var(--ease);
}
.cal-slot-time {
  font-size: var(--text-sm); font-weight: 700;
  color: var(--neutral-900); line-height: 1.3;
}
.cal-slot-tz-row {
  display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap;
  justify-content: center;
}
.cal-slot-tz {
  font-size: 10px; font-weight: 600; padding: 2px 6px;
  border-radius: var(--radius-full); line-height: 1.4;
}
.cal-slot-tz--cst {
  background: rgba(66,133,244,0.1); color: var(--gemini-blue);
}
.cal-slot-tz--bst {
  background: rgba(234,67,53,0.1); color: var(--gemini-red);
}
.cal-slot-tz-label {
  font-size: 10px; font-weight: 600; color: var(--primary);
  margin-top: 2px; letter-spacing: 0.03em;
}
.cal-slot-label {
  font-size: var(--text-xs); font-weight: 500; color: var(--neutral-400);
  margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em;
}
.cal-slot-status {
  font-size: 10px; font-weight: 700; margin-top: 4px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.cal-slot-booker {
  font-size: 10px; color: var(--neutral-500); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%;
}

/* -- Available Slot ------------------------------------------- */
.cal-slot--available {
  cursor: pointer;
  border-color: rgba(142,111,62,0.25);
  background: linear-gradient(135deg, rgba(232,245,227,0.5) 0%, var(--white) 100%);
}
.cal-slot--available:hover {
  border-color: var(--primary); background: var(--primary-light);
  box-shadow: 0 4px 20px var(--primary-glow); transform: translateY(-2px);
}
.cal-slot--available .cal-slot-label { color: var(--primary); }

/* -- Pending Slot --------------------------------------------- */
.cal-slot--pending {
  border-color: rgba(251,188,5,0.4);
  background: linear-gradient(135deg, rgba(251,188,5,0.08) 0%, rgba(255,248,235,0.6) 100%);
}
.cal-slot--pending .cal-slot-status { color: #B8860B; }
.cal-slot--pending .cal-slot-time { color: var(--neutral-600); }

/* -- Confirmed Slot ------------------------------------------- */
.cal-slot--confirmed {
  border-color: rgba(52,168,83,0.4);
  background: linear-gradient(135deg, rgba(52,168,83,0.08) 0%, rgba(232,245,227,0.6) 100%);
}
.cal-slot--confirmed .cal-slot-status { color: var(--gemini-green); }
.cal-slot--confirmed .cal-slot-time { color: var(--neutral-600); }

/* -- Past Slot ------------------------------------------------ */
.cal-slot--past {
  border-color: var(--neutral-100); background: var(--neutral-50);
  opacity: 0.5;
}
.cal-slot--past .cal-slot-time { color: var(--neutral-400); }
.cal-slot--past .cal-slot-status { color: var(--neutral-400); }

/* -- Blocked Slot --------------------------------------------- */
.cal-slot--blocked {
  border-color: rgba(234,67,53,0.25);
  background: repeating-linear-gradient(
    -45deg, rgba(234,67,53,0.04), rgba(234,67,53,0.04) 4px,
    transparent 4px, transparent 8px
  );
  opacity: 0.6;
}
.cal-slot--blocked .cal-slot-time { color: var(--neutral-500); }
.cal-slot--blocked .cal-slot-status { color: var(--gemini-red); }

/* -- Legend ---------------------------------------------------- */
.cal-legend {
  display: flex; align-items: center; gap: var(--space-xl);
  justify-content: center; margin-bottom: var(--space-3xl);
  flex-wrap: wrap;
}
.cal-legend-item {
  display: flex; align-items: center; gap: var(--space-sm);
  font-size: var(--text-sm); color: var(--neutral-600); font-weight: 500;
}
.cal-legend-swatch {
  width: 14px; height: 14px; border-radius: 4px;
  border: 1.5px solid transparent;
}
.cal-legend--available {
  background: var(--primary-light); border-color: rgba(142,111,62,0.4);
}
.cal-legend--pending {
  background: rgba(251,188,5,0.15); border-color: rgba(251,188,5,0.5);
}
.cal-legend--confirmed {
  background: rgba(52,168,83,0.15); border-color: rgba(52,168,83,0.5);
}
.cal-legend--past {
  background: var(--neutral-100); border-color: var(--neutral-200);
}
.cal-legend--blocked {
  background: rgba(234,67,53,0.1); border-color: rgba(234,67,53,0.4);
}

/* -- How It Works Steps --------------------------------------- */
.support-steps-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg); margin-top: var(--space-lg);
}
.support-step-card {
  background: var(--gradient-glass); backdrop-filter: blur(12px);
  border: 1px solid rgba(0,0,0,0.06); border-radius: var(--radius-lg);
  padding: var(--space-xl); text-align: center;
  box-shadow: var(--shadow-sm);
  transition: all var(--dur-base) var(--ease);
}
.support-step-card:hover {
  box-shadow: var(--shadow-md); transform: translateY(-3px);
}
.support-step-number {
  width: 44px; height: 44px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-lg); font-weight: 800; color: var(--white);
  margin: 0 auto var(--space-md);
  box-shadow: var(--shadow-sm);
}
.support-step-card h3 {
  font-size: var(--text-base); font-weight: 700;
  color: var(--neutral-900); margin-bottom: var(--space-xs);
}
.support-step-card p {
  font-size: var(--text-sm); color: var(--neutral-500); line-height: 1.5;
}

/* ==============================================================
   BOOKING MODAL
   ============================================================== */
.booking-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal-bg);
  background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease);
}
.booking-backdrop.open { opacity: 1; pointer-events: auto; }

.booking-modal {
  position: fixed; z-index: var(--z-modal);
  top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95);
  width: min(580px, 92vw); max-height: 90vh;
  background: var(--white); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl); overflow-y: auto;
  opacity: 0; pointer-events: none;
  transition: all var(--dur-slow) var(--ease-spring);
}
.booking-modal.open {
  opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1);
}

.booking-modal-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: var(--space-xl) var(--space-xl) var(--space-md);
  border-bottom: 1px solid var(--neutral-100);
}
.booking-modal-title {
  font-size: var(--text-xl); font-weight: 800; color: var(--neutral-900);
}
.booking-modal-slot {
  font-size: var(--text-sm); color: var(--primary); font-weight: 500;
  margin-top: 4px;
}
.booking-close-btn {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); color: var(--neutral-400);
  transition: all var(--dur-fast) var(--ease);
}
.booking-close-btn svg { width: 20px; height: 20px; }
.booking-close-btn:hover { background: var(--neutral-100); color: var(--neutral-700); }

/* -- Timezone Preview in Modal -------------------------------- */
.booking-tz-preview {
  background: var(--neutral-50); border: 1px solid var(--neutral-100);
  border-radius: var(--radius-md); padding: var(--space-md);
  margin-bottom: var(--space-lg);
}
.tz-preview-row {
  display: flex; align-items: center; gap: var(--space-sm);
  font-size: var(--text-sm); padding: 4px 0;
}
.tz-preview-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.tz-preview-label { color: var(--neutral-500); min-width: 140px; }
.tz-preview-row strong { color: var(--neutral-900); }

/* -- Form ----------------------------------------------------- */
.booking-form { padding: var(--space-xl); }
.booking-field { margin-bottom: var(--space-lg); }
.booking-field label {
  display: block; font-size: var(--text-sm); font-weight: 600;
  color: var(--neutral-700); margin-bottom: 6px;
}
.booking-field .req { color: var(--gemini-red); }
.booking-field input,
.booking-field select,
.booking-field textarea {
  width: 100%; padding: 12px 16px; font-size: var(--text-base);
  font-family: var(--font); color: var(--neutral-900);
  background: var(--neutral-50); border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius-md);
  transition: all var(--dur-base) var(--ease);
}
.booking-field input:focus,
.booking-field select:focus,
.booking-field textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
  background: var(--white);
}
.booking-field textarea { resize: vertical; min-height: 100px; }
.booking-field select { cursor: pointer; }

.booking-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md);
}

.booking-actions {
  display: flex; justify-content: flex-end; gap: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--neutral-100);
}

/* -- Toast ---------------------------------------------------- */
.booking-toast {
  position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(120px);
  z-index: 9999; display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-md) var(--space-xl);
  background: var(--gemini-green); color: var(--white);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  font-size: var(--text-sm); font-weight: 600;
  opacity: 0; pointer-events: none;
  transition: all 0.4s var(--ease-spring);
}
.booking-toast.show {
  opacity: 1; transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* -- Responsive: Calendar ------------------------------------- */
@media (max-width: 900px) {
  .cal-grid { grid-template-columns: repeat(3, 1fr); }
  .support-steps-grid { grid-template-columns: repeat(2, 1fr); }
  .booking-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cal-grid { grid-template-columns: 1fr 1fr; }
  .support-steps-grid { grid-template-columns: 1fr; }
  .tz-info-bar { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
  .tz-info-divider { display: none; }
  .cal-week-title { font-size: var(--text-lg); min-width: auto; }
  .cal-legend { gap: var(--space-md); }
  .booking-modal { width: 96vw; }
}
@media (max-width: 480px) {
  .cal-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   CLAIM YOUR LICENSE
   ══════════════════════════════════════════════════════════════ */

/* -- License CTA Button ---------------------------------------- */
/* Same Brand Studio gold CTA as .btn-primary -- this is the page's most
   prominent button, so it was the last place a gradient could survive. */
.btn-license {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 30px;
  font-family: var(--font-display);
  font-size: var(--text-base); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--black); background: var(--gold);
  border: 2px solid var(--gold); border-radius: var(--radius-btn);
  transition: background-color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease);
}
.btn-license:hover {
  background: var(--gold-hover); border-color: var(--gold-hover);
}
.btn-license:focus-visible { outline: 3px solid var(--gold-aged); outline-offset: 2px; }

/* -- License CTA Card (bottom of learning path) --------------- */
.license-cta-section {
  margin-top: var(--space-xl);
}
.license-cta-card {
  display: flex; align-items: center; gap: var(--space-xl);
  max-width: 920px; margin: 0 auto;
  padding: var(--space-xl) var(--space-2xl);
  background: linear-gradient(135deg, rgba(142,111,62,0.04) 0%, rgba(142,111,62,0.04) 100%);
  border: 1.5px solid rgba(142,111,62,0.15);
  border-radius: var(--radius-xl);
  transition: all var(--dur-base) var(--ease);
}
.license-cta-card:hover {
  border-color: rgba(142,111,62,0.3);
  box-shadow: 0 8px 32px rgba(142,111,62,0.08);
}
.license-cta-icon {
  flex-shrink: 0;
  width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #8E6F3E, #0C0B08);
  border-radius: var(--radius-lg);
  color: var(--white);
}
.license-cta-text { flex: 1; }
.license-cta-text h3 {
  font-size: var(--text-xl); font-weight: 700;
  color: var(--neutral-900); margin-bottom: 4px;
}
.license-cta-text p {
  font-size: var(--text-sm); color: var(--neutral-500);
  line-height: 1.6; margin: 0;
}

/* -- License Modal -------------------------------------------- */
.license-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal-bg);
  background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease);
}
.license-backdrop.open { opacity: 1; pointer-events: auto; }

.license-modal {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  z-index: var(--z-modal);
  width: 640px; max-width: 94vw;
  max-height: 90vh;
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow-y: auto;
  opacity: 0; pointer-events: none;
  transition: all var(--dur-slow) var(--ease-spring);
}
.license-modal.open {
  opacity: 1; pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.license-modal-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: var(--space-xl) var(--space-xl) var(--space-md);
  border-bottom: 1px solid var(--neutral-100);
  position: sticky; top: 0;
  background: var(--white);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  z-index: 1;
}
.license-modal-title {
  font-size: var(--text-xl); font-weight: 700;
  color: var(--neutral-900);
}
.license-modal-subtitle {
  font-size: var(--text-sm); color: var(--neutral-500);
  margin-top: 4px;
}

.license-form {
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
}

.license-section-label {
  font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--primary);
  padding: 5px 14px;
  background: var(--primary-light);
  border-radius: var(--radius-full);
  display: inline-block;
  margin-bottom: var(--space-md);
}

.license-ack-desc {
  font-size: var(--text-sm); color: var(--neutral-500);
  margin-bottom: var(--space-md); line-height: 1.5;
}

/* -- Acknowledgement Checklist -------------------------------- */
.license-ack-list {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: var(--space-lg);
}

.license-ack-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px;
  background: var(--neutral-50);
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  user-select: none;
}
.license-ack-item:hover {
  border-color: var(--neutral-300);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.license-ack-item:has(input:checked) {
  border-color: rgba(142,111,62,0.3);
  background: rgba(142,111,62,0.03);
}

.license-ack-item input[type="checkbox"] {
  position: absolute; opacity: 0; width: 0; height: 0;
}

.license-ack-check {
  flex-shrink: 0; width: 22px; height: 22px;
  border: 2px solid var(--neutral-300);
  border-radius: 6px; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-fast) var(--ease);
  position: relative;
}
.license-ack-check::after {
  content: '';
  width: 12px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transform: scale(0);
  transition: all var(--dur-fast) var(--ease-spring);
}

.license-ack-item input:checked + .license-ack-check {
  background: var(--primary);
  border-color: var(--primary);
}
.license-ack-item input:checked + .license-ack-check::after {
  opacity: 1;
  transform: scale(1);
}

.license-ack-content {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.license-ack-title {
  font-size: var(--text-sm); font-weight: 600;
  color: var(--neutral-900);
}
.license-ack-detail {
  font-size: var(--text-xs); color: var(--neutral-500);
  line-height: 1.5;
}

/* -- Form Footer ---------------------------------------------- */
.license-form-footer {
  border-top: 1px solid var(--neutral-100);
  padding-top: var(--space-lg);
  margin-top: var(--space-sm);
}
.license-disclaimer {
  font-size: 12px; color: var(--neutral-400);
  line-height: 1.5; margin-bottom: var(--space-md);
}

/* -- Google Sign-In Area -------------------------------------- */
.license-ms-btn-wrap {
  display: flex; justify-content: center;
  padding: var(--space-md) 0 var(--space-lg);
}

/* -- Signed-In User Card -------------------------------------- */
.license-user-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(142,111,62,0.04), rgba(142,111,62,0.03));
  border: 1.5px solid rgba(142,111,62,0.15);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  animation: fadeUp 0.3s var(--ease-out);
}
.license-user-avatar {
  width: 44px; height: 44px;
  border-radius: 50%; object-fit: cover;
  border: 2px solid var(--primary);
  flex-shrink: 0;
}
.license-user-info {
  display: flex; flex-direction: column; gap: 1px;
  flex: 1; min-width: 0;
}
.license-user-name {
  font-size: var(--text-sm); font-weight: 600;
  color: var(--neutral-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.license-user-email {
  font-size: var(--text-xs); color: var(--neutral-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.license-signout-btn {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--neutral-500);
  transition: all var(--dur-fast) var(--ease);
}
.license-signout-btn:hover {
  background: var(--neutral-100); color: var(--gemini-red);
}

/* -- Disabled Submit ------------------------------------------ */
#license-submit-btn:disabled {
  opacity: 0.45; cursor: not-allowed;
  pointer-events: none;
}

/* -- Responsive ----------------------------------------------- */
@media (max-width: 768px) {
  .license-cta-card {
    flex-direction: column; text-align: center;
    padding: var(--space-xl);
  }
  .license-modal { width: 96vw; }
}

/* ============================================================
   Admin Portal FAB (floating action button)
   ============================================================ */
.admin-fab {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--neutral-900);
  color: var(--white);
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  cursor: pointer;
  transition: all 0.25s var(--ease);
  z-index: 999;
  text-decoration: none;
}
.admin-fab:hover {
  background: var(--primary);
  box-shadow: 0 4px 24px rgba(66, 133, 244, 0.4);
  transform: translateY(-2px);
}
.admin-fab svg { pointer-events: none; }

/* ══════════════════════════════════════════════════════════════
   SIGN-IN BUTTON (Purdue)
   Entra ID sign-in wearing the site's own primary-action clothes:
   Boilermaker Gold fill, black label, the shared radius/shadow/motion
   tokens -- so the front door matches every other CTA on the page
   instead of announcing the identity vendor. The .ms-signin-* class
   names are kept: they are wired through auth-ms.js and app.js, and
   renaming them buys nothing.
   ══════════════════════════════════════════════════════════════ */
.ms-signin-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; padding: 0 34px;
  background: var(--black);
  border: 2px solid var(--gold);
  border-radius: var(--radius-btn);
  /* A thin gold ring floating just outside the button -- the framed, ticket-like
     treatment. outline rather than a second border so the geometry stays put;
     :focus-visible replaces it with the thicker accessibility ring. */
  outline: 1px solid var(--gold);
  outline-offset: 3px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-lg); font-weight: 800; line-height: 1;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--gold);
  transition: background-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease-out);
}
/* The classic Purdue inversion on approach: gold fills, the label goes black. */
.ms-signin-btn:hover:not(:disabled) {
  background: var(--gold);
  color: var(--black);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.ms-signin-btn:active:not(:disabled) { transform: translateY(0); box-shadow: var(--shadow-xs); }
.ms-signin-btn:focus-visible { outline: 2px solid var(--gold-aged); outline-offset: 3px; }
.ms-signin-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

.ms-signin-btn .ms-signin-label { white-space: nowrap; position: relative; }

/* Header variant -- compact so it reads as one of the nav controls next to the
   search trigger, not a form button dropped in the bar. Same black-and-gold. */
.ms-signin-btn--medium {
  height: 36px; padding: 0 18px; gap: 8px;
  font-size: var(--text-sm); font-weight: 800;
  box-shadow: var(--shadow-xs);
}
.ms-signin-btn--medium:hover:not(:disabled) { box-shadow: var(--shadow-sm); }

/* The modal's button is centered and full-width within the wrap, which reads as
   a deliberate primary action rather than a small control floating in whitespace. */
.license-ms-btn-wrap .ms-signin-btn { max-width: 340px; width: 100%; }

/* ══════════════════════════════════════════════════════════════
   LICENSE OUTCOME PANEL
   The claim flow ends in one of several states — licensed, waitlisted,
   campus request recorded, account needs attention — and some carry
   instructions or a follow-up question. This panel replaces the form
   in place, using the same modal padding rhythm as .license-form.
   ══════════════════════════════════════════════════════════════ */
.license-result {
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
  text-align: center;
}
.license-result[hidden] { display: none; }

.license-result-icon {
  width: 56px; height: 56px;
  margin: 0 auto var(--space-md);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  /* Tone colours are set per-state below; these are the neutral defaults. */
  background: var(--neutral-100);
  color: var(--neutral-600);
}
.license-result[data-tone="success"] .license-result-icon {
  background: rgba(52,168,83,0.12); color: var(--gemini-green);
}
.license-result[data-tone="info"] .license-result-icon {
  background: rgba(66,133,244,0.12); color: var(--gemini-blue);
}
.license-result[data-tone="warn"] .license-result-icon {
  background: rgba(201,162,39,0.14); color: var(--gold-aged);
}
.license-result[data-tone="error"] .license-result-icon {
  background: rgba(196,30,58,0.10); color: var(--gemini-red);
}

.license-result-title {
  font-size: 19px; font-weight: 700; color: var(--neutral-900);
  margin: 0 0 var(--space-xs);
}
.license-result-message {
  font-size: 14px; line-height: 1.6; color: var(--neutral-600);
  margin: 0 auto; max-width: 42ch;
}

.license-result-steps {
  margin: var(--space-lg) auto 0;
  padding-left: 20px;
  max-width: 42ch;
  text-align: left;
  font-size: 13.5px; line-height: 1.65; color: var(--neutral-700);
}
.license-result-steps[hidden] { display: none; }
.license-result-steps li { margin-bottom: 8px; }

.license-result-options {
  display: flex; flex-direction: column; gap: 10px;
  margin: var(--space-lg) auto 0;
  max-width: 34ch;
}
.license-result-options[hidden] { display: none; }
.license-result-option {
  width: 100%;
  justify-content: center;
  font-size: 14px;
}

.license-result-actions {
  margin-top: var(--space-lg);
  display: flex; justify-content: center;
}
.license-result-actions[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   SIGN-IN GATE
   Mandatory Microsoft sign-in over a blurred hub. The lock lives on <html> so
   the inline head script can set it before first paint -- deciding this later
   would show the whole page to a signed-out visitor for a beat first.
   ═══════════════════════════════════════════════════════════════════════════ */

.auth-gate { display: none; }

html.auth-locked, html.auth-locked body { overflow: hidden; }

/* Everything except the gate: blurred, dimmed, and inert. Sibling-of-gate rather
   than a named list so a new top-level section cannot be missed and left sharp.
   The conflict overlay is excluded too: it is a body-level layer that deliberately
   sits above the gate, and a filter here would blur it along with the page it covers
   -- z-index cannot rescue an element from its own ancestor's filter. */
html.auth-locked body > *:not(.auth-gate):not(.conflict-overlay) {
  filter: blur(13px) saturate(0.88) brightness(1.05);
  pointer-events: none;
  user-select: none;
  transition: filter var(--dur-slow, 420ms) var(--ease-out);
}
html.auth-locked body > *:not(.auth-gate):not(.conflict-overlay) * { pointer-events: none !important; }

/* Unlocking: the blur lifts and the gate fades up and away, so arriving on the
   hub reads as a door opening rather than a modal blinking out. */
html.auth-unlocking body > *:not(.auth-gate):not(.conflict-overlay) { filter: blur(0) saturate(1) brightness(1); }
html.auth-unlocking .auth-gate { animation: authGateExit 420ms var(--ease-out) forwards; }
html.auth-unlocking .auth-gate-card { animation: authCardExit 380ms var(--ease-out) forwards; }

@keyframes authGateExit { to { opacity: 0; visibility: hidden; } }
@keyframes authCardExit { to { opacity: 0; transform: translateY(-10px) scale(0.985); } }

html.auth-locked .auth-gate,
html.auth-unlocking .auth-gate {
  display: flex;
  position: fixed; inset: 0;
  z-index: 10000;                       /* above the search overlay at 9999 */
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--space-xl);
  padding: var(--space-xl) var(--space-lg);
  /* Translucent, not the solid hero gradient: the blurred hub has to stay visible
     behind the card, otherwise the gate reads as a separate login page rather than
     a lock over the site the user just asked for. */
  background: linear-gradient(160deg,
    rgba(251,247,238,0.72) 0%, rgba(244,236,214,0.78) 38%,
    rgba(250,246,236,0.74) 68%, rgba(255,253,248,0.70) 100%);
  overflow-y: auto;
  animation: authGateEnter 480ms var(--ease-out) both;
}

@keyframes authGateEnter { from { opacity: 0; } to { opacity: 1; } }

/* Two slow gold orbs, matched to the hero treatment so the gate looks like the
   front door of this site and not a generic auth page. */
.auth-gate-orb {
  position: absolute; border-radius: 50%;
  pointer-events: none; filter: blur(70px); opacity: 0.5;
}
.auth-gate-orb--1 {
  width: 460px; height: 460px; top: -140px; left: -120px;
  background: radial-gradient(circle, rgba(206,184,136,0.55), transparent 68%);
  animation: authOrbDrift 22s var(--ease) infinite alternate;
}
.auth-gate-orb--2 {
  width: 520px; height: 520px; bottom: -190px; right: -150px;
  background: radial-gradient(circle, rgba(201,162,39,0.34), transparent 70%);
  animation: authOrbDrift 27s var(--ease) infinite alternate-reverse;
}
@keyframes authOrbDrift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(38px,26px,0) scale(1.1); }
}

.auth-gate-card {
  position: relative;
  width: 100%; max-width: 468px;
  padding: var(--space-2xl) var(--space-xl) var(--space-xl);
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(206,184,136,0.42);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl), 0 0 60px rgba(142,111,62,0.13);
  text-align: center;
  overflow: hidden;
  animation: authCardEnter 620ms var(--ease-out) both 90ms;
}

@keyframes authCardEnter {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* The brand rule along the card's top edge. */
.auth-gate-rule {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gradient-gemini);
  background-size: 300% 100%;
  animation: authRuleShift 9s linear infinite;
}
@keyframes authRuleShift {
  from { background-position: 0% 50%; }
  to   { background-position: 300% 50%; }
}

.auth-gate-logos {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.auth-gate-logo { display: block; width: auto; object-fit: contain; }
.auth-gate-logo--purdue { height: 38px; }
.auth-gate-logo--gemini { height: 40px; }
.auth-gate-logo-divider {
  width: 1px; height: 30px;
  background: linear-gradient(180deg, transparent, rgba(142,111,62,0.4), transparent);
}

.auth-gate-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 14px;
  margin-bottom: var(--space-md);
  background: rgba(206,184,136,0.16);
  border: 1px solid rgba(206,184,136,0.4);
  border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.045em; text-transform: uppercase;
  color: var(--gold-aged);
}
.auth-gate-badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold-rush);
  box-shadow: 0 0 0 3px rgba(201,162,39,0.2);
  animation: authDotPulse 2.4s var(--ease) infinite;
}
@keyframes authDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.82); }
}

.auth-gate-title {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-3xl); font-weight: 800;
  letter-spacing: -0.022em; line-height: 1.15;
  color: var(--primary);
}
/* Flat Aged Gold -- see .highlight. Kept as its own rule because the sign-in
   screen renders the wordmark at a different size and weight to the header. */
.auth-gate-title-accent {
  color: var(--gold-aged);
}

.auth-gate-sub {
  margin: 0 auto var(--space-xl);
  max-width: 34ch;
  font-size: var(--text-sm); line-height: 1.62;
  color: var(--neutral-600);
}

.auth-gate-signin { display: flex; justify-content: center; }
/* The gate's button is the page's single call to action, so it gets full width
   and a gold ring the compact header variant does not carry. */
.auth-gate-signin .ms-signin-btn {
  width: 100%; height: 52px;
  border-color: rgba(142,111,62,0.34);
  box-shadow: var(--shadow-md), 0 0 0 4px rgba(206,184,136,0.13);
}
.auth-gate-signin .ms-signin-btn:hover:not(:disabled) {
  border-color: rgba(142,111,62,0.55);
  box-shadow: var(--shadow-lg), 0 0 0 5px rgba(206,184,136,0.2);
}

.auth-gate-progress {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px;
  font-size: var(--text-sm); font-weight: 500;
  color: var(--neutral-600);
}
.auth-gate-progress[hidden] { display: none; }
.auth-gate-spinner {
  width: 17px; height: 17px; flex-shrink: 0;
  border: 2px solid rgba(142,111,62,0.24);
  border-top-color: var(--gold-aged);
  border-radius: 50%;
  animation: authSpin 720ms linear infinite;
}
@keyframes authSpin { to { transform: rotate(360deg); } }

.auth-gate-error {
  margin: var(--space-md) 0 0;
  padding: 10px 14px;
  background: rgba(196,30,58,0.07);
  border: 1px solid rgba(196,30,58,0.24);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm); line-height: 1.5;
  color: #96182C;
  text-align: left;
}
.auth-gate-error[hidden] { display: none; }

.auth-gate-foot {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(142,111,62,0.15);
  font-size: var(--text-xs);
  color: var(--neutral-500);
}
.auth-gate-foot svg { flex-shrink: 0; opacity: 0.75; }

.auth-gate-legal {
  position: relative;
  margin: 0; text-align: center;
  font-size: var(--text-xs);
  color: var(--neutral-500);
}

@media (max-width: 520px) {
  html.auth-locked .auth-gate { padding: var(--space-lg) var(--space-md); }
  .auth-gate-card { padding: var(--space-xl) var(--space-lg) var(--space-lg); }
  .auth-gate-title { font-size: var(--text-2xl); }
  .auth-gate-logo--purdue { height: 32px; }
  .auth-gate-logo--gemini { height: 34px; }
}

/* Blur is the whole point of the gate, so it stays; only the motion is dropped. */
@media (prefers-reduced-motion: reduce) {
  .auth-gate-orb, .auth-gate-rule, .auth-gate-badge-dot { animation: none; }
  html.auth-locked .auth-gate, .auth-gate-card { animation-duration: 1ms; }
  html.auth-unlocking .auth-gate, html.auth-unlocking .auth-gate-card { animation-duration: 1ms; }
  .auth-gate-spinner { animation-duration: 1.6s; }
}

/* ── Campus group chips ──────────────────────────────────────────────────────
   The user's campus and classification, shown beside their identity so it is
   obvious which group governs their access before they claim anything. Hidden
   entirely when the token carries no group we recognise -- better to show
   nothing than a raw object ID or a guess. */

.hub-user-group {
  display: inline-flex; align-items: center;
  max-width: 120px;
  font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.03em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--gold-aged);
}
.hub-user-group[hidden] { display: none; }

.license-user-group {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 3px;
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--gold-aged);
}
.license-user-group[hidden] { display: none; }
.license-user-group::before {
  content: ''; flex-shrink: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold-rush);
}

/* Below this the nav is tight enough that the second line has to go. */
@media (max-width: 900px) {
  .hub-user-group { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONFLICTING ACCOUNT
   The screen a user sees when their Purdue address is already held by a personal
   Google account. Long-form by necessity -- it has to carry them through a
   multi-step change inside someone else's product -- so it is built as a reading
   surface: one column, generous measure, numbered sections, and the consequence
   of doing nothing stated plainly rather than buried.
   ═══════════════════════════════════════════════════════════════════════════ */

.conflict-overlay {
  position: fixed; inset: 0; z-index: 10001;   /* above the sign-in gate */
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--space-xl) var(--space-lg);
  background: rgba(12,11,8,0.5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  overflow-y: auto;
  animation: conflictFade 260ms var(--ease-out) both;
}
.conflict-overlay[hidden] { display: none; }
@keyframes conflictFade { from { opacity: 0; } to { opacity: 1; } }

.conflict-sheet {
  width: 100%; max-width: 660px;
  margin: auto;
  background: var(--white);
  border: 1px solid rgba(142,111,62,0.28);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  animation: conflictRise 340ms var(--ease-out) both 40ms;
}
@keyframes conflictRise {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Header ── */
.conflict-head {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--space-md);
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
  background: linear-gradient(135deg, rgba(251,247,238,0.9), rgba(244,236,214,0.75));
  border-bottom: 1px solid rgba(142,111,62,0.18);
}
.conflict-icon {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  background: rgba(201,162,39,0.16);
  border: 1px solid rgba(201,162,39,0.4);
  border-radius: var(--radius-md);
  color: var(--gold-aged);
}
.conflict-eyebrow {
  margin: 0 0 4px;
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold-aged);
}
.conflict-title {
  margin: 0; padding-right: var(--space-xl);
  font-size: var(--text-xl); font-weight: 800;
  line-height: 1.3; letter-spacing: -0.015em;
  color: var(--primary);
}
.conflict-close {
  position: absolute; top: var(--space-md); right: var(--space-md);
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: transparent; cursor: pointer;
  color: var(--neutral-500); font-size: 15px; line-height: 1;
  transition: all var(--dur-base) var(--ease);
}
.conflict-close:hover { background: rgba(12,11,8,0.07); color: var(--neutral-800); }

/* ── Body ── */
.conflict-body { padding: var(--space-xl); }

.conflict-lead {
  margin: 0 0 var(--space-md);
  font-size: var(--text-base); line-height: 1.65;
  color: var(--neutral-700);
}
.conflict-lead strong { color: var(--primary); font-weight: 700; }

.conflict-section {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--neutral-200);
}
.conflict-h3 {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 var(--space-md);
  font-size: var(--text-lg); font-weight: 700;
  letter-spacing: -0.01em; color: var(--primary);
}
.conflict-h3-num {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: var(--gradient-primary);
  border-radius: 50%;
  font-size: 0.75rem; font-weight: 700; color: var(--white);
}
.conflict-h3--plain { font-size: var(--text-base); color: var(--neutral-800); }

.conflict-steps {
  margin: 0 0 var(--space-md); padding-left: 1.35rem;
  display: flex; flex-direction: column; gap: 9px;
  font-size: var(--text-sm); line-height: 1.6;
  color: var(--neutral-700);
}
.conflict-steps::marker, .conflict-steps li::marker {
  color: var(--gold-aged); font-weight: 700;
}
.conflict-steps strong { color: var(--primary); font-weight: 650; }
.conflict-steps a { color: var(--gold-aged); font-weight: 600; }

.conflict-sub {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-sm); line-height: 1.62;
  color: var(--neutral-600);
}
.conflict-sub strong { color: var(--primary); }

.conflict-list {
  margin: 0; padding-left: 1.2rem;
  display: flex; flex-direction: column; gap: 6px;
  font-size: var(--text-sm); line-height: 1.6;
  color: var(--neutral-600);
}
.conflict-list li::marker { color: var(--gold); }

/* Callouts — the two things people skip and then get caught by. */
.conflict-callout {
  display: flex; align-items: flex-start; gap: 9px;
  margin: var(--space-md) 0;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm); line-height: 1.55;
}
.conflict-callout svg { flex-shrink: 0; margin-top: 2px; }
.conflict-callout--warn {
  background: rgba(201,162,39,0.11);
  border: 1px solid rgba(201,162,39,0.34);
  color: #7A5C22;
}
.conflict-callout--time {
  background: rgba(66,133,244,0.07);
  border: 1px solid rgba(66,133,244,0.26);
  color: #2C5AA8;
}
.conflict-callout strong { font-weight: 700; }

/* The do-nothing outcome. Muted rather than alarming: the data is safe, and
   overstating it would read as a threat instead of a consequence. */
.conflict-section--consequence {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
}
.conflict-temp {
  margin: 0 0 var(--space-sm);
  padding: 10px 12px;
  background: var(--white);
  border: 1px dashed var(--neutral-300);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
.conflict-temp code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem; color: var(--neutral-800); white-space: nowrap;
}

/* ── Footer ── */
.conflict-foot {
  display: flex; flex-direction: column; gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
  background: var(--neutral-50);
  border-top: 1px solid var(--neutral-200);
}
.conflict-ack {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--text-sm); line-height: 1.5;
  color: var(--neutral-700); cursor: pointer;
}
.conflict-ack input {
  flex-shrink: 0; margin-top: 2px;
  width: 17px; height: 17px; cursor: pointer;
  accent-color: var(--gold-aged);
}
.conflict-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-sm);
}
.conflict-actions .btn-primary:disabled {
  opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none;
}
/* The waitlist dialog is one short paragraph, not a nine-step walkthrough, so it
   gets a narrower sheet -- at the conflict dialog's width the text would sit as a
   single lonely line across 660px. */
.conflict-sheet--compact { max-width: 520px; }
.conflict-actions--end { justify-content: flex-end; width: 100%; }
.conflict-note {
  margin-top: var(--space-sm);
  color: var(--neutral-600, #6b6559);
  font-size: var(--text-sm);
}

@media (max-width: 620px) {
  .conflict-overlay { padding: 0; }
  .conflict-sheet { border-radius: 0; min-height: 100%; border: none; }
  .conflict-head, .conflict-body { padding: var(--space-lg); }
  .conflict-foot { padding: var(--space-md) var(--space-lg) var(--space-lg); }
  .conflict-title { font-size: var(--text-lg); }
  .conflict-actions { flex-direction: column-reverse; align-items: stretch; }
}

/* ══════════════════════════════════════════════════════════════
   LICENSE GRANTED
   Same geometry as the conflict sheet, different skin. The Gemini banner sits at
   the top and its palette is carried down through the body -- the ember warmth of
   the dark banner is a near neighbour of Purdue's Aged gold, which is why the two
   sit together without either one looking bolted on. Purdue gold frames the whole
   thing so the dialog still reads as Purdue's rather than as Google's.
   ══════════════════════════════════════════════════════════════ */

.success-overlay {
  align-items: center;
  /* Warm the scrim rather than using the conflict dialog's flat black. */
  background: radial-gradient(120% 90% at 50% 0%,
              rgba(30,58,100,0.55) 0%, rgba(12,11,8,0.62) 55%, rgba(12,11,8,0.72) 100%);
}

.success-sheet {
  max-width: 620px;
  border: 1px solid rgba(206,184,136,0.6);
  box-shadow:
    0 0 0 4px rgba(206,184,136,0.14),
    0 26px 70px rgba(12,11,8,0.34);
}

/* ── Banner ──
   `contain` on a white ground, not `cover`: the artwork already sits on white, so
   the letterboxing lands white-on-white and is invisible, and nothing gets cropped.
   A `cover` crop at this ratio would cut "Welcome to" off the top and the Cloud
   mark off the bottom, which is most of what the image is for. */
.success-banner {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1000 / 300;
  background: #FFFFFF;
}
.success-banner img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 10px 0;
}

/* ── Celebration ──
   Eighteen pieces, one fall, then app.js empties the container. Deliberately small,
   slow and few: a confetti cannon would undercut the tone of a message that is
   mostly instructions. Positions and delays come from nth-child so nothing has to
   write an inline style -- which keeps the strict Report-Only CSP quiet. */
.success-confetti {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.success-confetti i {
  position: absolute; top: -14px;
  width: 6px; height: 10px;
  border-radius: 1px;
  opacity: 0;
  animation: confettiFall 2600ms cubic-bezier(0.33, 0.15, 0.45, 1) forwards;
}
@keyframes confettiFall {
  0%   { opacity: 0; transform: translate3d(0, -10px, 0) rotate(0deg); }
  12%  { opacity: 0.95; }
  70%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate3d(var(--drift, 8px), 190px, 0) rotate(560deg); }
}

/* Purdue gold leads, the four Gemini colours follow -- the same order the brand
   line at the top of the page uses. */
.success-confetti i:nth-child(6n+1) { background: var(--gold); }
.success-confetti i:nth-child(6n+2) { background: var(--gemini-blue); }
.success-confetti i:nth-child(6n+3) { background: var(--gold-rush); }
.success-confetti i:nth-child(6n+4) { background: var(--gemini-red); }
.success-confetti i:nth-child(6n+5) { background: var(--gemini-yellow); }
.success-confetti i:nth-child(6n+6) { background: var(--gemini-green); }

.success-confetti i:nth-child(1)  { left:  4%; animation-delay:  60ms; --drift:  14px; }
.success-confetti i:nth-child(2)  { left: 10%; animation-delay: 340ms; --drift: -10px; }
.success-confetti i:nth-child(3)  { left: 16%; animation-delay: 150ms; --drift:  20px; }
.success-confetti i:nth-child(4)  { left: 22%; animation-delay: 480ms; --drift:  -6px; }
.success-confetti i:nth-child(5)  { left: 28%; animation-delay:  20ms; --drift: -18px; }
.success-confetti i:nth-child(6)  { left: 34%; animation-delay: 400ms; --drift:  10px; }
.success-confetti i:nth-child(7)  { left: 40%; animation-delay: 220ms; --drift:  -8px; }
.success-confetti i:nth-child(8)  { left: 46%; animation-delay: 560ms; --drift:  16px; }
.success-confetti i:nth-child(9)  { left: 52%; animation-delay: 100ms; --drift: -14px; }
.success-confetti i:nth-child(10) { left: 58%; animation-delay: 300ms; --drift:  22px; }
.success-confetti i:nth-child(11) { left: 64%; animation-delay: 620ms; --drift:  -4px; }
.success-confetti i:nth-child(12) { left: 70%; animation-delay: 180ms; --drift:  12px; }
.success-confetti i:nth-child(13) { left: 76%; animation-delay: 440ms; --drift: -20px; }
.success-confetti i:nth-child(14) { left: 82%; animation-delay:  80ms; --drift:   6px; }
.success-confetti i:nth-child(15) { left: 88%; animation-delay: 520ms; --drift: -12px; }
.success-confetti i:nth-child(16) { left: 94%; animation-delay: 260ms; --drift:  18px; }
.success-confetti i:nth-child(17) { left: 13%; animation-delay: 700ms; --drift:  -9px; }
.success-confetti i:nth-child(18) { left: 67%; animation-delay: 760ms; --drift:  11px; }

/* ── Header ──
   The tick gets Purdue's gold rather than a success green: green here would be the
   only colour on the sheet that belongs to neither brand. */
.success-head {
  background: linear-gradient(135deg, rgba(251,247,238,0.95), rgba(244,236,214,0.8));
}
.success-icon {
  background: rgba(201,162,39,0.18);
  border-color: rgba(201,162,39,0.5);
  color: var(--gold-aged);
  animation: successTick 520ms var(--ease-out) both 180ms;
}
@keyframes successTick {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.success-eyebrow { color: var(--gold-aged); }

/* ── Body ──
   A hairline of the banner's warmth down the left of each section, so the colour
   from the top of the sheet reappears beside the text instead of stopping dead at
   the header. */
.success-body {
  padding-top: var(--space-lg);
  background: linear-gradient(180deg, rgba(251,247,238,0.55) 0%, var(--white) 220px);
}

/* The opening line sits above the numbered sections and outside them, so it reads as
   the message's greeting rather than as part of "Access the Portal". */
.success-lead {
  margin: 0 0 var(--space-lg);
  font-size: var(--text-sm); line-height: 1.7;
  color: var(--neutral-700);
}
.success-lead strong { color: var(--primary); font-weight: 700; }

.success-section { margin-bottom: var(--space-lg); }
.success-section:last-child { margin-bottom: 0; }

.success-section-title {
  margin: 0 0 var(--space-sm);
  padding-left: 12px;
  position: relative;
  font-size: var(--text-base); font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--primary);
}
.success-section-title::before {
  content: ''; position: absolute; left: 0; top: 2px; bottom: 2px;
  width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-rush), var(--gold-aged));
}

.success-text {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-sm); line-height: 1.7;
  color: var(--neutral-700);
}

.success-list {
  margin: 0; padding-left: 18px;
  font-size: var(--text-sm); line-height: 1.7;
  color: var(--neutral-700);
}
.success-list li { margin-bottom: 6px; }
.success-list li::marker { color: var(--gold-aged); }
.success-list strong { color: var(--primary); font-weight: 700; }

/* ── The portal link ──
   Sized and framed like a control because the tip below tells the user to drag it
   to a bookmarks bar, and a bare underlined phrase does not look like something
   you can pick up. */
/* Wears the Purdue Brand Studio gold CTA (.btn-primary) in the markup, so this
   rule only adds what the button system does not cover: the drag-to-bookmark
   cursor the tip below it asks for, and the spacing inside the dialog. */
.success-portal-link {
  margin-bottom: var(--space-md);
  text-decoration: none;
  cursor: grab;
}
.success-portal-link:active { cursor: grabbing; }
.success-portal-link svg { flex-shrink: 0; }

/* ── Bookmark tip ── */
.success-tip {
  display: flex; gap: 10px;
  margin: 0;
  padding: 12px 14px;
  font-size: var(--text-xs); line-height: 1.65;
  color: var(--neutral-700);
  background: rgba(251,247,238,0.9);
  border: 1px solid rgba(206,184,136,0.5);
  border-left: 3px solid var(--gold-rush);
  border-radius: var(--radius-sm);
}
.success-tip strong { color: var(--gold-aged); font-weight: 800; }
.success-tip-icon { flex-shrink: 0; color: var(--gold-rush); line-height: 0; padding-top: 1px; }

.success-inline-link {
  color: var(--gemini-blue); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
.success-inline-link:hover { color: var(--primary); }

.success-foot { border-top: 1px solid rgba(142,111,62,0.18); }
.success-cta { text-decoration: none; }

/* Motion is decoration here, so it goes first when the user has asked for less of
   it. The dialog itself still appears -- only the celebration is dropped. */
@media (prefers-reduced-motion: reduce) {
  .success-confetti { display: none; }
  .success-icon { animation: none; }
}

@media (max-width: 620px) {
  .success-portal-link { width: 100%; justify-content: center; }
}

/* ── Claim button, blocked ──────────────────────────────────────────────────
   Still focusable and still clickable -- clicking reopens the explanation. A
   truly disabled button would give a user with an unresolved conflict no way
   back to the instructions. */
.btn-license--blocked {
  position: relative;
  opacity: 0.5;
  filter: grayscale(0.85);
  cursor: not-allowed;
}
.btn-license--blocked::after {
  /* Read from the element so one blocked style can explain several different
     reasons -- an account conflict and an unavailable campus license need
     different words, and hardcoding one of them here mislabelled the other. */
  content: attr(data-blocked-reason);
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 7px 12px;
  background: var(--neutral-900);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.01em;
  color: var(--white); white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
  z-index: 20;
}
.btn-license--blocked:hover::after,
.btn-license--blocked:focus-visible::after {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* ── Preview switch on the sign-in gate ─────────────────────────────────── */
.auth-gate-preview {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px dashed rgba(142,111,62,0.22);
  cursor: pointer; user-select: none;
}
.auth-gate-preview input { position: absolute; opacity: 0; pointer-events: none; }
.auth-gate-preview-track {
  position: relative; flex-shrink: 0;
  width: 30px; height: 17px;
  background: var(--neutral-300);
  border-radius: var(--radius-full);
  transition: background var(--dur-base) var(--ease);
}
.auth-gate-preview-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 13px; height: 13px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-base) var(--ease);
}
.auth-gate-preview input:checked + .auth-gate-preview-track { background: var(--gold-aged); }
.auth-gate-preview input:checked + .auth-gate-preview-track .auth-gate-preview-thumb {
  transform: translateX(13px);
}
.auth-gate-preview input:focus-visible + .auth-gate-preview-track {
  outline: 2px solid var(--gold-rush); outline-offset: 2px;
}
.auth-gate-preview-label {
  font-size: var(--text-xs); font-weight: 500;
  color: var(--neutral-500);
}

/* The one preview affordance that is an action rather than a state. It reuses the
   row layout so it lines up with the switches above it, and drops the <button>
   chrome so it does not read as the gate's primary control. */
.auth-gate-preview--button {
  width: 100%;
  background: none;
  border: none;
  border-top: 1px dashed rgba(142,111,62,0.22);
  font: inherit;
}
.auth-gate-preview--button:hover .auth-gate-preview-label {
  color: var(--gold-aged);
  text-decoration: underline; text-underline-offset: 3px;
}
.auth-gate-preview--button:focus-visible {
  outline: 2px solid var(--gold-rush); outline-offset: 2px;
}

/* ── Already-licensed CTA ───────────────────────────────────────────────────
   Shown in place of "Claim Your License" once the license project confirms the
   user holds one. Same shape as the claim button so the row does not reflow when
   the two swap. */
.btn-license--go {
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  justify-content: center;
}
.btn-license--go:hover { text-decoration: none; }

.license-active-badge {
  display: inline-flex; align-items: center; gap: 5px;
  vertical-align: middle; margin-right: 10px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  background: var(--primary-light);
  border: 1px solid var(--gold);
  color: var(--gold-aged);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.license-active-badge svg { flex: none; }

/* Same shape as the active badge, different weight of signal: this one says "you
   are waiting", so it reads as neutral-warm rather than as a success state. */
.license-waitlist-badge {
  display: inline-flex; align-items: center; gap: 5px;
  vertical-align: middle; margin-right: 10px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  background: var(--neutral-100, #f1efe9);
  border: 1px solid var(--gold-aged);
  color: var(--gold-aged);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.license-waitlist-badge svg { flex: none; }

/* The waitlist copy is Purdue's own wording and is the whole point of the card, so
   it gets room to breathe rather than being squeezed into the CTA's default line. */
#license-cta-waitlist p {
  max-width: 62ch;
}

/* ── Preview group picker ────────────────────────────────────────────────── */
.auth-gate-preview--select { gap: 12px; flex-wrap: wrap; }
.auth-gate-preview-select {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gold);
  background: var(--white);
  color: var(--neutral-900);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  max-width: 100%;
}
.auth-gate-preview-select:focus-visible {
  outline: 2px solid var(--gold-aged);
  outline-offset: 2px;
}

/* Feature-hidden sections stay in the document (so nothing else has to know they
   exist) but can never be shown, including by a stale deep link to #support. */
[data-feature-hidden] { display: none !important; }

/* `hidden` must actually hide. The attribute's default `display: none` comes from
   the UA stylesheet at the lowest possible specificity, so any class that sets
   `display` -- .btn-license is inline-flex, .license-cta-text is a block -- silently
   beats it. That left the claim button and the "Go to Gemini Enterprise" button on
   screen at the same time. */
.btn-license[hidden],
.license-cta-text[hidden] { display: none !important; }

/* Preview toggles ship hidden; app.js reveals them only for ?preview=1. The class
   sets display, so the attribute alone would not hide them. */
.auth-gate-preview[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE
   Additive, phone-only rules. Everything here sits inside a media query that
   no desktop viewport matches, so the web layout above is left exactly as it
   was: nothing earlier in this file is overridden for a wide screen.
   ═══════════════════════════════════════════════════════════════════════════ */

/* -- Sign-in gate on touch devices ------------------------------------------
   Two things happened on phones. First, dragging down on the gate fired
   Chrome's pull-to-refresh, which reloaded the page and cancelled the redirect
   to Entra that was already in flight -- so the sign-in that was working looked
   like it had done nothing. Second, the gate's full-page blur plus two animated
   blurred orbs is heavy for a phone GPU and made the page feel stalled. */
@media (pointer: coarse) {
  html.auth-locked, html.auth-locked body,
  html.auth-locked .auth-gate, html.auth-unlocking .auth-gate {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
  }
  html.auth-locked .auth-gate-orb { animation: none; }
  .auth-gate-signin .ms-signin-btn { -webkit-tap-highlight-color: transparent; }
}

@media (max-width: 768px) {
  /* The card can be taller than a short landscape viewport: let the gate
     scroll from the top instead of centering and clipping the logos. */
  html.auth-locked .auth-gate, html.auth-unlocking .auth-gate {
    justify-content: flex-start;
    padding-top: max(var(--space-lg), env(safe-area-inset-top));
    padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom));
  }
  .auth-gate-card { margin: auto 0; }
  /* The two logos were wider than the card and the Gemini mark was clipped. */
  .auth-gate-logos { gap: 12px; max-width: 100%; }
  .auth-gate-logo { max-width: 44%; }
  .auth-gate-signin .ms-signin-btn { width: 100%; max-width: 360px; padding: 0 16px; }
  .auth-gate-signin .ms-signin-label { white-space: normal; line-height: 1.15; }
  .auth-gate-progress { font-size: var(--text-sm); }

  /* -- Header -------------------------------------------------------------
     Three logos plus the hamburger were wider than the phone, which pushed
     the menu button off the right edge: the site could not be navigated at
     all on a phone. The ZionClouds mark drops out (it stays in the footer),
     the remaining logos may shrink, and the button is pinned on-screen. */
  .site-header .container { padding: 0 var(--space-md); }
  .header-inner { gap: var(--space-md); height: 64px; }
  .header-logos { flex: 1 1 auto; min-width: 0; overflow: hidden; }
  .header-logos > a { flex-shrink: 1; min-width: 0; }
  .header-logo { max-width: 100%; }
  .header-logo--zcs,
  .header-logos > .logo-divider:nth-of-type(2) { display: none; }
  .mobile-menu-btn { flex-shrink: 0; margin-left: auto; }
  .header-nav.open { top: 64px; gap: 4px; }

  /* Open menu: the search trigger and user pill laid out as rows, and the
     ⌘K hint hidden -- there is no keyboard to press it on. */
  .header-nav.open .nav-link { padding: 12px 14px; }
  .header-nav.open .global-search-trigger {
    width: 100%; justify-content: flex-start; margin: var(--space-sm) 0 0;
    padding: 11px 14px;
  }
  .header-nav.open .search-kbd { display: none; }
  .header-nav.open .hub-signin-container { margin: var(--space-sm) 0 0; }
  .header-nav.open .hub-user-pill {
    width: 100%; margin: var(--space-sm) 0 0; padding: 6px 10px 6px 6px;
    border-radius: var(--radius-btn); justify-content: flex-start;
  }
  .header-nav.open .hub-user-identity { flex: 1; }
  .header-nav.open .hub-user-name { max-width: none; }
  .header-nav.open .hub-signout-btn { padding: 6px 8px; font-size: 16px; }

  /* -- Global search ------------------------------------------------------
     No Escape key on a phone, and the sheet covers the backdrop, so the ESC
     badge becomes the Close button (app.js wires the tap). */
  .global-search-modal .gs-esc-badge {
    font-size: 0; line-height: 0;
    padding: 9px 14px; min-height: 40px;
    display: inline-flex; align-items: center;
    background: var(--neutral-900, #111); border-color: var(--neutral-900, #111);
    color: var(--white); border-radius: var(--radius-btn);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .global-search-modal .gs-esc-badge::after {
    content: 'Close'; font-size: 13px; font-weight: 700; line-height: 1;
    letter-spacing: 0.02em;
  }
  .gs-input-wrap { padding: var(--space-sm) var(--space-md); gap: var(--space-sm); }

  /* -- Content pages ------------------------------------------------------
     .content-page zeroes the container's side padding, so the prompt library
     and quota tables ran edge to edge on a phone. */
  .container.content-page { padding-left: var(--space-md); padding-right: var(--space-md); }
  .library-header .container { padding-left: var(--space-md); padding-right: var(--space-md); }
  .quota-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .comparison-table-wrap { -webkit-overflow-scrolling: touch; }
  .comparison-table th, .comparison-table td { white-space: normal; min-width: 120px; }
  .comparison-table td:first-child, .comparison-table th:first-child { min-width: 140px; }

  /* -- License modal ------------------------------------------------------
     Bottom sheet rather than a centered box: the footer buttons were being
     cut off below the fold, and the two of them side by side wrapped the
     submit label onto three lines. */
  .license-modal {
    top: auto; bottom: 0; left: 0; right: 0;
    width: 100%; max-width: none; max-height: 92vh; max-height: 92dvh;
    transform: translateY(24px) scale(1);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .license-modal.open { transform: translateY(0) scale(1); }
  .license-modal-header { padding: var(--space-lg) var(--space-lg) var(--space-md); }
  .license-form { padding: var(--space-md) var(--space-lg) var(--space-lg); }
  .license-form-footer .booking-actions { flex-direction: column-reverse; }
  .license-form-footer .booking-actions .btn-primary,
  .license-form-footer .booking-actions .btn-ghost { width: 100%; justify-content: center; }
  .license-form-footer .booking-actions .btn-primary { padding: 14px 20px; }
  .license-form-footer .booking-actions .btn-primary svg { flex-shrink: 0; }

  /* Long CTA labels inside cards wrapped onto three lines. */
  .path-step-card .btn-primary,
  .path-step-card .path-step-cta,
  .path-cta .btn-primary,
  .license-cta-card .btn-license { width: 100%; justify-content: center; padding: 14px 20px; }
}

@media (max-width: 480px) {
  .header-inner { height: 60px; }
  .header-nav.open { top: 60px; }
  .header-logo--purdue { height: 24px; }
  .header-logo--gemini { height: 26px; }
  .hero { padding: 56px 0 40px; }
  .hero-subtitle br { display: none; }
  .btn-primary, .btn-black, .btn-ghost { padding-left: 20px; padding-right: 20px; }
  .btn-lg { padding: 14px 20px; }
  .section-title { font-size: var(--text-2xl); }
  .library-title { font-size: var(--text-2xl); }
  .library-title svg { width: 22px; height: 22px; }
}