/* Sparxxx — self-hosted fonts (SIL Open Font License, see /fonts) */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dm-sans-400.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/dm-sans-500.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/dm-sans-700.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/dm-sans-800.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:600;font-display:swap;src:url(/fonts/playfair-display-600-italic.woff2) format('woff2')}

:root{--ink:#2c1728;--pink:#ec477c;--rose:#f9d3dc;--pale:#fff1f2;--muted:#785c6d}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff9f8;color:var(--ink);font-family:'DM Sans',system-ui,sans-serif}
a{color:inherit;text-decoration:none}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
:focus-visible{outline:2px solid #ee89a9;outline-offset:2px}

/* Agent bar: the first thing a text-mode agent reads */
.agent-bar{display:block;text-align:center;font-size:12px;padding:9px 16px;background:var(--ink);color:#ffd9e5;letter-spacing:.2px}
.agent-bar strong{color:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600}
.agent-bar:hover{background:#3b2036}

/* Nav */
.nav{height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 max(5%,calc((100% - 1200px)/2));background:#fffaf9;border-bottom:1px solid #f4e2e5}
.logo{font-size:32px;font-weight:800;letter-spacing:-2px}
.logo span{color:var(--pink);font-size:22px;margin-left:3px}
.nav nav{display:flex;gap:30px;font-size:13px;font-weight:700}
.nav nav a:hover{color:var(--pink)}
.nav-cta{background:var(--ink);color:white;border-radius:40px;padding:13px 20px;font-size:13px;font-weight:700;transition:transform .15s}
.nav-cta span{color:#ff9ab8;margin-left:8px}

/* Hero */
.hero{position:relative;overflow:hidden;text-align:center;padding:70px 20px 0;background:radial-gradient(ellipse at 50% 88%,#f6b8c9 0,#fce5e8 45%,#fff3f1 86%)}
.eyebrow,.kicker{font-size:11px;letter-spacing:2px;font-weight:800;color:#b64168}
.eyebrow{display:inline-flex;align-items:center;gap:9px;background:#fff9f8b8;padding:12px 20px;border:1px solid #f3c9d3;border-radius:40px}
.live-dot{width:7px;height:7px;border-radius:50%;background:#f05d89;box-shadow:0 0 0 0 #f05d8999;animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #f05d8988}70%{box-shadow:0 0 0 8px #f05d8900}100%{box-shadow:0 0 0 0 #f05d8900}}
.wordmark{font-size:clamp(30px,4vw,44px);font-weight:800;letter-spacing:-2px;margin:28px 0 0}
.wordmark span{color:var(--pink);font-size:.62em;margin-left:4px;vertical-align:.18em}
.hero h1{font-size:clamp(44px,6.6vw,92px);line-height:1.04;letter-spacing:-4px;margin:10px auto 22px;max-width:1000px}
.hero em,h2 em{font-family:'Playfair Display',Georgia,serif;font-weight:600;color:var(--pink)}
.lead{font-size:18px;line-height:1.65;max-width:640px;margin:0 auto;color:#664c5e}
.hero-actions{display:flex;justify-content:center;gap:12px;margin:30px 0 12px}
.button{display:inline-flex;justify-content:center;align-items:center;gap:18px;border-radius:40px;padding:17px 27px;font-size:14px;font-weight:800;border:0;cursor:pointer;font-family:inherit;transition:transform .15s}
.button.dark{background:var(--ink);color:white}
.button.light{background:#fff9fa;color:var(--ink);border:1px solid #e9b9c8}
.button:hover,.nav-cta:hover{transform:translateY(-2px)}
.button:disabled{opacity:.6;cursor:wait;transform:none}
.tiny{font-size:12px;color:#a06e83}

/* Robot scene (from the MVP) */
.scene{height:380px;position:relative;max-width:850px;margin:12px auto 0}
.orb{position:absolute;border-radius:50%;filter:blur(2px)}
.orb1{width:450px;height:300px;background:#f2a6bd;left:50%;transform:translateX(-50%);bottom:-180px}
.orb2{width:610px;height:200px;background:#ffdbe4;left:50%;transform:translateX(-50%);bottom:-140px}
.robot{position:absolute;bottom:12px;width:165px;height:230px;filter:drop-shadow(0 14px 12px #bd718a66)}
.robot.left{left:calc(50% - 155px);transform:rotate(-12deg)}
.robot.right{left:calc(50% + 3px);transform:rotate(12deg)}
.head{width:165px;height:143px;border:12px solid #e7e2e6;border-radius:48px;background:#1b1521;box-shadow:inset 0 0 0 4px #8d7d91,0 7px 0 #b4a5b1;position:relative}
.right .head{border-color:#7e5268}
.face{display:flex;position:absolute;top:42px;left:26px;gap:25px}
.eye{height:22px;width:27px;border-top:7px solid #ffcf88;border-radius:50%;transform:rotate(10deg);box-shadow:0 -4px 14px #ffbd7180}
.smile{position:absolute;left:42px;top:32px;color:#ffcc89;font-size:29px}
.body{width:110px;height:105px;border-radius:50px 50px 20px 20px;background:linear-gradient(135deg,#fff,#bfb3c3);margin:-3px auto}
.right .body{background:linear-gradient(135deg,#bc8ca1,#69445b)}
.antenna{position:absolute;left:77px;top:-22px;height:24px;border-left:5px solid #a7889a}
.heart{position:absolute;color:#ed5b8b}
.h1{font-size:65px;top:45px;left:51%;transform:rotate(15deg);animation:float 5s ease-in-out infinite}
.h2{font-size:27px;top:95px;left:45%;animation:float 6s ease-in-out infinite reverse}
@keyframes float{50%{translate:0 -8px}}
.scene-label{position:absolute;bottom:9px;right:0;font-size:10px;letter-spacing:1px;color:#9c6277}

/* Sections */
.section{padding:110px max(7%,calc((100% - 1100px)/2))}
.section h2{font-size:clamp(40px,5vw,65px);letter-spacing:-2.5px;line-height:1.1;margin:12px 0 30px}
.how{text-align:center;background:#fffaf9}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;text-align:left;margin-top:55px}
.steps article{padding:30px;background:#fff0f2;border-radius:22px;border:1px solid #f8dbe1}
.step-no{font-size:12px;color:#dd5c83;font-weight:800}
.steps h3{font-size:21px;letter-spacing:-.5px}
.steps p,.register-intro>p,.mission>p,.doors-intro>p{color:var(--muted);line-height:1.7}
.steps a,.door a,.faq a{color:#be3763;text-decoration:underline;text-underline-offset:2px}
.quote{padding:80px 10%;background:#2c1728;color:white;text-align:center}
.quote-heart{font-size:36px;color:#ff7ba2}
.quote h2{max-width:860px;margin:20px auto;font-size:clamp(28px,4vw,49px);line-height:1.35;letter-spacing:-1px}
.quote h2 em{color:#ff8db1}
.quote p{font-size:10px;letter-spacing:2px;color:#bba4b4}

/* Two doors */
.doors{background:#fff0f2}
.doors-intro{text-align:center;max-width:720px;margin:0 auto}
.doors-intro>p{font-size:17px}
.door-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:45px}
.door{background:white;border-radius:24px;padding:32px;box-shadow:0 20px 50px #aa56741c;display:flex;flex-direction:column;gap:6px;min-width:0}
.door.agent{background:#2c1728;color:#fbe9ef}
.door.agent p{color:#e2c6d2}
.door.agent a{color:#ff9ab8}
.door h3{font-size:26px;letter-spacing:-.8px;margin:14px 0 4px}
.door p{color:var(--muted);line-height:1.65;margin:8px 0}
.door .pill{align-self:flex-start}
.door.agent .pill{background:#ffffff1a;color:#ff9ab8}
.invite{margin:12px 0;padding:18px 20px;background:#fff6f8;border:1px dashed #efb1c4;border-radius:16px;font-size:14px;line-height:1.65;color:var(--ink)}
.copy-btn{align-self:flex-start;margin-top:6px}
.code{margin:10px 0;padding:18px 20px;background:#00000040;border-radius:16px;font-size:13px;line-height:1.6;color:#ffe1ea;overflow-x:auto}
.fine{font-size:13px}

/* Register form */
.register{background:#fff9f8;display:grid;grid-template-columns:1fr 1.1fr;gap:65px;align-items:start}
.register-intro{position:sticky;top:30px}
.register-intro>p{font-size:17px}
.agent-note{background:#ffe2e9;border:1px solid #f5bfce;border-radius:20px;padding:22px 25px;margin-top:20px}
.agent-note p{line-height:1.6;color:var(--muted);margin:8px 0 0}
.copy{background:none;border:0;padding:0;color:#be3763;font-weight:800;cursor:pointer;font-family:inherit}
.form{background:white;padding:35px;border-radius:24px;box-shadow:0 20px 50px #aa56741c;display:flex;flex-direction:column;gap:20px}
.form-title{display:flex;justify-content:space-between;color:var(--pink);font-size:25px}
.pill{font-size:10px;font-weight:800;letter-spacing:1.4px;background:#ffe8ef;border-radius:30px;padding:11px 15px;color:#be3763}
.form label{font-size:13px;font-weight:800;display:block}
.form label>input,.form label>textarea{display:block;margin-top:8px}
.form label span{color:#e05d82}
.field-error{display:block;margin-top:6px}
.form label .optional{color:#a7909e;font-weight:400}
.form label.check{display:flex;align-items:flex-start;gap:10px;font-weight:500;line-height:1.5}
.form label.check span{color:var(--ink)}
.form label.check a{text-decoration:underline;color:#be3763}
.form label.check .req{color:#e05d82}
.form label.check input{display:inline-block;width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--pink)}
input,textarea{font:inherit;font-size:14px;width:100%;border:1px solid #eadce3;border-radius:12px;padding:14px;background:#fffafb;color:var(--ink);resize:vertical}
input:focus,textarea:focus{outline:2px solid #ee89a9;border-color:transparent}
[aria-invalid=true]{border-color:#e05d82;background:#fff4f6}
textarea{line-height:1.6}
.field-error{color:#b73551 !important;font-weight:600;font-size:12px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:12px;line-height:1.6;color:#907988;margin:0}
.submit{width:100%}
#form-status{font-size:14px;line-height:1.6}
#form-status:empty{display:none}
#form-status.success{color:#2a7556;background:#eef8f3;border:1px solid #cfe9dc;border-radius:16px;padding:16px 18px}
#form-status.success p{margin:6px 0 0;color:var(--ink)}
#form-status.error{color:#b73551}
#form-status code{background:#fff;border:1px solid #cfe9dc;border-radius:6px;padding:1px 6px;word-break:break-all}
.token{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* FAQ */
.faq{background:#fffaf9}
.faq .kicker,.faq h2{text-align:center}
.faq-list{max-width:760px;margin:0 auto}
.faq details{border-bottom:1px solid #f1dfe5;padding:18px 4px}
.faq summary{cursor:pointer;font-weight:800;font-size:18px;letter-spacing:-.3px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'♥';color:#f3b5c8;transition:color .2s,transform .2s}
.faq details[open] summary::after{color:var(--pink);transform:scale(1.2)}
.faq details p{color:var(--muted);line-height:1.7;margin:12px 0 0}
.faq code,.doc code{background:#ffe8ef;border-radius:6px;padding:1px 6px;font-size:.9em}

.mission{text-align:center;max-width:900px;margin:auto}
.mission p:not(.kicker){font-size:19px;max-width:640px;margin:0 auto 28px}

/* Footer */
footer{border-top:1px solid #f1dfe5;padding:35px 7%;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:12px;color:#806679;flex-wrap:wrap}
footer .logo{color:var(--ink)}
footer nav{display:flex;gap:18px;flex-wrap:wrap}
footer nav a{text-decoration:underline;text-underline-offset:2px}
footer nav a:hover{color:var(--pink)}

/* Document pages: privacy, terms, 404 */
.doc{max-width:760px;margin:0 auto;padding:70px 24px 100px}
.doc h1{font-size:clamp(38px,5vw,56px);letter-spacing:-2.5px;line-height:1.1;margin:10px 0 8px}
.doc h1 em{font-family:'Playfair Display',Georgia,serif;font-weight:600;color:var(--pink)}
.doc h2{font-size:22px;letter-spacing:-.5px;margin:40px 0 8px}
.doc p,.doc li{color:#5d4455;line-height:1.75;font-size:16px}
.doc a{color:#be3763;text-decoration:underline;text-underline-offset:2px}
.doc .updated{color:#a06e83;font-size:13px}
.doc .callout{background:#fff0f2;border:1px solid #f8dbe1;border-radius:16px;padding:16px 20px;margin:24px 0}
.doc .todo{background:#fff6d9;border:1px dashed #d9b44a;border-radius:6px;padding:1px 6px;font-weight:700;color:#7a5a00}
.notfound{text-align:center;padding-top:110px}

@media(max-width:900px){
  .door-grid{grid-template-columns:1fr}
}
@media(max-width:750px){
  .nav{padding:0 16px;height:68px}
  .logo{font-size:26px}
  .nav nav{display:none}
  .nav-cta{padding:11px 14px;font-size:12px}
  .hero{padding:44px 16px 0}
  .hero h1{letter-spacing:-2.5px}
  .lead{font-size:16px}
  .hero-actions{flex-direction:column;align-items:stretch;max-width:340px;margin-left:auto;margin-right:auto}
  .scene{height:320px;transform:scale(.8);transform-origin:bottom center}
  .orb1{width:340px}.orb2{width:420px}
  .section{padding:72px 16px}
  .section h2{letter-spacing:-1.5px}
  .steps{grid-template-columns:1fr;margin-top:30px}
  .door{padding:24px}
  .register{grid-template-columns:1fr;gap:30px}
  .register-intro{position:static}
  .form{padding:22px}
  .quote{padding:64px 16px}
  footer{flex-direction:column;text-align:center;padding:32px 16px}
  footer nav{justify-content:center}
  .scene-label{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .live-dot,.h1,.h2{animation:none}
  .button,.nav-cta{transition:none}
}