@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

:root { --ink:#152c3a; --ink-soft:#31505f; --paper:#f8f7f3; --blue:#8ec7e8; --blue-pale:#dff2fb; --coral:#ff8f7b; --coral-deep:#ec6d68; --sand:#f4e4c8; --white:#fff; --line:rgba(21,44,58,.15); --shadow:0 22px 60px rgba(21,44,58,.13); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:radial-gradient(circle at 12% 10%, rgba(142,199,232,.18), transparent 28rem), radial-gradient(circle at 88% 17%, rgba(255,143,123,.11), transparent 25rem), var(--paper); color:var(--ink); font-family:'DM Sans', system-ui, sans-serif; font-size:16px; line-height:1.55; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.skip-link { position:absolute; left:1rem; top:-5rem; background:var(--ink); color:white; padding:.7rem 1rem; border-radius:.5rem; z-index:20; }
.skip-link:focus { top:1rem; }
.section-wrap { width:min(1160px, calc(100% - 3rem)); margin-inline:auto; }
.site-header { position:sticky; top:0; z-index:10; width:min(1160px, calc(100% - 3rem)); height:82px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:2rem; background:rgba(248,247,243,.78); backdrop-filter:blur(16px); border-bottom:1px solid rgba(21,44,58,.08); }
.brand { display:inline-flex; align-items:center; gap:.7rem; font-weight:700; letter-spacing:-.03em; font-size:1.1rem; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:13px; overflow:hidden; background:var(--blue-pale); border:1px solid rgba(21,44,58,.1); }
.brand-mark img { width:100%; height:100%; object-fit:cover; }
nav { display:flex; gap:.3rem; color:var(--ink-soft); font-size:.82rem; padding:.3rem; border:1px solid rgba(21,44,58,.1); border-radius:999px; background:rgba(255,255,255,.55); }
nav a { padding:.5rem .75rem; border-radius:999px; transition:color .2s ease, background .2s ease; }
nav a:hover { background:var(--blue-pale); }
nav a, .footer-links a { transition:color .2s ease; }
nav a:hover, .footer-links a:hover { color:var(--coral-deep); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:.8rem; min-height:52px; padding:0 1.3rem; border-radius:999px; font-weight:700; transition:transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform:translateY(-2px); }
.button-primary { background:var(--coral-deep); color:white; box-shadow:0 9px 18px rgba(236,109,104,.25); }
.button-primary:hover { background:#d95e61; box-shadow:0 12px 22px rgba(236,109,104,.32); }
.button-outline { border:1px solid var(--line); color:var(--ink); min-height:42px; padding-inline:1.1rem; font-size:.9rem; }
.button-outline:hover { border-color:var(--coral-deep); color:var(--coral-deep); }
.button-small { white-space:nowrap; }
.text-link { display:inline-flex; align-items:center; gap:.45rem; font-weight:700; color:var(--ink); font-size:.94rem; }
.text-link span { font-size:1.25rem; transition:transform .2s ease; }
.text-link:hover span { transform:translateX(4px); }
.hero { min-height:690px; padding:4.8rem 0 5.8rem; display:grid; grid-template-columns:minmax(0, 1fr) minmax(390px, .9fr); align-items:center; gap:4rem; }
.eyebrow { display:flex; align-items:center; gap:.55rem; color:var(--coral-deep); text-transform:uppercase; letter-spacing:.12em; font-size:.75rem; font-weight:700; }
.eyebrow-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--coral); }
.eyebrow-dark { color:var(--ink-soft); }
h1, h2, h3, p { margin-top:0; }
h1, h2 { letter-spacing:-.055em; line-height:1.05; }
h1 { font-size:clamp(3.2rem, 6.1vw, 5.75rem); max-width:720px; margin-bottom:1.5rem; font-weight:600; }
h1 em { font-family:'DM Sans', system-ui, sans-serif; font-style:normal; font-weight:700; color:var(--coral-deep); }
.hero-lede { max-width:560px; color:var(--ink-soft); font-size:1.13rem; line-height:1.65; margin-bottom:2.2rem; }
.hero-actions { display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; }
.trust-row { display:flex; gap:2.3rem; margin-top:4.5rem; }
.trust-row span { display:flex; flex-direction:column; gap:.12rem; }
.trust-row strong { font-size:.93rem; }
.trust-row small { color:var(--ink-soft); font-size:.78rem; }
.hero-art { min-height:560px; position:relative; display:grid; place-items:center; }
.mascot-stage { position:relative; z-index:2; width:min(365px, 76vw); aspect-ratio:1; border-radius:47% 53% 45% 55% / 47% 45% 55% 53%; background:linear-gradient(145deg,#eaf6fa 10%,#c3e5f3); box-shadow:var(--shadow); overflow:hidden; display:grid; place-items:center; transform:rotate(4deg); }
.mascot-stage::after { content:''; position:absolute; inset:16px; border:1px dashed rgba(21,44,58,.22); border-radius:inherit; }
.mascot-stage img { width:93%; height:93%; object-fit:cover; mix-blend-mode:multiply; transform:rotate(-4deg); transition:opacity .25s ease; }
.mascot-glow { position:absolute; width:230px; height:230px; border-radius:50%; background:var(--white); filter:blur(4px); opacity:.55; }
.art-orbit { position:absolute; border:1px solid rgba(21,44,58,.16); border-radius:50%; transform:rotate(-20deg); }
.orbit-one { width:470px; height:210px; }
.orbit-two { width:400px; height:500px; transform:rotate(31deg); border-color:rgba(236,109,104,.25); }
.art-sticker { position:absolute; z-index:3; display:grid; place-items:center; width:56px; height:56px; border-radius:20px; box-shadow:0 13px 25px rgba(21,44,58,.14); font-size:1.8rem; }
.sticker-heart { top:16%; right:4%; background:var(--coral); color:#fff4ef; transform:rotate(9deg); }
.sticker-star { bottom:16%; left:7%; background:var(--sand); color:var(--coral-deep); transform:rotate(-12deg); }
.mascot-label { position:absolute; z-index:3; left:4%; bottom:11%; background:var(--ink); color:white; padding:.7rem 1rem .8rem; border-radius:14px 14px 14px 3px; display:flex; flex-direction:column; line-height:1.1; transform:rotate(-4deg); }
.label-kicker { color:#a6cbdb; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.2rem; }
.mascot-label span:last-child { font-family:'DM Sans', system-ui, sans-serif; font-size:1.08rem; font-weight:600; }
.mascot-switch { position:absolute; z-index:5; right:0; bottom:2%; display:flex; padding:.25rem; background:rgba(255,255,255,.75); backdrop-filter:blur(12px); border:1px solid rgba(21,44,58,.13); border-radius:999px; }
.switch-option { border:0; background:transparent; color:var(--ink-soft); padding:.5rem .85rem; border-radius:999px; cursor:pointer; font-size:.78rem; font-weight:700; }
.switch-option.is-active { background:var(--ink); color:white; }
.marquee-band { overflow:hidden; border-block:1px solid rgba(255,255,255,.12); background:var(--ink); color:#e9f2f4; }
.marquee-track { width:100%; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:1.35rem; padding:1.05rem 1.5rem; font-size:.69rem; font-weight:700; letter-spacing:.16em; }
.marquee-track i { font-style:normal; color:var(--coral); font-size:1rem; line-height:1; }
.resources-section { padding:8.5rem 0 9rem; }
.section-heading { max-width:600px; margin-bottom:3rem; }
.section-heading h2, .support-copy h2, .download-copy h2 { font-size:clamp(2.6rem, 5vw, 4.4rem); margin-bottom:1.1rem; }
.section-heading > p:last-child { color:var(--ink-soft); font-size:1.05rem; max-width:510px; }
.feature-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.2rem; }
.feature-card { min-height:370px; padding:1.7rem; border:1px solid rgba(21,44,58,.09); border-radius:24px; display:flex; flex-direction:column; overflow:hidden; position:relative; box-shadow:0 12px 32px rgba(21,44,58,.07); transition:transform .2s ease, box-shadow .2s ease; }
.feature-card::before { content:''; position:absolute; inset:0 0 auto; height:5px; background:var(--ink); opacity:.75; }
.feature-coral::before { background:var(--coral-deep); }
.feature-sand::before { background:#cc9b59; }
.feature-card:hover { box-shadow:0 20px 40px rgba(21,44,58,.11); }
.feature-card:hover { transform:translateY(-5px); }
.feature-blue { background:var(--blue-pale); }
.feature-coral { background:#ffe1d8; }
.feature-sand { background:var(--sand); }
.feature-number { font-size:.74rem; color:var(--ink-soft); }
.feature-icon { display:grid; place-items:center; width:54px; height:54px; background:rgba(255,255,255,.64); border-radius:18px; margin:3.5rem 0 1.4rem; font-size:1.65rem; }
.feature-card h3 { font-size:1.36rem; letter-spacing:-.03em; margin-bottom:.65rem; }
.feature-card p { color:var(--ink-soft); font-size:.94rem; max-width:290px; }
.feature-tag { margin-top:auto; color:var(--ink-soft); font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; }
.support-section { background:linear-gradient(135deg, #152c3a 0%, #183b4a 100%); color:white; overflow:hidden; }
.support-layout { min-height:690px; padding:7rem 0; display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center; }
.support-copy { max-width:520px; }
.support-copy .eyebrow { color:#9ad3e8; }
.support-copy h2 { color:white; }
.support-copy > p { color:#c7d7dc; font-size:1.08rem; line-height:1.7; }
.privacy-callout { display:flex; gap:1rem; margin:2rem 0 2.2rem; padding:1.1rem; border:1px solid rgba(154,211,232,.27); border-radius:17px; background:rgba(255,255,255,.07); }
.privacy-callout strong { font-size:.98rem; }
.privacy-callout p { color:#b7cbd1; margin:.25rem 0 0; font-size:.88rem; line-height:1.5; }
.privacy-icon { color:var(--coral); font-size:1.5rem; line-height:1; }
.link-light { color:white; }
.support-visual { min-height:420px; position:relative; display:grid; place-items:center; }
.support-ring { position:absolute; border:1px solid rgba(154,211,232,.22); border-radius:50%; }
.ring-a { width:420px; height:420px; }
.ring-b { width:300px; height:300px; border-color:rgba(255,143,123,.3); }
.support-note { position:absolute; z-index:2; background:#f9faf7; color:var(--ink); border-radius:17px; box-shadow:0 18px 35px rgba(0,0,0,.23); padding:1rem 1.1rem; display:grid; grid-template-columns:auto 1fr; column-gap:.7rem; min-width:230px; transform:rotate(-5deg); }
.note-main { top:13%; left:14%; }
.support-note strong { font-size:.9rem; }
.support-note small { grid-column:2; color:#6b7d82; font-size:.73rem; }
.support-note b { grid-column:2; color:var(--coral-deep); font-size:.78rem; margin-top:.45rem; }
.note-icon { grid-row:span 3; display:grid; place-items:center; width:30px; height:30px; border-radius:10px; background:var(--blue-pale); color:var(--ink); }
.note-small { bottom:16%; right:11%; transform:rotate(6deg); min-width:185px; }
.note-small .note-icon { background:#ffe1d8; }
.support-avatar { position:absolute; z-index:3; width:45px; height:45px; border-radius:50%; display:grid; place-items:center; color:white; font-weight:700; border:4px solid var(--ink); }
.avatar-a { left:7%; bottom:25%; background:var(--coral-deep); }
.avatar-b { right:8%; top:23%; background:#4c92b0; }
.avatar-c { left:39%; top:2%; background:#9876a9; }
.steps-section { padding:8.5rem 0 9rem; }
.centered-heading { margin-inline:auto; text-align:center; }
.centered-heading .eyebrow { justify-content:center; }
.steps-grid { display:grid; grid-template-columns:repeat(3, 1fr); border-top:1px solid var(--line); }
.step { padding:2rem 2rem 0 0; border-right:1px solid var(--line); margin-right:2rem; }
.step:last-child { border:0; margin:0; }
.step-index { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--ink); border-radius:50%; margin-bottom:2.3rem; font-size:.82rem; }
.step h3 { font-size:1.15rem; margin-bottom:.5rem; }
.step p { color:var(--ink-soft); font-size:.94rem; max-width:240px; }
.download-section { padding-bottom:8rem; }
.download-card { background:linear-gradient(125deg, #e76f69 0%, #f58c73 56%, #f5a183 100%); color:white; min-height:470px; padding:4rem; border-radius:30px; display:grid; grid-template-columns:1fr 300px; gap:3rem; overflow:hidden; position:relative; box-shadow:0 22px 55px rgba(212,92,88,.2); }
.download-card::before { content:''; position:absolute; width:560px; height:560px; right:-230px; top:-260px; border:1px solid rgba(255,255,255,.35); border-radius:50%; }
.download-card::after { content:''; position:absolute; width:370px; height:370px; right:-130px; bottom:-250px; border:1px solid rgba(255,255,255,.25); border-radius:50%; }
.download-copy { position:relative; z-index:2; }
.download-copy .eyebrow { color:#ffe5df; }
.download-copy h2 { margin-bottom:1rem; }
.download-copy > p { color:#fff0ed; max-width:550px; font-size:1.03rem; }
.download-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin:2rem 0 1.3rem; }
.store-button { display:flex; align-items:center; gap:.7rem; min-width:207px; padding:.8rem .95rem; border-radius:14px; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.14); color:white; transition:background .2s ease, transform .2s ease; }
.store-button:hover { background:rgba(255,255,255,.25); transform:translateY(-2px); }
.store-button small, .store-button strong { display:block; line-height:1.2; }
.store-button small { font-size:.68rem; color:#ffe1d8; }
.store-button strong { font-size:.8rem; }
.store-symbol { display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:white; color:var(--coral-deep); font-size:.75rem; }
.store-arrow { margin-left:auto; font-size:1.1rem; }
.store-soon { opacity:.75; }
.download-copy .text-link { color:white; }
.download-mark { position:relative; display:grid; place-items:center; align-self:center; justify-self:end; width:260px; height:260px; border-radius:50%; background:#ffb29f; transform:rotate(6deg); }
.download-mark img { width:230px; height:230px; object-fit:cover; mix-blend-mode:multiply; border-radius:50%; }
.download-mark span { position:absolute; bottom:-17px; right:-23px; background:var(--ink); padding:.65rem .85rem; border-radius:12px; font-size:.75rem; line-height:1.15; transform:rotate(-9deg); }
.download-mark strong { color:#a6cbdb; font-weight:500; }
.site-footer { background:var(--ink); color:white; }
.footer-inner { min-height:210px; padding:2.2rem 0; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:start; gap:1.5rem; }
.brand-footer { color:white; }
.footer-inner p { color:#a8c0c8; font-size:.88rem; justify-self:center; }
.footer-links { display:flex; gap:1.2rem; justify-self:end; color:#d5e3e6; font-size:.8rem; }
.footer-inner > small { color:#8da9b2; font-size:.73rem; grid-column:1/-1; margin-top:1.8rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.14); }
.download-page { background:var(--paper); }
.download-main { padding-bottom:5rem; }
.download-hero { min-height:410px; padding:5rem 0 3.5rem; display:grid; grid-template-columns:1fr 240px; align-items:center; gap:3rem; }
.download-hero h1 { font-size:clamp(3rem,6vw,5rem); max-width:650px; }
.download-hero p:not(.eyebrow) { color:var(--ink-soft); max-width:620px; font-size:1.08rem; }
.download-hero img { width:240px; height:240px; object-fit:cover; border-radius:50%; background:var(--blue-pale); box-shadow:var(--shadow); }
.stores-list { display:grid; gap:1rem; }
.big-store-card { display:grid; grid-template-columns:auto 1fr auto; gap:1.1rem; align-items:center; padding:1.3rem 1.5rem; border:1px solid var(--line); border-radius:18px; min-height:105px; }
.big-store-card.available { background:var(--ink); color:white; border-color:var(--ink); }
.big-store-card.pending { background:rgba(255,255,255,.48); color:var(--ink-soft); }
.big-store-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--blue-pale); color:var(--ink); }
.available .big-store-icon { background:var(--coral); color:white; }
.big-store-card small, .big-store-card strong, .big-store-card em { display:block; }
.big-store-card small { font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:#91b9c8; }
.pending small { color:var(--coral-deep); }
.big-store-card strong { font-size:1.08rem; }
.big-store-card em { font-size:.8rem; font-style:normal; color:#96aeb6; }
.available em { color:#bbd0d5; }
.big-store-card > b { font-size:1.2rem; font-weight:400; }
.install-notes { padding:4rem 0; }
.install-panel { max-width:700px; padding:2rem; background:var(--sand); border-radius:20px; }
.install-panel h2 { font-size:1.6rem; letter-spacing:-.03em; }
.install-panel ul { color:var(--ink-soft); padding-left:1.15rem; }
.install-panel li { margin:.45rem 0; }
@media (max-width: 850px) { .site-header { height:74px; } nav { display:none; } .hero { grid-template-columns:1fr; padding-top:3.4rem; gap:1.7rem; } .hero-copy { text-align:center; } .eyebrow { justify-content:center; } .hero-lede { margin-inline:auto; } .hero-actions { justify-content:center; } .trust-row { justify-content:center; margin-top:3rem; } .hero-art { min-height:510px; } .feature-grid, .steps-grid { grid-template-columns:1fr; gap:1rem; } .feature-card { min-height:280px; } .feature-icon { margin-top:2rem; } .step { border-right:0; border-bottom:1px solid var(--line); margin:0; padding:1.6rem 0; } .step-index { margin-bottom:1rem; } .support-layout { grid-template-columns:1fr; gap:2rem; padding:5rem 0; } .support-copy { order:-1; text-align:center; margin-inline:auto; } .privacy-callout { text-align:left; } .support-copy .eyebrow { justify-content:center; } .support-visual { min-height:390px; transform:scale(.88); } .download-card { grid-template-columns:1fr; padding:2.4rem; } .download-mark { justify-self:center; width:200px; height:200px; } .download-mark img { width:180px; height:180px; } .footer-inner { grid-template-columns:1fr; } .footer-inner p, .footer-links { justify-self:start; } }
@media (max-width: 520px) { .section-wrap, .site-header { width:min(100% - 2rem, 1160px); } .site-header .button { display:none; } h1 { font-size:3.15rem; } .hero { padding-bottom:4rem; } .hero-art { min-height:430px; } .mascot-stage { width:290px; } .orbit-one { width:330px; } .orbit-two { width:300px; height:390px; } .mascot-label { left:0; bottom:6%; } .mascot-switch { right:0; bottom:-1%; } .marquee-track { justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; white-space:nowrap; scrollbar-width:none; padding-inline:1rem; } .marquee-track::-webkit-scrollbar { display:none; } .resources-section, .steps-section { padding:6rem 0; } .support-visual { transform:scale(.72); min-height:310px; margin-block:-1rem; } .download-card { padding:2rem 1.4rem; border-radius:22px; } .download-actions { display:grid; } .store-button { width:100%; } .download-hero { grid-template-columns:1fr; padding-top:3.4rem; } .download-hero img { width:170px; height:170px; justify-self:start; } .big-store-card { padding:1rem; gap:.75rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *, *::before, *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; } }

/* Blog */
.download-nav { display:flex; align-items:center; gap:1.6rem; }
.nav-current { background:var(--blue-pale); color:var(--ink); }
.blog-hero { min-height:550px; padding:4.8rem 0 5.5rem; display:grid; grid-template-columns:1fr minmax(330px, .7fr); align-items:center; gap:4rem; }
.blog-hero-copy h1 { max-width:690px; font-size:clamp(3rem, 5.8vw, 5.3rem); }
.blog-hero-copy h1 em { display:block; }
.blog-hero-copy > p:not(.eyebrow) { max-width:570px; color:var(--ink-soft); font-size:1.1rem; line-height:1.65; }
.blog-hero-meta { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:2rem; }
.blog-hero-meta span { border:1px solid var(--line); border-radius:999px; padding:.45rem .75rem; color:var(--ink-soft); font-size:.78rem; }
.blog-hero-art { position:relative; min-height:370px; display:grid; place-items:center; }
.blog-hero-art::before { content:''; position:absolute; width:350px; height:350px; border:1px solid rgba(21,44,58,.17); border-radius:50%; }
.blog-sun { position:absolute; width:290px; height:290px; border-radius:50%; background:linear-gradient(145deg,#dff2fb,#f9e5ca); }
.blog-hero-art img { position:relative; z-index:1; width:310px; height:310px; object-fit:cover; border-radius:50%; mix-blend-mode:multiply; }
.blog-sticker { position:absolute; z-index:2; right:2%; bottom:6%; background:var(--ink); color:white; padding:.75rem .95rem; border-radius:14px 14px 3px 14px; line-height:1.1; font-size:.75rem; transform:rotate(5deg); }
.blog-sticker strong { color:#9ad3e8; font-weight:600; }
.notice-section { padding-bottom:2.2rem; }
.health-notice { display:flex; gap:1rem; align-items:flex-start; padding:1.25rem 1.4rem; border:1px solid rgba(236,109,104,.28); border-radius:18px; background:#fff3ec; }
.notice-mark { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:white; background:var(--coral-deep); flex:0 0 auto; }
.health-notice strong { display:block; margin-bottom:.2rem; }
.health-notice p { margin:0; color:var(--ink-soft); font-size:.87rem; }
.blog-nav-section { padding:4.4rem 0 2.3rem; display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; }
.blog-section-title h2 { font-size:clamp(2.1rem, 4vw, 3.25rem); margin-bottom:0; }
.blog-section-title .eyebrow { margin-bottom:.75rem; }
.blog-filters { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.45rem; }
.blog-filter { cursor:pointer; border:1px solid var(--line); color:var(--ink-soft); background:transparent; border-radius:999px; padding:.55rem .8rem; font-size:.78rem; transition:background .2s ease, color .2s ease, border .2s ease; }
.blog-filter:hover, .blog-filter.is-selected { background:var(--ink); border-color:var(--ink); color:white; }
.article-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:1rem; padding-bottom:6rem; }
.article-card { min-height:340px; border:1px solid rgba(21,44,58,.11); border-radius:22px; background:white; overflow:hidden; display:flex; flex-direction:column; position:relative; box-shadow:0 12px 30px rgba(21,44,58,.06); }
.article-card-content { padding:1.65rem; position:relative; z-index:1; }
.article-card h3 { font-size:1.35rem; letter-spacing:-.035em; line-height:1.15; margin-bottom:.7rem; }
.article-card p:not(.article-kicker) { color:var(--ink-soft); font-size:.9rem; line-height:1.6; }
.article-kicker { color:var(--coral-deep); text-transform:uppercase; letter-spacing:.12em; font-size:.69rem; font-weight:700; margin-bottom:.8rem; }
.article-card .text-link { margin-top:.55rem; font-size:.84rem; }
.article-feature { display:grid; grid-template-columns:1fr .8fr; }
.article-feature .article-card-content { padding:2rem; }
.article-label { position:absolute; top:1rem; left:1rem; z-index:2; background:var(--coral-deep); color:white; padding:.35rem .6rem; border-radius:999px; font-size:.68rem; font-weight:700; }
.article-art { min-height:100%; background:var(--blue-pale); position:relative; overflow:hidden; }
.article-art::before, .article-art::after { content:''; position:absolute; border-radius:50%; border:1px solid rgba(21,44,58,.16); }
.article-art::before { width:250px; height:250px; top:18%; left:-20%; }
.article-art::after { width:180px; height:180px; right:-15%; bottom:-10%; border-color:rgba(236,109,104,.27); }
.article-art-puerperio { background:linear-gradient(145deg,#dff2fb,#f4e4c8); }
.article-art span { position:absolute; z-index:1; left:18%; bottom:18%; font-size:2rem; line-height:1; font-weight:700; letter-spacing:-.06em; }
.article-art small { display:block; margin-top:.45rem; font-size:.75rem; font-weight:500; letter-spacing:0; color:var(--ink-soft); }
.article-mini-icon { margin:auto 1.5rem 1.5rem; align-self:flex-end; display:grid; place-items:center; width:62px; height:62px; border-radius:19px; background:var(--blue-pale); font-size:2rem; color:var(--ink); }
.article-mini-coral { background:#ffe1d8; color:var(--coral-deep); }
.article-card[hidden] { display:none; }
.blog-reading-section { padding:5rem 0 7.5rem; }
.reading-intro { display:grid; grid-template-columns:.7fr 1.3fr; gap:3rem; padding-bottom:3.5rem; border-bottom:1px solid var(--line); }
.reading-intro h2 { font-size:clamp(2.45rem, 5vw, 4rem); margin-bottom:1.1rem; }
.reading-intro > p:last-child { grid-column:2; color:var(--ink-soft); max-width:630px; font-size:1.03rem; line-height:1.75; }
.reading-columns { display:grid; grid-template-columns:1fr 1fr; gap:4rem; padding-top:3.4rem; }
.reading-columns h3 { font-size:1.2rem; margin-bottom:1rem; }
.reading-columns ul { list-style:none; padding:0; margin:0; }
.reading-columns li { padding:.75rem 0 .75rem 1.4rem; border-bottom:1px solid var(--line); color:var(--ink-soft); position:relative; font-size:.95rem; }
.reading-columns li::before { content:'+'; position:absolute; left:0; color:var(--coral-deep); font-weight:700; }
.reading-columns > div > p { color:var(--ink-soft); font-size:.95rem; line-height:1.7; }
.source-link { display:inline-flex; margin-top:.65rem; color:var(--coral-deep); font-size:.78rem; font-weight:700; }
.timeline-section { padding:7rem 0 7.5rem; background:var(--blue-pale); }
.timeline-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:3rem; margin-bottom:3.5rem; }
.timeline-heading h2 { font-size:clamp(2.55rem, 5vw, 4.1rem); margin-bottom:0; }
.timeline-heading > p { max-width:425px; color:var(--ink-soft); margin-bottom:.2rem; }
.timeline-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }
.month-card { background:rgba(255,255,255,.82); border:1px solid rgba(21,44,58,.1); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; min-height:335px; box-shadow:0 8px 18px rgba(21,44,58,.04); }
.month-visual { height:150px; position:relative; overflow:hidden; display:grid; place-items:center; background:var(--sand); }
.month-visual::after { content:''; position:absolute; width:145px; height:145px; border:1px solid rgba(21,44,58,.14); border-radius:50%; }
.month-visual img { width:130px; height:130px; object-fit:cover; border-radius:50%; mix-blend-mode:multiply; transform:scale(var(--baby-scale,1)); }
.month-1 { --baby-scale:.73; } .month-2 { --baby-scale:.78; } .month-3 { --baby-scale:.82; } .month-4 { --baby-scale:.86; } .month-5 { --baby-scale:.9; } .month-6 { --baby-scale:.94; } .month-7 { --baby-scale:.98; } .month-8 { --baby-scale:1.02; } .month-9 { --baby-scale:1.06; } .month-10 { --baby-scale:1.1; } .month-11 { --baby-scale:1.14; } .month-12 { --baby-scale:1.18; }
.month-2 .month-visual, .month-4 .month-visual, .month-6 .month-visual, .month-8 .month-visual, .month-10 .month-visual, .month-12 .month-visual { background:#ffe1d8; }
.month-copy { padding:1rem 1rem 1.15rem; }
.month-copy > span { color:var(--coral-deep); text-transform:uppercase; font-size:.66rem; font-weight:700; letter-spacing:.1em; }
.month-copy h3 { font-size:1rem; letter-spacing:-.025em; margin:.35rem 0 .42rem; }
.month-copy p { color:var(--ink-soft); font-size:.79rem; line-height:1.55; margin:0; }
.timeline-footnote { color:var(--ink-soft); font-size:.78rem; margin:2rem 0 0; }
.timeline-footnote .source-link { font-size:.78rem; }
.nutrition-section { padding:8rem 0; display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:5rem; }
.nutrition-art { position:relative; min-height:350px; display:grid; place-items:center; }
.nutrition-circle { width:310px; height:310px; border-radius:50%; background:var(--sand); display:grid; place-items:center; overflow:hidden; box-shadow:var(--shadow); }
.nutrition-circle img { width:280px; height:280px; object-fit:cover; border-radius:50%; mix-blend-mode:multiply; }
.nutrition-badge { position:absolute; right:3%; bottom:10%; background:var(--ink); color:white; padding:.7rem .9rem; border-radius:14px; font-size:.72rem; line-height:1.1; transform:rotate(7deg); }
.nutrition-badge strong { color:#ffb29f; font-weight:600; }
.nutrition-copy h2 { font-size:clamp(2.55rem, 5vw, 4rem); }
.nutrition-copy > p:not(.eyebrow) { color:var(--ink-soft); font-size:1.02rem; line-height:1.7; max-width:590px; }
.nutrition-points { margin:2rem 0 1rem; border-top:1px solid var(--line); }
.nutrition-points > div { display:grid; grid-template-columns:.7fr 1.3fr; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--line); }
.nutrition-points b { font-size:.83rem; }
.nutrition-points span { color:var(--ink-soft); font-size:.85rem; }
.family-section { background:var(--ink); color:white; padding:7rem 0; }
.family-layout { display:grid; grid-template-columns:1fr .8fr; gap:5rem; align-items:center; }
.family-copy { max-width:560px; }
.family-copy .eyebrow { color:#9ad3e8; }
.family-copy h2 { font-size:clamp(2.55rem, 5vw, 4rem); }
.family-copy > p { color:#c5d6db; font-size:1.02rem; line-height:1.7; }
.help-list { display:grid; gap:.7rem; margin-top:2rem; }
.help-list span { display:flex; align-items:center; gap:.75rem; color:#deeaec; font-size:.88rem; }
.help-list b { display:grid; place-items:center; width:25px; height:25px; border:1px solid rgba(154,211,232,.45); border-radius:50%; color:#9ad3e8; font-size:.68rem; }
.family-card { background:#eff7f7; color:var(--ink); border-radius:22px; padding:2rem; transform:rotate(2deg); box-shadow:0 18px 36px rgba(0,0,0,.2); }
.family-card-kicker { color:var(--coral-deep); text-transform:uppercase; letter-spacing:.1em; font-size:.68rem; font-weight:700; }
.family-card h3 { font-size:1.5rem; letter-spacing:-.04em; margin:1rem 0 .7rem; }
.family-card p { color:var(--ink-soft); font-size:.9rem; }
.family-card .button { margin-top:.6rem; }
.sources-section { padding:8rem 0 8.5rem; }
.source-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }
.source-grid a { display:flex; flex-direction:column; justify-content:space-between; min-height:125px; border:1px solid var(--line); border-radius:15px; padding:1rem; transition:background .2s ease, transform .2s ease; }
.source-grid a:hover { background:white; transform:translateY(-3px); }
.source-grid span { color:var(--ink-soft); font-size:.7rem; }
.source-grid strong { font-size:.85rem; line-height:1.35; }
@media (max-width: 850px) { .blog-hero { grid-template-columns:1fr; text-align:center; gap:1rem; } .blog-hero .eyebrow { justify-content:center; } .blog-hero-copy > p:not(.eyebrow) { margin-inline:auto; } .blog-hero-meta { justify-content:center; } .blog-hero-art { min-height:320px; } .blog-nav-section, .timeline-heading { display:block; } .blog-filters { justify-content:flex-start; margin-top:1.3rem; } .article-grid { grid-template-columns:1fr 1fr; } .article-feature { grid-column:1/-1; } .reading-intro { grid-template-columns:1fr; gap:1rem; } .reading-intro > p:last-child { grid-column:auto; } .reading-columns { gap:2rem; } .timeline-grid { grid-template-columns:repeat(3,1fr); } .nutrition-section, .family-layout { grid-template-columns:1fr; gap:2.6rem; } .nutrition-art { min-height:300px; } .nutrition-copy { text-align:center; } .nutrition-copy .eyebrow { justify-content:center; } .nutrition-points { text-align:left; } .family-copy { text-align:center; margin-inline:auto; } .family-copy .eyebrow { justify-content:center; } .help-list { text-align:left; } .family-card { max-width:450px; margin-inline:auto; } .source-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 520px) { .download-nav { gap:.7rem; } .download-nav .text-link:first-child { display:none; } .blog-hero { padding-top:3rem; } .blog-hero-art { transform:scale(.85); margin-block:-1rem; } .health-notice { padding:1rem; } .blog-nav-section { padding-top:3.6rem; } .article-grid { grid-template-columns:1fr; } .article-feature { display:flex; } .article-art { min-height:180px; } .timeline-section { padding:5.5rem 0; } .timeline-grid { grid-template-columns:repeat(2,1fr); } .month-card { min-height:310px; } .month-visual { height:125px; } .month-visual img { width:110px; height:110px; } .month-visual::after { width:122px; height:122px; } .reading-columns { grid-template-columns:1fr; } .nutrition-section, .sources-section { padding:5.5rem 0; } .nutrition-points > div { grid-template-columns:1fr; gap:.25rem; } .source-grid { grid-template-columns:1fr; } }