/* ESKA Connect — "quiet luxury" style trial (OURA-inspired)
   ------------------------------------------------------------
   This file is loaded ONLY on index.html, and every rule here is scoped
   under body.trial-oura, so nothing else on the site is affected. It's a
   preview of a calmer, more spacious direction: no floating glass card on
   the hero, much more generous whitespace between sections, lighter type
   weights, and a quieter secondary call to action, letting the photography
   and copy breathe the way ouraring.com does, rather than boxing every
   section in cards and borders.

   The existing palette (deep green / stone / gold / cream) and the
   Playfair Display serif + script pairing are kept as-is: that pairing is
   ESKA's own identity, and the OURA reference is about restraint and
   spacing, not about becoming a tech wellness brand. If this direction is
   approved, these rules get folded into style.css and rolled out site-wide;
   until then, every other page is untouched. */

/* ---- Hero: text sits directly on the photo, no glass card ---- */
body.trial-oura .hero {
  min-height: 94vh;
  align-items: center;
}
body.trial-oura .hero-content {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  padding: 0;
  max-width: 620px;
}
body.trial-oura .hero .eyebrow {
  color: rgba(245,241,234,0.7);
  letter-spacing: 4px;
  margin-bottom: 22px;
}
body.trial-oura .hero h1 {
  font-size: 58px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.3px;
}
body.trial-oura .hero .script-line {
  font-size: 24px;
  margin: 10px 0 24px;
}
body.trial-oura .hero p.lead {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(245,241,234,0.85);
  max-width: 460px;
  margin-bottom: 36px;
}
body.trial-oura .hero .btn-row { gap: 28px; align-items: center; }
body.trial-oura .hero .btn-primary {
  text-transform: none;
  letter-spacing: 0.2px;
  font-size: 15px;
  font-weight: 600;
  padding: 15px 34px;
}
/* Secondary action becomes a quiet underlined text link instead of a
   second competing pill button, so there's one clear primary move. */
body.trial-oura .hero .btn-outline {
  background: none;
  border: none;
  padding: 8px 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--cream);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(245,241,234,0.4);
}
body.trial-oura .hero .btn-outline:hover {
  background: none;
  text-decoration-color: var(--cream);
}

/* ---- Section rhythm: far more air between bands ---- */
body.trial-oura section.band { padding: 150px 0; }
body.trial-oura .cta-band { padding: 150px 0; }
body.trial-oura .section-head { max-width: 640px; margin-bottom: 76px; }
body.trial-oura .section-head h2 {
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.2px;
}
body.trial-oura .section-head .eyebrow { letter-spacing: 3px; margin-bottom: 18px; }

/* ---- Feature cards: lighter weight, more breathing room ---- */
body.trial-oura .feature-grid { gap: 60px; }
body.trial-oura .feature h3 { font-weight: 500; font-size: 18px; letter-spacing: 0; }
body.trial-oura .feature p { font-size: 14.5px; line-height: 1.75; }

/* ---- Journey timeline: lighter headings, more vertical space ---- */
body.trial-oura .journey-grid { gap: 80px; }
body.trial-oura .journey-title { font-weight: 500; margin-bottom: 32px; }
body.trial-oura .journey-step { padding-bottom: 32px; }
body.trial-oura .journey-step h4 { font-weight: 500; }
body.trial-oura .journey-note { margin-top: 64px; padding-top: 36px; }

/* ---- Vault teaser: drop the double glass-on-gradient card, let the
   deep green panel itself carry the moment with more open padding ---- */
body.trial-oura .vault-teaser { padding: 0; border-radius: 4px; }
body.trial-oura .vault-teaser-inner {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  padding: 96px 56px;
}
body.trial-oura .vault-teaser h2 { font-weight: 500; font-size: 32px; }

/* ---- Europe teaser panel: same restraint ---- */
body.trial-oura .glass-panel {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(245,241,234,0.18);
  box-shadow: none;
}

/* ---- Final CTA band ---- */
body.trial-oura .cta-band h2 { font-weight: 500; font-size: 32px; }

@media (max-width: 780px) {
  body.trial-oura .hero h1 { font-size: 36px; }
  body.trial-oura section.band, body.trial-oura .cta-band { padding: 90px 0; }
}