/* RIDE site v2 (2026-10-22): the shorter home page (option A of the conversion plan), the phone header with its own sign-up
   button, the two-column footer, and the screens and details pages that hold what moved off the home page.
   Loaded after hub.css (and after hub-fx.css where a page uses it) on every main page. The legal pages do not load it. */

/* ---------- Header: a compact sign-up button at every width; Day/Night moves into the menu on phones ---------- */
.header-actions .header-cta { display: inline-flex; min-height: 2.75rem; padding: .45rem 1rem; font-size: .9rem; }
.header-actions .theme-toggle { display: none; }
.site-nav .nav-theme { padding: .35rem .85rem .25rem; }
@media (min-width: 60rem) {
  .header-actions .theme-toggle { display: inline-flex; }
  .header-actions .header-cta { padding: .5rem 1.1rem; font-size: .92rem; }
  .site-nav .nav-theme { display: none; }
}

/* ---------- Hero: no entrance animation, a static contour field, the phone crop inside the first screen ---------- */
.fx-on .hero-copy > *, .fx-on .hero-visual { opacity: 1; transform: none; animation: none; }
.fx-on .hero h1 em::after, .fx-on .hero h1 em::before { animation: none; }
.fx-contours, .fx-on .fx-contours:not(.gl-on) { animation: none; }
.hero { padding-block: 1.25rem 2.25rem; }
@media (min-width: 60rem) { .hero { padding-block: 3.25rem 4rem; } }
.hero .eyebrow { margin-bottom: .6rem; }
.hero h1 { font-size: clamp(2.15rem, 4.6vw, 3.6rem); line-height: 1.04; margin-bottom: .9rem; }
.hero .lead { margin-bottom: 0; }
.hero .actions { margin-top: 1.2rem; }
@media (max-width: 39.99rem) { .hero .actions .btn { width: 100%; } }
.hero-line { display: flex; align-items: flex-start; gap: .55rem; margin: .8rem 0 0; font-size: .9rem; line-height: 1.45; color: var(--ink-2); }
.hero-line .dot { flex: none; width: .5rem; height: .5rem; margin-top: .42rem; border-radius: 50%; background: var(--accent); }
@media (min-width: 60rem) { .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; } }

/* A crop of a real screen ("screen detail") on phones, so an app picture is inside the first phone screen. */
.only-phone { display: block; }
.only-desk { display: none; }
@media (min-width: 40rem) { .only-phone { display: none; } .only-desk { display: block; } }
.crop { margin: 1.1rem 0 0; }
.crop-frame { position: relative; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 1.1rem; background: var(--raise); box-shadow: var(--shadow); }
.crop-frame img { display: block; width: 100%; height: auto; max-width: none; border: 0; border-radius: 0; box-shadow: none; }
/* Margin percentages resolve against the frame width, so margin-top = -(source y / 720) shifts a 720 px wide source. */
.crop--route { aspect-ratio: 720 / 348; }
.crop--route img { margin-top: -101.39%; }  /* sc-route-card-twist-dark y 730-1078: route end and card, not the app's own Start button */
/* The dated-preview tag sits on the picture itself, so it is in view whenever any of the picture is. */
.crop-frame .shot-tag { position: absolute; z-index: 1; left: .55rem; top: .55rem; margin: 0; background: rgba(8, 11, 16, .84); color: #EAF1F8; border-color: #5B6E80; }
.crop figcaption { margin-top: .5rem; font-size: .84rem; line-height: 1.4; color: var(--ink-2); }

/* ---------- Plan / Ride / Replay rows: text beside a small real screen on phones, three columns on desktop ---------- */
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.rows > li { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 8.5rem; gap: 1rem; align-items: start; }
.rows h3 { margin-bottom: .4rem; }
.rows p { margin: 0; color: var(--ink-2); font-size: .97rem; line-height: 1.55; }
.rows .num { display: block; margin-bottom: .35rem; font-size: .74rem; font-weight: 750; letter-spacing: .14em; color: var(--accent-text); }
.rows .shot img { border-radius: .9rem; }
.rows .shot figcaption { font-size: .78rem; margin-top: .45rem; }
@media (min-width: 60rem) {
  .rows { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem; }
  .rows > li { grid-template-columns: 1fr; }
  .rows .shot { max-width: 14rem; order: -1; }
}
.section-head--tight { margin-bottom: 1.6rem; }
.section--tight { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

/* ---------- Also in the beta: three short cards ---------- */
.mini { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.mini > li { margin: 0; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--frame); }
.mini h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.mini p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--ink-2); }
@media (min-width: 60rem) { .mini { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
.more-link { margin: 1.1rem 0 0; }
.more-link .text-link { display: inline-block; padding-block: .55rem; }

/* ---------- The beta: you get / we ask ---------- */
.givegive { display: grid; gap: 1rem; margin: 1.4rem 0 0; }
@media (min-width: 40rem) { .givegive { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
.givegive > div { padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--frame); }
.givegive h3 { font-size: .78rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); margin-bottom: .4rem; }
.givegive .checklist { margin: 0; }
.givegive .checklist li { margin: .35rem 0; font-size: .97rem; line-height: 1.45; }
.beta-band h2 { margin-bottom: .75rem; }
.beta-band .lead { max-width: 36rem; }
.beta-band .actions { margin-top: 1.4rem; }
@media (max-width: 39.99rem) { .beta-band .actions .btn { width: 100%; } }
.beta-band .fine { margin-top: .8rem; }

/* ---------- FAQ, closing strip ---------- */
.faq summary { padding: .85rem .25rem; font-size: 1rem; }
.closing { padding-block: 2rem 2.5rem; border-top: 1px solid var(--line); }
.closing .fine { margin: 0; max-width: 40rem; }

/* ---------- Footer: two link columns side by side on phones ---------- */
.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
@media (min-width: 60rem) { .footer-grid { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); } }

/* ---------- Screens page: the two illustrations side by side on wide screens ---------- */
.lab-grid { display: grid; gap: 1.5rem; align-items: start; }
.lab-grid .road-lab { margin: 0; }
.lab-grid .lean-stage { width: 100%; max-width: 28rem; }
@media (min-width: 60rem) { .lab-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; } }

/* ---------- Screens and details pages: a page title the size of the other service pages' ---------- */
.section-head h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); margin-bottom: 1rem; }

/* ---------- Details page: feature notes read as one column ---------- */
.detail-copy { max-width: 46rem; }
.detail-copy .eyebrow .pill { vertical-align: .1em; }

/* ---------- Beta page: the road ahead as three one-liners ---------- */
.ideas li strong { color: var(--ink); }