:root {
    color-scheme: light;
    font: 16px/1.5 system-ui, sans-serif;
    color: #172842;
    background: #f1f5fa;
}
* { box-sizing: border-box; }
body { margin: 0; }
.brand { padding: 1rem max(1.25rem, calc((100vw - 70rem) / 2)); background: #122641; color: white; font-weight: 700; }
.brand span { display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin-right: .4rem; border-radius: .45rem; background: #1d7983; }
main { max-width: 72.5rem; margin: auto; padding: clamp(1rem, 4vw, 2.5rem) 1.25rem; }
.landing, .workspace { display: grid; gap: 1.25rem; align-items: start; }
.landing { grid-template-columns: 1.2fr 1fr; }
.workspace { grid-template-columns: 1.2fr 1fr 1fr; align-items: stretch; gap: 0; border: 1px solid #d9e2ef; border-radius: 1rem; overflow: hidden; }
.workspace .card { min-width: 0; overflow-wrap: anywhere; border: 0; border-radius: 0; }
.workspace .card + .card { border-left: 1px solid #d9e2ef; }
.workspace h3 { margin: -1.35rem -1.35rem .9rem; padding: .75rem 1.35rem; background: #e8f1f9; border-bottom: 1px solid #d9e2ef; }
.call-line { white-space: nowrap; overflow-x: auto; padding-bottom: .25rem; }
.intro { padding: clamp(.5rem, 4vw, 2.5rem) 0; }
h1, h2, h3 { line-height: 1.18; margin: 0 0 .75rem; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
p { margin: 0 0 .9rem; }
.card { background: white; border: 1px solid #d9e2ef; border-radius: 1rem; padding: 1.35rem; }
.eyebrow { color: #056b74; font-size: .8rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.muted { color: #475b75; font-size: .95rem; }
.signup label { display: block; font-weight: 650; margin: .75rem 0 .25rem; }
.signup input { width: 100%; padding: .65rem; border: 1px solid #9eafc4; border-radius: .4rem; font: inherit; }
.signup .muted { margin-top: .9rem; }
.validation { color: #a02d36; font-size: .9rem; }
button { font: inherit; font-weight: 700; color: white; background: #086d76; border: 0; border-radius: .5rem; padding: .6rem 1rem; cursor: pointer; }
button.secondary { color: #173250; background: #e5edf7; }
button:disabled { opacity: .55; cursor: default; }
:focus-visible { outline: 3px solid #2585c2; outline-offset: 3px; }
.ribbon { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0 .6rem; }
.badge { margin-left: auto; padding: .35rem .65rem; border-radius: .5rem; background: #dbe8fa; font-weight: 650; }
audio { display: block; max-width: 100%; margin-top: .35rem; }
.flow-card { margin-bottom: 1rem; }
.flow-card select { display: block; width: 100%; padding: .55rem; font: inherit; }
.flow-card fieldset { margin: 1rem 0; padding: .75rem; border: 1px solid #d9e2ef; }
.flow-card button { margin: .5rem .35rem 0 0; }
.flow-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; border-bottom: 1px solid #d9e2ef; }
.flow-tabs button { color: #173250; background: transparent; border-radius: .5rem .5rem 0 0; border-bottom: 3px solid transparent; }
.flow-tabs button[aria-selected="true"] { color: #056b74; background: white; border-bottom-color: #086d76; }
.generator-card { max-width: 56rem; margin-bottom: 1rem; }
.generator-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: .35rem 1.25rem; margin-bottom: 1.25rem; }
.generator-fields select { width: 100%; padding: .65rem; border: 1px solid #9eafc4; border-radius: .4rem; background: white; color: inherit; font: inherit; }
.generator-fields input { margin-top: .5rem; }
#generator-status:empty { display: none; }
#generator-status { margin: .6rem 0; }
.flow-map > details { padding: .75rem; background: #f1f5fa; border-radius: .5rem; }
.flow-map summary { cursor: pointer; font-weight: 650; }
.flow-map textarea { display: block; width: 100%; min-height: 4rem; resize: vertical; padding: .65rem; border: 1px solid #9eafc4; border-radius: .4rem; font: inherit; }
.flow-map label[hidden] { display: none; }
.flow-map-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: start; gap: 1.5rem; padding: 1.25rem 0; }
.flow-map-row + .flow-map-row { border-top: 1px solid #d9e2ef; }
.flow-question { background: #eaf3fb; border: 1px solid #a5bdd3; border-radius: .75rem; padding: 1rem; }
.flow-branches { position: relative; min-width: 0; border-left: 2px solid #7998b3; padding-left: 1.25rem; }
.flow-branches::before { content: ""; position: absolute; top: 1.75rem; right: 100%; width: 1.5rem; border-top: 2px solid #7998b3; }
.flow-branch, .flow-branches:has(> .flow-terminal) { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; gap: 1.5rem; }
.flow-branch + .flow-branch { margin-top: .75rem; }
.flow-branches fieldset { position: relative; min-width: 0; margin: 0; border-radius: .65rem; background: #f7fafc; border-color: #b6cbdc; }
.flow-branches fieldset::before { content: ""; position: absolute; top: 1.25rem; right: 100%; width: 1.25rem; border-top: 2px solid #7998b3; }
.flow-branches legend { font-weight: 650; }
.flow-branches details { margin-top: .6rem; }
.flow-route { position: relative; min-width: 0; padding: .75rem; border: 1px solid #b6cbdc; border-radius: .65rem; background: #f2f8fa; }
.flow-route > label:first-child { margin-top: 0; }
.flow-route::before { content: "→"; position: absolute; right: 100%; top: 1rem; width: 1.5rem; text-align: center; color: #426782; font-weight: 700; }
.flow-terminal { grid-column: 2; }
.flow-terminal::before { content: none; }
.flow-branches:has(> .flow-terminal)::after { content: ""; position: absolute; top: 1.75rem; left: 0; right: calc((100% - 2.75rem) / 2.35); border-top: 2px solid #7998b3; }
.flow-result { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; }
.flow-map .flow-target { margin: 0; padding: .25rem .65rem; color: #075763; background: #e0f3f0; border: 1px solid #9ccac6; }
.flow-end { display: inline-block; margin: 0; padding: .25rem .65rem; border-radius: .5rem; color: #773346; background: #f9e9ed; font-weight: 650; }
.flow-map.questions-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: .75rem; }
.questions-overview > details { grid-column: 1 / -1; }
.questions-overview .flow-map-row { display: block; border: 0; padding: 0; }
.questions-overview .flow-branches { display: none; }
#flow-overview[aria-pressed="true"] { color: white; background: #086d76; }
@media (max-width: 680px) {
    .flow-map-row { grid-template-columns: 1fr; gap: .75rem; }
    .flow-branches { margin-left: 1rem; }
    .flow-branches::before { top: -.75rem; left: -2px; width: 0; height: .75rem; border: 0; border-left: 2px solid #7998b3; }
    .flow-branch, .flow-branches:has(> .flow-terminal) { grid-template-columns: 1fr; gap: 1rem; }
    .flow-route::before { content: "↓"; top: -1.2rem; right: auto; left: .5rem; }
    .flow-terminal { grid-column: 1; }
    .flow-branches:has(> .flow-terminal)::after { content: none; }
}
#flow-status { position: sticky; top: 0; z-index: 1; background: #f1f5fa; padding: .5rem 0; }
#flow-status:empty { display: none; }
.voicemail-recording { margin-bottom: .75rem; }
.voicemail-recording summary { cursor: pointer; }
.voicemail-recording label { display: block; margin: .5rem 0; }
#logic-tree { width: min(92vw, 90rem); max-height: 94vh; padding: 1rem; border: 1px solid #b6cbdc; border-radius: .75rem; color: inherit; }
#logic-tree::backdrop { background: #12264188; }
#flow-test { width: min(92vw, 54rem); max-height: 94vh; padding: 1rem; border: 1px solid #b6cbdc; border-radius: .75rem; color: inherit; }
#flow-test::backdrop { background: #12264188; }
#flow-test-progress { width: 100%; height: .8rem; accent-color: #086d76; }
#flow-test-report { margin: .75rem 0; }
#flow-test-report summary { cursor: pointer; font-weight: 650; }
#flow-test-report textarea { display: block; width: 100%; margin: .5rem 0; padding: .6rem; font: inherit; resize: vertical; }
#flow-map input[type="checkbox"] { width: auto; margin-inline-start: .5rem; }
#demo-email-draft textarea { display: block; width: 100%; font: inherit; }
#branch-response select { display: block; width: 100%; margin-bottom: .75rem; padding: .5rem; font: inherit; }
#branch-response [hidden] { display: none; }
#flow-test-transcript { max-height: 52vh; overflow: auto; }
#flow-test-transcript section { border-top: 1px solid #d9e2ef; padding: .75rem; }
#flow-test-transcript ol { padding-left: 1.5rem; }
#flow-test-transcript li { margin: .35rem 0; }
#logic-tree .ribbon { margin-top: 0; }
#logic-tree h2 { flex: 1 1 12rem; margin: 0; }
#tree-viewport { height: 66vh; overflow: auto; border: 1px solid #d9e2ef; background: #f1f5fa; cursor: grab; }
#tree-viewport:active { cursor: grabbing; }
#tree-canvas { position: relative; user-select: none; }
#tree-canvas svg { position: absolute; width: 100%; height: 100%; pointer-events: none; fill: none; stroke: #426782; stroke-width: 2; }
.logic-node { position: absolute; display: block; width: 224px; height: 88px; padding: .5rem .65rem; overflow: hidden; border: 1px solid #9eb8cd; border-radius: .6rem; color: #172842; background: white; text-align: left; }
button.logic-node { background: #e1effc; }
.logic-node strong, .logic-node span { display: block; }
.logic-node span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: .8rem; font-weight: 400; }
@media (max-width: 680px) {
    .landing, .workspace { grid-template-columns: 1fr; }
    .workspace .card + .card { border-left: 0; border-top: 1px solid #d9e2ef; }
    .badge { margin-left: 0; }
}