/* Landing-page styles, loaded by index.html AFTER style.css.
   Legal pages load style.css only — nothing here can touch them.
   Palette mirrors packages/design-tokens/src/colors.ts;
   test/style.test.ts asserts the values that matter. */

body.landing { padding: 0; }

.section { padding: 76px 24px; }
.section-inner { max-width: 68ch; margin: 0 auto; }
.section.ruled .section-inner { border-top: 1px solid var(--line); padding-top: 64px; }
.section h2 { font-size: 26px; margin-top: 0; }

/* ---- Hero: always midnight, in both color schemes (brand surface) ---- */
.hero {
  background: #1A1B3A;
  color: #F3EADB;
  padding: 108px 24px 100px;
  position: relative;
  overflow: hidden;
}
.hero-inner { max-width: 68ch; margin: 0 auto; position: relative; }
.hero .kicker, .hero h1, .hero .lede { position: relative; z-index: 1; }
.hero .kicker { color: #A69F8E; }
.hero h1 {
  color: #F3EADB;
  font-size: clamp(34px, 9vw, 66px);
  line-height: 1.04;
  letter-spacing: -2px;
  margin: 20px 0 0;
  font-style: italic;
  font-weight: 500;
}
.hero .lede { color: #D9CFBF; max-width: 34ch; margin-top: 26px; }
.hero-glyph { position: absolute; pointer-events: none; }
.hero-glyph.joy  { top: -34px; right: -6px; width: 108px; height: 108px; opacity: .38; }
.hero-glyph.fear { bottom: -18px; left: -28px; width: 96px; height: 96px; opacity: .22; }
.hero-glyph.calm { bottom: 26px; right: 104px; width: 68px; height: 68px; opacity: .25; }

/* ---- IFAB card ---- */
.ifab-card {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 26px 28px;
  margin: 36px 0 28px;
  box-shadow: 0 1px 0 var(--line);
}
.ifab-sentence {
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink);
  margin: 16px 0 0;
}
.ifab-sentence em { font-style: italic; border-bottom: 2px solid var(--line); }

/* ---- Feeling chips ---- */
.chip {
  display: inline-block;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.chip.joy      { background: #FAE4B0; color: #B8862B; }
.chip.love     { background: #F5D4DC; color: #A35E72; }
.chip.anger    { background: #F2B6A9; color: #932E1A; }
.chip.fear     { background: #C4BBE0; color: #403280; }
.chip.sadness  { background: #AEC4DE; color: #1F426E; }
.chip.disgust  { background: #BECDA6; color: #3E5A28; }
.chip.surprise { background: #F3C3D5; color: #A03A6B; }
.chip.calm     { background: #BFD3CE; color: #4A7970; }

/* ---- Features trio ---- */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 36px; }
.trio h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.2px; margin: 14px 0 6px; color: var(--ink); }
.trio p { font-size: 15px; line-height: 1.55; margin: 0; }
.trio .glyph { width: 40px; height: 40px; display: block; }
.spark { display: flex; align-items: flex-end; gap: 4px; height: 40px; }
.spark i { width: 9px; background: #F2B84B; border-radius: 1px; }
.spark i:nth-child(1) { height: 30%; }
.spark i:nth-child(2) { height: 55%; }
.spark i:nth-child(3) { height: 40%; }
.spark i:nth-child(4) { height: 75%; }
.spark i:nth-child(5) { height: 50%; }
.spark i:nth-child(6) { height: 90%; }
.spark i:nth-child(7) { height: 65%; }

/* ---- Pricing ---- */
.price {
  font-style: italic;
  font-size: 26px;
  letter-spacing: -0.5px;
  color: var(--ink);
  margin: 0 0 14px;
}

/* ---- Sign-off above the footer ---- */
.signoff { text-align: center; }
.signoff .wordmark { margin: 0 auto 6px; }
/* The section already draws a top rule; don't let .footer draw a second one. */
.signoff .footer { border-top: none; margin-top: 10px; padding-top: 0; }

@media (max-width: 720px) {
  .trio { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 480px) {
  .hero { padding: 84px 20px 76px; }
  .section { padding: 56px 20px; }
  .ifab-sentence { font-size: 19px; }
}