/* ========================================================================
   ASCEND DESIGN SYSTEM — Single Source of Truth
   ========================================================================
   This file defines every reusable visual token, component, animation,
   and layout primitive used across the Ascend platform. It extends the
   base variables in shared.css with component-level styles.

   Import order:  shared.css → ascend-design-system.css → page-specific.css
   ======================================================================== */


/* ========================================================================
   1. DESIGN TOKENS — CSS Custom Properties
   ======================================================================== */
:root {
    /* --- Extended Colors --- */
    --near-black: #0D1E35;                  /* Deep hero backgrounds */
    --light-bg: #F4F6F9;                    /* Section contrast backgrounds */
    --gold-gradient: linear-gradient(135deg, var(--accent) 0%, #D4B76A 100%);  /* CTA buttons, selected states */
    --hero-gradient: linear-gradient(160deg, #1B365D 0%, #0D1E35 60%, #080F1C 100%);  /* Dark hero bg */

    /* --- Brand Track Accent ---------------------------------------------
       Default values match AscendMed gold so any page without a body
       class="track-*" stays visually identical to today. Track-specific
       overrides live in the body.track-* selectors below this :root block.

       --accent          : solid hex of the brand accent
       --accent-rgb      : R,G,B triplet — used at *call sites* via
                           rgba(var(--accent-rgb), X) so any alpha works
       --accent-bright   : lighter highlight tone
       --accent-dim      : darker tone for muted/pressed states
       --accent-glow     : pre-built rgba for medium glow shadows (alpha 0.35)
       --accent-bg-tint  : pre-built rgba for subtle background tints (alpha 0.08)
       --gold            : backward-compat alias of the accent. Kept as a
                           literal hex (not var(--accent)) because nested
                           var() inside a custom property's value computes
                           at definition time, breaking track overrides.

       NOTE: --accent-glow, --accent-bg-tint, and --gold are *literals* and
       must be redeclared inside every body.track-* selector. CSS resolves
       var() inside a custom-property value at the property's definition
       site, not at the use site, so we cannot derive these from
       var(--accent-rgb) once and inherit. (Verified live in browser
       2026-04-26.)
       ----------------------------------------------------------------- */
    --accent: #C8A24E;
    --accent-rgb: 200, 162, 78;
    --accent-bright: #E8C078;
    --accent-dim: #B8902F;
    --accent-glow: rgba(200, 162, 78, 0.35);
    --accent-bg-tint: rgba(200, 162, 78, 0.08);
    --gold: #C8A24E;

    /* --- Spacing Scale (8px rhythm) --- */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;

    /* --- Border Radius --- */
    --ds-radius-card: 12px;                 /* Cards, bento items, modals */
    --ds-radius-btn: 8px;                   /* Buttons, inputs, pills */
    --ds-radius-pill: 100px;                /* Tags, badges, progress bars */
    --ds-radius-circle: 50%;                /* Avatars, node circles */

    /* --- Transitions --- */
    --ds-snap: 180ms;                       /* Fast snappy interactions (hover, press) */
    --ds-smooth: 300ms;                     /* Smooth content transitions */
    --ds-slow: 500ms;                       /* Page-level, journey fill */
    --ds-bezier: cubic-bezier(0.22, 0.61, 0.36, 1);  /* Primary easing — energetic out */

    /* --- Shadows --- */
    --ds-shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
    --ds-shadow-hover: 0 8px 32px rgba(0,0,0,0.1);                        /* Card hover lift */
    --ds-shadow-hero-card: 0 16px 48px rgba(13,30,53,0.3);                 /* Dark card hover */
    --ds-shadow-cta: 0 4px 24px rgba(var(--accent-rgb),0.35);                     /* Gold CTA resting */
    --ds-shadow-cta-hover: 0 8px 32px rgba(var(--accent-rgb),0.5);                /* Gold CTA hover */
    --ds-shadow-node-selected: 0 0 0 6px rgba(var(--accent-rgb),0.18), 0 4px 16px rgba(var(--accent-rgb),0.3);

    /* --- Z-Index Layers --- */
    --z-base: 0;
    --z-card: 1;
    --z-sticky: 100;
    --z-dropdown: 500;
    --z-modal: 1000;
    --z-toast: 2000;

    /* --- Typography Scale --- */
    --ds-text-xs: 0.65rem;                  /* Badges, pills */
    --ds-text-sm: 0.72rem;                  /* Labels, sub-text */
    --ds-text-base: 0.88rem;                /* Body, card text */
    --ds-text-md: 0.95rem;                  /* Card titles, stat values */
    --ds-text-lg: 1.1rem;                   /* Section sub-headings */
    --ds-text-xl: 1.25rem;                  /* Priority titles */
    --ds-text-2xl: 1.5rem;                  /* Dashboard title */
    --ds-text-3xl: 2rem;                    /* Tools section title */
    --ds-text-4xl: 4.5rem;                  /* Hero headline */
}


/* ========================================================================
   1.5 TRACK ACCENT OVERRIDES
   ========================================================================
   Each Ascend product track sets its own brand accent by adding a class
   to <body>. The :root defaults above keep the AscendMed gold so any
   un-classed page (e.g., index.html, the multi-track landing) renders
   exactly as it did before this refactor.

   Every track must declare ALL seven variables. We tried deriving
   --accent-glow / --accent-bg-tint / --gold from var(--accent-rgb), but
   var() inside a custom-property *definition* resolves at the cascade
   level where the property is declared — not at the consumer's level —
   so an override of --accent-rgb on body did not flow through to
   --accent-glow on body's children. Verbose-but-correct beats
   clever-but-broken.

   To add a new track (e.g., AscendLaw, AscendEng), copy a body.track-*
   block below and replace the seven values with the new brand palette.
   Do not edit the :root defaults.
   ======================================================================== */
body.track-med,
.track-med {
    /* Core accent palette */
    --accent: #C8A24E;
    --accent-rgb: 200, 162, 78;
    --accent-bright: #E8C078;
    --accent-dim: #B8902F;
    --accent-glow: rgba(200, 162, 78, 0.35);
    --accent-bg-tint: rgba(200, 162, 78, 0.08);
    --gold: #C8A24E;
    /* Derived tokens — must be redeclared per track because nested var()
       inside a custom-property value computes at the property's declaration
       site (here: :root), so an override of --accent on body alone does NOT
       flow through to these. Values below are literal-equivalent to what
       :root computed for AscendMed before this refactor. */
    --gold-gradient: linear-gradient(135deg, #C8A24E 0%, #D4B76A 100%);
    --ds-shadow-cta: 0 4px 24px rgba(200, 162, 78, 0.35);
    --ds-shadow-cta-hover: 0 8px 32px rgba(200, 162, 78, 0.5);
    --ds-shadow-node-selected: 0 0 0 6px rgba(200, 162, 78, 0.18), 0 4px 16px rgba(200, 162, 78, 0.3);
}

body.track-dental,
.track-dental {
    /* Core accent palette */
    --accent: #14B8A6;
    --accent-rgb: 20, 184, 166;
    --accent-bright: #5EEAD4;
    --accent-dim: #0F766E;
    --accent-glow: rgba(20, 184, 166, 0.35);
    --accent-bg-tint: rgba(20, 184, 166, 0.08);
    --gold: #14B8A6;
    /* Derived tokens — see body.track-med for explanation. The med gradient
       uses --accent → --gold-light (#D4B76A) which is a literal pre-accent
       brand color. AscendDental has no equivalent literal, so the dental
       gradient uses --accent → --accent-bright (#5EEAD4) instead. */
    --gold-gradient: linear-gradient(135deg, #14B8A6 0%, #5EEAD4 100%);
    --ds-shadow-cta: 0 4px 24px rgba(20, 184, 166, 0.35);
    --ds-shadow-cta-hover: 0 8px 32px rgba(20, 184, 166, 0.5);
    --ds-shadow-node-selected: 0 0 0 6px rgba(20, 184, 166, 0.18), 0 4px 16px rgba(20, 184, 166, 0.3);
}


/* ========================================================================
   2. TYPOGRAPHY RULES
   ======================================================================== */

/* --- Font Weight Hierarchy ---
   900: Hero headlines, section titles, dashboard title
   800: Stage labels, node labels, bento card names, tools tag
   700: CTA buttons, stat labels, callout CTA, checklist links
   500: Nav links, banner text
   400: Body text, descriptions, sub-text
*/

/* --- Letter Spacing ---
   -0.05em: Hero headline (ultra-tight for display)
   -0.04em: Dashboard title, tools title
   -0.03em: Priority titles
   -0.02em: Stat values, bento hero name
   -0.01em: Node labels
    0.06em: Stat labels (uppercase)
    0.1em:  Stage label, tools tag (all-caps labels)
    0.12em: Tools tag (widest tracking)
*/

/* --- Line Heights ---
    1.04: Hero headline (very tight)
    1.2:  Headings (shared.css default)
    1.4:  Stage descriptions, stat sub-text
    1.5:  Banner text
    1.6:  Card text, checklist items, bento lines
    1.7:  Hero subtitle, callout text, body text
*/

/* --- Instrument Serif ---
   Usage: Hero accent word ONLY ("Simplified.")
   Applied via .am-hero-accent class
   font-weight: 400, font-style: italic
*/


/* ========================================================================
   3. ANIMATIONS — @keyframes
   ======================================================================== */

/* Hero entrance — fade up from below */
@keyframes ds-fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Priority section entrance — quick slide */
@keyframes ds-slide-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Geometric diamond — continuous rotation */
@keyframes ds-rotate {
    from { transform: rotate(45deg); }
    to { transform: rotate(405deg); }
}

/* Geometric circle — breathing pulse */
@keyframes ds-pulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.15); opacity: 1; }
}

/* Geometric lines — horizontal float */
@keyframes ds-float-h {
    0%, 100% { transform: translateX(0); opacity: 0.5; }
    50% { transform: translateX(-20px); opacity: 1; }
}

/* Geometric ring — slow breathe */
@keyframes ds-ring-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
    50% { transform: translate(-50%, -50%) scale(1.08); opacity: 0.7; }
}

/* Geometric dots — vertical float */
@keyframes ds-float-dot {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50% { transform: translateY(-12px); opacity: 1; }
}

/* Geometric square — slow continuous rotation */
@keyframes ds-rotate-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Bento hero — animated diagonal stripes */
@keyframes ds-stripe-slide {
    from { transform: translateX(0) translateY(0); }
    to { transform: translateX(42px) translateY(42px); }
}

/* CTA shimmer — light sweep on hover */
/* Applied via ::before pseudo-element on .am-hero-cta */


/* ========================================================================
   4. HERO SECTION
   ======================================================================== */

/* Hero container — dark gradient background with split layout */
.am-hero {
    position: relative;
    min-height: 560px;
    background: var(--hero-gradient);
    padding: 160px var(--space-xl) 100px;
    overflow: hidden;
    margin-top: 68px;                        /* Space for fixed navbar (68px) */
}

/* Hero inner — split grid: text left (60%), shapes right (40%) */
.am-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
    animation: ds-fade-up 0.5s ease-out;
}

/* Hero text column */
.am-hero-left {
    max-width: 640px;
}

/* Hero headline — display typography */
.am-hero-title {
    font-size: var(--ds-text-4xl);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.04;
    color: #fff;
    margin-bottom: var(--space-lg);
}

/* Hero accent — Instrument Serif italic in gold */
.am-hero-accent {
    font-family: var(--font-serif);
    font-weight: 400;
    font-style: italic;
    color: var(--gold);
    font-size: 1.05em;
    display: inline-block;
}

/* Hero subtitle — muted white */
.am-hero-sub {
    font-size: 1.125rem;
    font-weight: 400;
    color: rgba(255,255,255,0.5);
    line-height: 1.7;
    margin-bottom: 40px;
    max-width: 480px;
}

/* Hero CTA — gold gradient button with shimmer */
.am-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 40px;
    background: var(--gold-gradient);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 700;
    border-radius: var(--ds-radius-btn);
    text-decoration: none;
    transition: all var(--ds-snap) var(--ds-bezier);
    box-shadow: var(--ds-shadow-cta);
    position: relative;
    overflow: hidden;
}

/* Shimmer sweep effect */
.am-hero-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.45s;
}

.am-hero-cta:hover::before { left: 100%; }
.am-hero-cta:hover {
    transform: translateY(-3px);
    box-shadow: var(--ds-shadow-cta-hover);
}
.am-hero-cta:active { transform: translateY(0); }

/* Hero right — geometric shape container */
.am-hero-right {
    position: relative;
    width: 100%;
    height: 400px;
}


/* ========================================================================
   5. GEOMETRIC SHAPES — Animated hero background elements
   ======================================================================== */

/* Diamond — rotated square with gold border */
.am-geo-diamond {
    position: absolute;
    width: 120px;
    height: 120px;
    border: 3px solid rgba(var(--accent-rgb),0.5);
    top: 30px;
    right: 40px;
    animation: ds-rotate 12s linear infinite;
}

/* Pulsing circle — gold border with tinted fill */
.am-geo-circle {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: var(--ds-radius-circle);
    border: 2px solid rgba(var(--accent-rgb),0.35);
    background: rgba(var(--accent-rgb),0.06);
    bottom: 80px;
    left: 40px;
    animation: ds-pulse 3s ease-in-out infinite;
}

/* Floating gradient lines */
.am-geo-line {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, rgba(var(--accent-rgb),0.6), transparent);
    border-radius: 2px;
}
.am-geo-line-1 { width: 140px; top: 160px; right: 10px; animation: ds-float-h 6s ease-in-out infinite; }
.am-geo-line-2 { width: 100px; bottom: 140px; right: 100px; transform: rotate(-15deg); animation: ds-float-h 8s ease-in-out infinite reverse; }

/* Large outline ring */
.am-geo-ring {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: var(--ds-radius-circle);
    border: 1.5px solid rgba(255,255,255,0.07);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: ds-ring-pulse 5s ease-in-out infinite;
}

/* Small accent dots */
.am-geo-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: var(--ds-radius-circle);
    background: var(--gold);
}
.am-geo-dot-1 { top: 90px; left: 80px; animation: ds-float-dot 4s ease-in-out infinite; }
.am-geo-dot-2 { bottom: 50px; right: 80px; animation: ds-float-dot 5s ease-in-out infinite 1s; }

/* Small rotating square */
.am-geo-square {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255,255,255,0.12);
    top: 260px;
    left: 20px;
    animation: ds-rotate-slow 20s linear infinite;
}


/* ========================================================================
   6. SECTION DIVIDERS — Angled clip-path transitions
   ======================================================================== */

.am-section-divider {
    height: 48px;
    position: relative;
    overflow: hidden;
}

/* Hero-to-content divider — dark to light */
.am-divider-hero {
    background: var(--light-bg);
    margin-top: -1px;
}
.am-divider-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--near-black);
    clip-path: polygon(0 0, 100% 0, 100% 30%, 0 100%);
}

/* Mid-section divider — light bg to white */
.am-divider-mid {
    background: var(--white);
    height: 32px;
}
.am-divider-mid::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--light-bg);
    clip-path: polygon(0 0, 100% 0, 100% 20%, 0 100%);
}

/* Dashboard-to-tools divider — white to light */
.am-divider-tools {
    background: var(--light-bg);
    height: 40px;
}
.am-divider-tools::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--white);
    clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%);
}


/* ========================================================================
   7. ACCOUNT BANNER — Dark strip with gold left accent
   ======================================================================== */

.am-banner {
    max-width: 1000px;
    margin: -24px auto 0;
    padding: 0 var(--space-xl);
    position: relative;
    z-index: 2;
}

.am-banner-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-md) 28px;
    background: var(--near-black);
    border: 1px solid rgba(var(--accent-rgb),0.15);
    border-left: 4px solid var(--gold);
    border-radius: var(--ds-radius-card);
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
    font-weight: 500;
}

.am-banner-text { line-height: 1.5; }

.am-banner-badge {
    padding: var(--space-xs) 14px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--ds-radius-pill);
    font-size: var(--ds-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.4);
    white-space: nowrap;
}


/* ========================================================================
   8. STAGE SELECTOR — Journey Path with bold circles + thick line
   ======================================================================== */

.dash-page { min-height: auto; margin-top: 0; }

.dash-stage-section {
    padding: var(--space-3xl) var(--space-xl) 20px;
    background: var(--light-bg);
}

.dash-stage-inner {
    max-width: 960px;
    margin: 0 auto;
}

/* Section label — all-caps, bold */
.dash-stage-label {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: var(--space-xl);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Journey path container */
.am-journey {
    position: relative;
    padding: 0 var(--space-xl);
}

/* Connecting track — horizontal line behind nodes */
.am-journey-track {
    position: absolute;
    top: 26px;
    left: 100px;
    right: 100px;
    height: 4px;
    background: rgba(27,54,93,0.12);
    z-index: 0;
    border-radius: 4px;
}

.am-journey-line {
    position: absolute;
    inset: 0;
    background: rgba(27,54,93,0.12);
    border-radius: 4px;
}

/* Progressive gold fill — width controlled by JS */
.am-journey-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: var(--gold-gradient);
    border-radius: 4px;
    transition: width 0.4s var(--ds-bezier);
}

/* Node grid — 4 evenly spaced */
.am-journey-nodes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
    z-index: 1;
}

/* Individual node — clickable column */
.am-journey-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    padding: 0;
    border: none;
    background: none;
    transition: all var(--ds-snap) var(--ds-bezier);
}

/* Node circle — 52px, bold 3px navy border */
.am-node-circle {
    width: 52px;
    height: 52px;
    border-radius: var(--ds-radius-circle);
    border: 3px solid var(--navy);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--navy);
    transition: all var(--ds-snap) var(--ds-bezier);
    margin-bottom: 14px;
    position: relative;
}

/* Node hover — gold outline with subtle glow */
.am-journey-node:hover .am-node-circle {
    border-color: var(--gold);
    color: var(--gold);
    box-shadow: 0 0 0 6px rgba(var(--accent-rgb),0.1);
    transform: scale(1.06);
}

/* Node selected — gold gradient fill, white icon */
.am-journey-node.selected .am-node-circle {
    background: var(--gold-gradient);
    border-color: var(--gold);
    color: #fff;
    box-shadow: var(--ds-shadow-node-selected);
}

/* Node label — bold, navy */
.am-node-label {
    font-size: var(--ds-text-base);
    font-weight: 800;
    color: var(--navy);
    margin-bottom: var(--space-xs);
    letter-spacing: -0.01em;
    transition: color var(--ds-snap);
}

.am-journey-node.selected .am-node-label { color: var(--gold); }

/* Node description — muted gray */
.dash-stage-desc {
    font-size: var(--ds-text-sm);
    color: var(--gray-500);
    line-height: 1.4;
    max-width: 140px;
    font-weight: 400;
}

.am-journey-node.selected .dash-stage-desc { color: var(--gray-600); }

/* Stage prompt — italic instruction text */
.dash-stage-prompt {
    text-align: center;
    font-size: 0.85rem;
    color: var(--gray-400);
    padding: var(--space-lg) 0 0;
    font-style: italic;
    font-weight: 400;
}


/* ========================================================================
   9. PRIORITIES — Checklist panel with gold left border
   ======================================================================== */

.dash-priorities {
    padding: 12px var(--space-xl) 0;
    background: var(--light-bg);
    animation: ds-slide-in 0.2s ease-out;
}

.dash-priorities-inner {
    max-width: 960px;
    margin: 0 auto;
    border-left: 4px solid var(--gold);
    padding-left: 28px;
}

.dash-priorities-title {
    font-size: var(--ds-text-xl);
    font-weight: 900;
    color: var(--gray-900);
    margin-bottom: var(--space-md);
    letter-spacing: -0.03em;
}

/* Checklist — clean list of action items */
.dash-checklist { list-style: none; padding: 0; margin: 0; }

.dash-checklist li {
    padding: var(--space-md) 20px;
    border: 1px solid var(--gray-200);
    border-left: 4px solid var(--gold);
    border-radius: var(--ds-radius-card);
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: var(--gray-700);
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--white);
    transition: all 150ms var(--ds-bezier);
    font-weight: 400;
}

.dash-checklist li:hover {
    border-color: var(--gold);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    transform: translateX(4px);
}

/* Gold circle bullet */
.dash-check-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: var(--ds-radius-circle);
    background: var(--gold-gradient);
    margin-top: 2px;
}

.dash-checklist a {
    color: var(--gold);
    font-weight: 700;
    text-decoration: none;
    transition: color 150ms;
}
.dash-checklist a:hover { color: var(--navy); }

/* Gold callout banner */
.dash-callout {
    padding: var(--space-lg) 28px;
    background: var(--gold-pale);
    border: 1px solid rgba(var(--accent-rgb),0.2);
    border-left: 4px solid var(--gold);
    border-radius: var(--ds-radius-card);
    font-size: var(--ds-text-base);
    color: #6b5a2e;
    line-height: 1.7;
    margin-top: var(--space-md);
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-weight: 400;
}

.dash-callout strong { color: var(--navy); font-weight: 800; }

/* Callout CTA button */
.dash-callout a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 20px;
    background: var(--navy);
    color: #fff;
    border-radius: var(--ds-radius-btn);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 150ms var(--ds-bezier);
    margin-left: auto;
    white-space: nowrap;
}

.dash-callout a:hover {
    background: var(--navy-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(27,54,93,0.2);
}


/* ========================================================================
   10. STAT DASHBOARD — Progress cards with bold left border
   ======================================================================== */

.dash-progress {
    padding: 56px var(--space-xl) 0;
    background: var(--white);
}

.dash-progress-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.dash-progress-title {
    font-size: var(--ds-text-2xl);
    font-weight: 900;
    color: var(--gray-900);
    margin-bottom: var(--space-lg);
    letter-spacing: -0.04em;
}

.dash-progress-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-md);
}

/* Stat card — white with 4px left accent border */
.dash-stat-card {
    padding: var(--space-lg);
    border: 1px solid var(--gray-200);
    border-radius: var(--ds-radius-card);
    background: var(--white);
    display: flex;
    align-items: flex-start;
    gap: 18px;
    transition: all 150ms var(--ds-bezier);
    position: relative;
    overflow: hidden;
}

/* Left accent border — colored per card via ID */
.dash-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
}

#dashStatShadowing::before    { background: var(--navy); }
#dashStatVolunteering::before { background: #16a34a; }
#dashStatResearch::before     { background: #8B5CF6; }
#dashStatReflections::before  { background: var(--gold); }
#dashStatLOR::before          { background: var(--navy); }
#dashStatPS::before           { background: var(--gold); }
#dashStatSchools::before      { background: #DC2F5A; }

.dash-stat-card:hover {
    border-color: var(--gray-300);
    box-shadow: var(--ds-shadow-hover);
    transform: translateY(-2px);
}

/* Stat icon — colored background square */
.dash-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--ds-radius-card);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Icon color variants */
.dash-stat-icon.navy   { background: rgba(27,54,93,0.08); color: var(--navy); }
.dash-stat-icon.gold   { background: rgba(var(--accent-rgb),0.1); color: #8b6914; }
.dash-stat-icon.green  { background: rgba(22,163,74,0.08); color: #16a34a; }
.dash-stat-icon.purple { background: rgba(139,92,246,0.08); color: #8B5CF6; }
.dash-stat-icon.red    { background: rgba(220,47,90,0.08); color: #DC2F5A; }

.dash-stat-body { flex: 1; min-width: 0; }

/* Stat label — uppercase, small, gray */
.dash-stat-label {
    font-size: var(--ds-text-sm);
    font-weight: 700;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-sm);
}

/* Stat value — large, bold */
.dash-stat-value {
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--gray-900);
    margin-bottom: 3px;
    letter-spacing: -0.02em;
}

.dash-stat-value.empty {
    color: var(--gray-400);
    font-weight: 500;
    font-size: var(--ds-text-md);
}

/* Stat sub-text */
.dash-stat-sub {
    font-size: 0.75rem;
    color: var(--gray-400);
    line-height: 1.4;
    font-weight: 400;
}

/* Stat action link */
.dash-stat-link {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gold);
    text-decoration: none;
    display: inline-block;
    margin-top: var(--space-sm);
    transition: color 150ms;
}
.dash-stat-link:hover { color: var(--navy); }

/* Stat progress bar — thin gold fill */
.dash-stat-bar {
    height: 4px;
    background: var(--gray-100);
    border-radius: var(--ds-radius-pill);
    margin-top: 12px;
    overflow: hidden;
}

.dash-stat-bar-fill {
    height: 100%;
    background: var(--gold-gradient);
    border-radius: var(--ds-radius-pill);
    transition: width 0.6s var(--ds-bezier);
}


/* ========================================================================
   11. BENTO GRID — Featured tools cards
   ======================================================================== */

.am-tools {
    padding: 72px var(--space-xl) var(--space-4xl);
    background: var(--light-bg);
}

.am-tools-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.am-tools-header { margin-bottom: 40px; }

/* Section tag — all-caps gold label */
.am-tools-tag {
    display: inline-block;
    font-size: var(--ds-text-sm);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gold);
    margin-bottom: 12px;
}

/* Section title — bold display */
.am-tools-title {
    font-size: var(--ds-text-3xl);
    font-weight: 900;
    letter-spacing: -0.04em;
    color: var(--gray-900);
}

/* Asymmetric bento grid:
   Row 1-2 left: hero card (tall, 2 rows)
   Row 1 right: Interview Prep
   Row 2 right: Resume Builder
   Row 3: Research + Target Schools */
.am-bento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: var(--space-md);
}

/* Base bento card */
.am-bento-card {
    position: relative;
    border-radius: var(--ds-radius-card);
    padding: var(--space-xl) 28px;
    text-decoration: none;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    transition: all var(--ds-snap) var(--ds-bezier);
    border: 2px solid transparent;
    background: var(--white);
    cursor: pointer;
}

/* Gold gradient border on hover — pseudo-element technique */
.am-bento-card::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: calc(var(--ds-radius-card) + 2px);
    background: var(--gold-gradient);
    z-index: -1;
    opacity: 0;
    transition: opacity var(--ds-snap) var(--ds-bezier);
}
.am-bento-card:hover::after { opacity: 1; }

.am-bento-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.1);
    border-color: transparent;
    background: var(--white);
}

/* Hero card — tall, left column, dark gradient bg */
.am-bento-hero {
    grid-row: 1 / 3;
    grid-column: 1 / 2;
    background: linear-gradient(150deg, #1B365D 0%, #0D1E35 100%);
    border-color: transparent;
    min-height: 420px;
    align-items: flex-end;
}

.am-bento-hero::after { background: var(--gold-gradient); }

.am-bento-hero:hover {
    background: linear-gradient(150deg, #1B365D 0%, #0D1E35 100%);
    box-shadow: var(--ds-shadow-hero-card);
}

.am-bento-hero .am-bento-name,
.am-bento-hero .am-bento-line { color: #fff; }
.am-bento-hero .am-bento-line { opacity: 0.6; font-size: var(--ds-text-md); max-width: 280px; }
.am-bento-hero .am-bento-icon { color: var(--gold); background: rgba(var(--accent-rgb),0.15); }
.am-bento-hero .am-bento-arrow { color: var(--gold); }
.am-bento-hero .am-bento-name { font-size: 1.4rem; font-weight: 900; }

/* Animated diagonal stripes — hero card background decoration */
.am-bento-stripes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.am-bento-stripes::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(var(--accent-rgb),0.03) 20px, rgba(var(--accent-rgb),0.03) 22px);
    animation: ds-stripe-slide 25s linear infinite;
}

/* Small card variant (stacked on right) */
.am-bento-small { min-height: 195px; }

/* Wide card variant (bottom row) */
.am-bento-wide { grid-column: auto; }

/* Card content layer */
.am-bento-content {
    position: relative;
    z-index: 1;
    width: 100%;
}

/* Card icon — rounded square */
.am-bento-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--ds-radius-card);
    background: rgba(27,54,93,0.06);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

/* Card name */
.am-bento-name {
    font-size: var(--ds-text-lg);
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

/* Card tagline */
.am-bento-line {
    font-size: 0.9rem;
    color: var(--gray-500);
    font-weight: 400;
    margin-bottom: 0;
    line-height: 1.6;
}

/* Card arrow — slides right on hover */
.am-bento-arrow {
    position: absolute;
    top: var(--space-xl);
    right: 0;
    color: var(--gray-300);
    transition: all var(--ds-snap) var(--ds-bezier);
}
.am-bento-card:hover .am-bento-arrow {
    color: var(--gold);
    transform: translateX(4px);
}


/* ========================================================================
   12. BUTTON VARIANTS — Reusable across all pages
   ======================================================================== */

/* Primary navy button */
.ds-btn-navy {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 12px var(--space-lg);
    background: var(--navy);
    color: #fff;
    font-family: var(--font-sans);
    font-size: var(--ds-text-base);
    font-weight: 700;
    border: none;
    border-radius: var(--ds-radius-btn);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--ds-snap) var(--ds-bezier);
    box-shadow: 0 1px 3px rgba(27,54,93,0.15);
}
.ds-btn-navy:hover {
    background: var(--navy-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(27,54,93,0.22);
}
.ds-btn-navy:active { transform: translateY(0); }

/* Gold gradient button */
.ds-btn-gold {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 12px var(--space-lg);
    background: var(--gold-gradient);
    color: #fff;
    font-family: var(--font-sans);
    font-size: var(--ds-text-base);
    font-weight: 700;
    border: none;
    border-radius: var(--ds-radius-btn);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--ds-snap) var(--ds-bezier);
    box-shadow: var(--ds-shadow-cta);
}
.ds-btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: var(--ds-shadow-cta-hover);
}
.ds-btn-gold:active { transform: translateY(0); }

/* Ghost button — outlined */
.ds-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 12px var(--space-lg);
    background: transparent;
    color: var(--navy);
    font-family: var(--font-sans);
    font-size: var(--ds-text-base);
    font-weight: 700;
    border: 2px solid var(--gray-200);
    border-radius: var(--ds-radius-btn);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--ds-snap) var(--ds-bezier);
}
.ds-btn-ghost:hover { border-color: var(--navy); background: rgba(27,54,93,0.03); }
.ds-btn-ghost:active { background: rgba(27,54,93,0.06); }


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

/* Section container — centered with max-width */
.ds-container { max-width: 1100px; margin: 0 auto; padding: 0 var(--space-xl); }
.ds-container-sm { max-width: 960px; margin: 0 auto; padding: 0 var(--space-xl); }
.ds-container-lg { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-xl); }

/* Section padding — vertical rhythm */
.ds-section-sm { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.ds-section-md { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }
.ds-section-lg { padding-top: var(--space-4xl); padding-bottom: var(--space-4xl); }

/* Background colors */
.ds-bg-white { background: var(--white); }
.ds-bg-light { background: var(--light-bg); }
.ds-bg-navy  { background: var(--navy); }
.ds-bg-dark  { background: var(--near-black); }

/* Text color utilities */
.ds-text-navy { color: var(--navy); }
.ds-text-gold { color: var(--gold); }
.ds-text-muted { color: var(--gray-500); }


/* ========================================================================
   14. SCROLL-TRIGGERED ANIMATION CLASSES
   ======================================================================== */

/* Applied by JS IntersectionObserver — initial hidden state */
/* Elements start at opacity:0, translateY(24px), then animate to visible
   via JS setting opacity:1 and transform:translateY(0).
   Stagger delays are set inline by JS: transition-delay: (index * 0.08)s */


/* ========================================================================
   15. RESPONSIVE BREAKPOINTS
   ======================================================================== */

@media (max-width: 1024px) {
    .am-hero-title { font-size: 3.5rem; }
    .am-hero-inner { gap: 40px; }
    .am-hero-right { height: 340px; }
    .am-bento { grid-template-columns: 1fr 1fr; }
    .am-bento-hero { min-height: 360px; }
}

@media (max-width: 768px) {
    /* Hero stacks vertically, shapes hidden */
    .am-hero { padding: 140px 20px 72px; min-height: auto; }
    .am-hero-inner { grid-template-columns: 1fr; gap: 0; }
    .am-hero-title { font-size: 2.5rem; }
    .am-hero-sub { font-size: 1rem; margin-bottom: var(--space-xl); }
    .am-hero-cta { padding: 14px var(--space-xl); font-size: 0.92rem; }
    .am-hero-right { display: none; }

    /* Banner stacks */
    .am-banner { padding: 0 20px; margin-top: -16px; }
    .am-banner-inner { flex-direction: column; gap: 10px; text-align: center; padding: 14px 20px; }

    /* Dividers shrink */
    .am-section-divider { height: 24px; }

    /* Stage selector — 2x2 grid with card-style nodes */
    .dash-stage-section { padding: 40px 20px 16px; }
    .am-journey { padding: 0; }
    .am-journey-track { display: none; }
    .am-journey-nodes { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .am-journey-node { padding: 18px; border: 2px solid var(--gray-200); border-radius: var(--ds-radius-card); background: var(--white); }
    .am-journey-node.selected { border-color: var(--gold); background: #FFFBF0; }
    .am-node-circle { width: 44px; height: 44px; }

    /* Priorities */
    .dash-priorities { padding: 12px 20px 0; }
    .dash-priorities-inner { padding-left: 20px; }

    /* Progress grid single column */
    .dash-progress { padding: 40px 20px 0; }
    .dash-progress-grid { grid-template-columns: 1fr; }

    /* Bento single column */
    .am-tools { padding: 48px 20px 64px; }
    .am-bento { grid-template-columns: 1fr; }
    .am-bento-hero { grid-row: auto; grid-column: auto; min-height: 240px; }
    .am-bento-hero .am-bento-name { font-size: 1.2rem; }
    .am-bento-small { min-height: 160px; }
}