/* ---------------------------------------------------------------------------
   Teleza — one stylesheet for every page on teleza.app.
   Tokens and chrome live here; page-specific layout stays inline in the page
   that uses it. The policy page used to carry its own copy of all of this and
   there was nothing keeping the two in step, which is the whole reason this
   file exists.
   --------------------------------------------------------------------------- */

/* Figtree — the same three weights the app ships (see teleza/pubspec.yaml).
   Self-hosted rather than pulled from Google: these files must not change
   under the site without someone deciding they should. */
@font-face{font-family:'Figtree';src:url('/fonts/Figtree-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url('/fonts/Figtree-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url('/fonts/Figtree-ExtraBold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}

/* Design tokens lifted from teleza/lib/app/core/theme.dart — one ink, one
   paper, no chrome colour. The app is light in every context and does not
   follow the device, so this site does not either. */
:root{
  --gutter:20px;
  --bar-h:56px;
  --ink:#111111;
  --ink-2:rgba(17,17,17,.55);
  --ink-3:rgba(17,17,17,.45);
  --surface:#FFFFFF;
  --muted:#F7F6F4;
  --canvas:#F4F3F1;
  --divider:rgba(17,17,17,.10);
  --border:rgba(17,17,17,.14);
  --on-ink:#FFFFFF;
  --on-ink-2:rgba(255,255,255,.70);
  --on-ink-3:rgba(255,255,255,.54);
  --track:#ECEAE6;
  --scrim:rgba(17,17,17,.6);

  --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --shadow-card:0 6px 20px rgba(17,17,17,.10);

  --max:1180px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-weight:600;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
@media (min-width:720px){body{font-size:17px}}

a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
img{max-width:100%}

/* ------------------------------------------------------------------ layout */
/* width:100% is not redundant. On the pages whose <body> or <main> is a flex
   container, an auto cross-axis margin switches stretch off, and the block
   silently shrink-to-fits its own text instead of filling the column — so it
   has to be given the width explicitly and let max-width cap it. */
.wrap{
  width:100%;max-width:var(--max);margin:0 auto;
  padding:0 max(var(--gutter),env(safe-area-inset-right)) 0 max(var(--gutter),env(safe-area-inset-left));
}

/* The one-line label that opens most blocks on the site. */
.eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 18px;
}

.pill{
  border:1px solid var(--border);border-radius:var(--r-pill);
  padding:7px 14px;font-size:12.5px;font-weight:700;color:var(--ink-2);background:var(--surface);
}
.pill b{color:var(--ink);font-weight:800}

/* ------------------------------------------------------------------ chrome */
.bar{
  position:sticky;top:0;z-index:30;
  background:rgba(244,243,241,.86);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--divider);
}
.bar-in{
  max-width:var(--max);margin:0 auto;
  padding:6px max(var(--gutter),env(safe-area-inset-right)) 6px max(var(--gutter),env(safe-area-inset-left));
  display:flex;align-items:center;gap:12px;
}
.wordmark{
  display:flex;align-items:center;gap:10px;min-height:44px;margin-right:auto;
  font-weight:800;letter-spacing:-.4px;font-size:16px;
  -webkit-tap-highlight-color:transparent;
}
/* The app's own mark — the fan over a pin, measured off the 512 px store
   icon (21 Sep 2026) and drawn as one evenodd path in currentColor, so it
   inverts with whatever card it sits on. The badge is a disc: that is the
   shape the mark takes wherever it appears as an image. */
.glyph{
  width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--on-ink);
  display:grid;place-items:center;flex:none;
}
.glyph svg{width:13px;height:auto;display:block;fill:currentColor}

/* Site links in the bar. Hidden on the narrowest phones, where the download
   button is the only thing that has to survive. */
.bar-nav{display:none;align-items:center;gap:4px}
@media (min-width:600px){.bar-nav{display:flex}}
.bar-nav a{
  padding:10px 14px;border-radius:var(--r-pill);
  font-size:13.5px;font-weight:700;color:var(--ink-2);
}
.bar-nav a:hover{color:var(--ink);background:var(--surface)}
.bar-nav a[aria-current]{color:var(--ink)}

/* ----------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 22px;
  border-radius:var(--r-pill);border:1px solid transparent;
  font-family:inherit;font-size:15px;font-weight:800;letter-spacing:-.2px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .12s ease,background-color .16s ease,border-color .16s ease;
}
.btn svg{width:17px;height:17px;display:block;flex:none;fill:currentColor}
.btn:active{transform:scale(.98)}
.btn-ink{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.btn-ink:hover{background:#000}
.btn-line{background:var(--surface);color:var(--ink);border-color:var(--border)}
.btn-line:hover{border-color:var(--ink)}
/* On an inverted card the roles swap. */
.on-ink .btn-ink{background:var(--on-ink);color:var(--ink);border-color:var(--on-ink)}
.on-ink .btn-ink:hover{background:#f2f2f2}
.on-ink .btn-line{background:transparent;color:var(--on-ink);border-color:rgba(255,255,255,.34)}
.on-ink .btn-line:hover{border-color:var(--on-ink)}
.btn-sm{min-height:40px;padding:0 16px;font-size:13.5px}

/* ------------------------------------------------------------------ footer */
/* See .wrap above for why the width is stated: the download and 404 pages put
   their <body> in a flex column, where `margin:0 auto` alone leaves the footer
   the width of its own text, centred, while every block above it stays full
   width. */
footer{
  width:100%;max-width:var(--max);margin:0 auto;color:var(--ink-3);
  padding:0 max(var(--gutter),env(safe-area-inset-right)) 72px max(var(--gutter),env(safe-area-inset-left));
  font-size:13px;font-weight:600;
}
.foot-in{
  border-top:1px solid var(--divider);padding-top:28px;
  display:flex;flex-wrap:wrap;gap:16px 28px;justify-content:space-between;align-items:baseline;
}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot-links a{font-weight:700;color:var(--ink-2)}
.foot-links a:hover{color:var(--ink)}
/* Sits in the footer row alongside the other links, so it shares their
   baseline rather than carrying padding of its own. */
.top{display:inline-block;font-weight:700;color:var(--ink-2)}
.top:hover{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.001ms !important;animation-duration:.001ms !important}
}