/* v1.4.3 — same styles; pills compact; files at zip root */
:root{
  --yellow:#FFCC01;
  --lostit-gradient:linear-gradient(135deg,#1E4D78 0%,#3E7F97 58%,#4C94A7 80%,#66C7B7 92%,#8FD9CA 100%);
  --text:#0f1424;--shadow:0 8px 18px rgba(0,0,0,.14);
  --pill-width: 720px;
  --dhl-w: 82px;
}
html,body{background-image:var(--lostit-gradient)!important;background-repeat:no-repeat!important;background-size:cover!important;background-attachment:fixed!important;min-height:100vh;margin:0}
#page,#primary,#content,.site,.site-content,.entry-content,.wp-site-blocks,.wp-block-group,.container,.wrap{background:transparent!important}
.lostit-landing.min{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;color:var(--text)}
.lostit-landing.min .max{max-width:1440px;margin:0 auto;padding:0 22px}

/* Topbar */
.topbar{background:var(--yellow);position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(0,0,0,.08)}
.topbar .max{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand .logo{height:64px;width:auto;display:block;border-radius:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:999px;text-decoration:none;font-weight:800;border:none}
.btn.primary{background:#0f1424;color:#fff;box-shadow:var(--shadow)}

/* Layout */
.hero{padding:18px 0 40px}
.hero-grid.two-col{display:grid;grid-template-columns:var(--pill-width) 1fr;gap:36px;align-items:start}

/* Pills */
.left-pills{width:var(--pill-width)}
.left-pills .pill.ultra{
  background:var(--yellow); color:#0f1424; height:40px;
  padding:6px 16px; border-radius:999px; border:1px solid rgba(0,0,0,.12); box-shadow:var(--shadow);
  margin:14px 0; width:100%;
}
.left-pills .pill.center{display:flex;align-items:center;justify-content:center;text-align:center;gap:14px}
.left-pills .pill.with-logo{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:14px}
.left-pills .dhl{width:var(--dhl-w);height:auto;display:block}
.left-pills .pill-spacer{width:var(--dhl-w);height:1px;display:block}
.left-pills .pill-text{font-size:14px;font-weight:500;letter-spacing:.05px;line-height:1;white-space:nowrap;text-overflow:unset;overflow:visible;text-align:center}

/* How block */
.left-stack .how{margin-top:18px;padding:14px 2px 0 2px}
.how-title{font-size:24px;line-height:1.1;margin:0 0 10px 2px;color:#0f1424}
.how-steps{counter-reset: step; list-style:none; padding-left:0; margin:0}
.how-steps li{counter-increment: step; position:relative; padding-left:48px; margin:10px 0; color:#eef3f6}
.how-steps li::before{content: counter(step); position:absolute; left:0; top:50%; transform:translateY(-50%); width:30px; height:30px; border-radius:999px; background: var(--yellow); color:#0f1424; font-weight:900; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 12px rgba(0,0,0,.12); border:1px solid rgba(0,0,0,.12); font-size:15px;}

/* Video */
.video-box{background:#fff;border-radius:24px;border:1px solid rgba(0,0,0,.12);overflow:hidden;box-shadow:var(--shadow)}
.video-embed{aspect-ratio:16/9;width:100%;height:auto;position:relative;background:#f9f9f9}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.caption{background:var(--yellow);color:#1a1a1a;font-weight:800;text-align:center;padding:10px 14px;border-top:1px solid rgba(0,0,0,.12)}

/* Footer */
.foot{padding:56px 0 72px}
.foot-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.foot-title{color:#fff;font-size:44px;line-height:1.15;margin:0}
.foot-sub{color:#e9f2f6;margin:0 0 6px 0}
.foot-cta{background:var(--yellow);color:#111;font-weight:900;border-radius:18px;padding:14px 22px;box-shadow:var(--shadow)}
.foot-logo{height:120px;width:auto;margin-top:10px}
.foot-info{color:#ffd24a;margin:6px 0 0 0}
.foot-info a{color:#ffd24a;text-decoration:underline}
.copy{color:#cfe3ea;margin-top:6px}

/* Responsive */
@media (max-width:1200px){
  :root{--pill-width: min(720px,100%); --dhl-w:78px;}
  .hero-grid.two-col{grid-template-columns:1fr}
  .left-pills{width:100%}
  .foot-title{font-size:34px}
}

/* Hot change: black inline note on step 2 */
.how-steps .note-black{color:#000!important;font-weight:800}

/* Superscript star for note */
.note-star{font-size:.8em; vertical-align: super; line-height:0}

/* note-black force */
.note-black, .note-black .note-star{ color:#000 !important; }

/* ---- Mobile/full-bleed fixes v1.4.4 (2025-11-06) ---- */
/* Make the yellow topbar stretch edge-to-edge on any theme container */
.lostit-landing.min .topbar{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* Keep inner content nicely padded */
.lostit-landing.min .topbar .max{
  height:74px;
  padding-left:16px;
  padding-right:16px;
}

/* Ensure footer block is perfectly centered on mobile */
.lostit-landing.min .foot .max{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Small-screen tweaks */
@media (max-width: 640px){
  .lostit-landing.min .topbar .brand .logo{height:56px}
  .lostit-landing.min .foot .foot-logo{height:110px}
}
/* ---- End mobile/full-bleed fixes ---- */