:root {
  --bg: #e6e8ec;
  --panel: #f3f4f6;
  --ink: #181c24;
  --muted: #4e5663;
  --line: #c7ced9;
  --blue: #3a465a;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  font-family: Inter, "SF Pro Display", "Helvetica Neue", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: linear-gradient(180deg, #eff2f7 0%, var(--bg) 100%);
}
.hero { display: none; }
.hero-inner, .wrap { max-width: 880px; margin: 0 auto; }
.kicker { margin: 0; color: #3f5f96; font-size: .8rem; letter-spacing: .11em; text-transform: uppercase; }
h1 { margin: 8px 0 10px; font-size: clamp(2rem, 6vw, 3rem); line-height: 1.06; }
.lead { margin: 0; color: var(--muted); max-width: 58ch; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 12px;
  padding: 10px 14px;
  border: 1px solid #c6d5eb;
  color: #1e2f4a;
  background: #fff;
  font-weight: 700;
}
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.wrap { display: grid; gap: 14px; padding: 8px 10px 32px; }
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 24px rgba(48, 35, 22, .12);
}
.card.soft { background: linear-gradient(180deg, #f8f9fb 0%, #eef1f5 100%); }
h2 { margin: 0 0 10px; font-size: 1.22rem; }
.muted { color: var(--muted); margin-top: 0; }
.phone {
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.phone-frame {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  max-width: 460px;
  margin: 0 auto;
}
.logo-box {
  padding: 0;
  border: 0;
  border-radius: 0;
  text-align: center;
  background: transparent;
  height: 232px;
  margin-bottom: -10px;
  overflow: hidden;
  display: block;
}
.blog-logo {
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  border: 0;
  margin: 0 auto;
  display: block;
  height: calc(100% + 8px);
  margin-top: -6px;
  object-fit: contain;
  object-position: center;
  transform-origin: center center;
  will-change: transform;
  animation: logoBreath 6.2s ease-in-out infinite;
}
.support-title {
  position: relative;
  z-index: 1;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.96),
    0 0 22px rgba(255, 255, 255, 0.9),
    0 2px 0 rgba(255, 255, 255, 0.82);
}
@keyframes logoBreath {
  0% { transform: scale(1); }
  50% { transform: scale(1.035); }
  100% { transform: scale(1); }
}
.tile-grid {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.tile {
  text-decoration: none;
  color: #11335f;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  display: block;
  overflow: hidden;
}
.tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  border-radius: 0;
  border: 0;
}
.tile-topic,
.tile-guides {
  aspect-ratio: 16 / 10;
}
.tile-printable,
.tile-qr {
  aspect-ratio: 1 / 1;
}
.tile-qr img {
  padding: 10px;
}
.support-title {
  margin: 8px 0 6px;
  color: #39465a;
  font-size: .88rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .04em;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
}
.support-title::before,
.support-title::after {
  content: "";
  border-top: 2px solid #aab6c8;
  display: block;
}
.support-title::before {
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.85);
}
.support-title::after {
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.85);
}
.shop-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}
.shop-item {
  display: block;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  overflow: hidden;
}
.shop-item img {
  width: 100%;
  height: 100%;
  min-height: 86px;
  max-height: 110px;
  object-fit: contain;
  background: #fff;
  border-radius: 0;
  border: 0;
}
.learn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 8px auto 2px;
  min-height: 30px;
  padding: 6px 14px;
  width: 100%;
  max-width: none;
  text-align: center;
  text-decoration: none;
  font-size: .82rem;
  color: #3d4654;
  font-weight: 600;
  border: 1px solid #bfc8d5;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
}
.learn-link:hover {
  border-color: #9baac0;
  color: #2c3747;
}
.delayed-hidden {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}
.delayed-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity .45s ease, transform .45s ease;
}
.asset-map {
  margin: 14px auto 0;
  max-width: 420px;
  border: 1px dashed #cfe0f4;
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
}
.asset-map strong { display: block; margin-bottom: 6px; color: #1d355d; }
.asset-map p { margin: 4px 0; }
.asset-map code { color: #27487a; font-size: .84rem; }
.upsell-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 10px 0 12px;
}
.benefits {
  margin: 0 0 10px;
  padding-left: 18px;
  color: #223b5f;
}
.benefits li { margin-bottom: 6px; }
.all-included-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.all-included-head h3 {
  margin: 0;
  font-size: 1rem;
  color: #18345a;
}
.digiblog-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #cfe0f4;
  object-fit: cover;
}
.cover-img {
  width: 100%;
  max-width: 340px;
  border-radius: 12px;
  border: 1px solid #c8d8ec;
  display: block;
}
.qr-img {
  width: 156px;
  height: 156px;
  border-radius: 10px;
  border: 1px solid #c8d8ec;
  background: #fff;
  padding: 8px;
  display: block;
  margin-bottom: 10px;
}
.buy-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: nowrap;
  margin: 8px 0;
}
.buy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 12px;
  background: #101827;
  color: #fff;
  padding: 12px 18px;
  font-weight: 700;
  min-width: 238px;
  min-height: 156px;
  font-size: 1.6rem;
  line-height: 1.12;
  text-align: center;
}
.social-media {
  margin-top: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}
.social-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.follow-label {
  margin: 8px 0 6px;
  text-align: center;
  color: #3d4654;
  font-weight: 700;
}
.copyright-line {
  margin: 10px 0 0;
  text-align: center;
  color: #4e5663;
  font-size: .9rem;
}
body.locked-bottom .bottom-section {
  filter: blur(6px);
  opacity: .9;
  pointer-events: none;
  user-select: none;
  transition: filter .35s ease, opacity .35s ease;
}
ul { margin: 8px 0 0; padding-left: 20px; }
li + li { margin-top: 5px; }
@media (min-width: 760px) {
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-topic,
  .tile-guides {
    aspect-ratio: 16 / 9;
  }
  .tile-printable,
  .tile-qr {
    aspect-ratio: 1 / 1;
  }
  .logo-box { height: 288px; margin-bottom: -12px; }
  .blog-logo { max-width: 100%; height: calc(100% + 10px); margin-top: -8px; }
  .shop-item img { min-height: 120px; max-height: 152px; }
  .upsell-grid { grid-template-columns: 1fr 1fr; align-items: center; }
}
@media (max-width: 480px) {
  .qr-img {
    width: 144px;
    height: 144px;
  }
  .buy-button {
    min-width: 214px;
    min-height: 144px;
    font-size: 1.38rem;
  }
}