/* Unplug to Connect bilingual kit landing page.
   Ported from the "Unplug to Connect Landing" prototype. Every selector is a
   descendant of .unplug-page so the shared Nav and Footer inherit nothing from
   here. Brand teals come from theme.css; the cool fog/ink neutrals and the
   orange/red/green ramps are the Frankly design-system values the prototype
   used. */

.unplug-page {
  --utc-fog: #f6f6f7;
  --utc-ink: #141416;
  --utc-body: #3a3a3d;
  --utc-rule: #e4e4e7;
  --utc-teal-50: #e0f1f0;
  --utc-teal-200: #a5d6d3;
  --utc-teal-800: #102827;
  --utc-orange-50: #f2e5d5;
  --utc-orange-400: #c7812a;
  --utc-orange-500: #a36d28;
  --utc-orange-600: #7f5322;
  --utc-orange-800: #2b1c0f;
  --utc-red-400: #ba4d26;
  --utc-red-500: #993e21;
  --utc-green-400: #618f63;
  --utc-green-500: #4f7752;
  --utc-green-600: #3b5b3f;
  --utc-gutter: max(clamp(20px, 6vw, 120px), calc((100% - var(--content-w)) / 2));

  background: #fff;
  color: var(--utc-body);
  font-family: var(--font-body);
  overflow-x: hidden;
}

.unplug-page h1,
.unplug-page h2,
.unplug-page h3,
.unplug-page h4,
.unplug-page p {
  margin: 0;
}

.unplug-page h2 {
  font-size: clamp(32px, 3.2vw, 44px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--utc-ink);
  text-wrap: balance;
}

.utc-band {
  padding: clamp(64px, 9vw, 96px) var(--utc-gutter);
  scroll-margin-top: 80px;
}

.utc-band--fog {
  background: var(--utc-fog);
}

.utc-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}
.utc-eyebrow--light { color: var(--teal-pale); }
.utc-eyebrow--pale { color: var(--utc-teal-200); }

.utc-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 640px;
}
.utc-head p {
  font-size: 17px;
  line-height: 1.65;
  text-wrap: pretty;
}

/* ── Buttons ── */
.utc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 8px;
}
.utc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 28px;
  border-radius: var(--r-full);
  font: 600 15px var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.utc-btn:hover { text-decoration: none; }
.utc-btn--solid {
  background: #fff;
  color: var(--teal-dark);
  border: 0;
}
.utc-btn--solid:hover { background: var(--utc-teal-50); color: var(--utc-teal-800); }
.utc-btn--ghost {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  padding-inline: 26px;
}
.utc-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.utc-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ── Hero ── */
.utc-hero {
  background: var(--teal);
  padding-block: clamp(56px, 9vw, 88px) clamp(64px, 10vw, 96px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(40px, 5vw, 56px);
  align-items: center;
}
.utc-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.utc-hero h1 {
  font-size: clamp(44px, 5.4vw, 72px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}
.utc-hero p {
  font-size: 18px;
  line-height: 1.65;
  color: #fff;
  max-width: 52ch;
  text-wrap: pretty;
}
.utc-hero-figure {
  aspect-ratio: 2232 / 1532;
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--teal-dark);
  box-shadow: 0 30px 60px rgba(16, 40, 39, 0.35);
}
.utc-hero-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── What's inside ── */
.utc-inside {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.utc-game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 24px;
}

/* One accent per game: image rule, number, and Spanish name */
.utc-c-orange { --utc-accent: var(--utc-orange-400); --utc-accent-text: var(--utc-orange-500); --utc-accent-es: var(--utc-orange-600); }
.utc-c-red    { --utc-accent: var(--utc-red-400);    --utc-accent-text: var(--utc-red-400);    --utc-accent-es: var(--utc-red-500); }
.utc-c-teal   { --utc-accent: var(--teal-light);     --utc-accent-text: var(--teal);           --utc-accent-es: var(--teal); }
.utc-c-green  { --utc-accent: var(--utc-green-400);  --utc-accent-text: var(--utc-green-500);  --utc-accent-es: var(--utc-green-600); }

.utc-game {
  background: #fff;
  border: 1px solid var(--utc-rule);
  border-radius: var(--r-2xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.utc-game img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-bottom: 6px solid var(--utc-accent);
}
.utc-game-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.utc-game-num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--utc-accent-text);
}
.utc-game h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--utc-ink);
}
.utc-game-es {
  font-size: 14px;
  font-style: italic;
  font-weight: 500;
  color: var(--utc-accent-es);
}
.utc-game p {
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* ── Why it works ── */
.utc-why {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.utc-why-intro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 32px 64px;
  align-items: end;
}
.utc-why-intro > p {
  font-size: 17px;
  line-height: 1.65;
  text-wrap: pretty;
}
.utc-skill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 24px;
}
.utc-skill {
  border-radius: var(--r-2xl);
  padding: clamp(28px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.utc-skill h3 {
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 600;
  line-height: 1.2;
}
.utc-skill p {
  font-size: 16px;
  line-height: 1.65;
  text-wrap: pretty;
}
.utc-skill--teal { background: var(--utc-teal-50); color: var(--utc-teal-800); }
.utc-skill--orange { background: var(--utc-orange-50); color: var(--utc-orange-800); }
.utc-skill h3,
.utc-skill p { color: inherit; }

.utc-trait-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 32px;
}
.utc-trait {
  border-top: 2px solid var(--utc-ink);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.utc-trait h4 {
  font-size: 18px;
  font-weight: 600;
  color: var(--utc-ink);
}
.utc-trait p {
  font-size: 15px;
  line-height: 1.6;
}

/* ── Bilingual ── */
.utc-bilingual {
  background: var(--teal-dark);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 48px;
  align-items: center;
}
.utc-bilingual-quote {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
}
.utc-bilingual-quote > :first-child { max-width: 478px; }
.utc-bilingual-quote > :last-child {
  font-style: italic;
  color: var(--utc-teal-200);
}
.utc-bilingual-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.utc-bilingual-copy p {
  font-size: 20px;
  line-height: 1.55;
  color: #fff;
  text-wrap: pretty;
}

/* ── Closing CTA ── */
.utc-cta {
  background: var(--teal);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}
.utc-cta h2 {
  max-width: 832px;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
}
.utc-cta > p {
  font-size: 18px;
  line-height: 1.65;
  color: #fff;
  max-width: 52ch;
  text-wrap: pretty;
}
.utc-cta .utc-actions { justify-content: center; }
.utc-tags {
  list-style: none;
  margin: 0;
  padding: 16px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 832px;
}
.utc-tags li {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: var(--r-full);
  background: var(--teal-dark);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .utc-btn { transition: none; }
}