.hero { padding-top: clamp(5rem, 11vw, 9rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(3rem, 8vw, 8rem); }
.hero-intro { max-width: 38rem; font-size: clamp(1.05rem, 1.8vw, 1.35rem); }
.hero-note { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-6); font-size: .78rem; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); }
.hero-visual { position: relative; }
.hero-visual-note { position: absolute; top: -2rem; right: 0; color: var(--color-text-muted); font-size: .65rem; letter-spacing: .14em; }
.placeholder-hero { transform: rotate(1.5deg); box-shadow: var(--shadow-lift); }
.placeholder-hero .placeholder-window-body { min-height: 430px; }
.ticker-band { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--color-background-alt); }
.ticker-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) 0; color: var(--color-text-muted); font-size: .7rem; font-weight: 700; letter-spacing: .13em; }
.ticker-inner b { color: var(--color-primary); font-size: 1rem; }
.split-heading { display: grid; grid-template-columns: .7fr 1.3fr; gap: var(--space-7); }
.split-heading h2 { max-width: 10ch; }
.split-heading > div > p { max-width: 40rem; font-size: 1.1rem; }
.section-heading { max-width: 48rem; margin-bottom: var(--space-7); }
.section-heading.narrow { max-width: 40rem; }
.section-heading > p:last-child { max-width: 38rem; font-size: 1.05rem; }
.workflow { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--color-border); }
.workflow article { min-height: 220px; padding: var(--space-5) var(--space-4) var(--space-3) 0; border-right: 1px solid var(--color-border); }
.workflow article + article { padding-left: var(--space-4); }
.workflow article:last-child { border-right: 0; }
.workflow span, .panel-index, .feature-ledger-list article > span { color: var(--color-primary); font-size: .75rem; font-weight: 700; letter-spacing: .1em; }
.workflow h3 { margin: var(--space-5) 0 var(--space-2); }
.workflow p { font-size: .9rem; }
.capability-explorer { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.capability-list { border-right: 1px solid var(--color-border); }
.capability-tab { display: grid; grid-template-columns: 2.5rem 1fr; width: 100%; padding: var(--space-4) 0; border: 0; border-bottom: 1px solid var(--color-border); background: transparent; color: var(--color-text-muted); text-align: left; cursor: pointer; transition: color var(--transition-speed) ease, padding var(--transition-speed) ease; }
.capability-tab:last-child { border-bottom: 0; }
.capability-tab:hover, .capability-tab.is-selected { padding-left: var(--space-3); color: var(--color-text); }
.capability-tab span { color: var(--color-primary); font-size: .75rem; }
.capability-panels { position: relative; min-height: 360px; padding: var(--space-7); background: var(--color-background-alt); }
.capability-panel h3 { max-width: 18ch; margin: var(--space-4) 0; font-size: clamp(1.7rem, 3vw, 2.7rem); }
.capability-panel p:not(.panel-index) { max-width: 34rem; }
.capability-panel .text-link { margin-top: var(--space-5); }
.showcase-header { display: flex; align-items: end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-6); }
.showcase-header > p { max-width: 22rem; margin-bottom: var(--space-2); font-size: .9rem; }
.showcase-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: var(--space-4); align-items: start; }
.showcase-grid .placeholder-wide:first-child { grid-row: span 2; }
.showcase-grid .placeholder-wide:last-child { grid-column: span 1; }
.placeholder-tall .placeholder-window-body { min-height: 230px; }
.principles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-6); max-width: 48rem; }
.principles p { padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.principles strong { display: block; margin-bottom: var(--space-1); color: var(--color-text); }
.demo-section { background: var(--color-primary-soft); }
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 8vw, 8rem); align-items: start; }
.demo-grid h2 { max-width: 9ch; }
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--space-7); }
.faq-list details { border-top: 1px solid var(--color-border); }
.faq-list details:last-child { border-bottom: 1px solid var(--color-border); }
.faq-list summary { padding: var(--space-4) 0; color: var(--color-text); font-weight: 700; cursor: pointer; list-style: none; }
.faq-list summary::after { float: right; color: var(--color-primary); content: "+"; font-size: 1.3rem; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { max-width: 42rem; padding: 0 2rem var(--space-4) 0; }
.page-hero { padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: clamp(3rem, 6vw, 6rem); border-bottom: 1px solid var(--color-border); background: var(--color-background-alt); }
.page-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: end; }
.page-hero h1 { max-width: 12ch; }
.hero-index, .hero-mark { justify-self: end; color: var(--color-primary); font-size: clamp(2.5rem, 8vw, 8rem); font-weight: 800; letter-spacing: -.09em; line-height: .82; text-align: right; }
.hero-index span, .hero-mark span { display: inline-block; margin-top: var(--space-4); color: var(--color-text-muted); font-size: .75rem; letter-spacing: .15em; line-height: 1.3; }
.feature-ledger-list { border-top: 1px solid var(--color-border); }
.feature-ledger-list article { display: grid; grid-template-columns: 4rem 1fr 3rem; gap: var(--space-4); align-items: start; padding: var(--space-5) 0; border-bottom: 1px solid var(--color-border); }
.feature-ledger-list h3 { margin-bottom: var(--space-2); }
.feature-ledger-list p { max-width: 44rem; margin-bottom: 0; }
.feature-ledger-list article > a { justify-self: end; color: var(--color-primary); font-size: 1.5rem; text-decoration: none; }
.two-column-callout, .banner-cta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center; }
.two-column-callout p { max-width: 38rem; font-size: 1.1rem; }
.detail-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--space-7); }
.detail-statement h2 { max-width: 11ch; }
.detail-copy { max-width: 39rem; font-size: 1.08rem; }
.check-list { display: grid; gap: var(--space-3); padding: var(--space-4) 0 0; margin: var(--space-5) 0 0; border-top: 1px solid var(--color-border); list-style: none; }
.check-list li::before { display: inline-block; width: 1.5rem; color: var(--color-primary); content: "—"; }
.showcase-single .section-heading { margin-bottom: var(--space-5); }
.placeholder-feature .placeholder-window-body { min-height: 430px; }
.placeholder-asset .placeholder-sidebar { background: var(--color-primary-soft); }
.output-rail { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: var(--space-5) 0 var(--space-6); padding: var(--space-4) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); color: var(--color-text-muted); font-size: .7rem; font-weight: 700; letter-spacing: .08em; }
.output-rail b { color: var(--color-primary); font-size: 1rem; }
.placeholder-output .placeholder-window-body { min-height: 360px; }
.legal-copy { max-width: 48rem; }
.legal-copy h2 { max-width: none; margin-top: var(--space-7); font-size: clamp(1.7rem, 3vw, 2.4rem); }
.legal-copy p { max-width: 42rem; font-size: 1.05rem; }
.legal-copy a { color: var(--color-primary); font-weight: 700; }

/* Homepage rhythm and integrated capability showcase. */
.homepage .site-container { width: min(calc(100% - 3rem), var(--container-width-home)); }
.homepage .section-pad { padding: var(--section-spacing-home) 0; }
.homepage .hero { padding: clamp(4rem, 7vw, 6.5rem) 0 var(--section-spacing-home-tight); }
.homepage .hero-grid { grid-template-columns: minmax(30rem, .92fr) minmax(0, 1.08fr); gap: var(--home-column-gap); }
.homepage .hero-copy { max-width: var(--home-copy-width); }
.homepage .hero-copy h1 { max-width: var(--home-hero-heading-width); font-size: var(--font-size-home-hero); }
.homepage .hero-intro { max-width: var(--home-copy-width); }
.homepage .hero-visual { min-width: 0; }
.homepage .placeholder-hero { transform: rotate(1.5deg); }
.homepage .ticker-inner { padding: var(--space-3) 0; }
.homepage .split-heading h2,
.homepage .section-heading h2,
.homepage .demo-grid h2,
.homepage .faq-grid h2 { font-size: var(--font-size-home-section-heading); }
.homepage .problem-section,
.homepage #how-it-works,
.homepage .why-section,
.homepage .faq-section { padding: var(--section-spacing-home-tight) 0; }
.homepage .split-heading { grid-template-columns: .35fr .65fr; gap: var(--home-column-gap); }
.homepage .problem-section .eyebrow { padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
.homepage .problem-section .split-heading h2 { max-width: 16ch; }
.homepage .why-section .split-heading h2 { max-width: 14ch; }
.homepage .section-heading { margin-bottom: var(--space-6); }
.homepage .workflow article { min-height: var(--home-workflow-min-height); padding-top: var(--space-4); }
.homepage .workflow h3 { margin-top: var(--space-4); }
.homepage .explore-section { padding-top: var(--section-spacing-home-tight); padding-bottom: var(--section-spacing-home); }
.homepage .explore-section .section-heading { max-width: 44rem; }
.homepage .capability-explorer { grid-template-columns: minmax(15rem, .72fr) minmax(0, 1.28fr); }
.homepage .capability-list { padding-right: var(--space-5); }
.homepage .capability-tab { min-height: 3.5rem; padding: var(--space-3) 0; }
.homepage .capability-panels { min-height: var(--home-explore-panel-min-height); padding: var(--space-6); }
.homepage .capability-panel { min-height: calc(var(--home-explore-panel-min-height) - (2 * var(--space-6))); }
.homepage .capability-panel h3 { max-width: 22ch; font-size: var(--font-size-home-panel); }
.homepage .capability-panel p:not(.panel-index) { max-width: 40rem; }
.homepage .capability-panel .text-link { align-self: flex-start; margin-top: var(--space-4); }
.homepage .capability-screenshot { margin-top: var(--space-5); }
.homepage .capability-screenshot-tall { width: min(100%, var(--home-tall-screenshot-width)); margin-right: auto; margin-left: auto; }
.homepage .capability-support-list { display: grid; gap: var(--space-2); padding: var(--space-4) 0; margin: var(--space-5) 0 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); list-style: none; }
.homepage .capability-support-list li::before { display: inline-block; width: 1.5rem; color: var(--color-primary); content: "—"; }
.homepage .demo-grid { gap: var(--home-column-gap); }
.homepage .faq-grid { gap: var(--home-column-gap); }
.homepage .faq-list summary { padding: var(--space-3) 0; }

@media (max-width: 900px) {
    .homepage .site-container { width: min(calc(100% - 3rem), var(--container-width-home)); }
    .homepage .hero-grid { grid-template-columns: 1fr; gap: var(--space-6); }
    .homepage .hero-copy { max-width: 42rem; }
    .homepage .hero-copy h1 { max-width: 12ch; }
    .homepage .capability-explorer { grid-template-columns: 1fr; }
    .homepage .capability-list { padding-right: 0; }
    .homepage .capability-panels { min-height: auto; }
    .homepage .capability-panel { min-height: auto; }
}

@media (max-width: 600px) {
    .homepage .site-container { width: min(calc(100% - 2rem), var(--container-width-home)); }
    .homepage .hero { padding-top: var(--section-spacing-home-tight); }
    .homepage .hero-copy h1 { max-width: 11ch; }
    .homepage .split-heading { grid-template-columns: 1fr; gap: var(--space-5); }
    .homepage .workflow article { min-height: auto; }
    .homepage .capability-panels { padding: var(--space-5); }
    .homepage .capability-panel { min-height: auto; }
    .homepage .capability-screenshot-tall { width: 100%; }
    .homepage .demo-section { padding: var(--section-spacing-home-tight) 0; }
}
@media (max-width: 900px) { .hero-grid, .demo-grid, .faq-grid, .detail-grid, .two-column-callout, .banner-cta, .page-hero-grid { grid-template-columns: 1fr; gap: var(--space-6); } .hero-visual-note { position: static; margin-bottom: var(--space-2); } .hero-mark, .hero-index { justify-self: start; text-align: left; } .workflow { grid-template-columns: repeat(2, 1fr); } .workflow article:nth-child(2) { border-right: 0; } .workflow article:nth-child(n + 3) { border-top: 1px solid var(--color-border); } .capability-explorer { grid-template-columns: 1fr; } .capability-list { border-right: 0; border-bottom: 1px solid var(--color-border); } .capability-tab { grid-template-columns: 2.5rem 1fr; } }
@media (max-width: 600px) { h1 { max-width: 11ch; } .ticker-inner { flex-wrap: wrap; justify-content: flex-start; } .ticker-inner b { display: none; } .workflow { grid-template-columns: 1fr; } .workflow article, .workflow article + article { min-height: auto; padding: var(--space-4) 0; border-right: 0; border-top: 1px solid var(--color-border); } .workflow article:first-child { border-top: 0; } .capability-panels { min-height: 0; padding: var(--space-5); } .showcase-header, .showcase-grid, .principles { grid-template-columns: 1fr; display: grid; } .showcase-grid .placeholder-wide:first-child { grid-row: auto; } .feature-ledger-list article { grid-template-columns: 2.5rem 1fr; } .feature-ledger-list article > a { grid-column: 2; justify-self: start; } .output-rail { align-items: flex-start; flex-direction: column; } .output-rail b { display: none; } }