/* Whiia Digital Teams — Google Antigravity Aesthetic Design System */
:root {
  /* Surface & Backgrounds */
  --bg-body: #ffffff;
  --bg-surface: #ffffff;
  --bg-subtle: #f8f9fa;
  --bg-subtle-alt: #f1f3f4;
  --bg-header: rgba(255, 255, 255, 0.82);
  --bg-backdrop: rgba(15, 23, 42, 0.45);
  
  /* Borders */
  --border-color: #e5e7eb;
  --border-subtle: #f1f3f4;
  --border-focus: #111827;
  --border-hover: #d1d5db;
  
  /* Typography Colors */
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-muted: #6b7280;
  --text-dim: #9ca3af;
  
  /* Brand Accents */
  --accent-orange: #ea4e1a; /* Exact Whiia Logo Dot Color */
  --accent-orange-hover: #d14214;
  --accent-orange-subtle: rgba(234, 78, 26, 0.08);
  --accent-orange-glow: rgba(234, 78, 26, 0.25);
  
  /* Buttons */
  --btn-dark-bg: #111827;
  --btn-dark-text: #ffffff;
  --btn-dark-hover: #1f2937;
  
  /* Shadows & Elevations */
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  --shadow-card: 0 2px 16px -2px rgba(0, 0, 0, 0.04), 0 1px 4px 0 rgba(0, 0, 0, 0.02);
  --shadow-card-hover: 0 12px 32px -4px rgba(0, 0, 0, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.03);
  --shadow-menu: 0 20px 40px -8px rgba(0, 0, 0, 0.1), 0 1px 4px 0 rgba(0, 0, 0, 0.04);
  --shadow-modal: 0 25px 60px -15px rgba(0, 0, 0, 0.3);

  /* Border Radii */
  --radius-card: 28px;
  --radius-card-sm: 18px;
  --radius-pill: 9999px;
  
  /* Fonts & Safe Areas */
  --font-sans: -apple-system, BlinkMacSystemFont, "Google Sans", "Inter", "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* Reset & Global Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;
}

body {
  background-color: var(--bg-body);
  color: var(--text-primary);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* Typography Standards */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

p {
  color: var(--text-secondary);
  line-height: 1.6;
  font-size: 1.05rem;
}

/* ==========================================================================
   Top Header Navigation
   ========================================================================== */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 0.85rem 1.5rem;
  padding-top: max(0.85rem, var(--safe-top));
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-header);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  width: 100%;
}

header.nav-hidden {
  transform: translateY(-100%);
}

header.nav-scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.logo-container {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-img {
  height: 28px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* Navigation Links & Dropdowns */
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-item {
  position: relative;
  padding: 0.5rem 0;
  margin: -0.5rem 0;
}

.nav-link {
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-pill);
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}

.nav-link:hover, .nav-link.active {
  color: var(--text-primary);
  background: var(--bg-subtle);
}

.nav-arrow {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
  opacity: 0.6;
}

.nav-item:hover .nav-arrow {
  transform: rotate(180deg);
}

/* Mega Menu Dropdowns (Attio Style with Continuous Hover Bridge) */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  transform: translateY(4px);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card-sm);
  box-shadow: var(--shadow-menu);
  padding: 1.25rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
  z-index: 1010;
  display: grid;
  gap: 1rem;
}

/* Invisible hover bridge spanning from nav item down into mega menu */
.mega-menu::before {
  content: "";
  position: absolute;
  top: -24px;
  left: 0;
  right: 0;
  height: 24px;
  background: transparent;
}

.nav-item:hover .mega-menu,
.nav-item:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* 3-Column Boxed Mega Menu (Reference Information Architecture) */
.mega-menu-harness {
  width: 960px;
  max-width: 90vw;
  padding: 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.mega-menu-header {
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 0.85rem;
}

.mega-menu-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-orange, #ff6b2b);
  display: block;
  margin-bottom: 0.25rem;
}

.mega-menu-headline {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.3;
}

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

.mega-column-card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  border-radius: 12px;
  background: #fafbfc;
  border: 1px solid var(--border-subtle);
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.mega-column-card:hover {
  background: #ffffff;
  border-color: var(--border-color);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

.mega-card-badge-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.mega-card-icon-badge {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.mega-column-card:hover .mega-card-icon-badge {
  background: var(--bg-subtle);
  border-color: var(--text-primary);
}

.mega-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.mega-card-desc {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 1rem;
  flex-grow: 1;
}

.mega-card-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.mega-card-feature-item {
  font-size: 0.8rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  line-height: 1.35;
}

.mega-card-feature-item svg {
  color: var(--accent-orange, #ff6b2b);
  flex-shrink: 0;
}

.mega-card-action {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
}

.mega-card-action .action-arrow {
  transition: transform 0.2s ease;
}

.mega-column-card:hover .mega-card-action .action-arrow {
  transform: translateX(4px);
}

.mega-menu-product {
  width: 880px;
  max-width: 92vw;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding: 1.75rem 2rem;
}

.mega-menu-solutions {
  width: 620px;
  max-width: 92vw;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem 1.25rem;
  padding: 1.75rem 2rem;
}

.mega-menu-resources {
  width: 640px;
  max-width: 92vw;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  padding: 1.75rem 2rem;
}

.mega-column {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.mega-group-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
  padding-left: 0.5rem;
}

.mega-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  transition: all 0.15s ease;
  text-decoration: none;
}

.mega-item:hover, .mega-item:focus {
  background: var(--bg-subtle);
  outline: none;
}

.mega-item:focus-visible {
  outline: 2px solid var(--accent-orange, #ff6b2b);
}

.mega-item-icon {
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.mega-item-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
}

.mega-item-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 0.2rem;
}

/* Header Auth Controls */
#nav-auth-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Buttons System */
.btn {
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.65rem 1.4rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.15s ease;
  border: none;
  outline: none;
  text-decoration: none;
  white-space: nowrap;
}

/* Phone widths: a long outline label (getting-started: "Choose an AI application
   with the Resources guides", 412.6px on one line) is wider than a 390px viewport
   and clips. Let button labels wrap below the contract's 640px breakpoint; short
   labels are unaffected because they never need a line break. */
@media (max-width: 640px) {
  .btn {
    white-space: normal;
    text-align: center;
  }
}

.btn-primary {
  background-color: var(--btn-dark-bg);
  color: var(--btn-dark-text);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background-color: var(--btn-dark-hover);
  transform: translateY(-1px);
}

.btn-outline {
  background-color: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-outline:hover {
  background-color: var(--bg-subtle);
  border-color: var(--border-hover);
}

.btn-sm {
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
}

.btn-lg {
  padding: 0.85rem 2rem;
  font-size: 1.05rem;
}

/* Mobile Menu Toggle */
.mobile-menu-btn {
  display: none;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 0.5rem;
  cursor: pointer;
  width: 42px;
  height: 42px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
}

.hamburger-line {
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--text-primary);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.mobile-menu-btn.open .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mobile-menu-btn.open .hamburger-line:nth-child(2) {
  opacity: 0;
}
.mobile-menu-btn.open .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Slide-Out Drawer */
.mobile-nav-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg-backdrop);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
  z-index: 9998;
}

.mobile-nav-backdrop.open,
.mobile-nav-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 85vw;
  height: 100vh;
  height: 100dvh;
  background: var(--bg-surface);
  z-index: 9999;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  padding-top: max(1.5rem, var(--safe-top));
  padding-bottom: max(1.5rem, var(--safe-bottom));
  box-shadow: var(--shadow-menu);
  overflow-y: auto;
}

.mobile-nav-drawer.open,
.mobile-nav-drawer.active {
  transform: translateX(0);
  visibility: visible;
}

.mobile-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 1.25rem;
}

.mobile-drawer-close {
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--text-primary);
}

.mobile-drawer-links {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  overflow-y: auto;
}

.mobile-drawer-link {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  padding: 0.75rem 0.5rem;
  border-radius: 8px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-drawer-link:hover {
  background: var(--bg-subtle);
}

.mobile-drawer-group {
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 0.35rem;
  margin-bottom: 0.35rem;
}

.mobile-drawer-summary {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  padding: 0.65rem 0.5rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-drawer-summary::-webkit-details-marker {
  display: none;
}

.mobile-drawer-summary::after {
  content: "▾";
  font-size: 0.85rem;
  transition: transform 0.2s ease;
  opacity: 0.6;
}

details[open] > .mobile-drawer-summary::after {
  transform: rotate(180deg);
}

.mobile-drawer-sublinks {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.25rem 0 0.5rem 1rem;
}

.mobile-drawer-sublink {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 0.45rem 0.5rem;
  border-radius: 6px;
  text-decoration: none;
  display: block;
}

.mobile-drawer-sublink:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.mobile-drawer-direct {
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 0.65rem;
  margin-bottom: 0.35rem;
}

.mobile-drawer-auth {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-subtle);
}

/* ==========================================================================
   Hero Section (Google Antigravity Aesthetic)
   ========================================================================== */
.hero-section {
  position: relative;
  padding: 5.5rem 2rem 4.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, rgba(234, 78, 26, 0.02) 0%, rgba(255, 255, 255, 0) 70%);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  padding: 0.4rem 1.1rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--accent-orange);
  box-shadow: 0 0 6px var(--accent-orange-glow);
}

.hero-title {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 800;
  line-height: 1.08;
  max-width: 950px;
  margin: 0 auto 1.5rem;
  color: var(--text-primary);
  letter-spacing: -0.04em;
}

.hero-subtitle {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.6;
  max-width: 720px;
  margin: 0 auto 2.5rem;
  color: var(--text-secondary);
  font-weight: 400;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

/* ==========================================================================
   3 Core Value Pillars (Why Teams Choose Whiia)
   ========================================================================== */
.section {
  padding: 5rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3.5rem;
}

.section-tag {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-bottom: 0.75rem;
}

.section-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}

.section-desc {
  font-size: 1.1rem;
  color: var(--text-secondary);
}

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

.pillar-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  padding: 2.5rem 2rem;
  box-shadow: var(--shadow-card);
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
}

.pillar-card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--border-hover);
  transform: translateY(-3px);
}

.pillar-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 1.5rem;
}

.pillar-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.85rem;
  letter-spacing: -0.02em;
}

.pillar-desc {
  font-size: 0.96rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ==========================================================================
   Autonomous Management Functions Overview
   ========================================================================== */
.functions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.5rem;
}

.function-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card-sm);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-card);
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.function-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.function-top {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.function-icon {
  font-size: 1.3rem;
  width: 40px;
  height: 40px;
  background: var(--bg-subtle);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.function-name {
  font-size: 1.15rem;
  font-weight: 700;
}

.function-desc {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 1.25rem;
}

.function-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.function-feature-item {
  font-size: 0.84rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.function-feature-item::before {
  content: "•";
  color: var(--accent-orange);
  font-weight: bold;
}

/* ==========================================================================
   Pricing Section & Switcher (Clean Human Numbers)
   ========================================================================== */
.pricing-section {
  background: var(--bg-subtle);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 5.5rem 2rem;
}

.pricing-toggle-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0 auto 3rem;
}

.pricing-toggle-pill {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  padding: 0.35rem;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.toggle-option {
  padding: 0.45rem 1.2rem;
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.15s ease;
  user-select: none;
}

.toggle-option.active {
  background: var(--btn-dark-bg);
  color: var(--btn-dark-text);
}

.save-badge {
  background: var(--accent-orange-subtle);
  color: var(--accent-orange);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  max-width: 1240px;
  margin: 0 auto;
}

@media (min-width: 1080px) {
  .pricing-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.pricing-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  padding: 2.25rem 1.75rem;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: all 0.25s ease;
}

.pricing-card.featured {
  border: 1.5px solid var(--accent-orange);
  box-shadow: 0 12px 32px -10px rgba(234, 78, 26, 0.15);
}

.card-badge {
  position: absolute;
  top: -12px;
  right: 24px;
  background: var(--accent-orange);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
}

.tier-name {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.tier-desc {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-muted);
  min-height: 46px;
  margin-bottom: 1.5rem;
}

.price-container {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.price-val {
  font-size: 2.8rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

.price-period {
  font-size: 0.95rem;
  color: var(--text-muted);
  font-weight: 500;
}

.price-subtext {
  font-size: 0.82rem;
  color: var(--text-dim);
  margin-bottom: 2rem;
}

.tier-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
  flex: 1;
}

.tier-feature-item {
  font-size: 0.9rem;
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  line-height: 1.4;
}

.tier-feature-check {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-primary);
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.pricing-guarantee-note {
  text-align: center;
  max-width: 680px;
  margin: 3rem auto 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ==========================================================================
   Pre-Footer Call to Action
   ========================================================================== */
.cta-banner {
  padding: 5rem 2rem 4rem;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.cta-banner-inverted {
  background: #0d1117;
  color: #ffffff;
  border-radius: var(--radius-card);
  padding: 5rem 2.5rem;
  max-width: 1120px;
  margin: 4rem auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.cta-banner-title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  margin-bottom: 1.25rem;
}

.cta-banner-inverted .cta-banner-title {
  color: #ffffff;
}

.cta-banner-inverted p {
  color: #94a3b8;
}

.cta-banner-inverted .btn-outline {
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  background: transparent;
}

.cta-banner-inverted .btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
}

/* Pricing Card Details Link */
.pricing-card-details-link {
  display: block;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: underline;
  margin-top: 0.75rem;
  transition: color 0.15s ease;
}

.pricing-card-details-link:hover {
  color: var(--accent-orange);
}

/* GDPR Cookie Banner */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(110%);
  background: #0a0e17;
  color: #e2e8f0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.38);
  padding: 1.05rem 1.5rem;
  width: 100%;
  z-index: 2000;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.cookie-banner.visible {
  transform: translateY(0);
}

/* Nothing may sit hidden under the bar while it is open. */
body.cookie-banner-open {
  padding-bottom: 140px;
}

.cookie-banner-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.cookie-banner-text {
  margin: 0;
  flex: 1 1 380px;
  color: #e2e8f0;
  font-size: 0.975rem;
  line-height: 1.55;
}

.cookie-banner-actions {
  display: flex;
  gap: 0.75rem;
  flex: 0 0 auto;
}

/* Dark-bar button treatment: outline stays legible on black. */
.cookie-banner .btn-outline {
  background: transparent;
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.38);
}
.cookie-banner .btn-outline:hover,
.cookie-banner .btn-outline:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

@media (max-width: 720px) {
  .cookie-banner { padding: 1rem 1.15rem; }
  .cookie-banner-content { flex-direction: column; align-items: stretch; gap: 0.85rem; }
  .cookie-banner-actions { justify-content: stretch; }
  .cookie-banner-actions .btn { flex: 1 1 0; }
  body.cookie-banner-open { padding-bottom: 220px; }
}
/* ==========================================================================
   Massive Typography Footer
   ========================================================================== */
footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-color);
  padding: 4.5rem 2.5rem 2rem;
  padding-bottom: max(2rem, var(--safe-bottom));
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto 3rem;
}

.footer-account-bar {
  max-width: 1200px;
  margin: 0 auto 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-subtle);
}

.footer-account-bar .footer-auth {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-brand-desc {
  font-size: 0.92rem;
  color: var(--text-muted);
  max-width: 320px;
  line-height: 1.6;
}

.footer-col-title {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  margin-bottom: 1.25rem;
}

.footer-col-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-link {
  font-size: 0.9rem;
  color: var(--text-muted);
  transition: color 0.15s ease;
}

.footer-link:hover {
  color: var(--text-primary);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* (.footer-bottom-links was declared here a second time, duplicating the rule
   further below in "Modals & Workstation"; the later declaration always won,
   so the duplicate was removed at the 2026-09-27 merge — no visual change.) */

/* ==========================================================================
   Assessment Quiz UI Standards (DEC-0029 & Google Antigravity Aesthetic)
   ========================================================================== */
.assessment-container {
  max-width: 860px;
  margin: 0 auto;
  padding: 2.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.assessment-progress-wrapper {
  margin-bottom: 2rem;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  font-size: 0.88rem;
}

.progress-step-text {
  font-weight: 700;
  color: var(--text-primary);
}

.progress-percent-text {
  font-weight: 600;
  color: var(--text-muted);
}

.progress-bar-bg {
  width: 100%;
  height: 6px;
  background: var(--bg-subtle);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--btn-dark-bg);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: var(--radius-pill);
}

.question-category {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-orange);
  margin-bottom: 0.5rem;
}

.question-title {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 1.75rem;
  line-height: 1.3;
}

.options-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.option-card {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card-sm);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.option-card:hover {
  border-color: var(--border-hover);
  background: var(--bg-subtle);
  transform: translateY(-1px);
}

.option-card.selected {
  border-color: var(--btn-dark-bg);
  background: var(--bg-subtle);
  box-shadow: 0 0 0 1px var(--btn-dark-bg);
}

.option-indicator {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.option-card.selected .option-indicator {
  background: var(--btn-dark-bg);
  color: var(--btn-dark-text);
  border-color: var(--btn-dark-bg);
}

.option-content h5 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
  color: var(--text-primary);
}

.option-content p {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.assessment-nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-subtle);
}

/* Assessment Results Scorecard */
.scorecard-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.scorecard-stat-card {
  padding: 1.5rem;
  background: var(--bg-subtle);
  border-radius: var(--radius-card-sm);
  border: 1px solid var(--border-subtle);
  text-align: center;
}

.scorecard-stat-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.scorecard-stat-val {
  font-size: 2.25rem;
  font-weight: 900;
  color: var(--text-primary);
  margin: 0.35rem 0 0.25rem;
}

.scorecard-stat-val.accent {
  color: var(--accent-orange);
}

.drag-meters-container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.drag-meter-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.drag-meter-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  font-weight: 600;
}

.diagnostic-preview-box {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card-sm);
  padding: 1.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  white-space: pre-wrap;
  color: var(--text-secondary);
  max-height: 280px;
  overflow-y: auto;
  margin-bottom: 2rem;
}

.footer-bottom-links {
  display: flex;
  gap: 1.5rem;
}

/* ==========================================================================
   Modals & Workstation
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg-backdrop);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
}

.modal-backdrop.open,
.modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.modal-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-modal);
  width: 100%;
  max-width: 480px;
  padding: 2.5rem 2rem;
  transform: scale(0.96);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  max-height: calc(100dvh - 3rem);
  overflow-y: auto;
}

.modal-backdrop.open .modal-card,
.modal-backdrop.active .modal-card {
  transform: scale(1);
}

.modal-close-btn {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: transparent;
  border: none;
  font-size: 1.25rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close-btn:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

/* Form Controls */
.form-group {
  margin-bottom: 1.25rem;
  text-align: left;
}

.form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}

.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  font-size: 0.95rem;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s ease;
}

.form-input:focus {
  border-color: var(--border-focus);
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */
@media (max-width: 960px) {
  header {
    padding: 0.85rem 1.25rem;
  }
  
  .nav-links,
  #nav-auth-controls {
    display: none !important;
  }
  
  .mobile-menu-btn {
    display: flex !important;
  }
  
  .pillars-grid,
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

@media (max-width: 640px) {
  .footer-top {
    grid-template-columns: 1fr;
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .hero-section {
    padding: 3.5rem 1.25rem 3rem;
  }
  
  .section {
    padding: 3.5rem 1.25rem;
  }
}

/* ==========================================================================
   Inverted Sections & Button Rules
   ========================================================================== */
.assessment-section-inverted {
  background: #0d1117;
  color: #ffffff;
  border-radius: var(--radius-card);
  padding: 3.5rem 2.5rem;
  margin: 3.5rem auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.3);
}

.assessment-section-inverted h2,
.assessment-section-inverted h3 {
  color: #ffffff !important;
}

.assessment-section-inverted p {
  color: #94a3b8 !important;
}

.cta-banner-inverted .btn-primary,
.assessment-section-inverted .btn-primary {
  background: #ffffff !important;
  color: #0d1117 !important;
  border-color: #ffffff !important;
  font-weight: 700 !important;
}

.cta-banner-inverted .btn-primary:hover,
.assessment-section-inverted .btn-primary:hover {
  background: #e2e8f0 !important;
  border-color: #e2e8f0 !important;
  color: #0d1117 !important;
}

.cta-banner-inverted .btn-outline,
.assessment-section-inverted .btn-outline {
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  background: transparent !important;
}

.cta-banner-inverted .btn-outline:hover,
.assessment-section-inverted .btn-outline:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* ==========================================================================
   Personalized Diagnostic Pricing Banner (White/Light Themed)
   ========================================================================== */
.personalized-roi-card {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  padding: 2.25rem 2rem;
  margin-bottom: 3.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  color: var(--text-primary);
}

.personalized-roi-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.personalized-roi-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 107, 43, 0.1);
  border: 1px solid var(--accent-orange);
  color: var(--accent-orange);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
}

.personalized-roi-title {
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.personalized-roi-subtitle {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.personalized-roi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.personalized-roi-box {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.25rem;
  transition: all 0.2s ease;
}

.personalized-roi-box.recommended {
  border-color: var(--accent-orange);
  border-width: 2px;
  background: rgba(255, 107, 43, 0.03);
  position: relative;
}

.personalized-roi-box.recommended::before {
  content: "RECOMMENDED FOR YOU";
  position: absolute;
  top: -10px;
  right: 12px;
  background: var(--accent-orange);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  letter-spacing: 0.04em;
}

.personalized-roi-box-tier {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.personalized-roi-box-val {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.personalized-roi-box-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ==========================================================================
   Google One-Style Detailed Comparison Table (White/Light Themed)
   ==========================================================================/* Table Scroll Container with Sticky Header Support */
.table-scroll-container {
  overflow: visible;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  background: #ffffff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
  margin-bottom: 3rem;
}

.comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--text-primary);
  font-size: 0.9rem;
}

/* Sticky Header Row locked below top navigation (58px navbar height) */
.comparison-table thead {
  position: sticky;
  top: 58px;
  z-index: 95;
}

.comparison-table thead th {
  background: #ffffff;
  padding: 1.1rem 1rem;
  border-bottom: 2px solid var(--border-color);
  text-align: center;
  vertical-align: top;
  position: sticky;
  top: 58px;
  z-index: 95;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.comparison-table thead th:first-child {
  text-align: left;
  width: 32%;
  min-width: 240px;
  padding-left: 2rem;
}

.comparison-table thead th.th-featured,
#th-col-pro {
  background: #fff8f4 !important;
  border-left: 1px solid rgba(255, 107, 43, 0.2);
  border-right: 1px solid rgba(255, 107, 43, 0.2);
}

.comparison-table th .th-badge-slot {
  min-height: 20px;
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comparison-table th .th-badge-tag {
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--accent-orange);
  background: rgba(255, 107, 43, 0.1);
  border: 1px solid rgba(255, 107, 43, 0.25);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
}

/* Merged Tier Name & Price Row */
.comparison-table th .th-plan-header-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.45rem;
  margin-bottom: 0.2rem;
}

.comparison-table th .th-plan-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0;
}

.comparison-table th .th-plan-title.highlight {
  color: var(--accent-orange);
}

.comparison-table th .th-plan-price {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-primary);
}

.comparison-table th .th-plan-sub {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  min-height: 1.1rem;
}

.comparison-table th .btn {
  width: 100%;
  padding: 0.5rem 0.85rem;
  font-size: 0.82rem;
}

.comparison-table th .btn-outline {
  color: var(--text-primary);
  border-color: var(--border-color);
  background: var(--bg-surface-elevated);
}

.comparison-table th .btn-outline:hover {
  background: #e2e8f0;
  border-color: var(--text-primary);
  color: var(--text-primary);
}

/* Category Section Header Rows */
.comparison-table tr.category-row td {
  background: var(--bg-surface-elevated);
  padding: 1.25rem 2rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  text-align: left;
}

.category-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--accent-orange);
  font-size: 0.75rem;
  margin-right: 0.5rem;
}

/* Standard Feature Rows */
.comparison-table tbody td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
  text-align: center;
  vertical-align: middle;
  color: var(--text-secondary);
  font-size: 0.88rem;
}

.comparison-table tbody td:first-child {
  text-align: left;
  padding-left: 2rem;
  color: var(--text-primary);
  font-weight: 600;
}

.comparison-table tbody tr:hover td {
  background: rgba(0, 0, 0, 0.015);
}

.comparison-table tbody td strong {
  color: var(--text-primary);
  display: block;
}

.comparison-table tbody td .feature-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(46, 160, 67, 0.12);
  color: #1a7f37;
  font-weight: 800;
  font-size: 0.85rem;
}

.cross-icon {
  color: #94a3b8;
  font-size: 0.9rem;
}

.tier-val-badge {
  display: inline-block;
  background: var(--bg-surface-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
}

@media (max-width: 768px) {
  .assessment-section-inverted {
    padding: 2.25rem 1.25rem;
  }
  
  .personalized-roi-card {
    padding: 1.5rem 1.25rem;
  }
  
  .comparison-table thead th {
    padding: 1rem 0.75rem;
    top: 60px;
  }
  
  .comparison-table thead th:first-child {
    padding-left: 1rem;
  }
  
  .comparison-table tr.category-row td,
  .comparison-table tbody td:first-child {
    padding-left: 1rem;
  }
}

/* ==========================================================================
   Alternating Story Rows ("What You Can Do")
   ========================================================================== */
.story-rows-container {
  display: flex;
  flex-direction: column;
  gap: 5.5rem;
  margin-top: 3.5rem;
}

.story-row {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 4rem;
  align-items: center;
}

.story-row.story-row-reverse {
  grid-template-columns: 1.15fr 1fr;
}

.story-row.story-row-reverse .story-content {
  order: 2;
}

.story-row.story-row-reverse .story-visual-wrap {
  order: 1;
}

.story-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.story-eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  background: var(--bg-subtle);
  border: 1px solid rgba(26, 86, 219, 0.15);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  width: fit-content;
}

.story-heading {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.story-desc {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

.story-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.5rem;
}

.story-bullet-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.5;
}

.story-bullet-check {
  color: #10b981;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Light-Themed Visual Ambient Wrapper (Soft Rainbow / Pastel Canvas) */
.story-visual-wrap {
  background: radial-gradient(circle at 10% 15%, rgba(217, 249, 225, 0.45) 0%, transparent 45%),
              radial-gradient(circle at 90% 85%, rgba(254, 215, 170, 0.45) 0%, transparent 45%),
              radial-gradient(circle at 85% 15%, rgba(224, 231, 255, 0.55) 0%, transparent 45%),
              #f8fafc;
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 24px;
  padding: 2.25rem;
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modern Light Application Mockup Window */
.story-visual-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.03);
  overflow: hidden;
  color: #0f172a;
  font-size: 0.9rem;
  width: 100%;
}

.mockup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1.25rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.mockup-window-controls {
  display: flex;
  gap: 6px;
}

.mockup-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.mockup-dot.red { background: #f87171; }
.mockup-dot.yellow { background: #fbbf24; }
.mockup-dot.green { background: #34d399; }

.mockup-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.01em;
  font-family: var(--font-sans);
}

.mockup-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.mockup-badge.purple {
  background: #faf5ff;
  color: #9333ea;
  border: 1px solid #e9d5ff;
}

.mockup-badge.blue {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.mockup-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  background: #ffffff;
}

.mockup-item {
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 10px;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: all 0.15s ease;
}

.mockup-item:hover {
  border-color: #cbd5e1;
  background: #f1f5f9;
}

.mockup-item-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.mockup-item-tag {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
  flex-shrink: 0;
}

.mockup-item-tag.purple {
  background: #faf5ff;
  color: #7e22ce;
  border-color: #e9d5ff;
}

.mockup-item-tag.green {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

.mockup-item-tag.amber {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}

.mockup-item-tag.gray {
  background: #f1f5f9;
  color: #475569;
  border-color: #e2e8f0;
}

.mockup-item-title {
  font-weight: 600;
  color: #0f172a;
  font-size: 0.88rem;
}

.mockup-item-sub {
  font-size: 0.78rem;
  color: #64748b;
  margin-top: 0.15rem;
}

.mockup-action-btn {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35rem 0.8rem;
  border-radius: 6px;
  background: #0f172a;
  color: #ffffff;
  border: none;
  cursor: default;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.mockup-action-btn.secondary {
  background: #ffffff;
  color: #334155;
  border: 1px solid #cbd5e1;
}

.mockup-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.mockup-metric-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.75rem;
  text-align: center;
}

.mockup-metric-val {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
}

.mockup-metric-label {
  font-size: 0.72rem;
  color: #64748b;
  margin-top: 0.2rem;
  font-weight: 500;
}

@media (max-width: 900px) {
  .story-rows-container {
    gap: 3.5rem;
  }
  .story-row,
  .story-row.story-row-reverse {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .story-row.story-row-reverse .story-content {
    order: 1;
  }
  .story-row.story-row-reverse .story-visual-wrap {
    order: 2;
  }
  .story-visual-wrap {
    padding: 1.25rem;
  }
  .mockup-metric-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   8-Pillar Harness Intelligence Architecture & Master Equation
   ========================================================================== */
.equation-banner {
  background: #0d1117;
  color: #ffffff;
  border-radius: var(--radius-card);
  padding: 3rem 2.25rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.25);
  text-align: center;
  margin-bottom: 4.5rem;
}

.equation-tag {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-orange);
  margin-bottom: 0.6rem;
}

.equation-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  margin-bottom: 2rem;
  color: #ffffff;
}

.equation-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  max-width: 1040px;
  margin: 0 auto;
}

.equation-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 0.9rem 1.15rem;
  text-align: left;
  min-width: 170px;
  flex: 1;
  transition: all 0.2s ease;
}

.equation-pill:hover {
  border-color: rgba(255, 107, 43, 0.5);
  background: rgba(255, 255, 255, 0.08);
}

.equation-pill-tag {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--accent-orange);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.equation-pill-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
}

.equation-pill-sub {
  font-size: 0.78rem;
  color: #94a3b8;
  margin-top: 0.25rem;
}

.equation-op {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--accent-orange);
  padding: 0 0.25rem;
  user-select: none;
}

.equation-result {
  background: linear-gradient(135deg, rgba(255, 107, 43, 0.22), rgba(255, 107, 43, 0.06));
  border: 1.5px solid var(--accent-orange);
  border-radius: 12px;
  padding: 0.9rem 1.4rem;
  text-align: left;
  min-width: 200px;
  box-shadow: 0 4px 20px rgba(255, 107, 43, 0.15);
}

.equation-result .equation-pill-tag {
  color: #ffffff;
}

.equation-result .equation-pill-title {
  color: #ffffff;
  font-weight: 800;
}

.equation-caption {
  font-size: 1.05rem;
  color: #94a3b8;
  max-width: 760px;
  margin: 2.25rem auto 0;
  line-height: 1.6;
}

.harness-layer-container {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  padding: 2.5rem 2.25rem;
  margin-bottom: 2.5rem;
  box-shadow: var(--shadow-card);
  transition: all 0.25s ease;
}

.harness-layer-container:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--border-hover);
}

.layer-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 107, 43, 0.1);
  color: var(--accent-orange);
  border: 1px solid rgba(255, 107, 43, 0.25);
  margin-bottom: 0.75rem;
}

.layer-title {
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  font-weight: 800;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.layer-desc {
  font-size: 1.02rem;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 820px;
  margin-bottom: 2rem;
}

.layer-pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.25rem;
}

.layer-pillars-grid.two-col {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 768px) {
  .layer-pillars-grid.two-col {
    grid-template-columns: 1fr;
  }
}

.pillar-item {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}

.pillar-item:hover {
  border-color: var(--border-hover);
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.pillar-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.pillar-number {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--accent-orange);
  background: rgba(255, 107, 43, 0.1);
  border: 1px solid rgba(255, 107, 43, 0.2);
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  letter-spacing: 0.05em;
}

.pillar-icon-mini {
  color: var(--text-muted);
}

.pillar-item-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.pillar-item-desc {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.harness-foundation-bar {
  background: linear-gradient(135deg, rgba(255, 107, 43, 0.04), rgba(255, 107, 43, 0.01));
  border: 1.5px solid rgba(255, 107, 43, 0.25);
  border-radius: var(--radius-card);
  padding: 2.25rem;
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-top: 1.5rem;
  margin-bottom: 4rem;
}

.foundation-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 107, 43, 0.1);
  color: var(--accent-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.foundation-title {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 0.4rem;
  color: var(--text-primary);
}

.foundation-desc {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 640px) {
  .equation-banner {
    padding: 2rem 1.25rem;
  }
  .equation-flow {
    flex-direction: column;
    width: 100%;
  }
  .equation-pill,
  .equation-result {
    width: 100%;
  }
  .equation-op {
    transform: rotate(90deg);
    padding: 0.25rem 0;
  }
  .harness-layer-container {
    padding: 1.75rem 1.25rem;
  }
  .harness-foundation-bar {
    flex-direction: column;
    padding: 1.75rem 1.25rem;
  }
}

/* ==========================================================================
   Harness Hub Gateway Grid & Outcome Comparisons
   ========================================================================== */

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

.gateway-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}

.gateway-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-card);
}

.gateway-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 107, 43, 0.08);
  color: var(--accent-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.gateway-title {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
}

.gateway-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.gateway-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--accent-orange);
  text-decoration: none;
  transition: gap 0.2s ease;
}

.gateway-link:hover {
  gap: 0.75rem;
}

/* Outcome Comparison Grid (Chatbot vs Whiia) */
.outcome-comparison-container {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  padding: 3rem 2.5rem;
  margin: 3.5rem 0;
}

.outcome-comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
}

.outcome-col {
  border-radius: var(--radius-card-sm);
  padding: 2rem;
}

.outcome-col-negative {
  background: #fff8f8;
  border: 1px solid #fed7d7;
}

.outcome-col-positive {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.outcome-col-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.outcome-col-negative .outcome-col-title {
  color: #991b1b;
}

.outcome-col-positive .outcome-col-title {
  color: #166534;
}

.outcome-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 0.92rem;
  line-height: 1.6;
}

.outcome-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.outcome-item-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

/* ==========================================================================
   Recipe Cards (playbooks.html)
   ========================================================================== */

.recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 1.75rem;
  margin-top: 2rem;
  margin-bottom: 3.5rem;
}

.recipe-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
}

.recipe-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-hover);
}

.recipe-header {
  margin-bottom: 1.25rem;
}

.recipe-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 107, 43, 0.08);
  color: var(--accent-orange);
  margin-bottom: 0.75rem;
}

.recipe-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}

.recipe-objective {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

.recipe-body {
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: var(--radius-card-sm);
  padding: 1.25rem;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.recipe-row {
  display: flex;
  gap: 0.75rem;
  font-size: 0.86rem;
  line-height: 1.5;
}

.recipe-row-label {
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  width: 90px;
  flex-shrink: 0;
}

.recipe-row-content {
  color: var(--text-primary);
}

@media (max-width: 900px) {
  .harness-gateway-grid {
    grid-template-columns: 1fr;
  }
  .outcome-comparison-grid {
    grid-template-columns: 1fr;
  }
  .recipe-grid {
    grid-template-columns: 1fr;
  }
  .outcome-comparison-container {
    padding: 2rem 1.25rem;
  }
}

/* ==========================================================================
   BOXED LAYOUT & UNIFIED SPEC LEDGER (ANTI-CARD FATIGUE)
   ========================================================================== */

.boxed-page-main {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.boxed-shell {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-surface);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  margin-bottom: 3.5rem;
}

.boxed-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}

.boxed-row:last-child {
  border-bottom: none;
}

.boxed-anchor {
  padding: 2.25rem 2rem;
  background: #fafbfc;
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.boxed-anchor-tag {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-orange);
  margin-bottom: 0.5rem;
  display: inline-block;
}

.boxed-anchor-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.25;
  margin-bottom: 0.6rem;
}

.boxed-anchor-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 1.25rem;
}

.boxed-anchor-link {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  transition: color 0.15s ease;
}

.boxed-anchor-link:hover {
  color: var(--accent-orange);
}

.boxed-content {
  padding: 2.25rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.boxed-spec-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.boxed-spec-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
}

.boxed-spec-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.spec-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.spec-pill {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--text-secondary);
}

.spec-pill.orange {
  background: rgba(255, 107, 43, 0.1);
  color: var(--accent-orange);
}

.spec-pill.green {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.spec-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-primary);
}

.spec-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Single Boxed Gateway Panel on /harness.html */
.gateway-boxed-panel {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-surface);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  margin-bottom: 3.5rem;
}

.gateway-segment {
  padding: 2.5rem 2rem;
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}

.gateway-segment:last-child {
  border-right: none;
}

.gateway-segment:hover {
  background: #fcfcfd;
}

.gateway-segment-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #f4f5f7;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  margin-bottom: 1.25rem;
}

.gateway-segment-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.6rem;
}

.gateway-segment-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 1.5rem;
}

.gateway-segment-link {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent-orange);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Single Boxed Outcome Comparison Panel */
.outcome-boxed-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-surface);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  margin-bottom: 3.5rem;
}

.outcome-segment {
  padding: 2.75rem 2.5rem;
}

.outcome-segment:first-child {
  border-right: 1px solid var(--border-color);
  background: #fcfbfa;
}

.outcome-segment:last-child {
  background: #ffffff;
}

.outcome-segment-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 1.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-subtle);
}

.outcome-segment-header.negative {
  color: #b91c1c;
}

.outcome-segment-header.positive {
  color: #047857;
}

/* Playbook Methodology Stepper Panel */
.playbook-stepper-panel {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-surface);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  margin-bottom: 3.5rem;
}

.stepper-segment {
  padding: 2rem 1.75rem;
  border-right: 1px solid var(--border-color);
}

.stepper-segment:last-child {
  border-right: none;
}

.stepper-num {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-orange);
  margin-bottom: 0.4rem;
}

.stepper-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.stepper-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* Playbook Process Ledger Table */
.playbook-ledger-wrap {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-surface);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  margin-bottom: 3.5rem;
}

.playbook-ledger-header {
  display: grid;
  grid-template-columns: 220px 200px 1fr 200px;
  padding: 1rem 1.75rem;
  background: #f6f8fa;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

.playbook-ledger-row {
  display: grid;
  grid-template-columns: 220px 200px 1fr 200px;
  padding: 1.5rem 1.75rem;
  border-bottom: 1px solid var(--border-subtle);
  align-items: start;
  gap: 1.5rem;
  font-size: 0.88rem;
  line-height: 1.55;
  transition: background 0.15s ease;
}

.playbook-ledger-row:last-child {
  border-bottom: none;
}

.playbook-ledger-row:hover {
  background: #fafbfc;
}

.ledger-col-name {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ledger-col-title {
  font-weight: 800;
  color: var(--text-primary);
  font-size: 0.98rem;
}

.ledger-col-tag {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}

.ledger-col-trigger {
  color: var(--text-secondary);
}

.ledger-col-steps {
  color: var(--text-primary);
}

.ledger-col-human {
  color: #047857;
  font-weight: 600;
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.15);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  font-size: 0.82rem;
  line-height: 1.45;
}

/* Media Queries for Boxed Panels */
@media (max-width: 900px) {
  .boxed-row {
    grid-template-columns: 1fr;
  }
  .boxed-anchor {
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
    padding: 1.5rem;
  }
  .boxed-content {
    padding: 1.5rem;
  }
  .gateway-boxed-panel {
    grid-template-columns: 1fr;
  }
  .gateway-segment {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    padding: 1.75rem 1.5rem;
  }
  .gateway-segment:last-child {
    border-bottom: none;
  }
  .outcome-boxed-panel {
    grid-template-columns: 1fr;
  }
  .outcome-segment {
    padding: 2rem 1.5rem;
  }
  .outcome-segment:first-child {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }
  .playbook-stepper-panel {
    grid-template-columns: 1fr;
  }
  .stepper-segment {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    padding: 1.5rem;
  }
  .stepper-segment:last-child {
    border-bottom: none;
  }
  .playbook-ledger-header {
    display: none;
  }
  .playbook-ledger-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 1.5rem;
  }
  .ledger-col-trigger::before {
    content: "TRIGGER: ";
    font-weight: 700;
    font-size: 0.72rem;
    color: var(--text-dim);
  }
  .ledger-col-steps::before {
    content: "AI STEPS: ";
    font-weight: 700;
    font-size: 0.72rem;
    color: var(--text-dim);
  }
}




/* ==========================================================================
   Shared IA foundation — 2026-09-27 upgrade
   Contract: scratch/upgrade-2026-09-27/shared-contracts.md
   Base styles for the doc 01 §4 information architecture: signed-in nav
   actions, audience routes, benefits, plan cards, FAQ, setup steps and the
   "Illustrative example" caption. Cluster-specific styles are written to
   scratch/upgrade-2026-09-27/css/*.css and merged here by the integrator.
   ========================================================================== */

/* --- Signed-in / signed-out navigation actions ---------------------------
   Markup contract: #nav-auth-controls and #mobile-auth-controls each carry
   data-auth-state = guest | setup | ready (default "guest" in the HTML so
   the page is correct before JS runs). app.js flips the attribute; it does
   not rewrite the children. Children carry data-auth-action =
   signin | start-free | continue-setup | open-account. ------------------- */
[data-auth-state] [data-auth-action] {
  display: none;
}

[data-auth-state="guest"] [data-auth-action="signin"],
[data-auth-state="guest"] [data-auth-action="start-free"] {
  display: inline-flex;
}

[data-auth-state="setup"] [data-auth-action="continue-setup"] {
  display: inline-flex;
}

[data-auth-state="ready"] [data-auth-action="open-account"] {
  display: inline-flex;
}

/* The mobile drawer stacks the same four actions full width. */
.mobile-drawer-auth[data-auth-state="guest"] [data-auth-action="signin"],
.mobile-drawer-auth[data-auth-state="guest"] [data-auth-action="start-free"],
.mobile-drawer-auth[data-auth-state="setup"] [data-auth-action="continue-setup"],
.mobile-drawer-auth[data-auth-state="ready"] [data-auth-action="open-account"] {
  display: flex;
  width: 100%;
  justify-content: center;
}

/* --- Audience route cards (four peer groups — equal prominence, doc 01 §3) */
.audience-routes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.audience-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card-sm);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: border-color 0.15s ease, box-shadow 0.2s ease;
}

.audience-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-card-hover);
}

.audience-card-title {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--text-primary);
}

.audience-card-body {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.audience-card-example {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-muted);
  border-top: 1px solid var(--border-subtle);
  padding-top: 0.85rem;
  margin-top: auto;
}

.audience-card-note,
.section-note {
  font-size: 0.86rem;
  color: var(--text-muted);
  max-width: 760px;
  margin: 1.5rem auto 0;
  text-align: center;
}

/* --- Benefit blocks ------------------------------------------------------ */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.benefit-block {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card-sm);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.benefit-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.benefit-body {
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* --- Plan cards (annual-first, doc 01 §7 / doc 02 plan card table) -------
   Each card names its plan in visible text (data-plan supplies the label
   hook), so plan distinctions survive a stacked phone layout and do not
   depend on color alone (doc 01 §12). No popularity class and no
   headline-saving class exists here on purpose. ------------------------ */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  max-width: 1240px;
  margin: 0 auto;
}

@media (min-width: 1080px) {
  .plan-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.plan-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  padding: 2rem 1.5rem;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  position: relative;
}

.plan-name {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-primary);
}

.plan-price {
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  line-height: 1.1;
}

.plan-period {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.plan-equiv {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.plan-desc {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.plan-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
  margin-top: 0.25rem;
}

.plan-feature {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.plan-feature::before {
  content: "✓";
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text-primary);
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.plan-cta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.plan-cta .btn {
  width: 100%;
}

.plan-note {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 680px;
  margin: 2rem auto 0;
  text-align: center;
}

/* --- FAQ blocks (native <details>/<summary>: keyboard accessible, no JS) - */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 820px;
}

.faq-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card-sm);
  padding: 0 1.35rem;
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  padding: 1.1rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-muted);
  flex-shrink: 0;
}

.faq-item[open] summary::after {
  content: "–";
}

.faq-answer {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
  padding: 0 0 1.15rem;
}

/* --- Setup step lists ---------------------------------------------------- */
.setup-steps {
  list-style: none;
  counter-reset: setup-step;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 780px;
}

.setup-step {
  counter-increment: setup-step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: start;
}

.setup-step::before {
  content: counter(setup-step);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--btn-dark-bg);
  color: var(--btn-dark-text);
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  justify-self: start;
}

.setup-step-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
}

.setup-step-body {
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* --- "Illustrative example" panels and captions --------------------------
   Authored demo panels must be wrapped in .example-panel and carry an
   .example-caption, or be removed. See shared-contracts.md §5. ----------- */
.example-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card-sm);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}

.example-caption {
  display: block;
  font-size: 0.8rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--text-muted);
  border-left: 2px solid var(--border-color);
  padding-left: 0.75rem;
  margin-top: 1rem;
}

/* --- Footer actions (Sign in / Get started free rendered as buttons) ----- */
.footer-auth {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

button.footer-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
  transition: color 0.15s ease;
}

button.footer-link:hover {
  color: var(--text-primary);
}

/* --- Responsive rules: keep plan distinctions readable on a phone -------- */
@media (max-width: 960px) {
  .plan-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .plan-grid,
  .audience-routes,
  .benefit-grid {
    grid-template-columns: 1fr;
  }

  .plan-card {
    padding: 1.5rem 1.25rem;
  }

  .plan-price {
    font-size: 2.1rem;
  }

  .setup-step {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .faq-item {
    padding: 0 1.05rem;
  }
}

/* ==========================================================================
   Cluster: home — homepage sequence
   Merged from scratch/upgrade-2026-09-27/css/home.css (scratch fragment — review artifact; the served
   site loads only this file). Order per shared-contracts.md §5:
   home → commerce → depth → behaviour. Scope: hero, demonstration, audience routes, benefits, evidence, ownership,
   plan summary, final CTA
   ========================================================================== */

/* ===== Cluster: home — homepage sequence sections (hero, demonstration, audience routes composition, benefits, evidence, ownership, plan summary, final CTA) ===== */

/* --- Hero: supporting lines and the one-sentence harness definition ------
   These extend the base .hero-* rules in styles.css; they do not replace them. */
.hero-supporting {
  /* Base .hero-subtitle carries a 2.5rem bottom margin; two stacked subtitles
     need less space between them. */
  margin-bottom: 1.75rem;
  font-weight: 500;
}

.hero-explain {
  max-width: 760px;
  margin: 0 auto 2.5rem;
  padding: 1.25rem 1.75rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card-sm);
  box-shadow: var(--shadow-card);
}

.hero-explain p {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Shared support note (merged): the homepage uses .hero-support-note and the
   depth pages use .depth-hero-note with the same metrics plus centered text.
   Before the merge these were two copies in home.css and depth.css (line-height
   1.55 vs 1.6); declared once here, unified at 1.6. */
.hero-support-note,
.depth-hero-note {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto;
}

.depth-hero-note {
  text-align: center;
}



/* Inline text link inside homepage prose. Base `a { color: inherit }` keeps
   links invisible in body copy without this hook. */
.home-text-link {
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.home-text-link:hover {
  color: var(--accent-orange);
}

/* Centered body paragraph under a centered section header. */
.home-body {
  max-width: 760px;
  margin: 0 auto 1.25rem;
  font-size: 1.02rem;
}

/* --- Demonstration section: the prepared-brief example ------------------ */
.demo-brief {
  /* Extends .example-panel (padding and border come from the base class). */
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 900px;
  margin: 2.5rem auto 0;
}

.demo-brief-head {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-subtle);
}

.demo-brief-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.demo-brief-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.demo-brief-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.demo-brief-block {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card-sm);
  padding: 1.1rem 1.2rem;
}

/* Body line inside a demo block (index.html uses .demo-block-body; the
   fragment defined only .demo-block-title — added at merge). */
.demo-block-body {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.demo-block-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 0.7rem;
}

.demo-fact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.demo-fact-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.demo-fact-text {
  flex: 1 1 auto;
}

.demo-source-tag {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.55rem;
  white-space: nowrap;
}

/* --- Audience route cards: destination link inside each homepage card ---- */
.audience-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 0.75rem;
}

.audience-card-link::after {
  content: "→";
}

.audience-card-link:hover {
  color: var(--accent-orange);
}

/* --- Follow-up link rows after a section's content ---------------------- */
.home-followup-links {
  margin-top: 2.5rem;
}

/* --- FAQ list inside a .section ---------------------------------------- */
.home-faq {
  /* .faq-list sets max-width but no auto margins; center it in the section. */
  margin: 0 auto;
}

/* --- Final registration banner ----------------------------------------- */
.home-final-cta {
  /* Sits directly after the FAQ, so tighter than .cta-banner-inverted's
     default 4rem top margin. Same specificity, declared later: wins. */
  margin-top: 3rem;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 960px) {
  .demo-brief-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hero-explain {
    padding: 1rem 1.15rem;
  }

  .demo-brief {
    padding: 1.15rem;
  }

  .demo-brief-block {
    padding: 1rem;
  }

  /* First paint at 390x844 (QA round 2, item 19): the consent bar sits above
     the page in normal flow, so the homepage hero keeps its primary action
     above the fold with tighter spacing on phones. Scope is the homepage hero
     (#opening) only — other pages keep the shared .hero-section rhythm. */
  #opening.hero-section {
    padding-top: 1.75rem;
  }

  #opening .hero-badge {
    margin-bottom: 1rem;
  }

  #opening .hero-title {
    margin-bottom: 0.75rem;
  }

  #opening .hero-subtitle {
    margin-bottom: 1.5rem;
  }
}

/* ==========================================================================
   Cluster: commerce — pricing and checkout
   Merged from scratch/upgrade-2026-09-27/css/commerce.css (scratch fragment — review artifact; the served
   site loads only this file). Order per shared-contracts.md §5:
   home → commerce → depth → behaviour. Scope: pricing page, plan-card compositions, checkout modal,
   centered FAQ column, auth modal code field
   ========================================================================== */

/* ===== Cluster: commerce — pricing page, plan-card compositions, checkout modal ===== */

/* --- Annual price row: amount first, period as secondary ---------------
   Composes base .plan-price / .plan-period from styles.css, section
   "Shared IA foundation — 2026-09-27 upgrade". The spans already read as
   "USD 120 /year" inline before this fragment is appended; these rules only
   align the baseline and let the row wrap on narrow screens. -------------- */
.price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.1rem 0.35rem;
}

/* --- Centered question column ------------------------------------------
   Base .faq-list caps width at 820px but does not center it, so inside a
   1200px .section it would sit left. Extends the base rule; no base
   declaration is overridden. Used by the pricing questions block and by the
   terms/privacy document column (both sit inside .section). --------------- */
.section > .faq-list {
  margin-left: auto;
  margin-right: auto;
}

/* --- FAQ answer paragraphs ----------------------------------------------
   Base p sets 1.05rem, which would render larger than the .faq-answer it
   sits in; answer text follows the container instead. --------------------- */
.section > .faq-list .faq-answer p {
  font-size: inherit;
  color: inherit;
  line-height: inherit;
}

/* --- Auth modal code field ----------------------------------------------
   The sign-in / account-creation modal renders on pricing, terms and
   privacy, and no other cluster claims the auth modal. This adds code-field
   typography only; the field keeps .form-input behaviour. ----------------- */
.auth-otp-input {
  text-align: center;
  letter-spacing: 4px;
  font-size: 1.25rem;
  font-weight: 700;
}

/* ==========================================================================
   Cluster: depth — resources and depth pages
   Merged from scratch/upgrade-2026-09-27/css/depth.css (scratch fragment — review artifact; the served
   site loads only this file). Order per shared-contracts.md §5:
   home → commerce → depth → behaviour. Scope: resources, harness, architecture, functions, playbooks, privacy, terms
   ========================================================================== */

/* ===== Cluster: depth — resources, harness, architecture, functions, playbooks, privacy, terms ===== */

/* Scope (2026-09-27): page-specific structures for resources.html, harness.html,
   architecture.html, functions.html and playbooks.html. Extends the base classes in
   web/frontend/styles.css (section "Shared IA foundation — 2026-09-27 upgrade") rather
   than redefining them. Privacy and terms add their own rules below this block.
   Contract: scratch/upgrade-2026-09-27/shared-contracts.md §5. */

/* .depth-hero-note's base rule is declared once in the home cluster section
   above (shared with .hero-support-note); only the phone refinement lives
   here. */

/* --- Two-segment gateway panel (base .gateway-boxed-panel is 3 columns) ----- */
.gateway-two {
  grid-template-columns: 1fr 1fr;
}

/* --- Work-example line inside a boxed-row anchor (functions.html) ----------- */
.work-example {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
  margin-top: auto;
}

/* --- Capability rows (functions.html) -------------------------------------- */
.capability-list {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding: 2.25rem 2rem;
}

.capability-item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.capability-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.capability-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.capability-desc {
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.capability-note {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  margin-top: 1.25rem;
}

.tier-note {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.tier-note a {
  color: var(--text-secondary);
}

/* --- Plan tags (visible text label, never colour alone — doc 01 §12) -------- */
.plan-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  padding: 0.18rem 0.6rem;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.plan-tag-free {
  border-color: var(--border-color);
  color: var(--text-secondary);
}

.plan-tag-go {
  border-color: var(--accent-orange);
  color: var(--accent-orange);
  background: var(--accent-orange-subtle);
}

.plan-tag-pro {
  border-color: var(--btn-dark-bg);
  color: var(--btn-dark-bg);
  background: var(--bg-subtle-alt);
}

.plan-tag-ultra {
  border-color: var(--btn-dark-bg);
  background: var(--btn-dark-bg);
  color: var(--btn-dark-text);
}

.benefit-title .plan-tag {
  vertical-align: middle;
  margin-left: 0.35rem;
}

/* --- Connected-task flow (functions.html) ---------------------------------- */
.capability-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.flow-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 1.15rem 1.1rem;
}

.flow-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--btn-dark-bg);
  color: var(--btn-dark-text);
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.flow-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
}

.flow-desc {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.flow-step .plan-tag {
  margin-top: auto;
}

/* --- Method example panel (playbooks.html) --------------------------------- */
.example-panel-follows {
  margin-top: 2rem;
}

.method-example {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 1.35rem 1.5rem;
}

.method-example-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.method-example-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.method-example-list li {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-secondary);
  padding-left: 1.1rem;
  position: relative;
}

.method-example-list li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--text-dim);
}

.method-example-list strong {
  color: var(--text-primary);
}

/* --- The full method list (playbooks.html) --------------------------------- */
.method-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.method-group {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card-sm);
  padding: 1.5rem 1.5rem 1.35rem;
  box-shadow: var(--shadow-card);
}

.method-group-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-bottom: 0.85rem;
}

.method-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.method-list li {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.method-item-ultra {
  flex-wrap: wrap;
}

/* --- Responsive rules (breakpoints 960px / 640px — contract §5) ------------ */
@media (max-width: 960px) {
  .gateway-two {
    grid-template-columns: 1fr;
  }

  .gateway-two .gateway-segment {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }

  .capability-flow {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

@media (max-width: 640px) {
  .capability-list {
    padding: 1.5rem 1.25rem;
  }

  .work-example {
    margin-top: 1rem;
  }

  .method-groups {
    grid-template-columns: 1fr;
  }

  .method-list li {
    flex-wrap: wrap;
  }

  .depth-hero-note {
    font-size: 0.85rem;
  }
}

/* ==========================================================================
   Cluster: behaviour — guide, getting started, account
   Merged from scratch/upgrade-2026-09-27/css/behaviour.css (scratch fragment — review artifact; the served
   site loads only this file). Order per shared-contracts.md §5:
   home → commerce → depth → behaviour. Scope: assessment guide, auth modal footer, day/account screens
   ========================================================================== */

/* ===== Cluster: behaviour — getting started, /start/day/*, reframed assessment guide, dashboard/account ===== */

/* --- "Find your first useful task" guide (/assessment.html) ----------------
   The shared foundation already carries .assessment-container, the question and
   option card rules and the progress bar (styles.css "Assessment Quiz UI
   Standards"). These rules cover the reframed page shell, the recommendation
   panel and the optional email block only. No hour, capacity or turnaround
   figure appears anywhere in this guide (review 01 §9). */

.guide-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 5rem;
  width: 100%;
}

.guide-intro {
  text-align: center;
  margin-bottom: 2.5rem;
}

.guide-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  margin: 0.75rem 0;
}

.guide-lead {
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.6;
}

.guide-note {
  color: var(--text-muted);
  max-width: 640px;
  margin: 1rem auto 0;
  font-size: 0.92rem;
  line-height: 1.6;
}

.guide-note a {
  color: var(--text-primary);
  font-weight: 600;
}

/* --- Recommendation panel -------------------------------------------------- */

.guide-result-header {
  text-align: center;
  margin-bottom: 2rem;
}

.guide-result-title {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 800;
  line-height: 1.3;
  margin: 0.75rem 0 0.5rem;
}

.guide-result-desc {
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto;
}

.guide-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.guide-result-card,
.guide-next-step {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card-sm);
  padding: 1.5rem;
}

.guide-next-step {
  margin-bottom: 1.5rem;
}

.guide-result-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.guide-result-value {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.5;
}

.guide-result-aside {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 0.5rem;
}

.guide-result-link {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.guide-next-step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.guide-honesty {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 2rem;
}

/* --- Optional email delivery (always after the recommendation) ------------- */

.guide-email-block {
  border-top: 1px solid var(--border-subtle);
  padding-top: 1.5rem;
}

.guide-email-intro {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 1rem;
}

.guide-email-block .form-group {
  margin-bottom: 1rem;
}

.guide-email-status {
  font-size: 0.9rem;
  line-height: 1.5;
  margin-top: 0.75rem;
  min-height: 1.2em;
}

.guide-email-status.is-ok {
  color: var(--text-secondary);
}

.guide-email-status.is-error {
  color: var(--accent-orange);
}

/* --- Auth modal footer: direct account creation (review 01 §8) ------------- */

.auth-modal-footer {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.auth-modal-footer-action {
  display: inline;
  background: none;
  border: none;
  padding: 0;
  margin-left: 0.35rem;
  font: inherit;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: underline;
  cursor: pointer;
}

.auth-modal-footer-action:hover {
  color: var(--accent-orange);
}

@media (max-width: 640px) {
  .guide-main {
    padding: 2.5rem 1rem 3.5rem;
  }

  .guide-next-step-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Website Direction (October 2026): Connections, Continuity & Start Paths
   ========================================================================== */

/* 1. Connections Relationship Diagram */
.connections-diagram-wrap {
  background: radial-gradient(circle at 10% 20%, rgba(217, 249, 225, 0.45) 0%, transparent 45%),
              radial-gradient(circle at 90% 80%, rgba(254, 215, 170, 0.45) 0%, transparent 45%),
              radial-gradient(circle at 50% 50%, rgba(224, 231, 255, 0.5) 0%, transparent 50%),
              #f8fafc;
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: var(--radius-card);
  padding: 2.5rem 2rem;
  margin: 2.5rem auto 1.5rem;
  max-width: 1040px;
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.03);
}

.diagram-grid {
  display: grid;
  grid-template-columns: 1fr auto 1.35fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

.diagram-card {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card-sm);
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.diagram-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.diagram-card-subtitle {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.diagram-card-pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-orange, #ff6b2b);
  background: rgba(255, 107, 43, 0.08);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  width: fit-content;
}

.diagram-channel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.diagram-channel-item {
  background: #f8fafc;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.diagram-channel-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.diagram-channel-desc {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.diagram-arrow {
  color: var(--text-dim);
  font-size: 1.35rem;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.diagram-caption {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* 2. Continuity Flow Sequence */
.continuity-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 1.25rem;
  margin: 2.5rem auto 1.5rem;
  max-width: 980px;
}

.continuity-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card-sm);
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  text-align: left;
}

.continuity-step-num {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-orange, #ff6b2b);
  margin-bottom: 0.35rem;
}

.continuity-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}

.continuity-card-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.continuity-arrow {
  color: var(--text-dim);
  font-size: 1.4rem;
  font-weight: 300;
  user-select: none;
}

.continuity-loop {
  margin: 1.5rem auto 0;
  padding: 0.75rem 1.25rem;
  background: var(--bg-subtle);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* 3. Dark Start Paths Panel */
.start-paths-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 3rem 0 2rem;
  text-align: left;
}

.start-path-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-card-sm);
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  transition: all 0.2s ease;
}

.start-path-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.22);
}

.start-path-title {
  font-size: 1.45rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.65rem;
}

.start-path-desc {
  font-size: 0.95rem;
  color: #94a3b8;
  line-height: 1.55;
}

.start-path-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.start-path-note {
  font-size: 0.85rem;
  color: #64748b;
  margin-top: 1.5rem;
  line-height: 1.5;
}

/* Responsive adjustments */
@media (max-width: 960px) {
  .diagram-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .diagram-arrow {
    transform: rotate(90deg);
  }
  .continuity-flow {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .continuity-arrow {
    transform: rotate(90deg);
  }
  .start-paths-grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------ */
/* Account & onboarding workspace (moved from account.html inline styles,
   shared by account.html and onboarding.html)                        */
/* ------------------------------------------------------------------ */
    /* Account workspace (review 01 §4 "Getting started": account, initial profile,
       installation, first result, return visit). Scoped rules only. */
    .account-shell { max-width: 1080px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }
    .account-head {
      display: flex; justify-content: space-between; align-items: flex-start;
      flex-wrap: wrap; gap: 1rem; border-bottom: 1px solid var(--border-subtle);
      padding-bottom: 1.25rem; margin-bottom: 1.75rem;
    }
    .account-eyebrow {
      font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em;
      font-weight: 700; color: var(--accent-orange); margin-bottom: 0.35rem;
    }
    .account-title { font-size: 1.7rem; font-weight: 800; margin: 0 0 0.35rem; }
    .account-sub { font-size: 0.95rem; color: var(--text-muted); margin: 0; }
    .account-plan { text-align: right; }
    .account-plan-badge {
      display: inline-block; padding: 0.35rem 0.85rem; border-radius: 999px;
      background: rgba(234, 78, 26, 0.14); border: 1px solid var(--accent-orange);
      color: var(--accent-orange); font-weight: 700; font-size: 0.85rem;
    }
    .account-expiry { display: block; margin-top: 0.4rem; font-size: 0.8rem; color: var(--text-muted); }
    /* Phase E: two account zones (Getting started / Your workspace) */
    .account-zone-head { margin: 1.75rem 0 1rem; }
    .account-steps { display: flex; gap: 1.25rem; list-style: none; padding: 0; margin: 0.5rem 0 0; flex-wrap: wrap; }
    .account-steps li { font-size: 0.9rem; color: var(--text-secondary, #cbd5e1); }
    .account-panel {
      background: var(--bg-subtle); border: 1px solid var(--border-subtle);
      border-radius: var(--radius-card-sm, 12px); padding: 1.5rem; margin-bottom: 1.5rem;
    }
    .account-panel h2 { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.5rem; }
    .account-panel h3 { font-size: 0.95rem; font-weight: 700; margin: 1.25rem 0 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
    .account-panel p { color: var(--text-secondary); line-height: 1.6; }
    .account-note { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; }
    .account-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    @media (max-width: 640px) { .account-field-row { grid-template-columns: 1fr; } }
    .account-status { margin-left: 0.75rem; font-size: 0.88rem; color: var(--accent-orange); }
    .account-seed-area { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem; }
    .account-review-head {
      display: flex; justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem;
    }
    .account-evidence {
      margin-bottom: 1.25rem; padding: 1rem; border-radius: 8px;
      background: rgba(0, 0, 0, 0.22); border: 1px solid var(--border-subtle);
      font-size: 0.85rem;
    }
    .account-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
    .account-grants { list-style: none; padding: 0; margin: 0 0 1rem; }
    .account-grants li {
      padding: 0.7rem 0.9rem; margin-bottom: 0.6rem; border-radius: 8px;
      background: rgba(255, 255, 255, 0.04); font-size: 0.9rem;
    }

    /* "Continue where you left off": the unfinished next step, always first
       (review 01 §8 "prioritize the unfinished next step"; copy 02 returning-user
       row). app.js fills it from what this account has actually done — never
       from the plan tier, and never into an upgrade prompt. */
    .account-next {
      background: var(--bg-subtle);
      border: 1px solid var(--border-subtle);
      border-left: 3px solid var(--accent-orange);
      border-radius: var(--radius-card-sm, 12px);
      padding: 1.25rem 1.5rem;
      margin-bottom: 1.5rem;
    }
    .account-next-label {
      font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em;
      font-weight: 700; color: var(--accent-orange); margin-bottom: 0.35rem;
    }
    .account-next-title { font-size: 1.3rem; font-weight: 800; margin: 0 0 0.4rem; }
    .account-next-body {
      color: var(--text-secondary); line-height: 1.6; font-size: 0.95rem;
      margin: 0 0 0.9rem;
    }
    .account-next-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
    .account-claim-note {
      display: block; margin-top: 0.15rem; color: var(--text-muted);
      font-size: 0.82rem; line-height: 1.5;
    }

/* Smart sticky nav: respect reduced-motion preferences (no slide animation). */
@media (prefers-reduced-motion: reduce) {
  header { transition: none; }
}

/* Onboarding: polished BCH display with inline editing */
.bch-doc-card {
  background: rgba(255,255,255,0.03); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card-sm, 12px); padding: 1.25rem 1.5rem; margin: 1rem 0;
}
.bch-doc-title { margin: 0 0 0.75rem; font-size: 1.05rem; font-weight: 800; }
.bch-section { border-top: 1px solid var(--border-subtle); padding: 0.75rem 0; }
.bch-section:first-of-type { border-top: none; padding-top: 0; }
.bch-section-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.bch-section-head h4 { margin: 0; font-size: 0.92rem; font-weight: 700; }
.bch-items { margin: 0.5rem 0 0; padding-left: 1.15rem; }
.bch-items li { margin: 0.25rem 0; line-height: 1.5; }
.bch-section-body .bch-edit-area { width: 100%; }
.account-steps li.done { color: var(--accent-orange); }
.account-steps li.done::after { content: " ✓"; }

/* Connection app chips (icon + name; icons are nominative brand marks) */
.app-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 0.75rem; }
.app-chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.35rem 0.75rem; border: 1px solid var(--border-subtle);
  border-radius: 999px; font-size: 0.85rem; background: rgba(255,255,255,0.03);
}
.app-chip img { width: 16px; height: 16px; display: block; }

/* --- Onboarding review table (2026-10-04 redesign) ---------------------- */
.profile-usage-note {
  background: rgba(255, 107, 53, 0.07);
  border: 1px solid rgba(255, 107, 53, 0.25);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.profile-usage-note h3 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  color: var(--accent-orange);
}
.profile-usage-note p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-secondary, #cbd5e1);
}

.review-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.review-table th {
  text-align: left;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #94a3b8);
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}
.review-group-head td {
  padding: 1rem 0.75rem 0.5rem;
  background: rgba(148, 163, 184, 0.08);
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
.review-group-head .account-note { display: block; margin-top: 2px; }
.review-row td {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  vertical-align: top;
  line-height: 1.5;
}
.review-cat { white-space: nowrap; color: var(--text-secondary, #cbd5e1); }
.review-quote {
  color: var(--text-muted, #94a3b8);
  font-style: italic;
  max-width: 280px;
}
.review-store { max-width: 420px; }
.review-chip {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  white-space: nowrap;
  background: rgba(255, 107, 53, 0.15);
  color: var(--accent-orange);
}
.review-use { width: 56px; text-align: center; }
.review-use input { width: 18px; height: 18px; accent-color: var(--accent-orange); }

.doc-guidance {
  border-left: 3px solid var(--accent-orange);
  background: rgba(148, 163, 184, 0.08);
  border-radius: 0 10px 10px 0;
  padding: 0.85rem 1.1rem;
  margin: 1.25rem 0 0.75rem;
}
.doc-guidance h4 { margin: 0 0 0.45rem; font-size: 0.95rem; }
.doc-guidance p {
  margin: 0.2rem 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-secondary, #cbd5e1);
}

@media (max-width: 720px) {
  .review-table thead { display: none; }
  .review-row, .review-group-head { display: block; }
  .review-row td { display: block; border: 0; padding: 0.25rem 0.75rem; }
  .review-row { display: block; padding: 0.75rem 0; border-bottom: 1px solid rgba(148, 163, 184, 0.18); }
  .review-use { text-align: left; }
  .review-quote, .review-store { max-width: none; }
}

/* --- Homepage recomposition (2026-10-04 HOME-01..05) ----------------------
   Scoped to index.html via home-* classes and #opening so shared components
   (account, onboarding, pricing, legal) are not restyled. Existing fonts and
   colours are reused; hierarchy comes from scale, measure and spacing. */
#opening { padding: 104px 24px 96px; }
#opening .hero-title { font-size: clamp(2.25rem, 5.2vw, 4.75rem); line-height: 1.08; max-width: 15ch; margin-left: auto; margin-right: auto; }
#opening .hero-subtitle { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.6; max-width: 34em; margin: 1.75rem auto 0; }
#opening .hero-explain { max-width: 34em; margin: 1.25rem auto 0; }
#opening .hero-explain p { font-size: 1.0625rem; color: var(--text-secondary, #475569); }

.home-display { font-size: clamp(1.75rem, 3.6vw, 3.25rem); line-height: 1.12; letter-spacing: -0.015em; }
.home-measure { max-width: 34em; font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.65; }
.home-measure-center { max-width: 36em; margin-left: auto; margin-right: auto; font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.65; }

/* 2. Chapter introduction: compact, big type, lots of air */
.home-chapter { padding: 96px 24px 80px; }
.home-chapter .section-desc { margin-top: 1.5rem; font-size: 1.125rem; }

/* 3/4. Split features — generous text against a visual, then reversed */
.home-split { display: grid; grid-template-columns: 7fr 5fr; gap: 4.5rem; align-items: center; padding: 104px 24px; }
.home-split-reverse { grid-template-columns: 5fr 7fr; }
.home-split-reverse .home-split-text { order: 2; }
.home-split-reverse .home-visual-card { order: 1; }
.home-split-text .section-tag { margin-bottom: 1rem; }
.home-split-text .home-text-link { display: inline-block; margin-top: 1.5rem; }
.home-visual-card {
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 16px;
  padding: 1.5rem;
}
.home-visual-caption { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted, #94a3b8); margin-bottom: 1rem; }
.home-example-flow { display: flex; flex-direction: column; gap: 0.75rem; }
.home-example-item { background: rgba(255, 255, 255, 0.04); border-radius: 10px; padding: 0.9rem 1rem; }
.home-example-item p { margin: 0.25rem 0 0; font-size: 1rem; line-height: 1.55; }
.home-example-when { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-orange, #ea4e1a); }
.home-example-arrow { text-align: center; color: var(--text-muted, #94a3b8); font-size: 1.25rem; }
.home-output-mock ul { margin: 0.75rem 0 0; padding-left: 1.1rem; }
.home-output-mock li { margin: 0.35rem 0; font-size: 1rem; line-height: 1.55; }

/* 5. Playbooks: wide calm process sequence */
.home-process { padding: 104px 24px; }
.home-process-row { display: flex; align-items: stretch; justify-content: center; gap: 1.25rem; margin-top: 3.5rem; flex-wrap: wrap; }
.home-process-step { flex: 1 1 240px; max-width: 320px; background: rgba(148, 163, 184, 0.07); border-radius: 14px; padding: 1.75rem 1.5rem; }
.home-process-num {
  display: inline-flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center;
  border-radius: 999px; background: rgba(234, 78, 26, 0.14); color: var(--accent-orange, #ea4e1a); font-weight: 700;
}
.home-process-title { font-size: 1.375rem; margin: 0.9rem 0 0.5rem; }
.home-process-step p { font-size: 1.0625rem; line-height: 1.6; margin: 0; color: var(--text-secondary, #475569); }
.home-process-arrow { align-self: center; color: var(--text-muted, #94a3b8); font-size: 1.5rem; }

/* 6. Calculations: one worked panel */
.home-worked { padding: 104px 24px; }
.home-worked-panel { max-width: 880px; margin: 3rem auto 0; }
.home-worked-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.home-worked-grid > div { background: rgba(255, 255, 255, 0.04); border-radius: 10px; padding: 1rem 1.15rem; }
.home-worked-grid p { margin: 0.35rem 0 0; font-size: 1rem; line-height: 1.55; }
.home-worked-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted, #94a3b8); }
.home-worked-flag { border: 1px solid rgba(234, 78, 26, 0.45); }
.home-worked-flag .home-worked-label { color: var(--accent-orange, #ea4e1a); }

/* 7. Ownership band + tools diagram */
.home-ownership { padding: 104px 24px; }
.home-ownership-band { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
.home-feature-title { font-size: clamp(1.5rem, 2.4vw, 2.25rem); line-height: 1.2; margin: 0 0 1.1rem; }
.home-tools-diagram {
  display: flex; align-items: stretch; justify-content: center; gap: 1rem; flex-wrap: wrap;
  margin-top: 4rem;
}
.home-tools-node { flex: 1 1 240px; max-width: 320px; border: 1px solid rgba(148, 163, 184, 0.25); border-radius: 14px; padding: 1.5rem; }
.home-tools-tag { display: inline-block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-orange, #ea4e1a); margin-bottom: 0.6rem; }
.home-tools-node p { margin: 0.5rem 0 0; font-size: 0.975rem; line-height: 1.55; color: var(--text-secondary, #475569); }
.home-tools-arrow { align-self: center; color: var(--text-muted, #94a3b8); font-size: 1.5rem; }

/* 8. Relevance: compact editorial directory */
.home-audience { padding: 96px 24px; }
.home-audience-list { max-width: 880px; margin: 2.5rem auto 0; display: flex; flex-direction: column; }
.home-audience-item {
  display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; align-items: baseline;
  padding: 1.65rem 0.25rem; border-top: 1px solid rgba(148, 163, 184, 0.22);
  text-decoration: none; color: inherit;
}
.home-audience-item:last-child { border-bottom: 1px solid rgba(148, 163, 184, 0.22); }
.home-audience-item strong { font-size: 1.375rem; }
.home-audience-item span { color: var(--text-secondary, #475569); font-size: 1.0625rem; line-height: 1.6; }
.home-audience-item:hover strong, .home-audience-item:focus-visible strong { color: var(--accent-orange, #ea4e1a); }

@media (max-width: 900px) {
  .home-split, .home-split-reverse { grid-template-columns: 1fr; gap: 2.25rem; padding: 56px 20px; }
  .home-split-reverse .home-split-text { order: 1; }
  .home-split-reverse .home-visual-card { order: 2; }
  .home-chapter, .home-process, .home-worked, .home-ownership, .home-audience { padding: 48px 20px; }
  .home-ownership-band { grid-template-columns: 1fr; gap: 2.5rem; }
  .home-worked-grid { grid-template-columns: 1fr; }
  .home-audience-item { grid-template-columns: 1fr; gap: 0.35rem; padding: 1.35rem 0.15rem; }
  .home-process-arrow, .home-tools-arrow { display: none; }
  #opening { padding: 64px 20px 56px; }
}

/* --- In-page notifications (toast) -----------------------------------------
   Site-styled notices replacing browser alert() popups. */
#toast-stack {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 10050;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(560px, calc(100vw - 32px));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: #111827;
  color: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-left: 4px solid var(--accent-orange, #ea4e1a);
  border-radius: 12px;
  padding: 0.95rem 1.1rem;
  font-size: 0.975rem;
  line-height: 1.5;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.35);
  animation: toast-in 0.22s ease-out;
}
.toast-success { border-left-color: #34d399; }
.toast-error { border-left-color: #f87171; }
.toast-text { flex: 1 1 auto; }
.toast-close {
  flex: 0 0 auto;
  background: none;
  border: 0;
  color: #cbd5e1;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
}
.toast-close:hover, .toast-close:focus-visible { color: #ffffff; background: rgba(255, 255, 255, 0.12); }
.toast-leaving { opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  .toast-leaving { transition: none; }
}