@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');
:root{--paper:#ffffff;--ink:#172033;--muted:#64748b;--green:#2563eb;--line:#dbe4f5}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}header{height:100px;max-width:1440px;margin:auto;padding:24px 6%;display:flex;justify-content:space-between;align-items:center}header a{font-family:'Instrument Serif',Georgia,serif;font-size:50px;text-decoration:none;color:var(--ink)}header a span{color:var(--green)}button,input,textarea{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #93b4ff;outline-offset:5px}.quiet{border:0;background:none;color:var(--ink);font-size:13px;padding:12px}.eyebrow{font-size:10px;letter-spacing:2.3px;color:var(--green);font-weight:600;text-transform:uppercase}h1,h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-2px;line-height:1.02;margin:22px 0}h1{font-size:clamp(56px,7.5vw,108px)}h1 em,h2 em{font-weight:400;color:var(--green)}h2{font-size:clamp(42px,5vw,65px)}p{line-height:1.7}main{min-height:calc(100svh - 178px);padding:34px 24px 60px}.intro{max-width:1120px;margin:auto;display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:70px;min-height:580px}.sub{color:var(--muted);font-size:15px;max-width:310px}.primary{border:0;border-radius:100px;background:var(--green);color:white;padding:19px 27px;font-size:14px;display:inline-flex;justify-content:space-between;align-items:center;gap:38px;min-height:56px}.primary:hover{background:#1d4ed8}.note{font-size:11px;color:var(--muted);line-height:1.6}.actions{margin-top:30px}.collage{height:440px;position:relative}.photo{position:absolute;box-shadow:0 12px 35px #20282012;border:8px solid white;background:#e6e8df;display:flex;align-items:center;justify-content:center;overflow:hidden}.photo:before{content:'';height:115px;width:110px;border-radius:50%;background:#cad0bf;position:absolute;top:55px}.photo:after{content:'';width:220px;height:220px;background:#cad0bf;border-radius:50% 50% 0 0;position:absolute;top:175px}.photo span{position:absolute;z-index:1;bottom:16px;font-size:10px;letter-spacing:1px;color:#4d5947}.one{width:245px;height:315px;left:0;top:5px;transform:rotate(-8deg)}.two{width:205px;height:260px;right:0;top:145px;transform:rotate(9deg);background:#e9dfd4}.two:before,.two:after{background:#d5c5b4}.scribble{font-family:'Instrument Serif',serif;font-style:italic;font-size:24px;position:absolute;right:12px;top:40px;transform:rotate(8deg);color:var(--green)}.photo-caption{position:absolute;bottom:0;left:25px;font-size:10px;color:var(--muted)}footer{border-top:1px solid var(--line);padding:24px 6%;display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.5px;color:var(--muted)}.stage{max-width:580px;margin:30px auto;animation:enter .45s ease-out}.progress{display:flex;gap:7px;margin:24px 0 40px}.progress i{height:3px;background:var(--line);flex:1}.progress i.done{background:var(--green)}.options{display:grid;gap:10px;margin:27px 0}.option{border:1px solid var(--line);background:transparent;border-radius:13px;text-align:left;padding:19px;min-height:58px;color:var(--ink)}.option:hover,.option.selected{border-color:var(--green);background:#eff6ff}.option small{display:block;color:var(--muted);margin-top:5px;line-height:1.5}.option b{font-weight:500}.answer{border-left:2px solid #93b4ff;padding:2px 0 2px 20px;margin:30px 0}.answer p{font-family:'Instrument Serif',serif;font-size:28px;line-height:1.3}.tag{font-size:9px;letter-spacing:1.7px;color:var(--green)}label{display:block;font-size:12px;margin:20px 0 9px}input,textarea{width:100%;padding:16px;border:1px solid var(--line);background:white;border-radius:9px;color:var(--ink)}textarea{min-height:90px;resize:vertical}.row{display:flex;align-items:center;gap:15px;flex-wrap:wrap}.preview{width:110px;height:110px;object-fit:cover;border-radius:16px;margin:18px 0}.hide{display:none}.center{text-align:center}.seal{height:75px;width:75px;border:1px solid #93b4ff;border-radius:50%;display:grid;place-items:center;margin:20px auto 30px;color:var(--green);font-size:28px}dialog{border:1px solid var(--line);border-radius:20px;max-width:480px;padding:32px;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#20282066}.close{float:right}.typing{animation:enter 1s ease-out}@keyframes enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media(max-width:700px){header{height:80px;padding:15px 24px}.intro{display:flex;flex-direction:column;gap:22px;min-height:0;align-items:stretch}.intro h1{max-width:340px;font-size:64px}.intro .sub{max-width:290px}.collage{height:265px;max-width:310px;width:100%;margin:8px auto 0}.one{height:205px;width:164px;top:0}.two{height:177px;width:140px;top:70px}.photo:before{height:65px;width:65px;top:32px}.photo:after{width:145px;height:140px;top:105px}.photo span{font-size:8px;bottom:8px}.scribble{font-size:20px;top:0;right:-5px}.photo-caption{bottom:-5px;font-size:9px;left:0}.intro .actions{margin-top:23px}.primary{width:100%}main{padding:25px 25px 40px;min-height:calc(100svh - 145px)}footer{padding:21px 25px;font-size:7px;gap:15px;line-height:1.6}.stage{margin:10px auto}.progress{margin-bottom:30px}h2{letter-spacing:-1px}.intro .note{margin-bottom:0}.intro-copy .eyebrow{margin-top:0}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

/* Full-screen opening: deliberately no navigation, logo, footer, or captions. */
body{background:#fff}header{justify-content:flex-end}
body.intro-playing{overflow:hidden;background:#fff}
body.intro-playing>header,body.intro-playing>footer{display:none}
body.intro-playing main{opacity:1;padding:0;min-height:100svh}
.cinema{position:relative;width:100%;height:100svh;height:100dvh;display:grid;place-items:center;overflow:hidden;background:#fff}
.intro-frame{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:clamp(20px,5vw,80px);opacity:0;transition:opacity .5s ease;}
.intro-frame.visible{opacity:1}
.intro-frame h1{font-size:clamp(58px,9.8vw,150px);max-width:1200px;margin:0;line-height:1.04;letter-spacing:-.045em}
.intro-photo{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}
.challenge{border:0;background:none;color:var(--ink);font-family:'Instrument Serif',Georgia,serif;font-size:clamp(48px,7vw,105px);letter-spacing:-.04em;line-height:1.1;padding:24px;max-width:100%;}
.challenge span{display:block;color:var(--green);font-size:.55em;margin-top:25px;transition:transform .2s}.challenge:hover span{transform:translate(5px,-5px)}
@media(max-width:700px){.intro-frame h1{font-size:clamp(52px,13vw,86px)}.intro-frame{padding:24px}.intro-photo{max-height:88dvh;max-width:100%}.challenge{font-size:clamp(45px,12vw,75px)}}
@media(prefers-reduced-motion:reduce){.intro-frame{transition:none}.challenge span{transition:none}}

.intro-word{opacity:0;transition:opacity .25s ease;display:inline-block}.intro-word.shown{opacity:1}.ben-word{font-style:italic;color:var(--green)}
.photo-sequence{position:absolute;inset:0;pointer-events:none}.cinema-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;opacity:0;transition:opacity .75s ease}.cinema-photo.on{opacity:1}.cinema-photo-1{object-position:32% 50%}.cinema-photo-4{object-position:60% 40%}.intro-frame{z-index:2;pointer-events:none}.intro-frame button{pointer-events:auto}.intro-finale{width:100%;display:flex;flex-direction:column;align-items:center;gap:48px}.intro-finale h1{font-size:clamp(48px,8vw,125px)}.finale-button{font-family:'DM Sans',sans-serif;letter-spacing:0;font-size:15px;background:var(--green);color:white;border-radius:100px;padding:20px 28px;display:flex;gap:40px;align-items:center;opacity:0;visibility:hidden;transition:opacity .6s ease}.finale-button.ready{opacity:1;visibility:visible}.finale-button span{display:inline;color:white;font-size:20px;margin:0}@media(max-width:700px){.intro-finale h1{font-size:clamp(44px,12vw,80px)}.finale-button{width:auto;max-width:100%}.intro-frame h1{font-size:clamp(50px,13vw,86px)}}@media(prefers-reduced-motion:reduce){.intro-word,.cinema-photo,.finale-button{transition:none}}

/* Desktop portraits retain their proportions, with a white matte. */
@media(min-width:701px){.photo-sequence{background:#fff}.cinema-photo{object-fit:contain;object-position:center;transition:opacity .45s ease}}
@media(max-width:700px){.cinema-photo{transition:opacity .45s ease}}
@media(prefers-reduced-motion:reduce){.cinema-photo{transition:none}}

.finale-button{background:#2563eb}.finale-button:hover{background:#1d4ed8}.primary:disabled{opacity:.45;cursor:default}.host-reaction{font-size:clamp(34px,5vw,48px);line-height:1.12;letter-spacing:-1px}.their-answer{white-space:pre-wrap;color:var(--muted);overflow-wrap:anywhere}#answerForm .primary{margin-top:12px}#benAnswer{overflow-wrap:anywhere}

.opening-rest,.opening-name{transition:opacity .65s ease}.opening-name{color:#2563eb}.opening-rest.dissolved,.opening-name.dissolved{opacity:0}.opening-name:not(.dissolved){text-shadow:0 1px 12px #ffffff70}@media(prefers-reduced-motion:reduce){.opening-rest,.opening-name{transition:none}}

.opening-rest{transition:opacity 1.2s ease}.opening-name{color:#000;transition:opacity .9s ease;text-shadow:none!important}@media(prefers-reduced-motion:reduce){.opening-rest,.opening-name{transition:none}}

.intro-finale{gap:28px}.invitation-prompt{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(27px,3.5vw,44px);line-height:1.2;margin:0;max-width:650px;opacity:0;transition:opacity .8s ease}.invitation-prompt.ready{opacity:1}.finale-button .invitation-label{font-size:15px}.intro-finale .finale-button{margin-top:12px}@media(prefers-reduced-motion:reduce){.invitation-prompt{transition:none}}

.consent{display:flex;gap:12px;align-items:flex-start;line-height:1.6}.consent input{width:20px;height:20px;flex-shrink:0;margin-top:2px}a.primary{text-decoration:none}.finale-button{justify-content:center}#sendError{color:#b91c1c}
.locked-entry,.welcome-screen{min-height:100svh;max-width:650px;margin:auto;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:30px}.welcome-screen h1{font-size:clamp(50px,10vw,90px);overflow-wrap:anywhere}.welcome-actions{display:flex;flex-direction:column;gap:20px;align-items:center;margin-top:24px}.personal-callback{max-width:850px}.personal-callback h2{font-size:clamp(28px,5.8vw,65px);line-height:1.22;white-space:pre-line;overflow-wrap:anywhere;letter-spacing:-.02em}.invite-generator{border:1px solid var(--line);padding:24px;border-radius:20px;margin:30px 0}.invite-fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}.qr-result{text-align:center;border:1px solid var(--line);border-radius:16px;margin-top:30px;padding:20px}.qr-result img{max-width:100%;height:auto}.qr-result input{margin-top:20px;font-size:12px}.invitation-row{display:flex;justify-content:space-between;align-items:start;gap:20px;border-top:1px solid var(--line);padding:18px 0}.invite-generator textarea{min-height:100px}.intro-finale .invitation-prompt{font-size:clamp(40px,7vw,85px);max-width:950px;letter-spacing:-.03em}.invite-generator .primary{gap:15px}@media(max-width:650px){.invite-fields{grid-template-columns:1fr;gap:0}.invite-generator{padding:18px}.qr-result{padding:12px}.invitation-row{gap:8px}.intro-finale .invitation-prompt{font-size:clamp(38px,9vw,65px)}}

.welcome-actions{width:100%;gap:20px}.welcome-contact{display:inline-flex;align-items:center;justify-content:center;min-height:44px;width:fit-content;padding:8px 6px;color:#2563eb;text-decoration:underline;text-underline-offset:4px;font-size:15px}.welcome-actions #begin{width:100%;max-width:400px;justify-content:center;padding:23px 26px;font-size:17px;text-align:center;gap:0}.intro-frame h1{overflow-wrap:anywhere}

.welcome-contact{border:1px solid #b8cef8;border-radius:100px;padding:11px 20px;background:#eff6ff;text-decoration:none;min-height:44px}.welcome-contact:hover{background:#dbeafe}
