/* kevincollinscats.com: the pages AFTER the buy click (checkout, upsell, downsell, downloads, legal, 404).
   Loaded after site.css and only on those pages, so nothing here can touch the sales page.
   14 Nov 2026 (owner: "can barely see the 2 bump offer items, extremely big everything, clunky to check out"):
   a quicker, smaller checkout with clear bump pictures, and a phone pass (360 / 390 / 430) on every funnel page.
   Rules held: one column on phones, no sideways scroll, text 16px+, inputs 16px+ (no iPhone zoom), tap targets 44px+. */

/* ---------- checkout ---------- */
.co{font-size:17px;line-height:1.5}
.co .wrap{max-width:1080px;padding:0 12px}
.co .strip{padding:6px 10px;font-size:16px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co .strip .cd{padding:0 6px}
.co .bar{border-bottom-width:1px}
.co .bar .wrap{min-height:50px;flex-wrap:nowrap;padding-top:3px;padding-bottom:3px}
.co .brand{font-size:18px;gap:8px;white-space:nowrap;min-height:44px}
.co .brand img{width:32px;height:32px}
.co .secure{font-size:16px;white-space:nowrap}
.co-grid{gap:14px;padding-top:12px;padding-bottom:28px}
.co .panel{padding:16px 14px 18px;border-radius:18px}

.co-steps{list-style:none;display:flex;gap:6px;margin:0 0 12px;padding:0}
.co-steps li{flex:1;font-size:16px;font-weight:700;line-height:1.25;color:var(--muted);padding:0 0 5px;border-bottom:3px solid var(--line)}
.co-steps li.on{color:var(--green);border-color:var(--orange)}

.co .co-h1{font-size:26px;line-height:1.12;margin:0 0 4px}
.co .co-sub{font-size:16.5px;line-height:1.4;margin:0 0 6px;color:var(--ink)}
.co .dl-note{background:none;border-radius:0;padding:0;gap:8px;font-size:16px;line-height:1.4;margin:0 0 14px;color:var(--ink)}
.co .dl-note svg{width:20px;height:20px;margin-top:1px}

.co-fields{display:grid;gap:12px}
.co-field{min-width:0}
.co label.f{font-size:16px;line-height:1.3;margin:0 0 5px}
.co input.f{height:50px;min-height:50px;font-size:17px;padding:8px 14px;border-radius:10px;border-width:2px}
.f-hint{display:block;font-size:16px;font-weight:600;line-height:1.3;color:var(--muted);margin-top:4px}
.co .express-h{margin:0 0 6px}
.co .divider{margin:12px 0 10px}

/* the two order bumps: a cover you can read, the tick box first, the whole row is the label */
.co .bumps{margin:16px 0 0;border:2px dashed var(--orange);border-radius:14px;background:var(--cream);padding:10px 12px 2px}
.co .bump-tag{display:block;background:none;color:var(--btn);border-radius:0;padding:0;margin:0 0 2px;font-size:16px;font-weight:800;line-height:1.3}
.co .bump{grid-template-columns:30px 88px minmax(0,1fr);gap:10px;align-items:center;padding:10px 0;min-height:64px;font-size:16px;line-height:1.4;border-top:1.5px solid #F3D9C2}
.co .bump-tag + .bump{border-top:0;padding-top:6px}
.co .bump picture{display:block;width:88px}
.co .bump img{width:88px!important;height:auto;mix-blend-mode:normal}
.co .bump input{width:30px;height:30px}
.co .bump b:first-child{display:block;font-size:17px;line-height:1.25;margin-bottom:2px}

.co-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:14px 0 12px;font-size:19px;font-weight:800;line-height:1.2}
.co-total b{font-size:24px;font-weight:800;letter-spacing:-.02em}

.co #payment-element{margin:0 0 12px}
.co .btn.big{min-height:64px;padding:8px 14px;font-size:21px;line-height:1.15;letter-spacing:-.01em;box-shadow:0 4px 0 var(--btn-dark),0 12px 22px -12px rgba(185,83,12,.75)}
.co .btn.big small{font-size:16px;margin-top:2px}
.co .setup-note{padding:8px 12px;margin:0 0 10px;border-radius:10px}
.co #paypal-buttons{margin-top:0;min-height:0}
.co .err{font-size:16.5px;margin:8px 0 0}
.co .err:empty{margin:0;min-height:0}
.co .co-guar{grid-template-columns:52px minmax(0,1fr);gap:12px;margin:14px 0 0;font-size:16px;line-height:1.4}
.co .co-guar .seal-s{width:52px;height:52px;font-size:13px}
.co .co-guar .seal-s b{font-size:18px}
.co .co-fine{margin:10px 0 0;line-height:1.45}

/* side panel: the order, short */
.side-h{font-size:19px;letter-spacing:-.01em;margin:0 0 8px}
.side-img img{width:100%;max-width:320px;margin:0 auto}
.co .co-side .panel + .panel{margin-top:14px}
.co #single-img{width:52%;max-width:220px;margin:0 auto}
.co .summary{margin:8px 0 0;padding:2px 12px;border-radius:10px}
.co .summary .row{padding:8px 0;font-size:16px;line-height:1.3}
.co .summary .fr span:first-child{font-size:16px}
.co .summary .tot{font-size:18px}
.side-timer{margin:10px 0 0;background:var(--cream);border-radius:10px;padding:6px 10px;font-size:16px;font-weight:700;line-height:1.3;text-align:center}
.side-timer .cd{font-variant-numeric:tabular-nums;font-weight:800;color:var(--btn);white-space:nowrap}
.co .side-ticks{margin:12px 0 0;gap:7px}
.co .side-ticks li{grid-template-columns:22px minmax(0,1fr);gap:8px;font-size:16px;line-height:1.35}
.co .side-ticks li::before{width:22px;height:22px;background-size:14px}
.co-foot{padding:22px 0 34px}
.co-foot .links{gap:0 6px;margin-bottom:8px}
.co-foot .links a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px 0 0}
.co-foot .wrap{padding:0 16px}

@media (max-width:479px){.co .secure .x{display:none}}
@media (max-width:379px){
  .co .bump{grid-template-columns:30px 80px minmax(0,1fr);gap:8px}
  .co .bump picture{width:80px}
  .co .bump img{width:80px!important}
}
@media (min-width:600px){
  .co .wrap{padding:0 20px}
  .co .panel{padding:20px 22px}
  .co-fields{grid-template-columns:1fr 1fr;gap:14px}
  .co .bump{grid-template-columns:30px 104px minmax(0,1fr);gap:14px}
  .co .bump picture{width:104px}
  .co .bump img{width:104px!important}
}
@media (min-width:960px){
  .co .wrap{padding:0 24px}
  .co-grid{grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:20px;padding-top:14px;align-items:start}
  .co .co-grid aside{top:14px}
  .co .panel{padding:18px 26px 20px}
  .co .co-h1{font-size:28px}
  .co-steps{margin-bottom:10px}
  .co-steps li{flex:none;padding-right:18px}
  .co-steps{gap:0}
  .co .dl-note{margin-bottom:12px}
  .co .bumps{margin-top:14px;padding:8px 14px 0}
  .co .bump{grid-template-columns:30px 96px minmax(0,1fr);gap:16px;padding:6px 0;font-size:16.5px}
  .co .bump-tag + .bump{padding-top:4px}
  .co .bump picture{width:96px}
  .co .bump img{width:96px!important}
  .co .bump:hover input{box-shadow:0 0 0 4px rgba(185,83,12,.16)}
  .co-total{margin:12px 0 10px}
  .co .co-side .panel{padding:16px 20px 18px}
  .side-img img{max-width:270px}
}

/* ---------- upsell / downsell ---------- */
.of .progress{padding:10px 16px 0;gap:6px}
.of .progress span{font-size:16px;padding:4px 2px 5px;border-bottom-width:3px;font-weight:700}
.of main.narrow{padding-left:16px;padding-right:16px;padding-bottom:40px}
.of .offer-top{padding:12px 0 0}
.of .okline{background:none;box-shadow:none;border-radius:0;padding:0;margin:0 0 10px;gap:8px;font-size:16.5px}
.of .okline i{width:24px;height:24px;font-size:16px}
.of .offer-h1{font-size:clamp(27px,7.2vw,46px);line-height:1.1;margin:0 0 8px}
.of .lede{font-size:clamp(17.5px,4.4vw,21px);line-height:1.45;margin:0 auto}
.of .offer-img{margin:10px 0 0}
.of .offer-img img{width:auto;max-width:min(100%,440px);max-height:232px;margin:0 auto}
.of .btn{min-height:66px;padding:10px 16px;font-size:21px}
.of .btn small{font-size:16px}
.of #yes-top{margin-top:12px}
.of .decline{min-height:48px;margin:6px 0 0;padding:6px 8px;font-size:17px;line-height:1.3}
.of h2{font-size:clamp(26px,6.4vw,40px);margin:26px 0 0}
.of .book-sec{padding:18px 16px;margin-top:14px;border-radius:18px}
.of .book-sec h3{font-size:clamp(20px,4.6vw,24px)}
.of .side-ticks li{font-size:17px}
.of .photo{border-radius:18px}
.of .offer-box{padding:18px 16px 12px;margin-top:18px;border-radius:22px}
.of .offer-box .price-now{font-size:44px;margin:2px 0 4px}
.of .only{display:block;font-weight:800;font-size:16px;line-height:1.3;color:var(--green);margin:0}
.of .offer-box .btn{margin-top:12px}
.of .offer-box .co-guar{grid-template-columns:52px minmax(0,1fr);gap:12px;margin:14px 0 0;font-size:16px;line-height:1.4}
.of .offer-box .co-guar .seal-s{width:52px;height:52px;font-size:13px}
.of .offer-box .co-guar .seal-s b{font-size:18px}
.of .err:empty{margin:0;min-height:0}
.of .ds{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:center;margin-top:12px}
.of .ds img{width:auto;max-height:230px;margin:0 auto}
.of .ds .book-sec{margin:0}
.of .ds-photo{margin:18px auto 0;max-width:520px}
@media (min-width:760px){
  .of main.narrow{padding-left:32px;padding-right:32px}
  .of .offer-img img{max-height:330px}
  .of .ds{grid-template-columns:240px minmax(0,1fr);gap:26px}
  .of .ds img{max-height:300px}
  .of .offer-box{padding:24px 28px 16px}
  .of .book-sec{padding:22px 24px}
}

/* ---------- legal pages, 404, unknown download link ---------- */
.lg .bar .wrap{min-height:54px;flex-wrap:nowrap;padding:6px 16px}
.lg .brand{font-size:18px;white-space:nowrap;min-height:44px}
.lg .brand img{width:34px;height:34px}
.lg main.legal{padding:16px 12px 40px}
.lg.plain .legal .panel{padding:20px 16px;border-radius:18px;overflow-wrap:break-word}
.lg .legal h1{font-size:clamp(28px,7.4vw,42px);line-height:1.1}
.lg .legal h3{font-size:20px;margin-top:1.2em}
.lg .legal p,.lg .legal li{font-size:17.5px;line-height:1.55}
.lg .legal .small{font-size:16px}
.lg .legal a.btn{min-height:60px;font-size:20px}
.lg .back{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:17px}
@media (min-width:760px){
  .lg main.legal{padding:26px 32px 60px}
  .lg.plain .legal .panel{padding:28px 32px}
}

/* ---------- download page (the rest of its styles sit with the page in worker.js) ---------- */
.dl .bar .wrap{min-height:54px;flex-wrap:nowrap;padding:6px 16px}
.dl .brand{font-size:18px;white-space:nowrap;min-height:44px}
.dl .brand img{width:34px;height:34px}
.dl main.wrap{padding-left:12px;padding-right:12px}
@media (min-width:760px){.dl main.wrap{padding-left:32px;padding-right:32px}}
.dl .dl-hero{margin:14px 0 16px;padding:22px 16px 20px;border-radius:20px}
.dl .okc{width:52px;height:52px;margin-bottom:10px}
.dl .okc svg{width:28px;height:28px}
.dl .dl-hero h1{font-size:clamp(28px,6vw,44px)}
.dl .dl-hero p{font-size:17.5px;margin-bottom:14px}
.dl .dl-hero .btn{min-height:66px;font-size:21px}
.dl .dl-hero .btn small{font-size:16px}
.dl .dl-hero .note{margin-top:10px}
.dl .bm{display:block;background:none;border-radius:0;padding:0;margin-top:10px;line-height:1.45;overflow-wrap:anywhere}
.dl main h2{font-size:26px!important;margin:22px 0 10px!important}
.dl .bk,.dl .box{border-radius:18px}
.dl .bk{padding:14px;gap:14px}
.dl .bk img,.dl .au-top img{width:84px}
.dl .au-top{gap:14px}
.dl .box{padding:16px}
.dl .box p{font-size:17px}
.dl .b1,.dl .b2{justify-content:center;text-align:center;line-height:1.2;padding:8px 18px}
.dl .tracks li{font-size:16.5px;line-height:1.35}
.dl .tracks .b2{min-height:46px;padding:6px 18px}
.dl .box td{font-size:16.5px}
.dl .foot{line-height:1.5;overflow-wrap:anywhere}
@media (max-width:599px){
  /* buttons run the full width of the card, under the cover, side by side: big, easy thumb targets */
  .dl .bk .bk-b{margin-left:-98px;gap:10px;margin-top:12px}
  .dl .bk .bk-b a{flex:1 1 0;min-height:50px;white-space:nowrap}
  .dl .au-top .b1{display:flex;margin:12px 0 0 -98px;min-height:52px}
  .dl .tracks li{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:12px 0}
  .dl .tracks .bk-b{gap:10px}
  .dl .tracks .bk-b a{flex:1 1 0;min-height:48px}
}
@media (min-width:760px){
  .dl .dl-hero{padding:34px 40px 28px;margin:22px 0 20px}
  .dl .bk{padding:16px}
  .dl .box{padding:20px 22px}
}

/* downsell on a phone: picture, then the price and the yes / no, then what is in the book */
@media (max-width:759px){
  .of[data-step="downsell"] main{display:flex;flex-direction:column}
  .of[data-step="downsell"] .ds{display:contents}
  .of[data-step="downsell"] .ds picture{order:1;margin-top:10px}
  .of[data-step="downsell"] .ds img{max-height:176px}
  .of[data-step="downsell"] .offer-box{order:2;margin-top:12px}
  .of[data-step="downsell"] .ds .book-sec{order:3;margin-top:16px}
  .of[data-step="downsell"] .ds-photo{order:4;margin-left:0;margin-right:0}
}
.of .btn > span:first-child{text-wrap:balance}
@media (max-width:479px){.of .btn{font-size:20px;padding:10px 22px}}