/* css/ry-faq.css */
/* Preserve the template layout while native buttons own the FAQ state. */
.expandable-single[data-ry-faq-ready] {
  cursor: default;
}

.expandable-single[data-ry-faq-ready] > .expandable-top {
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.expandable-single[data-ry-faq-ready] > .expandable-top:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 8px;
}

/* Webflow may reapply inline height/opacity on load or breakpoint changes. */
.expandable-single[data-ry-faq-ready] > .expandable-bottom {
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
}

.expandable-single[data-ry-faq-ready] > .expandable-bottom[hidden] {
  display: none !important;
}

.ry-faq-content {
  width: 100%;
  overflow: hidden;
}

.ry-faq-content-body {
  display: flow-root;
}

details.ry-pages-faq[data-ry-faq-ready] > .ry-faq-answer {
  margin-top: 0;
}

details.ry-pages-faq[data-ry-faq-ready] .ry-faq-content-body {
  padding-top: var(--spacing--24);
}

details.ry-pages-faq[data-ry-faq-ready] .ry-pages-question-number {
  flex: 0 0 auto;
  white-space: nowrap;
}

.expandable-single[data-ry-faq-ready] .faq-vertical {
  transform: rotate(0deg) !important;
  transition: transform 180ms ease;
}

.expandable-single[data-ry-faq-open="true"] .faq-vertical {
  transform: rotate(90deg) !important;
}

@media (prefers-reduced-motion: reduce) {
  .expandable-single[data-ry-faq-ready] .faq-vertical {
    transition: none;
  }
}

/* css/ry-compare-slider.css */
/* Before / After Slider — original. A draggable vertical divider compares two
   passes of the same frame: the graded layer fills the stage, the flat layer is
   clipped on top via a CSS clip-path driven by --split (0..100). Pointer drag +
   full keyboard control live in script.js. Every selector is scoped to
   .byq-gem--compare-slider-01. */

.byq-gem--compare-slider-01 {
  --split: 50; /* percentage of the flat/BEFORE layer that stays visible */
  font-family: var(--byq-font-sans);
  color: var(--byq-fg);
  width: 100%;
  max-width: 60rem;
}

/* ---- Stage ------------------------------------------------------------- */
.byq-gem--compare-slider-01__stage {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 11 / 7;
  border-radius: var(--byq-radius-lg);
  overflow: hidden;
  background: var(--byq-card);
  border: 1px solid var(--byq-depth);
  box-shadow: 0 30px 60px -32px rgba(4, 4, 4, 0.55);
  touch-action: none; /* let JS own the pointer drag on touch */
  user-select: none;
  cursor: ew-resize;
}

.byq-gem--compare-slider-01__layer {
  position: absolute;
  inset: 0;
}
.byq-gem--compare-slider-01__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}

/* The flat/BEFORE layer sits above the graded one and is clipped to the split.
   clip-path animates cheaply and keeps both images pixel-aligned. */
.byq-gem--compare-slider-01__layer--before {
  clip-path: inset(0 calc((100 - var(--split)) * 1%) 0 0);
}

/* ---- Divider + handle -------------------------------------------------- */
.byq-gem--compare-slider-01__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--split) * 1%);
  z-index: 4;
  width: 2px;
  transform: translateX(-1px);
  background: var(--byq-card);
  box-shadow: 0 0 0 1px rgba(4, 4, 4, 0.18);
  cursor: ew-resize;
  outline: none;
}
.byq-gem--compare-slider-01__divider::before {
  /* a subtle full-height contact shadow so the seam reads on any image */
  content: "";
  position: absolute;
  inset: 0 -8px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(4, 4, 4, 0.14),
    transparent
  );
  pointer-events: none;
}

.byq-gem--compare-slider-01__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  color: var(--byq-fg);
  background: var(--byq-card);
  border: 1px solid var(--byq-depth);
  box-shadow: 0 10px 24px -10px rgba(4, 4, 4, 0.5);
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease;
}
.byq-gem--compare-slider-01__stage:hover .byq-gem--compare-slider-01__handle {
  transform: translate(-50%, -50%) scale(1.06);
}
.byq-gem--compare-slider-01__divider:focus-visible .byq-gem--compare-slider-01__handle {
  border-color: var(--byq-fg);
  box-shadow:
    0 0 0 3px var(--byq-accent-lime),
    0 10px 24px -10px rgba(4, 4, 4, 0.5);
}
/* Snappy grab feedback while dragging (class set from JS). */
.byq-gem--compare-slider-01__stage.is-dragging .byq-gem--compare-slider-01__handle {
  transform: translate(-50%, -50%) scale(0.94);
  transition-duration: 0.12s;
}

/* ---- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .byq-gem--compare-slider-01__handle,
  .byq-gem--compare-slider-01__stage:hover .byq-gem--compare-slider-01__handle {
    transition: none;
  }
}

/* Reference control colors with RyseList geometry and focus treatment. */
.byq-gem--compare-slider-01 {
  --byq-font-sans: var(--typography-font-body);
  --byq-fg: #f6f3ec;
  --byq-card: #18191a;
  --byq-depth: #2a2b2c;
  --byq-radius-lg: var(--radius-general-small);
  --byq-accent-lime: var(--color-base-accent-primary);
  max-width: none;
}
.ry-cases-compare .byq-gem--compare-slider-01__stage {
  position: absolute;
  inset: 0;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: inherit;
  box-shadow: none;
  touch-action: pan-y;
}
.ry-cases-compare .byq-gem--compare-slider-01__layer--after .ry-cases-after { clip-path: none; }
.byq-gem--compare-slider-01__divider { touch-action: none; }
/* The shared case-section focus rule must not outline the full-height divider.
   Its two outline edges looked like extra slider lines during pointer dragging.
   Keyboard focus remains visible on the circular handle above. */
.ry-cases-compare .byq-gem--compare-slider-01__divider:focus,
.ry-cases-compare .byq-gem--compare-slider-01__divider:focus-visible {
  outline: none;
  outline-width: 0;
  outline-offset: 0;
}

/* css/ry-landing-sections.css */
/* Scoped adaptations of the supplied Nextwell tabs and dual CTA section. */
.ry-app-tabs { padding-block: var(--section-padding--medium); }
.ry-app-tabs [hidden] { display: none !important; }
.ry-app-tabs .headline_features-tabs { max-width: 55rem; margin: 0 auto var(--spacing--64); text-align: center; }
.ry-app-tabs-menu { display: flex; justify-content: center; margin-bottom: var(--spacing--48); }
.ry-app-tab { min-width: 15rem; min-height: 44px; padding: 0 var(--spacing--16) var(--spacing--12); border: 0; border-bottom: 1px solid var(--color-tokens-tone-faint); background: transparent; color: var(--color-tokens-tone-medium); font: inherit; cursor: pointer; }
.ry-app-tab[aria-selected="true"] { border-bottom-color: var(--color-tokens-tone-strong); color: var(--color-tokens-tone-strong); }
.ry-app-tabs .feature-tabs_halves { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--spacing--80); max-width: 67.5rem; margin-inline: auto; }
.ry-app-tabs .wrap_feature-tabs { min-width: 0; margin: 0; padding: 3.25rem 2.5rem; border-radius: var(--radius-general-default); background-size: cover; background-position: center; overflow: hidden; }
.ry-app-visual-0 { background-image: url('../images/ry/app-tabs/bg-book.avif'); }
.ry-app-visual-1 { background-image: url('../images/ry/app-tabs/case-bg.avif'); }
.ry-app-visual-2 { background-image: url('../images/ry/app-tabs/case-bg-2.avif'); }
.ry-app-window { background: var(--color-base-base-light-100); color: var(--color-base-base-dark-100); border: 1px solid var(--color-base-base-dark-16); border-radius: var(--radius-general-default); overflow: hidden; }
.ry-app-window-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--spacing--12); padding: var(--spacing--16); border-bottom: 1px solid var(--color-base-base-dark-16); }
.ry-app-window-bar img { width: 100px; height: auto; }
.ry-app-screenshot-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing--16); aspect-ratio: 4 / 3; color: var(--color-base-base-dark-48); }
.ry-app-screenshot-slot svg { width: 48px; height: 48px; stroke: currentColor; stroke-width: 1.5; }
.ry-app-tabs .content_feature-tab { display: flex; flex-direction: column; gap: var(--spacing--24); min-width: 0; }
.ry-app-tabs .heading_feature-tab { display: flex; flex-direction: column; gap: var(--spacing--12); }
.ry-app-tabs :is(button,[role="tabpanel"]):focus-visible { outline: 2px solid var(--color-tokens-tone-strong); outline-offset: 4px; }
.ry-case-cta .headline-cta-v1 { margin-bottom: var(--spacing--64); }
.ry-case-cta .grid_cta-v1 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--layout-grid--gutter); margin-bottom: var(--spacing--32); }
.ry-case-cta .card_cta-v1 { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: var(--spacing--32); min-width: 0; min-height: 22rem; aspect-ratio: 16 / 9; padding: var(--spacing--32); border-radius: var(--radius-general-default); background: var(--color-base-base-dark-100); color: var(--color-base-base-light-100); overflow: hidden; }
.ry-case-cta .card_cta-v1.is-second { background-image: linear-gradient(#231f234d, #231f2366), url('../images/ry/app-tabs/customer-bg.avif'); background-position: center; background-size: cover; }
.ry-case-cta .cta-v1_top-tile { display: flex; flex-direction: column; gap: var(--spacing--16); }
.ry-case-cta .cta-v1_top-tile h3 { font-size: var(--typography-size-h3); line-height: var(--typography-line-height-h3); }
.ry-case-cta .cta-v1_top-tile p { color: var(--color-base-base-light-88); max-width: 31rem; }
.ry-case-cta .cta-v1_top-tile .label-large { color: var(--color-base-base-light-64); }
.ry-case-cta-button { padding: 0; border: 0; background: transparent; }
.ry-case-cta-button .button-inner { gap: var(--spacing--12); }
.ry-case-cta .ry-case-cta-button .text-button { display: block; text-shadow: none !important; }
.ry-case-cta .wrap_text-cta-v1 { display: flex; justify-content: space-between; align-items: start; gap: var(--spacing--24); }
.ry-case-text-link { border: 0; padding: 0; color: inherit; background: transparent; font: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
@media (max-width: 767px) {
  .ry-app-tabs-menu { flex-direction: column; max-width: 25rem; margin: 0 auto var(--spacing--32); gap: var(--spacing--12); }
  .ry-app-tab { min-width: 0; }
  .ry-app-tabs .feature-tabs_halves { grid-template-columns: minmax(0, 1fr); gap: var(--spacing--48); }
  .ry-app-tabs .wrap_feature-tabs { padding: var(--spacing--32) var(--spacing--24); }
  .ry-case-cta .grid_cta-v1 { grid-template-columns: minmax(0, 1fr); }
  .ry-case-cta .card_cta-v1 { min-height: 20rem; aspect-ratio: auto; padding: var(--spacing--32); }
  .ry-case-cta .wrap_text-cta-v1 { flex-direction: column; }
}

/* css/ry-app-showcase.css */
.ry-app-tabs-menu { max-width: 67.5rem; margin-inline: auto; }
.ry-app-tabs .ry-app-tab { flex: 1; min-width: 0; }
.ry-app-tabs .ry-app-product { position: relative; padding: 0; aspect-ratio: 1; }
.ry-app-visual-3 { background-image: url('../images/ry/app-tabs/customer-bg.avif'); }
/* Real app screenshots sit inside the original abstract backgrounds. */
.ry-app-capture-window {
  position: absolute; top: 50%; left: 50%; width: calc(100% - 40px);
  transform: translate(-50%, -50%); overflow: hidden;
  border: 1px solid #ffffff30; border-radius: var(--radius-general-default, 12px);
  background: #090909; box-shadow: 0 24px 60px -16px #000a, 0 2px 5px #0004;
}
.ry-app-capture-bar {
  display: flex; align-items: center; justify-content: space-between;
  height: 27px; padding-inline: 10px; border-bottom: 1px solid #ffffff14;
  background: #181919; color: #b9bdb8;
  font: 9px/1 var(--typography-font-body);
}
.ry-app-capture-dots { display: flex; gap: 4px; }
.ry-app-capture-dots i { width: 5px; height: 5px; border-radius: 50%; background: #666a64; }
.ry-app-tabs .ry-app-capture { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: contain; }
.ry-app-tabs .ry-app-whatsapp {
  position: relative; display: block; aspect-ratio: 1; padding: 0;
  background-image: url('../images/ry/app-tabs/case-bg-2.avif');
}
.ry-wa-phone {
  position: absolute; top: calc(50% - 7px); left: 50%; width: 264px;
  transform: translate(-50%, -50%) scale(var(--wa-scale, .7));
  overflow: hidden; border: 7px solid #232323;
  border-radius: 34px; background: #f7f8f9; color: #17241d;
  font-family: var(--typography-font-body); font-size: 11px; line-height: 1.35;
  box-shadow: 0 22px 42px #0005, inset 0 0 0 1px #ffffff36;
}
.ry-wa-status { display: flex; justify-content: space-between; padding: 12px 17px 7px; font-weight: 600; font-size: 10px; }
.ry-wa-header { display: flex; align-items: center; gap: 7px; padding: 7px 10px 11px; border-bottom: 1px solid #dce2dc; }
.ry-wa-header > span { font-size: 28px; color: #008c69; line-height: 1; }
.ry-wa-header img { border-radius: 50%; width: 28px; height: 28px; object-fit: contain; }
.ry-wa-header > div { display: flex; flex-direction: column; flex: 1; }
.ry-wa-header strong { font-size: 12px; }
.ry-wa-header > div > span { font-size: 9px; color: #647169; }
.ry-wa-header svg { width: 16px; height: 16px; fill: none; stroke: #008c69; stroke-width: 1.8; }
.ry-wa-chat { display: flex; flex-direction: column; gap: 9px; padding: 11px 9px 14px; background: #eee9e1; }
.ry-wa-day { align-self: center; padding: 3px 8px; border-radius: 5px; background: #f9f8f5; color: #727873; font-size: 9px; }
.ry-wa-bubble { max-width: 91%; padding: 6px 7px 4px; border-radius: 8px; box-shadow: 0 1px 1px #00000014; }
.ry-wa-out { align-self: flex-end; background: #d8f7c7; }
.ry-wa-in { align-self: flex-start; background: #fff; }
.ry-wa-bubble p { margin: 0; font: inherit; color: inherit; }
.ry-wa-bubble > small { display: block; margin-top: 4px; text-align: right; color: #778278; font-size: 8px; line-height: 1; }
.ry-wa-ticks { color: #269cbe; }
.ry-wa-video { position: relative; margin-bottom: 5px; border-radius: 5px; overflow: hidden; }
.ry-wa-video img { display: block; width: 100%; height: 78px; object-fit: cover; }
.ry-wa-video > span { position: absolute; inset: 22px auto auto calc(50% - 14px); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #0006; color: white; font-size: 12px; }
.ry-wa-video > small { position: absolute; bottom: 4px; left: 5px; color: white; font-size: 8px; text-shadow: 0 1px 3px #000; }
.ry-wa-delivery { overflow: hidden; border-radius: 5px; background: #f3f5f2; }
.ry-wa-delivery img { display: block; width: 100%; height: 68px; object-fit: cover; }
.ry-wa-delivery > div { display: flex; flex-direction: column; gap: 2px; padding: 5px; }
.ry-wa-delivery strong { font-size: 10px; }
.ry-wa-delivery span { font-size: 8px; color: #647169; }
.ry-wa-link { display: block; margin-top: 6px; color: #008c69; font-size: 10px; }
.ry-wa-composer { display: flex; align-items: center; gap: 7px; padding: 10px 9px 18px; color: #008c69; }
.ry-wa-composer > div { flex: 1; padding: 6px 9px; border: 1px solid #d8dfd8; border-radius: 20px; background: white; color: #a0aaa2; font-size: 10px; }
.ry-wa-caption { position: absolute; bottom: 12px; left: 0; width: 100%; text-align: center; color: #f7f6f5bd; font-size: 10px; }
@media (max-width: 767px) {
  .ry-app-tabs-menu { max-width: 25rem; }
  .ry-app-tabs .ry-app-whatsapp { padding: 0; }
}

/* css/ry-slim-video-phone.css */
/* Approved landscape phone frame and Soft gradient for the six-example showcase. */
.ry-steps-slim .ry-steps-showcase-panel { background: #29272b; }
.ry-steps-slim .ry-steps-phone {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 18px;
  isolation: isolate;
  background: #1b241e url('../images/ry/steps/sunburst/video-background-diffuse.webp') center / cover no-repeat;
  box-shadow: inset 0 0 0 1px #ffffff10;
}
.ry-steps-slim .ry-steps-phone::after {
  content: '';
  position: absolute;
  width: 76%;
  height: 8%;
  left: 12%;
  bottom: 15%;
  z-index: 0;
  border-radius: 50%;
  background: #000b;
  filter: blur(10px);
  pointer-events: none;
}
.ry-steps-slim .ry-slim-phone-body {
  position: absolute;
  z-index: 1;
  top: 49%;
  left: 7%;
  width: 86%;
  aspect-ratio: 1000 / 498;
  transform: translateY(-50%);
}
.ry-steps-slim .ry-slim-phone-screen {
  position: absolute;
  inset: 7.13% 3.6%;
  border-radius: 6.8% / 14.8%;
  overflow: hidden;
  background: #050607;
}
.ry-steps-slim .ry-slim-phone-screen video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  background: #050607;
}
.ry-steps-slim .ry-slim-phone-frame {
  display: block;
  position: absolute;
  width: 49.8%;
  height: 200.803213%;
  max-width: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(12px 0 12px #0005);
}
.ry-steps-slim .ry-slim-phone-screen .ry-steps-play {
  width: 44px;
  height: 44px;
  background: #101215bb;
  color: #fff;
  border: 1px solid #ffffff40;
  backdrop-filter: blur(8px);
  z-index: 3;
}
.ry-steps-slim .ry-slim-phone-screen .ry-steps-play svg { width: 19px; height: 19px; }
.ry-steps-slim .ry-slim-phone-screen .ry-steps-play[aria-pressed="true"] { width: 32px; height: 32px; right: 5%; bottom: 7%; }
.ry-steps-slim .ry-steps-play:focus-visible { outline: 2px solid #c5ef57; outline-offset: 4px; }
@media (max-width: 767px) {
  .ry-steps-slim .ry-steps-slide { gap: 40px; }
  .ry-steps-slim .ry-slim-phone-screen .ry-steps-play { width: 36px; height: 36px; }
}

/* css/ry-video-testimonials.css */
.ry-video-testimonials { padding-block: var(--spacing--48) var(--spacing--80); scroll-margin-top: 100px; }
.ry-vt-heading { max-width: 60rem; margin: 0 auto var(--spacing--32); text-align: center; }
.ry-vt-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; gap: var(--spacing--24); margin-inline: auto; }
.ry-vt-card { display: grid; width: 100%; grid-template-columns: 27% minmax(0,1fr); aspect-ratio: 3 / 1; min-height: 160px; overflow: hidden; min-width: 0; border-radius: var(--radius-general-large); background: #fff; border: 1px solid var(--color-base-base-dark-8); }
.ry-vt-media { position: relative; min-width: 0; overflow: hidden; background: var(--color-base-base-dark-100); }
.ry-vt-preview { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.ry-vt-play { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; padding: 10px; border: 0; background: transparent; cursor: pointer; }
.ry-vt-play svg { width: 36px; height: 36px; padding: 11px; border-radius: 50%; background: #ffffff80; fill: #374151; backdrop-filter: blur(5px); }
.ry-vt-content { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 16px; }
.ry-vt-stars { display: inline-flex; gap: 3px; color: #ffb400; flex-shrink: 0; }
.ry-vt-stars svg { width: 17px; height: 17px; fill: currentColor; }
.ry-vt-quote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; width: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: #374151; text-align: left; font: inherit; font-size: clamp(14px,1.1vw,18px); line-height: 1.4; cursor: pointer; }
.ry-vt-content .ry-vt-name { margin: auto 0 0; font: 400 14px/1.4 var(--typography-font-body); letter-spacing: 0; color: #858b96; }
.ry-video-testimonials [hidden] { display: none !important; }
.ry-vt-play:focus-visible { outline: 3px solid var(--color-base-accent-primary); outline-offset: -4px; }
.ry-vt-quote:focus-visible { outline: 2px solid var(--color-base-base-dark-100); outline-offset: 3px; }
.ry-vt-dialog { width: min(920px,92vw); max-width: none; max-height: 90vh; padding: 0; border: 1px solid #e5e7eb; border-radius: 18px; background: #fff; color: #374151; overflow: auto; }
.ry-vt-dialog::backdrop { background: #111318c9; backdrop-filter: blur(5px); }
.ry-vt-dialog-layout { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1fr); }
.ry-vt-dialog-player { background: #111; min-width: 0; }
.ry-vt-dialog video { display: block; width: 100%; height: min(76vh,650px); object-fit: contain; }
.ry-vt-dialog-copy { padding: 44px 32px 32px; overflow-y: auto; max-height: min(76vh,650px); }
.ry-vt-dialog-copy h3 { font-size: 24px; margin: 18px 0; }
.ry-vt-dialog-quote { font-size: 16px; line-height: 1.65; margin: 0; }
.ry-vt-close { position: absolute; z-index: 2; top: 10px; right: 10px; width: 34px; height: 34px; padding: 7px; border: 1px solid #e5e7eb; border-radius: 50%; background: #fff; color: #374151; cursor: pointer; }
.ry-vt-close svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; }
.ry-vt-close:focus-visible { outline: 2px solid var(--color-base-base-dark-100); outline-offset: 3px; }
.ry-vt-error { margin-top: 16px; font-size: 14px; }
body.ry-vt-modal-open { overflow: hidden; }
@media (max-width: 1100px) { .ry-vt-grid { display: flex; gap: var(--spacing--16); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: thin; } .ry-vt-card { flex: 0 0 min(88vw,420px); scroll-snap-align: start; } }
@media (max-width: 767px) { .ry-video-testimonials { padding-block: var(--spacing--32) var(--spacing--48); } .ry-vt-heading { margin-bottom: var(--spacing--24); } .ry-vt-card { min-height: 150px; } .ry-vt-content { padding: 12px; gap: 8px; } .ry-vt-quote { font-size: 13px; } .ry-vt-stars svg { width: 15px; height: 15px; } .ry-vt-content .ry-vt-name { font-size: 13px; } .ry-vt-play { padding: 8px; } .ry-vt-play svg { width: 32px; height: 32px; padding: 10px; } .ry-vt-dialog-layout { grid-template-columns: minmax(0,1fr); } .ry-vt-dialog video { height: 56vh; } .ry-vt-dialog-copy { max-height: none; padding: 24px; } }

/* Hide decoded animated frames immediately while the full video is open. */
.ry-vt-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.ry-vt-modal-open .ry-vt-preview { visibility: hidden; }

/* css/ry-case-study-slider.css */
/* Nextwell case-study slider layout adapted to the existing RyseList system. */
.ry-case-slider { padding-block: var(--section-padding--medium); overflow: hidden; }
.ry-cs-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing--32); margin-bottom: var(--spacing--64); }
.ry-cs-heading h2 { max-width: 55rem; }
.ry-cs-navigation { display: flex; gap: var(--spacing--12); flex: none; }
.ry-cs-navigation button { display: grid; place-items: center; width: 44px; height: 44px; padding: 12px; border: 0; border-radius: var(--radius-general-full); background: var(--color-base-base-dark-8); color: var(--color-base-base-dark-100); cursor: pointer; transition: color .3s,background .3s; }
.ry-cs-navigation button:hover { background: var(--color-base-base-dark-100); color: var(--color-base-base-light-100); }
.ry-cs-navigation svg { width: 20px; height: 20px; }
.ry-cs-prev svg { transform: rotate(180deg); }
.ry-cs-viewport { overflow: hidden; touch-action: pan-y; }
.ry-cs-track { display: flex; align-items: stretch; gap: var(--spacing--16); position: relative; transition: transform .5s ease-in-out; }
.ry-cs-viewport.is-dragging .ry-cs-track { transition: none; }
.ry-cs-slide { flex: 0 0 min(100%,52.38rem); min-width: 0; }
.ry-cs-card { display: flex; gap: var(--spacing--32); width: 100%; height: 100%; margin: 0; padding: var(--spacing--32); border: 0; border-radius: var(--radius-general-default); overflow: hidden; background: var(--color-tokens-background-lift); color: var(--color-tokens-tone-strong); text-align: left; font: inherit; white-space: normal; cursor: pointer; user-select: none; }
.ry-cs-image-panel { display: flex; flex: none; align-items: flex-end; position: relative; isolation: isolate; overflow: hidden; width: 20rem; height: 22.25rem; border-radius: var(--radius-general-default); color: var(--color-base-base-light-100); }
.ry-cs-image-panel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; pointer-events: none; }
.ry-cs-image-overlay { position: absolute; inset: 0; background: var(--color-base-base-dark-32);  }
.ry-cs-stat-block { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing--12); padding: var(--spacing--24); }
.ry-cs-stat { font: 400 4rem/1.0625 var(--typography-font-heading-sans); letter-spacing: -.05rem; }
.ry-cs-stat-block .label-large { color: var(--color-base-base-light-88); }
.ry-cs-content { display: flex; flex: 1; min-width: 0; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: var(--spacing--48); padding-block: var(--spacing--24); }
.ry-cs-logo { width: 40%; max-width: 11.25rem; max-height: 1.4375rem; height: auto; object-fit: contain; object-position: left center; pointer-events: none; }
.ry-cs-quote { font: 400 var(--typography-size-h5)/var(--typography-line-height-h5) var(--typography-font-heading-sans); letter-spacing: var(--typography-letter-spacing-h5); }
.ry-cs-attribution { display: flex; flex-direction: column; gap: 4px; }
.ry-cs-footer { display: flex; justify-content: flex-end; margin-top: var(--spacing--32); }
.ry-cs-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ry-case-slider .ry-cs-card:focus-visible { outline: 2px solid var(--color-tokens-tone-strong); outline-offset: -4px; }
.ry-case-slider.is-reveal-ready .ry-cs-heading,
.ry-case-slider.is-reveal-ready .ry-cs-viewport { opacity: 0; translate: 0 50px; transition: opacity .7s ease-out,translate .7s ease-out; }
.ry-case-slider.is-reveal-ready .ry-cs-viewport { transition-delay: .15s; }
.ry-case-slider.is-in-view .ry-cs-heading,
.ry-case-slider.is-in-view .ry-cs-viewport { opacity: 1; translate: 0 0; }
@media (min-width:768px) and (max-width:991px) { .ry-case-slider .container-large { max-width: 728px; } .ry-cs-image-panel { width: 45%; } }
@media (max-width:767px) {
  .ry-case-slider { padding-block: var(--spacing--80); }
  .ry-cs-heading { flex-direction: column; align-items: flex-start; gap: var(--spacing--24); margin-bottom: var(--spacing--32); }
  .ry-cs-track { gap: var(--spacing--12); }
  .ry-cs-slide { flex-basis: 100%; }
  .ry-cs-card { flex-direction: column; gap: var(--spacing--24); padding: var(--spacing--24); }
  .ry-cs-image-panel { width: 100%; height: 16rem; }
  .ry-cs-stat-block { padding: var(--spacing--20); gap: var(--spacing--8); }
  .ry-cs-stat { font-size: 2.4rem; line-height: 3rem; }
  .ry-cs-content { padding-block: var(--spacing--20); gap: var(--spacing--32); }
  .ry-cs-quote { font-size: 1.375rem; line-height: 1.625rem; }
}
@media (prefers-reduced-motion:reduce) {
  .ry-cs-track,.ry-cs-navigation button { transition: none; }
  .ry-case-slider.is-reveal-ready .ry-cs-heading,.ry-case-slider.is-reveal-ready .ry-cs-viewport { opacity: 1; translate: none; transition: none; }
}

/* css/ry-duel-alternative.css */
/* Joined comparison on the approved floating-hero preview pages. */
.ry-work-duel-joined .ry-duel-illustration {
  object-fit: contain;
  background: transparent;
}
.ry-motion-root[data-motion-ready="true"] .ry-work-duel-joined .ry-work-duel-card.ry-motion-reveal {
  opacity: 1 !important;
  translate: none;
  transition: none;
}
.ry-work-duel-joined .ry-work-duel-grid {
  gap: 0;
  max-width: 1200px;
  overflow: hidden;
  border: 1px solid var(--color-base-base-dark-8);
  border-radius: 0;
}
.ry-work-duel-joined .ry-work-duel-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #faf9f8;
}
.ry-work-duel-joined .ry-work-new-way {
  border-left: 1px solid var(--color-base-base-dark-8);
  background: linear-gradient(150deg, #f3f8ea, #f8faf6);
}
.ry-work-duel-joined .ry-work-card-heading {
  margin: 30px 30px 16px;
}
.ry-work-duel-joined .ry-work-duel-list {
  display: grid;
  gap: 20px;
  padding: 0 30px 32px;
}
.ry-work-duel-joined .ry-work-duel-list li {
  gap: 12px;
  min-height: 0;
  padding: 0;
  border: 0;
  font-size: 18px;
  line-height: 1.5;
}
.ry-work-duel-joined .ry-work-duel-list .icon_plan-tick {
  flex: none;
  width: 23px;
  height: 23px;
  margin-top: 3px;
}
.ry-work-duel-joined .ry-work-card-bottom {
  padding: 0 30px 32px;
  min-height: 0;
}
.ry-work-duel-joined .ry-work-duel-card .ry-da-scene {
  flex: none;
  height: 300px;
  margin: 0 26px 28px;
}
.ry-work-duel-joined .ry-da-scene .ry-da-browser {
  top: 16px;
  left: 50%;
  max-width: 420px;
  transform: translateX(-50%);
}
.ry-work-duel-joined .ry-work-new-way .ry-da-stat {
  border-color: #8fac65;
  background: #f4faeefa;
}
.ry-work-duel-joined .ry-work-new-way .ry-da-stat strong { color: #34571c; }
@media (max-width: 991px) {
  .ry-work-duel-joined .ry-work-card-heading { margin-inline: 20px; }
  .ry-work-duel-joined .ry-work-duel-list { padding-inline: 20px; }
  .ry-work-duel-joined .ry-work-duel-list li { font-size: 16px; }
  .ry-work-duel-joined .ry-work-duel-card .ry-da-scene {
    height: 235px;
    margin-inline: 16px;
  }
  .ry-work-duel-joined .ry-da-scene .ry-da-browser { max-width: 328px; }
}
@media (max-width: 767px) {
  .ry-work-duel-joined .ry-work-card-heading { margin-top: 24px; }
  .ry-work-duel-joined .ry-work-duel-list { gap: 16px; padding-bottom: 26px; }
  .ry-work-duel-joined .ry-work-card-bottom { padding: 0 20px 26px; }
  .ry-work-duel-joined .ry-work-duel-card .ry-da-scene {
    margin-bottom: 24px;
  }
  .ry-work-duel-joined .ry-work-new-way {
    border-left: 0;
    border-top: 1px solid var(--color-base-base-dark-8);
  }
}

/* Flat editorial artwork and live labels for the approved comparison pair. */
.ry-work-duel-joined .ry-work-duel-card .ry-duel-story {
  height: auto;
  margin-inline: 30px;
}
.ry-duel-art {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 3 / 2;
  margin-inline: auto;
}
.ry-duel-art .ry-duel-illustration {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ry-duel-invoice-price {
  position: absolute;
  left: 89.6%;
  top: 59.3%;
  transform: translate(-50%, -50%);
  color: #231f23;
  font: 500 clamp(12px, 1.3vw, 19px)/1 var(--typography-font-heading-sans);
}
.ry-duel-story-caption {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  min-height: 88px;
  padding-top: 20px;
  border-top: 1px solid var(--color-base-base-dark-8);
}
.ry-duel-story-caption > div { display: grid; gap: 7px; }
.ry-duel-story-caption strong {
  font: 500 clamp(20px, 2vw, 28px)/1.15 var(--typography-font-heading-sans);
  letter-spacing: -.025em;
}
.ry-duel-story-caption span {
  color: var(--color-tokens-tone-medium);
  font-size: 12px;
  line-height: 1.5;
}
.ry-duel-story-caption .ry-duel-story-benefits { align-self: center; }
.ry-duel-story-benefits b { font-size: 13px; font-weight: 500; }
@media (max-width: 991px) {
  .ry-work-duel-joined .ry-work-duel-card .ry-duel-story { margin-inline: 20px; }
  .ry-duel-story-caption { min-height: 104px; gap: 12px; }
}
@media (max-width: 479px) {
  .ry-duel-story-caption { min-height: 98px; }
  .ry-duel-story-caption > div { flex: 1; }
  .ry-duel-story-caption strong { font-size: 21px; }
  .ry-duel-story-caption span, .ry-duel-story-benefits b { font-size: 11px; }
}

/* Alternate layout from the supplied two-panel comparison, adapted to RyseList. */
.ry-duel-alternative { padding-block: var(--spacing--64); }
.ry-da-container { max-width: 1200px; margin-inline: auto; }
.ry-duel-alternative [hidden] { display: none !important; }
.ry-da-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.ry-da-card { min-width: 0; border: 1px solid var(--color-base-base-dark-8); background: #faf9f8; color: var(--color-tokens-tone-strong); }
.ry-da-card + .ry-da-card { border-left: 0; }
.ry-da-new { background: linear-gradient(150deg,#f3f8ea,#f8faf6); }
.ry-da-badge { display: table; margin: 30px auto 16px; padding: 11px 18px; border: 1px solid #d78a82; border-radius: 7px; color: #914940; background: #fff5f3; }
.ry-da-new .ry-da-badge { border-color: #94b859; background: #eaf6d8; color: #3c611f; }
.ry-da-scene { position: relative; height: 300px; margin: 0 26px 28px; }
.ry-da-sketch { width: 100%; height: 100%; display: block; font-family: var(--typography-font-body); }
.ry-da-browser { position: absolute; top: 31px; left: 6%; width: 84%; overflow: hidden; border: 1px solid #d2dac9; border-radius: 9px; background: #111; box-shadow: 0 10px 24px #17220e12; }
.ry-da-browser-bar { display: flex; align-items: center; gap: 7px; height: 32px; padding: 8px 10px; background: #fff; color: #35482b; font-size: 12px; border-bottom: 1px solid #e0e6da; }
.ry-da-browser-bar img { width: 18px; height: 18px; }
.ry-da-browser-bar i { margin-left: auto; font-style: normal; color: #9aa28f; }
.ry-da-screen { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.ry-da-stat { position: absolute; z-index: 1; bottom: 0; right: 0; display: flex; flex-direction: column; gap: 5px; width: 185px; padding: 13px 15px; border: 1px solid #d78a82; border-radius: 9px; background: #fff8f5f5; box-shadow: 0 4px 16px #00000005; }
.ry-da-stat strong { font: 500 20px/1.2 var(--typography-font-heading-sans); }
.ry-da-stat span { color: #747371; font-size: 12px; line-height: 1.4; }
.ry-da-new .ry-da-stat { border-color: #8fac65; background: #f4faeefa; }
.ry-da-new .ry-da-stat strong { color: #34571c; }
.ry-da-list { display: grid; gap: 20px; list-style: none; margin: 0; padding: 0 30px 32px; }
.ry-da-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 18px; line-height: 1.5; }
.ry-da-icon { display: grid; place-items: center; flex: none; width: 23px; height: 23px; margin-top: 3px; padding: 5px; border-radius: 50%; color: #fff; background: #c7544a; }
.ry-da-new-icon { background: #537c2a; }
.ry-da-icon svg { display: block; width: 100%; height: 100%; }
.ry-da-tabs { display: flex; width: 100%; margin: 0; border: 1px solid var(--color-base-base-dark-8); border-bottom: 0; }
.ry-da-tabs button { position: relative; flex: 1; min-width: 0; min-height: 56px; padding: 14px 20px; border: 0; background: transparent; color: var(--color-tokens-tone-medium); font: 500 14px/1.4 var(--typography-font-body); cursor: pointer; }
.ry-da-tabs button[aria-selected="true"] { background: var(--color-tokens-background-depth); color: var(--color-tokens-tone-strong); }
.ry-da-tabs button[aria-selected="true"]::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--color-tokens-tone-strong); }
.ry-da-tabs button:focus-visible,.ry-da-panel:focus-visible { outline: 2px solid var(--color-tokens-tone-strong); outline-offset: 4px; }
@media(max-width:991px) and (min-width:768px) { .ry-da-scene { height: 235px; margin-inline: 16px; } .ry-da-stat { width: 158px; padding: 11px; } .ry-da-stat strong { font-size: 17px; } .ry-da-list { padding-inline: 20px; } .ry-da-list li { font-size: 16px; } }
@media(max-width:767px) { .ry-duel-alternative { padding-block: var(--spacing--48); } .ry-da-pair { grid-template-columns: minmax(0,1fr); } .ry-da-card + .ry-da-card { border-left: 1px solid var(--color-base-base-dark-8); border-top: 0; } .ry-da-scene { height: 235px; margin: 0 16px 24px; } .ry-da-browser { top: 25px; } .ry-da-badge { margin-top: 24px; } .ry-da-stat { width: 164px; padding: 11px; } .ry-da-stat strong { font-size: 18px; } .ry-da-list { padding: 0 20px 26px; gap: 16px; } .ry-da-list li { font-size: 16px; } .ry-da-tabs button { padding-inline: 8px; min-height: 64px; font-size: 12px; } }

/* Center the comparison card titles at a clear heading size. */
#duel .ry-work-card-heading { justify-content: center; text-align: center; }
#duel .ry-work-card-heading h3 {
  font-family: var(--typography-font-family-h3);
  font-size: clamp(24px, 2.3vw, 32px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* css/ry-floating-hero.css */
/* Local alternative: perspective image field with existing RyseList typography. */
.ry-float-scroll { height: auto; position: relative; }
.ry-float-hero { --float-surface: var(--color-base-base-light-100); height: 100svh; min-height: 650px; position: relative; top: 0; overflow: clip; isolation: isolate; background: var(--float-surface); display: grid; place-items: center; padding: 110px 24px 75px; }
.ry-float-canvas,.ry-float-fallback { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -2; }
.ry-float-fallback img { position: absolute; width: 22.5%; border-radius: var(--radius-general-small); height: auto; aspect-ratio: 4/3; object-fit: cover; opacity: .6; }
.ry-float-fallback img:nth-child(1) { left: 3%; top: 18%; }
.ry-float-fallback img:nth-child(2) { right: 4%; top: 15%; }
.ry-float-fallback img:nth-child(3) { left: 13%; bottom: 12%; }
.ry-float-fallback img:nth-child(4) { right: 9%; bottom: 9%; }
.ry-float-hero[data-renderer-ready] .ry-float-fallback { display:none; }
.ry-float-content { position: relative; width: min(100%, 880px); text-align: center; display:flex; flex-direction:column; align-items:center; gap:24px; }
.ry-float-content::before { content:''; position:absolute; inset:-90px -100px; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at center, var(--float-surface) 12%, color-mix(in srgb,var(--float-surface) 94%,transparent) 38%,color-mix(in srgb,var(--float-surface) 65%,transparent) 52%,transparent 72%); }
.ry-float-content .ry-hero-pretitle { margin:0; max-width:100%; font-size:12px; line-height:1.5; }
.ry-float-content .ry-hero-prebreak { display:none; }
.ry-float-content .ry-hero-title { margin:0; font-size:clamp(44px,5.1vw,76px); line-height:1.07; letter-spacing:-.045em; max-width:100%; }
.ry-float-content .ry-hero-title-line { display:block; }
.ry-float-content .ry-hero-subtext { margin:0; max-width:570px; font-size:18px; line-height:1.55; }
.ry-float-content .ry-hero-subtext strong { display:block; margin-top:3px; font-size:15px; font-weight:400; }
.ry-float-content .ry-hero-cta { margin:4px 0 0; min-height:54px; }
.ry-float-note { font-size:12px; margin: -10px 0 0; color:var(--color-tokens-tone-medium); }
.ry-float-scroll-link { position:absolute; bottom:32px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:10px; font:11px/1.4 var(--typography-font-label); text-transform:uppercase; letter-spacing:.04em; color:var(--color-tokens-tone-medium); }
.ry-float-pause { position:absolute; right:28px; bottom:24px; display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--color-base-base-dark-16); border-radius:50%; background:color-mix(in srgb,var(--float-surface) 90%,transparent); color:var(--color-tokens-tone-strong); cursor:pointer; }
.ry-float-pause svg { width:14px; height:14px; }
.ry-float-pause .ry-float-play { display:none; }
.ry-float-pause[aria-pressed=true] .ry-float-play { display:block; }
.ry-float-pause[aria-pressed=true] .ry-float-pause-icon { display:none; }
.ry-float-pause:focus-visible,.ry-float-scroll-link:focus-visible { outline:2px solid currentColor; outline-offset:5px; }
.ry-float-content.is-entering > * { animation:ry-float-enter .8s cubic-bezier(.16,1,.3,1) both; }
.ry-float-content.is-entering > :nth-child(2) { animation-delay:.08s; }
.ry-float-content.is-entering > :nth-child(3) { animation-delay:.16s; }
.ry-float-content.is-entering > :nth-child(4) { animation-delay:.24s; }
@keyframes ry-float-enter { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:767px) {
 .ry-float-scroll { height:auto; }
 .ry-float-hero { min-height:640px; padding:100px 20px 85px; }
 .ry-float-content { gap:22px; }
 .ry-float-content .ry-hero-pretitle { font-size:10px; max-width:340px; }
 .ry-float-content .ry-hero-prebreak { display:block; }
 .ry-float-content .ry-hero-title { font-size:clamp(34px,8.8vw,60px); letter-spacing:-.045em; }
 .ry-float-content .ry-hero-subtext { max-width:350px; font-size:16px; }
 .ry-float-content .ry-hero-subtext strong { font-size:13px; }
 .ry-float-content::before { inset:-80px -50px; }
 .ry-float-pause { right:16px; bottom:20px; }
 .ry-float-scroll-link { bottom:32px; }
}
@media(max-height:740px) and (min-width:768px) {
 .ry-float-hero { min-height:560px; padding-top:105px; padding-bottom:75px; }
 .ry-float-content { gap:18px; }
 .ry-float-content .ry-hero-title { font-size:clamp(44px,5vw,64px); }
}
@media(prefers-reduced-motion:reduce) { .ry-float-scroll { height:auto; } .ry-float-hero { position:relative; } .ry-float-content.is-entering > * { animation:none; } }