/* rocky.so design system.
 *
 * One stylesheet for every page: the landing page, the download page, and the
 * prose pages (privacy, terms, licenses, contact). The site is dark-only by
 * design — it is the same near-black surface Rocky's own overlays use, so the
 * site and the app read as one product. There is deliberately no light theme
 * and no `prefers-color-scheme` branch.
 */

/* ---------- Fonts ----------
   Self-hosted rather than linked from fonts.googleapis.com. Embedding Google's
   stylesheet would send every visitor's IP address to Google on first paint,
   which the privacy policy does not disclose and which a privacy-first product
   should not need. Both families are SIL Open Font License 1.1 (credited on
   /licenses), so serving the files ourselves is permitted.

   These are variable fonts: one file covers the whole 400–700 range, so
   requesting a new weight in the CSS below costs no extra download. */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  --background: #0d0d0d;
  --card: #151515;
  --card-inner: #1d1d1d;
  --border: #242424;
  --text: #f2f2f0;
  --muted: #9a9a96;
  --faint: #969692;
  --accent: #4f7cff;
  --danger: #ff7a6b;

  --font-display: "Instrument Sans", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;

  --radius-large: 16px;
  --radius-medium: 12px;
  --radius-small: 8px;

  /* Wide layouts (landing sections, footer) and the narrow measure the prose
     pages read at. */
  --content-width: 1000px;
  --content-width-wide: 1120px;
  --prose-width: 720px;

  /* The sticky header's height, used as scroll-margin so an in-page anchor
     never lands underneath it. */
  --header-height: 62px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* Painting the same near-black on the root element stops a white flash
     above the body when the page is over-scrolled. */
  background: var(--background);
  scroll-behavior: smooth;
  color-scheme: dark;
}

body {
  min-height: 100vh;
  background: var(--background);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
  touch-action: manipulation;
}

h1, h2, h3 { text-wrap: balance; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 16px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--text);
  color: var(--background);
  border-radius: var(--radius-small);
  transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }

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

[id] {
  scroll-margin-top: calc(var(--header-height) + 28px);
}

.container {
  width: min(100% - 48px, var(--content-width));
  margin-inline: auto;
}

.container-wide {
  width: min(100% - 48px, var(--content-width-wide));
  margin-inline: auto;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Translucent rather than opaque so the hero's glow continues up behind it
     instead of stopping at a hard line. */
  background: color-mix(in srgb, var(--background) 55%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 14px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
}

/* The monochrome stone (now only the toast mock) is inlined as an SVG rather
   than masked from an external file: a CSS mask clips the stone's outer
   stroke against the default mask region, which rounds off the carved
   corners. Inline, it is drawn in currentColor and inherits whatever color
   its container carries. */
.wordmark-mark {
  width: 19px;
  height: 19px;
  flex: none;
}

/* The aurora lockup in the header and footer: the mark with its rim glow
   baked into /rocky-mark-glow.svg (an <img>, so the CSS-mask clipping caveat
   above does not apply). The box is oversized and pulled back in with
   negative margins so the stone itself keeps the 19px optical size — the
   extra room is the glow's breathing space, and the glow overlapping the
   neighboring text is additive light, not occlusion. */
.wordmark-mark-glow {
  width: 29px;
  height: 29px;
  margin: -5px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 30px;
}

.site-nav {
  display: flex;
  gap: 20px;
  font-size: 13.5px;
  color: var(--muted);
}

.site-nav a {
  transition: color 0.15s ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--text);
}

.mobile-navigation { display: none; }

.text-link,
.feature-link,
.section-note a {
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-color: #ffffff60;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.text-link { padding: 12px 8px; }

.feature-link {
  align-self: flex-start;
  margin-top: 18px;
  font-size: 13px;
}

.text-link:hover,
.feature-link:hover,
.section-note a:hover { text-decoration-color: var(--text); }

/* ---------- Buttons ---------- */
.button-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border: none;
  border-radius: 999px;
  background: var(--text);
  color: #0a0a0a;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.button-primary:hover {
  background: #dededa;
}

/* The compact pill in the header. Same shape as .button-primary, one size
   down, so the header stays quieter than the page. */
.nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--text);
  color: #0a0a0a;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.nav-cta:hover {
  background: #dededa;
}

/* Keycap, used inline in body copy to name a shortcut. */
.kbd {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid #ffffff24;
  /* The heavier bottom edge is what reads as a physical key. */
  border-bottom-width: 2px;
  border-radius: 6px;
  background: #1c1c20;
  color: #cfcfcb;
  font-family: inherit;
  font-size: 11px;
}

/* ---------- Hero backdrop ----------
   A layer stack behind the hero only: drifting particles, two static radial
   glows, slow orbit arcs, and grain over the top. Each layer fades itself out
   toward the bottom so the backdrop dissolves into the page rather than
   ending on an edge. Masking the whole stack instead would force the
   compositor to rebuild the masked layer on every animated frame. */
.hero-wrap {
  position: relative;
}

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

.hero-backdrop {
  /* Extends above the wrap so the glow continues behind the translucent
     sticky header instead of starting as a hard line at its bottom edge. */
  position: absolute;
  inset: -80px 0 0;
  overflow: hidden;
  pointer-events: none;
}

.backdrop-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.backdrop-glow i {
  position: absolute;
  display: block;
}

.backdrop-glow .glow-primary {
  left: 50%;
  top: -160px;
  width: 920px;
  height: 600px;
  transform: translateX(-50%);
  /* The eased multi-stop gradient is already soft; a blur() filter on top
     only added GPU cost, not smoothness. */
  background: radial-gradient(ellipse at center, rgba(79, 124, 255, 0.15) 0%, rgba(79, 124, 255, 0.07) 38%, rgba(79, 124, 255, 0.02) 58%, transparent 72%);
}

.backdrop-glow .glow-secondary {
  left: 12%;
  top: -80px;
  width: 640px;
  height: 440px;
  background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.10) 0%, rgba(139, 92, 246, 0.045) 40%, rgba(139, 92, 246, 0.015) 58%, transparent 72%);
}

/* Grain sits above the color layers and dithers both the glow gradients and
   its own fade-out ramp, so neither bands against the near-black page. It is
   static, so the mask composites once rather than per animation frame. */
.backdrop-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: 0.05;
  mask-image: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0, 0, 0, 0.85) 64%, rgba(0, 0, 0, 0.6) 74%, rgba(0, 0, 0, 0.35) 83%, rgba(0, 0, 0, 0.16) 90%, rgba(0, 0, 0, 0.05) 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0, 0, 0, 0.85) 64%, rgba(0, 0, 0, 0.6) 74%, rgba(0, 0, 0, 0.35) 83%, rgba(0, 0, 0, 0.16) 90%, rgba(0, 0, 0, 0.05) 95%, transparent 100%);
}

/* ---------- Hero ---------- */
.hero {
  padding-top: 104px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 17px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #111111;
  color: var(--muted);
  font-size: 13px;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.badge:hover {
  border-color: #3a3a3a;
  color: var(--text);
}

.badge .badge-arrow {
  color: var(--faint);
}

.hero h1 {
  margin-top: 30px;
  font-family: var(--font-display);
  font-size: clamp(44px, 6.5vw, 76px);
  font-weight: 500;
  letter-spacing: -0.038em;
  line-height: 1.04;
  /* A soft vertical fade keeps the big headline from reading flat. */
  background: linear-gradient(180deg, #ffffff 55%, #b9b9b4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-lede {
  max-width: 680px;
  margin-top: 26px;
  color: var(--muted);
  font-size: clamp(18px, 1.9vw, 23px);
  line-height: 1.35;
}

.hero-lede strong {
  color: var(--text);
  font-weight: 500;
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
}

.cta-caption {
  margin-top: 18px;
  color: var(--faint);
  font-size: 12px;
}

/* ---------- Hero video ---------- */
.hero-demo { margin-top: 68px; }

.hero-video {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-large);
  background:
    radial-gradient(ellipse 80% 60% at 70% 20%, #23262e 0%, transparent 60%),
    linear-gradient(160deg, #1a1c22 0%, #101114 55%, #0c0c0e 100%);
}

.hero-video-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The big play button. The <button> covers the whole poster, so a click
   anywhere on the thumbnail starts the video; the circle in the middle is the
   visible affordance and the only part that reacts to hover. */
.hero-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: #0a0a0a;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* The button ships with the hidden attribute and landing.js reveals it. The
   display value above would otherwise override the browser's own [hidden]
   rule and show a button that cannot work without script. */
.hero-video-play[hidden] { display: none; }

.hero-video-play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--text);
  box-shadow:
    0 0 0 1px #00000026,
    0 12px 36px #00000073;
  transition:
    transform 0.15s ease,
    background-color 0.15s ease;
}

.hero-video-play-icon svg {
  width: 36px;
  height: 36px;
}

.hero-video-play:hover .hero-video-play-icon {
  transform: scale(1.06);
  background: #ffffff;
}

.hero-video-play:active .hero-video-play-icon {
  transform: scale(0.98);
}

/* The global focus ring would wrap the whole poster and be clipped by the
   rounded frame, so the ring goes around the circle instead. */
.hero-video-play:focus-visible {
  outline: none;
}

.hero-video-play:focus-visible .hero-video-play-icon {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.hero-video-caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
}

/* ---------- Sections ---------- */
.page-section {
  padding-top: 120px;
}

.section-heading h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.section-heading p {
  max-width: 560px;
  margin-top: 10px;
  color: var(--muted);
  font-size: clamp(16px, 2vw, 24px);
  line-height: 1.35;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 32px;
}

.pricing-card {
  padding: 32px;
  border-radius: var(--radius-large);
  background: var(--card);
}

.pricing-card .eyebrow {
  margin-top: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.pricing-card h3 {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.025em;
}

.pricing-card h3 span {
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: 0;
}

.pricing-card h3 s {
  margin-inline: 6px;
  color: var(--muted);
  font-size: 26px;
  text-decoration-thickness: 1.5px;
}

.pricing-card p,
.pricing-card ul {
  margin-top: 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.pricing-card ul { padding-left: 18px; }
.pricing-card li + li { margin-top: 8px; }

.pricing-card .pricing-promo {
  margin-top: 10px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.section-note {
  max-width: 740px;
  margin-top: 20px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.section-note a { color: var(--text); }

/* ---------- Stat cards ---------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 32px;
}

.stat-card {
  padding: 34px 24px;
  border-radius: var(--radius-medium);
  background: var(--card);
  text-align: center;
  transition: transform 0.25s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-card .stat-value {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.stat-card .stat-label {
  margin-top: 8px;
  color: var(--faint);
  font-size: 12.5px;
}

/* ---------- Feature rows ---------- */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 36px;
}

/* No outline: the card is read from its own fill against the page, and a row
   is not interactive, so there is nothing for a hover border to promise. */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  min-height: 260px;
  border-radius: var(--radius-large);
  background: var(--card);
}

.feature-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 38px 36px;
}

.feature-copy h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.feature-copy p {
  max-width: 360px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
}

.feature-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--card-inner);
}

/* ---------- Feature illustrations ----------
   Each is a small CSS drawing of the surface the row describes. They are
   aria-hidden decoration: the row's copy carries the meaning. */
.mock-window-layout {
  width: 100%;
  max-width: 320px;
}

.window-command {
  margin-bottom: 14px;
  color: var(--text);
  font-size: 13px;
}

.window-desktop {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, 1fr);
  gap: 7px;
  aspect-ratio: 16 / 9;
  padding: 10px;
  border-radius: 12px;
  background: #101013;
  box-shadow: 0 16px 40px #00000040;
}

.window-tile {
  min-width: 0;
  padding: 10px;
  border-radius: 6px;
  background: #25282f;
  color: #d9d9d5;
  font-size: 11px;
  overflow: hidden;
}

.window-tile-tall {
  grid-row: span 2;
}

.window-tile-accent {
  background: #20354c;
  color: #c5e1ff;
}

.window-tile i {
  display: block;
  width: 85%;
  height: 4px;
  margin-top: 10px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.16;
}

.window-tile i:last-child {
  width: 58%;
}

.window-caption {
  margin-top: 12px;
  color: var(--muted);
  font-size: 11px;
}

.mock-toast {
  width: 100%;
  max-width: 320px;
  padding: 14px;
  border-radius: 12px;
  background: #101013;
  box-shadow: 0 16px 40px #00000070;
  font-size: 12px;
}

.mock-toast .toast-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.mock-toast .toast-head .wordmark-mark {
  width: 13px;
  height: 13px;
}

.mock-toast .toast-body {
  margin-top: 9px;
  color: #d9d9d5;
  line-height: 1.5;
}

/* Rocky's on-screen annotation, drawn as one SVG because a curved arrow with
   a head is geometry, not a box. Every stroke is a token colour so it stays
   the same blue as the rest of the page. */
.mock-annotation {
  width: 100%;
  max-width: 320px;
  height: auto;
}

.mock-annotation .anno-window {
  fill: #101013;
}

.mock-annotation .anno-row {
  fill: #26262a;
}

.mock-annotation .anno-row-target {
  fill: #2a3350;
}

.mock-annotation .anno-ring {
  fill: #4f7cff14;
  stroke: var(--accent);
  stroke-width: 1.6;
}

/* The tie between the ring and the word for it — dashed, so it reads as a
   leader line rather than as another arrow. */
.mock-annotation .anno-leader {
  fill: none;
  stroke: #4f7cff66;
  stroke-width: 1.2;
  stroke-dasharray: 3 3;
}

.mock-annotation .anno-label-box {
  fill: #12141c;
  stroke: #4f7cff55;
  stroke-width: 1;
}

.mock-annotation .anno-label {
  fill: #cfd8ff;
  font-family: var(--font-body);
  font-size: 11px;
  text-anchor: middle;
}

.mock-annotation .anno-arrow {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
}

.mock-annotation .anno-arrow-head {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mock-dictation {
  width: 100%;
  max-width: 320px;
  padding: 14px;
  border-radius: 12px;
  background: #101013;
  font-size: 12px;
}

/* The field keeps a fill rather than an outline, so it still reads as
   somewhere text is being typed. */
.mock-dictation .field {
  padding: 10px 12px;
  border-radius: var(--radius-small);
  background: #1c1c20;
  color: #d9d9d5;
  line-height: 1.5;
}

.mock-dictation .caret {
  display: inline-block;
  width: 1.5px;
  height: 13px;
  background: var(--accent);
  vertical-align: -2px;
  animation: caret-blink 1.1s steps(1) 4;
}

@keyframes caret-blink {
  50% { opacity: 0; }
}

.mock-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  color: var(--faint);
  font-size: 11px;
}

.mock-steps {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  max-width: 320px;
  font-size: 12px;
}

.mock-steps .step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #101013;
  color: var(--muted);
}

.mock-steps .tick {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #1d3324;
  color: #58d67c;
  font-size: 10px;
}

.mock-steps .step.pending .tick {
  background: #26262a;
  color: var(--faint);
}

.mock-steps .step.active {
  border-color: #4f7cff44;
  color: #d9d9d5;
}

.mock-steps .step.active .tick {
  background: #22304f;
  color: var(--accent);
}

.mock-clipboard {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  max-width: 320px;
  font-size: 12px;
}

.mock-clipboard .clip-row {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #101013;
  color: var(--muted);
  white-space: nowrap;
}

.mock-clipboard .clip-row.selected {
  border-color: #4f7cff44;
  color: #d9d9d5;
}

/* The small uppercase label on a row of one of the list mocks. Shared, so a
   clipboard kind and a library kind cannot drift apart. */
.mock-kind {
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 5px;
  background: #1a1a1e;
  color: var(--faint);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mock-walkthrough {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  max-width: 320px;
  font-size: 12px;
}

.mock-walkthrough .walk-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #101013;
  color: var(--faint);
}

.mock-walkthrough .walk-index {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #26262a;
  color: var(--faint);
  font-size: 10px;
}

.mock-walkthrough .walk-step.done {
  color: var(--muted);
}

.mock-walkthrough .walk-step.done .walk-index {
  background: #1d3324;
  color: #58d67c;
}

/* The step the user is on: the only one carrying the accent, so the eye lands
   on "where am I" before it reads any of the words. */
.mock-walkthrough .walk-step.current {
  border-color: #4f7cff44;
  background: #12141c;
  color: #d9d9d5;
}

.mock-walkthrough .walk-step.current .walk-index {
  background: #22304f;
  color: var(--accent);
}

.mock-walkthrough .walk-step.current em {
  margin-left: auto;
  color: var(--accent);
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
}

.mock-action {
  width: 100%;
  max-width: 300px;
  padding: 16px;
  border-radius: 12px;
  background: #101013;
  box-shadow: 0 16px 40px #00000070;
  font-size: 12px;
}

.mock-action .action-label {
  color: var(--faint);
  font-size: 11px;
}

.mock-action .action-title {
  margin-top: 6px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
}

.mock-action .action-detail {
  margin-top: 5px;
  color: var(--muted);
}

.mock-action .action-receipt {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 11px;
}

.mock-action .action-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  font-size: 10px;
}

.mock-memory {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 320px;
  font-size: 12px;
}

/* A search field with a query already in it, because the point of the row is
   that a kept screenshot is findable, not that a list exists. */
.mock-memory .memory-search {
  padding: 8px 12px;
  border: 1px solid #4f7cff44;
  border-radius: 8px;
  background: #12141c;
  color: #d9d9d5;
}

.mock-memory .memory-row {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #101013;
  color: var(--muted);
  white-space: nowrap;
}

/* ---------- Capability list ----------
   The short "and a few more things" grid. One line each: anything that needs
   two lines belongs in a feature row instead. */
.capability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin-top: 36px;
  list-style: none;
}

.capability {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 16px;
  border-radius: var(--radius-medium);
  background: var(--card);
  color: var(--muted);
  font-size: 14px;
}

/* The accent dot is drawn rather than typed, so it never joins the text a
   screen reader announces. */
.capability::before {
  content: "";
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- FAQ ----------
   Native <details>, so the accordion works with no JavaScript at all and
   keyboard and screen-reader behaviour comes free. */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 36px;
}

.faq-item {
  border-radius: var(--radius-medium);
  background: var(--card);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  list-style: none;
}

/* Safari draws its own disclosure triangle through a pseudo-element the
   list-style rule above does not reach. */
.faq-item summary::-webkit-details-marker {
  display: none;
}

/* The open/closed indicator: a plus that rotates into an x. */
.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  color: var(--faint);
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.2s ease, color 0.2s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
  color: var(--accent);
}

.faq-answer {
  padding: 0 22px 20px;
  color: var(--muted);
  font-size: 14px;
  max-width: 640px;
}

.faq-answer a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #ffffff40;
}

.faq-answer a:hover {
  text-decoration-color: var(--accent);
}

/* ---------- Closing call to action ---------- */
.final-cta {
  position: relative;
  overflow: hidden;
  margin-top: 120px;
  padding: 130px 24px 150px;
  text-align: center;
}

/* A hand-placed starfield rather than a canvas: it never animates, so a
   static gradient stack is cheaper than a script. */
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 1.5px at 20% 30%, #ffffff2f 99%, transparent),
    radial-gradient(circle 1px at 35% 60%, #ffffff22 99%, transparent),
    radial-gradient(circle 1.5px at 55% 25%, #ffffff30 99%, transparent),
    radial-gradient(circle 1px at 70% 55%, #ffffff26 99%, transparent),
    radial-gradient(circle 1.5px at 82% 35%, #ffffff2c 99%, transparent),
    radial-gradient(circle 1px at 15% 75%, #ffffff1f 99%, transparent),
    radial-gradient(circle 1px at 48% 80%, #ffffff24 99%, transparent),
    radial-gradient(circle 1.5px at 88% 72%, #ffffff28 99%, transparent),
    radial-gradient(ellipse 55% 45% at 50% 60%, #1b2030 0%, transparent 70%);
}

.final-cta > * {
  position: relative;
}

.final-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.5vw, 38px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.final-cta .button-primary {
  margin-top: 26px;
}

.final-cta .shortcut-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 52px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #101013cc;
  color: var(--muted);
  font-size: 12px;
}

/* ---------- Prose pages ----------
   Download, contact, privacy, terms, licenses. A narrower measure, larger
   body text than the landing page, and rules between sections. */
.prose-main {
  width: min(100% - 48px, var(--prose-width));
  margin-inline: auto;
  /* Hold the footer at the bottom of short pages (the header and footer are
     each roughly 4.5rem tall). */
  min-height: calc(100vh - 14rem);
  padding-block: 72px 96px;
}

.prose-hero {
  margin-bottom: 44px;
}

.prose-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 56px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.06;
  background: linear-gradient(180deg, #ffffff 55%, #b9b9b4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.prose-hero .prose-lede {
  max-width: 34em;
  margin-top: 18px;
  color: var(--muted);
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.5;
}

.prose-hero .prose-lede strong {
  color: var(--text);
  font-weight: 500;
}

.effective-date {
  margin-top: 14px;
  color: var(--faint);
  font-size: 13px;
}

/* The plain-language box above a legal document. */
.summary-card {
  margin-bottom: 40px;
  padding: 22px 24px;
  border-radius: var(--radius-medium);
  background: var(--card);
  color: var(--muted);
  font-size: 14px;
}

.summary-card p + p {
  margin-top: 12px;
}

.summary-card strong {
  color: var(--text);
  font-weight: 600;
}

.prose-section {
  padding-block: 32px;
  border-top: 1px solid var(--border);
}

.prose-section h2 {
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.prose-section h3 {
  margin: 26px 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.prose-section p,
.prose-section li {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

.prose-section p {
  margin-bottom: 14px;
}

.prose-section p:last-child {
  margin-bottom: 0;
}

.prose-section strong {
  color: var(--text);
  font-weight: 600;
}

.prose-section ul,
.prose-section ol {
  margin: 12px 0 18px;
  padding-left: 20px;
}

.prose-section li + li {
  margin-top: 8px;
}

/* Links inside running prose need an underline to be findable; the rest of
   the site relies on position and color instead. */
.prose-section a,
.summary-card a,
.prose-lede a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: #ffffff40;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.15s ease;
}

.prose-section a:hover,
.summary-card a:hover,
.prose-lede a:hover {
  text-decoration-color: var(--text);
}

.prose-section code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--card-inner);
  color: #d9d9d5;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.88em;
}

/* An aside that should read as a note rather than as body copy. */
.note-card {
  margin-top: 40px;
  padding: 22px 24px;
  border-radius: var(--radius-medium);
  background: var(--card);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.note-card p + p {
  margin-top: 12px;
}

.note-card strong {
  color: var(--text);
  font-weight: 600;
}

.note-card a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: #ffffff40;
  text-underline-offset: 0.2em;
}

.note-card a:hover {
  text-decoration-color: var(--text);
}

/* ---------- Download page ---------- */
.download-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}

.download-meta {
  margin-top: 16px;
  color: var(--faint);
  font-size: 13px;
}

.download-steps {
  margin: 40px 0 0;
  padding-left: 20px;
}

.download-steps li {
  margin-bottom: 10px;
  color: var(--muted);
  line-height: 1.7;
}

.download-steps strong {
  color: var(--text);
  font-weight: 600;
}

/* ---------- Contact page ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.contact-card {
  padding: 26px 24px;
  border-radius: var(--radius-medium);
  background: var(--card);
  transition: transform 0.25s ease;
}

.contact-card:hover {
  transform: translateY(-2px);
}

.contact-card h2 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.contact-card p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}

.contact-card .contact-address {
  display: inline-block;
  margin-top: 16px;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: #ffffff40;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.15s ease;
}

.contact-card .contact-address:hover {
  text-decoration-color: var(--text);
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 56px 0 40px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 24px;
}

.footer-brand .wordmark {
  margin-bottom: 12px;
}

.footer-brand p {
  color: var(--faint);
  font-size: 12px;
}

.footer-column h2 {
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.footer-column a {
  display: block;
  margin-bottom: 8px;
  color: var(--faint);
  font-size: 12.5px;
  transition: color 0.15s ease;
}

.footer-column a:hover {
  color: var(--text);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid #1a1a1a;
  color: var(--faint);
  font-size: 11.5px;
}

.footer-legal a {
  color: inherit;
}

.footer-legal a:hover {
  color: var(--muted);
}

/* ---------- Scroll reveal ----------
   The .reveal class is added by script, so with JavaScript unavailable every
   element stays visible. Per-sibling delays arrive as --reveal-delay. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

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

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-video-play-icon {
    transition: none;
  }

  .hero-video-play:hover .hero-video-play-icon {
    transform: none;
  }

  .mock-dictation .caret {
    animation: none;
  }
}

/* ---------- Narrow screens ---------- */
@media (max-width: 860px) {
  .site-nav { display: none; }
  .header-right { gap: 12px; }

  .mobile-navigation {
    display: block;
    position: relative;
  }

  .mobile-navigation summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 12px;
    border-radius: var(--radius-small);
    list-style: none;
    font-size: 14px;
    cursor: pointer;
    touch-action: manipulation;
  }

  .mobile-navigation summary::-webkit-details-marker { display: none; }
  .mobile-navigation summary:hover,
  .mobile-navigation[open] summary { background: var(--card-inner); }

  .mobile-navigation nav {
    position: absolute;
    top: calc(100% + 8px);
    right: -104px;
    width: min(320px, calc(100vw - 32px));
    padding: 12px;
    border-radius: var(--radius-medium);
    background: var(--card-inner);
    box-shadow: 0 16px 40px #00000070;
  }

  .mobile-navigation nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: var(--radius-small);
    color: var(--text);
  }

  .mobile-navigation nav a:hover { background: #303030; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }
}

@media (max-width: 720px) {
  .container,
  .container-wide,
  .prose-main {
    width: min(100% - 32px, var(--content-width));
  }

  .site-nav {
    display: none;
  }

  .hero {
    padding-top: 64px;
  }

  .hero-demo { margin-top: 48px; }

  .hero-video-play-icon {
    width: 64px;
    height: 64px;
  }

  .hero-video-play-icon svg {
    width: 28px;
    height: 28px;
  }

  /* One column: the two-up capability grid puts three words on a line at
     phone width, which reads as a broken layout rather than a short list. */
  .capability-grid {
    grid-template-columns: 1fr;
  }

  .faq-item summary {
    padding: 16px 18px;
    font-size: 15px;
  }

  .faq-answer {
    padding: 0 18px 18px;
  }

  .page-section {
    padding-top: 88px;
  }

  .stat-row {
    grid-template-columns: 1fr;
  }

  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card { padding: 26px 24px; }

  .feature-row {
    grid-template-columns: 1fr;
  }

  /* Without this the visual of a flipped row would sit above its copy on
     mobile, breaking the read-then-look rhythm every other row. */
  .feature-row.flipped .feature-visual {
    order: 2;
  }

  .final-cta {
    margin-top: 88px;
    padding: 88px 24px 100px;
  }

  .prose-main {
    padding-block: 48px 72px;
  }
}