/* ============================================================================
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.
========================================================================= */
/* Site-wide line-wrapping (features.css loads on every marketing page). Headings
balance across lines so a title never drops a lone 3-4 word line; body copy uses
pretty so a paragraph never ends on a single orphaned word, filling the last line.
Progressive enhancement -- browsers without text-wrap keep the previous wrapping. */
h1, h2, h3, .lede { text-wrap: balance; }
p { text-wrap: pretty; }
/* ---------- 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:-.015em; 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; } }
/* The Features hero carries only an . With the anchor trio gone it would sit
far shorter than the /cycling and /running heroes (kicker + h1 + standfirst),
so give it the same stage height and centre the title within it. */
.ft-hero-plain{ min-height:512px; display:grid; place-items:center; }
@media(max-width:820px){ .ft-hero-plain{ min-height:420px; } }
/* Faded top hero (features + sport pages): the photo dissolves into the page at
the bottom rather than cutting hard to the canvas band below. The element also
carries .ft-hero, so this only re-points the ::after gradient — the top stays
darkened for text legibility, then it fades to --canvas (#F4F5F7), the colour
the next section sits on. Text is z-indexed above ::after, so it is untouched. */
.ft-hero-fade::after{
background:linear-gradient(180deg,
rgba(15,18,22,.50) 0%,
rgba(15,18,22,.40) 30%,
rgba(15,18,22,.30) 50%,
rgba(244,245,247,.55) 74%,
#F4F5F7 88%,
#F4F5F7 100%);
}
/* Features fades to WHITE, not canvas: its "Compatible with" band sits on the
white page, while the sport pages' band below is --canvas. A fade to the wrong
one leaves a faint seam where the two backgrounds meet. */
.ft-hero-fade.ft-hero-plain::after{
background:linear-gradient(180deg,
rgba(15,18,22,.50) 0%,
rgba(15,18,22,.40) 30%,
rgba(15,18,22,.30) 50%,
rgba(255,255,255,.55) 74%,
#fff 88%,
#fff 100%);
}
/* The section right below a faded hero (the sport pages' .lp-band) carries a
1px top divider that read as a hard line across the dissolve, and its 72px top
pad left too much air under the fade. Drop the divider and tighten the top;
the band keeps its bottom divider. */
.ft-hero-fade + .lp-band{ border-top:0; padding-top:28px; }
/* ---------- trio of anchor cards ----------
The tour's table of contents. Three text-only boxes gave the eye nothing to
land on and read as one repeated block, so each now carries its own mark:
a dashboard layout, a magnifier for reading a session closely, a bullseye
for the model of you. The mark is what differentiates them at a glance;
the centred caps head stays, matching .tsx-principles and .tsx-index.
The overlap is deeper than it was. At -46px only the top third of the card
sat on the dark hero, which read as a misalignment rather than a decision. */
.ft-trio{
display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
max-width:1120px; margin:-72px auto 0; padding:0 24px;
position:relative; z-index:5;
}
.ft-trio a{
display:flex; flex-direction:column; align-items:center; text-align:center;
background:#fff; border:1px solid #E6E8ED; border-radius:16px; padding:26px 24px 24px;
text-decoration:none; color:inherit;
box-shadow:0 4px 20px rgba(25,28,34,.07);
transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.ft-trio a:hover{
transform:translateY(-3px); border-color:#D3D7DE;
box-shadow:0 12px 30px rgba(25,28,34,.11);
}
.ft-trio .ic{
width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
background:#FFF1F3; color:#FF1744; margin-bottom:15px; flex:none;
}
.ft-trio .ic svg{ width:21px; height:21px; }
.ft-trio h3{ font-size:15px; font-weight:700; margin:0 0 7px; text-transform:uppercase; text-align:center; letter-spacing:.06em; }
.ft-trio p{ font-size:15px; color:#434955; margin:0; line-height:1.5; }
/* 15px, not 13: these are the page's primary navigation into each deep-dive,
and at caption size they read as a footnote rather than as the link.
margin-top:auto keeps the three links on one line across the row even when
the descriptions above them wrap to different heights. */
.ft-trio .go{
display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding-top:12px;
font-size:15px; font-weight:700; color:#FF1744;
}
.ft-trio .go svg{ width:15px; height:15px; transition:transform .16s ease; }
.ft-trio a:hover .go svg{ transform:translateX(3px); }
/* The deeper overlap eats into the hero's bottom padding, which left only 16px
between the CTA button and the cards. A hero that is followed by the trio
carries the extra room; every other .ft-hero is untouched. */
.ft-hero:has(+ .ft-trio) .ft-hero-in{ padding-bottom:128px; }
@media(max-width:860px){
.ft-trio{ grid-template-columns:1fr; margin-top:-40px; }
.ft-hero:has(+ .ft-trio) .ft-hero-in{ padding-bottom:96px; }
}
/* ---------- alternating screenshot rows ---------- */
.ft-row{
/* Media column wider than copy so the screenshots are large. The media
alternates left/right (via .flip's order), so the columns are MIRRORED on
.flip rows below - that keeps the image the same (larger) size on every row
instead of shrinking on the right, the bug an unmirrored asymmetric grid had. */
display:grid; grid-template-columns:1.2fr .8fr; gap:48px; align-items:center;
max-width:1200px; margin:0 auto; padding:84px 24px 0;
}
.ft-row.flip{ grid-template-columns:.8fr 1.2fr; } /* mirror, so media stays the wide column */
.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:-.01em; 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, .ft-row.flip{ 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:-.01em; 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; }
}
/* 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:-.01em;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 features hero image, 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}
/* ---------- What You Get: real product screenshots in the site's feature rows ----------
Reuses .ft-row / .lp-showcase (the features page's own treatment). Content and
screenshots are sport-specific: cycling shows the ride/power app, running the
pace/terrain/form app (see sports.ts, the demo runner in the app, and
scripts/screenshots-run.mjs). Wrapped in the canvas band so the hero dissolve
still lands on --canvas. */
.wyg-band{ padding-bottom:44px; }
.wyg-h2{ text-align:center; }
.wyg-band .ft-row:first-of-type{ padding-top:36px; }
@media(max-width:920px){ .wyg-band .ft-row:first-of-type{ padding-top:28px; } }
@media(max-width:820px){.ft-plan{padding:64px 0}}
/* ---------- homepage hero: long-form lede headline ----------
The homepage hero is a full-bleed stage, not a page header, so it keeps the
600px stage height the old .lp-hero carried. Scoped to :has(.lede) so the
features/sport heroes and the closing CTA band (both .ft-hero) stay as they
are, sized by their own content. */
.ft-hero:has(.lede){ min-height:600px; display:grid; place-items:center; }
/* .ft-row carries top padding only, which leaves the last one closing straight
into the dark ethos band below it. The final row gets its own bottom close. */
.ft-row-end{ padding-bottom:84px; }
@media(max-width:920px){ .ft-row-end{ padding-bottom:64px; } }
.ft-hero h1.lede{
text-transform:none; font-size:28px; line-height:1.34;
letter-spacing:-.018em; max-width:1000px; margin:0 auto 30px;
}
.ft-hero-in:has(.lede){ max-width:1000px; }
.ft-hero .lp-btn.ghost{ color:#fff; border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.06); }
.ft-hero .lp-btn.ghost:hover{ background:rgba(255,255,255,.14); }
@media(max-width:820px){ .ft-hero:has(.lede){ min-height:500px; } }
@media(max-width:760px){ .ft-hero h1.lede br{ display:none; } .ft-hero h1.lede{ font-size:22px; max-width:600px; } }
/* ---------- subpage prose kit ----------
The reference pages (training-science, about, help) speak the features
page's language: same 1120 grid, same two-column row, same grey caps kicker
over a 34px head, same 15px body.
Sections are a rail plus a column, not a centred blob. The prose used to
run 820px wide while the cards above it ran 1120, so the page changed grid
halfway down and read as two designs stapled together. Now the heading
holds a left rail and the prose sits beside it, which is the same shape as
.ft-row and gives a reading measure without inventing a second grid. */
/* scroll-margin-top keeps an anchored section clear of the sticky NAV: the
jump lands the section top at 22px, so its 72px padding puts the heading at
94 rather than 2px under the bar. Nothing to do with the rail, which does
not move. */
.sp-wrap{ max-width:1120px; margin:0 auto; padding:8px 24px 84px; }
.sp-sec{ padding-top:72px; scroll-margin-top:22px; display:grid; grid-template-columns:1fr 1.75fr; gap:48px; align-items:start; }
.sp-sec h2{ font-size:34px; line-height:1.12; letter-spacing:-.01em; font-weight:800; margin:0; }
/* Every paragraph rule is qualified to the same weight on purpose. The kicker
and the citation are both
, so as bare `.sp-kick` / `.sp-src` they TIED
the old `.sp-sec p` on specificity and lost on source order: kicker, body
and citation all rendered 15px #434955, collapsing three type roles into
one. Keep these selectors explicit rather than reordering the block. */
.sp-head p.sp-kick{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:#565C66; margin:0 0 10px; }
.sp-body p{ font-size:15px; line-height:1.65; color:#434955; margin:0 0 14px; }
.sp-body p:last-child{ margin-bottom:0; }
.sp-body b{ color:#191C22; }
.sp-body p.sp-src{ font-size:13px; color:#565C66; border-left:2px solid #E6E8ED; padding:2px 0 2px 14px; margin:20px 0 0; line-height:1.6; }
.sp-body > *:first-child{ margin-top:0; }
/* A second heading inside one section's body (Inside a Session stacks three)
sits in the prose column, so it steps down rather than competing with the
rail. 22px is the next stop on the scale below the 34px section head. */
.sp-body h2{ font-size:22px; line-height:1.25; letter-spacing:-.01em; margin:30px 0 8px; }
.sp-body h2:first-child{ margin-top:0; }
@media(max-width:900px){
.sp-sec{ grid-template-columns:1fr; gap:14px; padding-top:56px; }
.sp-sec h2{ font-size:28px; }
.sp-body h2{ font-size:18px; }
}
/* ---------- contact form ----------
Shared by /contact and /help so the two cannot drift. Sizes stay on the site
scale (13 label / 15 input / 22 head); the inputs borrow the same hairline and
radius as .ct-card and .sp-src so the form reads as part of the page rather
than as a browser default. */
.cf{ background:#fff; border:1px solid #E6E8ED; border-radius:16px; padding:30px 30px 26px;
box-shadow:0 8px 30px rgba(25,28,34,.10); max-width:720px; margin:0 auto; text-align:left; }
.cf-compact{ border:0; border-radius:0; padding:0; box-shadow:none; max-width:none; }
.cf-h{ font-size:22px; font-weight:800; letter-spacing:-.01em; margin:0 0 18px; }
.cf-compact .cf-h{ font-size:18px; }
.cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cf-field{ display:block; margin:0 0 16px; }
.cf-label{ display:block; font-size:13px; font-weight:700; text-transform:uppercase;
letter-spacing:.1em; color:#565C66; margin:0 0 6px; }
.cf input, .cf select, .cf textarea{
width:100%; box-sizing:border-box; font:inherit; font-size:15px; color:#191C22;
background:#fff; border:1px solid #D3D7DE; border-radius:10px; padding:11px 13px;
transition:border-color .15s ease, box-shadow .15s ease;
}
.cf textarea{ resize:vertical; min-height:130px; line-height:1.6; }
.cf input:focus, .cf select:focus, .cf textarea:focus{
outline:none; border-color:#FF1744; box-shadow:0 0 0 3px rgba(255,23,68,.14);
}
.cf ::placeholder{ color:#8A909B; }
/* Off-screen rather than display:none -- some form-fillers skip hidden fields,
and this one only works if a bot can see it. */
.cf-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.cf-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:4px; }
.cf-status{ font-size:15px; line-height:1.5; margin:0; color:#434955; }
.cf-status.cf-bad{ color:#C11437; }
.cf-status.cf-good{ color:#0F7B4F; }
.cf-sent .cf-row, .cf-sent .cf-field, .cf-sent button{ display:none; }
@media(max-width:640px){
.cf{ padding:24px 20px 22px; }
.cf-row{ grid-template-columns:1fr; gap:0; }
}
/* Attribution under the compatibility logos. Shown here rather than only in the
Terms because this is where the marks themselves appear, and a row of other
companies' logos is the one place a reader could infer endorsement. */