@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/jakarta-400.ttf") format("truetype")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/jakarta-500.ttf") format("truetype")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/jakarta-600.ttf") format("truetype")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/jakarta-700.ttf") format("truetype")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:800;font-display:swap;src:url("../assets/fonts/jakarta-800.ttf") format("truetype")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/inter-400.ttf") format("truetype")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/inter-500.ttf") format("truetype")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/inter-600.ttf") format("truetype")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/inter-700.ttf") format("truetype")}
@font-face{font-family:"Inter";font-style:normal;font-weight:800;font-display:swap;src:url("../assets/fonts/inter-800.ttf") format("truetype")}

:root{--brand-blue:#175cff;--brand-teal:#00b8b0;--brand-amber:#ffca45;--brand-navy:#10234b;--brand-canvas:#f5f7fc}
body{font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--brand-navy)}
button,input,select,textarea{font-family:inherit}
h1,h2,h3,.hero h1{font-family:"Plus Jakarta Sans",Inter,sans-serif;letter-spacing:-.045em;font-weight:700}
body:not(.unused) .blue{color:var(--brand-blue)}
.button,button.primary,.primary{background:var(--brand-blue);border-color:var(--brand-blue);color:#fff}
.button:hover,button.primary:hover{background:#1047d1;border-color:#1047d1}
.button.secondary{background:white;color:#175cff;border-color:#bdccf3}
.site-header{background:white}
.hero h1{font-weight:800;line-height:1.14}
.hero .intro{color:#53627b;line-height:1.8}
.hero-visual:before{background:radial-gradient(ellipse at 60% 35%,#dce7ff 0%,#e8faf6 45%,transparent 72%)}
.flow-studio{border-color:#c5d4f2;box-shadow:0 22px 55px #175cff18,0 3px 8px #10234b0a}
.studio-header{background:#f5f7ff}
.studio-icon{background:#175cff;color:white}
.output-card{border-top-color:#00b8b0;background:#fff;width:100%;margin-left:0;margin-right:0}
.status-dot,.dot{background:#175cff}
.example-section{background:#f5f7fc}
.privacy-panel{background:#10234b}
.privacy-panel h2{color:white}
.final-cta{background:#edf3ff;border-left-color:#175cff}
.step-number{color:#175cff;background:#edf2ff}
.audience-icon{background:#e3f8f5;color:#007c78}
.audience-icon.gold{background:#fff3c9;color:#805700}
.stage-art{background:linear-gradient(135deg,#f0f5ff,#edfaf7)}
:focus-visible{outline-color:#175cff}
@media(min-width:801px){.hero{gap:42px}.hero h1{font-size:clamp(38px,4.1vw,57px)}}

.website-home-link{display:inline-flex;align-items:center;gap:6px;color:#175cff;font-size:13px;font-weight:600;text-decoration:none;padding:8px 10px;white-space:nowrap;border-radius:8px}.website-home-link:hover{background:#edf2ff;text-decoration:underline}

.import-diagram{max-height:320px;overflow:auto;border:1px solid #cad4e4;border-radius:8px}.import-diagram svg{display:block;width:100%;min-width:560px;min-height:180px}

.learning-start{padding-block:60px}.learning-card{display:block;padding:28px;background:#f5f7fc;border:1px solid #dbe4f3;border-radius:16px;transition:background .15s}.learning-card:hover{background:#eaf1ff}.learning-card>span{display:inline-block;padding:8px 12px;background:#dff5f1;color:#007c78;border-radius:10px;margin-bottom:20px;font-weight:700}.learning-card:nth-child(2)>span{background:#fff0bd;color:#765400}.learning-card strong,.learning-guide a{color:#175cff}.learning-card h3{font-size:23px}.learning-guide{margin-top:24px}

.purpose{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding-block:72px;border-bottom:1px solid #dbe4f3}.purpose h2{max-width:530px}.purpose-lead{font-size:20px;color:#10234b;font-weight:500}.purpose-questions{list-style:none;padding:0;display:grid;gap:10px;margin:24px 0}.purpose-questions li{border-left:3px solid #00b8b0;padding:8px 16px;background:#f5f7fc;color:#10234b;font-weight:600}.purpose-questions li:last-child{border-color:#ffca45}.purpose-copy>p:last-child{margin-bottom:0}@media(max-width:800px){.purpose{grid-template-columns:1fr;gap:16px;padding-block:48px}.purpose h2{max-width:none}.purpose-lead{font-size:18px}}

.purpose-experience{max-width:510px;padding-left:18px;border-left:3px solid #00b8b0;font-size:16px;line-height:1.8}

.example-flow-scroll{overflow-x:auto;padding:20px 10px}.example-flow{display:block;width:100%;min-width:900px;height:auto}.example-flow text{font-family:Inter,Arial,sans-serif}

.benefit-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;border:0;padding:12px 0 22px;align-items:stretch}
.benefit-card{padding:28px;border:1px solid #dbe5f5;border-top:4px solid #175cff;border-radius:18px;background:linear-gradient(150deg,#edf3ff,#fff 75%);box-shadow:0 10px 25px -14px #12396b45;transition:transform .18s ease,box-shadow .18s ease}
.benefit-card:hover{transform:translateY(-4px);box-shadow:0 16px 30px -14px #12396b55}
.benefit-card h3{font-size:clamp(23px,2vw,28px);line-height:1.25;margin:18px 0 12px;color:#10234b;letter-spacing:-.035em}
.benefit-card p{font-size:16px;line-height:1.65;margin:0;color:#4e6079}
.benefit-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:13px;background:#dce8ff;color:#175cff}.benefit-icon svg{width:29px;height:30px}
.benefit-teal{border-top-color:#00a89f;background:linear-gradient(150deg,#e8f8f4,#fff 75%)}.benefit-teal .benefit-icon{background:#cef0e8;color:#007c78}
.benefit-amber{border-top-color:#f4be31;background:linear-gradient(150deg,#fff7df,#fff 75%)}.benefit-amber .benefit-icon{background:#ffedb0;color:#805b00}
@media(max-width:760px){.benefit-strip{grid-template-columns:1fr;gap:16px}.benefit-card{padding:24px}.benefit-card h3{font-size:24px}}
@media(prefers-reduced-motion:reduce){.benefit-card{transition:none}.benefit-card:hover{transform:none}}

.app-legal-links{display:flex;flex-wrap:wrap;gap:8px 14px;margin-bottom:14px;font-size:12px}footer nav{display:flex;flex-wrap:wrap;gap:14px}