/*
Theme Name: Total PC Protection
Theme URI: https://totalpcprotection.com/
Author: Alpha Geeks
Author URI: https://alphageeks.biz
Description: The Total PC Protection website. Built from the approved design mockups. Each page is a file in this folder; the page titles and Google descriptions are in functions.php.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: All rights reserved
Text Domain: total-pc-protection
*/

/* ==========================================================================
   DO NOT EDIT THIS FILE BY HAND.
   It is generated by build-theme.py from Design\mockup.css plus the
   page-specific style blocks in the mockups. Edit mockup.css and re-run the
   script, or the next build will wipe your change.
   ========================================================================== */

/* ===========================================================================
   Total PC Protection — shared mockup stylesheet
   Lifted verbatim from the approved home page mockup (31 July 2026), plus a
   small number of additions used only by the inner pages. Marked below.
   The home page mockup still carries its own copy of this CSS inline; it was
   left untouched so nothing about the approved design could shift by accident.
   =========================================================================== */
:root{
  --green:#28B24B;
  --green-dark:#1E8F3A;
  --green-light:#E8F7ED;
  --black:#231F20;
  --white:#FFFFFF;
  --grey:#8E8F8F;
  --grey-light:#C6C7C7;
  --grey-bg:#F5F6F6;
  --ink:#2E2A2B;
  --maxw:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
h1,h2,h3,h4{color:var(--black);line-height:1.2;font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(28px,3.6vw,40px)}
h3{font-size:20px;font-weight:700;letter-spacing:-.01em}
p{margin-bottom:16px}
a{color:var(--green-dark);text-decoration:none}
section{padding:80px 0}
.eyebrow{
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);margin-bottom:14px;
}
.lede{font-size:19px;color:#57595A;max-width:640px}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}

/* buttons */
.btn{
  display:inline-block;padding:15px 30px;border-radius:6px;font-weight:700;font-size:16px;
  border:2px solid transparent;cursor:pointer;transition:.15s;
}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-dark)}
.btn-ghost{border-color:rgba(255,255,255,.45);color:#fff}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-outline{border-color:var(--green);color:var(--green-dark)}
.btn-outline:hover{background:var(--green-light)}
.btn-white{background:#fff;color:var(--green-dark)}
.btn-white:hover{background:#F0FAF3}

/* header */
header{
  background:var(--white);border-bottom:1px solid #E6E7E7;position:sticky;top:0;z-index:50;
}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 0}
.bar img{height:54px;width:auto;display:block}
nav{display:flex;align-items:center;gap:26px}
nav a{color:var(--black);font-weight:600;font-size:15px}
nav a:hover{color:var(--green-dark)}
nav a.here{color:var(--green-dark)}            /* ADDED — current page marker */
.navdrop{position:relative;display:inline-flex;align-items:center}
.navdrop > a{display:inline-flex;align-items:center;gap:5px}
.caret{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.dropmenu{
  position:absolute;top:100%;left:-14px;min-width:200px;background:#fff;
  border:1px solid #E6E7E7;border-radius:8px;padding:8px;margin-top:10px;
  box-shadow:0 10px 28px rgba(35,31,32,.13);
  opacity:0;visibility:hidden;transition:.14s;
}
.navdrop:hover .dropmenu{opacity:1;visibility:visible}
.dropmenu a{display:block;padding:9px 12px;border-radius:5px;font-size:14.5px}
.dropmenu a:hover{background:var(--green-light);color:var(--green-dark)}
.phone{font-weight:800;color:var(--black);font-size:15px;white-space:nowrap}
.btn-sm{padding:10px 20px;font-size:15px}
/* the right-hand end of the logo bar — phone number + Get Protected button.
   Was an inline style on the div until 17 September 2026; it needs a class so
   the phone menu can re-order it. */
.barend{display:flex;align-items:center;gap:18px}

/* hero (home) */
.hero{position:relative;background:var(--black);overflow:hidden;padding:104px 0 96px;color:#fff}
.binary-bg{
  position:absolute;inset:0;
  background-image:url("assets/binary-hero-photo.jpg");
  background-size:cover;background-position:center;
}
.hero-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      rgba(35,31,32,.88) 0%,
      rgba(35,31,32,.80) 20%,
      rgba(35,31,32,.50) 55%,
      rgba(35,31,32,.30) 100%),
    linear-gradient(180deg, rgba(35,31,32,.08), rgba(35,31,32,.22));
}
@media(max-width:900px){
  .hero-veil{background:linear-gradient(180deg,rgba(35,31,32,.82),rgba(35,31,32,.88))}
}
.binary-tile{
  position:absolute;inset:0;
  background-image:url("assets/binary-tile.png");
  background-repeat:repeat;
}
.tile-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(35,31,32,.62),rgba(35,31,32,.74))}
.hero .wrap{position:relative;z-index:2}
.hero h1{color:#fff;font-size:clamp(36px,5.2vw,58px);max-width:15ch;margin-bottom:20px}
.hero h1 em{color:var(--green);font-style:normal}
.hero p.sub{font-size:20px;color:#D9DADA;max-width:560px;margin-bottom:26px}
.pricetag{
  display:inline-flex;align-items:baseline;gap:10px;margin-bottom:32px;
  background:rgba(40,178,75,.13);border:1px solid rgba(40,178,75,.5);
  border-radius:8px;padding:12px 20px;
}
.pricetag b{font-size:26px;color:#fff;font-weight:800}
.pricetag span{color:#B9DFC5;font-size:15px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-note{margin-top:24px;font-size:14px;color:var(--grey-light)}

/* ADDED — inner page hero: same materials, shorter, so the home hero stays
   the tallest thing on the site and inner pages get to the copy faster. */
.pagehero{position:relative;background:var(--black);overflow:hidden;padding:64px 0 60px;color:#fff}
.pagehero .wrap{position:relative;z-index:2}
.pagehero h1{color:#fff;font-size:clamp(32px,4.4vw,48px);max-width:19ch;margin-bottom:18px}
.pagehero h1 em{color:var(--green);font-style:normal}
.pagehero p.sub{font-size:19px;color:#D9DADA;max-width:600px;margin-bottom:24px}
.crumb{font-size:13.5px;color:var(--grey-light);margin-bottom:16px;letter-spacing:.02em}
.crumb a{color:#8FE0A6}
.crumb span{color:#6E6F6F;padding:0 7px}

/* generic grids */
.grid{display:grid;gap:26px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{background:#fff;border:1px solid #E6E7E7;border-radius:10px;padding:30px}
.card h3{margin-bottom:10px}
.card p{font-size:15.5px;color:#57595A;margin-bottom:0}
.icon{
  width:44px;height:44px;border-radius:9px;background:var(--green-light);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.icon svg{width:24px;height:24px;stroke:var(--green-dark);fill:none;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}

.alt{background:var(--grey-bg)}
.rule{width:52px;height:4px;background:var(--green);border-radius:2px;margin-bottom:22px}
.center .rule{margin-left:auto;margin-right:auto}

/* core section */
.core-item{display:flex;gap:20px;align-items:flex-start}
.core-item .icon{flex:none;margin-bottom:0}
.core-item p{font-size:16px;color:#57595A}
.reports{
  margin-top:34px;background:var(--white);border-left:4px solid var(--green);
  padding:22px 26px;border-radius:0 8px 8px 0;
}
.reports p{margin-bottom:0;font-size:15.5px}
.trustbar{
  margin-top:22px;background:#fff;border:1px solid #E6E7E7;border-radius:10px;
  padding:26px 30px;display:flex;gap:20px;align-items:flex-start;
}
.trustbar p{font-size:15.5px;color:#57595A}
.trustbar .icon{margin-bottom:0}

/* price band */
.priceband{background:var(--black);color:#fff;position:relative;overflow:hidden}
.priceband .wrap{position:relative;z-index:2}
.priceband h2{color:#fff}
.priceband .lede{color:#C6C7C7}
.pbgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:36px}
.pbcard{background:#2C2829;border:1px solid #403B3C;border-radius:10px;padding:30px}
.pbcard .amt{font-size:40px;font-weight:800;color:#fff;line-height:1}
.pbcard .per{color:var(--grey-light);font-size:15px;margin-bottom:18px}
.pbcard h3{color:#fff}
.pbcard p{color:#C6C7C7;font-size:15px}
.waiver{
  display:inline-block;background:rgba(40,178,75,.16);color:#8FE0A6;border:1px solid rgba(40,178,75,.45);
  border-radius:999px;padding:6px 14px;font-size:13.5px;font-weight:700;margin-top:6px;
}

/* add-ons */
.addon{border:1px solid #E6E7E7;border-radius:10px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.addon-top{padding:30px 30px 0}
.addon-price{font-size:30px;font-weight:800;color:var(--black);line-height:1}
.addon-per{color:var(--grey);font-size:14.5px;margin-bottom:18px}
.addon-body{padding:0 30px 26px;flex:1}
.addon-body p{font-size:15.5px;color:#57595A}
.addon-foot{background:var(--green-light);padding:16px 30px;font-size:14.5px;font-weight:700;color:var(--green-dark)}
.addon-foot.plain{background:var(--grey-bg);color:#57595A;font-weight:500}

/* steps */
.step{display:flex;gap:18px;align-items:flex-start}
.step .num{
  flex:none;width:34px;height:34px;border-radius:50%;background:var(--green);color:#fff;
  font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px;
}
.step p{font-size:15.5px;color:#57595A;margin-bottom:0}
.step h3{font-size:17px;margin-bottom:5px}

/* honesty box */
.honest{
  background:#FFF9EC;border:1px solid #F0DFB6;border-radius:10px;padding:34px 38px;
  max-width:820px;margin:0 auto;
}
.honest h3{font-size:22px;margin-bottom:12px}
.honest p{font-size:16px;color:#5C5545;margin-bottom:12px}
.honest strong{color:var(--black)}

/* testimonials */
.quote{background:#fff;border:1px solid #E6E7E7;border-radius:10px;padding:28px}
.quote p{font-size:15.5px;color:#57595A;font-style:italic}
.quote .who{font-weight:700;color:var(--black);font-style:normal;font-size:14.5px;margin:0}
.stars{color:var(--green);letter-spacing:2px;margin-bottom:12px;font-size:14px}

/* final cta */
.finalcta{background:var(--green);color:#fff;text-align:center}
.finalcta h2{color:#fff;margin-bottom:12px}
.finalcta p{font-size:19px;color:#E4F6EA;max-width:560px;margin:0 auto 28px}

/* footer */
footer{background:var(--black);color:#B7B8B8;padding:64px 0 30px;font-size:14.5px}
footer img{height:64px;width:auto;margin-bottom:18px;display:block}
footer h4{color:#fff;font-size:14px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
footer a{color:#B7B8B8;display:block;margin-bottom:9px}
footer a:hover{color:var(--green)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px}
.foot-bottom{border-top:1px solid #3A3536;margin-top:44px;padding-top:22px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:#7E7F7F}
.tagline{color:var(--green);font-weight:700;margin-bottom:14px}

/* mockup annotation banner */
.mockbar{background:#231F20;color:#C6C7C7;font-size:13px;padding:9px 24px;text-align:center;
  border-bottom:2px solid var(--green)}
.mockbar b{color:var(--green)}

/* ---------------------------------------------------------------------------
   ADDED — inner page components. None of these change the home page.
   --------------------------------------------------------------------------- */

/* checklist — used for "what's included" lists */
.checks{list-style:none;margin:0 0 16px}
.checks li{position:relative;padding-left:32px;margin-bottom:13px;font-size:16px;color:#57595A}
.checks li::before{
  content:"";position:absolute;left:0;top:5px;width:20px;height:20px;border-radius:50%;
  background:var(--green-light);
}
.checks li::after{
  content:"";position:absolute;left:6px;top:10px;width:8px;height:4px;
  border-left:2px solid var(--green-dark);border-bottom:2px solid var(--green-dark);
  transform:rotate(-45deg);
}
.checks strong{color:var(--black)}

/* two-column comparison table */
.compare{width:100%;border-collapse:collapse;font-size:15.5px;margin-top:8px}
.compare th{
  text-align:left;padding:14px 16px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--black);border-bottom:2px solid var(--black);
}
.compare th:not(:first-child){text-align:center}
.compare td{padding:14px 16px;border-bottom:1px solid #E6E7E7;color:#57595A}
.compare td:not(:first-child){text-align:center;font-weight:700}
.compare .yes{color:var(--green-dark)}
.compare .no{color:#B03A3A}
.compare tr:last-child td{border-bottom:none}
.compare-wrap{background:#fff;border:1px solid #E6E7E7;border-radius:10px;padding:10px 14px;overflow-x:auto}

/* pull quote / standing phrase */
.standout{
  border-left:4px solid var(--green);background:var(--green-light);
  padding:22px 26px;border-radius:0 8px 8px 0;margin:8px 0 24px;
}
.standout p{margin-bottom:0;font-size:18px;font-weight:700;color:var(--black)}

/* inline price strip */
.pricestrip{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;
  background:#fff;border:1px solid #E6E7E7;border-left:4px solid var(--green);
  border-radius:0 10px 10px 0;padding:22px 26px;margin-top:8px;
}
.pricestrip .amt{font-size:32px;font-weight:800;color:var(--black);line-height:1}
.pricestrip .per{color:var(--grey);font-size:15px}
.pricestrip .note{font-size:14.5px;color:var(--green-dark);font-weight:700}

/* FAQ / objection blocks */
.qa{border-top:1px solid #E6E7E7;padding:22px 0}
.qa:last-child{border-bottom:1px solid #E6E7E7}
.qa h3{font-size:17.5px;margin-bottom:8px}
.qa p{font-size:15.5px;color:#57595A;margin-bottom:0}

/* related pages strip */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:10px}
.relcard{
  border:1px solid #E6E7E7;border-radius:10px;padding:22px 24px;background:#fff;
  transition:.15s;display:block;
}
.relcard:hover{border-color:var(--green);background:var(--green-light)}
.relcard h4{font-size:16px;margin-bottom:6px;color:var(--black);text-transform:none;letter-spacing:-.01em}
.relcard p{font-size:14.5px;color:#57595A;margin-bottom:0}

@media(max-width:900px){
  .g3,.g4,.g2,.pbgrid,.foot-grid,.related{grid-template-columns:1fr}
  /* nav was display:none here until 17 September 2026 — that was the "no menu
     on phones" problem. The menu is now a tap-to-open panel; all of its rules
     live in the PHONE MENU block at the END of this file. Do not add a
     nav{display:none} back in here. */
  section{padding:56px 0}
}

/* ---------------------------------------------------------------------------
   ADDED 13 August 2026 — contact page only. Nothing above this line changes.
   The contact form is the first real form on the site, so it is the first
   thing that needed input styling. Colours and radii are taken from the
   existing card and button rules so it reads as the same design.
   --------------------------------------------------------------------------- */

.contactgrid{display:grid;grid-template-columns:1.55fr 1fr;gap:44px;align-items:start}

.formcard{
  background:#fff;border:1px solid #E6E7E7;border-radius:10px;
  padding:30px;margin-top:30px;
}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column}
.field.full{grid-column:1 / -1}
.field label{
  font-size:14px;font-weight:700;color:var(--black);margin-bottom:7px;
  display:flex;align-items:center;gap:8px;
}
.field .req{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--green-dark);background:var(--green-light);
  border-radius:999px;padding:2px 8px;
}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:15.5px;color:var(--ink);
  border:1px solid #D6D7D7;border-radius:6px;padding:12px 14px;
  background:#fff;width:100%;transition:.14s;
}
.field textarea{resize:vertical;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(40,178,75,.16);
}
.field input::placeholder,.field textarea::placeholder{color:#A9AAAA}
.hint{font-size:13.5px;color:var(--grey);margin-top:7px;line-height:1.5}

.checkgroup{display:flex;flex-direction:column;gap:10px}
.checkopt{
  display:flex;align-items:flex-start;gap:12px;font-weight:400;
  border:1px solid #E6E7E7;border-radius:8px;padding:14px 16px;
  font-size:15.5px;color:#57595A;cursor:pointer;transition:.14s;margin-bottom:0;
}
.checkopt:hover{border-color:var(--green);background:var(--green-light)}
.checkopt input{
  flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--green);
}
.checkopt strong{color:var(--black)}
.checkopt em{font-style:normal;color:var(--green-dark);font-weight:700}

.formfoot{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  border-top:1px solid #E6E7E7;margin-top:26px;padding-top:24px;
}
.formfoot .hint{margin-top:0;max-width:330px}

.infocard{
  background:var(--grey-bg);border:1px solid #E6E7E7;border-radius:10px;
  padding:26px 28px;margin-bottom:20px;
}
.infocard h3{font-size:17px;margin-bottom:10px}
.infocard p{font-size:15px;color:#57595A;margin-bottom:0}
.infocard .bignum{
  display:block;font-size:27px;font-weight:800;color:var(--black);
  letter-spacing:-.02em;margin-bottom:10px;
}
.infocard .bignum:hover{color:var(--green-dark)}

@media(max-width:900px){
  .contactgrid,.formgrid{grid-template-columns:1fr}
  aside{margin-top:34px}
}

/* ---------------------------------------------------------------------------
   ADDED 17 August 2026 — About page only. Nothing above this line changes.
   --------------------------------------------------------------------------- */

/* text column beside the portrait */
.aboutgrid{display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:start}

/* portrait card */
.portrait{
  margin:0;background:#fff;border:1px solid #E6E7E7;border-radius:10px;overflow:hidden;
}
.portrait img{width:100%;height:auto;display:block}
.portrait figcaption{
  padding:18px 22px;font-size:14.5px;color:#57595A;line-height:1.55;
  border-top:1px solid #E6E7E7;
}
.portrait figcaption strong{
  display:block;color:var(--black);font-size:16px;margin-bottom:3px;
}

/* dated timeline */
.timeline{
  list-style:none;margin:40px 0 0;padding-left:28px;
  border-left:2px solid #E0E1E1;max-width:760px;
}
.timeline li{position:relative;margin-bottom:26px}
.timeline li:last-child{margin-bottom:0}
.timeline li::before{
  content:"";position:absolute;left:-35px;top:5px;width:12px;height:12px;border-radius:50%;
  background:var(--green);box-shadow:0 0 0 4px var(--green-light);
}
.timeline .yr{
  display:block;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green-dark);margin-bottom:5px;
}
.timeline p{font-size:15.5px;color:#57595A;margin-bottom:0}

@media(max-width:900px){
  .aboutgrid{grid-template-columns:1fr;gap:34px}
  .portrait{max-width:340px}
}

/* ---------------------------------------------------------------------------
   THE PHONE MENU — ADDED 17 September 2026, design session #15.
   Tom's decision: below 900px the site had no menu at all, so the only way
   around on a phone was the footer and the green button.

   HOW IT WORKS, AND WHY IT LOOKS ODD.
   There is NO JavaScript. The header holds a hidden checkbox immediately
   BEFORE <nav>, and the hamburger is that checkbox's <label>. Tapping the
   label ticks the checkbox, and ".navtoggle:checked ~ nav" is what shows the
   menu. That is the whole mechanism.

   TWO THINGS THAT WILL BREAK IT:
     1. Moving the checkbox after <nav>, or nesting it inside something. The
        "~" selector only reaches LATER SIBLINGS of the checkbox.
     2. Changing the id="navtoggle" / for="navtoggle" pair.

   The desktop menu above 900px is untouched — .navbtn is display:none there
   and nav is the same horizontal row it always was.
   --------------------------------------------------------------------------- */

/* the checkbox itself: off-screen but still focusable by keyboard */
.navtoggle{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}

/* the hamburger, and the in-menu phone link: phones only */
.navbtn{display:none}
nav a.navcall{display:none}

@media(max-width:900px){

  /* The logo bar is the one .wrap on the site with no side gutter — .bar's own
     "padding:12px 0" has always overridden it. On a wide screen that is
     invisible; on a phone the logo sat against the left edge and the new
     hamburger would sit against the right one, with its border half off the
     screen. Below 900px the bar gets the same 24px gutter as everything else. */
  .bar{flex-wrap:wrap;row-gap:0;padding-left:24px;padding-right:24px}
  .barend{order:1;margin-left:auto}

  /* the hamburger */
  .navbtn{
    order:2;display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:46px;height:44px;padding:0 10px;flex:0 0 auto;cursor:pointer;
    background:#fff;border:1px solid #E6E7E7;border-radius:8px;
  }
  .navbtn span{display:block;height:2.5px;border-radius:2px;background:var(--black);transition:.15s}
  .navbtn:hover{border-color:var(--green)}
  .navtoggle:focus-visible + .navbtn{outline:3px solid var(--green);outline-offset:2px}
  /* open state — the bars become an X */
  .navtoggle:checked + .navbtn{border-color:var(--green);background:var(--green-light)}
  .navtoggle:checked + .navbtn span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .navtoggle:checked + .navbtn span:nth-child(2){opacity:0}
  .navtoggle:checked + .navbtn span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

  /* the panel — a full-width second row inside the sticky bar */
  nav{
    order:3;display:none;flex-basis:100%;width:100%;
    flex-direction:column;align-items:stretch;gap:0;
    margin-top:10px;padding:4px 0 8px;border-top:1px solid #E6E7E7;
    max-height:calc(100vh - 92px);overflow-y:auto;
  }
  .navtoggle:checked ~ nav{display:flex}

  nav a{display:block;padding:15px 2px;font-size:17px;border-bottom:1px solid #F0F0F0}
  nav a:last-child{border-bottom:0}

  /* the Total PC Protection dropdown is no use on a touch screen, so its two
     children sit in the list as indented rows instead */
  .navdrop{display:block;position:static}
  .navdrop > a{display:block}
  .caret{display:none}
  .dropmenu{
    position:static;display:block;opacity:1;visibility:visible;
    background:transparent;border:0;box-shadow:none;
    min-width:0;margin:0;padding:0;
  }
  .dropmenu a{padding:14px 2px 14px 22px;font-size:16px;color:#57595A;border-radius:0}
  .dropmenu a:hover{background:transparent;color:var(--green-dark)}

  /* the phone number leaves the bar (no room) and becomes the last menu row */
  nav a.navcall{display:block;color:var(--green-dark);font-weight:800}
}

/* Below 620px the logo, the number and the button no longer fit on one line,
   so the number comes out of the bar. It is still in the menu and the footer. */
@media(max-width:620px){
  .bar .phone{display:none}
}


/* ==========================================================================
   PAGE-SPECIFIC — /testimonials/  (from testimonials-mockup.html)
   ========================================================================== */

/* page-specific — /testimonials/ */
.quotegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
@media(max-width:900px){.quotegrid{grid-template-columns:1fr}}


/* ==========================================================================
   PAGE-SPECIFIC — /terms/  (from terms-mockup.html)
   ========================================================================== */

/* Page-specific — long-form legal text */
.terms{max-width:820px}
.terms h2{font-size:24px;margin:44px 0 12px}
.terms h2:first-of-type{margin-top:0}
.terms p{margin:0 0 14px}
.terms ul{margin:0 0 16px 22px}
.terms li{margin-bottom:8px}
.version{display:inline-block;background:#F5F6F6;border:1px solid #C6C7C7;border-radius:6px;padding:8px 14px;font-size:15px;margin-bottom:30px}
.plain{border-left:4px solid #28B24B;background:#F4FBF6;padding:18px 22px;border-radius:0 8px 8px 0;margin:0 0 38px}
.plain p{margin:0}


/* ==========================================================================
   PAGE-SPECIFIC — /thank-you/  (from thank-you-mockup.html)
   ========================================================================== */

/* Page-specific — the numbered "what happens next" list */
.nextlist{list-style:none;margin:0;padding:0;counter-reset:step}
.nextlist li{counter-increment:step;position:relative;padding:0 0 26px 62px;margin:0}
.nextlist li:before{content:counter(step);position:absolute;left:0;top:-2px;width:40px;height:40px;
  border-radius:50%;background:#28B24B;color:#fff;font-weight:700;font-size:18px;
  display:flex;align-items:center;justify-content:center}
.nextlist li:not(:last-child):after{content:"";position:absolute;left:19px;top:44px;bottom:6px;
  width:2px;background:#C6C7C7}
.nextlist h3{margin:0 0 6px;font-size:19px}
.nextlist p{margin:0;color:#4a4a4a}
.spamnote{border-left:4px solid #28B24B;background:#F4FBF6;padding:18px 22px;border-radius:0 8px 8px 0;margin:0 0 34px}
.spamnote p{margin:0}
.spamnote p + p{margin-top:10px}


/* ==========================================================================
   PAGE-SPECIFIC — /contact/  (hand-maintained, see page-contact.php)
   The frame around the embedded Syncro Service Request form.
   ========================================================================== */

.widgetwrap{border:1px solid #C6C7C7;border-radius:10px;overflow:hidden;background:#fff;min-height:760px}
.widgetwrap iframe{display:block;width:100%;border:0}