@font-face {
  font-family: 'Geist';
  src: url('./assets/fonts/geist.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root { --ink: #20322b; --cream: #f5f0e7; --violet: #8c82ad; --moss: #7e9c89; --coral: #f18b6c; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: 'Geist', Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.nav { height: 92px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(24px, 5vw, 76px); border-bottom: 1px solid rgba(32, 50, 43, .18); position: absolute; inset: 0 0 auto; z-index: 20; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 21px; font-weight: 720; letter-spacing: -.03em; }
.brand-logo { width: 38px; height: 38px; display: block; border-radius: 10px; object-fit: cover; box-shadow: 0 3px 10px rgba(32, 50, 43, .15); }
.nav-links { display: flex; align-items: center; gap: 34px; font-size: 14px; font-weight: 600; }
.nav-links a:not(.nav-cta):hover { opacity: .58; }
.nav-cta { border: 1px solid var(--ink); border-radius: 100px; padding: 11px 18px; transition: .2s ease; }
.nav-cta:hover { color: var(--cream); background: var(--ink); }

.hero { min-height: 900px; padding: 150px clamp(24px, 7vw, 112px) 78px; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(380px, .98fr); align-items: center; gap: 5vw; overflow: hidden; }
.hero-copy { max-width: 720px; position: relative; z-index: 3; }
.kicker, .section-label { text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 740; }
.kicker { display: flex; align-items: center; gap: 11px; }
.kicker span { display: block; width: 22px; height: 2px; background: var(--coral); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 28px 0 26px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(62px, 7.4vw, 116px); line-height: .87; letter-spacing: -.065em; font-weight: 500; }
em { color: var(--coral); font-weight: 400; }
.hero-dek { max-width: 600px; font-size: clamp(18px, 1.65vw, 24px); line-height: 1.48; color: rgba(32, 50, 43, .72); }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 35px; }
.button { display: inline-flex; min-height: 53px; align-items: center; justify-content: center; padding: 0 25px; border-radius: 100px; font-weight: 700; font-size: 15px; transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(32, 50, 43, .17); }
.button-dark { background: var(--ink); color: var(--cream); }
.text-link { font-weight: 700; font-size: 15px; border-bottom: 1px solid rgba(32, 50, 43, .38); padding-bottom: 3px; }
.microcopy { margin-top: 25px; font-size: 12px; color: rgba(32, 50, 43, .54); }

.hero-art { min-height: 650px; position: relative; display: grid; place-items: center; }
.hero-art img { width: min(440px, 72%); position: relative; z-index: 4; transform: rotate(4deg); border-radius: 28px; box-shadow: 0 35px 75px rgba(32, 50, 43, .22); }
.sun { position: absolute; width: 74%; aspect-ratio: 1; border-radius: 50%; background: #f3b865; opacity: .9; }
.orbit { position: absolute; border: 1px solid rgba(32, 50, 43, .25); border-radius: 50%; transform: rotate(-14deg); }
.orbit-one { width: 116%; height: 59%; }
.orbit-two { width: 92%; height: 110%; }
.float-note { position: absolute; z-index: 6; background: rgba(245, 240, 231, .92); backdrop-filter: blur(9px); border: 1px solid rgba(32,50,43,.16); box-shadow: 0 12px 38px rgba(32,50,43,.12); border-radius: 100px; padding: 13px 18px; font-size: 12px; font-weight: 690; }
.note-top { top: 16%; right: -1%; }
.note-bottom { bottom: 11%; left: -5%; }
.wave { color: var(--coral); letter-spacing: 2px; margin-right: 5px; }

.proof { background: var(--ink); color: var(--cream); padding: 24px clamp(24px, 5vw, 76px); display: flex; align-items: center; gap: 4vw; }
.proof > p { margin: 0; white-space: nowrap; font-family: Georgia, serif; font-style: italic; color: #efb38d; font-size: 18px; }
.proof-list { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 10px; letter-spacing: .12em; font-weight: 760; }
.proof-list i { width: 4px; height: 4px; border-radius: 50%; background: #efb38d; }

.intro { padding: 130px 7vw 85px; text-align: center; }
.section-label { color: rgba(32, 50, 43, .6); }
.intro h2, .privacy h2, .download h2 { margin: 22px 0 0; font-family: Georgia, serif; font-weight: 400; font-size: clamp(43px, 5.4vw, 76px); line-height: 1.02; letter-spacing: -.045em; }
.intro em, .privacy em { color: var(--violet); }

.feature-grid { padding: 0 clamp(18px, 4vw, 64px) 128px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 42px); }
.feature-card { min-height: 0; position: relative; overflow: hidden; border-radius: 38px; display: grid; grid-template-rows: auto 1fr; }
.feature-card.mint { background: #b5d9c4; }
.feature-card.lavender { background: #d6cee7; }
.feature-card.rose { background: #f4c7c1; }
.feature-card.periwinkle { background: #c4c9eb; }
.feature-card.night { background: #202625; color: #eef0e7; }
.feature-copy { padding: 47px 48px 25px; position: relative; z-index: 3; }
.feature-copy > p { margin: 0 0 13px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 780; opacity: .6; }
.feature-copy h3 { margin: 0; font-family: Georgia, serif; font-size: clamp(34px, 3.5vw, 52px); line-height: 1; font-weight: 400; letter-spacing: -.035em; }
.feature-copy .rule { width: 42px; height: 1px; background: currentColor; margin: 24px 0 17px; opacity: .35; }
.feature-copy > span { display: block; max-width: 480px; font-size: 15px; line-height: 1.55; opacity: .7; }
.screen-wrap { align-self: end; justify-self: center; width: 64%; max-width: 480px; max-height: none; margin: 0 auto 46px; overflow: hidden; border-radius: 32px; box-shadow: 0 25px 55px rgba(32,50,43,.2); }
.screen-wrap img { width: 100%; height: auto; }
.feature-card:nth-child(even) .screen-wrap { transform: rotate(1.2deg); }
.feature-card:nth-child(odd) .screen-wrap { transform: rotate(-1.2deg); }
.feature-card.wide { grid-column: 1 / -1; min-height: 0; grid-template-columns: .8fr 1.2fr; grid-template-rows: 1fr; align-items: center; }
.feature-card.wide .feature-copy { padding-left: 8vw; }
.feature-card.wide .screen-wrap { width: 54%; max-width: 500px; max-height: none; margin: 52px auto; border-radius: 32px; }

.privacy { background: #d8d0e6; padding: 130px clamp(24px, 7vw, 110px); display: grid; grid-template-columns: .9fr 1.1fr; gap: 9vw; align-items: start; }
.privacy-heading { position: sticky; top: 80px; }
.benefit-list article { display: grid; grid-template-columns: 55px 1fr; gap: 26px; padding: 33px 0; border-top: 1px solid rgba(32,50,43,.25); }
.benefit-list article:last-child { border-bottom: 1px solid rgba(32,50,43,.25); }
.benefit-number { font-family: Georgia, serif; font-style: italic; color: #a05f52; }
.benefit-list h3 { margin: 0 0 10px; font-family: Georgia, serif; font-weight: 400; font-size: 28px; }
.benefit-list p { margin: 0; line-height: 1.6; opacity: .7; }

.download { min-height: 650px; overflow: hidden; position: relative; background: var(--ink); color: var(--cream); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 90px 24px; }
.download .section-label { color: #b7cfbd; }
.download h2 { position: relative; z-index: 2; }
.download h2 em { color: #f0b28b; }
.download > p:not(.section-label) { margin: 27px 0 30px; color: rgba(245,240,231,.63); }
.button-light { background: var(--cream); color: var(--ink); position: relative; z-index: 2; }
.download-leaf { position: absolute; width: 340px; height: 520px; border: 1px solid rgba(245,240,231,.12); border-radius: 70% 10% 70% 10%; }
.leaf-left { left: -100px; bottom: -190px; transform: rotate(25deg); }
.leaf-right { right: -110px; top: -220px; transform: rotate(-155deg); }

footer { min-height: 180px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 35px; padding: 42px clamp(24px,5vw,76px); }
footer > p { margin: 0; font-family: Georgia, serif; font-style: italic; opacity: .6; }
footer > div { justify-self: end; display: flex; gap: 20px; font-size: 11px; opacity: .6; }

.support-page { min-height: 100vh; background: var(--cream); }
.support-page > .nav { position: relative; }
.support-hero { min-height: 690px; padding: 85px clamp(24px, 7vw, 112px) 95px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(330px, .9fr); align-items: center; gap: 7vw; overflow: hidden; }
.support-hero-copy { max-width: 780px; }
.support-hero h1 { max-width: 760px; font-size: clamp(58px, 7.2vw, 104px); }
.support-hero-copy > p:not(.kicker) { max-width: 650px; font-size: clamp(18px, 1.6vw, 23px); line-height: 1.55; color: rgba(32, 50, 43, .7); }
.support-actions { display: flex; align-items: center; gap: 28px; margin-top: 34px; }
.support-mark { width: min(390px, 78vw); aspect-ratio: 1; justify-self: center; position: relative; display: grid; place-items: center; border-radius: 50%; background: #b5d9c4; box-shadow: 0 30px 75px rgba(32, 50, 43, .15); }
.support-mark > span { position: relative; z-index: 2; font-family: Georgia, serif; font-style: italic; font-size: clamp(130px, 17vw, 230px); line-height: 1; color: var(--ink); transform: translateY(-5px); }
.support-orbit { position: absolute; inset: 13%; border: 1px solid rgba(32, 50, 43, .28); border-radius: 50%; }
.support-orbit-one { transform: rotate(22deg) scaleX(1.36); }
.support-orbit-two { transform: rotate(-38deg) scaleY(1.32); }
.support-status { background: var(--ink); color: var(--cream); padding: 29px clamp(24px, 7vw, 112px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.support-status div { display: flex; flex-direction: column; gap: 7px; border-left: 1px solid rgba(245, 240, 231, .22); padding-left: 22px; }
.support-status span { color: #efb38d; text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 760; }
.support-status strong { font-family: Georgia, serif; font-size: 20px; font-weight: 400; }
.support-answers { padding: 130px clamp(24px, 7vw, 112px); display: grid; grid-template-columns: .78fr 1.22fr; gap: 9vw; align-items: start; }
.support-section-heading { position: sticky; top: 50px; }
.support-section-heading h2, .support-privacy h2, .support-contact h2 { margin: 22px 0 0; font-family: Georgia, serif; font-weight: 400; font-size: clamp(43px, 5vw, 70px); line-height: 1.02; letter-spacing: -.045em; }
.support-section-heading em { color: var(--violet); }
.support-topic-list article { display: grid; grid-template-columns: 48px 1fr; gap: 24px; padding: 31px 0; border-top: 1px solid rgba(32, 50, 43, .22); }
.support-topic-list article:last-child { border-bottom: 1px solid rgba(32, 50, 43, .22); }
.support-topic-list article > span { padding-top: 4px; font-family: Georgia, serif; font-style: italic; color: #a05f52; }
.support-topic-list h3 { margin: 0 0 10px; font-family: Georgia, serif; font-size: 27px; font-weight: 400; }
.support-topic-list p { margin: 0; max-width: 660px; color: rgba(32, 50, 43, .68); line-height: 1.65; }
.support-privacy { padding: 120px clamp(24px, 7vw, 112px); background: #d8d0e6; display: grid; grid-template-columns: .9fr 1.1fr; gap: 9vw; }
.support-privacy h2 em { color: var(--violet); }
.support-privacy > div:last-child { padding-top: 35px; }
.support-privacy > div:last-child p { font-size: 17px; line-height: 1.72; color: rgba(32, 50, 43, .72); }
.support-contact { min-height: 650px; padding: 95px 24px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: var(--cream); background: var(--ink); }
.support-contact .section-label { color: #b7cfbd; }
.support-contact h2 em { color: #f0b28b; }
.support-contact > p:not(.section-label) { max-width: 650px; margin: 28px 0 34px; color: rgba(245, 240, 231, .65); font-size: 17px; line-height: 1.65; }
.support-footer { background: var(--cream); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 140px; text-align: center; }
  .hero-copy { margin: 0 auto; }
  .kicker, .hero-actions { justify-content: center; }
  .hero-dek { margin-left: auto; margin-right: auto; }
  .hero-art { min-height: 650px; }
  .hero-art img { width: min(410px, 64%); }
  .feature-card { min-height: 0; }
  .feature-card.wide { grid-template-columns: 1fr 1.2fr; }
  .privacy { grid-template-columns: 1fr; }
  .privacy-heading { position: static; }
  footer { grid-template-columns: 1fr 1fr; }
  footer > p { display: none; }
  .support-hero { grid-template-columns: 1fr; text-align: center; }
  .support-hero-copy { margin: 0 auto; }
  .support-hero .kicker, .support-actions { justify-content: center; }
  .support-hero-copy > p:not(.kicker) { margin-left: auto; margin-right: auto; }
  .support-mark { width: min(340px, 68vw); }
  .support-answers, .support-privacy { grid-template-columns: 1fr; }
  .support-section-heading { position: static; }
}

@media (max-width: 650px) {
  .nav { height: 76px; }
  .nav-links a:not(.nav-cta) { display: none; }
  .nav-cta { padding: 9px 14px; }
  .hero { min-height: 0; padding: 120px 20px 50px; }
  h1 { font-size: clamp(58px, 18vw, 78px); }
  .hero-dek { font-size: 18px; }
  .hero-actions { flex-direction: column; gap: 18px; }
  .microcopy { line-height: 1.6; }
  .hero-art { min-height: 510px; margin-top: 10px; }
  .hero-art img { width: 74%; }
  .sun { width: 82%; }
  .note-top { right: -8px; }
  .note-bottom { left: -8px; }
  .proof { display: block; text-align: center; }
  .proof > p { margin-bottom: 14px; }
  .proof-list { flex-wrap: wrap; justify-content: center; line-height: 1.7; }
  .proof-list i { display: none; }
  .intro { padding: 90px 22px 55px; }
  .feature-grid { grid-template-columns: 1fr; padding-bottom: 80px; }
  .feature-card, .feature-card.wide { grid-column: auto; min-height: 0; grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .feature-copy, .feature-card.wide .feature-copy { padding: 38px 30px 20px; }
  .screen-wrap, .feature-card.wide .screen-wrap { width: 78%; max-height: none; margin: 0 auto 32px; }
  .privacy { padding: 90px 25px; }
  .benefit-list article { grid-template-columns: 36px 1fr; gap: 15px; }
  .download { min-height: 560px; }
  footer { grid-template-columns: 1fr; text-align: center; }
  .footer-brand, footer > div { justify-self: center; }
  footer > div { flex-wrap: wrap; justify-content: center; }
  .support-hero { min-height: 0; padding: 75px 20px 70px; }
  .support-hero h1 { font-size: clamp(54px, 16vw, 74px); }
  .support-actions { flex-direction: column; gap: 18px; }
  .support-mark { width: min(280px, 72vw); margin-top: 18px; }
  .support-status { grid-template-columns: 1fr; gap: 18px; }
  .support-answers, .support-privacy { padding: 85px 24px; }
  .support-topic-list article { grid-template-columns: 34px 1fr; gap: 14px; }
  .support-contact { min-height: 560px; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-art img { animation: float 6s ease-in-out infinite; }
  @keyframes float { 0%,100% { transform: rotate(4deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-12px); } }
}