:root {
  --bg: #000d11;
  --panel: #031a1f;
  --panel-2: #05252b;
  --text: #f7faf9;
  --muted: #9db5b7;
  --accent: #09c5bb;
  --accent-dark: #023238;
  --brand-yellow: #f8c729;
  --brand-yellow-soft: #ffe173;
  --danger: #ff6f6f;
  --warning: #f8c729;
  --border: rgba(9, 197, 187, .17);
  --brand-border: rgba(248, 199, 41, .24);
  --shadow: 0 22px 50px rgba(0, 8, 10, .34);
  color-scheme: dark;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 88% 5%, rgba(9, 197, 187, .105), transparent 31%),
    radial-gradient(circle at 3% 38%, rgba(9, 197, 187, .045), transparent 24%),
    linear-gradient(155deg, #00090c 0%, #00161b 48%, #000b0f 100%);
  background-color: #000d11;
}

body::after {
  background-image: url("../assets/jeba-mark-v2-yellow.png");
  background-position: 110% 8%;
  background-repeat: repeat;
  background-size: 210px auto;
  opacity: .018;
  animation: none;
  filter: saturate(.9);
}

body::before {
  background: rgba(0, 8, 11, .72);
}

button,
input,
select,
textarea {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(248, 199, 41, .72);
  outline-offset: 3px;
}

.app {
  width: min(100%, 780px);
}

.topbar {
  margin-bottom: 22px;
}

.brand {
  gap: 11px;
}

.brand-icon {
  border: 1px solid rgba(248, 199, 41, .22);
  border-radius: 13px;
  background: #000d11;
  box-shadow:
    0 10px 24px rgba(0, 7, 9, .28),
    0 0 0 1px rgba(255, 255, 255, .025) inset;
}

.brand-title {
  align-items: center;
}

.brand-wordmark {
  width: clamp(118px, 21vw, 164px);
  height: auto;
  filter: none;
}

.brand-version {
  color: #749497;
  font-size: .6rem;
  font-weight: 700;
}

.brand p {
  color: #f8c729;
  font-family: "Syncopate", Inter, sans-serif;
  font-size: clamp(.43rem, 1.1vw, .54rem);
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.3;
}

.topbar-actions {
  gap: 7px;
}

.sound-toggle,
.header-account-button {
  border-color: rgba(255, 255, 255, .19);
  background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(0, 11, 14, .88));
  color: #e9ffff;
  box-shadow: 0 10px 22px rgba(0, 9, 11, .18);
}

.sound-toggle:hover,
.header-account-button:hover {
  border-color: rgba(248, 199, 41, .5);
  background: rgba(248, 199, 41, .1);
  color: #fff4bf;
}

.header-account-button[data-signed-in="true"] {
  border-color: rgba(248, 199, 41, .46);
  background: linear-gradient(135deg, rgba(248, 199, 41, .17), rgba(9, 197, 187, .12));
  color: #fff4bf;
}

.card {
  border: 1px solid rgba(9, 197, 187, .14);
  background:
    linear-gradient(145deg, rgba(3, 29, 34, .98), rgba(0, 16, 20, .99));
  box-shadow:
    0 20px 48px rgba(0, 8, 10, .3),
    inset 0 1px 0 rgba(255, 255, 255, .035);
}

.workout-card,
.setup-card,
.guide-card,
.feed-card,
.account-card,
.rides-card {
  border-color: rgba(9, 197, 187, .16);
  background:
    radial-gradient(circle at 100% 0, rgba(9, 197, 187, .065), transparent 30%),
    linear-gradient(150deg, rgba(3, 29, 34, .99), rgba(0, 15, 19, .995));
}

.workout-card::before,
.setup-card::before,
.guide-card::before,
.feed-card::before,
.account-card::before,
.rides-card::before {
  background: linear-gradient(90deg, #f8c729 0%, #f8c729 24%, #09c5bb 70%, transparent 100%);
}

.selected-workout {
  border-color: rgba(9, 197, 187, .28);
  background:
    linear-gradient(135deg, rgba(9, 197, 187, .075), rgba(0, 12, 15, .55));
}

.selected-workout:hover {
  border-color: rgba(248, 199, 41, .42);
  background: rgba(248, 199, 41, .08);
}

.selected-workout-icon {
  border: 0;
  background: transparent;
  color: var(--brand-yellow);
  box-shadow: none;
  font-family: Inter, sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
}

.selected-workout-label,
.phase-label,
.feed-eyebrow,
.onboarding-eyebrow {
  color: var(--brand-yellow);
  font-family: "Syncopate", Inter, sans-serif;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.selected-workout-name,
.instruction,
.setup-heading,
.feed-heading h2,
.account-heading h2,
.rides-heading h2,
.ride-summary-title-row h2,
.custom-workout-editor-heading h2,
.legal-modal-panel h2,
.onboarding-step h2 {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-weight: 400;
  letter-spacing: .035em;
}

.selected-workout-name {
  color: #fff;
  font-size: 1.1rem;
}

.selected-workout-details,
.selected-workout-plan,
.subtext,
.round-callout {
  color: #a6bec0;
}

.selected-workout-arrow {
  color: var(--accent);
}

.instruction {
  color: #f8fbfa;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
}

.timer {
  color: #fff;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(4.9rem, 19vw, 8.6rem);
  font-weight: 400;
  letter-spacing: .025em;
  text-shadow:
    0 0 30px color-mix(in srgb, var(--accent) 22%, transparent),
    0 5px 20px rgba(0, 0, 0, .24);
}

.progress-track {
  border: 1px solid rgba(9, 197, 187, .16);
  background: rgba(0, 12, 14, .58);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .28);
}

.progress-bar {
  background: linear-gradient(90deg, #f8c729, #09c5bb);
  box-shadow:
    0 0 16px rgba(9, 197, 187, .32),
    0 0 8px rgba(248, 199, 41, .22);
}

.stat {
  border-color: rgba(9, 197, 187, .14);
  background: rgba(0, 11, 14, .7);
}

.stat span {
  color: #789a9d;
}

.stat strong {
  color: #eefafa;
}

.stat-round {
  border-color: rgba(248, 199, 41, .25);
  background: rgba(248, 199, 41, .075);
}

.stat-round strong {
  color: #ffe06a;
}

.btn,
.account-primary-button,
.custom-workout-save,
.onboarding-next,
.onboarding-start {
  border-color: transparent;
  font-weight: 800;
}

.btn-primary,
.account-primary-button,
.custom-workout-save,
.onboarding-next,
.onboarding-start {
  background: linear-gradient(135deg, #f8c729, #ffd950);
  color: #011a1e;
  box-shadow: 0 12px 24px rgba(248, 199, 41, .18);
}

.btn-primary:hover,
.account-primary-button:hover,
.custom-workout-save:hover,
.onboarding-next:hover,
.onboarding-start:hover {
  background: linear-gradient(135deg, #ffda4f, #f8c729);
  box-shadow: 0 15px 30px rgba(248, 199, 41, .24);
}

.btn-secondary,
.account-secondary-button,
.custom-workout-cancel,
.onboarding-back {
  border-color: rgba(9, 197, 187, .2);
  background: rgba(9, 197, 187, .075);
  color: #d9f7f6;
}

.btn-secondary:hover,
.account-secondary-button:hover,
.custom-workout-cancel:hover,
.onboarding-back:hover {
  border-color: rgba(9, 197, 187, .38);
  background: rgba(9, 197, 187, .13);
}

.ride-focus-toggle {
  border-color: rgba(248, 199, 41, .28);
  background:
    linear-gradient(135deg, rgba(248, 199, 41, .12), rgba(9, 197, 187, .1));
  color: #fff1ae;
}

.ride-focus-toggle:hover {
  border-color: rgba(248, 199, 41, .5);
  background: rgba(248, 199, 41, .14);
}

.exit-focus-toggle {
  border-color: rgba(248, 199, 41, .3);
  background: #05282d;
  color: #f8c729;
}

body.workout-active .workout-card {
  border-color: color-mix(in srgb, var(--accent) 52%, rgba(248, 199, 41, .25));
  background:
    radial-gradient(circle at 50% 16%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 38%),
    linear-gradient(155deg, #062d32, #021c20);
}

body.workout-paused .timer,
body.workout-paused .instruction {
  opacity: .52;
}

.setup-section-tabs,
.account-mode-tabs {
  border-color: rgba(9, 197, 187, .14);
  background: rgba(0, 14, 17, .38);
}

.setup-section-tab,
.account-mode-tab {
  color: #8eaaac;
}

.setup-section-tab > span {
  border: 0;
  background: transparent;
  color: #09c5bb;
  box-shadow: none;
}

.setup-section-tab.active,
.account-mode-tab.active {
  background: linear-gradient(135deg, rgba(248, 199, 41, .18), rgba(9, 197, 187, .12));
  color: #fff2b5;
  box-shadow: inset 0 0 0 1px rgba(248, 199, 41, .2);
}

.setup-section-tab.active > span {
  color: #f8c729;
}

.accordion-icon,
.feed-heading-icon,
.ride-summary-icon {
  border: 0;
  background: transparent;
  color: #f8c729;
  box-shadow: none;
}

.setup-heading,
.feed-heading h2,
.account-heading h2,
.rides-heading h2,
.ride-summary-title-row h2 {
  color: #f7fbfa;
}

.setup-intro,
.feed-toolbar,
.account-heading p,
.rides-heading p,
.ride-summary-heading p {
  color: #91abad;
}

.preset {
  border-color: rgba(9, 197, 187, .16);
  background:
    linear-gradient(145deg, rgba(3, 32, 37, .9), rgba(0, 15, 19, .94));
  color: #eefbfa;
}

.preset:hover {
  border-color: rgba(248, 199, 41, .34);
  background: rgba(248, 199, 41, .08);
  transform: translateY(-1px);
}

.preset.active {
  border-color: rgba(248, 199, 41, .62);
  background:
    linear-gradient(145deg, rgba(248, 199, 41, .18), rgba(0, 17, 21, .92));
  color: #fff5c7;
  box-shadow:
    0 0 0 2px rgba(248, 199, 41, .08),
    0 12px 28px rgba(0, 10, 12, .22);
}

.preset.active::after {
  background: #f8c729;
  color: #011a1e;
}

.preset-icon {
  background: transparent;
  color: var(--brand-yellow);
  font-family: Inter, sans-serif;
  font-weight: 850;
}

.preset-duration {
  color: #8fb1b3;
}

.mode-control,
.fields label,
.guest-custom-preview,
.my-workouts,
.guide-accordion,
.guide-journey,
.guide-safety {
  border-color: rgba(9, 197, 187, .14);
  background: rgba(1, 24, 28, .4);
}

.mode-switch-track,
.privacy-switch {
  background: #0a4145;
}

.mode-switch input:checked + .mode-switch-track,
.privacy-setting input:checked + .privacy-switch {
  background: var(--accent);
}

.input-field,
.fields input,
.fields select,
.account-form input,
.account-form select,
.account-form textarea,
.custom-workout-panel input,
.custom-workout-panel select,
.onboarding-step input {
  border-color: rgba(9, 197, 187, .18);
  background: rgba(0, 15, 18, .55);
  color: #f8fbfa;
}

.input-field:focus,
.fields input:focus,
.fields select:focus,
.account-form input:focus,
.account-form select:focus,
.account-form textarea:focus,
.custom-workout-panel input:focus,
.custom-workout-panel select:focus,
.onboarding-step input:focus {
  border-color: rgba(248, 199, 41, .7);
  box-shadow: 0 0 0 3px rgba(248, 199, 41, .11);
}

.stepper {
  border-color: rgba(9, 197, 187, .16);
  background: rgba(0, 15, 18, .45);
}

.stepper-button {
  background: rgba(9, 197, 187, .1);
  color: #b9f4f1;
}

.stepper-button:hover {
  background: rgba(248, 199, 41, .15);
  color: #ffe271;
}

.add-custom-workout-button {
  border-color: transparent;
  background: linear-gradient(135deg, #09c5bb, #079a94);
  color: #001215;
  box-shadow: 0 10px 22px rgba(9, 197, 187, .16);
}

.add-custom-workout-button:hover {
  border-color: transparent;
  background: linear-gradient(135deg, #28dbd1, #09c5bb);
}

.my-workouts {
  border-color: rgba(9, 197, 187, .28);
  background: linear-gradient(145deg, rgba(9, 197, 187, .075), rgba(0, 14, 18, .72));
}

.my-workouts-heading h3,
.my-workouts-heading strong,
.custom-workout-editor-heading h3 {
  color: #7fe9e4;
}

.my-workouts-heading > span {
  background: rgba(9, 197, 187, .12);
  color: #9ff4ef;
}

.my-workout-item {
  border-color: rgba(9, 197, 187, .18);
  background: rgba(0, 17, 21, .78);
}

.my-workout-item.is-selected {
  border-color: rgba(9, 197, 187, .62);
  background: linear-gradient(135deg, rgba(9, 197, 187, .15), rgba(0, 17, 21, .9));
  box-shadow: inset 3px 0 0 #09c5bb;
}

.my-workout-actions button,
.custom-editor-close {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .055);
  color: #f7faf9;
  box-shadow: none;
}

.my-workout-actions .my-workout-use,
.my-workout-item.is-selected .my-workout-use {
  border-color: transparent;
  background: #09c5bb;
  color: #001215;
}

.my-workout-actions .my-workout-delete {
  border-color: rgba(248, 199, 41, .28);
  background: rgba(248, 199, 41, .07);
  color: #f8c729;
}

.my-workouts-heading strong,
.guide-accordion summary,
.guide-journey-step strong {
  color: #edf9f8;
}

.my-workouts-heading span,
.my-workouts-empty,
.guide-accordion-content,
.guide-journey-step small {
  color: #8fa9ab;
}

.guide-card::before {
  background: linear-gradient(90deg, #09c5bb, #f8c729, transparent);
}

.guide-accordion[open] {
  border-color: rgba(248, 199, 41, .22);
}

.guide-accordion-icon,
.guide-journey-number {
  border: 0;
  background: transparent;
  color: #f8c729;
  box-shadow: none;
}

.guide-journey-arrow,
.selected-workout-arrow,
.previous-rides-button-arrow,
.ride-row-arrow {
  color: #09c5bb;
}

.btn-icon,
.bottom-nav-button svg,
.header-account-button svg,
.sound-toggle svg {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
}

.rides-empty-icon {
  border: 0;
  background: transparent;
  color: #09c5bb;
  box-shadow: none;
}

.guide-safety {
  border-left-color: #f8c729;
  color: #c8d8d9;
}

.feed-refresh-button,
.rides-refresh-button {
  border-color: rgba(9, 197, 187, .2);
  background: rgba(9, 197, 187, .08);
  color: #b8f4f1;
}

.feed-refresh-button:hover,
.rides-refresh-button:hover {
  border-color: rgba(248, 199, 41, .38);
  color: #ffe275;
}

.feed-status,
.guest-account-cta-card,
.rides-empty {
  border-color: rgba(9, 197, 187, .17);
  background: rgba(1, 24, 28, .42);
}

.feed-post {
  border-color: rgba(9, 197, 187, .14);
  background: rgba(1, 24, 28, .5);
}

.feed-post:hover {
  border-color: rgba(248, 199, 41, .3);
}

.feed-post h3 {
  color: #f3fbfa;
}

.feed-post-meta,
.feed-post p,
.feed-cache-note {
  color: #8fa9ab;
}

.feed-post-link {
  color: #f8c729;
}

.account-avatar {
  border-color: rgba(248, 199, 41, .28);
  background: linear-gradient(145deg, rgba(248, 199, 41, .16), rgba(9, 197, 187, .15));
  color: #ffe16d;
}

.account-tier {
  border-color: rgba(9, 197, 187, .22);
  background: rgba(9, 197, 187, .08);
  color: #aaf1ed;
}

.account-summary-list > div,
.account-settings-list button,
.privacy-setting,
.guest-privacy-control {
  border-color: rgba(9, 197, 187, .14);
  background: rgba(1, 24, 28, .42);
}

.account-settings-list button:hover {
  border-color: rgba(248, 199, 41, .3);
  background: rgba(248, 199, 41, .07);
}

.account-link-button,
.policy-links a {
  color: #f8c729;
}

.google-auth-button {
  border-color: rgba(9, 197, 187, .17);
  background: #f7faf9;
  color: #011a1e;
}

.ride-summary {
  border-color: rgba(9, 197, 187, .17);
  background:
    radial-gradient(circle at 100% 0, rgba(248, 199, 41, .1), transparent 32%),
    linear-gradient(145deg, rgba(7, 51, 56, .86), rgba(2, 28, 32, .9));
  box-shadow: 0 15px 34px rgba(0, 8, 10, .2);
}

.ride-summary-metric {
  border-color: rgba(9, 197, 187, .14);
  background: rgba(0, 16, 19, .34);
}

.ride-summary-metric span {
  color: #82a2a5;
}

.ride-summary-metric strong {
  color: #f8fbfa;
}

.ride-summary-trend {
  border-left-color: #f8c729;
  background: rgba(248, 199, 41, .075);
  color: #e2e9d2;
}

.previous-rides-button {
  border-color: rgba(248, 199, 41, .22);
  background: linear-gradient(135deg, rgba(248, 199, 41, .1), rgba(9, 197, 187, .08));
  color: #fff1ae;
}

.previous-rides-button:hover {
  border-color: rgba(248, 199, 41, .42);
  background: rgba(248, 199, 41, .13);
}

.previous-rides-button > span:first-child,
.previous-rides-button-arrow,
.ride-row-arrow {
  color: #09c5bb;
}

.ride-date-heading {
  color: #74dcd6;
  background: linear-gradient(180deg, rgba(3, 37, 42, .98) 72%, rgba(3, 37, 42, 0));
}

.ride-date-group.is-current-week > .ride-date-heading {
  border-left-color: #f8c729;
}

.ride-row {
  border-color: rgba(9, 197, 187, .14);
  background: rgba(0, 16, 19, .4);
}

.ride-row[open] {
  border-color: rgba(248, 199, 41, .22);
}

.ride-row-name {
  color: #effaf9;
}

.ride-row-completed,
.ride-row-overview,
.ride-detail-grid span {
  color: #89a5a7;
}

.ride-detail-grid strong {
  color: #e7f5f4;
}

.bottom-nav {
  border-color: rgba(9, 197, 187, .18);
  background: rgba(0, 12, 16, .96);
  box-shadow:
    0 -12px 34px rgba(0, 8, 10, .32),
    inset 0 1px 0 rgba(255, 255, 255, .035);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.bottom-nav-button {
  color: #759799;
}

.bottom-nav-button:hover {
  color: #bde9e6;
}

.bottom-nav-button[aria-current="page"] {
  border-color: rgba(9, 197, 187, .24);
  background: rgba(9, 197, 187, .11);
  color: #8ff0eb;
}

.bottom-nav-button[data-nav-view="feed"][aria-current="page"],
.bottom-nav-button[data-nav-view="setup"][aria-current="page"],
.bottom-nav-button[data-nav-view="activity"][aria-current="page"],
.bottom-nav-button[data-nav-view="account"][aria-current="page"] {
  border-color: rgba(9, 197, 187, .42);
  background: linear-gradient(145deg, rgba(9, 197, 187, .2), rgba(2, 34, 38, .95));
  color: #90f1ec;
  box-shadow: 0 8px 20px rgba(0, 8, 10, .23);
}

.bottom-nav-button-primary {
  border-color: rgba(248, 199, 41, .48);
  background: #06242a;
  color: #f8c729;
  box-shadow:
    0 10px 24px rgba(0, 5, 7, .38);
}

.bottom-nav-button[data-nav-view="ride"][aria-current="page"] {
  border-color: #f8c729;
  background: linear-gradient(145deg, #f8c729, #ffda51);
  color: #011a1e;
  box-shadow:
    0 12px 28px rgba(248, 199, 41, .28);
}

.feed-notification-dot {
  border-color: #05282d;
  background: #f8c729;
}

.custom-workout-backdrop,
.onboarding-backdrop,
.legal-modal-backdrop {
  background: rgba(0, 10, 12, .78);
}

.custom-workout-panel,
.onboarding-panel,
.legal-modal-panel {
  border-color: rgba(9, 197, 187, .2);
  background:
    radial-gradient(circle at 100% 0, rgba(248, 199, 41, .09), transparent 30%),
    linear-gradient(155deg, #03262c, #000f13);
  box-shadow: 0 28px 70px rgba(0, 7, 9, .52);
}

.custom-workout-panel {
  border-color: rgba(9, 197, 187, .42);
  background:
    radial-gradient(circle at 100% 0, rgba(9, 197, 187, .13), transparent 32%),
    linear-gradient(155deg, #03252a, #000e12);
}

.custom-workout-panel .input-field:focus,
.custom-workout-panel input:focus,
.custom-workout-panel select:focus {
  border-color: rgba(9, 197, 187, .75);
  box-shadow: 0 0 0 3px rgba(9, 197, 187, .11);
}

.custom-workout-save {
  border-color: transparent;
  background: linear-gradient(135deg, #09c5bb, #079a94);
  color: #001215;
  box-shadow: none;
}

.custom-workout-save:hover {
  background: linear-gradient(135deg, #28dbd1, #09c5bb);
}

.custom-workout-cancel {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .055);
  color: #f7faf9;
  box-shadow: none;
}

.custom-editor-close,
.account-back-button,
.onboarding-skip {
  border-color: rgba(9, 197, 187, .17);
  background: rgba(9, 197, 187, .07);
  color: #c5eeec;
}

.custom-editor-close:focus-visible {
  outline: 0;
  border-color: rgba(9, 197, 187, .55);
  background: rgba(9, 197, 187, .15);
  color: #f7faf9;
  box-shadow: none;
}

.onboarding-brand-logo {
  width: min(100%, 270px);
  height: auto;
  margin-inline: auto;
}

.onboarding-progress-track {
  background: rgba(0, 14, 17, .58);
}

.onboarding-progress-track span {
  background: linear-gradient(90deg, #f8c729, #09c5bb);
}

.onboarding-options button,
.onboarding-summary div {
  border-color: rgba(9, 197, 187, .15);
  background: rgba(0, 16, 19, .42);
}

.onboarding-options button:hover,
.onboarding-options button[aria-pressed="true"] {
  border-color: rgba(248, 199, 41, .4);
  background: rgba(248, 199, 41, .1);
}

.onboarding-complete-icon,
.legal-modal-icon {
  border: 0;
  background: transparent;
  color: #f8c729;
  box-shadow: none;
}

.legal-check,
.account-delete-check,
.feedback-contact-check {
  border-color: rgba(9, 197, 187, .14);
  background: rgba(0, 16, 19, .38);
}

.legal-check a,
.account-legal-note a,
.guest-privacy-control a {
  color: #f8c729;
}

.footer-note {
  color: #718f91;
}

@media (max-width: 560px) {
  .app {
    padding-inline: 12px;
  }

  .topbar {
    gap: 9px;
  }

  .brand {
    gap: 8px;
  }

  .brand-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .brand-wordmark {
    width: 118px;
  }

  .brand p {
    display: block;
    font-size: .4rem;
    letter-spacing: .1em;
  }

  .brand-version {
    display: none;
  }

  .header-account-button {
    padding-inline: 10px;
  }

  .timer {
    font-size: clamp(4.7rem, 24vw, 7rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .preset,
  .previous-rides-button,
  .btn,
  .bottom-nav-button {
    transition: none;
  }
}