/* ========== CUSTOM FONT ========== */
    @font-face {
      font-family: 'Filiciti';
      src: url('assets/font/Filiciti-Regular.otf') format('opentype'),
           url('assets/font/Filiciti-Regular.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

    /* ========== CSS VARIABLES ========== */
    :root {
      --bg-primary: #000000;
      --bg-secondary: rgba(31, 26, 74, 0.98);
      --bg-card: #000000;
      --bg-card-solid: #000000;
      --accent-yellow: #C7C11F;
      --accent-dark-yellow: #858130;
      --accent-cyan: #4496B5;
      --accent-green: #3B9D7D;
      --accent-red: #C0392B;
      --accent-amber: #e67e22;
      --text-primary: #ffffff;
      --text-muted: #9ca3af;
      --c-fil-work: #7B1FA2;
      --c-fil-personal: #AB47BC;
      --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      --font-serif: 'Lexend', -apple-system, sans-serif;
      --transition: all 0.3s ease;
      --sidebar-w: 260px;
      --topbar-h: 56px;
    }

    /* ========== RESET ========== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + 16px); }

    body {
      font-family: var(--font-sans);
      background-color: var(--bg-primary);
      color: var(--text-primary);
      line-height: 1.6;
      min-height: 100vh;
    }

    a { color: var(--accent-cyan); text-decoration: none; transition: var(--transition); }
    a:hover { color: var(--accent-yellow); }
    img { max-width: 100%; height: auto; }

    /* ========== TYPOGRAPHY ========== */
    h1, h2 { font-family: var(--font-serif); font-weight: 700; line-height: 1.2; margin-bottom: 1rem; }
    h3, h4 { font-family: var(--font-sans); font-weight: 600; line-height: 1.3; margin-bottom: 0.75rem; }
    h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
    h2 { font-size: clamp(1.25rem, 3vw, 1.65rem); }
    h3 { font-size: clamp(1rem, 2.5vw, 1.2rem); }
    p { margin-bottom: 1rem; color: var(--text-muted); }
    .text-yellow { color: var(--accent-yellow); }
    .text-cyan { color: var(--accent-cyan); }
    .text-green { color: var(--accent-green); }
    .text-white { color: var(--text-primary); }

    /* ========== TOPBAR ========== */
    .topbar {
      position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h);
      background: rgba(31, 26, 74, 0.98); color: #fff; z-index: 100;
      display: flex; align-items: center; padding: 0 24px; gap: 16px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.3);
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .topbar-logo {
      display: flex; align-items: center; gap: 0.5rem;
    }
    .topbar-logo img { height: 28px; }
    .topbar-logo span {
      font-family: 'Filiciti', var(--font-sans);
      font-size: 1.3rem; font-weight: 300; letter-spacing: 0.08em;
      color: var(--accent-yellow);
    }
    .topbar-divider {
      width: 1px; height: 24px; background: rgba(255,255,255,0.15); margin: 0 4px;
    }
    .topbar-title {
      font-size: 0.85rem; font-weight: 500; color: var(--text-muted);
    }
    .topbar-right {
      margin-left: auto; display: flex; align-items: center; gap: 12px;
    }
    .topbar-print-btn {
      padding: 6px 14px; background: transparent; border: 1px solid rgba(255,255,255,0.2);
      color: var(--text-primary); border-radius: 0.4rem; font-size: 0.78rem; font-weight: 500;
      cursor: pointer; transition: var(--transition); font-family: var(--font-sans);
    }
    .topbar-print-btn:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
    .topbar-edit-btn {
      background: var(--accent-yellow); color: #000;
      border-color: var(--accent-yellow); font-weight: 600;
    }
    .topbar-edit-btn:hover {
      background: var(--accent-dark-yellow); border-color: var(--accent-dark-yellow); color: #000;
    }
    .topbar-badge {
      background: rgba(199,193,31,0.15); color: var(--accent-yellow);
      padding: 4px 12px; border-radius: 20px; font-size: 0.72rem;
      font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
    }

    /* ========== SIDEBAR ========== */
    .sidebar {
      position: fixed; top: var(--topbar-h); left: 0; bottom: 0;
      width: var(--sidebar-w); background: var(--bg-secondary);
      border-right: 1px solid rgba(255,255,255,0.08);
      overflow-y: auto; padding: 20px 0; z-index: 90;
    }
    .sidebar-section-label {
      padding: 8px 20px; font-size: 0.65rem; text-transform: uppercase;
      letter-spacing: 0.12em; color: rgba(255,255,255,0.3); font-weight: 600;
      margin-top: 12px;
    }
    .sidebar-divider {
      height: 1px; background: rgba(255,255,255,0.06); margin: 12px 20px;
    }
    .sidebar-link {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 20px; color: var(--text-muted);
      text-decoration: none; font-size: 0.82rem; font-weight: 500;
      border-left: 3px solid transparent; transition: all 0.15s;
    }
    .sidebar-link:hover { background: rgba(255,255,255,0.04); color: var(--text-primary); }
    .sidebar-link.active {
      color: var(--accent-yellow); border-left-color: var(--accent-yellow);
      background: rgba(199,193,31,0.06); font-weight: 600;
    }
    .sidebar-link .nav-num {
      font-size: 0.7rem; font-weight: 700; color: rgba(255,255,255,0.2);
      min-width: 18px;
    }
    .sidebar-link.active .nav-num { color: var(--accent-yellow); }
    .sidebar-footer {
      padding: 20px; margin-top: 16px; border-top: 1px solid rgba(255,255,255,0.06);
      font-size: 0.72rem; color: var(--text-muted);
    }
    .sidebar-footer strong { color: var(--text-primary); }

    /* ========== MAIN CONTENT AREA ========== */
    .main {
      margin-left: var(--sidebar-w); margin-top: var(--topbar-h);
      padding: 32px 40px 80px;
      max-width: calc(1200px + var(--sidebar-w));
    }

    /* ========== SECTION BLOCKS ========== */
    .section-block {
      background: var(--bg-card); border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px; margin-bottom: 24px;
      overflow: hidden;
    }
    .section-content { padding: 28px 32px; }
    .section-content img, .hero-card img {
      mix-blend-mode: lighten;
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%),
                          linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
      -webkit-mask-composite: destination-in;
      mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%),
                  linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
      mask-composite: intersect;
    }
    .hero-card img {
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%),
                          linear-gradient(to bottom, transparent 0%, black 35%, black 65%, transparent 100%);
      -webkit-mask-composite: destination-in;
      mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%),
                  linear-gradient(to bottom, transparent 0%, black 35%, black 65%, transparent 100%);
      mask-composite: intersect;
    }

    /* ========== HERO CARD ========== */
    .hero-card {
      background: transparent;
      border: none;
      border-radius: 0; padding: 64px 40px 48px; margin-bottom: 24px;
      text-align: center; position: relative; overflow: hidden;
    }
    .hero-card * { position: relative; z-index: 1; }
    .hero-tagline {
      display: inline-block; padding: 0.4rem 1.25rem;
      background: rgba(199,193,31,0.08); border: 1px solid rgba(199,193,31,0.3);
      border-radius: 2rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em;
      color: var(--accent-yellow); margin-bottom: 1.5rem; text-transform: uppercase;
    }
    .hero-card h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.15; margin-bottom: 1.25rem; font-weight: 800; }
    .hero-subtitle { font-size: 1.05rem; color: var(--text-muted); max-width: 600px; margin: 0 auto 2.5rem; line-height: 1.7; }

    /* ========== CARDS ========== */
    .card {
      background: var(--bg-card); border: 1px solid rgba(255,255,255,0.12);
      border-radius: 0.75rem; padding: 1.5rem; transition: var(--transition);
    }
    .card:hover { border-color: rgba(255,255,255,0.3); transform: translateY(-2px); }
    .card-icon {
      width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
      background: rgba(199,193,31,0.1); border-radius: 0.5rem; margin-bottom: 0.75rem;
    }
    .card h3 { margin-bottom: 0.4rem; font-size: 1rem; }
    .card p { font-size: 0.85rem; margin-bottom: 0; }
    .cards-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.25rem;
    }

    /* ========== QUOTE BLOCK ========== */
    .quote-block {
      background: var(--bg-card); border-left: 3px solid var(--accent-yellow);
      padding: 1.25rem 1.5rem; margin: 1.5rem 0; border-radius: 0 0.5rem 0.5rem 0;
    }
    .quote-block p { font-size: 1rem; font-style: italic; color: var(--text-primary); margin-bottom: 0; }
    /* ========== READ MORE / PROGRESSIVE DISCLOSURE ========== */
    .read-more { margin-top: 0.75rem; }
    .read-more summary {
      cursor: pointer; color: #7C9FD4; font-size: 0.88rem;
      font-weight: 500; list-style: none; user-select: none;
    }
    .read-more summary::-webkit-details-marker { display: none; }
    .read-more summary::before { content: '\25b8  '; font-size: 0.8rem; }
    .read-more[open] summary::before { content: '\25be  '; }
    .read-more-content {
      margin-top: 0.75rem; padding-top: 0.75rem;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .read-more-content p { font-size: 0.9rem; }


    /* ========== FLAG BANNERS ========== */
    .flag-banner {
      display: flex; align-items: flex-start; gap: 12px;
      padding: 16px 20px; border-radius: 8px; margin: 1.5rem 0;
      font-size: 0.88rem; line-height: 1.5;
    }
    .flag-banner.flag-amber {
      background: rgba(230, 126, 34, 0.1); border: 1px solid rgba(230, 126, 34, 0.3);
      color: var(--accent-amber);
    }
    .flag-banner.flag-red {
      background: rgba(192, 57, 43, 0.1); border: 1px solid rgba(192, 57, 43, 0.3);
      color: var(--accent-red);
    }
    .flag-banner.flag-green {
      background: rgba(59, 157, 125, 0.1); border: 1px solid rgba(59, 157, 125, 0.3);
      color: var(--accent-green);
    }
    .flag-banner .flag-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
    .flag-banner .flag-text strong { color: inherit; }
    .flag-banner .flag-text p { color: inherit; opacity: 0.85; margin-bottom: 0; font-size: 0.82rem; }

    /* ========== TRACK TABS ========== */
    .track-tabs {
      display: flex; gap: 4px; padding: 4px;
      background: rgba(255,255,255,0.04); border-radius: 10px;
      margin-bottom: 24px; border: 1px solid rgba(255,255,255,0.06);
    }
    .track-tab {
      flex: 1; padding: 12px 16px; border: none; border-radius: 8px;
      background: transparent; color: var(--text-muted);
      font-family: var(--font-sans); font-size: 0.82rem; font-weight: 600;
      cursor: pointer; transition: var(--transition); text-align: center;
    }
    .track-tab:hover { color: var(--text-primary); background: rgba(255,255,255,0.04); }
    .track-tab.active {
      background: var(--bg-secondary); color: var(--accent-yellow);
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    .track-panel { display: none; }
    .track-panel.active { display: block; }

    /* ========== PASSWORD GATE (INLINE — Layer 3) ========== */
    .qa-gate {
      display: flex; align-items: center; gap: 12px;
      padding: 20px 24px; background: var(--bg-card);
      border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
      margin-bottom: 24px;
    }
    .qa-gate .lock-icon { font-size: 1.5rem; flex-shrink: 0; opacity: 0.5; }
    .qa-gate-label { font-size: 0.88rem; color: var(--text-muted); flex-shrink: 0; }
    .qa-gate input {
      flex: 1; max-width: 260px; padding: 10px 16px;
      border: 1px solid rgba(255,255,255,0.15); border-radius: 0.5rem;
      background: rgba(255,255,255,0.04); color: var(--text-primary);
      font-size: 0.9rem; font-family: var(--font-sans); outline: none;
      transition: var(--transition);
    }
    .qa-gate input:focus { border-color: var(--accent-yellow); }
    .qa-gate button {
      padding: 10px 20px; background: var(--accent-yellow); color: var(--bg-primary);
      border: none; border-radius: 0.5rem; font-weight: 600; font-size: 0.85rem;
      cursor: pointer; transition: var(--transition); font-family: var(--font-sans);
    }
    .qa-gate button:hover { background: var(--accent-dark-yellow); }
    .qa-gate-error { color: var(--accent-red); font-size: 0.8rem; display: none; }
    .qa-section { display: none; }
    .qa-section.unlocked { display: block; }

    /* ========== Q&A COLLAPSIBLE ========== */
    .qa-pair { margin-bottom: 8px; border-radius: 8px; overflow: hidden; }
    .qa-question {
      padding: 14px 20px; background: rgba(255,255,255,0.06);
      cursor: pointer; font-size: 0.88rem; font-weight: 600;
      display: flex; align-items: center; justify-content: space-between;
      transition: var(--transition); user-select: none;
    }
    .qa-question:hover { background: rgba(255,255,255,0.09); }
    .qa-question .qa-toggle { font-size: 0.7rem; color: var(--text-muted); transition: transform 0.2s; transform: rotate(90deg); }
    .qa-pair.collapsed .qa-toggle { transform: rotate(0deg); }
    .qa-answer {
      max-height: 2000px; overflow: hidden; transition: max-height 0.3s ease;
      padding: 16px 20px; font-size: 0.85rem; color: var(--text-muted); line-height: 1.7;
    }
    .qa-pair.collapsed .qa-answer { max-height: 0; padding: 0 20px; }

    /* ========== GATED SUBSECTION (LOCKED STATE) ========== */
    .section-block[data-gate] { position: relative; }
    .section-block[data-gate]:not(.unlocked) .section-content {
      filter: blur(6px); pointer-events: none; user-select: none;
      max-height: 120px; overflow: hidden;
    }
    .section-block[data-gate]:not(.unlocked)::after {
      content: '';
      position: absolute; bottom: 0; left: 0; right: 0; height: 80px;
      background: linear-gradient(transparent, var(--bg-primary));
      pointer-events: none;
    }
    .gate-overlay {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      padding: 14px 20px; font-size: 0.84rem; color: var(--text-muted);
      cursor: pointer; transition: var(--transition);
    }
    .gate-overlay:hover { color: var(--accent-yellow); }
    .gate-overlay .gate-lock { font-size: 1rem; }
    .section-block[data-gate].unlocked .gate-overlay { display: none; }

    /* ========== COMMITMENT CHECKLIST ========== */
    .commitment-list { list-style: none; padding: 0; }
    .commitment-list li {
      padding: 8px 0 8px 28px; position: relative;
      font-size: 0.85rem; color: var(--text-muted);
    }
    .commitment-list li::before {
      content: ''; position: absolute; left: 0; top: 12px;
      width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.2);
      border-radius: 3px;
    }

    /* ========== RESPONSIVE ========== */
    @media (max-width: 768px) {
      .sidebar { display: none; }
      .main { margin-left: 0; padding: 24px 20px 60px; }
      .topbar { padding: 0 16px; }
      .track-tabs { flex-wrap: wrap; }
      .track-tab { flex: 1 1 45%; font-size: 0.78rem; padding: 10px 12px; }
      .qa-gate { flex-wrap: wrap; }
      .qa-gate input { max-width: 100%; }
    }
    @media (max-width: 480px) {
      .main { padding: 16px 12px 40px; }
      .section-content { padding: 20px 16px; }
      .hero-card { padding: 32px 20px; }
      .track-tab { flex: 1 1 100%; }
    }

    /* ========== PRINT ========== */
    @media print {
      /* Hide interactive elements */
      .topbar, .sidebar, .track-tabs, .qa-gate, .topbar-print-btn,
      .gate-overlay, .flag-icon { display: none !important; }

      /* Layout reset */
      .main { margin-left: 0; padding: 20px 30px; max-width: 100%; }
      html { scroll-behavior: auto; }

      /* White background, dark text */
      body { background: #fff !important; color: #111 !important; }
      p, li, td, th { color: #333 !important; }
      h1, h2, h3, h4, strong { color: #111 !important; }
      .text-yellow, .text-cyan, .text-green { color: #111 !important; }
      a { color: #111 !important; text-decoration: underline; }

      /* Section blocks */
      .section-block { border: 1px solid #ccc; break-inside: avoid; margin-bottom: 16px; background: #fff !important; }
      .section-content { padding: 20px 24px; }
      .hero-card { background: #f8f8f8 !important; border: 1px solid #ccc; padding: 30px; }
      .hero-card::before { display: none; }

      /* Cards */
      .card { background: #f9f9f9 !important; border: 1px solid #ddd !important; }
      .card:hover { transform: none; }

      /* Tables */
      table { border: 1px solid #ccc; }
      th { background: #f0f0f0 !important; color: #111 !important; }
      td, th { border-bottom: 1px solid #ddd !important; }

      /* Quote blocks */
      .quote-block { background: #f5f5f5 !important; border-left: 3px solid #666; }
      .quote-block p { color: #222 !important; }

      /* Flag banners — keep visible, adjust colors */
      .flag-banner { border: 2px solid #999 !important; background: #fff8e1 !important; }
      .flag-banner.flag-red { border-color: #c0392b !important; background: #fdecea !important; }
      .flag-banner.flag-green { border-color: #2e7d60 !important; background: #e8f5f0 !important; }
      .flag-banner .flag-text, .flag-banner .flag-text strong { color: #333 !important; }
      .flag-banner .flag-text p { color: #555 !important; }

      /* Gated sections — show all content in print (remove blur) */
      .section-block[data-gate]:not(.unlocked) .section-content {
        filter: none; max-height: none; overflow: visible;
      }
      .section-block[data-gate]:not(.unlocked)::after { display: none; }

      /* Track panels — show active track only */
      .track-panel { display: none !important; }
      .track-panel.active { display: block !important; }

      /* Q&A sections — show unlocked only */
      .qa-section:not(.unlocked) { display: none !important; }

      /* SVG positioning map — static, print-friendly */
      svg text { fill: #333 !important; }
      svg circle { opacity: 1 !important; }
      svg line { stroke: #666 !important; }
      svg rect { fill: #f5f5f5 !important; }
      svg ellipse { stroke: #999 !important; fill: transparent !important; }

      /* Page breaks */
      .hero-card { break-after: page; }
      #section-1-6 { break-before: page; }
      #track-selector { break-before: page; }
      #qa-section { break-before: page; }

      /* Header/footer */
      @page {
        size: letter;
        margin: 0.75in 0.6in;
        @top-center { content: "FiLiCiTi, Inc. | Confidential"; font-size: 9pt; color: #999; }
        @bottom-right { content: counter(page); font-size: 9pt; color: #999; }
      }

      /* Smooth scroll padding not needed */
      html { scroll-padding-top: 0; }

      /* Hide images that don't print well */
      .hero-card img { max-width: 400px; filter: none !important; }
    }