:root {
  color-scheme: light;
  --paper: #fffdf9;
  --ivory: #f4f0e8;
  --ink: #17212a;
  --ink-soft: #53606a;
  --carmine: #922f35;
  --carmine-dark: #6f2228;
  --teal: #216b68;
  --ochre: #b77b2d;
  --line: #d9d3ca;
  --white: #fff;
  --focus: #075fcc;
  --blue: #2166ac;
  --red: #b2182b;
  --content: 88rem;
  --measure: 68ch;
  --shadow: 0 24px 70px rgb(35 39 39 / 12%);
  --step--1: clamp(.78rem, .74rem + .14vw, .9rem);
  --step-0: clamp(1rem, .95rem + .23vw, 1.14rem);
  --step-1: clamp(1.22rem, 1.08rem + .62vw, 1.62rem);
  --step-2: clamp(1.65rem, 1.34rem + 1.35vw, 2.55rem);
  --step-3: clamp(2.3rem, 1.65rem + 2.8vw, 4.5rem);
  --step-4: clamp(2.65rem, 1.85rem + 3.2vw, 5rem);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink); font-size: var(--step-0); line-height: 1.62; }
body::before { position: fixed; z-index: -1; inset: 0; background: linear-gradient(90deg, transparent calc(50% - .5px), rgb(146 47 53 / 5%) 50%, transparent calc(50% + .5px)); content: ""; pointer-events: none; }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: var(--teal); text-underline-offset: .2em; }
a:hover { color: var(--carmine-dark); }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
h1, h2, h3, p, figure { margin-top: 0; }
h1, h2, h3 { color: var(--ink); line-height: 1.05; text-wrap: balance; }
h1 { max-width: 14ch; margin-bottom: 1rem; font-family: Georgia, "Times New Roman", serif; font-size: var(--step-4); font-weight: 500; letter-spacing: -.04em; }
h2 { max-width: 15ch; margin-bottom: 1rem; font-family: Georgia, "Times New Roman", serif; font-size: var(--step-3); font-weight: 500; letter-spacing: -.025em; }
h3 { margin-bottom: .65rem; font-size: var(--step-1); }
.wrap { width: min(calc(100% - 2rem), var(--content)); margin-inline: auto; }
.eyebrow { margin-bottom: .7rem; color: var(--carmine); font-size: var(--step--1); font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.lede { max-width: 54ch; color: #34424b; font-size: clamp(1rem, .95rem + .2vw, 1.14rem); line-height: 1.47; }
.small { color: var(--ink-soft); font-size: var(--step--1); }
.skip-link { position: fixed; z-index: 1000; top: .5rem; left: .5rem; padding: .65rem 1rem; transform: translateY(-150%); background: var(--ink); color: var(--white); font-weight: 800; }
.skip-link:focus { transform: none; }

.site-header { position: sticky; z-index: 50; top: 0; border-top: 4px solid var(--carmine); border-bottom: 1px solid var(--line); background: rgb(255 253 249 / 96%); backdrop-filter: blur(12px); }
.header-inner { width: min(calc(100% - 2rem), var(--content)); min-height: 7.5rem; margin-inline: auto; display: flex; align-items: center; gap: clamp(.75rem, 2vw, 2rem); }
.identity { display: flex; flex: 0 1 31rem; min-width: 0; align-items: center; gap: 1rem; color: var(--ink); text-decoration: none; }
.identity img { width: clamp(4.8rem, 7vw, 7.2rem); aspect-ratio: 1; object-fit: contain; transform: translateY(10%); }
.identity span { display: grid; padding-left: 1rem; border-left: 3px solid var(--carmine); color: #000; font-size: clamp(.78rem, 1.2vw, 1rem); font-weight: 820; line-height: 1.2; }
.identity span span { display: block; padding: 0; border: 0; white-space: nowrap; }
.site-nav { display: flex; margin-left: auto; align-items: center; gap: clamp(.7rem, 1.4vw, 1.35rem); }
.site-nav a { color: var(--ink); font-size: .78rem; font-weight: 800; text-decoration: none; }
.site-nav a:hover { color: var(--carmine); }
.language-link { display: grid; flex: 0 0 2.45rem; width: 2.45rem; aspect-ratio: 1; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); font-size: .76rem; font-weight: 850; text-decoration: none; }

.hero { min-height: min(55rem, calc(100svh - 7.5rem)); display: grid; grid-template-columns: minmax(0, .92fr) minmax(20rem, 1.08fr); align-items: center; gap: clamp(2rem, 4vw, 5rem); padding-block: clamp(2rem, 4.5vw, 4.25rem); }
.hero-copy { position: relative; z-index: 1; }
.hero h1 { max-width: 26ch; font-size: clamp(2rem, 1.35rem + 2vw, 3.3rem); line-height: 1.12; }
.product-mark { width: min(100%, 23rem); margin: 0 0 1.35rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.35rem; }
.button { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; padding: .78rem 1.15rem; border: 1px solid var(--carmine); border-radius: 999px; background: var(--carmine); color: var(--white); font-size: var(--step--1); font-weight: 850; text-decoration: none; }
.button:hover { background: var(--carmine-dark); color: var(--white); }
.button-secondary { background: transparent; color: var(--carmine); }
.button-secondary:hover { background: #f8eeee; color: var(--carmine-dark); }
.hero-result { position: relative; margin: 0; padding: clamp(.7rem, 2vw, 1.4rem); border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow); }
.hero-result::before { position: absolute; z-index: -1; inset: 7% 0 -5% 8%; background: var(--ivory); content: ""; transform: rotate(-1deg); transform-origin: top right; }
.hero-result figcaption { display: flex; gap: 1rem; justify-content: space-between; padding: 1rem .3rem .1rem; color: var(--ink-soft); font-size: var(--step--1); }
.hero-result figcaption strong { color: var(--ink); }
.carousel h2 { max-width: none; font-family: inherit; font-size: var(--step-1); letter-spacing: normal; font-weight: 700; }
.carousel-context, .carousel-note { color: var(--ink-soft); font-size: var(--step--1); }
.carousel-controls { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: .8rem; }
.carousel-controls[hidden], .carousel-slide[hidden] { display: none; }
.carousel-choices { display: flex; flex-wrap: wrap; gap: .35rem; }
.carousel-controls button { min-height: 2.75rem; padding: .45rem .65rem; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-size: .78rem; cursor: pointer; }
.carousel-controls button[aria-pressed="true"] { background: var(--carmine); border-color: var(--carmine); color: white; }
.carousel-slide { margin: 0; }
.carousel-slide > img { width: 100%; height: clamp(22rem, 36vw, 33rem); object-fit: contain; background: white; }
.carousel-slide figcaption { display: block; padding-block: .8rem .3rem; }
.carousel-slide figcaption span { display: block; }
.carousel-links { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; font-size: var(--step--1); }
.carousel-status { margin: .6rem 0; color: var(--ink-soft); font-size: .78rem; }
.carousel-note { margin-bottom: 0; }
.lisa-definition { margin-block: 1rem 3rem; padding: clamp(1rem, 2vw, 2rem); border-left: 4px solid var(--teal); background: #edf4f1; scroll-margin-top: 9rem; }
.lisa-definition h2 { max-width: none; font-family: inherit; font-size: var(--step-1); font-weight: 700; }
.lisa-definition p { max-width: 90ch; margin-bottom: 0; }
details { margin-block: 1rem; }
summary { cursor: pointer; font-weight: 650; }
details > p { margin-block: .8rem; }
.sample-methods { font-size: var(--step--1); }

.section { padding-block: clamp(4.5rem, 10vw, 9rem); border-top: 1px solid var(--line); scroll-margin-top: 8.5rem; }
.section-head { display: grid; grid-template-columns: minmax(12rem, .38fr) minmax(0, .62fr); gap: clamp(2rem, 6vw, 7rem); margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.section-head > p:last-child { max-width: var(--measure); align-self: end; color: var(--ink-soft); font-size: var(--step-1); }
#workflow .section-head { grid-template-columns: 1fr; gap: 1rem; }
#workflow .section-head h2 { max-width: 34ch; font-size: var(--step-2); }

.workflow { margin: 0; padding: 0; list-style: none; counter-reset: workflow; }
.workflow li { position: relative; display: grid; grid-template-columns: 5rem minmax(10rem, .55fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 3rem); padding: 1.5rem 0; border-top: 1px solid var(--line); counter-increment: workflow; }
.workflow li::before { color: var(--carmine); content: "0" counter(workflow); font-family: Georgia, serif; font-size: var(--step-2); }
.workflow h3, .workflow p { margin: 0; }
.workflow p { color: var(--ink-soft); }
.definition-note { max-width: 72ch; margin: 2.5rem 0 0 calc(5rem + clamp(1rem, 3vw, 3rem)); padding: 1rem 1.2rem; border-left: 4px solid var(--teal); background: #edf4f1; color: #34424b; }
.dictionary-completion { display: grid; grid-template-columns: minmax(12rem, .34fr) minmax(0, .66fr); gap: clamp(1.25rem, 4vw, 4rem); margin-top: 1.25rem; padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--line); background: var(--white); }
.dictionary-completion h3, .dictionary-completion p { margin-bottom: 0; }
.dictionary-completion > p { color: var(--ink-soft); }

.evidence-figure { margin-top: 3rem; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(16rem, .75fr); align-items: center; gap: clamp(1.5rem, 5vw, 5rem); padding: clamp(1rem, 3vw, 2rem); background: var(--ivory); }
.evidence-figure img { border: 1px solid var(--line); background: var(--white); }
.evidence-figure figcaption { max-width: 40ch; }
.comparison-figure { margin: 1.5rem 0 0; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(17rem, .65fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem); padding: clamp(1rem, 3vw, 2rem); scroll-margin-top: 8.5rem; border: 1px solid var(--line); background: var(--white); }
.comparison-figure img { width: 100%; border: 1px solid var(--line); }
.comparison-figure figcaption { max-width: 42ch; }
.comparison-links { display: flex; flex-wrap: wrap; gap: .55rem 1.15rem; margin-bottom: 0; font-size: var(--step--1); font-weight: 800; }

.sample-shell { overflow: hidden; background: #131d24; color: #eef1f2; box-shadow: var(--shadow); }
.sample-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding: clamp(1.5rem, 4vw, 3rem); border-bottom: 1px solid rgb(255 255 255 / 17%); }
.sample-header h3 { color: var(--white); font-family: Georgia, serif; font-size: var(--step-2); font-weight: 500; }
.sample-header p { max-width: 68ch; margin-bottom: 0; color: #bec8ce; }
.sample-tag { align-self: start; padding: .42rem .75rem; border: 1px solid #70808b; border-radius: 999px; color: #dce4e8; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.sample-grid { display: grid; grid-template-columns: minmax(17rem, .8fr) minmax(0, 1.2fr); min-height: 34rem; }
.category-list { max-height: 42rem; overflow: auto; border-right: 1px solid rgb(255 255 255 / 17%); }
.category-option { width: 100%; display: grid; grid-template-columns: 1rem minmax(0, 1fr) auto; gap: .85rem; align-items: center; padding: 1rem 1.2rem; border: 0; border-bottom: 1px solid rgb(255 255 255 / 10%); background: transparent; color: #e6ecef; font: inherit; text-align: left; cursor: pointer; }
.category-option:hover, .category-option[aria-current="true"] { background: rgb(255 255 255 / 9%); }
.category-option[aria-current="true"] { box-shadow: inset 4px 0 var(--ochre); }
.category-option .dot { width: .75rem; aspect-ratio: 1; border-radius: 50%; background: var(--result-colour); }
.category-option small { color: #aebac1; }
.category-option strong { color: var(--white); font-variant-numeric: tabular-nums; }
.sample-detail { padding: clamp(1.5rem, 5vw, 4rem); }
.sample-detail h4 { max-width: 22ch; margin: 0 0 .75rem; color: var(--white); font-family: Georgia, serif; font-size: var(--step-2); font-weight: 500; line-height: 1.15; }
.sample-detail .macro { margin-bottom: 2.5rem; color: #b8c3c9; }
.sample-detail > .eyebrow { color: #f2d6aa; }
.mean-scale { position: relative; height: 3.8rem; margin-block: 2rem; border-block: 1px solid #56636b; }
.mean-scale::before { position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px dashed #8f9ba2; content: ""; }
.mean-scale::after { position: absolute; top: 50%; left: var(--mean-position, 50%); width: 1rem; aspect-ratio: 1; border: 3px solid var(--white); border-radius: 50%; background: var(--result-colour, var(--red)); content: ""; transform: translate(-50%, -50%); }
.scale-labels { display: flex; justify-content: space-between; color: #aebac1; font-size: .72rem; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 2rem 0; background: #4e5a62; }
.metric { min-height: 7.6rem; padding: 1rem; background: #1b2831; }
.metric dt { color: #aebac1; font-size: .72rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.metric dd { margin: .45rem 0 0; color: var(--white); font-family: Georgia, serif; font-size: var(--step-2); font-variant-numeric: tabular-nums; }
.metric small { display: block; color: #b8c3c9; font-family: Inter, sans-serif; font-size: .7rem; }
.sample-note { color: #c4cdd2; font-size: var(--step--1); }
.sample-links { display: flex; flex-wrap: wrap; gap: .7rem 1.2rem; margin-top: 1.5rem; }
.sample-links a { color: #f2d6aa; font-size: var(--step--1); font-weight: 800; }
.no-js-message { padding: 1rem; border-left: 4px solid var(--ochre); background: var(--ivory); color: var(--ink); }
.js .no-js-message { display: none; }

.figure-panel { margin-top: 3rem; padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--line); background: var(--white); }
.figure-panel img { width: 100%; }
.figure-panel figcaption { max-width: 76ch; margin-top: 1rem; color: var(--ink-soft); font-size: var(--step--1); }
.figure-open { margin-top: .7rem; padding: .25rem 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--carmine-dark); font: inherit; font-size: var(--step--1); font-weight: 800; cursor: pointer; }
.no-js .figure-open { display: none; }
.figure-fallback { display: inline-block; margin-left: 1rem; font-size: var(--step--1); font-weight: 750; }
.figure-dialog { width: min(calc(100% - 2rem), 94rem); max-height: calc(100dvh - 2rem); padding: 0; overflow: auto; border: 0; background: var(--paper); color: var(--ink); box-shadow: 0 28px 90px rgb(0 0 0 / 35%); }
.figure-dialog::backdrop { background: rgb(9 15 19 / 82%); backdrop-filter: blur(3px); }
.figure-dialog-inner { position: relative; padding: clamp(1rem, 3vw, 2rem); }
.figure-dialog img { width: 100%; }
.figure-close { position: sticky; z-index: 2; top: 1rem; float: right; display: grid; width: 2.8rem; aspect-ratio: 1; place-items: center; margin: 0 0 1rem 1rem; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 1.5rem; cursor: pointer; }

.example-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2.5rem); }
.example { display: flex; flex-direction: column; border-top: 5px solid var(--carmine); background: var(--ivory); }
.example:nth-child(2) { border-color: var(--teal); }
.example-copy { padding: clamp(1.5rem, 4vw, 3rem); }
.example-copy .comparison { padding-top: 1rem; border-top: 1px solid var(--line); color: var(--ink); font-weight: 750; }
.example figure { margin: auto 0 0; padding: 1rem; background: var(--white); }
.example figcaption { padding: .8rem .35rem .25rem; color: var(--ink-soft); font-size: var(--step--1); }

.report-strip { margin-top: 3rem; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); padding: clamp(2rem, 5vw, 4.5rem); background: var(--teal); color: var(--white); }
.report-strip h3 { color: var(--white); font-family: Georgia, serif; font-size: var(--step-2); font-weight: 500; }
.report-strip p { color: #e3eeee; }
.report-list { margin: 0; padding: 0; list-style: none; }
.report-list li { padding: .8rem 0; border-top: 1px solid rgb(255 255 255 / 28%); }
.report-list strong { display: block; }
.report-list span { color: #d4e5e4; font-size: var(--step--1); }

.guide-groups { columns: 3 17rem; column-gap: 3rem; }
.guide-group { break-inside: avoid; margin-bottom: 2.5rem; }
.guide-group h3 { padding-bottom: .75rem; border-bottom: 2px solid var(--ink); }
.guide-list { margin: 0; padding: 0; list-style: none; }
.guide-list li { padding: .65rem 0; border-bottom: 1px solid var(--line); }
.guide-list a { color: var(--ink); font-weight: 720; }
.guide-list small { display: block; color: var(--ink-soft); }
.guide-intro { max-width: 72ch; margin-bottom: 2rem; color: var(--ink-soft); }
.guide-overview { column-count: auto; display: grid; grid-template-columns: minmax(16rem, 1.3fr) repeat(2, minmax(14rem, 1fr)); gap: clamp(1.25rem, 3vw, 3rem); }
.guide-overview .guide-group { margin-bottom: 0; }
.guide-disclosure summary { padding-bottom: .75rem; border-bottom: 2px solid var(--ink); color: var(--ink); font-size: var(--step-1); font-weight: 700; line-height: 1.05; cursor: pointer; }
.guide-disclosure[open] summary { margin-bottom: 1rem; }
.guide-disclosure summary:hover { color: var(--carmine); }
.guide-path { padding: clamp(1rem, 2vw, 1.5rem); border-top: 4px solid var(--carmine); background: var(--ivory); }
.guide-path-list { counter-reset: guide-step; }
.guide-path-list li { counter-increment: guide-step; }
.guide-archive { margin-top: 2.5rem; padding-top: 1.15rem; border-top: 1px solid var(--line); }
.guide-archive summary { color: var(--teal); font-weight: 800; cursor: pointer; }
.guide-archive .guide-groups { margin-top: 1.5rem; }
.language-notice { max-width: 72ch; margin-bottom: 2.5rem; padding: 1rem 1.2rem; border-left: 4px solid var(--ochre); background: var(--ivory); }

.status-ledger { margin-top: 4rem; border-top: 1px solid var(--line); }
.status-row { display: grid; grid-template-columns: minmax(9rem, .25fr) minmax(0, .75fr) auto; gap: 1.5rem; align-items: center; padding: 1.3rem 0; border-bottom: 1px solid var(--line); }
.status-row h3, .status-row p { margin: 0; }
.status-row p { color: var(--ink-soft); }
.status { padding: .4rem .7rem; border: 1px solid var(--ochre); border-radius: 999px; color: #79501c; font-size: .7rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }

.site-footer { padding: 3rem 0; background: #121a20; color: #d4dde1; }
.footer-inner { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; }
.footer-brand { display: flex; align-items: center; gap: 1rem; color: var(--white); text-decoration: none; }
.footer-brand img { width: 4.8rem; filter: brightness(0) invert(1); }
.footer-brand span { max-width: 19rem; padding-left: 1rem; border-left: 1px solid #657078; font-size: .82rem; font-weight: 750; line-height: 1.2; }
.site-footer p { max-width: 50rem; margin: 0; color: #aeb8be; font-size: .72rem; }

.entry { min-height: 100svh; display: grid; place-items: center; padding: 2rem; background: var(--ivory); }
.entry-card { width: min(100%, 64rem); padding: clamp(2rem, 7vw, 6rem); border-top: 6px solid var(--carmine); background: var(--paper); box-shadow: var(--shadow); }
.entry-logos { display: grid; grid-template-columns: minmax(8rem, .45fr) minmax(12rem, .55fr); gap: 2rem; align-items: center; margin-bottom: 4rem; }
.entry-logos img:first-child { width: 8rem; }
.entry h1 { max-width: 14ch; font-size: var(--step-3); }
.entry-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

@media (max-width: 62rem) {
  .site-nav a:nth-child(-n + 2) { display: none; }
  .hero { min-height: 0; grid-template-columns: 1fr; }
  .hero-copy { max-width: 50rem; }
  .hero-result { width: min(100%, 54rem); justify-self: end; }
  .section-head { grid-template-columns: 1fr; gap: 1rem; }
  .sample-grid, .report-strip, .dictionary-completion { grid-template-columns: 1fr; }
  .category-list { max-height: 23rem; border-right: 0; border-bottom: 1px solid rgb(255 255 255 / 17%); }
}

@media (max-width: 46rem) {
  body::before { display: none; }
  .wrap { width: min(calc(100% - 1.25rem), var(--content)); }
  .header-inner { min-height: 5.35rem; }
  .identity { gap: .65rem; }
  .identity img { width: 4.2rem; }
  .identity span { padding-left: .65rem; font-size: .68rem; }
  .site-nav { display: none; }
  .language-link { margin-left: auto; }
  .hero { padding-block: 2rem 3.5rem; gap: 2rem; }
  .product-mark { width: min(100%, 19rem); margin-bottom: 1rem; }
  .button { min-height: 2.75rem; padding: .68rem .85rem; }
  .hero-result { transform: none; }
  .hero-result figcaption { display: block; }
  .workflow li { grid-template-columns: 3rem 1fr; }
  .workflow li p { grid-column: 2; }
  .definition-note { margin-left: 0; }
  .example-pair, .evidence-figure, .comparison-figure { grid-template-columns: 1fr; }
  .sample-header { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr; }
  .metric { min-height: 0; }
  .status-row { grid-template-columns: 1fr; gap: .5rem; }
  .status { justify-self: start; }
  .footer-inner { grid-template-columns: 1fr; }
  .entry-logos { grid-template-columns: 1fr; margin-bottom: 2.5rem; }
  .section { scroll-margin-top: 6.25rem; }
  .comparison-figure { scroll-margin-top: 6.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero-result { transform: none; }
}

@media print {
  .site-header, .hero-actions, .figure-open, .site-footer { display: none; }
  .hero { min-height: 0; grid-template-columns: 1fr 1fr; }
  .section { padding-block: 2rem; break-inside: avoid; }
  .sample-shell { background: var(--white); color: var(--ink); box-shadow: none; }
  .sample-header h3, .sample-detail h4, .metric dd { color: var(--ink); }
}

@media (max-width: 600px) {
  .carousel::before { display: none; }
}

/* Final review: readable cropped previews, original images available separately. */
.carousel-crop,.figure-crop{position:relative;overflow:hidden;background:#fff}
.carousel-crop{height:var(--carousel-preview-height,360px)}
.carousel-crop>img,.figure-crop>img{width:100%;height:auto;max-width:none;display:block}
.carousel-crop::after,.figure-crop::after{content:"";position:absolute;inset:auto 0 0;height:76px;background:linear-gradient(transparent,#fff);pointer-events:none}
.figure-crop{max-width:760px;height:440px;margin-inline:auto}
.carousel-controls button[aria-pressed="true"]{box-shadow:inset 0 -4px 0 #f2d6aa;font-weight:800}
.report-example{display:block;width:100%;height:880px;border:1px solid var(--line);border-radius:4px;background:white;margin:1.4rem 0 2rem}
@media(min-width:900px){.hero{align-items:start}.hero-copy{align-self:start}}
@media(max-width:600px){.carousel-crop{height:340px}.figure-crop{height:340px}.report-example{height:760px}}

.category-navigator{max-height:720px;overflow:auto;border:1px solid var(--line);background:white;scroll-margin-top:10rem;overscroll-behavior:contain}
.category-navigator svg{display:block;width:100%;min-width:1000px;height:auto}
.navigation-downloads{font-size:.88rem;margin-block:.8rem 2rem}
@media(max-width:600px){.category-navigator{max-height:600px}}

/* Explanatory workflows and source-backed report outputs. */
.workflow-links{display:flex;flex-wrap:wrap;gap:.8rem 2rem;margin-top:1.2rem;font-weight:650}
.workflow-visual{margin:2rem 0;scroll-margin-top:7rem}.workflow-visual img{width:100%;border-radius:16px}.workflow-visual figcaption{font-size:.88rem;margin:.5rem 0;text-align:right}
.dictionary-workflow{border:1px solid var(--line);border-radius:12px;padding:1.2rem 1.5rem;margin:2rem 0;scroll-margin-top:7rem;background:white}.dictionary-workflow summary{cursor:pointer;font-size:1.2rem;font-weight:700;color:var(--teal)}.dictionary-workflow p{max-width:85ch}
.output-section{margin-top:4rem;scroll-margin-top:7rem}.output-section>header{max-width:75ch}.output-section h3{font-size:var(--step-2)}.output-section h4{font-size:1.35rem;margin:0 0 .7rem}.output-previews{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin:2rem 0}.output-preview{background:white;border:1px solid var(--line);border-radius:14px;overflow:hidden}.output-preview>a{display:block;padding:1rem;background:#fff}.output-preview img{width:100%;height:320px;object-fit:contain}.output-preview>div{padding:1.5rem;background:var(--ivory)}.output-types{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin:2rem 0}.output-types article{border-top:3px solid var(--teal);padding-top:1rem}.output-number{display:block;color:var(--carmine);font-size:.85rem;letter-spacing:.12em;margin-bottom:.7rem}.output-types p{font-size:1rem}.output-types a{font-size:.9rem}.output-export{border-left:3px solid var(--carmine);padding:1rem 1.5rem;background:var(--ivory)}
@media(max-width:900px){.output-types{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.output-previews,.output-types{grid-template-columns:1fr}.output-preview img{height:280px}.dictionary-workflow{padding:1rem}.workflow-visual{margin:1.2rem 0}.workflow-visual img{aspect-ratio:390/1210}.workflow-links{flex-direction:column}}

.eyebrow .package-name{text-transform:none;letter-spacing:normal}

.output-preview>a.gene-card-preview{position:relative;height:352px;overflow:hidden}.output-preview .gene-card-preview img{height:auto;object-fit:initial}.gene-card-preview::after{content:"";position:absolute;inset:auto 0 0;height:55px;background:linear-gradient(transparent,white);pointer-events:none}
@media(max-width:650px){.output-preview>a.gene-card-preview{height:312px}}

.comparison-intro{margin-top:clamp(3.5rem,8vw,6rem);max-width:var(--measure)}.comparison-intro p:last-child{margin-bottom:0;color:var(--ink-soft)}
#sample{scroll-margin-top:8.5rem}
@media(max-width:650px){#sample{scroll-margin-top:6.25rem}}

@media (max-width: 760px) {
  .guide-overview { grid-template-columns: 1fr; }
  .guide-overview .guide-group { min-width: 0; }
}