/*
 * Jim AI — public site (D-055, D-059).
 *
 * Built against the design system in `Jim AI/design_handoff_jim_ai_site/`.
 * The token block below is that system's `tokens/*.css` inlined rather than
 * `@import`ed, deliberately: the build copies this one file and fingerprints
 * it by content hash, so an @import would resolve to a URL that is never
 * published and every token would fall back to nothing.
 *
 * Two readers have to be served at once and they want different things:
 * someone deciding whether to sign up, and a carrier reviewer checking that
 * specific required sentences are present. The design leans marketing; the
 * legal pages stay plain and high-contrast, because a reviewer skim-reading
 * for "message and data rates may apply" should not have to fight the layout.
 *
 * Motion is opt-out. `site.js` sets `animation: jimReveal ...` on each section
 * as it scrolls in, so the keyframe lives here and every animated rule is
 * cancelled under `prefers-reduced-motion`. The script also declines to touch
 * anything when that query matches, so the two halves agree.
 */

/* ==========================================================================
   Tokens — from the design system. Do not invent values outside this block.
   ========================================================================== */

:root {
  /* Brand */
  --jim-lime: #b9ff2e;
  --jim-lime-hover: #d4ff7a;
  --jim-lime-16: rgba(185, 255, 46, 0.16);
  --jim-lime-26: rgba(185, 255, 46, 0.26);

  /* Neutrals — near-black gym palette */
  --jim-ink-900: #08090c;
  --jim-ink-850: #0a0c10;
  --jim-ink-800: #0b0d12;
  --jim-ink-750: #0d0f14;
  --jim-ink-700: #0e1015;
  --jim-ink-600: #16181d;
  --jim-ink-500: #1a1d25;
  --jim-line: #1c1f27;
  --jim-line-strong: #23262e;
  --jim-key: #3a3f47;
  --jim-key-alt: #2b3037;

  /* Text */
  --jim-text-1: #f2f3f5;
  --jim-text-2: #d3d7de;
  --jim-text-3: #9ba1ad;
  --jim-text-4: #6e7684;
  --jim-text-5: #565d6a;
  --jim-text-6: #454c58;

  /* Semantic aliases */
  --surface-page: var(--jim-ink-900);
  --surface-card: var(--jim-ink-800);
  --surface-raised: var(--jim-ink-700);
  --surface-footer: var(--jim-ink-850);
  --border-default: var(--jim-line);
  --border-strong: var(--jim-line-strong);
  --accent: var(--jim-lime);
  --accent-hover: var(--jim-lime-hover);
  --on-accent: var(--jim-ink-900);
  --text-body: var(--jim-text-3);
  --text-heading: var(--jim-text-1);
  --text-muted: var(--jim-text-4);
  --text-legal: var(--jim-text-5);

  --grad-card: linear-gradient(180deg, #0d0f14 0%, #0a0c10 100%);
  --grad-card-accent: linear-gradient(180deg, rgba(18, 22, 14, 0.86) 0%, rgba(11, 13, 18, 0.82) 70%);
  --grad-hero-scrim: linear-gradient(
    100deg,
    #08090c 0%,
    rgba(8, 9, 12, 0.93) 34%,
    rgba(8, 9, 12, 0.62) 60%,
    rgba(8, 9, 12, 0.55) 100%
  );
  --grad-page-top: radial-gradient(120% 60% at 50% -10%, #14161c 0%, #08090c 60%);

  /* Type */
  --font-sans: Archivo, Helvetica, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --type-hero: 800 68px/0.98 var(--font-sans);
  --type-hero-tracking: -0.035em;
  --type-h2: 800 42px/1.05 var(--font-sans);
  --type-h2-tracking: -0.03em;
  --type-h3: 700 27px/1.2 var(--font-sans);
  --type-h4: 700 22px/1.25 var(--font-sans);
  --type-price: 800 44px/1 var(--font-sans);
  --type-lead: 400 19px/1.55 var(--font-sans);
  --type-body: 400 16px/1.6 var(--font-sans);
  --type-body-sm: 400 15px/1.6 var(--font-sans);
  --type-legal: 400 12px/1.7 var(--font-sans);
  --type-eyebrow: 500 11px/1.2 var(--font-mono);
  --type-eyebrow-tracking: 0.14em;
  --type-data: 500 13px/1.4 var(--font-mono);
  --type-stat: 800 18px/1.15 var(--font-sans);

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-11: 44px;
  --space-14: 56px;
  --space-18: 72px;
  --space-24: 96px;
  --space-28: 110px;
  --page-max: 1200px;
  --prose-max: 860px;
  --page-gutter: var(--space-10);
  --grid-gap: var(--space-5);
  --section-pad-y: var(--space-28);

  /* Effects */
  --radius-sm: 5px;
  --radius-md: 12px;
  --radius-card: 20px;
  --radius-panel: 24px;
  --radius-pill: 999px;
  --radius-phone: 56px;
  --border-1: 1px solid var(--border-default);
  --border-accent: 1px solid var(--accent);
  --shadow-phone: 0 60px 100px -34px rgba(0, 0, 0, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  --shadow-key: 0 1px 0 rgba(0, 0, 0, 0.5);
  --blur-card: blur(8px);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 160ms;
  --dur-med: 300ms;
  --dur-slow: 620ms;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface-page);
  background-image: var(--grad-page-top);
  background-repeat: no-repeat;
  color: var(--text-body);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  animation: jimPageIn 300ms var(--ease-out) both;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--text-heading);
}

h1 {
  font: var(--type-hero);
  letter-spacing: var(--type-hero-tracking);
}

h2 {
  font: var(--type-h2);
  letter-spacing: var(--type-h2-tracking);
}

h3 {
  font: var(--type-h3);
  letter-spacing: -0.02em;
}

h4 {
  font: var(--type-h4);
}

p {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

a:hover {
  color: var(--accent-hover);
}

img,
svg {
  max-width: 100%;
}

/* Visible only to a screen reader. Load-bearing: the comparison table's marks
   are glyphs, so the yes/no meaning exists nowhere else. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.page,
.page-doc {
  overflow-x: clip;
}

main > section {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--section-pad-y) var(--page-gutter);
}

.section-sub {
  max-width: 62ch;
  margin: var(--space-3) 0 40px;
  font-size: 17px;
  color: var(--text-body);
}


.eyebrow {
  display: block;
  margin-bottom: var(--space-3);
  font: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent);
}

/* ==========================================================================
   Header and navigation
   ========================================================================== */

/* The header itself is the flex row — brand, nav, CTA are siblings, there is no
   inner wrapper. The padding centres the content on a full-bleed bar without
   one. Not sticky per design — it must paint above the hero backdrop. */
.site-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-5) var(--page-gutter);
  max-width: var(--page-max);
  margin: 0 auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--text-heading);
}

.brand:hover {
  color: var(--text-heading);
}

.brand-mark {
  width: 28px;
  height: 28px;
  flex: none;
}

.brand-name {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.brand-jim {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-heading);
}

.brand-ai {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.site-nav a {
  color: var(--text-body);
  font-size: 14px;
  font-weight: 500;
  padding: 6px 2px;
  border-bottom: 1.5px solid transparent;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.site-nav a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* The legal pages' header. Same bar, but only a brand and a back link, so it
   does not stick: on a long policy page a fixed bar just eats reading height,
   and there is no in-page nav to keep reachable. */
.doc-header {
  position: static;
}

.header-back {
  margin-left: auto;
  font: var(--type-data);
  color: var(--text-muted);
}

.header-back:hover {
  color: var(--text-heading);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-6);
  height: var(--space-11);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

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

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-secondary,
.btn-ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-heading);
}

.btn-secondary:hover,
.btn-ghost:hover {
  background: var(--jim-ink-600);
  border-color: var(--jim-key);
  color: var(--text-heading);
}

.btn-sm {
  height: 34px;
  padding: 0 var(--space-4);
  font-size: 14px;
}

.btn-lg {
  height: 52px;
  padding: 0 var(--space-8);
  font-size: 17px;
}

.btn-block {
  display: flex;
  width: 100%;
}

/* ==========================================================================
   Badges
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-3);
  border: var(--border-1);
  border-radius: var(--radius-pill);
  background: var(--jim-ink-600);
  font: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-body);
}

.badge-accent {
  border-color: var(--jim-lime-26);
  background: var(--jim-lime-16);
  color: var(--accent);
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: jimPulse 2s ease-in-out infinite;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  padding: 34px 32px;
  border: var(--border-1);
  border-radius: var(--radius-card);
  background: var(--grad-card);
}

.card-plain {
  background: var(--surface-card);
}

.card-accent {
  border: 1px solid var(--accent);
  background: var(--grad-card-accent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 64px;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 72px var(--page-gutter) 96px;
  isolation: isolate;
}

.hero > * {
  max-width: none;
}

.hero-backdrop {
  position: absolute;
  inset: -120px -50vw -40px;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.hero-backdrop img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
  filter: saturate(0.95) contrast(1.06) brightness(0.7);
  animation: jimPan 44s ease-in-out infinite;
  will-change: transform;
}

.hero-grain {
  position: absolute;
  inset: 0;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255, 255, 255, 0.7) 0.5px, transparent 0.6px);
  background-size: 3px 3px;
}

/* Three stacked scrims rather than one: the headline sits over the brightest
   part of the photograph, and a single gradient dark enough to carry it made
   the right-hand side flat. */
.hero-scrim-1 {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    #08090c 0%,
    rgba(8, 9, 12, 0.93) 34%,
    rgba(8, 9, 12, 0.62) 60%,
    rgba(8, 9, 12, 0.55) 100%
  );
}

.hero-scrim-2 {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 80% at 50% 40%,
    rgba(8, 9, 12, 0) 30%,
    rgba(8, 9, 12, 0.75) 100%
  );
}

.hero-scrim-3 {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 9, 12, 0.9) 0%,
    rgba(8, 9, 12, 0) 22%,
    rgba(8, 9, 12, 0) 58%,
    #08090c 100%
  );
}

/* Wide enough that the <br> in the headline is the only thing that breaks it.
   Sized in px, not ch: `ch` resolves against this element's 16px body font, not
   the 68px display face the line actually has to fit. */
.hero-copy {
  max-width: 620px;
}

.hero-copy h1 {
  margin: 0 0 22px;
  text-wrap: balance;
}

.hero-lead {
  font-size: 19px;
  line-height: 1.55;
  color: #a7aeba;
  max-width: 460px;
  margin: 0 0 34px;
  text-wrap: pretty;
}

.hero-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: var(--space-8) 0 var(--space-5);
}

.hero-cta .btn {
  padding: 16px 26px;
  font-size: 16px;
}

.hero-cta .btn-ghost {
  background: none;
  border: none;
  padding: 16px 8px;
  height: auto;
  color: #a7aeba;
  font-weight: 600;
  font-size: 15px;
}

.hero-cta .btn-ghost:hover {
  background: none;
  color: var(--text-heading);
}

.hero-fine {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin: 22px 0 0;
}

/* The rotating "225x5 / bench" stat. Large outlined numerals per design.
   `is-out` is set by site.js for the swap. */
.lift-log {
  position: absolute;
  left: var(--space-6);
  bottom: -28px;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 22px;
  pointer-events: none;
  white-space: nowrap;
  transition:
    opacity var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
}

.lift-log.is-out {
  opacity: 0;
  transform: translateY(16px);
}

.lift-log-value {
  font-family: var(--font-mono);
  font-size: 128px;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--jim-lime-26);
}

.lift-log-label {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(155, 161, 173, 0.42);
}

/* ==========================================================================
   Phone mockup
   ========================================================================== */

.phone-wrap {
  display: flex;
  justify-content: center;
  perspective: 1400px;
}

.phone {
  position: relative;
  width: 358px;
  padding: 10px;
  border-radius: var(--radius-phone);
  background: linear-gradient(155deg, #4a5059 0%, #191c22 26%, #0d0f14 58%, #2f343c 100%);
  box-shadow: var(--shadow-phone);
  will-change: transform;
}

.phone-btn {
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: var(--jim-key-alt);
}

.phone-btn-mute {
  left: -3px;
  top: 116px;
  height: 28px;
}

.phone-btn-up {
  left: -3px;
  top: 162px;
  height: 54px;
}

.phone-btn-down {
  left: -3px;
  top: 228px;
  height: 54px;
}

.phone-btn-power {
  right: -3px;
  top: 186px;
  height: 84px;
}

.phone-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 46px;
  background: var(--jim-ink-800);
}

/* --- Status bar --- */

.status-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5) var(--space-1);
  font: var(--type-data);
  color: var(--text-heading);
}

.status-time {
  font-weight: 600;
  font-size: 14px;
}

.status-notch {
  position: absolute;
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
  width: 96px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: #000;
}

.status-right {
  display: flex;
  align-items: center;
  gap: 5px;
}

.status-bars,
.status-net {
  font-size: 11px;
  color: var(--text-heading);
}

/* Four <i> elements, drawn as a rising signal staircase. */
.status-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 11px;
}

.status-bars i {
  width: 3px;
  border-radius: 1px;
  background: var(--text-heading);
}

.status-bars i:nth-child(1) {
  height: 40%;
}

.status-bars i:nth-child(2) {
  height: 60%;
}

.status-bars i:nth-child(3) {
  height: 80%;
}

.status-bars i:nth-child(4) {
  height: 100%;
}

.status-battery {
  display: flex;
  align-items: center;
  gap: 1px;
}

.status-battery-body {
  width: 22px;
  height: 11px;
  padding: 1.5px;
  border: 1px solid rgba(242, 243, 245, 0.45);
  border-radius: 3px;
}

.status-battery-fill {
  width: 72%;
  height: 100%;
  border-radius: 1px;
  background: var(--text-heading);
}

.status-battery-cap {
  width: 1.5px;
  height: 4px;
  border-radius: 0 1px 1px 0;
  background: rgba(242, 243, 245, 0.45);
}

/* --- Conversation header --- */

.convo-head {
  padding: var(--space-2) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--jim-line);
  background: rgba(22, 24, 29, 0.6);
  backdrop-filter: var(--blur-card);
  -webkit-backdrop-filter: var(--blur-card);
  text-align: center;
}

.convo-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.convo-back {
  color: var(--jim-lime);
  font-size: 20px;
  line-height: 1;
}

.convo-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
  font-size: 15px;
  display: grid;
  place-items: center;
}

.convo-sms {
  font: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
}

.convo-name {
  margin-top: var(--space-1);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2, var(--jim-text-2));
}

/* --- Thread --- */

.thread {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  height: 288px;
  padding: 18px 14px;
  overflow: hidden;
  flex-shrink: 0;
}

.thread-row {
  display: flex;
}

.thread-row.mine {
  justify-content: flex-end;
}

.thread-row.theirs {
  justify-content: flex-start;
}

.bubble-mine,
.bubble-theirs {
  max-width: 80%;
  padding: 9px 14px;
  border-radius: 20px;
  font-size: 14.5px;
  line-height: 1.4;
}

/* iMessage blue is not used anywhere: this is the brand thread, and a lime
   outgoing bubble is what the design specifies. */
.bubble-mine {
  background: var(--accent);
  color: var(--on-accent);
  border-bottom-right-radius: 6px;
}

.bubble-theirs {
  background: var(--jim-ink-500);
  color: var(--jim-text-2);
  border-bottom-left-radius: 6px;
}

.typing {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--jim-ink-500);
  padding: 13px 15px;
  border-radius: 18px 18px 18px 5px;
}

.typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8a92a0;
  animation: jimDots 1.2s infinite;
}

.typing span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes jimDots {
  0%,
  60%,
  100% {
    opacity: 0.25;
  }
  30% {
    opacity: 1;
  }
}

@keyframes jimIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes jimPageIn {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes jimPageOut {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateX(-28px);
  }
}

@keyframes jimPulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

@keyframes jimTypeNum {
  0% {
    max-width: 0;
  }
  55%,
  100% {
    max-width: 96px;
  }
}

@keyframes jimCheck {
  0%,
  55% {
    opacity: 0;
    transform: scale(0.6);
  }
  70%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes jimSendOut {
  0% {
    opacity: 0;
    transform: translateX(18px) scale(0.94);
  }
  18%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes jimSendBack {
  0%,
  38% {
    opacity: 0;
    transform: translateX(-14px) scale(0.94);
  }
  55%,
  100% {
    opacity: 1;
    transform: none;
  }
}

/* --- Composer --- */

.composer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--jim-line);
}

.composer-plus {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--jim-ink-500);
  color: var(--text-muted);
  display: grid;
  place-items: center;
  font-size: 18px;
}

.composer-field {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 12px;
  border: 1px solid var(--jim-line-strong);
  border-radius: var(--radius-pill);
  font-size: 14px;
  color: var(--jim-text-2);
}

.composer-placeholder {
  color: var(--text-muted);
}

/* The text site.js "types" into the field, character by character. */
.composer-draft {
  color: var(--text-heading);
  white-space: pre;
}

.composer-caret {
  display: inline-block;
  width: 1.5px;
  height: 16px;
  margin-left: 1px;
  background: var(--accent);
  animation: jimCaret 1s steps(2, start) infinite;
}

.composer-send {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--jim-ink-500);
  color: var(--text-muted);
  display: grid;
  place-items: center;
  font-size: 15px;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

/* site.js toggles this the moment the draft is non-empty. */
.composer-send.is-active {
  background: var(--accent);
  color: var(--on-accent);
}

/* --- Keyboard --- */

.keyboard {
  padding: var(--space-2) 5px var(--space-1);
  background: var(--jim-ink-600);
}

.kb-row {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-bottom: 6px;
}

.kb-row-2 {
  padding: 0 14px;
}

.kb-row-inner {
  display: contents;
}

.key,
.key-mod {
  flex: 1;
  min-width: 0;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--jim-key);
  box-shadow: var(--shadow-key);
  color: var(--text-heading);
  font-size: 15px;
  display: grid;
  place-items: center;
  transition:
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.key-mod {
  background: var(--jim-key-alt);
  font-size: 12px;
  color: var(--jim-text-2);
}

/* site.js flags the key it is "typing". */
.key.is-on,
.key-mod.is-on {
  background: var(--accent);
  color: var(--on-accent);
  transform: translateY(1px);
}

.key-shift,
.key-back {
  flex: 0 0 40px;
}

.key-num {
  flex: 0 0 44px;
}

.key-emoji {
  flex: 0 0 34px;
}

.key-space {
  flex: 1 1 auto;
}

.key-return {
  flex: 0 0 70px;
}

.home-indicator {
  width: 132px;
  height: 5px;
  margin: var(--space-2) auto var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--jim-key);
}

/* ==========================================================================
   Features
   ========================================================================== */

/* The features band sits directly under the hero, so it loses the top padding
   the generic section rule would give it. */
.features {
  padding: 40px var(--page-gutter) 100px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.feature-title {
  margin-bottom: var(--space-3);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-heading);
}

.feature-title em {
  font-style: italic;
  color: var(--accent);
}

.feature-body {
  margin: 0;
  font: var(--type-body);
  color: var(--text-body);
  text-wrap: pretty;
}

/* ==========================================================================
   How it works
   ========================================================================== */

.how {
  position: relative;
  overflow: hidden;
  padding: 20px var(--page-gutter) 110px;
}

.how > h2 {
  position: relative;
  margin-bottom: 44px;
}

.how-ghost-list {
  position: absolute;
  right: 40px;
  top: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 20px;
  max-width: 620px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(155, 161, 173, 0.22);
  pointer-events: none;
}

.step-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

/* Each step is a <button role="tab"> whose children are spans, so it needs a
   full control reset and its own block formatting. */
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  padding: 22px 0 0;
  border: 0;
  border-top: 2px solid var(--border-strong);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.step[aria-selected="true"] {
  border-top-color: var(--accent);
}

.step-panel,
.step-title,
.step-body,
.step-detail,
.step-index {
  display: block;
}

.step-index {
  font: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  color: var(--text-muted);
}

.step[aria-selected="true"] .step-index {
  color: var(--accent);
}

.step-panel {
  height: 132px;
  width: 100%;
  border: var(--border-1);
  border-radius: 14px;
  background: var(--jim-ink-800);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-art {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  opacity: 0.32;
  transition: opacity 240ms ease;
}

.step[aria-selected="true"] .step-art {
  opacity: 1;
}

.step-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-heading);
}

.step-body {
  margin: 0;
  font: var(--type-body);
  color: var(--text-body);
}

.step-detail {
  display: none;
  margin: 0;
  font: var(--type-body-sm);
  color: var(--accent);
}

.step[aria-selected="true"] .step-detail {
  display: block;
}

/* --- Step 1: the signup form mock --- */

.mock-form {
  justify-content: center;
  gap: 9px;
  width: 148px;
  margin: 0 auto;
}

.mock-input {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 9px;
  border: 1px solid #24272f;
  border-radius: 8px;
  background: #0e1015;
  gap: 1px;
}

.mock-input span:first-child {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #dfe3e9;
  overflow: hidden;
  white-space: nowrap;
  animation: jimTypeNum 4s steps(14) infinite;
}

.mock-caret {
  display: inline-block;
  width: 1.5px;
  height: 12px;
  background: var(--accent);
  animation: jimCaret 1s steps(1) infinite;
}

.mock-consent {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mock-check {
  flex: none;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--accent);
  border-radius: 4px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  animation: jimCheck 4s ease-in-out infinite;
}

/* Two <i> elements standing in for the two lines of disclosure text. */
.mock-bars {
  flex: 1;
  display: grid;
  gap: 6px;
}

.mock-bars i {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--jim-ink-500);
}

.mock-bars i:last-child {
  width: 72%;
}

/* --- Step 2: the chat mock --- */

.mock-chat {
  justify-content: center;
  gap: 8px;
  width: 168px;
  margin: 0 auto;
}

.mock-chat-out,
.mock-chat-in {
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 11px;
  line-height: 1.4;
}

.mock-chat-out {
  align-self: flex-end;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  border-bottom-right-radius: 3px;
  animation: jimSendOut 3.4s ease-in-out infinite;
}

.mock-chat-in {
  align-self: flex-start;
  background: var(--jim-ink-500);
  color: #e6e9ee;
  border-bottom-left-radius: 3px;
  animation: jimSendBack 3.4s ease-in-out infinite;
}

/* --- Step 3: the trend chart --- */

.mock-chart {
  position: relative;
  justify-content: flex-end;
}

.mock-chart svg {
  width: 100%;
  height: 100%;
}

.trend-area {
  opacity: 0;
  animation: jimTrendArea 5.4s ease-out infinite both;
}

.trend-line {
  stroke-dasharray: 230;
  animation: jimTrendLine 5.4s cubic-bezier(0.3, 0.7, 0.3, 1) infinite both;
}

.trend-dot {
  opacity: 0;
  animation: jimTrendDot 5.4s ease-out infinite both;
}

.trend-dot:nth-child(5) { animation-delay: 0.55s; }
.trend-dot:nth-child(6) { animation-delay: 0.77s; }
.trend-dot:nth-child(7) { animation-delay: 0.99s; }
.trend-dot:nth-child(8) { animation-delay: 1.21s; }
.trend-dot:nth-child(9) { animation-delay: 1.43s; }
.trend-dot:nth-child(10) { animation-delay: 1.65s; }
.trend-dot:nth-child(11) { animation-delay: 1.87s; }

@keyframes jimTrendLine {
  0% {
    stroke-dashoffset: 230;
  }
  34% {
    stroke-dashoffset: 0;
  }
  86% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  96%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

/* ==========================================================================
   Pricing
   ========================================================================== */

/* The cards and the radar share one grid area so the radar sits *behind* the
   Pro card, which is what the markup asks for and what its translucent
   background exists to allow. Overlapping them by grid placement rather than by
   absolute offsets means the two stay registered to each other at every width,
   with no magic percentages to drift. */
.pricing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 20px var(--page-gutter) 150px;
}

.pricing > h2 {
  margin-bottom: 12px;
}

.pricing > .section-sub {
  margin-bottom: 44px;
}

.price-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 860px;
  align-items: start;
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

.price-badge {
  position: absolute;
  top: -11px;
  left: 32px;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.price-head {
  margin-bottom: var(--space-6);
}

/* All three are spans in the markup, so they need to be told to stack. */
.price-eyebrow,
.price-amount,
.price-note {
  display: block;
}

.price-eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
}

.price-eyebrow-accent {
  color: var(--accent);
}

.price-amount {
  margin: var(--space-3) 0 var(--space-2);
  font: var(--type-price);
  letter-spacing: -0.03em;
  color: var(--text-heading);
}

.price-period {
  display: inline;
  font: var(--type-body);
  color: var(--text-muted);
}

.price-note {
  margin: 0;
  font: var(--type-body-sm);
  color: var(--text-body);
}

.price-list {
  flex: 1;
  margin: 0 0 var(--space-8);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.price-list li {
  position: relative;
  padding-left: var(--space-6);
  font: var(--type-body-sm);
  color: var(--jim-text-2);
}

.price-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* --- Radar --- */

/* Behind the Pro card, as the markup specifies. Placed in the same grid area as
   the cards and pushed onto the right-hand column, so the shape reads through
   the Pro card's translucent background and its six stat labels sit out around
   the card edges where site.js can cycle them in view.
   `aria-hidden` is already on it in the markup; `pointer-events: none` keeps it
   from swallowing clicks meant for the card sitting on top of it. */
.radar {
  position: absolute;
  z-index: 0;
  right: 4px;
  top: 70px;
  width: 420px;
  height: 400px;
  opacity: 0.78;
  pointer-events: none;
}

.radar-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(185, 255, 46, 0.09) 0%, rgba(185, 255, 46, 0.02) 46%, rgba(8, 9, 12, 0) 70%);
  pointer-events: none;
}

.radar-stage {
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radar-stage svg {
  width: 300px;
  height: 300px;
}

.radar-shape {
  width: 100%;
  height: 100%;
}

.radar-stat {
  position: absolute;
  display: grid;
  gap: 2px;
  text-align: center;
  transform: translate(-50%, -50%);
}

.radar-stat-word {
  font: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
}

.radar-stat-value {
  font: var(--type-stat);
  color: var(--text-heading);
}

/* The six hexagon vertices, as percentages of the 320x320 viewBox the SVG and
   site.js both use: centre (160,160), outer radius 140. Top vertex is
   (160,20) = 50%/6.25%; the rest follow at 60 degree steps. Each label is
   nudged a little further out than its vertex so it clears the dashed ring. */
.radar-strength {
  left: 50%;
  top: 1%;
}

.radar-volume {
  left: 91%;
  top: 26%;
}

.radar-mobility {
  left: 91%;
  top: 74%;
}

.radar-recovery {
  left: 50%;
  top: 99%;
}

.radar-endurance {
  left: 9%;
  top: 74%;
}

.radar-consistency {
  left: 9%;
  top: 26%;
}

/* ==========================================================================
   Comparison table
   ========================================================================== */

.comparison {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 20px var(--page-gutter) 110px;
}

.comparison > h2 {
  text-align: left;
  margin-bottom: 12px;
}

.comparison > .section-sub {
  text-align: left;
  margin-bottom: 40px;
}

.compare {
  overflow-x: auto;
  border: var(--border-1);
  border-radius: var(--radius-card);
  background: var(--surface-card);
}

.compare table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.compare th,
.compare td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--jim-line);
  text-align: center;
}

.compare tbody tr:last-child th,
.compare tbody tr:last-child td {
  border-bottom: 0;
}

.compare thead th {
  font: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.compare thead th.is-us {
  color: var(--accent);
}

.compare tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--jim-text-2);
  white-space: nowrap;
}

.mark-yes {
  color: var(--accent);
  font-size: 17px;
}

.mark-no {
  color: var(--jim-text-6);
  font-size: 17px;
}

.mark-partial {
  color: var(--text-muted);
  font-size: 17px;
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq {
  max-width: var(--prose-max);
  margin-inline: auto;
  padding: 20px var(--page-gutter) 110px;
}

.faq > h2 {
  margin-bottom: 40px;
}

.faq-list {
  border-top: var(--border-1);
}

.faq-item {
  border-bottom: var(--border-1);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) 0;
  border: 0;
  background: none;
  color: var(--text-heading);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 17px;
  text-align: left;
  cursor: pointer;
}

.faq-q:hover {
  color: var(--accent);
}

.faq-toggle {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--jim-ink-600);
  color: var(--accent);
  font-size: 16px;
  line-height: 1;
}

.faq-a {
  padding: 0 0 var(--space-5);
  margin: 0;
  max-width: 70ch;
  font: var(--type-body-sm);
  color: var(--text-body);
  animation: jimFaqOpen var(--dur-med) var(--ease-out) both;
}

/* site.js sets this, waits 300ms, then sets `hidden` — so the two durations
   have to agree or the answer vanishes mid-animation. */
.faq-a.is-closing {
  animation: jimFaqClose var(--dur-med) var(--ease-in) both;
}

.faq-a[hidden] {
  display: none;
}

/* ==========================================================================
   Signup panel
   ========================================================================== */

#start {
  padding: 20px var(--page-gutter) 110px;
}

.start-panel {
  border: var(--border-1);
  border-radius: var(--radius-panel);
  background: linear-gradient(160deg, #12160e 0%, #0b0d12 55%);
  padding: var(--space-14) 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-14);
  align-items: start;
}

.start-panel > div:first-child {
  text-align: left;
}

.start-panel h2 {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0 0 18px;
  text-align: left;
}

.start-lead {
  font: var(--type-lead);
  color: var(--jim-text-3);
  max-width: 400px;
  margin: 0 0 30px;
}

.start-note {
  margin: var(--space-5) 0 0;
  font: var(--type-legal);
  color: var(--text-muted);
}

.signup-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--jim-ink-850);
  border: var(--border-1);
  border-radius: 18px;
  padding: 28px;
  text-align: left;
}

.field {
  margin-bottom: 0;
}

.field-label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.field input {
  width: 100%;
  height: var(--space-11);
  padding: 0 var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--jim-ink-900);
  color: var(--text-heading);
  font: var(--type-body);
}

.field input::placeholder {
  color: var(--jim-text-6);
}

.field input:focus {
  border-color: var(--accent);
  outline: none;
}

/* The consent checkbox. Ships unchecked and unstyled-by-default on purpose —
   no `appearance: none` trickery that could visually imply a tick that the
   input does not actually carry (D-050, D-057). */
.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-body);
}

.consent input {
  flex: none;
  margin-top: 2px;
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

/* Two bare anchors with no separator in the markup, so the gap is the only
   thing keeping them from reading as one link. */
.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-4) 0 var(--space-6);
  font: var(--type-legal);
  color: var(--text-legal);
}

.result {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--accent);
}

.result:empty {
  display: none;
}

.result.error {
  color: #ff6b6b;
}

.form-note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--jim-text-5);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  padding: 56px var(--page-gutter) var(--space-10);
  border-top: var(--border-1);
  background: var(--surface-footer);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-10);
  max-width: var(--page-max);
  margin-inline: auto;
  padding-bottom: var(--space-10);
}

.footer-brand .brand {
  margin-bottom: var(--space-4);
}

.footer-tagline {
  max-width: 34ch;
  font: var(--type-body-sm);
  color: var(--text-muted);
}

.footer-col {
  display: grid;
  gap: 10px;
  align-content: start;
  font-size: 14px;
}

.footer-col .eyebrow {
  color: var(--jim-text-5);
  margin-bottom: 0;
}

.footer-col a {
  color: var(--text-body);
}

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

.footer-legal {
  border-top: var(--border-1);
  padding-top: var(--space-8);
}

.footer-legal-inner,
.footer-copy {
  max-width: var(--page-max);
  margin-inline: auto;
  font: var(--type-legal);
  color: var(--text-legal);
}

.footer-copy {
  margin-top: var(--space-4);
}

.footer-doc {
  padding: var(--space-10) var(--page-gutter);
  border-top: var(--border-1);
  background: var(--surface-footer);
}

/* ==========================================================================
   Legal documents (privacy, terms)
   ========================================================================== */

.doc {
  max-width: var(--prose-max);
  margin-inline: auto;
  padding: var(--space-18) var(--page-gutter) var(--space-24);
}

.doc-eyebrow {
  margin: 0 0 var(--space-3);
  font: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent);
}

/* Carries the gap between the title block and the first section — there is no
   wrapper around the header to hang it on. */
.doc-meta {
  margin: var(--space-3) 0 var(--space-10);
  font: var(--type-body-sm);
  color: var(--text-muted);
}

/* Deliberately plainer and higher-contrast than the marketing page. A carrier
   reviewer skim-reads these for specific sentences; body copy here is
   --jim-text-2 rather than --jim-text-3 for that reason. */
.doc-sections {
  color: var(--jim-text-2);
}

.doc-sections section {
  margin-bottom: var(--space-14);
}

.doc-sections h2 {
  font: var(--type-h3);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
  text-align: left;
}

.doc-sections h3 {
  font: var(--type-h4);
  margin: var(--space-8) 0 var(--space-3);
}

.doc-sections ul,
.doc-sections ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
}

.doc-sections li {
  margin-bottom: var(--space-2);
}

.callout {
  padding: var(--space-6);
  border: 1px solid var(--jim-lime-26);
  border-radius: var(--radius-card);
  background: var(--jim-lime-16);
}

.callout h2,
.callout h3 {
  margin-top: 0;
}

.address {
  font: var(--type-body-sm);
  font-style: normal;
  color: var(--jim-text-2);
}

.arrow-list {
  list-style: none;
  padding-left: 0 !important;
}

.arrow-list li {
  position: relative;
  padding-left: var(--space-6);
}

.arrow-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
}

.chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

.chip {
  padding: 6px var(--space-3);
  border: var(--border-1);
  border-radius: var(--radius-pill);
  background: var(--jim-ink-600);
  font: var(--type-data);
  color: var(--jim-text-2);
}

/* ==========================================================================
   Motion
   ========================================================================== */

@keyframes jimReveal {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes jimFaqOpen {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes jimFaqClose {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes jimCaret {
  to {
    opacity: 0;
  }
}


@keyframes jimPan {
  0% {
    transform: translate3d(4%, 0, 0) scale(1.1);
  }
  50% {
    transform: translate3d(-4%, -1%, 0) scale(1.14);
  }
  100% {
    transform: translate3d(4%, 0, 0) scale(1.1);
  }
}

@keyframes jimTrendArea {
  0%,
  12% {
    opacity: 0;
  }
  40%,
  86% {
    opacity: 1;
  }
  96%,
  100% {
    opacity: 0;
  }
}

@keyframes jimTrendDot {
  0% {
    opacity: 0;
    transform: translateY(5px) scale(0.4);
  }
  10%,
  84% {
    opacity: 1;
    transform: none;
  }
  94%,
  100% {
    opacity: 0;
    transform: none;
  }
}

/* site.js also bails out entirely when this matches, so nothing here is
   fighting a script that still wants to animate. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  :root {
    --type-hero: 800 54px/1 var(--font-sans);
    --type-h2: 800 34px/1.08 var(--font-sans);
    --section-pad-y: var(--space-18);
    --page-gutter: var(--space-6);
  }

  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-14);
    text-align: left;
  }

  .hero-copy {
    max-width: none;
  }

  .lift-log {
    position: static;
    margin-top: var(--space-6);
  }

  .step-grid {
    grid-template-columns: 1fr;
  }

  .how-ghost-list {
    display: none;
  }

  .radar {
    display: none;
  }
}

@media (max-width: 720px) {
  :root {
    --type-hero: 800 40px/1.03 var(--font-sans);
    --type-h2: 800 28px/1.1 var(--font-sans);
  }

  /* The four section links go; the brand and the CTA stay, because texting
     the number is the whole call to action. */
  .site-nav {
    display: none;
  }

  .phone {
    width: 300px;
  }

  .start-panel {
    grid-template-columns: 1fr;
    padding: var(--space-6);
  }

  .start-panel h2 {
    font-size: 32px;
  }

  .card,
  .step-panel {
    padding: var(--space-6);
  }

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

  .lift-log {
    display: none;
  }

  .footer-top {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
}