/* ===========================================================
   Pricing Defense — shared site styles
   =========================================================== */

:root{
  --ink:        #12131a;
  --ink-soft:   #4a4d5a;
  --ink-faint:  #85889a;
  --bg:         #ffffff;
  --bg-soft:    #f6f7fb;
  --bg-card:    #ffffff;
  --line:       #e6e8f0;
  --brand:      #3b3fe0;
  --brand-dark: #2a2db3;
  --brand-soft: #eef0ff;
  --good:       #16824f;
  --good-soft:  #e9f8f0;
  --bad:        #c22a2a;
  --bad-soft:   #fdecec;
  --warn:       #a6650c;
  --warn-soft:  #fff4e0;
  --shadow:     0 1px 2px rgba(18,19,26,.04), 0 8px 24px rgba(18,19,26,.06);
  --shadow-lg:  0 12px 32px rgba(18,19,26,.10), 0 2px 8px rgba(18,19,26,.06);
  --radius:     14px;
  --radius-sm:  9px;
  --maxw:       1140px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
body{
  margin:0;
  overflow-x: hidden;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; line-height:1.15; letter-spacing:-0.02em; }
p{ margin:0; }
button{ font-family:inherit; }

.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height: 72px;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px; letter-spacing:-0.01em; }
.brand__mark{
  width:32px; height:32px; border-radius:9px;
  background: linear-gradient(145deg, var(--brand), var(--brand-dark));
  display:flex; align-items:center; justify-content:center;
  color:#fff; flex-shrink:0;
  box-shadow: 0 4px 10px rgba(59,63,224,.35);
}
.brand__mark svg{ width:19px; height:19px; }
.nav{ display:flex; align-items:center; gap:32px; }
.nav a{
  font-size:14.5px; font-weight:600; color: var(--ink-soft);
  transition: color .15s;
}
.nav a:hover{ color: var(--ink); }
.nav a.is-active{ color: var(--brand); }
.header-cta{ display:flex; align-items:center; gap:10px; }

/* ---------- Mobile nav toggle + panel ---------- */
.nav-toggle{
  display:none;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:40px; height:40px; padding:0;
  background:transparent; border:1.5px solid var(--line); border-radius:9px;
  cursor:pointer; flex-shrink:0;
}
.nav-toggle__bar{
  display:block; width:18px; height:2px; background: var(--ink); border-radius:2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-nav{
  display:none;
  max-height:0;
  overflow:hidden;
  background:#fff;
  border-top: 1px solid var(--line);
  transition: max-height .25s ease;
}
.mobile-nav.is-open{ max-height:520px; }
.mobile-nav__links{ display:flex; flex-direction:column; padding: 8px 24px; }
.mobile-nav__links a{
  padding: 14px 0; font-size:16px; font-weight:600; color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.mobile-nav__links a:last-child{ border-bottom:none; }
.mobile-nav__links a.is-active{ color: var(--brand); }
.mobile-nav__cta{ display:flex; flex-direction:column; gap:10px; padding: 16px 24px 24px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14.5px; font-weight: 700;
  border: 1.5px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn--primary{
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow);
}
.btn--primary:hover{ background: var(--brand-dark); transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn--ghost{
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover{ border-color: var(--ink); }
.btn--sm{ padding: 9px 16px; font-size: 13.5px; }
.btn--block{ width:100%; }
.btn--onbrand{ background:#fff; color: var(--brand-dark); }
.btn--onbrand:hover{ background:#fff; transform: translateY(-1px); box-shadow: var(--shadow-lg); }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  padding: 96px 0 80px;
  overflow: hidden;
  background:
    radial-gradient(600px 300px at 15% -10%, #e7e8ff 0%, transparent 60%),
    radial-gradient(500px 260px at 100% 0%, #eafaf1 0%, transparent 55%),
    var(--bg);
}
.hero .wrap{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items:center; }
.hero .wrap > *{ min-width: 0; }
.eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  padding: 6px 14px 6px 10px;
  background: var(--brand-soft); color: var(--brand-dark);
  border-radius: 999px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .01em;
  margin-bottom: 20px;
}
.eyebrow__dot{ width:6px; height:6px; border-radius:50%; background: var(--brand-dark); }
.hero h1{ font-size: 48px; font-weight: 800; max-width: 620px; }
.hero h1 em{ font-style:normal; color: var(--brand-dark); }
.hero__sub{
  margin-top: 20px;
  font-size: 17.5px; color: var(--ink-soft);
  max-width: 520px;
}
.hero__ctas{ display:flex; align-items:center; gap:14px; margin-top: 32px; flex-wrap:wrap; }
.hero__note{ margin-top:16px; font-size: 13px; color: var(--ink-faint); }
.hero__note strong{ color: var(--ink-soft); }

/* Hero visual: mock violation table */
.hero-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: rotate(0.4deg);
}
.hero-card__bar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 18px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.hero-card__title{ font-size: 13px; font-weight: 700; }
.hero-card__badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size: 11.5px; font-weight:700; color: var(--bad);
  background: var(--bad-soft); padding: 4px 10px; border-radius: 999px;
}
.hero-card__badge i{ width:6px; height:6px; border-radius:50%; background: var(--bad); }
.hero-row{
  display:grid; grid-template-columns: 1fr 84px 84px 90px;
  gap: 10px; align-items:center;
  padding: 13px 18px;
  border-bottom: 1px solid #f0f1f6;
  font-size: 13px;
}
.hero-row:last-child{ border-bottom:none; }
.hero-row__name{ font-weight:600; }
.hero-row__sku{ font-size:11px; color: var(--ink-faint); margin-top:1px; }
.hero-row__num{ text-align:right; font-variant-numeric: tabular-nums; }
.hero-row__num--map{ color: var(--good); font-weight:700; }
.hero-row__num--bad{ color: var(--bad); font-weight:700; text-decoration: line-through; text-decoration-color: rgba(194,42,42,.4); }
.hero-row__pill{
  justify-self:end;
  font-size:10.5px; font-weight:800; padding: 3px 8px; border-radius: 999px;
}
.hero-row__pill--over{ background: var(--warn-soft); color: var(--warn); }
.hero-row__pill--under{ background: var(--bad-soft); color: var(--bad); }
.hero-row__pill--ok{ background: var(--good-soft); color: var(--good); }
.hero-card__footer{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 18px; background: var(--bg-soft); border-top: 1px solid var(--line);
}
.hero-card__footer-text{ font-size: 12.5px; color: var(--ink-soft); font-weight:600; }
.mini-btn{
  font-size: 12px; font-weight: 700; color:#fff; background: var(--ink);
  padding: 7px 14px; border-radius: 8px;
}

/* ---------- Logo / trust strip ---------- */
.trust{ padding: 36px 0; border-bottom: 1px solid var(--line); }
.trust__label{
  text-align:center; font-size: 12px; font-weight:700; letter-spacing:.08em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 22px;
}
.trust__row{
  display:flex; align-items:center; justify-content:center; gap: 48px; flex-wrap:wrap;
  color: var(--ink-faint); font-weight: 700; font-size: 15px; letter-spacing: -0.01em;
  opacity:.75;
}

/* ---------- Section shells ---------- */
.section{ padding: 88px 0; }
.section--soft{ background: var(--bg-soft); }
.section--tight{ padding: 64px 0; }
.section-head{ max-width: 640px; margin: 0 auto 52px; text-align:center; }
.section-head h2{ font-size: 34px; font-weight: 800; }
.section-head p{ margin-top: 14px; font-size: 16.5px; color: var(--ink-soft); }
.kicker{
  display:block; font-size: 12.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand-dark); margin-bottom: 12px;
}

/* ---------- Feature grid ---------- */
.grid3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid2{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.card{
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: #d8dbf5; }
.card__icon{
  width: 44px; height:44px; border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: var(--brand-soft); color: var(--brand-dark);
  font-size: 20px; margin-bottom: 18px;
}
.card h3{ font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.card p{ font-size: 14.5px; color: var(--ink-soft); }

/* ---------- How it works / steps ---------- */
.steps{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: step; }
.step{ position:relative; padding-left: 4px; }
.step__num{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius: 50%;
  background: var(--ink); color:#fff; font-weight:800; font-size:14px;
  margin-bottom: 18px;
}
.step h3{ font-size: 16.5px; font-weight:700; margin-bottom:8px; }
.step p{ font-size: 14px; color: var(--ink-soft); }

/* ---------- Big stat / CTA banner ---------- */
.banner{
  border-radius: 20px;
  padding: 56px 48px;
  background: linear-gradient(135deg, var(--ink) 0%, #24265e 100%);
  color: #fff;
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  flex-wrap: wrap;
}
.banner h2{ font-size: 28px; font-weight:800; max-width: 480px; }
.banner p{ margin-top:10px; color: #c7c9e6; font-size: 15px; max-width: 440px; }
.banner__ctas{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- Stat row ---------- */
.stats{ display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.stat{ text-align:center; padding: 20px 10px; }
.stat__num{ font-size: 34px; font-weight:800; color: var(--ink); }
.stat__label{ margin-top: 6px; font-size: 13px; color: var(--ink-faint); font-weight:600; }

/* ---------- Testimonial ---------- */
.quote{
  background: var(--bg-card); border:1px solid var(--line); border-radius: var(--radius);
  padding: 36px 40px; position:relative;
}
.quote__mark{ font-size: 46px; color: var(--brand-soft); font-weight:900; line-height:0; position:absolute; top:30px; left:28px; }
.quote p{ font-size: 19px; line-height:1.5; font-weight:600; color: var(--ink); position:relative; z-index:1; }
.quote__who{ margin-top: 20px; display:flex; align-items:center; gap:12px; }
.quote__avatar{
  width:40px; height:40px; border-radius:50%; background: var(--brand-soft); color:var(--brand-dark);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px;
}
.quote__name{ font-size: 14px; font-weight:700; }
.quote__role{ font-size: 12.5px; color: var(--ink-faint); }

/* ---------- FAQ ---------- */
.faq{ max-width: 760px; margin: 0 auto; }
.faq-item{ border-bottom: 1px solid var(--line); padding: 22px 0; }
.faq-item summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;
  font-size: 16px; font-weight: 700;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content: "+"; font-size: 22px; font-weight:400; color: var(--ink-faint); margin-left: 16px; flex-shrink:0;
  transition: transform .2s;
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item p{ margin-top: 12px; font-size: 14.5px; color: var(--ink-soft); max-width: 640px; }

/* ---------- Pricing ---------- */
.pricing-toggle{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin: 0 auto 44px;
}
.pricing-note{
  text-align:center; margin-bottom: 40px; color: var(--ink-soft); font-size: 14.5px;
}
.pricing-grid{
  display:grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
  align-items: stretch;
}
.plan{
  background:#fff; border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 26px 20px; display:flex; flex-direction:column;
  position:relative;
  transition: transform .15s ease, box-shadow .15s ease;
}
.plan:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.plan--popular{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft), var(--shadow-lg);
}
.plan__badge{
  position:absolute; top:-13px; left:50%; transform: translateX(-50%);
  background: var(--brand); color:#fff; font-size: 10.5px; font-weight:800;
  padding: 5px 12px; border-radius: 999px; white-space:nowrap;
  box-shadow: 0 4px 10px rgba(59,63,224,.35);
}
.plan__name{ font-size: 14.5px; font-weight: 800; text-transform:uppercase; letter-spacing:.03em; color: var(--ink-soft); }
.plan__price{ margin-top: 12px; font-size: 30px; font-weight: 800; line-height:1; }
.plan__price span{ font-size: 13px; font-weight:600; color: var(--ink-faint); }
.plan__trial{ margin-top: 6px; font-size: 12px; color: var(--ink-faint); font-weight:600; }
.plan__limit{
  margin-top: 16px; padding: 10px 12px; background: var(--bg-soft); border-radius: 8px;
  font-size: 12.5px; font-weight:700; color: var(--ink-soft); text-align:center;
}
.plan__features{ margin: 18px 0 22px; display:flex; flex-direction:column; gap:9px; flex:1; }
.plan__features li{ display:flex; align-items:flex-start; gap:8px; font-size: 12.5px; color: var(--ink-soft); }
.plan__features li b{ color: var(--good); flex-shrink:0; }
.plan--enterprise .plan__price{ font-size: 22px; }

/* ---------- Compare table ---------- */
.compare-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare{ width:100%; border-collapse: collapse; font-size: 13.5px; }
.compare th, .compare td{ padding: 14px 16px; text-align:center; border-bottom: 1px solid var(--line); }
.compare th:first-child, .compare td:first-child{ text-align:left; }
.compare thead th{ font-size: 12px; text-transform:uppercase; letter-spacing:.04em; color: var(--ink-faint); font-weight:700; background: var(--bg-soft); }
.compare tbody tr:hover{ background: var(--bg-soft); }
.compare td:first-child{ font-weight:600; color: var(--ink); }
.tick{ color: var(--good); font-weight:800; }
.dash{ color: var(--ink-faint); }

/* ---------- Contact / Demo form ---------- */
.contact-shell{
  display:grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items:flex-start;
}
.contact-info h2{ font-size: 30px; font-weight:800; }
.contact-info p{ margin-top:14px; color: var(--ink-soft); font-size: 15.5px; }
.contact-list{ margin-top: 28px; display:flex; flex-direction:column; gap: 18px; }
.contact-list li{ display:flex; gap:14px; align-items:flex-start; font-size:14px; color: var(--ink-soft); }
.contact-list .ico{
  width:36px; height:36px; border-radius:10px; background: var(--brand-soft); color: var(--brand-dark);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:16px;
}
.contact-list b{ color: var(--ink); display:block; margin-bottom: 2px; font-size: 14px; }

.form-card{
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px; box-shadow: var(--shadow);
}
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field{ margin-bottom: 18px; }
.field label{ display:block; font-size: 13px; font-weight:700; margin-bottom: 7px; }
.field input, .field select, .field textarea{
  width:100%; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 9px;
  font-size: 14px; font-family:inherit; outline:none; transition: border-color .15s;
  background:#fff; color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--brand); }
.field textarea{ resize: vertical; min-height: 96px; }
.field--check{ display:flex; align-items:flex-start; gap:10px; }
.field--check input{ width:auto; margin-top:3px; }
.field--check label{ margin:0; font-size: 13px; font-weight:500; color: var(--ink-soft); }
.form-success{
  display:none; padding: 14px 16px; background: var(--good-soft); color: var(--good);
  border-radius: 9px; font-size: 13.5px; font-weight:700; margin-bottom: 18px;
}
.form-success.is-visible{ display:block; }

/* ---------- App screenshot mock (MAP Field Manager) ---------- */
.appshot{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-width: 920px;
  margin: 0 auto;
}
.appshot__topbar{
  display:flex; align-items:center; gap:10px;
  padding: 14px 20px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.appshot__topbar .brand__mark{ width:28px; height:28px; border-radius:8px; }
.appshot__topbar .brand__mark svg{ width:17px; height:17px; }
.appshot__topbar-name{ font-weight:800; font-size:14.5px; }
.appshot__body{ display:grid; grid-template-columns: 190px 1fr; background: var(--bg-soft); }
.appshot__nav{ padding: 18px 12px; border-right: 1px solid var(--line); }
.appshot__nav-item{
  display:flex; align-items:center; gap:10px;
  padding: 9px 12px; border-radius: 8px;
  font-size: 13px; font-weight:600; color: var(--ink-soft);
  margin-bottom: 3px;
}
.appshot__nav-item svg{ width:16px; height:16px; flex-shrink:0; opacity:.7; }
.appshot__nav-item.is-active{ background:#fff; color: var(--ink); box-shadow: var(--shadow); }
.appshot__nav-item.is-active svg{ opacity:1; color: var(--brand-dark); }
.appshot__nav-label{
  font-size: 10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  color: var(--ink-faint); margin: 16px 12px 8px;
}
.appshot__main{ padding: 22px 24px 26px; }
.appshot__h1{ font-size: 20px; font-weight: 800; margin-bottom: 16px; }
.appshot__stats{ display:grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 18px; }
.appshot__stat{
  background:#fff; border:1px solid var(--line); border-radius:10px; padding: 14px;
}
.appshot__stat--accent{ background: var(--brand-soft); border-color:#c7cbf7; }
.appshot__stat--green{ background: var(--good-soft); border-color:#b7e3c9; }
.sk{ background: linear-gradient(90deg,#e7e9f2,#f1f2f8,#e7e9f2); border-radius:5px; height:9px; }
.sk--lg{ height:12px; width:70%; margin-bottom:8px; }
.sk--sm{ height:8px; width:45%; }
.appshot__toolbar{ display:flex; gap:10px; align-items:center; margin-bottom: 14px; }
.appshot__search{ flex:1; height:34px; background:#fff; border:1px solid var(--line); border-radius:8px; }
.appshot__pill{ height:30px; width:56px; border-radius:999px; background:#fff; border:1px solid var(--line); }
.appshot__pill.is-on{ background: var(--ink); }
.appshot__table{ background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.appshot__thead{
  display:grid; grid-template-columns: 44px 1fr 130px 110px 30px;
  gap:12px; padding: 11px 16px; background: var(--bg-soft);
  font-size: 10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color: var(--ink-faint);
  border-bottom:1px solid var(--line);
}
.appshot__row{
  display:grid; grid-template-columns: 44px 1fr 130px 110px 30px;
  gap:12px; padding: 12px 16px; align-items:center; border-bottom:1px solid #f0f1f6;
}
.appshot__row:last-child{ border-bottom:none; }
.appshot__thumb{ width:32px; height:32px; border-radius:6px; background:#e7e9f2; }
.appshot__badge{ height:22px; border-radius:999px; background:#e7e9f2; }
.appshot__caret{ color: var(--ink-faint); font-size:12px; text-align:right; }
.appshot__aside{ display:none; }

/* ---------- Footer ---------- */
.site-footer{ border-top: 1px solid var(--line); padding: 56px 0 32px; background: var(--bg-soft); }
.footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.footer-brand p{ margin-top: 14px; font-size: 13.5px; color: var(--ink-faint); max-width: 260px; }
.footer-col h4{ font-size: 12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color: var(--ink-faint); margin-bottom: 16px; }
.footer-col ul{ display:flex; flex-direction:column; gap: 11px; }
.footer-col a{ font-size: 14px; color: var(--ink-soft); transition: color .15s; }
.footer-col a:hover{ color: var(--ink); }
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding-top: 28px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-faint);
}

/* ---------- Page hero (sub-pages) ---------- */
.page-hero{ padding: 64px 0 56px; text-align:center; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.page-hero h1{ font-size: 40px; font-weight: 800; }
.page-hero p{ margin: 16px auto 0; max-width: 560px; color: var(--ink-soft); font-size: 16px; }

/* ---------- Utility ---------- */
.mt-8{ margin-top:8px; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; }
.center{ text-align:center; }
.hide-mobile{ }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .nav{ display:none; }
  .header-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .mobile-nav{ display:block; }
  .hero .wrap{ grid-template-columns: 1fr; }
  .hero h1{ font-size: 36px; }
  .grid3, .grid2, .steps{ grid-template-columns: 1fr; }
  .pricing-grid{ grid-template-columns: 1fr 1fr; }
  .compare{ display:block; white-space:nowrap; }
  .compare-scroll{
    position: relative;
    margin: 0 -24px;
    padding: 0 24px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  }
  .contact-shell{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr 1fr; }
  .stats{ grid-template-columns: 1fr 1fr; }
  .banner{ flex-direction:column; align-items:flex-start; }
  .appshot__body{ grid-template-columns: 1fr; }
  .appshot__nav{ display:none; }
  .appshot__stats{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .pricing-grid{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr; }
  .hero h1{ font-size: 30px; }
  .section{ padding: 60px 0; }
  .hero-row{ grid-template-columns: 1fr auto; row-gap:4px; }
  .hero-row__num{ display:none; }
  .hero-row__num--map{ display:block; text-align:right; font-size:12px; }
  .hero-row__pill{ grid-column: 2; grid-row: 1; }
  .appshot__stats{ grid-template-columns: 1fr 1fr; }
  .appshot__thead{ display:none; }
  .appshot__row{ grid-template-columns: 36px 1fr auto; column-gap:10px; row-gap:8px; }
  .appshot__row .appshot__badge{ grid-column: 1 / -1; width:100%; }
  .appshot__caret{ display:none; }
  .quote{ padding: 28px 22px; }
  .quote p{ font-size:17px; }
  .banner{ padding: 36px 28px; }
}