/* ========================================
       MASTER CARIBBEAN EXAMS TT — HOME PAGE
       Design: Nordic Industrial Precision
              + Caribbean Sovereignty
              + Digital Fluency as Substrate
       ======================================== */

    :root {
      --navy: #1E3A5F;
      --gold: #D4AF37;
      --white: #FFFFFF;
      --cream: #FAF9F7;
      --dark-text: #10243C;
      --body-text: #2D3A4A;
      --muted: #6B7B8D;
      --line: rgba(30,58,95,0.15);
      --soft-panel: #F3F2EF;
      --serif: 'Instrument Serif', Georgia, serif;
      --sans: 'IBM Plex Sans', sans-serif;
      --mono: 'IBM Plex Mono', monospace;
      --shadow: 0 2px 20px rgba(30,58,95,0.08);
    }

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

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

    body {
      font-family: var(--sans);
      font-weight: 400;
      color: var(--body-text);
      background: var(--cream);
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
    }

    /* ---- UTILITY ---- */
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 40px;
    }

    .container-wide {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 40px;
    }

    .section-label {
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 48px;
    }

    .section-title {
      font-family: var(--serif);
      font-size: clamp(28px, 3.2vw, 42px);
      color: var(--dark-text);
      line-height: 1.2;
      margin-bottom: 24px;
    }

    .gold-line {
      width: 40px;
      height: 1px;
      background: var(--gold);
      margin-bottom: 32px;
    }

    /* ---- BUTTONS ---- */
    .btn {
      display: inline-block;
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-decoration: none;
      transition: all 0.3s ease;
    }

    .btn-primary {
      background: var(--navy);
      color: var(--white);
      padding: 14px 32px;
      border: 1px solid var(--navy);
    }

    .btn-primary:hover {
      background: transparent;
      color: var(--navy);
    }

    .btn-text {
      color: var(--navy);
      padding: 14px 0;
    }

    .btn-text:hover { color: var(--gold); }

    .btn-light {
      background: transparent;
      color: var(--white);
      padding: 14px 32px;
      border: 1px solid rgba(255,255,255,0.4);
    }

    .btn-light:hover {
      background: var(--cream);
      color: var(--navy);
    }

    /* ========================================
       HEADER / NAV
       ======================================== */
    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      background: rgba(250,249,247,0.96);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--line);
    }

    .header-inner {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64px;
    }

    .logo-link {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
    }

    .logo-img {
      height: 36px;
      width: auto;
    }

    .logo-text {
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--dark-text);
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 32px;
      list-style: none;
    }

    .nav-links a {
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 400;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--body-text);
      text-decoration: none;
      transition: color 0.2s;
    }

    .nav-links a:hover { color: var(--navy); }

    .nav-cta {
      background: var(--navy);
      color: var(--white) !important;
      padding: 10px 20px;
    }

    .nav-cta:hover {
      background: var(--dark-text);
    }

    /* Mobile nav */
    .nav-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
    }

    .nav-toggle span {
      display: block;
      width: 24px;
      height: 2px;
      background: var(--navy);
      margin: 5px 0;
      transition: 0.3s;
    }

    /* ========================================
       01 — HERO
       ======================================== */
    .hero {
      margin-top: 64px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 85vh;
    }

    .hero-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 80px 60px 80px 40px;
      max-width: 680px;
      margin-left: auto;
    }

    .hero h1 {
      font-family: var(--serif);
      font-size: clamp(36px, 4.5vw, 56px);
      color: var(--dark-text);
      line-height: 1.15;
      margin-bottom: 24px;
    }

    .hero-sub {
      font-family: var(--sans);
      font-size: 17px;
      font-weight: 300;
      color: var(--body-text);
      line-height: 1.7;
      margin-bottom: 40px;
      max-width: 420px;
    }

    .hero-ctas {
      display: flex;
      align-items: center;
      gap: 24px;
      margin-bottom: 48px;
    }

    .hero-photo-wrap {
      background: #4a5568;
      overflow: hidden;
      position: relative;
    }

    .hero-photo {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
    }

    .hero-annotation {
      position: absolute;
      bottom: 24px;
      left: 24px;
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 400;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.7);
      line-height: 2;
    }

    /* ---- CREDENTIAL BAR ---- */
    .credential-bar {
      background: var(--cream);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      padding: 20px 0;
    }

    .credential-bar-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 40px;
      display: flex;
      justify-content: center;
      gap: 48px;
      flex-wrap: wrap;
    }

    .credential-item {
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 400;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
    }

    /* ========================================
       02 — WHAT WE DO
       ======================================== */
    .what-we-do {
      padding: 70px 0;
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 48px;
      margin-top: 16px;
    }

    .service-card {
      border-top: 1px solid var(--line);
      padding-top: 24px;
    }

    .service-card .service-num {
      font-family: var(--mono);
      font-size: 10px;
      color: var(--muted);
      letter-spacing: 0.1em;
      margin-bottom: 16px;
    }

    .service-card h3 {
      font-family: var(--serif);
      font-size: 22px;
      color: var(--dark-text);
      margin-bottom: 12px;
      line-height: 1.3;
    }

    .service-card p {
      font-size: 14px;
      color: var(--body-text);
      line-height: 1.7;
    }

    /* ========================================
       03 — WHAT MAKES US DIFFERENT
       ======================================== */
    .difference {
      padding: 56px 0 70px;
      background: var(--navy);
      color: var(--white);
    }

    .difference .section-label {
      color: rgba(255,255,255,0.5);
    }

    .diff-grid {
      display: grid;
      grid-template-columns: 1fr 60px 1fr;
      gap: 0;
      margin-top: 16px;
    }

    .diff-col-header {
      font-family: var(--mono);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding-bottom: 20px;
      border-bottom: 1px solid rgba(255,255,255,0.15);
      margin-bottom: 24px;
    }

    .diff-col-header.typical { color: rgba(255,255,255,0.4); padding-right: 24px; text-align: right; }
    .diff-col-header.master { color: var(--gold); padding-left: 24px; }
    .diff-divider-header {
      border-bottom: 1px solid rgba(255,255,255,0.15);
      margin-bottom: 24px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 20px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--gold);
    }

    .diff-row-left,
    .diff-row-right {
      font-family: var(--sans);
      font-size: 18px;
      line-height: 1.6;
      padding: 14px 0;
    }

    .diff-row-left { color: rgba(255,255,255,0.45); text-align: right; padding-right: 24px; text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(255,255,255,0.3); }
    .diff-row-right { color: rgba(255,255,255,0.95); font-weight: 500; padding-left: 24px; }
    .diff-arrow {
      font-size: 18px;
      color: var(--gold);
      text-align: center;
      padding: 14px 0;
    }

    /* ========================================
       04 — NOTEBOOK IMAGE (full-width break)
       ======================================== */
    .notebook-break {
      padding: 40px 0;
      background: var(--cream);
    }

    .notebook-img-wrap {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 40px;
    }

    .notebook-img {
      width: 100%;
      height: auto;
      display: block;
    }

    .notebook-caption {
      max-width: 1100px;
      margin: 0 auto;
      padding: 20px 40px 0;
    }

    .notebook-caption p {
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 400;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
    }

    /* ========================================
       05 — FEATURED TOOLS
       ======================================== */
    .featured-tools {
      padding: 70px 0;
      background: var(--cream);
    }

    .products-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      margin-top: 16px;
    }

    .product-card {
      background: var(--cream);
      border: 1px solid var(--line);
      transition: box-shadow 0.3s ease;
    }

    .product-card:hover {
      box-shadow: var(--shadow);
    }

    .product-cover-wrap {
      width: 100%;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      background: var(--soft-panel);
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .product-cover-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 45%;
      display: block;
    }

    .product-info {
      padding: 24px;
    }

    .product-info h3 {
      font-family: var(--serif);
      font-size: 20px;
      color: var(--dark-text);
      margin-bottom: 8px;
      line-height: 1.3;
    }

    .product-info p {
      font-size: 14px;
      color: var(--body-text);
      line-height: 1.6;
      margin-bottom: 16px;
    }

    .product-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 16px;
      border-top: 1px solid var(--line);
    }

    .product-price {
      font-family: var(--mono);
      font-size: 13px;
      font-weight: 500;
      color: var(--dark-text);
      letter-spacing: 0.04em;
    }

    .product-link {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--navy);
      text-decoration: none;
      transition: color 0.2s;
    }

    .product-link:hover { color: var(--gold); }

    /* ========================================
       06 — THESIS QUOTE
       ======================================== */
    .thesis-band {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 480px;
    }

    .thesis-text {
      background: var(--navy);
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 56px 60px;
    }

    .thesis-text blockquote {
      font-family: var(--serif);
      font-size: clamp(22px, 2.6vw, 32px);
      color: var(--white);
      line-height: 1.45;
      font-style: italic;
    }

    .thesis-text .attribution {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.45);
      margin-top: 32px;
    }

    .thesis-photo-wrap {
      overflow: hidden;
      background: #4a5568;
    }

    .thesis-photo {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 15%;
      display: block;
    }

    /* ========================================
       07 — CLOSING CTA
       ======================================== */
    .closing-cta {
      background: var(--navy);
      padding: 80px 0;
      text-align: center;
    }

    .closing-cta p {
      font-family: var(--sans);
      font-size: 17px;
      font-weight: 300;
      color: rgba(255,255,255,0.75);
      max-width: 500px;
      margin: 0 auto 32px;
      line-height: 1.7;
    }

    /* ========================================
       FOOTER
       ======================================== */
    .site-footer {
      background: var(--cream);
      border-top: 1px solid var(--line);
      padding: 48px 0 32px;
    }

    .footer-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 40px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 40px;
      align-items: start;
    }

    .footer-left {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

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

    .footer-nav {
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
      list-style: none;
    }

    .footer-nav a {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--body-text);
      text-decoration: none;
    }

    .footer-nav a:hover { color: var(--navy); }

    .footer-contact {
      text-align: right;
    }

    .footer-contact a {
      display: block;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      color: var(--body-text);
      text-decoration: none;
      line-height: 2.2;
    }

    .footer-contact a:hover { color: var(--navy); }

    .footer-bottom {
      max-width: 1200px;
      margin: 32px auto 0;
      padding: 16px 40px 0;
      border-top: 1px solid var(--line);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .footer-copy {
      font-family: var(--mono);
      font-size: 10px;
      color: var(--muted);
      letter-spacing: 0.06em;
    }

    .footer-legal {
      display: flex;
      gap: 20px;
    }

    .footer-legal a {
      font-family: var(--mono);
      font-size: 10px;
      color: var(--muted);
      text-decoration: none;
      letter-spacing: 0.06em;
    }

    .footer-legal a:hover { color: var(--navy); }

    /* ========================================
       VERTICAL PAGE INDEX (Scherrer-style)
       ======================================== */
    .page-index {
      position: fixed;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 90;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .page-index a {
      font-family: var(--mono);
      font-size: 10px;
      color: var(--muted);
      text-decoration: none;
      letter-spacing: 0.06em;
      transition: color 0.2s;
    }

    .page-index a.active,
    .page-index a:hover { color: var(--navy); font-weight: 600; }

    /* ========================================
       RESPONSIVE
       ======================================== */
    @media (max-width: 1024px) {
      .hero {
        grid-template-columns: 1fr;
        min-height: auto;
      }

      .hero-content {
        max-width: 100%;
        padding: 60px 40px;
        margin-left: 0;
      }

      .hero-photo-wrap {
        height: 420px;
      }

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

      .diff-grid {
        grid-template-columns: 1fr 30px 1fr;
        gap: 0;
      }

      .diff-col-header.typical { text-align: right; padding-right: 12px; font-size: 9px; }
      .diff-col-header.master { text-align: left; padding-left: 12px; font-size: 9px; }
      .diff-divider-header { font-size: 9px; }
      .diff-row-left { font-size: 14px; text-align: right; padding-right: 12px; padding-top: 10px; padding-bottom: 10px; }
      .diff-row-right { font-size: 14px; text-align: left; padding-left: 12px; padding-top: 10px; padding-bottom: 10px; }
      .diff-arrow { font-size: 14px; padding: 10px 0; }

      .thesis-band {
        grid-template-columns: 1fr;
      }

      .thesis-photo-wrap {
        height: 440px;
      }

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

      .page-index { display: none; }
    }

    @media (max-width: 640px) {
      .container, .container-wide { padding: 0 20px; }
      .header-inner { padding: 0 20px; }

      .hero-content { padding: 40px 20px; }

      .hero h1 { font-size: 32px; }

      /* Reduce section padding on mobile */
      .services { padding: 50px 0; }
      .different { padding: 50px 0; }
      .notebook-break { padding: 40px 0; }
      .featured-tools { padding: 50px 0; }
      .thesis-band { min-height: auto; }
      .closing-cta { padding: 50px 0; }
      .my-story { padding: 40px 0 60px; }
      .intelligentsia-section { padding: 0 0 40px; }
      .blueprint-section { padding: 50px 0; }
      .shop-hero { padding: 120px 0 40px; }
      .shop-section { padding: 40px 0; }
      .shop-faq { padding: 50px 0; }

      .services-grid {
        grid-template-columns: 1fr;
        gap: 32px;
      }

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

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

      .credential-bar-inner {
        gap: 20px;
        justify-content: flex-start;
      }

      .footer-inner {
        grid-template-columns: 1fr;
      }

      .footer-contact { text-align: left; }

      .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
      }

      .nav-links { display: none; }
      .nav-links.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: var(--cream);
        padding: 20px 40px;
        border-bottom: 1px solid var(--line);
        gap: 16px;
      }
      .nav-toggle { display: block; }

      .notebook-img-wrap { padding: 0 20px; }
      .notebook-caption { padding: 16px 20px 0; }

      /* About page mobile */
      .about-hero-line1, .about-hero-line2 {
        font-size: 32px;
      }
      .about-hero-inner {
        padding: 100px 20px 30px;
      }
      .story-layout {
        grid-template-columns: 1fr;
        gap: 24px;
      }
      .blueprint-layout {
        grid-template-columns: 1fr;
        gap: 32px;
      }
      .faq-grid {
        grid-template-columns: 1fr;
        gap: 24px;
      }
    }
    
    /* ========================================
       FORK (Two-door student / teacher split)
       ======================================== */
    .fork {
      padding: 56px 0;
      background: var(--white);
    }

    .fork-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
    }

    .fork-card {
      border: 1px solid var(--line);
      padding: 48px 40px;
      transition: border-color 0.3s ease;
    }

    .fork-card:hover {
      border-color: var(--navy);
    }

    .fork-eyebrow {
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 20px;
    }

    .fork-card h2 {
      font-family: var(--serif);
      font-size: clamp(24px, 2.8vw, 34px);
      color: var(--dark-text);
      line-height: 1.2;
      margin-bottom: 16px;
    }

    .fork-card p {
      font-family: var(--sans);
      font-size: 15px;
      font-weight: 300;
      color: var(--body-text);
      line-height: 1.7;
      margin-bottom: 32px;
      max-width: 400px;
    }

    /* ========================================
       PROOF STRIP
       ======================================== */
    .proof-strip {
      padding: 20px 0;
      background: var(--navy);
    }

    .proof-strip-inner {
      text-align: center;
    }

    .proof-strip-stats {
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 400;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.45);
      line-height: 2;
    }

    .proof-strip-stats span {
      display: inline-block;
      margin: 0 12px;
    }

    /* ========================================
       TRUST SECTION
       ======================================== */
    .trust-section {
      padding: 56px 0;
      background: var(--cream);
    }

    .trust-inner {
      max-width: 680px;
    }

    .trust-inner h2 {
      font-family: var(--serif);
      font-size: clamp(24px, 2.6vw, 32px);
      color: var(--dark-text);
      line-height: 1.3;
      margin-bottom: 20px;
    }

    .trust-inner p {
      font-family: var(--sans);
      font-size: 16px;
      font-weight: 300;
      color: var(--body-text);
      line-height: 1.8;
      margin-bottom: 24px;
    }

    .trust-ctas {
      display: flex;
      gap: 24px;
      align-items: center;
      flex-wrap: wrap;
    }

    /* ========================================
       RESPONSIVE — fork, proof, trust
       ======================================== */
    @media (max-width: 768px) {
      .fork-grid {
        grid-template-columns: 1fr;
        gap: 24px;
      }

      .fork-card {
        padding: 36px 28px;
      }

      .proof-strip {
        padding: 36px 0;
      }

      .proof-strip-stats span {
        display: block;
        margin: 4px 0;
      }

      .trust-section {
        padding: 50px 0;
      }
    }

    /* ========================================
       ABOUT PAGE STYLES
       ======================================== */
    .about-hero {
      padding-top: 72px;
      padding-bottom: 0;
    }

    .about-hero-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 120px 40px 40px;
      width: 100%;
    }

    .about-hero-line1 {
      font-family: var(--serif);
      font-size: 52px;
      line-height: 1.15;
      color: var(--navy);
      margin-bottom: 16px;
      max-width: 600px;
    }

    .about-hero-line2 {
      font-family: var(--serif);
      font-size: 52px;
      line-height: 1.15;
      color: var(--gold);
      opacity: 0.75;
      max-width: 600px;
    }

    .intelligentsia-section {
      padding: 0 0 60px;
      background: var(--cream);
    }

    .intelligentsia-img-wrap {
      max-width: 1000px;
      margin: 0 auto;
    }

    .intelligentsia-img-wrap img {
      width: 100%;
      height: auto;
      display: block;
    }

    .intelligentsia-caption {
      font-family: var(--sans);
      font-size: 15px;
      font-weight: 300;
      color: var(--body-text);
      text-align: center;
      margin-top: 24px;
      max-width: 520px;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.7;
    }

    .my-story {
      padding: 56px 0 70px;
      background: var(--white);
    }

    .story-layout {
      display: grid;
      grid-template-columns: 200px 1fr;
      gap: 64px;
      align-items: start;
    }

    .story-label-col {
      padding-top: 6px;
    }

    .story-label-col .section-label {
      margin-bottom: 0;
    }

    .story-annotation {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      line-height: 1.8;
      margin-top: 16px;
    }

    .story-content {
      max-width: 640px;
    }

    .story-content p {
      font-family: var(--sans);
      font-size: 17px;
      line-height: 1.85;
      color: var(--body-text);
      margin-bottom: 28px;
    }

    .story-content p:last-child {
      margin-bottom: 0;
    }

    .blueprint-section {
      padding: 56px 0;
      background: #011a42;
    }

    .blueprint-layout {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .blueprint-layout.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .blueprint-layout {
      display: grid;
      grid-template-columns: 1fr 500px;
      gap: 64px;
      align-items: center;
    }

    .blueprint-text {
      color: var(--white);
    }

    .blueprint-text .section-label {
      color: rgba(255,255,255,0.4);
    }

    .blueprint-text h2 {
      font-family: var(--serif);
      font-size: 36px;
      line-height: 1.25;
      color: var(--white);
      margin-bottom: 24px;
    }

    .blueprint-text p {
      font-family: var(--sans);
      font-size: 15px;
      line-height: 1.8;
      color: rgba(255,255,255,0.6);
    }

    .blueprint-img-wrap img {
      width: 100%;
      height: auto;
      display: block;
    }

    .about-closing-cta {
      padding: 80px 0;
      background: var(--navy);
      text-align: center;
    }

    .about-closing-cta p {
      font-family: var(--sans);
      font-size: 17px;
      color: rgba(255,255,255,0.7);
      margin-bottom: 24px;
    }

    .page-home, .page-about, .page-educators, .page-shop, .page-notes, .page-contact, .page-papers, .page-privacy, .page-terms, .page-aiguide, .page-fulbright, .page-maths {
      display: none;
    }

    .page-home.active, .page-about.active, .page-educators.active, .page-shop.active, .page-notes.active, .page-contact.active, .page-papers.active, .page-privacy.active, .page-terms.active, .page-aiguide.active, .page-fulbright.active, .page-maths.active {
      display: block;
    }

    body[data-page="fulbright"] #global-footer,
    body[data-page="aiguide"] #global-footer {
      display: none;
    }

    /* About responsive rules merged into main responsive blocks above */

    /* ========================================
       SHOP PAGE STYLES
       ======================================== */
    .shop-hero {
      padding: 152px 0 60px;
    }

    .shop-hero h1 {
      font-family: var(--serif);
      font-size: 44px;
      line-height: 1.2;
      color: var(--navy);
      margin-bottom: 12px;
    }

    .shop-hero p {
      font-family: var(--sans);
      font-size: 16px;
      color: var(--body-text);
      max-width: 520px;
      line-height: 1.7;
    }

    .shop-section {
      padding: 60px 0;
    }

    .shop-section-label {
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 40px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--line);
    }

    .shop-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
    }

    .shop-card {
      background: var(--white);
      border: 1px solid var(--line);
      text-decoration: none;
      color: inherit;
      display: flex;
      flex-direction: column;
      transition: border-color 0.2s;
    }

    .shop-card:hover {
      border-color: var(--navy);
    }

    .shop-card-img {
      width: 100%;
      aspect-ratio: 3 / 2.5;
      overflow: hidden;
      background: var(--soft-panel);
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid var(--line);
    }

    .shop-card-img img {
      max-width: 95%;
      max-height: 95%;
      object-fit: contain;
      display: block;
    }

    .shop-card-body {
      padding: 24px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .shop-card-body h3 {
      font-family: var(--serif);
      font-size: 20px;
      color: var(--dark-text);
      margin-bottom: 8px;
      line-height: 1.3;
    }

    .shop-card-body p {
      font-size: 14px;
      color: var(--body-text);
      line-height: 1.7;
      flex: 1;
    }

    .shop-card-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px solid var(--line);
    }

    .shop-card-price {
      font-family: var(--mono);
      font-size: 14px;
      font-weight: 500;
      color: var(--dark-text);
      letter-spacing: 0.02em;
    }

    .shop-card-cta {
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--gold);
    }

    .shop-card-annotation {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 12px;
    }

    /* Service cards (no image) */
    .shop-card-service {
      background: var(--navy);
      border: 1px solid rgba(255,255,255,0.1);
      text-decoration: none;
      color: var(--white);
      padding: 32px;
      display: flex;
      flex-direction: column;
      transition: border-color 0.2s;
    }

    .shop-card-service:hover {
      border-color: var(--gold);
    }

    .shop-card-service h3 {
      font-family: var(--serif);
      font-size: 20px;
      color: var(--white);
      margin-bottom: 8px;
      line-height: 1.3;
    }

    .shop-card-service p {
      font-size: 14px;
      color: rgba(255,255,255,0.6);
      line-height: 1.7;
      flex: 1;
    }

    .shop-card-service .shop-card-meta {
      border-top: 1px solid rgba(255,255,255,0.15);
    }

    .shop-card-service .shop-card-price {
      color: var(--white);
    }

    .shop-card-service .shop-card-cta {
      color: var(--gold);
    }

    .shop-card-service .shop-card-annotation {
      color: rgba(255,255,255,0.4);
    }

    /* FAQ */
    .shop-faq {
      padding: 80px 0;
      background: var(--white);
    }

    .faq-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px 64px;
      margin-top: 8px;
    }

    .faq-item h4 {
      font-family: var(--sans);
      font-size: 15px;
      font-weight: 500;
      color: var(--dark-text);
      margin-bottom: 8px;
    }

    .faq-item p {
      font-size: 14px;
      color: var(--body-text);
      line-height: 1.7;
    }

    /* Delivery bar */
    .delivery-bar {
      padding: 40px 0;
      background: var(--cream);
      border-top: 1px solid var(--line);
    }

    .delivery-bar p {
      font-family: var(--mono);
      font-size: 12px;
      color: var(--muted);
      letter-spacing: 0.04em;
      text-align: center;
    }

    @media (max-width: 900px) {
      .shop-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .faq-grid {
        grid-template-columns: 1fr;
        gap: 32px;
      }

      .blueprint-layout {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .blueprint-img-wrap img {
        max-width: 400px;
        margin: 0 auto;
      }

      .story-layout {
        grid-template-columns: 1fr;
        gap: 24px;
      }
    }

    @media (max-width: 600px) {
      .shop-grid {
        grid-template-columns: 1fr;
      }

      .shop-hero h1 {
        font-size: 32px;
      }

      .about-hero-line1, .about-hero-line2 {
        font-size: 36px;
      }

      .about-hero-inner {
        padding: 120px 24px 60px;
      }
    }

  
    /* ========================================
       FOR EDUCATORS PAGE
       ======================================== */

    :root {
      --navy: #1E3A5F;
      --gold: #D4AF37;
      --white: #FFFFFF;
      --dark-text: #1a1a1a;
      --body-text: #444;
      --muted: #888;
      --line: #ddd;
      --soft-panel: #F5F6F7;
      --serif: 'Instrument Serif', serif;
      --sans: 'IBM Plex Sans', sans-serif;
      --mono: 'IBM Plex Mono', monospace;
    }
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: var(--sans);
      color: var(--dark-text);
      background: var(--white);
      -webkit-font-smoothing: antialiased;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 40px;
    }
    .section-label {
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 40px;
    }

    /* ========== HEADER ========== */
    .site-header {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      background: rgba(255,255,255,0.96);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--line);
    }
    .header-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 40px;
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .header-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      color: var(--navy);
    }
    .header-brand img { height: 36px; width: auto; }
    .header-brand span {
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    .header-nav {
      display: flex;
      gap: 32px;
      list-style: none;
    }
    .header-nav a {
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 400;
      color: var(--dark-text);
      text-decoration: none;
      letter-spacing: 0.02em;
      transition: color 0.2s;
    }
    .header-nav a:hover { color: var(--navy); }
    .header-nav a.active { color: var(--navy); font-weight: 500; }
    .nav-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
    }
    .nav-toggle span {
      display: block;
      width: 24px;
      height: 2px;
      background: var(--dark-text);
      margin: 5px 0;
      transition: 0.3s;
    }

    /* ========== HERO / VISION ========== */
    .vision {
      padding: 110px 0 56px;
    }
    .vision-inner {
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: 64px;
      align-items: center;
    }
    .vision-text h1 {
      font-family: var(--serif);
      font-size: clamp(32px, 4.5vw, 48px);
      font-weight: 400;
      line-height: 1.2;
      color: var(--navy);
      margin-bottom: 28px;
    }
    .vision-text p {
      font-family: var(--sans);
      font-size: 17px;
      font-weight: 300;
      line-height: 1.8;
      color: var(--body-text);
      margin-bottom: 20px;
    }
    .vision-text .vision-turn {
      font-family: var(--sans);
      font-size: 17px;
      font-weight: 400;
      color: var(--dark-text);
      margin-top: 12px;
    }
    .vision-img {
      width: 100%;
    }
    .vision-img img {
      width: 100%;
      height: auto;
    }
    .vision-caption {
      font-family: var(--sans);
      font-size: 13px;
      font-style: italic;
      color: var(--muted);
      margin-top: 12px;
    }

    /* ========== REALITY ========== */
    .reality {
      padding: 64px 0;
      border-top: 1px solid var(--line);
    }
    .reality-text {
      max-width: 680px;
    }
    .reality-text p {
      font-family: var(--sans);
      font-size: 17px;
      font-weight: 300;
      line-height: 1.8;
      color: var(--body-text);
      margin-bottom: 24px;
    }
    .reality-text .reality-anchor {
      font-family: var(--sans);
      font-size: 17px;
      font-weight: 400;
      color: var(--dark-text);
      margin-top: 8px;
    }

    /* ========== SERVICES ========== */
    .services {
      padding: 64px 0;
      background: var(--soft-panel);
    }
    .services-lead {
      font-family: var(--sans);
      font-size: 17px;
      font-weight: 300;
      line-height: 1.8;
      color: var(--body-text);
      max-width: 620px;
      margin-bottom: 16px;
    }
    .services-logistics {
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: 0.06em;
      color: var(--muted);
      margin-bottom: 56px;
    }
    .service-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      margin-bottom: 48px;
    }
    .service-card {
      background: var(--white);
      padding: 40px;
      border: 1px solid var(--line);
    }
    .service-card h3 {
      font-family: var(--serif);
      font-size: 24px;
      font-weight: 400;
      color: var(--navy);
      margin-bottom: 16px;
    }
    .service-card p {
      font-family: var(--sans);
      font-size: 15px;
      font-weight: 300;
      line-height: 1.7;
      color: var(--body-text);
      margin-bottom: 28px;
    }
    .service-meta {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    .service-meta span {
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 400;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .service-meta .price {
      color: var(--navy);
      font-weight: 500;
      font-size: 13px;
    }
    .services-safety {
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 300;
      color: var(--muted);
      max-width: 560px;
      line-height: 1.6;
      margin-bottom: 48px;
      padding-top: 32px;
      border-top: 1px solid var(--line);
    }
    .services-cta {
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
      align-items: center;
    }
    .btn-wa {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--navy);
      color: var(--white);
      padding: 14px 32px;
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-decoration: none;
      border: 1px solid var(--navy);
      transition: all 0.2s;
    }
    .btn-wa:hover {
      background: transparent;
      color: var(--navy);
    }
    .btn-link {
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-decoration: none;
      color: var(--navy);
      transition: color 0.2s;
    }
    .btn-link:hover { color: var(--gold); }

    /* ========== SOCIAL PROOF ========== */
    .proof {
      padding: 56px 0;
    }
    .proof-inner {
      display: flex;
      gap: 56px;
      align-items: center;
    }
    .proof-thumb {
      flex-shrink: 0;
      width: 340px;
      height: 340px;
      cursor: pointer;
      overflow: hidden;
      transition: opacity 0.2s;
    }
    .proof-thumb:hover { opacity: 0.92; }
    .proof-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .proof-text p {
      font-family: var(--sans);
      font-size: 16px;
      font-weight: 300;
      line-height: 1.7;
      color: var(--body-text);
      margin-bottom: 16px;
    }
    .proof-link {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--navy);
      text-decoration: none;
    }
    .proof-link:hover { color: var(--gold); }

    /* ========== FREE RESOURCES ========== */
    .free {
      padding: 64px 0;
      background: var(--navy);
      color: var(--white);
    }
    .free .section-label { color: rgba(255,255,255,0.45); }
    .free-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      margin-bottom: 48px;
    }
    .free-card {
      border: 1px solid rgba(255,255,255,0.12);
      padding: 40px;
    }
    .free-card h3 {
      font-family: var(--serif);
      font-size: 22px;
      font-weight: 400;
      color: var(--white);
      margin-bottom: 14px;
    }
    .free-card p {
      font-family: var(--sans);
      font-size: 15px;
      font-weight: 300;
      line-height: 1.7;
      color: rgba(255,255,255,0.65);
      margin-bottom: 20px;
    }
    .free-card .meta {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.35);
      margin-bottom: 20px;
    }
    .free-card a {
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--gold);
      text-decoration: none;
    }
    .free-guide {
      margin-top: 48px;
      padding-top: 32px;
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    .free-guide p {
      font-family: var(--sans);
      font-size: 15px;
      font-weight: 300;
      color: rgba(255,255,255,0.55);
      margin-bottom: 14px;
      max-width: 560px;
    }
    .free-guide a {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--gold);
      text-decoration: none;
    }
    .free-guide a:hover { color: var(--white); }

    /* ========== BUILT FOR ========== */
    .built-for {
      padding: 64px 0;
    }
    .bf-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
    }
    .bf-item h3 {
      font-family: var(--serif);
      font-size: 20px;
      font-weight: 400;
      color: var(--navy);
      margin-bottom: 10px;
    }
    .bf-item p {
      font-family: var(--sans);
      font-size: 15px;
      font-weight: 300;
      line-height: 1.7;
      color: var(--body-text);
    }

    /* ========== IN DEVELOPMENT ========== */
    .in-dev {
      padding: 56px 0;
      background: var(--soft-panel);
    }
    .in-dev-inner {
      max-width: 600px;
    }
    .in-dev-inner p {
      font-family: var(--sans);
      font-size: 16px;
      font-weight: 300;
      line-height: 1.7;
      color: var(--body-text);
      margin-bottom: 28px;
    }
    .btn-outline {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 32px;
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-decoration: none;
      color: var(--navy);
      border: 1px solid var(--navy);
      transition: all 0.2s;
    }
    .btn-outline:hover {
      background: var(--navy);
      color: var(--white);
    }

    /* ========== CREDENTIALS ========== */
    .creds {
      padding: 48px 0;
      border-top: 1px solid var(--line);
    }
    .creds-text {
      font-family: var(--sans);
      font-size: 15px;
      font-weight: 300;
      line-height: 1.8;
      color: var(--body-text);
      max-width: 660px;
      margin-bottom: 28px;
    }
    .creds-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
    }
    .creds-bar span {
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
    }

    /* ========== CLOSING ========== */
    .closing {
      padding: 64px 0;
      background: var(--navy);
      color: var(--white);
    }
    .closing .section-label { color: rgba(255,255,255,0.45); }
    .closing-text {
      font-family: var(--sans);
      font-size: 17px;
      font-weight: 300;
      line-height: 1.8;
      color: rgba(255,255,255,0.65);
      max-width: 520px;
      margin-bottom: 40px;
    }
    .closing-links {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .closing-links a {
      font-family: var(--mono);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-decoration: none;
      color: var(--white);
      transition: color 0.2s;
    }
    .closing-links a:hover { color: var(--gold); }
    .closing-links a.wa { color: var(--gold); font-size: 15px; }

    /* ========== FOOTER ========== */
    .site-footer {
      background: var(--white);
      border-top: 1px solid var(--line);
      padding: 60px 0 40px;
    }
    .footer-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 40px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 40px;
    }
    .footer-left {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .footer-logo { height: 32px; width: auto; }
    .footer-nav {
      list-style: none;
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
    }
    .footer-nav a {
      font-family: var(--sans);
      font-size: 13px;
      color: var(--body-text);
      text-decoration: none;
    }
    .footer-nav a:hover { color: var(--navy); }
    .footer-right {
      display: flex;
      flex-direction: column;
      gap: 8px;
      text-align: right;
    }
    .footer-right a {
      font-family: var(--mono);
      font-size: 12px;
      color: var(--body-text);
      text-decoration: none;
      letter-spacing: 0.04em;
    }
    .footer-right a:hover { color: var(--navy); }
    .footer-bottom {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px 40px 0;
      border-top: 1px solid var(--line);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .footer-copy {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted);
    }
    .footer-legal {
      display: flex;
      gap: 20px;
    }
    .footer-legal a {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted);
      text-decoration: none;
    }
    .footer-legal a:hover { color: var(--navy); }

    /* ========== RESPONSIVE ========== */
    @media (max-width: 900px) {
      .container { padding: 0 24px; }
      .header-inner { padding: 0 24px; }
      .header-nav { display: none; }
      .nav-toggle { display: block; }
      .vision { padding: 130px 0 60px; }
      .vision-inner {
        grid-template-columns: 1fr;
        gap: 40px;
      }
      .service-grid { grid-template-columns: 1fr; }
      .free-grid { grid-template-columns: 1fr; }
      .proof-inner {
        flex-direction: column;
        gap: 32px;
      }
      .proof-thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        max-width: 360px;
      }
      .bf-grid { grid-template-columns: 1fr; }
      .footer-inner {
        flex-direction: column;
        gap: 32px;
        padding: 0 24px;
      }
      .footer-right { text-align: left; }
      .footer-bottom {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
        padding: 20px 24px 0;
      }
      /* Tighter section spacing on mobile */
      .reality { padding: 48px 0; }
      .services { padding: 48px 0; }
      .proof { padding: 48px 0; }
      .free-resources { padding: 48px 0; }
      .built-for { padding: 48px 0; }
      .in-dev { padding: 48px 0; }
      .creds { padding: 24px 0; }
      .closing { padding: 48px 0; }
      /* Journey image: full width and zoomable on mobile */
      .vision-img {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      .vision-img img {
        min-width: 600px;
        width: 100%;
        height: auto;
      }
    }
    .header-nav.open {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 72px;
      left: 0; right: 0;
      background: var(--white);
      padding: 24px 24px 32px;
      border-bottom: 1px solid var(--line);
      gap: 16px;
    }
  

    /* ========================================
       ANNOTATIONS / NOTES PAGE
       ======================================== */

    :root {
      --navy: #1E3A5F;
      --gold: #D4AF37;
      --white: #FFFFFF;
      --soft-panel: #F5F6F7;
      --dark-text: #1a1a1a;
      --body-text: #444;
      --muted: #888;
      --line: #ddd;
      --serif: 'Instrument Serif', serif;
      --sans: 'IBM Plex Sans', sans-serif;
      --mono: 'IBM Plex Mono', monospace;
    }
    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    body { font-family:var(--sans); color:var(--dark-text); background:var(--white); -webkit-font-smoothing:antialiased; }
    .container { max-width:1200px; margin:0 auto; padding:0 40px; }
    .section-label { font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-bottom:32px; }

    /* HEADER */
    .site-header { position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(255,255,255,0.96); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
    .header-inner { max-width:1200px; margin:0 auto; padding:0 40px; height:72px; display:flex; align-items:center; justify-content:space-between; }
    .header-brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--navy); }
    .header-brand img { height:36px; width:auto; }
    .header-brand span { font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; }
    .header-nav { display:flex; gap:32px; list-style:none; }
    .header-nav a { font-family:var(--sans); font-size:14px; color:var(--dark-text); text-decoration:none; transition:color 0.2s; }
    .header-nav a:hover { color:var(--navy); }
    .header-nav a.active { color:var(--navy); font-weight:500; }
    .nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:8px; }
    .nav-toggle span { display:block; width:24px; height:2px; background:var(--dark-text); margin:5px 0; }

    /* HERO */
    .anno-hero { padding:120px 0 0; }
    .anno-hero-img { width:100%; object-fit:contain; margin-bottom:60px; }
    .anno-hero-text { max-width:760px; margin-bottom:80px; }
    .anno-title { font-family:var(--serif); font-size:clamp(48px, 7vw, 72px); font-weight:400; color:var(--navy); margin-bottom:32px; letter-spacing:-0.01em; }
    .anno-tagline { font-family:var(--serif); font-size:20px; font-weight:400; font-style:italic; color:var(--body-text); margin-bottom:20px; line-height:1.6; }
    .anno-desc { font-family:var(--sans); font-size:15px; font-weight:300; line-height:1.7; color:var(--body-text); margin-bottom:8px; }
    .anno-audience { font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-top:20px; }

    /* CATEGORY FILTERS */
    .filters { padding:0 0 60px; border-bottom:1px solid var(--line); margin-bottom:60px; }
    .filter-list { display:flex; gap:24px; flex-wrap:wrap; list-style:none; }
    .filter-list a { font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; text-decoration:none; color:var(--muted); padding:8px 0; border-bottom:2px solid transparent; transition:all 0.2s; }
    .filter-list a:hover { color:var(--navy); }
    .filter-list a.active { color:var(--navy); border-bottom-color:var(--gold); }

    /* ARTICLE CARDS */
    .articles-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px 40px; padding-bottom:100px; }
    .article-card { text-decoration:none; color:inherit; display:block; transition:opacity 0.2s; }
    .article-card:hover { opacity:0.85; }
    .article-thumb { width:100%; aspect-ratio:16/9; background:var(--soft-panel); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; margin-bottom:20px; overflow:hidden; position:relative; }
    .article-thumb-label { font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }
    .article-meta { display:flex; gap:16px; margin-bottom:10px; }
    .article-meta span { font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }
    .article-meta .cat { color:var(--gold); }
    .article-card h3 { font-family:var(--serif); font-size:22px; font-weight:400; color:var(--navy); margin-bottom:10px; line-height:1.35; }
    .article-card p { font-family:var(--sans); font-size:14px; font-weight:300; line-height:1.65; color:var(--body-text); }
    .article-read { font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--navy); margin-top:12px; display:inline-block; }

    /* FEATURED (first article, larger) */
    .featured-article { grid-column:1 / -1; display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; padding-bottom:48px; border-bottom:1px solid var(--line); margin-bottom:12px; }
    .featured-article .article-thumb { aspect-ratio:3/2; margin-bottom:0; }
    .featured-article h3 { font-size:28px; }
    .featured-article p { font-size:15px; }

    /* NEWSLETTER CTA */
    .newsletter { padding:80px 0; background:var(--navy); color:var(--white); }
    .newsletter-inner { max-width:560px; }
    .newsletter .section-label { color:rgba(255,255,255,0.4); }
    .newsletter-text { font-family:var(--sans); font-size:16px; font-weight:300; line-height:1.7; color:rgba(255,255,255,0.65); margin-bottom:32px; }
    .newsletter-form { display:flex; gap:12px; }
    .newsletter-input { flex:1; padding:14px 20px; font-family:var(--sans); font-size:14px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); color:var(--white); outline:none; }
    .newsletter-input::placeholder { color:rgba(255,255,255,0.3); }
    .newsletter-input:focus { border-color:var(--gold); }
    .newsletter-btn { padding:14px 28px; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; background:var(--gold); color:var(--navy); border:none; cursor:pointer; transition:opacity 0.2s; }
    .newsletter-btn:hover { opacity:0.85; }

    /* FOOTER */
    .site-footer { background:var(--white); border-top:1px solid var(--line); padding:60px 0 40px; }
    .footer-inner { max-width:1200px; margin:0 auto; padding:0 40px; display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:40px; }
    .footer-left { display:flex; flex-direction:column; gap:20px; }
    .footer-logo { height:32px; width:auto; }
    .footer-nav { list-style:none; display:flex; gap:24px; flex-wrap:wrap; }
    .footer-nav a { font-family:var(--sans); font-size:13px; color:var(--body-text); text-decoration:none; }
    .footer-nav a:hover { color:var(--navy); }
    .footer-contact { display:flex; flex-direction:column; gap:8px; text-align:right; }
    .footer-contact a { font-family:var(--mono); font-size:12px; color:var(--body-text); text-decoration:none; }
    .footer-contact a:hover { color:var(--navy); }
    .footer-bottom { max-width:1200px; margin:0 auto; padding:20px 40px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
    .footer-copy { font-family:var(--mono); font-size:11px; color:var(--muted); }
    .footer-legal { display:flex; gap:20px; }
    .footer-legal a { font-family:var(--mono); font-size:11px; color:var(--muted); text-decoration:none; }
    .footer-legal a:hover { color:var(--navy); }

    /* RESPONSIVE */
    @media (max-width:900px) {
      .container { padding:0 24px; }
      .header-inner { padding:0 24px; }
      .header-nav { display:none; }
      .nav-toggle { display:block; }
      .anno-hero { padding:100px 0 0; }
      .anno-hero-img { max-height:none; }
      .anno-title { margin-bottom:24px; }
      .articles-grid { grid-template-columns:1fr; gap:40px; }
      .featured-article { grid-template-columns:1fr; }
      .tradition-img { width:100vw !important; max-width:100vw; margin-left:-24px; margin-right:-24px; }
      .newsletter-form { flex-direction:column; }
      .footer-inner { flex-direction:column; gap:32px; padding:0 24px; }
      .footer-contact { text-align:left; }
      .footer-bottom { flex-direction:column; gap:12px; align-items:flex-start; padding:20px 24px 0; }
    }
    .header-nav.open { display:flex; flex-direction:column; position:absolute; top:72px; left:0; right:0; background:var(--white); padding:24px; border-bottom:1px solid var(--line); gap:16px; }
  

    
      .edu-journey-full {
        margin-top: 64px;
      }
      .edu-journey-full .vision-img {
        max-width: 100%;
      }
      .edu-journey-full .vision-img img {
        width: 100%;
        max-width: 1100px;
        height: auto;
        display: block;
      }

      #page-educators .vision-inner {
        grid-template-columns: 1fr;
        max-width: 800px;
      }

    /* Fork button override - outlined instead of filled */
    .fork-card .btn-primary {
      background: transparent;
      color: var(--navy);
      border: 1.5px solid var(--navy);
    }
    .fork-card .btn-primary:hover {
      background: var(--navy);
      color: var(--white);
    }

    
    /* Trust section split layout */
    .trust-split {
      display: grid;
      grid-template-columns: 1fr 340px;
      gap: 64px;
      align-items: center;
    }
    .trust-preview {
      display: flex;
      justify-content: center;
    }
    
    @media (max-width: 768px) {
      .trust-split {
        grid-template-columns: 1fr;
        gap: 40px;
      }
      .guide-card {
        max-width: 100%;
      }
    }

    
    /* About page opening split */
    .about-opening {
      padding: 80px 0 32px;
      overflow: hidden;
    }
    .about-opening-split {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 48px;
      align-items: center;
    }
    .about-opening-text {
      padding-right: 20px;
    }
    .about-opening-photo {
      position: relative;
      padding-left: 32px;
    }
    .about-hero-img {
      width: 90%;
      height: auto;
      display: block;
      margin-left: auto;
    }
    .about-hero-creds {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .about-hero-creds span {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
      line-height: 1.6;
    }
    @media (max-width: 768px) {
      .about-opening {
        padding: 60px 0 24px;
      }
      .about-opening-split {
        grid-template-columns: 1fr;
        gap: 32px;
        align-items: start;
      }
      .about-opening-text {
        padding-right: 0;
        order: 2;
      }
      .about-opening-photo {
        order: 1;
        padding-left: 0;
      }
      .about-hero-img {
        width: 85%;
      }
    }

    
    /* Guide card v2 — annotation style with real contrast */
    .guide-card-link {
      display: block;
      text-decoration: none;
    }
    .guide-card-v2 {
      padding: 36px 32px 28px;
      max-width: 320px;
      border: 1px solid var(--line);
    }
    .guide-card-v2:hover {
      border-color: var(--gold);
    }
    .guide-card-toc {
      display: flex;
      flex-direction: column;
    }
    .guide-toc-item {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #4a5568;
      padding: 12px 0;
      border-bottom: 1px solid var(--line);
    }
    .guide-card-footer {
      margin-top: 20px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .guide-leader-line {
      width: 32px;
      height: 16px;
      border-left: 1px solid var(--gold);
      border-bottom: 1px solid var(--gold);
      border-radius: 0 0 0 8px;
      position: relative;
    }
    .guide-leader-line::before {
      content: '';
      width: 6px;
      height: 6px;
      border: 1px solid var(--gold);
      border-radius: 50%;
      position: absolute;
      bottom: -3px;
      left: -4px;
    }
    .guide-card-footer span {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #4a5568;
    }

    
    
    .story-pullquote {
      font-family: var(--serif);
      font-size: 14px;
      color: var(--navy);
      line-height: 1.5;
      margin-top: 24px;
      opacity: 0.5;
    }

    
    @media (max-width: 768px) {
      .about-opening {
        padding-bottom: 16px !important;
      }
      .my-story {
        padding-top: 24px !important;
      }
    }

    
    /* Proof screenshots */
    .proof-screenshots {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 20px;
      max-width: 720px;
      margin-bottom: 24px;
    }
    .proof-img-wrap {
      background: var(--soft-panel);
      border: 1px solid var(--line);
      border-radius: 4px;
      overflow: hidden;
    }
    .proof-img-wrap img {
      width: 100%;
      height: auto;
      display: block;
    }
    .proof-caption {
      font-family: var(--sans);
      font-size: 14px;
      color: var(--body-text);
      margin-bottom: 8px;
    }
    .proof-tiktok-link {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      text-decoration: none;
    }
    .proof-tiktok-link:hover {
      color: var(--navy);
    }
    @media (max-width: 768px) {
      .proof-screenshots {
        grid-template-columns: 1fr;
        max-width: 300px;
      }
    }

    
    .proof-lead {
      font-family: var(--sans);
      font-size: 17px;
      color: var(--body-text);
      line-height: 1.6;
      margin-bottom: 28px;
    }


    /* ========================================
       FULBRIGHT ARTICLE PAGE (fb-)
       ======================================== */

    .fb-hero {
      padding: 48px 0 0;
    }
    .fb-hero-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 40px;
      display: grid;
      grid-template-columns: 1fr 0.85fr;
      gap: 64px;
      align-items: center;
    }
    .fb-hero-text .section-label {
      margin-bottom: 28px;
    }
    .fb-hero-text h1 {
      font-family: var(--serif);
      font-size: clamp(38px, 5vw, 64px);
      line-height: 1.05;
      color: var(--dark-text);
      margin-bottom: 28px;
      font-weight: 400;
    }
    .fb-hero-text h1 em {
      color: var(--muted);
      font-style: italic;
    }
    .fb-hero-text p {
      font-family: var(--sans);
      font-weight: 300;
      font-size: 17px;
      line-height: 1.7;
      color: var(--body-text);
      max-width: 30em;
    }
    .fb-anchor {
      margin-top: 28px;
      font-family: var(--serif);
      font-size: 22px;
      font-style: italic;
      color: var(--navy);
    }
    .fb-hero-img img {
      width: 100%;
      height: auto;
      display: block;
    }
    .fb-byline {
      max-width: 1200px;
      margin: 56px auto 0;
      padding: 28px 40px 0;
      border-top: 1px solid var(--line);
    }
    .fb-byline p {
      font-family: var(--sans);
      font-weight: 300;
      font-size: 14px;
      line-height: 1.7;
      color: var(--muted);
      max-width: 60em;
    }
    .fb-byline strong {
      color: var(--dark-text);
      font-weight: 500;
    }
    .fb-byline-note {
      margin-top: 14px;
    }
    .fb-byline-note a {
      color: var(--navy);
      text-decoration: underline;
    }

    .fb-startbar {
      background: var(--navy);
      margin-top: 64px;
      padding: 56px 0;
    }
    .fb-startbar-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 40px;
    }
    .fb-startbar .section-label {
      color: rgba(255,255,255,0.55);
      margin-bottom: 24px;
    }
    .fb-startbar p {
      font-family: var(--sans);
      font-weight: 300;
      font-size: 18px;
      line-height: 1.7;
      color: var(--white);
      max-width: 46em;
    }
    .fb-startbar-sub {
      margin-top: 20px;
      font-size: 14px !important;
      color: rgba(255,255,255,0.6) !important;
    }

    .fb-dates {
      padding: 64px 0;
      background: var(--cream);
    }
    .fb-dates-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 40px;
    }
    .fb-dates-inner h2 {
      font-family: var(--serif);
      font-size: clamp(28px, 3.2vw, 40px);
      color: var(--dark-text);
      font-weight: 400;
      margin-bottom: 36px;
    }
    .fb-daterow {
      display: grid;
      grid-template-columns: 220px 1fr;
      gap: 32px;
      padding: 20px 0;
      border-top: 1px solid var(--line);
    }
    .fb-daterow:last-child {
      border-bottom: 1px solid var(--line);
    }
    .fb-dk {
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      padding-top: 2px;
    }
    .fb-dv {
      font-family: var(--sans);
      font-weight: 300;
      font-size: 16px;
      line-height: 1.6;
      color: var(--body-text);
    }
    .fb-hot {
      color: var(--navy);
      font-weight: 500;
    }

    .fb-lead {
      max-width: 760px;
      margin: 64px auto;
      padding: 0 40px;
    }
    .fb-lead p {
      font-family: var(--serif);
      font-size: clamp(22px, 2.6vw, 30px);
      line-height: 1.4;
      color: var(--dark-text);
      font-style: italic;
    }

    .fb-steps {
      padding: 24px 0 64px;
    }
    .fb-steps-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 40px;
    }
    .fb-step {
      display: grid;
      grid-template-columns: 220px 1fr;
      gap: 48px;
      padding: 48px 0;
    }
    .fb-step-label {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .fb-step-num {
      font-family: var(--serif);
      font-size: 56px;
      line-height: 1;
      color: var(--gold);
    }
    .fb-step-tag {
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .fb-step-body h3 {
      font-family: var(--serif);
      font-size: clamp(24px, 2.8vw, 32px);
      color: var(--dark-text);
      font-weight: 400;
      margin-bottom: 20px;
    }
    .fb-step-body p {
      font-family: var(--sans);
      font-weight: 300;
      font-size: 16px;
      line-height: 1.7;
      color: var(--body-text);
      margin-bottom: 16px;
      max-width: 44em;
    }
    .fb-step-body strong {
      color: var(--dark-text);
      font-weight: 500;
    }
    .fb-list {
      list-style: none;
      margin: 0 0 16px;
      padding: 0;
      max-width: 44em;
    }
    .fb-list li {
      font-family: var(--sans);
      font-weight: 300;
      font-size: 16px;
      line-height: 1.7;
      color: var(--body-text);
      padding: 8px 0 8px 24px;
      position: relative;
      border-top: 1px solid var(--line);
    }
    .fb-list li:first-child {
      border-top: none;
    }
    .fb-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 18px;
      width: 8px;
      height: 1px;
      background: var(--gold);
    }
    .fb-list li strong {
      color: var(--dark-text);
      font-weight: 500;
    }
    .fb-note {
      padding: 0 0 0 28px;
      margin: 24px 0;
      max-width: 44em;
    }
    .fb-note-label {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 10px;
    }
    .fb-note p {
      margin-bottom: 0 !important;
      font-size: 15px !important;
      color: var(--dark-text) !important;
    }
    .fb-note p strong {
      font-weight: 500;
    }
    .fb-inline-cta {
      margin: 8px 0 20px;
    }

    .fb-checklist {
      background: var(--navy);
      padding: 72px 0;
    }
    .fb-checklist-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 40px;
      display: grid;
      grid-template-columns: 220px 1fr;
      gap: 48px;
    }
    .fb-checklist .section-label {
      color: rgba(255,255,255,0.55);
      margin-bottom: 0;
    }
    .fb-checklist h2 {
      font-family: var(--serif);
      font-size: clamp(28px, 3.2vw, 40px);
      color: var(--white);
      font-weight: 400;
      margin-bottom: 16px;
    }
    .fb-checklist-lead {
      font-family: var(--sans);
      font-weight: 300;
      font-size: 16px;
      line-height: 1.7;
      color: rgba(255,255,255,0.7);
      margin-bottom: 32px;
      max-width: 44em;
    }
    .fb-check {
      list-style: none;
      margin: 0;
      padding: 0;
      max-width: 50em;
    }
    .fb-check li {
      font-family: var(--sans);
      font-weight: 300;
      font-size: 16px;
      line-height: 1.6;
      color: rgba(255,255,255,0.9);
      padding: 14px 0 14px 32px;
      position: relative;
      border-top: 1px solid rgba(255,255,255,0.12);
    }
    .fb-check li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 18px;
      width: 14px;
      height: 7px;
      border-left: 1.5px solid var(--gold);
      border-bottom: 1.5px solid var(--gold);
      transform: rotate(-45deg);
    }

    .fb-downloads {
      padding: 80px 0;
      background: var(--cream);
    }
    .fb-downloads-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 40px;
    }
    .fb-downloads .section-label {
      margin-bottom: 20px;
    }
    .fb-downloads h2 {
      font-family: var(--serif);
      font-size: clamp(28px, 3.2vw, 42px);
      color: var(--dark-text);
      font-weight: 400;
      margin-bottom: 16px;
    }
    .fb-downloads-lead {
      font-family: var(--sans);
      font-weight: 300;
      font-size: 17px;
      line-height: 1.7;
      color: var(--body-text);
      max-width: 46em;
      margin-bottom: 48px;
    }
    .fb-dl-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
    }
    .fb-dl-card {
      background: var(--white);
      border: 1px solid var(--line);
      padding: 40px;
    }
    .fb-dl-card + .fb-dl-card {
      border-left: none;
    }
    .fb-dl-tag {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 20px;
    }
    .fb-dl-card h4 {
      font-family: var(--serif);
      font-size: 26px;
      color: var(--dark-text);
      font-weight: 400;
      margin-bottom: 16px;
    }
    .fb-dl-card p {
      font-family: var(--sans);
      font-weight: 300;
      font-size: 15px;
      line-height: 1.7;
      color: var(--body-text);
      margin-bottom: 28px;
    }

    .fb-closing {
      background: var(--navy);
      padding: 72px 0;
    }
    .fb-closing-inner {
      max-width: 760px;
      margin: 0 auto;
      padding: 0 40px;
      text-align: center;
    }
    .fb-q {
      font-family: var(--serif);
      font-size: clamp(26px, 3.4vw, 38px);
      line-height: 1.3;
      font-style: italic;
      color: var(--white);
      margin-bottom: 28px;
    }
    .fb-closing-inner p {
      font-family: var(--sans);
      font-weight: 300;
      font-size: 16px;
      line-height: 1.7;
      color: rgba(255,255,255,0.8);
      margin-bottom: 16px;
    }
    .fb-follow {
      margin-top: 28px;
      color: rgba(255,255,255,0.7) !important;
    }
    .fb-follow a {
      color: var(--gold);
      text-decoration: none;
    }

    @media (max-width: 860px) {
      .fb-hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;
      }
      .fb-hero-img { order: -1; }
      .fb-daterow,
      .fb-step,
      .fb-checklist-inner {
        grid-template-columns: 1fr;
        gap: 16px;
      }
      .fb-step { gap: 12px; }
      .fb-step-label { flex-direction: row; align-items: baseline; gap: 16px; }
      .fb-step-num { font-size: 40px; }
      .fb-dl-grid { grid-template-columns: 1fr; }
      .fb-dl-card + .fb-dl-card { border-left: 1px solid var(--line); border-top: none; }
    }

/* ============================================================
   REBUILD ADDITIONS (appended to the extracted styles.css)
   Kept here so re-running extract.mjs preserves them.
   ============================================================ */

/* Current-page nav highlight — gold accent, consistent across every page.
   Non-CTA links reserve a transparent underline so the active state adds
   no layout shift; the Shop CTA button gets an inset gold underline. */
.nav-links a:not(.nav-cta) {
  border-bottom: 2px solid transparent;
  padding-bottom: 3px;
}
.nav-links a:not(.nav-cta)[aria-current="page"] {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.nav-links a.nav-cta[aria-current="page"] {
  box-shadow: inset 0 -3px 0 var(--gold);
}