/* ============================================================
   Bloomington HIPAA — native stylesheet
   Converted from the Tailwind/React template. Colors and spacing
   mirror the original utility classes.
   ============================================================ */

:root {
  --navy: #1E3A5F;
  --blue: #2563EB;
  --blue-600: #2563EB;
  --gold: #FFD700;
  --gold-hover: #facc15; /* yellow-400 */
  --black: #000;
  --white: #fff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4rem; /* clears the sticky navbar */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, p, ul {
  margin: 0;
}

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

.icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

[hidden] {
  display: none !important;
}

/* ---------- Layout containers ---------- */
.container {
  max-width: 72rem; /* max-w-6xl */
  margin-inline: auto;
  padding-inline: 1.5rem;
  width: 100%;
}
.container-5xl {
  max-width: 64rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
  width: 100%;
}
.container-3xl {
  max-width: 48rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
  width: 100%;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  border: none;
  cursor: pointer;
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 1rem;
  font-family: inherit;
  padding: 0.75rem 1.5rem;
  text-align: center;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.btn-sm {
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
}
.btn-gold {
  background: var(--gold);
  color: var(--black);
}
.btn-gold:hover {
  background: var(--gold-hover);
}

/* ---------- Section titles ---------- */
.section-title {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.75rem;
}
.section-title.center {
  text-align: center;
}
.services .section-title {
  margin-bottom: 3rem;
}
.section-sub {
  color: var(--gray-500);
  text-align: center;
  max-width: 36rem;
  margin: 0 auto 3rem;
}
.block-title {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  color: var(--navy);
}

/* ============================================================
   Navbar
   ============================================================ */
.navbar {
  background: var(--white);
  border-bottom: 1px solid var(--gray-100);
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.brand-logo {
  height: 2.25rem; /* 36px — aligns with the two-line brand text stack */
  width: auto;
  display: block;
  flex-shrink: 0;
}
.brand-text {
  display: flex;
  flex-direction: column;
}
.brand-eyebrow {
  font-size: 0.75rem;
  color: var(--gray-500);
  line-height: 1;
}
.brand-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.25;
}
.nav-links {
  display: none;
  align-items: center;
  gap: 1.5rem;
}
.nav-link {
  font-size: 0.875rem;
  color: var(--gray-600);
  transition: color 0.15s ease;
}
.nav-link:hover {
  color: var(--blue);
}
.nav-phone {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--black);
  transition: color 0.15s ease;
}
.nav-phone:hover {
  color: var(--gray-600);
}
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--black);
}
.nav-toggle .icon {
  width: 1.25rem;
  height: 1.25rem;
}
.nav-mobile {
  border-top: 1px solid var(--gray-100);
  background: var(--white);
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.nav-mobile-link {
  font-size: 0.875rem;
  color: var(--gray-700);
}
.nav-mobile-cta {
  width: 100%;
}

@media (min-width: 768px) {
  .nav-links {
    display: flex;
  }
  .nav-toggle {
    display: none;
  }
  .nav-mobile {
    display: none !important;
  }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  background: var(--white);
  padding: 4rem 1.5rem;
}
.hero-eyebrow {
  font-size: 1rem;
  font-weight: 500;
  color: var(--black);
  margin-bottom: 1rem;
}
.hero-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: stretch;
}
.hero-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.hero-headline {
  font-size: 3.75rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: var(--black);
  margin-bottom: 1.5rem;
  max-width: 48rem;
}
.hero-cta-mobile {
  align-self: flex-start;
  margin-bottom: 1.5rem;
}
.hero-benefits {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}
.hero-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.hero-check {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--black);
  margin-top: 0.125rem;
}
.hero-benefits span {
  font-size: 1rem;
  color: var(--black);
  line-height: 1.375;
}
.hero-benefits strong {
  font-weight: 700;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}
.hero-tags {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--black);
}

/* Pricing card (hero, right side) */
.pricing-card {
  border: 2px solid var(--black);
  border-radius: 0.75rem;
  padding: 1.75rem 2rem;
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
}
.pricing-card-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.pricing-card-badge .icon {
  width: 1rem;
  height: 1rem;
  color: var(--black);
}
.pricing-card-badge span {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--black);
}
.pricing-card-name {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--black);
  margin-bottom: 0.25rem;
}
.pricing-card-price {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin-bottom: 0;
  line-height: 1; /* trims whitespace under the large price so subprice hugs it */
}
.pricing-card-subprice {
  font-size: 1rem; /* matches the "/month" period text */
  font-weight: 500;
  color: var(--gray-500);
  margin-top: 0.125rem; /* sits right up against the price */
  margin-bottom: 1.25rem; /* spacing before the features list */
}
.pricing-card-amount {
  font-size: 3rem;
  font-weight: 900;
  color: var(--black);
}
.pricing-card-period {
  font-size: 1rem;
  font-weight: 500;
  color: var(--black);
}
.pricing-card-features {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-bottom: 1.5rem;
}
.pricing-card-features li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--black);
}
.pricing-card-features .check {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.25rem;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--black);
  flex-shrink: 0;
}
.pricing-card-cta {
  display: block;
}

@media (min-width: 768px) {
  .hero {
    padding-inline: 4rem;
  }
}
@media (min-width: 1024px) {
  .hero-grid {
    flex-direction: row;
  }
  .hero-headline {
    font-size: 4.5rem;
  }
  .pricing-card {
    width: 20rem;
  }
}

/* ============================================================
   Services
   ============================================================ */
.services {
  background: var(--gray-50);
  padding: 5rem 1.5rem;
}
.services-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.service-item {
  border-left: 4px solid var(--gold);
  padding-left: 1.25rem;
}
.service-name {
  font-weight: 600;
  color: var(--navy);
  font-size: 1.125rem;
}
.service-desc {
  color: var(--gray-500);
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.625;
}

/* ============================================================
   How we help
   ============================================================ */
.how {
  padding: 5rem 1.5rem;
}
.how-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.how-icon {
  display: block;
  width: 2rem;
  height: 2rem;
  color: var(--gold); /* matches the .btn-gold button color */
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}
.how-label {
  font-weight: 700;
  color: var(--navy);
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}
.how-desc {
  color: var(--gray-500);
  font-size: 0.875rem;
  line-height: 1.625;
}

/* ============================================================
   Pricing section (hidden by default — matches original)
   ============================================================ */
.pricing-section {
  padding: 5rem 1.5rem;
}
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.plan {
  border: 1px solid var(--gray-200);
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  background: var(--white);
  color: var(--navy);
}
.plan-highlight {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}
.plan-badge {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #bfdbfe;
  margin-bottom: 0.75rem;
}
.plan-name {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
}
.plan-amount {
  font-size: 1.875rem;
  font-weight: 700;
}
.plan-period {
  font-size: 0.875rem;
  color: var(--gray-400);
}
.plan-highlight .plan-period {
  color: #bfdbfe;
}
.plan-features {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 2rem;
  flex: 1;
}
.plan-features li {
  font-size: 0.875rem;
  color: var(--gray-600);
}
.plan-highlight .plan-features li {
  color: #dbeafe;
}
.plan-features li::before {
  content: "\2022";
  margin-right: 0.5rem;
}
.plan-cta {
  background: var(--blue);
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.625rem 1rem;
  border-radius: 0.25rem;
}
.plan-cta:hover {
  background: #1d4ed8;
}
.plan-highlight .plan-cta {
  background: var(--white);
  color: var(--blue);
}
.plan-highlight .plan-cta:hover {
  background: #eff6ff;
}

/* ============================================================
   Hardware / Software feature cards
   ============================================================ */
.hardware {
  padding: 5rem 1.5rem;
}
.software {
  background: var(--gray-50);
  padding: 5rem 1.5rem;
}
.cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.feature-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.feature-icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--gold); /* matches the .btn-gold button color */
}
.feature-name {
  font-weight: 600;
  color: var(--navy);
}
.feature-product {
  font-size: 0.75rem;
  color: var(--gray-400);
  font-weight: 500;
}
.feature-desc {
  font-size: 0.875rem;
  color: var(--gray-500);
  line-height: 1.625;
}
.feature-tag {
  font-size: 0.75rem;
  color: var(--blue);
  font-weight: 500;
}

/* ============================================================
   Contact (FAQ + form)
   ============================================================ */
.contact {
  padding-block: 0;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  padding-block: 5rem;
}

/* FAQ */
.faq .block-title {
  margin-bottom: 2rem;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.faq-item {
  border-bottom: 1px solid var(--gray-200);
  padding-bottom: 1rem;
}
.faq-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.faq-q span {
  font-weight: 500;
  color: var(--navy);
  font-size: 0.875rem;
}
.faq-chevron {
  width: 1rem;
  height: 1rem;
  color: var(--gray-400);
  margin-top: 0.125rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.faq-q[aria-expanded="true"] .faq-chevron {
  transform: rotate(180deg);
}
.faq-a {
  font-size: 0.875rem;
  color: var(--gray-500);
  margin-top: 0.75rem;
  line-height: 1.625;
}

/* Contact form */
.contact-intro {
  font-size: 0.875rem;
  color: var(--gray-500);
  margin: 0.5rem 0 2rem;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.field {
  border: 1px solid var(--gray-200);
  border-radius: 0.25rem;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  color: var(--gray-700);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease;
  width: 100%;
}
.field:focus {
  border-color: var(--blue);
}
.field-textarea {
  resize: none;
}
.field::placeholder {
  color: var(--gray-400);
}
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.btn-submit {
  align-self: flex-start;
  font-size: 0.875rem;
  padding: 0.625rem 1.5rem;
  border-radius: 0.25rem;
}
.btn-submit:disabled {
  opacity: 0.6;
  cursor: default;
}
.form-error {
  color: #ef4444;
  font-size: 0.75rem;
}
.form-success {
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  color: #166534;
  border-radius: 0.25rem;
  padding: 1rem;
  font-size: 0.875rem;
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  border-top: 1px solid var(--gray-100);
  padding: 2rem 1.5rem;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.875rem;
  color: var(--gray-500);
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--navy);
}
.footer-logo {
  height: 1.25rem; /* 20px — matches the original icon size in the footer */
  width: auto;
  display: block;
  flex-shrink: 0;
}
.footer-contacts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.footer-contacts a {
  transition: color 0.15s ease;
}
.footer-contacts a:hover {
  color: var(--blue);
}

/* ---------- Responsive grids ---------- */
@media (min-width: 640px) {
  .how-grid,
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-contacts {
    flex-direction: row;
  }
}
@media (min-width: 768px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .how-grid,
  .cards-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-inner {
    flex-direction: row;
  }
}

/* ---------- Larger, more readable type on phones ---------- */
@media (max-width: 767px) {
  /* Hero */
  .hero-benefits span { font-size: 1.0625rem; line-height: 1.5; }
  .hero-tags { font-size: 1rem; }

  /* Hero pricing card */
  .pricing-card-badge span { font-size: 0.9375rem; }
  .pricing-card-features li { font-size: 1rem; }

  /* Services */
  .service-name { font-size: 1.1875rem; }
  .service-desc { font-size: 1rem; }

  /* How we help */
  .how-label { font-size: 1.1875rem; }
  .how-desc { font-size: 1rem; }

  /* Section intros */
  .section-sub { font-size: 1.0625rem; }

  /* Hardware / Software cards */
  .feature-desc { font-size: 1rem; }
  .feature-product { font-size: 0.875rem; }
  .feature-tag { font-size: 0.875rem; }

  /* FAQ */
  .faq-q span { font-size: 1rem; }
  .faq-a { font-size: 1rem; }

  /* Contact form */
  .contact-intro { font-size: 1rem; }
  .field { font-size: 1rem; } /* 16px also prevents iOS zoom-on-focus */
  .btn-submit { font-size: 1rem; }

  /* Mobile nav menu */
  .nav-mobile-link { font-size: 1rem; }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
}

/* Two-package pricing grid. The base .pricing-grid is built for three cards,
   which leaves two sitting lopsided against the left edge. */
@media (min-width: 768px) {
  .pricing-grid-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 44rem;
    margin-inline: auto;
  }
}

/* .pricing-card is pinned to 20rem on large screens for its slot in the hero.
   Inside the pricing grid it should fill its column instead. */
.pricing-grid-2 .pricing-card {
  width: 100%;
}

/* The 1.25rem gap before the feature list lives on .pricing-card-subprice, so
   cards without that line (Full SRA & Remediation, SRA Only) had their
   features butting straight against the price. The adjacent-sibling selector
   only matches when no subprice sits between them, so the hero card - which
   has one - keeps its existing spacing rather than getting it twice. */
.pricing-card-price + .pricing-card-features {
  margin-top: 1.25rem;
}

/* Card names here wrap to two lines, unlike the hero's, so tighten the leading
   and give the price room to breathe. */
.pricing-card-name {
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

/* Feature rows centre their tick against the whole item, which is invisible
   while labels fit on one line. The longer SRA labels wrap to two, leaving the
   tick floating between them instead of reading as a bullet for the first
   line. Align to the top and nudge down to sit on the first line's centre. */
.pricing-card-features li {
  align-items: flex-start;
}
.pricing-card-features .check {
  margin-top: 0.125rem;
}

/* Side by side, "Full SRA & Remediation" wraps to two lines while "SRA Only"
   fits on one, so everything below it - price, ticks, button - sat a line
   higher on the right card. Reserve two lines for the name so both cards line
   up. Scoped to the two-column breakpoint: stacked on mobile there is nothing
   to align, and the reserved space would just be a gap.
   1.5rem font x 1.2 leading = 1.8rem per line. */
@media (min-width: 768px) {
  .pricing-grid-2 .pricing-card-name {
    min-height: 3.6rem;
  }
}

/* ---------- Hero headline pair ----------
   The hero is now a large marketing line above an H1 carrying the location
   copy. Defined here rather than in a <style> block inside the page body, and
   placed last so they also beat the template's 1024px .hero-headline bump,
   which was written for when the H1 was the big headline.
   -------------------------------------------------------------------- */
.hero-top-cta {
  /* Scales rather than a fixed size, which overflowed narrow phones.
     Floor stays modest so the line does not swamp small screens. */
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--navy);
  /* Was 38px, which read as two unrelated blocks rather than one heading. */
  margin: 0 0 0.5rem;
}

.hero-headline {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--gray-600);
  margin-bottom: 1.75rem;
  max-width: 40ch;
}