/* PR-002 index.html styles, extracted verbatim from the supplied <style> block (platform QA: CSP style-src has no 'unsafe-inline'). */
/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  background: #faf9f6;
  color: #1a1a1a;
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.75;
}

.container {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 60px 0; }
section:nth-child(even) { background: #f0ede6; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1 {
  font-size: 2.25rem;
  line-height: 1.2;
  font-weight: 900;
  font-family: 'Playfair Display', Georgia, serif;
  margin-bottom: 16px;
}
h2 {
  font-size: 1.75rem;
  line-height: 1.25;
  font-weight: 800;
  font-family: 'Playfair Display', Georgia, serif;
  margin-bottom: 20px;
}
h3 {
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 700;
  font-family: system-ui, -apple-system, sans-serif;
  margin-bottom: 8px;
}
p { margin-bottom: 1.1em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; }
em { font-style: italic; }
del { color: #888; }

/* ============================================================
   SECTION LABELS
   ============================================================ */
.section-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #aaa;
  font-family: system-ui, sans-serif;
  border-top: 1px solid #e0ddd6;
  padding-top: 4px;
  margin-bottom: 28px;
}
#hook .section-label { color: #b0687e; border-color: #5a2c3a; }

/* ============================================================
   REAL IMAGE BLOCKS
   ============================================================ */
.img-block {
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  margin: 24px 0;
}
.img-block img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   CTA BUTTONS
   ============================================================ */
.cta-btn {
  display: block;
  background: #8e3a52;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 1.15rem;
  font-weight: 800;
  font-family: system-ui, -apple-system, sans-serif;
  padding: 18px 32px;
  min-height: 48px;
  border-radius: 4px;
  margin: 28px 0 12px;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.cta-btn:hover { background: #6f2d40; }
.cta-btn-sub {
  text-align: center;
  font-size: 0.85rem;
  color: #666;
  font-family: system-ui, sans-serif;
  margin-bottom: 8px;
}

/* ============================================================
   HERO SECTION (Deep wine #2e1a22)
   ============================================================ */
#hook {
  background: #2e1a22;
  color: #fff;
  padding: 64px 0;
}
#hook h1 { color: #fff; }
#hook .subheadline {
  font-size: 1.1rem;
  color: #ddc0c8;
  font-style: italic;
  margin-bottom: 28px;
  line-height: 1.6;
}
#hook .intro-copy {
  color: #c9a8b2;
  font-size: 1rem;
  margin-bottom: 24px;
  font-style: italic;
}
#hook .cta-btn {
  background: #f0c234;
  color: #1a1a1a;
  font-size: 1.2rem;
}
#hook .cta-btn:hover { background: #e0b020; }
#hook .cta-btn-sub { color: #b591a0; }

/* ============================================================
   WHAT'S INSIDE — STEP BLOCKS
   ============================================================ */
.step-block { margin-bottom: 44px; }
.step-block:last-child { margin-bottom: 0; }

.step-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.step-icon {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
}
.step-icon img { width: 100%; height: 100%; object-fit: cover; }
.step-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8e3a52;
  font-family: system-ui, sans-serif;
  font-weight: 700;
  margin-bottom: 4px;
}
.step-sub {
  font-size: 0.95rem;
  font-style: italic;
  color: #555;
  margin-top: 4px;
  font-family: Georgia, serif;
}

.situations-list {
  list-style: none;
  padding: 16px 20px;
  margin: 12px 0 8px;
  background: #f7f0f2;
  border-left: 4px solid #8e3a52;
}
.situations-list li {
  font-family: system-ui, sans-serif;
  font-size: 0.95rem;
  padding: 5px 0;
  color: #333;
}
.situations-note {
  font-size: 0.85rem;
  color: #777;
  font-style: italic;
}

/* ============================================================
   TOOLS LIST
   ============================================================ */
.tools-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 28px;
}
.tools-list li {
  padding: 11px 0 11px 28px;
  border-bottom: 1px solid #ddd;
  font-family: system-ui, sans-serif;
  font-size: 0.97rem;
  position: relative;
}
.tools-list li:last-child { border-bottom: none; }
.tools-list li::before {
  content: "✓";
  color: #8e3a52;
  font-weight: 900;
  position: absolute;
  left: 0;
}

/* ============================================================
   CREATOR STORY — PHOTO LAYOUT
   ============================================================ */
.creator-intro {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 20px;
}
.creator-photo-col { flex-shrink: 0; width: 220px; }
.creator-photo-col .photo-circle {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0;
}
.creator-photo-col .photo-circle img { width: 100%; height: 100%; object-fit: cover; }
.creator-text-col { flex: 1; }

/* ============================================================
   OFFER SECTION
   ============================================================ */
.offer-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0 28px;
  font-family: system-ui, sans-serif;
}
.offer-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #d8d4cc;
  font-size: 0.97rem;
}
.offer-table tr:last-child td { border-bottom: none; }
.offer-table td:last-child { text-align: right; white-space: nowrap; }
.offer-table .total-row td {
  font-weight: 800;
  font-size: 1.15rem;
  background: #f3e6ea;
  color: #2e1a22;
  border-top: 2px solid #8e3a52;
}
.offer-table .value-row td { color: #888; font-size: 0.9rem; }

.bonus-label {
  font-weight: 700;
  font-size: 1.05rem;
  font-family: system-ui, sans-serif;
  margin-bottom: 4px;
}
.bonus-sub { font-style: italic; color: #555; margin-bottom: 12px; font-size: 0.95rem; }

/* ============================================================
   GUARANTEE BOX
   ============================================================ */
.guarantee-box {
  border: 2px solid #8e3a52;
  padding: 36px 32px;
  text-align: center;
  background: #fff;
}
.guarantee-box .badge-circle {
  width: 180px;
  height: 180px;
  margin: 0 auto 24px;
}
.guarantee-box .badge-circle img { width: 100%; height: 100%; object-fit: contain; }
.guarantee-box h2 { margin-top: 0; }
.guarantee-box p { max-width: 520px; margin: 16px auto 0; }

/* ============================================================
   OBJECTION BLOCKS
   ============================================================ */
.objection {
  border-left: 4px solid #8e3a52;
  padding-left: 20px;
  margin-bottom: 32px;
}
.objection-q {
  font-style: italic;
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 1rem;
}
.objection p { color: #333; }

/* ============================================================
   FOOTER
   ============================================================ */
#footer-legal {
  background: #111;
  color: #888;
  padding: 36px 0;
  font-size: 0.82rem;
  font-family: system-ui, sans-serif;
  text-align: center;
  line-height: 1.7;
}
#footer-legal a { color: #888; text-decoration: underline; }
#footer-legal .footer-links { margin-bottom: 10px; }
#footer-legal .footer-name { margin-bottom: 10px; }
#footer-legal .footer-disclaimer { color: #666; font-size: 0.77rem; max-width: 560px; margin: 12px auto 0; }

/* ============================================================
   MOBILE — 375px MINIMUM
   ============================================================ */
@media (max-width: 600px) {
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.4rem; }
  h3 { font-size: 1.15rem; }
  section { padding: 44px 0; }
  #hook { padding: 48px 0; }

  .creator-intro { flex-direction: column; }
  .creator-photo-col { width: 100%; }
  .creator-photo-col .photo-circle { width: 160px; height: 160px; margin: 0 auto; }

  .step-icon { width: 56px; height: 56px; }

  .cta-btn { font-size: 1rem; padding: 16px 24px; }
  .guarantee-box { padding: 28px 20px; }
  .guarantee-box .badge-circle { width: 140px; height: 140px; }

  .offer-table td { padding: 10px 8px; font-size: 0.9rem; }
}

@media (max-width: 375px) {
  h1 { font-size: 1.5rem; }
  .container { padding: 0 16px; }
}

/* ---- Former inline style= attributes (platform QA). !important reproduces inline-style precedence exactly. ---- */
.qa-w480{max-width:480px !important;margin-left:auto !important;margin-right:auto !important}
.qa-w640{max-width:640px !important;margin-left:auto !important;margin-right:auto !important}
.qa-w360{max-width:360px !important;margin-left:auto !important;margin-right:auto !important}
.qa-fullw{width:100% !important;height:auto !important}
.qa-fineprint{margin-top:12px !important;color:#555 !important;font-size:0.8rem !important}
.qa-mt10{margin-top:10px !important}

/* ============================================================
   DESKTOP LAYOUT — platform addition 2026-09-24 (user request: "resolution is tight").
   Additive only: nothing below 900px changes. The reading column widens in steps
   but stays capped so body lines remain readable (about 85–90 characters). The hero
   image stays aligned with the text column (breakout removed 2026-09-24 at the user's request).
   ============================================================ */
@media (min-width: 900px) {
  .container { max-width: 780px; padding: 0 40px; }
  body { font-size: 1.0625rem; }
  section { padding: 72px 0; }
  h1 { font-size: 2.7rem; }
  h2 { font-size: 1.95rem; }
  .qa-w480 { max-width: 540px !important; }
  .qa-w640 { max-width: 700px !important; }
  .guarantee-box p { max-width: 580px; }
  #footer-legal .footer-disclaimer { max-width: 620px; }
}
@media (min-width: 1280px) {
  html { font-size: 17px; }
  .container { max-width: 1000px; padding: 0 56px; }
  body { font-size: 1.125rem; }
  section { padding: 92px 0; }
  h1 { font-size: 3.2rem; }
  h2 { font-size: 2.2rem; }
  .qa-w480 { max-width: 620px !important; }
  .qa-w640 { max-width: 860px !important; }
}
@media (min-width: 1440px) {
  html { font-size: 18px; }
  .container { max-width: 1080px; padding: 0 60px; }
  .qa-w640 { max-width: 920px !important; }
}