/* Homepage-only additions. The onboarding dialog retains its original palette. */
.home-page .theme-toggle{width:38px;height:38px;flex:none;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink);display:grid;place-items:center;position:relative;transition:background .18s,border-color .18s,transform .18s}
.home-page .theme-toggle:hover{transform:translateY(-1px)}
.home-page .theme-toggle span{position:absolute;font-size:21px;line-height:1}
.home-page .theme-moon,html[data-theme="dark"] .home-page .theme-sun{display:none}
html[data-theme="dark"] .home-page .theme-moon{display:block}
.home-page .hero h1{white-space:normal;font-size:clamp(56px,5.8vw,82px)}
.home-page .hero-lede{font-size:22px;line-height:1.45}
.home-page .bubble-user{margin:15px 0 15px auto;background:#9acdb1;border-radius:16px 16px 5px 16px;max-width:185px}
.home-page .benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:42px}
.home-page .contrast-grid>.benefit-grid{grid-column:1/-1}
.home-page .benefit-grid article{background:#fffdf8;border:1px solid #e4dcc8;border-radius:10px;padding:22px}
.home-page .benefit-grid span{display:block;color:#a35f41;font-size:12px;letter-spacing:1.2px;line-height:1.45;font-weight:800}
.home-page .benefit-grid p{font-size:15px;line-height:1.55;margin:12px 0 0}
html[data-theme="dark"] .home-page{--ink:#f3eee3;--green:#91b9a7;--deep:#151e28;--cream:#111a24;--paper:#22303c;--line:#485968;--muted:#bcc7c7;background:#111a24;color:var(--ink)}
html[data-theme="dark"] .home-page .site-header{background:#111a24;border-color:#354451}
html[data-theme="dark"] .home-page .brand-icon{background:#b9aa86;color:#1b2b31}
html[data-theme="dark"] .home-page .nav-cta{background:#273743;border-color:#839a9e;box-shadow:0 0 0 5px #111a24,0 0 0 9px #6d6258;color:#f3eee3}
html[data-theme="dark"] .home-page .nav-cta:hover{background:#354a55}
html[data-theme="dark"] .home-page .theme-toggle{background:#273743;border-color:#637783;color:#d2c3a3}
html[data-theme="dark"] .home-page .nav-account-link:hover{color:#d6baa5}
html[data-theme="dark"] .home-page .eyebrow{background:#273743;color:#e9e2d1}
html[data-theme="dark"] .home-page .spark,html[data-theme="dark"] .home-page .kicker,html[data-theme="dark"] .home-page .step-icon,html[data-theme="dark"] .home-page .face{color:#c7a78f}
html[data-theme="dark"] .home-page .hero h1 em{color:#d4a88e}
html[data-theme="dark"] .home-page .hero-price strong{color:#f3eee3}
html[data-theme="dark"] .home-page .button-dark{background:#a6c2b3;color:#172b30}
html[data-theme="dark"] .home-page .button-dark:hover{background:#bfd1c4}
html[data-theme="dark"] .home-page .button-outline{border-color:#8ea8aa;color:#f3eee3}
html[data-theme="dark"] .home-page .button-outline:hover{background:#334956}
html[data-theme="dark"] .home-page .phone-stage:before{background:#1b2732;box-shadow:0 0 52px 18px rgba(165,193,197,.055)}
html[data-theme="dark"] .home-page .phone{box-shadow:12px 18px 0 #1c2b35,0 15px 45px rgba(180,203,207,.11),0 0 72px 8px rgba(169,198,201,.055)}
html[data-theme="dark"] .home-page .phone{color:#233e35}
html[data-theme="dark"] .home-page .note-sticker{background:#b9aa86;color:#263944;box-shadow:5px 8px 0 #2b3944}
html[data-theme="dark"] .home-page .doodle{color:#b99a89}
html[data-theme="dark"] .home-page .marquee{background:#2c434c}
html[data-theme="dark"] .home-page .marquee span,html[data-theme="dark"] .home-page .closing-spark{color:#b9aa86}
html[data-theme="dark"] .home-page .steps article,html[data-theme="dark"] .home-page .personality-grid article,html[data-theme="dark"] .home-page .benefit-grid article,html[data-theme="dark"] .home-page .example-card,html[data-theme="dark"] .home-page .plan{background:#22303c;border-color:#495c69;color:#f3eee3}
html[data-theme="dark"] .home-page .steps p,html[data-theme="dark"] .home-page .personality p,html[data-theme="dark"] .home-page .section-heading>p,html[data-theme="dark"] .home-page .personality-foot,html[data-theme="dark"] .home-page .plan p,html[data-theme="dark"] .home-page .plan .billing{color:#c1cbca}
html[data-theme="dark"] .home-page .contrast{background:#192630}
html[data-theme="dark"] .home-page .example-card{box-shadow:12px 12px 0 #111d27}
html[data-theme="dark"] .home-page .example-label{color:#b7c3c3}
html[data-theme="dark"] .home-page .better-label,html[data-theme="dark"] .home-page .benefit-grid span{color:#c9ab94}
html[data-theme="dark"] .home-page .generic{color:#aab9bc}
html[data-theme="dark"] .home-page .personality-grid article:nth-child(2){background:#2b3640}
html[data-theme="dark"] .home-page .personality-grid article:nth-child(3){background:#263843}
html[data-theme="dark"] .home-page .personality-grid article:nth-child(4){background:#343c45}
html[data-theme="dark"] .home-page .no-app{background:#202f3a}
html[data-theme="dark"] .home-page .mini-bubble{background:#354b55;color:#f3eee3;box-shadow:7px 10px 0 #17242e}
html[data-theme="dark"] .home-page .mini-bubble.reply{background:#91b4ab;color:#1c3038}
html[data-theme="dark"] .home-page .button-cream{background:#d4c8b1;color:#24343a}
html[data-theme="dark"] .home-page .button-cream:hover{background:#e1d6c2}
html[data-theme="dark"] .home-page .plan.featured{background:#2e4150;border-color:#718799;box-shadow:0 18px 36px rgba(4,12,20,.32),8px 10px 0 #172430}
html[data-theme="dark"] .home-page .plan .plan-description,html[data-theme="dark"] .home-page .pricing .annual-billing{color:#f5efe3}
html[data-theme="dark"] .home-page .plan.featured p{color:#e4e9e5}
html[data-theme="dark"] .home-page .popular{background:#bfb095;color:#263642}
html[data-theme="dark"] .home-page .gift{background:#302e35}
html[data-theme="dark"] .home-page .gift-card{background:#c5b9a6;color:#24343a;box-shadow:16px 17px 0 #202a32}
html[data-theme="dark"] .home-page .gift-seal{background:#354c4b;color:#f3eee3}
html[data-theme="dark"] .home-page .trust{background:#1d2b36}
html[data-theme="dark"] .home-page .closing{background:#131f2b}
html[data-theme="dark"] .home-page .closing h2 em{color:#d1aa95}
html[data-theme="dark"] .home-page footer{background:#101923}
/* The signup dialog is unchanged even if someone opens it while viewing the night theme. */
html[data-theme="dark"] .home-page #signup{--ink:#233e35;--green:#265346;--deep:#173e35;--cream:#fbf7ed;--paper:#fffdf7;--line:#d9d9c8;--muted:#58675e;color:#233e35}
html[data-theme="dark"] .home-page #signup .button-dark{background:#265346;color:white}
html[data-theme="dark"] .home-page #signup .button-dark:hover{background:#193c33}
@media(max-width:900px){.home-page .benefit-grid{grid-template-columns:repeat(2,1fr)}.home-page .hero h1{font-size:clamp(52px,6vw,70px)}}
@media(max-width:700px){.home-page .theme-toggle{width:34px;height:34px}.home-page .hero h1{font-size:clamp(46px,10vw,62px)}.home-page .hero-lede{font-size:20px}.home-page .benefit-grid{gap:9px;margin-top:26px}.home-page .benefit-grid article{padding:17px}.home-page .benefit-grid p{font-size:14px}.home-page .nav-actions{gap:7px}}
@media(max-width:500px){.home-page .nav-actions{width:100%;justify-content:flex-end}.home-page .brand{margin-right:auto}}
@media(max-width:390px){.home-page .benefit-grid{grid-template-columns:1fr}}
/* Graphic stars use a shape mask, never a platform emoji glyph. */
.home-page .graphic-star{display:inline-block;width:1em;height:1em;vertical-align:-.12em;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 4v92M4 50h92M17.5 17.5l65 65m0-65-65 65' fill='none' stroke='black' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 4v92M4 50h92M17.5 17.5l65 65m0-65-65 65' fill='none' stroke='black' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.home-page .spark.graphic-star{width:19px;height:19px}
.home-page .doodle.graphic-star{position:absolute;width:1em;height:1em}
.home-page .marquee .graphic-star{padding:0;width:15px;height:15px;margin:0 38px;color:#f4d788}
.home-page .face .graphic-star{width:35px;height:35px}
.home-page .popular .graphic-star{width:11px;height:11px;margin-left:3px}
.home-page .closing-spark .graphic-star{width:39px;height:39px}
.home-page .phone-chat .bubble{width:fit-content;margin-bottom:8px}
.home-page .phone-chat .bubble-user{margin:0 0 8px auto}
.home-page .example-chat{display:flex;flex-direction:column;gap:7px;margin-top:13px}
.home-page .example-message{align-self:flex-start;background:#e5e9e4;border-radius:14px 14px 14px 4px;padding:8px 11px;max-width:85%;font:14px/1.35 Arial,Helvetica,sans-serif;color:#233e35}
.home-page .example-message.from-user{align-self:flex-end;background:#d4e8d7;border-radius:14px 14px 4px 14px}
html[data-theme="dark"] .home-page .example-message{background:#354b55;color:#f3eee3}
html[data-theme="dark"] .home-page .example-message.from-user{background:#607d79;color:#fbf7ed}
html[data-theme="dark"] .home-page .marquee .graphic-star{color:#b9aa86}
.home-page .graphic-star{mask:url('/sparkle.svg') center/contain no-repeat;-webkit-mask:url('/sparkle.svg') center/contain no-repeat}
.home-page .phone-top .avatar{background:transparent}
.home-page .phone-top .avatar img{display:block;width:34px;height:34px;object-fit:contain}
.home-page .phone-chat .friend-message{display:flex;align-items:flex-end;gap:5px;margin-bottom:8px}
.home-page .phone-chat .friend-avatar{display:block;flex:none;width:20px;height:20px;object-fit:contain}
.home-page .phone-chat .friend-message .bubble{margin-bottom:0}
.home-page .gift-seal{background:transparent}
.home-page .gift-seal img{display:block;width:100%;height:100%;object-fit:contain}

/* Leave room for the CTA's decorative outer ring beside Sign in. */
.home-page .nav-actions{gap:28px;padding-right:10px}
@media(max-width:700px){
 .home-page .nav-actions{gap:22px;flex-wrap:wrap;row-gap:20px;padding-block:10px}
 .home-page .nav-cta{flex-shrink:0}
}
@media(max-width:370px){
 .home-page .nav-actions{column-gap:16px}
 .home-page .nav-cta{padding-inline:10px}
 .home-page .nav-cta .action-arrow{margin-left:8px;width:16px;height:16px;flex-basis:16px}
}