/* Bless Up on patoispal.com: Patois Pal's layout (/style.css) with Bless Up touches */

.kicker {
  margin-bottom: 14px;
  font-family: var(--display);
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero .kicker { color: var(--leaf); }

/* Hero: the app's paper beach scene, with the copy on a cream paper card */

.hero--paper {
  background: #8fd0cf url("/blessup/assets/art-hero-wide.jpg") center 30% / cover no-repeat;
  padding-bottom: var(--panel-pad);
}

.hero--paper .hero-copy {
  justify-self: start;
  max-width: 620px;
  padding: clamp(26px, 3.4vw, 48px);
  border-radius: 30px;
  background: var(--cream);
  box-shadow: 4px 7px 0 rgba(23, 15, 41, 0.2);
  transform: rotate(-1.2deg);
}

.hero--paper .title { font-size: clamp(3.8rem, 8.4vw, 8.4rem); }

.phone--back {
  left: 2%;
  right: auto;
  top: 4%;
  bottom: auto;
  z-index: 1;
  transform: rotate(-8deg);
  animation: bob 7s ease-in-out infinite;
}

.screen--shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.screen--phrase .screen-word { font-size: 12.5cqw; min-height: 2.9em; }

.hero-doc {
  position: absolute;
  top: -2%;
  right: -4%;
  z-index: 4;
  width: clamp(140px, 15vw, 220px);
  height: auto;
  filter: drop-shadow(0 18px 18px rgba(23, 15, 41, 0.28));
  animation: bob 5s ease-in-out infinite 0.4s;
}

/* Tiles */

.tile--grow { grid-column: span 5; background: var(--coral); }
.tile--read { grid-column: span 4; background: var(--leaf); color: var(--cream); }
.tile--reason { grid-column: span 4; background: var(--hibiscus); }

/* Paper illustrations from the app, pasted on like cut-outs */

.tile-art {
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 620;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 3px 6px 0 rgba(23, 15, 41, 0.22);
  transform: rotate(-1.2deg);
}

.tile--learn .tile-art { aspect-ratio: 1400 / 620; transform: rotate(0.8deg); }
.tile--read .tile-art { transform: rotate(1deg); }
.tile--track .tile-art { transform: rotate(1.4deg); }

.tile-scene { position: relative; }

.tile-doc {
  position: absolute;
  right: -4%;
  bottom: 4%;
  width: 46%;
  height: auto;
  filter: drop-shadow(0 12px 12px rgba(23, 15, 41, 0.3));
  animation: bob 5s ease-in-out infinite;
}

/* Privacy and support */

.policy-head { background: var(--sun); }
.policy-head .title { font-size: clamp(3.2rem, 8vw, 7.5rem); margin-bottom: 0.3em; }
.policy-head .lede { max-width: none; margin: 0; }
.policy { background: #fffdf8; }
.policy-body { max-width: 720px; }

.policy h2 {
  margin: 2.2em 0 0.5em;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.policy h2:first-child { margin-top: 0; }
.policy p { margin-bottom: 1em; line-height: 1.7; }
.policy a { text-underline-offset: 3px; }
.policy .effective { margin-top: 2.4em; font-weight: 700; opacity: 0.7; }

@media (max-width: 1100px) {
  .tile--grow, .tile--read, .tile--reason { grid-column: auto; }
}

@media (max-width: 960px) {
  .hero-doc { top: 0; right: 0; }
  .hero--paper { background-image: url("/blessup/assets/art-hero-tall.jpg"); background-position: center bottom; }
  .hero--paper .hero-copy { max-width: none; }
}

@media (max-width: 700px) {
  .tile--grow, .tile--read, .tile--reason { grid-column: auto; }
}

/* Banner back to Patois Pal: burnt orange */

.promo-bar--ember { background: #c4531c; gap: 8px; }
.promo-bar--ember:hover { background: #a8461a; }
.promo-tag--cream { background: var(--cream); }