:root {
      color-scheme: light;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      font-synthesis: none;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      --ink: #343330;
      --muted: #45462a;
      --accent: #7e5920;
      --accent-hover: #45462a;
      --paper: #ffffff;
      --surface: #f5f4ee;
      --soft: #ebece8;
      --line: #d5d4c9;
      --deep-line: #96947d;
      --on-panel: #f5f4ee;
      --action: #ffa737;
      --detail: #dc851f;
      --header-offset: 92px;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: var(--header-offset); -webkit-text-size-adjust: 100%; }
    body { margin: 0; min-width: 320px; color: var(--ink); background: var(--paper); }
    h1, h2, h3, h4 { overflow-wrap: anywhere; }
    a { color: var(--accent); text-underline-offset: .17em; }
    :focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
    :where([id], a, button, summary, input, select, textarea) { scroll-margin-top: 16px; scroll-margin-bottom: 16px; }
    :target { scroll-margin-top: 20px; }
    .container { width: min(100% - 80px, 1200px); margin-inline: auto; }
    .skip-link { position: fixed; z-index: 200; top: -100px; left: 20px; padding: 12px 18px; background: var(--accent); color: #fff; }
    .skip-link:focus { top: 16px; }
    .site-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--line); background: var(--paper); }
    .header-inner { min-height: 76px; display: flex; align-items: center; gap: 24px; }
    .brand { display: inline-flex; min-height: 44px; align-items: center; gap: 12px; flex: none; color: var(--ink); font-size: 1.95rem; font-weight: 760; letter-spacing: -.065em; line-height: 1; text-decoration: none; }
    .brand-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
    .brand-mark { display: block; flex: none; width: 42px; height: 42px; }
    .site-header.is-compact .header-inner { min-height: 64px; }
    .site-header.is-compact .brand { font-size: 1.75rem; }
    .site-header.is-compact .brand-mark { width: 34px; height: 34px; }
    .brand:hover { color: var(--accent-hover); }
    .header-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
    .header-nav a { position: relative; display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; padding-inline: 12px; border-radius: 4px; color: var(--muted); font-size: .9rem; font-weight: 650; text-decoration: none; }
    .header-nav a::after { content: ""; position: absolute; right: 12px; bottom: 5px; left: 12px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; }
    .header-nav a:hover { color: var(--accent); background: var(--surface); }
    .header-nav a:hover::after, .header-nav a:focus-visible::after { transform: scaleX(1); }
    .header-nav a[aria-current="page"] { color: var(--ink); background: var(--surface); font-weight: 750; }
    .header-nav a[aria-current="page"]::after { height: 3px; background: var(--accent); transform: scaleX(1); }
    .header-guide { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px; margin-left: 12px; padding: 8px 16px; border: 1px solid var(--action); border-radius: 4px; background: var(--action); color: var(--ink); font-size: .9rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
    .header-guide:hover { border-color: var(--ink); background: var(--action); }
    .header-actions { display: flex; align-items: center; gap: 8px; margin-left: 12px; }
    .header-actions .header-guide { margin-left: 0; }
    .header-download { border-color: var(--line); background: transparent; }
    .header-download:hover { background: var(--surface); }
    .arrow { display: inline-block; }

    .hero { position: relative; overflow: hidden; background: var(--soft); }
    .hero-inner { display: flex; align-items: center; min-height: min(760px, calc(100svh - 76px)); padding-block: 58px; }
    .hero-copy { position: relative; z-index: 1; width: 56%; max-width: 690px; padding-right: clamp(24px, 4vw, 68px); }
    .eyebrow { margin: 0; color: var(--accent); font-size: .76rem; font-weight: 750; letter-spacing: .13em; line-height: 1.5; text-transform: uppercase; }
    .hero h1 { margin: 14px 0 0; color: var(--ink); font-size: clamp(5.2rem, 10vw, 9rem); font-weight: 760; letter-spacing: -.085em; line-height: .94; }
    .hero-promise { margin: 27px 0 0; max-width: 15ch; color: var(--ink); font-size: clamp(2.15rem, 3.65vw, 3.8rem); font-weight: 730; letter-spacing: -.055em; line-height: 1.11; text-wrap: balance; }
    .hero-lead { max-width: 52ch; margin: 23px 0 0; color: var(--muted); font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.58; }
    .hero-lead + .hero-lead { margin-top: 14px; }
    .hero .preview-note { max-width: 52ch; margin-top: 18px; font-size: .94rem; line-height: 1.55; }
    .oasis-name { margin: 16px 0 0; color: var(--accent); font-size: .91rem; font-weight: 500; line-height: 1.5; text-wrap: balance; }
    .hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 25px; margin-top: 24px; }
    .hero-actions .primary-link { margin: 0; }
    .text-link { color: var(--accent); font-size: .98rem; font-weight: 700; line-height: 1.5; text-decoration-thickness: 1px; }
    .hero-visual { position: absolute; inset: 0 0 0 auto; display: flex; flex-direction: column; width: 43%; margin: 0; background: var(--surface); }
    .hero-visual img { display: block; width: 100%; min-height: 0; flex: 1; object-fit: cover; object-position: 50% 65%; }
    .hero-visual figcaption { padding: 0 28px 18px; color: var(--muted); font-size: .85rem; line-height: 1.45; }
    .primary-link { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; gap: 18px; margin-top: 27px; padding: 12px 19px; border: 2px solid var(--action); border-radius: 4px; background: var(--action); color: var(--ink); font-size: .98rem; font-weight: 730; line-height: 1.3; text-decoration: none; }
    .primary-link:hover { border-color: var(--ink); background: var(--action); color: var(--ink); }

    .section { padding-block: clamp(76px, 8vw, 118px); }
    .section-intro { display: grid; grid-template-columns: 1fr minmax(270px, .7fr); gap: clamp(28px, 7vw, 108px); align-items: end; }
    h2 { margin: 17px 0 0; max-width: 19ch; color: var(--ink); font-size: clamp(2.35rem, 4.7vw, 4.5rem); font-weight: 750; letter-spacing: -.06em; line-height: 1.08; text-wrap: balance; }
    .section-summary { max-width: 45ch; margin: 0; color: var(--muted); font-size: clamp(1.05rem, 1.32vw, 1.2rem); line-height: 1.58; }
    .section-summary + .section-summary { margin-top: 16px; }
    .how { background: var(--paper); }
    .process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: clamp(48px, 6vw, 82px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
    .process li { min-width: 0; padding: 28px 34px 0 0; }
    .process li + li { padding-left: 34px; border-left: 1px solid var(--line); }
    .step-number { color: var(--accent); font-size: .8rem; font-weight: 750; letter-spacing: .11em; }
    .process h3 { margin: 27px 0 11px; color: var(--accent); font-size: clamp(1.45rem, 2vw, 2rem); font-weight: 750; letter-spacing: -.04em; line-height: 1.14; }
    .process p { max-width: 34ch; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.58; }
    .purpose { background: var(--paper); }
    .purpose .process { border-color: var(--detail); border-top-width: 3px; }
    .purpose .process li + li { border-color: var(--deep-line); }
    .ambition { background: var(--soft); }
    .ambition .process { border-color: var(--deep-line); }
    .ambition .process li + li { border-color: var(--deep-line); }
    .evidence-note { max-width: 86ch; margin: 29px 0 0; padding-left: 20px; border-left: 4px solid var(--detail); color: var(--muted); font-size: 1rem; line-height: 1.65; }
    .ambition .later-note { max-width: 72ch; }
    .use-cases { margin-top: clamp(54px, 7vw, 92px); }
    .use-cases h3 { margin: 10px 0 0; color: var(--accent); font-size: clamp(1.8rem, 3vw, 2.8rem); letter-spacing: -.045em; line-height: 1.12; }
    .use-cases-note { max-width: 65ch; margin: 15px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.6; }
    .use-case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; margin: 35px 0 0; padding: 0; list-style: none; }
    .use-case-grid li { padding-top: 18px; border-top: 1px solid var(--deep-line); }
    .use-case-grid h4 { margin: 0 0 9px; color: var(--accent); font-size: 1.25rem; letter-spacing: -.025em; }
    .use-case-grid p { max-width: 57ch; margin: 0; color: var(--ink); font-size: .98rem; line-height: 1.6; }
    .purpose-check { display: grid; grid-template-columns: minmax(220px, .6fr) 1fr; gap: clamp(24px, 6vw, 90px); align-items: start; margin-top: clamp(54px, 7vw, 92px); padding-top: 25px; border-top: 3px solid var(--detail); }
    .purpose-check h3 { margin: 0; max-width: 17ch; color: var(--accent); font-size: clamp(1.55rem, 2.3vw, 2.25rem); letter-spacing: -.04em; line-height: 1.17; }
    .purpose-check p { max-width: 65ch; margin: 0; color: var(--ink); font-size: clamp(1rem, 1.25vw, 1.13rem); line-height: 1.62; }

    .box { background: var(--soft); color: var(--ink); }
    .box .eyebrow { color: var(--accent); }
    .box h2 { color: var(--ink); }
    .box .section-summary, .box .later-note { color: var(--muted); }
    .box-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(45px, 8vw, 130px); margin-top: clamp(50px, 6vw, 88px); }
    .box-column h3 { margin: 0 0 20px; color: var(--ink); font-size: clamp(1.4rem, 2.2vw, 2.1rem); letter-spacing: -.035em; }
    .box-column > p { max-width: 42ch; margin: 0 0 22px; color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
    .inventory { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--deep-line); }
    .inventory li { display: grid; grid-template-columns: minmax(115px, .52fr) 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--deep-line); }
    .inventory strong { color: var(--ink); font-size: 1.05rem; line-height: 1.4; }
    .inventory span { color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
    .box-footnote { margin: 38px 0 0; padding-top: 20px; border-top: 1px solid var(--deep-line); color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
    .box-models { margin-top: clamp(52px, 7vw, 90px); padding-top: 34px; border-top: 3px solid var(--detail); }
    .box-models > h3 { margin: 12px 0 16px; font-size: clamp(1.8rem, 3vw, 2.8rem); letter-spacing: -.045em; line-height: 1.12; }
    .models-intro { max-width: 75ch; margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
    .box-models .process { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; margin-top: 34px; border-color: var(--deep-line); }
    .box-models .process li + li { border-color: var(--deep-line); }
    .box-models .process li:nth-child(odd) { padding-left: 0; border-left: 0; }
    .box-models .process li:nth-child(n+3) { border-top: 1px solid var(--deep-line); }
    .box-models .step-number, .box a { color: var(--accent); }
    .box .primary-link { color: var(--ink); }
    .box-models h4 { margin: 20px 0 14px; font-size: clamp(1.25rem, 1.7vw, 1.65rem); letter-spacing: -.025em; line-height: 1.2; }
    .box-models h4 a { color: var(--ink); text-decoration-thickness: 1px; }
    .box-models .process p { max-width: 50ch; color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
    .box-models .process p + p { margin-top: 13px; }
    .box :focus-visible { outline-color: var(--accent); }

    .library { background: var(--paper); }
    .library-layout { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); gap: clamp(48px, 8vw, 130px); }
    .library h2 { max-width: 14ch; }
    .library-intro { max-width: 42ch; margin: 25px 0 0; color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
    .shelf-list { margin: 4px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
    .shelf-list li { display: grid; grid-template-columns: minmax(150px, .7fr) 1fr; gap: 28px; padding: 23px 0; border-bottom: 1px solid var(--line); }
    .shelf-list strong { color: var(--accent); font-size: 1.1rem; line-height: 1.3; }
    .shelf-list p { margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
    .later-note, .body-copy { max-width: 74ch; margin: 22px 0 0; color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
    .catalogue { margin-top: 26px; border: 1px solid var(--line); border-radius: 6px; }
    .catalogue summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 22px; color: var(--accent); cursor: pointer; font-size: 1.02rem; font-weight: 750; list-style: none; }
    .catalogue summary::-webkit-details-marker { display: none; }
    .catalogue summary::after { content: "+"; flex: none; font-size: 1.5rem; font-weight: 400; line-height: 1; }
    .catalogue[open] summary { border-bottom: 1px solid var(--line); }
    .catalogue[open] summary::after { content: "−"; }
    .catalogue-body { padding: 22px; }
    .catalogue-body > p { margin: 0 0 25px; color: var(--muted); font-size: .94rem; line-height: 1.55; }
    .catalogue-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
    .catalogue-group h3 { margin: 0 0 8px; color: var(--accent); font-size: 1.07rem; letter-spacing: -.02em; line-height: 1.3; }
    .catalogue-group p { margin: 0 0 15px; color: var(--muted); font-size: .9rem; line-height: 1.5; }
    .catalogue-group ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
    .catalogue-group li { padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: .92rem; line-height: 1.4; }
    .model-note { margin-top: 38px; padding: 28px 30px; border-left: 4px solid var(--detail); background: var(--surface); }
    .model-note h3 { margin: 8px 0 11px; color: var(--accent); font-size: 1.35rem; letter-spacing: -.025em; }
    .model-note p:not(.eyebrow) { margin: 0 0 16px; color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
    .model-note p:last-child { margin-bottom: 0; }

    .limits { background: var(--surface); }
    .limits h2 { max-width: 15ch; }
    .testing-intro { max-width: 65ch; margin: 25px 0 0; color: var(--muted); font-size: 1.08rem; line-height: 1.6; }
    .limits-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: clamp(45px, 5vw, 72px); }
    .limit { padding-top: 21px; border-top: 3px solid var(--detail); }
    .limit h3 { margin: 0 0 13px; color: var(--accent); font-size: 1.2rem; font-weight: 750; }
    .limit p { margin: 0; color: var(--muted); font-size: .98rem; line-height: 1.6; }
    .limit p + p { margin-top: 14px; }

    .site-footer { border-top: 1px solid var(--line); background: var(--paper); }
    .footer-inner { display: grid; grid-template-columns: 1.3fr .7fr; align-items: end; gap: 48px; padding-block: 68px 55px; }
    .footer-inner h2 { max-width: 16ch; margin: 16px 0 0; color: var(--accent); font-size: clamp(2.2rem, 4vw, 4rem); }
    .footer-inner > div:last-child { padding-bottom: 5px; }
    .footer-inner p:not(.eyebrow) { max-width: 45ch; margin: 0 0 18px; color: var(--muted); font-size: 1.02rem; line-height: 1.6; }
    .footer-base { display: flex; justify-content: space-between; gap: 20px; padding-block: 18px 26px; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; }
    .footer-base span:last-child { text-align: right; }

    .live-screen { display: grid; grid-template-columns: minmax(210px, .46fr) minmax(0, 1fr); column-gap: clamp(28px, 5vw, 74px); row-gap: 12px; align-items: start; margin: 70px 0 0; padding-top: 28px; border-top: 3px solid var(--detail); }
    .live-screen h3 { margin: 14px 0; color: var(--accent); font-size: clamp(1.65rem, 2.4vw, 2.5rem); letter-spacing: -.045em; line-height: 1.16; }
    .live-screen p:not(.eyebrow) { margin: 0 0 16px; color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
    .preview-capture { min-width: 0; margin: 0; }
    .live-screen .image-link { display: block; border: 1px solid var(--line); background: var(--surface); }
    .live-screen .image-link:hover { border-color: var(--accent); }
    .live-screen img { display: block; width: 100%; height: auto; }
    .live-screen figcaption { margin: 12px 0 0; color: var(--muted); font-size: .875rem; line-height: 1.6; }
    .library-screen { margin: 32px 0 0; }
    .library-screen .image-link { display: block; border: 1px solid var(--line); background: var(--surface); }
    .library-screen .image-link:hover { border-color: var(--accent); }
    .library-screen img { display: block; width: 100%; height: auto; }
    .library-screen figcaption { margin-top: 12px; color: var(--muted); font-size: .875rem; line-height: 1.6; }
    .evidence-screen { max-width: 960px; margin: 40px auto 0; }
    .evidence-screen .image-link { display: block; border: 1px solid var(--line); background: var(--paper); }
    .evidence-screen .image-link:hover { border-color: var(--accent); }
    .evidence-screen img { display: block; width: 100%; height: auto; }
    .evidence-screen figcaption { max-width: 86ch; margin-top: 12px; color: var(--muted); font-size: .875rem; line-height: 1.6; }
    .preview-note { padding-top: 15px; border-top: 1px solid var(--line); }

    @media (max-width: 980px) {
      .hero-inner { min-height: 0; padding-block: 64px 54px; }
      .hero-copy { width: 100%; max-width: 720px; padding-right: 0; }
      .hero-visual { position: relative; width: 100%; height: auto; min-height: 0; }
      .hero-visual img { width: min(100%, 650px); max-height: 610px; margin-inline: auto; }
      .hero-visual figcaption { padding: 0 20px 20px; text-align: center; }
    }
    @media (max-width: 900px) {
      .inventory li { grid-template-columns: 1fr; gap: 4px; }
      .shelf-list li { grid-template-columns: 1fr; gap: 7px; }
    }
    @media (max-width: 760px) {
      :root { --header-offset: 138px; }
      .container { width: min(100% - 38px, 1200px); }
      .header-inner { min-height: 108px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; padding-block: 8px; }
      .brand { gap: 8px; font-size: 1.7rem; }
      .brand-mark { width: 32px; height: 32px; }
      .site-header.is-compact .header-inner { min-height: 96px; row-gap: 0; padding-block: 4px; }
      .site-header.is-compact .brand { font-size: 1.6rem; }
      .site-header.is-compact .brand-mark { width: 28px; height: 28px; }
      .header-nav { order: 2; display: flex; flex-wrap: wrap; width: 100%; gap: 0 8px; margin-left: 0; }
      .header-nav a { flex: 1 0 auto; max-width: 100%; min-width: 44px; padding-inline: 3px; font-size: .86rem; text-align: center; line-height: 1.35; overflow-wrap: anywhere; }
      .header-actions { order: 1; max-width: 100%; margin-left: 0; }
      .header-actions .header-guide { min-width: 0; white-space: normal; text-align: center; }
      .header-guide { margin-left: 0; font-size: .86rem; padding-inline: 11px; }
      .hero-inner { min-height: 0; padding-block: 51px 46px; }
      .hero-copy { width: 100%; max-width: 620px; padding-right: 0; }
      .hero h1 { margin-top: 14px; font-size: clamp(4.6rem, 16vw, 7rem); }
      .hero-promise { max-width: 18ch; margin-top: 24px; font-size: clamp(2.1rem, 7.2vw, 3.4rem); }
      .hero-lead { max-width: 50ch; }
      .hero-visual img { width: min(100%, 600px); max-height: 570px; margin-inline: auto; }
      .section-intro, .box-grid, .library-layout { grid-template-columns: 1fr; }
      .process { grid-template-columns: 1fr; }
      .box-models .process { grid-template-columns: 1fr; row-gap: 0; }
      .process li { padding: 22px 0 24px; }
      .process li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
      .process h3 { margin-top: 11px; }
      .process p { max-width: 52ch; }
      .use-case-grid { grid-template-columns: 1fr; gap: 23px; }
      .purpose-check { grid-template-columns: 1fr; }
      .box-grid, .library-layout { gap: 48px; }
      .inventory li { grid-template-columns: minmax(115px, .5fr) 1fr; gap: 20px; }
      .catalogue-groups { grid-template-columns: 1fr; gap: 28px; }
      .limits-grid { grid-template-columns: 1fr; gap: 31px; }
      .footer-inner { grid-template-columns: 1fr; gap: 26px; padding-block: 55px 42px; }
      .footer-base { flex-direction: column; gap: 4px; }
      .footer-base span:last-child { text-align: left; }
      .live-screen { grid-template-columns: 1fr; margin-top: 48px; }
    }
    @media (max-width: 480px) {
      .hero-inner { padding-top: 39px; }
      .hero h1 { font-size: clamp(4.2rem, 16vw, 5rem); }
      .hero-promise { font-size: clamp(2rem, 7.3vw, 2.45rem); }
      .hero-actions { align-items: flex-start; flex-direction: column; }
      .hero-actions .primary-link { width: 100%; }
      .inventory li { grid-template-columns: 1fr; gap: 4px; }
      .model-note { padding: 24px 22px; }
    }
    @keyframes appear { from { transform: translateY(8px); } to { transform: translateY(0); } }
    /* Entrances start only when content enters view. Nothing waits hidden. */
    @keyframes content-arrive { from { opacity: .35; transform: translateY(12px); } to { opacity: 1; transform: none; } }
    @keyframes milestone-arrive { from { transform: scale(.92); } to { transform: scale(1); } }
    @keyframes connector-arrive { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
    @media (prefers-reduced-motion: no-preference) {
      .header-inner { transition: min-height .18s ease, padding-top .18s ease, row-gap .18s ease; }
      .brand { transition: font-size .18s ease; }
      .brand-mark { transition: width .18s ease, height .18s ease; }
      .hero-visual img { animation: appear .8s ease-out .12s both; }
      .is-entering { animation: content-arrive .7s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0ms) both; }
      .roadmap-step.is-entering .roadmap-number { animation: milestone-arrive .7s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0ms) both; }
      .roadmap-step.is-entering::before { transform-origin: top; animation: connector-arrive .7s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0ms) both; }
      .is-entering:focus-within, .is-entering:focus-within .roadmap-number, .is-entering:focus-within::before { animation: none; }
      .header-nav a { transition: color .18s ease, background-color .18s ease; }
      .header-nav a::after { transition: transform .2s ease; }
      .primary-link, .header-guide { transition: background .2s ease, border-color .2s ease, transform .2s ease; }
      .primary-link:hover, .header-guide:hover { transform: translateY(-2px); }
      .arrow, .text-link span { display: inline-block; transition: translate .2s ease; }
      a:hover .arrow, a:focus-visible .arrow, .text-link:hover span, .text-link:focus-visible span { translate: 3px 0; }
      a[href^="#"]:hover .arrow, a[href^="#"]:focus-visible .arrow { translate: 0 3px; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .arrow, .header-nav a, .header-nav a::after { transition: none; }
      .is-entering, .roadmap-number, .roadmap-step::before { animation: none !important; }
    }

/* Optional evidence is a native disclosure: readable and usable without JS. */
.supporting-detail { margin-top: 30px; border-block: 1px solid var(--deep-line); }
.supporting-detail > summary { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; color: var(--accent); cursor: pointer; font-weight: 700; line-height: 1.4; list-style: none; }
.supporting-detail > summary::-webkit-details-marker { display: none; }
.supporting-detail > summary::after { content: "+"; flex: none; font-size: 1.5rem; font-weight: 400; }
.supporting-detail[open] > summary::after { content: "−"; }
.supporting-detail > .reading-copy { margin-top: 12px; padding-bottom: 12px; }
.supporting-detail > .evidence-list { margin-top: 12px; padding-bottom: 24px; }
.supporting-detail > p { max-width: 74ch; margin: 0 0 16px; color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
.supporting-detail > summary + p { margin-top: 12px; }
.supporting-detail > p:last-child { margin-bottom: 24px; }
@media print {
  .reveal-ready, .roadmap-number, .roadmap-step::before { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
}

/* Development page and its homepage invitation share the site palette. */
.development-invitation { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-top: 42px; padding-top: 30px; border-top: 3px solid var(--detail); }
.development-invitation h3 { margin: 0 0 12px; color: var(--accent); font-size: 1.5rem; line-height: 1.2; letter-spacing: -.03em; }
.development-invitation p { max-width: 63ch; margin: 0; color: var(--muted); font-size: 1.08rem; line-height: 1.6; }
.development-invitation .primary-link { flex: none; min-height: 64px; margin: 0; padding-inline: 25px; font-size: 1.05rem; }
.development-hero { padding-block: 70px 56px; background: var(--soft); }
.development-hero h1 { max-width: 17ch; margin: 23px 0 24px; color: var(--ink); font-size: clamp(2.8rem, 6.8vw, 6.4rem); font-weight: 750; line-height: 1.03; letter-spacing: -.065em; text-wrap: balance; }
.development-lead + .development-lead { margin-top: 16px; }
.development-lead { max-width: 64ch; margin: 0; color: var(--ink); font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.55; }
.development-status { display: flex; flex-wrap: wrap; gap: 8px 25px; margin: 32px 0 0; padding: 20px 0 0; border-top: 1px solid var(--deep-line); color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
.page-index { border-bottom: 1px solid var(--line); background: var(--paper); }
.page-index .container { display: flex; flex-wrap: wrap; gap: 4px 30px; padding-block: 10px; }
.page-index a { display: inline-flex; min-height: 44px; align-items: center; color: var(--accent); font-size: .94rem; font-weight: 650; text-decoration: none; }
.page-index a:hover { text-decoration: underline; }
.development-section { padding-block: clamp(60px, 7vw, 94px); }
.development-section h2 { font-size: clamp(2.1rem, 3.8vw, 3.7rem); }
.development-section .section-intro { align-items: start; }
.development-section .process { margin-top: 42px; }
.roadmap { background: var(--paper); }
.roadmap-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px clamp(32px, 6vw, 84px); align-items: start; }
.roadmap-intro h2 { max-width: 15ch; }
.roadmap-summary { max-width: 40ch; margin: 24px 0 0; color: var(--muted); font-size: 1.08rem; line-height: 1.65; }
.roadmap-position { margin-top: 32px; padding-top: 24px; border-top: 3px solid var(--detail); }
.roadmap-current { margin: 12px 0 16px; color: var(--ink); font-size: clamp(1.35rem, 2.1vw, 1.8rem); line-height: 1.35; letter-spacing: -.025em; }
.roadmap-position > p:not([class]) { max-width: 38ch; margin: 0 0 18px; color: var(--muted); font-size: 1rem; line-height: 1.65; }
.roadmap-date { margin: 24px 0 0; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.roadmap-list { margin: 0; padding: 0; list-style: none; }
.roadmap-step { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 20px; padding: 25px 26px; background: var(--surface); }
.roadmap-step + .roadmap-step { margin-top: 8px; }
.roadmap-step::before { content: ""; position: absolute; z-index: 0; top: 66px; bottom: -34px; left: 46px; width: 2px; background: var(--deep-line); }
.roadmap-step:last-child::before { display: none; }
.roadmap-number { position: relative; z-index: 1; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--deep-line); border-radius: 50%; background: var(--paper); color: var(--muted); font-size: .9rem; font-weight: 750; }
.roadmap-state { margin: 0 0 8px; color: var(--muted); font-size: .73rem; font-weight: 750; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; }
.roadmap-step h3 { margin: 0 0 11px; color: var(--ink); font-size: clamp(1.22rem, 1.8vw, 1.5rem); line-height: 1.2; letter-spacing: -.03em; }
.roadmap-step div > p:last-child { max-width: 51ch; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.roadmap-step--complete { background: var(--soft); }
.roadmap-step--complete .roadmap-number { border-color: var(--muted); background: var(--muted); color: var(--paper); }
.roadmap-step--current { background: var(--action); }
.roadmap-step--current .roadmap-number { border: 2px solid var(--ink); background: var(--ink); color: var(--action); }
.roadmap-step--current .roadmap-state, .roadmap-step--current div > p:last-child { color: var(--ink); }
.roadmap-note { grid-column: 1 / -1; max-width: 83ch; margin: 0; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 1rem; line-height: 1.65; }
@media (max-width: 980px) {
  .roadmap-layout { grid-template-columns: 1fr; gap: 32px; }
  .roadmap-intro h2 { max-width: 19ch; }
}
@media (max-width: 760px) {
  .roadmap-position { margin-top: 26px; padding-top: 20px; }
  .roadmap-step { grid-template-columns: 36px minmax(0, 1fr); gap: 15px; padding: 23px 18px; }
  .roadmap-number { width: 36px; height: 36px; font-size: .84rem; }
  .roadmap-step::before { top: 58px; bottom: -32px; left: 35px; }
}
.reading-copy { max-width: 74ch; margin: 28px 0 0; color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
.reading-copy p { margin: 0 0 18px; }
.context-note { max-width: 74ch; margin: 30px 0 0; padding-left: 20px; border-left: 3px solid var(--detail); color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
.scenario { margin-top: 45px; padding: clamp(25px, 4.5vw, 52px); background: var(--action); color: var(--ink); }
.scenario .eyebrow { color: var(--ink); }
.scenario a { color: var(--ink); text-decoration: underline; }
.scenario :focus-visible { outline-color: var(--ink); }
.scenario h3 { max-width: 25ch; margin: 18px 0; color: var(--ink); font-size: clamp(1.75rem, 3.2vw, 3rem); line-height: 1.13; letter-spacing: -.045em; }
.scenario p:not(.eyebrow) { max-width: 76ch; margin: 0 0 18px; color: var(--ink); font-size: 1.05rem; line-height: 1.65; }
.scenario p:last-child { margin-bottom: 0; }
.task-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px 60px; margin-top: 40px; }
.task { padding-top: 22px; border-top: 3px solid var(--detail); }
.task h3, .task h4 { margin: 0 0 17px; color: var(--accent); font-size: 1.5rem; line-height: 1.2; letter-spacing: -.03em; }
.task dl { margin: 0; }
.task dt { margin-top: 14px; color: var(--accent); font-size: .83rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.task dd { max-width: 57ch; margin: 5px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.tinted { background: var(--surface); }
.soft-tinted { background: var(--soft); }
.evidence-group { margin-top: 48px; }
.evidence-group > h3 { margin: 0 0 16px; color: var(--accent); font-size: clamp(1.65rem, 2.8vw, 2.2rem); line-height: 1.2; letter-spacing: -.035em; }
.evidence-intro { max-width: 76ch; margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
.evidence-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 50px; margin-top: 42px; }
.evidence-item { padding-top: 23px; border-top: 1px solid var(--deep-line); }
.evidence-item h3, .evidence-item h4 { margin: 0 0 14px; color: var(--accent); font-size: 1.4rem; line-height: 1.2; letter-spacing: -.025em; }
.evidence-item p { margin: 0 0 14px; color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
.source-quote { margin: 20px 0; }
.source-quote blockquote { margin: 0; }
.source-quote blockquote p { color: var(--ink); font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.45; letter-spacing: -.015em; }
.source-quote figcaption { margin-top: 12px; color: var(--muted); font-size: .875rem; line-height: 1.6; }
.source-quote figcaption a { font-size: inherit; }
.source-quote cite { font-style: normal; }
.evidence-item .source-credit { margin: 12px 0 0; font-size: .875rem; }
.evidence-item .source-credit a { font-size: inherit; }
.evidence-item .evidence-limit { padding-left: 14px; border-left: 3px solid var(--line); font-size: 1.05rem; }
.evidence-item a { font-size: .92rem; font-weight: 650; }
.evidence-item p a { font-size: inherit; }
.pilot-path { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 42px 0 0; padding: 0; list-style: none; }
.pilot-path li { padding-top: 20px; border-top: 3px solid var(--detail); }
.pilot-path h3 { margin: 12px 0; color: var(--accent); font-size: 1.23rem; line-height: 1.2; }
.pilot-path p { margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
.measure-list { margin: 36px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.measure-list li { display: grid; grid-template-columns: minmax(200px, .65fr) 1fr; gap: 30px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.measure-list h3, .measure-list h4 { margin: 0; color: var(--accent); font-size: 1.14rem; line-height: 1.4; }
.measure-list p { max-width: 65ch; margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
.measure-list .response-next { margin-top: 12px; }
.goal-list li > div { min-width: 0; }
.goal-list .goal-reference { margin-top: 12px; font-size: .86rem; line-height: 1.6; }
.goal-group { margin-top: 48px; }
.goal-group + .goal-group { margin-top: 56px; padding-top: 32px; border-top: 3px solid var(--detail); }
.goal-group-intro { display: grid; grid-template-columns: minmax(200px, .65fr) 1fr; gap: 30px; align-items: start; }
.goal-group-intro h3 { margin: 0; color: var(--ink); font-size: clamp(1.55rem, 2.6vw, 2.15rem); font-weight: 750; letter-spacing: -.035em; line-height: 1.2; text-wrap: balance; }
.goal-group-intro p { max-width: 65ch; margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
.goal-group .goal-list { margin-top: 24px; }
.oasis-examples { max-width: 82ch; margin-top: 44px; }
.oasis-example { min-width: 0; padding-top: 28px; border-top: 3px solid var(--detail); }
.oasis-example + .oasis-example { margin-top: 52px; }
.oasis-example h3 { margin: 0 0 20px; color: var(--accent); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; letter-spacing: -.03em; }
.oasis-example p, .oasis-example li { color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
.oasis-example > .eyebrow { margin-bottom: 12px; color: var(--accent); font-size: .76rem; line-height: 1.5; }
.oasis-example .answer-label { margin: 24px 0 8px; color: var(--accent); font-size: .82rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.oasis-example .oasis-question { margin: 0; color: var(--ink); font-size: 1.15rem; line-height: 1.55; font-weight: 650; overflow-wrap: anywhere; }
.oasis-answer { margin: 0; }
.oasis-answer blockquote { margin: 0; padding-left: 20px; border-left: 3px solid var(--detail); }
.oasis-answer blockquote > :first-child { margin-top: 0; }
.oasis-answer blockquote > :last-child { margin-bottom: 0; }
.oasis-answer ul, .oasis-answer ol { margin: 0; padding-left: 22px; }
.oasis-answer li + li { margin-top: 16px; }
.oasis-answer li p { margin: 0; }
.oasis-answer li p + p { margin-top: 4px; }
.oasis-answer figcaption { margin-top: 12px; color: var(--muted); font-size: .875rem; line-height: 1.6; }
.oasis-example a, .oasis-answer blockquote { overflow-wrap: anywhere; }
.oasis-source-list { margin: 8px 0 0; padding-left: 22px; }
.oasis-source-list li + li { margin-top: 7px; }
.oasis-example .answer-check { margin-top: 20px; }
.oasis-answer-details { margin-top: 24px; border-block: 1px solid var(--deep-line); }
.oasis-answer-details > summary { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; color: var(--accent); cursor: pointer; font-size: 1.05rem; font-weight: 700; line-height: 1.5; list-style: none; }
.oasis-answer-details > summary::-webkit-details-marker { display: none; }
.oasis-answer-details > summary::after { content: "+"; flex: none; font-size: 1.5rem; font-weight: 400; }
.oasis-answer-details[open] > summary::after { content: "−"; }
.oasis-answer-content { padding: 12px 0 24px; }
.oasis-answer-content > .answer-label:first-child { margin-top: 0; }
.development-footer { padding-block: 60px; background: var(--surface); color: var(--ink); }
.development-footer .eyebrow { color: var(--accent); }
.development-footer h2 { max-width: 20ch; color: var(--ink); font-size: clamp(2.2rem, 4.5vw, 4rem); }
.development-footer p:not(.eyebrow) { max-width: 65ch; margin: 25px 0 0; color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
.development-footer .primary-link { border-color: var(--action); background: var(--action); color: var(--ink); }
.development-footer a:not(.primary-link) { color: var(--accent); }
.development-footer .primary-link:hover { border-color: var(--ink); background: var(--action); }
.development-footer :focus-visible { outline-color: var(--accent); }
.development .footer-base { padding-top: 22px; }
@media (max-width: 980px) {
  .development-invitation { align-items: flex-start; flex-direction: column; gap: 24px; }
  .pilot-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .section, .development-section { padding-block: 48px; }
  .hero-visual figcaption { padding-bottom: 12px; }
  .development-hero { padding-block: 48px 38px; }
  .development-status { flex-direction: column; }
  .task-grid, .evidence-list, .pilot-path { grid-template-columns: 1fr; }
  .measure-list li { grid-template-columns: 1fr; gap: 9px; }
  .goal-group-intro { grid-template-columns: 1fr; gap: 12px; }
  .development-invitation .primary-link { width: 100%; }
  .development-hero h1 { max-width: 16ch; }
}