/* Homepage layout, using Typvs' existing color, type and frame tokens. */
.home-hero { padding-top: var(--space-12); padding-bottom: var(--space-10); }
.home-hero .hero-inner { text-align: center; }
.home-hero h1 { max-width: 18ch; margin-inline: auto; }
.home-hero .lede { max-width: 62ch; margin-inline: auto; }
.home-hero .cta-row, .home-page .cta-band .cta-row { justify-content: center; }
.home-hero .eyebrow { margin-bottom: var(--space-5); }
.home-page .button { gap: var(--space-3); }
.home-demo { padding-bottom: var(--space-10); }
.home-demo .product-canvas { min-width: 0; }
.home-demo .study-controls { padding: var(--space-5); }
.demo-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding-top: var(--space-5); }
.demo-bottom .code-note { margin: 0; max-width: 52ch; }
.example-presets { display: flex; gap: var(--space-2); }
.example-presets [aria-pressed="true"] { background: var(--bg-inverse); color: var(--fg-inverse); }
.discipline-strip { padding: var(--space-8) var(--gutter); border-block: 1px solid var(--line); text-align: center; }
.discipline-list { display: grid; grid-template-columns: repeat(6, 1fr); max-width: var(--wide); margin: var(--space-6) auto 0; }
.discipline-list span { padding: var(--space-3); border-left: 1px solid var(--line); font-size: .9375rem; color: var(--fg-muted); }
.discipline-list span:first-child { border-left: 0; }
.home-page .centered-header { max-width: var(--narrow); text-align: center; margin: 0 auto var(--space-10); }
.solution-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: start; }
.solution-list { padding-top: var(--space-4); }
.solution-item { border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + var(--space-6)); }
.solution-trigger { display: flex; align-items: center; gap: var(--space-4); width: 100%; padding: var(--space-5) 0; border: 0; background: none; color: var(--fg-muted); font: inherit; text-align: left; cursor: pointer; }
.solution-trigger[aria-expanded="true"], .solution-trigger:hover { color: var(--fg); }
.item-number { font-size: .75rem; color: var(--fg-faint); font-weight: 400; }
.disclosure-mark { margin-left: auto; font-weight: 400; }
.solution-copy { padding: 0 var(--space-6) var(--space-6); }
.solution-copy p { color: var(--fg-muted); margin: 0; }
.solution-copy .text-link { margin-top: var(--space-4); }
.solution-preview { padding: 0; min-width: 0; position: sticky; top: calc(var(--header-h) + var(--space-5)); }
.example-tools { display: flex; gap: var(--space-2); padding: var(--space-3); }
.example-tools [aria-pressed="true"] { border-color: var(--color-border); background: var(--color-bg-selected); color: var(--color-text-strong); }
.example-stage { padding: var(--space-5); background-color: #0b0b0b; background-image: url('/assets/plus-grid.svg'); background-size: 72px 72px; background-position: center; }
.example-stage svg { width: 100%; height: auto; }
.example-specimen { fill: var(--fg); stroke: none; }
.example-stage:not(.example-solid) .example-specimen { fill: none; stroke: var(--fg); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.example-metric-line { stroke: rgba(246,245,242,.32); stroke-width: 1; vector-effect: non-scaling-stroke; }
.example-metric-label, .example-anatomy-label, .example-row-label { fill: var(--fg-muted); font-family: var(--mono); font-size: 12px; letter-spacing: .055em; }
.example-anatomy-label { fill: var(--fg); font-size: 11px; }
.example-measure-box { fill: none; stroke: rgba(246,245,242,.38); stroke-width: 1; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.example-path { fill: none; stroke: var(--fg); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.example-solid .example-path { fill: var(--fg); stroke: none; }
.example-node { fill: var(--bg-elevated); stroke: var(--fg); stroke-width: 1; vector-effect: non-scaling-stroke; }
.example-guide { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.example-caption { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5); border-top: 1px solid var(--line); }
.example-caption p { margin: var(--space-2) 0 0; }
.example-caption .product-label { padding: 0; margin: 0; }
.solution-preview > .product-help { padding: 0 var(--space-5) var(--space-4); }
@media (min-width: 768px) {
  .solution-list { padding-top: 0; }
  .solution-item {
    min-height: 72svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-8) var(--space-4) var(--space-8) 0;
    border-left: 2px solid transparent;
  }
  .solution-item:first-child { border-top: 1px solid var(--line); }
  .solution-item.is-active { border-left-color: var(--fg); }
  .solution-item h3 { margin: 0; }
  .solution-trigger { font-size: clamp(1.35rem, 2vw, 2rem); padding: 0; }
  .solution-item:not(.is-active) .solution-trigger { color: var(--fg-muted); }
  .solution-item.is-active .solution-trigger { color: var(--fg); }
  .solution-copy { max-width: 42ch; padding: var(--space-5) 0 0 calc(var(--space-4) + 1rem); }
  .disclosure-mark { display: none; }
  .solution-preview { top: calc(var(--header-h) + var(--space-6)); }
  .example-stage { min-height: clamp(280px, 52vh, 640px); display: grid; place-items: center; }
}
.developer-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); align-items: start; }
.api-demo { min-width: 0; }
.home-developers .product-code { padding: 0; }
.home-developers pre { min-height: 360px; }
.developer-tab { width: 100%; display: grid; gap: var(--space-3); padding: var(--space-5); text-align: left; border: 0; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; background: transparent; color: var(--fg-muted); font: inherit; cursor: pointer; }
.developer-tab > span:first-child { display: flex; justify-content: space-between; gap: var(--space-4); }
.developer-tab strong { font-weight: 500; }
.developer-tab[aria-selected="true"] { background: var(--bg-elevated); border-left-color: var(--fg); color: var(--fg); }
.developer-tab:hover { color: var(--fg); }
.developer-description { font-size: .9375rem; line-height: 1.5; }
.developer-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); border-top: 1px solid var(--line); margin-top: var(--space-8); padding-top: var(--space-5); }
.developer-bottom p, .developer-bottom .text-link { margin: 0; }
.home-page .gallery-header { display: flex; align-items: end; justify-content: space-between; gap: var(--space-6); max-width: none; margin-left: 0; }
.gallery-header h2 { max-width: 24ch; }
.gallery-controls { display: flex; gap: var(--space-2); }
.gallery-controls .pill { min-width: 44px; }
.gallery-controls .pill:disabled { opacity: .3; cursor: default; }
.workflow-gallery { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - var(--space-5) * 2) / 3); gap: var(--space-5); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding: var(--space-2) var(--space-2) var(--space-5); }
.workflow-card { padding: 0; scroll-snap-align: start; min-width: 0; }
.workflow-card > a { text-decoration: none; display: block; height: 100%; }
.workflow-art { background: var(--bg-elevated); border-bottom: 1px solid var(--line); aspect-ratio: 1.5; display: grid; place-items: center; overflow: hidden; }
.workflow-art svg { width: 100%; }
.workflow-copy { padding: var(--space-5); }
.workflow-copy h3 { display: flex; justify-content: space-between; gap: var(--space-2); font-size: 1.15rem; }
.workflow-copy .eyebrow { margin: 0 0 var(--space-3); font-size: .75rem; }
.workflow-card a:hover h3, .writing-card:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.writing-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-6); }
.writing-card { display: flex; flex-direction: column; text-decoration: none; padding: var(--space-6) 0; border-top: 1px solid var(--line-strong); }
.writing-card h3 { display: flex; justify-content: space-between; gap: var(--space-4); }
.writing-card > p:not(.eyebrow) { color: var(--fg-muted); font-size: .9375rem; }
.writing-status { margin-top: auto; padding-top: var(--space-6); font-size: .75rem; color: var(--fg-faint); }
.home-page .cta-band { text-align: center; max-width: none; padding-block: var(--space-6); }
.home-page .cta-band h2 { max-width: 20ch; margin-inline: auto; font-size: var(--display); }
.home-page .cta-band p { margin-bottom: 0; }
.home-page .product-code :focus-visible, .home-page .section-contrast :focus-visible { outline-color: var(--fg); }
@media (min-width: 1024px) { .home-page .desktop-nav .nav-list { justify-content: center; } }
@media (max-width: 1023px) {
  .discipline-list { grid-template-columns: repeat(3,1fr); }
  .discipline-list span:nth-child(4) { border-left: 0; }
  .solution-layout, .developer-layout { gap: var(--space-6); grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .solution-copy { padding-inline: 0; }
  .workflow-gallery { grid-auto-columns: calc((100% - var(--space-5)) / 2); }
}
@media (max-width: 767px) {
  .example-metric-label, .example-row-label { font-size: 18px; }
  .example-anatomy-label { display: none; }
  .home-hero { padding-top: var(--space-10); padding-bottom: var(--space-8); }
  .home-hero h1 { max-width: 17ch; }
  .home-hero .eyebrow { max-width: 30ch; margin-inline: auto; }
  .demo-bottom { flex-direction: column; align-items: start; }
  .home-demo .study-slider { grid-template-columns: 40px minmax(0,1fr) 36px; gap: 6px; }
  .home-demo .study-slider strong { grid-column: 2; }
  .home-demo .study-controls { padding: var(--space-4); }
  .home-demo .product-toolbar { flex-wrap: wrap; }
  .home-demo .product-toolbar > .product-label { width: 100%; padding-block: var(--space-2); }
  .discipline-list { grid-template-columns: repeat(2,1fr); }
  .discipline-list span:nth-child(4) { border-left: 1px solid var(--line); }
  .discipline-list span:nth-child(odd) { border-left: 0; }
  .discipline-list span { font-size: .8125rem; }
  .solution-layout, .developer-layout { grid-template-columns: minmax(0,1fr); }
  .solution-preview { position: static; }
  .example-caption { padding: var(--space-4); }
  .home-developers pre { min-height: 320px; padding: var(--space-4); font-size: .75rem; }
  .developer-tabs { order: -1; }
  .developer-tab { padding: var(--space-4); }
  .developer-tab[aria-selected="false"] .developer-description { display: none; }
  .developer-bottom { align-items: start; flex-direction: column; gap: var(--space-3); }
  .home-page .gallery-header { align-items: start; flex-direction: column; }
  .gallery-header .text-link { margin: 0; }
  .workflow-gallery { grid-auto-columns: 88%; }
  .writing-grid { grid-template-columns: minmax(0,1fr); gap: 0; }
  .writing-card { padding-block: var(--space-5); }
  .writing-status { padding-top: var(--space-3); }
}

/* Hero: Generate / Vectorize panel */
.hero-forge { margin-top: var(--space-10); }
.forge { position: relative; padding: 0; text-align: left;
  --tok-tag: #ff8fa8; --tok-attr: #e6b673; --tok-str: #a5d6a0; --tok-op: #a99bff; --tok-num: #8cc8ff; --tok-punct: #8a8a8a; }
.forge-caret { display: inline-block; width: 7px; height: 1.1em; margin-left: 2px; vertical-align: -0.18em; background: var(--color-text-strong); animation: forge-blink 1s steps(1) infinite; }
.forge.is-working .forge-caret { animation: none; opacity: 0; }
@keyframes forge-blink { 50% { opacity: 0; } }
.forge .product-toolbar { flex-wrap: nowrap; }
.forge .product-label { white-space: nowrap; }
.forge .product-tabs { flex-wrap: nowrap; }
.forge-panes { display: grid; grid-template-columns: minmax(0, 1fr); }
.forge-art { position: relative; aspect-ratio: 1 / 1; max-height: 420px; width: 100%; border-bottom: 1px solid var(--color-border);
  background-image: linear-gradient(var(--construction-line-subtle) 1px, transparent 1px), linear-gradient(90deg, var(--construction-line-subtle) 1px, transparent 1px);
  background-size: 24px 24px; background-position: center; }
.forge-art svg { display: block; width: 100%; height: 100%; }
/* No non-scaling-stroke here: dash lengths must stay in user units so the outline starts fully hidden. */
.forge-path { fill: var(--fg); fill-opacity: 0; stroke: var(--fg); stroke-width: .55; stroke-linejoin: round; transition: fill-opacity .35s ease, stroke-opacity .35s ease; }
.forge-svg.is-filled .forge-path { fill-opacity: 1; stroke-opacity: 0; }
.forge-nodes circle { transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; transition: transform .22s cubic-bezier(.3, 1.6, .5, 1), opacity .12s ease; }
.forge-svg.show-nodes .forge-nodes circle { transform: scale(1); opacity: 1; }
.forge-raster rect { fill: var(--fg-muted); opacity: 0; transition: opacity .15s ease; }
.forge-svg.show-raster .forge-raster rect { opacity: .9; }
.forge-svg.dim-raster .forge-raster rect { opacity: .22; transition-delay: 0ms !important; transition-duration: .45s; }
.forge-svg.hide-raster .forge-raster rect { opacity: 0; transition-delay: 0ms !important; transition-duration: .3s; }
.forge-scan { stroke: var(--fg); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; }
.forge-svg.is-scanning .forge-scan { animation: forge-scan .75s cubic-bezier(.45,.05,.25,1) forwards; }
@keyframes forge-scan { 0% { opacity: .85; transform: translateY(0); } 92% { opacity: .85; } 100% { opacity: 0; transform: translateY(240px); } }
.forge-code { position: relative; margin: 0; height: 280px; overflow: auto; padding: 16px 18px; font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--color-text-default); background: var(--color-canvas); scrollbar-width: thin; }
.forge-code code { display: block; font-family: inherit; }
.forge-line { display: block; white-space: pre; opacity: 0; transform: translateY(3px); transition: opacity .1s ease, transform .1s ease; }
.forge-line.is-shown { opacity: 1; transform: none; }
.tok-tag { color: var(--tok-tag); }
.tok-attr { color: var(--tok-attr); }
.tok-str { color: var(--tok-str); }
.tok-op { color: var(--tok-op); font-weight: 600; }
.tok-num { color: var(--tok-num); }
.tok-punct { color: var(--tok-punct); }
.forge-chat { display: flex; align-items: flex-start; min-height: 122px; padding: 14px 16px; border-top: 1px solid var(--color-border); background: var(--color-canvas); }
.forge-bubble { display: grid; gap: 6px; max-width: min(560px, 100%); padding: 10px 14px 11px; border: 1px solid var(--color-border); border-radius: 14px 14px 14px 4px; background: var(--color-bg-selected);
  opacity: 0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease; }
.forge-bubble.is-in { opacity: 1; transform: none; }
.forge-bubble-label { font-size: var(--product-size-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-subtle); }
.forge-bubble-text { margin: 0; min-height: 1.4em; font-size: var(--product-size-sm); line-height: 1.4; color: var(--color-text-strong); }
.forge-attachment { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 3px 8px 3px 6px; border: 1px solid var(--color-border); border-radius: var(--product-radius); font-family: var(--mono); font-size: 11.5px; color: var(--color-text-default); }
.forge-attachment[hidden] { display: none; }
.forge-attachment svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1; }
.forge-status { justify-content: space-between; border-bottom: 0; border-top: 1px solid var(--color-border); font-size: var(--product-size-xs); color: var(--color-text-subtle); }
.forge-status [data-forge-status] { font-family: var(--mono); color: var(--color-text-default); }
.forge-note { text-align: right; }
@media (min-width: 768px) {
  .forge-panes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .forge-art { border-bottom: 0; border-right: 1px solid var(--color-border); max-height: none; }
  .forge-code { height: auto; max-height: none; aspect-ratio: 1 / 1; }
}
@media (max-width: 480px) {
  .forge .product-label, .forge-note { display: none; }
  .forge-code { height: 220px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .forge-caret { animation: none; }
  .forge-path, .forge-nodes circle, .forge-raster rect, .forge-line, .forge-bubble { transition: none !important; }
  .forge-svg.is-scanning .forge-scan { animation: none; }
}