/* ---------------------------------------------------------------------------
   Voxly site styles.

   The palette is NOT invented here. Every colour below is lifted from
   tools/gen_feature_graphic.py in the app repo, which is what generates the
   Play Store feature graphic. The store graphic, the phone screenshots and this
   site therefore match by construction rather than by eye, and there is one
   place to change if the brand moves.

   Backgrounds are CSS gradients, never images: they weigh nothing, they cannot
   pixelate on a high-DPI phone, and they are the same three radials the feature
   graphic already uses.
--------------------------------------------------------------------------- */

:root {
  --bg:        #0A0A16;
  --accent:    #BB86FC;   /* brand purple, the one in the keyboard icons     */
  --accent-2:  #7B68EE;   /* the deeper purple the gradients run towards     */
  --text:      #FBF9FF;
  --muted:     #A79FD0;
  --card:      linear-gradient(165deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
  --line:      rgba(187,134,252,.30);
  --radius:    20px;
  --wrap:      1060px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(880px 700px at 78% -6%,  rgba(187,134,252,.26), transparent 62%),
    radial-gradient(760px 640px at 8% 42%,   rgba(123,104,238,.22), transparent 58%),
    radial-gradient(620px 520px at 92% 88%,  rgba(99,102,241,.14),  transparent 66%),
    var(--bg);
  background-attachment: fixed;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 760px; }

a { color: var(--accent); }

/* --- header ------------------------------------------------------------- */

header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(10,10,22,.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
header .wrap {
  display: flex; align-items: center; gap: 14px;
  min-height: 66px; flex-wrap: wrap;
}
/* The wordmark is the same lockup as the Play feature graphic and the app icon:
   "Voxly" with a small letterspaced kicker under it, not one long line of text.
   Keeping the two apart is what lets the header stay short on a phone while the
   full product name is still on the page. */
.brand {
  display: flex; align-items: center; gap: 11px;
  color: var(--text); text-decoration: none; margin-right: auto;
}
.brand img { width: 32px; height: 32px; display: block; flex: none; }
.brand .lockup { line-height: 1.04; }
.brand .name {
  display: block; font-size: 1.16rem; font-weight: 700; letter-spacing: -.4px;
}
.brand .kind {
  display: block; margin-top: 3px;
  font-size: .56rem; font-weight: 700; letter-spacing: 2.2px;
  text-transform: uppercase; color: var(--accent);
}
nav { display: flex; gap: 6px; flex-wrap: wrap; }
nav a {
  color: var(--muted); text-decoration: none;
  font-size: .93rem; font-weight: 500;
  padding: 7px 12px; border-radius: 9px;
}
nav a:hover, nav a[aria-current="page"] { color: var(--text); background: rgba(255,255,255,.07); }

/* --- hero --------------------------------------------------------------- */

.hero { padding: 78px 0 8px; text-align: center; }
.hero h1 {
  font-size: clamp(1.95rem, 6.2vw, 3.75rem);
  line-height: 1.1; letter-spacing: -1.8px; font-weight: 700;
  text-wrap: balance;
}
/* The two halves are spans rather than a <br>, so the phone can run them into
   one sentence and wrap wherever it likes. Hiding a <br> with CSS instead loses
   the space with it and renders "language.Type" as one word. */
.hero h1 span { display: block; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero p.lede {
  margin: 22px auto 0; max-width: 620px;
  font-size: clamp(1.03rem, 2.4vw, 1.2rem); color: var(--muted);
}

.rule {
  width: 172px; height: 3px; border-radius: 2px; margin: 30px auto 0;
  background: linear-gradient(90deg, transparent, var(--accent-2), var(--accent), transparent);
}

/* Launch notice. This is a placeholder for a Play badge: the app is on closed
   testing, so there is no public listing to link to yet. Swap it for the real
   badge on the day production access lands. */
.launch {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 30px; padding: 13px 22px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; font-weight: 600; font-size: .97rem;
}
.launch .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px rgba(187,134,252,.18);
  flex: none;
}
.hero .fine { margin-top: 14px; font-size: .87rem; color: var(--muted); }

/* --- screenshots -------------------------------------------------------- */

/* The screenshots already carry their own caption and the same dark purple
   background as this page, so they are shown plain. Adding a card or a caption
   underneath would say the same thing twice. */
/* Two up on a phone, four up on a desktop. Fixed counts rather than auto-fit,
   because auto-fit would leave a lone orphan on the second row at some widths. */
/* Fixed column counts rather than auto-fit, which left a lone fifth screenshot
   stranded on a second row. minmax(0, 1fr) rather than 1fr so a track can always
   shrink below the image's intrinsic 560px, whatever is put in it later. */
.shots {
  display: grid; gap: 14px; margin: 48px 0 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 760px) {
  .shots {
    gap: 20px; margin: 56px 0 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.shots img {
  width: 100%; height: auto; display: block;
  border-radius: 16px; border: 1px solid rgba(255,255,255,.09);
}

/* --- sections ----------------------------------------------------------- */

section { padding: 62px 0; }
section > .wrap > h2 {
  font-size: clamp(1.5rem, 3.6vw, 2.05rem);
  letter-spacing: -.8px; line-height: 1.2; margin-bottom: 10px;
}
section p.sub { color: var(--muted); max-width: 640px; margin-bottom: 34px; }

.cards {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 24px;
}
.card h3 { font-size: 1.08rem; margin-bottom: 9px; letter-spacing: -.2px; }
.card p  { color: var(--muted); font-size: .96rem; }
.card .tag {
  display: inline-block; margin-bottom: 13px;
  font-size: .72rem; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--accent);
}

/* Keycap row, the same object as the nine keys on the feature graphic. */
.keys { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.keys span {
  width: 54px; height: 54px; border-radius: 13px;
  background: var(--card); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1;
}

/* --- a screenshot beside its explanation --------------------------------- */

.split { display: grid; gap: 26px; align-items: center; grid-template-columns: minmax(0, 1fr); }
.split img {
  width: 100%; max-width: 290px; height: auto; display: block;
  border-radius: 16px; border: 1px solid rgba(255,255,255,.09);
}
.split p { color: var(--muted); margin-bottom: 14px; }
.split p:last-child { margin-bottom: 0; }
@media (min-width: 760px) {
  .split { grid-template-columns: 290px minmax(0, 1fr); gap: 40px; }
}

/* --- language lists ------------------------------------------------------ */

.lang-head {
  font-size: .76rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent); margin: 30px 0 14px;
}
.langs { list-style: none; display: flex; flex-wrap: wrap; gap: 9px; }
.langs li {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 16px; font-size: .95rem; font-weight: 500;
}
.lang-note { color: var(--muted); font-size: .92rem; margin-top: 14px; max-width: 620px; }

/* --- credits box -------------------------------------------------------- */

.credits {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px 28px; max-width: 620px;
}
.credits ul { list-style: none; margin-top: 16px; }
.credits li { padding: 9px 0 9px 26px; position: relative; color: var(--muted); }
.credits li::before {
  content: ""; position: absolute; left: 4px; top: 18px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}

/* --- footer ------------------------------------------------------------- */

footer {
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 40px 0 56px; margin-top: 40px;
  color: var(--muted); font-size: .92rem;
}
footer .cols { display: flex; gap: 30px; flex-wrap: wrap; align-items: center; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--text); text-decoration: underline; }
footer .legal { margin-left: auto; text-align: right; }

/* --- long-form pages (privacy, delete account, support) ------------------ */

/* The privacy and deletion pages keep their original markup and wording
   exactly. Only these styles are new, so the two pages read as part of the
   site without a single word of the policy being retyped. */

.doc { padding: 52px 0 20px; }
.doc h1 { font-size: clamp(1.7rem, 4.4vw, 2.3rem); letter-spacing: -1px; line-height: 1.18; }
.doc h2 {
  font-size: 1.16rem; margin-top: 2.4em; padding-bottom: .4em;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.doc h3 { font-size: 1.02rem; margin-top: 1.8em; }
.doc p, .doc li { color: #DCD6F2; }
.doc p { margin: .85em 0; }
.doc ul, .doc ol { margin: .6em 0 .9em 1.4em; }
.doc li { margin: .35em 0; }
.doc .effective { color: var(--muted); font-size: .9rem; margin-top: .4em; }

.doc .highlight-box,
.doc .delete-box,
.doc .contact {
  border-radius: 14px; padding: 18px 20px; margin-top: 1.2em;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-left-width: 3px;
}
.doc .highlight-box { border-left-color: #4ADE80; }
.doc .delete-box    { border-left-color: #FBBF24; }
.doc .contact       { border-left-color: var(--accent); margin-top: 2.4em; }

.doc table { border-collapse: collapse; width: 100%; margin: 1.2em 0; font-size: .94rem; }
.doc th, .doc td {
  border: 1px solid rgba(255,255,255,.12); padding: .65em .8em;
  text-align: left; vertical-align: top; color: #DCD6F2;
}
.doc th { background: rgba(255,255,255,.05); color: var(--text); }
.table-wrap { overflow-x: auto; }   /* wide tables scroll, the page never does */

/* The fetched pages ship their own two-link <nav> inside <body>. The site
   header already covers navigation, so it is hidden rather than deleted, which
   keeps those files a byte-for-byte copy of the live ones below the head. */
.doc > nav:first-child { display: none; }

@media (max-width: 620px) {
  .hero { padding: 52px 0 4px; }
  .hero h1 span { display: inline; }   /* see the note on .hero h1 */
  /* The four nav items miss one row by a few pixels at 360px. */
  nav { gap: 2px; }
  nav a { padding: 6px 9px; font-size: .88rem; }
  section { padding: 46px 0; }
  footer .legal { margin-left: 0; text-align: left; }
  .keys span { width: 46px; height: 46px; font-size: 21px; }
}