/* Clovk — the app's own face on the shared family skeleton (family.css v1.0.0). */
:root {
  --g1:#0b2478; --g2:#3271ff; --acc:#ffd54d; --sfg:#ffffff;
  --aura1:#3271ff; --aura2:#ffd54d; --aura3:#9db8ff;
  --sheen:linear-gradient(90deg,#3271ff,#0b2478 30%,#ffd54d 55%,#3271ff 80%,#7fa6ff);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --aura3:#7fa6ff } }
:root[data-theme="dark"] { --aura3:#7fa6ff }
#trust .cards { grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)) }
@media (max-width:600px) { .facts { gap:8px 22px } .facts b { font-size:24px } }

/* hero stat row */
.facts { display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:28px; padding:0; list-style:none; color:var(--muted); font-size:15px; font-weight:500 }
.facts b { display:block; font:800 28px/1 var(--display); letter-spacing:-.03em; color:var(--fg) }

/* iPad showcase */
.pad { position:relative; margin-top:clamp(24px,3vw,40px); border-radius:clamp(18px,2.4vw,32px); overflow:hidden; aspect-ratio:2360/1640; background:var(--surface);
  box-shadow:0 40px 90px -30px rgb(8 10 20 / .5), 0 0 0 1px var(--line) }
.pad img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .45s ease }
.pad img.active { opacity:1 }
.pad-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; padding:0; list-style:none }
.pad-tabs button { font:500 15px/1 var(--body); color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:12px 18px; cursor:pointer; min-height:44px; transition:border-color .2s, color .2s, background .2s }
.pad-tabs button:hover { color:var(--fg); border-color:var(--fg) }
.pad-tabs button[aria-selected="true"] { color:var(--sfg); background:var(--g2); border-color:var(--g2) }

/* closing call */
.cta { margin-top:clamp(56px,8vw,112px); padding-inline:clamp(8px,2vw,24px) }
.cta .stage { grid-template-columns:minmax(0,1fr); text-align:center; justify-items:center; padding-block:clamp(48px,7vw,96px) }
.cta .line { margin-inline:auto }
.cta .water { right:auto; left:50%; translate:-50% 0 }