/* Chat Island marketing site v4. Palette from the approved scenes; display type rounded, body humanist. */
:root{--sand:#FFF6E5;--cream:#FFFDF7;--ink:#183348;--sea:#27A9C3;--sea-dark:#12647A;--coral:#F36F5A;--sun:#F6C653;--leaf:#5FA76D;
--muted:#4f6470;--line:#e6dcc6;--error:#a12e30;--r:22px;
--display:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Nunito","Varela Round","Trebuchet MS",system-ui,sans-serif;
--body:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans","Noto Sans Hebrew","Noto Sans Arabic",Roboto,Helvetica,Arial,sans-serif;
--shadow-scene:0 18px 50px rgba(24,51,72,.14);--shadow-speech:0 10px 28px rgba(24,51,72,.22);--shadow-cta:0 4px 0 #c9523f}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font:17px/1.55 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}a{color:var(--sea-dark)}
h1,h2,h3{font-family:var(--display);line-height:1.08;margin:0 0 .45em;letter-spacing:-.01em}
h1{font-size:clamp(2.2rem,4.6vw,3.9rem);font-weight:800}h2{font-size:clamp(1.7rem,3.6vw,2.7rem);font-weight:800}h3{font-size:1.2rem}
.wrap{max-width:1180px;margin:0 auto;padding:72px 22px}.fine{font-size:.85rem;color:var(--muted);margin-top:18px}
.skip{position:fixed;top:-100px;inset-inline-start:16px;padding:12px;background:#fff;z-index:100}.skip:focus{top:12px}
.preview-banner{background:var(--sun);color:var(--ink);text-align:center;font-size:12px;font-weight:800;padding:6px}
.js-only{display:none}.enhanced .js-only{display:revert}
/* header */
.top{position:sticky;top:0;z-index:40;background:rgba(255,253,247,.92);backdrop-filter:blur(8px);border-bottom:1px solid rgba(24,51,72,.06)}
.nav-wrap{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:10px 18px}
.brand{display:flex;align-items:center;gap:9px;font:800 1.2rem var(--display);color:var(--ink);text-decoration:none;margin-inline-end:auto;white-space:nowrap}
.brand-beta{font:700 .6rem var(--body);letter-spacing:.14em;margin-inline-start:6px;color:var(--sea-dark);vertical-align:top}
.desktop-nav{display:flex;gap:20px}.desktop-nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:13px 24px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font-weight:800;border:0;cursor:pointer;font-size:1rem;transition:transform .15s}
.btn:active{transform:translateY(2px)}.btn-coral,.nav-cta,.submit{background:var(--coral);box-shadow:var(--shadow-cta)}
.nav-cta{min-height:40px;padding:8px 16px;font-size:.9rem}
.btn-quiet{color:inherit;font-weight:700;text-decoration:none;padding:12px 6px}
.langs,.mobile-nav{position:relative}.langs summary,.mobile-nav summary{list-style:none;cursor:pointer;padding:8px 12px;border-radius:12px;background:#fff;font-weight:700;font-size:.9rem;white-space:nowrap}
.langs summary::-webkit-details-marker,.mobile-nav summary::-webkit-details-marker{display:none}
.langs>div,.mobile-nav nav{position:absolute;inset-inline-end:0;top:46px;min-width:170px;padding:8px;border-radius:14px;background:var(--cream);box-shadow:0 10px 30px rgba(0,0,0,.14);display:grid;z-index:50}
.langs a,.mobile-nav a{padding:9px 10px;border-radius:10px;color:var(--ink);text-decoration:none}.langs a[aria-current]{background:var(--sand);font-weight:800}
.mobile-nav{display:none}
/* speech: spoken, never messaging */
.speech{margin:0;position:relative;display:inline-block;max-width:320px;padding:12px 18px 14px;border-radius:22px;background:#fff;color:var(--ink);box-shadow:var(--shadow-speech);font-family:var(--display)}
.speech p{margin:0;font-size:1.25rem;font-weight:800;line-height:1.2;text-align:left}
.speech-char figcaption{display:flex;align-items:center;gap:6px;font:700 .7rem var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--sea-dark);margin-bottom:3px}
.speech-char figcaption .icon{width:15px;height:15px}
.speech-char::before{content:"";position:absolute;left:-9px;top:22px;border:9px solid transparent;border-right-color:#fff;border-left:0}
.speech-child{background:var(--sun)}
.speech-child::after{content:"";position:absolute;right:26px;bottom:-10px;border:10px solid transparent;border-top-color:var(--sun);border-bottom:0}
.spoken-out{display:flex;align-items:center;gap:7px;margin-top:5px;font:700 .68rem var(--body);letter-spacing:.07em;text-transform:uppercase;color:#6b4a00}
.rings{position:relative;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.65)}
.rings .icon{width:13px;height:13px}
.rings::before,.rings::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(107,74,0,.35);opacity:0}
.wave{display:inline-flex;align-items:center;gap:2px;height:14px}.wave i{display:block;width:3px;border-radius:2px;background:#6b4a00;height:30%}
.wave i:nth-child(2){height:70%}.wave i:nth-child(3){height:100%}.wave i:nth-child(4){height:55%}.wave i:nth-child(5){height:85%}.wave i:nth-child(6){height:45%}
.speech.mini{padding:8px 13px 9px}.speech.mini p{font-size:.98rem}.speech.mini .spoken-out span:last-child{display:none}
.speech-pip{background:#e7f6ee}.speech-pip p{color:var(--leaf);font-size:1.1rem;text-align:center}
/* portraits: one head size for everyone */
.badge{flex:none;display:inline-block;width:64px;height:64px;border-radius:50%;overflow:hidden;background:#fdeccf;border:3px solid #fff;box-shadow:0 6px 16px rgba(24,51,72,.18)}
.badge img,.portrait img{width:100%;height:100%;object-fit:cover}
.face-crop{object-fit:cover;object-position:50% 4%;transform:scale(2.3);transform-origin:50% 8%}
.face-crop-pip{object-fit:cover;object-position:50% 0;transform:scale(1.5);transform-origin:50% 12%}
.badge-sam{background:#d5eef4}.badge-dani{background:#fde2cf}.badge-maya{background:#e7f1dc}
/* hero */
.hero{background:linear-gradient(180deg,#fffdf7 0%,#fff6e5 100%);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center;padding-top:56px;padding-bottom:64px}
.hero h1{font-size:clamp(2.1rem,3.6vw,3.2rem)}.hero h1 .line{display:block}.hero h1 .line-1{color:var(--sea-dark)}
.hero-sub{font-size:1.15rem;color:#2f4a5e;margin:0 0 26px;max-width:34em}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.art-note{font-size:.78rem;color:var(--muted);margin:10px 4px 0}
.stage{position:relative;border-radius:30px;overflow:hidden;aspect-ratio:5/4;box-shadow:0 30px 60px rgba(24,51,72,.18);background:#cfeaf0}
.stage-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(24,51,72,.18) 100%);pointer-events:none}
.stage-talk{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:space-between;padding:22px}
.says{display:flex;align-items:flex-start;gap:12px}.says-child{justify-content:flex-end;padding-bottom:4px}
.stage-pip{position:absolute;z-index:2;left:6%;bottom:3%;width:24%}
.stage-prop{position:absolute;z-index:2;left:31%;bottom:6%;width:9%}
/* how a visit works */
.visit{background:#fff6e5}
.moments{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;counter-reset:m}
.moment{background:#fff;border-radius:26px;padding:22px 22px 26px;box-shadow:var(--shadow-scene);position:relative}
.moment h3{margin:14px 0 6px;font-size:1.25rem}.moment p{margin:0;color:var(--muted)}
.num{position:absolute;top:-14px;inset-inline-start:22px;width:34px;height:34px;border-radius:50%;background:var(--sea);color:#fff;font-weight:800;display:grid;place-items:center}
.moment-art{height:170px;border-radius:20px;background:#e8f6f8;display:flex;align-items:center;justify-content:center;gap:12px;padding:14px;overflow:hidden}
.m-ask{justify-content:flex-start}.m-ask .speech p{font-size:1.1rem}
.m-speak{background:#fff1cc;flex-direction:column;gap:10px}.m-speak .speech::after{display:none}
.mic-big{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--coral);color:#fff;box-shadow:0 0 0 8px rgba(243,111,90,.18),0 0 0 16px rgba(243,111,90,.08)}
.mic-big .icon{width:28px;height:28px}
.m-react{background:#e7f6ee;align-items:flex-end}.m-react .glass{width:44px;margin-bottom:12px}.m-react .pip-small{width:96px}
/* the ladder */
.grow{background:#e8f6f8}
.grow-head{display:flex;align-items:center;gap:16px}.grow-head h2{margin:0}
.ladder{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:16px}
.rung{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px;align-items:center;background:#fff;border-radius:24px;padding:20px 24px;box-shadow:0 2px 0 rgba(24,51,72,.05)}
.rung-label{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}
.lvl{grid-row:1/3;width:40px;height:40px;border-radius:50%;background:var(--sea);color:#fff;display:grid;place-items:center;font-weight:800}
.rung-label b{font:800 1.1rem var(--display)}.rung-label small{color:var(--muted);font-size:.9rem}
.rung-talk{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.asks{margin:0;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:6px}.asks .icon{width:16px;height:16px;flex:none}
.rung .speech::after{display:none}
.rung-0 .speech p{font-size:1.05rem}.rung-1 .speech p{font-size:1.25rem}.rung-2 .speech p{font-size:1.45rem}
/* missions */
.missions-sec{background:var(--cream)}
.missions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:30px}
.mission{background:#fff;border-radius:26px;overflow:hidden;box-shadow:var(--shadow-scene)}
.mission-art{position:relative;aspect-ratio:4/3;overflow:hidden;background:#cfeaf0}
.mission-art>.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.mission-art .prop img{width:100%;height:auto}
.mission-art .speech.mini{position:absolute;left:14px;top:14px;max-width:78%}
.mission-art .badge{position:absolute;right:14px;bottom:14px;width:78px;height:78px}
.mission-art .prop{position:absolute;left:18%;bottom:8%;width:16%}
.pip-stand{position:absolute;right:12%;bottom:4%;width:34%}
.mission-text{padding:16px 20px 22px}.verb{display:block;font:800 .78rem var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--coral)}
.mission-text p{margin:4px 0 0;font:700 1.15rem var(--display)}
/* pedagogy */
.pedagogy{background:var(--cream);padding-bottom:10px}.ped-grid{padding-top:10px}
.lead{font-size:1.15rem;max-width:44em;color:#2f4a5e}
.why summary{cursor:pointer;font-weight:800;color:var(--sea-dark);list-style:none}.why summary::-webkit-details-marker{display:none}
.terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0}
.term{background:#fff6e5;border-radius:18px;padding:16px 18px}.term h3{font-size:1rem;margin:0 0 4px}.term p{margin:0;color:var(--muted);font-size:.95rem}
/* island */
.island{background:#d9f0f4}
.island-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:32px;align-items:start;margin-top:26px}
.map{position:relative;border-radius:30px;overflow:hidden;box-shadow:var(--shadow-scene)}
.pin{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;border:3px solid #fff;background:var(--coral);cursor:pointer;padding:0;box-shadow:0 3px 8px rgba(0,0,0,.25)}
.pin.is-active{background:var(--sun);transform:scale(1.25)}.pin.is-active span{position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--sun);animation:ring 2.4s ease-out 1}
.place-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.place button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:76px 1fr;grid-template-rows:auto auto;column-gap:14px;width:100%;padding:8px;border-radius:18px;background:#fff}
.place button:focus-visible{outline:3px solid var(--sea)}
.place-art{grid-row:1/3;width:76px;height:56px;border-radius:12px;overflow:hidden}.place-art img{width:100%;height:100%;object-fit:cover}
.place-name{font:800 1rem var(--display);align-self:end}.place-task{font-size:.9rem;color:var(--muted)}
.place button[aria-pressed=true]{background:var(--sun)}.place button[aria-pressed=true] .place-task{color:var(--ink)}
.hint{color:var(--muted);font-size:.92rem;margin:0 0 12px}
/* cast */
.friends{background:var(--cream)}
.cast{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px}
.person{position:relative;text-align:center}
.person button{all:unset;cursor:pointer;display:grid;justify-items:center;gap:4px;width:100%}
.person button:focus-visible{outline:3px solid var(--sea);border-radius:18px}
.portrait{width:132px;height:132px;border-radius:50%;overflow:hidden;border:4px solid #fff;box-shadow:0 12px 26px rgba(24,51,72,.16);transition:transform .25s}
.person-maya .portrait{background:#e7f1dc}.person-sam .portrait{background:#d5eef4}.person-dani .portrait{background:#fde2cf}.person-leo .portrait{background:#fbe0dc}.person-pip .portrait{background:#dff3ea}
.person button:hover .portrait,.person.is-open .portrait{transform:translateY(-4px)}
.p-name{font:800 1.1rem var(--display);margin-top:8px}.p-role{font-size:.88rem;color:var(--muted);max-width:180px}
.person .speech{position:absolute;left:50%;top:-6px;transform:translate(-50%,-100%) scale(.94);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;min-width:180px;z-index:4}
.person .speech p{font-size:1rem;text-align:center}.person .speech::before{display:none}
.person.is-open .speech{opacity:1;transform:translate(-50%,-100%) scale(1)}
@media (hover:hover){.person button:hover+.speech{opacity:1;transform:translate(-50%,-100%) scale(1)}}
/* beta */
.beta{background:linear-gradient(180deg,#1d5d6e 0%,#183348 100%);color:#fff}
.beta-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:start}
.beta h2{color:#fff}.beta p{color:#e2eef2}.text-link{color:var(--sun);font-weight:800;text-decoration:none}
.beta-pip{width:150px;margin-top:30px}
.join-card{background:var(--cream);color:var(--ink);border-radius:28px;padding:30px;box-shadow:0 20px 50px rgba(0,0,0,.25);scroll-margin-top:90px}
.join-card p{color:var(--muted)}
/* form (behaviour unchanged from v3) */
.signup-card{display:grid;gap:10px}.field-label{font-weight:800;font-size:.92rem}.optional{font-weight:500;color:var(--muted)}
.signup-card input:not([type=checkbox]):not([type=radio]),.signup-card select{display:block;width:100%;min-height:48px;border:2px solid var(--line);background:#fff;color:var(--ink);border-radius:12px;padding:11px 12px;font-size:1rem}
.signup-card input:focus,.signup-card select:focus{outline:none;border-color:var(--sea)}
.check-row{display:flex;gap:10px;align-items:flex-start}.check-row input{width:20px;height:20px;margin-top:3px;flex:none}
.readiness{border-top:1px solid var(--line);padding-top:10px}.readiness summary{cursor:pointer;font-weight:800;list-style:none;display:flex;justify-content:space-between}
.readiness summary::-webkit-details-marker{display:none}.readiness fieldset{border:0;padding:0;margin:10px 0}.readiness legend{font-weight:700;margin-bottom:8px}
.readiness-options{display:grid;gap:6px}.readiness-option{display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:12px;background:var(--sand);cursor:pointer}
.interest-signature{margin-top:10px;padding:14px;border-radius:14px;background:#eef7f3}.interest-signature h4{margin:0 0 6px}.declaration{font-size:.92rem}
.field-error{color:var(--error);font-size:.88rem;font-weight:700}.error-summary{border:2px solid var(--error);border-radius:12px;padding:10px 14px;background:#fff2f2}
.honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.form-note{font-size:.82rem;color:var(--muted)}.privacy-link{margin:0;font-size:.9rem}
.form-success{text-align:center;padding:18px}.success-mark{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--leaf);color:#fff;font-size:1.6rem}
.closed{font-weight:700}
/* faq and footer */
.faq{max-width:820px}.question{border-bottom:1px solid var(--line);padding:6px 0}.question summary{cursor:pointer;font-weight:800;padding:12px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.question summary::-webkit-details-marker{display:none}.question p{color:var(--muted);margin-top:0}
.footer{background:var(--ink);color:#cfe0e7}.footer-in{display:grid;grid-template-columns:1fr auto;gap:18px;padding:40px 22px}
.footer .brand{color:#fff}.tag{font-size:.85rem;color:#9fc3cf;margin-inline-start:44px}
.footer-links{display:flex;flex-wrap:wrap;gap:18px}.footer-links a{color:#fff;text-decoration:none}
.footer-small{grid-column:1/-1;display:flex;gap:18px;font-size:.8rem;color:#9fc3cf}
/* documents */
.document{max-width:760px}.intro{font-size:1.15rem}.document-list li{margin-bottom:8px}.notice{padding:14px 16px;border-radius:14px;background:var(--sand)}
.thanks{text-align:center}
/* motion: reveal, character-enter, speech-enter; each plays once */
.enhanced .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.enhanced .reveal.in{opacity:1;transform:none}
.enhanced .char-enter{opacity:0;transform:translateX(-18px) scale(.98);transition:opacity .7s ease,transform .7s ease}
.enhanced .char-enter.in{opacity:1;transform:none}
.enhanced .seq-1,.enhanced .seq-2{opacity:0;transform:scale(.94);transition:opacity .35s ease,transform .35s ease}
.enhanced .seq-1{transform-origin:10% 50%}.enhanced .seq-2{transform-origin:90% 100%}
.enhanced .seq-1.in,.enhanced .seq-2.in{opacity:1;transform:none}
.in .rings::before{animation:ring 1.4s ease-out .15s 1}.in .rings::after{animation:ring 1.4s ease-out .45s 1}
.in .wave i{animation:talk .9s ease-in-out 2}
@keyframes ring{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(2.2)}}
@keyframes talk{50%{transform:scaleY(.4)}}
.stage-pip img{animation:bob 6s ease-in-out infinite}@keyframes bob{50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}
.enhanced .reveal,.enhanced .char-enter,.enhanced .seq-1,.enhanced .seq-2{opacity:1;transform:none}}
/* tablet */
@media (max-width:1023px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:30px}.moments{grid-template-columns:minmax(0,1fr)}.cast{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:36px}
.missions{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.island-layout,.beta-grid{grid-template-columns:minmax(0,1fr)}}
/* phone */
@media (max-width:767px){
.desktop-nav,.nav-cta{display:none}.mobile-nav{display:block}.lang-name{display:none}.brand-beta{display:none}
.wrap{padding:44px 18px}.hero-grid{padding-top:26px;padding-bottom:36px}
.hero-sub{font-size:1.05rem}.stage{aspect-ratio:4/4.4;border-radius:24px}.stage-bg{object-position:66% 50%}
.stage-talk{padding:14px}.badge{width:52px;height:52px}.speech p{font-size:1.1rem}.speech{max-width:230px}
.stage-pip{width:34%;left:4%}.stage-prop{width:13%;left:40%}
.moment-art{height:150px}
.rung{grid-template-columns:minmax(0,1fr);gap:12px;padding:16px}
.missions{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:24px -18px 0;padding:0 18px 12px}
.mission{flex:0 0 84%;scroll-snap-align:center}
.terms{grid-template-columns:minmax(0,1fr)}
.place-list{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:8px}
.place{flex:0 0 78%;scroll-snap-align:start}.places,.map{min-width:0}
.cast{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 12px}.person-pip{grid-column:1/-1}
.portrait{width:112px;height:112px}.person .speech{min-width:150px}
.footer-in{grid-template-columns:1fr}.tag{margin-inline-start:0;display:block}}
@media (max-width:380px){.nav-wrap{gap:8px;padding:8px 12px}.brand{font-size:1rem;gap:6px}.brand img{width:30px;height:30px}}
.pin-0{left:27%;top:42%}.pin-1{left:37%;top:45%}.pin-2{left:47%;top:64%}.pin-3{left:35%;top:28%}.pin-4{left:20%;top:74%}.pin-5{left:46%;top:30%}.pin-6{left:66%;top:27%}
.brand .logo-img{height:58px;width:auto}.footer .brand .logo-img{height:60px}
@media (max-width:767px){.brand .logo-img{height:42px}}