/* ==========================================================================
   TrackWork Marketing Site
   Cal AI-inspired: Pure white, black text, red accents, bold serif headings,
   generous whitespace, phone mockups as hero elements
   ========================================================================== */

@font-face {
  font-family: 'Messina Sans';
  src: url('/fonts/MessinaSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Messina Sans';
  src: url('/fonts/MessinaSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Untitled Serif';
  src: url('/fonts/UntitledSerif-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ========== RESET ========== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ========== TOKENS ========== */
:root {
  --red: #E8453C;
  --red-dark: #D03830;
  --red-soft: rgba(232, 69, 60, 0.08);

  --page: #FFFFFF;
  --surface: #FFFFFF;
  --surface-muted: #FAFAFA;
  --border: #E5E5E5;
  --border-light: #F0F0F0;

  --ink: #000000;
  --ink-secondary: #1A1A1A;
  --ink-muted: #6B7280;
  --ink-soft: #9CA3AF;
  --ink-inverse: #FFFFFF;

  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.10);

  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  --font: 'Messina Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Untitled Serif', Georgia, 'Times New Roman', serif;
}

body {
  font-family: var(--font);
  font-size: 16px;
  background: var(--page);
  color: var(--ink);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ========== TYPOGRAPHY ========== */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(3rem, 6vw, 5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); }
h4 { font-size: 1.125rem; font-family: var(--font); font-weight: 600; }

p { margin: 0 0 16px; color: var(--ink-muted); line-height: 1.7; font-size: 1.0625rem; }
a { color: var(--ink); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--red); }
img { max-width: 100%; display: block; }
ul, ol { margin: 0 0 16px; padding-left: 24px; color: var(--ink-muted); }

/* ========== LAYOUT ========== */
.container {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
}

/* ========== ANIMATIONS ========== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.anim {
  opacity: 0;
  transform: translateY(32px);
}

.anim.visible {
  animation: fadeUp 0.6s ease-out forwards;
}

.anim-delay-1.visible { animation-delay: 0.1s; }
.anim-delay-2.visible { animation-delay: 0.15s; }
.anim-delay-3.visible { animation-delay: 0.2s; }
.anim-delay-4.visible { animation-delay: 0.25s; }

.fade-in { opacity: 0; transform: translateY(32px); }
.fade-in.visible { animation: fadeUp 0.6s ease-out forwards; }

.stagger-children .anim:nth-child(1) { --delay: 0s; }
.stagger-children .anim:nth-child(2) { --delay: 0.08s; }
.stagger-children .anim:nth-child(3) { --delay: 0.16s; }
.stagger-children .anim:nth-child(4) { --delay: 0.24s; }
.stagger-children .anim:nth-child(5) { --delay: 0.32s; }
.stagger-children .anim:nth-child(6) { --delay: 0.40s; }
.stagger-children .anim.visible { animation-delay: var(--delay); }

/* ========== UTILITY CLASSES ========== */
.eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--red);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--r-pill);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px 16px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.badge-outline {
  border: 1px solid var(--border);
  color: var(--ink-soft);
  background: transparent;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 500;
}

.text-muted { color: var(--ink-soft); }
.text-red { color: var(--red); }
.text-center { text-align: center; }

.stack-sm { display: flex; flex-direction: column; gap: 16px; }
.stack-md { display: flex; flex-direction: column; gap: 24px; }

/* ========== BUTTONS ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 32px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.btn-primary {
  background: var(--red);
  color: var(--ink-inverse);
}

.btn-primary:hover {
  background: var(--red-dark);
  color: var(--ink-inverse);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(232, 69, 60, 0.25);
}

.btn-outline {
  border: 1.5px solid var(--border);
  color: var(--ink);
  background: transparent;
}

.btn-outline:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  padding-inline: 20px;
}

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

.btn-sm { padding: 10px 20px; font-size: 0.85rem; }
.btn-lg { padding: 16px 36px; font-size: 1rem; }

/* ========== SITE HEADER ========== */
/* The header is sticky and 71px tall, so an in-page jump would otherwise land
   with the target's first line hidden underneath it. This applies to every
   anchor target on the site, not just the new one: #product, #features and
   #questions were all landing short. */
[id] {
  scroll-margin-top: 88px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-light);
}

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

.nav-drawer {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}

.logo {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--red);
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.primary-nav a {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ink-muted);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  transition: color 0.2s ease;
}

.primary-nav a:hover,
.primary-nav a.active {
  color: var(--ink);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle span {
  width: 20px;
  height: 2px;
  background: var(--ink);
  border-radius: var(--r-pill);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

#lang-toggle,
#lang-toggle-footer {
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

#lang-toggle:hover,
#lang-toggle-footer:hover {
  border-color: var(--ink);
}

.lang-option.active { color: var(--ink); }

/* The footer is black, and --ink is black, so the selected language was
   black on black: the switcher read as "/ ES" with nothing before it. */
.footer .lang-option.active,
#lang-toggle-footer .lang-option.active { color: var(--ink-inverse); }
.lang-divider { color: var(--border); }

/* ========== HERO — centered, minimal ========== */
.hero {
  padding: 120px 0 80px;
  text-align: center;
}

.hero .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.hero-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: var(--font-serif);
  font-size: 2rem;
  box-shadow: 0 4px 20px rgba(232, 69, 60, 0.2);
  opacity: 0;
  animation: scaleIn 0.5s ease-out 0.1s forwards;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 5.5vw, 4.5rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.08;
  max-width: 800px;
  opacity: 0;
  animation: fadeUp 0.6s ease-out 0.15s forwards;
}

.hero-subtitle {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--ink-muted);
  max-width: 560px;
  line-height: 1.7;
  opacity: 0;
  animation: fadeUp 0.6s ease-out 0.25s forwards;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: fadeUp 0.6s ease-out 0.35s forwards;
}

.app-store-link { display: inline-block; transition: transform 0.2s ease; }
.app-store-link:hover { transform: scale(1.03); }
.app-store-badge { width: 180px; height: auto; display: block; }

/* ========== SCREENSHOT CAROUSEL ========== */
.screenshot-carousel {
  padding: 40px 0 120px;
  overflow: hidden;
}

.screenshot-carousel .container {
  max-width: 100%;
  padding: 0;
}

.carousel-track {
  display: flex;
  gap: 20px;
  justify-content: center;
  padding: 0 24px;
  opacity: 0;
  animation: fadeUp 0.6s ease-out 0.45s forwards;
}

.carousel-item {
  flex-shrink: 0;
  width: 220px;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform 0.3s ease;
}

.carousel-item:hover {
  transform: translateY(-8px);
}

.carousel-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* ========== SECTIONS ========== */
section {
  padding: 120px 0;
  position: relative;
}

.section-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  margin-bottom: 72px;
  align-items: center;
}

.section-eyebrow {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--red);
  font-weight: 600;
  font-family: var(--font);
}

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  max-width: 700px;
  line-height: 1.1;
}

.section-subtitle {
  max-width: 560px;
  color: var(--ink-muted);
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* ========== EXPERIENCE — 3 screenshots in a row ========== */
.experience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.experience-item {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.experience-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.experience-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* ========== FEATURES — zigzag alternating layout ========== */
.features-section {
  padding: 80px 0;
}

.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: 80px 0;
  border-top: 1px solid var(--border-light);
}

.feature-row:first-child {
  border-top: none;
  padding-top: 0;
}

.feature-row:last-child {
  padding-bottom: 0;
}

.feature-row.reverse .feature-visual {
  order: -1;
}

.feature-visual {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  max-width: 50%;
  margin: 0 auto;
}

.feature-visual img {
  width: 100%;
  height: auto;
  display: block;
}

.feature-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.feature-content .eyebrow {
  margin-bottom: 0;
}

.feature-content h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.feature-content p {
  font-size: 1.0625rem;
  color: var(--ink-muted);
  line-height: 1.7;
  margin: 0;
}

.feature-content .btn {
  width: fit-content;
}

/* ========== FEATURE CARDS (for pillars) ========== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all 0.25s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.feature-card h3 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
}

.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  background: var(--red-soft);
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feature-list li {
  display: flex;
  gap: 10px;
  color: var(--ink-muted);
  font-size: 0.92rem;
}

.feature-list li::before {
  content: '✓';
  color: var(--red);
  font-weight: 600;
  flex-shrink: 0;
}

/* ========== WORKFLOW ========== */
.workflow-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.workflow-step {
  text-align: center;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.workflow-step::before {
  content: attr(data-step);
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font);
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.workflow-step strong {
  font-size: 1.1rem;
  font-weight: 600;
  font-family: var(--font);
}

.workflow-step p { font-size: 0.92rem; margin: 0; }

/* ========== TESTIMONIALS ========== */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.testimonial-card {
  border-radius: var(--r-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: all 0.25s ease;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.testimonial-badge {
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font);
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  width: fit-content;
}

.testimonial-quote {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1.7;
  font-style: normal;
}

.testimonial-author {
  color: var(--ink-soft);
  font-size: 0.88rem;
}

/* ========== CTA SECTION ========== */
.cta-section {
  background: var(--ink);
  color: var(--ink-inverse);
  border-radius: var(--r-xl);
  padding: 56px 48px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.cta-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink-inverse);
}

.cta-subtitle {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 480px;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.cta-section .btn-primary {
  background: var(--red);
  color: white;
}

.cta-section .btn-primary:hover {
  background: var(--red-dark);
  color: white;
}

.cta-section .btn-outline {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--ink-inverse);
}

.cta-section .btn-outline:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--ink-inverse);
}

/* ========== PAGE LAYOUTS (about, pricing, support, legal) ========== */
.page-hero {
  /* 120px was close to a screenful of nothing above the headline on a laptop,
     before you had read a word. */
  padding: 64px 0 40px;
}

.page-hero .container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 760px;
}

.page-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.page-hero p {
  font-size: 1.05rem;
  color: var(--ink-muted);
  line-height: 1.7;
}

.hero-cta { margin-top: 8px; }

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

.page-body {
  padding: 32px 0 96px;
}

.page-body .container {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.content-block {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 36px;
  border: 1px solid var(--border);
}

.content-block h2 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 400;
  margin-bottom: 16px;
}

.content-block h3 {
  font-size: 1.15rem;
  font-family: var(--font);
  font-weight: 600;
  margin-top: 24px;
}

.content-block p + ul,
.content-block p + ol { margin-top: -8px; }

.content-block ul,
.content-block ol { padding-left: 1.25rem; }

.content-block li + li { margin-top: 8px; }

/* FAQ Section */
.faq-section {
  background: var(--surface-muted);
}

/* Answers are set narrower than the container. Apple runs FAQ answers at 59%
   of the viewport against body copy at 66%, so an answer reads as a reply to
   one person rather than as another column of marketing. */
.faq-list {
  max-width: 720px;
  margin: 0 auto;
}

.faq-item {
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
}

.faq-item:last-child { border-bottom: none; padding-bottom: 0; }
/* The first item keeps its padding: zeroing it pinned the question to the
   heading above with no breathing room. Its top border goes instead, since
   a rule directly under a heading reads as an underline of the heading. */
.faq-item:first-of-type { border-top: none; }

.faq-item h3 {
  margin-bottom: 8px;
  font-size: 1.05rem;
  font-weight: 600;
  font-family: var(--font);
  color: var(--ink);
  margin-bottom: 8px;
  margin-top: 0;
}

.faq-item p {
  margin-bottom: 0;
  font-size: 0.92rem;
  line-height: 1.7;
}

/* ========== PRICING ========== */
.pricing-intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
}

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

.pricing-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 36px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: all 0.25s ease;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.pricing-card.featured {
  border-color: var(--red);
  border-width: 2px;
}

.pricing-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pricing-price {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 400;
  color: var(--red);
}

.pricing-period { font-size: 0.88rem; color: var(--ink-soft); }

.pricing-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pricing-features li {
  display: flex;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--ink-muted);
}

.pricing-features li::before {
  content: '✓';
  color: var(--red);
  font-weight: 600;
  flex-shrink: 0;
}

.pricing-note {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.note {
  font-size: 0.88rem;
  color: var(--ink-muted);
  padding: 14px 18px;
  border-radius: var(--r-md);
  background: var(--red-soft);
  line-height: 1.6;
}

/* ========== STORY: four screens, one invoice ========== */
/* The four screenshots are a sequence, not a gallery. Each carries the same
   $1,330 through to the finished document, so they are laid out as numbered
   steps with the caption beside the phone rather than dumped in a row. */
.story-step {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 96px;
}
/* Explicit class rather than nth-child: the section header is also a child of
   the container, so nth-child would flip the wrong steps. */
.story-step.reverse { grid-template-columns: 1fr 380px; }
.story-step.reverse .story-shot { order: 2; }
.story-step.reverse .story-text { order: 1; }

.story-shot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 22px;
  border: 1px solid var(--line, #e5e8ec);
  box-shadow: 0 24px 60px rgba(15, 20, 30, 0.10);
}
.story-text h3 {
  font-size: 1.7rem;
  line-height: 1.25;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.story-text p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 0 0 12px;
  max-width: 460px;
}
.story-note {
  font-size: 0.9rem;
  color: var(--ink-muted);
  border-left: 2px solid var(--red);
  padding-left: 14px;
  margin-top: 18px;
}
@media (max-width: 900px) {
  .story-step,
  .story-step.reverse { grid-template-columns: 1fr; gap: 28px; margin-bottom: 64px; }
  .story-step.reverse .story-shot { order: 0; }
  .story-step.reverse .story-text { order: 0; }
  .story-shot { max-width: 340px; margin: 0 auto; }
  .story-text h3 { font-size: 1.35rem; }
}

/* ========== COMPARISON ========== */
.compare-table { width: 100%; border-collapse: collapse; font-size: 0.98rem; margin-top: 8px; }
.compare-table th,
.compare-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line, #e5e8ec); white-space: nowrap; }
.compare-table thead th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); font-weight: 700; }
.compare-table td:first-child { color: var(--ink-muted); white-space: normal; }
.compare-table .win-col,
.compare-table .win { background: rgba(216, 80, 60, 0.05); }
.compare-table thead .win-col { color: var(--ink); }
.compare-table .win { font-weight: 700; color: var(--ink); }
.compare-table .lose { color: var(--ink-muted); }
.compare-note { font-size: 0.86rem; color: var(--ink-muted); margin-top: 14px; }
@media (max-width: 720px) { .compare-table th, .compare-table td { padding: 11px 10px; font-size: 0.85rem; } }

/* ========== FOOTER ========== */
.footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.88);
  padding: 72px 0 40px;
}

.footer .container {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.footer-grid {
  display: grid;
  /* Was 1.5fr against three narrow columns, which left the brand side mostly
     empty while the link columns wrapped their labels onto two lines. */
  grid-template-columns: 1.1fr repeat(4, minmax(140px, 0.6fr));
  gap: 40px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-brand .logo { color: var(--ink-inverse); }
.footer-brand .logo::before {
  background: var(--red);
}

.footer-description {
  color: rgba(255, 255, 255, 0.5);
  max-width: 300px;
  font-size: 0.92rem;
  line-height: 1.6;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col h4 {
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--font);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.35);
  margin: 0 0 4px;
}

.footer-col a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.92rem;
  transition: color 0.2s ease;
}

.footer-col a:hover { color: white; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-meta {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.35);
  margin: 0;
}

.footer-bottom button,
.footer .lang-toggle-wrapper button {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.12);
}

.footer-bottom button:hover,
.footer .lang-toggle-wrapper button:hover {
  border-color: rgba(255, 255, 255, 0.35);
}

/* Legacy footer layout */
.footer-links { display: flex; flex-direction: column; gap: 16px; }
.footer-links-group { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.92rem; }
.footer-links-group a { color: rgba(255, 255, 255, 0.7); transition: color 0.2s ease; }
.footer-links-group a:hover { color: white; }
.footer .lang-toggle-wrapper { display: flex; justify-content: flex-end; align-items: center; }

/* ========== FORM MESSAGES ========== */
.form-message { font-size: 0.9rem; line-height: 1.5; }

.form-message.success,
.form-message.error {
  padding: 14px 18px;
  border-radius: var(--r-md);
  font-weight: 500;
}

.form-message.success {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.2);
  color: #166534;
}

.form-message.error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #B91C1C;
}

/* ========== ACCESSIBILITY ========== */
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ========== RESPONSIVE ========== */
@media (max-width: 1100px) {
  section { padding: 80px 0; }

  .hero { padding: 80px 0 60px; }
  .hero-title { font-size: clamp(2.2rem, 6vw, 3rem); }

  .nav-toggle { display: inline-flex; }
  .nav-drawer { display: none; }

  body.nav-open { overflow: hidden; }

  body.nav-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 110;
  }

  body.nav-open .nav-toggle { position: relative; z-index: 130; }

  body.nav-open .nav-drawer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: 72px;
    left: 16px;
    right: 16px;
    background: var(--surface);
    padding: 20px;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    gap: 16px;
    z-index: 120;
  }

  body.nav-open .primary-nav,
  body.nav-open .header-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  body.nav-open .primary-nav a {
    width: 100%;
    justify-content: center;
    padding: 12px;
    font-size: 0.95rem;
  }

  body.nav-open .header-actions .btn,
  body.nav-open .header-actions .btn-primary,
  body.nav-open .header-actions .btn-ghost {
    width: 100%;
    justify-content: center;
  }

  .card-grid { grid-template-columns: 1fr; }
  .experience-grid { grid-template-columns: 1fr; }

  .feature-row {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 60px 0;
  }

  .feature-row.reverse .feature-visual {
    order: 0;
  }

  .carousel-track {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 0 24px 20px;
  }

  .carousel-item {
    scroll-snap-align: start;
    width: 200px;
  }

  .workflow-steps { grid-template-columns: repeat(2, 1fr); }
  .testimonials { grid-template-columns: repeat(2, 1fr); }
  .cta-section { padding: 60px 40px; }

  .section-header { margin-bottom: 48px; }

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

  .footer-brand { grid-column: 1 / -1; }

  .footer-bottom {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  section { padding: 64px 0; }

  .hero { padding: 60px 0 40px; }
  .hero-title { font-size: clamp(2rem, 7vw, 2.5rem); }
  .hero-subtitle { font-size: 1rem; }
  .hero-icon { width: 56px; height: 56px; font-size: 1.5rem; border-radius: 14px; }

  h1 { font-size: clamp(2rem, 7vw, 2.5rem); }
  h2 { font-size: clamp(1.75rem, 5vw, 2.25rem); }

  .section-title { font-size: clamp(1.75rem, 5vw, 2.25rem); }

  .carousel-item { width: 180px; }

  .workflow-steps { grid-template-columns: 1fr; }
  .testimonials { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }

  .section-header { margin-bottom: 36px; }
  .cta-section { padding: 48px 28px; }
  .cta-title { font-size: clamp(1.6rem, 5vw, 2rem); }

  .cta-actions {
    width: 100%;
    flex-direction: column;
  }

  .cta-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .page-hero { padding: 80px 0 40px; }
  .content-block { padding: 28px; }

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

  .feature-card { padding: 28px 24px; }
  .app-store-badge { width: 150px; }
}

@media (max-width: 600px) {
  .container { width: calc(100% - 32px); }

  .pricing-card header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .pricing-price { font-size: 2rem; }
  .carousel-item { width: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .fade-in, .anim {
    opacity: 1;
    transform: none;
  }

  .hero-icon, .hero-title, .hero-subtitle,
  .hero-actions, .carousel-track {
    opacity: 1;
    transform: none;
  }
}

/* ========== TOOL PAGES (hours log) ========== */

/*
 * A tool page, not a marketing page. The hero is short on purpose: someone
 * arriving here has a job to do and the tool should be visible without
 * scrolling. The reading matter sits underneath, for afterwards.
 */
.tool-hero {
  padding: 48px 0 28px;
}

.tool-eyebrow {
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--red, #e8453c);
  font-weight: 600;
  margin: 0 0 10px;
}

.tool-hero h1 {
  margin: 0 0 10px;
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.1;
}

.tool-sub {
  margin: 0;
  max-width: 620px;
  color: #555;
  font-size: 17px;
  line-height: 1.6;
}

.tool-body { padding: 0 0 72px; }

.tool-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 8px 28px rgba(0,0,0,0.05);
  overflow: hidden;
}

/* Name, employer, and the number the whole page exists to produce. */
.tool-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px;
  border-bottom: 1px solid #f0f0f0;
  background: #fcfcfc;
}

.tool-identity {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  flex: 1;
  min-width: 260px;
  max-width: 520px;
}

.log-field label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.3px;
  color: #6b7280;
  margin-bottom: 6px;
}

.log-field input {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background: #fff;
  color: inherit;
}

.log-field input:focus,
.log-table input:focus {
  outline: 2px solid var(--red, #e8453c);
  outline-offset: 1px;
  border-color: var(--red, #e8453c);
}

.tool-total {
  text-align: right;
  line-height: 1.15;
}

.tool-total-label {
  display: block;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 4px;
}

.tool-total strong {
  font-size: 34px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}

.tool-total-decimal {
  display: block;
  font-size: 13px;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
}

/* -------- the table -------- */

.log-table-wrap { overflow-x: auto; }

.log-table {
  width: 100%;
  border-collapse: collapse;
}

.log-table th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #6b7280;
  font-weight: 600;
  padding: 12px 8px;
  border-bottom: 1px solid #eee;
  white-space: nowrap;
}

.log-table th:first-child, .log-table td:first-child { padding-left: 24px; }
.log-table th:last-child, .log-table td:last-child { padding-right: 24px; }
.log-table th.num, .log-table td.num { text-align: right; }

.log-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #f5f5f5;
  vertical-align: middle;
}

.log-table tr:last-child td { border-bottom: 0; }
.log-table tbody tr:hover { background: #fcfcfc; }

.log-table input {
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  width: 100%;
  color: inherit;
}

/* The field only draws itself when you are near it, so a full log reads as a
   record rather than as a wall of boxes. */
.log-table input:hover { border-color: #e6e6e6; background: #fff; }

.log-table td:nth-child(1) input { min-width: 140px; }
.log-table td:nth-child(2) input,
.log-table td:nth-child(3) input { min-width: 105px; }
.log-table td:nth-child(4) input { min-width: 70px; }
.log-table td:nth-child(5) input { min-width: 150px; }

.log-hours {
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.log-remove-cell { width: 44px; }

.log-remove {
  border: 0;
  background: transparent;
  color: #c4c4c4;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 9px;
  border-radius: 8px;
}

.log-table tr:hover .log-remove { color: #9ca3af; }
.log-remove:hover { color: #b02a24; background: #fdf1ef; }

/* -------- actions -------- */

.log-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 18px 24px;
  border-top: 1px solid #f0f0f0;
  background: #fcfcfc;
}

.log-actions-spacer { flex: 1; min-width: 8px; }

.log-saved {
  font-size: 13px;
  color: #1c7c54;
  white-space: nowrap;
}

.log-clear { color: #6b7280; }

.log-warning {
  margin: 0;
  padding: 14px 24px 0;
  font-size: 14px;
  color: #b02a24;
}

/* -------- weekly breakdown -------- */

.log-weeks {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  max-width: 420px;
}

.log-weeks li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 2px;
  border-bottom: 1px solid #ededed;
  font-size: 14px;
  color: #555;
}

.log-weeks li:last-child { border-bottom: 0; }
.log-weeks strong { font-variant-numeric: tabular-nums; color: #111; }

/* -------- prose under a tool, shared with the landing pages -------- */

.landing-prose {
  max-width: 680px;
  margin: 64px auto 0;
}

.landing-block {
  /* A generic section rule gives every <section> 64px of vertical padding.
     These are paragraphs inside a column, not page sections, and inheriting it
     put 128px of dead space around every one of them. */
  padding: 0;
  margin-bottom: 36px;
}
.landing-block h2 { font-size: 22px; margin: 0 0 12px; }
.landing-block p { margin: 0 0 12px; color: #444; line-height: 1.65; }

/*
 * Phones. The table restacks into one card per day rather than scrolling
 * sideways, because the people this page is for are on a site or in a van, and
 * a horizontal scrollbar is where a form goes to be abandoned.
 */
@media (max-width: 760px) {
  .log-table thead { display: none; }
  .log-table, .log-table tbody, .log-table tr, .log-table td { display: block; width: 100%; }

  .log-table tr {
    border: 1px solid #ececec;
    border-radius: 14px;
    margin: 14px 16px;
    padding: 6px 4px 10px;
    position: relative;
  }

  .log-table td {
    display: grid;
    grid-template-columns: 88px 1fr;
    align-items: center;
    gap: 12px;
    border-bottom: 0;
    padding: 6px 12px;
  }

  .log-table th:first-child, .log-table td:first-child,
  .log-table th:last-child, .log-table td:last-child { padding-left: 12px; padding-right: 12px; }

  .log-table td::before {
    content: attr(data-label);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #6b7280;
    font-weight: 600;
  }

  .log-table input { border-color: #e6e6e6; background: #fff; }
  .log-table td.num { text-align: left; }
  .log-hours { font-size: 16px; }

  /* Remove sits under the day it removes, not on top of the date field.
     Absolute positioning put it over the first input, where it was both
     unreadable and easy to hit by accident. */
  .log-remove-cell {
    display: flex;
    justify-content: flex-end;
    padding: 2px 12px 0;
  }

  .log-remove-cell .log-remove {
    color: #6b7280;
    font-size: 13px;
    padding: 6px 10px;
  }

  .log-remove-cell .log-remove::after {
    content: 'Remove day';
    margin-left: 6px;
  }

  /* One column. Two 190px minimums plus the gap do not fit a phone, and the
     card was being pushed past the edge of the screen. */
  .tool-identity { grid-template-columns: 1fr; max-width: none; min-width: 0; }

  .tool-hero { padding: 28px 0 20px; }
  .tool-sub { font-size: 16px; }
  .tool-card-head { flex-direction: column; align-items: stretch; gap: 18px; }
  .tool-total { text-align: left; }
  .tool-total strong { font-size: 30px; }
  .log-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/*
 * Present to a screen reader, absent on screen.
 *
 * The class was already in use on several pages and had never been defined
 * anywhere, so every "hidden" label was simply visible: the hours log printed
 * a bare REMOVE above its last column.
 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* ---------- Guide pages: pulled quotes and screenshots ---------- */

/* Reviews and statute text quoted inside a landing-block. */
.landing-quote {
  margin: 0 0 16px;
  padding: 14px 18px;
  border-left: 3px solid var(--border);
  background: #fafafa;
}

.landing-quote p {
  margin: 0 0 8px;
  color: #444;
  font-style: italic;
}

.landing-quote p:last-child { margin-bottom: 0; }

/* App screenshots are exported at device resolution (1242px wide), so they
   need an explicit cap or they blow the column out on every screen. */
.landing-figure {
  margin: 20px 0 24px;
  text-align: center;
}

.landing-figure img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
}

.landing-figure figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.5;
}

/* ---------- Guide pages: ordered action steps ---------- */

/* Numbered steps on the distress pages, where the reader needs to do things in
   order rather than read prose. Deliberately heavier than a plain <ol>: the
   number is the anchor someone scrolls back to. */
.steps-list {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.steps-list > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 18px 46px;
  margin: 0;
  color: #444;
  line-height: 1.65;
}

.steps-list > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.steps-list > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 34px;
  bottom: 4px;
  width: 2px;
  background: var(--border-light);
}

/* ------------------------------------------------------- feature pages -- */

/*
 * The list of what is included. Two columns of short lines, because the point
 * is to be scanned rather than read: someone deciding whether this does the
 * thing they need should find it without a paragraph in the way.
 */
.spec-grid {
  list-style: none;
  margin: 24px 0 48px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 32px;
}

.spec-grid li {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink-muted);
  padding-left: 20px;
  position: relative;
}

.spec-grid li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
}

.spec-grid strong {
  color: var(--ink);
  font-weight: 600;
}

.faq-item {
  padding: 18px 0;
  border-top: 1px solid var(--border-light);
}

/* Separate the run of questions from the heading that introduces it. */
.landing-prose h2 + .faq-item,
.faq-list .faq-item:first-of-type {
  margin-top: 20px;
}

.faq-item h3 {
  font-size: 1rem;
  margin: 0 0 6px;
}

.faq-item p {
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.65;
}

/* The ask, once the case has been made. */
.page-cta {
  margin-top: 56px;
  padding: 36px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-light);
  background: var(--surface-muted);
  text-align: center;
}

.page-cta h2 {
  margin: 0 0 20px;
}

.page-cta .cta-actions {
  justify-content: center;
}

.page-cta .landing-note {
  margin-top: 18px;
}

@media (max-width: 700px) {
  .spec-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-cta {
    padding: 28px 20px;
  }
}

/*
 * The browser route out of the hero. The App Store badge is the loud option
 * and stays that way; this is for the visitor on a laptop, who the headline
 * has just told can use a browser and who otherwise had nothing to click.
 */
.hero-web-cta {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.95rem;
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero-web-cta:hover {
  color: var(--ink);
}

/* ========== 1.12: app clips, the free-sessions line, two extras ========== */
/* The clips are cut to the phone itself, bezel included, so they carry no
   card of their own: the corners are rounded to the bezel's curve (about 100
   of 690 pixels across, 100 of 1446 down) and the page shows through. */
.story-shot.is-video video,
.feature-visual.is-video video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14.5% / 6.9%;
}
.feature-visual.is-video {
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
.story-shot.is-video video {
  box-shadow: 0 24px 60px rgba(15, 20, 30, 0.12);
}

.hero-note {
  margin: 2px 0 0;
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.extras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  padding: 80px 0 0;
  border-top: 1px solid var(--border-light);
  margin-top: 80px;
}
.extra h3 {
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.extra p {
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.7;
}

/* Pricing: the free start and the two Pro plans side by side, stacked on a phone. */
.pricing-grid.three { grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* The pricing page's text column is 760px; three plans get a wider one. */
.page-body .container:has(> .pricing-grid.three) { max-width: 980px; }
/* Three cards are still narrow: the plan name sits above its price, not beside it. */
.pricing-grid.three .pricing-card { padding: 28px; }
.pricing-grid.three .pricing-card header {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
@media (max-width: 900px) {
  .pricing-grid.three { grid-template-columns: 1fr; }
}