/* site.css — homepage stylesheet.
   Design source: provided directly as a complete, polished landing page
   (ModIns_Final_iOS_Android.html). Copied as-is below rather than
   reinterpreted — my job here was correct integration (splitting into
   index.html + this file, wiring the company-info.js single-source-of-truth
   pattern the rest of the site already uses, verifying every link), not
   redesigning what was already built. */

/* =========================================================
   ModIns — Clean SaaS Landing Page
   Responsive: mobile / tablet / desktop
   ========================================================= */

:root {
  --ink: #111827;
  --ink-soft: #4b5563;
  --ink-faint: #8b93a5;

  --paper: #ffffff;
  --paper-soft: #f8f9ff;
  --line: #e8eaf2;

  --accent: #4f46e5;
  --accent-deep: #3730a3;
  --accent-mid: #6366f1;
  --accent-tint: #eef2ff;
  --accent-tint-2: #f5f3ff;

  --shadow-sm: 0 8px 24px rgba(17, 24, 39, 0.06);
  --shadow-md: 0 18px 50px rgba(55, 48, 163, 0.12);

  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1180px;
  --radius-lg: 24px;
  --radius-md: 18px;
}

/* ---------- Reset ---------- */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
}

a {
  color: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.container {
  width: min(calc(100% - 64px), var(--container));
  margin-inline: auto;
}

/* ---------- Header ---------- */

.site-header {
  position: relative;
  z-index: 10;
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid rgba(232, 234, 242, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.header-inner {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.025em;
  text-decoration: none;
  white-space: nowrap;
}

.brand span {
  color: var(--accent);
}

.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 19px;
  border-radius: 11px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.18);
  transition:
    transform 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.header-cta:hover {
  background: var(--accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 11px 26px rgba(79, 70, 229, 0.25);
}

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

.hero {
  position: relative;
  overflow: hidden;
  padding: 84px 0 82px;
  background:
    radial-gradient(circle at 78% 42%, rgba(99, 102, 241, 0.10), transparent 25%),
    linear-gradient(180deg, #ffffff 0%, #fbfbff 100%);
}

.hero::before {
  content: "";
  position: absolute;
  width: 580px;
  height: 580px;
  border-radius: 50%;
  right: -270px;
  top: -220px;
  background: rgba(238, 242, 255, 0.78);
  filter: blur(1px);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(390px, 0.97fr);
  align-items: center;
  gap: 70px;
}

.hero-copy {
  max-width: 650px;
}

.hero-values {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.045em;
}

.hero-values i {
  color: #c7d2fe;
  font-style: normal;
}

.hero h1 {
  max-width: 760px;
  margin: 0 0 24px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(42px, 5.2vw, 68px);
  line-height: 1.035;
  font-weight: 600;
  letter-spacing: -0.035em;
}

.hero h1 em {
  color: var(--accent);
  font-style: normal;
}

.hero-lede {
  max-width: 610px;
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.72;
}

.hero-lede strong {
  color: var(--ink);
  font-weight: 700;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 21px;
  border-radius: 12px;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 700;
  transition:
    transform 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 12px 26px rgba(79, 70, 229, 0.22);
}

.button-primary:hover {
  background: var(--accent-deep);
  box-shadow: 0 15px 32px rgba(79, 70, 229, 0.28);
}

.button-secondary {
  border: 1px solid #d9dcf2;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 5px 16px rgba(17, 24, 39, 0.04);
}

.button-secondary:hover {
  border-color: #b9bdf0;
  background: var(--accent-tint);
}

.button-secondary span {
  color: var(--accent);
  font-size: 16px;
}

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

.hero-visual {
  position: relative;
  min-height: 430px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.visual-glow {
  position: absolute;
  width: 390px;
  height: 390px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(238, 242, 255, 0.95) 0%, rgba(238, 242, 255, 0.65) 42%, rgba(238, 242, 255, 0) 70%);
}

.person-card {
  position: absolute;
  z-index: 3;
  width: 142px;
  min-height: 156px;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  text-align: center;
}

.person-card span {
  font-size: 12px;
  font-weight: 800;
}

.agent-card {
  left: 2%;
  top: 90px;
  color: #fff;
  background: linear-gradient(145deg, #111827, #1f2937);
}

.client-card {
  right: 2%;
  top: 90px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #dfe3f5;
}

.avatar {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
}

.avatar svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.6;
}

.avatar-dark {
  background: rgba(129, 140, 248, 0.18);
}

.avatar-dark svg {
  stroke: #c7d2fe;
}

.avatar-light {
  background: var(--accent-tint);
}

.avatar-light svg {
  stroke: var(--accent);
}

.connection {
  position: absolute;
  z-index: 4;
  top: 145px;
  left: 50%;
  width: 220px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.connection-line {
  height: 1px;
  flex: 1;
  border-top: 2px dashed #c7d2fe;
}

.connection-core {
  width: 66px;
  height: 66px;
  margin: 0 -1px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #dfe3f5;
  box-shadow: 0 10px 28px rgba(79, 70, 229, 0.15);
}

.connection-core::before {
  content: "";
  position: absolute;
  width: 82px;
  height: 82px;
  border: 1px dashed #c7d2fe;
  border-radius: 50%;
}

.connection-core svg {
  position: relative;
  z-index: 2;
  width: 27px;
  height: 27px;
  stroke: var(--accent);
  stroke-width: 1.8;
}









/* ---------- Audience ---------- */

.audience-section {
  padding: 0 0 105px;
}

.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.audience-card {
  min-height: 340px;
  padding: 40px;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.audience-agent {
  color: #fff;
  background:
    radial-gradient(circle at 85% 12%, rgba(99, 102, 241, 0.35), transparent 30%),
    linear-gradient(145deg, #111827, #1d2340);
  box-shadow: 0 20px 55px rgba(17, 24, 39, 0.13);
}

.audience-client {
  background: linear-gradient(145deg, #f7f8ff, #eef2ff);
  border: 1px solid #dfe3fb;
}

.card-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  border-radius: 14px;
}

.card-icon svg {
  width: 25px;
  height: 25px;
  stroke-width: 1.55;
}

.icon-white {
  background: rgba(129, 140, 248, 0.16);
}

.icon-white svg {
  stroke: #c7d2fe;
}

.icon-indigo {
  background: #fff;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.08);
}

.icon-indigo svg {
  stroke: var(--accent);
}

.card-kicker {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.audience-agent .card-kicker {
  color: #a5b4fc;
}

.audience-client .card-kicker {
  color: var(--accent-deep);
}

.audience-card h2 {
  margin: 0 0 15px;
  font-family: var(--serif);
  font-size: clamp(25px, 2.3vw, 31px);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.audience-card p {
  max-width: 500px;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.72;
}

.audience-agent p {
  color: #cbd2f5;
}

.audience-client p {
  color: var(--ink-soft);
}

/* ---------- How it works ---------- */

.how-section {
  padding: 0 0 100px;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 46px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
}

.heading-line {
  width: 42px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.step {
  position: relative;
  padding: 22px 18px 0;
  border-top: 2px solid var(--ink);
}

.step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 20px;
}

.step-number {
  color: var(--accent);
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
}

.step-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-tint);
}

.step-icon svg {
  width: 23px;
  height: 23px;
  stroke: var(--accent);
  stroke-width: 1.55;
}

.step h3 {
  margin: 0 0 9px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
}

.step p {
  max-width: 330px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.68;
}

/* ---------- CTA ---------- */

.cta-wrap {
  padding-bottom: 0;
}

.cta-band {
  min-height: 132px;
  padding: 32px 42px;
  display: flex;
  /* ⚠️ ADDED — this container had no wrap behavior at any screen size at
     all. .button-white is explicitly flex-shrink: 0 (refuses to shrink),
     and with wrapping never enabled, a narrow phone had nowhere for the
     button to go but overflow past the card's edge. Every existing mobile
     override for this class only ever touched padding — none of them
     addressed the actual layout. flex-wrap:wrap is safe at every width: it
     does nothing when both children already fit on one line (every larger
     screen), and only drops the button to its own line when they
     genuinely don't fit. */
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 30px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 80% 50%, rgba(99, 102, 241, 0.28), transparent 32%),
    linear-gradient(110deg, #111827, #1e1b4b);
  box-shadow: 0 20px 55px rgba(17, 24, 39, 0.15);
}

.cta-copy {
  display: flex;
  align-items: center;
  gap: 17px;
}

.cta-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.10);
}

.cta-icon svg {
  width: 23px;
  height: 23px;
  stroke: #c7d2fe;
  stroke-width: 1.55;
}

.cta-copy span {
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}

.cta-copy p {
  margin: 3px 0 0;
  color: #cbd2f5;
  font-size: 13px;
}

.button-white {
  flex-shrink: 0;
  background: #fff;
  color: var(--accent-deep);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.14);
}

.button-white:hover {
  background: #f8f9ff;
}

.button-white span {
  color: var(--accent);
  font-size: 18px;
}

/* ---------- Footer ---------- */

.site-footer {
  margin-top: 70px;
  border-top: 1px solid var(--line);
}

.footer-inner {
  min-height: 92px;
  padding: 26px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  color: var(--ink-faint);
  font-size: 12px;
}

.footer-inner nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
}

.footer-inner a {
  color: var(--ink-faint);
  text-decoration: none;
  transition: color 150ms ease;
}

.footer-inner a:hover {
  color: var(--ink);
}

/* ---------- Accessibility ---------- */

a:focus-visible {
  outline: 3px solid rgba(79, 70, 229, 0.35);
  outline-offset: 4px;
  border-radius: 5px;
}


/* =========================================================
   Production responsive system
   Mobile / Tablet / Desktop
   ========================================================= */

/* Large tablets and smaller laptops */
@media (max-width: 1100px) {
  .container {
    width: min(calc(100% - 48px), var(--container));
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(350px, .85fr);
    gap: 42px;
  }

  .hero h1 {
    font-size: clamp(44px, 5.4vw, 60px);
  }

  .hero-visual {
    min-height: 380px;
  }
}

/* Tablet */
@media (max-width: 900px) {
  .container {
    width: min(calc(100% - 40px), var(--container));
  }

  .header-inner {
    min-height: 72px;
  }

  .header-right {
    gap: 16px;
  }

  .hero {
    padding: 62px 0 66px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* ⚠️ ADDED — this grid was hard-locked to grid-template-columns: 1fr 1fr
     at EVERY screen size. The only mobile override that existed for it
     (further down) just tightened the gap between the two columns — it
     never actually collapsed them. On a narrow phone each card was forced
     into roughly half the screen width, leaving barely enough room for the
     Greek headline text to sit without breaking. Collapsing to one column
     at the same breakpoint the hero grid already uses above keeps this
     page's responsive behavior consistent, not a one-off special case. */
  .audience-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    max-width: 760px;
  }

  .hero h1 {
    max-width: 760px;
    font-size: clamp(44px, 6.8vw, 62px);
  }

  .hero-lede {
    max-width: 700px;
  }

  .hero-visual {
    width: min(100%, 650px);
    min-height: 350px;
    margin-inline: auto;
  }

  .audience-grid {
    gap: 14px;
  }

  .audience-card {
    min-height: 315px;
    padding: 30px;
  }

  .steps {
    gap: 18px;
  }

  .step {
    padding-inline: 12px;
  }

  .cta-band {
    padding: 28px 30px;
  }
}

/* Phones */
@media (max-width: 700px) {
  html {
    scroll-padding-top: 72px;
  }

  body {
    overflow-x: hidden;
  }

  .container {
    width: calc(100% - 28px);
    max-width: none;
  }

  /* ---------- Header ---------- */

  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
  }

  .header-inner {
    min-height: 62px;
    gap: 12px;
  }

  .brand {
    font-size: 21px;
  }

  .header-right {
    gap: 0;
  }

  .header-cta {
    min-height: 38px;
    padding: 0 13px;
    border-radius: 10px;
    font-size: 11px;
  }

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

  .hero {
    padding: 38px 0 46px;
  }

  .hero::before {
    width: 330px;
    height: 330px;
    right: -230px;
    top: -130px;
  }

  .hero-grid {
    gap: 27px;
  }

  .hero-values {
    margin-bottom: 14px;
    gap: 7px;
    font-size: 10px;
    letter-spacing: .025em;
  }

  .hero h1 {
    max-width: 100%;
    margin-bottom: 17px;
    font-size: clamp(35px, 10.4vw, 47px);
    line-height: 1.035;
    letter-spacing: -.043em;
  }

  .hero-lede {
    max-width: none;
    font-size: 14px;
    line-height: 1.72;
  }

  .hero-actions {
    width: 100%;
    flex-direction: column;
    gap: 9px;
    margin-top: 23px;
  }

  .button {
    width: 100%;
    min-height: 50px;
    padding-inline: 16px;
    border-radius: 11px;
    font-size: 13px;
  }

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

  .hero-visual {
    width: 100%;
    min-height: 278px;
    margin-top: 1px;
  }

  .visual-glow {
    width: 270px;
    height: 270px;
  }

  .person-card {
    width: 102px;
    min-height: 112px;
    padding: 12px 8px;
    gap: 8px;
    border-radius: 15px;
  }

  .agent-card {
    left: 0;
    top: 56px;
  }

  .client-card {
    right: 0;
    top: 56px;
  }

  .avatar {
    width: 39px;
    height: 39px;
    border-radius: 11px;
  }

  .avatar svg {
    width: 22px;
    height: 22px;
  }

  .person-card span {
    font-size: 9.5px;
  }

  .connection {
    top: 91px;
    width: min(47vw, 154px);
  }

  .connection-core {
    width: 48px;
    height: 48px;
  }

  .connection-core::before {
    width: 60px;
    height: 60px;
  }

  .connection-core svg {
    width: 21px;
    height: 21px;
  }
}

/* Small phones */
@media (max-width: 390px) {
  .container {
    width: calc(100% - 24px);
  }

  .header-inner {
    min-height: 59px;
  }

  .brand {
    font-size: 20px;
  }

  .header-cta {
    min-height: 36px;
    padding-inline: 11px;
    font-size: 10.5px;
  }

  .hero {
    padding-top: 31px;
    padding-bottom: 40px;
  }

  .hero h1 {
    font-size: 34px;
  }

  .hero-lede {
    font-size: 13.5px;
  }

  .hero-visual {
    min-height: 254px;
  }

  .visual-glow {
    width: 240px;
    height: 240px;
  }

  .person-card {
    width: 94px;
    min-height: 104px;
  }

  .agent-card,
  .client-card {
    top: 50px;
  }

  .connection {
    top: 81px;
    width: 45vw;
  }
}

/* Very narrow phones */
@media (max-width: 340px) {
  .container {
    width: calc(100% - 20px);
  }

  .header-inner {
    gap: 8px;
  }

  .brand {
    font-size: 19px;
  }

  .header-cta {
    padding-inline: 9px;
    font-size: 10px;
  }

  .hero h1 {
    font-size: 31px;
  }

  .person-card {
    width: 88px;
    min-height: 98px;
  }

  .connection {
    width: 43vw;
  }
}

/* Landscape phones */
@media (max-height: 560px) and (max-width: 900px) {
  .hero {
    padding-top: 25px;
    padding-bottom: 32px;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(245px, .78fr);
    align-items: center;
    gap: 18px;
  }

  .hero h1 {
    font-size: clamp(32px, 6vw, 43px);
  }

  .hero-lede {
    font-size: 13px;
  }

  .hero-actions {
    flex-direction: row;
  }

  .hero-actions .button {
    width: auto;
  }

  .hero-visual {
    min-height: 250px;
  }
}

/* Touch devices */
@media (hover: none) {
  .button:hover,
  .header-cta:hover {
    transform: none;
  }
}

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

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}


/* =========================================================
   FINAL iOS + ANDROID MOBILE POLISH
   ========================================================= */

/* Prevent browser text inflation on Android and iOS */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 0;
  width: 100%;
  overflow-x: hidden;
}

/* Safe-area support for iPhone/iPad */
.site-header {
  padding-top: env(safe-area-inset-top);
}

.site-footer {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Center the values independently from the logo and CTA */
@media (min-width: 701px) {
  .header-inner {
    position: relative;
  }

  .header-right {
    position: static;
    flex: 1;
    justify-content: flex-end;
  }

}

/* iPhone / Android */
@media (max-width: 700px) {
  .container {
    width: calc(100% - 28px);
  }

  .header-inner {
    min-height: 60px;
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .header-right {
    flex: 0 0 auto;
  }

  .header-cta {
    min-width: 91px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 11px;
    font-size: 11px;
  }

  .hero {
    padding-top: 34px;
    padding-bottom: 44px;
  }

  .hero h1 {
    font-size: clamp(34px, 10.3vw, 46px);
    max-width: 100%;
  }

  .hero-lede {
    font-size: 14px;
    max-width: 100%;
  }

  /* iOS/Android touch targets */
  .button,
  .header-cta,
  .footer-inner a {
    touch-action: manipulation;
  }

  .button {
    min-height: 50px;
  }

  /* Prevent cards/illustrations from ever overflowing */
  .hero-visual,
  .audience-card,
  .step,
  .cta-band {
    max-width: 100%;
    min-width: 0;
  }

  .hero-visual {
    min-height: 270px;
  }

  .person-card {
    width: 100px;
  }

  .connection {
    width: min(45vw, 150px);
  }

  .audience-card {
    padding: 24px 21px;
  }

  .audience-card h2 {
    font-size: 25px;
  }

  .audience-card p,
  .step p {
    overflow-wrap: break-word;
  }

  .step {
    padding: 17px 16px 18px;
  }

  .cta-band {
    padding: 22px 19px;
  }

  /* Avoid awkward fixed-height behavior in mobile Safari */
  .cta-copy {
    min-width: 0;
  }

  .cta-copy > div:last-child {
    min-width: 0;
  }

  .cta-copy p {
    overflow-wrap: anywhere;
  }

  /* Footer links are easy to tap */
  .footer-inner nav {
    gap: 8px 15px;
  }

  .footer-inner a {
    display: inline-block;
    padding: 4px 0;
  }
}

/* Small iPhones / Android devices */
@media (max-width: 390px) {
  .container {
    width: calc(100% - 24px);
  }

  .header-inner {
    min-height: 58px;
  }

  .brand {
    font-size: 20px;
  }

  .header-cta {
    min-width: 86px;
    min-height: 38px;
    padding-inline: 11px;
    font-size: 10.5px;
  }

  .hero {
    padding-top: 30px;
    padding-bottom: 40px;
  }

  .hero h1 {
    font-size: 33px;
  }

  .hero-lede {
    font-size: 13.5px;
  }

  .hero-visual {
    min-height: 250px;
  }

  .person-card {
    width: 92px;
    min-height: 101px;
  }

  .connection {
    width: 44vw;
  }

  .audience-card {
    padding: 21px 18px;
  }

  .audience-card h2 {
    font-size: 23px;
  }

  .cta-band {
    padding: 20px 17px;
  }
}

/* Very small Android phones */
@media (max-width: 340px) {
  .container {
    width: calc(100% - 20px);
  }

  .brand {
    font-size: 19px;
  }

  .header-cta {
    min-width: 82px;
    padding-inline: 9px;
    font-size: 10px;
  }

  .hero h1 {
    font-size: 30px;
  }

  .hero-visual {
    min-height: 235px;
  }

  .person-card {
    width: 86px;
    min-height: 95px;
  }

  .connection {
    width: 42vw;
  }
}

/* Landscape phones */
@media (max-height: 560px) and (max-width: 900px) {
  .hero {
    padding-top: 24px;
    padding-bottom: 30px;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(230px, .8fr);
    gap: 18px;
  }

  .hero h1 {
    font-size: clamp(30px, 6vw, 42px);
  }

  .hero-lede {
    font-size: 12.5px;
  }

  .hero-actions {
    flex-direction: row;
  }

  .hero-actions .button {
    width: auto;
  }

  .hero-visual {
    min-height: 245px;
  }
}

/* Respect iOS/Android reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}