/* Tropf landing (EN) — tokens from apps/raine/DESIGN.md v3: Antonio (names) + Hanken Grotesk (everything else),
   the dreams under a wash and a dusk, flat glass, no rims, nothing abrupt. Structure inherited from the
   Newsleep landing (pain first, then the app, then price, then the long answer). */
:root{
  --night:#07080B; --surface:#12151B; --surface2:#1B2029;
  --ink:#EFEAE1; --ink-2:rgba(239,234,225,.86); --ink-3:rgba(239,234,225,.62);
  --glass:rgba(255,255,255,.10); --sep:rgba(255,255,255,.10); --soft:rgba(255,255,255,.07);
  --accent-ink:#0B0D11; --tropfen:#A7C9E4; --warning:#E38A3E;
  --display:"Antonio","Oswald","Arial Narrow",system-ui,sans-serif;
  --ui:"Hanken Grotesk",-apple-system,"SF Pro Text",system-ui,sans-serif;
  --r-pill:28px; --r-sheet:36px; --r-list:20px; --r-row:16px;
  --col:560px; --pad:22px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--night);color:var(--ink);font-family:var(--ui);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;text-align:center;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0 auto;letter-spacing:-0.03em;line-height:1.06;text-wrap:balance}   /* wrapped lines with air (owner, 2026-09-04: not too tight) */
h1{font-size:clamp(56px,16vw,96px)}
h2{font-size:clamp(46px,12.5vw,76px)}
h3{font-size:30px;line-height:1.08}
.sub{color:var(--ink-2);font-size:17px;line-height:1.5;max-width:32ch;margin:18px auto 0;text-wrap:pretty}
.line{font-family:var(--ui);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;opacity:.78;font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
.col{max-width:var(--col);margin:0 auto;padding:0 var(--pad)}
.muted{color:var(--ink-3)}

/* ---- the dreams: a picture, a wash, a dusk ---- */
.dream{position:relative;isolation:isolate;overflow:hidden;background:var(--night) var(--img) center 30%/cover no-repeat}
.dream>*{position:relative;z-index:3}
.dream .wash,.dream .dusk,.dream .grain{position:absolute;inset:0;pointer-events:none}
.dream .wash{z-index:1;opacity:.18;background:
  radial-gradient(60% 40% at 12% 18%, var(--w1) 0%, transparent 70%),
  radial-gradient(60% 40% at 88% 30%, var(--w2) 0%, transparent 70%),
  radial-gradient(60% 40% at 42% 88%, var(--w3) 0%, transparent 70%)}
.dream .dusk{z-index:2;background:linear-gradient(180deg, rgba(7,8,11,.70) 0%, rgba(7,8,11,.38) 26%, rgba(7,8,11,.12) 50%, rgba(7,8,11,.62) 74%, rgba(7,8,11,.94) 100%)}
.dream .grain{z-index:2;background:url(assets/grain.png);background-size:256px 256px;opacity:.16;mix-blend-mode:soft-light}
/* palettes (AppTheme.Wash) */
.soft{--w1:#D9B25A;--w2:#7FB07A;--w3:#F2E8C8}
.water{--w1:#3FA0B5;--w2:#4A5AD1;--w3:#5FB37A}
.thunder{--w1:#8A5FCF;--w2:#E38A3E;--w3:#5A6FA6}
.night{--w1:#6A4BC9;--w2:#3A5BE0;--w3:#B24A9C}
.city{--w1:#F08A3C;--w2:#E9C15A;--w3:#C84C8C}
.fields{--w1:#59B36B;--w2:#CFD24A;--w3:#3A9E8C}
.ocean{--w1:#2FB7B0;--w2:#5DCB8A;--w3:#6C63D6}
.germany{--w1:#D9B14A;--w2:#7CA85A;--w3:#E28B4A}

/* ---- wordmark + header ---- */
.top{display:flex;align-items:center;justify-content:space-between;padding:22px var(--pad) 0}
.wordmark{font-family:var(--display);font-weight:400;font-size:28px;letter-spacing:-0.03em;line-height:1;text-decoration:none;color:inherit}
.wordmark.lg{font-size:clamp(72px,22vw,120px);display:inline-block}
.top .lang{font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--ink-3);text-decoration:none}
/* the language switch (owner, 2026-09-07): one matte pill, two languages, the current one in cream */
.langs{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.langs a{display:inline-block;padding:6px 12px;border-radius:999px;font-family:var(--ui);font-size:12.5px;font-weight:600;letter-spacing:.06em;color:var(--ink-3);text-decoration:none;line-height:1.2}
.langs a:hover{color:var(--ink);text-decoration:none}
.langs a[aria-current]{background:var(--ink);color:var(--accent-ink)}
.top .lang:hover{color:var(--ink)}

/* ---- controls: flat glass, no rim ---- */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:54px;padding:0 26px;border-radius:var(--r-pill);
  font-family:var(--ui);font-weight:600;font-size:16px;text-decoration:none;color:inherit;white-space:nowrap;
  background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
  transition:transform .18s cubic-bezier(.2,.8,.2,1),background .32s ease-out}
.pill:active{transform:scale(.97)}
.pill.fill{background:var(--ink);color:var(--accent-ink);-webkit-backdrop-filter:none;backdrop-filter:none;height:58px;padding:0 30px}
.pill.fill:active{background:#fff}
.pill.wide{width:100%;max-width:360px}
.pill svg{width:18px;height:18px;flex:none}
.cta{margin-top:34px}
.cta-cap{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;opacity:.7;margin-top:14px}

/* ---- phone ---- */
.phone{position:relative;width:min(78%,320px);margin:52px auto 0;border-radius:14%/6.44%;overflow:hidden;background:var(--night);
  box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.14)}
/* the whole capture, never cropped: the phone takes its height from the image */
.phone img{width:100%;height:auto;display:block}
.phones{display:flex;justify-content:center;gap:16px;margin-top:52px;align-items:flex-start}
.phones .phone{width:48%;margin:0}
.phones .phone+.phone{margin-top:56px}
.dream .phone{margin-bottom:0}

/* ---- sections ---- */
section{padding:96px 0 104px}
section.dream{padding:104px 0 96px}

.hero{padding-top:0}
.hero .col{padding-top:64px}
.eyebrow{display:block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;opacity:.62;margin-bottom:22px}
.dream .eyebrow{opacity:.8}
.prose{color:var(--ink-2);max-width:36ch;margin:18px auto 0;font-size:17px;line-height:1.55;text-wrap:pretty}
.prose+.prose{margin-top:14px}

/* the pains — in the user's words */
.pains{list-style:none;margin:36px auto 0;padding:0;text-align:center}
.pains li{padding:22px 0;border-top:1px solid var(--sep);font-size:16px;color:var(--ink-2);line-height:1.5;max-width:34ch;margin:0 auto;text-wrap:pretty}
.pains li:last-child{border-bottom:1px solid var(--sep)}
.pains b{display:block;font-family:var(--display);font-weight:400;font-size:28px;letter-spacing:-0.02em;line-height:1.08;color:var(--ink);margin-bottom:8px}

/* the mix, as a list (flat, no rim) */
.mix{list-style:none;margin:32px auto 0;padding:4px 18px;text-align:left;border-radius:var(--r-list);background:var(--soft)}
.mix li{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--sep)}
.mix li:last-child{border-bottom:0}
.mix .nm{font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:-0.02em;line-height:1.1}
.mix .rl{font-size:13px;color:var(--ink-3);margin-top:2px}
.mix .lv{font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;opacity:.75}

/* the worlds */
.names{margin:28px auto 0;font-size:14px;letter-spacing:.01em;color:var(--ink-3);max-width:36ch;line-height:1.75}
.names b{color:var(--ink);font-weight:500}

/* price */
.price{font-family:var(--display);font-weight:400;font-size:clamp(72px,22vw,110px);letter-spacing:-0.03em;line-height:1;margin:26px auto 0}
.price small{font-family:var(--ui);font-weight:500;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.75;margin-left:12px;vertical-align:middle}
.inc{list-style:none;margin:28px auto 0;padding:0 18px;max-width:420px;text-align:left;border-radius:var(--r-list);background:var(--soft)}
.inc li{display:flex;justify-content:space-between;align-items:center;height:52px;border-bottom:1px solid var(--sep);font-size:16px}
.inc li:last-child{border-bottom:0}
.inc i{font-style:normal;opacity:.6;font-size:13px}

/* the long answer */
.why{border-top:1px solid var(--sep)}
/* the long answer sits on a picture too: a deep, even dusk so the prose reads */
.why.dream,#pains.dream{padding:104px 0 96px;background-position:center 20%}
.why.dream .dusk,#pains.dream .dusk{background:linear-gradient(180deg, rgba(7,8,11,.78) 0%, rgba(7,8,11,.74) 50%, rgba(7,8,11,.9) 100%)}
.why.dream .wash,#pains.dream .wash{opacity:.26}
.why h3{margin:56px auto 0;max-width:22ch}
.why h3+.prose{margin-top:14px}
.why .trust{margin-top:64px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--ink-3)}

/* faq */
.faq{margin-top:36px;border-radius:var(--r-list);background:var(--soft);padding:0 18px;text-align:left}
.faq details{border-bottom:1px solid var(--sep)}
.faq details:last-child{border-bottom:0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:17px 0;font-weight:600;font-size:16px;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:10px;height:10px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);opacity:.6;transition:transform .28s ease}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .a{padding:0 0 18px;color:var(--ink-2);font-size:15px;line-height:1.55;max-width:60ch}

/* close + footer */
.close{text-align:center}
footer{padding:44px var(--pad) 120px;border-top:1px solid var(--sep);color:var(--ink-3);font-size:13px}
footer .links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;margin:0 0 12px}
footer a{color:var(--ink-2);text-decoration:none}
footer a:hover{color:var(--ink)}

/* sticky CTA */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));display:flex;justify-content:center;
  transform:translateY(110%);transition:transform .48s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.dock.on{transform:none;pointer-events:auto}
.dock .pill{width:100%;max-width:420px;height:56px;border-radius:28px;background:rgba(20,24,31,.62);color:var(--ink);
  -webkit-backdrop-filter:blur(34px) saturate(150%);backdrop-filter:blur(34px) saturate(150%)}
.dock .pill b{font-weight:600}
.dock .pill span{opacity:.7;font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:uppercase}

@media (min-width:720px){
  body{font-size:18px}
  .sub{font-size:18px}
  .phone{width:min(60%,360px)}
}

/* the seam diagram */
.diagram{margin:36px auto 0;max-width:520px;padding:18px 10px 10px;border-radius:var(--r-list);background:var(--soft)}
.diagram svg{width:100%;height:auto;display:block}
.cap{margin:16px auto 0;max-width:36ch;font-size:13.5px;color:var(--ink-3);line-height:1.5}