/* Native adaptations of the supplied CinematicHero, GlyphPortal, DataFlowstate and CodeToCanvas. */
.flow-demo details.flow-links{background:#163b2c;color:#f2f1e9;border-color:#799586}.flow-demo details.flow-links summary{color:#f2f1e9}.flow-demo details.flow-links label{color:#f2f1e9}
@media(min-width:981px) and (max-height:800px){section.hero{padding:44px 0 56px}section.hero h1{font-size:clamp(38px,3.9vw,54px);margin:14px 0 18px}section.hero .lead{font-size:18px}section.hero .actions{margin-top:24px}.hero .cinematic-card{height:520px}}
.cinematic{margin:0;perspective:1400px;min-width:0}.cinematic-card{position:relative;height:590px;border-radius:32px;background:#075B45;box-shadow:0 40px 80px -40px #053d2f80,inset 0 1px #ffffff25;border:1px solid #357661;display:grid;place-items:center;overflow:hidden;transform-style:preserve-3d;transform:rotateX(var(--cine-x,6deg)) rotateY(var(--cine-y,-5deg));transition:box-shadow .3s;isolation:isolate}.cinematic-grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff09 1px,transparent 1px),linear-gradient(90deg,#ffffff09 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(black,transparent)}.cinematic-word{position:absolute;top:20px;left:20px;line-height:1;font-size:120px;font-weight:900;letter-spacing:-9px;color:#ffffff0c}.phone{width:258px;height:490px;border-radius:34px;background:#15271f;padding:7px;box-shadow:0 35px 50px -20px #001e1899,inset 0 0 0 2px #799586;position:relative;transform:translate3d(0,var(--phone-y,0px),24px) rotate(-4deg)}.phone-camera{position:absolute;top:15px;left:90px;width:78px;height:18px;border-radius:20px;background:#15271f;z-index:2}.phone-content{height:100%;border-radius:28px;background:#f5f3ed;color:#17231f;padding:38px 17px 12px;display:flex;flex-direction:column}.phone-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;font-size:14px}.phone-head mark{background:#ddeb55;color:#17231f;padding:3px;border-radius:4px}.phone-head>span{background:#ece9df;border-radius:50%;width:27px;height:27px;display:grid;place-items:center;font-size:10px}.phone-content>small{font-size:8px;letter-spacing:.09em;color:#53605a}.phone h3{font-size:24px;margin-top:6px}.phone p{font-size:10px;color:#53605a;margin:5px 0 14px}.phone-total{border:1px solid #cbCfc4;border-radius:15px;padding:13px;display:grid;gap:2px;background:#faf8f2}.phone-total>small{font-size:10px;color:#53605a}.phone-total strong{font-size:25px;letter-spacing:-1px;font-variant-numeric:tabular-nums}.phone-total strong small{font-size:10px;letter-spacing:0}.phone-total>span{font-size:9px;color:#53605a}.phone-document{display:flex;align-items:center;gap:9px;padding:14px 0;border-bottom:1px solid #cbCfc4;font-size:10px}.phone-document>span{font-size:18px;color:#075b45}.phone-document small,.phone-assistant small{display:block;font-size:9px;color:#53605a;margin-top:3px}.phone-document i{margin-left:auto;font-style:normal;color:#075b45}.phone-assistant{margin:15px 0 8px;background:#e7edcf;border-radius:12px;padding:10px;display:flex;gap:8px;font-size:10px}.phone-assistant>span{font-size:24px;color:#075b45}.phone-nav{display:flex;justify-content:space-around;margin-top:auto;color:#075b45;font-size:16px}.phone-nav>span{text-align:center}.phone-nav small{display:block;font-size:7px}.cinematic-badge{position:absolute;border:1px solid #ffffff38;background:#f5f3ed;color:#17231f;border-radius:16px;padding:13px 16px;display:flex;gap:11px;align-items:center;box-shadow:0 16px 32px -20px #001e18aa;font-size:12px;transform:translateZ(45px)}.cinematic-badge>span{background:#ddeb55;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:18px}.cinematic-badge small{display:block;font-size:10px;color:#53605a}.badge-quote{top:92px;left:14px}.badge-payment{bottom:65px;right:14px}.cinematic figcaption{margin-top:16px;font-size:12px;text-align:center;color:var(--muted)}
.glyph-portal{padding:0;position:relative;height:150svh;background:var(--canvas)}.glyph-stage{position:sticky;top:72px;height:calc(80svh - 72px);min-height:360px;overflow:hidden;isolation:isolate}.glyph-kicker{position:absolute;top:25px;left:0;right:0;text-align:center;font-size:12px;letter-spacing:.18em;color:var(--forest);z-index:2}.glyph-field{position:absolute;inset:0;background:#075b45;clip-path:url(#one-glyph-clip)}.glyph-rings{width:75%;aspect-ratio:1;border-radius:50%;border:1px solid #ddeB5530;position:absolute;left:45%;top:0;box-shadow:0 0 0 60px #ddeB5509,0 0 0 120px #ddeB5509,0 0 0 180px #ddeB5509}.glyph-art{position:absolute;width:100%;height:100%;pointer-events:none}.glyph-reveal{position:absolute;inset:0;padding:40px;display:grid;align-content:center;justify-content:center;text-align:center;color:#f5f3ed;opacity:0;pointer-events:none}.glyph-reveal h2{font-size:clamp(36px,6vw,80px)}.glyph-reveal p{color:#c5d5ca}.glyph-skip{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);border:1px solid var(--line);background:var(--canvas);color:var(--ink);padding:10px 18px;border-radius:30px;font-size:13px;text-align:center;z-index:3;white-space:nowrap}.glyph-portal[data-static]{height:auto}.glyph-portal[data-static] .glyph-stage{position:relative}.glyph-portal[data-static] .glyph-field{clip-path:none}.glyph-portal[data-static] .glyph-reveal{opacity:1}.glyph-portal[data-static] .glyph-kicker{color:#ddeb55}
.flow-demo{border-radius:28px;background:#0b2a20;color:#f2f1e9;padding:clamp(16px,3vw,32px);border:1px solid #357661;overflow:hidden}.flow-demo canvas{display:block;width:100%;height:420px;touch-action:pan-y}.flow-actions{display:flex;flex-wrap:wrap;gap:10px}.flow-actions .btn{min-height:44px;padding:8px 18px;font-size:13px;border-color:#799586;color:#f2f1e9}.flow-actions .citron{color:#17231f;border-color:#ddeb55}.flow-links{margin-top:20px;font-size:14px}.flow-links summary{cursor:pointer;padding:8px 0}.flow-links [data-flow-links]{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.flow-links button{border:1px solid #799586;background:transparent;color:inherit;border-radius:10px;min-height:44px;padding:8px 12px;cursor:pointer;font-size:12px}.flow-links button[aria-pressed=false]{border-style:dashed;color:#edbb95}.flow-demo p{font-size:13px;color:#bdcec2;max-width:85ch}.flow-demo .demo-note{font-size:12px}.flow-demo :focus-visible{outline-color:#ddeb55}
.build-stage{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:42px;perspective:1000px}.build-source{display:grid;gap:14px;align-content:center}.build-source>small{letter-spacing:.14em;font-size:12px;color:var(--muted);margin-bottom:10px}.build-source button{background:var(--elevated);border:1px solid var(--line);border-radius:14px;text-align:left;padding:20px;font-size:15px;cursor:pointer;display:flex;justify-content:space-between;gap:14px;min-height:64px}.build-source button span{color:var(--forest)}.build-source button[data-highlight]{border-color:var(--forest);background:var(--panel)}.build-target{border:1px solid var(--line);border-radius:22px;padding:20px;background:var(--elevated);min-height:330px}.build-toolbar{display:flex;align-items:center;gap:5px;font-size:11px;margin-bottom:22px;color:var(--muted)}.build-toolbar i{width:7px;height:7px;background:var(--line);border-radius:50%}.build-toolbar>span{margin-left:12px}.build-target>[data-build-target]{padding:18px 12px;display:flex;gap:16px;align-items:center;border-top:1px solid var(--line);border-radius:10px}.build-target>[data-build-target]>span{width:36px;height:36px;flex:none;border-radius:10px;background:var(--panel);display:grid;place-items:center;color:var(--forest);font-size:21px}.build-target b{font-size:14px}.build-target p{font-size:12px;color:var(--muted);margin:2px 0}.build-target>[data-highlight]{background:var(--panel)}.build-ghost{position:absolute;left:0;top:0;background:var(--citron);color:#17231f;padding:12px 15px;border-radius:12px;font-size:12px;pointer-events:none;opacity:0;z-index:5}
.hero .phone small,.hero .cinematic-badge small{margin-top:0}.phone-total strong small{display:inline}.flow-connect{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.flow-connect label{display:grid;gap:5px;font-size:12px}.flow-connect select,.flow-connect button{min-height:44px;padding:8px 12px;border:1px solid #799586;background:#163b2c;color:#f2f1e9;border-radius:10px}.flow-connect button{align-self:end;cursor:pointer}
@media(min-width:981px){.hero h1{font-size:clamp(40px,4.4vw,64px)}.hero .wrap{grid-template-columns:1fr 1fr;gap:45px}.nav-links{gap:15px;font-size:13px}}
@media(max-width:760px){.cinematic-card{height:540px;transform:none}.phone{transform:rotate(-3deg);width:248px;height:475px}.cinematic-badge{padding:10px;font-size:10px;gap:7px}.cinematic-badge small{font-size:9px}.badge-quote{top:66px;left:8px}.badge-payment{bottom:40px;right:8px}.cinematic-badge>span{width:25px;height:25px}.cinematic-word{font-size:100px}.glyph-portal{height:125svh}.glyph-stage{height:65svh;min-height:340px}.glyph-reveal{padding:24px}.flow-demo canvas{height:430px}.flow-actions .btn{flex:1}.build-stage{grid-template-columns:1fr;gap:22px}.build-source{gap:8px}.build-source button{min-height:48px;padding:13px;font-size:13px}.build-target{min-height:290px}.hero h1{font-size:clamp(36px,6vw,48px)}}
@media(prefers-reduced-motion:reduce){.cinematic-card,.phone{transform:none!important}.glyph-portal{height:auto}.glyph-stage{position:relative}.glyph-field{clip-path:none!important}.glyph-reveal{opacity:1!important}.glyph-kicker{color:#ddeb55!important}.build-ghost{display:none}.build-target>[data-build-target]{opacity:1!important;transform:none!important;filter:none!important}}