/* NoFussDeal buying-guide styles.
   Loaded on top of editorial.css. A guide answers "how do I choose one", so the
   page is built around the decision: what it costs, what matters, what goes
   wrong, and what we'd buy. */

/* ---------- masthead ---------- */
.ghead{background:var(--cream);border-bottom:1px solid var(--rule);padding:34px 0 30px}
.ghead-in{display:grid;grid-template-columns:1fr 380px;gap:48px;align-items:center}
.ghead-copy{min-width:0}
.ghead .kicker{display:inline-block;background:var(--teal);color:#fff;padding:6px 12px;
  font:800 11px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.13em;text-transform:uppercase}
.ghead h1{margin:16px 0 0;max-width:20ch;
  font:400 clamp(30px,4vw,48px)/1.07 "Iowan Old Style","Palatino Linotype",Palatino,Charter,Georgia,serif;
  letter-spacing:-.022em;color:var(--ink);text-wrap:balance}
.gstand{margin:15px 0 0;max-width:60ch;font-size:18.5px;line-height:1.55;color:var(--body)}
.gmeta{display:flex;flex-wrap:wrap;gap:6px 22px;margin:20px 0 0;padding:14px 0 0;
  border-top:1px solid var(--rule);list-style:none;
  font:400 13px/1.5 "Helvetica Neue",Arial,sans-serif;color:var(--muted)}
.gmeta b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

.ghead-pick{display:block;background:var(--surface);border:1px solid var(--hairline);
  text-decoration:none;color:inherit;transition:border-color .18s,box-shadow .18s}
.ghead-pick:hover{border-color:var(--teal);box-shadow:0 6px 24px rgba(60,48,34,.12)}
.ghead-pick img{display:block;width:100%;aspect-ratio:1/1;object-fit:contain;padding:26px 26px 8px}
.ghp-tag{display:block;padding:0 18px 16px}
.ghp-lab{display:block;font:800 10px/1 "Helvetica Neue",Arial,sans-serif;
  letter-spacing:.13em;text-transform:uppercase;color:var(--teal);margin-bottom:6px}
.ghead-pick b{display:block;font:400 16px/1.35 Charter,Georgia,serif;color:var(--ink);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.ghp-facts{display:flex;align-items:baseline;gap:10px;margin-top:9px}
.ghp-score{background:var(--teal);color:#f2fbfa;padding:2px 8px;
  font:400 14px/1.4 Georgia,serif;font-variant-numeric:tabular-nums}
.ghp-price{font:400 19px/1 Georgia,serif;color:var(--ink);font-variant-numeric:tabular-nums}
@media(max-width:900px){
  .ghead-in{grid-template-columns:1fr;gap:26px}
  .ghead-pick{max-width:300px}
  .ghead h1{max-width:22ch}
}
/* On the header band (editorial.css). The kicker was a teal badge, which
   disappears on teal, so it turns mustard. */
.ghead{background:var(--band);border-bottom:0}
.ghead .kicker{background:var(--mustard);color:#241a00}
.ghead h1{color:#fff}
.gstand{color:var(--band-text)}
.gmeta{border-top-color:var(--band-rule);color:var(--band-muted)}
.gmeta b,.gmeta a{color:#fff}
.ghead-pick{border-color:transparent}
.ghead-pick:hover{border-color:var(--mustard);box-shadow:0 8px 28px rgba(0,0,0,.28)}

/* ---------- section bar ---------- */
.gnav{position:sticky;top:0;z-index:40;background:var(--surface);
  border-bottom:1px solid var(--rule);box-shadow:0 1px 0 rgba(60,48,34,.04)}
.gnav-in{display:flex;align-items:center;gap:4px;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.gnav-in::-webkit-scrollbar{display:none}
.gnav a{flex:0 0 auto;padding:14px 13px;text-decoration:none;white-space:nowrap;
  font:700 11.5px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);
  border-bottom:2px solid transparent;transition:color .18s,border-color .18s}
.gnav a:hover{color:var(--ink)}
.gnav a.here{color:var(--ink);border-bottom-color:var(--teal)}
.gnav-buy{margin-left:auto;background:var(--flame-deep);color:#fff !important;
  border-bottom:0 !important;padding:11px 16px !important;letter-spacing:.07em}
.gnav-buy:hover{background:#8d280b}

main.wrap{padding-bottom:60px}
main.wrap section{padding:40px 0 0}
main.wrap section,.glead{scroll-margin-top:62px}

/* ---------- the short version ---------- */
main.wrap section.glead{border-left:4px solid var(--teal);background:var(--surface);
  border-top:1px solid var(--hairline);border-right:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  padding:22px 26px;margin:30px 0 0}
.glead h2{margin:0 0 9px;font:800 11px/1 "Helvetica Neue",Arial,sans-serif;
  letter-spacing:.15em;text-transform:uppercase;color:var(--teal)}
.glead h2::before{content:none}
.glead p{margin:0;font:400 20px/1.5
  "Iowan Old Style","Palatino Linotype",Palatino,Charter,Georgia,serif;color:var(--ink)}

/* ---------- price tiers ----------
   The page's argument: what the money buys, and the product we would buy with
   it. Stored price_ranges and the tier tag on each recommended product are two
   halves of one answer, so they are shown as one. */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin:0;padding:0;list-style:none}
.tier{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--hairline);box-shadow:0 1px 2px rgba(60,48,34,.05);
  padding:20px 20px 18px}
.tier-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:13px;border-bottom:1px solid var(--hairline)}
.tier-lab{font:800 10.5px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.tier-range{font:400 26px/1 Georgia,serif;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* The middle tier is where most buyers land, so it carries the accent. */
.tier:nth-child(2){border-color:var(--teal)}
.tier:nth-child(2) .tier-lab,.tier:nth-child(2) .tier-range{color:var(--teal)}
.tier-expect{margin:14px 0 0;font:400 15px/1.6 Charter,Georgia,serif;color:var(--body)}
.tier-pick{display:flex;align-items:center;gap:13px;margin:auto 0 0;padding-top:16px;
  border-top:1px solid var(--hairline);text-decoration:none;color:inherit}
.tier-pick img{width:64px;height:64px;object-fit:contain;flex:0 0 auto}
.tier-pick>span{min-width:0}
.tp-lab{display:block;font:800 9.5px/1 "Helvetica Neue",Arial,sans-serif;
  letter-spacing:.12em;text-transform:uppercase;color:var(--flame-deep);margin-bottom:5px}
.tier-pick b{display:block;font:400 14.5px/1.3 Charter,Georgia,serif;color:var(--ink);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.tier-pick:hover b{color:var(--flame-deep)}
.tp-facts{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.tp-score{background:var(--teal);color:#f2fbfa;padding:2px 6px;
  font:400 12px/1.35 Georgia,serif;font-variant-numeric:tabular-nums}
.tp-price{font:600 14.5px/1 "Helvetica Neue",Arial,sans-serif;color:var(--ink);
  font-variant-numeric:tabular-nums}
@media(max-width:900px){.tiers{grid-template-columns:1fr}}

/* ---------- the reading column ----------
   These sections run the full width of the page rather than sitting in a
   centred measure. The paragraph caps that used to stop the text at 68-74
   characters are released here, so a line runs the whole 1144px column instead
   of leaving 340-450px empty down the right.

   Long lines need more leading than short ones - the eye has further to travel
   back to the left edge and needs the extra space to find the right row - so
   the full-width paragraphs get a taller line-height than the default. */
.gtext .prose p,
.gtext .feats p,
.gtext .mistakes p,
.gtext .faq p{max-width:none;line-height:1.78}

/* ---------- prose ---------- */
.prose p{margin:0 0 1em;font-size:17.5px;line-height:1.68;color:var(--body);max-width:72ch}
.prose p:last-child{margin:0}

/* ---------- key features ---------- */
.feats{list-style:none;margin:0;padding:0;counter-reset:feat}
.feats>li{display:grid;grid-template-columns:56px 1fr;gap:22px;
  padding:20px 0;border-bottom:1px solid var(--hairline)}
.feats>li:last-child{border-bottom:0}
/* The numeral is structure a reader counts by, so it has to be legible;
   --faint lands at 2.56:1 on white. */
.feat-n{font:400 26px/1 Georgia,serif;color:var(--muted);
  font-variant-numeric:tabular-nums;text-align:right}
.feats h3{margin:0 0 7px;font:400 21px/1.25
  "Iowan Old Style","Palatino Linotype",Palatino,Charter,Georgia,serif;color:var(--ink)}
.feats p{margin:0;font:400 16.5px/1.62 Charter,Georgia,serif;color:var(--body);max-width:68ch}
@media(max-width:620px){
  .feats>li{grid-template-columns:36px 1fr;gap:14px}
  .feat-n{font-size:19px}
  .feats h3{font-size:18px}
}

/* ---------- mistakes ----------
   Framed as warnings: the con colour on the rule, so the section reads at a
   glance as the things that go wrong. */
.mistakes{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.mistakes>li{background:var(--surface);border:1px solid var(--hairline);
  border-left:4px solid var(--con);padding:18px 20px}
.mistakes h3{margin:0 0 8px;font:400 19px/1.35
  "Iowan Old Style","Palatino Linotype",Palatino,Charter,Georgia,serif;color:var(--ink)}
.mistakes p{margin:0 0 .6em;font:400 15.5px/1.6 Charter,Georgia,serif;color:var(--body);max-width:74ch}
.mistakes p:last-child{margin:0}

/* ---------- our picks ---------- */
.gpicks{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:22px;margin:0;padding:0;list-style:none}
.gpicks>li{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--hairline);box-shadow:0 1px 2px rgba(60,48,34,.05);
  padding:18px 18px 16px;transition:border-color .18s,box-shadow .18s}
.gpicks>li:hover{border-color:var(--rule);box-shadow:0 6px 20px rgba(60,48,34,.10)}
.gp-shot{display:block;aspect-ratio:1/1;margin-bottom:14px}
.gp-shot img{width:100%;height:100%;object-fit:contain}
.gp-lab{font:800 10px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--flame-deep)}
.gpicks h3{margin:8px 0 0;font:400 19px/1.3
  "Iowan Old Style","Palatino Linotype",Palatino,Charter,Georgia,serif;color:var(--ink)}
.gpicks h3 a{color:inherit;text-decoration:none}
.gpicks h3 a:hover{color:var(--flame-deep)}
.gp-note{margin:9px 0 0;font:400 14.5px/1.55 Charter,Georgia,serif;color:var(--muted);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.gp-foot{display:flex;align-items:baseline;gap:11px;margin:auto 0 0;padding-top:14px}
.gp-price{font:400 22px/1 Georgia,serif;color:var(--ink);font-variant-numeric:tabular-nums}
.gp-score{background:var(--teal);color:#f2fbfa;padding:2px 7px;
  font:400 13px/1.4 Georgia,serif;font-variant-numeric:tabular-nums}
.gp-cta{display:block;margin:14px 0 0;text-align:center;padding:12px 10px;
  font-size:11px;letter-spacing:.06em;white-space:normal}

/* ---------- faq ---------- */
.faq{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;padding:15px 34px 15px 0;list-style:none;min-height:44px;
  font:400 18.5px/1.4 "Iowan Old Style","Palatino Linotype",Palatino,Charter,Georgia,serif;
  color:var(--ink);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font:400 22px/1 Georgia,serif;color:var(--teal)}
.faq[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--teal)}
.faq p{margin:0;padding:0 0 18px;font-size:16.5px;line-height:1.65;color:var(--body);max-width:72ch}

/* ---------- closing ---------- */
main.wrap section.gverdict{margin-top:44px;padding:32px 30px 30px;
  background:var(--ink);color:#f3ece2}
.gverdict .sechead{border-bottom-color:var(--teal)}
.gverdict .sechead h2{color:#fff}
.gverdict .sechead h2::before{color:var(--teal)}
.gverdict .prose p{color:#ded4c7}
.gv-cta{display:inline-block;margin:22px 0 0;white-space:normal;max-width:100%;
  line-height:1.4;text-align:center}
@media(max-width:620px){
  main.wrap section.gverdict{padding:26px 20px}
  .gnav a{padding:12px 10px;font-size:10.5px}
  .gnav-buy{padding:10px 13px !important}
}

/* A tier with nothing in the bracket says so, rather than sitting visibly
   emptier than its neighbours with no explanation. */
.tier-none{margin:auto 0 0;padding-top:16px;border-top:1px solid var(--hairline);
  font:400 14px/1.55 "Helvetica Neue",Arial,sans-serif;color:var(--muted)}