/* TC Fusion design system, direction "Fusion" (2026-09-05).
   Shared by the home page and every app landing page.

   Dark ground (the apps are dark by default, so the site is too), light ink,
   and the studio takes no accent of its own.
   Each app page sets three variables in its own :root and inherits the rest:
     --accent      the app's brand colour, for underlines and decoration
     --accent-ink  the cut of it used as text (on this ground, usually the same value)
     --tile        the app's own ground, behind its mascot in the hero
   Syne carries names, headlines and row titles; Hanken Grotesk carries
   everything readable. Structure is hairlines and space, not boxes. */

:root {
  --paper: #101216;   /* the ground: a deep cool grey, a shade lighter than the apps' own */
  --ink: #f2f3f5;
  --body: #c3c8d1;
  --dim: #8b93a1;
  --line: #262a32;

  --roost: #8b7bff;      /* twilight violet */
  --norae: #3ee6c9;      /* magpie teal */
  --papote: #5b9dff;     /* bleu de France */
  --papote-gold: #f5c451;

  --accent: var(--ink);
  --accent-ink: var(--ink);
  --tile: var(--ink);

  --display: "Syne", "Helvetica Neue", Arial, sans-serif;
  --text: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --gutter: 32px;        /* page side padding; the screenshot strip bleeds out to the viewport past it */
  --frame: 1080px;
}

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

html { color-scheme: dark; }
body {
  font-family: var(--text);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  padding: 28px var(--gutter) 56px;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
img { display: block; max-width: 100%; }

.frame { max-width: var(--frame); margin: 0 auto; }

/* ---- top bar ---- */
.top { display: flex; justify-content: space-between; align-items: center; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 40px; height: 40px; border-radius: 22%; }
.brand .name, .wordmark {
  font-family: var(--display); font-weight: 800; font-size: 20px;
  letter-spacing: -0.02em; text-decoration: none;
}
.top .link { font-size: 15px; font-weight: 500; color: var(--dim); text-decoration: none; padding: 8px 0; }
.top .link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* ---- hero ---- */
.hero {
  display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center;
  margin-top: 72px;
}
.tile {
  width: min(100%, 360px); aspect-ratio: 1; margin: 0 auto;
  border-radius: 28px; overflow: hidden; background: var(--tile);
  border: 1px solid var(--line);
}
.tile img { width: 100%; height: 100%; object-fit: cover; }
h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(34px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -0.025em;
  text-wrap: balance;
}
/* The tap-a-word mechanic, as a headline detail: one word marked the way a new word is in the app. */
h1 .word {
  color: var(--accent-ink);
  text-decoration: underline dotted var(--accent) 3px;
  text-underline-offset: 8px;
}
.lead { margin-top: 22px; font-size: 18px; color: var(--dim); max-width: 50ch; }
.lead strong { color: var(--ink); font-weight: 600; }

/* Official store badges. Apple asks for a minimum 40px badge height and clear
   space around it; Google's PNG carries its own transparent margin. */
.stores { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 28px; }
.store-badge { display: inline-block; line-height: 0; }
.store-badge img { height: 52px; width: auto; }
.store-badge:hover { opacity: 0.85; }
.store-soon { font-size: 15px; color: var(--dim); }
.store-soon strong { color: var(--ink); font-weight: 600; }
.store-note { margin-top: 12px; font-size: 14px; color: var(--dim); }

/* ---- sections ---- */
.section { margin-top: 88px; }
.section h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(24px, 3vw, 32px); line-height: 1.12; letter-spacing: -0.02em;
  text-wrap: balance; max-width: 26ch;
}
.section .sub { margin-top: 10px; font-size: 17px; color: var(--dim); max-width: 52ch; }

/* screenshots: a horizontal strip that bleeds to the viewport edges, never a grid of frames.
   Snapping is for touch only: on a desktop with a pointer the wheel and the arrows drive it,
   and mandatory snapping fights both. The scrollbar is hidden; the strip visibly overflows. */
.shots {
  display: flex; gap: 16px; overflow-x: auto;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  margin: 28px calc(50% - 50vw) 0;
  padding: 2px max(var(--gutter), calc(50vw - var(--frame) / 2)) 14px;
}
.shots::-webkit-scrollbar { display: none; }
.shots figure, .shots img { flex: 0 0 auto; scroll-snap-align: center; }
.shots img { width: min(72vw, 280px); height: auto; border-radius: 18px; border: 1px solid var(--line); }
@media (hover: hover) and (min-width: 900px) {
  .shots { scroll-snap-type: none; }
}

/* "how it works" as hairline rows: title on the left, one paragraph on the right */
.rows { margin-top: 28px; border-top: 1px solid var(--line); }
.row {
  display: grid; grid-template-columns: 1fr 2fr; gap: 24px; align-items: start;
  padding: 22px 0; border-bottom: 1px solid var(--line);
}
.row h3 {
  font-family: var(--display); font-weight: 700; font-size: 20px;
  letter-spacing: -0.02em; line-height: 1.2;
}
.row p { font-size: 16px; color: var(--body); max-width: 56ch; }
.row p .k { color: var(--accent-ink); font-weight: 600; }

/* one closing line, set large, with the phrase that matters underlined in the app's colour */
.statement {
  margin-top: 80px; font-family: var(--display); font-weight: 700;
  font-size: clamp(22px, 3vw, 32px); line-height: 1.2; letter-spacing: -0.02em;
  max-width: 26ch; text-wrap: balance;
}
.statement span {
  text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 3px; text-underline-offset: 6px;
}
.prose { margin-top: 18px; font-size: 17px; color: var(--body); max-width: 60ch; }
.prose strong { color: var(--ink); font-weight: 600; }
.note { margin-top: 40px; font-size: 14px; color: var(--dim); max-width: 64ch; }

.contact-line { margin-top: 26px; font-size: 16px; }
.contact-line a {
  font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.contact-line a:hover { text-decoration-color: var(--ink); }

/* ---- footer ---- */
footer {
  margin-top: 64px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--dim);
}
footer .links { display: flex; gap: 22px; flex-wrap: wrap; }
footer a { text-decoration: none; }
footer a:hover { color: var(--ink); }
footer .legal { margin-top: 14px; max-width: 80ch; }

@media (max-width: 760px) {
  :root { --gutter: 20px; }
  body { padding: 20px var(--gutter) 48px; }
  .hero { grid-template-columns: 1fr; gap: 32px; margin-top: 48px; }
  /* On a phone the icon in the top bar is enough; the mascot tile would push the headline below the fold. */
  .hero .tile { display: none; }
  .section { margin-top: 64px; }
  .row { grid-template-columns: 1fr; gap: 8px; }
  .statement { margin-top: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =====================================================================
   Documents: privacy, terms, support, account deletion.
   One narrow column. The same hairlines-and-space structure as the
   landing pages: no filled cards, no glows, a rule where a box used to be.
   ===================================================================== */
.doc .wrap { max-width: 760px; margin: 0 auto; padding-top: 8px; }
.doc .back { display: inline-block; font-size: 14px; color: var(--dim); text-decoration: none; padding: 8px 0; }
.doc .back:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.doc h1 {
  margin-top: 28px; font-size: clamp(30px, 4vw, 42px); line-height: 1.08;
}
.doc .updated { margin-top: 12px; font-size: 14px; color: var(--dim); }
.doc .updated + .updated { margin-top: 6px; }
.doc .lead { margin-top: 24px; font-size: 18px; color: var(--body); max-width: none; }
.doc h2 {
  font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.2;
  letter-spacing: -0.02em; margin: 44px 0 12px; scroll-margin-top: 24px;
}
.doc h3 { font-weight: 600; font-size: 17px; margin: 24px 0 8px; color: var(--ink); }
.doc p, .doc ul, .doc ol { color: var(--body); font-size: 16px; line-height: 1.65; margin-bottom: 14px; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin-bottom: 8px; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc a.inline {
  color: var(--accent-ink); text-decoration: underline; text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}
.doc a.inline:hover { color: var(--ink); text-decoration-color: var(--ink); }
.doc .legal { font-size: 15px; }
.doc .sub { color: var(--dim); font-size: 14px; }

/* the summary block at the top of a policy */
.doc .tldr { margin-top: 32px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.doc .tldr h2 { margin: 0 0 14px; font-size: 18px; }
.doc .tldr ul { margin-bottom: 0; }

/* contents */
.doc .toc { margin-top: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.doc .toc > strong { display: block; margin-bottom: 8px; font-size: 14px; color: var(--dim); font-weight: 600; }
.doc .toc ol { columns: 2; column-gap: 32px; padding-left: 20px; font-size: 15px; margin-bottom: 0; }
.doc .toc a { color: var(--body); text-decoration: none; }
.doc .toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* tables scroll inside their own box */
.doc .table-scroll { overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--line); border-radius: 12px; }
.doc table { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 520px; }
.doc th, .doc td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--body); }
.doc th { color: var(--ink); font-weight: 600; }
.doc tr:last-child td { border-bottom: none; }

.doc .callout { margin: 16px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--accent); color: var(--body); font-size: 15px; }
.doc .callout p:last-child { margin-bottom: 0; }
.doc .note { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--dim); font-size: 14px; }
.doc .note a { color: var(--dim); text-decoration: underline; text-underline-offset: 3px; }
.doc .pagenav { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; gap: 22px; flex-wrap: wrap; font-size: 14px; }
.doc .pagenav a { color: var(--dim); text-decoration: none; }
.doc .pagenav a:hover { color: var(--ink); }

/* support and account pages */
.doc .card, .doc .contact { margin-top: 16px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 16px; }
.doc .card ol, .doc .card ul { margin-bottom: 0; }
.doc .contact p { margin-bottom: 16px; }
.doc .contact .sub { margin: 14px 0 0; }
.doc .btn {
  display: inline-block; margin-top: 4px; padding: 12px 22px; border-radius: 999px;
  background: var(--accent); color: var(--paper); font-weight: 600; text-decoration: none;
}
.doc .btn:hover { background: var(--ink); }
.doc .faq { margin-top: 8px; border-top: 1px solid var(--line); }
.doc .faq details { border-bottom: 1px solid var(--line); }
.doc .faq summary {
  cursor: pointer; list-style: none; padding: 16px 0;
  font-weight: 600; color: var(--ink); font-size: 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.doc .faq summary::-webkit-details-marker { display: none; }
.doc .faq summary::after { content: "+"; color: var(--accent-ink); font-weight: 600; font-size: 22px; line-height: 1; transition: transform 0.2s ease; }
.doc .faq details[open] summary::after { transform: rotate(45deg); }
.doc .faq details > *:not(summary) { margin-bottom: 16px; }
.doc .erased { list-style: none; padding-left: 0; }
.doc .erased li { position: relative; padding: 10px 0 10px 28px; border-bottom: 1px solid var(--line); margin-bottom: 0; }
.doc .erased li:last-child { border-bottom: none; }
.doc .erased li::before { content: "\2715"; position: absolute; left: 0; top: 10px; color: var(--danger); font-weight: 700; }
.doc .warn { margin: 16px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--danger); }
.doc .warn .tag { display: block; font-size: 14px; font-weight: 600; color: var(--danger); margin-bottom: 6px; }
.doc .warn p { margin-bottom: 0; }
:root { --danger: #ff8b8b; }

@media (max-width: 560px) { .doc .toc ol { columns: 1; } }

/* =====================================================================
   Redirect pages: /get, /ig, /tt, /i. One centred block that is only
   seen on desktop or when the store redirect does not fire.
   ===================================================================== */
.redirect { min-height: 100vh; display: grid; place-items: center; text-align: center; }
.redirect main { max-width: 480px; }
.redirect h1 { font-size: 26px; line-height: 1.15; }
.redirect .sub { margin-top: 10px; color: var(--dim); font-size: 16px; }
.redirect .sub a { color: var(--ink); }
.redirect .badges { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.redirect .badges a {
  display: inline-block; padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px;
  text-decoration: none; font-weight: 600; font-size: 15px;
}
.redirect .badges a:hover { border-color: var(--ink); }
.redirect .hint { color: var(--dim); font-size: 13px; margin-top: 22px; }
.redirect .owl { font-size: 44px; line-height: 1; margin-bottom: 14px; }
.redirect .code-label { color: var(--dim); font-size: 14px; margin: 24px 0 6px; }
.redirect .code-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.redirect .code {
  font-family: var(--display); font-size: 34px; font-weight: 700; letter-spacing: 0.22em;
  color: var(--code, var(--ink)); font-variant-numeric: tabular-nums;
}
.redirect .copy {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink);
  background: transparent; border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; cursor: pointer;
}
.redirect .copy:hover { border-color: var(--ink); }
.redirect .copy.copied { color: #8fd694; border-color: #8fd694; }