@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Cormorant+Garamond:wght@400;500&display=swap');
:root{color-scheme:dark;--ivory:#f3eee9;--muted:#b9bec8;--peach:#d7ad98;--line:#c3c9d02b;font-family:'DM Sans',Arial,sans-serif;background:#080c15;color:var(--ivory);font-synthesis:none}
*{box-sizing:border-box}html{min-width:320px}body{margin:0;min-width:320px;background:#080c15}body:before{content:'';position:fixed;inset:0;pointer-events:none;background:linear-gradient(145deg,#090d14,#101827 52%,#0a0d15)}button{font:inherit;cursor:pointer}button:focus-visible{outline:2px solid #e6bda9;outline-offset:3px}
.page-shell{position:relative;isolation:isolate;display:flex;flex-direction:column;width:min(100%,440px);min-height:100svh;margin:0 auto;overflow:hidden;background:linear-gradient(162deg,#080b12 0%,#0a1220 42%,#0a101b 68%,#090b12 100%);box-shadow:0 0 0 1px #9ca9c12e,0 28px 100px #000a}
.page-shell:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.15;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E")}
.page-shell:after{content:'';position:absolute;z-index:0;inset:-19% -38%;pointer-events:none;background:radial-gradient(ellipse 63% 52% at 39% 43%,#426d9945 0%,#31547e1b 47%,transparent 82%),radial-gradient(ellipse 58% 49% at 72% 62%,#b37e6716 0%,transparent 74%),linear-gradient(145deg,transparent 28%,#303e6b13 62%,transparent 86%);filter:blur(32px);opacity:.77;animation:atmosphere 24s ease-in-out infinite alternate;transition:opacity 1.3s ease,filter 1.3s ease}
@keyframes atmosphere{from{transform:translate3d(-1.8%,1.2%,0) scale(1.015)}to{transform:translate3d(2.1%,-1.5%,0) scale(1.065)}}
.state-rising .page-shell:after{background:radial-gradient(ellipse 58% 43% at 44% 40%,#4a7ca167 0%,#34567d2a 48%,transparent 82%),radial-gradient(ellipse 58% 40% at 74% 52%,#bf8c7525 0%,transparent 78%),linear-gradient(154deg,transparent 26%,#464b8b22 57%,transparent 84%);filter:blur(26px);opacity:.97;animation-duration:13s}
.state-guided_response .page-shell:after{background:radial-gradient(ellipse 67% 51% at 43% 44%,#496e9b4b 0%,#38567d22 51%,transparent 82%),radial-gradient(ellipse 61% 48% at 70% 66%,#aa80711a 0%,transparent 76%);filter:blur(33px);opacity:.85;animation-duration:17s}
.state-returned .page-shell:after{background:radial-gradient(ellipse 72% 59% at 43% 48%,#426c9450 0%,#31567b1d 53%,transparent 84%),radial-gradient(ellipse 68% 55% at 73% 60%,#c2927425 0%,transparent 78%);filter:blur(40px);opacity:.83;animation-duration:27s}
.between-us .page-shell:after{background:radial-gradient(ellipse 59% 55% at 27% 43%,#396f9d62 0%,#31598323 52%,transparent 85%),radial-gradient(ellipse 57% 53% at 77% 55%,#be8b7348 0%,#a46e5920 54%,transparent 84%),linear-gradient(135deg,transparent 28%,#837c9e17 52%,transparent 78%);filter:blur(35px);opacity:.9;animation-duration:19s}
.state-shared_moment .page-shell:after{background:radial-gradient(ellipse 62% 57% at 31% 46%,#447ba96b 0%,#315a862b 55%,transparent 86%),radial-gradient(ellipse 62% 56% at 71% 53%,#c4977959 0%,#a46d5d27 55%,transparent 85%),linear-gradient(130deg,transparent 30%,#a094a51b 54%,transparent 80%);opacity:.95;animation-duration:14s}
.topbar{z-index:1;display:flex;justify-content:center;align-items:center;min-height:62px;padding:10px 20px 0}.brand-slot{position:relative;width:222px;height:45px;overflow:hidden;flex:none}.brand-slot img{position:absolute;width:222px;height:auto;left:0;top:-20px;display:block}.preview-label{display:none}
.experience{z-index:1;display:flex;flex-direction:column;flex:1;min-height:0;padding:10px 25px 0}.intro-row{display:flex;flex-direction:column;align-items:center;gap:13px}.eyebrow{color:#b6bdc8;display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.2em}.eyebrow-line{height:1px;width:22px;background:#bb9a8b}.mode-switch{display:flex;width:min(100%,320px);border-radius:50px;padding:3px;background:#0a101cd9;border:1px solid #acb7c24a;box-shadow:0 10px 35px #03070e70}.mode-button{flex:1;min-height:37px;border:0;border-radius:40px;background:transparent;color:#c0c7d0;font-size:13px;transition:background .25s,color .25s,box-shadow .25s}.mode-button.selected{background:linear-gradient(110deg,#e8dfd5,#dfbaa7);color:#1b2230;box-shadow:0 2px 17px #dab69b30}
.moment{display:grid;grid-template-rows:auto minmax(205px,1fr) auto auto;align-content:center;flex:1;min-height:0;position:relative}.moment-copy{text-align:center;align-self:end;padding:25px 2px 0;min-height:116px;z-index:1}.overline{margin:0 0 10px;color:#bdc4d0;font-size:10px;letter-spacing:.23em}.moment h1{font:400 clamp(2.65rem,11vw,3.65rem)/.98 'Cormorant Garamond',Georgia,serif;letter-spacing:-.027em;margin:0;text-shadow:0 2px 28px #070b14b8}.period{color:#d7ae9d}.description{color:#d0d0d3;font-size:14px;line-height:1.55;margin:10px auto 0;max-width:29ch}.visual-wrap{grid-row:2;position:relative;width:100%;height:clamp(240px,36vh,330px);min-height:0;margin:auto}.visual-caption{position:absolute;bottom:4px;left:0;right:0;text-align:center;color:#afb8c8;font-size:10px;letter-spacing:.19em}.state-settled .moment-copy{grid-row:2;align-self:center;padding:0 0 20px;min-height:0;pointer-events:none}.state-settled .overline{display:none}.state-settled .moment h1{font-size:clamp(2.8rem,11vw,3.55rem);max-width:230px;margin:auto}.state-settled .description{margin-top:13px}.state-rising .moment-copy,.state-guided_response .moment-copy,.state-returned .moment-copy,.state-connected .moment-copy,.state-shared_moment .moment-copy{grid-row:1}
.actions{grid-row:3;display:flex;justify-content:center;gap:9px;align-items:center;flex-wrap:wrap;min-height:55px;margin:4px 0}.actions button,.sheet-button{border-radius:13px;min-height:48px;padding:10px 17px;font-size:13px;transition:transform .2s,background .2s}.actions button:hover,.sheet-button:hover{transform:translateY(-2px)}.primary-action{background:linear-gradient(110deg,#e8e4df,#d9c2b5);border:1px solid #e6d6ca;color:#172233}.secondary-action{background:#101b2bc9;border:1px solid #8998ac6b;color:#eee7e2}.quiet-action{border:0!important;background:transparent!important;color:#d9c1b2;text-decoration:underline;text-underline-offset:5px}.state-rising .actions,.between-us .actions{flex-direction:column;align-items:stretch;width:min(100%,335px);margin:5px auto}.state-rising .actions button,.between-us .actions button{text-align:left;padding-left:20px}.state-rising .actions .secondary-action,.between-us .actions .secondary-action{background:#111c2bc4}
.insight-link{grid-row:4;display:flex;align-items:center;gap:13px;width:100%;min-height:72px;border:1px solid #c4c8ca44;border-radius:15px;background:#111a29ad;color:#eee9e3;text-align:left;padding:13px 17px;margin:12px 0 16px;box-shadow:0 12px 28px #04091144;backdrop-filter:blur(10px)}.insight-link:hover{border-color:#d8c2b2a8}.insight-line{height:28px;width:2px;background:linear-gradient(#9bbad2,#d8ac96)}.insight-content{flex:1;display:flex;flex-direction:column;gap:4px}.insight-kicker{font-size:9px;letter-spacing:.14em;color:#b9bec7}.insight-title{font-size:14px}.insight-arrow{font-size:17px;color:#d8b19e}
.lower-nav{display:flex;align-items:center;justify-content:space-around;min-height:62px;gap:4px;margin:0 -25px;border-top:1px solid #bec7d034;background:#080d17d9}.lower-nav button{border:0;background:transparent;color:#a8b0bd;font-size:11px;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:70px;padding:5px}.lower-nav button[aria-current=page]{color:#ead5c7}.nav-symbol{font-size:25px;line-height:1}.site-footer{z-index:1;text-align:center;color:#8e98a6;font-size:9px;letter-spacing:.05em;padding:4px 20px max(7px,env(safe-area-inset-bottom));background:#080d17d9}
.overlay[hidden]{display:none}.overlay{position:fixed;inset:0;z-index:20;display:flex;justify-content:center}.overlay-scrim{position:absolute;inset:0;background:#02050bbb;backdrop-filter:blur(8px)}.detail-sheet{position:relative;width:min(100%,440px);min-height:100%;max-height:100svh;overflow-y:auto;padding:34px 28px;background:linear-gradient(#101827,#0b1019);border-left:1px solid #ffffff21;box-shadow:-30px 0 100px #0009;animation:sheet-enter .3s ease both}@keyframes sheet-enter{from{transform:translateX(30px);opacity:.6}to{transform:translateX(0);opacity:1}}.sheet-topline{display:flex;justify-content:space-between;align-items:center;color:#d9ac98;font-size:11px;letter-spacing:.2em}.close-button{color:#e5d5c9;background:transparent;border:1px solid #777e86;border-radius:50%;width:42px;height:42px;font-size:27px;line-height:1}.sheet-title{font:400 clamp(2.8rem,7vw,4.2rem)/1.02 'Cormorant Garamond',Georgia,serif;margin:54px 0 18px}.sheet-lede{color:#c7c7c9;font-size:17px;line-height:1.55;max-width:36ch}.sheet-small{color:#9da6b2;font-size:13px;line-height:1.55;margin-top:35px}.sequence{display:flex;gap:7px;flex-wrap:wrap;margin:62px 0 28px}.sequence span{border:1px solid #737f91;border-radius:99px;padding:10px 13px;color:#e8e2db;font-size:13px}.sequence span:nth-child(even){border-color:#9f807b}.moment-list{list-style:none;padding:0;margin:58px 0 0}.moment-list li{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:15px;padding:22px 0;color:#ddd5ce}.moment-list li small{display:block;color:#929ca8;margin-top:6px;font-size:13px}.moment-list li em{font:italic 20px 'Cormorant Garamond',Georgia,serif;color:#d9ac98;white-space:nowrap}.sheet-button{margin-top:30px}
@media(max-width:440px){.page-shell{box-shadow:none}.experience{padding-left:22px;padding-right:22px}.lower-nav{margin-left:-22px;margin-right:-22px}}
@media(max-height:730px){.topbar{min-height:52px;padding-top:10px}.experience{padding-top:7px}.intro-row{gap:7px}.moment-copy{padding-top:13px;min-height:94px}.visual-wrap{height:clamp(200px,31vh,260px)}.insight-link{min-height:62px;margin:5px 0 8px}.actions button{min-height:43px}.lower-nav{min-height:55px}}
@media(min-width:700px){.page-shell{border-radius:23px 23px 0 0}body:after{content:'THE MOMENT, UNDERSTOOD';position:fixed;bottom:6vh;left:max(3vw,calc(50% - 570px));font:400 25px 'Cormorant Garamond',Georgia,serif;letter-spacing:.08em;color:#c5b9af99;pointer-events:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Center all hero states in the single composition column. */
.moment{grid-template-columns:minmax(0,1fr)}
.moment-copy,.visual-wrap,.actions,.insight-link{grid-column:1;min-width:0}
.moment-copy{padding-top:clamp(20px,3.7vh,34px);text-align:center}
.moment h1{font-size:clamp(2.85rem,9.8vw,3.45rem);line-height:1.02;font-weight:400;letter-spacing:-.027em;text-wrap:balance;margin-inline:auto;max-width:12.5ch}
.state-settled .moment h1{font-size:clamp(3rem,10.6vw,3.65rem);line-height:.98;max-width:12ch}
.state-shared_moment .moment h1{font-size:clamp(2.7rem,9.3vw,3.25rem);max-width:13.5ch}
.description{font-size:1rem;line-height:1.5;max-width:30ch;margin:13px auto 0;text-wrap:pretty}
.overline{font-size:11px;letter-spacing:.2em}
.visual-caption{font-size:11px;letter-spacing:.16em;line-height:1.35;text-align:center;width:100%}
.actions button{text-align:center}
.state-rising .actions button,.between-us .actions button{text-align:center;padding-left:17px}
.insight-kicker{font-size:10px}.insight-title{font-size:15px}
.brand-slot{width:200px;height:42px;opacity:.78}
.brand-slot img{width:200px;top:-18px}
.sheet-title,.sheet-lede{text-align:center;margin-left:auto;margin-right:auto}
.sequence{justify-content:center}
@media(max-height:730px){.moment-copy{padding-top:13px}.moment h1{font-size:clamp(2.55rem,9vw,3.1rem)}.state-settled .moment h1{font-size:clamp(2.85rem,10vw,3.35rem)}.state-shared_moment .moment h1{font-size:clamp(2.5rem,8.5vw,3rem)}}

/* Account gate follows the same atmospheric surface as the experience. */
[hidden]{display:none!important}
.auth-shell{min-height:100svh}
.auth-content{z-index:1;display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;padding:32px 28px 72px;text-align:center}
.auth-copy{margin:42px 0 20px}
.auth-copy h1{font:400 clamp(3rem,11vw,4.1rem)/.98 'Cormorant Garamond',Georgia,serif;letter-spacing:-.027em;max-width:12ch;margin:0 auto;text-wrap:balance}
.auth-copy p{color:#d0d0d3;font-size:1rem;line-height:1.5;margin:18px auto 0}
.auth-message{color:#d8b7aa;font-size:13px;line-height:1.5;min-height:22px;margin:12px auto;max-width:32ch}
.auth-form{display:flex;flex-direction:column;text-align:left;width:min(100%,330px);gap:9px}
.auth-form label{color:#d3d5d9;font-size:14px;margin-top:9px}
.auth-form input:not([type=checkbox]){width:100%;min-height:48px;border:1px solid #b4c0cf67;border-radius:12px;background:#0b1423d9;color:var(--ivory);padding:12px 15px;font:inherit;font-size:16px;outline:none}
.auth-form input:focus-visible{border-color:#dfbaa7;box-shadow:0 0 0 2px #dfbaa733}
.auth-form .remember-choice{display:flex;align-items:center;gap:10px;color:#c3c9d1;cursor:pointer;margin:12px 0 0;font-size:14px}
.remember-choice input{width:17px;height:17px;margin:0;accent-color:#d7ad98;flex:none}
.auth-form button{margin-top:17px;min-height:50px}
.auth-form button:disabled{opacity:.65;cursor:wait}
.auth-retry{border:0;background:transparent;color:#e2c3b2;font-size:14px;text-decoration:underline;text-underline-offset:5px;padding:10px}
.signout-button{position:absolute;right:15px;top:17px;border:0;background:transparent;color:#acb5c2;font-size:12px;padding:9px 3px}
.signout-button:hover{color:var(--ivory)}
