/* The Solo Player's Guide sales page. Loaded after /positions/positions.css, which carries the brand, the header,
   the hero, the cards, the offer banner, the FAQ, the resend form and the "check your email" screen.
   Only what this page adds is here. */

/* header: the one button stays on a phone, where the positions header drops it */
.top .btn-s{display:inline-flex;align-items:center;min-height:44px}

/* the buy boxes */
.buybox{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.buybox .buy-msg{max-width:340px}
.buybox.wide{align-items:stretch;margin-top:auto;padding-top:10px}
.buybox.wide .buy-msg{max-width:none}
button.btn{cursor:pointer}
button.btn[disabled],.btn-dark[disabled]{cursor:default}

/* the first screen: what it is, what you get with the real numbers, a real page on a phone, the price and the button.
   Built for a 390 by 700 phone first (an in-app browser), so the button is on screen before any scrolling. */
.first{display:grid;gap:14px;padding-top:18px;padding-bottom:44px}
.first h1{margin-top:10px;font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:clamp(34px,9.5vw,92px);line-height:.9;letter-spacing:-.005em;text-transform:uppercase}
.first h1 span{color:#DF002D}
.first-lede{margin-top:8px;font-size:16px;line-height:1.45;color:#C4C8D0;max-width:560px}
.first-row{display:grid;grid-template-columns:minmax(0,1fr) 116px;gap:14px;align-items:center}
.got{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.got li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:8px;align-items:center;padding:8px 0;border-top:1px solid #2A2E38;font-size:14px;line-height:1.3;color:#E4E6EA}
.got li:first-child{border-top:0;padding-top:2px}
.got b{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:30px;line-height:1;color:#DF002D}
.mini{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.mini figcaption{font-size:10px;letter-spacing:.06em}
.mini-phone{width:100%;padding:4px;background:#07080A;border:1px solid #2A2E38;border-radius:20px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.mini-phone img{display:block;width:100%;height:auto;aspect-ratio:1/2;border-radius:16px}
.mini figcaption{text-align:center;white-space:nowrap}
.first-buy .buybox{padding-top:0}
.first-buy .btn{width:100%}
.first-note{margin:8px 0 0;font-size:14px;line-height:1.4;color:#9AA0AC}

/* what you get: one row per thing, with its count, and a real page under the ones that have a picture */
.kit-i{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:16px;padding:24px 0;border-top:1px solid #2A2E38}
.kit-i:first-child{border-top:0;padding-top:0}
.kit-i .n{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:52px;line-height:.82;color:#DF002D}
.kit-t .t{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:30px;line-height:.95;text-transform:uppercase}
.kit-t p{margin-top:8px;font-size:18px;line-height:1.45;color:#C4C8D0;max-width:620px}
.kit-shot{grid-column:2;margin:18px 0 0;max-width:360px}
.kit-shot img{display:block;width:100%;height:auto;border:1px solid #2A2E38;border-radius:12px;background:#151820}
.kit-shot figcaption{margin-top:8px}
.kit-buy{margin-top:36px;max-width:520px}
.sample{margin:16px 0 0;font-size:16px;line-height:1.45;color:#C4C8D0}
.sample a{display:inline-block;margin-top:2px;padding:10px 0;font-weight:700;color:#FFFFFF;text-decoration:underline;text-underline-offset:3px}

/* what players ask me */
.ask{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:32px;padding:22px 0;border-top:1px solid #2A2E38}
.ask-q{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:32px;line-height:.95;text-transform:uppercase}
.ask p{font-size:18px;line-height:1.45;color:#C4C8D0}
/* where the evidence is thin */
.thin{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.thin .stack{gap:16px}
.thin-p{font-size:19px;color:#C4C8D0}
.quotes{display:flex;flex-direction:column;gap:12px}
.quote{padding:22px 24px;background:#151820;border:1px solid #2A2E38;border-left:3px solid #DF002D;border-radius:10px}
.quote .q{margin-top:8px;font-size:21px;line-height:1.35;font-weight:500}

/* the fifteen chapters */
.part{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start;padding:40px 0;border-top:1px solid #2A2E38}
.part:last-child{padding-bottom:0}
.part-head{margin-bottom:10px}
.part-head .c{margin-top:8px;font-weight:900;font-size:52px;line-height:.92;text-transform:uppercase}
.ch{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:start;padding:16px 0;border-top:1px solid #2A2E38}
.part-head+.ch{border-top:0}
.ch .i{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;font-size:40px;line-height:.9;color:#DF002D}
.ch .t{font-weight:700;font-size:20px;line-height:1.25}
.ch .o{margin-top:4px;font-size:17px;line-height:1.4;color:#C4C8D0}
.part-pic{position:sticky;top:24px}
.part-pic img{display:block;width:100%;height:auto;border-radius:10px}
.part-pic .cap .m{display:block;margin-bottom:6px}

/* the price */
.era{margin:0;font-size:15px;color:#C4C8D0}
.offer.paid .btn{width:100%}
.isnt{padding:14px 0;border-top:1px solid #2A2E38;font-size:17px;color:#C4C8D0}
.offer-head+.isnt{border-top:0;padding-top:0}
.isnt .b{margin-bottom:4px;font-weight:700;font-size:19px;color:#FFFFFF}
.names{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.names span{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:26px;line-height:1;text-transform:uppercase;padding:10px 14px 12px;background:#0E1013;border-radius:6px;white-space:nowrap}

/* the edition: backs (with the six packs) or forwards (without them), at the top of the price box */
[data-ed][hidden],[data-edition][hidden]{display:none!important}
.edition{margin:0 0 6px;padding:0;border:0;min-width:0}
.edition legend{padding:0;margin-bottom:10px}
.ed-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ed-opts label{position:relative;display:flex;cursor:pointer}
.ed-opts input{position:absolute;opacity:0;width:1px;height:1px}
.ed-opts span{flex:1;display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px 12px;border:1px solid #2A2E38;border-radius:8px;background:#0E1013;color:#C4C8D0;font-size:16px;font-weight:600;line-height:1.25;text-align:center}
.ed-opts input:checked+span{border-color:#DF002D;background:#DF002D;color:#FFFFFF}
.ed-opts input:focus-visible+span{outline:2px solid #FFFFFF;outline-offset:2px}
.ed-note{margin:10px 0 0;font-size:15px;line-height:1.45;color:#C4C8D0}

/* the last button */
.final-r{display:flex;flex-direction:column;gap:12px;align-items:flex-end;text-align:right}
.final .btn-dark{margin-top:0}
.final .era,.final .buy-msg{color:#FFFFFF}
.up-all .w span[data-note]{display:block;max-width:820px}
/* a link inside a sentence: underlined, and tall enough to tap */
.faq .a a,.done a,.up-all a{display:inline-block;padding:12px 2px;margin:-12px -2px;text-decoration:underline;text-underline-offset:3px}

@media (min-width:701px){
  .first{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"l phone" "items phone" "buy phone";column-gap:56px;row-gap:24px;padding-top:64px;padding-bottom:80px;align-items:start}
  .first-l{grid-area:l}
  .first-row{display:contents}
  .got{grid-area:items;display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
  .got li{grid-template-columns:56px minmax(0,1fr);padding:14px 0;font-size:17px;border-top:1px solid #2A2E38}
  .got li:first-child{padding-top:14px;border-top:1px solid #2A2E38}
  .got b{font-size:46px}
  .mini{grid-area:phone;justify-self:center;width:100%;max-width:300px}
  .mini-phone{padding:10px;border-radius:38px}
  .mini-phone img{border-radius:28px}
  .first-buy{grid-area:buy;max-width:440px}
  .first-lede{font-size:21px}
}
@media (min-width:1001px){
  .bundle{grid-template-columns:1.1fr .9fr}
  .kit-i{grid-template-columns:96px minmax(0,1fr) 340px;column-gap:28px}
  .kit-i .n{font-size:64px}
  .kit-shot{grid-column:3;grid-row:1/3;margin:0}
}

@media (max-width:1000px){
  .ask{gap:20px}
  .thin{grid-template-columns:1fr;gap:28px}
  .part{grid-template-columns:1fr;gap:24px;padding:32px 0}
  .part-pic{position:static;max-width:560px}
  .names{justify-content:flex-start}
  .final-r{align-items:flex-start;text-align:left}
}
@media (max-width:700px){
  .top .btn-s{display:inline-flex;padding:0 16px}
  .w.first{padding-left:16px;padding-right:16px}
  .ask{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .ask-q{font-size:26px}
  .ask p,.kit-t p{font-size:17px}
  .kit-i{grid-template-columns:60px minmax(0,1fr);column-gap:12px;padding:20px 0}
  .kit-i .n{font-size:42px}
  .kit-t .t{font-size:26px}
  .kit-shot{grid-column:1/-1;max-width:none;margin-top:14px}
  .buybox{align-items:stretch}
  .buybox .buy-msg{max-width:none}
  .thin-p{font-size:17px}
  .quote{padding:18px}
  .quote .q{font-size:19px}
  .part{padding:28px 0}
  .part-head .c{font-size:44px}
  .ch{grid-template-columns:40px 1fr}
  .ch .i{font-size:34px}
  .ch .t{font-size:19px}
  .ch .o{font-size:16px}
  .isnt .b{font-size:18px}
  .names span{font-size:22px;padding:8px 12px 10px}
  .final-r{align-items:stretch}
}