/* Nadelos site stylesheet. Dark, single theme by design. Generated pages reference this file with a version query. */
:root{
  --bg:#0a0a0b; --bg2:#111113; --card:#141416; --ink:#f2f3f5; --muted:#9aa0a6; --soft:#d6d8dc; --line:#232326; --white:#ffffff; --gold:#F5D14E;
  --r:32px; --r2:40px;
  --display:"Inter Tight","Inter",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --g1:#F2A65A; --g2:#B8541B;
  --mx:50%; --my:20%;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; background:var(--bg)}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit; text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #fff; outline-offset:3px; border-radius:6px}
img{max-width:100%; height:auto; display:block}
.wrap{max-width:1180px; margin:0 auto; padding:0 20px}
@media(min-width:900px){ .wrap{padding:0 40px} }
h1,h2,h3{font-family:var(--display); margin:0; letter-spacing:-.02em; text-wrap:balance}
h2{font-size:clamp(30px,4.2vw,50px); line-height:1.06; font-weight:700}
h3{font-size:22px; font-weight:700}
p{margin:0 0 1em}
.muted{color:var(--muted)}
.soft{color:var(--soft)}
.eyebrow{font-size:14px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:14px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:999px; background:var(--white); color:#0a0a0b; font-weight:600; font-size:15px; transition:transform .25s ease, background .25s ease, border-color .25s ease}
.btn:hover{transform:translateY(-2px)}
.btn .arr{display:inline-block; transition:transform .25s ease}
.btn:hover .arr{transform:translateX(3px)}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid #3a3a3f}
.btn.ghost:hover{border-color:#8a8a92}
.btn.soon{background:#1e1e22; color:var(--muted); cursor:default}
.btn.soon:hover{transform:none}

/* Navigation */
header.nav{position:sticky; top:0; z-index:20; background:rgba(10,10,11,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .3s ease}
header.nav.scrolled{border-bottom-color:var(--line)}
header.nav .wrap{display:flex; align-items:center; gap:28px; height:68px}
.brand{font-family:var(--display); font-weight:800; font-size:24px; letter-spacing:-.03em; display:inline-flex; align-items:center; gap:10px}
.brand .mark{width:30px; height:30px; border-radius:7px; flex:none; transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.brand:hover .mark{transform:rotate(-8deg) scale(1.06)}
/* On a phone the top bar names the app you are looking at, not the studio. */
.brand .wordapp{display:none}
@media(max-width:760px){ .brand .word{display:none} .brand .wordapp{display:inline} }
nav.links{display:none; gap:26px; font-weight:500; color:var(--muted)}
nav.links a{transition:color .2s ease}
nav.links a:hover,nav.links a[aria-current="page"]{color:var(--ink)}
@media(min-width:760px){ nav.links{display:flex} }
.nav-cta{margin-left:auto; background:var(--white); color:#0a0a0b; font-weight:600; padding:10px 18px; border-radius:999px; font-size:15px; transition:transform .25s ease}
.nav-cta:hover{transform:translateY(-2px)}

/* Home hero */
.hero{padding:clamp(56px,9vw,120px) 0 0; text-align:center; position:relative; overflow:hidden; isolation:isolate}
.hero h1{font-size:clamp(44px,8.2vw,88px); line-height:.98; font-weight:800; max-width:14ch; margin:0 auto}
.hero p.lede{font-size:clamp(18px,2vw,22px); color:var(--muted); max-width:52ch; margin:24px auto 0}
.hero .cta{display:inline-flex; gap:12px; margin-top:32px; flex-wrap:wrap; justify-content:center}

.fan{margin:clamp(40px,7vw,72px) auto 0; display:flex; justify-content:center; align-items:flex-end; height:clamp(300px,42vw,520px); position:relative; isolation:isolate}
.fan-card{width:clamp(120px,17vw,220px); aspect-ratio:1290/2796; border-radius:clamp(16px,2.4vw,28px); box-shadow:0 30px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06); transform:rotate(var(--r)) translateY(var(--y)); margin:0 -6px; transform-origin:50% 120%; transition:transform .35s cubic-bezier(.2,.8,.2,1); animation:settle .7s cubic-bezier(.2,.8,.2,1) both; overflow:hidden; background:#1a1a1d}
.fan-card img{width:100%; height:100%; object-fit:cover; object-position:top center}
.fan-card:nth-child(1){animation-delay:.05s} .fan-card:nth-child(2){animation-delay:.1s} .fan-card:nth-child(3){animation-delay:.15s} .fan-card:nth-child(4){animation-delay:.2s} .fan-card:nth-child(5){animation-delay:.25s} .fan-card:nth-child(6){animation-delay:.3s}
.fan-card:hover{transform:rotate(var(--r)) translateY(calc(var(--y) - 16px)) scale(1.03); z-index:2}
@keyframes settle{from{opacity:0; transform:rotate(var(--r)) translateY(calc(var(--y) + 40px))} to{opacity:1; transform:rotate(var(--r)) translateY(var(--y))}}
.fan::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:38%; background:linear-gradient(to bottom, transparent, var(--bg)); pointer-events:none; z-index:3}
@media(max-width:600px){ .fan-card:nth-child(1),.fan-card:nth-child(6){display:none} .fan{height:300px} .fan-card{width:clamp(96px,26vw,140px); margin:0 -10px} }

/* Ticker */
.ticker-wrap{position:relative; margin-top:8px; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.ticker{overflow:hidden; padding:18px 0; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker.dragging{cursor:grabbing}
.ticker-track{display:flex; gap:14px; width:max-content; will-change:transform; transform:translate3d(0,0,0)}
.tick{display:flex; align-items:center; gap:12px; padding:10px 18px 10px 10px; border-radius:999px; background:linear-gradient(135deg,var(--g1),var(--g2)); color:#0a0a0b; white-space:nowrap; transition:transform .25s ease; -webkit-user-drag:none; flex:none}
.tick:hover{transform:translateY(-2px)}
.tick img{width:40px; height:40px; border-radius:11px; pointer-events:none; -webkit-user-drag:none}
.tick span{display:flex; flex-direction:column; line-height:1.15; font-size:14px}
.tick b{font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:-.01em}

/* Sections and panels */
section{padding:clamp(64px,9vw,120px) 0 0}
.split{display:grid; gap:24px; grid-template-columns:1fr}
@media(min-width:900px){ .split{grid-template-columns:1.1fr .9fr; gap:56px; align-items:start} }
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--r2); padding:clamp(24px,4vw,44px); position:relative; overflow:hidden}
.panel.glow::before{content:""; position:absolute; width:420px; height:420px; right:-160px; top:-200px; border-radius:50%; background:radial-gradient(circle, rgba(255,152,127,.35), transparent 65%); pointer-events:none}
.panel.glow.blue::before{background:radial-gradient(circle, rgba(100,125,238,.35), transparent 65%)}
.panel.glow.app::before{background:radial-gradient(circle, color-mix(in srgb, var(--g1) 45%, transparent), transparent 65%)}
.panel p{color:var(--soft); font-size:18px; max-width:56ch}
.panel p:last-child{margin-bottom:0}

.facts{display:grid; grid-template-columns:1fr; gap:14px; margin-top:28px}
@media(min-width:640px){ .facts{grid-template-columns:repeat(3,1fr)} }
.fact{background:var(--card); border:1px solid var(--line); border-radius:24px; padding:22px; transition:transform .3s ease, border-color .3s ease}
.fact:hover{transform:translateY(-3px); border-color:#33343a}
.fact b{display:block; font-family:var(--display); font-size:clamp(28px,3.6vw,40px); font-weight:800; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums}
.fact span{display:block; color:var(--muted); margin-top:8px; font-size:14px}

/* App grid on the home page */
.grid{display:grid; grid-template-columns:1fr; gap:20px; margin-top:32px}
@media(min-width:700px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1080px){ .grid{grid-template-columns:repeat(3,1fr)} }
.app{background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease}
.app:hover{transform:translateY(-6px); border-color:#33343a}
.app-top{background:linear-gradient(160deg,var(--g1),var(--g2)); padding:28px 28px 0; height:280px; overflow:hidden; display:flex; justify-content:center; align-items:flex-start; position:relative}
.app-top::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 70%); transform:translateX(-120%); transition:transform .9s ease; pointer-events:none}
.app:hover .app-top::after{transform:translateX(120%)}
.app-top .shot{width:68%; max-width:230px; aspect-ratio:1290/2000; border-radius:22px 22px 0 0; height:100%; box-shadow:0 20px 40px -18px rgba(0,0,0,.7); display:block; transform:translateY(8px); transition:transform .45s cubic-bezier(.2,.8,.2,1); overflow:hidden; background:#1a1a1d}
.app-top .shot img{width:100%; height:100%; object-fit:cover; object-position:top center}
.app:hover .app-top .shot{transform:translateY(0)}
.app-body{padding:22px 24px 24px; display:flex; flex-direction:column; gap:14px; flex:1}
.app-head{display:flex; gap:14px; align-items:center}
.app-head img{width:48px; height:48px; border-radius:12px}
.app-head h3{font-size:22px; font-weight:700}
.app-head .sub{margin:0; color:var(--muted); font-size:14px}
.app dl{margin:0; display:grid; gap:8px}
.app dt{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600}
.app dd{margin:0 0 4px; font-size:15px; color:var(--soft)}
.app-links{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:6px}
.app-links .btn{padding:9px 14px; font-size:14px}

dl.facts-list{display:grid; grid-template-columns:1fr; gap:10px 24px; margin:20px 0 0}
@media(min-width:640px){ dl.facts-list{grid-template-columns:max-content 1fr} }
dl.facts-list dt{color:var(--muted); font-size:14px; padding-top:3px}
dl.facts-list dd{margin:0}

/* Legal teaser on the home page and legal pages */
.legal-teaser{display:grid; gap:16px; grid-template-columns:1fr; margin-top:28px}
@media(min-width:760px){ .legal-teaser{grid-template-columns:1fr 1fr} }
.legal-teaser .panel{display:flex; flex-direction:column; gap:10px}
.legal-teaser .panel p{font-size:16px}
.legal-teaser .panel a.more{margin-top:auto; font-weight:600}
.legal-page{max-width:760px}
.legal-page h1{font-size:clamp(36px,6vw,64px); line-height:1; font-weight:800; margin-top:clamp(40px,7vw,80px)}
.legal-page h2{font-size:24px; margin-top:40px}
.legal-page h3{font-size:19px; margin-top:26px}
.legal-page p,.legal-page li{font-size:16px; color:#cfd2d6}
.legal-page ul{padding-left:20px}
.effective{font-size:14px; color:var(--muted); margin-top:12px}

/* App page */
.ah{padding:clamp(48px,7vw,96px) 0 0; position:relative; overflow:hidden; isolation:isolate}
.ah .wrap{display:grid; gap:36px; grid-template-columns:1fr; align-items:center}
@media(min-width:900px){ .ah .wrap{grid-template-columns:1.15fr .85fr; gap:56px} }
.ah .crumbs{font-size:14px; color:var(--muted); display:flex; gap:8px; align-items:center; margin-bottom:18px}
.ah .crumbs a:hover{color:var(--ink)}
.ah .appline{display:flex; align-items:center; gap:14px; margin-bottom:22px}
.ah .appline img{width:56px; height:56px; border-radius:14px; box-shadow:0 10px 30px -12px rgba(0,0,0,.8)}
.ah .appline b{font-family:var(--display); font-size:20px; font-weight:700; display:block; letter-spacing:-.01em}
.ah .appline span{color:var(--muted); font-size:14px; display:block}
.ah h1{font-size:clamp(38px,5.6vw,68px); line-height:1.02; font-weight:800; max-width:16ch}
.ah p.lede{font-size:clamp(17px,1.6vw,20px); color:var(--muted); max-width:54ch; margin:22px 0 0}
.ah .cta{display:flex; gap:12px; margin-top:30px; flex-wrap:wrap}
.ah .note{font-size:13px; color:var(--muted); margin-top:14px}
.phone{position:relative; width:min(320px,70vw); margin:0 auto; aspect-ratio:1290/2796; border-radius:clamp(28px,5vw,44px); overflow:hidden; box-shadow:0 50px 100px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08); background:#1a1a1d; animation:float 7s ease-in-out infinite; transform:translateY(0)}
.phone img{width:100%; height:100%; object-fit:cover; object-position:top center}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1.2deg)} 50%{transform:translateY(-12px) rotate(1.2deg)}}
.phone-wrap{position:relative; padding:24px 0}
.phone-wrap::before{content:""; position:absolute; inset:10% 5%; background:linear-gradient(160deg,var(--g1),var(--g2)); filter:blur(60px); opacity:.45; border-radius:50%; z-index:-1}

.pair{display:grid; gap:16px; grid-template-columns:1fr; margin-top:36px}
@media(min-width:720px){ .pair{grid-template-columns:1fr 1fr} }
.pair .panel{padding:26px 28px}
.pair .k{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:8px}
.pair p{font-size:17px}

.feat{display:grid; gap:28px; grid-template-columns:1fr; align-items:center; padding:clamp(40px,6vw,80px) 0 0}
@media(min-width:860px){ .feat{grid-template-columns:1fr 1fr; gap:64px} .feat.flip .feat-text{order:2} .feat.flip .feat-shot{order:1} }
.feat h2{font-size:clamp(28px,3.4vw,42px)}
.feat p{color:var(--soft); font-size:18px; max-width:52ch; margin-top:16px}
.feat p:last-child{margin-bottom:0}
.feat-shot{position:relative; border-radius:var(--r); overflow:hidden; background:linear-gradient(160deg,var(--g1),var(--g2)); padding:36px 36px 0; display:flex; justify-content:center; min-height:320px; max-height:520px}
.feat-shot img{width:min(280px,64%); border-radius:26px 26px 0 0; box-shadow:0 30px 60px -24px rgba(0,0,0,.8); transform:translateY(10px); transition:transform .5s cubic-bezier(.2,.8,.2,1); object-fit:cover; object-position:top center; align-self:flex-end}
.feat-shot:hover img{transform:translateY(0)}
.feat-shot::after{content:""; position:absolute; left:0; right:0; bottom:0; height:22%; background:linear-gradient(to bottom, transparent, rgba(0,0,0,.28)); pointer-events:none}

.list-cols{display:grid; gap:16px; grid-template-columns:1fr; margin-top:28px}
@media(min-width:760px){ .list-cols{grid-template-columns:1fr 1fr} }
.who{background:var(--card); border:1px solid var(--line); border-radius:24px; padding:22px 24px; font-size:16px; color:var(--soft); display:flex; gap:14px; align-items:flex-start; transition:transform .3s ease, border-color .3s ease}
.who:hover{transform:translateY(-3px); border-color:#33343a}
.who .dot{flex:none; width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg,var(--g1),var(--g2)); margin-top:9px}

.faq{margin-top:28px; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; padding:20px 0; font-family:var(--display); font-weight:700; font-size:19px; display:flex; justify-content:space-between; gap:20px; align-items:center; letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-weight:500; font-size:24px; color:var(--muted); transition:transform .3s ease; flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 22px; color:var(--soft); font-size:16px; max-width:64ch}
.faq .a p:last-child{margin-bottom:0}

.others{margin-top:clamp(64px,9vw,120px)}
.others .row{display:grid; gap:12px; grid-template-columns:repeat(2,1fr); margin-top:24px}
@media(min-width:760px){ .others .row{grid-template-columns:repeat(5,1fr)} }
.others a{display:flex; flex-direction:column; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:16px; transition:transform .3s ease, border-color .3s ease}
.others a:hover{transform:translateY(-4px); border-color:#33343a}
.others a img{width:40px; height:40px; border-radius:11px}
.others a b{font-family:var(--display); font-weight:700; font-size:16px}
.others a span{color:var(--muted); font-size:13px; line-height:1.3}

.trust{display:grid; gap:14px; grid-template-columns:1fr; margin-top:16px}
@media(min-width:820px){ .trust{grid-template-columns:repeat(3,1fr)} }
.trust .who{flex-direction:column; gap:10px; align-items:flex-start}
.trust .who b{font-family:var(--display); font-size:17px; font-weight:700; color:var(--ink); letter-spacing:-.01em}
.trust .who span{font-size:15px}
/* Pull quotes: the studio's own lines about the app. No stars, no names, never a testimonial. */
.quotes{padding-top:clamp(40px,6vw,72px)}
.pulls{display:grid; gap:16px; grid-template-columns:1fr; margin-top:28px}
@media(min-width:860px){ .pulls{grid-template-columns:repeat(3,1fr)} .pull.wide{grid-column:span 2} .pull.wide blockquote p{font-size:clamp(22px,2.4vw,28px)} }
.pull{margin:0; position:relative; background:var(--card); border:1px solid var(--line); border-radius:24px; padding:26px 28px 28px; overflow:hidden; transition:transform .3s ease, border-color .3s ease}
.pull::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,var(--g1),var(--g2))}
.pull:hover{transform:translateY(-3px); border-color:#33343a}
.pull .qm{font-size:26px; line-height:1; display:block; margin-bottom:14px; background:linear-gradient(135deg,var(--g1),var(--g2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.pull blockquote{margin:0}
.pull figcaption{margin-top:14px; font-family:var(--body); font-size:13px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:var(--g1); opacity:.7}
.pull blockquote p{margin:0; font-family:var(--display); font-weight:600; font-size:clamp(19px,1.9vw,22px); line-height:1.28; letter-spacing:-.01em; color:var(--ink); text-wrap:balance}
.rating{display:inline-flex; align-items:center; gap:10px; margin-top:18px; padding:9px 16px 9px 14px; border:1px solid var(--line); border-radius:999px; background:var(--card); font-size:14px; color:var(--muted); transition:border-color .3s ease}
.rating:hover{border-color:#33343a}
.rating .stars{color:var(--gold); letter-spacing:2px; font-size:14px; line-height:1}
.rating b{color:var(--ink); font-weight:600}
.revs{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); margin-top:28px}
.rev{margin:0; text-align:center; background:linear-gradient(165deg,#15161c,#101116 60%,var(--card)); border:1px solid var(--line); border-radius:28px; padding:30px 28px 26px; display:flex; flex-direction:column; gap:18px; transition:transform .3s ease, border-color .3s ease}
.rev:hover{transform:translateY(-3px); border-color:#33343a}
.rev .stars{font-size:22px; letter-spacing:4px; color:var(--gold); line-height:1}
.rev blockquote{margin:0}
.rev blockquote p{margin:0; color:var(--ink); font-size:clamp(17px,1.7vw,19px); line-height:1.4; text-wrap:pretty}
.rev figcaption{margin-top:auto; padding-top:8px; display:grid; gap:4px}
.rev figcaption b{font-family:var(--display); font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--muted)}
.rev figcaption span{color:#6f757c; font-size:12.5px}
.midcta{margin-top:clamp(40px,6vw,72px)}
.midcta .panel{display:flex; flex-direction:row; gap:22px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:26px clamp(24px,4vw,40px)}
.midcta .cta{flex:none}
.midcta p{margin:0; font-family:var(--display); font-size:clamp(19px,2.2vw,24px); font-weight:600; letter-spacing:-.01em; max-width:34ch}
.cta-band{margin-top:clamp(64px,9vw,120px)}
.cta-band .panel{text-align:center; padding:clamp(36px,6vw,64px)}
.cta-band h2{margin:0 auto; max-width:20ch}
.cta-band p{margin:14px auto 0}
.cta-band .cta{display:inline-flex; gap:12px; margin-top:26px; flex-wrap:wrap; justify-content:center}

/* Sticky download bar. Phones only; slides up once the hero has scrolled away. */
.dlbar{display:none; position:fixed; inset:auto 0 0 0; z-index:30; align-items:center; gap:12px;
  padding:10px 16px;
  /* iOS reports a bottom inset for the home indicator; Android reports none for the
     gesture pill, so keep a floor under it either way. */
  padding-bottom:22px;
  padding-bottom:max(22px, calc(10px + env(safe-area-inset-bottom, 0px)));
  background:rgba(10,10,11,.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line); transition:transform .35s cubic-bezier(.2,.8,.2,1)}
/* The script arms the bar; unarmed (no script, or it failed) it just stays visible. */
.dlbar.armed{transform:translateY(115%)}
.dlbar.armed.in{transform:none}
.dlbar img{width:36px; height:36px; border-radius:10px; flex:none}
.dlbar-t{min-width:0; flex:1}
.dlbar-t b{display:block; font-family:var(--display); font-size:15px; font-weight:700; letter-spacing:-.01em; line-height:1.2}
.dlbar-t span{display:block; color:var(--muted); font-size:12px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dlbar .btn.dl{flex:none; padding:10px 16px; font-size:14px}
@media(max-width:760px){
  .dlbar{display:flex}
  footer{padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px))}
}
@media(prefers-reduced-motion:reduce){ .dlbar{transition:none} }

/* Back to top. Carries the app's gradient and rides above the download bar. */
.totop{position:fixed; right:16px; bottom:calc(var(--barh, 0px) + 16px); z-index:29;
  width:44px; height:44px; padding:0; border:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:#0a0a0b;
  background:linear-gradient(150deg,var(--g1),var(--g2));
  box-shadow:0 10px 26px -8px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.10) inset;
  opacity:0; visibility:hidden; transform:translateY(8px) scale(.9);
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1), visibility .3s}
.totop.in{opacity:1; visibility:visible; transform:none}
.totop:active{transform:scale(.94)}
@media(min-width:761px){ .totop{right:24px; bottom:24px} }
@media(prefers-reduced-motion:reduce){ .totop{transition:opacity .2s ease, visibility .2s} }

/* Footer */
footer{margin-top:clamp(72px,10vw,140px); border-top:1px solid var(--line); padding:44px 0 56px}
footer .cols{display:grid; gap:28px; grid-template-columns:1fr}
@media(min-width:760px){ footer .cols{grid-template-columns:1.4fr 1fr 1fr} }
footer h3{margin:0 0 10px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
footer ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
footer ul a:hover{color:var(--white); text-decoration:underline; text-underline-offset:3px}
footer .small{color:var(--muted); font-size:14px; margin-top:26px}

/* Scroll reveal: elements start visible; the js class hides them only until they enter the viewport */
html.js .rv{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); transition-delay:var(--d,0s)}
html.js .rv.in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  .fan-card,.phone{animation:none}
  *{transition:none !important}
  html{scroll-behavior:auto}
  html.js .rv{opacity:1; transform:none}
}

/* Description body on app pages (added 2026-09-07) */
.tagline{font-family:var(--display); font-weight:600; font-size:clamp(20px,2.2vw,26px); line-height:1.25; letter-spacing:-.01em; color:var(--ink); margin:18px 0 0; max-width:30ch; text-wrap:balance}
.blurb{margin:0; font-size:15px; color:var(--soft)}
.about{padding-top:clamp(48px,7vw,88px)}
.about .split{align-items:start}
.about .side{position:relative}
@media(min-width:900px){ .about .side{position:sticky; top:96px} }
.prose{max-width:66ch}
.prose > p:first-child{font-size:19px; color:var(--ink)}
.prose p,.prose li{font-size:17px; color:var(--soft); line-height:1.6}
.prose h3{font-size:20px; margin:30px 0 8px}
.prose ul{margin:0 0 1em; padding-left:20px}
.prose li{margin:0 0 6px}
.prose li::marker{color:var(--g1)}


/* Aurora of readings: the page ground (added 2026-09-08). Soft blobs in the apps' own colours drift over a faint
   measurement grid and a row of ruler ticks. Only transforms animate; no filters, so it stays cheap. */
.bg{position:absolute; inset:0; overflow:hidden; z-index:-1; pointer-events:none; contain:strict}
.bg .blobs{position:absolute; inset:0; transform:translate3d(calc((var(--mx) - 50%) * -.05), calc((var(--my) - 50%) * -.05), 0); transition:transform .9s cubic-bezier(.2,.8,.2,1); will-change:transform}
.bg .blob{position:absolute; left:var(--x); top:var(--y); width:var(--s); height:var(--s); margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius:50%; background:radial-gradient(closest-side, var(--c), transparent 72%); opacity:var(--o,.5); will-change:transform; animation:drift var(--t,52s) ease-in-out infinite alternate; animation-delay:var(--d,0s); transform:translate3d(0,0,0)}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)} 35%{transform:translate3d(6vw,-5vh,0) scale(1.14)} 70%{transform:translate3d(-5vw,6vh,0) scale(.92)} 100%{transform:translate3d(4vw,3vh,0) scale(1.06)}}
.bg .grid{position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size:72px 72px; background-position:center top; mask-image:radial-gradient(70% 60% at 50% 28%, #000 20%, transparent 100%); -webkit-mask-image:radial-gradient(70% 60% at 50% 28%, #000 20%, transparent 100%)}
.bg .ticks{position:absolute; left:0; right:0; top:0; height:14px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 1px, transparent 1px 120px); background-size:auto 8px, auto 14px; background-repeat:repeat-x; mask-image:linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent)}
.bg .grain{position:absolute; inset:0; opacity:.07; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:180px 180px}
.bg::after{content:""; position:absolute; left:0; right:0; bottom:0; height:40%; background:linear-gradient(transparent, var(--bg))}

/* Entrance of the hero copy */
@keyframes rise{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
.hero h1,.hero .lede,.hero .cta,.ah .crumbs,.ah .appline,.ah h1,.ah .tagline,.ah .lede,.ah .cta,.ah .note,.phone-wrap{animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
.hero .lede,.ah .appline{animation-delay:.08s} .hero .cta,.ah h1{animation-delay:.16s} .ah .tagline{animation-delay:.22s} .ah .lede{animation-delay:.28s} .ah .cta,.ah .note{animation-delay:.34s} .phone-wrap{animation-delay:.2s}

/* Button shine on hover */
.btn{position:relative; overflow:hidden}
.btn::after{content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform:skewX(-18deg); opacity:0; transition:opacity .2s ease}
.btn:hover::after{opacity:1; animation:shine .7s ease forwards}
.btn.ghost::after{background:linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent)}
@keyframes shine{to{left:130%}}

/* Card tilt (JS sets --rx/--ry on fine pointers) */
.grid{perspective:1100px}
.app{transform:translateY(0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transform-style:preserve-3d}
.app:hover{transform:translateY(-6px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.app.tilting{transition:border-color .35s ease}

@media (prefers-reduced-motion:reduce){
  .bg .blob{animation:none}
  .bg .blobs{transform:none; transition:none}
  .hero h1,.hero .lede,.hero .cta,.ah .crumbs,.ah .appline,.ah h1,.ah .tagline,.ah .lede,.ah .cta,.ah .note,.phone-wrap{animation:none}
  .btn:hover::after{animation:none; opacity:0}
}

/* Cookie banner. Only written into the page when a Google Ads ID is configured.
   Sits above the sticky download bar and pushes it out of the way while open. */
.cbar{position:fixed; left:12px; right:12px; bottom:12px; z-index:40;
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px;
  padding:14px 18px; border-radius:20px; border:1px solid var(--line);
  background:rgba(17,17,19,.94); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 18px 50px rgba(0,0,0,.5)}
.cbar[hidden]{display:none}   /* class beats the plain hidden attribute, so say it out loud */
.cbar p{margin:0; flex:1 1 340px; font-size:14px; line-height:1.5; color:var(--muted)}
.cbar p a{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
.cbtns{display:flex; gap:10px; margin-left:auto}
.cbtn{padding:10px 20px; border-radius:999px; border:0; background:var(--white); color:#0a0a0b;
  font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:transform .25s ease}
.cbtn:hover{transform:translateY(-2px)}
.cbtn.ghost{background:transparent; color:var(--ink); border:1px solid #3a3a3f}
.cbtn.ghost:hover{border-color:#8a8a92}
.linkish{background:none; border:0; padding:0; color:inherit; font-family:inherit; font-size:inherit; cursor:pointer}
.linkish:hover{color:var(--white); text-decoration:underline; text-underline-offset:3px}
html.cbar-open .dlbar{transform:translateY(115%)}
html.cbar-open .totop{opacity:0; pointer-events:none}
@media(max-width:560px){
  .cbar{gap:12px}
  .cbtns{margin-left:0; width:100%}
  .cbtn{flex:1}
}

/* Language menu. A native <details>, so it opens with no script and the script
   only adds the niceties: close on Escape, close when you click elsewhere. */
.langs{position:relative}
.langs>summary{display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px;
  color:var(--muted); font-size:14px; cursor:pointer; list-style:none; -webkit-user-select:none; user-select:none;
  border:1px solid transparent; transition:color .2s ease, background .2s ease, border-color .2s ease}
.langs>summary::-webkit-details-marker{display:none}
.langs>summary::marker{content:""}
.langs>summary:hover{color:var(--ink); background:#17171b}
.langs[open]>summary{color:var(--ink); background:#17171b; border-color:var(--line)}
.langs .chev{transition:transform .25s ease; flex:none}
.langs[open] .chev{transform:rotate(180deg)}
.langs .ln{white-space:nowrap}
.fl{font-size:15px; line-height:1; flex:none}
.langmenu{position:absolute; top:calc(100% + 8px); inset-inline-end:0; z-index:60;
  display:grid; grid-template-columns:repeat(2, minmax(148px, 1fr)); gap:2px;
  padding:8px; border-radius:18px; border:1px solid var(--line); background:rgba(17,17,19,.97);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:0 22px 60px rgba(0,0,0,.6);
  max-height:min(68vh, 520px); overflow:auto; overscroll-behavior:contain}
.langmenu a{display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:11px;
  font-size:14px; color:var(--soft); transition:background .18s ease, color .18s ease}
.langmenu a:hover{background:#1e1e23; color:var(--ink)}
.langmenu a[aria-current="true"]{color:var(--ink); background:#23232a; font-weight:600}
header.nav .langs{margin-inline-start:2px}
footer .langs{margin-top:14px; margin-inline-start:-12px}
footer .langmenu{top:auto; bottom:calc(100% + 8px); inset-inline-start:0; inset-inline-end:auto}
/* On a phone the top bar holds a brand, a download button and this, so the
   switcher shows its flag alone. The name is still there for a screen reader
   and returns as soon as there is room. */
@media(max-width:760px){
  header.nav .langs>summary{padding:7px 9px; gap:5px}
  header.nav .langs>summary .ln{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
  header.nav .nav-cta{padding:10px 15px; font-size:14px}
  header.nav .wrap{gap:10px}
}
@media(max-width:560px){ .langmenu{grid-template-columns:1fr} }

/* Scripts that break lines between words, not inside them. */
html[lang="ko"],html[lang="ja"],html[lang="zh-Hans"],html[lang="zh-Hant"]{word-break:keep-all; line-break:strict}

/* Arabic reads right to left, so the few places that name a physical side
   mirror with it. Everything else is flex, grid or logical already. */
[dir="rtl"] .nav-cta{margin-left:0; margin-right:auto}
[dir="rtl"] .arr{transform:scaleX(-1)}
[dir="rtl"] .btn:hover .arr{transform:scaleX(-1) translateX(3px)}
[dir="rtl"] .totop{right:auto; left:16px}
[dir="rtl"] .dlbar .btn.dl{margin-left:0; margin-right:auto}
[dir="rtl"] .crumbs{direction:rtl}
[dir="rtl"] .cbtns{margin-left:0; margin-right:auto}