/* /model page styles. Tokens, type scale, .shell, .btn and footer come from assets/site.css. */
.model-hero { position: relative; isolation: isolate; display: grid; min-height: 100svh; background: #0a0d14; color: #fff; overflow: hidden; }
.model-hero .shell { display: grid; align-content: center; gap: 2rem; padding-top: 8rem; padding-bottom: 6rem; }
.model-hero h1 { font-size: clamp(4.5rem, 2rem + 14vw, 13rem); line-height: 0.92; letter-spacing: -0.04em; font-weight: 500; }
.model-hero .lede { max-width: 32rem; font-size: 1.125rem; line-height: 1.6; color: rgb(255 255 255 / 0.74); }
.u-cover-absolute { position: absolute; inset: 0; z-index: -1; }
.u-cover-absolute img { width: 100%; height: 100%; object-fit: cover; object-position: right center; filter: brightness(0.8); }
.model-hero .fade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #0a0d14 0%, #0a0d14 32%, rgb(10 13 20 / 0.55) 60%, rgb(10 13 20 / 0.2) 100%); }
.model-mark { position: absolute; right: clamp(1rem, 8vw, 8rem); top: 50%; z-index: 1; width: clamp(7rem, 18vw, 16rem); translate: 0 -50%; color: #fff; opacity: 0.9; }
.model-mark svg { width: 100%; height: auto; overflow: visible; }
@media (min-width: 1024px) { .model-hero .shell { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .model-hero .fade { background: linear-gradient(90deg, #0a0d14 0%, #0a0d14 42%, rgb(10 13 20 / 0.35) 70%, rgb(10 13 20 / 0) 100%); } }
@media (max-width: 1023px) { .model-mark { display: none; } .u-cover-absolute img { object-position: 70% center; filter: brightness(0.45); } }

/* 2 · state → action → future state */
.s-house { position: relative; }
.s-house-sticky-wrapper { display: grid; gap: 2.5rem; }
.house-stack { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; border: 1px solid var(--c-line); background: var(--c-raised); }
.house-stack .house { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.house-stack .house.is--first { opacity: 1; }
.house-stack .house-tag { position: absolute; left: 1rem; bottom: 1rem; padding: 0.375rem 0.625rem; border-radius: 6px; background: rgb(10 13 20 / 0.75); color: #fff; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; backdrop-filter: blur(6px); }
.info-list { position: relative; margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.info-wrapper { position: relative; display: grid; grid-template-columns: 1.25rem 1fr; gap: 1rem; padding: 0 0 2.25rem; opacity: 0.42; transition: opacity 0.4s var(--ease-precise); }
.info-wrapper.is-on { opacity: 1; }
.rhombus-icon { width: 12px; height: 12px; margin: 0.35rem 0 0 0.25rem; background: var(--c-fg); transform: rotate(45deg); }
.info-wrapper.is-on .rhombus-icon { background: var(--c-accent); }
.info-wrapper-line { position: absolute; left: calc(0.25rem + 5.5px); top: 1.25rem; bottom: 0; width: 1px; background: var(--c-line-strong); transform-origin: top; transform: scaleY(0); }
.info-wrapper:last-child .info-wrapper-line { display: none; }
.info-label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-fg-subtle); }
.info-value { margin-top: 0.375rem; font-size: 1.125rem; line-height: 1.45; font-weight: 500; }
.info-meta { margin-top: 0.375rem; font-size: 0.875rem; color: var(--c-fg-muted); }
@media (min-width: 768px) {
  .s-house { height: 320vh; }
  .s-house-sticky-wrapper { position: sticky; top: 10vh; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; height: 80vh; }
  .house-stack { max-height: 80vh; }
  .info-wrapper { padding-bottom: 2.75rem; }
}
@media (max-width: 767px) {
  /* no sticky: today → intervention → after as a plain stack, then the three cards */
  .house-stack { display: grid; gap: 0.75rem; aspect-ratio: auto; margin-bottom: 1.5rem; border: 0; background: none; overflow: visible; }
  .house-stack picture { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; border: 1px solid var(--c-line); }
  .house-stack .house { position: static; opacity: 1 !important; }
  .house-stack .house.is--fourth, .house-stack .house-tag { display: none; }
  .info-wrapper { opacity: 1; }
  .info-wrapper-line { transform: none; }
}

/* 3 · primitives tabs */
.prim-tabs { position: relative; display: flex; gap: 1.75rem; border-bottom: 1px solid var(--c-line); }
.tabs-link { position: relative; padding: 0.75rem 0 1rem; font-size: 0.9375rem; font-weight: 500; color: var(--c-fg-muted); }
.tabs-link[aria-selected='true'] { color: var(--c-fg); }
.tabs-link .num { margin-right: 0.5rem; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; color: var(--c-fg-subtle); }
.prim-stage { position: relative; display: grid; margin-top: 2.5rem; }
.prim-stage .tabs-slide { grid-area: 1 / 1; display: grid; gap: 2rem; align-items: start; }
.prim-stage .tabs-slide[hidden] { display: grid; visibility: hidden; pointer-events: none; }
@media (min-width: 1024px) { .prim-stage .tabs-slide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; } }
.prompt-container { display: grid; gap: 0.75rem; }
.type-line { min-height: 3.2em; font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.6; color: var(--c-fg); }
.type-line::before { content: '› '; color: var(--c-accent); }
.type-line .caret { display: inline-block; width: 1px; height: 1.1em; margin-left: 2px; background: var(--c-fg); vertical-align: -0.2em; animation: caret 1s steps(1) infinite; }
.answer-card { padding: 1rem 1.125rem; border-radius: 10px; border: 1px solid var(--c-line); background: var(--c-surface); font-size: 0.9375rem; line-height: 1.55; opacity: 0; translate: 0 8px; }
.answer-card .k { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-fg-subtle); }
.answer-card strong { font-weight: 600; }
.tabs-image { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--c-line); background: var(--c-raised); aspect-ratio: 5 / 4; }
.tabs-image > svg, .tabs-image > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tabs-image img { object-fit: cover; }
.chart { font-family: var(--font-mono); font-size: 11px; fill: var(--c-fg-muted); }
.chart .axis { stroke: var(--c-line-strong); stroke-width: 1; }
.chart .grid { stroke: var(--c-line); stroke-width: 1; }
.chart .band { fill: var(--c-accent); opacity: 0.14; }
.chart .line { fill: none; stroke: var(--c-fg); stroke-width: 2; }
.chart .line.alt { stroke: var(--c-accent); }
.chart .decay { fill: none; stroke: var(--c-fg-subtle); stroke-width: 2; stroke-dasharray: 4 5; }
.chart .bar { fill: var(--c-fg); }
.chart .bar.a { fill: var(--c-accent); }
.chart .bar.m { fill: var(--c-fg-subtle); }
.chart .lbl { fill: var(--c-fg); font-size: 12px; }
.chart .big { font-family: var(--font-sans); font-size: 22px; font-weight: 500; fill: var(--c-fg); }

/* 4 · product options */
.options-x { background: var(--c-raised); }
.opt-num { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; color: var(--c-fg-subtle); }
.tag-soon { display: inline-block; margin-left: 0.5rem; padding: 0.125rem 0.5rem; border-radius: 999px; border: 1px solid var(--c-line-strong); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-fg-muted); vertical-align: middle; }
.logo-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.logo-row span { padding: 0.5rem 0.75rem; border-radius: 8px; border: 1px solid var(--c-line); font-size: 0.8125rem; font-weight: 500; color: var(--c-fg); opacity: 0.6; transition: opacity 0.3s; }
.logo-row span:hover { opacity: 1; }
.opt-card pre { margin: 0; padding: 1rem; border-radius: 10px; border: 1px solid var(--c-line); background: var(--c-canvas); font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.6; overflow: auto; color: var(--c-fg); }
.opt-card pre .c { color: var(--c-fg-subtle); }
.opt-card pre .s { color: var(--c-accent); }

@media (prefers-reduced-motion: reduce) {
  .house-stack .house { transition: none; }
  .answer-card { opacity: 1; translate: none; }
  .type-line .caret { animation: none; }
}