:root{--primary:#4D148C;--primary2:#FF6600;--dark:#0F172A;--muted:#64748B;--light:#F8FAFC;--grad:linear-gradient(135deg,#4D148C,#FF6600);}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:var(--dark);background:#fff;line-height:1.7}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
/* Nav */
.blog-nav{background:var(--dark);padding:14px 24px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}
.blog-logo{color:#fff;font-weight:900;font-size:20px;text-decoration:none;display:flex;align-items:center;gap:8px}
.logo-blast{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.blog-nav-links{display:flex;gap:16px;align-items:center}
.blog-nav-links a{color:rgba(255,255,255,.75);font-size:14px;font-weight:600;text-decoration:none}
.blog-nav-links a:hover{color:#fff}
.btn-nav{background:var(--grad);color:#fff;font-weight:800;font-size:13px;padding:8px 18px;border-radius:999px;text-decoration:none}
/* Hero */
.blog-hero{background:var(--dark);padding:56px 24px 48px;text-align:center}
.blog-hero .eyebrow{color:var(--primary2);font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:16px}
.blog-hero h1{color:#fff;font-size:clamp(26px,5vw,42px);font-weight:900;line-height:1.25;max-width:800px;margin:0 auto 20px}
.blog-meta{color:rgba(255,255,255,.68);font-size:14px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
/* Article */
.blog-wrap{max-width:760px;margin:0 auto;padding:56px 24px}
.blog-wrap h2{font-size:26px;font-weight:900;color:var(--dark);margin:40px 0 16px;line-height:1.3}
.blog-wrap h3{font-size:20px;font-weight:800;color:var(--dark);margin:28px 0 12px}
.blog-wrap p{color:var(--muted);font-size:16px;line-height:1.85;margin-bottom:18px}
.blog-wrap ul,.blog-wrap ol{padding-left:24px;margin-bottom:18px}
.blog-wrap li{color:var(--muted);font-size:16px;line-height:1.85;margin-bottom:8px}
.blog-wrap strong{color:var(--dark)}
.blog-wrap table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px}
.blog-wrap th{background:var(--dark);color:#fff;padding:12px 16px;text-align:left;font-weight:700}
.blog-wrap td{padding:12px 16px;border-bottom:1px solid #e2e8f0;color:var(--muted)}
.blog-wrap tr:nth-child(even) td{background:#f8fafc}
.blog-wrap .highlight-box{background:linear-gradient(135deg,rgba(77,20,140,.07),rgba(255,102,0,.07));border:1px solid rgba(77,20,140,.2);border-radius:14px;padding:24px;margin:28px 0}
.blog-wrap .highlight-box p{margin-bottom:0;color:var(--dark)}
.blog-wrap .fact-box{background:#f0fdf4;border:2px solid #86efac;border-radius:14px;padding:20px 24px;margin:28px 0}
.blog-wrap .fact-box p{color:#166534;margin-bottom:0}
/* CTA */
.blog-cta{background:var(--grad);color:#fff;border-radius:20px;padding:40px;text-align:center;margin:56px 0}
.blog-cta h3{font-size:24px;font-weight:900;margin-bottom:10px}
.blog-cta p{color:rgba(255,255,255,.80);margin-bottom:24px;font-size:15px}
.btn-cta{display:inline-block;background:#fff;color:var(--primary);font-weight:900;font-size:15px;padding:14px 32px;border-radius:999px;text-decoration:none}
.btn-cta:hover{opacity:.9;text-decoration:none}
/* Related */
.blog-related{background:var(--light);padding:56px 24px}
.related-inner{max-width:960px;margin:0 auto}
.related-inner h3{font-size:22px;font-weight:900;margin-bottom:24px;text-align:center}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.related-card{background:#fff;border-radius:14px;padding:24px;border:1px solid #e2e8f0;text-decoration:none;display:block;transition:box-shadow .2s}
.related-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.1);text-decoration:none}
.related-card .rc-emoji{font-size:28px;margin-bottom:10px}
.related-card .rc-title{font-size:15px;font-weight:800;color:var(--dark);margin-bottom:6px;line-height:1.4}
.related-card .rc-desc{font-size:13px;color:var(--muted);line-height:1.6}
/* Footer */
.blog-footer{background:var(--dark);color:rgba(255,255,255,.68);text-align:center;padding:32px 24px;font-size:13px}
.blog-footer a{color:rgba(255,255,255,.7);text-decoration:none}
.blog-footer a:hover{color:#fff}
@media(max-width:640px){.blog-nav-links .hide-mob{display:none}}
.nav-phone { font-size:14px; font-weight:800; color:var(--dark); text-decoration:none;
  padding:7px 12px; border-radius:8px; white-space:nowrap; letter-spacing:.2px; }
.nav-phone:hover { color:var(--primary); background:rgba(249,115,22,.07); }
@media (max-width:1024px){ .nav-phone { display:none; } }
.nav-drop { position:relative; display:inline-block; }
.nav-drop-btn { display:inline-flex; align-items:center; gap:5px; }
.nav-drop-btn .caret { font-size:10px; opacity:.6; }
.nav-menu { position:absolute; top:calc(100% + 6px); left:0; min-width:196px; background:#fff;
  border:1px solid #E2E8F0; border-radius:12px; box-shadow:0 14px 34px rgba(15,23,42,.13);
  padding:7px; opacity:0; visibility:hidden; transform:translateY(-5px); transition:.16s; z-index:120; }
.nav-drop:hover .nav-menu, .nav-drop:focus-within .nav-menu { opacity:1; visibility:visible; transform:translateY(0); }
.nav-menu a { display:block; padding:9px 12px; border-radius:8px; font-size:14px; font-weight:600;
  color:var(--ink); text-decoration:none; white-space:nowrap; }
.nav-menu a:hover { background:#F8FAFC; color:var(--primary); }

/* ── design-critique fixes ───────────────────────────────────────────────── */
.mob-sec { font-size:11px; font-weight:800; letter-spacing:.9px; text-transform:uppercase;
  color:var(--muted); padding:14px 16px 4px; }
.mob-cta { display:flex; flex-direction:column; gap:10px; padding:16px 8px 4px;
  margin-top:8px; border-top:1px solid #f0f0f0; }
.mob-cta .btn { padding:14px 20px; font-size:15px; }
.btn-alt { background:#fff; color:var(--dark); border:2px solid #E2E8F0; }
.btn-alt:hover { border-color:var(--primary); color:var(--primary); }

/* 44px minimum touch targets on touch-sized viewports */
@media (max-width:768px) {
  .btn, .nav-btn, .mob-btn, .ai-send { min-height:44px; }
  .ai-chip { min-height:44px; display:inline-flex; align-items:center; }
  .nav-menu a { min-height:44px; display:flex; align-items:center; }
  .foot-link { padding:12px 0; }
}

/* ── blog product strip ──────────────────────────────────────────────────── */
.blog-prods { display:flex; gap:8px; overflow-x:auto; padding:10px 20px;
  background:#fff; border-bottom:1px solid #eef2f7; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; }
.blog-prods::-webkit-scrollbar { display:none; }
.blog-prods a { flex:0 0 auto; font-size:13px; font-weight:700; color:var(--dark);
  text-decoration:none; padding:9px 14px; border:1px solid #e2e8f0; border-radius:999px;
  white-space:nowrap; transition:.15s; }
.blog-prods a:hover { border-color:var(--primary); color:var(--primary); }
/* On a phone the strip swipes. On a desktop there is no swipe and the scrollbar
   is hidden, so the last three products were simply cut off at 1440px. Wrap. */
@media (min-width:769px){ .blog-prods { flex-wrap:wrap; justify-content:center; } }
.blog-foot-prods { display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:center;
  margin-bottom:12px; }
.blog-foot-prods a { font-size:13px; }

/* ── footer: state strip ─────────────────────────────────────────────────── */
.foot-states { max-width:1200px; margin:28px auto 0; padding:16px 0 0; border-top:1px solid #1E293B; font-size:13px; color:#64748B; line-height:2; text-align:center; }
.foot-states span { display:block; color:#94A3B8; font-weight:700; margin-bottom:2px; }
.foot-states a { color:#94A3B8; text-decoration:none; }
.foot-states a:hover { color:#fff; }
.foot-grid { grid-template-columns:repeat(auto-fit,minmax(170px,1fr)) !important; }
/* -- mobile pass v2 -- */
@media (max-width:768px){
  html{-webkit-text-size-adjust:100%}
  body{overflow-x:hidden}
  .nav-inner{padding:0 14px;height:60px}
  .logo-text{font-size:20px}
  .mob-toggle{display:flex!important;align-items:center;justify-content:center;width:44px;height:44px;margin:0 -6px 0 0;padding:0;border-radius:10px;cursor:pointer;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%230F172A' stroke-width='2.4' stroke-linecap='round'><path d='M4 7h16M4 12h16M4 17h16'/></svg>") center/26px no-repeat}
  .mob-toggle.open{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%230F172A' stroke-width='2.4' stroke-linecap='round'><path d='M6 6l12 12M18 6L6 18'/></svg>")}
  .mob-menu{max-height:calc(100vh - 60px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .mob-btn{padding:13px 16px;font-size:16px;min-height:46px;text-decoration:none}
  .fedex-strip{font-size:11px;letter-spacing:.35px;padding:7px 12px;line-height:1.45}
  .section{padding:40px 18px}
  h2{letter-spacing:-.4px}
  .hero{padding:44px 18px 40px}
  .speed-badge{font-size:11px;padding:8px 14px;letter-spacing:.6px;margin-bottom:18px}
  .hero h1{font-size:clamp(34px,10.5vw,44px);letter-spacing:-1.5px;line-height:1.02;margin-bottom:16px}
  .hero h1 .grad-text{margin-top:6px!important}
  .hero p{font-size:16px;line-height:1.55;margin-bottom:14px}
  .hero .btn-group{flex-direction:column;gap:10px;margin-top:6px}
  .hero .btn-group .btn{width:100%;justify-content:center;padding:15px 20px;font-size:16px}
  .hero-kit{font-size:13px;padding:9px 14px;line-height:1.4;display:block;text-align:center}
  .trust-strip{margin-top:26px;padding-top:18px;gap:8px 14px}
  .trust-item{font-size:12px}
  /* homepage product grid: compact 2-up cards */
  #all-products .g3{grid-template-columns:1fr 1fr;gap:10px}
  #all-products .card{padding:12px 12px 14px;border-top-width:3px}
  #all-products .card-photo{height:110px;object-fit:cover;margin:-12px -12px 10px;width:calc(100% + 24px);max-width:none;border-radius:11px 11px 0 0}
  #all-products .card h3{font-size:15px;line-height:1.25;margin-bottom:4px}
  #all-products .card p{display:none}
  #all-products .card > div:nth-of-type(1){font-size:18px!important}
  #all-products .card > div:nth-of-type(2){display:none}
  #all-products .card .btn{width:100%;padding:10px 6px;font-size:12.5px;justify-content:center}
  /* product pages */
  .pp-top{grid-template-columns:minmax(0,1fr)!important}
  .pp-top>*{min-width:0}
  .tc-row{grid-template-columns:repeat(2,1fr)!important}
  .pp-buy{padding:16px 14px}
  .pp-opts{grid-template-columns:1fr 1fr!important;gap:8px}
  .pkg-option{padding:12px 8px}
  .pkg-name{font-size:15px}
  .pkg-price{font-size:15px}
  .pkg-sub{font-size:12px}
  .pp-tabbar{flex-wrap:wrap;gap:6px;border-bottom:none;overflow:visible}
  .pp-tab{padding:9px 13px;font-size:13px;border:1.5px solid #e2e8f0;border-radius:999px;margin-bottom:0}
  .pp-tab.on{background:var(--dark);color:#fff;border-color:var(--dark)}
  .cw-open{min-height:44px;padding:8px 0}
  input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{font-size:16px!important}
  .btn-lg{padding:15px 22px;font-size:16px}
  /* sticky order bar */
  body.has-sb{padding-bottom:74px}
  .sb-bar{position:fixed;left:0;right:0;bottom:0;z-index:900;display:none;align-items:center;gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #e2e8f0;box-shadow:0 -6px 20px rgba(15,23,42,.10)}
  body.has-sb .sb-bar.show{display:flex}
  .sb-bar .sb-txt{flex:1;min-width:0;line-height:1.2}
  .sb-bar .sb-lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#64748B}
  .sb-bar .sb-total{display:block;font-size:20px;font-weight:900;color:var(--dark)}
  .sb-bar .btn{padding:13px 20px;font-size:15px;white-space:nowrap}
  .sb-pulse{animation:sbPulse 1.2s ease}
  @keyframes sbPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}40%{box-shadow:0 0 0 8px rgba(239,68,68,.35)}}
  /* blog nav */
  .blog-nav{padding:10px 14px;gap:8px}
  .blog-logo{white-space:nowrap;font-size:17px;flex-shrink:0}
  .blog-nav-links{display:flex;gap:6px;align-items:center}
  .blog-nav-links .btn-nav{white-space:nowrap;padding:9px 12px;font-size:13px}
  .blog-prods{padding:8px 14px}
  /* misc bands */
  .cb-card{padding:22px 0}
  .cb-copy h2{font-size:24px}
  footer{padding-bottom:calc(40px + env(safe-area-inset-bottom))}
}
@media (max-width:420px){
  .hero h1{font-size:clamp(32px,10vw,40px)}
  #all-products .card .btn{font-size:12px}
}
/* /vs/ and /answers/ pages put their copy in bare section.wrap blocks: a
   centred 1200px column with no side padding. Below 1240px the column is the
   viewport, so the text ran flush against the screen edge on every phone.
   !important because those sections carry inline padding shorthand. */
@media (max-width:1240px){
  .page>section.wrap{padding-left:20px!important;padding-right:20px!important}
}
/* -- /mobile pass -- */