/* Home and ROUTI app only. Product cards and other product pages keep their styles. */
.dl-home #routi-experience,
.rt-experience section[id] { scroll-margin-top: 112px; }

.dl-home .dl-experience { padding: clamp(56px, 7vw, 96px) 0; background: #f3f6fb; }
.dl-home .dl-experience__heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 36px; margin-bottom: 36px; }
.dl-home .dl-experience__heading .h-sec { margin: 0; }
.dl-home .dl-experience__heading > p { margin: 0 0 4px; color: #53627a; font-size: 16px; line-height: 1.8; }
.dl-home .dl-experience__visuals { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }
.dl-home .dl-experience figure { margin: 0; min-width: 0; overflow: hidden; border-radius: 20px; }
.dl-home .dl-experience__ring { position: relative; min-height: 450px; background: #0b191c; color: #fff; }
.dl-home .dl-experience__ring > img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: 50% 40%; }
.dl-home .dl-experience__ring figcaption { position: absolute; inset: auto 0 0; padding: 80px 32px 30px; background: linear-gradient(transparent, rgba(4, 14, 22, .92)); }
.dl-home .dl-experience figcaption > span,
.dl-home .dl-experience__next > div > span { display: block; margin-bottom: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; }
.dl-home .dl-experience figcaption strong { display: block; font-size: 25px; line-height: 1.35; letter-spacing: -.04em; }
.dl-home .dl-experience figcaption p { margin: 12px 0 0; font-size: 14px; line-height: 1.7; }
.dl-home .dl-experience__ring figcaption > span { color: #b9d6e9; }
.dl-home .dl-experience__ring figcaption p { color: #d8e5ec; max-width: 320px; }
.dl-home .dl-experience__app { position: relative; height: 450px; padding: 30px 32px 0; background: #e3ebfa; }
.dl-home .dl-experience__app figcaption { position: relative; z-index: 1; }
.dl-home .dl-experience__app figcaption > span { color: #284fc4; }
.dl-home .dl-experience__app figcaption p { color: #53627a; }
.dl-home .dl-experience__screen { width: 196px; margin: 24px auto 0; padding: 6px; border-radius: 29px; background: #16243d; box-shadow: 0 14px 36px #1a356c29; transform: rotate(6deg); }
.dl-home .dl-experience__screen img { display: block; width: 100%; height: auto; border-radius: 23px; }
.dl-home .dl-experience__next { display: flex; justify-content: space-between; align-items: center; gap: 36px; padding-top: 32px; }
.dl-home .dl-experience__next > div > span { color: #284fc4; }
.dl-home .dl-experience__next h3 { margin: 0; font-size: 24px; letter-spacing: -.04em; }
.dl-home .dl-experience__next p { margin: 10px 0 0; color: #53627a; font-size: 15px; line-height: 1.7; }
.dl-home .dl-experience__links { display: flex; flex-direction: column; align-items: flex-start; flex-shrink: 0; gap: 12px; }
.dl-home .dl-experience__links .btn { gap: 24px; }
.dl-home .dl-experience__text-link { color: #284fc4; font-size: 12px; line-height: 1.6; text-underline-offset: 4px; }
.dl-home .dl-experience__text-link:hover { text-decoration: underline; }

.rt.rt-experience {
  --rt-col: 1120px;
  --rt-pad-x: clamp(24px, 5vw, 64px);
  --rt-pad-y: clamp(48px, 6vw, 72px);
  --rt-pad-detail: clamp(40px, 5vw, 56px);
  background: #edf1f7;
}
.rt-experience .rt__h { font-size: clamp(29px, 3.8vw, 40px); }
.rt-experience .rt__stanza { gap: 18px; margin-top: 28px; }
.rt-experience .rt__rule { margin: 30px auto; }
.rt-experience .rt-intro { padding: 44px var(--rt-pad-x) 28px; }
.rt-experience .rt-intro__layout { display: grid; grid-template-columns: 1.08fr 1fr; gap: 30px; align-items: center; text-align: left; }
.rt-experience .rt-intro__copy,
.rt-experience .rt-intro__visual { min-width: 0; }
.rt-experience .rt-intro .rt-lockup { flex-direction: row; justify-content: flex-start; gap: 12px; margin: 0 0 28px; }
.rt-experience .rt-intro .rt-lockup img { width: 32px; height: 32px; }
.rt-experience .rt-intro .rt-lockup__word { font-size: 17px; }
.rt-experience .rt-intro__eyebrow { margin: 0 0 12px; color: #b8cbf4; font-size: 12px; letter-spacing: .08em; }
.rt-experience .rt-intro .rt-h1 { font-size: clamp(30px, 3.4vw, 39px); line-height: 1.35; letter-spacing: -.055em; }
.rt-experience .rt-intro__lead { margin: 24px 0 0; font-size: 16px; line-height: 1.85; color: #d6e2f5; word-break: keep-all; }
.rt-experience .rt-intro__thesis { margin: 18px 0 0; color: #d6e2f5; font-size: 14px; line-height: 1.7; }
.rt-experience .rt-intro__thesis b { color: #fff; }
.rt-experience .rt-intro__cta { justify-content: flex-start; margin-top: 28px; }
.rt-experience .rt-intro__cta a { padding: 15px 20px; font-size: 14px; }
.rt-experience .rt-intro__device { margin: 16px 0 0; font-size: 12px; line-height: 1.6; color: #bdd0ef; }
.rt-experience .rt-intro .rt-phones { gap: 15px; margin: 0; align-items: center; }
.rt-experience .rt-intro .rt-phone--lg { width: 210px; padding: 7px; border-radius: 31px; }
.rt-experience .rt-intro .rt-phone--lg img { border-radius: 24px; }
.rt-experience .rt-intro .rt-phone--sm { width: 166px; padding: 6px; border-radius: 27px; margin: 46px 0 0; }
.rt-experience .rt-intro .rt-phone--sm img { border-radius: 21px; }
.rt-experience .rt-intro__caption { margin: 22px 0 0; text-align: center; color: #bdd0ef; font-size: 12px; }
.rt-experience .rt-intro .rt-badges { margin-top: 32px; padding-top: 22px; border-top: 1px solid #ffffff26; gap: 16px 28px; }
.rt-experience .rt-intro .rt-badges > div { padding: 0; border: 0; border-radius: 0; background: transparent; color: #d6e2f5; font-size: 12px; }
.rt-experience .rt-jump { display: flex; justify-content: center; gap: 12px 40px; padding: 18px 20px; border-bottom: 1px solid #dfe4ee; background: #fff; }
.rt-experience .rt-jump a { padding: 6px 2px; color: #3a4a6b; font-size: 14px; font-weight: 600; }
.rt-experience .rt-jump a:hover { color: #1d3fd4; }
.rt-experience .rt-jump a:focus-visible,
.rt-experience .rt-cta a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.rt-experience .rt-question-section .rt-report { margin: 30px auto 0; padding: 26px 32px; max-width: 780px; }
.rt-experience .rt-question-section .rt-report__label { margin-bottom: 20px; }
.rt-experience .rt-question-section__lead { margin: 28px 0 0; font-size: 17px; line-height: 1.8; color: #4a5875; }
.rt-experience .rt-question-section__lead b { color: #1d3fd4; }
.rt-experience .rt-question-section__flow { display: flex; justify-content: center; gap: 18px; margin-top: 24px; color: #1d3fd4; font-size: 15px; font-weight: 700; }
.rt-experience .rt-question-section__flow [aria-hidden] { color: #8797ba; }
.rt-experience .rt-cases { gap: 8px; margin: 30px auto 0; max-width: 780px; }
.rt-experience .rt-cases > div { padding: 15px 20px; }
.rt-experience .rt-turn { margin-top: 26px; }
.rt-experience .rt-two { margin: 32px auto 0; max-width: 780px; }
.rt-experience .rt-loop { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 32px; }
.rt-experience .rt-loopcard { width: 100%; max-width: none; height: 100%; padding: 26px; grid-template-columns: 64px 1fr; gap: 16px; text-align: left; }
.rt-experience .rt-loopcard__t { font-size: 18px; line-height: 1.5; }
.rt-experience .rt-loopcard__d { font-size: 14px; }
.rt-experience .rt-connector { display: none; }
.rt-experience .rt-loopsum { margin-top: 26px; }
.rt-experience .rt-proof-group { margin: 30px 0 0; padding: 18px 22px; border: 1px solid #a9bef75c; border-radius: 12px; text-align: left; background: #a9bef714; }
.rt-experience .rt-proof-group p { margin: 0; color: #fff; font-size: 16px; line-height: 1.6; }
.rt-experience .rt-proof-group span { display: block; margin-top: 7px; color: #b9ccf6; font-size: 13px; line-height: 1.6; }
.rt-experience .rt-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.rt-experience .rt-result { display: block; padding: 24px 18px; text-align: left; }
.rt-experience .rt-result__k { font-size: 14px; }
.rt-experience .rt-result__v { gap: 9px; margin-top: 16px; flex-wrap: wrap; }
.rt-experience .rt-result__from { font-size: 22px; }
.rt-experience .rt-result__to { font-size: 34px; }
.rt-experience .rt-emph { margin-top: 24px; font-size: 16px; }
.rt-experience .rt-plans { margin-top: 32px; }
.rt-experience .rt-compat { margin-top: 30px; }
.rt-experience .rt-ring { margin-top: 30px; }
.rt-experience .rt-coin { margin-top: 30px; }
.rt-experience .rt-close { margin-top: 26px; }
.rt-experience .rt-tagline { margin-top: 32px; }

@media (max-width: 900px) {
  .dl-home .dl-experience__heading { display: block; }
  .dl-home .dl-experience__heading > p { margin-top: 22px; }
  .dl-home .dl-experience__next { align-items: flex-start; }
  .rt-experience .rt-intro__layout { grid-template-columns: 1fr 1fr; gap: 20px; }
  .rt-experience .rt-intro .rt-phone--lg { width: 56%; max-width: 190px; }
  .rt-experience .rt-intro .rt-phone--sm { width: 43%; max-width: 150px; }
  .rt-experience .rt-intro .rt-phones { gap: 10px; }
  .rt-experience .rt-intro__desktop-break { display: none; }
  .rt-experience .rt-results { grid-template-columns: 1fr; }
  .rt-experience .rt-result { display: grid; grid-template-columns: 1fr 1.5fr; gap: 16px; align-items: center; padding: 22px 26px; }
  .rt-experience .rt-result__v { margin-top: 0; justify-content: flex-end; }
  .rt-experience .rt-loopcard { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 720px) {
  .dl-home .dl-experience__heading > p { font-size: 15px; }
  .dl-home .dl-experience__visuals { grid-template-columns: 1fr; gap: 14px; }
  .dl-home .dl-experience__ring { min-height: 320px; }
  .dl-home .dl-experience__ring figcaption { padding: 64px 24px 24px; }
  .dl-home .dl-experience__app { height: 330px; padding: 28px 24px 0; }
  .dl-home .dl-experience__app figcaption { max-width: 48%; }
  .dl-home .dl-experience figcaption strong { font-size: 22px; }
  .dl-home .dl-experience__app .dl-experience__screen { position: absolute; width: 43%; max-width: 180px; top: 46px; right: 16px; margin: 0; }
  .dl-home .dl-experience__next { flex-direction: column; gap: 24px; }
  .dl-home .dl-experience__next h3 { font-size: 22px; }
  .rt-experience .rt-intro { padding-top: 30px; }
  .rt-experience .rt-intro__layout { grid-template-columns: 1fr; gap: 28px; }
  .rt-experience .rt-intro .rt-lockup { margin-bottom: 20px; }
  .rt-experience .rt-intro .rt-h1 { font-size: clamp(29px, 5.8vw, 36px); }
  .rt-experience .rt-intro__lead { font-size: 15px; margin-top: 18px; }
  .rt-experience .rt-intro__thesis { margin-top: 12px; }
  .rt-experience .rt-intro__cta { margin-top: 20px; gap: 8px; }
  .rt-experience .rt-intro__cta a { padding: 13px 16px; font-size: 13px; }
  .rt-experience .rt-intro__device { margin-top: 12px; }
  .rt-experience .rt-intro .rt-phones { max-width: 335px; margin: 0 auto; gap: 14px; }
  .rt-experience .rt-intro .rt-phone--lg { width: 53%; max-width: 176px; border-radius: 26px; padding: 6px; }
  .rt-experience .rt-intro .rt-phone--lg img { border-radius: 20px; }
  .rt-experience .rt-intro .rt-phone--sm { width: 42%; max-width: 140px; margin-top: 28px; border-radius: 23px; }
  .rt-experience .rt-intro .rt-phone--sm img { border-radius: 17px; }
  .rt-experience .rt-intro__caption { margin-top: 16px; }
  .rt-experience .rt-intro .rt-badges { margin-top: 24px; gap: 10px 20px; }
  .rt-experience .rt-jump { gap: 10px 24px; padding: 12px 16px; }
  .rt-experience .rt-jump a { font-size: 13px; }
  .rt-experience .rt-question-section .rt-report { padding: 22px 16px; }
  .rt-experience .rt-question-section .rt-report__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .rt-experience .rt-question-section .rt-report__k { font-size: 12px; }
  .rt-experience .rt-question-section .rt-report__v { font-size: 21px; }
  .rt-experience .rt-question-section__lead { font-size: 15px; }
  .rt-experience .rt-question-section__flow { font-size: 13px; gap: 12px; }
  .rt-experience .rt-loop { grid-template-columns: 1fr; }
  .rt-experience .rt-loopcard { grid-template-columns: 62px 1fr; padding: 22px; }
  .rt-experience .rt-proof-group { padding: 18px; }
  .rt-experience .rt-proof-group p { font-size: 15px; }
  .rt-experience .rt-result { grid-template-columns: 1fr; gap: 12px; padding: 22px; }
  .rt-experience .rt-result__v { justify-content: flex-start; }
}

@media (max-width: 380px) {
  .dl-home .dl-experience__app .dl-experience__screen { width: 43%; max-width: 150px; right: 12px; top: 70px; }
  .dl-home .dl-experience__app figcaption { max-width: 52%; }
  .rt-experience .rt-intro .rt-h1 { font-size: 27px; }
  .rt-experience .rt-jump { gap: 8px 18px; }
  .rt-experience .rt-question-section .rt-report__v { font-size: 18px; }
  .rt-experience .rt-question-section__flow { gap: 8px; font-size: 12px; }
  .rt-experience .rt-loopcard { grid-template-columns: 1fr; }
}