:root{--ink:#203239;--muted:#5a6d71;--navy:#102832;--navy2:#183640;--mint:#a6edcc;--mint-dark:#146c60;--paper:#f5f7f4;--surface:#fff;--border:#dbe5df;--shadow:0 14px 34px rgba(22,52,47,.055)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 system-ui,-apple-system,'Segoe UI',Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}button,input,textarea{font:inherit}button{cursor:pointer}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #249e83;outline-offset:3px}
.wrap{width:min(1050px,calc(100% - 44px));margin:auto}
.site-head{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);border-bottom:1px solid var(--border);backdrop-filter:blur(14px)}
.site-head .wrap{height:68px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;white-space:nowrap;font-weight:820;letter-spacing:-.045em;color:var(--navy);font-size:16px}
.mark{display:grid;place-items:center;width:37px;height:37px;flex-shrink:0;background:var(--navy);border-radius:11px;color:var(--mint);font-weight:900;font-size:16px;letter-spacing:-.07em}
.toplinks{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:720;white-space:nowrap}
.toplinks a{text-decoration:none;padding:10px 12px;border-radius:10px;color:#435b5d}
.toplinks a.active{background:#e8f4ed;color:#165e51}
.toplinks a.feedback{background:var(--navy);color:white;padding:10px 14px}
.toplinks a:hover:not(.feedback){background:#eff4ef}
.intro{background:var(--navy);color:white;position:relative;overflow:hidden}
.intro:after{content:'';pointer-events:none;position:absolute;right:-170px;top:-270px;width:630px;height:630px;background:radial-gradient(circle,rgba(108,221,174,.18),transparent 65%)}
.intro .wrap{padding:29px 0 32px;position:relative;z-index:1}
.kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:830;color:var(--mint);margin-bottom:7px}
.intro h1{font-size:clamp(26px,4.1vw,42px);line-height:1.1;letter-spacing:-.055em;margin:0 0 7px;font-weight:790}
.intro h1 em{color:var(--mint);font-style:normal}
.intro p{color:#d3e4df;max-width:670px;font-size:14px;margin:0}
.layout{display:grid;grid-template-columns:228px minmax(0,1fr);gap:24px;align-items:start;padding-top:23px;padding-bottom:42px}
.stepmenu{position:sticky;top:88px;background:white;border:1px solid var(--border);border-radius:17px;padding:12px;box-shadow:var(--shadow)}
.menu-caption{font-weight:830;letter-spacing:.1em;color:#70817f;font-size:10px;text-transform:uppercase;padding:8px 10px 10px}
.stepmenu a{display:flex;align-items:center;gap:10px;text-decoration:none;padding:11px 10px;border-radius:10px;font-size:14px;font-weight:690;color:#435c5b;margin-bottom:3px;transition:background .16s}
.stepmenu a .num{display:grid;place-items:center;width:26px;height:26px;flex-shrink:0;border-radius:8px;background:#eff5f0;color:#63887e;font-size:11px;font-weight:820}
.stepmenu a[aria-current='step']{background:#e8f4ed;color:#165a4d}
.stepmenu a[aria-current='step'] .num{background:#166c5a;color:white}
.stepmenu a:hover{background:#eff5f0}
.stepnote{font-size:12px;color:var(--muted);padding:13px 10px 4px;border-top:1px solid var(--border);margin-top:9px}
.stepstage{min-width:0}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:29px 31px 24px;min-height:360px}
.panel-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tag{font-size:11px;text-transform:uppercase;letter-spacing:.105em;font-weight:850;color:#196c5d;background:#e4f4eb;border-radius:100px;padding:5px 10px}
.panel h2{font-size:clamp(24px,3.15vw,34px);line-height:1.14;letter-spacing:-.053em;margin:0 0 10px}
.panel p{font-size:15px;color:#4b6263;max-width:690px;margin:0 0 15px}
.panel p strong{color:var(--ink)}
.strongline{font-weight:760;color:var(--navy);margin-top:16px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:16px 0}
.tile{border:1px solid var(--border);background:#f7faf7;border-radius:12px;padding:13px 15px}
.tile strong{display:block;font-size:13px;margin-bottom:4px;color:#1f4242}
.tile p{font-size:13px;line-height:1.48;margin:0;color:#51696a}
.microflow{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:18px 0}
.microflow .tile{text-align:center;padding:11px 7px}
.microflow strong{font-size:13px;margin:0}
.microflow span{display:block;font-size:11px;color:#607877;margin-top:4px}
.question{border-left:3px solid #399f80;padding:8px 12px;margin:15px 0;background:#f0f7f1;border-radius:0 9px 9px 0;font-size:14px;color:#315850}
.question strong{display:block;margin-bottom:3px}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid transparent;border-radius:10px;padding:10px 15px;text-decoration:none;font-weight:780;font-size:13px;line-height:1.25;background:var(--navy);color:white;gap:6px}
.btn:hover{filter:brightness(1.12)}
.btn-light{background:white;color:#245c52;border-color:#bdcfca}
.btn-soft{background:#dff2e7;color:#1b6657}
.btn:disabled{opacity:.45;cursor:default}
.small{font-size:12px!important;color:#69817c!important}
.details{border:1px solid var(--border);border-radius:12px;margin:17px 0 0;background:#fbfdfb;overflow:hidden}
.details summary{cursor:pointer;list-style:none;font-size:13px;font-weight:780;padding:13px 16px;display:flex;align-items:center;justify-content:space-between}
.details summary:after{content:'+';font-size:20px;font-weight:400;color:#196e5c}
.details[open] summary:after{content:'−'}
.details summary::-webkit-details-marker{display:none}
.detail-body{padding:0 16px 16px}
.codeprompt{background:#132d36;color:#edf8f3;border-radius:10px;padding:15px;white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.65 ui-monospace,'SFMono-Regular',Consolas,monospace;max-height:340px;overflow:auto;margin:0 0 10px}
.copy-feedback{font-size:12px;color:#216f5c;display:block;margin-top:7px;min-height:17px}
.reveal{font-size:13px;border-radius:11px;padding:12px 14px;background:#f2f6f3;border:1px solid var(--border);margin-top:15px}
.panel-bottom{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--border);margin-top:22px;padding-top:17px;align-items:center}
.step-counter{font-size:12px;color:#617671;font-weight:700}
.nextstep{font-size:13px;font-weight:760;text-decoration:none;color:#176a57}
.nextstep:hover{text-decoration:underline}
.support{margin-top:17px;border:1px solid var(--border);border-radius:14px;padding:15px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px;background:#eaf4ed}
.support strong{font-size:14px;color:#235548}
.support p{font-size:12px;margin:3px 0 0;color:#57756b}
.support a{white-space:nowrap;text-decoration:none;font-weight:760;color:#116b58;font-size:13px}
footer{border-top:1px solid var(--border);padding:15px 0 24px;color:#647570;font-size:11px}
footer .wrap{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap}
footer a{color:#216658}
.pagehead{background:var(--navy);color:white;padding:31px 0}
.pagehead h1{font-size:clamp(28px,4vw,41px);letter-spacing:-.055em;margin:4px 0 6px;line-height:1.12}
.pagehead p{margin:0;color:#d5e5df;font-size:14px;max-width:640px}
.page-card{margin:24px auto 36px;background:white;border:1px solid var(--border);border-radius:17px;padding:26px 29px;box-shadow:var(--shadow)}
.page-card p{color:#4f6462;margin:0 0 12px}
.qualities{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.qualities span{border:1px solid #cfdfd4;border-radius:100px;font-size:12px;color:#276b5a;padding:7px 11px;background:#f3faf5}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:15px}
.field label{display:block;font-size:13px;font-weight:750;margin-bottom:5px}
.field input,.field textarea{width:100%;border:1px solid #c9d9d1;border-radius:9px;padding:10px 12px;background:#fcfefc;font-size:14px;color:var(--ink);outline:none}
.field textarea{min-height:95px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:#39987b;box-shadow:0 0 0 3px #ddf4e7}
.output{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.57;font-size:12px;color:#dcefe9;background:#142b34;border-radius:11px;padding:16px;max-height:330px;overflow:auto}
.copyright{font-size:12px;color:#617872}
@media(max-width:780px){.layout{grid-template-columns:1fr;gap:11px;padding-top:10px}.stepmenu{position:sticky;top:64px;z-index:25;border-radius:0;border:0;border-bottom:1px solid var(--border);box-shadow:none;display:flex;overflow-x:auto;gap:5px;margin:0 -22px;padding:8px 22px;background:rgba(248,251,248,.98);scrollbar-width:none;scroll-snap-type:x proximity}.stepmenu::-webkit-scrollbar{display:none}.stepmenu .menu-caption,.stepmenu .stepnote{display:none}.stepmenu a{white-space:nowrap;display:inline-flex;gap:7px;flex-shrink:0;border:1px solid #e0eae5;padding:8px 10px;margin:0;scroll-snap-align:start;font-size:12px}.stepmenu a .num{width:23px;height:23px;font-size:10px}.panel{min-height:0;padding:23px 21px}.site-head .wrap{height:64px}.form-grid{grid-template-columns:1fr}.support{align-items:start;flex-direction:column}.microflow{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.wrap{width:calc(100% - 30px)}.site-head .wrap{gap:7px}.brand>span:last-child{display:none}.toplinks{gap:4px;font-size:12px}.toplinks a{padding:8px 9px}.toplinks a.feedback{padding:8px 10px}.intro .wrap{padding:23px 0 25px}.intro h1{font-size:30px}.intro p{font-size:13px}.stepmenu{margin:0 -15px;padding:8px 15px;top:64px}.layout{padding-bottom:25px}.panel h2{font-size:25px}.panel p{font-size:14px}.two-col{grid-template-columns:1fr}.page-card{padding:21px 18px}.actions .btn{flex:1}.support a{white-space:normal}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(max-width:780px){.support{display:none}.panel#copilot .tile{padding:10px 12px}.panel#copilot .tile strong{display:inline;margin-right:6px}.panel#copilot .tile p{display:inline}}

/* Compact, opt-in filmplayer: no video is requested until visitor presses play. */
.intro-film-action{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:17px}
.film-launch{display:inline-flex;align-items:center;gap:9px;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(191,239,221,.36);border-radius:12px;padding:8px 12px 8px 9px;font-weight:780;font-size:13px;line-height:1;min-height:42px;transition:background .2s,border-color .2s}
.film-launch:hover{background:rgba(166,237,204,.15);border-color:var(--mint)}
.film-launch-play{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--mint);color:var(--navy);font-size:11px;padding-left:2px}
.film-launch-length{font-size:11px;font-weight:600;color:#d2e6df;background:rgba(255,255,255,.09);border-radius:6px;padding:5px 7px}
.film-launch-hint{font-size:12px;color:#c7ddd5}
.prompt-caption{font-size:12px;letter-spacing:.07em;color:#376759;font-weight:830;margin:3px 0 9px}
.copy-box+.copy-box{margin-top:20px;padding-top:17px;border-top:1px solid var(--border)}
.film-dialog{border:1px solid #385b60;border-radius:18px;padding:0 17px 16px;background:#10252d;color:#fff;width:min(860px,calc(100% - 30px));max-height:calc(100% - 30px);box-shadow:0 30px 80px #050e13ba;overflow:auto}
.film-dialog::backdrop{background:rgba(5,17,23,.82);backdrop-filter:blur(5px)}
.film-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 0 12px}
.film-dialog-head h2{font-size:clamp(18px,2.7vw,23px);letter-spacing:-.035em;line-height:1.15;margin:3px 0 0;color:#fff}
.film-eyebrow{color:#b1cfc5;font-size:10px;font-weight:820;letter-spacing:.1em}
.film-close{width:36px;height:36px;flex-shrink:0;border:1px solid #42656c;border-radius:9px;background:transparent;color:#fff;font-size:24px;line-height:1}
.film-close:hover{background:#294750}
.film-dialog video{display:block;width:100%;aspect-ratio:16/9;background:#050a0d;object-fit:contain;border-radius:10px}
.film-dialog-foot{margin:12px 1px 0;color:#b4c9c5;font-size:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.film-dialog-foot a{color:#9fe7c4;text-decoration:underline;text-underline-offset:3px}
@media(max-width:500px){.intro-film-action{margin-top:13px;gap:9px}.film-launch-hint{font-size:11px}.film-dialog{width:calc(100% - 16px);max-height:calc(100% - 16px);padding:0 10px 12px}.film-dialog-head{padding:12px 0 9px}.film-dialog-foot{font-size:11px}}