/* guides.css: the reading column for /guides/.
   Sits on top of home.css for the tokens. Header and footer come from site.js,
   the same as /compare/, so the nav lives in one place. */

.g-wrap { max-width:760px; margin:0 auto; padding:52px 24px 80px; }

.g-crumb { font-size:12.5px; color:var(--txt3); margin-bottom:20px; }
.g-crumb a { color:var(--txt2); text-decoration:none; }
.g-crumb a:hover { color:var(--accent); }
.g-crumb span { margin:0 4px; }

.g-wrap h1 { font-size:38px; font-weight:500; letter-spacing:-.032em;
  line-height:1.13; margin-bottom:16px; }
.g-lede { font-size:18px; line-height:1.6; color:var(--txt2); margin-bottom:14px; }

.g-body { margin-top:34px; }
.g-body h2 { font-size:22px; font-weight:500; letter-spacing:-.024em;
  margin:38px 0 12px; padding-top:26px; border-top:1px solid var(--border); }
.g-body h2:first-child { margin-top:0; padding-top:0; border-top:0; }
.g-body p { font-size:16px; line-height:1.72; color:var(--txt2); margin-bottom:15px; }
.g-body b, .g-body strong { color:var(--txt); font-weight:600; }
.g-body a { color:var(--accent); }
.g-body ul { list-style:none; margin:0 0 18px; }
.g-body li { font-size:16px; line-height:1.65; color:var(--txt2);
  padding:7px 0 7px 20px; position:relative; }
.g-body li:before { content:""; position:absolute; left:0; top:16px;
  width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.75; }
.g-body blockquote { border-left:2px solid var(--accent); padding:2px 0 2px 18px;
  margin:0 0 16px; font-size:16.5px; line-height:1.6; color:var(--txt); }

.g-body table { width:100%; border-collapse:collapse; margin:18px 0 22px; }
.g-body th { text-align:left; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--txt3); font-weight:500;
  padding:0 14px 10px 0; border-bottom:1px solid var(--border); }
.g-body td { font-size:14.5px; line-height:1.5; color:var(--txt2);
  padding:11px 14px 11px 0; border-bottom:1px solid var(--border); vertical-align:top; }
.g-body td:first-child { color:var(--txt); }

.g-faq { margin-top:52px; padding-top:30px; border-top:1px solid var(--border); }
.g-faq h2 { font-size:22px; font-weight:500; letter-spacing:-.024em; margin-bottom:18px; }
.g-q { padding:15px 0; border-bottom:1px solid var(--border); }
.g-q:last-child { border-bottom:0; }
.g-q h3 { font-size:15.5px; font-weight:600; margin-bottom:6px; }
.g-q p { font-size:15px; line-height:1.65; color:var(--txt2); }

.g-next { margin-top:46px; }
.g-next-h { font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--txt3); margin-bottom:14px; }
.g-next a, .g-list a { display:block; padding:17px 0;
  border-top:1px solid var(--border); text-decoration:none; }
.g-next a:last-child, .g-list a:last-child { border-bottom:1px solid var(--border); }
.g-next b, .g-list b { display:block; font-size:16.5px; font-weight:500;
  color:var(--txt); letter-spacing:-.016em; margin-bottom:4px; }
.g-next span, .g-list span { display:block; font-size:14px; line-height:1.55; color:var(--txt2); }
.g-next a:hover b, .g-list a:hover b { color:var(--accent); }

.g-list { margin-top:30px; }

/* home.css styles .p and .c inside .code but has no failure colour, and the red
   IS the point of the audit output. */
.g-body .code .bad { color:#ff6b60; }

.g-cta { margin-top:52px; padding-top:30px; border-top:1px solid var(--border); }
.g-cta h2 { font-size:22px; font-weight:500; letter-spacing:-.024em; margin-bottom:14px; }
.g-cta p { font-size:15px; line-height:1.7; color:var(--txt2); margin-top:12px; }
.g-cta a { color:var(--accent); }


@media (max-width:640px) {
  .g-wrap h1 { font-size:30px; }
  .g-lede { font-size:16.5px; }
      }