/* ============================================================
   ADDITIVE STYLES — new content components only.
   Uses the same design tokens as styles.css (colours, fonts,
   radius, shadows). Does not modify or override the original
   visual system — cover, nav, animations, existing sections
   all remain exactly as they were.
   ============================================================ */

/* ---- Audit grid (2x2) ---- */
.audit-grid{
  max-width: var(--max);
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.audit-card{
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(26px,3vw,34px);
  box-shadow: 0 24px 48px -32px rgba(6,53,74,0.18);
}
.audit-tag{
  display:inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.tag-position{ background: var(--ice); color: var(--midnight); }
.tag-opportunity{ background: var(--aqua); color: var(--white); }
.tag-challenge{ background: var(--midnight); color: var(--ice); }
.tag-response{ background: var(--deep-ocean); color: var(--aqua-bright); }
.audit-points{ display:flex; flex-direction:column; gap: 14px; }
.audit-points li{ font-size: 15px; line-height: 1.6; color: var(--charcoal); }
.audit-assumption{ font-style: italic; opacity: 0.85; padding-top: 8px; border-top: 1px dashed rgba(6,53,74,0.2); }
@media (max-width: 800px){ .audit-grid{ grid-template-columns: 1fr; } }

/* ---- Audience cards ---- */
.audience-grid{
  max-width: var(--max);
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.audience-card{
  background: var(--midnight);
  border-radius: var(--radius-lg);
  padding: clamp(26px,3vw,32px);
}
.audience-card h3{ font-size: 20px; color: var(--white); margin-bottom: 12px; }
.audience-card p{ font-size: 15px; line-height: 1.6; color: var(--ice); margin-bottom: 16px; }
.audience-tag{
  display:block;
  font-size: 13px;
  font-style: italic;
  color: var(--aqua-bright);
  padding-top: 14px;
  border-top: 1px solid rgba(244,244,244,0.14);
}
@media (max-width: 800px){ .audience-grid{ grid-template-columns: 1fr; } }

/* ---- Voice compare ---- */
.voice-compare{
  max-width: var(--max);
  margin: 0 auto clamp(32px,4vw,48px);
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.voice-card{ border-radius: var(--radius-md); padding: 24px 28px; }
.voice-bad{ background: rgba(244,244,244,0.06); border: 1px dashed rgba(244,244,244,0.25); }
.voice-good{ background: var(--midnight); }
.voice-label{ display:block; font-family: var(--font-display); font-weight:600; font-size: 12px; margin-bottom: 10px; }
.voice-bad .voice-label{ color: rgba(244,244,244,0.5); }
.voice-good .voice-label{ color: var(--aqua-bright); }
.voice-card p{ font-size: 15.5px; line-height: 1.5; color: var(--ice); font-style: italic; }
@media (max-width: 700px){ .voice-compare{ grid-template-columns: 1fr; } }

.personality-grid{
  max-width: var(--max);
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.personality-item{ background: var(--midnight); border-radius: var(--radius-lg); padding: 22px; }
.personality-item h3{ font-size: 16px; color: var(--aqua-bright); margin-bottom: 8px; }
.personality-item p{ font-size: 14px; line-height: 1.5; color: var(--ice); }
@media (max-width: 900px){ .personality-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .personality-grid{ grid-template-columns: 1fr; } }

/* ---- Pillars v2 (6-card detailed) ---- */
.pillars-v2{
  max-width: var(--max);
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.pillarv2-card{ background: var(--midnight); border-radius: var(--radius-lg); padding: clamp(24px,2.6vw,28px); }
.pillarv2-card h3{ font-size: 20px; color: var(--white); margin-bottom: 16px; }
.pillarv2-row{ display:grid; grid-template-columns: 88px 1fr; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(244,244,244,0.1); }
.pillarv2-row:first-of-type{ border-top: none; }
.pillarv2-row span{ font-size: 12px; font-weight:600; color: var(--aqua-bright); font-family: var(--font-display); align-self:start; padding-top: 1px; }
.pillarv2-row p{ font-size: 14px; line-height: 1.55; color: var(--ice); }
@media (max-width: 900px){ .pillars-v2{ grid-template-columns: 1fr; } }
@media (max-width: 500px){ .pillarv2-row{ grid-template-columns: 1fr; gap: 4px; } }

/* ---- Product section ---- */
.product-facts{
  max-width: var(--max);
  margin: 0 auto clamp(32px,4vw,48px);
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.fact-chip{
  background: var(--ice);
  color: var(--midnight);
  font-size: 14px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px;
}
.product-grid{
  max-width: var(--max);
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.product-block{ background: var(--white); border-radius: var(--radius-lg); padding: clamp(24px,2.6vw,30px); box-shadow: 0 20px 40px -32px rgba(6,53,74,0.18); }
.product-block h3{ font-size: 18px; color: var(--midnight); margin-bottom: 10px; }
.product-block p{ font-size: 15px; line-height: 1.6; opacity: 0.82; }
@media (max-width: 800px){ .product-grid{ grid-template-columns: 1fr; } }

.confirm-box{
  max-width: var(--max);
  margin: clamp(28px,3vw,36px) auto 0;
  background: var(--ice);
  border-radius: var(--radius-md);
  padding: 20px 26px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--midnight);
}
.confirm-box strong{ color: var(--midnight); }

/* ---- Launch phases ---- */
.phase-list{ max-width: var(--max); margin: 0 auto; display:flex; flex-direction:column; gap: 14px; }
.phase-row{
  display:grid;
  grid-template-columns: 60px 1fr 220px;
  gap: 20px;
  align-items:center;
  background: var(--midnight);
  border-radius: var(--radius-lg);
  padding: clamp(20px,2.4vw,26px);
}
.phase-num{ font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--aqua-bright); }
.phase-body h3{ font-size: 18px; color: var(--white); margin-bottom: 6px; }
.phase-body p{ font-size: 14.5px; line-height: 1.5; color: var(--ice); }
.phase-pillars{ font-size: 12.5px; color: var(--aqua-bright); text-align: right; opacity: 0.85; }
@media (max-width: 800px){
  .phase-row{ grid-template-columns: 1fr; text-align:left; gap: 8px; }
  .phase-pillars{ text-align:left; }
}

/* ---- See / Feel / Do ---- */
.see-feel-do{
  max-width: var(--max);
  margin: 0 auto clamp(32px,4vw,44px);
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.sfd-item{ background: var(--white); border-radius: var(--radius-lg); padding: 24px; box-shadow: 0 20px 40px -32px rgba(6,53,74,0.18); }
.sfd-item span{ display:block; font-family: var(--font-display); font-weight:600; color: var(--aqua); font-size: 13px; margin-bottom: 10px; }
.sfd-item p{ font-size: 15px; line-height: 1.55; color: var(--midnight); }
@media (max-width: 800px){ .see-feel-do{ grid-template-columns: 1fr; } }

/* ---- Content mix bars ---- */
.mix-bars{ max-width: var(--max); margin: 0 auto; display:flex; flex-direction:column; gap: 14px; }
.mix-row{ display:grid; grid-template-columns: 200px 1fr; gap: 16px; align-items:center; }
.mix-label{ font-size: 14px; color: var(--charcoal); }
.mix-bar{ height: 10px; background: rgba(6,53,74,0.08); border-radius: 999px; overflow:hidden; }
.mix-fill{ height: 100%; background: var(--aqua); border-radius: 999px; }
.mix-note{ max-width: var(--max); margin: 16px auto 0; font-size: 13px; opacity: 0.6; font-style: italic; }
@media (max-width: 600px){ .mix-row{ grid-template-columns: 1fr; gap: 6px; } }

/* ---- TikTok section ---- */
.tiktok-grid{
  max-width: var(--max);
  margin: 0 auto clamp(32px,4vw,44px);
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.tiktok-item{ background: var(--midnight); border-radius: var(--radius-lg); padding: 24px; }
.tiktok-item h3{ font-size: 17px; color: var(--white); margin-bottom: 8px; }
.tiktok-item p{ font-size: 14.5px; line-height: 1.55; color: var(--ice); }
@media (max-width: 700px){ .tiktok-grid{ grid-template-columns: 1fr; } }

.tiktok-examples{ max-width: var(--max); margin: 0 auto; display:flex; flex-direction:column; gap: 12px; }
.tiktok-examples p{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  color: var(--aqua-bright);
  padding: 14px 0;
  border-top: 1px solid rgba(244,244,244,0.12);
}
.tiktok-examples p:first-child{ border-top: none; }

/* ---- Concepts v2 ---- */
.concepts-grid-v2{
  max-width: var(--max);
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.concept-card-v2{ background: var(--white); border-radius: var(--radius-lg); padding: 22px 26px; box-shadow: 0 20px 40px -32px rgba(6,53,74,0.16); }
.cc-pillar{ display:block; font-size: 12px; font-weight:600; color: var(--aqua); margin-bottom: 10px; text-transform: none; }
.cc-hook{ font-family: var(--font-display); font-weight: 500; font-style: italic; font-size: 17px; color: var(--midnight); margin-bottom: 8px; line-height: 1.35; }
.cc-shows{ font-size: 14px; line-height: 1.55; opacity: 0.75; }
@media (max-width: 800px){ .concepts-grid-v2{ grid-template-columns: 1fr; } }

/* ---- Feed rationale ---- */
.feed-rationale{ max-width: 620px; margin: clamp(24px,3vw,32px) auto 0; }
.feed-rationale p{ font-size: 14.5px; line-height: 1.7; color: var(--ice); text-align:center; }
.feed-rationale strong{ color: var(--aqua-bright); }

/* ---- Funnel ---- */
.funnel-row{
  max-width: var(--max);
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  position: relative;
}
.funnel-step{
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 20px 18px;
  box-shadow: 0 20px 40px -32px rgba(6,53,74,0.18);
  position: relative;
}
.funnel-step h3{ font-size: 17px; color: var(--midnight); margin-bottom: 8px; }
.funnel-step p{ font-size: 13px; line-height: 1.5; opacity: 0.75; margin-bottom: 12px; }
.funnel-pillar{ display:block; font-size: 11px; color: var(--aqua); font-style: italic; border-top: 1px solid rgba(6,53,74,0.1); padding-top: 10px; }
.funnel-step:not(:last-child)::after{
  content: "→";
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--aqua);
  font-size: 16px;
  z-index: 2;
}
@media (max-width: 1000px){
  .funnel-row{ grid-template-columns: 1fr 1fr; }
  .funnel-step:not(:last-child)::after{ display:none; }
}
@media (max-width: 560px){ .funnel-row{ grid-template-columns: 1fr; } }

/* ---- Recommendation list ---- */
.rec-list{
  max-width: var(--max);
  margin: 0 auto clamp(28px,3.4vw,40px);
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.rec-item{
  background: var(--midnight);
  border-radius: var(--radius-lg);
  padding: clamp(22px,2.6vw,28px) clamp(24px,3vw,32px);
}
.rec-item h3{ font-size: 18px; color: var(--white); margin-bottom: 8px; }
.rec-item p{ font-size: 15px; line-height: 1.6; color: var(--ice); max-width: 820px; }

/* ---- Collaboration mini-cards ---- */
.collab-row{
  max-width: var(--max);
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.collab-card{ background: var(--deep-ocean); border: 1px solid rgba(244,244,244,0.14); border-radius: var(--radius-lg); padding: 22px 26px; }
.collab-card h3{ font-size: 15px; color: var(--aqua-bright); margin-bottom: 8px; }
.collab-card p{ font-size: 14px; line-height: 1.5; color: var(--ice); }
@media (max-width: 700px){ .collab-row{ grid-template-columns: 1fr; } }

/* ---- Package list ---- */
.package-list{
  max-width: var(--max);
  margin: 0 auto;
  border-top: 1px solid rgba(6,53,74,0.12);
}
.package-row{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(6,53,74,0.12);
}
.package-row span{ font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--midnight); }
.package-row p{ font-size: 15px; color: var(--charcoal); opacity: 0.85; }
.package-note{
  max-width: var(--max);
  margin: 16px auto 0;
  font-size: 13.5px;
  font-style: italic;
  opacity: 0.65;
}
@media (max-width: 640px){
  .package-row{ grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
}

/* ---- Investment placeholder ---- */
.investment-box{
  max-width: var(--max);
  margin: clamp(36px,4vw,52px) auto 0;
  background: var(--white);
  border: 1px dashed rgba(6,53,74,0.3);
  border-radius: var(--radius-lg);
  padding: clamp(28px,3vw,36px);
  display:flex;
  flex-direction:column;
  align-items: flex-start;
  gap: 14px;
}
.investment-label{ font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--midnight); }
.investment-line{ display:block; width: 100%; max-width: 320px; height: 1px; background: rgba(6,53,74,0.25); }
.investment-hint{ font-size: 13.5px; font-style: italic; color: var(--charcoal); opacity: 0.55; }

/* ---- Stories note ---- */
.stories-note{
  max-width: var(--max);
  margin: clamp(20px,2.4vw,28px) auto 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--charcoal);
  opacity: 0.75;
}
.stories-note strong{ color: var(--midnight); opacity: 1; }