/* Hallmark · macrostructure: Narrative Workflow / diagram-led solution variants
 * genre: modern-minimal · theme: inherited Kinlu studied-DNA · nav: N11 · footer: Ft5
 * P5 H5 E4 S5 R5 V4 · single-family Geist retained at user's explicit request.
 * Existing homepage sections remain unchanged; all new color and type roles consume tokens. */
:root { --z-navigation: 100; --text-detail-hero: clamp(2.5rem,4.3vw + .25rem,4.25rem); --width-dropdown: 36rem; }
.site-navigation { z-index:var(--z-navigation); }
.nav-disclosure { position:relative; }
.nav-disclosure summary { display:flex; align-items:center; gap:var(--space-2xs); min-height:44px; cursor:pointer; font-size:var(--text-sm); list-style:none; white-space:nowrap; }
.nav-disclosure summary::-webkit-details-marker { display:none; }
.nav-disclosure summary > span { display:inline-flex; align-items:center; justify-content:center; flex:0 0 12px; width:12px; height:12px; line-height:1; }
.nav-disclosure summary > span svg { display:block; width:12px; height:12px; }
.nav-disclosure[open] summary > span { transform:rotate(180deg); }
.nav-dropdown { position:absolute; inset-block-start:100%; inset-inline-start:calc(-1 * var(--space-md)); background:var(--color-paper); color:var(--color-ink); border:1px solid var(--color-rule); border-radius:var(--radius-card); padding:var(--space-sm); box-shadow:var(--shadow-card); width:var(--width-dropdown); max-width:calc(100vw - var(--space-xl)); }
.product-dropdown { width:24rem; }
.nav-links .nav-dropdown a { display:flex; align-items:flex-start; flex-direction:column; gap:var(--space-2xs); padding:var(--space-sm); min-height:48px; border-radius:var(--radius-input); white-space:normal; }
.nav-dropdown a strong { font-size:var(--text-sm); font-weight:500; white-space:nowrap; }
.nav-dropdown a span { font-size:var(--text-sm); line-height:1.5; color:var(--color-muted); }
.solution-dropdown { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.nav-dropdown a[aria-current="page"] { text-decoration:underline; text-decoration-color:var(--color-accent); text-underline-offset:4px; }
.mobile-nav { max-height:calc(100dvh - 110px); overflow-y:auto; }
.mobile-nav details { border-bottom:1px solid var(--color-rule); }
.mobile-nav summary { padding:var(--space-sm); cursor:pointer; min-height:48px; font-weight:600; }
.mobile-nav details a { font-size:var(--text-sm); padding-inline:var(--space-md); flex-direction:column; align-items:flex-start; gap:var(--space-2xs); justify-content:center; padding-block:var(--space-xs); }
.mobile-nav details a span { color:var(--color-muted); line-height:1.4; white-space:normal; }
@media(hover:hover){.nav-dropdown a:hover { background:var(--color-landing-panel); color:var(--color-ink); }.nav-disclosure summary:hover { text-decoration:underline; text-decoration-color:var(--color-accent); text-underline-offset:5px; }}
.marketing-subpage h1 { font-size:var(--text-detail-hero); max-width:13ch; }
.detail-hero { padding-block:var(--space-xl) var(--space-2xl); display:grid; align-items:center; gap:var(--space-xl); }
.back-link { display:inline-flex; gap:var(--space-xs); align-items:center; min-height:44px; font-size:var(--text-sm); color:var(--color-muted); margin-bottom:var(--space-md); }
.detail-copy .category { margin-bottom:var(--space-sm); font-weight:600; }
.detail-copy .lede { max-width:49ch; }
.detail-copy .text-link { font-size:var(--text-sm); }
.product-diagram { margin:0; padding:var(--space-sm); background:var(--color-product-panel); color:var(--color-product-ink); border-radius:var(--radius-panel); min-width:0; }
.product-diagram svg { display:block; width:100%; height:auto; font-family:var(--font-body); }
.product-diagram figcaption { font-size:var(--text-sm); line-height:1.6; padding:var(--space-sm); color:var(--color-product-muted); }
.diagram-label { fill:var(--color-product-ink); font-size:20px; font-weight:500; }
.diagram-small { fill:var(--color-product-muted); font-size:18px; }
.diagram-region { fill:var(--color-product-inset); stroke:var(--color-product-rule); stroke-width:1; }
.diagram-dot,.diagram-bar { fill:var(--color-product-muted); }
.diagram-accent,.diagram-bar-accent { fill:var(--color-accent); }
.diagram-rule { stroke:var(--color-product-rule); stroke-width:1; }
.diagram-signal { fill:none; stroke:var(--color-accent); stroke-width:3; stroke-linecap:round; }
.diagram-history { fill:none; stroke:var(--color-product-ink); stroke-width:3; }
.diagram-document { fill:none; stroke:var(--color-product-muted); stroke-width:1.5; }
.detail-problem { display:grid; gap:var(--space-lg); border-block:1px solid var(--color-rule); padding-block:var(--space-xl); }
.detail-problem h2 { font-size:clamp(1.75rem,3vw,2.5rem); max-width:26ch; }
.detail-problem p { max-width:65ch; }
.decision-section { padding-block:var(--space-2xl); }
.decision-section > h2 { max-width:28ch; font-size:clamp(1.75rem,3vw,2.5rem); margin-bottom:var(--space-xl); }
.decision-details { display:grid; gap:var(--space-lg); }
.decision-details article { position:relative; padding-block:var(--space-md); border-top:1px solid var(--color-rule); }
.decision-details h3 { font-size:var(--text-lg); margin-block:var(--space-xs) var(--space-sm); }
.decision-details p { max-width:60ch; }
.detail-marker { font-size:var(--text-sm); color:var(--color-muted); }
.variant-comparison .decision-details,.variant-contrast .decision-details { gap:0; border:1px solid var(--color-rule); border-radius:var(--radius-panel); }
.variant-comparison article,.variant-contrast article { padding:var(--space-lg); border-top:none; }
.variant-comparison article + article,.variant-contrast article + article { background:var(--color-landing-panel); color:var(--color-ink); border-top:1px solid var(--color-rule); }
.variant-priority article { display:grid; grid-template-columns:2rem minmax(0,1fr); column-gap:var(--space-md); }
.variant-priority article .detail-marker { grid-row:1 / 3; padding-top:var(--space-xs); }
.variant-priority article p { grid-column:2; }
.variant-timeline article { border-top:none; border-inline-start:1px solid var(--color-rule-2); padding-inline-start:var(--space-lg); }
.variant-timeline .detail-marker { display:inline-flex; min-height:32px; align-items:center; border-bottom:2px solid var(--color-accent); }
.requirements-section { display:grid; gap:var(--space-xl); padding-block:var(--space-xl); }
.requirements-section h2 { font-size:clamp(1.75rem,3vw,2.5rem); max-width:20ch; margin-bottom:var(--space-lg); }
.plain-list { list-style:none; margin:0; padding:0; }
.plain-list li { padding-block:var(--space-sm); border-bottom:1px solid var(--color-rule); font-size:var(--text-base); line-height:1.6; max-width:60ch; }
.result-column { background:var(--color-landing-panel); color:var(--color-ink); padding:var(--space-lg); border-radius:var(--radius-panel); }
.process-section { padding-block:var(--space-2xl); }
.process-section > h2 { max-width:25ch; font-size:clamp(1.75rem,3vw,2.5rem); }
.process-list { list-style:decimal-leading-zero; margin:var(--space-xl) 0 0; padding-inline-start:var(--space-lg); }
.process-list li { padding-block:var(--space-lg); padding-inline-start:var(--space-sm); border-top:1px solid var(--color-rule); }
.process-list li::marker { color:var(--color-muted); font-size:var(--text-sm); }
.process-list h3 { font-size:var(--text-lg); margin-bottom:var(--space-sm); }
.process-list p { max-width:65ch; }
.concise-page .process-section { padding-block:var(--space-xl); }
.compact-process .process-list { margin-top:var(--space-lg); }
.compact-process .process-list li { padding-block:var(--space-md); }
.compact-process .process-list h3 { margin-bottom:var(--space-xs); }
.concise-page .detail-next { padding-block:var(--space-xl); }
@media(min-width:60rem){
 .compact-process .process-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-xl); }
 .compact-process .process-list li { display:list-item; padding-inline-start:var(--space-xs); }
}
.scope-note { padding-block:var(--space-lg); border-block:1px solid var(--color-rule); }
.scope-note h2 { font-size:var(--text-lg); margin-bottom:var(--space-sm); }
.scope-note p { max-width:80ch; font-size:var(--text-sm); }
.detail-next { display:grid; gap:var(--space-lg); padding-block:var(--space-2xl); }
.detail-next h2 { max-width:23ch; font-size:clamp(2rem,3.5vw,3rem); }
.detail-next > div { display:flex; gap:var(--space-md); align-items:center; flex-wrap:wrap; }
.detail-next p { max-width:65ch; }
.detail-next p a { color:var(--color-ink); text-decoration:underline; }
.related-solutions { border-top:1px solid var(--color-rule); padding-block:var(--space-lg) var(--space-2xl); }
.related-solutions h2 { font-size:var(--text-lg); margin-bottom:var(--space-md); }
.related-solutions > div { display:flex; flex-wrap:wrap; gap:var(--space-xs) var(--space-lg); }
.related-solutions a { display:inline-flex; gap:var(--space-xs); align-items:center; min-height:44px; font-size:var(--text-sm); white-space:nowrap; text-decoration:underline; text-decoration-color:var(--color-rule-2); text-underline-offset:5px; }
@media(min-width:60rem){
 .detail-hero { grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); gap:var(--space-xl); padding-block:var(--space-xl) var(--space-3xl); }
 .detail-problem { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-2xl); align-items:center; }
 .requirements-section { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-2xl); }
 .decision-details { grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-xl); }
 .variant-comparison .decision-details,.variant-contrast .decision-details { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
 .variant-comparison article + article,.variant-contrast article + article { border-top:none; border-inline-start:1px solid var(--color-rule); }
 .variant-priority .decision-details,.variant-timeline .decision-details { grid-template-columns:minmax(0,1fr); max-width:48rem; margin-inline-start:auto; }
 .variant-decision .decision-details { grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr); }
 .process-list li { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--space-xl); }
 .detail-next { grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; }
 .detail-next p { grid-column:1 / -1; }
}
@media(prefers-reduced-motion:no-preference){.nav-disclosure[open] .nav-dropdown { animation:navigation-enter var(--dur-short) var(--ease-out); } @keyframes navigation-enter { from {opacity:0;transform:translateY(-4px);} to {opacity:1;transform:none;} }}
@media(max-width:39.99rem){.detail-copy .text-link { white-space:nowrap; }.detail-copy .actions { align-items:flex-start; flex-direction:column; }.diagram-label {display:none;}}
