/* The GO Network, Brand outreach landing pages.
   Shared stylesheet for index.html (Guide for Brands), next-time.html
   (The Next Time) and demo.html (Book a demo). Extracted from the
   approved design artifact; only the review-switcher chrome was removed. */

:root{
  --ink:#121212; --body:#272F36; --muted:#6a7580;
  --ground:#F4F4F4; --card:#FFFFFF; --line:#e2e4e2; --line-2:#eeefee;
  --green:#45ac62; --green-deep:#38934f; --green-dim:rgba(69,172,98,.10);
  --orange:#f58a07;
  --font:"Outfit", Arial, Helvetica, sans-serif;
  --measure:62ch;
  --shadow:0 1px 2px rgba(18,18,18,.04), 0 18px 40px -26px rgba(18,18,18,.45);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#f2f3f2; --body:#c3cbd1; --muted:#8c9aa2;
    --ground:#0d0f0e; --card:#161917; --line:#262a27; --line-2:#1e2220;
    --green:#5cc079; --green-deep:#7ad395; --green-dim:rgba(92,192,121,.14);
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 44px -26px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --ink:#f2f3f2; --body:#c3cbd1; --muted:#8c9aa2;
  --ground:#0d0f0e; --card:#161917; --line:#262a27; --line-2:#1e2220;
  --green:#5cc079; --green-deep:#7ad395; --green-dim:rgba(92,192,121,.14);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 18px 44px -26px rgba(0,0,0,.9);
}
*{box-sizing:border-box}
body{background:var(--ground); color:var(--body); font-family:var(--font); font-size:17px; line-height:1.62;
     font-weight:400; -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:var(--font); color:var(--ink); margin:0; letter-spacing:-.025em; text-wrap:balance;
            font-weight:700; line-height:1.1;}
p{margin:0}
a{color:inherit}

/* Brand top strip: dark bar, uppercase green strapline. */
.strip{background:var(--ink); color:#fff}
.strip .in{max-width:1120px; margin:0 auto; padding:13px 22px; display:flex; justify-content:space-between;
           align-items:center; gap:18px; flex-wrap:wrap}
.strap{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--green); font-weight:600}
.strip .lo{display:flex; align-items:center; gap:9px; font-weight:700; font-size:16px; letter-spacing:-.02em; color:#fff}
.strip .lo .mk{width:25px; height:25px; border-radius:6px; background:var(--green); display:grid; place-items:center;
               font-size:11px; font-weight:800; letter-spacing:0}

.page{max-width:1120px; margin:0 auto; padding-inline:22px; padding-bottom:0}
.eyebrow{font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--green-deep); font-weight:600}
.gp{color:var(--green-deep)}          /* two-tone heading prefix */
.lede{font-size:19.5px; color:var(--body); max-width:var(--measure); font-weight:400}
.small{font-size:14px; color:var(--muted)}
hr.sec{border:0; border-top:2px solid var(--green); margin:0}

.hero{display:grid; grid-template-columns:1.06fr .94fr; gap:54px; align-items:start; padding-block:60px 30px}
.hero.single{grid-template-columns:1fr}
.hero h1{font-size:clamp(36px,5vw,58px); font-weight:800; margin-bottom:20px}
.hero .lede{margin-bottom:26px}
@media (max-width:880px){ .hero{grid-template-columns:1fr; gap:36px; padding-block:40px 18px} }

.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font:600 16px/1 var(--font);
     background:var(--green); color:#fff; border:0; border-radius:40px; padding:15px 30px; cursor:pointer;
     text-decoration:none;}
.btn:hover{background:var(--green-deep)}
.btn:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.btn.light{background:#fff; color:var(--ink)}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--green); color:var(--green-deep)}
.btn.block{width:100%; margin-top:22px}
.btn[disabled]{opacity:.6; cursor:not-allowed}

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

/* stat row */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:2px solid var(--green);
       border-bottom:1px solid var(--line); background:var(--card); border-radius:0 0 18px 18px; overflow:hidden}
.stats div{padding:24px 22px; border-left:1px solid var(--line-2)}
.stats div:first-child{border-left:0}
.stats b{display:block; font-size:34px; font-weight:800; color:var(--ink); letter-spacing:-.04em; line-height:1;
         font-variant-numeric:tabular-nums; margin-bottom:6px}
.stats span{font-size:13.5px; color:var(--muted); line-height:1.4; display:block}
@media (max-width:860px){ .stats{grid-template-columns:1fr 1fr} .stats div:nth-child(3){border-left:0} }
@media (max-width:460px){ .stats{grid-template-columns:1fr} .stats div{border-left:0; border-top:1px solid var(--line-2)}
                          .stats div:first-child{border-top:0} }

/* forms */
form .row{display:grid; gap:14px; grid-template-columns:1fr 1fr}
@media (max-width:560px){ form .row{grid-template-columns:1fr} }
.field{display:flex; flex-direction:column; gap:6px; margin-top:15px}
.field:first-child{margin-top:0}
label{font-size:13.5px; font-weight:600; color:var(--ink)}
input[type=text],input[type=email],textarea{
  font:400 16px/1.5 var(--font); color:var(--ink); background:var(--ground); border:1px solid var(--line);
  border-radius:12px; padding:12px 14px; width:100%;}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--green); outline-offset:1px; border-color:transparent}
textarea{min-height:84px; resize:vertical}
fieldset{border:0; padding:0; margin:24px 0 0}
legend{font-size:15.5px; font-weight:700; color:var(--ink); padding:0}
.opts{display:flex; flex-direction:column; gap:9px; margin-top:13px}
.opt{display:flex; gap:12px; align-items:flex-start; border:1px solid var(--line); border-radius:12px;
     padding:13px 14px; cursor:pointer; background:var(--ground)}
.opt:hover{border-color:var(--green)}
.opt input{margin:2px 0 0; accent-color:var(--green); width:17px; height:17px; flex:none}
.opt span{font-size:15.5px; line-height:1.45; color:var(--body)}
.opt:has(input:checked){border-color:var(--green); background:var(--green-dim)}

/* Honeypot: bots fill it in, humans never see it. */
.hp-field{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; opacity:0}

.form-feedback{font-size:14.5px; margin-top:14px}
.form-feedback.error{color:#c23b3b}

.sec{padding-block:58px}
.sec > .eyebrow{margin-bottom:12px}
.sec h2{font-size:clamp(27px,3.3vw,38px); font-weight:800; margin-bottom:16px}

/* feature list for the demo page */
.feats{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line);
       border:1px solid var(--line); border-radius:18px; overflow:hidden; margin-top:34px}
@media (max-width:820px){ .feats{grid-template-columns:1fr} }
.feat{background:var(--card); padding:30px 28px}
.feat .n{font-size:11.5px; letter-spacing:.18em; color:var(--green-deep); font-weight:600;
         font-variant-numeric:tabular-nums}
.feat h3{font-size:20px; font-weight:700; margin:12px 0 9px}
.feat p{font-size:15.8px; color:var(--body)}

.contents{list-style:none; padding:0; margin:26px 0 0}
.contents li{display:flex; gap:16px; align-items:baseline; padding:15px 0; border-top:1px solid var(--line-2)}
.contents li:first-child{border-top:0; padding-top:0}
.contents .n{font-size:12.5px; font-weight:700; color:var(--green-deep); font-variant-numeric:tabular-nums;
             flex:none; width:24px}
.contents b{display:block; font-size:16.5px; font-weight:600; color:var(--ink); margin-bottom:2px}
.contents .d{color:var(--muted); font-size:15px}

.starts{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:30px}
@media (max-width:800px){ .starts{grid-template-columns:repeat(2,1fr)} }
@media (max-width:440px){ .starts{grid-template-columns:1fr} }
.start{border:1px solid var(--line); border-radius:14px; padding:20px; background:var(--card)}
.start b{display:block; font-size:16px; font-weight:700; color:var(--ink); margin-bottom:6px}
.start span{font-size:14.5px; color:var(--muted)}

.ways{list-style:none; padding:0; margin:28px 0 0}
.ways li{display:grid; grid-template-columns:220px 1fr; gap:26px; padding:20px 0; border-top:1px solid var(--line-2)}
.ways li:first-child{border-top:0}
.ways li b{font-size:17px; font-weight:700; color:var(--ink)}
.ways li p{color:var(--body); font-size:16.2px; max-width:var(--measure)}
@media (max-width:720px){ .ways li{grid-template-columns:1fr; gap:6px} }

/* dark CTA panel, brand pattern */
.dark{background:var(--ink); color:#fff; border-radius:22px; padding:44px; margin-block:12px 0}
.dark h2{color:#fff; font-size:clamp(26px,3vw,36px); font-weight:800; margin-bottom:12px}
.dark .lede{color:rgba(255,255,255,.76)}
.dark label{color:#fff}
.dark input,.dark textarea{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.2); color:#fff}
.dark input::placeholder,.dark textarea::placeholder{color:rgba(255,255,255,.45)}
.dark .small{color:rgba(255,255,255,.6)}
@media (max-width:600px){ .dark{padding:30px 24px} }

.foot{margin-top:64px; background:var(--ink); color:rgba(255,255,255,.66)}
.foot .in{max-width:1120px; margin:0 auto; padding:34px 22px; display:flex; gap:22px; justify-content:space-between;
          flex-wrap:wrap; font-size:14px}
.foot a{color:#fff}

.done{display:none; border:1px solid var(--green); background:var(--green-dim); border-radius:16px; padding:26px;
      margin-top:22px}
.done h3{font-size:21px; font-weight:700; margin-bottom:8px}
.done p{color:var(--body); font-size:16px}
.done .next{margin-top:14px}
[hidden]{display:none !important}

/* Works at 400px: tighten page gutters and card padding slightly. */
@media (max-width:420px){
  .page{padding-inline:16px}
  .card{padding:20px}
  .dark{padding:22px 18px}
}


/* ── Proof sections added 2026-10-14 ───────────────────────────────────────
   The pages had no evidence on them. These carry the client wall, the numbers
   and the named testimonials that the public site has always had. */
.proof-stats .stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:18px 22px; }
.proof-stats .stats div { padding:2px 0; }
.proof-stats .stats b { display:block; font-size:30px; font-weight:800; letter-spacing:-.02em; color:var(--ink,#121212); line-height:1.1; }
.proof-stats .stats span { display:block; font-size:13px; color:#5c666f; margin-top:4px; line-height:1.45; }

.logos .eyebrow { margin-bottom:16px; }
.logo-wall { display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:22px 26px; align-items:center; }
.logo-wall img { width:100%; height:30px; object-fit:contain; opacity:.62; filter:grayscale(1); transition:opacity .2s ease; }
.logo-wall img:hover { opacity:1; }

.quotes { display:grid; grid-template-columns:repeat(auto-fit,minmax(252px,1fr)); gap:18px; }
.quote { margin:0; background:#fff; border:1px solid #e7e9ec; border-radius:14px; padding:22px 22px 18px; display:flex; flex-direction:column; gap:14px; }
.quote blockquote { margin:0; font-size:16px; line-height:1.55; color:var(--ink,#121212); font-weight:500; }
.quote blockquote::before { content:'"'; color:var(--green,#45ac62); font-weight:800; }
.quote blockquote::after { content:'"'; color:var(--green,#45ac62); font-weight:800; }
.quote figcaption { margin-top:auto; font-size:13px; line-height:1.4; }
.quote figcaption b { display:block; color:var(--ink,#121212); }
.quote figcaption span { color:#6b7480; }

@media (max-width:460px){
  .proof-stats .stats { grid-template-columns:repeat(2,1fr); }
  .proof-stats .stats b { font-size:25px; }
  .logo-wall { grid-template-columns:repeat(3,1fr); gap:18px; }
}