/* Kevin Collins Dogs: everything after the click (checkout, upsell, downsell, download page, legal pages, not-found).
   Loaded AFTER site.css on those pages only; the sales page does not load it. 14 Nov 2026.
   Aim: quick, not clunky. One column on phones, 16px+ text, 44px+ tap targets, pay / yes buttons full width,
   no pills, no patterns, no highlight blocks. */

/* ---------- shared ---------- */
body{overflow-wrap:break-word}
.brand{min-height:44px}
/* one-line step marker with a thin 3-part bar (replaces the old pill steps) */
.fstep{margin:0 0 12px;font-size:16px;line-height:1.3;font-weight:500;color:var(--navy)}
.fstep b{font-weight:700}
.fstep::after{content:"";display:block;height:3px;margin-top:7px;border-radius:2px;background:linear-gradient(90deg,var(--navy) 0 33.34%,rgba(22,32,58,.16) 0)}
.fstep.s2::after{background:linear-gradient(90deg,var(--navy) 0 66.67%,rgba(22,32,58,.2) 0)}
.fstep.s3::after{background:var(--navy)}
/* footer links: real tap targets */
footer,.co-foot{font-size:16px}
footer a{display:inline-block;padding:10px 0;min-height:44px;min-width:44px;margin-right:22px}
footer p{margin:0 0 4px}
.decline{min-height:48px;padding:12px 10px;color:var(--navy);font-size:17px}
.co-guar{color:var(--navy)}

/* ---------- checkout ---------- */
.co{background:#FBF7EE;font-size:16px;line-height:1.45}
.co .offerbar{font-size:16px;padding:6px 12px;line-height:1.3}
.co .topbrand{padding:5px 0;background:#fff}
.co .topbrand .wrap{flex-wrap:nowrap}
.co .brand{font-size:17px;gap:8px;white-space:nowrap}
.co .brand img{width:32px;height:32px;border-width:0}
.co .lock{font-size:16px;gap:6px;white-space:nowrap}
.co .co-grid{gap:18px;padding-top:14px;padding-bottom:36px}
.co .panel{padding:16px;border-radius:16px;box-shadow:0 10px 30px -22px rgba(22,32,58,.35)}
.co .fstep{margin-bottom:10px}
.co #co-h1{font-size:25px;line-height:1.15;margin:0 0 4px}
.co .dlnote{background:none;padding:0;margin:0;font-size:16px;line-height:1.4;border-radius:0}
.co .express-h{font-size:17px;margin:12px 0 8px}
.co .or{margin:12px 0;font-size:16px}
.co .flds{display:grid;gap:0 16px}
.co label.f{font-size:16px;margin:12px 0 5px;line-height:1.3}
.co label.f i{font-weight:400}
.co input.f{font-size:17px;min-height:48px;height:48px;padding:8px 13px;border-width:1.5px;border-radius:10px}
.co input.f:focus{box-shadow:0 0 0 3px var(--sun-l)}
/* the two add-ons: a clear tablet picture, the tick box and name on top, one short line under; the whole row ticks the box */
.co .bumps{margin:16px 0 0;border:2px dashed var(--navy);border-radius:14px;background:#FFF6DC;overflow:hidden}
.co .bumps-h{margin:0;background:var(--navy);color:var(--cream);font-weight:600;font-size:16px;line-height:1.3;padding:7px 14px}
.co .bumps-h i{font-weight:400}
.co .bump1{display:grid;grid-template-columns:84px minmax(0,1fr);grid-template-areas:"img bh" "img bt";grid-template-rows:auto 1fr;gap:6px 12px;align-items:start;padding:12px;cursor:pointer;font-size:16px;line-height:1.4;-webkit-tap-highlight-color:transparent}
.co .bump1+.bump1{border-top:1.5px dashed rgba(22,32,58,.3)}
.co .bump1 img{grid-area:img;width:84px;height:auto;align-self:center;border-radius:0;box-shadow:none;filter:drop-shadow(0 5px 6px rgba(22,32,58,.28))}
.co .bump1 .bh{grid-area:bh;display:flex;align-items:center;gap:10px;font-size:18px;line-height:1.2;min-height:30px}
.co .bump1 .bt{grid-area:bt}
.co .bump1 input{flex:none;width:28px;height:28px;margin:0;accent-color:var(--navy);cursor:pointer}
.co .bump1 .bp{background:var(--sun);padding:0 6px;border-radius:6px;white-space:nowrap;font-weight:700}
.co .bump1:has(input:checked){background:#FCEBB4}
.co .bump1:has(input:focus-visible){outline:3px solid var(--navy);outline-offset:-3px}
.co .paytot{margin:14px 0 8px;font-size:17px}
.co .paytot b{font-weight:700}
.co #payment-element{margin:0 0 12px}
.co .btn.big{min-height:60px;width:100%;max-width:none;font-size:20px;line-height:1.15;padding:9px 10px 9px 20px;border-radius:16px;box-shadow:0 4px 0 #0B1226,0 12px 22px -12px rgba(22,32,58,.55)}
.co .btn.big small{font-size:16px;font-weight:500;margin-top:2px}
.co .btn.big .arr{width:40px;height:40px;font-size:20px}
.co #mock-btn{margin-top:10px}
.co #paypal-buttons{margin-top:4px}
.co .setup-note{font-size:16px;padding:8px 12px;margin-top:0;border-width:1.5px;border-radius:10px}
.co .err{font-size:16px;margin-top:10px}
.co .co-guar{display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:center;margin:16px 0 0;font-size:16px;line-height:1.4}
.co .mini-seal{width:48px;height:48px;font-size:17px;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--navy)}
.co .mini-seal small{font-size:10px}
.co .secure{margin:10px 0 0;font-size:16px;color:var(--navy)}
/* side column (under the form on phones): the short order list, the books, the timer */
.co aside .panel{padding:16px}
.co .co-sum-h{font-size:19px;margin:0 0 4px}
.co .summary{margin:0;border-top:0}
.co .summary .row{font-size:16px;line-height:1.3;padding:7px 0}
.co .summary .row.tot{font-size:18px;padding:9px 0 0}
.co #aside-img{width:100%;max-width:250px;margin:12px auto 10px}
.co .ticks li{font-size:16px;line-height:1.35;padding:0 0 7px 28px}
.co .ticks li::before{width:20px;height:20px;top:1px;background-size:15px}
.co .timer-box{padding:9px 12px;margin-top:8px;font-size:16px;line-height:1.35;border-radius:10px}
.co .timer-box .cd{font-size:17px}
.co .timer-box span{font-size:16px}
.co .timer-box>span:last-child{display:block}
.co .co-foot{background:var(--navy);padding:18px 0 24px}
.co .co-foot p{margin:0 0 4px}
@media(max-width:599px){
  .co .wrap{padding:0 12px}
  .co .co-grid{padding-top:10px}
}
@media(max-width:379px){
  .co .brand{font-size:16px}
  .co .brand img{width:28px;height:28px}
  .co .bump1{grid-template-columns:80px minmax(0,1fr)}
  .co .bump1 img{width:80px}
}
@media(min-width:600px){
  .co .panel{padding:20px 24px}
  .co #co-h1{font-size:28px}
  .co .flds{grid-template-columns:1fr 1fr}
  .co .bump1{grid-template-columns:100px minmax(0,1fr);grid-template-rows:1fr 1fr;gap:6px 16px;padding:11px 16px}
  .co .bump1 .bh{align-self:end}
  .co .bump1 img{width:100px}
  .co .bump1 .bh{font-size:19px}
}
@media(min-width:960px){
  .co .co-grid{grid-template-columns:minmax(0,1.32fr) minmax(0,.78fr);gap:22px;align-items:start}
  .co aside{position:sticky;top:14px}
}

/* ---------- upsell and downsell ---------- */
body[data-step]{background:#FBF7EE}
body[data-step] .offer-hero{padding:14px 0 20px}
body[data-step] .offer-hero .wrap{max-width:720px}
body[data-step] .fstep{max-width:340px;margin:0 auto 12px}
.saved{margin:0 0 6px;font-size:17px;line-height:1.35}
body[data-step] .offer-hero h1{font-size:clamp(29px,7.8vw,44px);line-height:1.08;margin:0 0 8px}
body[data-step] .offer-hero .lead{font-size:18px;line-height:1.4;margin:0 auto}
body[data-step] .offer-shot{width:min(74%,440px);max-width:none;margin:12px auto 0}
body[data-step] .offer-shot img{filter:drop-shadow(0 12px 14px rgba(22,32,58,.3))}
.yeswrap{max-width:520px;margin:14px auto 0}
body[data-step] .btn.full{min-height:64px;font-size:20px;line-height:1.15;padding:9px 10px 9px 22px;border-radius:18px;gap:10px;box-shadow:0 4px 0 #0B1226,0 12px 22px -12px rgba(22,32,58,.55)}
body[data-step] .btn.full small{font-size:16px;margin-top:3px}
body[data-step] .btn.full .arr{width:42px;height:42px;font-size:21px}
body[data-step] .decline{margin-top:6px}
body[data-step] main.wrap{padding-top:22px!important;padding-bottom:40px!important}
/* the two book cards: a plain "Book 1" label, not a chip */
body[data-step] .twobooks{gap:14px;margin:0 0 22px}
body[data-step] .card{padding:18px;border-radius:16px;box-shadow:0 10px 30px -22px rgba(22,32,58,.35)}
body[data-step] .card .chip{display:block;background:none;box-shadow:none;border-radius:0;padding:0;font-size:16px;font-weight:600;color:var(--muted)}
body[data-step] .card .chip::before{content:none}
body[data-step] .twobooks .card h3{font-size:22px;margin:2px 0 6px}
body[data-step] .card p{margin:0 0 10px;font-size:17px;line-height:1.4}
body[data-step] .ticks li{font-size:17px;line-height:1.38;padding:0 0 8px 30px}
body[data-step] .ticks li::before{width:21px;height:21px;top:1px;background-size:15px}
body[data-step] .buy{display:block;padding:20px 16px 10px;border-radius:18px;max-width:560px;box-shadow:0 14px 34px -22px rgba(22,32,58,.45);border:1px solid var(--line)}
body[data-step] .buy .kick{margin:0 0 6px;font-size:17px}
body[data-step] .price-big{font-size:46px}
body[data-step] .buy .btn.full{margin-top:14px}
body[data-step] .co-guar{grid-template-columns:52px 1fr;gap:12px;margin:16px 0 0;font-size:16px;line-height:1.4}
body[data-step] .mini-seal{width:52px;height:52px;font-size:18px;box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--navy)}
body[data-step] .mini-seal small{font-size:10px}
body[data-step] #pp-note{margin:12px 0 0}
body[data-step] #paypal-buttons{margin-top:10px}
/* downsell: small tablet picture beside the name and price, then the yes button and the no link, then the details */
.ds-top{display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;align-items:center;text-align:left}
.ds-top img{width:104px;filter:drop-shadow(0 8px 9px rgba(22,32,58,.3))}
.ds-top .small{margin:6px 0 0;color:var(--navy)}
body[data-step] .ds .ticks{margin:8px 0 0;padding-top:16px;border-top:1px solid var(--line)}
@media(max-width:379px){
  body[data-step] .btn.full{font-size:19px;padding-left:18px}
  .ds-top{grid-template-columns:92px minmax(0,1fr)}.ds-top img{width:92px}
}
@media(min-width:700px){
  body[data-step] .offer-hero{padding:22px 0 28px}
  body[data-step] .offer-hero .lead{font-size:20px}
  body[data-step] .offer-shot{width:min(60%,400px)}
  body[data-step] .buy{padding:26px 30px 12px}
  .ds-top{grid-template-columns:150px minmax(0,1fr);gap:22px}.ds-top img{width:150px}
  body[data-step] .price-big{font-size:52px}
}

/* ---------- legal pages, not-found, unknown download link ---------- */
.legal{padding-top:22px;padding-bottom:44px}
.legal .kick{font-size:17px;margin-bottom:8px}
.legal h1{font-size:clamp(30px,7vw,42px);margin:0 0 14px}
.legal h3{font-size:21px;margin:22px 0 6px}
.legal p{font-size:18px;line-height:1.55;margin:0 0 14px}
.legal p.small{font-size:16px}
.legal p a{overflow-wrap:anywhere}
.legal .btn{min-height:56px;font-size:19px;padding:8px 10px 8px 24px;margin-top:6px}
.legal .btn .arr{width:40px;height:40px;font-size:20px}
.legal~footer{padding:18px 0 24px!important}
@media(max-width:599px){.legal .btn{width:100%;justify-content:space-between}}
@media(min-width:700px){.legal{padding-top:36px;padding-bottom:60px}.legal p{font-size:19px}}
/* legal pages: plain bullet list (privacy, "What We Collect") */
.legal ul{margin:0 0 14px;padding:0 0 0 22px}
.legal li{font-size:18px;line-height:1.55;margin:0 0 8px}
@media(min-width:700px){.legal li{font-size:19px}}