@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/be-vietnam-pro-regular.woff2") format("woff2")}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/be-vietnam-pro-medium.woff2") format("woff2")}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/be-vietnam-pro-semibold.woff2") format("woff2")}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/be-vietnam-pro-bold.woff2") format("woff2")}
@font-face{font-family:Fraunces;font-style:normal;font-weight:100 900;font-display:swap;src:url("assets/fonts/fraunces-regular.woff2") format("woff2")}
@font-face{font-family:Fraunces;font-style:italic;font-weight:100 900;font-display:swap;src:url("assets/fonts/fraunces-italic.woff2") format("woff2")}

:root{--font-text:"Be Vietnam Pro",system-ui,sans-serif;--font-display:Fraunces,Georgia,serif}
body{font-family:var(--font-text);font-size:18px;line-height:1.85;font-synthesis:none;text-rendering:optimizeLegibility}
button,input,textarea{font-family:var(--font-text)}
.landing h1,.landing h2,.landing h3,.wrap h1,.brand,.wordmark{font-family:var(--font-display);font-optical-sizing:auto;font-variation-settings:"SOFT" 60,"WONK" 1}
.brand,.wordmark{font-size:38px;font-weight:650;letter-spacing:-1.5px}
.landing .hero h1{font-size:clamp(72px,7.5vw,102px);font-weight:600;line-height:1.15;letter-spacing:-.04em;margin-block:25px 31px}
.landing .hero h1 br:first-child{display:initial}
.landing .hero h1 em,.landing .download-section h2 em{font-style:italic;font-weight:550}
.landing .hero h1 em::after{height:5px;bottom:-5px;border-top-width:1px;opacity:.55}
.landing .hero-description{font-size:19px;line-height:1.85;color:#cbbbad}
.landing .overline{font-size:12px;line-height:1.8;letter-spacing:.085em;font-weight:600}
.landing .section-heading h2,.landing .theme-copy h2,.landing .friends-copy h2,.landing .story-copy h2{font-size:clamp(36px,4.1vw,53px);line-height:1.27;font-weight:500;letter-spacing:-.032em;margin-block:20px 25px}
.landing .section-heading>p:last-child,.landing .theme-copy>p:not(.overline):not(.microcopy),.landing .friends-copy>p:not(.overline),.landing .story-copy>p:not(.overline):not(.story-signature){font-size:17px;line-height:1.85;color:#c7b7a9}
.landing .booth-copy h3{font-size:42px;font-weight:500;line-height:1.25;letter-spacing:-.025em}
.landing .booth-copy>p{font-size:16px;line-height:1.85;color:#c7b7a9}
.landing .text-link{font-size:14px;line-height:1.65;font-weight:600}
.landing .button{font-size:16px;font-weight:600;letter-spacing:-.015em}
.landing .button.small{font-size:14px;min-height:46px;padding:11px 17px}
.landing .site-header nav a{font-size:14px;font-weight:500}
.landing .download-note{font-size:14px;line-height:1.75;color:#c7b7a9}
.landing .explore{font-size:14px;line-height:1.7}
.landing .microcopy{font-size:14px!important;line-height:1.75!important;color:#c7b7a9!important}
.landing .demo-label{font-size:13px!important;line-height:1.65;color:#c7b7a9;bottom:-24px}
.landing .demo-toast{font-size:13px;line-height:1.6}
.landing .privacy-line{font-size:14px!important;line-height:1.75!important}
.landing .tiny-tags span{font-size:13px;line-height:1.5;padding:7px 12px}
.landing .theme-options button{font-size:14px;line-height:1.5;min-height:44px;padding:10px 13px}
.landing .interactive-hint{font-size:14px;line-height:1.7;color:#c7b7a9}
.landing .theme-caption>span{font-size:14px}
.landing .theme-caption strong{font-family:var(--font-display);font-size:23px;font-weight:500;font-style:italic;letter-spacing:-.02em}
.landing .story-visual figcaption{font-size:14px;line-height:1.75;letter-spacing:0;color:#c7b7a9}
.landing .story-meaning h3{font-family:var(--font-text);font-size:17px;font-weight:600;line-height:1.7;letter-spacing:-.015em}
.landing .story-meaning p{font-size:16px;line-height:1.85;color:#c7b7a9}
.landing .story-copy .story-signature{font-family:var(--font-display);font-size:22px;font-style:italic;font-weight:500;line-height:1.6}
.landing .ribbon{font-size:12px;font-weight:500;letter-spacing:.075em;gap:40px}
.ribbon-divider{display:inline-block;flex:0 0 36px;height:1px;background:var(--accent);opacity:.5}
.landing .paper-strip p{font-size:12px;line-height:1.6}
.landing .floating-strip p{display:none}
.landing .floating-memory p{font-size:11px;line-height:1.6}
.landing .round-stamp{font-size:11px;line-height:1.75;letter-spacing:.04em}
.landing .hand-note{font-family:var(--font-display);font-size:21px;font-style:italic;line-height:1.5}
.landing .hand-note svg{left:155px}
.landing .app-top strong{font-size:17px}
.landing .camera-modes button{font-size:12px}
.landing .camera-tag{font-size:11px}
.landing .social-head strong{font-size:13px}
.landing .social-head small{font-size:11px}
.landing .reaction-row>span{font-size:12px;line-height:1.5}
.landing .chat-note{font-size:15px;line-height:1.6}
.landing .steps li>span{font-size:14px}
.landing .steps h3{font-size:28px;font-weight:500;line-height:1.3;letter-spacing:-.02em}
.landing .steps p{font-size:16px;line-height:1.85}
.landing .download-section h2{font-size:clamp(38px,4.8vw,64px);font-weight:500;line-height:1.28;letter-spacing:-.035em}
.landing .faq-section h2{font-size:42px;font-weight:500;line-height:1.3;letter-spacing:-.025em}
.landing .faq-list summary{font-size:16px;line-height:1.7;font-weight:500}
.landing .faq-list p{font-size:16px;line-height:1.85}
.landing .footer-top>p{font-size:14px;line-height:1.85}
.landing .footer-mail{font-size:17px;line-height:1.65}
.landing .footer-mail small{font-size:13px;line-height:1.7}
.landing .footer-bottom{font-size:13px;line-height:1.75;flex-wrap:wrap;gap:18px 28px}
.landing .footer-bottom>span,.landing .footer-bottom nav a,.landing .back-top{font-size:13px;line-height:1.75}
.landing .footer-bottom nav{gap:12px 22px}
.wrap h1{font-size:clamp(38px,5vw,58px);font-weight:500;line-height:1.25;letter-spacing:-.03em}
.wrap .lead{font-size:20px;line-height:1.85}
.wrap .meta,.toc,.footer{font-size:15px}
.wrap h2{font-size:25px;font-weight:600}
.wrap h3{font-size:20px;font-weight:600}

@media(max-width:1100px){
 .landing .hero h1{font-size:82px}
 .landing .section-heading h2,.landing .theme-copy h2,.landing .friends-copy h2,.landing .story-copy h2{font-size:44px}
 .landing .booth-copy{padding:36px}
 .landing .booth-copy h3{font-size:36px}
 .landing .chat-note{font-size:14px;padding:15px}
}
@media(max-width:900px){
 .site-header{gap:14px}
 .site-header>.button{margin-left:auto;margin-right:0}
 .menu-toggle{order:3;display:grid;place-items:center;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:11px;width:44px;height:44px;padding:10px;cursor:pointer}
 .menu-toggle>.icon{width:21px;height:21px}
 .site-header nav{display:none;position:absolute;top:calc(100% - 12px);left:0;right:0;background:#2a231ef8;border:1px solid var(--line);padding:12px;border-radius:15px;box-shadow:0 18px 35px #0004;backdrop-filter:blur(16px)}
 .site-header nav.open{display:flex;flex-direction:column;gap:0}
 .landing .site-header nav a{font-size:16px;padding:12px}
}
@media(max-width:800px){
 .brand,.wordmark{font-size:34px}
 .landing .hero h1{font-size:clamp(66px,10.7vw,86px)}
 .landing .hero-description{font-size:18px}
 .landing .section-heading h2,.landing .theme-copy h2,.landing .friends-copy h2,.landing .story-copy h2{font-size:38px}
 .landing .section-heading>p:last-child,.landing .theme-copy>p:not(.overline):not(.microcopy),.landing .friends-copy>p:not(.overline),.landing .story-copy>p:not(.overline):not(.story-signature){font-size:16px}
 .landing .booth-copy{padding:28px}
 .landing .booth-copy h3{font-size:32px}
 .landing .steps h3{font-size:25px}
 .landing .steps p{font-size:15px}
 .landing .footer-top{gap:28px}
}
@media(max-width:580px){
 .site-header{gap:10px}
 .site-header .brand{font-size:30px;gap:7px}
 .site-header .brand .brand-mark{width:32px;height:32px}
 .landing .site-header .button.small{font-size:13px;padding:10px 13px;min-height:44px}
 .site-header .button.small .icon:last-child{display:none}
 .landing .hero h1{font-size:clamp(55px,13.7vw,74px);line-height:1.17;margin-block:20px 27px}
 .landing .overline,.landing .hero .overline,.landing .download-section>.overline{font-size:12px;line-height:1.8;letter-spacing:.06em}
 .landing .hero-description{font-size:17px;line-height:1.85}
 .landing .button,.landing .hero .button{font-size:15px;padding:15px 17px;gap:10px}
 .landing .hero .button .icon{width:20px;height:20px}
 .landing .section-heading h2,.landing .theme-copy h2,.landing .friends-copy h2,.landing .story-copy h2{font-size:35px;line-height:1.3;margin-block:16px 21px}
 .landing .booth-copy{padding:30px 26px 12px}
 .landing .booth-copy h3{font-size:34px}
 .landing .booth-copy>p{font-size:16px}
 .landing .demo-label{font-size:12px!important;bottom:-23px}
 .landing .demo-toast{font-size:12px}
 .landing .floating-memory p{font-size:10px}
 .landing .round-stamp{font-size:10px}
 .landing .hand-note{font-size:17px}
 .landing .hand-note svg{left:132px}
 .landing .ribbon{font-size:11px;gap:25px}
 .ribbon-divider{flex-basis:25px}
 .landing .theme-caption strong{font-size:23px}
 .landing .theme-options{gap:8px}
 .landing .theme-options button{padding:10px 11px}
 .landing .story-visual figcaption{font-size:14px}
 .landing .story-meaning p{font-size:16px}
 .landing .story-copy .story-signature{font-size:23px}
 .landing .chat-note{font-size:14px;padding:14px}
 .landing .steps h3{font-size:26px}
 .landing .steps p{font-size:16px}
 .landing .download-section h2{font-size:36px;line-height:1.3}
 .landing .download-section .button{font-size:15px}
 .landing .faq-section h2{font-size:36px}
 .landing .faq-list summary,.landing .faq-list p{font-size:16px}
 .landing .footer-top{grid-template-columns:1fr;gap:20px}
 .landing .footer-top>p{text-align:left;font-size:14px}
 .landing .footer-mail{font-size:17px}
 .landing .footer-mail small{font-size:14px}
 .landing .footer-bottom>span,.landing .footer-bottom nav a,.landing .back-top{font-size:13px}
 body{font-size:17px;line-height:1.85}
 .wrap h1{font-size:38px}
 .wrap .lead{font-size:19px}
}
@media(max-width:360px){
 .landing .hero h1{font-size:54px}
 .landing .download-section h2{font-size:32px}
 .landing .download-section .button{font-size:14px}
 .landing .theme-options button{font-size:13px;padding-inline:10px}
 .landing .reaction-row>span{font-size:11px}
}
@media print{body{font-size:11pt}.landing .hero h1,.wrap h1{font-size:30pt}.landing h2{font-size:24pt!important}.landing .microcopy,.landing .story-copy p{color:#111!important}}