@import url('https://cdn.jsdelivr.net/npm/@fontsource-variable/noto-sans-sc@5.3.0/index.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource-variable/noto-serif-sc@5.3.0/index.css');

@font-face {
  font-family: "Smiley Sans";
  src: url('/fonts/files/SmileySans-Oblique.ttf.woff2') format('woff2');
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  --ink: #0a0c0b;
  --paper: #f2f2ee;
  --paper-deep: #e7e8e1;
  --white: #fff;
  --muted: #767c77;
  --line: rgba(12, 18, 14, .12);
  --green: #73937d;
  --green-bright: #a8c8ae;
  --green-deep: #254333;
  --warm: #d6ad78;
  --radius: 32px;
  --max: 1180px;
  --font-display: "Noto Serif SC Variable", "Songti SC", serif;
  --font-heading: "Smiley Sans", "Noto Sans SC Variable", "PingFang SC", sans-serif;
  --font-body: "Noto Sans SC Variable", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  font-weight: 420;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 10px 14px; color: #fff; background: #000; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.section { padding: 150px 24px; }
.section-inner { width: min(100%, var(--max)); margin: 0 auto; }
.narrow { max-width: 900px; text-align: center; }
.section-label, .eyebrow { color: var(--green-deep); font-size: 13px; font-weight: 720; line-height: 1.7; letter-spacing: .15em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-family: var(--font-display); }
h2, h3 { font-family: var(--font-heading); font-weight: 400; }
h2 { margin-bottom: 36px; font-size: clamp(42px, 5.6vw, 76px); line-height: 1.22; letter-spacing: .012em; }
.lead { max-width: 760px; margin: 0 auto; color: #555b57; font-size: clamp(18px, 2vw, 23px); line-height: 2; letter-spacing: .018em; }

.site-header {
  position: fixed;
  z-index: 50;
  top: 0;
  right: 0;
  left: 0;
  color: #fff;
  transition: background .25s, border-color .25s, backdrop-filter .25s;
}
.site-header.scrolled { background: rgba(8, 10, 9, .82); border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(22px) saturate(140%); }
.nav-wrap { display: flex; width: min(calc(100% - 40px), 1280px); height: 74px; margin: auto; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 720; letter-spacing: -.02em; }
.brand img { border-radius: 10px; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.site-nav { display: flex; align-items: center; gap: 30px; font-size: 14px; }
.site-nav > a { color: rgba(255,255,255,.74); transition: color .2s; }
.site-nav > a:hover { color: #fff; }
.site-nav .nav-cta { padding: 10px 16px; color: #111; border-radius: 999px; background: #fff; font-weight: 700; }
.nav-toggle { display: none; width: 42px; height: 42px; padding: 10px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); }
.nav-toggle > span:not(.sr-only) { display: block; width: 100%; height: 1px; margin: 5px 0; background: #fff; }

.hero { position: relative; display: flex; min-height: 900px; height: 100svh; max-height: 1080px; padding: 130px max(24px, calc((100vw - 1180px) / 2)); align-items: center; overflow: hidden; color: #fff; background: #101410; }
.hero-photo { position: absolute; inset: 0; background: url('/assets/hero-couple.webp') center center / cover no-repeat; transform: scale(1.015); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,7,6,.94) 0%, rgba(5,7,6,.79) 31%, rgba(5,7,6,.23) 62%, rgba(5,7,6,.14) 100%), linear-gradient(0deg, rgba(5,7,6,.68), transparent 42%); }
.hero-content { position: relative; z-index: 2; width: min(720px, 60vw); }
.eyebrow { display: flex; color: var(--green-bright); align-items: center; gap: 10px; }
.eyebrow span { width: 28px; height: 1px; background: currentColor; }
.hero h1 { margin: 34px 0 38px; font-size: clamp(52px, 6.1vw, 84px); font-weight: 760; line-height: 1.17; letter-spacing: -.025em; }
.hero h1 em { color: #fff; font-style: normal; }
.hero-content > p { max-width: 620px; color: rgba(255,255,255,.7); font-size: clamp(18px, 1.6vw, 22px); line-height: 2; letter-spacing: .025em; }
.hero-actions { display: flex; margin-top: 44px; align-items: center; gap: 28px; }
.app-store-button { display: inline-flex; min-width: 190px; height: 62px; padding: 0 20px; align-items: center; justify-content: center; gap: 12px; color: #111; border: 1px solid rgba(255,255,255,.8); border-radius: 16px; background: #fff; box-shadow: 0 18px 42px rgba(0,0,0,.22); cursor: pointer; opacity: 1; }
.app-store-button svg { width: 25px; height: 25px; fill: currentColor; }
.app-store-button span { font-size: 16px; font-weight: 720; line-height: 1.1; text-align: left; }
.app-store-button small { display: block; margin-bottom: 3px; font-size: 10px; font-weight: 600; letter-spacing: .05em; }
.text-link { display: inline-flex; padding: 10px 0; color: rgba(255,255,255,.85); border-bottom: 1px solid rgba(255,255,255,.32); font-size: 15px; font-weight: 650; align-items: center; gap: 8px; }
.text-link.dark { color: var(--green-deep); border-color: rgba(37,67,51,.25); }
.purchase-note { display: flex; margin-top: 28px; color: rgba(255,255,255,.5); font-size: 12px; line-height: 1.6; align-items: center; gap: 14px; }
.purchase-note i { width: 3px; height: 3px; border-radius: 50%; background: var(--green-bright); }
.hero-proof { position: absolute; z-index: 2; right: max(24px, calc((100vw - 1180px) / 2)); bottom: 44px; display: flex; padding: 12px 16px 12px 12px; align-items: center; gap: 12px; border: 1px solid rgba(255,255,255,.15); border-radius: 18px; background: rgba(10,12,11,.48); backdrop-filter: blur(18px); }
.hero-proof img { border-radius: 13px; }
.hero-proof strong, .hero-proof span { display: block; }
.hero-proof strong { margin-bottom: 4px; font-size: 14px; }
.hero-proof span { color: rgba(255,255,255,.56); font-size: 11px; }

.recognition { background: var(--paper); }
.recognition h2 { margin-top: 30px; }
.steps { display: grid; margin-top: 96px; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.step-card { position: relative; min-height: 370px; padding: 42px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.52); overflow: hidden; }
.step-number { color: #929891; font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.step-icon { position: relative; width: 112px; height: 112px; margin: 42px auto 36px; }
.frame-icon { border: 2px solid #1e2922; border-radius: 20px; }
.frame-icon::before, .frame-icon::after { content: ""; position: absolute; background: var(--green); }
.frame-icon::before { top: 50%; left: 15%; width: 70%; height: 2px; }
.frame-icon::after { top: 15%; left: 50%; width: 2px; height: 70%; }
.frame-icon span { position: absolute; inset: 35%; border: 2px solid var(--green); border-radius: 50%; }
.target-icon { border: 2px dashed #1e2922; border-radius: 50%; }
.target-icon::before { content: ""; position: absolute; inset: 19%; border: 1px solid var(--green); border-radius: 50%; }
.target-icon span { position: absolute; inset: 42%; border-radius: 50%; background: var(--green-deep); box-shadow: 0 0 0 8px rgba(115,147,125,.2); }
.shutter-icon { border: 2px solid #1e2922; border-radius: 50%; box-shadow: inset 0 0 0 8px var(--paper), inset 0 0 0 10px var(--green); }
.shutter-icon span { position: absolute; inset: 38%; border-radius: 50%; background: var(--green-deep); }
.step-card h3 { margin-bottom: 16px; font-size: 26px; line-height: 1.35; letter-spacing: .015em; }
.step-card p { margin-bottom: 0; color: #686e69; font-size: 15px; line-height: 1.95; letter-spacing: .015em; }

.feature-stage { color: #fff; background: #090b0a; }
.feature-heading { display: grid; margin-bottom: 140px; align-items: end; grid-template-columns: 1.25fr .75fr; gap: 100px; }
.feature-heading .section-label, .phone-feature .feature-copy > span { color: var(--green-bright); }
.feature-heading h2 { margin-top: 30px; margin-bottom: 0; font-size: clamp(42px, 5.1vw, 70px); line-height: 1.22; }
.feature-heading > p { margin-bottom: 7px; color: rgba(255,255,255,.55); font-size: 17px; line-height: 2; letter-spacing: .015em; }
.phone-showcase { display: flex; flex-direction: column; gap: 190px; }
.phone-feature { display: grid; align-items: center; grid-template-columns: minmax(300px, 440px) minmax(300px, 1fr); gap: clamp(70px, 10vw, 170px); }
.phone-feature.reverse { grid-template-columns: minmax(300px, 1fr) minmax(300px, 440px); }
.phone-feature.reverse .phone-shell { order: 2; }
.phone-feature.reverse .feature-copy { order: 1; }
.phone-shell { position: relative; width: min(100%, 390px); margin: auto; padding: 8px; border: 1px solid rgba(255,255,255,.16); border-radius: 50px; background: #151817; box-shadow: 0 50px 120px rgba(0,0,0,.48); overflow: hidden; }
.phone-shell::after { content: ""; position: absolute; inset: 7px; pointer-events: none; border: 1px solid rgba(255,255,255,.1); border-radius: 42px; }
.phone-shell img { width: 100%; border-radius: 42px; background: #050706; }
.feature-copy { max-width: 560px; }
.feature-copy > span { font-size: 12px; font-weight: 760; line-height: 1.7; letter-spacing: .15em; }
.feature-copy h3 { margin: 26px 0 32px; font-size: clamp(38px, 5vw, 65px); line-height: 1.22; letter-spacing: .012em; }
.feature-copy p { color: rgba(255,255,255,.55); font-size: 18px; line-height: 2; letter-spacing: .015em; }

.value-section { background: var(--paper); }
.value-card { position: relative; display: flex; min-height: 620px; padding: clamp(46px, 7vw, 90px); align-items: center; border-radius: 48px; background: #dfe6dc; overflow: hidden; }
.value-copy { position: relative; z-index: 2; width: 58%; }
.value-copy h2 { margin-top: 30px; }
.value-copy > p { max-width: 580px; color: #506055; font-size: 19px; line-height: 2; letter-spacing: .015em; }
.value-pills { display: flex; margin-top: 34px; flex-wrap: wrap; gap: 10px; }
.value-pills span { padding: 10px 15px; color: var(--green-deep); border: 1px solid rgba(37,67,51,.16); border-radius: 999px; background: rgba(255,255,255,.38); font-size: 13px; font-weight: 700; }
.value-orbit { position: absolute; right: -3%; width: 48%; aspect-ratio: 1; border: 1px solid rgba(37,67,51,.2); border-radius: 50%; }
.value-orbit::before, .value-orbit::after { content: ""; position: absolute; border: 1px solid rgba(37,67,51,.16); border-radius: 50%; }
.value-orbit::before { inset: 14%; }
.value-orbit::after { inset: 30%; }
.value-orbit span { position: absolute; z-index: 2; width: 18px; height: 18px; border-radius: 50%; background: var(--green-deep); box-shadow: 0 0 0 10px rgba(37,67,51,.1); }
.value-orbit span:nth-child(1) { top: 11%; left: 47%; }
.value-orbit span:nth-child(2) { right: 6%; bottom: 31%; background: var(--warm); }
.value-orbit span:nth-child(3) { bottom: 17%; left: 15%; background: var(--green); }

.privacy-section { padding-top: 40px; background: var(--paper); }
.privacy-grid { display: grid; padding: 70px 0; align-items: center; grid-template-columns: .65fr 1.35fr; gap: 90px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.privacy-mark { display: grid; width: min(100%, 290px); aspect-ratio: 1; place-items: center; border-radius: 50%; background: #171c19; }
.privacy-mark svg { width: 45%; fill: none; stroke: var(--green-bright); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.privacy-grid h2 { margin: 28px 0 30px; font-size: clamp(38px, 5vw, 65px); }
.privacy-grid p { max-width: 700px; color: #616862; font-size: 17px; line-height: 2; letter-spacing: .015em; }
.privacy-grid .text-link { margin-top: 16px; }

.faq { background: var(--paper); }
.faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; }
.faq-heading h2 { margin-top: 30px; font-size: clamp(42px, 5vw, 68px); }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; min-height: 96px; padding: 8px 0; list-style: none; font-size: 18px; font-weight: 680; line-height: 1.7; align-items: center; justify-content: space-between; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { position: relative; width: 22px; height: 22px; margin-left: 20px; flex: 0 0 auto; }
.faq-list summary span::before, .faq-list summary span::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: var(--ink); transition: transform .2s; }
.faq-list summary span::after { transform: rotate(90deg); }
.faq-list details[open] summary span::after { transform: rotate(0); }
.faq-list details p { max-width: 650px; padding: 0 44px 32px 0; color: #666d68; line-height: 1.95; letter-spacing: .012em; }

.final-cta { padding-top: 0; background: var(--paper); }
.final-cta-inner { display: flex; min-height: 630px; padding: 80px 24px; color: #fff; border-radius: 48px; background: radial-gradient(circle at 50% 0, #28362e 0, #111512 50%, #080a09 100%); align-items: center; flex-direction: column; justify-content: center; text-align: center; }
.final-cta img { margin-bottom: 30px; border-radius: 28px; box-shadow: 0 24px 50px rgba(0,0,0,.38); }
.final-cta .section-label { color: var(--green-bright); }
.final-cta h2 { margin: 28px 0 20px; }
.final-cta p { margin-bottom: 38px; color: rgba(255,255,255,.56); font-size: 18px; line-height: 1.8; }

.site-footer { padding: 0 24px 36px; background: var(--paper); }
.footer-inner { display: grid; min-height: 120px; align-items: center; grid-template-columns: 1fr auto 1fr; border-top: 1px solid var(--line); }
.footer-links { display: flex; gap: 28px; color: #626964; font-size: 13px; }
.footer-links a:hover { color: var(--ink); }
.site-footer p { margin: 0; color: #8a8f8b; font-size: 12px; text-align: right; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity: 1; transform: none; }

/* Legal and support pages */
.subpage { min-height: 100vh; background: var(--paper); }
.subpage .site-header { position: absolute; color: #fff; background: #0b0e0c; }
.subpage-hero { padding: 170px 24px 85px; color: #fff; background: radial-gradient(circle at 80% 0, #2a3b31, #0a0d0b 55%); }
.subpage-hero .section-inner { max-width: 900px; }
.subpage-hero .section-label { color: var(--green-bright); }
.subpage-hero h1 { margin: 28px 0 26px; font-size: clamp(48px, 7vw, 82px); line-height: 1.16; letter-spacing: -.025em; }
.subpage-hero p { max-width: 700px; margin: 0; color: rgba(255,255,255,.62); font-size: 17px; line-height: 1.95; }
.document { max-width: 900px; padding-top: 90px; padding-bottom: 120px; }
.document h2 { margin: 58px 0 16px; font-size: 29px; letter-spacing: -.035em; }
.document h2:first-child { margin-top: 0; }
.document p, .document li { color: #525954; font-size: 16px; line-height: 1.9; }
.document ul { padding-left: 1.25em; }
.document a { color: var(--green-deep); border-bottom: 1px solid rgba(37,67,51,.25); }
.document .notice { padding: 24px 26px; border: 1px solid rgba(37,67,51,.14); border-radius: 18px; background: #e2e9df; }
.support-cards { display: grid; margin: 42px 0 72px; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.support-card { min-height: 190px; padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.54); }
.support-card span { color: var(--green-deep); font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.support-card h2 { margin: 18px 0 10px; font-size: 25px; }
.support-card p { margin: 0; font-size: 14px; line-height: 1.7; }

@media (max-width: 900px) {
  .section { padding: 110px 22px; }
  .nav-toggle { display: block; }
  .site-nav { position: absolute; top: 64px; right: 16px; left: 16px; display: none; padding: 18px; align-items: stretch; flex-direction: column; gap: 6px; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: rgba(10,12,11,.96); box-shadow: 0 20px 50px rgba(0,0,0,.3); }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 13px; }
  .site-nav .nav-cta { text-align: center; }
  .subpage .site-nav { position: static; display: flex; padding: 0; align-items: center; flex-direction: row; gap: 2px; border: 0; background: none; box-shadow: none; }
  .subpage .site-nav a { padding: 8px; font-size: 12px; }
  .hero { min-height: 820px; height: auto; padding-top: 150px; padding-bottom: 120px; }
  .hero-photo { background-position: 64% center; }
  .hero-shade { background: linear-gradient(90deg, rgba(5,7,6,.94), rgba(5,7,6,.68) 62%, rgba(5,7,6,.28)), linear-gradient(0deg, rgba(5,7,6,.8), transparent 60%); }
  .hero-content { width: min(700px, 88vw); }
  .hero-proof { display: none; }
  .steps { grid-template-columns: 1fr; }
  .step-card { min-height: 300px; }
  .feature-heading { grid-template-columns: 1fr; gap: 28px; }
  .phone-showcase { gap: 140px; }
  .phone-feature, .phone-feature.reverse { grid-template-columns: minmax(250px, 360px) 1fr; gap: 50px; }
  .phone-feature.reverse .phone-shell { order: 1; }
  .phone-feature.reverse .feature-copy { order: 2; }
  .value-copy { width: 72%; }
  .privacy-grid { gap: 50px; }
  .faq-layout { grid-template-columns: 1fr; gap: 45px; }
  .footer-inner { grid-template-columns: 1fr; padding-top: 30px; gap: 24px; text-align: center; }
  .footer-inner .brand, .footer-links { justify-content: center; }
  .site-footer p { text-align: center; }
}

@media (max-width: 640px) {
  :root { --radius: 25px; }
  .section { padding: 92px 18px; }
  .nav-wrap { width: calc(100% - 28px); height: 66px; }
  .hero { min-height: 780px; padding: 125px 20px 76px; align-items: flex-end; }
  .hero-photo { background-position: 68% center; }
  .hero-shade { background: linear-gradient(0deg, rgba(5,7,6,.98) 8%, rgba(5,7,6,.69) 54%, rgba(5,7,6,.14) 100%); }
  .hero-content { width: 100%; }
  .hero h1 { font-size: clamp(42px, 11vw, 52px); line-height: 1.2; }
  .hero-content > p { font-size: 16px; line-height: 1.9; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 8px; }
  .app-store-button { width: 100%; }
  .purchase-note { flex-wrap: wrap; }
  h2 { font-size: 40px; }
  .recognition h2 br { display: none; }
  .steps { margin-top: 64px; }
  .step-card { padding: 28px; }
  .feature-stage { overflow: hidden; }
  .feature-heading { margin-bottom: 96px; }
  .phone-feature, .phone-feature.reverse { display: flex; flex-direction: column; gap: 54px; }
  .phone-shell { width: 82vw; }
  .feature-copy { text-align: center; }
  .feature-copy h3 { font-size: 39px; line-height: 1.24; }
  .feature-copy p { font-size: 16px; line-height: 1.95; }
  .value-card { min-height: 650px; padding: 40px 28px; align-items: flex-start; border-radius: 30px; }
  .value-copy { width: 100%; }
  .value-copy h2 { font-size: 43px; }
  .value-copy > p { font-size: 16px; }
  .value-orbit { right: -20%; bottom: -10%; width: 90%; }
  .privacy-grid { padding: 55px 0; grid-template-columns: 1fr; gap: 40px; }
  .privacy-mark { width: 160px; }
  .privacy-grid h2 { font-size: 39px; }
  .faq-list summary { font-size: 16px; }
  .final-cta { padding-top: 0; }
  .final-cta-inner { min-height: 560px; border-radius: 30px; }
  .final-cta h2 { font-size: 43px; }
  .footer-links { flex-wrap: wrap; }
  .subpage-hero { padding-top: 140px; }
  .document { padding-top: 65px; }
  .support-cards { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}