/* ================================================
   main.css — shared stylesheet
   Design System + All Components
   ================================================ */

/* ---- RESET & BASE ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Inter arrives late (async Google Fonts CSS), so the first paint uses a
   fallback. Unadjusted Arial is narrower and shorter than Inter, and the swap
   reflowed every line — the centred home-page headline visibly jumped (CLS
   0.10-0.15 on desktop). Arial scaled to Inter's metrics keeps the lines where
   they are when Inter lands. Values are the standard Inter→Arial overrides. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('ArialMT'), local('Helvetica');
  size-adjust: 107.4%;
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
}

:root {
  /* Every page on this stylesheet is dark. Without this, Chromium on Windows
     draws the <select> popup light, with near-white option text on white. */
  color-scheme: dark;

  /* Colors */
  --bg-primary: #0a0a0f;
  --bg-secondary: #0f0f1a;
  --bg-card: rgba(255, 255, 255, 0.04);
  --accent-purple: #7c3aed;
  --accent-cyan: #06b6d4;
  --accent-mid: #5b21b6;
  --gradient-main: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
  /* Same brand ramp, dark enough to carry white text. --gradient-main is only
     ever safe under white where it starts: #06b6d4 is 2.43:1 against #fff and
     the whole second half of the ramp is under 4.5:1, so a white 15.2px/600
     button label failed WCAG AA everywhere it sat on it. Ending the ramp at
     #0a7d99 — same hue (192 vs 189), same saturation (0.88 vs 0.94), just
     darker — puts the worst point along the ramp at 4.77:1. Kept separate from
     --gradient-main because that variable also paints .gradient-text headlines,
     the wordmark and .plan-amount, where the darker end would dull the design
     and where the contrast direction is reversed anyway (colour on #0a0a0f). */
  --gradient-btn: linear-gradient(135deg, #7c3aed 0%, #0a7d99 100%);
  --gradient-subtle: linear-gradient(135deg, rgba(124,58,237,0.15) 0%, rgba(6,182,212,0.15) 100%);
  --text-primary: #f0f0ff;
  --text-secondary: #94a3b8;
  --text-muted: #748296;   /* was #4a5568 — 2.53:1 on --bg-primary, below WCAG AA; now 4.87:1 */
  --border-glass: rgba(255, 255, 255, 0.08);
  --border-accent: rgba(124, 58, 237, 0.3);

  /* Spacing */
  --section-py: 6rem;
  --container-max: 1200px;
  --radius-card: 20px;
  --radius-btn: 999px;

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-blur: blur(20px);
  --glass-border: 1px solid rgba(255, 255, 255, 0.1);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', 'Inter Fallback', -apple-system, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ---- TYPOGRAPHY ---- */
h1, h2, h3, h4 { line-height: 1.2; font-weight: 800; }
/* Max is 4.25rem (68px), not 5rem: the hero text column is capped at ~544px on
   every desktop width, and a 80px headline needs 575px for "A professional" —
   so the first word was orphaned onto its own line from 1366px up. 68px leaves
   55px of slack, enough to survive the wider fallback font before Inter loads. */
h1 { font-size: clamp(2.8rem, 6vw, 4.25rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }

.gradient-text {
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- LAYOUT ---- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.5rem;
}

section { padding: var(--section-py) 0; }

.section-label {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  background: rgba(6, 182, 212, 0.1);
  border: 1px solid rgba(6, 182, 212, 0.25);
  padding: 0.35rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.2rem;
}

.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-header p {
  margin-top: 1rem;
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- BUTTONS ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 2rem;
  border-radius: var(--radius-btn);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: var(--gradient-btn);
  color: white;
  box-shadow: 0 4px 24px rgba(124, 58, 237, 0.4);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(124, 58, 237, 0.6);
}

.btn-secondary {
  background: var(--glass-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.btn-secondary:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-2px);
}

/* ---- GLASS CARD ---- */
.glass-card {
  background: var(--glass-bg);
  border: var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-card);
  transition: all 0.3s ease;
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(124, 58, 237, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

/* ================================================
   NAVBAR
   ================================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 1rem 0;
  transition: all 0.3s ease;
}

.navbar.scrolled {
  background: rgba(10, 10, 15, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border-glass);
  padding: 0.75rem 0;
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

.nav-logo img {
  height: 45px;
  width: auto;
  object-fit: contain;
}

.nav-logo span {
  font-size: 1rem;
  font-weight: 800;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.01em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}

.nav-links a {
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.2s;
}

.nav-links a:hover { color: var(--text-primary); }

.nav-cta {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 5px;
  background: none;
  border: none;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.mobile-menu {
  display: none;
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  background: rgba(10, 10, 15, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border-glass);
  padding: 1.5rem;
  z-index: 999;
  flex-direction: column;
  gap: 1rem;
}

.mobile-menu.open { display: flex; }
.mobile-menu a { text-decoration: none; color: var(--text-secondary); font-size: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border-glass); }
.mobile-menu a:last-child { border: none; }

/* ================================================
   HERO SECTION
   ================================================ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: 80px;
}

/* Animated background blobs */
.blob-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.3;
  animation: blobFloat 8s ease-in-out infinite;
}

.blob-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, #7c3aed, transparent);
  top: -200px;
  left: -200px;
  animation-delay: 0s;
}

.blob-2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #06b6d4, transparent);
  top: 10%;
  right: -150px;
  animation-delay: -3s;
}

.blob-3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #5b21b6, transparent);
  bottom: -100px;
  left: 40%;
  animation-delay: -5s;
}

@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -40px) scale(1.05); }
  66% { transform: translate(-20px, 20px) scale(0.95); }
}

/* Grid overlay */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.hero .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-cyan);
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.2);
  padding: 0.4rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.5rem;
}

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

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

.hero-title {
  margin-bottom: 1.5rem;
  /* Distributes words evenly across lines instead of filling each line greedily,
     which is what leaves a single short word stranded. Progressive enhancement —
     browsers without support just keep the default greedy wrap. */
  text-wrap: balance;
}

.hero-subtitle {
  font-size: 1.15rem;
  color: var(--text-secondary);
  margin-bottom: 2.5rem;
  max-width: 480px;
  line-height: 1.7;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-stats {
  display: flex;
  gap: 2.5rem;
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border-glass);
}

.stat-item { text-align: left; }

.stat-number {
  font-size: 2rem;
  font-weight: 900;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Hero visual */
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-mockup {
  position: relative;
  width: 100%;
  max-width: 520px;
}

.mockup-frame {
  background: var(--glass-bg);
  border: var(--glass-border);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 40px 100px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
  animation: floatMockup 6s ease-in-out infinite;
}

@keyframes floatMockup {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -12px, 0) rotate(0.5deg); }
}

.mockup-bar {
  background: rgba(255,255,255,0.05);
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border-bottom: 1px solid var(--border-glass);
}

.mockup-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.mockup-dot:nth-child(1) { background: #ff5f57; }
.mockup-dot:nth-child(2) { background: #febc2e; }
.mockup-dot:nth-child(3) { background: #28c840; }

.mockup-url {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
  height: 20px;
  margin: 0 0.5rem;
}

.mockup-content {
  padding: 0;
}

/* -- Mini Navbar inside mockup -- */
.mockup-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
}

.mockup-nav-logo {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.mockup-nav-links {
  display: flex;
  gap: 0.6rem;
}

.mockup-nav-links span {
  font-size: 0.5rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* -- Mini Hero inside mockup -- */
.mockup-hero-section {
  padding: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  align-items: center;
  background: linear-gradient(180deg, rgba(124,58,237,0.08) 0%, transparent 100%);
}

.mockup-hero-left {
  text-align: left;
}

.mockup-hero-title {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 0.35rem;
}

.mockup-hero-title span {
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mockup-hero-desc {
  font-size: 0.45rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.mockup-hero-cta {
  display: inline-block;
  font-size: 0.45rem;
  font-weight: 700;
  color: #fff;
  background: var(--gradient-main);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}

.mockup-hero-stats {
  display: flex;
  gap: 0.6rem;
}

.mockup-stat {
  display: flex;
  flex-direction: column;
}

.mockup-stat strong {
  font-size: 0.6rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.mockup-stat span {
  font-size: 0.4rem;
  color: var(--text-secondary);
}

/* -- Right side: image + rating -- */
.mockup-hero-right {
  position: relative;
}

.mockup-hero-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(124,58,237,0.25) 0%, rgba(6,182,212,0.2) 100%),
    radial-gradient(circle at 30% 40%, rgba(124,58,237,0.3) 0%, transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(6,182,212,0.25) 0%, transparent 60%);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.mockup-hero-rating {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 15, 26, 0.9);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 6px;
  padding: 0.2rem 0.4rem;
  font-size: 0.4rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

/* -- Mini Service Cards inside mockup -- */
.mockup-services {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
  padding: 0.75rem 1rem 1rem;
}

.mockup-service-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 0.6rem 0.4rem;
  text-align: center;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.mockup-service-card:first-child {
  background: var(--gradient-subtle);
  border-color: var(--border-accent);
}

.mockup-service-icon {
  margin-bottom: 0.25rem;
  color: var(--accent-cyan);
}

.mockup-service-icon svg {
  width: 1rem;
  height: 1rem;
  display: block;
  margin: 0 auto;
}

/* The first card is the highlighted one (see .mockup-service-card:first-child),
   so its icon takes the purple end of the ramp rather than the cyan default. */
.mockup-service-card:first-child .mockup-service-icon { color: var(--accent-purple); }

.mockup-service-name {
  font-size: 0.5rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Floating badge on mockup */
.hero-floating-badge {
  position: absolute;
  bottom: -20px;
  left: -30px;
  background: var(--glass-bg);
  border: var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  animation: floatBadge 5s ease-in-out infinite;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

@keyframes floatBadge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.badge-icon { font-size: 1.4rem; }
.badge-text { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.3; }
.badge-text strong { color: var(--text-primary); display: block; font-size: 0.85rem; }

.hero-floating-badge-2 {
  position: absolute;
  top: -15px;
  right: -25px;
  background: rgba(6, 182, 212, 0.1);
  border: 1px solid rgba(6, 182, 212, 0.2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 12px;
  padding: 0.6rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-cyan);
  animation: floatBadge 5s ease-in-out infinite;
  animation-delay: -2.5s;
}

/* ================================================
   MOCKUP ICONS + DATA PLACEHOLDERS
   ================================================ */

/* The mockups previously drew their icons as emoji. Emoji resolve to whichever
   colour font the OS ships — on Windows, where most of this site's readers are,
   they render as flat Segoe stickers that break the dark restrained look of the
   frame they sit in. These inherit currentColor instead and look identical
   everywhere. */
.mockup-icon {
  width: 0.72rem;
  height: 0.72rem;
  flex: 0 0 auto;
  color: var(--accent-cyan);
}

.mockup-icon-star {
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 auto;
  color: #febc2e;
}

/* Stands in for a number the client does not have yet. The mockup is a preview
   of THEIR future homepage, so the slots that will hold their review count and
   customer count are drawn the same way as the empty address bar above them
   (.mockup-url) rather than filled with invented figures — "XX+" and "X.X" read
   as an unfinished page, and real-looking numbers would be a claim we cannot
   make on a sample site. */
.mockup-skeleton {
  display: inline-block;
  vertical-align: middle;
  width: 1.5rem;
  height: 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.mockup-hero-rating .mockup-skeleton {
  width: 1rem;
  height: 0.3rem;
}

.badge-icon {
  display: flex;
  color: var(--accent-purple);
}

.badge-icon svg { width: 1.25rem; height: 1.25rem; }

.hero-floating-badge-2 {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.hero-floating-badge-2 svg { width: 0.95rem; height: 0.95rem; flex: 0 0 auto; }

/* ================================================
   FEATURES SECTION
   ================================================ */
.features { background: var(--bg-secondary); }

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.feature-card {
  padding: 2rem;
  border-radius: var(--radius-card);
  cursor: default;
}

.feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  background: var(--gradient-subtle);
  border: 1px solid var(--border-accent);
}

.feature-card h3 { margin-bottom: 0.6rem; font-size: 1.1rem; }
.feature-card p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; }

/* ================================================
   PROCESS SECTION
   ================================================ */
.process {
  position: relative;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative;
}

.process-steps::before {
  content: '';
  position: absolute;
  top: 2.5rem;
  left: calc(12.5% + 1.5rem);
  right: calc(12.5% + 1.5rem);
  height: 1px;
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan));
  opacity: 0.3;
}

.step-card {
  padding: 2rem 1.5rem;
  border-radius: var(--radius-card);
  text-align: center;
}

.step-number {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--gradient-main);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 900;
  color: white;
  margin: 0 auto 1.25rem;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.2);
}

.step-card h3 { font-size: 1rem; margin-bottom: 0.5rem; }
.step-card p { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.5; }

/* ================================================
   PRICING SECTION
   ================================================ */
.pricing { background: var(--bg-secondary); }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.pricing-card {
  padding: 2.5rem 2rem;
  border-radius: var(--radius-card);
  position: relative;
  transition: all 0.3s ease;
}

.pricing-card.featured {
  background: var(--gradient-subtle);
  border: 1px solid var(--border-accent);
  transform: scale(1.03);
}

.pricing-card.featured:hover {
  transform: scale(1.03) translateY(-4px);
}

.pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gradient-btn);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 1rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  line-height: 1;
}

.pricing-badge .badge-icon {
  font-size: 0.8rem;
  display: inline-flex;
  transform: translateY(-1px);
}

.pricing-name {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

.pricing-price {
  margin-bottom: 0.25rem;
  line-height: 1;
}

.pricing-price .amount {
  font-size: 3rem;
  font-weight: 900;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pricing-price .currency { font-size: 1.5rem; font-weight: 700; color: var(--text-secondary); vertical-align: super; }
.pricing-desc { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 1.75rem; }

.pricing-features {
  list-style: none;
  margin-bottom: 2rem;
}

.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-glass);
  color: var(--text-secondary);
}

.pricing-features li:last-child { border: none; }

.pricing-features .check {
  color: var(--accent-cyan);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

.btn-full { width: 100%; text-align: center; justify-content: center; }

/* ================================================
   PORTFOLIO SECTION
   ================================================ */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.portfolio-item {
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.portfolio-item img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.portfolio-item:hover img { transform: scale(1.05); }

.portfolio-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,10,15,0.95) 0%, rgba(10,10,15,0.2) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.portfolio-item:hover .portfolio-overlay { opacity: 1; }

.portfolio-tag {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-cyan);
  margin-bottom: 0.3rem;
}

.portfolio-overlay h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.portfolio-overlay p {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* ================================================
   TESTIMONIALS SECTION
   ================================================ */
.testimonials { background: var(--bg-secondary); }

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.testimonial-card { padding: 2rem; border-radius: var(--radius-card); }

.testimonial-stars {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
  color: #f59e0b;
}

.testimonial-text {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gradient-main);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: white;
  flex-shrink: 0;
}

.author-name { font-weight: 700; font-size: 0.9rem; }
.author-title { font-size: 0.8rem; color: var(--text-secondary); }

/* ================================================
   FAQ SECTION
   ================================================ */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-item {
  border-radius: 14px;
  overflow: hidden;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background: var(--glass-bg);
  border: var(--glass-border);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.faq-question:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--border-accent);
}

.faq-item.open .faq-question {
  border-radius: 14px 14px 0 0;
  border-bottom-color: var(--border-accent);
  color: var(--accent-cyan);
}

.faq-icon {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 1rem;
  color: var(--accent-cyan);
}

.faq-item.open .faq-icon { transform: rotate(45deg); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;   /* max-height alone leaves links inside a collapsed answer in the tab order */
  transition: max-height 0.4s ease, padding 0.3s ease;
  background: rgba(124, 58, 237, 0.05);
  border: var(--glass-border);
  border-top: none;
  border-radius: 0 0 14px 14px;
}

/* This cap exists only to give max-height something to transition to — it is not
   a design constraint, so it must sit far above the tallest answer at the
   narrowest viewport. At 300px it silently clipped, with no scrollbar and no way
   to reach the rest: at 320px the US FAQ's cancellation answer needs 586px and
   its payment answer 571px, so the "no refund" qualifier and the late-fee and
   processor-fee disclosures were cut off mid-sentence. Single-paragraph answers
   never hit it, which is why it survived this long. Keep the headroom generous. */
.faq-item.open .faq-answer {
  visibility: visible; max-height: 1500px; }

.faq-answer p {
  padding: 1.25rem 1.5rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* ================================================
   CTA / CONTACT SECTION
   ================================================ */
.contact {
  position: relative;
  overflow: hidden;
}

.contact::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(124,58,237,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
  position: relative;
  z-index: 1;
}

.contact-info h2 { margin-bottom: 1rem; }
.contact-info > p { color: var(--text-secondary); margin-bottom: 2rem; font-size: 1rem; line-height: 1.7; }

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-detail {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.contact-link {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-link:hover {
  color: var(--accent-cyan);
  text-decoration: underline;
}

.contact-detail-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--gradient-subtle);
  border: 1px solid var(--border-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.contact-form { padding: 2.5rem; border-radius: var(--radius-card); }

.form-group { margin-bottom: 1.25rem; }

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.85rem 1rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-glass);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-family: inherit;
  transition: all 0.3s ease;
  outline: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--accent-purple);
  background: rgba(124, 58, 237, 0.06);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.form-group textarea { resize: vertical; min-height: 120px; }

/* Same look as the inputs around it in every browser (Safari otherwise draws
   a native grey control), with our own chevron in place of the native one. */
.form-group select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1rem;
}

.form-group select option { background: #0f0f1a; color: #f0f0ff; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* ================================================
   FOOTER
   ================================================ */
.footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-glass);
  padding: 3rem 0 2rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer-brand img {
  height: 80px;
  width: auto;
  object-fit: contain;
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--border-glass);
  margin-bottom: 2rem;
}

.footer-brand p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-top: 1rem;
  line-height: 1.6;
  max-width: 280px;
  text-align: center;
}

.footer-col h4 {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  margin-bottom: 1.2rem;
}

.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0.6rem; }
.footer-col ul li a {
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 0.9rem;
  transition: color 0.2s;
}
.footer-col ul li a:hover { color: var(--text-primary); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.footer-legal {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
}

.footer-legal a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-legal a:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

/* ================================================
   SCROLL REVEAL ANIMATIONS
   ================================================ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 1024px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .process-steps::before { display: none; }
  .pricing-grid { gap: 1rem; }
  .pricing-card.featured { transform: scale(1); }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 768px) {
  :root { --section-py: 4rem; }

  .nav-links, .nav-cta .btn { display: none; }
  .hamburger { display: flex; }

  .hero .container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-subtitle { margin: 0 auto 2.5rem; }
  .hero-buttons { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-visual { display: none; }

  .features-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
  .form-row { grid-template-columns: 1fr; }
}

/* Fills the hero-mockup's photo slot with artwork instead of leaving it a bare
   gradient. Only the US page ships this <img>; the gradient on .mockup-hero-img
   stays as the backdrop, so pages without it are unchanged. Swap the src for a
   real photo when one is available — the box is 4:3 and object-fit crops it. */
.mockup-hero-img > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

@media (max-width: 480px) {
  .portfolio-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; }
  .hero-stats { flex-wrap: wrap; gap: 1.5rem; }

  /* The base h1 clamp floors at 2.8rem (44.8px), which never scales down on a
     phone: 6vw only overtakes it above ~747px. At 390px the container is ~342px
     wide, so a 44.8px headline fits "professional" but not "A professional" —
     the first word is orphaned onto its own line. Scale the floor down here. */
  h1 { font-size: clamp(2rem, 9vw, 2.8rem); }

  /* Same defect as h1 had: the base clamp floors at 2rem (32px) and 4vw never
     overtakes it on a phone, so section headings kept a desktop size in a 272px
     column and stranded their last word ("needs", "questions"). */
  h2 { font-size: clamp(1.5rem, 7vw, 2rem); }
}

@media (prefers-reduced-motion: reduce) {
  .blob, .mockup-frame, .hero-floating-badge, .hero-floating-badge-2 {
    animation: none;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* No content-visibility: auto here, on purpose. Its 600px placeholder heights
   are replaced by the real heights only as each section scrolls near, so an
   anchor jump computed against the placeholders (#contact, #faq, every "Get my
   free mockup" button) stopped thousands of px short, in the middle of
   Pricing — on WebKit on the very first tap. The rendering it saved is small
   for a page this size. */


/* ================================================
   LOGO — image lockup (KOMS logo)
   Replaced the text wordmark (.nav-wordmark) on every
   page. The home page sizes its header and footer copies
   in css/sky.css; this covers the legal pages' header.
   ================================================ */
.legal-logo img {
  display: block;
  height: 52px;
  width: auto;
}

@media (max-width: 768px) {
  .legal-logo img { height: 42px; }
}


/* ================================================
   SECTIONS ADDED FOR THE US PAGE
   Industries / Comparison / Guarantee.
   Class names below appear on that page only, so
   pages that don't use them are unaffected.
   ================================================ */

/* Pole-pulapka dla botow. Celowo NIE .sr-only — tamta klasa ujawnia tresc
   czytnikom ekranu, a to jest dokladnie to, czego pulapka robic nie moze:
   niewidomy uzytkownik uslyszalby polecenie wypelnienia pola, ktore go odrzuci.
   Ukryte przed wszystkimi: wzrokiem, czytnikiem (aria-hidden w HTML)
   i klawiatura (tabindex -1). */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Industries ---- */
/* 240px min lands on 4 columns in the 1200px container, so the 12 trades fill
   three complete rows instead of leaving two cards stranded on a fourth, and
   the longer names ("General contractors") stay on one line. */
/* Four explicit columns, one row — the shortlist reads as a set, taken in at
   a glance, rather than as a block to be read line by line. At container width
   that leaves each card about 273px, which is what eight cards had, so the
   card turns vertical to buy back the presence: the icon moves above the label
   instead of beside it, which frees the full width for the text and makes
   "HVAC contractors" fit on one line without shrinking the type. */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.industry-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.85rem;
  padding: 2rem 1rem;
  min-height: 158px;
  border-radius: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text-primary);
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.industry-card:hover {
  transform: translateY(-3px);
  border-color: rgba(6, 182, 212, 0.4);
  background: rgba(6, 182, 212, 0.07);
}

.industry-icon { font-size: 2.4rem; line-height: 1; flex-shrink: 0; }

/* Four across needs roughly 1100px to keep the labels on one line. Below that
   the row halves rather than shrinking the cards, and only at phone width does
   it become a single column. */
@media (max-width: 1100px) {
  .industries-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; margin-inline: auto; }
}

.industries-note {
  margin: 2.5rem auto 0;
  max-width: 620px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.industries-note a { color: var(--accent-cyan); font-weight: 600; text-decoration: none; }
.industries-note a:hover { text-decoration: underline; }

/* ---- Comparison ---- */
.comparison { border-top: 1px solid var(--border-glass); }

/* The table is wider than a phone; it scrolls inside this box so the page
   itself never scrolls sideways. */
.compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
  border: 1px solid var(--border-glass);
  background: var(--bg-card);
}

.compare-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.compare-table th,
.compare-table td {
  padding: 1rem 1.15rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-glass);
}

.compare-table thead th {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

.compare-table tbody th {
  font-weight: 600;
  color: var(--text-primary);
  width: 22%;
}

.compare-table td { color: var(--text-secondary); }
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: 0; }

/* Our column, highlighted end to end */
.compare-table .col-us {
  background: rgba(6, 182, 212, 0.08);
  color: var(--text-primary);
  border-left: 1px solid rgba(6, 182, 212, 0.25);
  border-right: 1px solid rgba(6, 182, 212, 0.25);
}

.compare-table thead .col-us {
  color: var(--accent-cyan);
  border-top: 2px solid var(--accent-cyan);
  border-radius: 10px 10px 0 0;
}

@media (max-width: 480px) {
  .industries-grid { grid-template-columns: 1fr; gap: 0.75rem; }
  .industry-card { flex-direction: row; justify-content: flex-start; text-align: left; gap: 0.9rem; min-height: 0; padding: 1.1rem 1.15rem; font-size: 1rem; }
  .industry-icon { font-size: 1.7rem; }
}

/* ================================================
   PRICING PLANS — subscription model (US site)
   ------------------------------------------------
   A parallel .plan-* namespace. The .pricing-* rules
   above are still live on the Polish page and are
   deliberately left untouched; only .pricing-badge is
   reused, as a child of .plan-lead.

   The .plan-grid / .plan-card / .plan-facts /
   .plan-saving / .plan-cancel-* families that used to
   live here were deleted with the three-column plan
   grid they styled — see the US PAGE RESTRUCTURE block
   at the foot of this file for what replaced them.
   ================================================ */

.plan-name {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
}

.plan-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  line-height: 1;
  margin-bottom: 1rem;
}

.plan-amount {
  font-size: clamp(2.4rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.plan-period {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ---- Every plan includes ---- */
.plan-includes {
  margin-top: 2.75rem;
  padding: 2.75rem 2.5rem;
  border-radius: var(--radius-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(6, 182, 212, 0.08) 100%),
    var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

.plan-includes h2,
.plan-includes h3 {
  font-size: clamp(1.2rem, 2.4vw, 1.45rem);
  text-align: center;
  margin: 0;
}

.plan-includes > p {
  margin: 0.7rem auto 0;
  max-width: 620px;
  text-align: center;
  font-size: 0.94rem;
  color: var(--text-secondary);
}

/* Two columns, not three. At three, the 1200px container leaves ~330px per
   item and half the ten rows wrap to two or three lines, so the list stops
   scanning as one block. minmax(0,…) lets a track shrink below its content. */
.plan-includes ul {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.95rem 2.5rem;
}

.plan-includes li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.plan-includes .check {
  color: var(--accent-cyan);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.plan-includes strong { color: var(--text-primary); font-weight: 600; }

/* ---- After 12 months — the payoff band ---- */
.plan-after {
  position: relative;
  /* The band lives inside #pricing, between the cancellation line and the
     includes panel, so it needs its own separation from what sits above it. */
  margin-top: 2.75rem;
  padding: 3rem 2.5rem;
  border-radius: var(--radius-card);
  text-align: center;
  border: 1px solid var(--border-accent);
  background:
    radial-gradient(120% 150% at 50% 0%, rgba(6, 182, 212, 0.22) 0%, rgba(124, 58, 237, 0.18) 45%, rgba(124, 58, 237, 0.03) 100%),
    var(--bg-primary);
  box-shadow: 0 24px 70px rgba(124, 58, 237, 0.20);
}

.plan-after h2,
.plan-after h3 {
  font-size: clamp(1.5rem, 3.2vw, 2.15rem);
  line-height: 1.25;
  margin: 0 auto;
  max-width: 26ch;
  text-wrap: balance;
}

.plan-after > p {
  margin: 1rem auto 0;
  max-width: 640px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.plan-after strong { color: var(--text-primary); font-weight: 700; }

/* The two ways to pay the server fee, side by side. */
.plan-after-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

.plan-after-option {
  min-width: 200px;
  padding: 1.15rem 1.75rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
}

.plan-after-option strong {
  display: block;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.plan-after-option span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.plan-after > p.plan-after-note {
  margin-top: 1.9rem;
  max-width: 720px;
  font-size: 0.88rem;
  line-height: 1.75;
}

.plan-after .btn { margin-top: 2rem; }

/* Link colour must be qualified. A bare `.plan-after a` beats .btn-primary on
   specificity and repaints a button label cyan-on-gradient. */
.plan-after a:not(.btn) { color: var(--accent-cyan); font-weight: 600; text-decoration: none; }
.plan-after a:not(.btn):hover { text-decoration: underline; }
.plan-after a.btn-primary { color: #fff; text-decoration: none; }
.plan-after a.btn-secondary { color: var(--text-primary); text-decoration: none; }

.plan-includes a:not(.btn) { color: var(--accent-cyan); font-weight: 600; text-decoration: none; }
.plan-includes a:not(.btn):hover { text-decoration: underline; }

/* ---- Plans responsive ---- */
@media (max-width: 900px) {
  .plan-includes { margin-top: 2.25rem; padding: 2rem 1.5rem; }
  .plan-after { padding: 2.5rem 1.5rem; }

  /* Was 720px, which left the two tracks under ~400px for the whole 721–900px
     band: six of the ten items wrapped to a second line, so the list lost its
     rhythm — measured row steps of 60px against 37px. One full-width column
     puts every item back on one line. Above 900px the tracks are wide enough
     that the rows still pair up evenly, so two columns stay. */
  .plan-includes ul { grid-template-columns: 1fr; gap: 0.8rem; }
}

@media (max-width: 420px) {
  .plan-includes { padding: 1.75rem 1.25rem; }
  .plan-after { padding: 2.25rem 1.25rem; }
  .plan-after-options { gap: 0.75rem; }
  .plan-after-option { min-width: 0; width: 100%; padding: 1rem 1.25rem; }
}


/* ================================================
   US PAGE RESTRUCTURE
   ------------------------------------------------
   The page said the same fifteen commercial facts
   over and over — 126 words per fact, 51% of a
   17,127px page spent on price and terms. The fix
   was to delete the echoes, not the facts, which
   collapsed five blocks into these components:

     #mockup           ← new: the free-mockup offer
     .plan-lead        ← the three .plan-card columns
     .pay-table        ← the three .plan-facts <dl>s
     .price-disclosure ← the .plan-cancel-note panel
     #ownership        ← .plan-after, promoted out of
                         the tail of #pricing

   The .hero-chips strip that used to head this list
   is gone: it restated the cancellation terms in the
   hero, where a reader is deciding whether to keep
   reading. Every fact it carried still appears in
   #pricing, the FAQ and the terms of service.

   Appended rather than merged into the blocks above:
   this stylesheet is shared with the Polish site, so
   everything US-specific stays in one removable slab.
   ================================================ */

/* ---- Free-mockup offer ----
   A brand-new business has no portfolio, no testimonials and no reviews, so
   this panel is the page's proof: see the thing before you pay for it. It is
   weighted like .plan-after — full-width, accent border, lit from one corner —
   so it reads as an offer rather than as one more card in a row of cards. The
   light is anchored to the left edge rather than top-centre so the two bands
   read as siblings instead of duplicates. */
#mockup .offer-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: 2.5rem 3.25rem;
  padding: 3rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--border-accent);
  background:
    radial-gradient(115% 135% at 0% 45%, rgba(124, 58, 237, 0.26) 0%, rgba(6, 182, 212, 0.15) 48%, rgba(6, 182, 212, 0.02) 100%),
    var(--bg-secondary);
  box-shadow: 0 24px 70px rgba(124, 58, 237, 0.2);
}

/* The panel also carries .glass-card for its base styling, and
   `.glass-card:hover` (0,2,0) outranks `#mockup .offer-panel` (0,1,1) — so
   without this the whole band lifted 4px and went grey on hover, as if a
   1100px-wide static panel were a clickable card. */
#mockup .offer-panel:hover {
  transform: none;
  border-color: var(--border-accent);
  background:
    radial-gradient(115% 135% at 0% 45%, rgba(124, 58, 237, 0.26) 0%, rgba(6, 182, 212, 0.15) 48%, rgba(6, 182, 212, 0.02) 100%),
    var(--bg-secondary);
  box-shadow: 0 24px 70px rgba(124, 58, 237, 0.2);
}

#mockup .offer-body { min-width: 0; }

#mockup .offer-body h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.15rem);
  line-height: 1.25;
  margin: 0;
  text-wrap: balance;
}

#mockup .offer-body > p {
  margin: 1.1rem 0 0;
  max-width: 54ch;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-secondary);
}

#mockup .offer-body strong { color: var(--text-primary); font-weight: 700; }
#mockup .offer-body .btn { margin-top: 1.85rem; }

/* Same qualification .plan-after needs: a bare descendant link rule beats
   .btn-primary and repaints the CTA label cyan-on-gradient. */
#mockup .offer-panel a:not(.btn) { color: var(--accent-cyan); font-weight: 600; text-decoration: none; }
#mockup .offer-panel a:not(.btn):hover { text-decoration: underline; }
#mockup .offer-panel a.btn-primary { color: #fff; text-decoration: none; }
#mockup .offer-panel a.btn-secondary { color: var(--text-primary); text-decoration: none; }

/* The visual holds a .mockup-frame, which brings its own border, radius and
   float animation — so this is a plain positioning box, not a second frame. */
#mockup .offer-visual { min-width: 0; }

#mockup .offer-visual .mockup-frame {
  /* The hero's copy of this frame floats on a 6s loop. Here it sits inside a
     bordered panel, where a box drifting 12px against a fixed edge just looks
     like a reflow bug. */
  animation: none;
}

#mockup .offer-visual img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  #mockup .offer-panel {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2.25rem 1.5rem;
  }
  /* Stacked, the visual is decoration rather than evidence: it must not push
     the CTA half a screen further down.
     `margin: 0 auto` alone is wrong here — an auto margin on a grid item
     overrides `justify-items: stretch`, so the box stops filling its column and
     shrinks to the frame's max-content width. With the mockup image still
     loading that collapsed the whole visual to ~100px. Declare the width and
     centre with justify-self instead. */
  #mockup .offer-visual { width: 100%; max-width: 420px; justify-self: center; }
}

@media (max-width: 480px) {
  #mockup .offer-panel { padding: 1.85rem 1.25rem; }
}

/* ---- The lead price ----
   One number where three cards used to compete. Everything else about the
   offer is detail; this is the answer, so it gets the weight the featured
   .plan-card carried and none of the competition. */
.plan-lead {
  position: relative;
  max-width: 640px;
  /* .pricing-badge is absolutely positioned at top:-14px, so the block needs
     clearance above it or the pill overlaps the section header. */
  margin: 1.25rem auto 0;
  padding: 2.85rem 2.5rem 2.5rem;
  text-align: center;
  border-radius: var(--radius-card);
  border: 1px solid var(--border-accent);
  background: var(--gradient-subtle), var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 18px 50px rgba(124, 58, 237, 0.18);
}

/* On a narrow block the badge label wraps into a two-line lozenge;
   shrink-to-fit only has half the block to work with, because the badge is
   anchored at left:50%. */
.plan-lead .pricing-badge { white-space: nowrap; }

/* Demoted from the 1.25rem/800 card heading it was: with one price on screen
   the plan's name is a label, not a headline. */
.plan-lead .plan-name {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin-bottom: 0.85rem;
}

/* .plan-price is display:flex and left-aligns by default; this block centres. */
.plan-lead .plan-price {
  justify-content: center;
  gap: 0.25rem;
  margin-bottom: 0;
}

.plan-lead .plan-amount { font-size: clamp(3.5rem, 12vw, 4.75rem); }
.plan-lead .plan-period { font-size: 1.05rem; font-weight: 700; }

.plan-lead > p {
  margin: 1.15rem auto 0;
  max-width: 52ch;
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* The nothing-up-front line is the claim the disclosure below qualifies, so it is the
   second-loudest thing in the block and sits in the same breath as the price. */
.plan-lead > p.plan-lead-sub strong:first-child {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.plan-lead strong { color: var(--text-primary); font-weight: 700; }

.plan-lead .btn { margin-top: 1.6rem; }
@media (max-width: 480px) {
  .plan-lead { padding: 2.35rem 1.25rem 2rem; }
  /* One thumb-width button, not a pill floating in the middle. .btn's 2rem
     side padding leaves 168px of label inside a 320px screen and wraps
     "Get my free mockup →" onto two lines; 1.25rem leaves 192px and it fits. */
  .plan-lead .btn {
    display: flex;
    width: 100%;
    justify-content: center;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* ---- Payment options table ----
   Deliberately the same object as .compare-table rather than a second table
   style: one visual language for "here are the columns, compare them". The
   declarations are restated instead of being added to that grouped selector
   because everything above this marker is shared with the Polish site and is
   append-only.

   No wrapper element: the markup puts <table class="pay-table"> straight into
   .container, so the table has to be its own scroll container. See the media
   query below for how. */
.pay-table {
  width: 100%;
  margin: 2.25rem 0 0;
  border-collapse: collapse;
  /* Auto layout hands the row-label column whatever "Monthly, billed in
     advance" asks for — measured at 35% of the table, which left the three
     money columns unequal and made Buyout look like an afterthought. Fixed
     layout with declared widths keeps the three options identical, which is
     the entire point of the comparison. */
  table-layout: fixed;
  border-radius: 16px;
  border: 1px solid var(--border-glass);
  background: var(--bg-card);
  font-size: 0.92rem;
  /* Keeps money columns the same width down the table so the amounts line up
     on their commas instead of drifting. */
  font-variant-numeric: tabular-nums;
}

.pay-table thead th:first-child { width: 31%; }
.pay-table thead th:not(:first-child) { width: 23%; }

.pay-table th,
.pay-table td {
  padding: 0.85rem 1.1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-glass);
}

.pay-table thead th {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

.pay-table tbody th {
  font-weight: 600;
  color: var(--text-primary);
}

.pay-table td { color: var(--text-secondary); }

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

.pay-table strong { color: var(--text-primary); font-weight: 700; }

/* The featured option, highlighted end to end — the same treatment
   .compare-table gives our own column. */
.pay-table .col-featured {
  background: rgba(6, 182, 212, 0.08);
  color: var(--text-primary);
  border-left: 1px solid rgba(6, 182, 212, 0.25);
  border-right: 1px solid rgba(6, 182, 212, 0.25);
}

.pay-table thead .col-featured {
  color: var(--accent-cyan);
  border-top: 2px solid var(--accent-cyan);
  border-radius: 10px 10px 0 0;
}

/* ================================================
   NARROW VIEWPORTS — both option tables become cards
   ------------------------------------------------
   Neither of these tables may scroll sideways. A four-column table needs
   ~456px (.pay-table) and 680px (.compare-table) before the type gets
   unreadable, so on a phone the columns past the first sit outside the scroll
   viewport: measured at 390px, .pay-table put the third plan entirely
   off-screen, and .compare-wrap showed nothing but "Do it yourself". A visitor
   who does not think to swipe therefore never saw one of the plan prices or
   our own column in the comparison — while the copy underneath discussed all
   of them. That is a
   disclosure failure, not a layout preference: every price on the page has to
   be visible where the claim it qualifies is.

   So below 760px neither table lays out as a table. Each becomes three cards,
   one per option, each card carrying that option's own label and all four of
   its values — which is what the deleted .plan-card columns used to do, and
   the shape a phone reader actually needs: one option at a time, complete.
   The markup is untouched: still one <table>, still <th scope>, so the desktop
   layout above the breakpoint is byte-identical to what it was.

   Both tables are the same 3-options × 4-facts shape, so the whole treatment is
   written once against :is(.pay-table, .compare-table); only the line layout
   inside a card differs (money vs. sentences) — see step 5. */
@media (max-width: 760px) {

  /* --- 1. Stop laying out as a table --------------------------------- */
  :is(.pay-table, .compare-table) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    /* .compare-table carries min-width: 680px, which is what forced the
       wrapper to scroll in the first place. */
    min-width: 0;
    /* The frame moves onto the individual cards (step 3); a border round the
       whole grid would draw a box round all three of them. */
    border: 0;
    border-radius: 0;
    background: none;
  }

  /* .compare-table's scroll container has nothing left to scroll, and its
     border/background are now drawn per card. (.pay-table has no wrapper — it
     sits straight in .container — which is why it had to be its own scroller
     before.) */
  .compare-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
  }

  /* Rows and row groups generate no boxes, so every cell becomes a grid item
     of the table itself. This is the step that makes regrouping possible at
     all: while the cells are inside <tr> boxes they can only ever be grouped
     the way the source groups them, by row. */
  :is(.pay-table, .compare-table) :is(thead, tbody, tr) { display: contents; }

  /* The empty corner cell and the row-label column go: each card is one
     option, so the row label belongs on each line inside it (step 4) rather
     than in a column of its own. */
  :is(.pay-table, .compare-table) thead th:first-child,
  :is(.pay-table, .compare-table) tbody th { display: none; }

  /* --- 2. Regroup the cells by column -------------------------------- */
  /* Source order is row-major and the cards are column-major, so every cell is
     placed by hand: fifteen lines, three cards of five rows each — the option
     name, then its four facts in table order.

     Written out as literal line numbers rather than computed from the cell's
     position. calc() in a grid line number is the kind of thing that is
     specified everywhere and quietly unimplemented somewhere, and the failure
     mode here is not cosmetic: dropping to auto-placement would leave the
     three option names stacked at the top and twelve unattributed amounts
     underneath them, which is a worse disclosure than the one this replaced.
     A literal integer has nowhere to fail. */
  :is(.pay-table, .compare-table) thead th:nth-child(2) { grid-row: 1; }
  :is(.pay-table, .compare-table) tbody tr:nth-child(1) td:nth-child(2) { grid-row: 2; }
  :is(.pay-table, .compare-table) tbody tr:nth-child(2) td:nth-child(2) { grid-row: 3; }
  :is(.pay-table, .compare-table) tbody tr:nth-child(3) td:nth-child(2) { grid-row: 4; }
  :is(.pay-table, .compare-table) tbody tr:nth-child(4) td:nth-child(2) { grid-row: 5; }

  :is(.pay-table, .compare-table) thead th:nth-child(3) { grid-row: 6; }
  :is(.pay-table, .compare-table) tbody tr:nth-child(1) td:nth-child(3) { grid-row: 7; }
  :is(.pay-table, .compare-table) tbody tr:nth-child(2) td:nth-child(3) { grid-row: 8; }
  :is(.pay-table, .compare-table) tbody tr:nth-child(3) td:nth-child(3) { grid-row: 9; }
  :is(.pay-table, .compare-table) tbody tr:nth-child(4) td:nth-child(3) { grid-row: 10; }

  :is(.pay-table, .compare-table) thead th:nth-child(4) { grid-row: 11; }
  :is(.pay-table, .compare-table) tbody tr:nth-child(1) td:nth-child(4) { grid-row: 12; }
  :is(.pay-table, .compare-table) tbody tr:nth-child(2) td:nth-child(4) { grid-row: 13; }
  :is(.pay-table, .compare-table) tbody tr:nth-child(3) td:nth-child(4) { grid-row: 14; }
  :is(.pay-table, .compare-table) tbody tr:nth-child(4) td:nth-child(4) { grid-row: 15; }

  /* --- 3. Card frame, drawn by the cells themselves ------------------- */
  /* No wrapper exists per card, so the header draws the top and sides, each
     value line draws its sides, and the last one closes the bottom. Borders no
     longer collapse (there is no table box), hence top borders are suppressed
     everywhere except on the header — otherwise every rule would be 2px. */
  :is(.pay-table, .compare-table) :is(th, td) { --card-line: var(--border-glass); }
  :is(.pay-table, .compare-table) :is(.col-featured, .col-us) {
    --card-line: rgba(6, 182, 212, 0.4);
  }

  :is(.pay-table, .compare-table) thead th {
    margin-top: 1.35rem;
    padding: 0.8rem 1.05rem;
    border: 1px solid var(--card-line);
    border-radius: 14px 14px 0 0;
    background: var(--bg-card);
    font-size: 0.82rem;
    /* It is a card title now, not a column label in the corner of a grid. */
    color: var(--text-primary);
    white-space: normal;
  }

  /* Percentage widths were sized for four table columns; as grid items they
     would shrink each card to 23% of the container. Mirrors the specificity of
     the .pay-table thead th:not(:first-child) rule above. */
  :is(.pay-table, .compare-table) thead th:not(:first-child) { width: auto; }

  /* The first card needs no separation — the table's own top margin does it. */
  :is(.pay-table, .compare-table) thead th:nth-child(2) { margin-top: 0; }

  /* The highlighted option keeps its full-height cyan treatment; on a phone it
     reads as one emphasised card rather than one emphasised column. */
  :is(.pay-table, .compare-table) thead :is(.col-featured, .col-us) {
    border: 1px solid var(--card-line);
    border-top: 2px solid var(--accent-cyan);
    border-radius: 14px 14px 0 0;
    background: rgba(6, 182, 212, 0.08);
    color: var(--accent-cyan);
  }

  :is(.pay-table, .compare-table) tbody td {
    padding: 0.62rem 1.05rem;
    border: 1px solid var(--card-line);
    border-top: 0;
    background: var(--bg-card);
    color: var(--text-primary);
  }

  :is(.pay-table, .compare-table) tbody tr:last-child td {
    border-bottom: 1px solid var(--card-line);
    border-radius: 0 0 14px 14px;
  }

  /* --- 4. Each line names the fact it states -------------------------- */
  /* The <th scope="row"> that used to name each fact is one element and cannot
     be shown once per card, so the labels are generated. They are keyed on row
     position only — deliberately not on the data-label attributes the markup
     carries, which hold the *column* header (the option name) and would repeat
     each card's own title four times down its body. Nothing here depends on
     those attributes either way.
     Row order must match the markup; if a fact row is added or reordered in
     en/index.html these four strings move with it. */
  .pay-table tbody tr:nth-child(1) td::before { content: "Up front"; }
  .pay-table tbody tr:nth-child(2) td::before { content: "Monthly, billed in advance"; }
  .pay-table tbody tr:nth-child(3) td::before { content: "12-month total"; }
  .pay-table tbody tr:nth-child(4) td::before { content: "You save"; }

  .compare-table tbody tr:nth-child(1) td::before { content: "Typical cost"; }
  .compare-table tbody tr:nth-child(2) td::before { content: "Time to launch"; }
  .compare-table tbody tr:nth-child(3) td::before { content: "Who owns it long term"; }
  .compare-table tbody tr:nth-child(4) td::before { content: "Content edits"; }

  :is(.pay-table, .compare-table) tbody td::before {
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.45;
  }

  /* --- 5. Line layout, per table -------------------------------------- */
  /* .pay-table states amounts: label left, amount right, one line each, so the
     three cards read as a price list and the amounts share a right edge.
     A cell is its own grid — `auto 1fr` with the value right-aligned is what
     keeps that edge straight regardless of how long the label is. */
  .pay-table tbody td {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1rem;
    align-items: baseline;
    text-align: right;
  }
  .pay-table tbody td::before { text-align: left; }

  /* .compare-table states sentences ("However long you can spare"), which at
     320px would wrap to three ragged right-aligned lines beside their label.
     Label above, value below. */
  .compare-table tbody td {
    display: block;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }
  .compare-table tbody td::before {
    display: block;
    margin-bottom: 0.1rem;
  }
}

/* ---- Price disclosure ----
   The FTC qualifier that has to sit next to the claim it qualifies. It is a
   disclosure, so it is styled as body copy and as nothing else: no opacity, no
   0.75rem type, no muted grey, no italic. #cbd5e1 measures 12.9:1 on
   --bg-secondary, where #pricing renders it — far past the 4.5:1 floor, and
   deliberately *lighter* than --text-secondary so that the terms read as
   something the page wants you to see rather than something it is trying to
   slip past you.

   The .plan-lead-scoped selectors are here so the line keeps this treatment if
   it is ever moved inside the price block: `.plan-lead > p` is (0,1,1) and
   would otherwise recolour it to --text-secondary. */
.price-disclosure,
.plan-lead > p.price-disclosure {
  display: block;
  margin: 1.6rem auto 0;
  max-width: 78ch;
  font-size: 0.95rem;
  line-height: 1.75;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  color: #cbd5e1;
  opacity: 1;
}

.price-disclosure strong { color: var(--text-primary); font-weight: 700; }

.price-disclosure a {
  color: var(--accent-cyan);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

@media (max-width: 620px) {
  /* Centred, five lines of terms become five ragged lines. Left-aligned they
     stay a paragraph. */
  .price-disclosure { text-align: left; }
}

/* ---- Included-list column balance ----
   .plan-includes ul is a two-track grid, so both cells in a row share the
   taller one's height. "Content edits included — send changes any time, we
   ship them weekly" wraps to two lines, which opened a visible hole under the
   item beside it. Multi-column flows the items independently, so ten items of
   mixed length pack into two even columns with no holes. break-inside stops an
   item being split across the column boundary mid-sentence. */
#pricing .plan-includes ul {
  display: block;
  columns: 2;
  column-gap: 2.5rem;
}

#pricing .plan-includes li {
  break-inside: avoid;
  /* `display: flex` on a flex item inside a multicol container is fine, but the
     first item needs its top margin suppressed or column 2 starts lower than
     column 1. */
  margin-bottom: 0.95rem;
}

#pricing .plan-includes li:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  /* Matches the existing single-track breakpoint: below 900px the two tracks
     are too narrow and every second item wraps. */
  #pricing .plan-includes ul { columns: 1; }
  #pricing .plan-includes li { margin-bottom: 0.8rem; }
}

/* ---- Ownership ----
   .plan-after used to be the last block inside #pricing and carries a 2.75rem
   top margin to separate it from .plan-includes above it. It is its own
   <section> now, so that margin stacks on top of `section { padding: 6rem 0 }`
   and pushes the band 44px below the centre of its own section. */


/* .section-label's 1.2rem bottom margin is sized for a .section-header stack;
   inside the band it sits directly above the headline. */

/* ---- Section headings: no single-word last lines ----
   Same treatment .hero-title already carries, for the same reason. Every
   section heading here is a short clause plus a longer one split by a <br>,
   and greedy wrapping strands the tail of the second clause: at 390px
   #pricing broke as "One website, / three ways to pay for / it" and
   #comparison orphaned "website,", each leaving one word alone on a line of
   40px gradient type. Balancing distributes words evenly across the lines of
   each segment instead of filling greedily, which removes the orphan without
   anyone having to hand-place a break per viewport.

   Progressive enhancement — browsers without text-wrap: balance keep the
   greedy wrap they have today. Applies to both sites; the Polish page uses the
   same .section-header stack and the same two-clause headings, and gains the
   same fix. */
.section-header h2 { text-wrap: balance; }

/* balance alone does nothing to these headings, which is the whole problem:
   Chromium declines to balance any block that contains a forced break, and
   every heading that orphans is exactly the kind that has one —
   "clause,<br><span class=gradient-text>second clause</span>". Measured at
   390px with balance applied and the <br> in place, #pricing still rendered
   "One website, / three ways to pay for / it".

   So give each clause its own block instead of one block split by a break:
   drop the <br> and promote the span. Same two lines on screen, but now each
   clause is a balanceable block in its own right, and each balances. Verified
   at 320-500px: #pricing loses the stranded "it", #comparison the stranded
   "you"/"website,".

   Guarded by :has(br) because the same .gradient-text span is also used inline
   mid-sentence ("Simple process, <span>fast results</span>", and four more on
   the Polish page) where promoting it to a block would break the line where
   the design does not want one. Both sites only ever put the span second when
   there is a <br>, so the guard is exact. Browsers without :has() keep the
   forced break and today's greedy wrap — the heading is still correct, just
   less evenly set. */
.section-header h2:has(br) br { display: none; }
.section-header h2:has(br) .gradient-text { display: block; }

/* Splitting the heading into two blocks stops the clause-level orphan, but each
   block then wraps on its own and can strand its own last word — at 320px that
   left "needs" and "anything" alone under #services and #mockup. Balancing has
   to be asked for on each block, not just the h2, because the h2 is no longer
   the box doing the wrapping. */
.section-header h2,
.section-header h2:has(br) .gradient-text { text-wrap: balance; }

/* ---- Anchor offset for the fixed navbar ----
   .navbar is position: fixed, but scroll-padding-top was auto and nothing set
   scroll-margin-top, so every in-page jump (#pricing, #contact, the whole
   mobile menu) parked the target section's top edge underneath the bar. It
   only looked survivable because `section { padding: 6rem 0 }` kept the
   heading itself 6px clear — a margin that drops to 4rem on a phone, and that
   any section with less padding would not have at all.

   Set on the scroll container rather than per section, so it also covers
   scrollIntoView and the browser's own on-load fragment scroll, and so a new
   section cannot be added without it.

   One value, sized to the tallest the bar ever gets rather than to each
   breakpoint: measured across both sites it runs 58px (US phone, where
   .nav-cta's button is display: none), 77px (Polish phone, image wordmark) and
   84px from 769px up. 6.5rem clears all three with 20-46px of air. The looser
   end of that range costs nothing — the extra space reads as the section's own
   top padding — whereas anything tuned to the shortest bar puts a heading
   under the tallest one, which is the bug being fixed. */
html { scroll-padding-top: 6.5rem; }

/* ================================================
   PRICING — three plan cards
   Restored after a spell as one featured card plus a
   compact table. The table was shorter but it had to
   scroll sideways on a phone, which pushed two of the
   three prices off-screen. Three cards cost height and
   buy back the thing that matters: every price legible
   at 320px with no swiping.
   ================================================ */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
  /* scale(1.03) on the featured card grows it 1.5% past each of its own edges
     — 5.5px on a ~368px card. The featured card is the first one in the grid,
     so that bled over the container's 1.5rem padding and left its left edge
     5.5px outside every other block on the page. Inset the grid by the same
     amount rather than dropping the scale, which is what marks the card as
     featured. Reset at <=1100px, where the scale is switched off anyway. */
  padding: 0 6px;
}

/* position:relative is load-bearing. .pricing-badge is absolutely positioned;
   without a positioned card it anchors to the nearest positioned ancestor and
   escapes to the top of the section. */
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.5rem 1.75rem;
  border-radius: var(--radius-card);
  transition: all 0.3s ease;

  /* Was a reserve matching the .plan-saving pill, from when that pill was the
     first element in the two non-featured cards. The pill now shares a line with
     the plan name, so there is nothing left to match — keeping the reserve put
     the featured card's name 49px below its siblings'. .pricing-badge is
     absolute at top:-14px and intrudes only ~11px, which the card's normal top
     padding already clears. */
  --plan-pill-block: 0rem;
}

.plan-card.featured {
  background: var(--gradient-subtle);
  border: 1px solid var(--border-accent);
  padding-top: calc(2.5rem + var(--plan-pill-block));
  transform: scale(1.03) translateY(var(--plan-reveal-y, 0px));
  box-shadow: 0 18px 50px rgba(124, 58, 237, 0.18);
}

/* The scroll-reveal rise, folded into the featured card's own transform.
   `.reveal { transform: translateY(30px) }` is (0,1,0) and loses to
   `.plan-card.featured` (0,2,0), so this card used to fade in without the rise
   its siblings get. Routing the offset through a custom property fixes that
   without touching the specificity of any transform declaration: the <=1100px
   override and the :hover lift keep winning exactly as before. */
.plan-card.featured.reveal { --plan-reveal-y: 30px; }
.plan-card.featured.reveal.visible { --plan-reveal-y: 0px; }

/* Must live here, not in the global prefers-reduced-motion block near .reveal:
   that block is earlier in the file and `.plan-card.featured.reveal` above is
   the same (0,3,0) specificity, so it would win and pin the card 30px low. */
@media (prefers-reduced-motion: reduce) {
  .plan-card.featured.reveal { --plan-reveal-y: 0px; }
}

.plan-card.featured:hover {
  transform: scale(1.03) translateY(-4px);
  box-shadow: 0 26px 70px rgba(124, 58, 237, 0.28);
}

/* On a narrow card the badge label wraps and the badge grows into a
   two-line lozenge. Shrink-to-fit only has half the card to work with, because
   the badge is anchored at left:50%. */
.plan-card .pricing-badge { white-space: nowrap; }

.plan-name {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
}

.plan-card.featured .plan-name { color: var(--accent-cyan); }

.plan-tagline {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

.plan-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  line-height: 1;
  margin-bottom: 1rem;
}

.plan-amount {
  font-size: clamp(2.4rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.plan-period {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* What happens after year one, directly under the price. On its own the big
   number reads as "$129 a month, forever" — the first objection the pricing
   has to answer — and the drop to the server fee is the answer. The negative
   top margin pulls it up against the price it qualifies. Not .plan-after:
   that name already belongs to the ownership block styled further up. */
.plan-then {
  margin: -0.35rem 0 1rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.plan-then strong { color: var(--accent-cyan); font-weight: 700; }

/* Sits on the two non-featured cards, where the featured card carries the
   badge. align-self keeps it pill-shaped instead of stretching to the full
   width of the flex column. */
.plan-saving {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--accent-cyan);
  background: rgba(6, 182, 212, 0.1);
  border: 1px solid rgba(6, 182, 212, 0.28);
  padding: 0.38rem 0.75rem;
  border-radius: 999px;
  flex-shrink: 0;
}

/* <dl> of three label/value rows. Each row is a <div> so the pair can be laid
   out on one line — dt and dd alone cannot share a flex row reliably. */
/* Custom's column of a comparison table said "Quoted" six times — a table
   answering every question with "later" reads as an empty plan next to two
   full of figures. The card uses the same vertical space to answer the
   question this plan actually raises, which is not how you pay but whether
   the thing you need can be built. Scoped under .plan-card: the stylesheet is
   shared with the Polish site. */
.plan-card .plan-scope {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  border-top: 1px solid var(--border-glass);
}

.plan-card .plan-scope li {
  display: flex;
  gap: 0.7rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--border-glass);
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-primary);
}

.plan-card .plan-scope .check {
  color: var(--accent-cyan);
  font-weight: 700;
  flex-shrink: 0;
}

.plan-card .plan-scope-note {
  margin: 0 0 1.75rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.plan-facts {
  margin: 0 0 1.75rem;
  border-top: 1px solid var(--border-glass);
}

.plan-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border-glass);
}

.plan-facts dt {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.plan-facts dd {
  flex: 0 0 auto;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  text-align: right;
}

/* Pins every card's CTA to the same baseline whatever the copy above does. */
.plan-card > .btn { margin-top: auto; }

/* Caveat under the grid: the 12-month totals are not a commitment. */

@media (max-width: 1100px) {
  .plan-grid { gap: 1rem; padding: 0; }
  .plan-card { padding: 2.25rem 1.4rem; }
  /* No scale here, but keep the reveal offset so the card still rises with its
     siblings — a bare `transform: none` would out-specify .reveal and pin it. */
  .plan-card.featured {
    padding-top: calc(2.25rem + var(--plan-pill-block));
    transform: translateY(var(--plan-reveal-y, 0px));
  }
  .plan-card.featured:hover { transform: translateY(-4px); }
}

@media (max-width: 900px) {
  .plan-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  .plan-card { padding: 2.25rem 1.75rem; }
  .plan-card.featured { padding-top: 2.25rem; }
  .plan-includes { margin-top: 2.25rem; padding: 2rem 1.5rem; }
  .plan-includes ul { grid-template-columns: 1fr; gap: 0.8rem; }
}

@media (max-width: 420px) {
  .plan-card { padding: 2rem 1.25rem; }
  .plan-card.featured { padding-top: 2rem; }
  .plan-facts dt { font-size: 0.78rem; }
}


/* Absorbed from the deleted comparison section. */

@media (max-width: 1100px) {
  .plan-grid + .price-disclosure { margin-top: 2.25rem; }
}




/* Plan name and its saving pill share one line, name left, pill right. The pill
   used to sit on its own row above the name, which pushed the whole card down
   and left an odd gap on Monthly, where there is no pill at all. */
.plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.plan-head .plan-name { margin-bottom: 0; }