/* AutoAcre Guide funnel: /guide, /guide/checkout, /guide/thanks-upsell, /guide/download
   Standalone on purpose: no site nav, none of the main-site CSS. */
:root{--g:#1f5134;--g2:#173f28;--ink:#1c211d;--mute:#5a625c;--line:#e3e6e1;--bg:#fbfbf8;--hl:#fff176;--topbar:#eef1ec;--slot:#eceee9}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:17px;line-height:1.6;color:var(--ink);background:var(--bg)}
a{color:var(--g)}
a:hover{color:var(--g2)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--g);outline-offset:3px}
.btn:focus-visible{outline-color:var(--ink)}

.top{font-size:13px;line-height:1.4;text-align:center;padding:10px 20px;background:var(--topbar);color:var(--mute)}
.page{max-width:728px;margin:0 auto}
.sec{padding:56px 24px;border-top:1px solid var(--line)}
.page>.sec:first-child{border-top:0}
.final{padding:64px 24px;border-top:1px solid var(--line)}

h1{font-size:30px;line-height:1.2;letter-spacing:-.01em;font-weight:700;text-wrap:balance}
h2{font-size:24px;line-height:1.25;font-weight:700;margin-bottom:20px}
h3{font-size:17px;font-weight:700;margin:32px 0 10px}
h3:first-of-type{margin-top:0}
p+p{margin-top:16px}
.sub{margin-top:20px;color:#333a35}

.btn{display:block;width:100%;background:var(--g);color:#fff;text-align:center;text-decoration:none;font:inherit;font-weight:600;font-size:17px;line-height:1.3;padding:16px 20px;border:0;border-radius:6px;min-height:52px;cursor:pointer}
.btn:hover{background:var(--g2);color:#fff}
.cta{margin-top:32px}
.fine{font-size:14px;color:var(--mute);text-align:center;margin-top:10px}
.link{display:block;text-align:center;margin-top:18px;font-size:16px;color:var(--mute);text-decoration:underline;padding:12px}
.link:hover{color:var(--ink)}

/* 4:3 image slot. Swap the .photo-slot div for <img class="photo" src="..." alt="Ben ..."> */
.photo,.photo-slot{margin-top:40px;width:100%;aspect-ratio:4/3;border-radius:6px}
.photo{display:block;height:auto;object-fit:cover;object-position:50% 20%}
.photo-slot{background:var(--slot);border:1px dashed #b9bfb8;display:flex;align-items:center;justify-content:center}

mark{background:var(--hl);color:var(--ink);padding:0 3px;border-radius:2px}

ul{list-style:none;display:flex;flex-direction:column;gap:14px}
ul li{padding-left:22px;position:relative}
ul li::before{content:"";position:absolute;left:2px;top:.68em;width:8px;height:2px;background:var(--g)}
.note{margin-top:24px}
.price{margin-top:24px;font-weight:600}

.faq{display:flex;flex-direction:column;gap:28px}
.faq dt{font-weight:700}
.faq dd{margin-top:6px}

.foot{font-size:13px;color:var(--mute);padding:24px;border-top:1px solid var(--line);text-align:center;line-height:1.6}

/* Order bump: sits directly above the pay button. See guide/order-bump.html */
.bump{position:relative;display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start;border:2px solid var(--g);border-radius:8px;padding:18px;background:#fff;font-size:16px;line-height:1.55}
.bump input{appearance:none;-webkit-appearance:none;width:26px;height:26px;border:2px solid var(--g);border-radius:4px;background:#fff;margin-top:1px;cursor:pointer;display:grid;place-content:center}
.bump input:checked{background:var(--g)}
.bump input:checked::after{content:"";width:7px;height:13px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg) translate(-1px,-2px)}
.bump-title{display:block;font-size:17px;font-weight:700;line-height:1.3;margin-bottom:6px;cursor:pointer}
.bump-title::after{content:"";position:absolute;inset:0} /* whole box is the click target */
.bump:has(input:focus-visible){outline:3px solid var(--g);outline-offset:3px}
.bump input:focus-visible{outline:0}

/* Checkout stub */
.co-line{display:flex;justify-content:space-between;gap:16px;margin-top:20px;font-weight:600}
.bump+.cta{margin-top:16px}

@media (min-width:768px){
  h1{font-size:44px}
  .sec{padding:88px 24px}
  .final{padding:96px 24px}
  .btn{display:inline-block;width:auto;min-width:320px}
  .fine{text-align:left}
  .link{display:inline-block;text-align:left;margin-top:12px;padding:12px 0}
  .cta>.link{display:block}
}