/* ============================================================
   THE 500K-MILE CAR CARE BIBLE — Gumroad-faithful clone
   White · ABC Favorit · banner-yellow accent · crisp 1px black boxes
   ============================================================ */
@font-face{ font-family:"ABC Favorit"; src:url("ABCFavorit-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"ABC Favorit"; src:url("ABCFavorit-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

:root{
  --ink:#1A1A1A; --ink-soft:#5C5C5C; --muted:#8C8C8C;
  --bg:#FFFFFF;
  --line:#1A1A1A; --line-soft:#E2E2E2;
  --accent:#6930F5;            /* purple */
  --accent-deep:#5426C4;
  --accent-soft:#F0EAFE; --accent-text:#3A1A87;
  --amber:#E8A11C;             /* logo glyph */
  --green:#2E8B57;
  --radius:4px; --maxw:1080px;
  --font:"ABC Favorit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; font-family:var(--font); color:var(--ink); background:var(--bg);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font); font-weight:700; font-size:1.02rem; text-decoration:none; cursor:pointer;
  border:1px solid var(--ink); border-radius:var(--radius); padding:.85rem 1.25rem; line-height:1.2;
  background:var(--accent); color:#fff; box-shadow:3px 3px 0 var(--ink);
  transition:transform .08s ease, box-shadow .08s ease; }
.btn:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); }
.btn:active{ transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink); }
.btn:focus-visible{ outline:3px solid var(--accent-deep); outline-offset:3px; }
.btn--block{ width:100%; }
.btn--lg{ font-size:1.1rem; padding:.95rem 1.25rem; }
.btn--dark{ background:#1A1A1A; color:#fff; }
.btn--dark:hover{ box-shadow:5px 5px 0 var(--accent); }

/* ---------- shared buy form ---------- */
.buy__price{ font-size:1.7rem; font-weight:700; margin:0 0 .7rem; }
.buy input{ width:100%; font-family:var(--font); font-size:1rem; padding:.9rem 1rem;
  border:1px solid var(--ink); border-radius:var(--radius); background:#fff; color:var(--ink); margin:0 0 12px; }
.buy input::placeholder{ color:#9a9a9a; }
.buy input:focus{ outline:3px solid var(--accent); outline-offset:1px; }
.buy__consent{ font-size:.76rem; color:var(--muted); line-height:1.5; margin:.7rem 0 0; }
.buy__consent a{ color:var(--ink-soft); text-decoration:underline; }

/* ============================================================
   BANNER
   ============================================================ */
.banner__inner{ max-width:var(--maxw); margin:0 auto; padding:26px 24px 0; }
.banner__inner img{ width:100%; border-radius:var(--radius); }

/* mobile buy form (right below hero) — hidden on desktop */
.buy-mobile{ display:none; }

/* ============================================================
   LAYOUT
   ============================================================ */
.layout{ max-width:var(--maxw); margin:0 auto; padding:34px 24px 16px;
  display:grid; grid-template-columns:1fr 340px; gap:48px; align-items:start; }
.main-col{ min-width:0; }
.product-title{ font-size:2rem; font-weight:400; line-height:1.22; margin:0 0 1.4rem; }

/* price strip (bordered split box) */
.pa-strip{ display:inline-flex; border:1px solid var(--ink); border-radius:var(--radius);
  overflow:hidden; margin:0 0 2rem; }
.pa-cell{ display:flex; align-items:center; padding:11px 16px; }
.pa-cell--save{ border-left:1px solid var(--ink); gap:.6rem; }
.price-tag{ display:inline-block; background:var(--accent); color:#fff; font-weight:700;
  font-size:1.02rem; padding:.32rem 1.05rem .32rem .8rem;
  clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%); }
.pa-cell--save s{ color:var(--muted); font-weight:600; font-size:1rem; }
.save-badge{ background:var(--accent-soft); color:var(--accent-text); border:1px solid var(--accent);
  border-radius:4px; padding:.18rem .5rem; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }

/* description */
.desc{ font-size:1.05rem; color:var(--ink); }
.desc p{ margin:0 0 1.2rem; line-height:1.6; }
.desc .lead{ font-weight:700; }
.desc strong{ font-weight:700; }
.desc em{ font-style:italic; }
.desc h3{ font-size:1.18rem; font-weight:700; margin:2rem 0 1rem; }
.desc h4{ font-size:1.05rem; font-weight:700; margin:1.7rem 0 .8rem; }
.desc ul{ padding-left:1.35rem; margin:0 0 1.3rem; }
.desc li{ margin:.55rem 0; line-height:1.6; }
.desc figure{ margin:1.3rem 0; }
.desc figure img{ width:100%; border-radius:var(--radius); }

/* ============================================================
   BUY COLUMN (desktop)
   ============================================================ */
.buy-col{ position:sticky; top:24px; }
.buy-desktop{ margin:0 0 16px; }

.attrs{ border:1px solid var(--ink); border-radius:var(--radius); overflow:hidden; }
.attr-row{ padding:14px 17px; border-bottom:1px solid var(--ink); }
.attr-row:last-child{ border-bottom:0; }
.attr-inline{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.attr-inline b{ font-weight:700; font-size:.95rem; }
.attr-inline span{ color:var(--ink-soft); font-size:.95rem; text-align:right; }
.attr-stack b{ display:block; font-weight:700; font-size:.95rem; margin-bottom:.3rem; }
.attr-stack p{ margin:0; font-size:.9rem; color:var(--ink-soft); line-height:1.5; }
.attr-guarantee{ display:flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:700; font-size:.95rem; background:#F7F4FE; }
.attr-guarantee svg{ width:17px; height:17px; }

/* ============================================================
   CLOSING CTA (repeat buy form at end of page)
   ============================================================ */
.closecta{ border-top:1px solid var(--line-soft); background:#F7F4FE; }
.closecta__inner{ max-width:560px; margin:0 auto; padding:56px 24px; text-align:center; }
.closecta__h{ font-size:1.75rem; font-weight:700; line-height:1.18; margin:0 0 .6rem; letter-spacing:-.01em; }
.closecta__sub{ color:var(--ink-soft); font-size:1.08rem; line-height:1.5; margin:0 0 1.7rem; }
.closecta .buy__consent{ text-align:center; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ border-top:1px solid var(--line-soft); margin-top:40px; }
.foot__inner{ max-width:var(--maxw); margin:0 auto; padding:34px 24px 42px; }
.foot__top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:18px;
  padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--line-soft); }
.foot__brand{ font-size:1.1rem; font-weight:700; margin:0 0 .3rem; }
.foot__tag{ font-size:.92rem; color:var(--ink-soft); margin:0; max-width:42ch; }
.foot__links{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; }
.foot__links a{ text-decoration:none; font-weight:600; font-size:.93rem; color:var(--ink-soft); border-bottom:1px solid transparent; }
.foot__links a:hover{ color:var(--ink); border-bottom-color:var(--accent); }
.foot__disc{ font-size:.79rem; color:var(--muted); line-height:1.65; }
.foot__disc a{ color:var(--ink-soft); }

/* ============================================================
   STICKY BAR (desktop + mobile, appears on scroll)
   ============================================================ */
.stickybar{ position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; align-items:center;
  justify-content:space-between; gap:14px; background:#fff; border-top:1px solid var(--ink);
  padding:11px 22px; box-shadow:0 -4px 18px rgba(0,0,0,.09); }
body.has-stickybar{ padding-bottom:84px; }
.stickybar__info{ display:flex; align-items:center; gap:14px; min-width:0; }
.stickybar__title{ font-weight:700; font-size:1.02rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:48vw; }
.stickybar__price{ display:flex; align-items:baseline; gap:.45rem; white-space:nowrap; }
.stickybar__price .now{ font-size:1.25rem; font-weight:700; }
.stickybar__price s{ color:var(--muted); font-weight:600; font-size:.92rem; }
.stickybar__save{ background:var(--accent-soft); color:var(--accent-text); border:1px solid var(--accent);
  border-radius:4px; padding:.12rem .45rem; font-size:.66rem; font-weight:700; text-transform:uppercase; }
.stickybar .btn{ flex:none; padding:.72rem 1.25rem; }
@media (max-width:620px){
  .stickybar{ padding:10px 14px; }
  .stickybar__title, .stickybar__save{ display:none; }
}

/* ============================================================
   TOP BAR / LEGAL / THANK-YOU
   ============================================================ */
.topbar{ border-bottom:1px solid var(--line-soft); }
.topbar__inner{ max-width:var(--maxw); margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; }
.topbar__brand{ font-weight:700; text-decoration:none; font-size:1.05rem; display:flex; align-items:center; gap:.55rem; }
.topbar__brand .ico{ width:28px; height:28px; }
.topbar__back{ color:var(--ink-soft); text-decoration:none; font-weight:600; font-size:.9rem; }
.topbar__back:hover{ color:var(--accent-deep); }

.legal{ max-width:760px; margin:0 auto; padding:48px 24px 56px; }
.legal h1{ font-size:2rem; font-weight:700; margin:0 0 .3rem; }
.legal__upd{ color:var(--muted); font-size:.9rem; margin:0 0 1.9rem; }
.legal h2{ font-size:1.18rem; font-weight:700; margin:2rem 0 .6rem; }
.legal p{ font-size:1rem; color:var(--ink-soft); line-height:1.7; margin:0 0 1rem; }
.legal ul{ padding-left:1.2rem; margin:0 0 1rem; }
.legal li{ font-size:1rem; color:var(--ink-soft); line-height:1.65; margin:.3rem 0; }
.legal a{ color:var(--ink); text-decoration:underline; }
.legal__note{ border:1px solid var(--ink); border-radius:var(--radius); padding:1.1rem 1.2rem; margin:1.5rem 0; font-size:.97rem; }

.ty-band{ border-bottom:1px solid var(--line-soft); }
.ty-band__inner{ max-width:760px; margin:0 auto; padding:30px 24px 38px; text-align:center; }
.ty-band__brand{ display:inline-flex; align-items:center; gap:.55rem; font-weight:700; text-decoration:none; font-size:1.05rem; margin-bottom:1.6rem; }
.ty-band__brand .ico{ width:28px; height:28px; }
.ty__check{ width:54px; height:54px; margin:0 auto .8rem; display:block; }
.ty-band h1{ font-size:1.75rem; font-weight:700; margin:0 0 .35rem; }
.ty-band p{ color:var(--ink-soft); margin:0; }
.ty{ max-width:760px; margin:0 auto; padding:34px 24px 54px; }
.upsell{ border:1px solid var(--ink); border-radius:var(--radius); overflow:hidden; background:#fff; margin-bottom:2rem; box-shadow:3px 3px 0 var(--ink); }
.upsell__tag{ background:var(--accent); color:#fff; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:.8rem; padding:.6rem 1.1rem; display:flex; align-items:center; justify-content:space-between; gap:8px; border-bottom:1px solid var(--ink); }
.upsell__body{ display:grid; grid-template-columns:200px 1fr; gap:26px; padding:24px; align-items:center; }
.upsell__cover{ border:1px solid var(--ink); border-radius:var(--radius); overflow:hidden; }
.upsell__cover img{ width:100%; }
.upsell h2{ font-size:1.3rem; font-weight:700; line-height:1.25; margin:0 0 .5rem; }
.upsell__sub{ color:var(--ink-soft); margin:0 0 .9rem; font-size:1rem; }
.upsell__list{ list-style:none; padding:0; margin:0 0 1.1rem; }
.upsell__list li{ position:relative; padding:.35rem 0 .35rem 1.6rem; font-size:.97rem; }
.upsell__list li::before{ content:""; position:absolute; left:0; top:.85rem; width:8px; height:8px; border-radius:2px; background:var(--accent); box-shadow:0 0 0 1px var(--ink); }
.upsell__price{ display:flex; align-items:baseline; gap:.55rem; margin:0 0 1rem; }
.upsell__price .now{ font-size:1.7rem; font-weight:700; }
.upsell__price s{ color:var(--muted); font-weight:600; }
.upsell__decline{ display:block; text-align:center; margin:.8rem 0 0; font-size:.9rem; font-weight:600; color:var(--ink-soft); text-decoration:underline; }
.download{ border:1px solid var(--ink); border-radius:var(--radius); padding:26px; text-align:center; }
.download h2{ font-size:1.25rem; font-weight:700; margin:0 0 .35rem; }
.download p{ color:var(--ink-soft); margin:0 0 1.2rem; }
.download__book{ display:flex; align-items:center; justify-content:center; gap:.6rem; font-weight:700; margin:0 0 1.1rem; }
.download .small{ font-size:.86rem; color:var(--muted); margin:1rem 0 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .layout{ grid-template-columns:1fr; gap:30px; }
  .buy-col{ position:static; top:auto; }
  .buy-desktop{ display:none; }            /* desktop form hidden when stacked */
  .buy-mobile{ display:block; margin:.2rem 0 1.9rem; }
}
@media (max-width:620px){
  body{ font-size:16px; }
  .banner__inner{ padding:16px 16px 0; }
  .layout{ padding:24px 18px 12px; }
  .product-title{ font-size:1.55rem; }
  .upsell__body{ grid-template-columns:1fr; gap:18px; }
  .upsell__cover{ max-width:200px; margin:0 auto; }
  .foot__top{ flex-direction:column; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }