/* Hallmark · macrostructure: graphic narrative · tone: technical · anchor hue: AISEC foam
 * Existing hero and navigation retained at Stan's request; no catalog rotation.
 * Optional Three.js assessment, SVG fallback and monitoring scene; not product screenshots.
 * Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4.
 * Scope, brand exceptions and measured results: HOMEPAGE_GRAPHIC_REVIEW_2026-09-07.md.
 */
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 12px 20px;
  background: var(--color-accent); color: var(--color-accent-ink); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
main:focus { outline: none; }
.nav .brand, .nav .login, .nav .links a { min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.nav { padding-block: 6px; }
.pill { min-height: 44px; }
.pill:active { transform: translateY(1px); }
.home-menu { display: none; }
.home-menu summary { display: flex; align-items: center; justify-content: center; min-height: 44px;
  padding-inline: 12px; cursor: pointer; list-style: none; font-size: 14px; color: var(--ink); }
.home-menu summary::-webkit-details-marker { display: none; }
.home-menu summary::after { content: '+'; margin-inline-start: 8px; }
.home-menu[open] summary::after { content: '−'; }
.home-menu nav { position: absolute; top: calc(100% + 8px); right: 0; width: min(320px, calc(100vw - 32px));
  padding: 12px; background: var(--color-surface-raised); color: var(--color-ink);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-menu); }
.home-menu nav a { display: flex; align-items: center; min-height: 48px; padding: 8px 16px; border-radius: 8px; }
.home-menu nav a:hover, .home-menu nav a:focus-visible { background: var(--color-bg); }
.home-menu[open] nav { animation: home-menu-enter var(--dur-medium) var(--ease-out); }
@keyframes home-menu-enter { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }


.below { --home-section-gap: clamp(64px, 8vw, 112px); color: var(--color-ink);
  --scene-base: oklch(24% .015 205); --scene-mid: oklch(31% .019 205); --scene-top: oklch(38% .025 205);
  --scene-outline: oklch(55% .025 205); }
.below .g { color: var(--color-accent); }
.below h2 { font-size: clamp(34px, 4.5vw, 60px); line-height: 1.07; font-weight: 500; letter-spacing: -.045em; }
.below p { line-height: 1.65; }
.text-link { display: inline-flex; align-items: center; gap: var(--space-md); min-height: 44px; margin-top: var(--space-xl);
  color: var(--color-ink); font-size: 14px; text-decoration: underline; text-underline-offset: 5px; white-space: nowrap; }
.text-link span { transition: transform var(--dur-short) var(--ease-out); }
.text-link:hover span { transform: translate(2px,-2px); }
.story-section { position: relative; isolation: isolate; overflow: clip; padding-block: var(--home-section-gap); background: oklch(19% .012 220);
  border-top: 1px solid var(--color-line); }
.assessment-visual::before { content: ''; position: absolute; left: -200%; top: -200%; width: 500%; height: 500%; z-index: -1; pointer-events: none;
  background: url('/assessment-grid.svg?v=20260907-hex-14') center / 100% 100% no-repeat; opacity: .22; }
.story-heading { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: var(--space-4xl); align-items: end; }
.story-heading p { color: var(--color-muted); max-width: 38ch; font-size: 17px; }
.assessment-scene { margin-top: var(--space-3xl); scroll-margin-top: 112px; }
.scene-art { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); align-items: center; min-height: 460px; }
.assessment-visual { position: relative; aspect-ratio: 760 / 460; min-width: 0; }
.assessment-visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; pointer-events: none; }
.assessment-visual[data-three-state="ready"] canvas { visibility: visible; }
.assessment-visual[data-three-state="ready"] .target-art { visibility: hidden; }
.model-label { position: absolute; z-index: 1; color: var(--color-ink); font-size: 17px; font-weight: 500; pointer-events: none; white-space: nowrap; text-align: center; }
.model-label[data-node="API"] { color: var(--color-accent-ink); font-weight: 600; }
.model-label small { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--color-muted); }
.model-icon { display: block; width: 26px; height: 26px; margin: 0 auto 6px; }
.model-label[data-node="API"] .model-icon { stroke: var(--color-accent-ink); }
.map-cell { fill: var(--scene-mid); stroke: var(--scene-outline); stroke-width: 1; }
.map-cell-api { fill: var(--scene-top); }
.map-cell-peripheral { fill: oklch(29% .008 220); stroke: oklch(44% .012 220); }
.model-label-peripheral { color: oklch(77% .01 220); }
.map-label-peripheral .map-text { fill: oklch(77% .01 220); }
.map-side { fill: var(--scene-base); stroke: var(--scene-outline); stroke-width: .5; }
.map-route { fill: none; stroke: var(--color-warning); stroke-width: 3; stroke-linejoin: round; }
.map-trace { fill: none; stroke: var(--color-accent); stroke-width: 1; opacity: .4; }
.map-context { fill: none; stroke: var(--scene-outline); stroke-width: 1.5; stroke-dasharray: 5 6; }
.map-text { fill: var(--color-ink); text-anchor: middle; font: 500 20px var(--font-body); }
.map-note { fill: var(--color-muted); text-anchor: middle; font: 13px var(--font-body); }
.map-desktop .map-text { font-size: 24px; }
.map-desktop .map-note { font-size: 15px; }
.map-mobile { display: none; }
.assessment-visual:not([data-three-state="ready"]) .model-label { display: none; }
.target-art { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.report-sheet { position: relative; padding: clamp(24px,3vw,40px); margin: var(--space-xl) var(--space-xl) var(--space-xl) 0;
  background: var(--color-report-paper); color: var(--color-report-ink); box-shadow: 8px 8px 0 var(--color-report-back);
  transform: rotate(3deg); transform-origin: 50% 60%;
  transition: transform 500ms var(--ease-out); }
.report-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); font-size: 11px; }
.report-top img { width: 72px; height: 18px; filter: brightness(0); }
.report-title { font-size: clamp(26px,3vw,40px); font-weight: 500; letter-spacing: -.045em; line-height: 1.04; margin-block: 44px 32px; }
.report-finding { border-block: 1px solid var(--color-report-rule); padding-block: var(--space-xl); }
.assessment-scene[data-phase="finding"] .report-finding { border-color: var(--color-report-alert); }
.report-severity { font-size: 12px; color: var(--color-report-alert); font-weight: 600; }
.report-finding h3 { font-size: 19px; line-height: 1.25; margin-block: var(--space-md); letter-spacing: -.025em; }
.report-finding p { font-size: 13px; color: var(--color-report-muted); }
.report-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); font-size: 12px; padding-top: var(--space-xl); }
.start-strip { display: flex; align-items: start; justify-content: space-between; gap: var(--space-3xl); padding-top: var(--space-2xl);
  margin-top: var(--space-xl); border-top: 1px solid var(--color-line); }
.start-strip p { max-width: 69ch; font-size: 14px; color: var(--color-muted); }
.start-strip strong { color: var(--color-ink); font-weight: 500; }
.start-strip .text-link { margin-top: 0; flex: none; }

.sentinel-section { background: oklch(25% .026 175); padding-block: var(--home-section-gap);
  border-block: 1px solid var(--color-line); }
.sentinel-layout { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); align-items: center; gap: 0 var(--space-3xl); }
.sentinel-copy h2 { font-size: clamp(44px,5vw,64px); }
.sentinel-copy p { max-width: 34ch; color: var(--color-muted); margin-top: var(--space-xl); font-size: 17px; }
.sentinel-art svg { width: 100%; height: auto; overflow: visible; }
.watch-flow { margin: 0; padding: var(--space-xl) 0; }
.watch-flow svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.watch-input { display: flex; align-items: center; justify-content: center; gap: var(--space-md); color: var(--color-warning); font-size: 17px; }
.watch-stem { width: 1px; height: 40px; margin-inline: auto; background: var(--color-warning); }
.watch-detector { display: flex; align-items: center; justify-content: center; gap: var(--space-lg); width: 68%; min-height: 104px; margin-inline: auto; border: 1px solid var(--color-accent); background: var(--color-surface); color: var(--color-accent); }
.watch-detector strong { color: var(--color-ink); font-family: var(--font-display); font-size: 32px; font-weight: 500; letter-spacing: -.025em; }
.watch-branches { position: relative; height: 56px; margin-inline: 25%; border-bottom: 1px solid var(--color-accent); }
.watch-branches::before { content: ''; position: absolute; left: 50%; top: 0; height: 100%; border-left: 1px solid var(--color-accent); }
.watch-branches i { position: absolute; top: 100%; height: 24px; border-left: 1px solid var(--color-accent); }
.watch-branches i:first-child { left: 0; }
.watch-branches i:last-child { right: 0; }
.watch-outcomes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding-top: var(--space-xl); }
.watch-outcomes > div { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); padding: var(--space-xl) var(--space-sm); text-align: center; }
.watch-outcomes svg { color: var(--color-accent); }
.watch-outcomes strong { font-size: 19px; font-weight: 500; }
.watch-outcomes span { color: var(--color-muted); font-size: 14px; }
.sentinel-setup { grid-column: 1/-1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-3xl);
  margin-top: var(--space-3xl); padding-top: var(--space-2xl); border-top: 1px solid var(--color-line); font-size: 13px; color: var(--color-muted); }
.sentinel-setup strong { font-weight: 500; color: var(--color-ink); }
.sentinel-setup a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; color: var(--color-ink); white-space: nowrap; }

.connect-section { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); align-items: center; gap: var(--space-4xl); padding-block: var(--home-section-gap); }
.connect-copy p { max-width: 46ch; color: var(--color-muted); margin-top: var(--space-xl); font-size: 16px; }
.fix-art { padding: var(--space-2xl) 0; }
.fix-track { display: flex; align-items: center; gap: var(--space-lg); }
.fix-track > span { width: 68px; height: 68px; border: 1px solid var(--color-line-strong); display: grid; place-items: center; flex: none; font-size: 26px; }
.fix-found { color: var(--color-warning); border-radius: 50%; }
.fix-track > div { height: 1px; flex: 1; background: var(--color-line-strong); }
.fix-commit { color: var(--color-ink); transform: rotate(-6deg); }
.fix-checked { color: var(--color-accent); border-radius: 50%; background: var(--color-surface); }
.fix-labels { display: flex; justify-content: space-between; color: var(--color-muted); font-size: 13px; margin-top: var(--space-lg); }
.fix-labels span { width: 68px; text-align: center; }
.fix-art figcaption { margin-top: var(--space-3xl); display: grid; gap: var(--space-md); }
.fix-art strong { font-size: clamp(28px,3vw,40px); font-weight: 400; letter-spacing: -.035em; }
.fix-art figcaption > span { color: var(--color-muted); font-size: 12px; }

.pricing-teaser { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4xl); padding-block: var(--space-4xl) var(--space-5xl); border-top: 1px solid var(--color-line-strong); }
.pricing-teaser h2 { font-size: clamp(32px,4vw,52px); max-width: 15ch; }
.pricing-teaser p { margin-top: var(--space-lg); max-width: 45ch; color: var(--color-muted); }
.pricing-teaser .teaser-terms { font-size: 13px; }
.teaser-action { flex: none; }
.teaser-action p { display: flex; align-items: baseline; gap: var(--space-lg); margin: 0 0 var(--space-xl); }
.teaser-action strong { font-size: 56px; font-weight: 500; letter-spacing: -.05em; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.teaser-action p > span { font-size: 13px; }
.teaser-action > span { display: block; font-size: 12px; color: var(--color-muted); margin-top: var(--space-lg); }
.foot .tag { border: 0; padding: 0; font-family: var(--font-body); line-height: 1.6; color: var(--color-muted); }
.foot a { min-height: 44px; display: flex; align-items: center; white-space: nowrap; }
.foot h2, .foot-b { color: var(--color-muted); }
section[id] { scroll-margin-top: 112px; }

/* Enlarge the map and its registered background together, without resizing the report.
 * Its transparent viewport can extend into the page gutter; the actual cells stay inside. */
@media (min-width: 1360px) {
  .assessment-visual { transform: scale(1.5); transform-origin: 55% 50%; }
}

@media (max-width: 860px) {
  .navbar { padding-inline: 16px; }
  .nav { position: relative; gap: 8px; padding-left: 16px; }
  .nav .right { gap: 4px; }
  .nav .login { display: none; }
  .home-menu { display: block; }
  .nav .pill .ic { display: none; }
  .nav .brand .wm { height: 18px; }
  .story-heading, .sentinel-layout, .connect-section, .sentinel-setup { grid-template-columns: minmax(0,1fr); gap: var(--space-2xl); }
  .story-heading p, .sentinel-copy p { max-width: 48ch; }
  .story-heading .text-link { margin-top: var(--space-md); }
  .scene-art { min-height: 360px; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); }
  .report-sheet { padding: 24px; }
  .report-title { font-size: 28px; margin-block: 28px 20px; }
  .report-finding h3 { font-size: 17px; }
  .report-top { font-size: 10px; }
  .sentinel-art { max-width: 650px; width: 100%; margin-inline: auto; }
  .start-strip { gap: var(--space-xl); }
  .fix-art { max-width: 520px; width: 100%; }
  .pricing-teaser { gap: var(--space-2xl); }
  .foot .cols { gap: var(--space-2xl); }
}
@media (max-width: 600px) {
  .scene-art { grid-template-columns: minmax(0,1fr); min-height: 0; background: none; }
  .assessment-visual { aspect-ratio: 360 / 420; }
  .assessment-visual::before { background-image: url('/assessment-grid-mobile.svg?v=20260907-hex-14'); }
  .map-desktop { display: none; }
  .map-mobile { display: block; }
  .map-mobile .map-text { font-size: 16px; }
  .map-mobile .map-note { font-size: 11px; }
  .report-sheet { width: calc(100% - 24px); max-width: 360px; margin: 8px auto 32px; transform: rotate(2deg); }
  .report-title { font-size: 36px; margin-block: 28px 20px; }
  .report-finding h3 { font-size: 20px; }
  .report-top { font-size: 11px; }
  .start-strip { flex-direction: column; gap: var(--space-sm); }
  .sentinel-section { padding-block: var(--space-3xl); }
  .sentinel-copy h2 { font-size: 52px; }
  .sentinel-setup { gap: var(--space-lg); }
  .pricing-teaser { flex-direction: column; align-items: start; }
  .fix-track { gap: var(--space-md); }
  .fix-track > span { width: 56px; height: 56px; }
  .fix-labels span { width: 56px; }
}
@media (max-width: 430px) {
  .nav .pill { padding-inline: 12px; }
  .home-menu summary { padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .report-sheet, .pill, .arrow, .text-link span { transition: none; }
  .home-menu[open] nav { animation: none; }
  .report-sheet { transform: none; }
  .pill:hover, .pill:active, .text-link:hover span { transform: none; }
}