/* /pros, the Verified Pros page, 1.0.7. Built to the approved mockup
 * (worktrees/host-sidebar-mock/mockups-host/pros-verified.html) on top of
 * tokens.css and site.css.
 *
 * It wears the brand palette, as /pricing does, because a Pro is not tied to
 * one audience. The tokens the shared sheets read are redefined on body.pros
 * so the nav, the buttons and the footer follow. No capsules: buttons are
 * 12px. The Pro pill keeps its own capsule, as the badge spec draws it. */

body.pros {
  --ink: #211229;
  --ink-rgb: 33, 18, 41;
  --accent: #5729E0;
  --accent-hover: #4720C2;
  --violet: #8542DB;
  --pink: #DB337D;
  --pink-accent: #B51F60;
  --lavender: #F5F0FC;
  --soft: #FAF7FC;
  --tint: #F5F0FC;
  --ground: #FFFFFF;
  --muted: #555A64;
  --stroke: rgba(0, 0, 0, .06);
  --mark: url('/marks/brand.svg');
  --pros-wash: linear-gradient(135deg, rgba(219, 51, 125, .20), rgba(133, 66, 219, .15), rgba(87, 41, 224, .10));
  --shadow-btn: 0 4px 20px rgba(87, 41, 224, .25);
  --r-btn: 12px;
  --r-band: 22px;
  background: var(--ground);
  color: var(--ink);
}

.pros .btn { border-radius: var(--r-btn); font-size: 16px; min-height: 52px; }
.pros .nav .btn { min-height: 44px; font-size: 15px; }
/* The header keeps an empty middle cell where the landing page has its
   switch; without it the links share the brand's row (as on /pricing). */
.pros .nav > span:empty { display: none; }
.pros .eyebrow { background: none; padding: 0; border-radius: 0; color: var(--pink-accent); letter-spacing: .12em; font-weight: 600; }
.pros .text-link { color: var(--accent); }

.pros-main { max-width: 1120px; margin: 0 auto; padding: 24px var(--gutter) 96px; display: flex; flex-direction: column; gap: 72px; }
.pros-hero { display: flex; flex-direction: column; gap: 16px; padding-top: 24px; }
.pros-hero h1 { font-size: 60px; font-weight: 700; letter-spacing: -0.0235em; line-height: 1.06; max-width: 14ch; margin: 0; }
.pros-hero .lede { font-size: 19px; line-height: 1.5; color: var(--muted); max-width: 52ch; }
.pros-hero .row { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 8px; }

.seals { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; padding: 40px 0; border-top: 1px solid var(--stroke); border-bottom: 1px solid var(--stroke); }
.seals figure { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; }
.seals img { width: 96px; height: 96px; }
.seals figcaption { font-weight: 600; font-size: 15px; }

.pros-rows { display: flex; flex-direction: column; }
/* An anchor on this page lands below the sticky nav, not behind it. The nav is
   72px at 1280 and at 390, so one value covers both: its height plus 16px. */
.pros-main [id] { scroll-margin-top: 88px; }

.p-row { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 32px; padding: 32px 0; border-top: 1px solid var(--stroke); }
.p-row:first-child { border-top: 0; padding-top: 0; }
.p-row h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.0235em; }
.p-row p { font-size: 17px; line-height: 1.5; color: var(--muted); max-width: 54ch; }
.gets { display: flex; flex-direction: column; gap: 20px; list-style: none; margin: 0; padding: 0; }
.gets li { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.gets b { font-size: 17px; }
.gets li > span:not(.pro-pill) { color: var(--muted); font-size: 16px; line-height: 1.5; }
.gets .pro-pill { margin-top: 8px; }
.gets .pro-pill img { width: 22px; height: 22px; }

.pros-end { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 40px; background: var(--pros-wash); border-radius: var(--r-band); }
.pros-end h2 { font-size: 32px; font-weight: 700; letter-spacing: -0.0235em; }

@media (max-width: 860px) {
  .pros-main { gap: 48px; }
  .pros-hero { padding-top: 8px; }
  .pros-hero h1 { font-size: 38px; }
  .seals { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 8px; }
  .seals img { width: 72px; height: 72px; }
  .p-row { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
  .pros-end { padding: 24px; }
  .pros-end .btn { width: 100%; }
}