/* The site, in the desktop app's own language.
 *
 * Everything here is lifted from the two screens the app opens with - the
 * welcome greeting and the sign-in card (src/shell/shell.css, src/ui/theme.css)
 * - so that arriving at fiksa.app and launching FIKSA are not two different
 * brands. Values are copied, not approximated: #121212 ground, hairlines of
 * white at 9%, white primary buttons with near-black text, Inter, small radii.
 *
 * -- No orange ---------------------------------------------------------------
 * Orange is the PLAYER's accent - the playhead, the clip frame, the active
 * states, things that only exist once there is a recording on screen. The
 * launcher screens deliberately have none of it (see the note above --sh-accent
 * in shell/shell.css), and neither does this site. The one exception is the
 * brand mark itself, which is the logo and not an accent.
 *
 * -- One stylesheet, four pages ----------------------------------------------
 * index, done, terms and privacy used to carry three near-identical copies of
 * their CSS in <style> blocks, which is how they drifted apart in the first
 * place. Caddy serves this file with the same zstd/gzip and it is cached across
 * the whole site, so the extra request is paid once.
 */

/* Bundled rather than pulled from a font CDN: the app ships Inter inside the
   binary, so the site loading a different rasterisation of the same name would
   be the one place the two visibly disagree. Two subsets only - the site is
   Russian with Latin brand words - and the unicode-ranges are fontsource's own,
   so a browser downloads the Cyrillic file only when it needs it. */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

:root {
  /* Ground and panels. The card on the sign-in screen is the SAME colour as the
     window behind it - the hairline and the shadow are the only things drawing
     its edge - and the panels here work the same way. */
  --bg: #121212;
  --panel: #121212;
  --panel-br: rgba(255, 255, 255, .09);
  --panel-shadow: 0 16px 36px rgba(0, 0, 0, .35);

  --fg: #ffffff;          /* --sh-fg: headings, the primary hover */
  --text: #e0e0e0;        /* --text: body copy */
  --text2: #888888;       /* --text2: secondary lines */
  --dim: rgba(255, 255, 255, .5);
  /* The quietest tier that is still meant to be READ - footers, the revision
     date on the legal pages. The app's own --sh-muted is #444, which works
     there because it labels 11px chrome nobody has to read twice; on a page you
     might actually be looking for the date on, 1.9:1 is not a colour, it is an
     absence. #6e6e6e is 3.3:1 and still recedes. */
  --text3: #6e6e6e;
  --sep: #262626;         /* --sh-sep: a divider is quieter than a control edge */

  --field-bg: #090909;   /* --sh-field-bg: the recessed box on the legal pages */

  /* The primary action: white fill, near-black label. This is --sh-cta-bg from
     the welcome screen's one button. */
  --cta-bg: #ffffff;
  --cta-hov: #ededed;
  --cta-fg: #111111;

  --radius-card: 12px;
  --radius-btn: 9px;

  --font: 'Inter Variable', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Dark only, and on purpose. The app has a light theme, but it is a preference
   somebody sets inside the product; a visitor arriving here has set nothing, and
   following prefers-color-scheme would show half of them a site that matches
   neither the screenshots nor the app they are about to download. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}

/* Inverted, exactly as in the app (::selection in ui/theme.css): left alone the
   OS paints its own highlight blue, the one colour on screen that answers to no
   theme. */
::selection { background: #ffffff; color: #121212; }

a { color: inherit; }
img, svg { max-width: 100%; }

.wrap { max-width: 960px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 760px; }

/* -- Header -------------------------------------------------------------------
   The wordmark, set the way the welcome screen sets it: FIKSA in caps at 600
   with the letters opened up, never the tight marketing tracking. */
.site-head { padding: 26px 0; }
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 600; letter-spacing: .5px;
  color: var(--fg); text-decoration: none;
}
.brand-mark { width: 26px; height: 26px; display: block; }

/* -- Button -------------------------------------------------------------------
   One, deliberately. This is the welcome screen's single white CTA
   (.sh-btn-cta): the page asks for exactly one thing, and a second filled
   button beside it would only argue with the first about which is primary. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 11px 22px;
  background: var(--cta-bg); color: var(--cta-fg);
  border: 1px solid transparent; border-radius: var(--radius-btn);
  font-family: inherit; font-size: 14px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background .2s ease, opacity .2s, transform .1s;
}
.btn:hover { background: var(--cta-hov); }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .45; cursor: default; }
.btn[disabled]:active { transform: none; }

.meta { font-size: 13px; color: var(--dim); }

/* -- Hero ---------------------------------------------------------------------
   This IS the welcome screen: the mark, the wordmark, one line saying what the
   thing is, one button. Nothing to read past before you can start. */
.hero {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 72px 0 64px;
}
.hero-mark { width: 64px; height: 64px; }
.hero h1 {
  margin: 26px 0 0;
  font-size: clamp(30px, 5.5vw, 44px); line-height: 1.15;
  font-weight: 600; letter-spacing: .5px;
  color: var(--fg);
}
.hero-sub {
  max-width: 460px;
  margin: 14px 0 0;
  font-size: clamp(15px, 2vw, 17px); line-height: 1.55;
  color: var(--text2);
}
.hero-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px;
  margin-top: 34px;
}

/* -- Cards --------------------------------------------------------------------
   Same construction as the sign-in card: the panel is the page's own colour,
   drawn by a hairline and a soft shadow rather than by a lighter fill. */
.cards {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  padding: 8px 0 88px;
}
.card {
  background: var(--panel);
  border: 1px solid var(--panel-br);
  border-radius: var(--radius-card);
  box-shadow: var(--panel-shadow);
  padding: 22px;
}
.card h2 {
  margin: 0 0 8px;
  font-size: 15px; font-weight: 600;
  color: var(--fg);
}
.card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text2); }
/* Monochrome, like every glyph on the launcher screens. currentColor rather
   than a fixed grey so the icon tracks the heading it belongs to. */
.card .ico { display: block; width: 20px; height: 20px; margin-bottom: 14px; color: var(--dim); }

/* -- Footer -------------------------------------------------------------------
   The divider is --sh-sep, one step quieter than a control's edge: it only
   groups things, it is not the boundary of anything you can touch. */
.site-foot {
  border-top: 1px solid var(--sep);
  padding: 24px 0 44px;
  font-size: 13px; color: var(--text3);
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
}
.site-foot a { color: var(--text3); text-decoration: none; transition: color .2s ease; }
.site-foot a:hover { color: var(--text); }

/* The legal pages put their column inside the footer rather than the other way
   round, so the rule can run the full width of the window while the links stay
   lined up with the text above them. Same weights as .site-foot; not merged with
   it because that one is itself the column. */
.doc-foot {
  border-top: 1px solid var(--sep);
  padding: 24px 0 44px;
  font-size: 13px; color: var(--text3);
}
.doc-foot a { color: var(--text3); text-decoration: none; transition: color .2s ease; }
.doc-foot a:hover { color: var(--text); }

/* -- Legal pages --------------------------------------------------------------
   A document, not a landing page: one column, generous leading, and headings
   that only have to be findable while scrolling. */
.doc-head { border-bottom: 1px solid var(--sep); }
.doc { padding: 44px 0 88px; line-height: 1.7; }
.doc h1 {
  margin: 0 0 8px;
  font-size: clamp(26px, 4vw, 34px); line-height: 1.2;
  font-weight: 600;
  color: var(--fg);
}
.doc .updated { margin: 0 0 40px; color: var(--text3); font-size: 13px; }
.doc h2 {
  margin: 40px 0 12px;
  font-size: 17px; font-weight: 600;
  color: var(--fg);
}
.doc p, .doc li, .doc td, .doc th { color: var(--text2); }
.doc p { margin: 0 0 14px; }
.doc ul { margin: 0 0 14px; padding-left: 22px; }
.doc li { margin-bottom: 7px; }
.doc strong { color: var(--text); font-weight: 600; }
/* Underlined rather than coloured. With the accent gone there is no hue left to
   mark a link with, and making them white would put half the sentence at the
   weight of a heading - the rule under the word is what says "this is a link",
   and it fills in on hover. */
.doc a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .28);
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.doc a:hover { color: var(--fg); text-decoration-color: var(--fg); }

.box {
  background: var(--field-bg);
  border: 1px solid var(--panel-br);
  border-radius: var(--radius-card);
  padding: 16px 18px;
  margin: 0 0 14px;
}
.box p:last-child { margin-bottom: 0; }

/* Wide tables scroll inside their own box; the page itself never does. */
.scroll { overflow-x: auto; margin: 0 0 18px; }
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 14.5px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--sep); vertical-align: top; }
th { color: var(--text); font-weight: 600; }

/* -- The OAuth landing (done.html) --------------------------------------------
   The browser tab the Google sign-in ends on. It is the launcher's card, alone
   in the middle of the window, because that is the screen the person is about
   to go back to. */
.done {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.done-card {
  width: 380px; max-width: 100%;
  background: var(--panel);
  border: 1px solid var(--panel-br);
  border-radius: var(--radius-card);
  box-shadow: var(--panel-shadow);
  padding: 34px 30px;
  text-align: center;
  /* The same entrance every scene on the launcher gets (sh-scene-in). */
  animation: scene-in .3s ease;
}
@keyframes scene-in {
  from { opacity: 0; transform: scale(.99) translateY(8px); }
  to { opacity: 1; transform: none; }
}
.done-mark { width: 48px; height: 48px; }
.done-title { margin: 20px 0 0; font-size: 17px; font-weight: 600; color: var(--fg); }
.done-sub { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--dim); }

@media (max-width: 560px) {
  .hero { padding: 48px 0 44px; }
  .cards { padding-bottom: 64px; }
  .site-foot { flex-direction: column; }
}