/* ==========================================================================
   Fluentry — a dark-first product page.
   The accent is Ubuntu orange; the ground is a deep neutral so the accent
   is the only saturated thing on the page and always means "the product".
   ========================================================================== */

:root {
  --bg: #0e0e10;
  --bg-raised: #17171a;
  --surface: #1c1c20;
  --surface-hi: #232329;
  --line: #2a2a31;
  --line-soft: #202027;
  --text: #f4f4f5;
  --text-dim: #a1a1aa;
  --text-faint: #71717a;
  --accent: #f44b18;
  --accent-soft: #ff6a3d;
  --accent-ink: #ffffff;
  --good: #3fb950;
  --warn: #d29922;

  --radius: 14px;
  --radius-lg: 20px;
  --maxw: 1080px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --display: "Ubuntu", "Ubuntu Sans", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", "Ubuntu Mono", ui-monospace, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #fbfbfa;
    --bg-raised: #ffffff;
    --surface: #ffffff;
    --surface-hi: #f4f4f2;
    --line: #e4e4e0;
    --line-soft: #ededea;
    --text: #18181b;
    --text-dim: #52525b;
    --text-faint: #8b8b93;
    --good: #1a7f37;
    --warn: #9a6700;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; }
:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 16px;
  border-radius: 8px;
  z-index: 100;
}
.skip:focus { left: 12px; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* --- top bar ------------------------------------------------------------ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease);
}
.topbar.scrolled { border-bottom-color: var(--line); }
.topbar .wrap { display: flex; align-items: center; gap: 14px; height: 62px; }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-family: var(--display); letter-spacing: -0.01em; }
.brand-mark { display: block; height: 21px; width: auto; }

.topnav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.topnav a { color: var(--text-dim); text-decoration: none; font-size: 0.93rem; transition: color 0.2s; }
.topnav a:hover { color: var(--text); }
@media (max-width: 720px) { .topnav a.hide-sm { display: none; } }

.ghost {
  border: 1px solid var(--line);
  padding: 7px 14px;
  border-radius: 9px;
  font-weight: 600;
}
.ghost:hover { border-color: var(--accent); color: var(--text); }

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

.hero { position: relative; padding: 96px 0 72px; }
.hero::before {
  content: "";
  position: absolute;
  inset: -20% 0 auto 50%;
  transform: translateX(-50%);
  width: min(1100px, 130vw);
  height: 680px;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 72%);
  filter: blur(20px);
  pointer-events: none;
  z-index: -1;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 6px 13px;
  border-radius: 999px;
  text-decoration: none;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.eyebrow:hover { border-color: var(--accent); }

h1 {
  font-family: var(--display);
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 26px 0 0;
  max-width: 24ch;
  font-weight: 700;
  text-wrap: balance;
}
h1 .accent { color: var(--accent); }

.lead {
  font-size: clamp(1.08rem, 2.2vw, 1.3rem);
  color: var(--text-dim);
  max-width: 54ch;
  margin: 22px 0 0;
}

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 11px;
  text-decoration: none;
  font-weight: 650;
  font-size: 0.97rem;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: transform 0.18s var(--ease), border-color 0.2s, background 0.2s;
}
.btn:hover { transform: translateY(-2px); border-color: var(--accent); }
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}
.btn-primary:hover { background: var(--accent-soft); border-color: var(--accent-soft); }

.hero-meta { margin-top: 20px; font-size: 0.87rem; color: var(--text-faint); display: flex; gap: 18px; flex-wrap: wrap; }

/* --- the dictation demo ------------------------------------------------- */

.demo {
  margin-top: 56px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-raised) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6);
}
.demo-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-hi);
}
.demo-bar .pip { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.demo-bar .label { margin-left: 8px; font-size: 0.8rem; color: var(--text-faint); font-family: var(--mono); }

.demo-body { padding: 30px 26px 34px; display: grid; gap: 26px; }
@media (min-width: 780px) { .demo-body { grid-template-columns: 1fr auto 1fr; align-items: start; } }

.demo-pane .tag {
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 700;
  display: block;
  margin-bottom: 12px;
}
.demo-pane p { margin: 0; font-size: 1.05rem; line-height: 1.6; }
.spoken { color: var(--text-dim); }
.spoken .filler { color: var(--text-faint); text-decoration: line-through; text-decoration-color: var(--accent); }
.spoken .cmd { color: var(--accent); font-weight: 600; }
.typed { font-weight: 550; }
.typed .caret {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--accent);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: blink 1.1s steps(2, start) infinite;
}
@keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

.demo-arrow { display: flex; justify-content: center; color: var(--text-faint); padding-top: 34px; }
@media (max-width: 779px) { .demo-arrow svg { transform: rotate(90deg); } }

.wave { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-top: 18px; }
.wave span {
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
  opacity: 0.85;
  animation: pulse 1.15s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { height: 18%; }
  50% { height: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .wave span, .typed .caret { animation: none; }
  .wave span { height: 55%; }
}

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

section { padding: 84px 0; }
section + section { border-top: 1px solid var(--line-soft); }

.sec-head { max-width: 58ch; margin-bottom: 44px; }
.sec-head .kicker {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
h2 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.6vw, 2.5rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 12px 0 0;
  font-weight: 700;
  text-wrap: balance;
}
.sec-head p { color: var(--text-dim); margin: 14px 0 0; font-size: 1.05rem; }

/* --- feature grid ------------------------------------------------------- */

.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  transition: transform 0.25s var(--ease), border-color 0.25s;
}
.card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.card .ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  margin-bottom: 16px;
}
.card h3 { margin: 0 0 7px; font-size: 1.05rem; font-weight: 650; letter-spacing: -0.01em; }
.card p { margin: 0; color: var(--text-dim); font-size: 0.95rem; line-height: 1.6; }

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

/* The tabs do nothing without scripting, so they stay hidden until app.js
   claims them and every shot simply stacks instead. */
.shot-tabs { display: none; }
.shots.tabbed .shot-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 22px;
  padding-bottom: 2px;
}
.shots.tabbed .shot-tabs::-webkit-scrollbar { display: none; }

.shot-tab {
  flex: none;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-family: var(--body);
  font-size: 0.88rem;
  font-weight: 550;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.shot-tab:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
/* A tab strip needs an unmistakable current item, so this one is filled
   rather than tinted — the same treatment the primary button gets. */
.shot-tab[aria-selected="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 650;
}
.shot-tab[aria-selected="true"]:hover { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-ink); }

.shot { margin: 0; }
.shot + .shot { margin-top: 40px; }
.shots.tabbed .shot + .shot { margin-top: 0; }

.shot-frame {
  background: var(--surface-hi);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6);
}
/* The same chrome as the hero's demo, so the two read as one family. */
.shot-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.shot-bar .pip { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.shot-bar .label { margin-left: 8px; font-size: 0.8rem; color: var(--text-faint); font-family: var(--mono); }

/* `block` kills the inline descender gap under the image. */
.shot-scroll img { display: block; width: 100%; height: auto; }

/* A 1120px-wide desktop window shrunk to a phone is unreadable, so below
   that the shot keeps a legible width and pans instead — the same answer
   the wide tables get. The chrome above it stays put. */
@media (max-width: 720px) {
  .shot-scroll { overflow-x: auto; }
  .shot-scroll img { width: 680px; max-width: none; }
}

.shot figcaption {
  margin-top: 16px;
  color: var(--text-dim);
  font-size: 0.95rem;
  max-width: 68ch;
}

/* --- the overlay, shown on its own -------------------------------------- */

.pill-show {
  margin-top: 56px;
  display: grid;
  gap: 28px;
  align-items: center;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
}
@media (min-width: 860px) { .pill-show { grid-template-columns: 1fr 1fr; gap: 40px; } }

.pill-copy h3 { margin: 0; font-family: var(--display); font-size: 1.35rem; letter-spacing: -0.02em; font-weight: 700; }
.pill-copy p { margin: 12px 0 0; color: var(--text-dim); font-size: 0.97rem; line-height: 1.65; }

.pill-art { display: block; }
.pill-art img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin-inline: auto;
  /* It is a translucent pill with no frame of its own; the shadow is what
     lifts it off the page. */
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45));
}

/* --- install ------------------------------------------------------------ */

.code {
  position: relative;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 0.88rem;
  line-height: 1.85;
  overflow: hidden;
}
.code pre { margin: 0; padding: 22px 60px 22px 22px; overflow-x: auto; }
.code .c { color: var(--text-faint); }
.code .p { color: var(--accent); user-select: none; }
.copy {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--surface-hi);
  border: 1px solid var(--line);
  color: var(--text-dim);
  border-radius: 8px;
  padding: 6px 11px;
  font-size: 0.76rem;
  font-family: var(--body);
  cursor: pointer;
  transition: all 0.18s;
}
.copy:hover { color: var(--text); border-color: var(--accent); }
.copy.done { color: var(--good); border-color: var(--good); }

.extras { margin-top: 22px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.extra { display: flex; gap: 10px; align-items: baseline; font-size: 0.9rem; color: var(--text-dim); }
.extra code { color: var(--accent); font-family: var(--mono); font-size: 0.85rem; }

/* --- tables ------------------------------------------------------------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: 0.93rem; min-width: 520px; }
thead th {
  text-align: left;
  padding: 14px 18px;
  color: var(--text-faint);
  font-weight: 650;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--surface-hi);
  border-bottom: 1px solid var(--line);
}
tbody td { padding: 15px 18px; border-bottom: 1px solid var(--line-soft); vertical-align: top; color: var(--text-dim); }
tbody tr:last-child td { border-bottom: none; }
tbody td:first-child { color: var(--text); font-weight: 550; }
tbody td code, .status code { font-family: var(--mono); font-size: 0.86em; color: var(--accent); }

.status { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 0.86rem; }
.status.ok { color: var(--good); }
.status.part { color: var(--warn); }

/* --- privacy list ------------------------------------------------------- */

.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.checks li { display: flex; gap: 14px; align-items: flex-start; color: var(--text-dim); }
.checks svg { flex: none; margin-top: 3px; color: var(--good); }
.checks strong { color: var(--text); font-weight: 600; }

/* --- closing ------------------------------------------------------------ */

.closing { text-align: center; padding: 96px 0; }
.closing h2 { max-width: 20ch; margin-inline: auto; }
.closing .actions { justify-content: center; }

footer { border-top: 1px solid var(--line); padding: 40px 0 60px; color: var(--text-faint); font-size: 0.88rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
footer a { color: var(--text-dim); text-decoration: none; }
footer a:hover { color: var(--accent); }
footer .sep { margin-left: auto; }

/* --- reveal on scroll --------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .card:hover, .btn:hover { transform: none; }
}

/* A caveat under a code block: quieter than body text, never a warning. */
.sec-note {
  margin: 18px 0 0;
  color: var(--text-dim);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 68ch;
}
.sec-note code { font-family: var(--mono); font-size: 0.86em; color: var(--accent); }

/* A quieter sub-line inside a table cell, for a parenthetical. */
.muted-note { color: var(--text-faint); font-size: 0.82em; }

/* --- ambient sound-field ------------------------------------------------- */
/* A voice app deserves a background that moves like sound. The canvas is
   painted just above the page's base colour and below every band of
   content, so the waves show through the transparent gaps (richest behind
   the hero) while cards and the sticky bar keep their own opaque
   backgrounds and stay perfectly legible. */
#fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  /* Fades the field out toward the foot of the viewport so long-form text
     lower down is never competing with motion. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 92%);
          mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 92%);
  opacity: 0.9;
  transition: opacity 0.6s var(--ease);
}
#main, footer { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { #fx { opacity: 0.7; } }