/* One type system, loaded last on every current HangAgain page.
   Layout, copy, colors, state logic and preserved versions remain independent. */
:root{
 --font-ui:Arial,Helvetica,sans-serif;
 --font-editorial:Georgia,'Times New Roman',serif;
 --type-wordmark:25px;
 --type-display:60px;
 --type-page:48px;
 --type-section:28px;
 --type-editorial-close:24px;
 --type-card:20px;
 --type-body:16px;
 --type-lede:18px;
 --type-metadata:14px;
 --type-button:15px;
 --type-label:12px;
 --type-nav:14px;
 --leading-display:1.1;
 --leading-heading:1.25;
 --leading-body:1.6;
 --leading-ui:1.4;
 --weight-ui:600;
 --text-secondary:#6b6470;
}
body[data-page]{font-family:var(--font-ui);font-size:var(--type-body);line-height:var(--leading-body)}
body[data-page] :is(button,input,select,textarea){font-family:var(--font-ui)}
/* Matching identities across every navigation variant. */
body[data-page] .top :is(.logo,.city-wordmark){font-family:var(--font-ui);font-size:var(--type-wordmark);font-weight:800;font-style:normal;line-height:1.5;letter-spacing:-1.3px;color:#2b2330}
body[data-page] .top :is(.logo,.city-wordmark) em{font-family:inherit;font-size:inherit;font-weight:inherit;font-style:italic;line-height:inherit;letter-spacing:inherit;color:#6e4e73}
body[data-page] .top .logo span{color:#6e4e73}
body[data-page] .top nav a{font-family:var(--font-ui);font-size:var(--type-nav);font-weight:var(--weight-ui);line-height:var(--leading-ui)}
/* Page titles share one editorial style; Home is the display exception. */
body[data-page] :is(.intro h1,.how-heading h1,.about-hero h1){font-family:var(--font-editorial);font-size:var(--type-page);font-weight:400;line-height:var(--leading-display);letter-spacing:-1.3px}
body[data-page=home] .home-scene .home-hero h1{font-family:var(--font-editorial);font-size:var(--type-display);font-weight:400;line-height:var(--leading-display);letter-spacing:-1.7px}
body[data-page] .pillar strong{font-family:var(--font-editorial);font-size:var(--type-section);font-weight:400;line-height:var(--leading-heading);letter-spacing:-.4px}
/* Sans-serif for headings within the product and page sections. */
body[data-page] :is(.section-heading h2,.holiday-intro h2,.about-page h2,.how-close h2,.sheet-title,#account-title,.status-panel h3){font-family:var(--font-ui);font-size:var(--type-section);font-weight:var(--weight-ui);line-height:var(--leading-heading);letter-spacing:-.5px}
body[data-page] :is(.event h3,.belief-grid h3){font-family:var(--font-ui);font-size:var(--type-card);font-weight:var(--weight-ui);line-height:var(--leading-heading);letter-spacing:-.3px}
body[data-page] .how-steps h2{font-family:var(--font-ui);font-size:var(--type-lede);font-weight:var(--weight-ui);line-height:var(--leading-heading);letter-spacing:-.25px}
body[data-page] .how-good h3{font-family:var(--font-ui);font-size:var(--type-body);font-weight:var(--weight-ui);line-height:var(--leading-ui)}
body[data-page=home] .home-scene .preview-steps h2{font-family:var(--font-ui);font-size:var(--type-body);font-weight:var(--weight-ui);line-height:var(--leading-ui);letter-spacing:-.2px}
/* Readable body copy and one secondary color. */
body[data-page] :is(.pillar>span:not(.coming-pill),.holiday-intro p,.horizon-note,.about-page p:not(.eyebrow),.belief-grid p,.detail-description,.committed-message,.status-panel>p,.accordion-body p,.account-preview p,dialog>div>p){font-family:var(--font-ui);font-size:var(--type-body);font-weight:400;line-height:var(--leading-body)}
body[data-page] :is(.pillar>span:not(.coming-pill),.holiday-intro p,.horizon-note,.about-page p:not(.story-close):not(.belonging-lede):not(.about-principle):not(.eyebrow),.belief-grid p,.account-preview p){color:var(--text-secondary)}
body[data-page] :is(.how-heading>p,.about-lede,.belonging-lede){font-size:var(--type-lede);font-weight:400;line-height:var(--leading-body)}
body[data-page] .how-close>p{font-family:var(--font-ui);font-size:var(--type-body);font-weight:400;line-height:var(--leading-body);color:var(--text-secondary)}
body[data-page] .how-close .how-friendship{font-family:var(--font-editorial);font-size:var(--type-editorial-close);font-weight:400;line-height:var(--leading-heading);letter-spacing:-.3px;color:#2b2330}
/* Metadata stays visibly below card titles, including every detail state. */
body[data-page] :is(.metadata,.detail-meta,.detail-social,.social,.fine,.commit-helper,.action-option>small,.how-steps p,.how-good p,.event-source p,.whatsapp-note,.plan-count,.about-hero figcaption,.about-page .about-principle){font-family:var(--font-ui);font-size:var(--type-metadata);line-height:var(--leading-ui);font-weight:400}
body[data-page] :is(.metadata,.detail-meta,.fine,.commit-helper,.action-option>small,.how-steps p,.how-good p,.event-source p,.whatsapp-note,.plan-count,.about-hero figcaption){color:var(--text-secondary)}
body[data-page] :is(.social,.detail-social){font-weight:var(--weight-ui)}
body[data-page] .how-steps p{white-space:normal}
/* Equal CTA typography, including quiet auth and secondary decisions. */
body[data-page] :is(.btn,.actions .btn,.detail-actions .btn,.home-actions .btn,.login-action,.join-action,.source-link,.release-action,.about-discover){font-family:var(--font-ui);font-size:var(--type-button);font-weight:var(--weight-ui);line-height:var(--leading-ui);letter-spacing:0}
body[data-page=home] .home-scene .home-actions .btn{font-size:var(--type-button);font-weight:var(--weight-ui);line-height:var(--leading-ui)}
body[data-page] :is(.chips button,.week-switch button,.month-switch button,.accordion-list summary){font-family:var(--font-ui);font-size:var(--type-metadata);font-weight:var(--weight-ui);line-height:var(--leading-ui)}
/* Small labels use one size; only existing eyebrows remain uppercase. */
body[data-page] :is(.coming-pill,.pillar-preview .coming-pill,.image-label,.eyebrow,.how-good>h2,.how-handoff){font-family:var(--font-ui);font-size:var(--type-label);font-weight:var(--weight-ui);line-height:var(--leading-ui);letter-spacing:.2px}
body[data-page] :is(.eyebrow,.how-good>h2){letter-spacing:1.3px;text-transform:uppercase}
body[data-page] .how-handoff{font-weight:400}
@media(max-width:760px){
 :root{--type-wordmark:23px;--type-display:40px;--type-page:36px;--type-section:24px;--type-card:18px;--type-lede:16px;--type-nav:13px;--type-editorial-close:22px}
 body[data-page] :is(.intro h1,.how-heading h1,.about-hero h1){letter-spacing:-.9px}
 body[data-page=home] .home-scene .home-hero h1{letter-spacing:-1.1px}
 body[data-page] .how-close .how-friendship{font-size:var(--type-editorial-close)}
}
/* Explicit overrides for legacy selectors with stronger specificity. */
body[data-page] .discover-pillars .pillar>span:not(.coming-pill):not(.pillar-kicker):not(.pillar-link){font-size:var(--type-body);line-height:var(--leading-body);font-weight:400;color:var(--text-secondary)}
body[data-page] .event .social{font-weight:var(--weight-ui)}
body[data-page] dialog :is(.detail-meta,.detail-social,.fine,.commit-helper,.event-source p,.whatsapp-note){font-size:var(--type-metadata);line-height:var(--leading-ui)}
body[data-page] dialog .detail-social{font-weight:var(--weight-ui)}
body[data-page] .about-hero .about-lede{font-size:var(--type-lede)}
body[data-page] #flow :is(.detail-meta,.detail-social,.fine,.commit-helper,.event-source p,.whatsapp-note){font-size:var(--type-metadata);line-height:var(--leading-ui)}
body[data-page] .how-page .how-handoff{font-weight:400}
body[data-page] .login-action{white-space:nowrap}
@media(max-width:760px){body[data-page=home] .home-nav-right{gap:14px}}

body[data-page] #flow-content>h3{font-family:var(--font-ui);font-size:var(--type-card);font-weight:var(--weight-ui);line-height:var(--leading-heading);letter-spacing:-.3px}
body[data-page] .how-page .how-good>h2,body[data-page] .about-page .eyebrow{letter-spacing:1.3px;text-transform:uppercase}