:root {
  --a4-ink: #152b39;
  --a4-muted: #587180;
  --a4-teal: #00898a;
  --a4-teal-dark: #00676a;
  --a4-teal-soft: #dff4f0;
  --a4-orange: #e97438;
  --a4-orange-soft: #fff0e7;
  --a4-yellow: #f6bd41;
  --a4-line: #d6e4e3;
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; background: #f5f8f7; }
.a4-hero-grid > *, .section-heading > *, .language-evidence > *, .live-grid > *, .methodology-grid > * { min-width: 0; }
.a4-hero { padding: 68px 0 92px; background: radial-gradient(circle at 93% 10%, rgba(246,189,65,.22), transparent 22rem), radial-gradient(circle at 8% 92%, rgba(0,137,138,.13), transparent 28rem), #f5f8f7; }
.a4-hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr); gap: 66px; align-items: center; }
.a4-hero .breadcrumb { display: inline-flex; margin-bottom: 38px; }
.a4-meta { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }
.a4-meta span { padding: 8px 11px; border: 1px solid var(--a4-line); border-radius: 999px; background: rgba(255,255,255,.82); color: var(--a4-teal-dark); font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.a4-hero h1 { max-width: 840px; margin: 0; color: var(--a4-ink); font-size: clamp(3.2rem, 6.6vw, 6.6rem); line-height: .91; letter-spacing: -.078em; }
.a4-hero h1 em { color: var(--a4-teal); font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
.a4-lead { max-width: 780px; margin: 30px 0 0; color: var(--a4-muted); font-size: 1.16rem; line-height: 1.68; }
.hero-actions, .live-actions, .method-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }
.a4-language-switch { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid var(--a4-line); border-radius: 999px; background: rgba(255,255,255,.82); }
.main-nav .a4-language-switch .language-link { padding: 5px 8px; border: 0; border-radius: 999px; color: var(--a4-muted); font-size: .67rem; }
.main-nav .a4-language-switch .language-link[aria-current="page"] { background: var(--a4-teal); color: #fff; }
.decision-preview { position: relative; overflow: hidden; padding: 34px; border-radius: 30px; background: var(--a4-ink); box-shadow: 20px 22px 0 rgba(0,137,138,.12); color: #fff; }
.decision-preview::after { position: absolute; right: -80px; top: -90px; width: 250px; height: 250px; border: 48px solid rgba(246,189,65,.16); border-radius: 50%; content: ""; }
.decision-preview > * { position: relative; z-index: 1; }
.decision-preview > p { margin: 0 0 20px; color: var(--a4-yellow); font-size: .74rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.decision-preview > strong { display: block; margin-bottom: 28px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(4.2rem, 5vw, 5.4rem); font-style: italic; font-weight: 500; letter-spacing: -.075em; line-height: .8; white-space: nowrap; }
.preview-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.preview-facts div { padding: 13px 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; background: rgba(255,255,255,.07); }
.preview-facts b { display: block; font-size: 1.03rem; }
.preview-facts span { display: block; margin-top: 4px; color: #c7d8dc; font-size: .62rem; line-height: 1.3; }
.decision-preview > small { display: block; margin-top: 22px; color: #c7d8dc; line-height: 1.5; }

.a4-section { padding: 90px 0; }
.a4-section-white { background: #fff; }
.a4-section-dark { background: var(--a4-ink); color: #fff; }
.section-heading { display: grid; grid-template-columns: 1.15fr .85fr; gap: 70px; align-items: end; margin-bottom: 50px; }
.section-heading h2, .methodology-grid h2 { max-width: 760px; margin: 12px 0 0; color: var(--a4-ink); font-size: clamp(2.7rem, 5vw, 5rem); line-height: .95; letter-spacing: -.07em; }
.section-heading > p { max-width: 580px; margin: 0; color: var(--a4-muted); font-size: 1.1rem; line-height: 1.7; }
.a4-section-dark .section-heading h2, .a4-section-dark .section-heading > p { color: #fff; }
.a4-section-dark .section-heading > p { color: #c8d7db; }
.eyebrow-light { color: var(--a4-yellow) !important; }

.embedding-example { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 16px; align-items: center; }
.embedding-example article { min-height: 170px; padding: 26px; border: 1px solid var(--a4-line); border-radius: 23px; background: #f7faf9; }
.embedding-example article span { display: block; margin-bottom: 23px; color: var(--a4-teal-dark); font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.embedding-example article strong { color: var(--a4-ink); font-size: 1.24rem; line-height: 1.45; }
.embedding-example .vector-example { background: var(--a4-teal); border-color: var(--a4-teal); color: #fff; }
.embedding-example .vector-example span, .embedding-example .vector-example strong { color: #fff; }
.embedding-example .related { background: var(--a4-orange-soft); }
.embedding-step { min-width: 82px; text-align: center; }
.embedding-step span { display: block; color: var(--a4-orange); font-size: 2rem; font-weight: 900; }
.embedding-step small { color: var(--a4-muted); font-size: .66rem; font-weight: 800; line-height: 1.35; }
.plain-note { margin: 28px 0 0; padding: 20px 23px; border-left: 4px solid var(--a4-orange); background: var(--a4-orange-soft); color: var(--a4-muted); line-height: 1.65; }
.plain-note strong { color: var(--a4-ink); }

.criteria-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.criteria-grid article { min-height: 250px; padding: 28px; border: 1px solid var(--a4-line); border-radius: 22px; background: #fff; }
.criteria-grid article > span { color: var(--a4-orange); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; font-weight: 900; }
.criteria-grid h3 { margin: 44px 0 12px; color: var(--a4-ink); font-size: 1.25rem; letter-spacing: -.025em; }
.criteria-grid p { margin: 0; color: var(--a4-muted); font-size: .94rem; line-height: 1.65; }

.exploration-strip { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 18px; align-items: center; margin-bottom: 28px; }
.exploration-strip div { padding: 25px; border: 1px solid rgba(255,255,255,.14); border-radius: 19px; background: rgba(255,255,255,.07); }
.exploration-strip strong { display: block; color: var(--a4-yellow); font-family: Georgia, "Times New Roman", serif; font-size: 3rem; font-style: italic; line-height: 1; }
.exploration-strip span { display: block; margin-top: 8px; color: #d4e0e3; font-size: .8rem; font-weight: 800; }
.exploration-strip i { color: var(--a4-orange); font-size: 1.6rem; font-style: normal; }
.model-table-wrap { overflow-x: auto; border: 1px solid rgba(255,255,255,.13); border-radius: 22px; }
.model-table { width: 100%; border-collapse: collapse; min-width: 820px; }
.model-table th, .model-table td { padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.12); text-align: left; }
.model-table th { color: var(--a4-yellow); font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; }
.model-table td { color: #dbe5e8; font-size: .9rem; }
.model-table td:first-child { color: #fff; font-weight: 850; }
.model-table tr:last-child td { border-bottom: 0; }
.model-table tr.selected-model { background: rgba(0,137,138,.28); }
.model-table tr.best-model td:nth-child(4) { color: var(--a4-yellow); font-weight: 900; }
.model-reading { color: #b9cdd1 !important; font-size: .78rem !important; }
.technical-note { margin: 22px 0 0; color: #b9cdd1; font-size: .82rem; line-height: 1.6; }

.scenario-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.scenario-card { padding: 34px; border: 1px solid var(--a4-line); border-radius: 26px; }
.scenario-card.applied { background: var(--a4-teal-soft); }
.scenario-card.controlled { background: var(--a4-orange-soft); }
.scenario-head { display: flex; gap: 17px; align-items: flex-start; }
.scenario-head > span { display: grid; width: 50px; height: 50px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--a4-teal); color: #fff; font-size: 1.1rem; font-weight: 900; }
.controlled .scenario-head > span { background: var(--a4-orange); }
.scenario-head p { margin: 2px 0 4px; color: var(--a4-teal-dark); font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.scenario-head h3 { margin: 0; color: var(--a4-ink); font-size: 1.5rem; letter-spacing: -.04em; }
.scenario-card dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 30px 0 22px; }
.scenario-card dl div { padding: 16px; border-radius: 15px; background: rgba(255,255,255,.72); }
.scenario-card dt { color: var(--a4-muted); font-size: .67rem; font-weight: 800; }
.scenario-card dd { margin: 5px 0 0; color: var(--a4-ink); font-family: Georgia, "Times New Roman", serif; font-size: 2rem; font-style: italic; line-height: 1; }
.scenario-card > p { margin: 0; color: var(--a4-muted); font-size: .9rem; line-height: 1.6; }

.mode-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mode-card { padding: 28px; border: 1px solid var(--a4-line); border-radius: 23px; background: #fff; }
.mode-card.semantic, .mode-card.hybrid { border-color: transparent; background: var(--a4-teal); color: #fff; }
.mode-card.hybrid { background: var(--a4-ink); }
.mode-card span { color: var(--a4-muted); font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.mode-card.semantic span, .mode-card.hybrid span { color: #d1e5e6; }
.mode-card strong { display: block; margin: 25px 0 5px; color: var(--a4-ink); font-family: Georgia, "Times New Roman", serif; font-size: 4.8rem; font-style: italic; font-weight: 500; line-height: .8; }
.mode-card.semantic strong, .mode-card.hybrid strong { color: #fff; }
.mode-card small { color: var(--a4-muted); line-height: 1.4; }
.mode-card.semantic small, .mode-card.hybrid small { color: #d1e5e6; }
.mode-card b { display: block; margin-top: 24px; color: var(--a4-orange); font-size: .8rem; }
.mode-card.semantic b { color: var(--a4-yellow); }
.mode-card.hybrid b { color: #fff; }
.language-evidence { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center; margin-top: 62px; padding-top: 55px; border-top: 1px solid var(--a4-line); }
.language-evidence h3 { margin: 12px 0 18px; color: var(--a4-ink); font-size: 2rem; letter-spacing: -.05em; }
.language-evidence p:not(.eyebrow) { color: var(--a4-muted); line-height: 1.7; }
.language-bars { display: grid; gap: 15px; }
.language-row { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; }
.language-row > strong { color: var(--a4-ink); font-size: .82rem; }
.bar-pair { display: grid; gap: 6px; }
.bar-track { display: grid; grid-template-columns: 88px 1fr 38px; gap: 9px; align-items: center; }
.bar-track span { color: var(--a4-muted); font-size: .67rem; }
.bar-track i { display: block; height: 12px; min-width: 2px; border-radius: 999px; background: #b7c7cb; }
.bar-track.semantic i, .bar-track.hybrid i { background: var(--a4-teal); }
.bar-track.hybrid i { background: var(--a4-orange); }
.bar-track b { color: var(--a4-ink); font-size: .72rem; text-align: right; }

.a4-section-decision { background: #fff3eb; }
.decision-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.decision-card { padding: 34px; border-radius: 27px; }
.decision-card.quality { border: 1px solid var(--a4-line); background: #fff; }
.decision-card.selected { background: var(--a4-teal); color: #fff; box-shadow: 16px 18px 0 rgba(0,103,106,.12); }
.decision-card > p { margin: 0 0 12px; color: var(--a4-orange); font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.decision-card.selected > p { color: var(--a4-yellow); }
.decision-card h3 { margin: 0 0 30px; color: var(--a4-ink); font-size: clamp(2.1rem, 4vw, 3.4rem); letter-spacing: -.06em; }
.decision-card.selected h3 { color: #fff; }
.decision-card dl { margin: 0; }
.decision-card dl div { display: flex; justify-content: space-between; gap: 20px; padding: 15px 0; border-top: 1px solid var(--a4-line); }
.decision-card.selected dl div { border-color: rgba(255,255,255,.2); }
.decision-card dt { color: var(--a4-muted); font-size: .82rem; }
.decision-card.selected dt { color: #d4e8e8; }
.decision-card dd { margin: 0; color: var(--a4-ink); font-weight: 900; text-align: right; }
.decision-card.selected dd { color: #fff; }
.decision-conclusion { display: flex; gap: 24px; align-items: center; margin-top: 34px; padding: 30px; border-radius: 23px; background: var(--a4-ink); color: #fff; }
.decision-conclusion > span { display: grid; width: 60px; height: 60px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--a4-yellow); color: var(--a4-ink); font-size: 1.7rem; font-weight: 900; }
.decision-conclusion h3 { margin: 0 0 8px; color: #fff; font-size: 1.35rem; }
.decision-conclusion p { margin: 0; color: #d2dfe2; line-height: 1.65; }

.a4-section-live { background: var(--a4-teal-dark); color: #fff; }
.live-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 70px; align-items: center; }
.live-grid h2 { margin: 12px 0 22px; color: #fff; font-size: clamp(2.8rem, 5.5vw, 5.4rem); line-height: .94; letter-spacing: -.075em; }
.live-grid > div > p:not(.eyebrow) { max-width: 700px; color: #d2e3e4; font-size: 1.08rem; line-height: 1.72; }
.button-light { border-color: #fff; background: #fff; color: var(--a4-teal-dark); }
.button-light:hover, .button-light:focus-visible { background: var(--a4-yellow); border-color: var(--a4-yellow); color: var(--a4-ink); }
.text-link-light { color: #fff; font-size: .88rem; font-weight: 850; text-decoration: none; }
.live-card { padding: 32px; border: 1px solid rgba(255,255,255,.22); border-radius: 27px; background: rgba(255,255,255,.09); }
.live-card > span { color: var(--a4-yellow); font-size: .7rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.live-card > strong { display: block; margin: 18px 0 25px; color: #fff; font-size: 2.4rem; line-height: .95; letter-spacing: -.05em; }
.live-card ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.live-card li { padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.09); color: #fff; font-size: .84rem; font-weight: 750; }
.live-card > small { display: block; margin-top: 22px; color: #c6d9da; line-height: 1.55; }

.methodology-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 75px; }
.methodology-grid article { padding: 32px; border: 1px solid var(--a4-line); border-radius: 24px; background: #f7faf9; }
.methodology-grid article p { margin: 0 0 16px; color: var(--a4-muted); line-height: 1.68; }
.methodology-grid article strong { color: var(--a4-ink); }
.source-inline { color: var(--a4-teal-dark); font-size: .86rem; font-weight: 850; text-decoration: none; }

@media (max-width: 1050px) {
  .a4-hero-grid, .section-heading, .language-evidence, .live-grid, .methodology-grid { grid-template-columns: 1fr; gap: 34px; }
  .decision-preview { max-width: 620px; }
  .criteria-grid { grid-template-columns: repeat(2, 1fr); }
  .embedding-example { grid-template-columns: 1fr; }
  .embedding-step span { transform: rotate(90deg); }
  .embedding-example article { min-height: 0; }
}

@media (max-width: 720px) {
  .a4-hero { padding: 48px 0 64px; }
  .a4-section { padding: 68px 0; }
  .a4-hero h1 { font-size: clamp(3rem, 15vw, 4.9rem); }
  .a4-lead { font-size: 1rem; }
  .decision-preview { padding: 26px 22px; }
  .preview-facts, .criteria-grid, .scenario-grid, .mode-results, .decision-grid { grid-template-columns: 1fr; }
  .exploration-strip { grid-template-columns: 1fr; }
  .exploration-strip i { transform: rotate(90deg); text-align: center; }
  .scenario-card, .decision-card { padding: 25px 21px; }
  .scenario-card dl { grid-template-columns: 1fr 1fr; }
  .decision-conclusion { align-items: flex-start; padding: 23px; }
  .decision-conclusion > span { width: 46px; height: 46px; }
  .language-row { grid-template-columns: 58px 1fr; }
  .bar-track { grid-template-columns: 72px 1fr 34px; }
}

@media (max-width: 480px) {
  .header-inner { gap: 12px; }
  .main-nav { gap: 8px; }
  .main-nav .nav-featured { display: none; }
  .main-nav .language-link { padding-left: 8px; }
  .main-nav .a4-language-switch .language-link { padding: 4px 6px; }
}