/* ==========================================================================
   Pay Balance Pro — Phase 1 static site
   Classic professional, blue-led palette with modern touches.
   ========================================================================== */

:root {
  --navy: #12304e;
  --navy-deep: #0b2239;
  --blue: #2f7fd3;
  --blue-dark: #1f5fa8;
  --blue-soft: #e8f1fa;
  --cta: #e02424;
  --cta-dark: #b91c1c;
  --ink: #1d2b3a;
  --muted: #56677a;
  --bg: #fbfcfe;
  --surface: #ffffff;
  --line: #dde6ef;
  --radius: 12px;
  --shadow: 0 6px 24px rgba(18, 48, 78, 0.08);
  --font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

.container { width: min(1120px, 92%); margin-inline: auto; }
.container.narrow { max-width: 780px; }

h1, h2, h3, h4 { font-family: var(--font-head); color: var(--navy); line-height: 1.2; }
h1 { font-size: clamp(2.1rem, 4.5vw, 3.3rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 600; margin-bottom: 0.75rem; }
h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.4rem; }

p + p { margin-top: 0.9rem; }

a { color: var(--blue-dark); }

.eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.6rem;
}
.eyebrow.light { color: #9cc4ee; }

.section-lede { max-width: 62ch; color: var(--muted); margin-bottom: 2rem; }

.mt { margin-top: 1.5rem; }
.fine { font-size: 0.85rem; color: var(--muted); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-weight: 600;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--cta); color: #fff; }
.btn-primary:hover { background: var(--cta-dark); }

.btn-ghost { color: var(--navy); border-color: var(--line); background: var(--surface); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue-dark); }

.btn-outline { color: var(--blue-dark); border-color: var(--blue); background: transparent; }
.btn-outline:hover { background: var(--blue-soft); }

.btn-sm { padding: 0.5rem 1.05rem; font-size: 0.92rem; }
.btn-lg { padding: 0.9rem 2rem; font-size: 1.08rem; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-top: 4px solid var(--blue);
  border-bottom: 1px solid var(--line);
}

/* Client Dashboard: circular icon button, always visible (outside the collapsing nav) */
.login-btn {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--blue);
  background: var(--blue-soft);
  color: var(--blue-dark);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.login-btn:hover { background: var(--blue); color: #fff; }
.login-btn svg { width: 19px; height: 19px; }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
}

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

.brand-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 9px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: 0.03em;
  line-height: 1;
}

/* The mark is an SVG set in Fraunces 600 (same face as the wordmark).
   Font sizes are derived from measured glyph widths so PB and PRO share the
   same ink width with 6px padding on every side; textLength is only a
   hairline safety net against optical-size width drift. */
.brand-mark svg { width: 100%; height: 100%; display: block; }

.brand-name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--navy);
}
.brand-name em { font-style: normal; color: var(--blue); }

.brand-name .tm {
  font-family: var(--font-body);
  font-size: 0.78em;
  font-weight: 600;
  line-height: 0;
  margin-left: 2px;
}

.site-nav { display: flex; align-items: center; gap: 1.4rem; }
.site-nav a:not(.btn) {
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.95rem;
}
.site-nav a:not(.btn):hover { color: var(--blue-dark); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--navy); transition: transform 0.2s ease, opacity 0.2s ease; }

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

/* Each page sets its own photo via inline style="background-image: url(...)".
   The navy scrim lives on ::before so the photo layer stays a plain,
   document-relative background. */
.hero {
  position: relative;
  background-color: var(--navy-deep);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--line);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(11, 34, 57, 0.93) 0%, rgba(11, 34, 57, 0.82) 42%, rgba(11, 34, 57, 0.45) 68%, rgba(11, 34, 57, 0.25) 100%);
}

.hero .eyebrow { color: #9cc4ee; }
.hero h1 { color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); }
.hero h1 .accent { color: #7db8ec; }
.hero .lede { color: #d7e3ef; }
.hero .hero-note { color: #b6c9dc; }
.hero .photo-credit, .hero .photo-credit a { color: #7f99b3; }
.hero .btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.hero .btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); color: #fff; }

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3rem;
  align-items: center;
  padding: 4.5rem 0 4rem;
}

.hero h1 .accent { color: var(--blue); }

.lede { font-size: 1.15rem; color: var(--muted); margin: 1.1rem 0 1.6rem; max-width: 54ch; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }

.hero-note { margin-top: 1.2rem; font-size: 0.9rem; color: var(--muted); }

.hero-visual { display: none; }

.panel-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  max-width: 360px;
  margin-inline: auto;
}

.panel-row {
  display: flex;
  justify-content: space-between;
  padding: 0.65rem 0;
  border-bottom: 1px dashed var(--line);
  font-size: 0.95rem;
  color: var(--muted);
}

.panel-row .check { color: var(--blue); font-weight: 700; }

.panel-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
  padding-top: 0.9rem;
  font-size: 1rem;
}
.panel-total strong { font-family: var(--font-head); font-size: 1.35rem; color: var(--blue); }

/* ---------- Photos ---------- */

.photo-credit { font-size: 0.72rem; color: var(--muted); margin-top: 0.5rem; }
.photo-credit a { color: var(--muted); }

.img-feature {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 1.2rem;
}

/* Desktop: show the floating checklist card in the hero's right column */
@media (min-width: 901px) {
  .hero-visual {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .hero-visual .panel-card { max-width: 340px; padding: 1.5rem; margin: 0; }
}

/* ---------- Certification strip ---------- */

.cert-strip { background: var(--blue); color: #fff; }

.cert-inner { padding: 1.6rem 0; text-align: center; }

.cert-heading {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #dcebfa;
  margin-bottom: 0.8rem;
}

.cert-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2.4rem;
}

.cert-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-head);
  font-size: 0.98rem;
}

.cert-list img { width: 56px; height: 56px; }

/* ---------- Sections ---------- */

.section { padding: 4.5rem 0; }

/* Faint ledger-paper grid over the tinted sections */
.section-tint {
  background-color: var(--blue-soft);
  background-image:
    repeating-linear-gradient(0deg, rgba(18, 48, 78, 0.03) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(18, 48, 78, 0.03) 0 1px, transparent 1px 28px);
}

.section-dark {
  background-color: var(--navy-deep);
  background-image: radial-gradient(ellipse 60% 50% at 85% 0%, rgba(47, 127, 211, 0.16), transparent 70%);
  color: #dbe7f3;
}
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark .section-lede { color: #b6c9dc; }
.section-dark a { color: #9cc4ee; }
.section-dark a.btn-primary, .section-dark a.contact-chip { color: #fff; }

/* ---------- Cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.3rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow);
}

.card p { color: var(--muted); font-size: 0.97rem; }

/* Homepage hub: two service cards */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.6rem;
}
.hub-card { padding: 2rem; display: flex; flex-direction: column; }
.hub-card .check-list { margin-bottom: 1rem; }
.hub-card .hub-from { color: var(--blue); font-weight: 700; margin-top: auto; margin-bottom: 1rem; }
.hub-card .btn { align-self: flex-start; }
.faq-more { margin-top: 1.4rem; color: var(--muted); }

.card-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  margin-bottom: 0.9rem;
}
.card-icon svg { width: 28px; height: 28px; }

/* ---------- Why section ---------- */

.why-list { margin: 1.2rem 0 1.6rem 1.3rem; }
.why-list li { padding: 0.25rem 0; }

.pull-quote {
  font-family: var(--font-head);
  font-size: 1.3rem;
  color: #fff;
  border-left: 3px solid var(--blue);
  padding-left: 1.1rem;
  margin: 1.6rem 0;
}

/* ---------- Pricing ---------- */

.pricing-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: -1rem 0 2rem;
}
.pricing-badge span {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--blue-dark);
  background: var(--blue-soft);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 0.25rem 0.85rem;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.3rem;
  align-items: stretch;
}

.price-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem 1.6rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.price-card.featured { border: 2px solid var(--blue); position: relative; }

.flag {
  position: absolute;
  top: -0.8rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blue);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.9rem;
  border-radius: 99px;
  white-space: nowrap;
}

.price { margin: 0.4rem 0 0.6rem; color: var(--muted); }
.price .amount {
  font-family: var(--font-head);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--blue);
}

.price-fit { font-size: 0.9rem; color: var(--muted); min-height: 3.2em; }

.price-card ul { list-style: none; margin: 1rem 0 1.5rem; flex-grow: 1; }
.price-card ul li { padding: 0.4rem 0 0.4rem 1.5rem; position: relative; font-size: 0.97rem; }
.price-card ul li::before { content: "✓"; position: absolute; left: 0; color: var(--blue); font-weight: 700; }

.pricing-note { margin-top: 1.3rem; font-size: 0.92rem; color: var(--muted); text-align: center; }

.sub-pricing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.3rem;
  margin-top: 2.5rem;
}

.sub-pricing.single { grid-template-columns: 1fr; }

/* grid children may not shrink below content width without this */
.sub-pricing > *, .split > *, .pricing-grid > * { min-width: 0; }

.sub-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow);
}

/* Card headings: full-length blue underline (pricing sub-blocks, cleanup cards) */
.sub-block > h3,
.cleanup-pricing > h3 {
  color: var(--blue);
  width: fit-content;
  padding-bottom: 0.45rem;
  border-bottom: 2px solid var(--blue);
  margin-bottom: 0.8rem;
}

.sub-lede { font-size: 0.93rem; color: var(--muted); margin-bottom: 0.5rem; }

.mini-price { padding: 0.8rem 0; border-bottom: 1px dashed var(--line); }
.mini-price:last-child { border-bottom: 0; }
.mini-price h4 { font-family: var(--font-body); font-size: 1rem; color: var(--navy); }
.mini-price p { font-size: 0.9rem; color: var(--muted); }

.addon-list { list-style: none; }
.addon-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--line);
  font-size: 0.97rem;
}
.addon-list li:last-child { border-bottom: 0; }
.addon-list li span:last-child { font-weight: 600; color: var(--navy); text-align: right; }

/* ---------- Cleanup ---------- */

.split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2.5rem;
  align-items: start;
}

.check-list { list-style: none; margin-top: 0.6rem; }
.check-list li { padding: 0.4rem 0 0.4rem 1.6rem; position: relative; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--blue); font-weight: 700; }

.cleanup-pricing {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.7rem;
  box-shadow: var(--shadow);
}
.cleanup-pricing .btn { margin-top: 1.2rem; }
.cleanup-pricing p { font-size: 0.95rem; color: var(--muted); }
.range-heading {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.2rem 0 0.3rem;
}
.cleanup-pricing .fine { margin-top: 0.9rem; }

/* ---------- Steps ---------- */

#how-it-works { background: var(--blue); }
#how-it-works .eyebrow { color: #eaf3fc; }
#how-it-works h2 { color: #fff; }

.steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.3rem;
  margin-top: 2rem;
}

.steps li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow);
}

.step-num {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.8rem;
}

.steps p { font-size: 0.95rem; color: var(--muted); }

/* ---------- About ---------- */

.about-photo { display: flex; justify-content: center; }

.photo-placeholder {
  width: min(320px, 100%);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  background: linear-gradient(150deg, var(--navy) 0%, var(--blue-dark) 100%);
  color: rgba(255, 255, 255, 0.85);
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 4rem;
  font-weight: 700;
  box-shadow: var(--shadow);
}

.mission {
  margin-top: 1.3rem;
  background: var(--surface);
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1.3rem;
  font-size: 0.98rem;
}

/* ---------- FAQ ---------- */

.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 0.8rem;
  box-shadow: var(--shadow);
}

.faq-item summary {
  cursor: pointer;
  padding: 1.1rem 1.3rem;
  font-weight: 600;
  color: var(--navy);
  list-style: none;
  position: relative;
  padding-right: 3rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 1.3rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--blue);
  transition: transform 0.15s ease;
}
.faq-item[open] summary::after { content: "–"; }

.faq-item p { padding: 0 1.3rem 1.2rem; color: var(--muted); }

/* ---------- Contact form ---------- */

#contact-form { margin-top: 1rem; }

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

.form-field { margin-bottom: 1rem; }

.form-field label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: #cfe0f0;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid #3b5975;
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

/* Honeypot — visually removed, still in the DOM for bots */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status { margin-top: 1rem; font-weight: 600; min-height: 1.5em; }
.form-status.ok,
.form-status.error {
  padding: 0.9rem 1.15rem;
  border-radius: 10px;
  font-size: 1.02rem;
}
.form-status.ok {
  background: rgba(52, 168, 105, 0.2);
  border: 1px solid #4caf7d;
  color: #a5ecc5;
}
.form-status.error {
  background: rgba(224, 145, 47, 0.16);
  border: 1px solid #e0912f;
  color: #f5c98a;
}

.contact-alt { margin-top: 2.2rem; text-align: center; color: #b6c9dc; }

.contact-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 0.9rem;
}

.contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 99px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.contact-chip:hover { border-color: var(--blue); background: rgba(47, 127, 211, 0.3); }
.contact-chip svg { width: 17px; height: 17px; flex-shrink: 0; }

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

.site-footer {
  background: #06121f; /* one step deeper than the CTA section so the two separate */
  color: #b6c9dc;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 3rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 2rem 2.5rem;
  padding-bottom: 2.4rem;
}

.site-footer .brand-name { color: #fff; }
/* Same hex as the square reads darker as thin text on navy; lighten to match optically */
.site-footer .brand-name em { color: #5fa0e2; }

.footer-brand p {
  font-size: 0.9rem;
  color: #8aa2ba;
  margin: 0.9rem 0 0.6rem;
  max-width: 30ch;
}

.footer-email {
  display: block;
  width: fit-content;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.1rem 0;
}
.footer-email:hover { color: #9cc4ee; }
.footer-login {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  margin-top: 0.8rem;
  padding: 0.55rem 1.15rem;
  background: var(--blue);
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background 0.15s ease;
}
.footer-login:hover { background: #4b93e0; }
.footer-login svg { width: 15px; height: 15px; }

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 0.8rem;
}

.footer-col a {
  display: block;
  color: #b6c9dc;
  text-decoration: none;
  font-size: 0.93rem;
  padding: 0.26rem 0;
}
.footer-col a:hover { color: #fff; }

.footer-social a { display: flex; align-items: center; gap: 0.5rem; }
.footer-social svg { width: 18px; height: 18px; flex-shrink: 0; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.2rem 0 1.4rem;
  font-size: 0.83rem;
  color: #fff;
}
.footer-bottom p { margin: 0; }

@media (max-width: 820px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---------- Industries strip (recyclable banner) ---------- */

.industries-strip {
  background: var(--blue);
  padding: 1.6rem 0;
}

.industries-inner { text-align: center; }

.industries-heading {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #eaf3fc;
  margin-bottom: 0.9rem;
}

.industries-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 0;
}

.industries-list a {
  display: inline-block;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 99px;
  padding: 0.35rem 0.95rem;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.industries-list a:hover { background: rgba(255, 255, 255, 0.16); border-color: #fff; }
.industries-list .current a { background: #fff; border-color: #fff; color: var(--blue-dark); }
.industries-list .more a { border-style: dashed; border-color: rgba(255, 255, 255, 0.5); color: #eaf3fc; }
.industries-list .more a:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* ---------- Back-to-top button ---------- */

.to-top {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 60;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(18, 48, 78, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease, background 0.15s ease;
}
.to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--blue-dark); }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  /* mobile: the theme-color address bar carries the blue accent; skip the header bar */
  .site-header { border-top: 0; }
  .hero-inner { grid-template-columns: 1fr; padding: 3rem 0; }
  .hero::before { background: linear-gradient(180deg, rgba(11, 34, 57, 0.74) 0%, rgba(11, 34, 57, 0.5) 100%); }
  .split { grid-template-columns: 1fr; }
  .sub-pricing { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .nav-toggle { display: flex; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 0.5rem 0 1rem;
  }
  .site-nav.open { display: flex; }
  .site-nav a:not(.btn) { padding: 0.8rem 6%; }
  .site-nav .btn { margin: 0.6rem 6% 0; text-align: center; }

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

  /* Mobile type scale: 18px body, nothing that sells sits under 16px,
     supporting text no smaller than 15px. Only captions/credits stay small. */
  body { font-size: 1.125rem; }
  .card p,
  .cert-list li,
  .price-card ul li,
  .addon-list li,
  .steps p,
  .panel-row,
  .cleanup-pricing p,
  .mission,
  .site-nav a:not(.btn),
  .contact-chip,
  .footer-col a { font-size: 1rem; }
  .hero-note,
  .price-fit,
  .pricing-note,
  .sub-lede,
  .mini-price p,
  .form-field label,
  .fine,
  .footer-brand p,
  .footer-email,
  .footer-login,
  .footer-col h4,
  .industries-list a { font-size: 0.94rem; }
  .footer-bottom { font-size: 0.88rem; }
}