/* ============================================================
   Choice Words — Feelings Not Features® Sales Page
   Brand foundations extracted from the Choice Words design system
   (colors_and_type.css) + page-specific base styles.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("./assets/fonts/Fraunces-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("./assets/fonts/Fraunces-Italic-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cuprum";
  src: url("./assets/fonts/Cuprum-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cuprum";
  src: url("./assets/fonts/Cuprum-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* ---------- Brand tokens ---------- */
:root {
  --cw-marsala-deep: #50021E;
  --cw-marsala:      #660226;
  --cw-red:          #E40232;
  --cw-red-deep:     #BA0107;
  --cw-pink:         #CB0E4F;
  --cw-yellow:       #F59C00;
  --cw-navy:         #1F2235;
  --cw-cream:        #F6F3F5;

  --cw-marsala-deep-700: #3A0116;
  --cw-marsala-600:      #54021F;
  --cw-red-600:          #97000B;
  --cw-pink-600:         #A60B40;
  --cw-pink-300:         #E25F88;
  --cw-cream-100:        #FFFFFF;
  --cw-cream-200:        #EFEAEC;
  --cw-ink:              #1A0009;

  --fg-muted:      #5A4951;
  --border:        rgba(26, 0, 9, 0.10);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cw-cream);
  font-family: "Cuprum", "Arial Narrow", sans-serif;
  color: var(--cw-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@keyframes cwbob {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(-6px) rotate(var(--rot, 0deg)); }
}

/* Grain / texture overlay (brand "texture overlay at 50%") */
.cw-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 80;
  opacity: 0.5;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   Interactive CTA buttons
   (faithful to the prototype's style-hover / style-active rules)
   ============================================================ */
.cw-cta {
  transition: transform 140ms cubic-bezier(.22,.61,.36,1), background 140ms, box-shadow 140ms;
}

/* Pink CTA -> red on hover, "stuck-on" press */
.cw-cta--pink:hover {
  background: var(--cw-red);
  transform: translateY(-3px);
  box-shadow: 0 9px 0 var(--cw-marsala-deep-700);
}
.cw-cta--pink:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 var(--cw-marsala-deep-700);
}

/* Yellow CTA -> lift only (keeps marsala text on yellow) */
.cw-cta--yellow:hover {
  transform: translateY(-3px);
  box-shadow: 0 9px 0 var(--cw-marsala-deep-700);
}
.cw-cta--yellow:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 var(--cw-marsala-deep-700);
}

/* Sticky-bar CTA -> red on hover, smaller lift */
.cw-cta--sticky:hover {
  background: var(--cw-red);
  transform: translateY(-2px);
}
.cw-cta--sticky:active {
  transform: translateY(1px);
}

/* Footer Instagram link */
.cw-ig-link:hover { color: var(--cw-yellow); }

/* ============================================================
   Layout helpers used by the page sections
   ============================================================ */
.cw-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.cw-grid-modules {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}

/* Collapse the colour-card / step grids on small screens */
@media (max-width: 620px) {
  .cw-grid-2 { grid-template-columns: 1fr; }
}

/* Mobile hero: headline + CTA above the photo (desktop keeps photo left) */
@media (max-width: 760px) {
  .cw-hero-copy  { order: 0 !important; }
  .cw-hero-photo { order: 1 !important; margin-top: 8px !important; }
}

/* Sticky bottom bar — hidden until JS reveals it after the hero */
.cw-sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  background: var(--cw-marsala-deep);
  border-top: 1px solid rgba(246, 243, 245, 0.16);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.22);
  padding: 16px clamp(14px, 4vw, 28px);
  transition: transform 280ms cubic-bezier(.22,.61,.36,1), opacity 220ms;
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}
.cw-sticky-bar.is-shown {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* FAQ accordion answer toggle */
.cw-faq-answer { display: none; }
.cw-faq-item.is-open .cw-faq-answer { display: block; }
.cw-faq-icon { transition: transform 180ms; }
.cw-faq-item.is-open .cw-faq-icon { transform: rotate(45deg); }