/* ============================================================
   Nostalgia Coloring Prompts — Sales Page stylesheet
   Design system matches the Memory Lane reference page:
   Roboto body, red #BB0A0A accents, blue #0023AC links,
   red SVG bullet icons, font-scale classes, img-pair layout.
   ============================================================ */

* { box-sizing: border-box; }
body { font-family: 'Roboto', sans-serif; max-width: 1080px; margin: 0 auto; padding: 40px 24px; background: #fff; color: #000; }
p { margin: 0; padding: 0; }
ul { margin: 8px 0 8px 24px; padding-left: 24px; }
li { margin-bottom: 10px; }

/* --- Red SVG bullet list system --- */
ul.bl { list-style: none; margin: 8px 0 8px 0; padding-left: 44px; }
ul.bl li { position: relative; margin-bottom: 16px; }
ul.bl li::before { content: ''; position: absolute; left: -40px; top: 0.28em; width: 26px; height: 26px; background-repeat: no-repeat; background-position: center; background-size: contain; }
ul.bl-check li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 13l5 5L20 6' fill='none' stroke='%23BB0A0A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
ul.bl-cross li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='%23BB0A0A' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E"); width: 22px; height: 22px; left: -38px; }
ul.bl-badge li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23BB0A0A'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
ul.bl-circle li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.4' fill='none' stroke='%23BB0A0A' stroke-width='1.8'/%3E%3Cpath d='M7.5 12.4l2.9 2.9 6-6.2' fill='none' stroke='%23BB0A0A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
ul.cols3 { column-count: 3; column-gap: 36px; }
ul.cols3 li { break-inside: avoid; }

/* --- Signature / photo --- */
.photo-circle { width: 230px; height: 230px; border-radius: 50%; object-fit: cover; display: block; }
.script-sig { font-family: 'Lobster', cursive; font-size: 3.4rem; color: rgba(153, 153, 153, 1); margin-top: 10px; }

/* --- Font scale --- */
.font-scale-5 { font-size: 1rem; }
.font-scale-6 { font-size: 1.25rem; }
.font-scale-7 { font-size: 1.5rem; }
.font-scale-8 { font-size: 1.75rem; }
.font-scale-10 { font-size: 2.25rem; }
.font-scale-11 { font-size: 2.5rem; }
.font-scale-12 { font-size: 2.75rem; }
.font-scale-13 { font-size: 3.25rem; }
.font-scale-14 { font-size: 3.75rem; }
.font-scale-15 { font-size: 4.25rem; }
.line-height-scale-5 { line-height: 1.375; }
.line-height-scale-7 { line-height: 1.625; }
.text-align-left { text-align: left; }
.text-align-center { text-align: center; }

/* --- Images & layout --- */
.image-slot { width: 100%; margin: 30px 0; text-align: center; }
.image-slot img { max-width: 100%; height: auto; }
.image-placeholder { background: #f0f0f0; border: 2px dashed #999; padding: 40px 20px; color: #666; font-size: 14px; }
.section-spacer { height: 48px; }
.hero-covers { display: flex; justify-content: center; align-items: flex-start; gap: 20px; margin: 30px 0; flex-wrap: wrap; }
.hero-covers img { width: 30%; max-width: 320px; height: auto; display: block; }
.img-pair { display: flex; justify-content: center; align-items: flex-start; gap: 24px; margin: 26px 0; flex-wrap: wrap; }
.img-pair img { width: 47%; max-width: 470px; height: auto; display: block; }
.img-single { max-width: 640px; width: 100%; height: auto; display: block; margin: 26px auto; }
.product-cover-fe { max-width: 420px; margin: 0 auto; display: block; }
.product-cover-oto { max-width: 500px; margin: 0 auto; display: block; }
.thanks-bar { background: #000; color: #fff; padding: 20px 16px; text-align: center; margin: -40px -24px 0 -24px; }
.thanks-bar p { margin: 4px 0; font-weight: 700; }
.cta-wrap { text-align: center; margin: 24px 0 8px; }
.cta-button-oto { display: inline-block; background: #FFD600; color: #000; padding: 18px 54px; font-size: 1.75rem; font-weight: 700; text-decoration: none; border-radius: 4px; margin: 16px 0 6px; letter-spacing: 0.04em; }

/* --- Launch date box + countdown timer --- */
.launch-info-box { text-align: center; background: #000; color: #fff; padding: 22px 18px; border-radius: 10px; margin: 0 auto; max-width: 420px; }
.launch-label { color: #FFD600; font-weight: 700; letter-spacing: 0.1em; font-size: 0.85rem; margin: 0 0 8px; text-transform: uppercase; }
.launch-date-display { font-size: 1.25rem; font-weight: 700; margin: 0 0 16px; line-height: 1.3; }
.countdown-timer { display: flex; justify-content: center; gap: 8px; }
.countdown-unit { background: rgba(255, 255, 255, 0.1); border-radius: 6px; padding: 10px 6px; min-width: 52px; flex: 1; max-width: 68px; }
.countdown-number { display: block; font-size: 1.5rem; font-weight: 700; color: #BB0A0A; line-height: 1; }
.countdown-label { display: block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; color: #ccc; margin-top: 4px; }
.countdown-live { font-size: 1.3rem; font-weight: 700; color: #FFD600; margin: 0; padding: 6px 0; }

/* --- Sample-plan two-column boxes --- */
.plan-box { column-count: 2; column-gap: 32px; column-rule: 1px solid #e5e5e5; column-fill: balance; padding: 20px 24px; background: #fafafa; border: 1px solid #ddd; }

/* --- Responsive --- */
@media (max-width: 768px) {
  body { padding: 24px 16px; }
  .font-scale-15 { font-size: 2.5rem; } .font-scale-14 { font-size: 2.25rem; }
  .font-scale-13 { font-size: 2.125rem; } .font-scale-12 { font-size: 2rem; }
  .font-scale-11 { font-size: 1.875rem; } .font-scale-10 { font-size: 1.75rem; }
  .font-scale-8 { font-size: 1.25rem; } .font-scale-7 { font-size: 1.125rem; } .font-scale-6 { font-size: 1rem; }
  .cta-button-oto { padding: 14px 32px; font-size: 1.25rem; display: block; }
  .hero-covers { gap: 10px; } .hero-covers img { width: 31%; }
  .img-pair { gap: 12px; } .img-pair img { width: 100%; max-width: 100%; }
  .section-spacer { height: 32px; }
  .plan-box { column-count: 1; }
  div[style*="column-count"] { column-count: 1 !important; }
  ul.cols3 { column-count: 1; }
  .script-sig { font-size: 2.4rem; }
  .photo-circle { width: 170px; height: 170px; }
  .launch-info-box { max-width: 100%; padding: 18px 12px; }
  .launch-date-display { font-size: 1.05rem; }
  .countdown-unit { min-width: 44px; padding: 8px 4px; }
  .countdown-number { font-size: 1.2rem; }
  .countdown-label { font-size: 0.6rem; }
}