/* ==========================================================================
   theme.css
   TrainOn's product look, from their Figma design system: Night background,
   Cerulean accent, IBM Plex Sans, square panels, hairline rules, tonal pill
   buttons. Restyles the components defined in base.css and pages.css.
   Where base.css uses a more specific selector, the theme declaration carries
   !important so the TrainOn look wins.
   ========================================================================== */
/* IBM Plex Sans, SIL Open Font License 1.1: ../fonts/plex-sans-OFL.txt */
@font-face {
  font-family: "IBM Plex Sans";
  src: url(../fonts/plex-sans-Regular.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url(../fonts/plex-sans-Medium.woff2) format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url(../fonts/plex-sans-SemiBold.woff2) format("woff2");
  font-weight: 600 700;
  font-display: swap;
}
html,
body {
  background: var(--color-bg);
}
body {
  font-feature-settings:
    "ss01" 1,
    "ss02" 1;
  color: var(--color-text);
}
button,
input,
textarea,
select {
  font-family: inherit;
  font-feature-settings: inherit;
}
/* Type: product H1 is Medium, no negative tracking */
h1,
h2,
h3,
h4 {
  font-weight: 500;
  letter-spacing: -0.01em;
}
h1,
h2 {
  line-height: 1.08;
}
b,
strong {
  font-weight: 600;
}
.lede,
p {
  color: inherit;
}
.lede {
  color: var(--color-text-muted);
}
/* ==========================================================================
   Header: product top bar, full width, hairline under it
   ========================================================================== */
.hdr {
  top: 0;
  padding: 0;
}
.hdr-in {
  max-width: none;
  height: 64px;
  border-radius: 0;
  padding: 0 var(--gutter);
  background: rgb(var(--night-rgb) / 0.96);
  border: 0;
  border-bottom: 1px solid var(--color-line);
  box-shadow: none;
}
.nav-links {
  color: var(--color-text-muted);
  margin-left: var(--sp-40);
}
.nav-links a[aria-current="page"]::after {
  border-radius: 0;
  bottom: -8px;
  height: 2px;
}
.menu-btn {
  border-radius: 0;
  background: none;
}
.mnav {
  border-radius: 0;
  background: var(--color-bg);
  box-shadow: none;
}
.mnav a:not(.btn) {
  border-radius: 0;
}
/* ==========================================================================
   Buttons: tonal pills from the product (Button_M / Button_Secondary)
   ========================================================================== */
.btn,
.btn-acc,
.btn-grey,
.btn-lg {
  gap: var(--sp-10);
  text-transform: none;
}
.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
/* ==========================================================================
   Panels: square, flat, hairline
   ========================================================================== */
.card,
.story-panel {
  border-radius: 0;
}
.card {
  background: var(--color-surface);
  border-color: var(--color-line);
  box-shadow: none;
}
/* Scroll-story step list: numbered rows like the product spec frames */
.story-step {
  counter-increment: rs;
}
.story-step-btn > span::before {
  content: counter(rs, decimal-leading-zero);
  display: inline-block;
  width: 34px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}
.story-step-btn .story-step-bar,
.story-step-bar,
.story-step-bar b {
  border-radius: 0;
}
.story-panel {
  background: var(--color-surface);
}
.story-screen img {
  border-radius: 0;
  box-shadow: 0 0 0 1px var(--color-line);
}
/* Forms: product inputs, square, White 30% line */
.field input,
.field textarea,
.field select {
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--color-line-strong);
  box-shadow: none;
}
.field input:focus,
.field textarea:focus {
  border-color: var(--color-accent);
  box-shadow: none;
}
.form-state .sent-icon {
  border-radius: 0;
  background: var(--color-accent-tint);
  border: 0;
}
.cta-panel {
  box-shadow: none;
  border: 1px solid var(--color-line);
  border-top: 2px solid var(--color-accent);
}
/* inner-page closing cards (FAQ, legal) keep a plain hairline top instead of the Cerulean rule */
.cta-panel--plain {
  border-color: var(--color-line);
}
/* Scroll-story step details */
.story-step-desc p,
.story-step.on .story-step-desc p {
  padding-left: var(--sp-34);
}
.story-panel,
.story-stage .story-panel,
.story-panel.on,
.story-stage .story-panel.on {
  border-color: var(--color-line);
}
.btn {
  justify-content: center;
}
/* Scroll-story screens: the base is a real screen; the pop-out is the deeper screen the tap opens */
.story-screen.story-screen--app {
  width: 100%;
  margin: 0 auto;
  transform: none;
  opacity: 1;
}
.story-screen.story-screen--app img.story-img {
  -webkit-mask-image: none;
  mask-image: none;
}
.story-pop {
  position: absolute;
  font-size: 13px;
  line-height: 1.35;
  color: var(--color-text);
  transform-origin: 20% 0;
}
.story-pop h6 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}
.story-pop--list ul {
  list-style: none;
  margin: 0;
}
.story-pop--list li {
  display: flex;
  justify-content: space-between;
  padding: var(--sp-8) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.story-pop--list li span:last-child {
  text-align: right;
}
.story-pop small {
  display: block;
  font-size: 11px;
  color: var(--color-text-subtle);
}
/* Buttons center their label. Below them: the phone CTA bar, which repeats the hero buttons once they scroll away */
.cta-row .btn,
.cta-row .btn-acc,
.page-hero .cta-row .btn-acc,
.mnav .btn,
.form-foot .btn,
.card .btn-acc.btn-lg {
  justify-content: center;
  text-align: center;
}
.mcta {
  display: none;
}
@media (max-width: 640px) {
  .mcta {
    display: flex;
    gap: var(--sp-8);
    position: fixed;
    left: 0;
    right: 0;
    /* iPhone Safari draws the page under its floating toolbar and resizes the screen while scrolling: the bar
       runs 120px past the bottom edge as one solid box, so no section or seam ever shows below it */
    bottom: -120px;
    z-index: 70;
    padding: var(--sp-10) var(--sp-12) calc(var(--sp-10) + env(safe-area-inset-bottom) + 120px);
    background: var(--fg-black); /* solid, so nothing shows through, like the header */
    border-top: 1px solid var(--color-line);
    transform: translateY(110%);
  }
  .mcta.on {
    transform: none;
  }
  .mcta .btn {
    flex: 1 1 0;
    --btn-pad: 0 var(--sp-10);
    font-size: 15px;
  }
}
/* Phones: the story heading stays pinned under the header while its screens play below it. The left column
   and its sticky wrapper step aside (display: contents) so the heading can stick for the whole story;
   sections.js sets --story-heading-h to the heading's height; home.css pins the screens just under it. */
@media (max-width: 820px) and (min-height: 561px) {
  .story-section .story-text,
  .story-section .story-sticky {
    display: contents;
  }
  .story-section .story-sticky h2 {
    position: sticky;
    top: 76px;
    z-index: 2;
    background: var(--band-bg, var(--color-bg));
    box-shadow:
      0 -12px 0 var(--band-bg, var(--color-bg)),
      0 12px 0 var(--band-bg, var(--color-bg));
  }
  /* the intro pins under the heading too, when there is room for it (sections.js adds .lede-pinned) */
  .story-section .lede-pinned .story-sticky .lede {
    position: sticky;
    top: calc(88px + var(--story-heading-h, 99px));
    z-index: 2;
    margin-top: var(--sp-12);
    background: var(--band-bg, var(--color-bg));
    box-shadow: 0 12px 0 var(--band-bg, var(--color-bg));
  }
}
/* Phones: scroll story stacked. One sticky tile, caption on top, screen below, crossfade per step */
@media (max-width: 820px) {
  .story-track {
    display: block;
  }
  .story-stage {
    position: sticky;
    display: block;
  }
  .story-stage .story-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    min-height: 0;
    justify-content: flex-start;
  }
  .story-stage .story-panel.on {
    opacity: 1;
    visibility: visible;
  }
  .story-caption {
    display: block;
    padding: var(--sp-18) var(--sp-18) 0;
  }
  .story-caption b {
    display: block;
    font-size: 18px;
    font-weight: 500;
    margin: 0;
  }
  .story-caption b::before {
    display: block;
    margin-bottom: var(--sp-6);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--color-accent);
  }
  .story-caption p {
    font-size: 14px;
    margin-top: var(--sp-6);
  }
  .story-screen.story-screen--app {
    justify-content: flex-start;
    align-items: flex-start;
    flex: 1 1 auto;
    min-height: 0;
  }
}
/* A story step shows the full TrainOn screen, then highlights and pops out the detail. The screen sits in the
   card with the same margin on all four sides, so its edge reads as one even frame. */
.story-screen.story-screen--app {
  display: block;
  padding: var(--sp-18);
  max-width: none;
}
.story-frame > picture {
  display: contents; /* the image sizes against the frame, as if the picture were not there */
}
.story-frame {
  position: relative;
  display: block;
  width: 100%;
}
.story-screen.story-screen--app .story-frame img.story-img {
  display: block;
  width: 100%;
  max-width: none;
  max-height: none;
  height: auto;
}
@media (min-width: 821px) {
  .story-stage {
    height: auto;
    min-height: 0;
    aspect-ratio: 1.42;
  }
  .story-stage .story-panel {
    position: absolute;
    inset: 0 0 auto 0;
  }
}
@media (max-width: 820px) {
  .story-stage {
    height: var(--story-stage-h, 410px); /* sections.js fits it to the space left on a phone screen */
  }
  /* the screen fills the rest of the card inside the even margin. Crops keep the top of the device: the
     phone shots already end mid-phone, so any extra trim comes off the bottom. Under 600px the billing step
     swaps the wide laptop for bill-phone.webp, made in this frame's shape */
  .story-screen.story-screen--app .story-frame {
    height: 100%;
  }
  .story-screen.story-screen--app .story-frame img.story-img {
    height: 100%;
    object-fit: cover;
    object-position: 50% 0;
  }
  .story-screen.story-screen--app {
    padding: var(--sp-12);
  }
}
@media (min-width: 821px) {
  .story-layout .story {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7.5fr);
    gap: clamp(var(--sp-28), 3.5vw, var(--sp-56));
  }
}
@media (max-width: 820px) {
  .story-screen.story-screen--app .story-pop,
  .story-panel[data-i] .story-screen.story-screen--app .story-pop {
    font-size: 10px;
  }
  .story-screen.story-screen--app .story-pop h6 {
    font-size: 9px;
  }
  .story-screen.story-screen--app .story-pop--list li {
    padding: var(--sp-4) 0;
  }
  .story-screen.story-screen--app .story-pop small {
    font-size: 9px;
  }
}
/* ==========================================================================
   Page heading load: split headline lines, the inner-page entrance and the fallback font
   ========================================================================== */
/* Split headline lines overlap by -.26em, the same spacing as the unsplit heading. Adjacent negative margins
   collapse to the larger one, so the second line carries the whole value. */
[data-split] .ln + .ln {
  margin-top: -0.26em;
}
/* Late start: once the failsafe (--hero-failsafe) has shown the copy, it stays shown instead of replaying the
   entrance */
.js-motion.hskip .page-hero .lede,
.js-motion.hskip .page-hero .cta-row,
.js-motion.hskip [data-split] {
  animation: none !important;
  opacity: 1;
}
/* Fallback font sized to match IBM Plex Sans, so a late font swap does not rewrap or shift the hero */
@font-face {
  font-family: "Plex Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 101%;
  ascent-override: 101.5%;
  descent-override: 27.2%;
  line-gap-override: 0%;
}
body {
  font-family: "IBM Plex Sans", "Plex Fallback", system-ui, sans-serif;
}
/* ==========================================================================
   Motion: reveals
   ========================================================================== */
.js-motion .rv,
.js-motion [data-reveal] {
  transition:
    opacity var(--reveal-dur) var(--reveal-ease),
    transform var(--reveal-dur) var(--reveal-ease);
  transition-delay: var(--reveal-delay, 0s);
}
@media (prefers-reduced-motion: no-preference) {
  .js-motion [data-split].is-split .li {
    animation-duration: var(--dur-slow);
  }
}
/* Motion: scroll-story crossfades */
.story-stage .story-panel {
  transition:
    opacity var(--dur-base) ease,
    visibility 0s linear var(--dur-base),
    border-color var(--dur-base);
}
.story-stage .story-panel.on {
  transition:
    opacity var(--dur-base) ease,
    border-color var(--dur-base);
}
@media (max-width: 820px) {
  .story-stage .story-panel {
    transition:
      opacity var(--dur-base) ease,
      visibility 0s linear var(--dur-base);
  }
  .story-stage .story-panel.on {
    transition: opacity var(--dur-base) ease;
  }
}
.story-screen {
  transition:
    transform var(--dur-slow) var(--ease-out),
    opacity var(--dur-slow) ease;
}
.story-step-desc {
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.story-step-desc p {
  transition: opacity var(--dur-base) ease;
}
/* Motion: hover and toggles */
.story-step-btn,
.story-step-bar,
.field input,
.field textarea {
  transition-duration: var(--dur-fast);
}
/* Motion: the phone CTA bar slides in (with reduced motion it just appears); the menu icon bars turn */
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .mcta {
    transition: transform var(--dur-base) var(--ease-out);
  }
}
.menu-btn i {
  transition: transform var(--dur-fast) var(--ease-out);
}
/* ==========================================================================
   Spacing: section gaps, page hero padding, and the story column on short screens
   ========================================================================== */
.section--tight + .section--tight {
  padding-top: 0;
}
section:has(> .demo-grid) {
  padding-bottom: clamp(var(--sp-36), 5vw, var(--sp-64));
}
@media (min-width: 641px) {
  .page-hero,
  .page-hero.short {
    padding-bottom: var(--sp-56);
  }
}
@media (max-width: 640px) {
  .page-hero:not(.short) {
    padding-bottom: var(--sp-32);
  }
}
.story-sticky .lede {
  margin-top: var(--sp-18);
}
/* Short desktop windows: the story column and stage fit the viewport */
@media (min-width: 821px) and (min-height: 561px) and (max-height: 680px) {
  .story-sticky,
  .story-stage {
    top: 84px !important;
  }
  .story-sticky .lede {
    display: none !important;
  }
  .story-sticky h2 {
    font-size: clamp(26px, 2.4vw, 34px) !important;
  }
  .story-steps {
    margin-top: var(--sp-16) !important;
  }
  .story-stage {
    aspect-ratio: auto !important;
    height: calc(100vh - 108px) !important;
  }
}
/* Very short screens (phones sideways, 200% zoom) */
@media (max-height: 560px) {
  .story-layout .story {
    grid-template-columns: 1fr !important;
  }
  .story-sticky {
    position: static !important;
  }
  .story-sticky h2 {
    max-width: none !important;
  }
  .story-steps {
    display: none !important;
  }
  .story-track {
    display: block !important;
    margin-top: var(--sp-20);
  }
  .story-stage {
    position: sticky !important;
    top: 64px !important;
    aspect-ratio: auto !important;
    height: calc(100vh - 76px) !important;
    display: block !important;
  }
  .story-stage .story-panel {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
  }
  .story-caption {
    display: block !important;
    padding: var(--sp-14) var(--sp-18) 0 !important;
  }
  .story-screen.story-screen--app {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: var(--sp-10) var(--sp-18) !important;
  }
  .story-screen.story-screen--app .story-frame {
    height: 100%;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
  }
  .story-screen.story-screen--app .story-frame img.story-img {
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain;
  }
}
.mnav {
  max-height: calc(100dvh - 84px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
h1,
h2,
h3,
p,
li,
label {
  overflow-wrap: break-word;
}
@media (max-height: 560px) {
  .story-panel[data-i] .story-screen.story-screen--app .story-pop {
    bottom: 10px !important;
    top: auto !important;
    font-size: 9px !important;
    padding: var(--sp-6) var(--sp-8) !important;
  }
  .story-screen.story-screen--app .story-pop--list li {
    padding: 2px 0 !important;
  }
  .story-screen.story-screen--app .story-pop h6 {
    margin-bottom: var(--sp-4) !important;
  }
}
/* ==========================================================================
   Navigation
   ========================================================================== */
.hdr-in {
  justify-content: flex-start;
}
.hdr-cta {
  margin-left: auto;
}
.hdr-signin {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: var(--sp-8); /* plus the header gap: 24px, as on trainon.io */
  font-size: 14px;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--dur-fast);
}
.hdr-signin:hover {
  color: var(--color-text);
}
@media (max-width: 820px) {
  .hdr-signin {
    display: none; /* phones: Sign in sits in the menu */
  }
}
.nv-row .ti {
  color: var(--color-accent);
  width: 20px;
  height: 20px;
  flex: none;
}
.nv-bd {
  display: none;
}
@media (max-width: 1100px) and (min-width: 821px) {
  .nav-links {
    margin-left: var(--sp-24);
  }
}
@media (max-width: 820px) {
  .menu-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--color-text);
    display: grid;
    place-items: center;
    margin-left: auto;
  }
  .hdr .menu-btn .mi {
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
  }
  .hdr .menu-btn .mi i {
    position: absolute;
    left: 1px;
    top: 9.375px;
    width: 18px;
    height: 1.25px;
    border-radius: 1px;
    background: currentColor;
    transform-origin: 50% 50%;
    transition: transform var(--dur-fast) var(--ease-in-out);
  }
  .hdr .menu-btn .mi i.a {
    transform: translateY(-4px) rotate(0deg);
  }
  .hdr .menu-btn .mi i.c {
    transform: translateY(4px) rotate(0deg);
  }
  .hdr .menu-btn .mi.s1 i.a,
  .hdr .menu-btn .mi.s1 i.c {
    transform: translateY(0) rotate(0deg);
  }
  .hdr .menu-btn .mi.sx i.a {
    transform: translateY(0) rotate(45deg);
  }
  .hdr .menu-btn .mi.sx i.c {
    transform: translateY(0) rotate(-45deg);
  }
  .hdr.open {
    z-index: 200;
  }
  .mnav {
    position: fixed;
    left: 0;
    right: 0;
    top: 64px;
    bottom: 0;
    max-height: none;
    height: calc(100dvh - 64px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: var(--sp-8) var(--gutter) var(--sp-20);
    background: var(--color-bg);
    border-top: 1px solid var(--color-line);
  }
  .nv-row {
    gap: var(--sp-14);
    padding: var(--sp-18) 0 var(--sp-18) var(--sp-4) !important;
    border-bottom: 1px solid var(--color-line);
    text-decoration: none;
    position: relative;
    background: none !important;
  }
  .nv-row b {
    display: block;
    font-size: 20px;
    font-weight: 500;
  }
  .nv-row small {
    display: block;
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 3px;
  }
  .nv-row span {
    flex: 1;
  }
  .nv-go {
    opacity: 0.4;
  }
  .nv-row[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 14px;
    bottom: 14px;
    width: 2px;
    background: var(--color-accent);
  }
  .nv-foot {
    display: flex;
    flex-direction: column;
    gap: var(--sp-16);
    margin-top: var(--sp-24);
  }
  .nv-cta {
    width: 100%;
  }
  .nv-signin {
    justify-content: center;
    text-decoration: none;
  }
  .nv-bd {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(5, 5, 12, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) ease;
    z-index: 150;
  }
  .hdr.open:not(.closing) ~ .nv-bd {
    opacity: 1;
  }
}
/* The sheet unfolds and its rows float in one after another; closing folds it back. Rows 3 and 4 are ready for
   more header links. Reduced motion: the sheet simply appears. */
@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
  .mnav:not([hidden]) {
    animation: sheet-open 0.5s var(--ease-out) both;
  }
  .hdr.closing .mnav {
    animation: sheet-close 0.4s var(--ease-in) both;
  }
  .mnav:not([hidden]) .nv-row,
  .mnav:not([hidden]) .nv-foot {
    animation: menu-row-in 0.55s var(--ease-out) both;
  }
  .mnav .nv-row:nth-child(1) {
    animation-delay: 0.12s;
  }
  .mnav .nv-row:nth-child(2) {
    animation-delay: 0.2s;
  }
  .mnav .nv-row:nth-child(3) {
    animation-delay: 0.28s;
  }
  .mnav .nv-row:nth-child(4) {
    animation-delay: 0.36s;
  }
  .mnav .nv-foot {
    animation-delay: 0.44s;
  }
  .hdr.closing .mnav .nv-row,
  .hdr.closing .mnav .nv-foot {
    animation: menu-row-out 0.25s ease both;
  }
}
@keyframes sheet-open {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes sheet-close {
  from {
    clip-path: inset(0 0 0 0);
  }
  to {
    clip-path: inset(0 0 100% 0);
  }
}
@keyframes menu-row-in {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
@keyframes menu-row-out {
  to {
    opacity: 0;
    transform: translateY(-6px);
    filter: blur(4px);
  }
}
/* ==========================================================================
   FAQ
   ========================================================================== */
.faq {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid var(--color-line);
}
.faq-item {
  border-bottom: 1px solid var(--color-line);
  scroll-margin-top: 96px;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-20);
  padding: var(--sp-24) 0;
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 500;
  color: var(--color-text);
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
/* TrainOn's "20/Plus Round/W" icon: opening folds the vertical stroke flat onto the horizontal one (a minus),
   closing unfolds it */
.faq-icon {
  flex: none;
  color: var(--color-text);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
}
.faq-icon-v {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  transition: transform var(--dur-base) var(--ease-out);
}
.faq-item[open]:not(.closing) .faq-icon-v {
  transform: rotate(90deg);
}
@media (prefers-reduced-motion: reduce) {
  .faq-icon-v {
    transition: none;
  }
}
.faq-answer {
  padding: 0 var(--sp-48) var(--sp-26) 0;
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.6;
}
.faq-answer p {
  margin: 0 0 var(--sp-12);
}
.faq-answer p:last-child {
  margin: 0;
}
.faq-answer a {
  color: #5fe0e8;
}
@media (max-width: 820px) {
  .faq-answer {
    padding-right: 0;
  }
}
/* ==========================================================================
   TrainOn component rules, from TrainOn's Figma design system
   (TrainOn Product DS > 02 Product Components > Buttons, and its text styles).

   Button_M (40px): radius 36, padding 12/48, Button_01 16/16 Medium
     Primary     solid cerulean, Night label         hover: cerulean at 70% on Night (--btn-hover)
     Tonal       cerulean 20% fill, cerulean label   hover: 30% fill (nav CTAs)
     Secondary   white 7% fill, white 75% label      hover: white 15% fill
   Button_XS (28px, nav): radius 14, padding 2/28, cerulean 20%, 14/22 Medium
   Text colors: white 100 / 75 / 50%, cerulean #19C4CF
   ========================================================================== */
.ferr {
  margin: var(--sp-12) 0 0;
  color: var(--color-error);
  font-size: 14px;
}
.btn,
.btn-acc,
.btn-grey,
.btn-lg {
  min-height: var(--btn-h);
  padding: var(--btn-pad);
  border-radius: var(--btn-radius);
  font-size: var(--btn-fs);
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0;
  border: 0;
  box-shadow: none;
}
.btn-acc {
  background: var(--fg-cerulean);
  color: var(--fg-black);
}
/* The header, mobile-menu and phone sticky-bar CTAs use the tonal style. As in the app, the 20%
   Cerulean layer sits on a solid Night layer, so the page never shows through the button. */
.hdr-cta,
.nv-cta,
.mcta .btn-acc {
  background: linear-gradient(rgb(var(--accent-rgb) / 0.2), rgb(var(--accent-rgb) / 0.2)), var(--fg-black);
  color: var(--fg-cerulean);
}
.btn-grey {
  background: rgba(255, 255, 255, 0.07);
  color: var(--color-text-muted);
}
@media (hover: hover) {
  .btn-acc:hover {
    background: var(--btn-hover);
    color: var(--fg-black);
  }
  .hdr-cta:hover,
  .nv-cta:hover,
  .mcta .btn-acc:hover {
    background: linear-gradient(rgb(var(--accent-rgb) / 0.3), rgb(var(--accent-rgb) / 0.3)), var(--fg-black);
    color: var(--fg-cerulean);
  }
  .btn-grey:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-text-muted);
  }
}
.mcta .btn {
  padding: var(--sp-12) var(--sp-20);
}
/* one button (Platform): the standard button size, centered, like every other CTA */
.mcta {
  justify-content: center;
}
.mcta .btn:only-child {
  flex: none;
  padding: var(--sp-12) var(--sp-48); /* Button_M padding; the bar sets its own --btn-pad */
  font-size: var(--btn-fs);
}
.hdr .hdr-cta {
  min-height: var(--btn-xs-h);
  height: var(--btn-xs-h);
  padding: var(--btn-xs-pad);
  border-radius: var(--btn-xs-radius);
  font-size: 14px;
  line-height: 22px;
}
.nav-links a {
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text);
}
.page-hero .eyebrow {
  color: var(--fg-cerulean);
}
.feature-tag {
  border-radius: var(--chip-radius);
  padding: 1px var(--sp-12) 2px;
  white-space: nowrap;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  font-style: normal;
}
.page-hero h1 {
  font-size: var(--fs-h1);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: 0;
}
.page-hero .lede,
.section-sub,
.founder p,
.platform-group-head p {
  font-size: var(--fs-body-1);
  line-height: 1.4;
  font-weight: 400;
  color: var(--color-text-muted);
}
.section-head h2,
.leads-copy h2,
.founder h2,
.cta-panel h2,
.platform-group-head h2,
.story-sticky h2,
.story-section .story-sticky h2 {
  font-size: var(--fs-h2);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: 0;
}
.truth-in li,
.truth-out li,
.platform-features b,
.checklist b,
.savings-steps b,
.showcase-steps b {
  font-size: var(--fs-body-2);
  line-height: 1.4;
  font-weight: 500;
}
.platform-features span,
.checklist span,
.savings-steps span,
.showcase-text {
  font-size: var(--fs-body-3);
  line-height: 1.4;
  font-weight: 400;
  color: var(--color-text-subtle);
}
.savings-steps li::before {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 24px;
  background: #ffffff;
  color: var(--fg-black);
  font-size: var(--fs-body-3);
  line-height: 1.4;
}
.truth-in li,
.truth-out li {
  padding: var(--sp-10);
  background: var(--fg-black);
  border: 1px solid var(--color-line-strong);
  color: var(--color-text);
  border-radius: 0;
}
.quote,
.savings-bars {
  border: 0;
  border-top: 2px solid var(--fg-card-top);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
}
.quote {
  padding: var(--sp-40) var(--sp-24);
}
.quote figcaption img {
  width: 56px;
  height: 56px;
}
.quote figcaption b {
  color: var(--color-text);
}
.quote figcaption span {
  color: var(--color-text-subtle);
}
.quote blockquote {
  font-size: var(--fs-body-2);
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-text);
}
.quote .quote-logo {
  opacity: 0.3;
}
.quote figcaption,
.quote figcaption * {
  font-size: var(--fs-body-3);
  line-height: 1.4;
  font-weight: 400;
}
/* ==========================================================================
   Teal band: a full Cerulean section with Night text. Add .band-teal to a <section>.
   The tokens are re-pointed so components inherit Night ink; the theme rules above that
   hard-code white text are re-inked here (hence !important). Contrast on Cerulean:
   Night 8.8:1, Night 80% 6.2:1, Night 72% 5.1:1 (the smallest text uses no less).
   ========================================================================== */
.band-teal {
  --color-text: var(--fg-black);
  --color-text-muted: rgb(var(--night-rgb) / 0.8);
  --color-text-subtle: rgb(var(--night-rgb) / 0.72);
  --color-line: rgb(var(--night-rgb) / 0.16);
  --color-line-strong: rgb(var(--night-rgb) / 0.34);
  --color-accent: var(--fg-black);
  --band-bg: rgb(var(--accent-rgb));
  background: var(--band-bg);
  color: var(--color-text);
}
.band-teal :is(h2, h3, b, strong):not(.story-stage *) {
  color: var(--color-text);
}
/* muted ink for body text; anything inside a bold run (the stat numbers) keeps its solid Night */
.band-teal :is(p, span, li, em, small):not(.btn, .btn *, .feature-tag, .story-stage *, b *) {
  color: var(--color-text-muted);
}
/* on Cerulean the primary button inverts: Night fill, Cerulean label (8.8:1) */
.band-teal .btn-acc,
.band-teal .feature-tag {
  background: var(--fg-black);
  color: var(--fg-cerulean);
}
@media (hover: hover) {
  .band-teal .btn-acc:hover {
    background: var(--btn-hover-night) !important;
    color: var(--fg-cerulean) !important;
  }
}
/* the screen card in a scroll story is the product's dark surface: it keeps the dark-page tokens */
.band-teal .story-stage {
  --color-text: #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.75);
  --color-text-subtle: rgba(255, 255, 255, 0.5);
  --color-line: rgba(255, 255, 255, 0.15);
  --color-line-strong: rgba(255, 255, 255, 0.3);
  --color-accent: var(--fg-cerulean);
  color: var(--color-text);
}
.band-teal .btn:focus-visible {
  outline-color: var(--fg-black);
}
.band-teal .btn-grey {
  background: rgb(var(--night-rgb) / 0.1);
  color: var(--fg-black);
}
@media (hover: hover) {
  .band-teal .btn-grey:hover {
    background: rgb(var(--night-rgb) / 0.18);
  }
}
/* Sections only pad their top, which reads fine on one dark page. Where the color changes, the
   section before the band and the last section of a band also pad their bottom. */
.section:not(.band-teal):has(+ .band-teal),
.section.band-teal:not(:has(+ .band-teal)) {
  padding-bottom: var(--space-section);
}
/* Pressed. TrainOn's design system has no pressed button state (Button_L/M/S: Default, Hover, Disabled,
   Confirmation, Processing), so a press shows the hover colour and the button sinks slightly. Outside
   (hover: hover), so a tap on a phone shows it too. */
.btn:active {
  transform: scale(0.98);
}
.btn-acc:active {
  background: var(--btn-hover);
  color: var(--fg-black);
}
.hdr-cta:active,
.nv-cta:active,
.mcta .btn-acc:active {
  background: linear-gradient(rgb(var(--accent-rgb) / 0.3), rgb(var(--accent-rgb) / 0.3)), var(--fg-black);
  color: var(--fg-cerulean);
}
.btn-grey:active {
  background: rgba(255, 255, 255, 0.15);
}
.band-teal .btn-acc:active {
  background: var(--btn-hover-night) !important;
  color: var(--fg-cerulean) !important;
}
.band-teal .btn-grey:active {
  background: rgb(var(--night-rgb) / 0.18);
}
/* Ice: the alternative look for the colored sections (teal is the default). Pale Cerulean with Night text,
   switched on by class="bands-ice" on the <html> tag of a page (index.html and platform/index.html; see the
   README, "Teal or ice"). Buttons and pills keep their solid Cerulean look. Contrast on ice: Night 72% 7.2:1,
   Night 65% 5.6:1. Every rule for the ice look is in this block and starts with .bands-ice. */
.bands-ice .band-teal {
  --color-text-muted: rgb(var(--night-rgb) / 0.72);
  --color-text-subtle: rgb(var(--night-rgb) / 0.65);
  --band-bg: #ddf6f8;
}
.bands-ice .band-teal .btn-acc,
.bands-ice .band-teal .feature-tag {
  background: var(--fg-cerulean) !important;
  color: var(--fg-black) !important;
}
@media (hover: hover) {
  .bands-ice .band-teal .btn-acc:hover {
    background: var(--btn-hover) !important;
    color: var(--fg-black) !important;
  }
}
.bands-ice .band-teal .btn-acc:active {
  background: var(--btn-hover) !important;
  color: var(--fg-black) !important;
}
/* Teal mixed into the ice option as fills and lines only: Cerulean text on ice is too light to read */
.bands-ice .band-teal :is(.platform-features li, .story-step) {
  border-color: var(--fg-cerulean);
}
.bands-ice .band-teal .story-step-bar b {
  background: var(--fg-cerulean);
}