/* ==========================================================================
   Sidecite website stylesheet
   --------------------------------------------------------------------------
   The palette is ported VERBATIM from the desktop app's theme dictionaries
   (src/Sidecite.Client/Themes/ThemeLight.xaml and ThemeDark.xaml) so the site
   and the app are visibly the same product. If a brush changes in the app,
   change it here too. These two files are one design system in two formats.

   Type is Georgia for display, matching the app's "Wordmark" style
   (Themes/Controls.xaml:237). Georgia ships with Windows and macOS, so there
   is no webfont to host and nothing to break on a slow connection.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* ThemeLight.xaml */
  --bg:            #F5F4EF;
  --panel:         #FDFCF9;
  --panel-alt:     #F0EEE6;
  --hover:         #ECEAE1;
  --border:        #E2DFD4;
  --border-strong: #CFCBBD;

  --fg:            #1F1E1B;
  --fg-dim:        #6E6C63;
  --fg-faint:      #9C998C;

  --accent:         #C6613F;
  --accent-hover:   #B0522F;
  --accent-pressed: #9A4526;
  --accent-soft:    #F6E4DC;
  --on-accent:      #FFFFFF;

  --green-soft: #E2EBDD;
  --green-text: #4F7048;

  /* The soft wash behind the hero. Warm ivory takes a hint of terracotta well;
     warm charcoal does not, so the dark themes set this to transparent and the
     dark hero is flat on purpose. */
  --hero-wash: color-mix(in srgb, var(--accent) 13%, transparent);

  --shadow-sm: 0 1px 2px rgba(31, 30, 27, .05);
  --shadow-md: 0 10px 30px -12px rgba(31, 30, 27, .18);
  --shadow-lg: 0 32px 64px -28px rgba(31, 30, 27, .32);

  /* Layout */
  --measure: 68ch;
  --radius: 14px;
  --radius-sm: 10px;
  --section: 108px;

  --font-body: "Segoe UI Variable Text", "Segoe UI", -apple-system,
               BlinkMacSystemFont, system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;

  color-scheme: light;
}

/* Dark: follows the OS by default, overridable by the toggle. Both selectors
   are required. The [data-theme] attribute must beat the media query in
   BOTH directions or the toggle only works one way. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}

:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  /* placeholder so the cascade order below is predictable */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #262624;
    --panel:         #30302E;
    --panel-alt:     #3A3A37;
    --hover:         #3A3A37;
    --border:        #42413D;
    --border-strong: #55534D;

    --fg:       #F0EEE9;
    --fg-dim:   #B3B0A7;
    --fg-faint: #83817A;

    --accent:         #D97757;
    --accent-hover:   #E08A6E;
    --accent-pressed: #C56745;
    --accent-soft:    #463732;

    --green-soft: #37413A;
    --green-text: #9DBF95;

    --hero-wash: transparent;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 10px 30px -12px rgba(0, 0, 0, .55);
    --shadow-lg: 0 32px 64px -28px rgba(0, 0, 0, .75);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #262624;
  --panel:         #30302E;
  --panel-alt:     #3A3A37;
  --hover:         #3A3A37;
  --border:        #42413D;
  --border-strong: #55534D;

  --fg:       #F0EEE9;
  --fg-dim:   #B3B0A7;
  --fg-faint: #83817A;

  --accent:         #D97757;
  --accent-hover:   #E08A6E;
  --accent-pressed: #C56745;
  --accent-soft:    #463732;

  --green-soft: #37413A;
  --green-text: #9DBF95;

  --hero-wash: transparent;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 10px 30px -12px rgba(0, 0, 0, .55);
  --shadow-lg: 0 32px 64px -28px rgba(0, 0, 0, .75);
}

/* --------------------------------------------------------------------------
   2. Reset + base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.021em;
  line-height: 1.14;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 6.2vw, 4.1rem); }
h2 { font-size: clamp(1.95rem, 3.9vw, 2.7rem); }
h3 { font-size: 1.22rem; letter-spacing: -0.012em; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

a.link {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease;
}
a.link:hover { color: var(--accent); }

code, .mono {
  font-family: "Cascadia Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .875em;
}

::selection { background: var(--accent-soft); color: var(--fg); }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--panel);
  color: var(--fg);
  padding: 12px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  z-index: 200;
}
.skip:focus { left: 16px; top: 16px; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 28px;
}

.wrap-narrow { max-width: 760px; }

.section { padding: var(--section) 0; }
.section-sm { padding: calc(var(--section) * .6) 0; }

.rule { border: 0; border-top: 1px solid var(--border); margin: 0; }

.measure { max-width: var(--measure); }

.center { text-align: center; }
.center .measure { margin-left: auto; margin-right: auto; }

/* NOTE ON --fg-faint. It is the app's faintest ink and it reads at 2.6:1 on
   the light background, which is fine inside .app-window and .panel, which are a
   PICTURE of the app and should match it exactly, and not fine for text a
   visitor is expected to read. Real page copy uses --fg-dim (4.8:1 light,
   7.0:1 dark). Keep that split when adding anything here. */
.eyebrow {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 0 0 18px;
}

.lede {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--fg-dim);
  max-width: 58ch;
}

.dim { color: var(--fg-dim); }
.faint { color: var(--fg-faint); }
.small { font-size: .93rem; }
.tiny { font-size: .82rem; }

/* --------------------------------------------------------------------------
   4. The sparkle
   -------------------------------------------------------------------------- */

/* The mark is the app's own Path geometry (AssistantOrbWindow.xaml:69).
   It is the brand; it stays. */
.sparkle { width: 1em; height: 1em; fill: var(--accent); flex: none; }

/* --------------------------------------------------------------------------
   5. Header / nav
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.site-header.is-stuck { border-bottom-color: var(--border); }

@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: var(--bg); }
}

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
  height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  margin-right: auto;
}
.brand .sparkle { width: 15px; height: 15px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  text-decoration: none;
  color: var(--fg-dim);
  font-size: .93rem;
  transition: color .15s ease;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--fg); }

.nav-actions { display: flex; align-items: center; gap: 12px; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-dim);
  cursor: pointer;
  padding: 0;
  transition: background .15s ease, color .15s ease;
}
.icon-btn:hover { background: var(--hover); color: var(--fg); }
.icon-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .moon { display: block; }
}

.nav-toggle { display: none; }

@media (max-width: 860px) {
  .nav-links {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    padding: 6px 0 12px;
    display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a {
    display: block;
    padding: 13px 28px;
    font-size: 1rem;
  }
  .nav-toggle { display: inline-grid; }
  .nav .btn-sm { display: none; }
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  padding: 15px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease,
              color .15s ease, transform .15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-pressed); }

.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--border-strong);
}
.btn-ghost:hover { background: var(--hover); }

.btn-sm { font-size: .9rem; padding: 10px 18px; }

.btn svg { width: 17px; height: 17px; flex: none; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.center .btn-row { justify-content: center; }

/* A download button whose target has not been configured yet. It stays
   visible and honest rather than pretending to work. See assets/download.js. */
.btn.is-pending {
  background: var(--panel-alt);
  color: var(--fg-faint);
  border-color: var(--border);
  cursor: default;
}
.btn.is-pending:hover { background: var(--panel-alt); }
.btn.is-pending:active { transform: none; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding: 92px 0 0;
  overflow: hidden;
}

/* One soft warm wash behind the hero, and no gradient anywhere else on the
   site. It is transparent in dark mode: over warm charcoal the same terracotta
   reads as an orange haze rather than a lift. */
.hero::before {
  content: "";
  position: absolute;
  top: -32%;
  left: 50%;
  width: min(1500px, 155vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 50%, var(--hero-wash) 0%, transparent 58%);
  pointer-events: none;
  z-index: 0;
}

.hero > .wrap { position: relative; z-index: 1; }

.hero h1 { margin-bottom: 26px; }
.hero .lede { margin: 0 auto 34px; font-size: 1.26rem; }

.platform-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  color: var(--fg-dim);
  margin-top: 22px;
}
.platform-note svg { width: 14px; height: 14px; fill: currentColor; }

.hero-stage {
  margin-top: 78px;
  position: relative;
  display: flex;
  justify-content: center;
  padding-bottom: 8px;
}

/* --------------------------------------------------------------------------
   8. The app figure
   --------------------------------------------------------------------------
   A faithful HTML rendering of the real client window: same surfaces, same
   radii, same copy as MainWindow.xaml. It is an illustration, not a
   screenshot. See web/DEPLOY.md for how to swap in real captures.
   -------------------------------------------------------------------------- */

.app-figure {
  position: relative;
  width: 100%;
  max-width: 430px;
  flex: none;
}

.app-window {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  font-size: 13px;
  line-height: 1.45;
}

.app-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 42px;
  background: var(--bg);
}
.app-titlebar .sparkle { width: 14px; height: 14px; }
.app-title {
  font-family: var(--font-display);
  font-size: 15px;
  margin-right: auto;
}
.app-chrome { display: flex; gap: 14px; color: var(--fg-faint); font-size: 11px; }

.app-body { padding: 4px 14px 14px; }

.app-statusrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0 2px;
}
.status-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--green-text);
  flex: none;
}
.app-statusrow .status-text { color: var(--fg-dim); font-size: 12.5px; }
.app-statusrow .app-btn { margin-left: auto; }

.app-btn {
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 15px;
  border-radius: 18px;
  border: 0;
}

.app-pills { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 0 10px; }
.app-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--fg-dim);
}
.app-pill.is-on {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent);
  font-weight: 600;
}
.app-pill.is-privacy {
  background: var(--green-soft);
  border-color: transparent;
  color: var(--green-text);
  font-weight: 600;
}

.app-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-top: 10px;
}

.app-card-header {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  color: var(--fg-faint);
  margin-bottom: 10px;
}

.cite {
  background: var(--panel-alt);
  border-radius: 10px;
  padding: 11px;
  margin-bottom: 7px;
}
.cite:last-child { margin-bottom: 0; }

.cite-top { display: flex; align-items: flex-start; gap: 8px; }
.cite-title { font-weight: 600; font-size: 13px; flex: 1; }
.cite-badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent);
  flex: none;
}
.cite-badge.is-local { background: var(--green-soft); color: var(--green-text); }
.cite-snippet { color: var(--fg-dim); font-size: 12px; margin: 5px 0; }
.cite-link {
  font-size: 11px;
  color: var(--accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tele-line { font-size: 13px; margin: 3px 0; }
.tele-line + .tele-line { margin-top: 7px; }

/* The orb: the app's collapsed sparkle dot, and the page's only animation. */
.orb {
  position: absolute;
  top: 58px;
  right: -34px;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: var(--accent);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px -4px rgba(0, 0, 0, .38);
  z-index: 2;
}
.orb .sparkle { width: 25px; height: 25px; fill: var(--on-accent); }

.orb::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  opacity: 0;
  animation: orb-pulse 3.6s ease-out infinite;
}

@keyframes orb-pulse {
  0%   { transform: scale(.94); opacity: .55; }
  70%  { transform: scale(1.32); opacity: 0; }
  100% { transform: scale(1.32); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .orb::after { animation: none; }
}

@media (max-width: 560px) {
  .orb { right: -12px; top: 46px; width: 46px; height: 46px; }
  .orb .sparkle { width: 21px; height: 21px; }
}

/* --------------------------------------------------------------------------
   9. Feature rows
   -------------------------------------------------------------------------- */

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 84px;
  align-items: center;
}
.feature + .feature { margin-top: calc(var(--section) * .92); }
.feature.is-flipped .feature-visual { order: -1; }

.feature-text h2 { margin-bottom: 20px; }
.feature-text p { color: var(--fg-dim); max-width: 46ch; }

.feature-visual { display: flex; justify-content: center; }

@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; gap: 44px; }
  .feature.is-flipped .feature-visual { order: 0; }
  .feature-text p { max-width: var(--measure); }
}

/* Small standalone panels used as feature visuals */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 18px;
  width: 100%;
  max-width: 400px;
  font-size: 13px;
}

.chat-row { display: flex; gap: 10px; margin-bottom: 14px; }
.chat-row:last-child { margin-bottom: 0; }
.chat-avatar {
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--accent);
  display: grid; place-items: center;
  flex: none;
}
.chat-avatar .sparkle { width: 13px; height: 13px; fill: var(--on-accent); }
.chat-bubble {
  background: var(--panel-alt);
  border-radius: 12px;
  padding: 10px 13px;
  color: var(--fg-dim);
}
.chat-row.is-user { flex-direction: row-reverse; }
.chat-row.is-user .chat-bubble {
  background: var(--accent-soft);
  color: var(--fg);
}
.chat-row.is-user .chat-avatar {
  background: var(--panel-alt);
  color: var(--fg-dim);
  font-size: 11px;
  font-weight: 600;
}

.steps { list-style: none; margin: 0; padding: 0; }
.steps li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  color: var(--fg-dim);
}
.steps li:last-child { border-bottom: 0; }
.steps .step-n {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--fg-faint);
  width: 18px;
  flex: none;
  padding-top: 1px;
}
.steps .step-done { color: var(--green-text); flex: none; }
.steps .step-done svg { width: 15px; height: 15px; fill: currentColor; }

/* --------------------------------------------------------------------------
   10. Card grids
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--fg-dim); font-size: .96rem; margin: 0; }

.card-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--accent-soft);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.card-icon svg { width: 17px; height: 17px; fill: none; stroke: var(--accent); stroke-width: 1.7; }

/* --------------------------------------------------------------------------
   11. Privacy band
   -------------------------------------------------------------------------- */

.band {
  background: var(--panel);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.claims { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 2px; }
.claims li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 17px 0;
  border-bottom: 1px solid var(--border);
}
.claims li:first-child { border-top: 1px solid var(--border); }
.claims svg { width: 18px; height: 18px; flex: none; margin-top: 4px; fill: none; stroke: var(--accent); stroke-width: 1.7; }
.claims strong { font-weight: 600; }
.claims span { color: var(--fg-dim); display: block; font-size: .96rem; }

/* --------------------------------------------------------------------------
   12. Platforms
   -------------------------------------------------------------------------- */

.platforms { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 42px; }

.platform {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.platform.is-soon { background: transparent; border-style: dashed; }
.platform-glyph { width: 26px; height: 26px; fill: var(--fg); }
.platform.is-soon .platform-glyph { fill: var(--fg-faint); }
.platform h3 { font-size: 1.08rem; }
.platform p { color: var(--fg-dim); font-size: .92rem; margin: 0; }
.platform .status {
  margin-top: auto;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent);
}
.platform.is-soon .status { color: var(--fg-dim); }

/* --------------------------------------------------------------------------
   13. Pricing
   -------------------------------------------------------------------------- */

.tiers {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  margin-top: 52px;
  align-items: stretch;
}

.tier {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.tier.is-featured { border-color: var(--accent); border-width: 2px; padding: 27px; }

.tier-name { font-size: 1.05rem; font-weight: 600; font-family: var(--font-body); }
.tier-price {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  margin: 16px 0 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.tier-price .per { font-family: var(--font-body); font-size: .8rem; color: var(--fg-dim); font-weight: 400; }
.tier-hours { color: var(--accent); font-weight: 600; font-size: .95rem; margin-top: 6px; }
.tier ul {
  list-style: none;
  margin: 22px 0 26px;
  padding: 20px 0 0;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 11px;
  flex: 1;
}
.tier li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--fg-dim);
  font-size: .95rem;
}
.tier li svg { width: 15px; height: 15px; flex: none; margin-top: 4px; fill: none; stroke: var(--accent); stroke-width: 2; }
.tier .btn { width: 100%; }

/* --------------------------------------------------------------------------
   14. Download page
   -------------------------------------------------------------------------- */

.dl-hero { padding: 84px 0 0; text-align: center; }

.dl-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  padding: 40px;
  margin: 46px auto 0;
  max-width: 620px;
  text-align: center;
}
.dl-card .btn { font-size: 1.05rem; padding: 17px 34px; }

.dl-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 20px;
  color: var(--fg-dim);
  font-size: .88rem;
}
.dl-meta span { display: inline-flex; align-items: center; gap: 6px; }
.dl-meta .sep { color: var(--border-strong); }

.hash {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  text-align: left;
}
.hash dt {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 7px;
}
.hash dd {
  margin: 0;
  background: var(--panel-alt);
  border-radius: 8px;
  padding: 11px 13px;
  font-family: "Cascadia Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .76rem;
  word-break: break-all;
  color: var(--fg-dim);
}

.notice {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--panel);
  padding: 22px 26px;
  margin-top: 26px;
}
.notice h3 { font-size: 1.06rem; margin-bottom: 9px; }
.notice p { color: var(--fg-dim); font-size: .95rem; margin: 0; }
.notice p + p { margin-top: .8em; }

.req { list-style: none; margin: 0; padding: 0; }
.req li {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  font-size: .95rem;
}
.req li:last-child { border-bottom: 0; }
.req .k { color: var(--fg-dim); }
.req .v { text-align: right; }

/* --------------------------------------------------------------------------
   15. Prose (privacy / terms)
   -------------------------------------------------------------------------- */

.prose { max-width: var(--measure); }
.prose h2 { font-size: 1.5rem; margin: 52px 0 14px; }
.prose h2:first-of-type { margin-top: 40px; }
.prose h3 { margin: 30px 0 10px; }
.prose p, .prose li { color: var(--fg-dim); }
.prose ul { padding-left: 20px; margin: 0 0 1.05em; }
.prose li { margin-bottom: .5em; }
.prose strong { color: var(--fg); font-weight: 600; }

.page-head { padding: 84px 0 0; }
.page-head h1 { font-size: clamp(2.2rem, 5vw, 3.1rem); }
.page-head .lede { margin-top: 20px; }

/* --------------------------------------------------------------------------
   16. Changelog
   -------------------------------------------------------------------------- */

.release {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 32px;
  padding: 30px 0;
  border-top: 1px solid var(--border);
}
.release:last-child { border-bottom: 1px solid var(--border); }
.release-v {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--fg);
}
.release-v .tag {
  display: block;
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 5px;
}
.release ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.release li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  color: var(--fg-dim);
}
.release li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--border-strong);
  flex: none;
  margin-top: 11px;
}

@media (max-width: 700px) {
  .release { grid-template-columns: 1fr; gap: 12px; }
}

/* --------------------------------------------------------------------------
   16b. The features page: audiences, and the animated sequence
   --------------------------------------------------------------------------
   PERFORMANCE NOTE, because this is the one part of the site that could get
   heavy. Three rules were followed throughout and should stay followed:

     1. Animate ONLY transform, opacity and clip-path. Those are composited on
        the GPU. Animating width, height, top or margin forces layout on every
        frame, which is what makes a page stutter on a cheap laptop or a phone.
     2. Nothing animates unless it is on screen. Each scene gets .is-live from
        an IntersectionObserver and loses it again on the way out, and every
        keyframe below is scoped to .is-live. Scrolled past means stopped, not
        running invisibly.
     3. No scroll event handlers, no requestAnimationFrame loop, no canvas, no
        library. The browser does the work it is already good at.

   The whole page adds roughly 4 KB of CSS and no new requests.
   -------------------------------------------------------------------------- */

/* ---- who it is for ---- */

.aud-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  margin-top: 52px;
}

.aud-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.aud-card h3 { margin-bottom: 8px; }
.aud-card > p {
  color: var(--fg-dim);
  font-size: .95rem;
  margin: 0 0 18px;
}
.aud-card ul {
  list-style: none;
  margin: auto 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 10px;
}
.aud-card li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .92rem;
  color: var(--fg-dim);
}
.aud-card li svg {
  width: 14px; height: 14px;
  flex: none; margin-top: 5px;
  fill: none; stroke: var(--accent); stroke-width: 2.2;
}

.aud-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--accent-soft);
  display: grid; place-items: center;
  margin-bottom: 16px;
}
.aud-icon svg { width: 19px; height: 19px; fill: none; stroke: var(--accent); stroke-width: 1.7; }

/* ---- the sequence ---- */

.sequence { position: relative; }

/* A slim rail of dots showing where you are in the run of scenes. Decorative,
   hidden on narrow screens and from assistive tech. */
.seq-rail {
  position: sticky;
  top: 50vh;
  float: left;
  margin-left: -34px;
  width: 0;
  height: 0;
  z-index: 3;
}
.seq-rail ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 13px;
  transform: translateY(-50%);
}
.seq-rail li {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--border-strong);
  transition: transform .3s ease, background .3s ease;
}
.seq-rail li.is-on {
  background: var(--accent);
  transform: scale(1.55);
}

@media (max-width: 1240px) { .seq-rail { display: none; } }

/* minmax(0, 1fr) rather than 1fr, and it matters. A 1fr track takes its
   minimum from the content's min-content width, and .tline is deliberately
   white-space: nowrap. On a 320px phone that forced the whole column wider
   than the screen and the page scrolled sideways. minmax(0, ...) lets the
   track shrink and lets the ellipsis do its job. */
.scene {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 76px;
  align-items: center;
  padding: 74px 0;
}
.scene.is-flipped .scene-visual { order: -1; }
.scene-text, .scene-visual { min-width: 0; }

.scene-num {
  font-family: var(--font-display);
  font-size: .95rem;
  color: var(--accent);
  margin: 0 0 12px;
}
.scene-text h2 { margin-bottom: 18px; }
.scene-text > p { color: var(--fg-dim); max-width: 46ch; }

.scene-for {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  background: var(--panel-alt);
  font-size: .85rem;
  color: var(--fg-dim);
}
.scene-for svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.8; }
.scene-for strong { color: var(--fg); font-weight: 600; }

.scene-visual { display: flex; justify-content: center; }
.scene-visual .panel { width: 100%; max-width: 400px; }

@media (max-width: 900px) {
  .scene { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 52px 0; }
  .scene.is-flipped .scene-visual { order: 0; }
  .scene-visual { order: -1; }
  .scene-text > p { max-width: none; }
}

/* --------------------------------------------------------------------------
   16c. Scene animations

   Every keyframe here is scoped to .is-live so nothing runs off screen, and
   every one of them moves only transform / opacity / clip-path.
   -------------------------------------------------------------------------- */

/* Shared: a part that rises into place. Delay set per element inline-free via
   nth-child below, so the markup stays clean. */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes pop {
  0%   { opacity: 0; transform: scale(.6); }
  60%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes type {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes bar {
  0%, 100% { transform: scaleY(.25); }
  50%      { transform: scaleY(1); }
}

@keyframes blink {
  0%, 45%   { opacity: 1; }
  50%, 100% { opacity: .15; }
}

@keyframes sweep {
  from { transform: translateX(-110%); }
  to   { transform: translateX(320%); }
}

/* Everything starts invisible only when the script is present to reveal it. */
html.js .anim { opacity: 0; }
html.js .is-live .anim {
  animation: rise .62s cubic-bezier(.22, 1, .36, 1) both;
}

.is-live .anim:nth-child(1) { animation-delay: .05s; }
.is-live .anim:nth-child(2) { animation-delay: .20s; }
.is-live .anim:nth-child(3) { animation-delay: .35s; }
.is-live .anim:nth-child(4) { animation-delay: .50s; }
.is-live .anim:nth-child(5) { animation-delay: .65s; }
.is-live .anim:nth-child(6) { animation-delay: .80s; }

/* ---- the waveform ---- */

.wave {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  margin-bottom: 16px;
}
.wave span {
  flex: 1;
  height: 100%;
  max-width: 5px;
  border-radius: 999px;
  background: var(--accent);
  opacity: .85;
  transform: scaleY(.25);
  transform-origin: center;
}
.is-live .wave span { animation: bar 1.1s ease-in-out infinite; }
.is-live .wave span:nth-child(1) { animation-delay: 0s; }
.is-live .wave span:nth-child(2) { animation-delay: .13s; }
.is-live .wave span:nth-child(3) { animation-delay: .26s; }
.is-live .wave span:nth-child(4) { animation-delay: .07s; }
.is-live .wave span:nth-child(5) { animation-delay: .34s; }
.is-live .wave span:nth-child(6) { animation-delay: .19s; }
.is-live .wave span:nth-child(7) { animation-delay: .41s; }
.is-live .wave span:nth-child(8) { animation-delay: .10s; }
.is-live .wave span:nth-child(9) { animation-delay: .29s; }
.is-live .wave span:nth-child(10) { animation-delay: .16s; }

/* ---- transcript lines ---- */

.tline {
  font-size: 12.5px;
  color: var(--fg-dim);
  padding: 5px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tline.is-new { color: var(--fg); }

html.js .tline { opacity: 0; }
.is-live .tline {
  animation: rise .5s ease both, type .9s steps(34) both;
}
.is-live .tline:nth-of-type(1) { animation-delay: .15s, .15s; }
.is-live .tline:nth-of-type(2) { animation-delay: .75s, .75s; }
.is-live .tline:nth-of-type(3) { animation-delay: 1.35s, 1.35s; }

.saved-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--green-text);
  background: var(--green-soft);
  border-radius: 999px;
  padding: 4px 10px;
}
.saved-tag svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; }
html.js .saved-tag { opacity: 0; }
.is-live .saved-tag { animation: pop .5s cubic-bezier(.22, 1, .36, 1) both; animation-delay: 2.1s; }

/* ---- the said-line, and the citations that answer it ---- */

.said {
  position: relative;
  background: var(--panel-alt);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  margin-bottom: 14px;
  overflow: hidden;
}
.said em { color: var(--fg); font-style: normal; font-weight: 600; }

/* A single light sweep across the card while it "looks something up". */
.said::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 28%;
  background: linear-gradient(90deg, transparent, var(--panel), transparent);
  opacity: 0;
  pointer-events: none;
}
.is-live .said::after {
  animation: sweep 1.15s ease-in-out .55s 1 both;
  opacity: .85;
}

html.js .cite-anim { opacity: 0; }
.is-live .cite-anim { animation: rise .58s cubic-bezier(.22, 1, .36, 1) both; }
.is-live .cite-anim:nth-of-type(1) { animation-delay: 1.5s; }
.is-live .cite-anim:nth-of-type(2) { animation-delay: 1.78s; }

/* A caption above a preview, in the app's italic empty-state voice. */
.stage-caption {
  font-size: .82rem;
  color: var(--fg-dim);
  font-style: italic;
  margin: 0 0 12px;
}

/* ---- the orb unfolding into a chat ---- */

/* .orb is pinned to the hero figure and carries a looping pulse ring. Inside a
   scene it needs to sit in normal flow, and the ring has to go: it would run
   forever, including while the scene is far off screen, which is exactly what
   the performance note above forbids. */
.orb-static {
  position: static;
  margin: 0 auto 18px;
}
.orb-static::after { display: none; }

.unfold { display: flex; flex-direction: column; align-items: center; }

.unfold .orb-static { margin-bottom: 16px; }
html.js .unfold .orb-static { opacity: 0; }
.is-live .unfold .orb-static { animation: pop .55s cubic-bezier(.22, 1, .36, 1) both; }

html.js .unfold .panel { opacity: 0; }
.is-live .unfold .panel {
  animation: rise .6s cubic-bezier(.22, 1, .36, 1) .42s both;
}

html.js .bubble-anim { opacity: 0; }
.is-live .bubble-anim { animation: rise .5s ease both; }
.is-live .bubble-anim:nth-of-type(1) { animation-delay: .95s; }
.is-live .bubble-anim:nth-of-type(2) { animation-delay: 1.9s; }

/* Three dots that think, then hand over to the answer. */
.thinking {
  display: flex;
  gap: 5px;
  padding: 4px 0;
}
.thinking i {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--fg-dim);
  display: block;
}
.is-live .thinking i { animation: blink .9s ease-in-out infinite; }
.is-live .thinking i:nth-child(2) { animation-delay: .18s; }
.is-live .thinking i:nth-child(3) { animation-delay: .36s; }

/* The dots appear after the question, think for a moment, then get out of the
   way just as the answer rises in at 1.9s. One animation on the container
   controls the whole life cycle; the dots inside only blink. */
html.js .thinking { opacity: 0; }
.is-live .thinking { animation: thinking-life 2.1s linear 1.05s both; }

@keyframes thinking-life {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  72%  { opacity: 1; }
  82%  { opacity: 0; }
  100% { opacity: 0; }
}

/* ---- the summary composing itself ---- */

.sum-title {
  font-family: var(--font-display);
  font-size: 15px;
  margin: 0 0 12px;
  white-space: nowrap;
  overflow: hidden;
}
html.js .sum-title { opacity: 0; }
.is-live .sum-title { animation: rise .4s ease both, type 1s steps(30) both; }

.sum-line {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 12.5px;
  color: var(--fg-dim);
  padding: 4px 0;
}
.sum-line::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 999px;
  background: var(--accent);
  flex: none;
  margin-top: 8px;
}
html.js .sum-line { opacity: 0; }
.is-live .sum-line { animation: rise .5s cubic-bezier(.22, 1, .36, 1) both; }
.is-live .sum-line:nth-of-type(1) { animation-delay: 1.05s; }
.is-live .sum-line:nth-of-type(2) { animation-delay: 1.3s; }
.is-live .sum-line:nth-of-type(3) { animation-delay: 1.55s; }
.is-live .sum-line:nth-of-type(4) { animation-delay: 1.8s; }

/* ---- steps ticking off ---- */

.run { list-style: none; margin: 0; padding: 0; }
.run li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--fg-dim);
}
.run li:last-child { border-bottom: 0; }

.run .tick {
  width: 17px; height: 17px;
  border-radius: 999px;
  background: var(--green-soft);
  display: grid; place-items: center;
  flex: none;
}
.run .tick svg { width: 10px; height: 10px; fill: none; stroke: var(--green-text); stroke-width: 3; }

html.js .run li { opacity: 0; }
.is-live .run li { animation: rise .45s cubic-bezier(.22, 1, .36, 1) both; }
.is-live .run li:nth-child(1) { animation-delay: .2s; }
.is-live .run li:nth-child(2) { animation-delay: .55s; }
.is-live .run li:nth-child(3) { animation-delay: .9s; }
.is-live .run li:nth-child(4) { animation-delay: 1.25s; }
.is-live .run li:nth-child(5) { animation-delay: 1.6s; }

html.js .run .tick { opacity: 0; }
.is-live .run .tick { animation: pop .4s cubic-bezier(.22, 1, .36, 1) both; }
.is-live .run li:nth-child(1) .tick { animation-delay: .5s; }
.is-live .run li:nth-child(2) .tick { animation-delay: .85s; }
.is-live .run li:nth-child(3) .tick { animation-delay: 1.2s; }
.is-live .run li:nth-child(4) .tick { animation-delay: 1.55s; }
.is-live .run li:nth-child(5) .tick { animation-delay: 1.9s; }

/* ---- the one accessibility rule that matters here ---- */

/* Someone who has asked their system for less motion gets the finished state
   immediately: everything visible, nothing moving, no exceptions. */
@media (prefers-reduced-motion: reduce) {
  html.js .anim,
  html.js .tline,
  html.js .saved-tag,
  html.js .cite-anim,
  html.js .bubble-anim,
  html.js .sum-title,
  html.js .sum-line,
  html.js .run li,
  html.js .run .tick,
  html.js .unfold .panel,
  html.js .unfold .orb-static,
  html.js .thinking { opacity: 1; }

  .is-live .anim,
  .is-live .tline,
  .is-live .saved-tag,
  .is-live .cite-anim,
  .is-live .bubble-anim,
  .is-live .sum-title,
  .is-live .sum-line,
  .is-live .run li,
  .is-live .run .tick,
  .is-live .unfold .panel,
  .is-live .unfold .orb-static,
  .is-live .wave span,
  .is-live .thinking,
  .is-live .thinking i,
  .is-live .said::after { animation: none !important; }

  .is-live .wave span { transform: scaleY(.6); }
  .seq-rail li { transition: none; }
}

/* --------------------------------------------------------------------------
   17. Closing CTA + footer
   -------------------------------------------------------------------------- */

.cta { text-align: center; }
.cta h2 { margin-bottom: 22px; }
.cta .lede { margin: 0 auto 34px; }

.site-footer {
  border-top: 1px solid var(--border);
  padding: 56px 0 44px;
  font-size: .92rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}
.footer-grid h4 {
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 0 0 16px;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-grid a { color: var(--fg-dim); text-decoration: none; }
.footer-grid a:hover { color: var(--fg); }
.footer-brand p { color: var(--fg-dim); font-size: .89rem; max-width: 34ch; margin-top: 14px; }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  justify-content: space-between;
  align-items: center;
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  color: var(--fg-dim);
  font-size: .86rem;
}

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   18. Reveal on scroll
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1),
              transform .7s cubic-bezier(.22, 1, .36, 1);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* JS-off safety: without the script nothing ever gets .is-in, so only hide
   when we know the script is running. */
html:not(.js) .reveal { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   19. Responsive trims
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  :root { --section: 76px; }
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  .hero { padding-top: 62px; }
  .hero-stage { margin-top: 54px; }
  .dl-card { padding: 28px 22px; }
  .card { padding: 22px; }
  .btn { width: auto; }
}

@media print {
  .site-header, .site-footer, .btn, .hero::before { display: none !important; }
  body { background: #fff; color: #000; }
}