/* Optional sketch edition: keep the product UI and shared palette intact. */
/* 4× artwork: 5332×4492, with a 4800×3000 (16:10) opening at (264,204). */
.hero-workspace { width:85%; margin-inline:auto; }
.hero-monitor { position:relative; isolation:isolate; aspect-ratio:1333/1123; }
.hero-monitor::after { content:""; position:absolute; inset:0; background:url('images/monitor-reference.webp?v=20261027-16x10') center / 100% 100% no-repeat; pointer-events:none; }
.hero-demo { position:absolute; left:4.9512378%; top:4.541407%; width:90.0225056%; height:66.7853963%; overflow:hidden; border:0; border-radius:2px; box-shadow:none; background:#fff; }
.hero-demo img { display:block; width:100%; height:100%; object-fit:contain; }
.hero-demo video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; visibility:hidden; }
.hero-demo.is-playing video { visibility:visible; }
.hero-workspace figcaption[hidden] { display:none; }
.hero-video-status:empty { display:none; }
.founders-note { padding-block:85px; isolation:isolate; }
.founders-note::before { content:""; position:absolute; z-index:-1; inset:0 auto 0 50%; width:100vw; transform:translateX(-50%); background:#fff; border-block:1px solid var(--line); pointer-events:none; }
.core-principles,.before-section,.journey-section,.automation-section,.founders-note,.security-section { position:relative; border-bottom:0; }
.core-principles { isolation:isolate; }
.core-principles::before { content:""; position:absolute; z-index:-1; inset:0 auto 0 50%; width:100vw; transform:translateX(-50%); background:#fff; }
.journey-section::before { content:""; position:absolute; left:50%; top:0; width:100vw; transform:translateX(-50%); border-top:1px solid var(--line); pointer-events:none; }
.core-principles::after,.before-section::after,.journey-section::after,.automation-section::after,.security-section::after { content:""; position:absolute; left:50%; bottom:0; width:100vw; transform:translateX(-50%); border-bottom:1px solid var(--line); pointer-events:none; }
.security-section { padding-block:85px; }
.security-section h2 { font-size:clamp(30px,3.1vw,43px); margin-top:16px; }
.security-intro { max-width:60ch; margin-top:18px; font-size:var(--text-size); line-height:1.7; color:var(--body); }
.security-motto { margin-top:16px; font-size:16px; color:var(--green); }
.security-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin-top:32px; }
.security-grid article { position:relative; padding-top:27px; }
.security-grid article::before { content:""; position:absolute; inset:0 0 auto; height:5px; background:var(--green); transform:scaleY(.2); transform-origin:top; transition:transform .3s ease; }
.security-grid article:hover::before,.security-grid article:focus-within::before { transform:scaleY(1); }
@media(prefers-reduced-motion:reduce) { .security-grid article::before { transition:none; } }
.security-grid h3 { font-size:20px; line-height:1.4; color:var(--green); }
.security-grid p { max-width:60ch; margin-top:12px; font-size:var(--text-size); line-height:1.7; color:var(--body); }
@media(max-width:900px) { .security-grid { grid-template-columns:1fr; gap:24px; } }
@media(max-width:700px) { .security-section { padding-block:55px; } }
.faq-section { position:relative; isolation:isolate; display:grid; grid-template-columns:1fr 1.5fr; gap:65px; padding-block:75px; background:#fff; }
.faq-section::before { content:""; position:absolute; z-index:-1; inset:0 auto 0 50%; width:100vw; transform:translateX(-50%); background:#fff; }
.faq-heading { align-self:start; padding-top:22px; }
.faq-section h2 { font-size:clamp(30px,3.1vw,43px); }
.faq-heading .eyebrow,.founders-heading .eyebrow { margin-bottom:18px; }
.faq-list details { border-bottom:1px solid var(--line); }
.faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0; list-style:none; cursor:pointer; font-size:18px; color:var(--ink); }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary:focus-visible { outline:2px solid var(--green); outline-offset:4px; }
.faq-list summary span { position:relative; flex:0 0 16px; height:16px; }
.faq-list summary span::before,.faq-list summary span::after { content:""; position:absolute; background:var(--green); left:0; top:7px; width:16px; height:1.5px; }
.faq-list summary span::after { transform:rotate(90deg); transition:transform .24s ease,opacity .24s ease; }
.faq-list details[open] summary span::after { transform:rotate(90deg) scaleX(0); opacity:0; }
.faq-list p { font-size:15px; line-height:1.75; padding:0 32px 24px 0; color:var(--body); }
@media(prefers-reduced-motion:reduce) { .faq-list summary span::after { transition:none; } }
@media(max-width:700px) { .faq-section { grid-template-columns:1fr; gap:20px; padding-block:55px; }.faq-heading { padding-top:0; }.faq-list summary { font-size:17px; }.faq-list p { padding-right:0; } }
.founders-letter { max-width:68ch; margin:auto; font:400 var(--text-size)/1.7 var(--font-family); color:var(--body); }
.founders-heading h2 { font-size:clamp(30px,3.1vw,43px); color:var(--ink); }
.founders-letter p+p { margin-top:22px; }
.founders-letter .founders-promise { color:var(--green); margin-top:30px; }
.founders-signatures { display:block; width:100%; max-width:530px; height:auto; margin-top:40px; }
@media(max-width:700px) { .founders-note { padding-block:55px; } }
.phase-nav.phase-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; margin:0; padding:6px; gap:6px; border:0; border-radius:var(--radius); background:var(--soft-green); font-weight:var(--font-weight-medium); }
.phase-nav.phase-tabs a { justify-content:center; min-height:48px; padding:12px 16px; border:0; border-radius:4px; font-size:16px; line-height:1.4; color:var(--green); background:transparent; transition:background .2s ease,color .2s ease; }
.phase-nav.phase-tabs a>span { display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; border:1px solid currentColor; border-radius:50%; background:transparent; color:inherit; font-size:12px; line-height:1; }
.phase-nav.phase-tabs a:hover { background:#ffffff80; }
.phase-nav.phase-tabs a[aria-current="location"] { background:var(--green); color:#fff; box-shadow:none; }
.phase-nav.phase-tabs a:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
@media(max-width:1200px) { .phase-nav.phase-tabs a { flex-direction:column; gap:6px; } }
.accept-annotation { min-height:36px; font:12px var(--font-family); padding:6px 12px; border:1px solid var(--line); border-radius:4px; background:white; color:var(--ink); cursor:pointer; }
.accept-annotation:hover:not(:disabled) { background:var(--soft-green); border-color:var(--green); }
.accept-annotation:disabled { color:var(--green); cursor:default; }
#workspace .scene-content { padding:0; }
.annotated-editor { position:relative; }
.inquiry-main h4 { font-size:15.3px; margin-bottom:14px; }
.annotated-text { padding:12px; border:1px solid #dadcd6; border-radius:4px; font:11.9px/1.85 var(--font-family); min-height:180px; user-select:text; }
.annotated-text mark { background:#f5dce6; color:inherit; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.annotated-text mark[data-finding="liquidity"] { background:#f5edc6; }
.annotated-text mark[data-finding="accepted"] { background:#dfeef0; }
.annotated-text p+p { margin-top:20px; }
.inquiry-main .editor-subject { font-size:9.35px; margin-bottom:18px; color:var(--body); }
.annotation-links { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.annotation-links path { stroke:#97a3a0; stroke-width:1; fill:none; }
.approval-suggestion { padding:12px; margin:0 0 14px; background:var(--soft-green); border-radius:4px; width:100%; }.approval-suggestion>span { display:block; font-size:8.5px; color:var(--body); margin-bottom:6px; }
.automation-graph.is-visible .chart-line { animation:draw-automation 2.4s ease-in-out both; }
.automation-graph.is-visible .chart-area { animation:reveal-chart 2.4s ease-in-out both; }
@keyframes draw-automation { from { stroke-dasharray:1; stroke-dashoffset:1; } to { stroke-dasharray:1; stroke-dashoffset:0; } }
@keyframes reveal-chart { from { opacity:0; } to { opacity:1; } }
@media(prefers-reduced-motion:reduce) { .automation-graph.is-visible .chart-line,.automation-graph.is-visible .chart-area { animation:none; } }
.principles-grid>a { background:transparent; border:1px solid var(--line); border-radius:var(--radius); padding:24px; transition:background .2s ease,border-color .2s ease; }
.principle-sketch { display:block; width:auto; max-width:100%; height:clamp(180px,16vw,280px); object-fit:contain; margin:0 auto 32px; transition:transform .3s ease; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) { .principles-grid>a:hover .principle-sketch { transform:scale(1.025); } }
.closing-section.wrap { margin-top:0; border-top:0; background:var(--surface); }
.closing-sketch { display:block; width:100%; height:auto; max-width:620px; justify-self:center; }
.inputs-sketch { margin:0; }.inputs-sketch>svg { display:block; width:100%; height:auto; mix-blend-mode:multiply; }
.inputs-floating { animation:float-inputs 5.4s ease-in-out infinite; }
.inputs-note { --float-rise:-20px; --float-fall:10px; animation-duration:7s; animation-delay:-1.2s; }
.inputs-email { --float-rise:-14px; --float-fall:8px; animation-duration:8.5s; animation-delay:-3.5s; }
.inputs-task { --float-rise:-26px; --float-fall:12px; animation-duration:7.8s; animation-delay:-.4s; }
@keyframes float-inputs { 0%,100% { transform:translateY(var(--float-fall)); } 50% { transform:translateY(var(--float-rise)); } }
@media(prefers-reduced-motion:reduce) { .inputs-floating { animation:none; } }
#workspace .scroll-story { display:block; timeline-scope:none; }
#workspace .story-step { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--layout-gap); padding:64px 0; align-items:center; }
#workspace .phase-visual { position:static; height:auto; min-height:0; width:100%; max-width:none; animation:none; grid-area:auto; background:transparent; border:0; overflow:visible; }
#workspace .scene-content { border:0; border-radius:0; background:transparent; font-size:13.6px; }
#workspace figcaption.phase-detail { margin-top:16px; padding:0; font-size:var(--small-size); line-height:1.7; color:#718097; max-width:none; }
#workspace figcaption.phase-detail::before { content:none; }
#workspace .phase-copy { grid-area:auto; display:block; padding:25px 0; view-timeline-name:none; }
#workspace .phase-description { animation:none; opacity:1; }
@media(min-width:901px) {
  #workspace .step-inquiry { grid-template-rows:auto auto; row-gap:0; }
  #workspace .step-inquiry .phase-visual { display:grid; grid-column:1; grid-row:1 / 3; grid-template-rows:subgrid; }
  #workspace .step-inquiry .phase-copy { grid-column:2; grid-row:1; }
}
.inquiry-editor { display:grid; grid-template-columns:minmax(0,65fr) minmax(0,35fr); background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; font-family:var(--font-family); }
.inquiry-main { padding:18px 14px; min-width:0; }.inquiry-main label { display:block; font-size:18px; font-weight:bold; margin-bottom:14px; }
.inquiry-main textarea { width:100%; resize:none; padding:12px; border:1px solid #dadcd6; border-radius:4px; background:#fff; color:var(--ink); font:14px/1.85 var(--font-family); }
.context-files { display:flex; align-items:center; gap:5px; margin-top:18px; font-size:7.65px; white-space:nowrap; }.context-files span { padding:5px 4px; border:1px solid var(--line); border-radius:4px; }.context-files i { font-style:normal; color:var(--green); }
.intelligence-demo { padding-top:22px; margin-top:22px; border-top:1px solid var(--line); }.intelligence-demo h4 { font-size:16px; }.intelligence-demo p { font-size:11px; margin:13px 0 8px; }.intelligence-demo p span { display:block; color:var(--body); }
.demo-tags { display:flex; flex-wrap:wrap; gap:5px; font-size:10px; }.demo-tags>* { padding:4px 7px; border:1px solid var(--line); border-radius:4px; }.demo-tags strong { background:#eedbd3; color:#804a39; }
.next-step-demo { padding:24px 0; border:1px solid var(--line); border-radius:6px; background:white; }.next-step-demo .editor-action-grid { grid-template-columns:1fr; }.next-step-demo .editor-action-grid>div { padding:16px; }.next-step-demo .editor-action-grid strong { font-size:11.9px; }.next-step-demo .editor-action-grid p { font-size:10.2px; }.next-step-demo .editor-control { font-size:9.35px; }
.delegation-example { margin:0 18px; padding:18px; background:var(--soft-green); border-radius:5px; }.delegation-example h4 { font-size:16px; margin:12px 0; }.delegation-example>p { font-size:12px; }.delegation-example>div { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; font-size:11px; color:var(--green); }
.site-header { background:transparent; border-bottom:1px solid transparent; box-shadow:none; backdrop-filter:none; transition:background-color .45s ease,border-color .45s ease,box-shadow .45s ease; }
.site-header.is-scrolled { background:#fff; border-bottom-color:var(--line); box-shadow:0 4px 16px #1c20240a; }
@media(prefers-reduced-motion:reduce) { .site-header { transition:none; } }
.phase-description>p:not(.phase-kicker)+p { margin-top:16px; }
#inputs .landing-copy { width:100%; max-width:60ch; margin-inline:auto; }
#inputs .input-explanation { padding:20px 22px; border:0; border-radius:8px; background:var(--surface); }
#inputs .input-info { display:block; width:40px; height:40px; margin-bottom:16px; color:var(--secondary-ink); }
#inputs .landing-copy>p:not(.copy-eyebrow), #inputs .input-explanation p { max-width:60ch; font-size:var(--text-size); font-weight:400; line-height:1.7; color:var(--body); }
.phase-detail { position:relative; }
.phase-detail::before { content:""; position:absolute; left:-48px; top:2px; width:40px; height:28px; background:url('images/brush-arrow.svg') center/contain no-repeat; }
@media(max-width:900px) { .phase-detail { padding-left:34px; }.phase-detail::before { left:0; width:26px; height:26px; transform:rotate(90deg); } }
.risk-low { background:#e5ecd9; color:#405338; }.risk-medium { background:#f2e9c9; color:#6f5924; }.risk-high { background:#eedbd3; color:#804a39; }
.case-editor-scene { padding:10px 18px 18px; }
.case-editor { display:grid; grid-template-columns:minmax(0,1fr) 120px; background:white; border:1px solid var(--line); box-shadow:0 5px 15px #1c222312; font-family:var(--font-family); color:var(--ink); }
.editor-document { padding:22px 18px; }.editor-document h4 { font-size:19px; }.editor-document p { font-size:12px; line-height:1.7; margin-top:18px; }.editor-document .editor-subject { margin-top:8px; color:var(--body); font-size:11px; }
.editor-document mark { background:#dfedf0; color:inherit; }
.editor-annotations { background:#eeeee4; padding:18px 8px; font-size:12px; color:var(--body); }
#workspace .inquiry-editor .editor-annotations { padding-left:clamp(16px,2vw,34px); }
.editor-annotations>div { background:white; border:1px solid #deded8; border-radius:6px; padding:12px 9px; margin-top:12px; }
.editor-annotations strong { color:var(--green); font-size:12px; }.editor-annotations p { margin:10px 0; line-height:1.6; }.editor-annotations small { font-size:11px; }
.editor-actions { grid-column:1 / -1; padding:0 18px 22px; }.editor-actions h4 { font-size:13.6px; margin:20px 0 12px; }
.editor-divider { display:flex; align-items:center; gap:12px; font-size:8.5px; color:var(--body); }.editor-divider::before,.editor-divider::after { content:""; height:1px; background:var(--line); flex:1; }
.editor-action-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }.editor-action-grid>div { display:flex; flex-direction:column; align-items:flex-start; padding:12px 8px; border:1px solid #ddd; border-radius:5px; }.editor-action-grid strong { font-size:11px; }.editor-action-grid p { font-size:10px; line-height:1.5; color:var(--body); margin:8px 0 16px; }
.editor-control { font-size:9px; padding:6px; border:1px solid #ddd; border-radius:4px; margin-top:auto; }.editor-primary { background:var(--green); color:white; border-color:var(--green); }
.automation-section { display:grid; grid-template-columns:1fr 1fr; gap:65px; align-items:center; padding-block:85px; }
.automation-copy h2 { font-size:clamp(30px,3.1vw,43px); margin:18px 0 24px; }.automation-copy>p { color:var(--body); }
.automation-stages { list-style:none; padding:0; margin:32px 0 0; }.automation-stages li { display:flex; align-items:flex-start; gap:18px; margin-top:24px; }.automation-stages li>span { display:grid; place-items:center; flex-shrink:0; width:28px; height:28px; border:0; border-radius:50%; background:var(--soft-green); color:var(--green); font-size:12px; line-height:1.5; letter-spacing:0; }.automation-stages h3 { font-size:20px; margin:0 0 8px; }.automation-stages p { max-width:60ch; font-size:var(--text-size); color:var(--body); line-height:1.7; }
.automation-copy .automation-note { font-size:11px; line-height:1.8; }
.agent-handoff { padding-block:85px; text-align:center; }
.agent-handoff h2 { font-size:clamp(30px,3.1vw,43px); }
.agent-handoff>.eyebrow { margin-bottom:18px; }
.agent-handoff>p:not(.eyebrow) { max-width:650px; margin:20px auto 0; color:var(--body); font-size:16px; line-height:1.85; }
.agent-handoff-flow { display:grid; grid-template-columns:minmax(0,280px) minmax(60px,120px) minmax(0,280px) minmax(60px,120px) minmax(0,280px); justify-content:center; align-items:start; margin-top:48px; }
.agent-handoff-flow img { display:block; width:100%; height:auto; mix-blend-mode:multiply; }
.agent-handoff-flow figcaption { font-size:24px; font-weight:var(--font-weight-medium); color:var(--green); margin-top:8px; }
.agent-handoff-connector { position:relative; align-self:center; margin-bottom:48px; }
.agent-handoff-connector img { width:100%; height:auto; }
.agent-handoff-connector span { position:absolute; bottom:100%; left:0; width:100%; color:var(--body); font-size:12px; }
@media(max-width:900px) { .agent-handoff-flow { grid-template-columns:repeat(2,minmax(0,1fr) 60px) minmax(0,1fr); }.agent-handoff-flow figcaption { font-size:20px; } }
@media(max-width:600px) { .agent-handoff { padding-block:55px; }.agent-handoff-flow { grid-template-columns:1fr; gap:6px; }.agent-handoff-flow figure { width:min(100%,240px); justify-self:center; }.agent-handoff-connector { width:100px; height:110px; justify-self:center; position:relative; padding:0; margin-bottom:0; }.agent-handoff-connector img { width:80px; transform:rotate(90deg); margin:45px auto 20px; }.agent-handoff-connector span { top:0; bottom:auto; left:0; width:100%; white-space:nowrap; } }
.context-retrieval { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:65px; align-items:center; padding-block:85px; }
.context-retrieval::before { content:""; position:absolute; left:50%; top:0; width:100vw; transform:translateX(-50%); border-top:1px solid var(--line); pointer-events:none; }
.context-retrieval h2 { font-size:clamp(30px,3.1vw,43px); margin-bottom:24px; }
.context-retrieval-copy p:not(.eyebrow) { max-width:60ch; font-size:var(--text-size); line-height:1.7; color:var(--body); }
.context-retrieval-copy .eyebrow { margin-bottom:18px; }
.context-retrieval-copy p+p { margin-top:18px; }
.context-retrieval-sketch svg { display:block; width:100%; height:auto; mix-blend-mode:multiply; }
.context-retrieval-sketch figcaption { margin-top:16px; text-align:center; font-size:13px; color:var(--green); }
#made-for-you .fit-layout { align-items:center; }
#made-for-you .feature-list { display:flex; align-items:center; max-width:68ch; }
@media(min-width:801px) { #made-for-you .fit-layout { grid-template-columns:1fr 1fr; } }
#made-for-you .feature { width:100%; max-width:560px; gap:20px; padding:32px; border:0; background:var(--surface); border-radius:var(--radius); box-shadow:none; }
#made-for-you .feature h3 { margin:3px 0 12px; }
#made-for-you .feature-icon { border:0; background:transparent; color:var(--green); box-shadow:none; }
@media(max-width:900px) { .context-retrieval { grid-template-columns:1fr; gap:30px; padding-block:55px; }.context-retrieval-sketch { width:100%; max-width:480px; justify-self:center; } }
.automation-graph { margin:0; padding:28px 18px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }.automation-graph figcaption { font-size:17px; padding:0 14px; }.automation-graph svg { width:100%; display:block; margin-top:28px; overflow:visible; }.automation-graph text { font-size:13px; fill:var(--body); font-family:inherit; }.chart-grid { stroke:var(--line); stroke-dasharray:4 5; fill:none; }.chart-axis { fill:none; stroke:#b8c1b0; }.chart-area { fill:#e1e8d9; }.chart-line { fill:none; stroke:var(--green); stroke-width:3; }.chart-points { fill:var(--paper); stroke:var(--green); stroke-width:3; }.chart-labels text { fill:var(--green); font-size:12px; }.automation-graph>p { font-size:12px; color:var(--green); text-align:center; margin:12px 0; }.automation-graph small { display:block; text-align:center; font-size:10px; color:var(--body); }
@media(max-width:900px) {
  #workspace .story-step { grid-template-columns:1fr; gap:15px; }
  #workspace .phase-copy { max-width:none; }
  .automation-section { grid-template-columns:1fr; gap:35px; }
  .automation-graph { width:100%; max-width:600px; justify-self:center; }
}
@media(max-width:700px) {
  .phase-nav.phase-tabs { padding:4px; gap:3px; border-radius:11px; }.phase-nav.phase-tabs a { min-height:44px; font-size:13px; padding:10px 4px; border-radius:7px; }
  .inquiry-editor { grid-template-columns:1fr; }
  .principle-sketch { height:180px; margin-bottom:18px; }
  .closing-sketch { max-width:330px; margin-top:24px; }
  .case-editor { grid-template-columns:1fr; }.editor-annotations { padding:12px 16px; }.editor-annotations>div { margin-top:7px; }.editor-actions { padding:18px 16px; }.editor-action-grid { grid-template-columns:1fr; }.editor-action-grid>div { padding:12px; }.editor-action-grid strong { font-size:11.05px; }.editor-action-grid p { font-size:10.2px; margin-bottom:10px; }.editor-control { font-size:9.35px; }
  .visual-action { height:auto; }.case-editor-scene { flex:none; }
  .automation-section { padding-block:55px; }.automation-graph { padding:24px 8px; }
}
/* Shared reading scale and section rhythm; the miniature product UI keeps its own scale. */
.core-principles,.before-section,.journey-section,.automation-section,.context-retrieval,
.founders-note,.agent-handoff,.security-section,.fit-section,.faq-section,.closing-section.wrap { padding-block:var(--section-space); }
.community-section { padding-block:var(--section-space) calc(var(--section-space) * .7); }
@media(min-width:1800px) {
  .community-section { padding-block:0 var(--section-space); }
  /* Compensate for the section's bottom-only padding when centering the copy. */
  .community-layout .intelligence-copy { position:relative; top:calc(var(--section-space) / 2); }
}
.source-feature,.journey-heading,.automation-section,.context-retrieval,.fit-layout,.faq-section { gap:var(--layout-gap); }
.journey-heading { grid-template-columns:minmax(0,1fr) minmax(0,1fr); row-gap:24px; align-items:start; }
.journey-heading>.phase-tabs { grid-column:2; grid-row:1; justify-self:start; align-self:end; margin-bottom:calc(var(--heading-size) * .25); }
.journey-title { grid-column:1; grid-row:1; }
.journey-intro { grid-column:1; grid-row:2; margin-top:0; }
.core-principles h2,.journey-heading h2,.automation-copy h2,.agent-handoff h2,
.context-retrieval h2,.fit-copy h2,.founders-heading h2,.security-section h2,.faq-section h2,
.closing-content h2,#inputs .landing-copy h3 { font-size:var(--heading-size); line-height:1.15; text-wrap:balance; }
.principles-intro,.principles-grid p,.journey-intro>p,.automation-copy>p:not(.eyebrow),.fit-copy>p:not(.eyebrow),
.feature p,.faq-list p,.closing-content>p:not(.eyebrow) { font-size:var(--text-size); line-height:1.7; max-width:60ch; }
.journey-intro>p br { display:none; }
#workspace .phase-copy h3 { font-size:clamp(28px,2.2vw,40px); line-height:1.2; text-wrap:balance; }
#workspace .phase-description>p:not(.phase-kicker) { font-size:var(--text-size); line-height:1.7; max-width:60ch; }
.phase-takeaway { font-size:var(--small-size); color:var(--secondary-ink); }
.feature-tags span { color:var(--secondary-ink); background:#fff; border:0; font-size:12px; }
.eyebrow,.copy-eyebrow,.phase-kicker { font-size:12px; letter-spacing:.08em; }
.eyebrow { font-size:13px; }
.principle-number { display:grid; place-items:center; flex-shrink:0; width:28px; height:28px; border:1px solid var(--line); border-radius:50%; background:var(--soft-green); color:var(--green); font-size:12px; line-height:1.5; letter-spacing:0; margin-bottom:12px; }
.principle-link { font-size:var(--small-size); }
.header-inner { gap:clamp(24px,2vw,48px); }
.site-header nav { gap:clamp(24px,2vw,40px); color:var(--ink); font-size:16px; font-weight:var(--font-weight-medium); }
.site-header nav a { padding-block:12px; }
.site-header nav a:hover { color:var(--green); }
.header-cta { display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--green); font-size:16px; font-weight:600; line-height:1.4; white-space:nowrap; transition:color .2s ease; }
.header-cta span { font-size:22px; line-height:1; font-weight:400; }
.header-cta:hover { color:var(--ink); }
.closing-section.wrap { padding-inline:max(var(--page-gutter),calc((100% - var(--page-width))/2)); }
.founders-note { display:grid; grid-template-columns:1fr 1fr; gap:var(--layout-gap); }
.founders-letter { grid-column:2; margin-inline:0; }
.founders-heading { grid-column:1; }
@media(min-width:1600px) {
  .header-inner.wrap { width:100%; padding-inline:40px; }
  #workspace .story-step { padding-block:80px; }
  #workspace .phase-copy { max-width:600px; }
  #workspace .inquiry-main { padding:26px; }
  #workspace .inquiry-main h4 { font-size:20.4px; }
  #workspace .annotated-text { font-size:15.3px; min-height:220px; padding:18px; }
  #workspace .editor-annotations { padding:26px 18px; }
  #workspace .editor-annotations p { font-size:11.9px; }
  #workspace .editor-annotations strong { font-size:12.75px; }
  #workspace .context-files { font-size:11.05px; gap:10px; }
  #workspace .next-step-demo .editor-action-grid { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
}
/* The background follows the text/media columns and stacks with them on narrow screens. */
.hero { --header-height:81px; --hero-split:42%; --hero-panel:#dfe3d6; isolation:isolate; display:flex; align-items:flex-end; min-height:0; height:auto; margin-top:calc(-1 * var(--header-height)); padding-block:calc(var(--header-height) + clamp(80px,10vw,180px)) 104px; border-bottom:0; background:#fcfcf9; overflow-x:clip; }
.hero::after { content:""; position:absolute; z-index:-1; inset:0 0 0 var(--hero-split); background:var(--hero-panel); pointer-events:none; }
.hero>.wrap { width:100%; display:grid; grid-template-columns:minmax(0,var(--hero-split)) minmax(0,1fr); align-items:center; }
.hero-content { width:calc(100% - var(--page-gutter) * 2); max-width:640px; min-width:0; justify-self:center; transform:translateY(var(--hero-text-offset,0px)); }
.hero h1 { font-size:clamp(42px,2.6vw,72px); line-height:1.12; margin:0 0 32px; letter-spacing:-.04em; }
.hero-copy { max-width:58ch; font-size:var(--text-size); line-height:1.7; }
.hero-workspace { width:min(calc(100% - var(--page-gutter) * 2),calc((100svh - 260px) * 1333 / 1123)); min-width:0; margin:0; justify-self:center; }
.hero-scroll { position:absolute; bottom:12px; left:calc(50% - 32px); display:grid; place-items:center; width:64px; height:64px; color:#000; }
.hero-scroll svg { width:40px; height:40px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; animation:hero-scroll-bounce 2s ease-in-out infinite; }
@media(min-width:1800px) { .hero-scroll svg { width:56px; height:56px; } }
@media(max-width:760px) { .hero-scroll svg { width:32px; height:32px; } }
.hero-scroll:focus-visible { outline:2px solid var(--green); outline-offset:4px; border-radius:8px; }
#principles-heading { scroll-margin-top:112px; }
@keyframes hero-scroll-bounce { 0%,100% { transform:translateY(-4px); } 50% { transform:translateY(4px); } }
@media(min-width:1100px) and (min-aspect-ratio:3/2) {
  .hero { min-height:100svh; padding-block:calc(var(--header-height) + 48px) 32px; }
}
@media(min-width:1600px) {
  .hero { --hero-split:38%; }
}
@media(max-width:1099px) {
  .hero { align-items:center; padding-block:calc(var(--header-height) + 40px) 104px; }
  .hero::after { content:none; }
  .hero>.wrap { width:min(var(--page-width),calc(100% - var(--page-gutter) * 2)); grid-template-columns:1fr; gap:36px; }
  .hero-content { width:100%; max-width:none; transform:none; }
  .hero-workspace { position:relative; isolation:isolate; width:min(100%,620px); margin-top:40px; }
  .hero-workspace::before { content:""; position:absolute; z-index:-1; top:-24px; bottom:-104px; left:calc(50% - 50vw); right:calc(50% - 50vw); background:var(--hero-panel); pointer-events:none; }
  .hero h1 { font-size:clamp(38px,5.6vw,56px); }
}
@media(max-width:900px) {
  .journey-heading { display:grid; grid-template-columns:minmax(0,1fr); }
  .journey-heading>.phase-tabs { grid-column:1; grid-row:1; margin-bottom:0; }
  .journey-title { grid-row:2; }
  .journey-intro { grid-row:3; }
  .founders-note { display:block; }
  .founders-heading { margin-bottom:30px; }
}
@media(max-width:800px) { :root { --page-gutter:20px; }.hero { --header-height:73px; } }
@media(max-width:700px) {
  #workspace .story-step { padding-block:40px; }
  #workspace .phase-copy { padding-block:16px 0; }
  .principles-grid>a { padding:24px; }
  .principles-grid>a:hover { background:transparent; }
  .principles-grid { gap:32px; }
  #made-for-you .feature { padding:24px; }
  .faq-section { gap:24px; }
}
@media(max-width:560px) {
  :root { --page-gutter:16px; }
  .hero { --header-height:67px; padding-top:calc(var(--header-height) + 32px); }
  .hero>.wrap { width:calc(100% - 32px); gap:28px; }
  .hero h1 { font-size:clamp(32px,9.2vw,43px); margin-bottom:24px; }
  .hero-actions .button { font-size:13px; }
  .header-inner { gap:12px; }
  .header-cta { font-size:14px; }
}
@media(prefers-reduced-motion:reduce) { .hero-scroll svg { animation:none; } }

/* Outcome and use-case examples share the existing product typography and palette. */
.outcome-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 12px; margin-bottom:14px; }
.outcome-head h4 { margin:0; }
.outcome-justified { font-size:11px; color:var(--body); }
.outcome-justified b,.statement-badge { color:var(--green); }
.outcome-statements { list-style:none; padding:0; margin:0; font-size:11.9px; line-height:1.7; }
.outcome-statements li { display:flex; gap:10px; align-items:baseline; padding:8px 6px; }
.outcome-statements li::before { content:"•"; color:var(--body); }
.outcome-statements span { flex:1; }
.statement-badge { font-size:11px; font-weight:var(--font-weight-medium); white-space:nowrap; }
.outcome-add { display:flex; justify-content:space-between; margin:12px 0 16px; padding:8px 10px; border:1px solid var(--line); border-radius:4px; font-size:11.9px; color:var(--body); }
.outcome-form { padding-top:12px; border-top:1px solid var(--line); font-size:11px; color:var(--body); }
.outcome-form u { color:var(--ink); }
.outcome-email { margin-top:12px; padding:12px; border:1px solid var(--line); border-radius:4px; font-size:11.9px; line-height:1.7; }
.outcome-email p+p,.outcome-email ul+p,.outcome-email ul { margin-top:12px; }
.outcome-email ul { padding-left:16px; }
.usecase-section { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--layout-gap); align-items:center; padding-block:var(--section-space); }
.usecase-copy h2 { margin:16px 0 24px; font-size:var(--heading-size); }
.usecase-copy p:not(.eyebrow) { color:var(--body); font-size:var(--text-size); margin-top:18px; max-width:60ch; }
.usecase-copy a { color:var(--green); text-decoration:underline dotted; text-underline-offset:5px; }
.usecase-card { margin:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:32px; font-size:var(--small-size); }
.usecase-card-head { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:var(--body); }
.usecase-card-head b { color:var(--green); font-weight:var(--font-weight-medium); }
.usecase-card h3 { font-size:22px; margin:12px 0 24px; }
.usecase-card dl { margin:0; }
.usecase-card dl>div { display:grid; grid-template-columns:100px minmax(0,1fr); gap:16px; padding:18px 0; border-top:1px solid var(--line); }
.usecase-card dt { color:var(--body); }
.usecase-card dd { margin:0; }
.usecase-card dl>.usecase-description { grid-template-columns:1fr; gap:8px; }
.usecase-chip { display:inline-block; padding:3px 10px; margin:0 5px 5px 0; background:var(--surface); border-radius:4px; }
.usecase-levels { display:flex; gap:6px; list-style:none; padding:0; margin:0; }
.usecase-levels li { flex:1; text-align:center; padding:6px 4px; border-radius:4px; background:var(--surface); color:var(--body); font-size:12px; }
.usecase-levels .is-current { background:var(--green); color:#fff; }
@media(max-width:900px) { .usecase-section { grid-template-columns:1fr; gap:32px; } }
@media(max-width:480px) { .usecase-card { padding:22px; }.usecase-card dl>div { grid-template-columns:1fr; gap:8px; } }
/* Utility tabs: phase 02 shows example utilities as a slideshow in the app's utility bar. */
.utility-tabs { font-family:var(--font-family); color:var(--ink); font-size:13px; line-height:1.45; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.utility-tabs button { font-family:inherit; }
.utility-tabs button:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.utility-tabbar { display:flex; align-items:center; gap:8px; padding-right:8px; border-bottom:1px solid var(--line); }
.utility-tablist { display:flex; flex:1; min-width:0; padding:0 6px; overflow-x:auto; scrollbar-width:none; }
.utility-tablist::-webkit-scrollbar { display:none; }
.utility-tablist.has-more { -webkit-mask-image:linear-gradient(90deg,#000 80%,transparent); mask-image:linear-gradient(90deg,#000 80%,transparent); }
.utility-tablist button { position:relative; flex:0 0 auto; padding:13px 9px 12px; border:0; background:none; font-size:12.5px; font-weight:500; color:var(--body); white-space:nowrap; cursor:pointer; }
.utility-tablist button[aria-selected="true"] { color:var(--ink); }
.utility-tablist button[aria-selected="true"]::after { content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--line); }
.utility-fill { position:absolute; z-index:1; left:0; bottom:0; width:100%; height:2px; background:var(--green); transform:scaleX(0); transform-origin:left; }
.utility-pause { display:grid; place-items:center; flex:0 0 32px; width:32px; height:32px; padding:0; border:1px solid var(--line); border-radius:50%; background:#fff; color:var(--green); cursor:pointer; }
.utility-pause:hover { background:var(--soft-green); }
.utility-tabs .utility-pause svg { width:15px; height:15px; }
.utility-viewport { overflow:hidden; }
.utility-track { display:flex; transition:transform .6s cubic-bezier(.65,0,.35,1); }
.utility-slide { display:flex; flex-direction:column; flex:0 0 100%; min-width:0; }
.utility-context { padding:12px 16px; border-bottom:1px solid var(--line); font-size:11.5px; color:var(--body); }
.utility-body { flex:1; padding:14px 16px; }
.utility-out { margin:0 10px 10px; padding:12px; border-radius:6px; background:var(--surface); }
.utility-out>p { font-size:11px; font-weight:600; letter-spacing:.02em; color:var(--secondary-ink); }
.utility-out ul { margin:8px 0 0; padding-left:16px; list-style:disc; font-size:11.5px; line-height:1.5; }
.utility-out li { overflow-wrap:anywhere; }
.utility-out li+li { margin-top:4px; }
.utility-out.is-info ul { padding:0; list-style:none; color:var(--body); }
.utility-add { display:inline-block; margin-top:10px; padding:5px 10px; border:1px solid var(--line); border-radius:4px; background:#fff; font-size:11.5px; color:var(--green); }
.utility-add::before { content:"↓ "; }
.utility-label { margin-bottom:8px; font-size:11px; color:var(--body); }
.utility-matrix { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.utility-matrix i { display:grid; place-content:center; justify-items:center; height:40px; border-radius:4px; font-style:normal; font-size:13px; }
.utility-matrix i[data-mark] { outline:2px solid currentColor; outline-offset:-2px; font-weight:700; }
.utility-matrix i[data-mark]::after { content:attr(data-mark); font-size:9px; font-weight:600; letter-spacing:.03em; }
.utility-measure { margin-top:12px; padding:8px 10px; border:1px solid var(--line); border-radius:5px; font-size:12px; }
.utility-measure span { display:block; font-size:10.5px; color:var(--body); }
.scorecard-sections { margin:0; padding:0; list-style:none; border:1px solid var(--line); border-radius:6px; }
.scorecard-sections li { display:flex; align-items:baseline; gap:8px; padding:7px 10px; font-size:12px; }
.scorecard-sections li+li { border-top:1px solid var(--line); }
.scorecard-sections li::before { content:"✓"; font-weight:700; color:var(--green); }
.scorecard-sections b { margin-right:auto; font-weight:600; white-space:nowrap; }
.scorecard-sections span { color:var(--body); font-size:11px; text-align:right; }
.scorecard-sections .is-open span { color:#6f5924; font-weight:600; }
.scorecard-verdict { margin-top:10px; padding:8px 10px; border-radius:5px; background:#e5ecd9; color:#405338; font-size:12px; font-weight:600; }
.cvss-scores { display:flex; align-items:center; gap:8px; }
.cvss-scores>div:not(.cvss-arrow) { flex:1; min-width:0; padding:9px 10px; border:1px solid var(--line); border-radius:6px; }
.cvss-scores span { display:block; font-size:10.5px; color:var(--body); }
.cvss-scores strong { font-size:26px; line-height:1.15; }
.cvss-scores small { margin-left:6px; font-size:11px; font-weight:600; color:var(--body); }
.cvss-arrow { color:var(--body); font-size:18px; }
.severity-critical { color:#8a3324; }.severity-medium { color:#6f5924; }
.cvss-metrics { margin:12px 0 0; }
.cvss-metrics>div { display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-top:1px solid var(--line); font-size:11.5px; }
.cvss-metrics dt { color:var(--body); }
.cvss-metrics dd { margin:0; text-align:right; font-weight:600; }
.cvss-metrics s { margin-right:4px; font-weight:400; color:var(--body); }
.cvss-metrics dd small { display:block; font-size:10.5px; font-weight:400; color:var(--body); }
.similar-cases { margin:0; padding:0; list-style:none; }
.similar-cases>li { border:1px solid var(--line); border-radius:6px; }
.similar-cases>li+li { margin-top:6px; }
.similar-cases p { display:flex; align-items:baseline; gap:8px; padding:7px 10px; font-size:12px; }
.similar-cases p span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.similar-cases p small { font-size:10.5px; color:var(--body); }
.similar-cases ul { margin:0; padding:0 10px 8px; list-style:none; }
.similar-cases ul li { display:flex; gap:8px; padding:3px 0; font-size:11.5px; line-height:1.45; }
.utility-check { flex:0 0 13px; height:13px; margin-top:2px; border:1px solid var(--green); border-radius:3px; background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2l2 2L8 3' fill='none' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E") center / 9px no-repeat; }
.utility-check.is-empty { background:#fff; }
.diagram-title { margin-bottom:8px; font-size:12px; font-weight:600; }
.utility-tabs svg.utility-diagram { display:block; width:100%; height:auto; font-family:var(--font-family); }
.diagram-links path { fill:none; stroke:#9aa598; stroke-width:1.3; }
.diagram-links path.is-focus { stroke:#b4543a; stroke-width:2; stroke-dasharray:4 3; }
.diagram-links text { font-size:9px; fill:var(--body); text-anchor:middle; }
.diagram-links text.is-start { text-anchor:start; }.diagram-links text.is-end { text-anchor:end; }.diagram-links text.is-focus { fill:#b4543a; }
.diagram-nodes rect { fill:var(--soft-green); stroke:#b9c4ad; }
.diagram-nodes text { font-size:10.5px; fill:var(--ink); text-anchor:middle; }
.diagram-nodes .is-external rect { fill:#f6e6df; stroke:#b4543a; stroke-dasharray:3 2; }
.diagram-nodes .is-external text { font-size:9.5px; }
.diagram-note { font-size:9.5px; font-weight:600; fill:#b4543a; text-anchor:end; }
@media(prefers-reduced-motion:reduce) { .utility-track { transition:none; } }