/* The clipve.app download page (Claude Design handoff, docs/design_handoff_download_page, 2026-10-09).
   Its own sheet, so 404.html and billing/done.html keep styles.css. Inter is self-hosted: the CSP
   allows nothing from Google Fonts. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/fonts/inter-latin.woff2") format("woff2"); }

:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; background: #03081a; }
a { color: #00BCD1; text-decoration: none; font-weight: 600; transition: color 150ms ease-out; }
a:hover { color: #FEF9F0; }

.page {
  min-height: 100vh; display: flex; flex-direction: column;
  background-color: #03081a;
  background-image:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(0,188,209,.14) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 100% 30%, rgba(77,163,255,.08) 0%, transparent 55%);
  background-repeat: no-repeat;
  color: #FEF9F0; font-family: Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased;
}

.header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(3,8,26,.62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.headerInner { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.headNav { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #7BB6C0; white-space: nowrap; }
.logo { display: flex; }
.logo img { height: 20px; display: block; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 14px; white-space: nowrap; }

.hero {
  position: relative; overflow: hidden; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 112px 24px 128px;
}
.backdrop { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.backdrop img {
  width: max(1200px, 110%); height: auto; opacity: .10;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, #000 45%, transparent 85%);
  mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, #000 45%, transparent 85%);
}
.content { position: relative; width: 100%; max-width: 720px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }

h1 { margin: 0; font-size: clamp(40px, 7vw, 68px); font-weight: 900; line-height: 1.0; letter-spacing: -.03em; text-wrap: balance; }
.subhead { margin: 0; max-width: 560px; font-size: 19px; font-weight: 600; line-height: 1.45; color: #FEF9F0; text-wrap: balance; }

.cta { display: flex; flex-direction: column; align-items: center; gap: 28px; margin-top: 12px; }
/* The download block (#215). The HTML is the both-buttons layout: Mac, and Windows with its .exe link and
   SmartScreen line under it, in two equal columns sized to the wider one. download.js sets <html data-os> once
   it is sure of the OS, and that visitor sees one button with a small line for the other OS. The min-height
   (measured: the tallest layout at each width) keeps the trust line still when the layout switches. */
.dl-block { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 134px; }
.buttons { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 16px; }
.dl { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dl .btn { width: 100%; }
.alt { display: none; }
:root[data-os="mac"] .dl-win, :root[data-os="windows"] .dl-mac { display: none; }
:root[data-os="mac"] .alt-win, :root[data-os="windows"] .alt-mac { display: block; }
@media (max-width: 767px) { .buttons { grid-auto-flow: row; } .dl-block { min-height: 171px; } }
/* "Sticker press": a flat aqua sticker with a hard off-white shadow. Hover sinks it halfway into its shadow,
   a press lands it there. download.js adds .is-pressed for 180 ms so a quick click or tap shows it. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 248px; padding: 15px 26px; white-space: nowrap; border-radius: 3px;
  background: #00BCD1; color: #06121F; font-size: 18px; font-weight: 900; letter-spacing: -.02em; line-height: 1;
  box-shadow: 4px 4px 0 #F7F8FA;
  transition: transform 120ms cubic-bezier(.2,.8,.2,1), box-shadow 120ms cubic-bezier(.2,.8,.2,1), background-color 120ms;
}
.btn svg { flex: none; }
.btn .apple { margin-top: -2px; }
.btn:hover { color: #06121F; transform: translate(2px,2px); box-shadow: 2px 2px 0 #F7F8FA; }
.btn:active, .btn.is-pressed { transform: translate(4px,4px); box-shadow: 0 0 0 #F7F8FA; background: #00A9BC; transition-duration: 60ms; }
.btn:focus-visible { outline: 2px solid #2ED0E2; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
.store, .alt { font-size: 14px; }
.store { margin-top: 4px; }
.help { margin: 0; font-size: 12px; line-height: 1.5; color: #7BB6C0; white-space: nowrap; }
.trust { margin: 0; font-size: 14px; line-height: 1.55; color: #B3D6DC; }
/* Phones: one column, full-width buttons inside a 16 px gutter; the SmartScreen line may wrap. */
@media (max-width: 439px) {
  /* Home · Account · Features · Pricing beside the logo still fits a 320 px phone. */
  .headerInner { padding: 0 16px; }
  .headNav { gap: 8px; }
  .hero { padding-left: 16px; padding-right: 16px; }
  .cta, .dl-block, .buttons { width: 100%; }
  .buttons { display: grid; }
  .btn { min-width: 0; padding: 15px 18px; font-size: 16px; }
  .help { white-space: normal; text-wrap: balance; }
}
/* Under 375 px the four links only keep the 16 px gutter at 13 px and without the dots (checked down to 320 px). */
@media (max-width: 374px) {
  .headNav { font-size: 13px; }
  .headNav span { display: none; }
}

/* .page is a 100vh column and .hero takes the slack, so the footer always sits at the bottom; 1px line above. */
.footer { margin-top: auto; border-top: 1px solid rgba(255,255,255,.08); }
.footerInner {
  max-width: 1200px; margin: 0 auto; padding: 28px 24px 36px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  font-size: 12px; color: #7BB6C0; white-space: nowrap;
}
.footRight { flex: 1 0 auto; display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.footCenter { flex: 1 0 auto; margin: 0; }
/* The smallest phones (320 px): the right group is wider than the screen, so it wraps there only. */
@media (max-width: 374px) { .footRight { flex: 1 1 100%; flex-wrap: wrap; } }