/* ============================================================
   FirstX - The Shopify Exit Plan (migration checklist)
   Clean WHITE document. Full-width pages. PDF-friendly.
   ============================================================ */

:root{
  --brand:#2572b8; --brand-bright:#3b97ee; --cyan:#12a6c9;
  --danger:#e23b46; --amber:#c97a12; --good:#12a866;
  --shopify:#95bf47; --magento:#f26322; --bc:#34313f;
  --ink:#1b2536; --ink-soft:#566576; --line:#e4e8ee; --soft:#f4f7fb;
}

@page{ size:auto; margin:14mm 13mm; }

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:#fff; color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.6;
}
h1,h2,h3,h4{font-family:'Space Grotesk','Inter',sans-serif; line-height:1.12; margin:0;}
a{color:var(--brand);}

/* ---------- COVER (white, design on top) ---------- */
.cover{
  position:relative; text-align:center;
  display:flex; flex-direction:column; justify-content:center;
  min-height:100vh; padding:0 0 3.5rem; border-bottom:1px solid var(--line);
}
.cover::before{ /* thin brand accent rule pinned to the very top */
  content:""; position:absolute; top:0; left:0; right:0; height:6px;
  background:linear-gradient(90deg,var(--brand-bright),var(--cyan),var(--brand-bright));
}
.cover-inner{ max-width:900px; margin:0 auto; padding:2rem clamp(1.4rem,5vw,2rem); }

.cover-logo{display:flex; justify-content:center; align-items:center; gap:.5rem; margin-bottom:1rem;}
.cover-logo img{width:38px;height:38px;}
.cover-logo span{font-family:'Space Grotesk'; font-weight:700; font-size:1.5rem; letter-spacing:-.5px; color:var(--ink);}
.cover-logo .x{color:inherit;}

.cover-kicker{
  display:block; font-size:.78rem; font-weight:700; letter-spacing:3px;
  text-transform:uppercase; color:var(--brand); margin-bottom:2.4rem;
}

/* migration visual: struck email -> safe platforms */
.cover-visual{
  display:flex; align-items:center; justify-content:center; gap:clamp(1rem,4vw,2.2rem);
  flex-wrap:wrap; margin:1rem 0 3.2rem;
}
.killcard{position:relative; width:min(280px,70vw); border-radius:12px; overflow:hidden;
  box-shadow:0 14px 34px rgba(27,37,54,.18); border:1px solid var(--line); transform:rotate(-3deg);}
.killcard img{display:block; width:100%; height:auto; filter:grayscale(.2);}
.killcard::after{content:""; position:absolute; left:-8%; right:-8%; top:50%;
  height:7px; background:var(--danger); transform:rotate(-10deg);
  box-shadow:0 1px 6px rgba(226,59,70,.45); border-radius:6px;}
.killcard .stamp{
  position:absolute; top:12px; left:12px; background:var(--danger); color:#fff;
  font-weight:800; font-size:.66rem; letter-spacing:1.5px; padding:.28rem .5rem; border-radius:5px;
  transform:rotate(-3deg);
}
.flow-arrow{font-size:2.2rem; color:var(--brand-bright); font-weight:700; line-height:1;}
.safe-stack{display:flex; flex-direction:column; gap:.8rem;}
.logo-chip{
  background:#fff; border:1px solid var(--line); border-left:3px solid var(--good);
  border-radius:10px; padding:.6rem 1.1rem; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(27,37,54,.07);
}
.logo-chip svg{height:28px; width:auto; display:block;}

.cover h1{
  font-size:clamp(2.3rem,6.5vw,4.2rem); font-weight:700; letter-spacing:-1.5px; margin-bottom:1.3rem; color:var(--ink);
}
.cover h1 .accent{color:var(--brand-bright);}
.cover-sub{
  font-size:clamp(1.02rem,2.2vw,1.25rem); color:var(--ink-soft); max-width:640px; margin:0 auto 2.4rem;
}
.cover-by{font-size:.9rem; color:var(--ink-soft); letter-spacing:.3px;}
.cover-by strong{color:var(--ink);}

.printbtn{
  margin-top:2.2rem; display:inline-flex; align-items:center; gap:.5rem;
  background:linear-gradient(135deg,var(--brand-bright),var(--brand)); color:#fff;
  border:none; font:inherit; font-weight:700; padding:.85rem 1.7rem; border-radius:999px;
  cursor:pointer; box-shadow:0 10px 26px rgba(37,114,184,.35); text-decoration:none;
}
.printbtn:hover{transform:translateY(-2px);}

.cover-actions{display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:2.2rem;}
.cover-actions .printbtn{margin-top:0;}
.callbtn{background:#fff; color:var(--brand); border:2px solid var(--brand); box-shadow:0 10px 26px rgba(37,114,184,.18);}

.doc-actions{display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:3rem;}
.doc-actions .printbtn{margin-top:0;}

/* ---------- PROGRESS BAR ---------- */
.progress-wrap{
  position:sticky; top:0; z-index:20; background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
  padding:.7rem clamp(1.4rem,5vw,3.5rem); display:flex; align-items:center; gap:1rem;
}
.progress-track{flex:1; height:8px; background:var(--line); border-radius:999px; overflow:hidden;}
.progress-fill{height:100%; width:0; background:linear-gradient(90deg,var(--cyan),var(--brand-bright)); transition:width .25s;}
.progress-label{font-size:.82rem; font-weight:700; color:var(--ink-soft); white-space:nowrap;}

/* ---------- CONTENT ---------- */
.doc{ max-width:1080px; margin:0 auto; padding:clamp(2.4rem,5vw,3.6rem) clamp(1.4rem,5vw,3.5rem) 4rem; }
.lead-note{
  background:var(--soft); border:1px solid var(--line); border-left:4px solid var(--brand-bright);
  border-radius:10px; padding:1.2rem 1.4rem; margin-bottom:2.6rem; color:var(--ink-soft); font-size:.96rem;
}
.lead-note strong{color:var(--ink);}

.toc{background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:1.5rem 1.8rem; margin-bottom:2.8rem;}
.toc h2{font-size:1rem; text-transform:uppercase; letter-spacing:2px; color:var(--brand); margin-bottom:1rem;}
.toc ol{margin:0; padding-left:1.3rem; columns:2; column-gap:2.5rem;}
.toc li{margin:.35rem 0; break-inside:avoid;}
.toc a{text-decoration:none; color:var(--ink);}
.toc a:hover{color:var(--brand-bright);}

.chapter{margin:0 0 3rem; scroll-margin-top:70px;}
.chapter-num{font-family:'Space Grotesk'; font-weight:700; color:var(--brand-bright); font-size:.88rem; letter-spacing:2px;}
.chapter h2{font-size:clamp(1.5rem,3.2vw,2rem); letter-spacing:-.5px; margin:.3rem 0 .7rem; color:var(--ink);}
.chapter h2 .star{color:var(--amber);}
.chapter-lead{color:var(--ink-soft); margin-bottom:1.3rem; max-width:70ch;}
.subhead{font-size:.76rem; font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--ink-soft); margin:1.6rem 0 .6rem;}

/* checklist */
.checks{list-style:none; margin:0; padding:0;}
.checks li{margin:0 0 .15rem;}
.check{ display:flex; gap:.8rem; align-items:flex-start; padding:.55rem .7rem; border-radius:8px; cursor:pointer; transition:background .12s; }
.check:hover{background:var(--soft);}
.check input{position:absolute; opacity:0; width:0; height:0;}
.box{ flex:0 0 auto; width:22px; height:22px; margin-top:1px; border:2px solid #c2ccda; border-radius:6px;
  display:grid; place-items:center; background:#fff; transition:all .15s; font-size:13px; color:#fff; line-height:1; }
.check input:checked + .box{background:var(--good); border-color:var(--good);}
.box{ color:transparent; }
.check input:checked + .box{ color:#fff; }
.check input:checked ~ .ctext{color:var(--ink-soft); text-decoration:line-through; text-decoration-color:#9fb0c4;}
.ctext{font-size:.98rem;}
.ctext b{color:var(--ink);}

/* callouts */
.callout{border-radius:12px; padding:1.3rem 1.5rem; margin:1.6rem 0;}
.callout h3{font-size:1.05rem; margin-bottom:.6rem;}
.callout.warn{background:#fff5f5; border:1px solid #f6c9cc;}
.callout.warn h3{color:var(--danger);}
.callout.tip{background:#eefaf4; border:1px solid #bce8d6;}
.callout.tip h3{color:var(--good);}
.callout ol,.callout ul{margin:.4rem 0 0; padding-left:1.2rem;}
.callout li{margin:.3rem 0;}

/* closing cta (light) */
.closing{
  background:var(--soft); border:1px solid var(--line); border-top:3px solid var(--brand-bright);
  border-radius:14px; padding:2.4rem clamp(1.4rem,5vw,2.6rem); text-align:center; margin-top:3.2rem;
}
.closing h2{font-size:clamp(1.5rem,3.6vw,2.1rem); margin-bottom:.9rem; color:var(--ink);}
.closing p{color:var(--ink-soft); max-width:560px; margin:0 auto 1.6rem;}
.closing .printbtn{margin-top:0;}

.doc-foot{text-align:center; color:var(--ink-soft); font-size:.82rem; margin-top:2.2rem; line-height:1.7;}
.doc-foot a{color:var(--brand);}

@media (max-width:560px){ .toc ol{columns:1;} .killcard{transform:none;} }

/* ---------- PRINT - full-width pages ---------- */
@media print{
  .progress-wrap,.printbtn{display:none !important;}
  .doc{max-width:none;}
  .cover{min-height:244mm; page-break-after:always; border-bottom:none; padding-bottom:0;}
  .cover::before{-webkit-print-color-adjust:exact; print-color-adjust:exact;}
  .doc{padding:0;}
  .chapter{page-break-inside:avoid;}
  .killcard,.logo-chip,.lead-note,.toc,.callout,.closing,.progress-fill,.killcard .stamp{
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .check:hover{background:none;}
  a{color:var(--ink); text-decoration:none;}
}