/* Accord landing page — design tokens, layout, phone tour, animations */

/* -------------------------------------------------------------------------- */
/* Tokens                                                                     */
/* -------------------------------------------------------------------------- */

:root {
  /* Palette — Figma landing (Desktop + Mobile SVG) */
  --color-primary: #00685c;
  --color-primary-container: #1e8274;
  --color-secondary-container: #bfece1;
  --color-primary-fixed: #99f3e2;
  --color-surface: #f7faf9;
  --color-surface-container-low: #e7f7f3; /* workflow + footer band */
  --color-surface-elevated: #ffffff;
  --color-border: #c5ddd8;
  --color-ink: #101e1c; /* dark store buttons + CTA card */
  --color-on-surface-variant: #3e4946;
  --color-on-primary: #ffffff;
  --color-success: #0d7c66; /* success dot + pricing checklist */
  --color-warning: #b54708;
  --color-claiming-bg: #fff3e0;
  --color-claiming-text: #e65100;

  /* Semantic aliases — section-specific Figma fills */
  --color-band: var(--color-surface-container-low); /* #E7F7F3 */
  --color-dark: var(--color-ink); /* #101E1C */
  --color-success-check: var(--color-success); /* #0D7C66 */

  /* Hero background — paint0_radial_1_2 (Desktop Landing Page.svg) */
  --color-hero-gradient-center: #f4fffb;
  --gradient-hero: radial-gradient(
    ellipse 75.6% 186% at 70% 19%,
    var(--color-hero-gradient-center) 0%,
    var(--color-surface-elevated) 100%
  );

  /* Shadow tint — ink (#101E1C) for rgba() composition */
  --shadow-ink: 16, 30, 28;

  /* Typography */
  --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Type scale — display / h1 / h2 / title / body / label / caption (Stitch tokens) */
  --text-display: clamp(1.75rem, 4.5vw, 2rem); /* 28–32px */
  --text-h1: clamp(1.5rem, 3vw, 1.75rem); /* 24–28px */
  --text-h2: clamp(1.25rem, 2.5vw, 1.375rem); /* 20–22px */
  --text-headline: var(--text-h2); /* alias — section headings */
  --text-title: 1.125rem; /* 18px */
  --text-body: 1rem; /* 16px */
  --text-body-sm: 0.9375rem; /* 15px */
  --text-label: 0.8125rem; /* 13px */
  --text-caption: 0.75rem; /* 12px */

  --leading-display: 1.25;
  --leading-h1: 1.21;
  --leading-h2: 1.27;
  --leading-title: 1.33;
  --leading-body: 1.65;
  --leading-label: 1.4;
  --leading-caption: 1.33;

  /* Spacing — 4pt scale (matches apps/mobile/lib/design/tokens.ts) */
  --space-0: 0;
  --space-0-5: 0.125rem; /* 2px */
  --space-1: 0.25rem; /* 4px */
  --space-1-5: 0.375rem; /* 6px */
  --space-2: 0.5rem; /* 8px */
  --space-2-5: 0.625rem; /* 10px */
  --space-3: 0.75rem; /* 12px */
  --space-3-5: 0.875rem; /* 14px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-7: 1.75rem; /* 28px */
  --space-8: 2rem; /* 32px */
  --space-9: 2.25rem; /* 36px */
  --space-10: 2.5rem; /* 40px */
  --space-11: 2.75rem; /* 44px */
  --space-12: 3rem; /* 48px */
  --space-14: 3.5rem; /* 56px */
  --space-16: 4rem; /* 64px */
  --space-20: 5rem; /* 80px */
  --space-24: 6rem; /* 96px */

  /* Named spacing aliases */
  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-gutter: var(--space-3);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
  --space-xl: var(--space-8);
  --space-2xl: var(--space-12);
  --space-3xl: var(--space-16);

  /* Radius — 8 / 12 / 16 / full */
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-full: 9999px;

  /* Radius aliases */
  --radius-sm: var(--radius-8);
  --radius-md: var(--radius-12);
  --radius-lg: var(--radius-16);

  /* Shadows — card, header, bottom-bar (Stitch export) */
  --shadow-card: 0 4px 12px rgba(var(--shadow-ink), 0.08);
  --shadow-header: 0 4px 12px rgba(var(--shadow-ink), 0.03);
  --shadow-bottom-bar: 0 -4px 12px rgba(var(--shadow-ink), 0.08);

  /* Elevation aliases */
  --shadow-sm: var(--shadow-card);
  --shadow-md: 0 4px 16px rgba(var(--shadow-ink), 0.08);
  --shadow-lg: 0 12px 40px rgba(var(--shadow-ink), 0.12);

  /* Layout */
  --content-max: 1240px;
  --gutter: var(--space-4); /* 16px mobile; 32px at desktop breakpoint */
  --header-height: var(--space-20); /* 80px — Figma header */
  --bp-desktop: 900px;
  --bp-mobile-max: 899px;

  /* Hero display — Figma desktop H1 (~56px at 1280) */
  --text-hero: clamp(2.25rem, 4.5vw + 0.75rem, 3.5rem); /* 36–56px */
  --leading-hero: 1.1;

  /* Phone mockup */
  --phone-width: 300px;
  --phone-height: 650px;
  --phone-radius: 40px;

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 380ms cubic-bezier(0.4, 0, 0.2, 1);
  --carousel-interval: 5000ms;
}

/* -------------------------------------------------------------------------- */
/* Reset & base                                                               */
/* -------------------------------------------------------------------------- */

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

* {
  margin: 0;
}

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

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

body {
  min-height: 100vh;
  font-family: var(--font-family);
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-body);
  color: var(--color-ink);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-container);
}

a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* -------------------------------------------------------------------------- */
/* Typography — display / h1 / h2 / title / body / label / caption            */
/* -------------------------------------------------------------------------- */

h1,
.text-h1 {
  font-size: var(--text-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-h1);
  letter-spacing: -0.02em;
}

h2,
.text-h2 {
  font-size: var(--text-h2);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-h2);
  letter-spacing: -0.01em;
}

.text-display {
  font-size: var(--text-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-display);
  letter-spacing: -0.03em;
}

.text-headline {
  font-size: var(--text-headline);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-h2);
  letter-spacing: -0.02em;
}

.text-title {
  font-size: var(--text-title);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-title);
}

.text-body {
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.text-body-sm {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
}

.text-muted {
  color: var(--color-on-surface-variant);
}

.text-label {
  font-size: var(--text-label);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-label);
}

.text-caption {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-caption);
  color: var(--color-on-surface-variant);
}

/* -------------------------------------------------------------------------- */
/* Layout utilities                                                           */
/* -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (min-width: 900px) {
  :root {
    --gutter: var(--space-8); /* 32px — Figma desktop gutters */
  }
}

.section {
  padding-block: var(--space-3xl);
}

.section-header {
  margin-bottom: var(--space-2xl);
  max-width: 42rem;
}

.section-lead {
  margin: var(--space-sm) 0 0;
  font-size: var(--text-body-sm);
  color: var(--color-on-surface-variant);
}

/* -------------------------------------------------------------------------- */
/* Buttons                                                                    */
/* -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.75rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

@media (prefers-reduced-motion: no-preference) {
  .btn {
    transition:
      background var(--transition-fast),
      color var(--transition-fast),
      border-color var(--transition-fast),
      transform var(--transition-fast),
      box-shadow var(--transition-fast);
  }

  .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--shadow-ink), 0.12);
  }

  .btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: none;
  }
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

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

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

.btn-secondary {
  background: var(--color-surface-elevated);
  color: var(--color-ink);
  border-color: var(--color-border);
}

.btn-secondary:hover {
  background: var(--color-surface-container-low);
  color: var(--color-ink);
}

.btn-ghost {
  background: transparent;
  color: var(--color-on-surface-variant);
}

.btn-ghost:hover {
  color: var(--color-ink);
}

/* -------------------------------------------------------------------------- */
/* Store buttons — App Store / Google Play (Figma: 288×54, rx 12, #101E1C)   */
/* -------------------------------------------------------------------------- */

.btn-store {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  width: 18rem; /* 288px */
  min-height: 3.375rem; /* 54px */
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-12);
  background: var(--color-ink); /* #101E1C */
  color: var(--color-on-primary);
  font-family: inherit;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.btn-store:hover {
  color: var(--color-on-primary);
}

.btn-store:not(.btn-store--invert):hover {
  background: #1a2f2c;
}

.btn-store__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem; /* 26px — Figma icon slot */
  height: 1.625rem;
}

.btn-store__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.btn-store__label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-0-5);
  min-width: 0;
}

.btn-store__eyebrow {
  font-size: 0.625rem; /* 10px */
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.btn-store:not(.btn-store--invert) .btn-store__eyebrow {
  color: rgba(255, 255, 255, 0.92);
}

.btn-store--invert .btn-store__eyebrow {
  color: var(--color-on-surface-variant);
}

.btn-store__name {
  font-size: var(--text-body); /* 16px */
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* White/inverted variant — dark CTA band (#101E1C) */
.btn-store--invert {
  background: var(--color-surface-elevated);
  color: var(--color-ink);
  border-color: rgba(255, 255, 255, 0.14);
}

.btn-store--invert:hover {
  background: var(--color-surface-container-low);
  color: var(--color-ink);
}

@media (prefers-reduced-motion: no-preference) {
  .btn-store {
    transition:
      background var(--transition-fast),
      color var(--transition-fast),
      border-color var(--transition-fast),
      transform var(--transition-fast),
      box-shadow var(--transition-fast);
  }

  .btn-store:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--shadow-ink), 0.2);
  }

  .btn-store:active {
    transform: translateY(0) scale(0.98);
    box-shadow: none;
  }
}

.btn-store:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Row layout — hero + CTA store button pairs */
.store-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* -------------------------------------------------------------------------- */
/* Sticky header                                                              */
/* -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  background: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  .site-header {
    transition:
      background var(--transition-base),
      box-shadow var(--transition-base);
  }
}

.site-header.is-scrolled {
  background: var(--color-surface);
  box-shadow: var(--shadow-header);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: var(--space-md);
}

.site-logo {
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  letter-spacing: -0.02em;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity var(--transition-fast);
}

.site-logo:hover {
  opacity: 0.85;
}

.site-nav {
  display: none;
  align-items: center;
  gap: var(--space-8);
  flex-shrink: 0;
}

.site-nav a {
  font-size: var(--text-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-on-surface-variant);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.site-nav a:hover {
  color: var(--color-ink);
}

@media (min-width: 900px) {
  .site-nav {
    display: flex;
  }
}

/* -------------------------------------------------------------------------- */
/* Hero                                                                       */
/* -------------------------------------------------------------------------- */

.hero {
  position: relative;
  max-width: none;
  margin-inline: 0;
  padding-block: var(--space-xl) var(--space-3xl);
  padding-inline: 0;
  overflow: hidden;
  background-color: var(--color-surface-elevated);
  background-image: var(--gradient-hero);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

@media (min-width: 600px) {
  .hero {
    padding-block: var(--space-2xl) var(--space-3xl);
  }
}

.hero__grid {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}

/* Mobile / tablet (~390px–899px): stacked copy, centered phone below */
@media (max-width: 899px) {
  .hero {
    padding-block: var(--space-lg) var(--space-2xl);
  }

  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    text-align: center;
  }

  .hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: none;
  }

  .hero__badge {
    align-self: center;
  }

  .hero__title {
    max-width: 16ch;
    font-size: clamp(2rem, 9vw, 2.5rem); /* ~32–40px — Mobile SVG H1 */
  }

  .hero__lead {
    max-width: 34ch;
    font-size: var(--text-body);
    line-height: var(--leading-body);
  }

  .hero__visual {
    justify-self: center;
    width: 100%;
    margin-inline: auto;
  }
}

/* Desktop: two columns — text left, phone right */
@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-3xl);
    align-items: center;
  }

  .hero__content {
    align-self: center;
    justify-self: start;
    max-width: 36rem;
  }

  .hero__visual {
    justify-self: end;
  }
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-lg);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-container-low);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-label);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  line-height: var(--leading-label);
}

.hero__badge-dot {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-success);
}

.hero__title {
  margin: 0 0 var(--space-lg);
  max-width: 14ch;
  font-size: var(--text-hero);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-hero);
  letter-spacing: -0.03em;
  color: var(--color-ink);
}

.hero__title-accent {
  color: var(--color-primary);
}

.hero__lead {
  margin: 0 0 var(--space-xl);
  max-width: 42ch;
  font-size: var(--text-title);
  line-height: var(--leading-title);
  color: var(--color-on-surface-variant);
}

/* Hero store buttons — 320px stacked mobile (Figma), 288px side-by-side desktop */
.hero .store-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  width: 100%;
  max-width: 20rem; /* 320px — Mobile Landing Page.svg store buttons */
}

.hero .store-actions .btn-store {
  width: 100%;
  max-width: 100%;
}

@media (min-width: 900px) {
  .hero .store-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: auto;
    max-width: none;
  }

  .hero .store-actions .btn-store {
    width: 18rem;
    max-width: none;
  }
}

/* Phone column — sized to mockup + caption/dots; decor anchored behind frame */
.hero__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--phone-height) + var(--space-16) + 3.5rem);
  padding-block: var(--space-lg);
}

/* Frame + decor stack — caption/dots sit outside this box */
.phone-frame-wrap {
  position: relative;
  flex-shrink: 0;
  width: var(--phone-width);
  height: var(--phone-height);
}

.hero__decor {
  position: absolute;
  inset: 0;
  width: min(100%, calc(var(--phone-width) + 10rem));
  height: min(100%, calc(var(--phone-height) + 4rem));
  margin: auto;
  transform: translate(8%, -4%);
  pointer-events: none;
  z-index: 0;
}

/* Figma: 256×256 circle (#BFECE1) behind upper-right of phone */
.hero__decor-circle {
  position: absolute;
  top: 18%;
  right: -6%;
  width: 256px;
  height: 256px;
  border-radius: 50%;
  background: var(--color-secondary-container); /* #BFECE1 */
}

/* Figma: soft blob (#99F3E2 @ 20%) behind lower-left */
.hero__decor-blob {
  position: absolute;
  bottom: 14%;
  left: -14%;
  width: min(408px, 92vw);
  height: 293px;
  border-radius: 50% 42% 58% 48%;
  background: var(--color-primary-fixed); /* #99F3E2 */
  opacity: 0.2;
  filter: blur(40px);
}

@media (max-width: 899px) {
  .hero__visual {
    min-height: auto;
    padding-block: var(--space-md) var(--space-sm);
  }

  .phone-stage {
    margin-inline: auto;
  }

  .hero__decor {
    width: min(100%, calc(var(--phone-width) + 6rem));
    height: calc(var(--phone-height) + 2rem);
    transform: translate(0, -2%);
  }

  .hero__decor-circle {
    top: 12%;
    right: 0;
    width: 180px;
    height: 180px;
  }

  .hero__decor-blob {
    bottom: 10%;
    left: -4%;
    width: 260px;
    height: 200px;
    filter: blur(32px);
  }
}

/* Narrow phones — scale mockup so 300px frame fits ~390px canvas with gutters */
@media (max-width: 359px) {
  .hero {
    --phone-width: min(300px, calc(100vw - 2 * var(--gutter)));
    --phone-height: calc(var(--phone-width) * 650 / 300);
    --phone-radius: calc(var(--phone-width) * 40 / 300);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__decor-circle,
  .hero__decor-blob {
    transition: transform var(--transition-slow);
    will-change: transform;
  }
}

/* Hero entrance animation */

@media (prefers-reduced-motion: no-preference) {
  .hero-animate {
    opacity: 0;
    transform: translateY(20px);
    animation: hero-fade-up 0.7s ease forwards;
    animation-fill-mode: both;
  }

  .hero-animate--1 {
    animation-delay: 0.05s;
  }

  .hero-animate--2 {
    animation-delay: 0.15s;
  }

  .hero-animate--3 {
    animation-delay: 0.25s;
  }

  .hero-animate--4 {
    animation-delay: 0.35s;
  }

  .hero-animate--5 {
    animation-delay: 0.45s;
  }
}

/* -------------------------------------------------------------------------- */
/* Phone frame & carousel                                                     */
/* -------------------------------------------------------------------------- */

/* Outer stage: parallax target (landing.js sets transform here) */
.phone-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--phone-width);
  margin-inline: auto;
}

/* Dark bezel — Figma: 300×650, rx 40, fill #101E1C */
.phone-frame {
  position: relative;
  z-index: 1;
  width: var(--phone-width);
  height: var(--phone-height);
  border-radius: var(--phone-radius);
  padding: 10px;
  background: var(--color-ink);
  box-shadow:
    0 24px 48px rgba(var(--shadow-ink), 0.18),
    0 8px 24px rgba(var(--shadow-ink), 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .phone-frame {
    animation: phone-float 5s ease-in-out infinite;
  }

  /* Pause float while the carousel is hovered or keyboard-focused */
  .phone-frame:has(.phone-carousel:hover),
  .phone-frame:has(.phone-carousel:focus-within) {
    animation-play-state: paused;
  }

  .phone-stage {
    will-change: transform;
  }
}

.phone-frame__notch {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 88px;
  height: 26px;
  border-radius: var(--radius-full);
  background: #0d1816;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  z-index: 10;
}

.phone-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--phone-radius) - 10px);
  overflow: hidden;
  /* Base unit for screen UI — ~10.5px at 280px inner width */
  --screen-scale: 1;
  --screen-u: calc(10.5px * var(--screen-scale));
  font-size: var(--screen-u);
  line-height: 1.35;
  color: var(--color-ink);
}

/* Carousel slides — absolute stack with cross-fade (toggled via .is-active) */
.phone-carousel > .screen,
.phone-screen {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  background: var(--color-surface);
  border-radius: calc(var(--phone-radius) - 10px);
  opacity: 0;
  transform: translateX(12px) scale(0.98);
  pointer-events: none;
  overflow: hidden;
  transition:
    opacity var(--transition-slow),
    transform var(--transition-slow);
  will-change: opacity, transform;
}

.phone-carousel > .screen.is-active,
.phone-screen.is-active {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .phone-carousel > .screen,
  .phone-screen {
    transition: none;
    transform: none;
    will-change: auto;
  }

  .phone-carousel > .screen:not(.is-active),
  .phone-screen:not(.is-active) {
    visibility: hidden;
  }

  .phone-carousel > .screen.is-active,
  .phone-screen.is-active {
    visibility: visible;
  }
}

.phone-caption {
  width: 100%;
  max-width: var(--phone-width);
  margin-top: var(--space-lg);
  text-align: center;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-on-surface-variant);
  min-height: 1.5em;
}

.phone-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  max-width: var(--phone-width);
  margin-top: var(--space-md);
  padding: 0;
  list-style: none;
}

/* 44×44px hit target; 8px visual dot centered (WCAG 2.5.8) */
.phone-dots__btn {
  position: relative;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.phone-dots__btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-on-surface-variant);
  transform: translate(-50%, -50%);
  transition:
    background var(--transition-fast),
    transform var(--transition-fast);
}

.phone-dots__btn:hover::after {
  background: var(--color-ink);
}

.phone-dots__btn.is-active::after {
  background: var(--color-primary);
}

@media (prefers-reduced-motion: no-preference) {
  .phone-dots__btn.is-active::after {
    transform: translate(-50%, -50%) scale(1.25);
  }
}

.phone-carousel:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.phone-dots__btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------- */
/* Mini-screens (phone tour) — .screen BEM, scaled to phone viewport          */
/* -------------------------------------------------------------------------- */

.screen__body {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding-top: calc(2.6 * var(--screen-u)); /* clear phone notch */
}

/* Status bar — decorative iOS-style chrome */
.screen__status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  height: calc(2.2 * var(--screen-u));
  padding: calc(0.4 * var(--screen-u)) calc(1.4 * var(--screen-u)) 0;
  font-size: calc(1.05 * var(--screen-u));
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
  color: var(--color-ink);
}

.screen__status-time {
  min-width: calc(3.2 * var(--screen-u));
}

.screen__status-indicators {
  display: flex;
  align-items: center;
  gap: calc(0.45 * var(--screen-u));
}

.screen__status-signal {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: calc(1 * var(--screen-u));
}

.screen__status-signal::before,
.screen__status-signal::after {
  content: "";
  display: block;
  width: 2px;
  background: var(--color-ink);
  border-radius: 1px;
}

.screen__status-signal::before {
  height: calc(0.55 * var(--screen-u));
}

.screen__status-signal::after {
  height: calc(0.85 * var(--screen-u));
}

.screen__status-wifi {
  width: calc(1.1 * var(--screen-u));
  height: calc(0.85 * var(--screen-u));
  border: 2px solid transparent;
  border-top-color: var(--color-ink);
  border-radius: 50% 50% 0 0;
  transform: rotate(0deg);
}

.screen__status-battery {
  position: relative;
  width: calc(2 * var(--screen-u));
  height: calc(1 * var(--screen-u));
  border: 1.5px solid var(--color-ink);
  border-radius: 2px;
}

.screen__status-battery::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  border-radius: 1px;
  background: var(--color-ink);
}

.screen__status-battery::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(-0.35 * var(--screen-u));
  width: 2px;
  height: calc(0.45 * var(--screen-u));
  transform: translateY(-50%);
  background: var(--color-ink);
  border-radius: 0 1px 1px 0;
}

/* App bar */
.screen__appbar {
  display: flex;
  align-items: center;
  gap: calc(0.75 * var(--screen-u));
  flex-shrink: 0;
  min-height: calc(4 * var(--screen-u));
  padding: calc(0.65 * var(--screen-u)) calc(1.15 * var(--screen-u));
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.screen__appbar--center .screen__appbar__title,
.screen__appbar--sessions .screen__appbar__title {
  text-align: center;
}

.screen__appbar--sessions {
  justify-content: center;
  position: relative;
}

.screen__appbar--sessions .screen__appbar__title {
  flex: none;
  color: var(--color-ink);
  font-weight: var(--font-weight-semibold);
}

.screen__appbar__icon--settings {
  position: absolute;
  right: calc(1.15 * var(--screen-u));
  background: transparent;
}

.screen__appbar__icon--settings::before {
  content: "";
  position: absolute;
  inset: 25%;
  border: 2px solid var(--color-on-surface-variant);
  border-radius: 50%;
}

.screen__appbar__icon--settings::after {
  content: "";
  position: absolute;
  top: 10%;
  left: 50%;
  width: 2px;
  height: 35%;
  transform: translateX(-50%);
  background: var(--color-on-surface-variant);
  border-radius: 1px;
  box-shadow:
    calc(0.55 * var(--screen-u)) calc(0.35 * var(--screen-u)) 0 0 var(--color-on-surface-variant),
    calc(-0.55 * var(--screen-u)) calc(0.35 * var(--screen-u)) 0 0 var(--color-on-surface-variant),
    0 calc(0.75 * var(--screen-u)) 0 0 var(--color-on-surface-variant);
}

.screen__appbar__back,
.screen__appbar__icon {
  flex-shrink: 0;
  width: calc(2 * var(--screen-u));
  height: calc(2 * var(--screen-u));
  border-radius: 50%;
  background: var(--color-surface-container-low);
}

.screen__appbar__back {
  position: relative;
}

.screen__appbar__back::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 55%;
  width: calc(0.55 * var(--screen-u));
  height: calc(0.55 * var(--screen-u));
  border-left: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: translate(-50%, -50%) rotate(45deg);
}

.screen__appbar__avatar {
  flex-shrink: 0;
  width: calc(2.65 * var(--screen-u));
  height: calc(2.65 * var(--screen-u));
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-secondary-container);
}

.screen__appbar__title {
  flex: 1;
  min-width: 0;
  font-size: calc(1.25 * var(--screen-u));
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.screen__strip {
  flex-shrink: 0;
  padding: calc(0.35 * var(--screen-u)) calc(1.15 * var(--screen-u));
  background: var(--color-surface-elevated);
  border-bottom: 1px solid var(--color-border);
  font-size: calc(0.95 * var(--screen-u));
  color: var(--color-on-surface-variant);
}

/* Scrollable content area */
.screen__content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: calc(0.95 * var(--screen-u)) calc(1.15 * var(--screen-u));
}

.screen__content--flush {
  padding-inline: 0;
}

/* List rows */
.screen__row {
  display: flex;
  align-items: center;
  gap: calc(0.75 * var(--screen-u));
  padding: calc(0.75 * var(--screen-u)) calc(0.95 * var(--screen-u));
  margin-bottom: calc(0.55 * var(--screen-u));
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: calc(0.95 * var(--screen-u));
}

.screen__row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(0.45 * var(--screen-u));
  margin-bottom: calc(0.25 * var(--screen-u));
}

.screen__row__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(3 * var(--screen-u));
  height: calc(3 * var(--screen-u));
  border: 1px solid var(--color-border);
  border-radius: calc(0.75 * var(--screen-u));
  background: var(--color-surface-container-low);
  color: var(--color-primary);
  font-size: calc(1.35 * var(--screen-u));
}

.screen__row__icon svg {
  width: calc(1.35 * var(--screen-u));
  height: calc(1.35 * var(--screen-u));
}

.screen--sessions .screen__content {
  padding-top: calc(0.55 * var(--screen-u));
}

.screen--sessions .screen__row {
  margin-inline: calc(1.15 * var(--screen-u));
}

/* Session inventory mini-screen */
.screen__appbar--detail {
  justify-content: space-between;
}

.screen__appbar--detail .screen__appbar__title {
  flex: none;
  font-size: calc(1.05 * var(--screen-u));
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
}

.screen__appbar__icon--menu {
  position: relative;
  background: transparent;
}

.screen__appbar__icon--menu::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--color-on-surface-variant);
  box-shadow:
    0 calc(-0.55 * var(--screen-u)) 0 0 var(--color-on-surface-variant),
    0 calc(0.55 * var(--screen-u)) 0 0 var(--color-on-surface-variant);
}

.screen__page-header {
  flex-shrink: 0;
  padding: calc(0.85 * var(--screen-u)) calc(1.15 * var(--screen-u)) calc(0.65 * var(--screen-u));
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 calc(0.35 * var(--screen-u)) calc(0.85 * var(--screen-u)) rgba(15, 60, 53, 0.03);
}

.screen__page-header__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(0.45 * var(--screen-u));
}

.screen__page-title {
  margin: 0;
  font-size: calc(1.35 * var(--screen-u));
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  color: var(--color-ink);
}

.screen__page-sub {
  margin: calc(0.35 * var(--screen-u)) 0 0;
  font-size: calc(0.9 * var(--screen-u));
  color: var(--color-on-surface-variant);
}

.screen__badge--inventory {
  display: inline-flex;
  align-items: center;
  gap: calc(0.35 * var(--screen-u));
  margin-top: calc(0.15 * var(--screen-u));
  padding: calc(0.2 * var(--screen-u)) calc(0.65 * var(--screen-u));
  background: var(--color-secondary-container);
  color: var(--color-on-secondary-container, #426c64);
  border: none;
}

.screen__badge__dot {
  flex-shrink: 0;
  width: calc(0.45 * var(--screen-u));
  height: calc(0.45 * var(--screen-u));
  border-radius: 50%;
  background: var(--color-primary);
}

.screen__badge--proposed {
  padding: calc(0.1 * var(--screen-u)) calc(0.45 * var(--screen-u));
  border-radius: calc(0.25 * var(--screen-u));
  background: var(--color-surface-container, #e1f1ed);
  color: var(--color-on-surface-variant);
  font-weight: var(--font-weight-regular);
}

.screen__callout--info {
  display: flex;
  align-items: flex-start;
  gap: calc(0.55 * var(--screen-u));
  margin-inline: calc(1.15 * var(--screen-u));
}

.screen__callout--info p {
  margin: 0;
  line-height: 1.35;
}

.screen__callout__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(1.35 * var(--screen-u));
  height: calc(1.35 * var(--screen-u));
  margin-top: calc(0.1 * var(--screen-u));
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: calc(0.85 * var(--screen-u));
  font-weight: var(--font-weight-bold);
  font-style: italic;
  line-height: 1;
}

.screen__section-label--inline {
  margin: calc(0.65 * var(--screen-u)) calc(1.15 * var(--screen-u)) calc(0.4 * var(--screen-u));
}

.screen__content--inventory {
  padding-top: calc(0.55 * var(--screen-u));
  padding-bottom: calc(0.35 * var(--screen-u));
}

.screen__item-row {
  display: flex;
  align-items: center;
  gap: calc(0.65 * var(--screen-u));
  min-height: calc(5.2 * var(--screen-u));
  padding: calc(0.55 * var(--screen-u)) calc(0.75 * var(--screen-u));
  margin: 0 calc(1.15 * var(--screen-u)) calc(0.45 * var(--screen-u));
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: calc(0.75 * var(--screen-u));
  box-shadow: var(--shadow-sm);
}

.screen__item-row__body {
  flex: 1;
  min-width: 0;
}

.screen__item-row__title {
  display: block;
  font-size: calc(1 * var(--screen-u));
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.screen__item-row__sub {
  display: block;
  margin-top: calc(0.15 * var(--screen-u));
  font-size: calc(0.85 * var(--screen-u));
  color: var(--color-on-surface-variant);
}

.screen__item-row__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(0.25 * var(--screen-u));
  flex-shrink: 0;
}

.screen__thumb--table {
  background: linear-gradient(145deg, #d4b896 0%, #8b6914 55%, #6b4f10 100%);
}

.screen__thumb--bike {
  background: linear-gradient(145deg, #718096 0%, #2d3748 55%, #1a202c 100%);
}

.screen__thumb--sofa {
  background: linear-gradient(145deg, #cbd5e0 0%, #a0aec0 55%, #718096 100%);
}

.screen__btn--outline {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.screen__btn-bar--stack {
  flex-direction: column;
  gap: calc(0.45 * var(--screen-u));
  padding-block: calc(0.65 * var(--screen-u));
}

.screen__btn-bar--stack .screen__btn {
  flex: none;
  width: 100%;
  padding-block: calc(0.65 * var(--screen-u));
  border-radius: calc(0.75 * var(--screen-u));
}

.screen--inventory .screen__body {
  padding-top: calc(2.6 * var(--screen-u));
}

/* Add item mini-screen */
.screen__appbar--add-item {
  position: relative;
  justify-content: center;
}

.screen__appbar--add-item .screen__appbar__title {
  flex: none;
  font-size: calc(1.15 * var(--screen-u));
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.screen__appbar--add-item .screen__appbar__back {
  position: absolute;
  left: calc(1.15 * var(--screen-u));
  background: transparent;
}

.screen__appbar--add-item .screen__appbar__icon--menu {
  position: absolute;
  right: calc(1.15 * var(--screen-u));
}

.screen__content--add-item {
  display: flex;
  flex-direction: column;
  gap: calc(0.55 * var(--screen-u));
  padding: calc(0.75 * var(--screen-u)) calc(1.15 * var(--screen-u));
  overflow: hidden;
}

.screen__photo-card {
  flex-shrink: 0;
  padding: calc(0.75 * var(--screen-u));
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: calc(0.95 * var(--screen-u));
}

.screen__photo-card__label {
  display: block;
  margin-bottom: calc(0.45 * var(--screen-u));
  font-size: calc(0.9 * var(--screen-u));
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
}

.screen--add-item .screen__photo-tile {
  height: calc(5.2 * var(--screen-u));
  margin-bottom: calc(0.65 * var(--screen-u));
  border-radius: calc(0.75 * var(--screen-u));
}

.screen__photo-tile__camera {
  width: calc(2.2 * var(--screen-u));
  height: calc(2.2 * var(--screen-u));
  color: var(--color-primary);
}

.screen__photo-tile__text {
  font-size: calc(0.85 * var(--screen-u));
  line-height: 1.2;
}

.screen__photo-strip {
  display: flex;
  gap: calc(0.45 * var(--screen-u));
}

.screen__thumb--car-int {
  background: linear-gradient(155deg, #e8edf2 0%, #8b9aab 45%, #4a5568 100%);
}

.screen__thumb--car-ext {
  background: linear-gradient(155deg, #718096 0%, #2d3748 50%, #1a202c 100%);
}

.screen__field__label--ink {
  color: var(--color-ink);
}

.screen__field__required {
  color: #b42318;
}

.screen__field__input--filled {
  display: flex;
  align-items: center;
  color: var(--color-ink);
}

.screen__field--value {
  margin-bottom: 0;
}

.screen__field__input--currency {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: calc(1.75 * var(--screen-u));
  color: var(--color-ink);
}

.screen__field__input--currency::before {
  content: "$";
  position: absolute;
  left: calc(0.75 * var(--screen-u));
  font-size: calc(1 * var(--screen-u));
  color: var(--color-on-surface-variant);
}

.screen__btn-bar--add-item {
  padding-block: calc(0.65 * var(--screen-u));
  box-shadow: 0 calc(-0.35 * var(--screen-u)) calc(0.85 * var(--screen-u)) rgba(15, 60, 53, 0.04);
}

.screen__btn-bar--add-item .screen__btn {
  padding-block: calc(0.7 * var(--screen-u));
  border-radius: calc(0.75 * var(--screen-u));
}

.screen--add-item .screen__body {
  padding-top: calc(2.6 * var(--screen-u));
}

.screen--add-item .screen__field {
  margin-bottom: 0;
}

/* Claim phase mini-screen */
.screen__appbar--claim .screen__appbar__title {
  flex: 1;
  text-align: center;
  font-size: calc(1.05 * var(--screen-u));
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.screen__content--claim {
  display: flex;
  flex-direction: column;
  gap: calc(0.45 * var(--screen-u));
  padding: calc(0.65 * var(--screen-u)) calc(1.15 * var(--screen-u));
  overflow: hidden;
}

.screen__claim-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(0.45 * var(--screen-u));
  flex-shrink: 0;
}

.screen__claim-title {
  margin: 0;
  font-size: calc(1.1 * var(--screen-u));
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  color: var(--color-ink);
}

.screen__badge--claim-phase {
  display: inline-flex;
  align-items: center;
  gap: calc(0.25 * var(--screen-u));
  padding: calc(0.15 * var(--screen-u)) calc(0.55 * var(--screen-u));
  background: #517d75;
  color: #f4fffb;
  border: none;
  font-size: calc(0.75 * var(--screen-u));
}

.screen__badge__sync-icon {
  flex-shrink: 0;
  width: calc(0.85 * var(--screen-u));
  height: calc(0.85 * var(--screen-u));
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
}

.screen__callout--turn {
  display: flex;
  align-items: flex-start;
  gap: calc(0.55 * var(--screen-u));
  flex-shrink: 0;
  margin: 0;
  padding: calc(0.65 * var(--screen-u)) calc(0.75 * var(--screen-u));
  background: #edfdf9;
  border-color: var(--color-success);
}

.screen__callout--turn p {
  margin: calc(0.15 * var(--screen-u)) 0 0;
  font-size: calc(0.8 * var(--screen-u));
  line-height: 1.35;
  color: var(--color-on-surface-variant);
}

.screen__callout__check {
  flex-shrink: 0;
  position: relative;
  width: calc(1.25 * var(--screen-u));
  height: calc(1.25 * var(--screen-u));
  margin-top: calc(0.1 * var(--screen-u));
  border-radius: 50%;
  background: var(--color-success);
}

.screen__callout__check::after {
  content: "";
  position: absolute;
  top: 42%;
  left: 50%;
  width: calc(0.35 * var(--screen-u));
  height: calc(0.55 * var(--screen-u));
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}

.screen__callout__body {
  flex: 1;
  min-width: 0;
}

.screen__callout__title {
  display: block;
  font-size: calc(0.9 * var(--screen-u));
  font-weight: var(--font-weight-semibold);
  color: var(--color-success);
}

.screen__picker-card {
  display: flex;
  align-items: center;
  gap: calc(0.65 * var(--screen-u));
  flex-shrink: 0;
  padding: calc(0.65 * var(--screen-u)) calc(0.75 * var(--screen-u));
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: calc(0.75 * var(--screen-u));
  box-shadow: var(--shadow-sm);
}

.screen__picker-avatar {
  flex-shrink: 0;
  width: calc(2.65 * var(--screen-u));
  height: calc(2.65 * var(--screen-u));
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  background: linear-gradient(145deg, #e8edf2 0%, #a0aec0 50%, #718096 100%);
}

.screen__picker-body {
  flex: 1;
  min-width: 0;
}

.screen__picker-label {
  display: block;
  font-size: calc(0.7 * var(--screen-u));
  font-weight: var(--font-weight-regular);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-on-surface-variant);
}

.screen__picker-name {
  display: flex;
  align-items: center;
  gap: calc(0.35 * var(--screen-u));
  margin-top: calc(0.1 * var(--screen-u));
  font-size: calc(1 * var(--screen-u));
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
}

.screen__picker-you {
  padding: calc(0.05 * var(--screen-u)) calc(0.35 * var(--screen-u));
  border-radius: calc(0.25 * var(--screen-u));
  background: var(--color-surface-container-low);
  font-size: calc(0.7 * var(--screen-u));
  font-weight: var(--font-weight-regular);
  color: var(--color-on-surface-variant);
}

.screen__section-label--claim {
  margin: calc(0.15 * var(--screen-u)) 0 calc(0.1 * var(--screen-u));
  font-size: calc(0.8 * var(--screen-u));
  text-transform: none;
  letter-spacing: 0.01em;
}

.screen__claim-item {
  display: flex;
  align-items: center;
  gap: calc(0.55 * var(--screen-u));
  flex-shrink: 0;
  min-height: calc(4.2 * var(--screen-u));
  padding: calc(0.5 * var(--screen-u)) calc(0.65 * var(--screen-u));
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: calc(0.75 * var(--screen-u));
  box-shadow: var(--shadow-sm);
}

.screen__claim-item--selected {
  position: relative;
  border: 2px solid var(--color-primary);
  background: var(--color-surface-container-low);
  overflow: hidden;
}

.screen__claim-item--selected::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-primary);
  opacity: 0.05;
  pointer-events: none;
}

.screen__claim-item .screen__thumb {
  width: calc(2.35 * var(--screen-u));
  height: calc(2.35 * var(--screen-u));
}

.screen__claim-item__body {
  flex: 1;
  min-width: 0;
}

.screen__thumb--civic {
  background: linear-gradient(155deg, #c5d4e0 0%, #718096 45%, #2d3748 100%);
}

.screen__thumb--bank {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-container-low);
}

.screen__thumb--bank::before {
  content: "";
  width: calc(1.1 * var(--screen-u));
  height: calc(1.1 * var(--screen-u));
  border: 2px solid var(--color-primary);
  border-radius: calc(0.15 * var(--screen-u));
  box-shadow:
    inset 0 calc(0.35 * var(--screen-u)) 0 0 var(--color-primary),
    0 calc(0.35 * var(--screen-u)) 0 0 var(--color-primary);
}

.screen__radio {
  flex-shrink: 0;
  width: calc(1.35 * var(--screen-u));
  height: calc(1.35 * var(--screen-u));
  border: 2px solid var(--color-border);
  border-radius: 50%;
}

.screen__radio--checked {
  position: relative;
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.screen__radio--checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(0.45 * var(--screen-u));
  height: calc(0.45 * var(--screen-u));
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--color-on-primary);
}

.screen__btn-bar--claim {
  flex-direction: column;
  gap: calc(0.4 * var(--screen-u));
  padding-block: calc(0.55 * var(--screen-u));
  box-shadow: 0 calc(-0.35 * var(--screen-u)) calc(0.85 * var(--screen-u)) rgba(15, 60, 53, 0.06);
}

.screen__btn-bar--claim .screen__btn {
  flex: none;
  width: 100%;
  padding-block: calc(0.6 * var(--screen-u));
  border-radius: calc(0.75 * var(--screen-u));
  font-size: calc(0.9 * var(--screen-u));
}

.screen--claim .screen__body {
  padding-top: calc(2.6 * var(--screen-u));
}

/* Court-ready report mini-screen */
.screen__appbar--report {
  position: relative;
  justify-content: center;
}

.screen__appbar--report .screen__appbar__title {
  flex: none;
  font-size: calc(1.05 * var(--screen-u));
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.screen__appbar--report .screen__appbar__back {
  position: absolute;
  left: calc(1.15 * var(--screen-u));
  background: transparent;
}

.screen__appbar__icon--download {
  position: absolute;
  right: calc(1.15 * var(--screen-u));
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-primary);
}

.screen__appbar__icon--download svg {
  width: calc(1.35 * var(--screen-u));
  height: calc(1.35 * var(--screen-u));
}

.screen__content--report {
  display: flex;
  flex-direction: column;
  gap: calc(0.55 * var(--screen-u));
  padding: calc(0.65 * var(--screen-u)) calc(1.15 * var(--screen-u));
  overflow: hidden;
}

.screen__callout--report {
  display: flex;
  align-items: flex-start;
  gap: calc(0.45 * var(--screen-u));
  margin-bottom: 0;
  padding: calc(0.55 * var(--screen-u)) calc(0.65 * var(--screen-u));
}

.screen__callout--report p {
  margin: 0;
  font-size: calc(0.8 * var(--screen-u));
  line-height: 1.35;
  color: var(--color-ink);
}

.screen__btn--download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(0.35 * var(--screen-u));
  flex: none;
  width: 100%;
  min-height: calc(2.6 * var(--screen-u));
  padding: calc(0.55 * var(--screen-u)) calc(0.75 * var(--screen-u));
  border-radius: var(--radius-full);
  box-shadow: 0 calc(0.15 * var(--screen-u)) calc(0.45 * var(--screen-u)) rgba(15, 60, 53, 0.08);
}

.screen__btn--download svg {
  width: calc(1.1 * var(--screen-u));
  height: calc(1.1 * var(--screen-u));
  flex-shrink: 0;
}

.screen__pdf-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: calc(0.85 * var(--screen-u));
  box-shadow: 0 calc(0.35 * var(--screen-u)) calc(0.85 * var(--screen-u)) rgba(15, 60, 53, 0.08);
  aspect-ratio: 1 / 1.414;
}

.screen__pdf-preview__watermark {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background:
    linear-gradient(45deg, var(--color-primary) 1px, transparent 1px),
    linear-gradient(-45deg, var(--color-primary) 1px, transparent 1px);
  background-size: calc(1.4 * var(--screen-u)) calc(1.4 * var(--screen-u));
  pointer-events: none;
}

.screen__pdf-preview__header,
.screen__pdf-preview__body,
.screen__pdf-preview__footer {
  position: relative;
  z-index: 1;
}

.screen__pdf-preview__header {
  padding: calc(0.65 * var(--screen-u)) calc(0.75 * var(--screen-u));
  background: #fff;
  border-bottom: 1px solid rgba(197, 221, 216, 0.5);
}

.screen__pdf-preview__brand-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(0.45 * var(--screen-u));
  margin-bottom: calc(0.25 * var(--screen-u));
}

.screen__pdf-preview__brand {
  display: flex;
  align-items: center;
  gap: calc(0.25 * var(--screen-u));
}

.screen__pdf-preview__logo {
  width: calc(1.35 * var(--screen-u));
  height: calc(1.35 * var(--screen-u));
  color: var(--color-primary);
  flex-shrink: 0;
}

.screen__pdf-preview__brand-name {
  font-size: calc(0.95 * var(--screen-u));
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  letter-spacing: -0.01em;
}

.screen__pdf-preview__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(0.1 * var(--screen-u));
  font-size: calc(0.65 * var(--screen-u));
  color: var(--color-on-surface-variant);
  line-height: 1.2;
}

.screen__pdf-preview__doc-type {
  margin: 0;
  font-size: calc(0.55 * var(--screen-u));
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink);
}

.screen__pdf-preview__body {
  display: flex;
  flex-direction: column;
  gap: calc(0.55 * var(--screen-u));
  flex: 1;
  padding: calc(0.65 * var(--screen-u)) calc(0.75 * var(--screen-u));
  background: #fff;
}

.screen__pdf-preview__parties {
  display: flex;
  gap: calc(0.35 * var(--screen-u));
}

.screen__pdf-preview__party {
  flex: 1;
  min-width: 0;
  padding: calc(0.35 * var(--screen-u)) calc(0.45 * var(--screen-u));
  background: #fff;
  border: 1px solid rgba(197, 221, 216, 0.5);
  border-radius: calc(0.45 * var(--screen-u));
}

.screen__pdf-preview__party-label {
  display: block;
  margin-bottom: calc(0.1 * var(--screen-u));
  font-size: calc(0.6 * var(--screen-u));
  color: var(--color-on-surface-variant);
}

.screen__pdf-preview__party-name {
  display: block;
  font-size: calc(0.75 * var(--screen-u));
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.screen__pdf-preview__summary {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  gap: calc(0.35 * var(--screen-u));
}

.screen__pdf-preview__stat {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(0.35 * var(--screen-u));
  padding-bottom: calc(0.2 * var(--screen-u));
  border-bottom: 1px solid rgba(197, 221, 216, 0.3);
}

.screen__pdf-preview__stat-label {
  font-size: calc(0.6 * var(--screen-u));
  color: var(--color-on-surface-variant);
}

.screen__pdf-preview__stat-value {
  font-size: calc(0.85 * var(--screen-u));
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
}

.screen__pdf-preview__lines {
  display: flex;
  flex-direction: column;
  gap: calc(0.15 * var(--screen-u));
  margin-top: calc(0.15 * var(--screen-u));
}

.screen__pdf-preview__lines span {
  display: block;
  height: calc(0.15 * var(--screen-u));
  border-radius: 2px;
  background: rgba(197, 221, 216, 0.4);
}

.screen__pdf-preview__lines span:nth-child(1) {
  width: 100%;
}

.screen__pdf-preview__lines span:nth-child(2) {
  width: 75%;
}

.screen__pdf-preview__lines span:nth-child(3) {
  width: 83%;
}

.screen__pdf-preview__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(0.35 * var(--screen-u));
  padding: calc(0.35 * var(--screen-u)) calc(0.75 * var(--screen-u));
  background: #fff;
  border-top: 1px solid rgba(197, 221, 216, 0.5);
  font-size: calc(0.5 * var(--screen-u));
  color: var(--color-outline, #6e7976);
}

.screen--report .screen__body {
  padding-top: calc(2.6 * var(--screen-u));
}

.screen__row__body {
  flex: 1;
  min-width: 0;
}

.screen__row__title {
  font-size: calc(1.05 * var(--screen-u));
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.screen__row__sub {
  font-size: calc(0.9 * var(--screen-u));
  color: var(--color-on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.screen__row__chevron {
  flex-shrink: 0;
  width: calc(0.45 * var(--screen-u));
  height: calc(0.45 * var(--screen-u));
  border-right: 2px solid var(--color-on-surface-variant);
  border-bottom: 2px solid var(--color-on-surface-variant);
  transform: rotate(-45deg);
  opacity: 0.6;
}

/* Badges */
.screen__badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: calc(0.15 * var(--screen-u)) calc(0.55 * var(--screen-u));
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-size: calc(0.8 * var(--screen-u));
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  line-height: 1.2;
}

.screen__badge--open {
  background: var(--color-surface-container-low);
  border-color: var(--color-border);
  color: var(--color-success);
}

.screen__badge--claiming {
  background: var(--color-claiming-bg);
  border-color: #ffe0b2;
  color: var(--color-claiming-text);
}

.screen__badge--committed,
.screen__badge--sync {
  background: var(--color-secondary-container);
  color: var(--color-primary);
}

.screen__badge--success {
  background: #e8f5f3;
  border-color: #a5d2cc;
  color: var(--color-success);
}

/* Callouts & section labels */
.screen__callout {
  padding: calc(0.75 * var(--screen-u)) calc(0.95 * var(--screen-u));
  margin-bottom: calc(0.75 * var(--screen-u));
  background: var(--color-surface-container-low);
  border: 1px solid var(--color-border);
  border-radius: calc(0.75 * var(--screen-u));
  font-size: calc(0.9 * var(--screen-u));
  color: var(--color-on-surface-variant);
}

.screen__callout--success {
  background: #e8f5f3;
  border-color: #a5d2cc;
  color: var(--color-ink);
}

.screen__section-label {
  margin: calc(0.75 * var(--screen-u)) 0 calc(0.45 * var(--screen-u));
  font-size: calc(0.85 * var(--screen-u));
  font-weight: var(--font-weight-semibold);
  color: var(--color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Thumbnails & photo upload */
.screen__thumb {
  flex-shrink: 0;
  width: calc(3.4 * var(--screen-u));
  height: calc(3.4 * var(--screen-u));
  border: 1px solid var(--color-border);
  border-radius: calc(0.55 * var(--screen-u));
  background: linear-gradient(135deg, var(--color-surface-container-low), var(--color-border));
  object-fit: cover;
}

.screen__thumb--lg {
  width: calc(4 * var(--screen-u));
  height: calc(4 * var(--screen-u));
}

.screen__photo-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(0.35 * var(--screen-u));
  width: 100%;
  height: calc(6.85 * var(--screen-u));
  margin-bottom: calc(0.95 * var(--screen-u));
  border: 2px dashed var(--color-border);
  border-radius: calc(0.95 * var(--screen-u));
  background: var(--color-surface-container-low);
  font-size: calc(0.9 * var(--screen-u));
  color: var(--color-on-surface-variant);
}

.screen__photo-tile__icon {
  width: calc(3 * var(--screen-u));
  height: calc(3 * var(--screen-u));
  border-radius: 50%;
  background: var(--color-secondary-container);
}

/* Form fields */
.screen__field {
  margin-bottom: calc(0.75 * var(--screen-u));
}

.screen__field__label {
  display: block;
  margin-bottom: calc(0.3 * var(--screen-u));
  font-size: calc(0.9 * var(--screen-u));
  font-weight: var(--font-weight-semibold);
  color: var(--color-on-surface-variant);
}

.screen__field__input {
  display: block;
  width: 100%;
  height: calc(2.65 * var(--screen-u));
  padding: 0 calc(0.75 * var(--screen-u));
  border: 1px solid var(--color-border);
  border-radius: calc(0.55 * var(--screen-u));
  background: var(--color-surface-elevated);
  font-size: calc(1 * var(--screen-u));
  color: var(--color-ink);
}

/* Item / claim cards */
.screen__card {
  padding: calc(0.75 * var(--screen-u)) calc(0.95 * var(--screen-u));
  margin-bottom: calc(0.55 * var(--screen-u));
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: calc(0.95 * var(--screen-u));
  box-shadow: var(--shadow-card);
}

.screen__card--selected {
  border-color: var(--color-primary);
  border-width: 2px;
  background: var(--color-surface-container-low);
}

.screen__turn {
  text-align: center;
  padding: calc(0.55 * var(--screen-u));
  margin-bottom: calc(0.75 * var(--screen-u));
  background: var(--color-claiming-bg);
  border-radius: calc(0.75 * var(--screen-u));
  font-size: calc(0.9 * var(--screen-u));
  font-weight: var(--font-weight-semibold);
  color: var(--color-claiming-text);
}

/* Bottom action bar & buttons */
.screen__btn-bar {
  display: flex;
  gap: calc(0.55 * var(--screen-u));
  flex-shrink: 0;
  padding: calc(0.75 * var(--screen-u)) calc(1.15 * var(--screen-u));
  margin-top: auto;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.screen__btn {
  flex: 1;
  padding: calc(0.75 * var(--screen-u));
  border: none;
  border-radius: calc(0.75 * var(--screen-u));
  font-family: inherit;
  font-size: calc(1 * var(--screen-u));
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  text-align: center;
}

.screen__btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.screen__btn--secondary {
  background: var(--color-surface-container-low);
  color: var(--color-ink);
}

.screen__btn--block {
  flex: none;
  width: 100%;
  border-radius: var(--radius-full);
}

/* Bottom tab bar (sessions list) */
.screen__bottom-nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-shrink: 0;
  height: calc(5.5 * var(--screen-u));
  padding: calc(0.45 * var(--screen-u)) calc(0.75 * var(--screen-u)) calc(0.65 * var(--screen-u));
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-bottom-bar);
}

.screen__nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(0.2 * var(--screen-u));
  min-width: calc(5.5 * var(--screen-u));
  padding: calc(0.35 * var(--screen-u)) calc(0.55 * var(--screen-u));
  border-radius: calc(0.85 * var(--screen-u));
  font-size: calc(0.75 * var(--screen-u));
  font-weight: var(--font-weight-semibold);
  color: var(--color-on-surface-variant);
  line-height: 1.1;
}

.screen__nav-item svg {
  width: calc(1.35 * var(--screen-u));
  height: calc(1.35 * var(--screen-u));
}

.screen__nav-item--active {
  background: var(--color-secondary-container);
  color: var(--color-primary);
}

/* -------------------------------------------------------------------------- */
/* Features — 3-card band (1 teal + 2 surface), scroll-reveal ready           */
/* -------------------------------------------------------------------------- */

.features-section .section-header {
  margin-bottom: var(--space-2xl);
}

/* Mobile-first: single column; desktop: three equal columns */
.features {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: stretch;
}

@media (min-width: 900px) {
  .features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xl);
    align-items: stretch;
  }
}

.feature-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Surface cards — elevated white with border (#FFFFFF / #C5DDD8) */
.feature-card:not(.feature-card--primary) {
  background: var(--color-surface-elevated);
  border-color: var(--color-border);
}

/* Teal highlight card — Figma fill #00685C, taller ~426px (desktop) */
.feature-card--primary {
  min-height: auto;
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-md);
}

@media (min-width: 900px) {
  .feature-card--primary {
    min-height: 26.625rem; /* 426px */
  }
}

/* Teal card — inverted text on #00685C */
.feature-card--primary h3 {
  color: var(--color-on-primary);
}

.feature-card--primary .text-muted,
.feature-card--primary p {
  color: #ffffff;
}

/* Icon tile — 48×48 rounded square on surface cards */
.feature-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3rem; /* 48px */
  height: 3rem;
  margin-bottom: var(--space-lg);
  border-radius: var(--radius-sm);
  background: var(--color-secondary-container);
  color: var(--color-primary);
}

.feature-card__icon svg {
  display: block;
  width: 1.5rem; /* 24px */
  height: 1.5rem;
  flex-shrink: 0;
  fill: currentColor;
}

.feature-card--primary .feature-card__icon {
  background: rgba(255, 255, 255, 0.14);
  color: var(--color-on-primary);
}

.feature-card h3 {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-title);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.feature-card p {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--color-on-surface-variant);
}

/* Primary card copy stays above the inventory mini-visual */
.feature-card--primary p {
  flex: 0 1 auto;
  color: #ffffff;
}

.feature-card:not(.feature-card--primary) p {
  flex: 1;
}

/* Inventory mini-visual — app UI card inside #1E8274 panel */
.feature-card__visual {
  margin-top: auto;
  padding-top: var(--space-lg);
}

.feature-inventory-mini {
  line-height: 1.35;
  color: var(--color-ink);
}

/* Figma inner panel — #1E8274 with subtle #99F3E2 stroke */
.feature-inventory-mini__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 11.5rem;
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--color-primary-container);
  border: 1px solid rgba(153, 243, 226, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Cropped inventory screen — proportional card, not a squished phone bezel */
.feature-inventory-mini__card {
  width: 100%;
  max-width: 17.5rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface-elevated);
  box-shadow:
    0 10px 28px rgba(16, 30, 28, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.feature-inventory-mini__appbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-elevated);
}

.feature-inventory-mini__appbar-back {
  flex-shrink: 0;
  width: 0.45rem;
  height: 0.45rem;
  border-left: 2px solid var(--color-on-surface-variant);
  border-bottom: 2px solid var(--color-on-surface-variant);
  transform: rotate(45deg);
  opacity: 0.7;
}

.feature-inventory-mini__appbar-title {
  flex: 1;
  font-size: 0.8125rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feature-inventory-mini__label {
  margin: 0.625rem 0.875rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
}

.feature-inventory-mini__row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0.625rem 0.5rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid rgba(197, 221, 216, 0.85);
  border-radius: var(--radius-sm);
  background: var(--color-surface-elevated);
  box-shadow: 0 1px 3px rgba(16, 30, 28, 0.05);
}

.feature-inventory-mini__row:last-child {
  margin-bottom: 0.75rem;
}

.feature-inventory-mini__thumb {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  background: var(--color-secondary-container);
}

.feature-inventory-mini__thumb--table {
  background: linear-gradient(145deg, #c4a882 0%, #8b6f4e 100%);
}

.feature-inventory-mini__thumb--bike {
  background: linear-gradient(145deg, #4a5568 0%, #1a202c 100%);
}

.feature-inventory-mini__row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.feature-inventory-mini__row-title {
  font-size: 0.8125rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feature-inventory-mini__row-sub {
  font-size: 0.75rem;
  color: var(--color-on-surface-variant);
}

.feature-inventory-mini__badge {
  flex-shrink: 0;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 0.625rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  color: var(--color-primary);
  background: var(--color-secondary-container);
  white-space: nowrap;
}

/* Scroll-reveal initial states (landing.js toggles .is-visible) */
@media (prefers-reduced-motion: no-preference) {
  html.js .features.reveal-stagger > .feature-card.reveal:not(.is-visible) {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 0.6s ease,
      transform 0.6s ease;
    will-change: opacity, transform;
  }

  html.js .features.reveal-stagger > .feature-card.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
  }

  html.js .features.reveal-stagger > .feature-card.reveal:nth-child(1) {
    transition-delay: 0s;
  }

  html.js .features.reveal-stagger > .feature-card.reveal:nth-child(2) {
    transition-delay: 0.08s;
  }

  html.js .features.reveal-stagger > .feature-card.reveal:nth-child(3) {
    transition-delay: 0.16s;
  }
}

/* -------------------------------------------------------------------------- */
/* Workflow — #E7F7F3 band, 4-step process (mobile timeline + desktop row)    */
/* -------------------------------------------------------------------------- */

.section-eyebrow {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.workflow-section {
  background: var(--color-band); /* #E7F7F3 */
}

.workflow-section .section-header {
  margin-bottom: var(--space-2xl);
}

/* -------------------------------------------------------------------------- */
/* How it works — connected numbered steps, stacked mobile, reveal-ready      */
/* -------------------------------------------------------------------------- */

.steps-section {
  background: var(--color-surface-container-low);
}

.steps-section:not(.workflow-section) .section-header {
  margin-bottom: var(--space-2xl);
}

.workflow-section.steps-section .section-header {
  margin-bottom: var(--space-2xl);
}

/* Mobile-first: vertical stack with timeline connectors */
.steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  counter-reset: step;
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-xl);
  padding-left: calc(var(--space-xl) + 2.75rem + var(--space-md));
  border-radius: var(--radius-lg);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

/* Numbered badge — sits on the timeline axis (mobile: left rail) */
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: var(--space-xl);
  left: var(--space-xl);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-secondary-container);
  border: 2px solid var(--color-border);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-surface-elevated);
}

/* Mobile: vertical connector between step badges */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--space-xl) + 2.75rem + var(--space-xs));
  left: calc(var(--space-xl) + 1.375rem - 1px);
  width: 2px;
  height: calc(100% - var(--space-xl) - 2.75rem - var(--space-xs) + var(--space-lg));
  background: linear-gradient(
    to bottom,
    var(--color-primary-container),
    var(--color-border)
  );
  z-index: 0;
  pointer-events: none;
}

.step h3 {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-title);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.step p {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--color-on-surface-variant);
}

/* Carousel sync hook — styled for future / optional JS interaction */
.step[data-carousel-screen] {
  cursor: default;
}

/* Workflow mobile + tablet — vertical left-rail timeline (overrides generic .step cards) */
.workflow-section .workflow-steps {
  --workflow-circle: 3rem; /* 48px — Figma numbered circles */
  --workflow-rail: calc(var(--workflow-circle) / 2);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  counter-reset: step;
}

/* Continuous left-rail connector (#C5DDD8) through circle centers */
.workflow-section .workflow-steps::before {
  content: "";
  position: absolute;
  top: calc(var(--workflow-circle) / 2);
  bottom: calc(var(--workflow-circle) / 2);
  left: calc(var(--workflow-rail) - 1px);
  width: 2px;
  background: var(--color-border);
  pointer-events: none;
  z-index: 0;
}

.workflow-section .workflow-step {
  position: relative;
  z-index: 1;
  display: block;
  padding: 0 0 0 calc(var(--workflow-circle) + var(--space-lg));
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.workflow-section .workflow-steps > .workflow-step:not(:last-child)::after {
  display: none;
}

.workflow-section .workflow-step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--workflow-circle);
  height: var(--workflow-circle);
  border-radius: 50%;
  background: var(--color-primary);
  border: none;
  font-size: var(--text-body);
  font-weight: var(--font-weight-bold);
  color: var(--color-on-primary);
  box-shadow: 0 0 0 4px var(--color-band);
}

.workflow-section .workflow-step h3 {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-title);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.workflow-section .workflow-step p {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--color-on-surface-variant);
}

/* Workflow scroll-reveal — 4 steps with staggered badge pop */
@media (prefers-reduced-motion: no-preference) {
  html.js .workflow-section .workflow-steps.reveal-stagger > .workflow-step.reveal:not(.is-visible) {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 0.6s ease,
      transform 0.6s ease;
    will-change: opacity, transform;
  }

  html.js .workflow-section .workflow-steps.reveal-stagger > .workflow-step.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
  }

  html.js .workflow-section .workflow-steps.reveal-stagger > .workflow-step.reveal.is-visible::before {
    animation: step-badge-pop 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
  }

  html.js .workflow-section .workflow-steps.reveal-stagger > .workflow-step.reveal:nth-child(1) {
    transition-delay: 0s;
  }

  html.js .workflow-section .workflow-steps.reveal-stagger > .workflow-step.reveal:nth-child(2) {
    transition-delay: 0.08s;
  }

  html.js .workflow-section .workflow-steps.reveal-stagger > .workflow-step.reveal:nth-child(3) {
    transition-delay: 0.16s;
  }

  html.js .workflow-section .workflow-steps.reveal-stagger > .workflow-step.reveal:nth-child(4) {
    transition-delay: 0.24s;
  }

  html.js .workflow-section .workflow-steps.reveal-stagger > .workflow-step.reveal:nth-child(1).is-visible::before {
    animation-delay: 0.05s;
  }

  html.js .workflow-section .workflow-steps.reveal-stagger > .workflow-step.reveal:nth-child(2).is-visible::before {
    animation-delay: 0.13s;
  }

  html.js .workflow-section .workflow-steps.reveal-stagger > .workflow-step.reveal:nth-child(3).is-visible::before {
    animation-delay: 0.21s;
  }

  html.js .workflow-section .workflow-steps.reveal-stagger > .workflow-step.reveal:nth-child(4).is-visible::before {
    animation-delay: 0.29s;
  }
}

/* Desktop: three-column row with horizontal badge connectors */
@media (min-width: 720px) {
  .steps:not(.workflow-steps) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xl);
    align-items: stretch;
  }

  .steps:not(.workflow-steps) > .step {
    padding: var(--space-xl);
  }

  .steps:not(.workflow-steps) > .step::before {
    position: relative;
    top: auto;
    left: auto;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: var(--space-lg);
    box-shadow: 0 0 0 4px var(--color-surface-elevated);
  }

  /* Horizontal connector from badge to next step */
  .steps:not(.workflow-steps) > .step:not(:last-child)::after {
    top: calc(var(--space-xl) + 1.375rem - 1px);
    left: calc(var(--space-xl) + 2.75rem + var(--space-xs));
    width: calc(100% + var(--space-xl) - 2.75rem - 2 * var(--space-xs));
    height: 2px;
    background: linear-gradient(
      to right,
      var(--color-primary-container),
      var(--color-border)
    );
  }
}

/* Scroll-reveal initial states (landing.js toggles .is-visible) */
@media (prefers-reduced-motion: no-preference) {
  html.js .steps.reveal-stagger > .step.reveal:not(.is-visible) {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 0.6s ease,
      transform 0.6s ease;
    will-change: opacity, transform;
  }

  html.js .steps.reveal-stagger > .step.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
  }

  html.js .steps.reveal-stagger > .step.reveal.is-visible::before {
    animation: step-badge-pop 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
  }

  html.js .steps.reveal-stagger > .step.reveal:nth-child(1).is-visible::before {
    animation-delay: 0.05s;
  }

  html.js .steps.reveal-stagger > .step.reveal:nth-child(2).is-visible::before {
    animation-delay: 0.13s;
  }

  html.js .steps.reveal-stagger > .step.reveal:nth-child(3).is-visible::before {
    animation-delay: 0.21s;
  }

  html.js .steps.reveal-stagger > .step.reveal:nth-child(4) {
    transition-delay: 0.24s;
  }

  html.js .steps.reveal-stagger > .step.reveal:nth-child(4).is-visible::before {
    animation-delay: 0.29s;
  }
}

/* Workflow desktop — 4-across teal circles + horizontal connector */
@media (min-width: 900px) {
  .workflow-section .workflow-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-xl);
    align-items: start;
    counter-reset: step;
  }

  /* Connector through circle centers (#C5DDD8) */
  .workflow-section .workflow-steps::before {
    content: "";
    position: absolute;
    top: 1.5rem; /* 24px — vertical center of 48px circle */
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: var(--color-border);
    z-index: 0;
    pointer-events: none;
  }

  .workflow-section .workflow-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .workflow-section .workflow-step::after {
    display: none;
  }

  /* Numbered teal circle — 48px */
  .workflow-section .workflow-step::before {
    counter-increment: step;
    content: counter(step);
    position: relative;
    top: auto;
    left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem; /* 48px */
    height: 3rem;
    margin-bottom: var(--space-lg);
    border-radius: 50%;
    background: var(--color-primary);
    border: none;
    font-size: var(--text-body);
    font-weight: var(--font-weight-bold);
    color: var(--color-on-primary);
    box-shadow: none;
  }

  .workflow-section .workflow-step h3 {
    margin: 0 0 var(--space-sm);
    font-size: var(--text-title);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink);
    letter-spacing: -0.01em;
  }

  .workflow-section .workflow-step p {
    margin: 0;
    font-size: var(--text-body-sm);
    line-height: var(--leading-body);
    color: var(--color-on-surface-variant);
  }
}

/* -------------------------------------------------------------------------- */
/* Pricing — 2-up desktop, stacked mobile, featured Solo + checklists         */
/* -------------------------------------------------------------------------- */

.pricing-section .section-header {
  margin-bottom: var(--space-2xl);
}

/* Mobile-first: single column; desktop: two equal columns */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: stretch;
}

@media (min-width: 900px) {
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl);
  }
}

.pricing-tier {
  display: flex;
  flex-direction: column;
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border); /* #C5DDD8 — Law Firm default */
  box-shadow: var(--shadow-sm);
}

/* Solo Practitioner — 2px primary border + elevated shadow */
.pricing-tier--featured {
  border: 2px solid var(--color-primary); /* #00685C */
  box-shadow: var(--shadow-md);
}

/* Teal "Most Popular" pill */
.pricing-tier__badge {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: var(--space-md);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--text-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  line-height: var(--leading-label);
}

.pricing-tier__name {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-title);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.pricing-tier__subtitle {
  margin: 0 0 var(--space-lg);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--color-on-surface-variant);
}

/* Price — large bold figure + muted /month suffix */
.pricing-tier__price {
  margin: 0 0 var(--space-xl);
  font-size: clamp(2.5rem, 4vw + 1rem, 3rem); /* 40–48px */
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-ink);
}

.pricing-tier__price span {
  margin-left: var(--space-1);
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0;
  color: var(--color-on-surface-variant);
  vertical-align: baseline;
}

.pricing-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0;
  margin-top: auto;
  padding: 0;
}

.pricing-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

/* Teal check-circle bullets — SVG circle uses currentColor */
.pricing-checklist__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem; /* 20px — matches inline SVG */
  height: 1.25rem;
  margin-top: 0.125rem;
  color: var(--color-success-check); /* #0D7C66 */
}

.pricing-checklist__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.pricing-note {
  margin-top: var(--space-lg);
  font-size: var(--text-body-sm);
  color: var(--color-on-surface-variant);
}

/* Pricing scroll-reveal — staggered card entrance */
@media (prefers-reduced-motion: no-preference) {
  html.js .pricing-grid.reveal-stagger > .pricing-tier.reveal:not(.is-visible) {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 0.6s ease,
      transform 0.6s ease;
    will-change: opacity, transform;
  }

  html.js .pricing-grid.reveal-stagger > .pricing-tier.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
  }

  html.js .pricing-grid.reveal-stagger > .pricing-tier.reveal:nth-child(1) {
    transition-delay: 0s;
  }

  html.js .pricing-grid.reveal-stagger > .pricing-tier.reveal:nth-child(2) {
    transition-delay: 0.08s;
  }
}

/* -------------------------------------------------------------------------- */
/* CTA — dark #101E1C card, centered copy, white/inverted store buttons       */
/* -------------------------------------------------------------------------- */

.cta-section {
  padding-block: var(--space-2xl) var(--space-3xl);
}

.cta-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: var(--space-2xl) var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-dark); /* #101E1C */
  color: var(--color-on-primary);
  text-align: center;
  box-shadow: var(--shadow-lg);
}

@media (min-width: 600px) {
  .cta-card {
    padding: var(--space-3xl) var(--space-2xl);
  }
}

.cta-card h2 {
  margin: 0 0 var(--space-md);
  max-width: 22ch;
  font-size: clamp(1.5rem, 3vw + 0.5rem, 2rem); /* 24–32px */
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-h1);
  letter-spacing: -0.02em;
  color: var(--color-on-primary);
}

.cta-card p,
.cta-card__lead {
  margin: 0 0 var(--space-xl);
  max-width: 42ch;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: rgba(255, 255, 255, 0.92);
}

/* Store button row — stacked mobile (320px), side-by-side desktop (288px each) */
.cta-card__store-actions,
.cta-card .store-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-4); /* 16px — Figma mobile CTA button gap */
  width: 100%;
  max-width: 20rem; /* 320px */
  margin-inline: auto;
}

.cta-card__store-actions .btn-store,
.cta-card .store-actions .btn-store {
  width: 100%;
  max-width: 100%;
}

@media (min-width: 900px) {
  .cta-card__store-actions,
  .cta-card .store-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    width: auto;
    max-width: none;
  }

  .cta-card__store-actions .btn-store,
  .cta-card .store-actions .btn-store {
    width: 18rem; /* 288px */
    max-width: none;
  }
}

/* White/inverted store buttons on dark CTA background */
.cta-card .btn-store--invert:hover {
  background: var(--color-surface);
  border-color: rgba(255, 255, 255, 0.22);
}

.cta-card .btn-store--invert:focus-visible {
  outline-color: var(--color-primary-fixed);
}

/* CTA scroll-reveal — dark card scales in on scroll */
@media (prefers-reduced-motion: no-preference) {
  html.js .cta-card.reveal:not(.is-visible) {
    opacity: 0;
    transform: translateY(28px) scale(0.98);
    transition:
      opacity 0.65s ease,
      transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
  }

  html.js .cta-card.reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    will-change: auto;
  }
}

/* -------------------------------------------------------------------------- */
/* Footer — #E7F7F3 band; brand left + 3 columns (desktop), stacked mobile  */
/* -------------------------------------------------------------------------- */

.site-footer {
  background: var(--color-band); /* #E7F7F3 */
  padding-block: var(--space-2xl) var(--space-lg);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 18rem;
}

.site-footer__logo {
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.site-footer__logo:hover {
  opacity: 0.85;
  color: var(--color-primary);
}

.site-footer__tagline {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--color-on-surface-variant);
}

.site-footer__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.site-footer__column-title {
  margin: 0 0 var(--space-md);
  font-size: var(--text-body);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-title);
  color: var(--color-ink);
}

.site-footer__link-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__link-list a {
  font-size: var(--text-body-sm);
  line-height: var(--leading-label);
  color: var(--color-on-surface-variant);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.site-footer__link-list a:hover {
  color: var(--color-ink);
}

.site-footer__bottom {
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.site-footer__copyright {
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-on-surface-variant);
}

@media (min-width: 900px) {
  .site-footer__inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-12);
  }

  .site-footer__brand {
    flex: 0 1 18rem;
    max-width: none;
  }

  .site-footer__columns {
    flex: 1 1 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
    max-width: 36rem;
    margin-left: auto;
  }
}

/* -------------------------------------------------------------------------- */
/* Responsive — mobile (~390px) through tablet (max 899px)                    */
/* -------------------------------------------------------------------------- */

@media (max-width: 899px) {
  .section {
    padding-block: var(--space-2xl);
  }

  .section-header {
    margin-inline: auto;
    text-align: center;
    max-width: 28rem;
  }

  .section-lead {
    margin-inline: auto;
  }

  /* Features — single column stack */
  .features {
    gap: var(--space-md);
  }

  .feature-card {
    padding: var(--space-lg);
  }

  /* Workflow — vertical left-rail timeline (inherits .workflow-steps mobile rules) */
  .workflow-section .section-header {
    margin-bottom: var(--space-xl);
  }

  .workflow-section .workflow-steps {
    gap: var(--space-lg);
  }

  /* Pricing — single column stack */
  .pricing-grid {
    gap: var(--space-md);
  }

  .pricing-tier {
    padding: var(--space-lg);
  }

  /* CTA — full-width card, stacked store buttons */
  .cta-section {
    padding-block: var(--space-xl) var(--space-2xl);
  }

  .cta-card {
    padding: var(--space-xl) var(--space-lg);
    border-radius: var(--radius-md);
  }

  .cta-card h2 {
    max-width: none;
  }

  /* Footer — brand block then link columns stacked */
  .site-footer {
    padding-block: var(--space-xl) var(--space-lg);
  }

  .site-footer__inner {
    gap: var(--space-xl);
    padding-bottom: var(--space-xl);
  }

  .site-footer__brand {
    max-width: none;
    text-align: center;
    align-items: center;
  }

  .site-footer__columns {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    text-align: center;
  }

  .site-footer__column-title {
    margin-bottom: var(--space-sm);
  }

  .site-footer__link-list {
    align-items: center;
  }

  .site-footer__bottom {
    text-align: center;
  }
}

/* -------------------------------------------------------------------------- */
/* Scroll reveal — section headers + generic targets (landing.js → .is-visible) */
/* -------------------------------------------------------------------------- */

/* Visible by default; hidden only once JS marks the document ready */
.reveal {
  opacity: 1;
  transform: none;
}

html.js .reveal:not(.cta-card) {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  html.js .reveal:not(.cta-card):not(.is-visible) {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 0.6s ease,
      transform 0.6s ease;
    will-change: opacity, transform;
  }

  html.js .reveal:not(.cta-card).is-visible {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
  }

  html.js .reveal-stagger > .reveal:nth-child(1) {
    transition-delay: 0s;
  }

  html.js .reveal-stagger > .reveal:nth-child(2) {
    transition-delay: 0.08s;
  }

  html.js .reveal-stagger > .reveal:nth-child(3) {
    transition-delay: 0.16s;
  }

  html.js .reveal-stagger > .reveal:nth-child(4) {
    transition-delay: 0.24s;
  }
}

/* -------------------------------------------------------------------------- */
/* Keyframes                                                                  */
/* -------------------------------------------------------------------------- */

@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes phone-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes step-badge-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* -------------------------------------------------------------------------- */
/* Reduced-motion fallbacks — instant state, no transforms or keyframes       */
/* -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }

  .phone-frame {
    animation: none;
  }

  .phone-stage {
    will-change: auto;
  }

  .hero-animate {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .hero__decor-circle,
  .hero__decor-blob {
    transition: none;
    will-change: auto;
  }

  .reveal,
  .reveal.is-visible,
  .cta-card.reveal,
  .cta-card.reveal.is-visible,
  .features.reveal-stagger > .feature-card.reveal,
  .workflow-section .workflow-steps.reveal-stagger > .workflow-step.reveal,
  .steps.reveal-stagger > .step.reveal,
  .pricing-grid.reveal-stagger > .pricing-tier.reveal {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  .workflow-section .workflow-steps.reveal-stagger > .workflow-step.reveal.is-visible::before,
  .steps.reveal-stagger > .step.reveal.is-visible::before {
    animation: none;
  }

  .phone-dots__btn.is-active::after {
    transform: translate(-50%, -50%);
  }
}