/*
 * Scan ERP homepage visual pilot
 * A dense factory operations interface built around real product evidence.
 * Scoped to body.home-premium so the other landing, country, and blog pages
 * keep their existing local style systems until they are migrated deliberately.
 */

body.home-premium {
  --hp-ink: #11172f;
  --hp-ink-2: #1e2045;
  --hp-paper: #f4f1e9;
  --hp-panel: #fbfaf6;
  --hp-line: #cfd6d2;
  --hp-muted: #53605d;
  --hp-green: #047857;
  --hp-green-dark: #065f46;
  --hp-green-bright: #1fb884;
  --hp-shadow: 10px 10px 0 rgba(17, 23, 47, 0.12);
  background: var(--hp-paper);
  color: var(--hp-ink);
  font-variant-numeric: tabular-nums;
}

body.home-premium .container {
  width: 100%;
  max-width: 1200px;
  padding-inline: 24px;
}

body.home-premium main {
  background: var(--hp-panel);
}

/* Navigation */
body.home-premium .nav {
  background: rgba(17, 23, 47, 0.98);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: none;
  box-shadow: none;
}

body.home-premium .nav.scrolled {
  box-shadow: 0 8px 24px rgba(3, 8, 24, 0.18);
}

body.home-premium .nav-inner {
  height: 64px;
}

body.home-premium .nav-brand {
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

body.home-premium .nav-logo {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
}

body.home-premium .nav-links {
  gap: 22px;
}

body.home-premium .nav-links a {
  min-width: 44px;
  color: #d8dedf;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

body.home-premium .nav-links a:hover {
  color: #fff;
}

body.home-premium .nav-links .btn-primary {
  min-height: 44px;
  padding: 8px 16px;
  color: #fff;
  background: var(--hp-green);
  border: 1px solid #39c996;
  border-radius: 8px;
  box-shadow: 0 4px 0 #020617;
}

body.home-premium .nav-toggle span {
  background: #fff;
  border-radius: 0;
}

/* Buttons keep the deliberately mechanical hard shadow. */
body.home-premium .btn,
body.home-premium .btn-pill {
  border-radius: 8px;
  transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

body.home-premium .btn-primary,
body.home-premium .btn-pill {
  background: var(--hp-green);
  border: 1px solid #39c996;
  box-shadow: 0 6px 0 var(--hp-ink);
  color: #fff !important;
}

body.home-premium .btn-primary:hover,
body.home-premium .btn-pill:hover {
  background: var(--hp-green-dark);
  border-color: #6ee7b7;
  box-shadow: 0 4px 0 var(--hp-ink);
  transform: translateY(2px);
}

body.home-premium .btn-pill-outline {
  color: #fff !important;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow: 0 6px 0 #020617;
}

body.home-premium .btn-pill-outline:hover {
  color: var(--hp-ink) !important;
  background: #fff;
  border-color: #fff;
}

/* Hero: a factory control console, rather than a generic SaaS splash. */
body.home-premium .hero {
  min-height: 720px;
  padding: 128px 0 72px;
  color: #fff;
  background-color: var(--hp-ink);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 36px 36px;
  border-bottom: 6px solid var(--hp-green-bright);
}

body.home-premium .hero-bg-dots,
body.home-premium .hero-orb,
body.home-premium .hero::before,
body.home-premium .hero::after {
  display: none !important;
}

body.home-premium .hero .container {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 42px;
  align-items: center;
}

body.home-premium .hero-content {
  max-width: 550px;
}

body.home-premium .hero-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin: 0 0 22px;
  padding: 5px 10px;
  color: #d1fae5;
  background: rgba(31, 184, 132, 0.12);
  border: 1px solid rgba(110, 231, 183, 0.55);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.home-premium .hero-badge .counter-up {
  color: #d1fae5 !important;
}

body.home-premium .live-dot {
  width: 7px;
  height: 7px;
  background: #6ee7b7;
  border-radius: 0;
}

body.home-premium .hero .eyebrow {
  display: block;
  margin-bottom: 14px;
  color: #6ee7b7;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

body.home-premium .hero h1 {
  max-width: 560px;
  margin-bottom: 16px;
  color: #fff;
  font-size: clamp(2.5rem, 3.55vw, 2.75rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

body.home-premium .hero-tagline {
  max-width: 540px;
  margin-bottom: 20px;
  color: #f4f7f6;
  font-size: clamp(1.08rem, 1.55vw, 1.3rem);
  line-height: 1.45;
}

body.home-premium .hero .accent-bar-row {
  display: block;
  margin: 0 0 26px;
  padding-left: 16px;
  border-left: 3px solid var(--hp-green-bright);
}

body.home-premium .hero .accent-bar-row::before {
  display: none;
}

body.home-premium .hero-sub {
  max-width: 54ch;
  margin: 0;
  color: #bec9ca;
  font-size: 16px;
  line-height: 1.65;
}

body.home-premium .hero-actions {
  gap: 12px;
  margin: 0;
}

body.home-premium .hero-actions .btn-pill {
  min-height: 50px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 700;
}

body.home-premium .hero-cta-sub {
  max-width: 65ch;
  margin-top: 20px;
  color: #9fadae;
  font-size: 13px;
  line-height: 1.6;
}

body.home-premium .hero-cta-sub a {
  color: #d1fae5;
  text-decoration-color: rgba(209, 250, 229, 0.5);
}

body.home-premium .hero-image {
  position: relative;
  padding: 35px 9px 9px;
  background: #e6e9e7;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 9px;
  box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.28);
}

body.home-premium .hero-image::before {
  content: "LIVE PRODUCTION CONSOLE  /  SCAN ERP";
  position: absolute;
  top: 0;
  left: 14px;
  display: flex;
  align-items: center;
  height: 35px;
  color: #4b5655;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

body.home-premium .hero-image::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 7px;
  height: 7px;
  background: var(--hp-green-bright);
  box-shadow: -13px 0 0 #f59e0b, -26px 0 0 #ef4444;
}

body.home-premium .hero-image img {
  width: 100%;
  border: 1px solid #aeb8b5 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

/* Section rhythm is compact overall, with tighter bands for short sections. */
body.home-premium .section {
  position: relative;
  padding: 56px 0;
  border-bottom: 1px solid var(--hp-line);
}

/* compact — short sections (<700px). Less padding so they don't read empty. */
body.home-premium #problem,
body.home-premium #solution,
body.home-premium #why,
body.home-premium #testimonials,
body.home-premium #contact {
  padding-block: 40px;
}

/* #founder is the shortest section on the page (352px). Even the compact tier
   leaves it at 22.7% padding, well outside the band, so it takes a tighter
   value of its own rather than distorting the tier for everything else. */
body.home-premium #founder {
  padding-block: 28px;
}

/* Evidence sections use the standard outer rhythm; their internal layouts
   provide the visual separation without adding more page length. */
body.home-premium #see-it,
body.home-premium #pricing {
  padding-block: 56px;
}

body.home-premium .section > .container {
  max-width: 1200px;
}

body.home-premium .section-gray,
body.home-premium .section-cream {
  background: var(--hp-paper);
}

body.home-premium .section-header {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
  align-items: end;
  max-width: none;
  margin: 0 0 28px;
  text-align: left;
}

body.home-premium .section-header::before {
  grid-column: 1 / -1;
  margin-bottom: 14px;
  padding-top: 9px;
  color: var(--hp-green);
  border-top: 2px solid var(--hp-ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.home-premium #see-it .section-header::before { content: "01  /  FLOOR DEMONSTRATION"; }
body.home-premium #problem .section-header::before { content: "02  /  LOSS POINTS"; }
body.home-premium #solution .section-header::before { content: "03  /  BUNDLE FLOW"; }
body.home-premium #features .section-header::before { content: "04  /  OPERATING MODULES"; }
body.home-premium #why .section-header::before { content: "05  /  FACTORY-BUILT DIFFERENCE"; }
body.home-premium #testimonials .section-header::before { content: "06  /  FIELD REPORTS"; }
body.home-premium #pricing .section-header::before { content: "07  /  COMMERCIALS"; }
body.home-premium #roiCalc .section-header::before { content: "08  /  RETURN MODEL"; }
body.home-premium #faq .section-header::before { content: "09  /  DUE DILIGENCE"; }
body.home-premium #contact .section-header::before { content: "10  /  FACTORY REVIEW"; }

body.home-premium .section-header h2 {
  margin: 0;
  color: var(--hp-ink);
  font-size: clamp(1.85rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

body.home-premium .section-header p {
  max-width: 62ch;
  margin: 0;
  color: var(--hp-muted);
  font-size: 16px;
  line-height: 1.65;
}

body.home-premium .section-header > .eyebrow {
  grid-column: 1 / -1;
  margin: 0 0 10px;
  color: var(--hp-green);
}

body.home-premium #pricing .section-header::before,
body.home-premium #roiCalc .section-header::before {
  margin-bottom: 8px;
}

/* Real product demonstration */
body.home-premium #see-it {
  background: #fbfaf6;
}

body.home-premium #see-it > .container {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(420px, 0.84fr);
  gap: 24px;
  align-items: stretch;
}

body.home-premium #see-it .section-header {
  grid-column: 1 / -1;
}

body.home-premium .video-wrapper-yt {
  align-self: stretch;
  max-width: none;
  margin-left: 0;
  border: 1px solid var(--hp-ink);
  border-radius: 8px;
  box-shadow: var(--hp-shadow);
}

body.home-premium .video-play-btn {
  opacity: 1;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.28));
}

body.home-premium .qrgen-wrapper {
  grid-template-columns: 1fr;
  gap: 14px;
  align-content: start;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--hp-line);
  border-left: 6px solid var(--hp-green);
  border-radius: 0;
  box-shadow: none;
}

body.home-premium .qrgen-title,
body.home-premium .qrgen-label-header {
  letter-spacing: 0.1em;
}

body.home-premium .qrgen-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

body.home-premium .qrgen-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  min-width: 0;
  padding: 7px 9px;
}

body.home-premium .qrgen-key {
  width: auto;
}

body.home-premium .qrgen-arrow {
  display: none;
}

body.home-premium .qrgen-right {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

body.home-premium .qrgen-label-card {
  width: 172px;
  padding: 10px;
}

body.home-premium .qrgen-canvas {
  width: 145px;
  height: 145px;
}

body.home-premium .qrgen-try {
  max-width: none;
  text-align: left;
}

body.home-premium .qrgen-arrow-label {
  color: var(--hp-muted);
}

body.home-premium .qrgen-try-sub {
  font-size: 13px;
}

body.home-premium .qrgen-field,
body.home-premium .qrgen-label-card {
  border-radius: 4px;
}

/* Problem rows */
body.home-premium #problem .grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid var(--hp-line);
}

body.home-premium .problem-card {
  min-width: 0;
  padding: 24px;
  text-align: left;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--hp-line);
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

body.home-premium .problem-card:last-child {
  border-right: 0;
}

body.home-premium .problem-card:hover {
  background: #fff;
  box-shadow: none;
  transform: none;
}

body.home-premium .problem-icon {
  width: 38px;
  height: 38px;
  margin: 0 0 18px;
  color: var(--hp-green);
  background: transparent;
  border: 1px solid var(--hp-green);
  border-radius: 4px;
}

body.home-premium .problem-card h3 {
  margin-bottom: 10px;
  color: var(--hp-ink);
  font-size: 16px;
  line-height: 1.35;
}

body.home-premium .problem-card p {
  color: var(--hp-muted);
  font-size: 14px;
  line-height: 1.65;
}

/* Four step factory flow */
body.home-premium .flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 38px;
  border-top: 1px solid var(--hp-ink);
  border-bottom: 1px solid var(--hp-ink);
}

body.home-premium .flow-step,
body.home-premium .flow-step-anim {
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 12px;
  align-content: start;
  width: auto;
  min-width: 0;
  padding: 20px 16px;
  text-align: left;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--hp-line);
  border-radius: 0;
  opacity: 1 !important;
  transform: none !important;
}

body.home-premium .flow-step:last-of-type {
  border-right: 0;
}

body.home-premium .flow-num {
  grid-row: 1 / 3;
  width: 32px;
  height: 32px;
  margin: 0;
  background: var(--hp-ink);
  border-radius: 4px;
  box-shadow: none !important;
  font-size: 13px;
}

body.home-premium .flow-label {
  margin: 0 0 4px;
  color: var(--hp-ink);
  font-size: 15px;
}

body.home-premium .flow-desc {
  color: var(--hp-muted);
  font-size: 13px;
  line-height: 1.5;
}

body.home-premium .flow-arrow {
  display: none;
}

body.home-premium #solution > .container {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 0 22px;
  align-items: start;
}

body.home-premium #solution .section-header,
body.home-premium #solution .flow {
  grid-column: 1 / -1;
}

body.home-premium .screenshot-tabs {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: stretch;
  gap: 0;
  margin: 0;
  overflow: visible;
}

body.home-premium .tab {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 9px 15px;
  color: var(--hp-muted);
  background: transparent;
  border-color: var(--hp-line);
  justify-content: flex-start;
  border-bottom: 0;
  border-radius: 0;
  font-size: 13px;
  font-weight: 700;
}

body.home-premium .tab:last-child {
  border-bottom: 1px solid var(--hp-line);
}

body.home-premium .tab.active {
  color: #fff;
  background: var(--hp-ink);
  border-color: var(--hp-ink);
}

body.home-premium .screenshot-panel {
  text-align: left;
}

body.home-premium .screenshot-panel img {
  max-width: 100%;
  margin: 0;
  border: 1px solid var(--hp-ink);
  border-radius: 4px;
  box-shadow: var(--hp-shadow);
  /* Reserve the box BEFORE the lazy image arrives. Without this the
     panel renders 2px tall and jumps to ~406px on load, shifting every
     section below it by 404px (measured CLS 0.4494 @768). The width/
     height attributes cannot do this on their own because height:auto
     overrides them. */
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top center;
  background: #F1F5F9;
}

body.home-premium .screenshot-panel p {
  max-width: 70ch;
  margin: 18px 0 0;
  padding-left: 14px;
  color: var(--hp-muted);
  border-left: 3px solid var(--hp-green);
}

/* Feature register: asymmetric on desktop, compact on smaller screens. */
body.home-premium #features .grid-3 {
  /* 12-col grid; cards span 7/5 alternately for a deliberate asymmetry
     (see the nth-child rules below) — this is design, not drift. */
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

body.home-premium #features .feature-card {
  grid-column: span 6;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 16px;
  align-content: start;
  min-width: 0;
  padding: 24px;
  color: var(--hp-ink);
  background: #fff;
  border: 1px solid var(--hp-line);
  border-radius: 4px;
  box-shadow: none;
  transform: none;
}

body.home-premium #features .feature-card:nth-child(1),
body.home-premium #features .feature-card:nth-child(4),
body.home-premium #features .feature-card:nth-child(5) {
  grid-column: span 7;
}

body.home-premium #features .feature-card:nth-child(2),
body.home-premium #features .feature-card:nth-child(3),
body.home-premium #features .feature-card:nth-child(6) {
  grid-column: span 5;
}

/* At >=1200px six cards read better as an even 3x2 than as 7/5 pairs:
   the 7-span card was stretching to 667px, far past a comfortable
   measure, and left the section 990px tall with large empty gutters. */
@media (min-width: 1200px) {
  body.home-premium #features .feature-card,
  body.home-premium #features .feature-card:nth-child(n) {
    grid-column: span 4;
  }
}

body.home-premium #features .feature-card:hover {
  border-color: var(--hp-green);
  box-shadow: none;
  transform: none;
}

body.home-premium .feature-icon {
  grid-row: 1 / 3;
  width: 40px;
  height: 40px;
  margin: 0;
  color: var(--hp-green);
  background: transparent;
  border: 1px solid var(--hp-green);
  border-radius: 4px;
}

body.home-premium .feature-icon svg {
  width: 22px;
  height: 22px;
}

body.home-premium .feature-card h3 {
  grid-column: 2;
  margin: 0 0 10px;
  font-size: 1rem;
  line-height: 1.35;
}

body.home-premium .feature-card ul,
body.home-premium .feature-card > p,
body.home-premium .feature-card > .feature-more-cta {
  grid-column: 2;
}

body.home-premium .feature-card li {
  padding: 5px 0 5px 16px;
  color: var(--hp-muted);
  font-size: 14px;
  line-height: 1.55;
}

body.home-premium .feature-card li::before {
  top: 13px;
  width: 5px;
  height: 5px;
  border-radius: 0;
  opacity: 1;
}

body.home-premium #features .feature-more {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  text-align: left;
  border: 1px dashed var(--hp-green);
  background: #e8f1ec;
}

body.home-premium .feature-more-plus {
  grid-row: 1 / 4;
  margin: 0;
  color: var(--hp-green);
  font-size: 1.75rem;
}

body.home-premium .feature-more p {
  margin: 0 0 8px;
  color: var(--hp-muted);
}

/* Factory-built differentiators on a dark technical panel. */
body.home-premium #why {
  color: #fff;
  background: var(--hp-ink);
  border-bottom-color: rgba(255, 255, 255, 0.16);
}

body.home-premium #why .section-header::before {
  color: #6ee7b7;
  border-top-color: rgba(255, 255, 255, 0.65);
}

body.home-premium #why .section-header h2,
body.home-premium #why .section-header p {
  color: #fff;
}

body.home-premium #why .section-header p {
  color: #b9c4c5;
}

body.home-premium .differentiators {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0;
}

body.home-premium #why .grid-3 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  max-width: none;
}

body.home-premium .diff-card {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 16px;
  padding: 16px 20px;
  text-align: left;
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0;
  box-shadow: none;
}

body.home-premium .diff-card:nth-child(even) { border-right: 0; }
body.home-premium .diff-card:nth-last-child(-n + 2) { border-bottom: 0; }

body.home-premium .diff-card:hover {
  background: rgba(255, 255, 255, 0.035);
  box-shadow: none;
  transform: none;
}

body.home-premium .diff-icon {
  grid-row: 1 / 3;
  width: 38px;
  height: 38px;
  margin: 0;
  color: #6ee7b7;
  background: transparent;
  border-color: rgba(110, 231, 183, 0.55);
  border-radius: 4px;
}

body.home-premium .diff-card h3 {
  margin: 0 0 7px;
  color: #fff;
}

body.home-premium .diff-card p {
  color: #b9c4c5;
}

/* Testimonials read as field reports rather than generic review cards. */
body.home-premium .testimonial-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: none;
}

body.home-premium .testimonial-card {
  position: relative;
  gap: 18px;
  padding: 52px 28px 28px;
  background: #fff;
  border: 1px solid var(--hp-line);
  border-top: 4px solid var(--hp-green);
  border-radius: 0;
  box-shadow: none;
}

body.home-premium .testimonial-card::before {
  content: "FIELD REPORT 01";
  position: absolute;
  top: 17px;
  left: 28px;
  color: var(--hp-green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

body.home-premium .testimonial-card:nth-child(2)::before {
  content: "FIELD REPORT 02";
}

body.home-premium .testimonial-stars {
  color: var(--hp-green);
  font-size: 12px;
  letter-spacing: 0.16em;
}

body.home-premium .testimonial-text {
  color: #293638;
  font-size: 16px;
  font-style: normal;
  line-height: 1.72;
}

body.home-premium .testimonial-avatar {
  width: 38px;
  height: 38px;
  color: #fff;
  background: var(--hp-ink);
  border-radius: 4px;
}

body.home-premium .testimonial-meta {
  color: var(--hp-muted);
}

/* Compact proof strip */
body.home-premium .guarantee-strip {
  padding: 0;
  background: #0b1024;
  border: 0;
}

body.home-premium .guarantee-items {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

body.home-premium .guarantee-item {
  min-width: 0;
  min-height: 100px;
  padding: 16px 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

body.home-premium .guarantee-item:last-child {
  border-right: 0;
}

body.home-premium .guarantee-icon {
  color: #6ee7b7;
}

body.home-premium .guarantee-title {
  color: #fff;
  font-size: 14px;
}

body.home-premium .guarantee-sub {
  color: #aab7b9;
  font-size: 0.75rem;
  line-height: 1.5;
}

/* Commercials */
body.home-premium .pricing-card-v2 {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 24px 34px;
  max-width: 1100px;
  margin: 0;
  padding: 34px;
  background: #fff;
  border: 1px solid var(--hp-ink);
  border-radius: 8px;
  box-shadow: var(--hp-shadow);
}

body.home-premium .pricing-card-head {
  grid-column: 1;
}

body.home-premium .pricing-card-tier {
  color: var(--hp-green);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.15;
}

body.home-premium .pricing-card-lead {
  color: var(--hp-muted);
}

body.home-premium .pricing-card-deadline {
  background: #e8f1ec;
  border-color: #9ab9aa;
  border-radius: 4px;
}

body.home-premium .pricing-examples {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  padding: 22px;
  background: var(--hp-paper);
  border: 1px solid var(--hp-line);
  border-radius: 4px;
}

body.home-premium .pricing-example-grid {
  gap: 12px 18px;
}

body.home-premium .pricing-feature-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  margin: 0;
}

body.home-premium .pricing-feature-list li {
  border-bottom-color: var(--hp-line);
}

body.home-premium .pricing-card-cta {
  grid-column: 1 / -1;
  align-self: end;
  justify-self: start;
}

body.home-premium .compare-v2 {
  max-width: 1100px;
  margin: 54px 0 0;
  overflow-x: auto;
  /* The grid inside is intentionally wider than a phone and scrolls here.
     Contain it properly: without this the child's own overflow:hidden
     still inflated body.scrollWidth to 344 on a 320px screen (iPhone SE
     1st gen / small Androids), giving the whole page a horizontal scroll. */
  max-width: 100%;
  overscroll-behavior-x: contain;
}
@media (min-width: 1024px) {
  body.home-premium .compare-v2 { max-width: 1100px; }
}

body.home-premium .compare-v2-head {
  text-align: left;
  color: var(--hp-muted);
}

body.home-premium .compare-v2-grid {
  /* 620 -> 600 so the grid needs no more room than the mobile override
     below already lays out (212+141+123+123 = 599). */
  min-width: 600px;
  border-color: var(--hp-line);
  border-radius: 4px;
}

body.home-premium .cv2-head {
  background: #e6e9e7;
}

body.home-premium .cv2-us {
  color: var(--hp-green);
  background: #e8f1ec;
}

/* ROI calculator */
body.home-premium #roiCalc {
  background: #fbfaf6;
}

body.home-premium .roi-v2 {
  max-width: none;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 42px;
  padding: 34px;
  color: #fff;
  background: var(--hp-ink);
  border: 1px solid var(--hp-ink);
  border-radius: 8px;
  box-shadow: var(--hp-shadow);
}

body.home-premium .roi-v2-inputs {
  gap: 20px;
}

body.home-premium .roi-v2-row-country label,
body.home-premium .roi-v2-field-head label,
body.home-premium .roi-v2-range-labels,
body.home-premium .roi-v2-card-label {
  color: #b9c4c5;
}

body.home-premium .roi-v2-row-country label {
  font-size: 13px;
}

body.home-premium .roi-v2-select {
  min-height: 46px;
  color: var(--hp-ink);
  background: #fff;
  border-color: #aeb8b5;
  border-radius: 4px;
}

body.home-premium .roi-v2-val {
  color: #6ee7b7;
}

body.home-premium .roi-v2-slider {
  height: 44px;
  margin-block: -10px;
  accent-color: var(--hp-green-bright);
  background: transparent;
}

body.home-premium .roi-v2-slider::-webkit-slider-runnable-track {
  height: 6px;
  background: #697477;
  border-radius: 0;
}

body.home-premium .roi-v2-slider::-moz-range-track {
  height: 6px;
  background: #697477;
  border-radius: 0;
}

body.home-premium .roi-v2-card {
  min-height: 122px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

body.home-premium .roi-v2-card-icon {
  color: #6ee7b7;
  background: transparent;
  border: 1px solid rgba(110, 231, 183, 0.55);
  border-radius: 4px;
}

body.home-premium .roi-v2-card-value {
  color: #fff;
}

body.home-premium .roi-v2-card-hero {
  grid-column: auto;
  background: var(--hp-green);
  border-color: #6ee7b7;
}

body.home-premium .roi-v2-card-hero .roi-v2-card-label {
  color: #fff;
}

body.home-premium .roi-v2-cta-row {
  display: flex;
  justify-content: flex-start;
  gap: 14px;
  max-width: 1100px;
  margin-top: 28px;
  text-align: left;
}

body.home-premium .roi-v2-cta-row .btn-pill-outline {
  color: var(--hp-ink) !important;
  border-color: var(--hp-ink);
  box-shadow: 0 6px 0 rgba(17, 23, 47, 0.2);
}

body.home-premium .roi-v2-disclaimer {
  max-width: 90ch;
  margin: 18px 0 0;
  color: var(--hp-muted);
  text-align: left;
}

/* Founder proof */
body.home-premium #founder {
  background: #e7eee9;
}

body.home-premium .founder-grid {
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 48px;
  max-width: 980px;
  margin: 0;
}

body.home-premium .founder-img {
  width: 180px;
  height: 180px;
  border: 1px solid var(--hp-ink);
  border-radius: 8px;
  box-shadow: 9px 9px 0 rgba(17, 23, 47, 0.14);
}

body.home-premium .founder-photo::after {
  content: "FOUNDER / FACTORY OWNER";
  display: block;
  margin-top: 15px;
  color: var(--hp-green);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

body.home-premium .founder-title {
  font-size: clamp(1.7rem, 3vw, 2.35rem);
}

body.home-premium .founder-bio {
  max-width: 65ch;
  color: #3f4e4c;
}

/* FAQ becomes a due diligence list. */
body.home-premium .faq-list {
  max-width: 1000px;
  margin: 0;
  border-top: 1px solid var(--hp-ink);
}

/* FAQ is a compact due diligence list with one open answer at a time. */
body.home-premium .faq-item {
  margin: 0;
  /* was 0 — the 16px/14px padding sits on the summary CHILD, not the item, so
     nine hairline-separated rows had no outer breathing room at all.
     Measured 0% pad-share at both widths; 12px gives 8.2% at 390 / 12.1% at
     1440, inside the agreed 10-35% band. */
  padding-block: 12px;
  overflow: visible;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hp-line);
  border-radius: 0;
  box-shadow: none;
}

body.home-premium .faq-item[open] {
  background: #f5f7f4;
  box-shadow: none;
}

body.home-premium .faq-item summary {
  min-height: 58px;
  padding: 16px 14px;
  color: var(--hp-ink);
  font-size: 15px;
}

body.home-premium .faq-item summary::after {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--hp-green);
  border: 1px solid var(--hp-green);
  font-size: 1rem;
  line-height: 1;
}

body.home-premium .faq-item p {
  max-width: 82ch;
  padding: 0 56px 22px 14px;
  color: var(--hp-muted);
}

/* Final conversion block */
body.home-premium #contact {
  color: #fff;
  background-color: var(--hp-ink);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 36px 36px;
}

body.home-premium #contact .section-header::before {
  color: #6ee7b7;
  border-top-color: rgba(255, 255, 255, 0.65);
}

body.home-premium #contact .section-header h2 {
  color: #fff;
}

body.home-premium #contact .section-header p {
  color: #bdc8c9;
}

body.home-premium .contact-grid {
  grid-template-columns: 0.78fr 1.22fr;
  gap: 64px;
  max-width: 1000px;
  margin: 0;
}

body.home-premium .contact-info {
  gap: 34px;
}

body.home-premium .contact-item {
  padding-top: 16px;
  color: #6ee7b7;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

body.home-premium .contact-item div,
body.home-premium .contact-item strong,
body.home-premium .contact-item p,
body.home-premium .contact-item a {
  color: #fff;
}

body.home-premium .contact-form {
  padding: 30px;
  background: #fbfaf6;
  border: 1px solid #fff;
  border-radius: 8px;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.28);
}

body.home-premium .form-group input,
body.home-premium .form-group textarea {
  min-height: 48px;
  color: var(--hp-ink);
  background: #fff;
  border-color: #aeb8b5;
  border-radius: 4px;
}

body.home-premium .form-group textarea {
  min-height: 96px;
}

body.home-premium .form-note {
  color: var(--hp-muted) !important;
}

/* Footer becomes an information directory. */
body.home-premium .footer {
  padding: 48px 0 24px;
  color: #aeb9ba;
  background: #080d1e;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

body.home-premium .footer-inner {
  display: grid;
  grid-template-columns: 1.35fr 0.8fr 1.35fr 0.65fr;
  gap: 28px;
  text-align: left;
}

body.home-premium .footer-brand {
  align-items: flex-start;
  justify-content: flex-start;
  margin: 0;
  text-align: left;
}

body.home-premium .footer-logo {
  width: 32px;
  height: 32px;
  min-height: 0;
  border-radius: 4px;
}

body.home-premium .footer-brand p {
  color: #aeb9ba !important;
  font-size: 13px;
  line-height: 1.6;
}

body.home-premium .footer-social {
  width: auto;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 10px !important;
}

body.home-premium .footer-social-link {
  border-radius: 4px;
}

body.home-premium .footer-links {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  margin: 0;
  padding: 0;
}

body.home-premium .footer-links a {
  width: 100%;
  color: #aeb9ba;
  font-size: 12px;
}

body.home-premium .footer-links a:hover {
  color: #fff;
}

body.home-premium .footer-bottom {
  grid-column: 1 / -1;
  justify-content: space-between;
  margin-top: 12px;
  color: #7e8d8f;
  border-top-color: rgba(255, 255, 255, 0.12);
}

body.home-premium .footer-bottom p {
  color: #7e8d8f !important;
}

/* Remove the decorative motion that made the page feel like a template. */
body.home-premium .reveal,
body.home-premium .reveal-up,
body.home-premium .flow-step-anim,
body.home-premium .flow-arrow-anim {
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

body.home-premium .feature-card:hover .feature-icon svg,
body.home-premium .problem-card:hover svg,
body.home-premium .diff-card:hover svg {
  animation: none !important;
  transform: none !important;
}

/* Tablet */
@media (max-width: 900px) {
  body.home-premium .hero {
    min-height: 0;
    padding: 108px 0 60px;
  }

  body.home-premium .hero .container {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: left;
  }

  body.home-premium .hero-content {
    max-width: 680px;
  }

  body.home-premium .hero h1 {
    max-width: 650px;
  }

  body.home-premium .hero-sub {
    margin: 0;
  }

  body.home-premium .hero-actions {
    justify-content: flex-start;
    flex-direction: row;
  }

  body.home-premium .section-header {
    column-gap: 32px;
  }

  body.home-premium #see-it > .container,
  body.home-premium #solution > .container {
    display: block;
  }

  body.home-premium .qrgen-wrapper {
    height: auto;
    margin-top: 32px;
  }

  body.home-premium .screenshot-tabs {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 16px;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  body.home-premium .tab {
    justify-content: center;
    border-right: 0;
    border-bottom: 1px solid var(--hp-line);
  }

  body.home-premium .tab:last-child {
    border-right: 1px solid var(--hp-line);
  }

  body.home-premium #features .feature-card,
  body.home-premium #features .feature-card:nth-child(n) {
    grid-column: span 6;
  }

  body.home-premium .pricing-card-v2 {
    grid-template-columns: 1fr;
  }

  body.home-premium .pricing-card-head,
  body.home-premium .pricing-examples,
  body.home-premium .pricing-feature-list,
  body.home-premium .pricing-card-cta {
    grid-column: 1;
    grid-row: auto;
  }

  body.home-premium .roi-v2 {
    /* minmax(0,1fr), not 1fr: a bare 1fr track refuses to shrink below the
       min-content of its children (the slider row + range labels), so on a
       320px screen the column resolved to ~305px inside a 244px content box
       and pushed the page 24px wide. */
    grid-template-columns: minmax(0, 1fr);
  }
  body.home-premium .roi-v2-inputs,
  body.home-premium .roi-v2-results { min-width: 0; }
  body.home-premium .roi-v2-slider { width: 100%; min-width: 0; }

  body.home-premium .footer-inner {
    grid-template-columns: 1fr 1fr;
  }

  body.home-premium .footer-brand,
  body.home-premium .footer-bottom {
    grid-column: 1 / -1;
  }
}

/* Mobile */
@media (max-width: 600px) {
  body.home-premium .container {
    padding-inline: 16px;
  }

  body.home-premium .nav-links {
    top: 64px;
    align-items: stretch;
    gap: 0;
    padding: 10px 16px 16px;
    background: var(--hp-ink);
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }

  body.home-premium .nav-links a {
    justify-content: flex-start;
    padding: 8px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  }

  body.home-premium .nav-links .btn-primary {
    justify-content: center;
    margin-top: 10px;
    border-bottom: 1px solid #39c996;
  }

  body.home-premium .hero {
    padding: 96px 0 48px;
    background-size: 28px 28px;
  }

  body.home-premium .hero .container {
    gap: 32px;
  }

  body.home-premium .hero-badge {
    margin-bottom: 18px;
  }

  body.home-premium .hero h1 {
    font-size: 2rem;
    line-height: 1.06;
  }

  body.home-premium .hero-tagline {
    font-size: 1rem;
  }

  body.home-premium .hero .accent-bar-row {
    margin-bottom: 24px;
  }

  body.home-premium .hero-sub {
    font-size: 15px;
  }

  body.home-premium .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  body.home-premium .hero-actions .btn-pill {
    width: 100%;
    max-width: none;
  }

  body.home-premium .hero-cta-sub {
    margin-top: 18px;
  }

  body.home-premium .hero-image {
    padding: 31px 6px 6px;
    box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.3);
  }

  body.home-premium .hero-image::before {
    left: 10px;
    height: 31px;
    font-size: 10px;
  }

  body.home-premium .hero-image::after {
    top: 12px;
    right: 10px;
    width: 6px;
    height: 6px;
    box-shadow: -11px 0 0 #f59e0b, -22px 0 0 #ef4444;
  }

  /* Mobile keeps the same three-tier relationship at a smaller scale.
     Sections are 2-3x taller at 390px, so pad-share is lower throughout. */
  body.home-premium .section {
    padding: 44px 0;
  }
  body.home-premium #problem,
  body.home-premium #solution,
  body.home-premium #why,
  body.home-premium #testimonials,
  body.home-premium #founder {
    padding-block: 32px;
  }
  body.home-premium #see-it,
  body.home-premium #pricing {
    padding-block: 44px;
  }

  body.home-premium .section-header {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 28px;
  }

  body.home-premium .section-header::before,
  body.home-premium .section-header h2,
  body.home-premium .section-header p {
    grid-column: 1;
  }

  body.home-premium .section-header h2 {
    font-size: 28px;
  }

  body.home-premium .section-header p {
    font-size: 15px;
  }

  body.home-premium .video-wrapper-yt {
    border-radius: 4px;
    box-shadow: 6px 6px 0 rgba(17, 23, 47, 0.12);
  }

  body.home-premium .qrgen-wrapper {
    margin-top: 34px;
    padding: 18px 14px;
  }

  body.home-premium .qrgen-right {
    grid-template-columns: 1fr;
  }

  body.home-premium .qrgen-label-card {
    width: 100%;
  }

  body.home-premium .qrgen-canvas {
    width: 170px;
    height: 170px;
  }

  body.home-premium .qrgen-try {
    text-align: left;
  }

  body.home-premium #problem .grid-3 {
    grid-template-columns: 1fr;
  }

  body.home-premium .problem-card {
    padding: 20px;
    border-right: 0;
    border-bottom: 1px solid var(--hp-line);
  }

  body.home-premium .problem-card:last-child {
    border-bottom: 0;
  }

  body.home-premium .flow {
    grid-template-columns: 1fr;
  }

  body.home-premium .flow-step,
  body.home-premium .flow-step-anim {
    border-right: 0;
    border-bottom: 1px solid var(--hp-line);
  }

  body.home-premium .flow-step:last-of-type {
    border-bottom: 0;
  }

  body.home-premium #features .grid-3 {
    grid-template-columns: 1fr;
  }

  body.home-premium #features .feature-card,
  body.home-premium #features .feature-card:nth-child(n) {
    grid-column: 1;
    padding: 20px;
  }

  body.home-premium #why .grid-3 {
    grid-template-columns: 1fr;
  }

  body.home-premium .diff-card,
  body.home-premium .diff-card:nth-child(even),
  body.home-premium .diff-card:nth-last-child(-n + 2) {
    padding: 16px 18px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }

  body.home-premium .diff-card:last-child {
    border-bottom: 0;
  }

  body.home-premium .testimonial-grid-2 {
    grid-template-columns: 1fr;
  }

  body.home-premium .testimonial-card {
    padding: 50px 22px 24px;
  }

  body.home-premium .testimonial-card::before {
    left: 22px;
  }

  body.home-premium .guarantee-items {
    grid-template-columns: 1fr 1fr;
  }

  body.home-premium .guarantee-item {
    min-height: 120px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  body.home-premium .guarantee-item:nth-child(even) {
    border-right: 0;
  }

  body.home-premium .guarantee-item:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  body.home-premium .pricing-card-v2,
  body.home-premium .roi-v2,
  body.home-premium .contact-form {
    padding: 22px;
    box-shadow: 6px 6px 0 rgba(17, 23, 47, 0.12);
  }

  body.home-premium .pricing-examples {
    padding: 18px;
  }

  body.home-premium .pricing-feature-list {
    grid-template-columns: 1fr;
  }

  body.home-premium .pricing-example-grid {
    grid-template-columns: 1fr;
  }

  body.home-premium .pricing-example-grid > div:nth-child(even) {
    margin: -7px 0 8px;
  }

  body.home-premium .pricing-card-cta {
    width: 100%;
  }

  /* Lead with the product column on narrow screens. The alternatives remain
     available by horizontal scroll, while the first view answers the buyer's
     immediate question: what does Scan ERP provide? */
  body.home-premium .compare-v2-grid {
    min-width: 600px;
  }

  body.home-premium .compare-v2-grid .cv2-row {
    grid-template-columns: 212px 141px 123px 123px;
  }

  body.home-premium .compare-v2-grid .cv2-row > :first-child {
    grid-column: 1;
  }

  body.home-premium .compare-v2-grid .cv2-row > :nth-child(2) {
    grid-column: 3;
  }

  body.home-premium .compare-v2-grid .cv2-row > :nth-child(3) {
    grid-column: 4;
  }

  body.home-premium .compare-v2-grid .cv2-row > .cv2-us {
    grid-column: 2;
    grid-row: 1;
  }

  body.home-premium .roi-v2-results {
    /* Two cards need ~305px (147+143+14 gap). Below ~400px the content box
       is narrower than that, so keep 2-up only where it actually fits and
       stack below. This rule previously forced 1fr 1fr all the way to 320px
       and pushed the whole page 24px wide. */
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  }

  body.home-premium .roi-v2-card-hero {
    grid-column: auto;
  }

  body.home-premium .roi-v2-cta-row {
    flex-direction: column;
    align-items: stretch;
  }

  body.home-premium .roi-v2-cta-row .btn-pill {
    width: 100%;
  }

  body.home-premium .founder-grid,
  body.home-premium #founder .founder-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    justify-items: start;
    text-align: left;
  }

  body.home-premium .founder-photo,
  body.home-premium #founder picture img {
    max-width: 150px;
    margin: 0;
  }

  body.home-premium .founder-img {
    width: 150px;
    height: 150px;
  }

  body.home-premium .faq-item p {
    padding: 0 44px 20px 14px;
  }

  body.home-premium .contact-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  body.home-premium .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  body.home-premium .footer-brand,
  body.home-premium .footer-bottom {
    grid-column: 1 / -1;
  }

  body.home-premium .footer-links {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 14px;
  }

  body.home-premium .footer-bottom {
    flex-direction: column;
    gap: 4px;
  }

  body.home-premium .sticky-mobile-cta {
    gap: 6px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    background: #fbfaf6;
    box-shadow: 0 -6px 18px rgba(3, 8, 24, 0.16);
  }

  body.home-premium .sticky-mobile-cta a {
    min-height: 46px;
    border-radius: 4px;
    font-size: 12px;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  body.home-premium .section {
    padding: 56px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-premium *,
  body.home-premium *::before,
  body.home-premium *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Mobile legibility floor.
   Measured on a 390px phone: 15 <li> at 13.76px, 10 section-header
   <p> at 14.72px, problem-card copy at 14.4px, footer at 13.12px.
   Buyers read these on cheap screens in poor factory light, so lift
   substantive copy to 15px on phones. Desktop is untouched.
   (A first attempt used `max(15px, 1em)` — wrong, because 1em
   inherits the already-small parent size and resolves to nothing.)
   ============================================================ */
@media (max-width: 600px) {
  body.home-premium .section ul li,
  body.home-premium .module-list li,
  body.home-premium .feature-list li { font-size: 15px; line-height: 1.55; }

  body.home-premium .section-header p,
  body.home-premium .problem-card p,
  body.home-premium .hero-sub,
  body.home-premium .hero-cta-sub,
  body.home-premium .qrgen-try-sub { font-size: 15px; line-height: 1.55; }

  body.home-premium .footer-brand p { font-size: 14px; line-height: 1.55; }

  body.home-premium .eyebrow { font-size: 13px; }

  /* Structural floor: any paragraph or list item inside the page body that
     a more specific rule left under 15px. Uses the same two-class
     specificity as the rules above so it lands, and an explicit px value
     (never 1em, which inherits the small size it is meant to correct). */
  body.home-premium main p,
  body.home-premium main li,
  body.home-premium .section p,
  body.home-premium .section li { font-size: 15px; line-height: 1.55; }

  /* Deliberate exceptions: labels and captions stay small by design. */
  body.home-premium .eyebrow,
  body.home-premium .badge,
  body.home-premium .tag,
  body.home-premium figcaption,
  body.home-premium small { font-size: 13px; line-height: 1.45; }
}

/* ============================================================
   #features cards — even the rows out.
   Cards in a row stretch to the tallest, which left short cards
   with a pool of dead space under the last bullet. Push the list
   to the top and let the card end where its content ends, so the
   whitespace reads as rhythm rather than as a gap.
   ============================================================ */
@media (min-width: 768px) {
  body.home-premium #features .feature-card { align-content: start; }
  body.home-premium #features .feature-card ul { margin-bottom: 0; }
  body.home-premium #features .feature-card li:last-child { margin-bottom: 0; }
}

/* ============================================================
   CALM PASS — refine, don't strip.
   Every fact, bullet and number stays. What changes is the
   number of DIFFERENT values the eye has to reconcile.

   Measured before: 34 distinct font sizes, 8 border radii,
   9 shadow variants, 7 font weights, 17 text colours in <main>.
   Near-duplicates (13 / 13.12 / 13.76 / 14 / 14.4 / 14.72px)
   read as sloppiness rather than hierarchy.

   Collapsed to: 4 radii, 3 shadows, 4 weights, one type ramp.
   ============================================================ */

body.home-premium {
  /* radius: one small, one card, one pill */
  --r-sm: 4px;
  --r-md: 8px;
  --r-pill: 999px;
  /* type ramp — deliberate steps, no near-duplicates */
  --t-micro: 13px;
  --t-small: 15px;
  --t-body:  16px;
  --t-lead:  18px;
}

/* --- radii: 3/5/6/7/9px all collapse to the nearest token ---- */
body.home-premium main .feature-card,
body.home-premium main .problem-card,
body.home-premium main .diff-card,
body.home-premium main .pricing-card-v2,
body.home-premium main .roi-v2,
body.home-premium main .contact-form,
body.home-premium main .compare-v2-grid { border-radius: var(--r-md); }

body.home-premium main .badge,
body.home-premium main .tag,
body.home-premium main .pill,
body.home-premium main .btn-pill { border-radius: var(--r-pill); }

/* --- shadows: one card depth, one CTA, nothing else --------- */
body.home-premium main .feature-card,
body.home-premium main .problem-card,
body.home-premium main .diff-card {
  box-shadow: none;
  border: 1px solid var(--hp-line);
}

/* --- type: collapse the near-duplicate sizes ---------------- */
body.home-premium main li,
body.home-premium main p { font-size: var(--t-body); line-height: 1.6; }
body.home-premium main .feature-card li,
body.home-premium main .problem-card p,
body.home-premium main .diff-card p { font-size: var(--t-small); line-height: 1.58; }
body.home-premium main .eyebrow,
body.home-premium main .badge,
body.home-premium main .tag,
body.home-premium main figcaption,
body.home-premium main small { font-size: var(--t-micro); }

/* --- weight: 850/800/750 -> 800; 500 -> 600 ------------------ */
body.home-premium main h1,
body.home-premium main h2 { font-weight: 800; }
body.home-premium main h3,
body.home-premium main h4 { font-weight: 700; }
body.home-premium main strong,
body.home-premium main b { font-weight: 600; }

/* --- the stragglers, targeted by what actually renders -------
   Measured after the first pass: radii still 8 (3/5/7/9px from
   named components that outrank the generic rule), shadows 9,
   fonts 28 (fractional sizes inherited through rem/em chains).
   These selectors match the real elements, at the specificity
   needed to land. */
body.home-premium main .hero-image,
body.home-premium main .video-wrapper-yt video,
body.home-premium main .feature-card,
body.home-premium main a.feature-card,
body.home-premium main .pricing-card-deadline,
body.home-premium main .flow-num,
body.home-premium main .screenshot-panel img,
body.home-premium main .qrgen-label-card { border-radius: var(--r-md); }
body.home-premium main .flow-num,
body.home-premium main .pricing-card-deadline { border-radius: var(--r-sm); }

/* shadows: one card depth reused, one CTA block, nothing else */
body.home-premium main .hero-image,
body.home-premium main .video-wrapper-yt video,
body.home-premium main .pricing-card-v2,
body.home-premium main .qrgen-label-card,
body.home-premium main .screenshot-panel img {
  box-shadow: 0 1px 2px rgba(17,23,47,.06), 0 8px 24px -12px rgba(17,23,47,.18);
}

/* fractional sizes -> the ramp */
body.home-premium main summary,
body.home-premium main strong,
body.home-premium main .pf-tick { font-size: var(--t-small); }
body.home-premium main .qrgen-key { font-size: var(--t-micro); }
body.home-premium main .qrgen-val { font-size: var(--t-small); }

/* --- specificity correction ---------------------------------
   The calm pass above lost to existing ID-scoped rules:
   `body.home-premium #features .feature-card` is (0,3,1) and
   outranks `body.home-premium main .feature-card` (0,2,2).
   Matching the ID level is the only way these land. Verified by
   reading CSS.getMatchedStylesForNode, not by assuming. */
body.home-premium #features .feature-card,
body.home-premium #features a.feature-card,
body.home-premium #problem .problem-card,
body.home-premium #why .diff-card,
body.home-premium #pricing .pricing-card-v2,
body.home-premium #roiCalc .roi-v2,
body.home-premium #contact .contact-form { border-radius: var(--r-md); }

body.home-premium #features .feature-card,
body.home-premium #problem .problem-card,
body.home-premium #why .diff-card {
  box-shadow: none;
  border: 1px solid var(--hp-line);
}

body.home-premium .faq-item summary { font-size: var(--t-small); }
body.home-premium #features .feature-card li { font-size: var(--t-small); line-height: 1.58; }
body.home-premium #problem .problem-card p,
body.home-premium #why .diff-card p { font-size: var(--t-small); line-height: 1.58; }

/* ============================================================
   KEYBOARD FOCUS — WCAG 2.4.7
   Measured by real Tab traversal: 12 of 25 focusable elements
   matched :focus-visible but computed outline-width 0, because
   the generic `a:focus-visible` rule in styles.css is (0,1,1)
   and loses to `body.home-premium .tab` (0,2,1) on the outline
   shorthand. Restated here at the specificity needed to land.
   ============================================================ */
body.home-premium a:focus-visible,
body.home-premium button:focus-visible,
body.home-premium summary:focus-visible,
body.home-premium input:focus-visible,
body.home-premium select:focus-visible,
body.home-premium textarea:focus-visible,
body.home-premium [tabindex]:focus-visible,
body.home-premium .tab:focus-visible,
body.home-premium .btn:focus-visible,
body.home-premium .btn-pill:focus-visible {
  outline: 3px solid var(--color-accent, #047857);
  outline-offset: 3px;
  border-radius: 8px;
}
/* On dark grounds the green outline is hard to see — use white there. */
body.home-premium .footer a:focus-visible,
body.home-premium .section-dark a:focus-visible,
body.home-premium .roi-v2 a:focus-visible,
body.home-premium .roi-v2 button:focus-visible,
body.home-premium .roi-v2 input:focus-visible,
body.home-premium .roi-v2 select:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 3px;
}

/* ============================================================
   MEASURE — the skill's own rule: keep line length under 80
   characters. Measured 11 paragraphs over, worst at 103ch,
   which is genuinely harder to read on a wide screen.
   Capped where the layout allows it; grid/flex children that
   are already narrow are unaffected.
   ============================================================ */
@media (min-width: 640px) {
  body.home-premium main > section > .container > p,
  body.home-premium .section-header p,
  body.home-premium #founder .founder-bio,
  body.home-premium #faq .faq-item p,
  body.home-premium .screenshot-panel p { max-width: 65ch; }
  /* Note: `ch` measures the "0" glyph, which is narrower than the average
     character in this face — a 72ch cap measured 87 real characters per
     line (canvas-measured). 65ch lands at ~78. Estimating chars as
     width/(fontSize*0.5) is also wrong; measure the real glyph width. */
}

/* ============================================================
   TYPE SCALE — final pin.
   224 arbitrary rem font-sizes (0.82rem, 0.94rem, 1.17rem...)
   were snapped to whole pixels on the scale, taking distinct
   sizes in <main> from 27 to 18 and fractional ones from 15 to 4.
   These last few resolve through em/clamp chains the sweep could
   not reach, so they are pinned by name.
   ============================================================ */
body.home-premium .testimonial-meta,
body.home-premium .contact-sep { font-size: 15px; }
body.home-premium .hero-tagline { font-size: 20px; }
body.home-premium .ds-kicker    { font-size: 12px; }
body.home-premium .founder-title { font-size: 38px; }