/* ------------------------------------------------------------------ *
 * The token sheet, mirrored from site-v2.css.
 *
 * index.html loads site-v2.css; every other page loads this file and
 * nothing else shared, so the tokens have to reach them from here. The
 * two copies must be kept in step until the site moves to one
 * stylesheet for all 24 pages.
 * ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ *
 * TYPEFACES
 *
 * Both files are served from this origin. Nothing is fetched from
 * fonts.googleapis.com, fonts.gstatic.com, or any other Google host - the
 * company is removing every Google dependency, and a font link is a request
 * to a third party on the critical path either way.
 *
 * Knight AI+AV is our own display serif (copyright Knight AI+AV, fsType 8,
 * editable embedding permitted). It ships one weight, 400, which is also the
 * weight the field sets display type at - Vercel 64/400, Wispr Flow 96/400,
 * Granola 86/400. font-synthesis-weight is off wherever it is used so the
 * browser never fakes a bold on a high-contrast serif.
 *
 * Inter is SIL OFL, Copyright 2016 The Inter Project Authors
 * (https://github.com/rsms/inter). This is the Latin `wght` variable subset,
 * 48 KB for the whole 100-900 range.
 * ------------------------------------------------------------------ */
@font-face {
  font-family: "Knight AI+AV";
  src: url("assets/fonts/knight-display.woff2") format("woff2");
  font-weight: var(--weight-regular);
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "InterVariable";
  src: url("assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* X-226: the stylesheet had NO box-sizing reset, so everything was content-box.
 *
 * That is why the page scrolled sideways on a phone. A button given
 * width: 335px plus 20px of horizontal padding and a hairline border rendered
 * at 377px inside a 375px viewport, and sixteen elements spilled past the edge
 * at 375. The document's scrollWidth was 401 against a clientWidth of 375.
 *
 * Horizontal scroll on a phone is not a cosmetic issue: every vertical swipe
 * near the edge fights the page, and the layout looks broken in a way people
 * do not report, they just leave.
 *
 * This is the standard reset and it belongs at the top of any stylesheet.
 * Measured before and after rather than assumed, because applying it to a
 * stylesheet authored under content-box can shift anything that compensated
 * for the old behaviour.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ------------------------------------------------------------------ *
 * DESIGN TOKENS
 *
 * The one sheet every surface obeys. Nothing below this block ships a raw
 * value: sizes, weights, spacing, radii, shadows and motion all read from
 * here. The audit of 2026-09-03 measured 51 font sizes, 23 weights, 15 radii
 * and 33 shadow recipes on this single page; the numbers below are the whole
 * ladder that replaces them.
 *
 * The --td-* colour tokens that follow are kept under their original names
 * because commerce.js, theme.js and music.js read them. New names are added
 * as aliases, never as renames.
 * ------------------------------------------------------------------ */
:root {
  /* Type scale: eleven hand-set roles, not a modular ratio.
     Every fluid size keeps a rem term inside the clamp, so a 200% browser
     zoom still enlarges the text (WCAG 1.4.4); a pure vw size cancels it. */
  /* The sheet slopes display-1 at 8vw, which assumes the centred full-width
     hero most of the field ships. Ours is a three-panel split: the copy panel
     measures 310px of text at 1280 and 343px at 375, so 8vw runs the headline
     straight off the panel from 1000px up. Measured against that column, 5.4vw
     is the steepest slope that still fits at 1280, 1440 and 1920, and the rem
     floor and 2x range the sheet asks for are both intact. */
  --text-display-1: clamp(3rem, 5.4vw, 6rem);        /* 48 -> 96 */
  --text-display-2: clamp(2.25rem, 5vw, 4rem);       /* 36 -> 64 */
  --text-title-1: 2.5rem;                            /* 40 */
  --text-title-2: 2rem;                              /* 32 */
  --text-title-3: 1.5rem;                            /* 24 */
  --text-title-4: 1.25rem;                           /* 20 */
  --text-body-lg: 1.125rem;                          /* 18 */
  --text-body: 1rem;                                 /* 16 */
  --text-body-sm: 0.875rem;                          /* 14 */
  --text-caption: 0.8125rem;                         /* 13, the floor */
  /* The sheet specifies 12px for uppercase eyebrows. This site enforces a
     hard 13px rendered floor, so the label role sits at the floor and earns
     its distinction from --text-caption through case and tracking instead. */
  --text-label: 0.8125rem;                           /* 13, uppercase +0.06em */

  --leading-display-1: 0.95;
  --leading-display-2: 1;
  --leading-title-1: 1.05;
  --leading-title-2: 1.1;
  --leading-title-3: 1.2;
  --leading-title-4: 1.3;
  --leading-body: 1.55;
  --leading-body-sm: 1.5;
  --leading-caption: 1.45;
  --leading-label: 1.2;

  --tracking-display-1: -0.03em;
  --tracking-display-2: -0.025em;
  --tracking-title-1: -0.02em;
  --tracking-title-2: -0.02em;
  --tracking-title-3: -0.015em;
  --tracking-title-4: -0.01em;
  --tracking-body: 0;
  --tracking-label: 0.06em;

  /* Weight: four values, chosen once. */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-display: 680;

  /* Spacing: 4px base, 8px rhythm. Nothing takes a value off this list. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 96px;
  --space-11: 128px;
  --space-section: clamp(64px, 8vw, 128px);

  /* Radius: six values. An inner radius is the outer radius minus the padding
     between them; a capsule's radius is half its height. */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Elevation: layered, hue-matched to the ground (#070909 is hsl(180 13% 3%)),
     never black. Offset up, blur up, opacity down; one light direction.
     shadow-1 rests a card, shadow-2 lifts a menu, shadow-3 floats a modal.
     shadow-inset is a single hairline - it is not a bevel and never pairs
     with a hard colour ledge. */
  --shadow-hsl: 180 13% 3%;
  --shadow-1:
    0 1px 1px hsl(var(--shadow-hsl) / 0.06),
    0 2px 2px hsl(var(--shadow-hsl) / 0.06);
  --shadow-2:
    0 1px 1px hsl(var(--shadow-hsl) / 0.05),
    0 2px 2px hsl(var(--shadow-hsl) / 0.05),
    0 4px 4px hsl(var(--shadow-hsl) / 0.05),
    0 8px 8px hsl(var(--shadow-hsl) / 0.05);
  --shadow-3:
    0 2px 2px hsl(var(--shadow-hsl) / 0.04),
    0 4px 4px hsl(var(--shadow-hsl) / 0.04),
    0 8px 8px hsl(var(--shadow-hsl) / 0.04),
    0 16px 16px hsl(var(--shadow-hsl) / 0.04),
    0 32px 32px hsl(var(--shadow-hsl) / 0.04);
  --shadow-inset: inset 0 1px 0 hsl(0 0% 100% / 0.04);

  /* Motion: five durations, five curves. Ease-out on entrances, ease-in on
     exits only; exits run shorter than the entrance they undo. */
  --motion-instant: 80ms;
  --motion-fast: 150ms;
  --motion-base: 220ms;
  --motion-slow: 320ms;
  --motion-exit: 160ms;
  --ease-instant: cubic-bezier(0.2, 0, 0, 1);
  --ease-fast: cubic-bezier(0, 0, 0, 1);
  --ease-base: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-slow: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-exit: cubic-bezier(0.3, 0, 1, 1);

  --td-carbon: #070909;
  --td-carbon-soft: #0d1112;
  --td-clay: #191b1b;
  --td-clay-raised: #242626;
  --td-bone: #f4eddd;
  --td-bone-soft: #ded3c1;
  --td-ink: #111313;
  --td-ember: #f05432;
  --td-ember-dark: #a42f1f;
  --td-cyan: #2ed9cd;
  /* X-225: was #087d7a, which measures 4.26 on the cream ground it is used on
     (.platform-state "Available"). Darkened to clear 4.5 without changing hue. */
  --td-cyan-dark: #06615f;
  --td-brass: #d7b466;
  --td-muted: #aaa397;
  --td-line: rgba(244, 237, 221, 0.17);
  --td-line-dark: rgba(17, 19, 19, 0.18);
  /* Aliases: the old names stay so nothing that reads them breaks, but they
     now resolve to the tokens above rather than to their own recipes. */
  --td-shadow: var(--shadow-3);
  --td-bubble-texture: url("assets/roman-clay-material.webp");
  --td-ease: var(--ease-base);
  /* Two self-hosted faces, no third-party host of any kind. Bahnschrift,
     Aptos, Aptos Display and Segoe are gone: all four are Windows-only, so
     until now a Mac or iPhone visitor fell through to generic sans-serif and
     the site had no typeface at all on the two platforms we sell apps for.
     --td-display is the house serif and is reserved for h1, h2 and section
     titles; everything else - buttons, eyebrows, chips, body - uses --td-ui. */
  --td-display: "Knight AI+AV", "InterVariable", system-ui, -apple-system, sans-serif;
  --td-ui: "InterVariable", system-ui, -apple-system, sans-serif;
  --td-body: var(--td-ui);
  color-scheme: dark;
}

/* The base layer the landing pages share with the homepage: the browser bolds
   <strong> at 700 and sizes <small> at 0.8333em, both outside the ladder, and
   h1/h2 are the display face's territory. The serif ships one weight, so the
   browser is told not to invent a second one. */
h1,
h2 {
  font-family: var(--td-display);
  font-weight: var(--weight-regular);
  font-synthesis-weight: none;
}

h3,
h4,
h5,
h6 {
  font-weight: var(--weight-semibold);
}

strong,
b {
  font-weight: var(--weight-semibold);
}

small {
  font-size: var(--text-caption);
}

/* The product name is one word to a reader; it must not break mid-name. */
.brand-lock {
  white-space: nowrap;
}

:root {
  --td-download-carbon: #0b0e0f;
  --td-download-bone: #f4eddd;
  --td-download-muted: #aaa397;
  --td-download-gold: #d7b466;
  --td-download-cyan: #2ed9cd;
  --td-download-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

body {
  padding-bottom: 88px !important;
}

a,
button,
summary {
  -webkit-tap-highlight-color: transparent;
}

.nav a,
.nav button,
footer a {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav a,
.nav button,
.global-download-link,
.global-footer-downloads a,
.global-site-download-bar a,
.global-site-download-bar button,
.global-qr-close {
  touch-action: manipulation;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--td-download-cyan) !important;
  outline-offset: 3px !important;
}

.footer-helm {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.global-download-nav {
  position: fixed;
  z-index: 85;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.nav .global-download-link,
.global-download-nav .global-download-link {
  min-width: 132px;
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 12px !important;
  color: var(--td-download-bone) !important;
  border: 1px solid rgba(244, 237, 221, 0.3) !important;
  border-radius: var(--radius-md) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.1)), #15191a !important;
  box-shadow: var(--shadow-2) !important;
  font: var(--weight-medium) var(--text-caption)/1 var(--td-ui) !important;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--motion-fast) var(--ease-fast), background-color var(--motion-fast) var(--ease-fast), transform var(--motion-base) var(--td-download-ease), box-shadow var(--motion-base) var(--td-download-ease);
}

.nav .global-download-link.is-preferred,
.global-download-nav .global-download-link.is-preferred {
  color: #111313 !important;
  border-color: #fff8e9 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.07)), var(--td-download-bone) !important;
}

.global-download-short {
  display: none;
}

.global-download-link:focus-visible,
.global-site-download-bar a:focus-visible,
.global-site-download-bar button:focus-visible,
.global-footer-downloads a:focus-visible {
  outline: 3px solid var(--td-download-cyan) !important;
  outline-offset: 3px !important;
}

.global-footer-downloads {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 16px 0;
}

.global-footer-downloads a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  color: var(--td-download-bone) !important;
  border: 1px solid rgba(244, 237, 221, 0.28);
  border-radius: var(--radius-md);
  background: #141819;
  font: var(--weight-medium) var(--text-caption)/1 var(--td-ui);
  text-decoration: none;
  transition: border-color var(--motion-fast) var(--ease-fast), background-color var(--motion-fast) var(--ease-fast), transform var(--motion-base) var(--td-download-ease), box-shadow var(--motion-base) var(--td-download-ease);
}

.global-footer-downloads a.is-preferred {
  color: #111313 !important;
  border-color: var(--td-download-bone);
  background: var(--td-download-bone);
}

.global-site-download-bar {
  position: fixed;
  z-index: 78;
  right: 14px;
  bottom: 14px;
  left: 14px;
  width: min(720px, calc(100vw - 28px));
  min-height: 62px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  color: var(--td-download-bone);
  border: 1px solid rgba(244, 237, 221, 0.2);
  border-radius: var(--radius-lg);
  background: rgba(10, 13, 14, 0.95);
  box-shadow: var(--shadow-3);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  transition: opacity var(--motion-fast) var(--ease-fast), transform var(--motion-base) var(--ease-base), visibility var(--motion-fast) linear;
}

body.global-download-guard-in-view .global-site-download-bar,
body.global-download-control-in-view .global-site-download-bar {
  visibility: hidden;
  opacity: 0;
  transform: translateY(calc(100% + 24px));
  pointer-events: none;
}

.global-site-download-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding-inline: 6px;
}

.global-site-download-copy strong,
.global-site-download-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-site-download-copy strong {
  color: var(--td-download-bone);
  font: var(--weight-medium) var(--text-caption)/1.08 var(--td-ui);
}

.global-site-download-copy small {
  color: var(--td-download-muted);
  font: var(--weight-medium) var(--text-caption)/1.1 var(--td-ui);
}

.global-site-download-bar > a,
.global-site-download-mobile > a,
.global-site-download-mobile > button {
  min-width: 84px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  color: var(--td-download-bone);
  border: 1px solid rgba(244, 237, 221, 0.28);
  border-radius: var(--radius-md);
  background: #171b1c;
  font: var(--weight-medium) var(--text-caption)/1 var(--td-ui);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-fast), background-color var(--motion-fast) var(--ease-fast), transform var(--motion-base) var(--td-download-ease), box-shadow var(--motion-base) var(--td-download-ease);
}

.global-site-download-bar > a.is-preferred {
  color: #111313;
  border-color: var(--td-download-bone);
  background: var(--td-download-bone);
}

.global-site-download-mobile {
  display: none;
}

.global-qr-dialog {
  width: min(92vw, 430px);
  padding: 0;
  color: var(--td-download-bone);
  border: 1px solid rgba(244, 237, 221, 0.2);
  border-radius: var(--radius-xl);
  background: var(--td-download-carbon);
  box-shadow: var(--shadow-3);
}

.global-qr-dialog::backdrop {
  background: rgba(3, 5, 5, 0.78);
  backdrop-filter: blur(8px);
}

.global-qr-surface {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 13px;
  padding: 34px 30px 30px;
  text-align: center;
}

.global-qr-surface h2 {
  max-width: 12ch;
  margin: 0;
  color: var(--td-download-bone);
  font: var(--weight-display) var(--text-title-1)/0.98 var(--td-ui);
  letter-spacing: -0.03em;
}

.global-qr-surface p {
  max-width: 34ch;
  margin: 0;
  color: var(--td-download-muted);
  font-size: var(--text-body-sm);
  line-height: 1.45;
}

.global-qr-surface img {
  width: min(62vw, 232px);
  height: auto;
  padding: 12px;
  border-radius: var(--radius-lg);
  background: #fff;
}

.global-qr-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  color: var(--td-download-bone);
  border: 1px solid rgba(244, 237, 221, 0.25);
  border-radius: 50%;
  background: #15191a;
  font-size: var(--text-title-4);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-fast), background-color var(--motion-fast) var(--ease-fast), transform var(--motion-base) var(--td-download-ease), box-shadow var(--motion-base) var(--td-download-ease);
}

@media (hover: hover) and (pointer: fine) {
  .global-download-link:hover,
  .global-footer-downloads a:hover,
  .global-site-download-bar > a:hover,
  .global-site-download-mobile > a:hover,
  .global-site-download-mobile > button:hover,
  .global-qr-close:hover {
    border-color: rgba(244, 237, 221, 0.56) !important;
    background-color: #202627 !important;
    box-shadow: var(--shadow-2) !important;
    transform: translateY(-1px);
  }

  .global-download-link.is-preferred:hover,
  .global-footer-downloads a.is-preferred:hover,
  .global-site-download-bar > a.is-preferred:hover {
    color: #111313 !important;
    border-color: #fff !important;
    background-color: #fff8e9 !important;
  }
}

.global-download-link:active,
.global-footer-downloads a:active,
.global-site-download-bar > a:active,
.global-site-download-mobile > a:active,
.global-site-download-mobile > button:active,
.global-qr-close:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-inset) !important;
}

@media (max-width: 1180px) {
  .nav .global-download-long,
  .global-download-nav .global-download-long {
    display: none;
  }

  .nav .global-download-short,
  .global-download-nav .global-download-short {
    display: inline;
  }

  .nav .global-download-link,
  .global-download-nav .global-download-link {
    min-width: 72px;
  }
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  body {
    padding-bottom: 84px !important;
  }

  .global-site-download-bar {
    right: 10px;
    bottom: 10px;
    left: 10px;
    width: auto;
    min-height: 58px;
    border-radius: var(--radius-lg);
  }

  .global-site-download-mobile > a,
  .global-site-download-mobile > button {
    width: 100%;
    min-width: 0;
  }
}

:root[data-download-audience="mobile"] .global-site-download-bar {
  grid-template-columns: 1fr;
}

:root[data-download-audience="mobile"] .global-site-download-copy,
:root[data-download-audience="mobile"] .global-site-download-bar > a {
  display: none;
}

:root[data-download-audience="mobile"] .global-site-download-mobile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 7px;
}

@media (max-width: 390px) {
  .nav .global-download-link,
  .global-download-nav .global-download-link {
    min-width: 62px;
    padding-inline: 8px !important;
    font-size: var(--text-caption) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .global-download-link,
  .global-site-download-bar,
  .global-site-download-bar a,
  .global-site-download-bar button {
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .global-download-link,
  .global-footer-downloads a,
  .global-site-download-bar,
  .global-site-download-bar a,
  .global-site-download-bar button,
  .global-qr-dialog {
    color: CanvasText !important;
    border-color: CanvasText !important;
    background: Canvas !important;
    box-shadow: none !important;
  }
}

/* ------------------------------------------------------------------ *
 * NAV: ONE PRIMARY CTA, EVERY PAGE
 *
 * Same rule as the homepage. download-everywhere.js already marks the
 * visitor's own platform with .is-preferred; that link is the one filled
 * button and the other OS is a quiet text link beside it. Sign in is a
 * destination, not an action. Nothing here changes an href, an aria-label
 * or a data attribute.
 * ------------------------------------------------------------------ */
.nav .global-download-link,
.global-download-nav .global-download-link {
  min-width: 0;
  color: var(--td-download-muted) !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.nav .global-download-link:hover,
.nav .global-download-link:focus-visible,
.global-download-nav .global-download-link:hover,
.global-download-nav .global-download-link:focus-visible {
  color: var(--td-download-bone) !important;
  background: rgba(244, 237, 221, 0.08) !important;
}

.nav .global-download-link.is-preferred,
.global-download-nav .global-download-link.is-preferred {
  order: 1;
  min-width: 132px;
  color: #111313 !important;
  border: 1px solid #fff8e9 !important;
  background: var(--td-download-bone) !important;
  font-weight: var(--weight-semibold) !important;
}

.nav .global-download-link.is-preferred:hover,
.nav .global-download-link.is-preferred:focus-visible,
.global-download-nav .global-download-link.is-preferred:hover,
.global-download-nav .global-download-link.is-preferred:focus-visible {
  color: #111313 !important;
  background: #fff8e9 !important;
}

.nav .nav-helm {
  order: 2;
}

/* On a phone the two installers step aside for the one link that works
   there. download-everywhere.js inserts .nav-get only for a phone visitor. */
.nav .nav-get {
  order: 1;
  min-width: 132px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  color: #111313 !important;
  border: 1px solid #fff8e9;
  border-radius: var(--radius-md);
  background: var(--td-download-bone);
  font: var(--weight-semibold) var(--text-caption)/1 var(--td-ui);
  text-decoration: none;
  white-space: nowrap;
}

.nav .nav-get:hover,
.nav .nav-get:focus-visible {
  color: #111313 !important;
  background: #fff8e9;
}

.nav .nav-get ~ .global-download-link {
  display: none !important;
}

.nav .nav-signin {
  min-height: 44px;
  color: var(--td-download-muted);
  border: 0;
  background: none;
  box-shadow: none;
  font-weight: var(--weight-medium);
}

.nav .nav-signin:hover,
.nav .nav-signin:focus-visible {
  color: var(--td-download-bone);
  background: rgba(244, 237, 221, 0.08);
}

/* X-765: the trademark credit every footer carries, on its own row under
   the links. The content pages' footers are one flex row, so they wrap. */
footer .shell {
  flex-wrap: wrap;
}

.footer-trademarks {
  flex: 0 0 auto;
  width: 100%;
  max-width: 78ch;
  margin: 0 max(0px, calc(100% - 78ch)) 0 0;
  font-size: 12px;
  line-height: 1.55;
}