/*
 * =============================================================================
 * SECONDCREW AI -- Design System v2.0
 * =============================================================================
 *
 * Production stylesheet for secondcrew.ai
 * Consolidated from Sprint Reports + Series 1 Report HTML sources
 *
 * SEMANTIC COLOR SYSTEM
 * ---------------------
 * --denim    (#2b3a4a)   Primary brand, structure, headers, nav, borders
 * --rust     (#b5472a)   Revenue, achievements, key metrics, CTAs, accents
 * --copper   (#b87333)   Growth, future/projections, premium features
 * --canvas   (#f4f1eb)   Background, neutral space
 * --graphite (#4a4a45)   Body text, secondary content
 * --worn-white (#faf9f6) Card backgrounds, highlights, contrast panels
 * --stitch   (#8b7355)   Decorative dashed borders, craft motif
 * --ink      (#1a1a18)   Maximum contrast text (sparingly)
 *
 * FONT STACK
 * ----------
 * Oswald             Headlines, navigation, section titles
 * Source Serif 4     Body text, paragraphs, descriptions
 * IBM Plex Mono      Data, stats, labels, code, badges
 *
 * =============================================================================
 */


/* =============================================================================
   0. GOOGLE FONTS
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Oswald:wght@300;400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,600&display=swap');


/* =============================================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================================= */

:root {
  /* --- Brand Colors --- */
  --denim:          #2b3a4a;
  --denim-light:    #5a6d7f;
  --denim-dark:     #1e2a36;
  --rust:           #b5472a;
  --rust-light:     #d4654a;
  --rust-dark:      #8c3620;
  --copper:         #b87333;
  --copper-light:   #d4955c;
  --copper-dark:    #8f5824;
  --canvas:         #f4f1eb;
  --canvas-dark:    #e8e3d9;
  --canvas-darker:  #d9d2c4;
  --graphite:       #4a4a45;
  --worn-white:     #faf9f6;
  --stitch:         #8b7355;
  --ink:            #1a1a18;

  /* --- Semantic Colors --- */
  --color-success:  #2d7a4f;
  --color-warning:  #c4922a;
  --color-error:    #b5472a;
  --color-info:     #2b3a4a;

  /* --- Stitch (decorative dashed border) --- */
  --stitch-rgba:    rgba(139, 115, 85, 0.3);

  /* --- Font Families --- */
  --font-headline:  'Oswald', 'Trebuchet MS', Helvetica, sans-serif;
  --font-body:      'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:      'IBM Plex Mono', 'Courier New', Courier, monospace;

  /* --- Font Sizes (modular scale, base 16px, ratio ~1.25) --- */
  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-md:    1.125rem;  /* 18px */
  --text-lg:    1.25rem;   /* 20px */
  --text-xl:    1.5rem;    /* 24px */
  --text-2xl:   1.875rem;  /* 30px */
  --text-3xl:   2.25rem;   /* 36px */
  --text-4xl:   3rem;      /* 48px */
  --text-5xl:   3.75rem;   /* 60px */

  /* --- Spacing Scale --- */
  --space-0:    0;
  --space-1:    0.25rem;   /* 4px */
  --space-2:    0.5rem;    /* 8px */
  --space-3:    0.75rem;   /* 12px */
  --space-4:    1rem;      /* 16px */
  --space-5:    1.25rem;   /* 20px */
  --space-6:    1.5rem;    /* 24px */
  --space-8:    2rem;      /* 32px */
  --space-10:   2.5rem;    /* 40px */
  --space-12:   3rem;      /* 48px */
  --space-16:   4rem;      /* 64px */
  --space-20:   5rem;      /* 80px */
  --space-24:   6rem;      /* 96px */

  /* --- Border Radius --- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm:   0 1px 3px rgba(43, 58, 74, 0.08);
  --shadow-md:   0 4px 12px rgba(43, 58, 74, 0.12);
  --shadow-lg:   0 8px 30px rgba(43, 58, 74, 0.16);
  --shadow-xl:   0 12px 40px rgba(43, 58, 74, 0.2);

  /* --- Transitions --- */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* --- Layout --- */
  --container-max:     1200px;
  --container-narrow:  800px;
  --container-wide:    1400px;
  --nav-height:        64px;

  /* --- Admin Text Minimum --- */
  --admin-text-min: 12px;

  /* --- Z-index Scale --- */
  --z-below:     -1;
  --z-base:      0;
  --z-above:     1;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
}


/* =============================================================================
   2. RESET / BASE STYLES
   ============================================================================= */

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--graphite);
  background-color: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--rust);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--rust-dark);
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

ul, ol {
  list-style: none;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

hr {
  border: none;
  height: 1px;
  background-color: var(--canvas-darker);
  margin: var(--space-6) 0;
}


/* =============================================================================
   3. TYPOGRAPHY SCALE
   ============================================================================= */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 1.15;
  color: var(--denim);
}

h1 {
  font-size: var(--text-4xl);
  font-weight: 700;
  margin-bottom: var(--space-6);
}

h2 {
  font-size: var(--text-2xl);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

h3 {
  font-size: var(--text-xl);
  font-weight: 500;
  margin-bottom: var(--space-3);
}

h4 {
  font-size: var(--text-lg);
  font-weight: 500;
  margin-bottom: var(--space-2);
}

h5 {
  font-size: var(--text-md);
  font-weight: 500;
  margin-bottom: var(--space-2);
}

h6 {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

p {
  margin-bottom: var(--space-4);
  color: var(--graphite);
  line-height: 1.6;
}

p:last-child {
  margin-bottom: 0;
}

strong, b {
  font-weight: 600;
  color: var(--ink);
}

em, i {
  font-style: italic;
}

small, .text-sm {
  font-size: var(--text-sm);
}

.text-xs    { font-size: var(--text-xs); }
.text-md    { font-size: var(--text-md); }
.text-lg    { font-size: var(--text-lg); }
.text-xl    { font-size: var(--text-xl); }
.text-2xl   { font-size: var(--text-2xl); }
.text-3xl   { font-size: var(--text-3xl); }
.text-4xl   { font-size: var(--text-4xl); }
.text-5xl   { font-size: var(--text-5xl); }

/* Code / Monospace */
code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
}

code {
  font-size: 0.9em;
  color: var(--rust);
  background-color: var(--canvas-dark);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
}

pre {
  background-color: var(--denim);
  color: var(--worn-white);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-bottom: var(--space-4);
  line-height: 1.5;
}

pre code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: var(--text-sm);
}

blockquote {
  border-left: 4px solid var(--rust);
  padding: var(--space-3) var(--space-5);
  margin: var(--space-4) 0;
  background-color: var(--worn-white);
  font-style: italic;
  color: var(--graphite);
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* Section Label -- IBM Plex Mono eyebrow text */
.section-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--rust);
  margin-bottom: var(--space-2);
  display: block;
}

.section-label.copper { color: var(--copper); }
.section-label.denim  { color: var(--denim); }

/* Section Title -- Oswald heading directly after label */
.section-title {
  font-family: var(--font-headline);
  font-size: var(--text-2xl);
  color: var(--denim);
  margin-bottom: var(--space-4);
}

.section-title.white { color: var(--worn-white); }

/* Font family helpers */
.mono      { font-family: var(--font-mono); }
.serif     { font-family: var(--font-body); }
.headline  { font-family: var(--font-headline); }

/* Text helpers */
.muted       { color: var(--denim-light); }
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.uppercase   { text-transform: uppercase; }
.lowercase   { text-transform: lowercase; }
.capitalize  { text-transform: capitalize; }
.no-wrap     { white-space: nowrap; }
.break-word  { overflow-wrap: break-word; word-wrap: break-word; }


/* =============================================================================
   4. LAYOUT UTILITIES
   ============================================================================= */

/* --- Containers --- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }

/* --- Flex Helpers --- */
.flex            { display: flex; }
.flex-inline     { display: inline-flex; }
.flex-wrap       { flex-wrap: wrap; }
.flex-col        { flex-direction: column; }
.flex-row        { flex-direction: row; }
.flex-1          { flex: 1; }
.flex-auto       { flex: auto; }
.flex-none       { flex: none; }
.items-start     { align-items: flex-start; }
.items-center    { align-items: center; }
.items-end       { align-items: flex-end; }
.items-stretch   { align-items: stretch; }
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.justify-evenly  { justify-content: space-evenly; }
.self-start      { align-self: flex-start; }
.self-center     { align-self: center; }
.self-end        { align-self: flex-end; }
.self-stretch    { align-self: stretch; }

/* --- Gap Utilities --- */
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-5  { gap: var(--space-5); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }

/* --- Grid Helpers --- */
.grid        { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

/* --- Spacing Utilities --- */
.m-0  { margin: var(--space-0); }
.m-1  { margin: var(--space-1); }
.m-2  { margin: var(--space-2); }
.m-3  { margin: var(--space-3); }
.m-4  { margin: var(--space-4); }
.m-6  { margin: var(--space-6); }
.m-8  { margin: var(--space-8); }

.mt-0 { margin-top: var(--space-0); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-0 { margin-bottom: var(--space-0); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.mx-auto { margin-left: auto; margin-right: auto; }

.p-0  { padding: var(--space-0); }
.p-1  { padding: var(--space-1); }
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-5  { padding: var(--space-5); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }

.px-4  { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5  { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-6  { padding-left: var(--space-6); padding-right: var(--space-6); }

.py-4  { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6  { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8  { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); }
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); }

/* --- Width / Height --- */
.w-full      { width: 100%; }
.h-full      { height: 100%; }
.min-h-screen { min-height: 100vh; }

/* --- Display --- */
.block        { display: block; }
.inline-block { display: inline-block; }
.inline       { display: inline; }
.hidden       { display: none; }

/* --- Position --- */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; top: 0; }

/* --- Overflow --- */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }


/* =============================================================================
   5. COMPONENTS
   ============================================================================= */

/* ---------------------------------------------------------------------------
   5a. STAT BOX -- Key metric display
   Extracted from Sprint 12 .stat-box and Series 1 .stat-box / .stat-quad
   --------------------------------------------------------------------------- */

.stat-row {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.stat-box {
  flex: 1;
  background-color: var(--worn-white);
  border: 2px solid var(--denim);
  padding: var(--space-4) var(--space-5);
  text-align: center;
  position: relative;
}

.stat-box::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border: 1px dashed var(--stitch-rgba);
  pointer-events: none;
}

.stat-box .number,
.stat-box .big-number {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--denim);
  line-height: 1.1;
}

.stat-box .number.rust,
.stat-box .big-number.rust     { color: var(--rust); }
.stat-box .number.copper,
.stat-box .big-number.copper   { color: var(--copper); }
.stat-box .number.success,
.stat-box .big-number.success  { color: var(--color-success); }

.stat-box .label,
.stat-box .stat-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--denim-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: var(--space-2);
}

.stat-box .stat-detail {
  font-size: var(--text-xs);
  color: var(--graphite);
  margin-top: var(--space-1);
}

/* Stat Quad -- 2x2 grid layout */
.stat-quad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin: var(--space-6) 0;
}


/* ---------------------------------------------------------------------------
   5b. CARDS -- Worn-white bg, denim border, accent left border, stitch
   Extracted from both reports
   --------------------------------------------------------------------------- */

.card {
  background-color: var(--worn-white);
  border: 2px solid var(--denim);
  border-left: 5px solid var(--rust);
  padding: var(--space-4) var(--space-5);
  position: relative;
  margin-bottom: var(--space-4);
}

.card::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border: 1px dashed var(--stitch-rgba);
  pointer-events: none;
}

.card p {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--graphite);
}

.card strong {
  color: var(--ink);
}

.card--no-stitch::before { display: none; }

/* Card accent variants */
.card.rust-accent,
.card--rust       { border-left-color: var(--rust); }
.card.copper-accent,
.card--copper     { border-left-color: var(--copper); }
.card.denim-accent,
.card--denim      { border-left-color: var(--denim); }
.card.success-accent,
.card--success    { border-left-color: var(--color-success); }
.card.pending-accent,
.card--pending    { border-left-color: var(--color-warning); }


/* ---------------------------------------------------------------------------
   5c. PRODUCT CARD -- Showcase individual products/services
   Extracted from Series 1 .toolkit-card and .product-deep
   --------------------------------------------------------------------------- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.product-card {
  background-color: var(--worn-white);
  border: 2px solid var(--denim);
  padding: var(--space-5) var(--space-6);
  position: relative;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.product-card::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border: 1px dashed var(--stitch-rgba);
  pointer-events: none;
}

.product-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.product-card__title {
  font-family: var(--font-headline);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--denim);
  text-transform: uppercase;
  letter-spacing: 0.015em;
  margin-bottom: var(--space-1);
}

.product-card__type {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--denim-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-3);
}

.product-card__tagline {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--graphite);
  font-style: italic;
  margin-bottom: var(--space-3);
}

.product-card__body {
  font-size: var(--text-sm);
  color: var(--graphite);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}

.product-card__stats {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--copper);
  margin-top: var(--space-2);
}

.product-card__customer {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--denim-light);
  margin-top: var(--space-1);
}

/* Toolkit Grid -- borderless grid variant from Series 1 */
.toolkit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: var(--space-4);
  border: 2px solid var(--denim);
}

.toolkit-card {
  background-color: var(--canvas);
  padding: var(--space-5);
  text-align: center;
  border-right: 1px solid var(--canvas-dark);
  border-bottom: 1px solid var(--canvas-dark);
}

.toolkit-card:nth-child(3n) { border-right: none; }
.toolkit-card:nth-child(n+4) { border-bottom: none; }

.toolkit-card h3 {
  font-size: var(--text-base);
  color: var(--denim);
  margin-bottom: var(--space-1);
}

.toolkit-type {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--denim-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-3);
}

.toolkit-card p {
  font-size: var(--text-sm);
  color: var(--graphite);
  line-height: 1.4;
  text-align: left;
  margin-bottom: var(--space-2);
}

.toolkit-stats {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--copper);
  text-align: left;
  margin-top: var(--space-2);
}

.toolkit-customer {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--denim-light);
  text-align: left;
  margin-top: var(--space-1);
}

/* Status badges inside toolkit cards */
.toolkit-card .status-badge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--worn-white);
  background-color: var(--denim);
  padding: 0.15em 0.5em;
  display: inline-block;
  margin-top: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.toolkit-card .status-badge.live { background-color: var(--rust); }


/* ---------------------------------------------------------------------------
   5d. BADGES -- Status indicators
   Extracted from both reports
   --------------------------------------------------------------------------- */

.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2em 0.65em;
  border-radius: var(--radius-sm);
  line-height: 1.4;
}

.badge--complete,
.badge.complete   { background-color: var(--color-success); color: var(--worn-white); }
.badge--pending,
.badge.pending    { background-color: var(--color-warning); color: var(--worn-white); }
.badge--live,
.badge.live       { background-color: var(--rust); color: var(--worn-white); }
.badge--dev,
.badge.dev        { background-color: var(--copper); color: var(--worn-white); }
.badge--draft,
.badge.draft      { background-color: var(--denim); color: var(--worn-white); }
.badge--demo      { background-color: rgba(184, 115, 51, 0.15); color: var(--copper); }
.badge--mvp       { background-color: rgba(43, 58, 74, 0.1); color: var(--denim); }
.badge--new       { background-color: rgba(181, 71, 42, 0.12); color: var(--rust); }

.badge--outline {
  background-color: transparent;
  border: 1.5px solid var(--denim);
  color: var(--denim);
}

.badge--rust-outline {
  background-color: transparent;
  border: 1.5px solid var(--rust);
  color: var(--rust);
}


/* ---------------------------------------------------------------------------
   5e. IMPACT BANNER -- Headline metrics display
   Extracted from Sprint 12 .impact-banner and Series 1 .impact-banner
   --------------------------------------------------------------------------- */

.impact-banner {
  background-color: var(--worn-white);
  border: 2px solid var(--denim);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-6) 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
}

.impact-banner--dark {
  background-color: var(--denim);
  color: var(--worn-white);
  border-color: var(--denim-dark);
}

.impact-banner--dark .impact-stat .label {
  color: rgba(255, 255, 255, 0.6);
}

.impact-stat {
  flex: 1;
}

.impact-stat .number {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--rust);
  line-height: 1.1;
}

.impact-stat .number.copper  { color: var(--copper); }
.impact-stat .number.success { color: var(--color-success); }

.impact-stat .label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--denim-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: var(--space-2);
}

.impact-stat .sublabel {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--graphite);
  margin-top: var(--space-1);
}

.impact-divider {
  width: 1px;
  background-color: var(--canvas-darker);
  align-self: stretch;
  margin: 0 var(--space-2);
}


/* ---------------------------------------------------------------------------
   5f. STITCHED BORDER -- Decorative craft motif
   The signature SecondCrew visual: dashed stitch inside a solid frame
   --------------------------------------------------------------------------- */

.stitched-border {
  position: relative;
}

.stitched-border::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border: 1px dashed var(--stitch-rgba);
  pointer-events: none;
}

.stitched-border--heavy::before {
  border-width: 2px;
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
}

/* Standalone stitched panel */
.stitched {
  border: 2px dashed var(--stitch);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}


/* ---------------------------------------------------------------------------
   5g. SECTION ALTERNATING BACKGROUNDS
   --------------------------------------------------------------------------- */

.section-alt {
  background-color: var(--worn-white);
  padding: var(--space-12) 0;
}

.section-canvas {
  background-color: var(--canvas);
  padding: var(--space-12) 0;
}

.section-dark,
.dark-section {
  background-color: var(--denim);
  color: var(--worn-white);
  padding: var(--space-12) 0;
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6,
.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4,
.dark-section h5,
.dark-section h6 {
  color: var(--worn-white);
}

.section-dark p,
.dark-section p {
  color: rgba(250, 249, 246, 0.8);
}

.section-dark .section-label,
.dark-section .section-label {
  color: var(--rust-light);
}

.section-dark a,
.dark-section a {
  color: var(--copper-light);
}

.section-dark a:hover,
.dark-section a:hover {
  color: var(--worn-white);
}


/* ---------------------------------------------------------------------------
   5h. TABLES -- Denim header, striped rows
   Extracted from both reports
   --------------------------------------------------------------------------- */

.sc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}

.sc-table th {
  background-color: var(--denim);
  color: var(--worn-white);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.sc-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--canvas-dark);
  color: var(--graphite);
  vertical-align: top;
}

.sc-table tr:nth-child(even) td {
  background-color: var(--canvas-dark);
}

.sc-table tr:hover td {
  background-color: var(--canvas-darker);
}

.sc-table td.number {
  text-align: right;
  font-family: var(--font-mono);
}

.sc-table td strong {
  color: var(--ink);
}

.sc-table--compact th,
.sc-table--compact td {
  padding: var(--space-2) var(--space-3);
}

/* Comparison table variant */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
}

.comparison-table th {
  font-family: var(--font-headline);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--denim);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--denim);
}

.comparison-table td {
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--canvas-dark);
}

.comparison-table .highlight {
  font-weight: 600;
  color: var(--rust);
}


/* ---------------------------------------------------------------------------
   5i. PRICING CARDS
   Extracted from Series 1 .pricing-grid
   --------------------------------------------------------------------------- */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
  border: 2px solid var(--denim);
}

.pricing-card {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--canvas-dark);
}

.pricing-card:last-child { border-right: none; }

.pricing-card.featured {
  border-left: 3px solid var(--rust);
  border-right: 3px solid var(--rust);
}

.pricing-header {
  background-color: var(--denim);
  padding: var(--space-5) var(--space-4);
  text-align: center;
}

.pricing-card.featured .pricing-header {
  background-color: var(--rust);
}

.pricing-header h3 {
  font-size: var(--text-sm);
  color: var(--worn-white);
  margin-bottom: var(--space-1);
}

.pricing-header .price {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--worn-white);
  line-height: 1;
}

.pricing-header .price-sub {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.6);
  margin-top: var(--space-1);
}

.pricing-body {
  background-color: var(--canvas);
  padding: var(--space-5) var(--space-4);
  flex-grow: 1;
  font-size: var(--text-sm);
  color: var(--graphite);
  line-height: 1.5;
}

.pricing-card.featured .pricing-body {
  background-color: #fdf5f2;
}

.pricing-body ul {
  list-style: none;
  padding: 0;
}

.pricing-body ul li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--canvas-dark);
  font-size: var(--text-sm);
}

.pricing-body ul li:last-child { border-bottom: none; }

/* Standalone pricing card (not in grid) */
.pricing-card--standalone {
  background-color: var(--worn-white);
  border: 1px solid var(--canvas-darker);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  max-width: 480px;
  box-shadow: var(--shadow-md);
}

.pricing-card--standalone.featured {
  border: 2px solid var(--copper);
}


/* ---------------------------------------------------------------------------
   5j. CASE STUDY / RETRO CARDS
   Extracted from Series 1
   --------------------------------------------------------------------------- */

.case-card {
  background-color: var(--worn-white);
  border: 2px solid var(--denim);
  border-left: 5px solid var(--rust);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-4);
  position: relative;
}

.case-card::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border: 1px dashed var(--stitch-rgba);
  pointer-events: none;
}

.case-card.warm     { border-left-color: var(--rust); }
.case-card.pending  { border-left-color: var(--copper); }
.case-card.internal { border-left-color: var(--denim); }

.case-card h4 {
  font-size: var(--text-md);
  color: var(--denim);
  margin-bottom: var(--space-1);
}

.case-card .case-status {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}

.case-card p {
  font-size: var(--text-sm);
  color: var(--graphite);
  line-height: 1.5;
}

.case-card .case-value {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--rust);
  margin-top: var(--space-2);
}

/* Retro / Review Items */
.retro-item {
  border-left: 4px solid var(--rust);
  padding: var(--space-3) var(--space-5);
  margin-bottom: var(--space-3);
  background-color: var(--worn-white);
}

.retro-item.lesson   { border-left-color: var(--copper); }
.retro-item.deferred { border-left-color: var(--denim-light); }

.retro-item h4 {
  font-size: var(--text-sm);
  color: var(--denim);
  margin-bottom: var(--space-1);
}

.retro-item p {
  font-size: var(--text-sm);
  color: var(--graphite);
  line-height: 1.5;
}

.retro-item .retro-stat {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--rust);
}


/* ---------------------------------------------------------------------------
   5k. BAR CHART -- Horizontal bar visualization
   Extracted from Sprint 12
   --------------------------------------------------------------------------- */

.bar-chart {
  margin: var(--space-4) 0;
}

.bar-row {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-2);
}

.bar-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  width: 160px;
  text-align: right;
  padding-right: var(--space-3);
  color: var(--graphite);
  flex-shrink: 0;
}

.bar-track {
  flex: 1;
  height: 20px;
  background-color: rgba(43, 58, 74, 0.06);
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: var(--radius-sm);
  background-color: var(--denim);
  transition: width var(--transition-slow);
}

.bar-fill.rust    { background-color: var(--rust); }
.bar-fill.copper  { background-color: var(--copper); }
.bar-fill.success { background-color: var(--color-success); }

.bar-value {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding-left: var(--space-3);
  color: var(--graphite);
  min-width: 60px;
  flex-shrink: 0;
}


/* ---------------------------------------------------------------------------
   5l. FINDINGS LIST
   Extracted from Sprint 12
   --------------------------------------------------------------------------- */

.finding-item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--canvas-dark);
}

.finding-item:last-child { border-bottom: none; }

.finding-id {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--rust);
  display: inline-block;
  min-width: 40px;
}

.finding-title {
  font-family: var(--font-headline);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--denim);
  text-transform: uppercase;
  letter-spacing: 0.015em;
}

.finding-detail {
  font-size: var(--text-sm);
  color: var(--graphite);
  margin-top: var(--space-1);
  line-height: 1.5;
}

.finding-implication {
  font-size: var(--text-sm);
  color: var(--copper);
  font-style: italic;
  margin-top: var(--space-1);
}


/* ---------------------------------------------------------------------------
   5m. LOGO MARK -- The SC brand mark
   --------------------------------------------------------------------------- */

.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background-color: var(--rust);
  border-radius: var(--radius-sm);
  font-family: var(--font-headline);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--worn-white);
  flex-shrink: 0;
}

.logo-mark--sm {
  width: 18px;
  height: 18px;
  font-size: var(--text-xs);
}

.logo-mark--lg {
  width: 48px;
  height: 48px;
  font-size: var(--text-xl);
}


/* ---------------------------------------------------------------------------
   5n. MRR LADDER -- Revenue visualization
   Extracted from Series 1
   --------------------------------------------------------------------------- */

.ladder {
  margin: var(--space-6) 0;
}

.ladder-rung {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-2);
  gap: var(--space-4);
}

.ladder-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--denim-light);
  width: 120px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: right;
  flex-shrink: 0;
}

.ladder-bar {
  height: 20px;
  background-color: var(--denim);
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--worn-white);
  font-weight: 600;
  border-radius: var(--radius-sm);
}

.ladder-bar.rust   { background-color: var(--rust); }
.ladder-bar.copper { background-color: var(--copper); }

.ladder-amount {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--graphite);
  margin-left: var(--space-3);
}


/* ---------------------------------------------------------------------------
   5o. PROBLEM / FEATURE GRID
   Extracted from Series 1 dark-section problem cards
   --------------------------------------------------------------------------- */

.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.problem-card {
  background-color: var(--canvas);
  padding: var(--space-5) var(--space-6);
  border-left: 5px solid var(--rust);
  position: relative;
}

.problem-card::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border: 1px dashed var(--stitch-rgba);
  pointer-events: none;
}

.problem-number {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--canvas-darker);
  line-height: 1;
  margin-bottom: var(--space-3);
}

.problem-card h3 {
  font-size: var(--text-base);
  color: var(--denim);
  margin-bottom: var(--space-2);
}

.problem-card p {
  font-size: var(--text-sm);
  color: var(--graphite);
  line-height: 1.5;
}

.problem-cost {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--rust);
  margin-top: var(--space-3);
}


/* ---------------------------------------------------------------------------
   5p. METHOD GRID
   Extracted from Series 1
   --------------------------------------------------------------------------- */

.method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-4);
}

.method-card {
  background-color: var(--worn-white);
  border: 2px solid var(--denim);
  border-left: 5px solid var(--rust);
  padding: var(--space-4) var(--space-5);
  position: relative;
}

.method-card::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border: 1px dashed var(--stitch-rgba);
  pointer-events: none;
}

.method-card h4 {
  font-size: var(--text-base);
  color: var(--denim);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
}

.method-card p {
  font-size: var(--text-sm);
  color: var(--graphite);
  line-height: 1.4;
}


/* ---------------------------------------------------------------------------
   5q. PRODUCT DEEP-DIVE CARDS
   Extracted from Series 1
   --------------------------------------------------------------------------- */

.product-deep {
  background-color: var(--worn-white);
  border: 2px solid var(--denim);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-5);
  position: relative;
}

.product-deep::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border: 1px dashed var(--stitch-rgba);
  pointer-events: none;
}

.product-deep h3 {
  font-size: var(--text-lg);
  color: var(--denim);
  margin-bottom: var(--space-1);
}

.product-deep .tagline {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--graphite);
  font-style: italic;
  margin-bottom: var(--space-3);
}

.product-deep .stats-row {
  display: flex;
  gap: var(--space-5);
  margin: var(--space-2) 0;
}

.product-deep .stats-row span {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--denim-light);
}

.product-deep .badge.demo { background-color: var(--rust); color: var(--worn-white); }
.product-deep .badge.dev  { background-color: var(--copper); color: var(--worn-white); }
.product-deep .badge.prod { background-color: var(--denim); color: var(--worn-white); }


/* =============================================================================
   6. NAVIGATION
   ============================================================================= */

.sc-nav {
  background-color: var(--denim);
  border-bottom: 4px solid var(--rust);
  padding: var(--space-4) var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.sc-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}

.sc-nav__brand:hover { text-decoration: none; }

.sc-nav__wordmark {
  font-family: var(--font-headline);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--worn-white);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sc-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
}

.sc-nav__link {
  font-family: var(--font-headline);
  font-size: var(--text-sm);
  color: rgba(250, 249, 246, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: color var(--transition-fast);
  padding: var(--space-1) 0;
}

.sc-nav__link:hover,
.sc-nav__link.active {
  color: var(--worn-white);
  text-decoration: none;
}

.sc-nav__link.active {
  border-bottom: 2px solid var(--rust);
}

.sc-nav__cta {
  font-family: var(--font-headline);
  font-size: var(--text-sm);
  color: var(--worn-white);
  background-color: var(--rust);
  padding: var(--space-2) var(--space-5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.sc-nav__cta:hover {
  background-color: var(--rust-dark);
  color: var(--worn-white);
  text-decoration: none;
}

/* Report-style nav bar (from Series 1 .nav) */
.nav {
  background-color: var(--denim);
  border-bottom: 4px solid var(--rust);
  padding: var(--space-3) var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Report-style header bar (from Sprint 12 .header-bar) */
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--denim);
  padding: var(--space-4) var(--space-6);
}

.header-bar .logo {
  font-family: var(--font-headline);
  font-size: var(--text-sm);
  color: var(--worn-white);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.header-bar .meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Logo (shared between nav variants) */
.logo {
  font-family: var(--font-headline);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--worn-white);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Mobile Hamburger */
.sc-nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.sc-nav__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--worn-white);
  margin: 3px 0;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.sc-nav__hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(4px, 4px);
}

.sc-nav__hamburger.open span:nth-child(2) {
  opacity: 0;
}

.sc-nav__hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -4px);
}

/* Mobile Nav Overlay */
.sc-nav__mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--denim);
  z-index: var(--z-overlay);
  padding: var(--space-8) var(--space-6);
  flex-direction: column;
  gap: var(--space-4);
}

.sc-nav__mobile-menu.open {
  display: flex;
}

.sc-nav__mobile-menu .sc-nav__link {
  font-size: var(--text-lg);
  padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(250, 249, 246, 0.1);
}


/* =============================================================================
   7. HERO SECTION
   ============================================================================= */

.hero {
  background-color: var(--denim);
  color: var(--worn-white);
  padding: var(--space-20) 0 var(--space-16);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: rgba(250, 249, 246, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: var(--space-4);
}

.hero__title {
  font-family: var(--font-headline);
  font-size: var(--text-5xl);
  font-weight: 700;
  color: var(--worn-white);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-4);
  line-height: 1.1;
}

.hero__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: rgba(250, 249, 246, 0.8);
  font-style: italic;
  margin-bottom: var(--space-6);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero__divider {
  width: 80px;
  height: 3px;
  background-color: var(--rust);
  margin: 0 auto var(--space-6);
}

.hero__cta {
  display: inline-block;
  font-family: var(--font-headline);
  font-size: var(--text-md);
  color: var(--worn-white);
  background-color: var(--rust);
  padding: var(--space-3) var(--space-8);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.hero__cta:hover {
  background-color: var(--rust-dark);
  color: var(--worn-white);
  text-decoration: none;
  transform: translateY(-1px);
}

.hero__cta--secondary {
  background-color: transparent;
  border: 2px solid var(--worn-white);
  margin-left: var(--space-4);
}

.hero__cta--secondary:hover {
  background-color: rgba(250, 249, 246, 0.1);
}

/* Hero Stats Bar (from Series 1 cover) */
.hero__stats {
  background-color: rgba(0, 0, 0, 0.2);
  border: 2px solid rgba(250, 249, 246, 0.1);
  padding: var(--space-5) var(--space-6);
  display: flex;
  justify-content: space-around;
  text-align: center;
  max-width: var(--container-max);
  margin: var(--space-8) auto 0;
  position: relative;
}

.hero__stats::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  pointer-events: none;
}

.hero__stat {
  text-align: center;
}

.hero__stat-value {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--copper);
  display: block;
}

.hero__stat-label {
  font-family: var(--font-headline);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.6);
  margin-top: var(--space-1);
  display: block;
}


/* =============================================================================
   8. FOOTER
   ============================================================================= */

.sc-footer {
  background-color: var(--denim);
  color: rgba(250, 249, 246, 0.7);
  padding: var(--space-12) 0 var(--space-8);
  border-top: 4px solid var(--rust);
}

.sc-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-8);
}

.sc-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.sc-footer__brand .logo-mark {
  width: 32px;
  height: 32px;
  font-size: var(--text-base);
}

.sc-footer__brand-name {
  font-family: var(--font-headline);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--worn-white);
  text-transform: uppercase;
}

.sc-footer__tagline {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(250, 249, 246, 0.6);
  font-style: italic;
  line-height: 1.6;
  max-width: 300px;
}

.sc-footer__heading {
  font-family: var(--font-headline);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--worn-white);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-4);
}

.sc-footer__links {
  list-style: none;
}

.sc-footer__links li {
  margin-bottom: var(--space-2);
}

.sc-footer__links a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(250, 249, 246, 0.6);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.sc-footer__links a:hover {
  color: var(--worn-white);
}

.sc-footer__bottom {
  max-width: var(--container-max);
  margin: var(--space-8) auto 0;
  padding: var(--space-4) var(--space-5) 0;
  border-top: 1px solid rgba(250, 249, 246, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sc-footer__copyright {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: rgba(250, 249, 246, 0.4);
}

.sc-footer__legal {
  display: flex;
  gap: var(--space-4);
}

.sc-footer__legal a {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: rgba(250, 249, 246, 0.4);
  text-decoration: none;
}

.sc-footer__legal a:hover {
  color: rgba(250, 249, 246, 0.7);
}

/* Report page footer (absolute positioned) */
.page-footer {
  position: absolute;
  bottom: 0.3in;
  left: 0.55in;
  right: 0.55in;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.15in;
  border-top: 1px solid var(--canvas-dark);
}

.footer-left {
  font-family: var(--font-mono);
  font-size: 7pt;
  color: var(--denim-light);
}

.footer-right {
  font-family: var(--font-headline);
  font-size: 8pt;
  color: var(--denim);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 4px;
}

.footer-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  background-color: var(--rust);
  color: var(--worn-white);
  font-size: 6pt;
  border-radius: 1px;
}


/* =============================================================================
   9. FORMS
   ============================================================================= */

.form-group {
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--denim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}

.form-label--required::after {
  content: ' *';
  color: var(--rust);
}

.form-input,
.form-select,
.form-textarea {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--graphite);
  background-color: var(--worn-white);
  border: 2px solid var(--canvas-darker);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--denim);
  box-shadow: 0 0 0 3px rgba(43, 58, 74, 0.15);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--denim-light);
  opacity: 0.6;
}

.form-input.error,
.form-select.error,
.form-textarea.error {
  border-color: var(--rust);
  box-shadow: 0 0 0 3px rgba(181, 71, 42, 0.15);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%234a4a45'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
}

.form-help {
  font-size: var(--text-xs);
  color: var(--denim-light);
  margin-top: var(--space-1);
}

.form-error {
  font-size: var(--text-xs);
  color: var(--rust);
  margin-top: var(--space-1);
}

/* Checkbox and Radio */
.form-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  cursor: pointer;
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--rust);
  cursor: pointer;
}

.form-check label {
  font-size: var(--text-sm);
  color: var(--graphite);
  cursor: pointer;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-headline);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--space-3) var(--space-6);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast),
              transform var(--transition-fast);
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 2px;
}

/* Primary -- Rust bg */
.btn--primary {
  background-color: var(--rust);
  color: var(--worn-white);
  border-color: var(--rust);
}

.btn--primary:hover {
  background-color: var(--rust-dark);
  border-color: var(--rust-dark);
  color: var(--worn-white);
  box-shadow: var(--shadow-md);
}

/* Secondary -- Denim bg */
.btn--secondary {
  background-color: var(--denim);
  color: var(--worn-white);
  border-color: var(--denim);
}

.btn--secondary:hover {
  background-color: var(--denim-dark);
  border-color: var(--denim-dark);
  color: var(--worn-white);
}

/* Outline -- Denim border */
.btn--outline {
  background-color: transparent;
  color: var(--denim);
  border-color: var(--denim);
}

.btn--outline:hover {
  background-color: var(--denim);
  color: var(--worn-white);
}

/* Ghost -- Minimal */
.btn--ghost {
  background-color: transparent;
  color: var(--rust);
  border-color: transparent;
}

.btn--ghost:hover {
  background-color: rgba(181, 71, 42, 0.08);
  color: var(--rust-dark);
}

/* Copper -- Growth/premium */
.btn--copper {
  background-color: var(--copper);
  color: var(--worn-white);
  border-color: var(--copper);
}

.btn--copper:hover {
  background-color: var(--copper-dark);
  border-color: var(--copper-dark);
  color: var(--worn-white);
}

/* Button Sizes */
.btn--sm {
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-4);
}

.btn--lg {
  font-size: var(--text-md);
  padding: var(--space-4) var(--space-8);
}

.btn--full { width: 100%; }

.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Form Actions -- Button row at bottom of form */
.form-actions {
  margin-top: var(--space-6);
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.form-actions--right {
  justify-content: flex-end;
}

.form-actions--between {
  justify-content: space-between;
}

/* Breadcrumb */
.breadcrumb {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--denim-light);
  margin-bottom: var(--space-4);
}

.breadcrumb a {
  color: var(--denim-light);
}

.breadcrumb a:hover {
  color: var(--denim);
}

.breadcrumb__sep {
  margin: 0 var(--space-1);
}


/* =============================================================================
   10. RESPONSIVE BREAKPOINTS
   ============================================================================= */

/* --- Tablet (768px and below) --- */
@media (max-width: 768px) {
  :root {
    --nav-height: 56px;
  }

  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
  h3 { font-size: var(--text-lg); }

  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  /* Nav: show hamburger, hide links */
  .sc-nav__links { display: none; }
  .sc-nav__hamburger { display: flex; }

  /* Grid fallbacks */
  .grid-cols-3,
  .grid-cols-4,
  .grid-cols-5,
  .grid-cols-6 {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .toolkit-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .toolkit-card:nth-child(3n) { border-right: 1px solid var(--canvas-dark); }
  .toolkit-card:nth-child(2n) { border-right: none; }

  .problem-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .stat-row {
    flex-wrap: wrap;
  }

  .stat-row .stat-box {
    flex: 1 1 calc(50% - var(--space-3));
    min-width: 120px;
  }

  .stat-quad {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .impact-banner {
    flex-direction: column;
    gap: var(--space-4);
  }

  .impact-divider {
    width: 60%;
    height: 1px;
    margin: 0 auto;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .pricing-card {
    border-right: none;
    border-bottom: 1px solid var(--canvas-dark);
  }

  .pricing-card:last-child { border-bottom: none; }

  /* Footer */
  .sc-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  .sc-footer__bottom {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }

  /* Hero */
  .hero {
    padding: var(--space-12) 0 var(--space-10);
  }

  .hero__title {
    font-size: var(--text-3xl);
  }

  .hero__stats {
    flex-direction: column;
    gap: var(--space-4);
  }

  /* Bar chart */
  .bar-label {
    width: 100px;
    font-size: 0.65rem;
  }
}

/* --- Mobile (480px and below) --- */
@media (max-width: 480px) {
  h1 { font-size: var(--text-xl); }
  h2 { font-size: var(--text-lg); }

  .container {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4,
  .grid-cols-5,
  .grid-cols-6 {
    grid-template-columns: 1fr;
  }

  .product-grid,
  .toolkit-grid,
  .problem-grid {
    grid-template-columns: 1fr;
  }

  .stat-row {
    flex-direction: column;
  }

  .stat-row .stat-box {
    flex: 1 1 100%;
  }

  /* Footer stacks to single column */
  .sc-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .hero__title {
    font-size: var(--text-2xl);
  }

  .hero__cta--secondary {
    margin-left: 0;
    margin-top: var(--space-3);
  }

  /* Tables scroll horizontally */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--space-3));
    padding: 0 var(--space-3);
  }

  .sc-table {
    min-width: 600px;
  }

  .bar-row {
    flex-wrap: wrap;
  }

  .bar-label {
    width: 100%;
    text-align: left;
    margin-bottom: var(--space-1);
    padding-right: 0;
  }
}

/* --- Desktop large (1400px and above) --- */
@media (min-width: 1400px) {
  .container {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}


/* =============================================================================
   10b. 1024px TABLET BREAKPOINT (S96F)
   ============================================================================= */

@media (max-width: 1024px) {
  .admin-content {
    padding: var(--space-5) var(--space-4);
  }

  .impact-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .dash-body {
    grid-template-columns: 1fr;
  }

  .decision-grid {
    grid-template-columns: 1fr;
  }

  .arch-grid {
    grid-template-columns: 1fr;
  }

  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* =============================================================================
   10c. ADMIN UTILITY CLASSES (S96F)
   ============================================================================= */

/* Readable text — enforces 12px minimum with good line height */
.text-readable {
  font-size: max(var(--admin-text-min), inherit);
  line-height: 1.5;
}

/* Responsive card grid — adapts across breakpoints */
.card-grid-responsive {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

/* Collapsible section pattern */
.section-collapsible .section-collapse-body {
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  max-height: 2000px;
  opacity: 1;
}

.section-collapsible.collapsed .section-collapse-body {
  max-height: 0;
  opacity: 0;
}

.section-collapse-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
}

.section-collapse-chevron {
  display: inline-block;
  font-size: 12px;
  transition: transform 0.2s ease;
  color: var(--denim-light);
}

.section-collapsible.collapsed .section-collapse-chevron {
  transform: rotate(-90deg);
}

/* Sticky section nav pill bar */
.section-nav-sticky {
  position: sticky;
  top: var(--nav-height);
  z-index: var(--z-sticky);
  background: var(--canvas);
  padding: var(--space-2) 0;
  margin-bottom: var(--space-4);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--canvas-darker);
}

.section-nav-pill {
  font-family: var(--font-mono);
  font-size: var(--admin-text-min);
  color: var(--denim-light);
  background: var(--worn-white);
  border: 1px solid var(--canvas-darker);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  white-space: nowrap;
}

.section-nav-pill:hover {
  border-color: var(--denim);
  color: var(--denim);
  text-decoration: none;
}

/* Touch target minimums for mobile */
@media (max-width: 768px) {
  .filter-btn,
  .ack-btn,
  .btn-protocol,
  .section-nav-pill,
  .section-collapse-toggle {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}


/* =============================================================================
   11. PRINT STYLES
   ============================================================================= */

@page {
  size: letter;
  margin: 0.5in;
}

@media print {
  *,
  *::before,
  *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body {
    background: white;
    font-size: 10pt;
    line-height: 1.45;
  }

  /* Hide interactive elements */
  .sc-nav,
  .sc-nav__mobile-menu,
  .sc-nav__hamburger,
  .btn--ghost,
  .no-print {
    display: none !important;
  }

  /* Page layout for report printing */
  .page {
    width: 100%;
    min-height: auto;
    margin: 0;
    padding: 0;
    box-shadow: none;
    page-break-after: always;
  }

  .page:last-child { page-break-after: auto; }

  .page-inner {
    padding: 0.45in 0.55in;
  }

  /* Ensure backgrounds print */
  .nav,
  .header-bar,
  .section-dark,
  .dark-section,
  .impact-banner--dark,
  .hero {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Avoid page breaks inside key elements */
  .card,
  .stat-box,
  .product-card,
  .case-card,
  .impact-banner,
  .finding-item,
  .retro-item,
  .method-card,
  .problem-card,
  .sc-table tr {
    page-break-inside: avoid;
  }

  /* Suppress URL printing in links */
  a[href]::after {
    content: none;
  }
}

/* Screen-only styles for report viewing */
@media screen {
  .page {
    width: 8.5in;
    min-height: 11in;
    margin: 0 auto;
    background-color: var(--canvas);
    position: relative;
    overflow: hidden;
  }

  .page-inner {
    padding: 0.45in 0.55in;
  }

  .report-view {
    background-color: #555;
    padding: var(--space-5);
  }

  .report-view .page {
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5);
    margin-bottom: 30px;
  }
}


/* =============================================================================
   12. ANIMATION UTILITIES
   ============================================================================= */

/* Fade-in on scroll (triggered by JS IntersectionObserver) */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade-in from left */
.fade-in-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Fade-in from right */
.fade-in-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale in */
.scale-in {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.scale-in.visible {
  opacity: 1;
  transform: scale(1);
}

/* Staggered delays for child elements */
.stagger > *:nth-child(1)  { transition-delay: 0ms; }
.stagger > *:nth-child(2)  { transition-delay: 80ms; }
.stagger > *:nth-child(3)  { transition-delay: 160ms; }
.stagger > *:nth-child(4)  { transition-delay: 240ms; }
.stagger > *:nth-child(5)  { transition-delay: 320ms; }
.stagger > *:nth-child(6)  { transition-delay: 400ms; }
.stagger > *:nth-child(7)  { transition-delay: 480ms; }
.stagger > *:nth-child(8)  { transition-delay: 560ms; }
.stagger > *:nth-child(9)  { transition-delay: 640ms; }
.stagger > *:nth-child(10) { transition-delay: 720ms; }

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .fade-in-left,
  .fade-in-right,
  .scale-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .stagger > * {
    transition-delay: 0ms !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* =============================================================================
   13. COLOR UTILITY CLASSES
   ============================================================================= */

/* Text Colors */
.text-denim    { color: var(--denim); }
.text-rust     { color: var(--rust); }
.text-copper   { color: var(--copper); }
.text-graphite { color: var(--graphite); }
.text-ink      { color: var(--ink); }
.text-success  { color: var(--color-success); }
.text-warning  { color: var(--color-warning); }
.text-white    { color: var(--worn-white); }

/* Background Colors */
.bg-denim       { background-color: var(--denim); }
.bg-rust        { background-color: var(--rust); }
.bg-copper      { background-color: var(--copper); }
.bg-canvas      { background-color: var(--canvas); }
.bg-canvas-dark { background-color: var(--canvas-dark); }
.bg-worn-white  { background-color: var(--worn-white); }

/* Border Colors */
.border-denim  { border-color: var(--denim); }
.border-rust   { border-color: var(--rust); }
.border-copper { border-color: var(--copper); }


/* =============================================================================
   14. DECORATIVE ELEMENTS
   ============================================================================= */

/* Horizontal rule variants */
.divider {
  width: 60px;
  height: 2px;
  background-color: var(--rust);
  border: none;
  margin: var(--space-6) 0;
}

.divider--copper   { background-color: var(--copper); }
.divider--centered { margin-left: auto; margin-right: auto; }

.divider--wide {
  width: 100%;
  height: 1px;
  background-color: var(--canvas-darker);
}


/* =============================================================================
   15. SCREEN READER / ACCESSIBILITY UTILITIES
   ============================================================================= */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: inherit;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  background-color: var(--rust);
  color: var(--worn-white);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  z-index: var(--z-toast);
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  top: var(--space-2);
}


/* =============================================================================
   16. ADMIN SHARED COMPONENTS (S85)
   ============================================================================= */

/* --- Admin Nav (grouped dropdowns) --- */
.admin-nav {
  background-color: var(--denim);
  padding: var(--space-3) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-overlay);
  --nav-height: 52px;
}

.admin-nav-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.admin-nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}

.admin-nav-mark {
  width: 28px;
  height: 28px;
  background: var(--rust);
  color: var(--worn-white);
  font-family: var(--font-headline);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}

.admin-nav-title {
  font-family: var(--font-headline);
  font-size: var(--text-sm);
  color: var(--worn-white);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.admin-nav-groups {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav-group {
  position: relative;
}

.nav-group-btn {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: rgba(250, 249, 246, 0.7);
  background: none;
  border: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-group-btn:hover,
.nav-group--active > .nav-group-btn {
  color: var(--worn-white);
  background: rgba(250, 249, 246, 0.1);
}

.nav-group-caret {
  font-size: 8px;
  transition: transform 0.2s;
}

.nav-group--open .nav-group-caret {
  transform: rotate(180deg);
}

.nav-group-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 160px;
  background: var(--worn-white);
  border: 1px solid var(--canvas-darker);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s, visibility 0.15s, transform 0.15s;
  z-index: calc(var(--z-sticky) + 10);
  padding: var(--space-1) 0;
}

.nav-group--open .nav-group-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-group-dropdown a {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--denim);
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  transition: background 0.12s, color 0.12s;
}

.nav-group-dropdown a:hover {
  background: var(--canvas);
  color: var(--rust);
}

.nav-group-dropdown a.active {
  color: var(--rust);
  font-weight: 500;
  background: rgba(181, 71, 42, 0.06);
}

/* Hamburger — hidden on desktop */
.admin-nav-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--worn-white);
  font-size: 22px;
  cursor: pointer;
  padding: var(--space-1);
}

/* --- Admin Nav Right --- */
.admin-nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* --- Nav Search --- */
.sc-nav-search-wrap {
  position: relative;
}

.sc-nav-search {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--worn-white);
  background: rgba(250, 249, 246, 0.08);
  border: 1px solid rgba(250, 249, 246, 0.12);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  width: 160px;
  outline: none;
  transition: width 0.2s, border-color 0.15s, background 0.15s;
}

.sc-nav-search::placeholder {
  color: rgba(250, 249, 246, 0.4);
}

.sc-nav-search:focus {
  width: 220px;
  border-color: rgba(250, 249, 246, 0.3);
  background: rgba(250, 249, 246, 0.12);
}

/* Search Results Panel */
.sc-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-height: 400px;
  overflow-y: auto;
  background: var(--worn-white);
  border: 1px solid var(--canvas-darker);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: calc(var(--z-dropdown) + 20);
}

.sc-search-group-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--denim-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--space-2) var(--space-4) var(--space-1);
}

.sc-search-item {
  display: block;
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
  transition: background 0.12s;
}

.sc-search-item:hover {
  background: var(--canvas);
}

.sc-search-item-title {
  display: block;
  font-family: var(--font-headline);
  font-size: var(--text-xs);
  color: var(--denim);
}

.sc-search-item-sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--denim-light);
  margin-top: 1px;
}

.sc-search-empty {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--denim-light);
  padding: var(--space-4);
  text-align: center;
}

/* --- Notification Bell (S87B) --- */
.sc-notif-bell {
  position: relative;
}
.sc-notif-bell-btn {
  background: none;
  border: none;
  color: var(--canvas);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  position: relative;
  transition: background 0.15s;
}
.sc-notif-bell-btn:hover {
  background: rgba(255,255,255,0.1);
}
.sc-notif-badge {
  position: absolute;
  top: 2px;
  right: 0;
  background: var(--rust);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 8px;
  padding: 0 4px;
  font-family: var(--ff-mono);
}
.sc-notif-panel {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  width: 360px;
  max-height: 460px;
  background: var(--canvas);
  border: 1px solid var(--denim-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  overflow: hidden;
}
.sc-notif-panel.open {
  display: flex;
  flex-direction: column;
}
.sc-notif-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  background: #fafbfc;
}
.sc-notif-panel-title {
  font-family: var(--ff-heading);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--denim);
}
.sc-notif-mark-all {
  background: none;
  border: none;
  color: var(--copper);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}
.sc-notif-mark-all:hover {
  background: rgba(184,115,51,0.1);
}
.sc-notif-list {
  flex: 1;
  overflow-y: auto;
  max-height: 340px;
}
.sc-notif-empty {
  padding: 32px 16px;
  text-align: center;
  color: #9ca3af;
  font-size: 0.85rem;
}
.sc-notif-item {
  display: flex;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.15s;
}
.sc-notif-item:hover {
  background: #f9fafb;
}
.sc-notif-item--unread {
  background: rgba(184,115,51,0.04);
  border-left: 3px solid var(--copper);
}
.sc-notif-item--unread:hover {
  background: rgba(184,115,51,0.08);
}
.sc-notif-item-icon {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.sc-notif-item-body {
  flex: 1;
  min-width: 0;
}
.sc-notif-item-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--denim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sc-notif-item-text {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sc-notif-item-time {
  font-size: 0.7rem;
  color: #9ca3af;
  margin-top: 2px;
}
.sc-notif-view-all {
  display: block;
  text-align: center;
  padding: 10px;
  border-top: 1px solid #e5e7eb;
  color: var(--copper);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}
.sc-notif-view-all:hover {
  background: #fafbfc;
}

/* --- Portal Switcher --- */
.portal-switcher {
  position: relative;
}

.portal-switcher-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(250, 249, 246, 0.1);
  border: 1px solid rgba(250, 249, 246, 0.15);
  border-radius: var(--radius-sm);
  padding: 4px 10px 4px 6px;
  cursor: pointer;
  transition: background 0.15s;
}

.portal-switcher-btn:hover {
  background: rgba(250, 249, 246, 0.18);
}

.portal-switcher .avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--rust);
  color: var(--worn-white);
  font-family: var(--font-headline);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portal-switcher .caret {
  font-size: 10px;
  color: rgba(250, 249, 246, 0.5);
  transition: transform 0.2s;
}

.portal-switcher.open .caret {
  transform: rotate(180deg);
}

.portal-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 240px;
  background: var(--worn-white);
  border: 1px solid var(--canvas-darker);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all 0.18s;
  z-index: calc(var(--z-dropdown) + 10);
}

.portal-switcher.open .portal-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.portal-dropdown-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--canvas-dark);
}

.portal-dropdown-name {
  font-family: var(--font-headline);
  font-size: var(--text-sm);
  color: var(--denim);
}

.portal-dropdown-role {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--denim-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

.portal-dropdown-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--denim-light);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 10px 16px 4px;
}

.portal-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  text-decoration: none;
  transition: background 0.12s;
}

.portal-dropdown-item:hover {
  background: var(--canvas);
}

.portal-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.portal-name {
  font-family: var(--font-headline);
  font-size: var(--text-xs);
  color: var(--denim);
  display: block;
}

.portal-desc {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--denim-light);
  display: block;
}

.portal-dropdown-divider {
  height: 1px;
  background: var(--canvas-dark);
  margin: 4px 0;
}

.portal-dropdown-footer {
  padding: 8px 16px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.portal-dropdown-footer a {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--denim-light);
  text-decoration: none;
}

.portal-dropdown-footer a:hover {
  color: var(--denim);
}

.portal-dropdown-footer a:last-child {
  color: var(--rust);
  font-weight: 500;
}

/* --- Admin Content Area --- */
.admin-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}

/* --- SC Modal (shared) --- */
.sc-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
}

.sc-modal.open {
  display: flex;
}

.sc-modal-box {
  background: var(--worn-white);
  border-radius: var(--radius-lg);
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
}

.sc-modal-box--wide {
  max-width: 900px;
}

.sc-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5);
  border-bottom: 1px solid var(--canvas-dark);
}

.sc-modal-header h2 {
  font-family: var(--font-headline);
  font-size: var(--text-lg);
  color: var(--denim);
  margin: 0;
}

.sc-modal-close {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--denim-light);
  cursor: pointer;
  padding: var(--space-1);
  line-height: 1;
}

.sc-modal-close:hover {
  color: var(--denim);
}

.sc-modal-body {
  padding: var(--space-5);
}

.sc-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--canvas-dark);
}

/* --- SC Toast (shared) --- */
.sc-toast-container {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}

.sc-toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--worn-white);
  border: 1px solid var(--canvas-darker);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.25s, transform 0.25s;
  min-width: 260px;
  max-width: 420px;
}

.sc-toast--visible {
  opacity: 1;
  transform: translateX(0);
}

.sc-toast--exit {
  opacity: 0;
  transform: translateX(30px);
}

.sc-toast-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.sc-toast--info .sc-toast-icon    { background: rgba(43, 58, 74, 0.1); color: var(--denim); }
.sc-toast--success .sc-toast-icon { background: rgba(45, 122, 79, 0.1); color: var(--color-success); }
.sc-toast--error .sc-toast-icon   { background: rgba(181, 71, 42, 0.1); color: var(--rust); }
.sc-toast--warning .sc-toast-icon { background: rgba(196, 146, 42, 0.1); color: var(--color-warning); }

.sc-toast--error { border-left: 3px solid var(--rust); }
.sc-toast--success { border-left: 3px solid var(--color-success); }
.sc-toast--warning { border-left: 3px solid var(--color-warning); }

.sc-toast-msg {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--graphite);
  flex: 1;
}

.sc-toast-close {
  background: none;
  border: none;
  font-size: 16px;
  color: var(--denim-light);
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}

.sc-toast-close:hover {
  color: var(--denim);
}

/* --- SC Tooltip --- */
.sc-tooltip {
  position: relative;
}

.sc-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--denim);
  color: var(--worn-white);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, transform 0.15s;
  pointer-events: none;
  z-index: var(--z-dropdown);
}

.sc-tooltip:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* --- SC Dropdown (generic) --- */
.sc-dropdown {
  position: relative;
  display: inline-block;
}

.sc-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 140px;
  background: var(--worn-white);
  border: 1px solid var(--canvas-darker);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s, visibility 0.15s, transform 0.15s;
  z-index: var(--z-dropdown);
  padding: var(--space-1) 0;
}

.sc-dropdown.open .sc-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sc-dropdown-item {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--denim);
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: background 0.12s;
}

.sc-dropdown-item:hover {
  background: var(--canvas);
  color: var(--rust);
}

/* --- Admin Shared Form Styles --- */
.sc-btn {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sc-btn--primary {
  background: var(--rust);
  color: var(--worn-white);
}

.sc-btn--primary:hover {
  background: var(--rust-dark);
}

.sc-btn--secondary {
  background: var(--canvas);
  color: var(--denim);
  border: 1px solid var(--canvas-darker);
}

.sc-btn--secondary:hover {
  background: var(--canvas-dark);
}

.sc-btn--ghost {
  background: none;
  color: var(--denim);
}

.sc-btn--ghost:hover {
  background: var(--canvas);
}

.sc-btn--sm {
  font-size: 11px;
  padding: 3px 8px;
}

/* --- Admin Responsive (nav) --- */
@media (max-width: 768px) {
  .admin-nav {
    padding: var(--space-2) var(--space-3);
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .admin-nav-hamburger {
    display: block;
  }

  .admin-nav-groups {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: var(--space-1);
  }

  .admin-nav-groups--mobile-open {
    display: flex;
  }

  .nav-group-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0 0 0 var(--space-4);
  }

  .nav-group-dropdown a {
    color: rgba(250, 249, 246, 0.7);
  }

  .nav-group-dropdown a:hover {
    background: rgba(250, 249, 246, 0.1);
    color: var(--worn-white);
  }

  .nav-group-dropdown a.active {
    color: var(--worn-white);
    background: rgba(250, 249, 246, 0.15);
  }

  .sc-nav-search {
    width: 120px;
  }

  .sc-nav-search:focus {
    width: 150px;
  }

  .admin-content {
    padding: var(--space-4) var(--space-3);
  }
}

@media (max-width: 480px) {
  .sc-nav-search-wrap {
    display: none;
  }

  .admin-nav-right {
    gap: var(--space-2);
  }
}

/* ═══════════════════════════════════════════════════════════════
   S367: Form Error, Loading, and Accessibility Components
   ═══════════════════════════════════════════════════════════════ */

/* ── Screen-reader only utility ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Field-level error state ── */
.field-error .form-input,
.field-error .form-select,
.field-error .form-textarea {
  border-color: var(--rust);
  box-shadow: 0 0 0 2px rgba(181, 71, 42, 0.15);
}

.field-error-message {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--rust);
  margin-top: 4px;
  letter-spacing: 0.02em;
}

/* ── Loading spinner (CSS-only) ── */
@keyframes scSpinner {
  to { transform: rotate(360deg); }
}

.btn-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(250, 249, 246, 0.3);
  border-top-color: var(--worn-white);
  border-radius: 50%;
  animation: scSpinner 0.6s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}

.btn--loading {
  opacity: 0.8;
  cursor: wait;
  pointer-events: none;
}

/* ── Toast notifications ── */
.sc-toast {
  position: fixed;
  top: 80px;
  right: 20px;
  max-width: 400px;
  padding: 14px 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  border-radius: 2px;
  z-index: 10000;
  transform: translateX(120%);
  transition: transform 0.3s ease-out;
  box-shadow: 0 4px 16px rgba(43, 58, 74, 0.25);
}

.sc-toast.is-visible {
  transform: translateX(0);
}

.toast-error {
  background: var(--worn-white);
  color: var(--rust);
  border: 2px solid var(--rust);
  border-left: 4px solid var(--rust);
}

.toast-success {
  background: var(--worn-white);
  color: var(--success, #2d7a4f);
  border: 2px solid var(--success, #2d7a4f);
  border-left: 4px solid var(--success, #2d7a4f);
}

/* ── Keyboard focus-visible outlines ── */
:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}

.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible {
  outline: none;
  border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(184, 115, 51, 0.2);
}

.btn:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}