:root{--background:oklch(1 0 0);--foreground:oklch(.147 .004 49.3);--card:oklch(1 0 0);--primary:oklch(.214 .009 43.1);--primary-foreground:oklch(.986 .002 67.8);--secondary:oklch(.96 .002 17.2);--muted-foreground:oklch(.547 .021 43.1);--border:oklch(.922 .005 34.3);--ring:oklch(.714 .014 41.2);--chart-1:oklch(.837 .128 66.29);--chart-3:oklch(.646 .222 41.116);--stage-header-background:color-mix(in oklab,var(--chart-1) 10%,var(--card));--stage-header-border:color-mix(in oklab,var(--chart-3) 30%,var(--card));--font-heading:"Merriweather",Georgia,serif;--font-mono:"JetBrains Mono",ui-monospace,monospace;--ease-out:cubic-bezier(.23,1,.32,1)}
.dark{--background:oklch(.147 .004 49.3);--foreground:oklch(.986 .002 67.8);--card:oklch(.214 .009 43.1);--primary:oklch(.922 .005 34.3);--primary-foreground:oklch(.214 .009 43.1);--secondary:oklch(.268 .011 36.5);--muted-foreground:oklch(.714 .014 41.2);--border:oklch(1 0 0 / 10%);--ring:oklch(.547 .021 43.1)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{min-height:100dvh;display:flex;flex-direction:column;margin:0;background:var(--background);color:var(--foreground);font:400 .875rem/1.6 var(--font-mono);-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit}
img,svg{display:block}
[hidden]{display:none!important}
.container{width:min(100% - 2.5rem,72rem);margin-inline:auto}
.skip-link{position:absolute;left:1rem;top:-4rem;z-index:50;background:var(--primary);color:var(--primary-foreground);padding:.6rem 1rem}
.skip-link:focus{top:1rem}
:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
.site-header{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--border);background:var(--background)}
.header-inner{min-height:4.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none}
.logo-mark{display:block;width:2rem;height:2rem}
.logo-mark svg{width:100%;height:100%}
.logo-bar{fill:var(--foreground)}
.logo-core{fill:var(--chart-3)}
.logo-name{font-size:1.05rem;font-weight:700;letter-spacing:-.035em}
.logo-name span{color:var(--chart-3)}
.header-actions{display:flex;align-items:center;gap:.65rem}
.icon-button{width:2.75rem;height:2.75rem;display:inline-grid;place-items:center;border:1px solid var(--border);background:var(--background);color:var(--foreground);font-size:1.1rem;transition:background-color .18s ease,transform .18s var(--ease-out)}
.icon-button:hover{background:var(--secondary)}
.icon-button:active,.button:active{transform:translateY(1px)}
.sun-icon,.dark .moon-icon{display:none}
.dark .sun-icon{display:inline}
.button{min-height:2.75rem;display:inline-flex;align-items:center;justify-content:center;gap:.65rem;padding:.62rem 1.15rem;border:1px solid transparent;text-decoration:none;font-size:.8125rem;font-weight:600;line-height:1.35;text-align:center;transition:background-color .18s ease,color .18s ease,transform .18s var(--ease-out)}
.button i{font-size:1.05rem;font-weight:400}
.button-primary{background:var(--primary);color:var(--primary-foreground)}
.button-primary:hover{opacity:.88}
.button-outline{background:var(--background);color:var(--foreground);border-color:var(--border)}
.button-outline:hover{background:var(--secondary)}
.button:disabled{cursor:not-allowed;opacity:.55}
.finder-main{flex:1;padding-block:2.5rem 5rem}
.intro{max-width:48rem;margin:0 auto 1.5rem;text-align:center}
.intro h1{font:700 2.5rem/1.2 var(--font-heading);letter-spacing:-.035em;margin:0}
.intro-description{color:var(--muted-foreground);font-size:.875rem;line-height:1.7;margin:.65rem 0 0}
.finder-layout{padding-top:1.5rem}
.finder-flow{min-width:0;width:100%;margin-inline:auto}
.flow-stage{border:1px solid var(--border);background:var(--card)}
.bill-stage{position:relative}
.bill-stage .stage-head,.bill-stage .stage-body{position:relative;z-index:1}
.bill-stage .stage-body{background:var(--card)}
.bill-peek{position:absolute;top:-2rem;right:1.5rem;z-index:0;width:4rem;height:4rem;background:var(--primary);pointer-events:none;transform:translateY(0);transition:transform .42s cubic-bezier(.22,.61,.36,1);will-change:transform}
.bill-peek-left{left:1.5rem;right:auto}
.bill-peek svg{width:100%;height:100%}
.bill-peek-eye{fill:var(--primary-foreground)}
.bill-peek-mouth{fill:var(--chart-3)}
/* Associated labels can make their inputs match :hover without the pointer touching the field. */
@media(hover:hover){#stage-website:has(#website-input:hover):not(:has(#website-heading label:hover)) .bill-peek,#stage-outcome:has(#outcome-input:hover,.outcome-option:hover):not(:has(#outcome-heading label:hover)) .bill-peek{transform:translateY(-1rem)}}
@media(hover:none),(pointer:coarse){#stage-website:has(#website-input:focus) .bill-peek,#stage-outcome:has(#outcome-input:focus,.outcome-option:focus,.outcome-option:active) .bill-peek{transform:translateY(-1rem)}}
.stage-head{min-height:3.15rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1.5rem;border-bottom:1px solid var(--stage-header-border);background:var(--stage-header-background);font-size:.75rem;font-weight:600}
.stage-head span:last-child{color:var(--muted-foreground);font-weight:400;text-align:right}
.stage-back{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem 0;border:0;background:none;color:var(--foreground);font:inherit;font-weight:600;text-align:left}
.stage-back:hover{text-decoration:underline;text-underline-offset:3px}
.stage-back i{font-size:1rem;font-weight:400}
.stage-body{padding:1.5rem clamp(1.25rem,4vw,3rem) 2rem}
.form-stage .stage-body{max-width:48rem;margin-inline:auto}
#stage-results .stage-body{padding-inline:clamp(1.25rem,3vw,2rem)}
#stage-demo .stage-body{padding-inline:clamp(1.25rem,3vw,2rem)}
.stage-body h2{font:700 1.6rem/1.3 var(--font-heading);letter-spacing:-.02em;margin:0}
/* Stage headings receive focus for screen-reader context, not as interactive controls. */
.flow-stage h2[tabindex="-1"]:focus{outline:none}
.stage-question label{font:inherit;margin:0}
.stage-hint{max-width:58ch;color:var(--muted-foreground);font-size:.875rem;line-height:1.7;margin:.55rem 0 1.25rem}
.outcome-quick-options{margin:.4rem 0 0}
.suggestions-label{margin:0 0 .4rem;color:var(--muted-foreground);font-size:.75rem;line-height:1.5}
.quick-options-list{display:flex;flex-wrap:wrap;gap:.375rem}
.outcome-option{min-height:1.875rem;padding:.25rem .5rem;border:1px solid var(--border);border-radius:0;background:var(--background);color:var(--foreground);font-size:.6875rem;font-weight:500;line-height:1.4;text-align:left;transition:background-color .18s ease,border-color .18s ease}
.outcome-option:hover{background:var(--secondary);border-color:var(--ring)}
.outcome-option[aria-pressed="true"]{background:color-mix(in oklch,var(--chart-3) 9%,var(--background));border-color:var(--chart-3)}
form{max-width:38rem}
label{display:block;font-weight:600;margin-bottom:.55rem}
input,textarea{width:100%;padding:.85rem .9rem;border:1px solid var(--border);border-radius:0;background:var(--background);color:var(--foreground);font-size:.875rem;line-height:1.6;appearance:none}
input{min-height:3.15rem}
textarea{min-height:7.5rem;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--muted-foreground);opacity:1}
input:hover,textarea:hover{border-color:var(--ring)}
input:focus,textarea:focus{border-color:var(--foreground);outline:2px solid var(--ring);outline-offset:1px}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--chart-3)}
.field-help,.field-error{font-size:.75rem;line-height:1.6;margin:.55rem 0 0}
.field-help{color:var(--muted-foreground)}
.field-error{color:var(--foreground);font-weight:600}
.stage-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.form-privacy{color:var(--muted-foreground);font-size:.75rem;line-height:1.6;margin:1.25rem 0 0}
.form-privacy a{color:var(--foreground);text-decoration:underline;text-underline-offset:3px}
.working-body{text-align:center;padding-block:3rem}
.working-body h2,.working-body .stage-hint{margin-inline:auto}
.working-body .stage-hint{margin-bottom:1.5rem}
.working-tip{width:min(100%,32rem);margin:0 auto 1.5rem;padding:1rem 1.25rem;border:1px solid var(--border);background:var(--secondary);text-align:left}
.working-tip-inner{transition:opacity .26s ease}
.working-tip-inner.is-fading{opacity:0}
.working-tip-label{display:block;margin-bottom:.4rem;color:var(--muted-foreground);font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.working-tip p{margin:0;font-size:.875rem;line-height:1.6}
.working-tip-brands{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .75rem;margin-top:.65rem}
.working-tip-brand{display:inline-flex;align-items:center;gap:.3rem;color:var(--muted-foreground);font-size:.75rem;line-height:1.4}
.working-tip-brand img{width:1rem;height:1rem;object-fit:contain}
.dark .working-tip-brand img.logo-invert{filter:invert(1)}
.working-tip-visual{margin-top:.75rem;padding-top:.7rem;border-top:1px solid var(--border);font-size:.75rem;line-height:1.45}
.tip-approval-heading,.tip-approval-decision{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem .6rem}
.tip-approval-heading{justify-content:space-between}
.tip-approval-heading strong{display:inline-flex;align-items:center;gap:.35rem;font-weight:600}
.tip-approval-heading strong::before{content:"";width:.35rem;height:.35rem;flex:none;background:var(--chart-3)}
.tip-approval-heading>span,.tip-approval-decision>span:first-child{color:var(--muted-foreground)}
.tip-approval-decision{margin-top:.5rem}
.tip-approval-decision>span:first-child{margin-right:auto}
.tip-decision{border:1px solid var(--border);padding:.15rem .45rem}
.tip-decision-primary{border-color:var(--primary);background:var(--primary);color:var(--primary-foreground)}
.tip-run-head{display:flex;justify-content:space-between;gap:.5rem;font-weight:600}
.tip-run-head span:last-child{color:var(--muted-foreground);font-weight:400}
.tip-run-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;margin-top:.65rem}
.tip-run-track span{min-width:0;border-top:2px solid var(--chart-3);padding-top:.3rem;overflow-wrap:anywhere}
.tip-blocks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.tip-blocks span,.tip-blocks strong{min-width:0;border-top:2px solid var(--border);padding-top:.3rem;font-weight:600;overflow-wrap:anywhere}
.tip-blocks small{display:block;color:var(--muted-foreground);font-size:inherit;font-weight:400}
.tip-blocks strong{border-color:var(--chart-3)}
.bill-working{width:6rem;height:6rem;margin:0 auto 1.75rem;display:grid;place-items:center;background:var(--primary)}
.bill-working svg{width:4.25rem;height:4.25rem}
.bill-eye{fill:var(--primary-foreground);transform-box:fill-box;transform-origin:center;animation:bill-blink 4.3s ease-in-out infinite}
.bill-eyes{animation:bill-look 5.5s ease-in-out infinite}
.bill-mouth{fill:var(--chart-3)}
@keyframes bill-look{0%,10%{transform:translateX(0)}22%,36%{transform:translateX(-3.5px)}50%,64%{transform:translateX(3.5px)}78%,100%{transform:translateX(0)}}
@keyframes bill-blink{0%,90%,100%{transform:scaleY(1)}93%{transform:scaleY(.08)}96%{transform:scaleY(1)}}
.result-skeleton{display:grid;gap:.65rem;max-width:28rem;margin:1.8rem auto}
.result-skeleton span{height:.55rem;display:block;background:var(--secondary);animation:skeleton-pulse 1.5s ease-in-out infinite}
.result-skeleton span:nth-child(2){width:82%;margin-inline:auto;animation-delay:.15s}
.result-skeleton span:nth-child(3){width:65%;margin-inline:auto;animation-delay:.3s}
@keyframes skeleton-pulse{50%{opacity:.5}}
.working-body>.button{margin-top:.65rem}
.preview-disclosure{border:1px solid var(--border);background:var(--secondary);padding:.75rem 1rem;margin:0 0 1.5rem;font-size:.75rem}
.business-summary{border-left:3px solid var(--chart-3);padding:.3rem 0 .3rem 1rem;margin:0 0 1.5rem;color:var(--muted-foreground);font-size:.8125rem;line-height:1.7}
.agent-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.agent-result{min-width:0;display:flex;flex-direction:column;gap:1rem;padding:1.25rem;border:1px solid var(--border);background:var(--background)}
.agent-result-head{display:flex;align-items:flex-start;gap:.75rem;min-height:2rem}
.agent-result img{flex:none;width:2rem;height:2rem;object-fit:contain}
.agent-result h3{font:700 1.05rem/1.4 var(--font-heading);margin:0}
.agent-result p{font-size:.8125rem;line-height:1.7;margin:.75rem 0 0;color:var(--muted-foreground);overflow-wrap:anywhere}
.agent-result .agent-result-purpose{font-size:.875rem;line-height:1.65;color:var(--foreground);margin:0}
.agent-result-details{border-top:1px solid var(--border);padding-top:.75rem;font-size:.8125rem}
.agent-result-details summary{display:flex;align-items:center;justify-content:space-between;gap:.75rem;list-style:none;color:var(--foreground);font-weight:600;line-height:1.5;cursor:pointer}
.agent-result-details summary::-webkit-details-marker{display:none}
.agent-result-details summary i{flex:none;font-size:1rem;font-weight:400;transition:transform .18s var(--ease-out)}
.agent-result-details[open] summary i{transform:rotate(180deg)}
.agent-result-details summary:hover{text-decoration:underline;text-underline-offset:3px}
.agent-result-details p{margin-top:.75rem}
.agent-result .agent-evidence{border-top:1px solid var(--border);padding-top:.75rem;margin-top:.85rem}
.agent-result .button{width:100%;margin-top:auto}
.results-actions{margin-top:1.75rem}
.demo-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:1rem;margin-top:1.4rem;align-items:start}
.demo-input-panel,.demo-output-panel{min-width:0;border:1px solid var(--border);padding:1.25rem;background:var(--background)}
.demo-input-panel{background:var(--secondary)}
.demo-layout h3{margin:0 0 1rem;font:700 .95rem/1.4 var(--font-heading)}
#demo-used-input{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:.8125rem;line-height:1.7}
#demo-edit{border-top:1px solid var(--border);margin-top:1.25rem;padding-top:1rem}
#demo-edit summary{display:flex;align-items:center;justify-content:space-between;gap:.75rem;list-style:none;cursor:pointer;font-size:.75rem;font-weight:600}
#demo-edit summary::-webkit-details-marker{display:none}
#demo-edit summary i{font-size:1rem;font-weight:400;transition:transform .18s var(--ease-out)}
#demo-edit[open] summary i{transform:rotate(180deg)}
#demo-form{max-width:none;margin-top:1.25rem}
#demo-form textarea{background:var(--card)}
.demo-markdown{font-size:.8125rem;line-height:1.75;overflow-wrap:anywhere}
.demo-markdown>*:first-child{margin-top:0}
.demo-markdown>*:last-child{margin-bottom:0}
.demo-markdown h4,.demo-markdown h5,.demo-markdown h6{font:700 .95rem/1.45 var(--font-heading);margin:1.3rem 0 .55rem}
.demo-markdown p{margin:.7rem 0}
.demo-markdown ul,.demo-markdown ol{padding-left:1.35rem;margin:.75rem 0}
.demo-markdown li+li{margin-top:.45rem}
.demo-markdown hr{border:0;border-top:1px solid var(--border);margin:1.25rem 0}
.demo-markdown code{font:.9em var(--font-mono);background:var(--secondary);padding:.1rem .25rem}
.demo-markdown pre{margin:1rem 0;padding:1rem;background:var(--secondary);overflow:auto}
.demo-markdown pre code{padding:0;background:none}
.demo-actions{justify-content:flex-end}
.site-footer{border-top:1px solid var(--border);color:var(--muted-foreground);font-size:.75rem}
.site-footer .container{min-height:5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.site-footer nav{display:flex;gap:1.5rem}
.site-footer a{text-decoration:none}
.site-footer a:hover{text-decoration:underline}
@media(max-width:900px){.agent-results{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.finder-main{padding-top:3rem}}
@media(max-width:650px){.agent-results{grid-template-columns:1fr}}
@media(max-width:720px){.demo-layout{grid-template-columns:1fr}}
@media(max-width:580px){.container{width:min(100% - 2rem,72rem)}.header-call{display:none}.finder-main{padding-block:2.5rem 4rem}.intro{margin-bottom:1.5rem}.intro h1{font-size:2.25rem}.stage-head{padding-inline:1.2rem}.stage-body{padding:1.5rem 1.2rem 1.8rem}.stage-body h2{font-size:1.35rem}.bill-peek{right:1.2rem}.bill-peek-left{left:1.2rem;right:auto}.site-footer .container{flex-direction:column;align-items:flex-start;justify-content:center;padding-block:1.2rem}.stage-actions .button{min-height:2.75rem}}
@media(max-width:580px),(pointer:coarse){input,textarea{font-size:1rem}}
@media(max-width:420px){.tip-blocks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(pointer:coarse){.agent-result-details summary{min-height:2.75rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,.icon-button,.outcome-option,.agent-result-details summary i,.bill-peek,.working-tip-inner,#demo-edit summary i{transition:none}.bill-eyes,.bill-eye,.result-skeleton span{animation:none}}

/* Clarify the service and expose the value of every generated idea. */
.outcome-input-label { font-size: .8125rem; }
.working-estimate { margin: -1rem auto 1.5rem; font-size: .75rem; line-height: 1.6; color: var(--muted-foreground); }
.agent-result-impact { background: var(--secondary); padding: 1rem; }
.agent-result-impact h4 { margin: 0; font: 600 .6875rem/1.5 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.agent-result-impact p { margin: .5rem 0 0; color: var(--foreground); }

.stage-head-with-timing { flex-wrap: wrap; gap: .5rem 1rem; }
.stage-head .generation-timing { padding: .25rem .65rem; border: 1px solid var(--border); border-radius: 0; background: var(--background); color: var(--muted-foreground); font-size: .6875rem; line-height: 1.5; text-align: left; }

#outcome-help, #outcome-form { max-width: none; }

#outcome-input { display: block; }
@media(pointer:coarse){.outcome-option{min-height:2.75rem}}

/* Share content rows across neighbouring cards without truncating generated text. */
@supports (grid-template-rows: subgrid) {
  .agent-result { display: grid; grid-row: span 5; grid-template-rows: subgrid; }
  .agent-result-head { grid-row: 1; }
  .agent-result-purpose { grid-row: 2; }
  .agent-result-impact { grid-row: 3; }
  .agent-result-details { grid-row: 4; }
  .agent-result .button { grid-row: 5; margin-top: 0; align-self: end; }
}

.inline-suggestion { display: inline; padding: 0; border: 0; border-radius: 0; background: none; color: var(--foreground); font: inherit; text-decoration: underline; text-underline-offset: .2em; }
.inline-suggestion:hover { text-decoration-thickness: 2px; }
