/* 01 — EXISTING CIVICLINE FONTS, COLORS & GLOBAL LAYOUT */
    :root {
      --page: #F3F4F1;
      --white: #FFFFFF;
      --ink: #010101;
      --body: #585956;
      --muted: #858681;
      --dark: #10161B;
      --accent: #CDF2FF;
      --border: #E7E8E4;
      --focus: #7B9199;
      --font-body: Satoshi, Arial, sans-serif;
      --font-heading: Montreal, Arial, sans-serif;
      --font-caption: B612, monospace;
      --max-width: 1440px;
      --u: min(.0694444444vw, 1.111111px);
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 30px; }
    body { margin: 0; background: var(--page); color: var(--ink); font: 400 16px/1.5 var(--font-body); -webkit-font-smoothing: antialiased; }
    h1, h2, h3, p { margin: 0; }
    h1, h2, h3 { font-family: var(--font-heading); font-weight: 500; letter-spacing: -.045em; }
    h1 { font-size: calc(78 * var(--u)); line-height: 1.02; }
    h2 { font-size: calc(68 * var(--u)); line-height: 1.06; }
    h3 { line-height: 1.15; }
    a { color: inherit; text-decoration: none; }
    button, input { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    button { cursor: pointer; }
    img, video { display: block; width: 100%; height: 100%; object-fit: cover; }
    img { color: var(--muted); background: var(--border); }
    button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; }
    ::selection { background: var(--accent); color: var(--ink); }
    .wrap { width: calc(100% - 90 * var(--u)); max-width: var(--max-width); margin-inline: auto; }
    .center { text-align: center; }
    .body-copy { font-size: calc(21 * var(--u)); line-height: 1.5; color: var(--body); }
    .eyebrow { font: 400 calc(12 * var(--u))/1.3 var(--font-caption); letter-spacing: .08em; text-transform: uppercase; }
    .button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: calc(54 * var(--u)); padding: calc(15 * var(--u)) calc(24 * var(--u)); border: 1px solid transparent; border-radius: 12px; background: var(--ink); color: var(--white); font-size: calc(15 * var(--u)); font-weight: 500; transition: transform .2s, background .2s; }
    .button:hover { transform: translateY(-3px); background: #38302E; }
    .button-light { color: var(--ink); background: var(--white); border-color: var(--border); }
    .button-light:hover { background: var(--accent); }
    .button-small { min-height: 40px; padding: 10px 18px; font-size: 13px; border-radius: 8px; }
    .arrow-dot { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--ink); font-size: 14px; }
    .brand { display: inline-flex; gap: 9px; align-items: center; font-size: 18px; font-weight: 500; letter-spacing: .06em; white-space: nowrap; }
    .brand-mark { width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%; display: inline-grid; place-items: center; }
    .brand-mark::after { content: ''; width: 4px; height: 4px; border: 1px solid currentColor; border-radius: 50%; }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
    [hidden] { display: none !important; }
    .skip-link { position: fixed; left: 20px; top: -100px; z-index: 10; background: var(--white); padding: 12px; }
    .skip-link:focus { top: 10px; }

    /* 02 — SLIM TOP NAVIGATION & PAGE HEADER */
    .top-bar { min-height: calc(44 * var(--u)); background: var(--dark); color: var(--white); display: flex; align-items: center; }
    .top-bar nav { display: flex; gap: calc(32 * var(--u)); font-size: calc(12 * var(--u)); }
    .top-bar a:hover { color: var(--accent); }
    .page-header { height: calc(102 * var(--u)); display: flex; align-items: center; justify-content: space-between; }
    .page-header .brand { font-size: calc(17 * var(--u)); }
    .header-link { font-size: calc(14 * var(--u)); text-decoration: underline; text-underline-offset: 4px; }

    /* 03 — TWO-COLUMN HERO & FOUR BENEFITS */
    .hero { display: grid; grid-template-columns: 53% 42%; justify-content: space-between; align-items: center; }
    .hero-copy { padding: calc(36 * var(--u)) 0; }
    .certificate-label { font-family: var(--font-heading); font-size: calc(27 * var(--u)); line-height: 1; letter-spacing: -.025em; margin-bottom: calc(42 * var(--u)); }
    .certificate-label span { display: block; font-family: var(--font-caption); font-size: .51em; letter-spacing: .24em; margin-top: 7px; text-transform: uppercase; }
    .hero h1 { max-width: 730px; }
    .hero .body-copy { max-width: calc(660 * var(--u)); margin-top: calc(30 * var(--u)); }
    .hero .button { margin-top: calc(36 * var(--u)); }
    .hero-image { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: var(--dark); }
    .hero-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 30%,#10161B70); }
    .hero-image figcaption { position: absolute; z-index: 1; inset: 43% 8% auto; text-align: center; color: var(--white); font: 500 calc(48 * var(--u))/1.06 var(--font-heading); letter-spacing: -.05em; }
    figure { margin: 0; }
    .benefits { display: grid; grid-template-columns: repeat(4,1fr); gap: calc(38 * var(--u)); padding: calc(82 * var(--u)) 0 calc(126 * var(--u)); }
    .benefits article { border-right: 1px solid var(--border); padding-right: calc(20 * var(--u)); }
    .benefits article:last-child { border: 0; }
    .benefits h3 { font-size: calc(20 * var(--u)); letter-spacing: -.015em; margin-bottom: 12px; }
    .benefits p { font-size: calc(15 * var(--u)); color: var(--body); line-height: 1.5; }

    /* 04 — HORIZONTAL COURSE CAROUSEL */
    .courses { padding: calc(68 * var(--u)) 0 calc(106 * var(--u)); overflow: hidden; }
    .courses h2 { margin-bottom: calc(64 * var(--u)); }
    .course-track { display: flex; align-items: stretch; gap: calc(20 * var(--u)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 calc(30 * var(--u)) 4px; }
    .course-track::-webkit-scrollbar { display: none; }
    .course-card { flex: 0 0 calc((100% - 70 * var(--u))/3); scroll-snap-align: start; border-radius: 16px; background: var(--white); overflow: hidden; display: flex; flex-direction: column; }
    .course-cover { position: relative; height: calc(280 * var(--u)); overflow: hidden; }
    .course-cover img { transition: transform .65s; }
    .course-card:hover .course-cover img { transform: scale(1.045); }
    .course-badge { position: absolute; right: 20px; top: 18px; background: var(--accent); color: var(--ink); padding: 5px 12px; border-radius: 999px; font: 11px/1.3 var(--font-caption); letter-spacing: .025em; }
    .course-content { padding: calc(34 * var(--u)); display: flex; flex-direction: column; flex: 1; min-height: calc(480 * var(--u)); }
    .course-brand { font-family: var(--font-heading); font-size: calc(22 * var(--u)); line-height: 1.05; letter-spacing: -.02em; margin-bottom: calc(44 * var(--u)); }
    .course-brand small { display: block; font: 10px var(--font-caption); letter-spacing: .16em; margin-top: 5px; }
    .course-content h3 { font-size: calc(31 * var(--u)); margin-bottom: 8px; }
    .course-content .course-subtitle { color: var(--ink); font-size: calc(15 * var(--u)); margin-bottom: calc(28 * var(--u)); }
    .course-content p { font-size: calc(15 * var(--u)); color: var(--body); }
    .course-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: calc(46 * var(--u)); font-size: 12px; color: var(--body); }
    .course-meta .button { background: var(--white); color: var(--ink); border-color: var(--border); }
    .carousel-controls { display: flex; justify-content: center; gap: 22px; margin-top: calc(44 * var(--u)); }
    .carousel-controls button { width: 42px; height: 42px; border: 0; background: transparent; border-radius: 50%; font-size: 24px; }
    .carousel-controls button:hover { background: var(--white); }
    .carousel-controls button:disabled { opacity: .25; cursor: default; }

    /* 05 — SKILL PATH: LEFT COPY, RIGHT NESTED CARD */
    .stack-section { padding: calc(118 * var(--u)) 0 calc(130 * var(--u)); display: grid; grid-template-columns: 37% 58%; align-items: center; justify-content: space-between; gap: 5%; }
    .pill { display: inline-block; border-radius: 6px; background: var(--accent); padding: 4px 9px; font: 11px var(--font-caption); text-transform: uppercase; margin-bottom: calc(28 * var(--u)); }
    .stack-copy h2 { font-size: calc(74 * var(--u)); }
    .stack-copy .body-copy { font-size: calc(19 * var(--u)); margin-top: calc(32 * var(--u)); }
    .stack-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: calc(32 * var(--u)); }
    .small-note { font-size: 12px; color: var(--body); max-width: 380px; margin-top: 15px; }
    .path-shell { background: var(--border); border-radius: 30px; padding: calc(54 * var(--u)); }
    .path-card { border-radius: 24px; padding: calc(52 * var(--u)); background: var(--white); }
    .path-card h3 { font-size: calc(28 * var(--u)); text-align: center; }
    .path-subtitle { text-align: center; font: 10px var(--font-caption); margin-top: 15px; letter-spacing: .08em; color: var(--body); }
    .path-list { padding: 0; margin: calc(46 * var(--u)) 0 calc(35 * var(--u)); list-style: none; display: grid; gap: 28px; }
    .path-list li { display: grid; grid-template-columns: 1fr 90px; align-items: center; gap: 24px; padding-left: 15px; border-left: 3px solid var(--accent); }
    .path-list strong { font-family: var(--font-heading); font-size: calc(22 * var(--u)); font-weight: 500; line-height: 1.2; letter-spacing: -.03em; }
    .path-list span { font: 10px/1.45 var(--font-caption); text-transform: uppercase; color: var(--body); }
    .path-award { display: grid; grid-template-columns: 40% 1fr; align-items: center; gap: 18px; padding: 16px; border-radius: 12px; background: var(--page); }
    .path-award img { aspect-ratio: 1.6; height: auto; border-radius: 6px; }
    .path-award p { font-size: 12px; line-height: 1.4; }
    .path-award strong { display: block; font-weight: 500; margin-bottom: 6px; }

    /* 06 — TWO LEARNING BENEFITS / FOUR IMAGE TILES */
    .learning { padding: calc(110 * var(--u)) 0 calc(152 * var(--u)); }
    .learning h2 { margin-bottom: calc(68 * var(--u)); }
    .learning-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(34 * var(--u)); }
    .learning-image, .expert-grid { aspect-ratio: 1; border-radius: 20px; overflow: hidden; }
    .expert-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); }
    .expert-grid figure { position: relative; overflow: hidden; }
    .expert-grid img { opacity: .65; }
    .expert-grid figcaption { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; font: 500 calc(25 * var(--u))/1.15 var(--font-heading); color: var(--white); background: #10161B55; text-shadow: 0 2px 10px #10161B80; }
    .learning-grid h3 { font-size: calc(25 * var(--u)); margin: calc(28 * var(--u)) 0 16px; letter-spacing: -.02em; }
    .learning-grid p { font-size: calc(19 * var(--u)); color: var(--body); max-width: 650px; }

    /* 07 — CERTIFICATE SHOWCASE / LIGHT TO DARK TRANSITION */
    .proof { padding: 0 0 calc(14 * var(--u)); background: linear-gradient(var(--page) 0%,var(--page) 20%,var(--dark) 100%); }
    .proof h2 { padding: calc(10 * var(--u)) 0 calc(70 * var(--u)); }
    .proof-image { position: relative; aspect-ratio: 1.68; overflow: hidden; border-radius: 16px; }
    .proof-image img { object-position: center 59%; }
    .proof-image .image-note { position: absolute; left: 22px; bottom: 20px; color: var(--white); background: #10161BB3; padding: 8px 13px; border-radius: 8px; font-size: 12px; }
    .proof-open { position: absolute; right: 22px; bottom: 20px; border: 0; width: 42px; height: 42px; border-radius: 50%; color: var(--ink); background: var(--white); font-size: 20px; }

    /* 08 — DARK LEARNING SECTION & VIDEO */
    .dark-content { background: var(--dark); color: var(--white); padding-top: calc(180 * var(--u)); }
    .learning-story h2 { max-width: calc(800 * var(--u)); margin: 0 auto; font-size: calc(82 * var(--u)); }
    .method-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: calc(80 * var(--u)); margin-top: calc(180 * var(--u)); margin-bottom: calc(64 * var(--u)); }
    .method-grid .eyebrow { color: var(--accent); margin-bottom: calc(30 * var(--u)); }
    .method-grid h3 { font-size: calc(38 * var(--u)); margin-bottom: 13px; }
    .method-grid p:last-child { font-size: calc(17 * var(--u)); color: #BABDBB; }
    .video-shell { background: var(--page); padding: calc(34 * var(--u)) calc(150 * var(--u)); border-radius: 24px; }
    .video-frame { position: relative; aspect-ratio: 1.76; overflow: hidden; border-radius: 12px; background: var(--ink); }
    .video-frame video { position: absolute; inset: 0; }
    .video-cover { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 40px; background: #10161B55; pointer-events: none; transition: opacity .3s; }
    .video-cover h3 { font-size: calc(72 * var(--u)); line-height: 1; }
    .video-cover p { font-size: 12px; margin-top: 18px; letter-spacing: .08em; text-transform: uppercase; }
    .video-frame.is-playing .video-cover { opacity: 0; }
    .video-controls { position: absolute; left: 18px; right: 18px; bottom: 16px; display: flex; align-items: center; gap: 14px; }
    .video-toggle, .mute-toggle { border: 0; background: #10161BC9; color: var(--white); padding: 10px 14px; border-radius: 8px; font-size: 12px; }
    .video-controls progress { flex: 1; width: 100%; height: 3px; accent-color: var(--accent); }

    /* 09 — NEWSLETTER BANNER */
    .signup { margin-top: calc(188 * var(--u)); padding: calc(76 * var(--u)); border-radius: 24px; background: var(--accent); color: var(--ink); display: grid; grid-template-columns: 44% 48%; justify-content: space-between; align-items: center; }
    .signup h2 { font: 500 calc(30 * var(--u))/1.16 var(--font-heading); letter-spacing: -.03em; max-width: 410px; }
    .signup-fields { display: flex; gap: 10px; }
    .signup input { min-width: 0; width: 100%; padding: 14px; border: 1px solid var(--focus); border-radius: 8px; background: transparent; color: var(--ink); font-size: 14px; }
    .signup .button { flex-shrink: 0; min-height: 48px; padding: 12px 20px; }
    .signup-note { font-size: 11px; line-height: 1.6; color: var(--body); margin-top: 12px; }
    .signup-note button { border: 0; background: none; color: inherit; padding: 0; text-decoration: underline; }
    .form-status { font-size: 13px; margin-top: 10px; }

    /* 10 — FAQ ACCORDION */
    .faq { padding-top: calc(182 * var(--u)); padding-bottom: calc(156 * var(--u)); }
    .faq h2 { font-size: calc(60 * var(--u)); margin-bottom: calc(84 * var(--u)); }
    .faq details { border-top: 1px dashed #585956; }
    .faq details:last-child { border-bottom: 1px dashed #585956; }
    .faq summary { list-style: none; cursor: pointer; padding: calc(49 * var(--u)) 0; display: flex; align-items: center; justify-content: space-between; gap: 28px; font-size: calc(22 * var(--u)); line-height: 1.3; font-weight: 500; }
    .faq summary::-webkit-details-marker { display: none; }
    .faq summary::after { content: '+'; display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; background: var(--accent); color: var(--ink); border-radius: 50%; font: 20px/1 var(--font-body); transition: transform .2s; }
    .faq details[open] summary::after { transform: rotate(45deg); }
    .faq-answer { padding: 0 55px 34px 0; max-width: 960px; font-size: 18px; color: #BABDBB; line-height: 1.65; }

    /* 11 — SECOND-PAGE FOOTER */
    .page-footer { background: #010101; color: var(--white); padding: calc(64 * var(--u)) 0 calc(34 * var(--u)); }
    .footer-links { display: flex; gap: calc(130 * var(--u)); margin-bottom: calc(114 * var(--u)); }
    .footer-links nav { display: grid; gap: 14px; font-size: 13px; }
    .footer-links h3 { font: 400 12px var(--font-caption); color: var(--muted); margin-bottom: 5px; letter-spacing: 0; }
    .footer-links a:hover { color: var(--accent); }
    .footer-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
    .footer-bottom .certificate-label { margin: 0; font-size: 28px; }
    .footer-bottom small { color: var(--muted); font-size: 11px; }

    /* 12 — NATIVE DIALOG: COURSE DETAILS & SAMPLE CERTIFICATE */
    dialog { width: min(620px,calc(100% - 36px)); max-height: 85dvh; margin: auto; padding: 36px; border: 1px solid var(--border); border-radius: 24px; color: var(--ink); background: var(--white); }
    dialog::backdrop { background: #10161B99; backdrop-filter: blur(5px); }
    .dialog-close { display: block; margin: 0 0 25px auto; border: 0; background: var(--page); border-radius: 8px; padding: 8px 12px; }
    dialog h2 { font-size: 40px; line-height: 1.05; margin-bottom: 24px; }
    dialog h3 { font-size: 25px; margin: 22px 0 12px; }
    dialog p, dialog li { color: var(--body); font-size: 16px; }
    dialog p + p { margin-top: 15px; }
    dialog ul { padding-left: 20px; line-height: 1.8; }
    .sample-certificate { padding: 32px 20px; border: 1px solid var(--border); text-align: center; background: var(--page); margin-bottom: 24px; }
    .sample-certificate .eyebrow { font-size: 10px; }
    .sample-certificate h3 { font-size: 32px; }
    .sample-certificate p { font-size: 13px; }

    /* 13 — RESPONSIVE LAYOUT: same section order, sensible stacking */
    @media (min-width: 1600px) { .course-track { max-width: 1600px; margin-inline: auto; } }
    @media (max-width: 1000px) and (min-width: 761px) {
      .body-copy, .stack-copy .body-copy, .learning-grid p { font-size: 16px; }
      .benefits p, .course-content p, .method-grid p:last-child { font-size: 14px; }
      .course-meta { align-items: flex-start; flex-direction: column; }
      .path-card { padding: 28px; }
      .path-list li { grid-template-columns: 1fr; gap: 8px; }
      .path-list strong { font-size: 18px; }
      .signup { padding: 36px; grid-template-columns: 40% 55%; }
      .signup h2 { font-size: 24px; }
      .top-bar nav { font-size: 11px; }
    }
    @media (max-width: 760px) {
      :root { --u: 1px; }
      .wrap { width: calc(100% - 40px); }
      h1 { font-size: clamp(44px,11.5vw,70px); }
      h2 { font-size: 40px; }
      .body-copy { font-size: 17px; }
      .button { min-height: 48px; padding: 13px 19px; font-size: 14px; }
      .top-bar { min-height: 36px; }
      .top-bar nav { gap: 22px; font-size: 10px; }
      .top-bar nav a:last-child { display: none; }
      .page-header { height: 76px; }
      .page-header .brand { font-size: 14px; }
      .header-link { font-size: 12px; }
      .hero { grid-template-columns: 1fr; gap: 34px; }
      .hero-copy { padding: 22px 0 0; }
      .certificate-label { font-size: 25px; margin-bottom: 28px; }
      .hero .body-copy { margin-top: 22px; }
      .hero .button { margin-top: 25px; }
      .hero-image { border-radius: 16px; }
      .hero-image figcaption { font-size: 40px; }
      .benefits { grid-template-columns: 1fr 1fr; gap: 28px 22px; padding: 45px 0 55px; }
      .benefits article { padding-right: 0; border: 0; }
      .benefits h3 { font-size: 18px; }
      .benefits p { font-size: 14px; }
      .courses { padding: 38px 0 25px; }
      .courses h2 { margin-bottom: 32px; padding: 0 20px; }
      .course-track { padding-inline: 20px; gap: 14px; }
      .course-card { flex-basis: 85%; max-width: 390px; }
      .course-cover { height: 210px; }
      .course-content { min-height: 390px; padding: 25px; }
      .course-brand { font-size: 21px; margin-bottom: 28px; }
      .course-content h3 { font-size: 29px; }
      .course-content p, .course-content .course-subtitle { font-size: 15px; }
      .course-meta { padding-top: 28px; }
      .course-meta .button { min-height: 40px; padding: 10px 15px; font-size: 12px; }
      .carousel-controls { margin-top: 24px; }
      .stack-section { padding: 70px 0 50px; grid-template-columns: 1fr; gap: 40px; }
      .stack-copy h2 { font-size: 47px; }
      .stack-copy .body-copy { font-size: 17px; margin-top: 20px; }
      .pill { margin-bottom: 18px; }
      .path-shell { padding: 18px; border-radius: 24px; }
      .path-card { padding: 28px 20px; border-radius: 18px; }
      .path-card h3 { font-size: 25px; }
      .path-list { margin: 34px 0; gap: 24px; }
      .path-list li { grid-template-columns: 1fr 65px; gap: 12px; }
      .path-list strong { font-size: 18px; }
      .path-list span { font-size: 9px; }
      .path-award { padding: 12px; gap: 12px; }
      .learning { padding: 60px 0 80px; }
      .learning h2 { margin-bottom: 36px; }
      .learning-grid { grid-template-columns: 1fr; gap: 40px; }
      .learning-grid h3 { font-size: 23px; margin: 22px 0 10px; }
      .learning-grid p { font-size: 16px; }
      .expert-grid figcaption { font-size: 22px; }
      .proof h2 { padding: 0 0 32px; }
      .proof-image { aspect-ratio: 1.3; }
      .proof-image .image-note { left: 12px; bottom: 14px; font-size: 10px; max-width: 220px; }
      .proof-open { right: 12px; bottom: 12px; width: 34px; height: 34px; }
      .dark-content { padding-top: 80px; }
      .learning-story h2 { font-size: 45px; }
      .method-grid { grid-template-columns: 1fr; gap: 38px; margin: 65px 0 42px; }
      .method-grid .eyebrow { font-size: 11px; margin-bottom: 14px; }
      .method-grid h3 { font-size: 30px; }
      .method-grid p:last-child { font-size: 16px; }
      .video-shell { padding: 18px; border-radius: 18px; }
      .video-frame { aspect-ratio: 1.25; }
      .video-cover { padding: 15px; }
      .video-cover h3 { font-size: 35px; }
      .video-cover p { font-size: 10px; }
      .video-controls { left: 10px; right: 10px; bottom: 10px; gap: 8px; }
      .video-toggle, .mute-toggle { font-size: 10px; padding: 8px; }
      .signup { margin-top: 80px; padding: 32px 24px; border-radius: 20px; grid-template-columns: 1fr; gap: 28px; }
      .signup h2 { font-size: 28px; }
      .signup-fields { flex-direction: column; }
      .signup input { min-height: 48px; }
      .signup .button { align-self: flex-start; }
      .signup-note { font-size: 12px; }
      .faq { padding: 80px 0; }
      .faq h2 { font-size: 38px; margin-bottom: 42px; }
      .faq summary { padding: 28px 0; font-size: 17px; }
      .faq summary::after { width: 24px; height: 24px; flex-basis: 24px; font-size: 17px; }
      .faq-answer { font-size: 16px; padding: 0 20px 25px 0; }
      .page-footer { padding: 45px 0 25px; }
      .footer-links { gap: 65px; margin-bottom: 65px; }
      .footer-bottom { align-items: flex-start; flex-direction: column; gap: 30px; }
      dialog { padding: 24px; }
      dialog h2 { font-size: 32px; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { transition-duration: .01ms !important; }
      .button:hover, .course-card:hover img { transform: none; }
    }
  

    /* 14 — REFINED POPUPS, BUTTON INTERACTIONS & EQUAL IMAGE GRID */
    .expert-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: repeat(2, minmax(0, 1fr));
      aspect-ratio: 1;
    }
    .expert-grid figure { min-width: 0; min-height: 0; height: 100%; }
    .expert-grid figure img { position: absolute; inset: 0; width: 100%; height: 100%; }
    .expert-grid figcaption { font-size: clamp(16px,1.75vw,28px); overflow-wrap: anywhere; }
    button, .button {
      transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background-color .25s, color .25s, border-color .25s;
    }
    button svg, .button svg, .arrow-dot { transition: transform .25s; }
    @media (hover:hover) and (prefers-reduced-motion:no-preference) {
      button:not(:disabled):hover, .button:hover { transform: translateY(-3px); box-shadow: 0 8px 20px #10161B14; }
      .button:hover svg:last-child, .button:hover .arrow-dot { transform: translateX(3px); }
      .dialog-close:hover { transform: rotate(90deg); background: var(--accent); }
      .proof-open:hover { transform: translateY(-3px) rotate(8deg); }
      .carousel-controls button:not(:disabled):hover { background: var(--accent); }
    }
    button:not(:disabled):active, .button:active { transform: translateY(0) scale(.97); box-shadow: none; }
    button:disabled { box-shadow:none; }
    body:has(.formation-dialog[open]) { overflow: hidden; }
    .formation-dialog {
      width: min(1080px, calc(100% - 56px));
      max-width: none; max-height: calc(100dvh - 48px);
      padding: 0; overflow: hidden; border: 1px solid var(--border);
      border-radius: 28px; box-shadow: 0 30px 110px #10161B33;
    }
    .formation-dialog::backdrop { background: #10161B88; backdrop-filter: blur(8px); }
    .formation-dialog[open] { animation: modal-enter .3s cubic-bezier(.16,1,.3,1); }
    .formation-dialog .dialog-close {
      position: absolute; top: 22px; right: 22px; z-index: 2;
      display: grid; place-items: center; width: 42px; height: 42px;
      margin: 0; padding: 11px; border: 1px solid var(--border);
      border-radius: 50%; background: var(--white); color: var(--ink);
    }
    .dialog-close svg { width: 20px; height: 20px; }
    .dialog-scroll {
      max-height: calc(100dvh - 50px); overflow-y: auto; overflow-x: hidden;
      padding: 42px 44px 0; overscroll-behavior: contain;
      scrollbar-width: thin; scrollbar-color: var(--focus) transparent;
    }
    .dialog-scroll::-webkit-scrollbar { width: 5px; }
    .dialog-scroll::-webkit-scrollbar-track { background: transparent; margin-block: 26px; }
    .dialog-scroll::-webkit-scrollbar-thumb { background: var(--focus); border-radius: 999px; }
    .modal-heading { padding-right: 42px; margin-bottom: 30px; }
    .modal-eyebrow { display: block; font: 10px/1.4 var(--font-caption); letter-spacing: .09em; color: var(--body); margin-bottom: 14px; }
    .formation-dialog h2 { font-size: clamp(30px,3.2vw,46px); line-height: 1.04; margin: 0; }
    .course-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(260px,1fr); gap: 36px; align-items: start; }
    .formation-dialog h3 { font-size: 23px; margin: 0 0 20px; }
    .course-objectives ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
    .course-objectives li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.5; }
    .course-objectives li::before { content: '✓'; position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 18px; height: 18px; font-size: 11px; color: var(--ink); background: var(--accent); border-radius: 50%; }
    .course-facts { display: grid; gap: 0; margin: 0; padding: 8px 22px; background: var(--page); border: 1px solid var(--border); border-radius: 18px; }
    .course-fact { display: flex; gap: 14px; align-items: flex-start; padding: 19px 0; border-bottom: 1px solid var(--border); }
    .course-fact:last-child { border: 0; }
    .fact-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; background: var(--white); color: var(--ink); }
    .fact-icon svg { width: 20px; height: 20px; }
    .course-fact dt { font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 5px; }
    .course-fact dd { margin: 0; color: var(--body); font-size: 14px; line-height: 1.4; }
    .modal-action { margin: 30px -44px 0; padding: 24px 44px; display: flex; gap: 24px; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); background: var(--white); }
    .modal-action strong { display: block; font-size: 16px; font-weight: 500; }
    .modal-action span { display: block; font-size: 13px; color: var(--body); margin-top: 5px; }
    .modal-action .contact-button { min-height: 50px; padding: 14px 20px; font-size: 14px; gap: 12px; flex-shrink: 0; border-radius: 12px; background: var(--ink); color: var(--white); }
    .modal-action .contact-button span { font-size: 14px; color: inherit; margin: 0; }
    .contact-button svg { width: 18px; height: 18px; flex: 0 0 18px; }
    .contact-button:hover { background: #38302E; }
    .dialog-scroll > p { max-width: 740px; }
    @keyframes modal-enter { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
    @media(max-width:760px) {
      .formation-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); border-radius: 22px; }
      .dialog-scroll { padding: 30px 22px 0; max-height: calc(100dvh - 26px); }
      .formation-dialog .dialog-close { top: 15px; right: 15px; width: 36px; height: 36px; padding: 8px; }
      .modal-heading { padding-right: 32px; margin-bottom: 25px; }
      .modal-eyebrow { font-size: 9px; max-width: 220px; }
      .formation-dialog h2 { font-size: 32px; }
      .course-layout { grid-template-columns: 1fr; gap: 26px; }
      .course-objectives ul { gap: 13px; }
      .course-objectives li { font-size: 14px; }
      .course-facts { padding-inline: 16px; }
      .course-fact { padding-block: 14px; }
      .modal-action { margin: 26px -22px 0; padding: 20px 22px; flex-direction: column; align-items: stretch; gap: 16px; }
      .modal-action .contact-button { width: 100%; }
      .expert-grid figcaption { font-size: clamp(15px,4.5vw,25px); padding: 12px; }
    }
    @media(prefers-reduced-motion:reduce) {
      .formation-dialog[open] { animation: none; }
      button:active, .button:active { transform: none; }
    }

:root { --color-white: #FFFFFF; --color-ink: #010101; --color-surface: #F3F4F1; --color-dark: #10161B; --color-body: #585956; --color-muted: #858681; --color-accent: #CDF2FF; --color-border: #E7E8E4; --color-focus: #7B9199; --color-hover: #38302E; --color-hero-body: #E7E6DE; --color-dark-body: #BABDBB; }
:root { color-scheme: light; --background: var(--color-white); --foreground: var(--color-ink); --card: var(--color-surface); --card-foreground: var(--color-ink); --popover: var(--color-white); --popover-foreground: var(--color-ink); --primary: var(--color-ink); --primary-foreground: var(--color-white); --secondary: var(--color-surface); --secondary-foreground: var(--color-ink); --muted: var(--color-surface); --muted-foreground: var(--color-muted); --accent: var(--color-accent); --accent-foreground: var(--color-ink); --border: var(--color-border); --input: var(--color-surface); --ring: var(--color-focus); --radius: 12px; --body: var(--color-body); --dark: var(--color-dark); --unit: min(.0694444444vw,1.111111px); }
.frame { width: calc(100% - 80 * var(--unit)); max-width: 1511px; margin-inline: auto; }
.site-header { height: calc(96 * var(--unit)); display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-family: Satoshi, Arial, sans-serif; font-size: calc(18 * var(--unit)); font-weight: 500; letter-spacing: 1px; }
.brand svg { width: calc(17 * var(--unit)); height: calc(17 * var(--unit)); stroke-width: 1; }
.brand i { font-weight: 400; font-style: italic; }
.desktop-nav { display: flex; align-items: center; gap: calc(32 * var(--unit)); margin-left: calc(52 * var(--unit)); }
.desktop-nav a { font-size: calc(14 * var(--unit)); color: var(--color-hover); transition: opacity .2s; }
.desktop-nav a:hover { opacity: 0.55; }
.header-actions { display: flex; gap: calc(12 * var(--unit)); align-items: center; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: calc(14 * var(--unit)); min-height: calc(48 * var(--unit)); padding: calc(13 * var(--unit)) calc(21 * var(--unit)); border: 1px solid transparent; border-radius: calc(12 * var(--unit)); font-family: Satoshi, Arial, sans-serif; font-size: calc(14 * var(--unit)); font-weight: 500; line-height: 1.3; white-space: nowrap; transition: background .2s,transform .2s; }
.button svg { width: calc(16 * var(--unit)); height: calc(16 * var(--unit)); stroke-width: 1.5; }
.header-actions .button { min-height: calc(40 * var(--unit)); padding: calc(10 * var(--unit)) calc(18 * var(--unit)); font-size: calc(13 * var(--unit)); }
.mobile-menu { display: none; }
.hero-note>.button { margin-top: calc(25 * var(--unit)); }
.how-copy>.button { margin-top: calc(24 * var(--unit)); }
.value-copy>.button { margin-top: calc(28 * var(--unit)); }
.email-field .button { font-size: calc(12 * var(--unit)); min-height: calc(48 * var(--unit)); padding: calc(12 * var(--unit)) calc(16 * var(--unit)); border-radius: calc(9 * var(--unit)); }
.site-footer { padding-top: calc(12 * var(--unit)); }
.footer-main { display: grid; grid-template-columns: 1.45fr 1fr 1fr 1fr; gap: calc(46 * var(--unit)); padding-bottom: calc(52 * var(--unit)); }
.footer-brand .brand { font-size: calc(17 * var(--unit)); }
.footer-brand p { font-size: calc(14 * var(--unit)); color: var(--color-body); line-height: 1.9; margin-top: calc(12 * var(--unit)); }
.footer-column { display: flex; flex-direction: column; gap: calc(12 * var(--unit)); font-size: calc(14 * var(--unit)); line-height: 1.35; color: var(--color-body); }
.footer-column h3 { font-size: calc(15 * var(--unit)); font-weight: 500; margin-bottom: calc(4 * var(--unit)); color: var(--color-ink); }
.footer-column a:hover,.footer-brand p a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--color-border); padding: calc(22 * var(--unit)) 0 calc(60 * var(--unit)); font-size: calc(12 * var(--unit)); color: var(--color-body); }
.footer-bottom>div { display: flex; gap: calc(24 * var(--unit)); }
.footer-bottom button { border: 0px; background: none; padding: 0px; color: inherit; font-size: inherit; }
.footer-bottom button:hover { text-decoration: underline; }
.civic-dialog { max-width: 640px !important; border: 1px solid var(--color-border); border-radius: 24px !important; padding: 36px !important; background: var(--color-white); max-height: 85dvh; overflow-y: auto; }
.civic-dialog [data-slot=dialog-title] { font-size: 36px; font-weight: 500; letter-spacing: -0.045em; line-height: 1.05; }
.civic-dialog [data-slot=dialog-description] { font-size: 15px; color: var(--color-body); line-height: 1.5; margin-top: 8px; }
.civic-dialog .button { font-size: 14px; padding: 14px 20px; min-height: 46px; border-radius: 10px; }
.civic-dialog .button svg { height: 16px; width: 16px; }
.dialog-prose .button { justify-self: start; margin-top: 6px; }
.brief-heading .brand { font-size: 12px; gap: 4px; }
.brief-heading .brand svg { width: 14px; height: 14px; }
.mobile-sheet .brand { font-size: 18px; }
.mobile-sheet .brand svg { width: 18px; height: 18px; }
@media (max-width:1000px) and (min-width:761px){.desktop-nav { gap: 16px; margin-left: 0px; }
.desktop-nav a { font-size: 12px; }
.site-header { gap: 16px; }
.header-actions .button { font-size: 11px; }
.footer-column,.footer-brand p { font-size: 12px; }
.footer-bottom { font-size: 11px; }
}
@media (max-width:760px){:root { --unit: 1px; }
.frame { width: calc(100% - 40px); }
.site-header { height: 78px; gap: 16px; }
.brand { font-size: 16px; letter-spacing: 0.7px; }
.brand svg { width: 17px; height: 17px; }
.desktop-nav,.header-actions { display: none; }
.mobile-menu { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--color-border); background: white; border-radius: 12px; }
.mobile-menu svg { width: 21px; height: 21px; }
.button { font-size: 14px; min-height: 46px; padding: 13px 20px; gap: 12px; border-radius: 10px; }
.button svg { width: 16px; height: 16px; }
.hero-note>.button { margin: 0px; }
.how-copy>.button { margin-top: 24px; }
.value-copy>.button { margin-top: 24px; }
.email-field .button { font-size: 11px; min-height: 44px; padding: 10px 11px; border-radius: 7px; }
.site-footer { padding-top: 40px; }
.footer-main { grid-template-columns: repeat(3,1fr); gap: 32px 18px; padding-bottom: 36px; }
.footer-brand { grid-column: 1/-1; }
.footer-brand .brand { font-size: 17px; }
.footer-brand p { font-size: 14px; line-height: 1.8; margin-top: 12px; }
.footer-column { font-size: 12px; gap: 13px; line-height: 1.45; }
.footer-column h3 { font-size: 14px; margin-bottom: 4px; }
.footer-bottom { padding: 24px 0px 36px; font-size: 11px; align-items: flex-start; flex-direction: column; gap: 18px; }
.footer-bottom>div { gap: 24px; }
.civic-dialog { padding: 28px 22px !important; max-width: calc(100% - 32px) !important; }
.civic-dialog [data-slot=dialog-title] { font-size: 31px; }
.mobile-sheet .button { justify-content: center; color: var(--color-white); padding: 14px 20px; font-size: 16px; }
}
@media (max-width:380px){.email-field .button { width: 100%; }
.footer-main { gap: 28px 12px; }
}
.site-footer { padding-top: calc(130 * var(--unit)); }
.footer-main { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: calc(46 * var(--unit)); padding-bottom: calc(90 * var(--unit)); }
.footer-wordmark { display: flex; align-items: center; gap: calc(28 * var(--unit)); width: 100%; padding-bottom: calc(24 * var(--unit)); color: rgb(21, 21, 21); }
.footer-wordmark > svg { width: 9%; height: auto; stroke-width: 0.8; flex-shrink: 0; }
.footer-wordmark-text { font-family: Satoshi, Arial, sans-serif; font-weight: 400; font-size: clamp(20px, 10.2vw, 163px); line-height: 1; letter-spacing: 0.2em; white-space: nowrap; }
.footer-bottom { padding-bottom: calc(22 * var(--unit)); }
.button:hover { transform: translateY(-2px); }
@media (max-width:760px){.site-footer { padding-top: 72px; }
.footer-main { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px 18px; padding-bottom: 48px; }
.footer-wordmark { gap: 10px; padding-bottom: 22px; }
.footer-wordmark-text { font-size: 8.4vw; }
.footer-bottom { padding-bottom: 24px; }
}
@media (prefers-reduced-motion:reduce){.button:hover { transform: none; }
}
[hidden] { display: none !important; }
dialog { color: rgb(1, 1, 1); border: 0px; margin: auto; }
dialog::backdrop { background: rgba(16, 22, 27, 0.6); backdrop-filter: blur(4px); }
.modal-close { display: block; margin: 0px 0px 16px auto; border: 0px; background: rgb(243, 244, 241); padding: 8px 12px; border-radius: 8px; }
.mobile-navigation { width: min(90vw, 380px); padding: 24px; border-radius: 20px; }
.mobile-navigation nav { display: grid; gap: 20px; font-size: 20px; }
.civic-dialog h2 { font-size: 36px; line-height: 1.1; margin-bottom: 20px; }
.civic-dialog p { color: rgb(88, 89, 86); line-height: 1.6; margin-bottom: 16px; }
.civic-dialog h3 { font-size: 24px; margin: 18px 0px 10px; }
.footer-wordmark-text { font-size: clamp(12px, 6.4vw, 100px); }
.footer-column a { overflow-wrap: break-word; }
.theme-card-copy .button { width: 100%; min-height: 50px; margin-top: 10px; font-size: 14px; white-space: normal; }
.theme-card-copy .button svg { width: 18px; height: 18px; flex-shrink: 0; }
.button,button { transition: background-color .25s,color .25s,border-color .25s,box-shadow .25s,transform .25s cubic-bezier(.2,.7,.2,1); }
.button svg,button svg { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
@media (hover:hover){.button:hover { transform: translateY(-2px); box-shadow: 0 7px 16px #10161b14; }
.button:hover svg { transform: translateX(4px); }
.theme-card-copy .button:hover { transform: none; }
.modal-close:hover,.listen-button:hover,.mobile-menu:hover { background: var(--color-accent); }
.footer-bottom button:hover { color: var(--color-focus); transform: translateY(-2px); }
}
.button:active,button:not(:disabled):active { transform: scale(.98); box-shadow: none; }
@media (prefers-reduced-motion:reduce){.button:hover,.button:active,button:not(:disabled):active,.button:hover svg,.theme-photo-card:hover>img,.theme-photo-card:focus-within>img,.benefit-content>a:hover { transform: none; }
}
.course-detail .button { margin-top: auto; min-height: 48px; font-size: 14px; white-space: normal; }
.course-detail .button svg { width: 18px; height: 18px; flex-shrink: 0; }
@media (max-width:600px){.course-detail .button { width: 100%; }
}

.site-header,.site-footer{color:var(--color-ink)}.site-header .button,.site-footer .button{letter-spacing:normal}.site-footer h3{letter-spacing:normal}.site-header svg{fill:none}.civic-dialog{width:min(620px,calc(100% - 32px));max-height:85vh;overflow:auto;border-radius:24px;padding:36px}.site-footer{background:var(--color-white)}.site-header .button-outline{color:var(--color-ink)}

.course-content{min-height:420px}.course-content h3{overflow-wrap:break-word}.course-brand{margin-bottom:28px}.course-meta{flex-wrap:wrap}.course-meta .button{white-space:normal}.path-list li{grid-template-columns:minmax(0,1fr) 90px}.course-track{scroll-padding-inline:24px}.site-footer .brand{letter-spacing:1px}.site-header{margin-bottom:28px}@media(max-width:760px){.course-content{min-height:360px}.path-list li{grid-template-columns:1fr}.course-content h3{font-size:27px}}