/* =============================================================================
   The old WordPress theme, measured from www.triaddogfence.com on 2026-10-26 at
   1280px wide (marketing-site.md MS-4). Loaded after site.css, sections.css and
   layout.css; every number here is the old theme's, so when the two sites differ,
   measure the original again rather than adjusting by eye. Colours: tokens.css.
   ========================================================================== */

/* ---- Text --------------------------------------------------------------- */
/* Charcoal comes from --text and the --ink tokens, so white text on photos and coloured
   bands (.on-dark, heroes) still wins without a fight over specificity. */
body { font-size: 17px; line-height: 1.41; color: var(--wp-ink); }
.site-main .prose a:not(.btn), .site-main p a:not(.btn), .site-main li a:not(.btn) {
  color: var(--wp-green); font-weight: 700; text-decoration: none;
}
.site-main .prose a:not(.btn):hover, .site-main p a:not(.btn):hover { text-decoration: underline; }

/* Section headings: Roboto Slab 32/40, product intros and coloured panels 38/48,
   call-to-action bands 28/36. */
.section__title, .split .section__title, .intro__head .section__title {
  font-family: var(--font-slab); font-weight: 900; font-size: 32px; line-height: 40px; margin-bottom: 20px;
}
.intro__head .section__title { font-size: 38px; line-height: 48px; }
.ctaband .section__title { font-size: 28px; line-height: 36px; }
@media (max-width: 700px) {
  .section__title, .split .section__title { font-size: 26px; line-height: 33px; }
  .intro__head .section__title { font-size: 30px; line-height: 38px; }
}

/* ---- Buttons: small bold capitals in a pill ------------------------------- */
.btn, .btn--lg {
  min-height: 42px; padding: 0 30px; border: 0; border-radius: 100px;
  font-size: 14px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; line-height: 1;
}
.btn--mini { min-height: 34px; padding: 0 24px; font-size: 12px; letter-spacing: 1.1px; }
.btn--brand, .btn--accent.btn--green { background: var(--wp-green); color: #fff; }
.btn--brand:hover { background: var(--wp-green-hover); color: #fff; }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-hover); color: #fff; }
.btn--outline { border: 2px solid var(--wp-green); color: var(--wp-green); background: #fff; }
.btn--outline:hover { background: var(--wp-green); color: #fff; }
.btn--light { background: #fff; color: var(--wp-green); }
.btn--light:hover { background: #fff; color: var(--wp-forest); }
.bg-pumpkin-orange .btn--light { color: var(--accent); }
.btn-row { gap: 20px; }
/* Where several buttons sit together inside a text block the old theme used its mini size. */
.split .btn-row:has(.btn + .btn) .btn,
.ctaband .btn-row:has(.btn + .btn) .btn { min-height: 34px; padding: 0 24px; font-size: 12px; letter-spacing: 1.1px; }

/* ---- Phone bar and header ------------------------------------------------- */
.wrap { padding-left: 25px; padding-right: 25px; }
@media (max-width: 700px) { .wrap { padding-left: 16px; padding-right: 16px; } }

.topbar { background: var(--wp-topbar); }
.topbar__inner { display: flex; justify-content: flex-end; align-items: center; min-height: 40px; }
.topbar__phone { font-size: 15px; font-weight: 700; color: var(--wp-ink); }
.topbar__phone a { color: var(--wp-ink); text-decoration: none; }
.topbar__phone a:hover { text-decoration: underline; }

.header { background: #fff; position: sticky; top: 0; z-index: 5; border: 0; }
.header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 100px; gap: 16px; }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-decoration: none; }
.brand__logo { width: 221px; height: auto; }
.brand__sub { font-size: 16px; letter-spacing: -.3px; color: var(--wp-ink); }

/* Narrow screens: the menu opens as a forest-green panel, as the old theme's did. */
.nav--bar { display: none; }
.nav__toggle {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border: 2px solid var(--wp-green); border-radius: 100px;
  color: var(--wp-green); font-size: 14px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase;
}
.nav__toggle::-webkit-details-marker { display: none; }
.nav__bars, .nav__bars::before, .nav__bars::after {
  display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative;
}
.nav__bars::before, .nav__bars::after { content: ""; position: absolute; left: 0; }
.nav__bars::before { top: -6px; }
.nav__bars::after { top: 6px; }
.nav__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: rgb(51 98 0 / .97); color: #fff;
  padding: 16px 25px 28px; max-height: calc(100vh - 140px); overflow-y: auto;
}
.nav__panel a, .nav__panel span { color: #fff; text-decoration: none; }
.nav__panel .nav__group { padding: 10px 0; }
.nav__panel .nav__heading { display: block; font-size: 24px; font-weight: 800; }
.nav__panel .nav__list { padding: 6px 0 0 15px; }
.nav__panel .nav__colhead { display: block; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; margin-top: 10px; opacity: .85; }
.nav__panel .nav__sublist { list-style: none; margin: 4px 0 0; padding: 0; }
.nav__panel .nav__sublist a { display: block; padding: 5px 0; font-size: 17px; }
.nav__panel .nav__cta { margin-top: 18px; background: #fff; color: var(--wp-green); }

/* Wide screens: green capitals, a caret on each dropdown, a panel of columns beneath. */
@media (min-width: 1000px) {
  .nav--drawer { display: none; }
  .nav--bar { display: flex; align-items: center; gap: 25px; }
  .nav--bar .nav__group { position: relative; }
  .nav--bar .nav__heading {
    display: inline-flex; align-items: center; gap: 6px; padding: 30px 0; margin: 0;
    font-size: 14px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    color: var(--wp-green); text-decoration: none; cursor: pointer; border-bottom: 2px solid transparent;
  }
  .nav--bar button.nav__heading { background: none; border-top: 0; border-left: 0; border-right: 0; font-family: inherit; }
  .nav--bar .nav__heading--drop::after {
    content: ""; border-style: solid; border-width: 5px 4.5px 0; border-color: currentColor transparent transparent;
  }
  .nav--bar .nav__group:hover .nav__heading,
  .nav--bar .nav__group:focus-within .nav__heading { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
  .nav--bar .nav__list {
    position: absolute; top: 100%; left: -25px; display: flex; gap: 40px; padding: 12px 25px 40px;
    background: #fff; box-shadow: 0 12px 24px rgb(0 0 0 / .12);
    display: none;
  }
  /* Hidden with display, not visibility: an invisible panel still widens the page. */
  .nav--bar .nav__group:hover .nav__list,
  .nav--bar .nav__group:focus-within .nav__list { display: flex; }
  /* The two widest panels (About, Products: 770-810px) hang from the right end of the menu bar,
     not from their own headings: from the heading they ran past the right edge at every width
     from 1000 to 1400px and hid the training collars (QA 2026-10-31 #12). */
  .nav--bar { position: relative; }
  .nav--bar .nav__group:nth-child(-n+2) { position: static; }
  .nav--bar .nav__group:nth-child(-n+2) .nav__list { left: auto; right: 0; }
  /* An invisible strip over the small gap between heading and panel, so moving the mouse down does not close the menu. */
  .nav--bar .nav__list::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
  /* The right-hand menus open leftwards so their panels stay on screen. */
  .nav--bar .nav__group:nth-last-child(-n+4) .nav__list { left: auto; right: -25px; }
  .nav--bar .nav__column { min-width: 190px; }
  .nav--bar .nav__colhead {
    display: block; margin: 12px 0 8px; font-size: 14px; font-weight: 700; letter-spacing: .3px;
    text-transform: uppercase; color: var(--wp-green); text-decoration: none; white-space: nowrap;
  }
  .nav--bar .nav__sublist { list-style: none; margin: 0; padding: 0; }
  .nav--bar .nav__sublist a {
    display: block; padding: 5px 0; font-size: 16px; font-weight: 900; letter-spacing: .2px;
    color: var(--wp-green); text-decoration: none; white-space: nowrap;
  }
  .nav--bar .nav__sublist a:hover { color: var(--wp-forest); text-decoration: underline; }
  .nav--bar .nav__cta { margin-left: 0; }
}
.ext { font-size: .8em; margin-left: 3px; opacity: .7; }

/* ---- Footer: forest green, link columns left, the dealership right ---------- */
.footer { background: var(--wp-forest); color: #fff; font-size: 14px; }
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { text-decoration: underline; color: #fff; }
.footer p { margin: 0 0 14px; }
.footer__grid { display: grid; gap: 40px; padding-top: 80px; padding-bottom: 80px; }
/* The columns may shrink: at 1000px fixed 540 + 450 + gap is wider than the page (QA 2026-10-31 #2). */
@media (min-width: 1000px) { .footer__grid { grid-template-columns: minmax(0, 540px) minmax(0, 450px); justify-content: space-between; } }
.footer__social { list-style: none; display: flex; gap: 35px; align-items: center; margin: 0 0 40px; padding: 0; }
.footer__social img { height: 19px; width: auto; }
.footer__menu { display: grid; grid-template-columns: repeat(3, minmax(0, 150px)); gap: 36px 40px; }
@media (max-width: 560px) { .footer__menu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.footer__heading { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 900; text-transform: uppercase; color: #fff; }
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: 6px; font-size: 12px; line-height: 1.35; }
.footer__legal { margin-top: 50px; font-size: 12px; }
.footer__tagline { font-size: 18px; font-weight: 900; margin-bottom: 16px !important; }
.footer__name { font-size: 18px; font-weight: 900; margin-bottom: 20px !important; }
.footer__name--gap { margin-top: 44px; }
.footer .btn-row { margin-top: 0; }
.footer .btn--brand { background: var(--wp-green); }

/* ---- Section rhythm ------------------------------------------------------- */
@media (min-width: 900px) {
  .section { padding-top: 110px; padding-bottom: 100px; }
}

/* ---- Heroes: the photo at its own shape, 1280 × 569 (page) or × 711 (home) -- */
/* The old theme put no tint over hero photos; the photos are dark enough on their own. */
.phero:not(.phero--plain)::after, .phero--centre:not(.phero--plain)::after { display: none; }
.phero__content { min-height: 0; padding-top: 48px; padding-bottom: 48px; }
.phero__title { font-size: 66px; line-height: 76px; font-weight: 900; max-width: 995px; }
.phero__title--sub { font-size: 25px; line-height: 33px; font-weight: 700; margin-top: 4px; }
.phero__tagline { font-size: 72px; line-height: 1; max-width: 700px; margin-bottom: 14px; }
.phero__crumb { font-size: 18px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; color: #fff; margin-bottom: 8px; }
.phero__lead { font-size: 25px; line-height: 33px; font-weight: 700; max-width: 995px; margin-top: 10px; }
.phero .btn-row { margin-top: 30px; }
/* The home hero's collar: 462 wide, flush right, 80px over the bottom edge. */
@media (min-width: 900px) {
  .phero__product { right: 0; bottom: -80px; width: min(462px, 36vw); }
  .phero:has(.phero__product) + * { padding-top: 110px; }
}
/* The old header left 21px of white between itself and the page. */
.site-main { margin-top: 21px; }
@media (min-width: 700px) {
  .phero:not(.phero--plain) { aspect-ratio: 1280 / 569; }
  .phero:not(.phero--plain):has(.phero__tagline) { aspect-ratio: 1280 / 711; }
  .phero:not(.phero--plain) .phero__content { height: 100%; }
}
@media (max-width: 699px) {
  .phero__title:not(.phero__title--sub), .phero__tagline { font-size: 40px; line-height: 1.1; }
  .phero__content { min-height: 320px; }
}

/* ---- Image and text halves: 700 tall ---------------------------------------- */
@media (min-width: 900px) {
  .split { min-height: 700px; }
  .split--solo { min-height: 0; }
  .split__inner { padding: 80px 85px; }
}

/* ---- Ribbons: colour band, Lato 25 bold title ------------------------------ */
.ribbon__inner { padding-top: 70px; padding-bottom: 70px; }
.ribbon__title { font-family: var(--font); font-size: 25px; line-height: 33px; font-weight: 700; }
.ribbon__text { font-size: 17px; color: inherit; }
.ribbon__icon { width: 75px; height: 75px; }

/* ---- FAQ: green questions with a ringed plus, no rules ---------------------- */
.faq__cols .faq__item { border-bottom: 0; }
.faq__cols .faq__item summary { font-size: 18px; font-weight: 400; color: var(--wp-green); padding: 8px 8px 8px 32px; }
.faq__cols .faq__item summary::after { width: 20px; height: 20px; line-height: 17px; font-size: 1rem; border-width: 1.5px; border-color: var(--wp-green); color: var(--wp-green); }

/* ---- Category tiles: square, grey, Roboto Slab title ------------------------ */
.cards--tiles { gap: 33px; }
.cards--tiles .card { border-radius: 0; flex: 0 0 360px; max-width: 360px; }
.cards--tiles .card::after { background: rgb(45 39 27 / .45); }
.cards--tiles .card:hover::after { background: rgb(45 39 27 / .6); }
.section__intro, .section__intro.prose--center { max-width: 620px; font-size: 18px; line-height: 1.44; }
.cards--tiles .card__title { font-family: var(--font-slab); font-size: 26px; line-height: 34px; font-weight: 900; padding: 0 40px; text-shadow: none; }

/* ---- Cards, features and quotes: square corners like the old theme ---------- */
.card, .feature, .quotes__item, .columns__col, .includes, .exclusives__item { border-radius: 0; }
.intro__img, .split__img, .feature__img, .quotes__img, .gallery img, .photos img, .prose img { border-radius: 0; }

/* ---- Intros: 38px Roboto Slab heading, 620px of 18px text -------------------- */
/* (width set below) */
.intro__head .prose { font-size: 18px; line-height: 1.44; }

/* ---- Awards: 80px badges, five to a row, the label beneath ------------------- */
.awards { display: flex; flex-direction: column-reverse; gap: 12px; }
.awards__list { gap: 13px; max-width: 465px; }
.awards__list img { width: 80px; }
.awards__label { margin: 0; color: var(--wp-ink); font-size: 11px; letter-spacing: .5px; }

/* ---- Feature lists: two columns, Roboto Slab 22 titles over 15px text --------- */
.fl .section { padding-top: 0; }
.fl.bg-tan .section, .fl:first-child .section { padding-top: 110px; }
/* Columns, not a grid: the old list ran down the left column first, then the right. */
.fl__items { max-width: 1150px; margin: 0 auto; }
@media (min-width: 800px) { .fl__items { columns: 2; column-gap: 60px; } }
.fl__item { break-inside: avoid; margin-bottom: 30px; }
.fl__title { font-family: var(--font-slab); font-size: 22px; line-height: 29px; font-weight: 900; margin: 0 0 6px; }
.fl__item .prose { font-size: 15px; line-height: 22px; }
.fl__item .feature__img { margin-bottom: 12px; }

/* ---- Tabs: radio buttons and labels, no script ---------------------------------- */
.tabs__radio { position: absolute; opacity: 0; pointer-events: none; }
.tabs__labels { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 50px; }
.tabs__labels label { cursor: pointer; }
.tabs__panel { display: none; }
.fl .tabs__labels {
  max-width: 1000px; margin: 0 auto 50px; padding-top: 30px; border-top: 1px solid var(--ink-200);
}
.fl .tabs__labels label {
  font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--wp-ink);
  padding-bottom: 3px; border-bottom: 2px solid transparent;
}
.fl .tabs__labels label:hover { color: var(--wp-green); }
/* The nth radio shows the nth panel and marks the nth label. Eight is more than any page has. */
.tabs__radio:nth-of-type(1):checked ~ .tabs__panels > .tabs__panel:nth-child(1),
.tabs__radio:nth-of-type(2):checked ~ .tabs__panels > .tabs__panel:nth-child(2),
.tabs__radio:nth-of-type(3):checked ~ .tabs__panels > .tabs__panel:nth-child(3),
.tabs__radio:nth-of-type(4):checked ~ .tabs__panels > .tabs__panel:nth-child(4),
.tabs__radio:nth-of-type(5):checked ~ .tabs__panels > .tabs__panel:nth-child(5),
.tabs__radio:nth-of-type(6):checked ~ .tabs__panels > .tabs__panel:nth-child(6),
.tabs__radio:nth-of-type(7):checked ~ .tabs__panels > .tabs__panel:nth-child(7),
.tabs__radio:nth-of-type(8):checked ~ .tabs__panels > .tabs__panel:nth-child(8) { display: block; }
.tabs__radio:nth-of-type(1):checked ~ * .tabs__labels label:nth-child(1), .tabs__radio:nth-of-type(1):checked ~ .tabs__labels label:nth-child(1),
.tabs__radio:nth-of-type(2):checked ~ * .tabs__labels label:nth-child(2), .tabs__radio:nth-of-type(2):checked ~ .tabs__labels label:nth-child(2),
.tabs__radio:nth-of-type(3):checked ~ * .tabs__labels label:nth-child(3), .tabs__radio:nth-of-type(3):checked ~ .tabs__labels label:nth-child(3),
.tabs__radio:nth-of-type(4):checked ~ * .tabs__labels label:nth-child(4), .tabs__radio:nth-of-type(4):checked ~ .tabs__labels label:nth-child(4),
.tabs__radio:nth-of-type(5):checked ~ * .tabs__labels label:nth-child(5), .tabs__radio:nth-of-type(5):checked ~ .tabs__labels label:nth-child(5),
.tabs__radio:nth-of-type(6):checked ~ * .tabs__labels label:nth-child(6), .tabs__radio:nth-of-type(6):checked ~ .tabs__labels label:nth-child(6),
.tabs__radio:nth-of-type(7):checked ~ * .tabs__labels label:nth-child(7), .tabs__radio:nth-of-type(7):checked ~ .tabs__labels label:nth-child(7),
.tabs__radio:nth-of-type(8):checked ~ * .tabs__labels label:nth-child(8), .tabs__radio:nth-of-type(8):checked ~ .tabs__labels label:nth-child(8) {
  color: var(--wp-green); border-bottom-color: currentColor; text-decoration: underline; text-underline-offset: 4px;
}
.fl .tabs__labels label { text-decoration: none; }
/* Keyboard users see which tab they are on. */
.tabs:has(.tabs__radio:focus-visible) .tabs__labels { outline: 2px dashed var(--wp-green); outline-offset: 6px; }

/* ---- Containment examples: lime panel, a diagram beside the list of examples ----- */
.ccs .section__title { font-size: 38px; line-height: 48px; color: #fff; }
.ccs__intro { max-width: 800px; color: #fff; }
.ccs__body { display: grid; gap: 30px; margin-top: 50px; }
@media (min-width: 1000px) { .ccs__body { grid-template-columns: minmax(0, 737px) minmax(0, 355px); justify-content: space-between; align-items: start; } }
.ccs__slides figure { margin: 0; border: 2px solid #fff; }
.ccs__slides img { width: 100%; height: auto; }
.ccs__nav-title {
  font-family: var(--font-slab); font-size: 22px; font-weight: 900; color: #fff;
  padding-bottom: 12px; margin: 0 0 20px; border-bottom: 1px solid rgb(255 255 255 / .6);
}
.ccs__labels { flex-direction: column; align-items: flex-start; gap: 21px; }
.ccs__labels label { font-size: 18px; color: #fff; }
.ccs__labels label:hover { text-decoration: underline; }
.ccs .tabs__labels label { color: #fff !important; border-bottom: 0 !important; }

/* ---- "Here's What You Get": a full-width grey band under the product intro -------- */
.includes {
  background: var(--bg-fog); box-shadow: 0 0 0 100vmax var(--bg-fog); clip-path: inset(0 -100vmax);
  border-radius: 0; margin-top: 60px; padding: 40px 0 30px;
}
.includes__title { font-family: var(--font-slab); font-size: 22px; line-height: 30px; font-weight: 900; }
.includes__grid h4 { font-family: var(--font-slab); font-size: 18px; line-height: 25px; font-weight: 900; color: var(--wp-ink); }
.includes__grid .prose { font-size: 16px; line-height: 23px; }

/* ---- Quote: the old form panel's light grey ---------------------------------------- */
.quote { background: var(--bg-light-grey); border: 0; }
@media (min-width: 900px) { .quote__inner { padding-top: 110px; padding-bottom: 110px; } }

/* ---- Testimonials: one 800px column of italic quotes, ruled apart -------------------- */
.quotes--list { display: block; max-width: 800px; }
.quotes--list .quotes__item { display: block; max-width: none; padding: 40px 0 0; margin: 0 0 40px; background: none; border-top: 1px solid var(--ink-200); }
.quotes--list .quotes__item:first-child { border-top: 0; padding-top: 0; }
.quotes--list blockquote, .quotes--list blockquote p { font-size: 20px; line-height: 28px; font-style: italic; color: var(--wp-ink); }
.quotes--list figcaption { margin-top: 10px; font-family: var(--font-slab); font-size: 18px; font-weight: 900; color: var(--wp-ink); }

/* Intro headings run 800 wide; only the paragraph under them is held to 620. */
.intro__head { max-width: 800px; }
.intro__head .prose { max-width: 620px; margin-left: auto; margin-right: auto; }

/* ---- Plain page header (no photo hero): white, Roboto Slab 38, crumb above ---------- */
.pagehero { background: #fff; color: var(--wp-ink); }
.pagehero .wrap { padding-top: 65px; padding-bottom: 50px; }
.pagehero h1 { color: var(--wp-ink); font-family: var(--font-slab); font-size: 38px; line-height: 48px; font-weight: 900; }
.pagehero__crumb { display: block; color: var(--wp-ink); font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.pagehero__crumb::before { content: none; }
.pagehero__crumb:hover { color: var(--wp-green); }
/* Content that follows a plain header starts closer, as on the old site. */
.pagehero + * .section:first-child, .pagehero + .section, .pagehero + section > .section { padding-top: 0; }

/* Ribbons keep the old theme's wider band. */
.ribbon .wrap { max-width: 1250px; }

/* ---- Photo gallery: three 360px squares to a row ------------------------------------- */
.photos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 360px)); justify-content: start; gap: 25px; }

/* ---- Battery comparison halves ------------------------------------------------------- */
/* One shrinkable column on phones: an auto column grows to the 470px text block and widens the page. */
.halves { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .halves { grid-template-columns: repeat(2, minmax(0, 1fr)); } .halves__col { min-height: 700px; } }
.halves__col { display: flex; align-items: center; justify-content: center; padding: 60px 25px; background: #fff; }
.halves__col:nth-child(2), .halves + .halves .halves__col:nth-child(1), .halves + .halves + .halves .halves__col:nth-child(2) { background: var(--bg-eggshell); }
.halves + .halves .halves__col:nth-child(2), .halves + .halves + .halves .halves__col:nth-child(1) { background: #fff; }
.halves__inner { width: 470px; max-width: 100%; }
.halves__inner .halves__icon { display: block; height: auto; margin: 0 0 20px; border-radius: 0; }
.halves__inner h3 { font-family: var(--font-slab); font-size: 32px; line-height: 40px; font-weight: 900; margin: 0 0 14px; }

/* Split subheading, and the gap the old theme left after its buttons. */
.split__lead { font-size: 18px; line-height: 26px; color: var(--wp-ink); }
.split__lead + .btn-row { margin: 28px 0 50px; }
.split__notes { border-top: 0; padding-top: 0; font-size: 14px; color: var(--wp-ink); }

/* Plain pages: the text starts at the left edge under the title, 760 wide. */
.pagehero ~ .section .prose--page, .pagehero ~ section .prose--page { margin-left: 0; max-width: 760px; }
.prose--page h3 { font-size: 20px; font-weight: 400; margin-top: 0; }
.footer .footer__name--gap { margin-top: 44px; }

/* ---- Product support: text and green resource links beside the product photo ------- */
.intro--support .intro__grid { grid-template-columns: 360px 1fr; gap: 80px; }
@media (max-width: 899px) { .intro--support .intro__grid { grid-template-columns: 1fr; } }
.intro--support .prose--lead { font-size: 18px; line-height: 26px; }
.intro__links { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; }
.intro__links a { font-size: 20px; font-weight: 700; color: var(--wp-green); text-decoration: none; }
.intro__links a:hover { text-decoration: underline; }
.intro--support + .faqband, .intro--support + * .faqband { background: var(--bg-light-grey); }
.pagehero__crumb { text-transform: uppercase; letter-spacing: .5px; font-size: 12px; }

/* ---- Body text lists: green square bullets ----------------------------------------- */
.prose ul { list-style: square; }
.prose ul li::marker { color: var(--wp-green); }
.prose li { margin-bottom: 12px; }

/* ---- Product rows (category pages): grey panel, photo popping out of the top ---------- */
.cards--media { display: flex; flex-direction: column; gap: 60px; max-width: 1087px; margin: 25px auto 0; }
.cards--media > * { flex: none; max-width: none; }
.cards--media .card {
  position: relative; display: grid; grid-template-columns: 200px 1fr; column-gap: 38px; align-items: start;
  padding: 35px 160px 35px 60px; min-height: 200px; border: 0; border-radius: 0; overflow: visible;
  background: rgb(77 75 78 / .1); color: var(--wp-ink);
}
.cards--media .card:hover { transform: none; box-shadow: none; background: rgb(77 75 78 / .14); }
.cards--media .card > :not(.card__img) { padding: 0; grid-column: 2; }
.cards--media .card__img { grid-column: 1; grid-row: 1 / span 4; width: 200px; height: auto; aspect-ratio: auto; margin-top: -60px; object-fit: contain; background: none; }
.cards--media .card__title { font-family: var(--font-slab); font-size: 22px; line-height: 30px; font-weight: 900; color: var(--wp-ink); padding-top: 0; }
.cards--media .card__tagline { font-size: 17px; font-weight: 700; color: var(--wp-ink); }
.cards--media .card__body { font-size: 16px; line-height: 23px; color: var(--wp-ink); margin-top: 6px; }
.cards--media .card__more {
  position: absolute; top: 35px; right: 50px; display: inline-flex; align-items: center; min-height: 34px; padding: 0 24px !important;
  border-radius: 100px; background: var(--wp-green); color: #fff; font-size: 12px; font-weight: 900; letter-spacing: 1.1px; text-transform: uppercase;
}
@media (max-width: 799px) {
  .cards--media .card { grid-template-columns: 1fr; padding: 30px 24px 70px; }
  .cards--media .card > :not(.card__img) { grid-column: 1; }
  .cards--media .card__img { grid-row: auto; margin: 0 0 12px; }
  .cards--media .card__more { top: auto; bottom: 24px; left: 24px; right: auto; }
}

/* ---- Comparison table: open, striped, 1072 wide ----------------------------------- */
/* Positioned, so the absolutely placed screen-reader text in its cells scrolls inside it instead of widening the page (#7). */
.table-wrap { position: relative; border: 0; border-radius: 0; max-width: 1072px; margin: 0 auto; }
.compare th, .compare td { height: 50px; padding: 0 20px; border: 0; }
.compare thead th { background: #fff; font-family: var(--font-slab); font-size: 16px; font-weight: 900; padding-bottom: 20px; }
.compare thead a { color: var(--wp-ink); text-decoration: none; }
.compare tbody tr:nth-child(odd) > * { background: rgb(236 235 224 / .5); }
.compare tbody th { font-size: 16px; font-weight: 700; }
.compare .tick { color: var(--wp-green); font-size: 22px; }
.section:has(> .table-wrap) > .eyebrow { color: var(--wp-ink); font-size: 14px; font-weight: 700; letter-spacing: .5px; }

/* ---- Phones: the old theme's header — logo, a round phone button, a bare menu icon ---- */
.header__call { display: none; }
@media (max-width: 999px) {
  .topbar { display: none; }
  .header__inner { min-height: 90px; flex-wrap: nowrap; }
  .brand__logo { width: 190px; }
  .brand__sub { font-size: 14px; }
  .header__call {
    display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; flex: none;
    border-radius: 50%; background: var(--wp-topbar); color: var(--wp-green);
  }
  .nav__toggle { border: 0; padding: 0 6px; min-height: 44px; }
  .nav__toggle-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nav__bars, .nav__bars::before, .nav__bars::after { width: 22px; height: 2.5px; }
  .nav__bars::before { top: -7px; }
  .nav__bars::after { top: 7px; }
}
@media (max-width: 699px) {
  .phero__title--sub { font-size: 20px; line-height: 26px; }
  .phero__product { display: none; }
  .phero:has(.phero__product) + * { padding-top: 56px; }
}
.quotes--list blockquote p { margin: 0; }

/* ---- Offers (titled items): plain text, a green Roboto Slab title, a "Learn more" link -- */
.quotes:not(.quotes--list) { display: block; max-width: 760px; }
.quotes:not(.quotes--list) .quotes__item { display: block; max-width: none; padding: 0; background: none; }
.quotes:not(.quotes--list) .quotes__title { font-family: var(--font-slab); font-size: 22px; line-height: 30px; font-weight: 900; color: var(--wp-green); margin-bottom: 6px; }
.quotes:not(.quotes--list) blockquote { font-size: 15px; line-height: 22px; }
.quotes:not(.quotes--list) .btn-row { margin-top: 8px; }
.quotes:not(.quotes--list) .btn {
  min-height: 0; padding: 0; background: none; color: var(--wp-green);
  font-size: 15px; letter-spacing: 0; text-transform: none; font-weight: 700;
}
.quotes:not(.quotes--list) .btn:hover { background: none; text-decoration: underline; }