@font-face{font-family:"DM Serif Display";src:url(fonts/dmserif.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Serif Display";src:url(fonts/dmserif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
/* Pondering home — one deep, sunlit pond. Big words, small copy, cut-out art floating in the water. */
@font-face{font-family:Newsreader;src:url(fonts/newsreader.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--deep:#0c3e3b;--pond:#0f4e4a;--water:#81d8d0;--foam:#0c3e3b;--mist:rgba(12,62,59,.74);--koi:#c73e22;
--display:Newsreader,"Iowan Old Style",Georgia,serif;--body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;color:var(--foam);font-family:var(--body);font-size:17px;line-height:1.55;
background:linear-gradient(180deg,#c9f1ec 0%,#9fe2db 18%,#81d8d0 50%,#74d1c8 100%);min-height:100vh;overflow-x:hidden}
/* sun shafts + soft caustics, fixed behind everything */
body::before{content:"";position:fixed;top:-10%;left:-20%;right:-20%;height:120vh;pointer-events:none;z-index:0;opacity:.55;
background:linear-gradient(103deg,transparent 30%,rgba(255,255,255,.45) 34%,transparent 40%),
linear-gradient(97deg,transparent 52%,rgba(255,255,255,.35) 55%,transparent 61%),
linear-gradient(108deg,transparent 66%,rgba(255,255,255,.3) 70%,transparent 76%),
linear-gradient(100deg,transparent 12%,rgba(255,255,255,.28) 15%,transparent 20%);filter:blur(6px)}
body::after{content:"";position:fixed;left:0;right:0;bottom:-20vh;height:60vh;pointer-events:none;z-index:0;
background:radial-gradient(60% 50% at 20% 100%,rgba(40,150,144,.25),transparent 70%),radial-gradient(50% 45% at 85% 100%,rgba(40,150,144,.22),transparent 70%)}
header,main,footer{position:relative;z-index:1}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--deep);outline-offset:3px;border-radius:8px}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.05;text-wrap:balance;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(56px,9vw,104px)}
h2{font-size:clamp(38px,5.6vw,64px)}
h3{font-family:var(--body);font-size:19px;font-weight:650;letter-spacing:0}
em{font-style:italic;color:var(--koi)}
p{margin:0}
.wrap{width:min(1120px,100% - 40px);margin:0 auto}
.c{text-align:center}
.sub{color:var(--mist);font-size:clamp(17px,1.6vw,19px);max-width:34em;margin:18px auto 0}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.brand{font-family:"DM Serif Display",Georgia,serif;font-weight:400;display:flex;align-items:center;gap:10px;text-decoration:none;font-size:24px}
.brand img{width:34px;height:34px;border-radius:9px}
.top nav{display:flex;align-items:center;gap:26px;font-size:15px;font-weight:550}
.top nav a{text-decoration:none;color:var(--mist)}.top nav a:hover{color:var(--deep)}
@media (max-width:680px){.top nav a:not(.pill){display:none}}
.pill{background:var(--deep);color:#fff!important;padding:9px 16px;border-radius:99px}

/* App Store style badge */
.badge{display:inline-flex;align-items:center;gap:10px;background:#000;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.35);
border-radius:12px;padding:9px 18px 9px 14px;line-height:1.1;transition:transform .2s}
.badge:hover{transform:translateY(-2px)}
.badge svg{width:26px;height:26px;fill:#fff}
.badge small{display:block;font-size:11px;opacity:.85}
.badge b{display:block;font-size:20px;font-weight:600;letter-spacing:-.01em}
.proof{margin-top:18px;font-size:13.5px;color:var(--mist)}
.proof b{color:var(--foam);font-weight:600}

/* hero */
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:24px;min-height:min(78vh,720px);padding:20px 0 60px}
.hero-in .sub{margin:22px 0 30px}
@media (max-width:820px){.hero-in{grid-template-columns:1fr;text-align:center;min-height:0;padding-top:10px}.hero-in .sub{margin:18px auto 26px}.scene{order:-1}}
.scene{position:relative;aspect-ratio:1;max-width:520px;width:100%;margin:0 auto}
.scene .glow{position:absolute;inset:18% 8% 8%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.7),rgba(255,255,255,.2) 60%,transparent);filter:blur(4px)}
.scene .ring{position:absolute;left:50%;top:58%;border:1.5px solid rgba(255,255,255,.75);border-radius:50%;transform:translate(-50%,-50%) scaleY(.55);animation:ripple 6s ease-out infinite;opacity:0}
.scene .ring:nth-of-type(2){animation-delay:2s}.scene .ring:nth-of-type(3){animation-delay:4s}
@keyframes ripple{0%{width:12%;height:12%;opacity:.9}100%{width:92%;height:92%;opacity:0}}
.scene .padimg{position:absolute;width:36%;right:6%;top:12%;animation:bob 7s ease-in-out infinite}
.scene .koiC{position:absolute;inset:0;width:100%;height:100%}
.scene .swim img{position:absolute;height:40%;width:auto;left:41%;top:9%;transform:rotate(-90deg);filter:drop-shadow(0 26px 22px rgba(0,30,28,.35))}
@keyframes swim{to{transform:rotate(-360deg)}}
@keyframes bob{50%{transform:translateY(-8px) rotate(4deg)}}
.spark{position:absolute;width:14px;height:14px;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
filter:drop-shadow(0 0 6px #fff);animation:tw 3.2s ease-in-out infinite}
@keyframes tw{50%{opacity:.25;transform:scale(.6)}}

section{padding:clamp(80px,12vw,150px) 0 0}

/* problem vs calm */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:64px;max-width:900px;margin-left:auto;margin-right:auto}
@media (max-width:700px){.duo{grid-template-columns:1fr;gap:56px}}
.duo figure{margin:0;text-align:center}
.art{height:260px;display:grid;place-items:center;position:relative}
.art.bad::before{content:"";position:absolute;width:250px;height:250px;border-radius:50%;
background:repeating-radial-gradient(circle,transparent 0 16px,rgba(12,62,59,.16) 17px 18px);animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.art.bad img{width:150px;position:relative;filter:grayscale(.4) drop-shadow(0 20px 24px rgba(0,40,38,.3))}
.art.good::before{content:"";position:absolute;width:250px;height:250px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.75),rgba(255,255,255,.15) 70%,transparent)}
.art.good img{width:210px;position:relative;transform:rotate(-35deg);filter:drop-shadow(0 22px 18px rgba(0,30,28,.35))}
.duo h3{margin-top:18px;display:flex;justify-content:center;align-items:center;gap:8px}
.duo h3 .x{color:var(--koi)}.duo h3 .v{color:#0f6b64}
.duo p{color:var(--mist);margin-top:6px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:64px}
@media (max-width:760px){.steps{grid-template-columns:1fr;gap:44px}}
.steps li{list-style:none;text-align:center}
.steps ol{padding:0}
.steps img{width:min(220px,70%);margin:0 auto 20px;border-radius:50%;box-shadow:0 0 0 10px rgba(255,255,255,.35),0 24px 40px rgba(0,60,56,.18)}
.steps p{color:var(--mist);margin-top:6px}

/* cheer */
.cheer{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media (max-width:760px){.cheer{grid-template-columns:1fr;text-align:center}}
.cheer .sub{margin-left:0}
@media (max-width:760px){.cheer .sub{margin-left:auto}}
.bubble-art{position:relative;height:360px}
.bubble{position:absolute;left:50%;top:0;transform:translateX(-50%);width:min(320px,86%);padding:22px 24px;border-radius:26px;text-align:center;
background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
font-family:var(--display);font-size:25px;line-height:1.25;box-shadow:0 20px 50px rgba(0,60,56,.15)}
.bubble small{display:block;font-family:var(--body);font-size:13px;color:var(--mist);margin-top:10px;letter-spacing:.06em;text-transform:uppercase}
.bubble-art img{position:absolute;height:190px;width:auto;left:50%;bottom:0;transform:translateX(-50%) rotate(14deg);filter:drop-shadow(0 22px 18px rgba(0,30,28,.35))}

/* collection */
.coll{display:grid;grid-template-columns:repeat(7,1fr);gap:18px;margin-top:60px}
@media (max-width:900px){.coll{grid-template-columns:repeat(4,1fr)}}
@media (max-width:520px){.coll{grid-template-columns:repeat(3,1fr);gap:12px}}
.coll div{aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.6),rgba(255,255,255,.15) 70%,transparent);display:grid;place-items:center;transition:transform .3s}
.coll div:hover{transform:translateY(-6px) scale(1.04)}
.coll img{width:78%;filter:drop-shadow(0 14px 12px rgba(0,60,56,.25))}
.coll .k img{width:70%;transform:rotate(-40deg)}

/* stats */
.won{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media (max-width:760px){.won{grid-template-columns:1fr;text-align:center}}
.won .card{position:relative;max-width:420px;margin:0 auto}
.won .card>img:first-child{border-radius:28px;box-shadow:0 30px 70px rgba(0,60,56,.25);transform:rotate(-2deg)}
.won .card .y{position:absolute;width:52%;right:-18%;bottom:-16%;transform:rotate(-30deg);filter:drop-shadow(0 20px 18px rgba(0,60,56,.3))}
@media (max-width:760px){.won .card .y{right:-6%}.won .sub{margin-left:auto}}
.won .sub{margin-left:0}

/* looks */
.looks{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 18px;margin-top:56px}
.looks figure{margin:0;text-align:center;width:104px;font-size:14px;color:var(--mist)}
.looks img{width:104px;height:104px;object-fit:cover;border-radius:50%;margin-bottom:8px;box-shadow:0 0 0 3px rgba(255,255,255,.8),0 14px 26px rgba(0,60,56,.2)}
.looks .sep{width:100%;height:0}
.price{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:44px}
.price span{background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.7);border-radius:99px;padding:10px 18px;font-size:15px;color:var(--mist)}
.price b{color:var(--foam);font-size:17px;margin-right:4px}
.fine{margin-top:14px;font-size:13.5px;color:var(--mist)}

/* glance chips */
.glance{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:48px auto 0;padding:0;max-width:900px}
.glance div{background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.75);border-radius:20px;padding:16px 20px;text-align:center;min-width:150px}
.glance dt{font-family:var(--display);font-size:28px;line-height:1.1}
.glance dd{margin:4px 0 0;font-size:13.5px;color:var(--mist)}

/* faq */
.faq{max-width:760px;margin:48px auto 0}
.faq details{border-bottom:1px solid rgba(12,62,59,.16);padding:18px 4px}
.faq summary{font-size:18px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--deep);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin-top:10px;color:var(--mist)}

/* end */
.end{padding-bottom:110px}
.end .scene-s{width:200px;margin:0 auto 26px;position:relative}
.end .scene-s img{transform:rotate(-30deg);filter:drop-shadow(0 22px 18px rgba(0,30,28,.35))}
.end .badge{margin-top:30px}

footer{border-top:1px solid rgba(12,62,59,.14);padding:34px 0 46px;font-size:14px;color:var(--mist)}
footer .row{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:20px}
footer a{text-decoration:none}footer a:hover{color:var(--deep)}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}
@media (max-width:760px){.won .card{margin-bottom:70px;max-width:330px}.won .card .y{width:40%;right:-4%;bottom:-20%}}
@media (max-width:520px){.looks{gap:14px 8px}.looks figure{width:62px;font-size:11.5px;line-height:1.25}.looks img{width:62px;height:62px}}
h1 .kick{display:block;font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin-bottom:14px}
.hero-in h1{font-size:clamp(44px,6.6vw,84px)}
/* hero: the splash-screen koi, hovering gently while ripples spread */
.scene .logoK{position:absolute;left:12%;top:10%;width:76%;height:auto;filter:drop-shadow(0 22px 26px rgba(10,70,62,.2));animation:hover 6s ease-in-out infinite}
.scene .ring{top:46%}
@keyframes hover{0%,100%{transform:translateY(0) scale(1) rotate(0)}50%{transform:translateY(-10px) scale(1.02) rotate(-.8deg)}}
@media (prefers-reduced-motion:reduce){.scene .logoK,.scene .ring{animation:none}}
em{color:#2a8c84}
/* hero v3: the kohaku koi (same size as the swimming version), hovering gently; lily pad stays still */
.scene .koiS{position:absolute;left:30%;top:14%;height:70%;width:auto;filter:drop-shadow(0 26px 22px rgba(0,30,28,.33));animation:hover 6s ease-in-out infinite}
.scene .padimg.still{animation:none}
.scene .ring{top:52%;animation-name:ripple2}
@keyframes ripple2{0%{width:16%;height:16%;opacity:.9}100%{width:130%;height:130%;opacity:0}}
.scene{overflow:visible}
@media (prefers-reduced-motion:reduce){.scene .koiS{animation:none}}
/* hero v4: the flowing splash-pose kohaku, a still lily pad, and a soft glow */
.scene .koiF{position:absolute;left:14%;top:6%;height:88%;width:auto;filter:drop-shadow(0 24px 22px rgba(0,40,36,.28));animation:hover 6s ease-in-out infinite;z-index:2}
.scene .padimg.still{right:2%;top:10%;width:34%;z-index:1}
.scene .glow{inset:10% 4% 4% 0;background:radial-gradient(closest-side,rgba(255,252,232,.85),rgba(255,250,225,.35) 45%,rgba(255,255,255,0) 75%);filter:blur(10px);animation:glow 7s ease-in-out infinite}
@keyframes glow{50%{opacity:.75;transform:scale(1.05)}}
.scene .beam{position:absolute;top:-30%;left:30%;width:22%;height:150%;background:linear-gradient(180deg,rgba(255,255,240,.0),rgba(255,255,240,.32) 35%,rgba(255,255,240,0) 85%);transform:rotate(18deg);filter:blur(18px);pointer-events:none;animation:beam 9s ease-in-out infinite}
.scene .beam.b2{left:58%;width:14%;transform:rotate(22deg);animation-delay:-4s;opacity:.7}
@keyframes beam{50%{opacity:.45}}
.scene .spark{filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px rgba(255,250,220,.9));z-index:3}
.scene .ring{top:50%;left:46%}
@media (prefers-reduced-motion:reduce){.scene .koiF,.scene .glow,.scene .beam{animation:none}}
.scene .koiF{left:2%;top:12%;width:80%;height:auto}
.scene .padimg.still{right:0;top:4%;width:32%}
.scene .padimg.still{right:4%;top:10%}
.scene .glow{inset:8% 0 0 -4%;background:radial-gradient(closest-side,rgba(255,253,236,.95),rgba(255,251,226,.5) 42%,rgba(255,255,255,0) 78%);filter:blur(8px)}
.scene .beam{background:linear-gradient(180deg,rgba(255,255,244,0),rgba(255,255,244,.55) 35%,rgba(255,255,244,0) 85%)}
.scene .spark{filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 12px #fff) drop-shadow(0 0 22px rgba(255,248,215,.9))}

/* headings: DM Serif Display, matching the app splash */
:root{--display:"DM Serif Display","Iowan Old Style",Georgia,serif}
h1,h2{font-weight:400;letter-spacing:-.005em}
/* compare table + privacy */
.cmp{max-width:880px;margin:48px auto 0;text-align:left;border-radius:24px;overflow:hidden;background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.75);backdrop-filter:blur(10px)}
.cmp .r{display:grid;grid-template-columns:1fr 1.25fr 1.6fr;align-items:center}
.cmp .r+.r{border-top:1px solid rgba(12,62,59,.08)}
.cmp .r>*{padding:16px 20px;font-size:15.5px;line-height:1.4}
.cmp .r>span{color:var(--mist)}
.cmp b{font-weight:650;color:var(--foam)}
.cmp .us{background:rgba(255,255,255,.55);color:var(--foam)!important;font-weight:550;height:100%;display:flex;align-items:center}
.cmp .h>*{font-size:12.5px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;padding-top:18px;padding-bottom:14px}
.cmp .h .us{color:#1f7d74!important}
.priv{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:900px;margin:48px auto 0}
.priv div{background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.75);border-radius:22px;padding:24px 20px;text-align:center}
.priv i{font-style:normal;font-size:28px;display:block;margin-bottom:10px}
.priv p{color:var(--mist);margin:6px 0 0;font-size:15px}
#privacy .fine{margin-top:22px}
#privacy .fine a{color:inherit}
@media (max-width:700px){
 .cmp .r{grid-template-columns:1fr 1fr}
 .cmp .r>b{grid-column:1/-1;padding-bottom:0;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#1f7d74}
 .cmp .h>:first-child{display:none}
 .cmp .r>*{padding:12px 14px;font-size:14.5px}
 .priv{grid-template-columns:1fr}
}
/* round 2 fixes */
.coll{grid-template-columns:repeat(7,minmax(0,1fr))}
@media (max-width:900px){.coll{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:520px){.coll{grid-template-columns:repeat(3,minmax(0,1fr))}}
.coll img{max-width:100%;height:auto}
.coll img[alt="Stone lantern"]{width:52%}
.won .card .y{right:auto;left:-20%;bottom:-14%;width:40%;transform:rotate(25deg)}
@media (max-width:760px){.won .card .y{left:-10%;right:auto;width:34%;bottom:-18%}}
/* lighter type for the table and FAQ */
.cmp b{font-weight:500}
.cmp .us{font-weight:450}
.cmp .h>*{font-weight:500}
.cmp .r>*{font-size:15px}
.faq summary{font-weight:450}
.cmp .r{grid-template-columns:1.2fr 1.1fr 1fr}
.cmp{max-width:760px}
.won .card .y{left:auto;right:-16%;bottom:-30%;width:36%;transform:rotate(-35deg);z-index:2}
.won .card{margin-bottom:90px}
@media (max-width:760px){.won .card .y{right:-8%;left:auto;width:30%;bottom:-28%}}
@media (max-width:700px){.cmp .r{grid-template-columns:1fr 1fr}}