@font-face { font-family: "Archivo"; src: url("/archivo.woff") format("woff"); font-weight: 100 900; font-stretch: 62% 125%; font-display: block; }
/* Lo stesso stile di fotah.app (misure, spazi, aloni e grana), con i colori di videah: fondo #121110 e viola. */
:root { --bg: #121110; --fg: #f5f5f5; --muted: #a3a3a3; --accent: #9759ff; }
@supports (color: color(display-p3 1 1 1)) { :root { --accent: color(display-p3 0.56 0.36 1); } }
* { box-sizing: border-box; }
/* Su iPhone (viewport-fit=cover) la pagina arriva sotto l'orologio e sotto la barra di Safari: lì si vede il fondo. */
html { background: #121110; }
body { margin: 0; min-height: 100vh; background: transparent; color: var(--fg); font: 17px/1.6 "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-variation-settings: "wdth" 100, "wght" 400; }
main { max-width: 680px; margin: 0 auto;
  padding: max(56px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(80px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
h2 { font-size: 20px; margin: 36px 0 8px; font-weight: 800; font-variation-settings: "wdth" 118, "wght" 800; }
strong { font-weight: 700; font-variation-settings: "wdth" 110, "wght" 700; }
p, li { color: #d4d4d4; }
.muted { color: var(--muted); font-size: 14px; }
a { color: var(--accent); }
nav { margin-top: 12px; font-size: 14px; font-variation-settings: "wdth" 112, "wght" 600; }
.lead { font-size: 22px; line-height: 1.35; color: var(--fg); margin-top: 28px; font-weight: 800; font-variation-settings: "wdth" 118, "wght" 800; }
/* Il logo dell'icona ("videah", la timeline, la lancetta viola), grande quanto "fotah" con la sua ghiera:
   la scritta larga 190 px, tutto il logo alto circa 130 px. */
/* Il logo è un po' più alto della scritta di fotah: margine negativo, così i collegamenti e il resto della pagina
   cadono alla stessa altezza che in fotah.app. */
.brand { text-align: center; margin-bottom: -15px; padding-top: clamp(12px, 3vh, 48px); }
.brand a { display: inline-block; }
.logo { display: block; width: 205px; height: auto; margin: 0 auto; }
.logo .needle { fill: #9759ff; }
@supports (color: color(display-p3 1 1 1)) { .logo .needle { fill: color(display-p3 0.56 0.36 1); } }
main > nav:first-of-type { text-align: center; margin-top: 20px; }

/* Aloni viola, speculari a quelli di fotah.app: in fotah l'alone forte è in alto a sinistra e l'altro in basso a destra,
   in videah in alto a destra e in basso a sinistra (come BrandGlow nell'app). Stesse misure, e si spengono prima delle
   barre di Safari su iPhone (il riquadro è alto 200vh, da -50vh); più la grana leggera. */
body::before { content: ""; position: fixed; top: -50vh; bottom: -50vh; left: 0; right: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 100% 38.5%, rgba(151,89,255,0.16), rgba(151,89,255,0) 70%),
    radial-gradient(40vmax 40vmax at 0% 56%, rgba(151,89,255,0.13), rgba(151,89,255,0) 70%),
    radial-gradient(70vmax 42vmax at 50% 45%, rgba(245,240,255,0.05), rgba(245,240,255,0) 70%),
    var(--bg); }
body::after { content: ""; position: fixed; top: -50vh; bottom: -50vh; left: 0; right: 0; z-index: -1; pointer-events: none; opacity: 0.09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
.legal { margin-top: 48px; color: var(--muted); font-size: 12px; text-align: center; }

/* L'App Store, come in fotah.app: il badge ufficiale quando c'è il link, finché no "Presto sull'App Store" in un riquadro. */
.store { margin: 26px 0 8px; }
.store a { display: inline-block; padding: 4px; border-radius: 10px; }
.store a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.store-btn { display: inline-block; padding: 14px 26px; border-radius: 999px; background: var(--accent); color: #fff; text-decoration: none;
  font-size: 18px; font-weight: 800; font-variation-settings: "wdth" 112, "wght" 800; }
.store .presto { display: inline-block; padding: 14px 22px; border-radius: 12px; border: 1px solid #3a3a3a; background: rgba(255,255,255,0.04);
  color: var(--fg); font-size: 16px; font-weight: 700; font-variation-settings: "wdth" 112, "wght" 700; }