/* ============================================================================
   Features page. Rides on landing.css (wrapped in #landing so the scoped rules
   apply); this file only adds what the homepage doesn't have: the page hero,
   the trio of anchor cards, the alternating screenshot rows, the principle
   band, and the integrations row.
   ========================================================================= */

/* ---------- hero ---------- */
.ft-hero{
  position:relative; overflow:hidden; background:#0F1216; isolation:isolate;
}
.ft-hero-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.72; filter:grayscale(.15);
}
.ft-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,18,22,.48) 0%, rgba(15,18,22,.30) 45%, rgba(15,18,22,.64) 100%);
}
.ft-hero-in{
  position:relative; z-index:1; max-width:900px; margin:0 auto;
  padding:110px 24px 100px; text-align:center; color:#fff;
}
.ft-kick{
  font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:#fff; margin:0 0 18px;
}
.ft-hero h1{
  font-size:54px; line-height:1.04; letter-spacing:-.025em; font-weight:800;
  margin:0 0 18px; color:#fff;
}
.ft-hero p{ font-size:18px; line-height:1.55; color:#fff; margin:0 auto 30px; max-width:620px; }
@media(max-width:820px){
  .ft-hero-in{ padding:76px 22px 66px; }
  .ft-hero h1{ font-size:40px; }
  .ft-hero p{ font-size:15px; }
}
@media(max-width:480px){ .ft-hero h1{ font-size:34px; } }

/* ---------- trio of anchor cards ---------- */
.ft-trio{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  max-width:1120px; margin:-46px auto 0; padding:0 24px;
  position:relative; z-index:5;
}
.ft-trio a{
  background:#fff; border:1px solid #E6E8ED; border-radius:14px; padding:22px 24px;
  text-decoration:none; color:inherit; box-shadow:0 8px 30px rgba(25,28,34,.10);
  transition:transform .15s ease, border-color .15s ease;
}
.ft-trio a:hover{ transform:translateY(-2px); border-color:#D3D7DE; }
.ft-trio h3{ font-size:18px; font-weight:700; margin:0 0 5px; letter-spacing:-.01em; }
.ft-trio p{ font-size:15px; color:#434955; margin:0; line-height:1.5; }
.ft-trio .go{ display:inline-block; margin-top:10px; font-size:13px; font-weight:700; color:#FF1744; }
@media(max-width:860px){ .ft-trio{ grid-template-columns:1fr; margin-top:-30px; } }

/* ---------- alternating screenshot rows ---------- */
.ft-row{
  display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center;
  max-width:1120px; margin:0 auto; padding:84px 24px 0;
}
.ft-row.flip .ft-media{ order:2; }
.ft-row .ft-media{ min-width:0; }
.ft-copy .kick{
  font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:#565C66; margin:0 0 10px;
}
.ft-copy h2{ font-size:34px; line-height:1.12; letter-spacing:-.02em; font-weight:800; margin:0 0 14px; }
.ft-copy > p{ font-size:15px; line-height:1.65; color:#434955; margin:0 0 18px; }
.ft-list{ list-style:none; margin:0; padding:0; }
.ft-list li{
  position:relative; padding:0 0 0 26px; margin:0 0 12px;
  font-size:15px; line-height:1.55; color:#434955;
}
.ft-list li b{ color:#191C22; }
.ft-list li::before{
  content:""; position:absolute; left:0; top:7px; width:9px; height:9px;
  border-radius:50%; background:#FF1744;
}
@media(max-width:920px){
  .ft-row{ grid-template-columns:1fr; gap:26px; padding-top:64px; }
  .ft-row.flip .ft-media{ order:0; }
  .ft-copy h2{ font-size:28px; }
}

/* ---------- principle band ---------- */
.ft-principle{
  background:#0F1216; color:#fff; margin-top:92px; padding:72px 0;
}
.ft-principle .in{ max-width:820px; margin:0 auto; padding:0 24px; text-align:center; }
.ft-principle h2{ font-size:34px; letter-spacing:-.02em; font-weight:800; margin:0 0 16px; }
.ft-principle p{ font-size:18px; line-height:1.65; color:#fff; margin:0; }
@media(max-width:640px){
  .ft-principle h2{ font-size:28px; }
  .ft-principle p{ font-size:15px; }
}

/* ---------- integrations ---------- */
.ft-int{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px;
}
.ft-int .chip{
  display:inline-flex; align-items:center; gap:9px;
  background:#fff; border:1px solid #E6E8ED; border-radius:999px;
  padding:11px 18px; font-size:15px; font-weight:700; color:#191C22;
}
.ft-int .chip svg{ width:18px; height:18px; display:block; }

/* Sport landing pages (/cycling, /running). The closing CTA is an h2 now, not a
   second h1, so it needs the size the old inline style was providing. */
.ft-cta-h{font-size:40px;line-height:1.1;letter-spacing:-.02em;margin:0 0 12px}
.ft-cta{margin-top:0}
.ft-cta .ft-hero-in{padding:84px 24px 88px}
.ft-faq{max-width:820px;margin:0 auto;padding:72px 24px 84px}
.ft-q{border-bottom:1px solid var(--line,#e6e6e6)}
.ft-q summary{cursor:pointer;padding:20px 0;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px}
.ft-q summary::-webkit-details-marker{display:none}
.ft-q summary h3{margin:0;font-size:18px;font-weight:600}
.ft-q summary::after{content:"+";font-size:22px;line-height:1;opacity:.5;flex:none}
.ft-q[open] summary::after{content:"\2212"}
.ft-q p{margin:0 0 22px;font-size:15px;line-height:1.6;opacity:.8}
@media(max-width:640px){.ft-cta-h{font-size:34px}}
/* The sport pages carry four pillars, and four items in the shared 3-up grid
   leave a lone card on the second row. Two by two balances them. */
.ft-grid-2{grid-template-columns:repeat(2,1fr) !important}
@media(max-width:820px){.ft-grid-2{grid-template-columns:1fr !important}}

/* ---------- sport pages: the training-plan band ----------
   Reuses the homepage's left-aligned ethos treatment. Two overrides: the
   backdrop follows the page's own hero instead of the hardcoded hero-2, and the
   band sits flush under the card grid, which previously carried .ft-principle's
   92px top margin on top of the grid's own 72px bottom padding. */
.ft-plan{margin-top:0;padding:84px 0}
.ft-plan::before{background-image:var(--plan-bg)}
.ft-plan .lp-section{max-width:860px}
/* The card grid closes tighter into the dark band below it. */
.ft-band{padding-bottom:40px}
@media(max-width:820px){.ft-plan{padding:64px 0}}