/* css/ry-cta-arrow.css */
/* Shared black chip and centered arrow slot, matching ryselist.com. */
:is(.cta_primary, .cta_secondary, .cta_tertiary) .ry-cta-arrow {
  display: grid !important;
  place-items: center;
  position: relative;
  flex: 0 0 var(--ry-cta-chip-size, 36px) !important;
  width: var(--ry-cta-chip-size, 36px) !important;
  height: var(--ry-cta-chip-size, 36px) !important;
  margin: 0 !important;
  border-radius: 8px;
  background: #070708;
  overflow: hidden;
  pointer-events: none;
  transform: none !important;
  translate: none !important;
}
/* Retain native wrappers/hooks, but do not combine their old travel with the loop. */
:is(.cta_primary, .cta_secondary, .cta_tertiary) .ry-cta-arrow-wrap {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  flex: none !important;
  transform: none !important;
  translate: none !important;
}
:is(.cta_primary, .cta_secondary, .cta_tertiary) .ry-cta-arrow-duplicate { display: none !important; }
.ry-cta-arrow-wrap.right { margin-left: 8px !important; }
.ry-cta-arrow-wrap.left { margin-right: 8px !important; }
.ry-header-minimal .ry-nav-start .ry-cta-arrow-wrap { margin: 0 !important; }
.ry-cta-arrow > svg, .ry-cta-arrow > img { display: none; }
/* Webflow embed clearfix pseudo-elements must not become extra chip grid items. */
.ry-cta-arrow::before, .ry-cta-arrow::after { content: none !important; display: none !important; }
.ry-cta-arrow-slot {
  display: block;
  position: relative;
  width: var(--ry-cta-slot-size, 15px);
  height: var(--ry-cta-slot-size, 15px);
  overflow: hidden;
}
.ry-cta-arrow-slot::before, .ry-cta-arrow-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: ry-cta-arrow-loop 2.4s cubic-bezier(.65, 0, .35, 1) infinite;
  animation-play-state: paused;
}
.ry-cta-arrow-slot::after { animation-delay: -1.2s; }
.ry-cta-arrow[data-ry-arrow-active="true"] .ry-cta-arrow-slot::before,
.ry-cta-arrow[data-ry-arrow-active="true"] .ry-cta-arrow-slot::after { animation-play-state: running; will-change: transform; }
.ry-header-minimal .ry-nav-start { --ry-cta-chip-size: 28px; }
@media (max-width: 767px) {
  .ry-header-minimal .ry-nav-start { --ry-cta-chip-size: 24px; --ry-cta-slot-size: 12px; }
}
@keyframes ry-cta-arrow-loop {
  0% { transform: translate(0, 0); }
  42% { transform: translate(160%, -160%); }
  42.01% { transform: translate(-160%, 160%); }
  84%, 100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ry-cta-arrow-slot::before { animation: none; transform: none; }
  .ry-cta-arrow-slot::after { display: none; animation: none; }
}

/* css/ry-pretitle-pill.css */
/* Supplied announcement pill, scoped to the approved floating homepages. */
.ry-float-content .ry-hero-pretitle.ry-pretitle-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .63rem;
  min-height: 2.25rem;
  max-width: 100%;
  margin: 0;
  padding: 4px 16px 4px 6px;
  border: 1px solid var(--color-base-base-dark-16);
  border-radius: var(--radius-general-small);
  background: var(--color-tokens-background-depth);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--color-tokens-tone-strong);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
}
.ry-pretitle-pill-badge {
  display: inline-grid;
  flex: none;
  align-items: center;
  justify-items: center;
  grid-template-columns: 1.63rem;
  grid-template-rows: 1.38rem;
  height: 24px;
  padding-inline: 12px;
  border-radius: 9999px;
  background: #d0d0d0;
  color: #303030;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}
.ry-pretitle-pill-copy { min-width: 0; text-wrap: pretty; }
.ry-pretitle-pill:focus-visible { outline: 2px solid #18181b; outline-offset: 4px; }
.ry-float-content .ry-hero-pretitle.ry-pretitle-laurels {
  padding: 6px 14px;
  gap: 12px;
  cursor: default;
  font-size: 12px;
  line-height: 18px;
}
.ry-pretitle-laurels > span:not(.ry-hero-laurel-mirror) { min-width: 0; }
.ry-pretitle-announcement {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ry-pretitle-announcement-badge {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: calc(var(--radius-general-small) * .5);
  background: var(--color-tokens-tone-strong);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
}
.ry-pretitle-announcement-copy { min-width: 0; text-wrap: pretty; }
.ry-pretitle-badge-label {
  position: relative;
  z-index: 2;
  text-shadow: none;
}
.ry-pretitle-badge-flag-label {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  color: #000;
  text-shadow: none;
  pointer-events: none;
}
.ry-pretitle-announcement-badge::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  border-radius: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, #ef3340 0 25%, transparent 25% 100%),
    linear-gradient(to bottom, #009739 0 33.333%, #fff 33.333% 66.666%, #000 66.666% 100%);
}
.ry-pretitle-announcement-badge::after,
.ry-pretitle-badge-flag-label {
  clip-path: inset(0 100% 0 0);
  animation: ry-new-uae-reveal 5.6s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes ry-new-uae-reveal {
  0%, 30% { clip-path: inset(0 100% 0 0); opacity: 1; }
  55%, 78% { clip-path: inset(0 0 0 0); opacity: 1; }
  91% { clip-path: inset(0 0 0 0); opacity: 0; }
  92%, 99% { clip-path: inset(0 100% 0 0); opacity: 0; }
  100% { clip-path: inset(0 100% 0 0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ry-pretitle-announcement-badge::after,
  .ry-pretitle-badge-flag-label { animation: none; opacity: 0; }
}
@media (max-width: 720px) {
  .ry-float-content .ry-hero-pretitle.ry-pretitle-pill {
    max-width: min(100%, 340px);
    gap: 8px;
    margin-bottom: 0;
    padding: 6px 10px 6px 6px;
    font-size: 12px;
    line-height: 17px;
  }
  .ry-pretitle-pill-badge { height: 22px; grid-template-rows: 1fr; }
  .ry-pretitle-pill-copy { display: block; text-align: left; }
  .ry-float-content .ry-hero-pretitle.ry-pretitle-laurels {
    padding: 6px 10px;
    gap: 8px;
    font-size: 10px;
    line-height: 15px;
  }
  .ry-float-content .ry-pretitle-laurels .ry-hero-prebreak { display: block; }
  .ry-pretitle-announcement { gap: 6px; }
  .ry-pretitle-announcement-badge { padding: 3px 6px; font-size: 9px; line-height: 12px; }
}

/* css/ry-hero-selected-offer.css */
/* Let the selected offer fit naturally while retaining the hero type scale. */
#home.ry-float-hero:has(.ry-hero-offer-actions) {
  height: auto;
  min-height: 100svh;
}
.ry-hero-offer-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}
#home .ry-hero-offer-actions .ry-hero-cta {
  scale: 1.1;
  max-width: calc(100% / 1.1);
  transform-origin: center;
  margin-block: 7px 3px;
}
.ry-hero-offer-notes {
  max-width: 480px;
  margin: 0;
  color: var(--color-tokens-tone-medium);
  font-size: 12px;
  line-height: 1.5;
}
.ry-hero-delivery-note {
  display: block;
  margin-top: 4px;
  font-size: 11px;
}
.ry-site-page #home .ry-hero-subtext .ry-hero-benefit {
  font-weight: 600;
  color: var(--color-tokens-tone-strong);
}
@media (min-width: 768px) {
  .ry-site-page #home .ry-hero-subtext { max-width: 720px; }
}
@media (max-width: 767px) {
  .ry-hero-offer-actions .ry-hero-cta { width: 100%; }
  .ry-hero-offer-notes { max-width: 310px; }
}

/* css/ry-phone-pop.css */
/* Independent horizontal showcase. Ordinary document flow, without pinned scrolling. */
.ry-phone-pop { position: relative; isolation: isolate; color: var(--color-tokens-tone-strong); background: var(--color-tokens-background-base); scroll-margin-top: 90px; }
.ry-phone-pop-pin { position: relative; padding-top: 16px; }
.ry-phone-pop .ry-section-heading { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ry-phone-pop .ry-section-title { text-wrap: balance; }
.ry-phone-pop .ry-section-subtitle { margin: 0; }
.ry-phone-pop-stage { position: relative; width: min(100%, 1320px); height: 740px; margin-inline: auto; }
.ry-phone-pop-photo { z-index: 1; position: absolute; left: 50%; top: 50%; width: clamp(160px, 17vw, 230px); aspect-ratio: 4 / 3; margin: 0; padding: 0; border: 0; border-radius: 10px; background: transparent; box-shadow: 0 10px 30px #231f231a, 0 2px 5px #231f2310; transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--angle)) scale(.9); }
.ry-phone-pop-photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.ry-phone-pop-photo:nth-child(1) { --x: -330px; --y: -245px; --angle: -8deg; }
.ry-phone-pop-photo:nth-child(2) { --x: 0px; --y: -255px; --angle: 3deg; }
.ry-phone-pop-photo:nth-child(3) { --x: 330px; --y: -245px; --angle: 8deg; }
.ry-phone-pop-photo:nth-child(4) { --x: max(-475px, -37vw); --y: 15px; --angle: -5deg; }
.ry-phone-pop-photo:nth-child(5) { --x: min(475px, 37vw); --y: 15px; --angle: 6deg; }
.ry-phone-pop-photo:nth-child(6) { --x: -330px; --y: 250px; --angle: 7deg; }
.ry-phone-pop-photo:nth-child(7) { --x: 0px; --y: 255px; --angle: -3deg; }
.ry-phone-pop-photo:nth-child(8) { --x: 330px; --y: 250px; --angle: -8deg; }
/* Exact frame asset and geometry used by the original horizontal showcase. */
.ry-phone-pop-phone { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10; width: min(46vw, 510px); aspect-ratio: 1000 / 498; }
.ry-phone-pop-screen { position: absolute; inset: 7.13% 3.6%; border-radius: 6.8% / 14.8%; overflow: hidden; background: #111510; }
.ry-phone-pop-screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ry-phone-pop-frame { position: absolute; width: 49.8%; height: 200.803%; max-width: none; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg); pointer-events: none; z-index: 2; filter: drop-shadow(8px 0 10px #0004); }
.ry-phone-pop-error { text-align: center; padding-inline: 24px; }
.ry-phone-pop-error[hidden] { display: none; }
@media (max-width: 1100px) and (min-width: 768px) {
  .ry-phone-pop-photo:nth-child(1), .ry-phone-pop-photo:nth-child(6) { --x: -28vw; }
  .ry-phone-pop-photo:nth-child(3), .ry-phone-pop-photo:nth-child(8) { --x: 28vw; }
  .ry-phone-pop-photo:nth-child(4) { --x: -37vw; }
  .ry-phone-pop-photo:nth-child(5) { --x: 37vw; }
}
@media (max-width: 767px) {
  .ry-phone-pop .ry-section-heading { gap: 12px; }
  .ry-phone-pop-stage { height: 460px; }
  .ry-phone-pop-phone { width: 78vw; }
  .ry-phone-pop-photo:nth-child(4), .ry-phone-pop-photo:nth-child(5) { display: none; }
  .ry-phone-pop-photo { width: 27vw; max-width: 160px; padding: 0; border-radius: 7px; }
  .ry-phone-pop-photo img { border-radius: 7px; }
  .ry-phone-pop-photo:nth-child(1) { --x: -31vw; --y: -160px; --angle: -7deg; }
  .ry-phone-pop-photo:nth-child(2) { --x: 0px; --y: -175px; --angle: 3deg; }
  .ry-phone-pop-photo:nth-child(3) { --x: 31vw; --y: -160px; --angle: 7deg; }
  .ry-phone-pop-photo:nth-child(4) { --x: -31vw; --y: -90px; --angle: -9deg; }
  .ry-phone-pop-photo:nth-child(5) { --x: 31vw; --y: 90px; --angle: 9deg; }
  .ry-phone-pop-photo:nth-child(6) { --x: -31vw; --y: 160px; --angle: 7deg; }
  .ry-phone-pop-photo:nth-child(7) { --x: 0px; --y: 175px; --angle: -3deg; }
  .ry-phone-pop-photo:nth-child(8) { --x: 31vw; --y: 160px; --angle: -7deg; }
}
@media (min-width: 480px) and (max-width: 767px) {
  .ry-phone-pop-stage { height: 550px; }
  .ry-phone-pop-photo:nth-child(-n+3) { --y: -195px; }
  .ry-phone-pop-photo:nth-child(n+6) { --y: 195px; }
}

.ry-phone-pop-links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.ry-phone-pop-links path { fill: none; stroke: #73a62b; stroke-opacity: .35; stroke-width: 1; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* Fade once in the final positions. Scrolling never changes photo geometry. */
.ry-phone-pop.has-photo-fade .ry-phone-pop-photo,
.ry-phone-pop.has-photo-fade .ry-phone-pop-links { opacity: 0; }
.ry-phone-pop.has-photo-fade.is-photo-visible .ry-phone-pop-photo,
.ry-phone-pop.has-photo-fade.is-photo-visible .ry-phone-pop-links {
  opacity: 1;
  transition: opacity 500ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .ry-phone-pop.has-photo-fade .ry-phone-pop-photo,
  .ry-phone-pop.has-photo-fade .ry-phone-pop-links,
  .ry-phone-pop.has-photo-fade.is-photo-visible .ry-phone-pop-photo,
  .ry-phone-pop.has-photo-fade.is-photo-visible .ry-phone-pop-links {
    opacity: 1;
    transition: none;
  }
}

.ry-phone-pop-anchor { position: absolute; top: 0; scroll-margin-top: 90px; }
.ry-phone-pop-picker-wrap { max-width: 960px; margin: 28px auto 0; padding-inline: 24px; }
.ry-phone-pop-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ry-phone-pop-picker-label { margin: 0; }
.ry-phone-pop-full-link { font-size: 13px; color: var(--color-tokens-tone-medium); text-underline-offset: 3px; }
.ry-phone-pop-picker { display: flex; justify-content: center; gap: 12px; overflow-x: auto; padding: 4px 3px 12px; scrollbar-width: thin; scrollbar-color: #73a62b55 transparent; }
.ry-phone-pop-choice { display: flex; flex-direction: column; gap: 8px; flex: 0 0 132px; padding: 4px 4px 9px; border: 2px solid transparent; border-radius: 12px; color: var(--color-tokens-tone-medium); background: transparent; cursor: pointer; font: inherit; }
.ry-phone-pop-choice img { display: block; width: 100%; height: 76px; object-fit: cover; border-radius: 7px; }
.ry-phone-pop-choice span { font-size: 13px; line-height: 1.3; }
.ry-phone-pop-choice[aria-pressed="true"] { border-color: #73a62b; color: var(--color-tokens-tone-strong); background: #73a62b0d; }
.ry-phone-pop-choice:focus-visible { outline: 2px solid #527d28; outline-offset: 2px; }
.ry-phone-pop-choice[aria-busy="true"] { opacity: .65; }
.ry-phone-pop-selection-status { text-align: center; font-size: 13px; margin: 8px 0 0; }
.ry-phone-pop-selection-status[hidden] { display: none; }
@media (max-width: 960px) {
  .ry-phone-pop-picker { justify-content: flex-start; }
  .ry-phone-pop-choice { flex-basis: 116px; }
}
@media (max-width: 767px) {
  .ry-phone-pop-picker-wrap { padding-inline: 16px; margin-top: 16px; }
  .ry-phone-pop-picker { gap: 8px; }
  .ry-phone-pop-choice { flex-basis: 104px; }
  .ry-phone-pop-choice img { height: 62px; }
}

/* Desktop title occupies the top-middle photo position. Mobile keeps six photos. */
@media (min-width: 768px) {
 .ry-phone-pop .ry-section-heading { position: absolute; z-index: 2; top: 141px; left: 50%; width: min(54vw, 600px); margin: 0; transform: translate(-50%, -50%); }
 .ry-phone-pop-photo:nth-child(2) { display: none; }
 .ry-phone-pop-photo:nth-child(1) { --x: calc(-1 * min(470px, 39vw)); }
 .ry-phone-pop-photo:nth-child(3) { --x: min(470px, 39vw); }
}

/* Compact listing choices stay with the title; arrows use the same selector. */
.ry-phone-pop .ry-phone-pop-picker-wrap { width: 100%; max-width: 460px; padding: 0; margin: 0; }
.ry-phone-pop .ry-phone-pop-picker { justify-content: center; gap: 6px; padding: 3px; overflow: visible; }
.ry-phone-pop .ry-phone-pop-choice { position: relative; flex: 0 1 60px; min-width: 0; padding: 3px; border-radius: 8px; gap: 0; }
.ry-phone-pop .ry-phone-pop-choice img { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 4px; }
.ry-phone-pop .ry-phone-pop-choice span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ry-phone-pop .ry-phone-pop-selection-status { margin-top: 4px; font-size: 11px; line-height: 1.3; }
.ry-phone-pop-nav { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 86px; min-height: 44px; padding: 6px; border: 1px solid #231f231a; border-radius: 999px; background: #f7f6f5; color: #231f23; font: inherit; font-size: 12px; cursor: pointer; }
.ry-phone-pop-nav svg { width: 14px; height: 14px; flex: none; }
.ry-phone-pop-prev { right: calc(100% + 12px); }
.ry-phone-pop-next { left: calc(100% + 12px); }
.ry-phone-pop-nav:hover { background: #c5ef57; }
.ry-phone-pop-nav:focus-visible { outline: 2px solid #527d28; outline-offset: 3px; }
.ry-phone-pop-nav:disabled { opacity: .45; cursor: wait; }
@media (min-width: 768px) {
 .ry-phone-pop .ry-section-heading { top: var(--photo-title-top, 46px); transform: translateX(-50%); gap: 12px; }
 .ry-phone-pop-photo { transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--angle)) scale(.945); }
}
@media (min-width: 768px) and (max-width: 1100px) {
 #showcase-phone-pop .ry-section-title { font-size: clamp(34px, 4.45vw, 49px); }
}
@media (max-width: 1100px) {
 .ry-phone-pop-nav { top: calc(100% + 8px); transform: none; min-height: 36px; }
 .ry-phone-pop-prev { left: 0; right: auto; }
 .ry-phone-pop-next { right: 0; left: auto; }
}
@media (max-width: 767px) {
 .ry-phone-pop .ry-phone-pop-picker-wrap { max-width: 360px; }
 .ry-phone-pop .ry-phone-pop-picker { gap: 4px; }
 .ry-phone-pop .ry-phone-pop-choice { padding: 2px; }
 .ry-phone-pop-photo:nth-child(6), .ry-phone-pop-photo:nth-child(8) { --y: 170px; }
 .ry-phone-pop-photo:nth-child(7) { --y: 185px; }
}
@media (min-width: 768px) and (max-width: 1100px) {
 .ry-phone-pop-photo:nth-child(n+6) { --y: 270px; }
}
@media (min-width: 480px) and (max-width: 767px) {
 .ry-phone-pop-stage { height: calc(45vw + 334px); }
 .ry-phone-pop-photo:nth-child(-n+3) { --y: calc(-19.5vw - 100px); }
 .ry-phone-pop-photo:nth-child(n+6) { --y: calc(19.5vw + 110px); }
}

/* Decode the complete batch before one shared opacity reveal. */
.ry-phone-pop.has-photo-fade:not(.is-photo-visible) .ry-phone-pop-photo,
.ry-phone-pop.has-photo-fade:not(.is-photo-visible) .ry-phone-pop-links { opacity: 0; }
.ry-phone-pop .ry-phone-pop-layer { position: absolute; inset: 0; }
.ry-phone-pop-nav, .ry-phone-pop-nav:hover { background: var(--color-base-accent-primary); border-color: transparent; }
.ry-phone-pop-play { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 12px 18px; border: 0; border-radius: 999px; color: #231f23; background: var(--color-base-accent-primary); box-shadow: 0 4px 20px #0003; font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer; }
.ry-phone-pop-play svg { width: 16px; height: 16px; }
.ry-phone-pop-play[hidden] { display: none; }
.ry-phone-pop-play:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* Simple video control and black listing navigation. */
.ry-phone-pop-nav, .ry-phone-pop-nav:hover { background: #000; color: #fff; border-color: #000; }
.ry-phone-pop-play { width: 68px; height: 48px; min-height: 48px; padding: 0; border-radius: 12px; background: #000c; color: #fff; }
.ry-phone-pop-play:hover { background: #000; }
.ry-phone-pop-play svg { width: 26px; height: 26px; }

.ry-phone-pop-play:disabled { opacity: .6; cursor: progress; }

/* Compact visual arrows retain a larger invisible touch target. */
.ry-phone-pop-nav { width: 32px; height: 32px; min-height: 32px; padding: 0; gap: 0; border-radius: 50%; }
.ry-phone-pop-nav > span { display: none; }
.ry-phone-pop-nav::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.ry-phone-pop-nav:focus-visible { outline-color: #000; }
.ry-phone-pop .ry-phone-pop-choice[aria-pressed="true"] { border-color: #000; background: #00000008; }
.ry-phone-pop .ry-phone-pop-choice:focus-visible { outline-color: #000; }

/* css/ry-home-section-titles.css */
/* Main homepage section headings share the approved Kyra display scale. */
.ry-site-page {
  --ry-section-display-size: clamp(42px, 4.45vw, 64px);
  --ry-home-subtitle-size: 24px;
}
.ry-site-page .ry-section-heading .ry-section-title {
  --ry-title-size: var(--ry-section-display-size);
  --ry-title-line: 1.04;
  --ry-title-spacing: -.035em;
  text-wrap: balance;
}
.ry-site-page .ry-kyra-spotlight h2,
.ry-site-page #footer-preview h2 {
  font-size: var(--ry-section-display-size);
  line-height: 1.04;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.ry-site-page .ry-section-heading .ry-section-subtitle {
  --ry-subtitle-size: var(--ry-home-subtitle-size);
  --ry-subtitle-line: 1.5;
}
.ry-site-page #home .ry-hero-subtext,
.ry-site-page #pricing .headline_home-pricing .subtext_4-columns > p {
  font-size: var(--ry-home-subtitle-size);
  line-height: 1.5;
}
@media (max-width: 900px) {
  .ry-site-page { --ry-section-display-size: clamp(38px, 6.5vw, 56px); }
}
@media (max-width: 767px) {
  .ry-site-page { --ry-home-subtitle-size: 18px; }
}

/* css/ry-pricing-compact.css */
/* Offer above the plans; retain all original timer and volume state hooks. */
#pricing .headline_home-pricing > .offer_banner { width: fit-content; max-width: 100%; margin: 0 auto; justify-content: center; gap: 20px; padding: 14px 22px; }
#pricing .headline_home-pricing > .offer_banner .label-small { font-size: 14px; line-height: 1.5; }
#pricing .headline_home-pricing > .offer_banner .offer_timer { flex: none; }
@media (min-width: 992px) {
 #pricing-plans > .card_plan > .card-plan_top-tile { padding: 20px 24px; gap: 12px; }
 #pricing-plans > .card_plan > .card-plan_bottom-tile { padding: 20px 24px; gap: 16px; }
 #pricing-plans .card-plan_top-tile:not([data-plan-tile]) { gap: 12px; }
 #pricing-plans .plan_list { gap: 16px; }
 #pricing-plans .pricing_trust { gap: 12px; }
 #pricing-plans .volume_control { gap: 10px; }
}
@media (max-width: 767px) {
 #pricing .headline_home-pricing > .offer_banner { flex-direction: column; gap: 8px; padding: 14px 18px; }
}

/* css/ry-hero-testimonial-proof.css */
/* Hero social proof: existing customer portraits and delivered-listing count. */
.ry-hero-testimonial-proof{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:18px auto 0;color:#737373;font-size:14px;line-height:1.45}.ry-hero-testimonial-stack{display:inline-flex;align-items:center;flex:none;padding-left:0}.ry-hero-testimonial-avatar{display:block;position:relative;width:36px;height:36px;flex:0 0 36px;border:2px solid #fff;border-radius:50%;overflow:hidden;background:#eeece8}.ry-hero-testimonial-avatar+.ry-hero-testimonial-avatar{margin-left:-12px}.ry-hero-testimonial-avatar img{display:block;width:100%;height:100%;object-fit:cover}.ry-hero-testimonial-avatar:first-child{z-index:5}.ry-hero-testimonial-avatar:nth-child(2){z-index:4}.ry-hero-testimonial-avatar:nth-child(3){z-index:3}.ry-hero-testimonial-avatar:nth-child(4){z-index:2}.ry-hero-testimonial-avatar:nth-child(5){z-index:1}.ry-hero-testimonial-avatar--jess img{transform:scale(1.2);transform-origin:50% 35%}.ry-hero-testimonial-avatar--kyra img{transform:scale(2);transform-origin:50% 0}.ry-hero-testimonial-avatar--joseph img{transform:scale(1.6);transform-origin:50% 0}.ry-hero-testimonial-avatar--sweeta img{object-position:50% 40%}.ry-hero-testimonial-avatar--sebastian img{transform:scale(2.6);transform-origin:42% 50%}.ry-hero-testimonial-proof strong{color:#535353;font-weight:550}@media(max-width:720px){.ry-hero-testimonial-proof{flex-direction:column;gap:8px;font-size:13px;max-width:100%;text-align:center}}

/* css/ry-pricing-single-cta.css */
/* One pricing CTA with monthly total and cancellation note. */
#pricing [data-plan-tile] .ry-pricing-monthly { font-size: 20px; line-height: 1.45; }
#pricing .ry-pricing-monthly strong { font-weight: 550; }
#pricing-plans .button-group_home-a { flex-direction: column; align-items: flex-start; gap: 10px; width: fit-content; max-width: 100%; }
#pricing [data-cta] { max-width: 100%; }
#pricing .ry-pricing-cancel-note { width: 100%; max-width: 100%; text-align: center; font-size: 13px; line-height: 1.4; }
@media (max-width: 767px) { #pricing [data-plan-tile] .ry-pricing-monthly { font-size: 18px; } }

/* Larger price text; preserve original price and CTA alignment. */
#pricing [data-plan-tile] .plan_price h2 { font-size: 56px; line-height: 1.04; }
#pricing [data-plan-tile] .plan_price h2.is-custom { font-size: 40px; }
#pricing [data-plan-tile] .ry-pricing-monthly { font-size: 24px; min-block-size: 58px; }
#pricing [data-plan-tile].max .ry-pricing-monthly { font-size: 20px; }
@media (max-width: 991px) {
 #pricing [data-plan-tile] .plan_price h2 { font-size: 44px; }
 #pricing [data-plan-tile] .plan_price h2.is-custom { font-size: 34px; }
}
@media (max-width: 767px) {
 #pricing [data-plan-tile] .ry-pricing-monthly { font-size: 20px; min-block-size: 78.3px; }
 #pricing [data-plan-tile].max .ry-pricing-monthly { font-size: 18px; }
}

/* css/ry-duel-aligned.css */
/* One action for both sides of the comparison. */
#duel .ry-work-duel-cta { display: flex; justify-content: center; align-items: center; margin: 28px auto 0; padding: 0 20px; max-width: 1200px; }
@media (min-width: 768px) {
 #duel .ry-work-duel-grid { grid-template-rows: auto auto repeat(8, auto); row-gap: 0; align-items: stretch; }
 #duel .ry-work-duel-card { display: grid; grid-row: 1 / span 10; grid-template-rows: subgrid; }
 #duel .ry-work-duel-card:first-of-type { grid-column: 1; }
 #duel .ry-work-duel-card:last-of-type { grid-column: 2; }
 #duel .ry-work-duel-list { display: grid; grid-row: 3 / span 8; grid-template-rows: subgrid; row-gap: 0; padding-bottom: 12px; }
 #duel .ry-work-duel-list > li { padding-bottom: 20px; }
}

/* css/ry-whatsapp-funnel.css */
/* Only the homepage sample handoff and its destination note. */
.ry-whatsapp-next { display: block; margin-top: 4px; font: inherit; }
.ry-whatsapp-details-link { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#ry-whatsapp-handoff .ry-overlays-card { display: grid; gap: var(--spacing--16); max-width: 560px; }
#ry-whatsapp-handoff h2 { padding-right: 40px; }
#ry-whatsapp-handoff :is(h2,p) { margin: 0; }
#ry-whatsapp-handoff .ry-wa-links { display: flex; flex-wrap: wrap; gap: 12px 24px; }
#ry-whatsapp-handoff .ry-wa-links a { text-decoration: underline; text-underline-offset: 3px; }
#ry-whatsapp-handoff [data-wa-call] { text-decoration: underline; text-underline-offset: 3px; }
#ry-whatsapp-handoff .ry-wa-notice { font-size: 12px; line-height: 1.55; }
#ry-whatsapp-handoff .ry-wa-notice a { text-decoration: underline; }
#ry-whatsapp-handoff [data-wa-continue] { width: 100%; }
[data-wa-handoff-open] .ry-overlays-fab { display: none !important; }
@media (max-width: 767px) {
  #ry-whatsapp-handoff { padding: 16px; }
  #ry-whatsapp-handoff .ry-overlays-card { padding: 24px 20px; }
}

/* css/ry-easy-stories.css */
.ry-easy-stories { background:var(--color-base-base-light-100); color:var(--color-base-base-dark-100); scroll-margin-top:120px; }
.ry-easy-stories .ry-es-shell { max-width:1180px; margin-inline:auto; }
.ry-easy-stories .ry-es-grid { display:grid; grid-template-columns:288px 96px minmax(0,1fr); max-width:1000px; margin-inline:auto; gap:0; align-items:start; }
.ry-easy-stories .ry-es-story-column { min-width:0; }
.ry-easy-stories .ry-es-caption { margin:0 0 24px; color:var(--color-base-base-dark-100); font-family:var(--typography-font-family-b1); font-size:var(--ry-home-subtitle-size,24px); line-height:1.5; font-weight:var(--typography-font-weight-b1,400); letter-spacing:normal; text-align:center; }
.ry-easy-stories .ry-es-connector { align-self:center; padding-top:60px; width:100%; display:grid; place-items:center; color:var(--color-base-base-dark-48); pointer-events:none; }
.ry-easy-stories .ry-es-connector svg { display:block; width:80px; max-width:100%; height:auto; }
.ry-easy-stories .ry-es-film { display:flex; justify-content:center; min-width:0; }
.ry-easy-stories .ry-es-player { position:relative; isolation:isolate; width:288px; max-width:100%; aspect-ratio:9/16; border-radius:28px; overflow:hidden; background:var(--color-base-base-dark-100); box-shadow:0 24px 64px -32px #231f2359; outline:none; color:#fff; -webkit-user-select:none; user-select:none; }
.ry-easy-stories .ry-es-video,.ry-easy-stories .ry-es-preview { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; margin:0; }
.ry-easy-stories .ry-es-video { opacity:0; transition:opacity .25s ease; }
.ry-easy-stories .ry-es-video.is-active { opacity:1; }
.ry-easy-stories .ry-es-preview { z-index:1; }
.ry-easy-stories .ry-es-top-shade { position:absolute; inset:0 0 auto; height:116px; z-index:2; background:linear-gradient(#0009,transparent); pointer-events:none; }
.ry-easy-stories .ry-es-progress { position:absolute; top:12px; left:12px; right:12px; display:flex; gap:5px; z-index:6; pointer-events:none; }
.ry-easy-stories .ry-es-progress>span { height:2px; flex:1; overflow:hidden; border-radius:999px; background:#ffffff59; }
.ry-easy-stories .ry-es-progress i { display:block; width:100%; height:100%; background:#fff; transform:scaleX(0); transform-origin:left; }
.ry-easy-stories .ry-es-person { position:absolute; top:24px; left:14px; right:14px; z-index:6; display:flex; gap:8px; align-items:center; color:#fff; font-size:13px; font-weight:600; pointer-events:none; }
.ry-easy-stories .ry-es-person img { width:28px; height:28px; border-radius:50%; object-fit:cover; }
.ry-easy-stories .ry-es-count { margin-left:auto; font-size:11px; opacity:.8; font-weight:400; }
.ry-easy-stories .ry-es-player button { font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:pan-y; }
.ry-easy-stories .ry-es-start { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:14px; width:100%; border:0; padding:0; background:linear-gradient(transparent 45%,#0005); color:#fff; }
.ry-easy-stories .ry-es-start>svg { width:64px; height:64px; padding:20px; border:1px solid #fff9; border-radius:50%; background:#ffffffd9; color:var(--color-base-base-dark-100); box-shadow:0 4px 24px #0002; }
.ry-easy-stories .ry-es-start>span { border-radius:99px; padding:7px 12px; background:#231f23b8; font-size:12px; font-weight:500; }
.ry-easy-stories .ry-es-zone { position:absolute; top:60px; bottom:62px; z-index:4; width:50%; border:0; padding:0; background:transparent; display:flex; align-items:center; }
.ry-easy-stories .ry-es-prev { left:0; justify-content:flex-start; padding-left:8px; }
.ry-easy-stories .ry-es-next { right:0; justify-content:flex-end; padding-right:8px; }
.ry-easy-stories .ry-es-arrow { display:grid; place-items:center; width:28px; height:28px; background:#231f235e; border:1px solid #ffffff45; border-radius:50%; }
.ry-easy-stories .ry-es-arrow svg { width:16px; height:16px; }
.ry-easy-stories .ry-es-zone:disabled { cursor:default; }
.ry-easy-stories .ry-es-zone:disabled .ry-es-arrow { opacity:.25; }
.ry-easy-stories .ry-es-controls { position:absolute; bottom:12px; left:12px; right:12px; z-index:6; display:flex; justify-content:space-between; }
.ry-easy-stories .ry-es-controls button,.ry-easy-stories .ry-es-preview-toggle { display:grid; place-items:center; width:36px; height:36px; padding:9px; border:1px solid #ffffff59; border-radius:50%; background:#231f239c; }
.ry-easy-stories .ry-es-controls svg,.ry-easy-stories .ry-es-preview-toggle svg { width:100%; height:100%; }
.ry-easy-stories .ry-es-preview-toggle { position:absolute; z-index:7; bottom:12px; right:12px; }
.ry-easy-stories .ry-es-loading { position:absolute; z-index:5; left:50%; top:50%; transform:translate(-50%,-50%); padding:8px 12px; border-radius:99px; background:#231f23b8; font-size:12px; pointer-events:none; }
.ry-easy-stories .ry-es-end { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:24px; background:#171518d9; text-align:center; }
.ry-easy-stories .ry-es-end p { margin:0; color:#fff; font-size:14px; line-height:1.5; }
.ry-easy-stories .ry-es-end button { display:flex; align-items:center; gap:10px; padding:12px 20px; border:1px solid #ffffff80; border-radius:99px; background:#fff; color:var(--color-base-base-dark-100); font-size:14px; font-weight:600; }
.ry-easy-stories .ry-es-end svg { width:20px; height:20px; }
.ry-easy-stories .ry-es-end a { color:#fff; font-size:13px; text-decoration:underline; }
.ry-easy-stories .ry-es-player:focus-visible { outline:2px solid var(--color-base-accent-primary); outline-offset:4px; }
.ry-easy-stories .ry-es-player button:focus-visible { outline:2px solid #fff; outline-offset:-4px; }
.ry-easy-stories .ry-es-result { min-width:0; }
.ry-easy-stories .ry-es-result-images { position:relative; height:512px; overflow:hidden; border-radius:28px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:minmax(0,1fr) 30%; gap:4px; background:var(--color-base-base-dark-8); }
.ry-easy-stories .ry-es-gallery-trigger { position:relative; min-width:0; min-height:0; display:block; overflow:hidden; color:#fff; text-decoration:none; }
.ry-easy-stories .ry-es-result-images img { display:block; width:100%; height:100%; object-fit:cover; transition:opacity .2s ease; }
.ry-easy-stories .ry-es-gallery-trigger:first-child { grid-column:1/-1; }
.ry-easy-stories .ry-es-gallery-trigger:hover img { opacity:.9; }
.ry-easy-stories .ry-es-gallery-trigger:focus-visible { outline:3px solid var(--color-base-accent-primary); outline-offset:-3px; }
.ry-easy-stories .ry-es-more-photos { position:absolute; inset:0; display:grid; place-items:center; background:#17151899; color:#fff; font-size:18px; font-weight:600; text-align:center; padding:6px; pointer-events:none; }
.ry-easy-stories .ry-es-view-photos { position:absolute; right:16px; bottom:16px; display:flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid #231f2314; border-radius:99px; background:#fffffff0; color:var(--color-base-base-dark-100); font-size:13px; line-height:18px; font-weight:600; box-shadow:0 2px 8px #0002; pointer-events:none; }
.ry-easy-stories .ry-es-view-photos svg { width:17px; height:17px; flex:none; }
.ry-easy-stories .ry-es-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@media(min-width:901px) and (max-width:1100px) { .ry-easy-stories .ry-es-grid { grid-template-columns:288px 64px minmax(0,1fr); } }
@media(max-width:900px) { .ry-easy-stories .ry-es-grid { grid-template-columns:minmax(0,1fr); gap:24px; max-width:600px; margin-inline:auto; } .ry-easy-stories .ry-es-player { width:260px; } .ry-easy-stories .ry-es-result-images { height:auto; aspect-ratio:4/3; } .ry-easy-stories .ry-es-connector { justify-self:center; width:44px; height:64px; padding:0; } .ry-easy-stories .ry-es-connector svg { width:64px; max-width:none; transform:rotate(90deg); } }
@media(max-width:767px) { .ry-easy-stories .ry-es-more-photos { font-size:14px; } .ry-easy-stories .ry-es-caption { margin-bottom:20px; } .ry-easy-stories .ry-es-view-photos { right:12px; bottom:12px; padding:8px 11px; font-size:12px; } }
@media(prefers-reduced-motion:reduce) { .ry-easy-stories .ry-es-video { transition:none; } }

/* Full photos exist only inside this dialog after a preview is clicked. */
.ry-es-gallery { position:fixed; inset:0; width:100vw; height:100vh; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; border-radius:0; background:#101010; color:#fff; font-family:var(--typography-font-family-b1),sans-serif; overflow:hidden; }
.ry-es-gallery[open] { display:flex; flex-direction:column; }
.ry-es-gallery::backdrop { background:#000d; }
.ry-es-gallery-header { flex:none; height:68px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; padding:12px 24px; }
.ry-es-gallery-header h2 { margin:0; color:#fff; font:500 16px/1.4 var(--typography-font-family-b1),sans-serif; }
.ry-es-gallery-counter { font-size:14px; color:#fffc; font-variant-numeric:tabular-nums; }
.ry-es-gallery button { color:inherit; font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ry-es-gallery-close { justify-self:end; width:40px; height:40px; border:1px solid #fff4; border-radius:50%; background:#ffffff0d; padding:9px; }
.ry-es-gallery-close svg { display:block; width:100%; height:100%; }
.ry-es-gallery-stage { position:relative; flex:1; min-height:0; margin:0 72px; display:grid; place-items:center; touch-action:pan-y pinch-zoom; }
.ry-es-gallery-stage>img { width:100%; height:100%; min-height:0; object-fit:contain; opacity:0; user-select:none; -webkit-user-select:none; }
.ry-es-gallery-stage>img.is-loaded { opacity:1; }
.ry-es-gallery-nav { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; display:grid; place-items:center; padding:10px; border:1px solid #fff5; border-radius:50%; background:#252525cc; }
.ry-es-gallery-nav.is-prev { left:-56px; }
.ry-es-gallery-nav.is-next { right:-56px; }
.ry-es-gallery-nav svg { width:100%; height:100%; }
.ry-es-gallery-nav:disabled { opacity:.25; cursor:default; }
.ry-es-gallery-message { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; font-size:14px; color:#fffb; }
.ry-es-gallery-message p { margin:0 0 12px; }
.ry-es-gallery-message button { padding:8px 14px; border:1px solid #fff8; border-radius:8px; background:#ffffff14; }
.ry-es-gallery-thumbnails { flex:none; height:88px; display:flex; gap:8px; overflow-x:auto; padding:14px 24px; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#777 transparent; }
.ry-es-gallery-thumbnails button { flex:none; width:76px; height:57px; padding:0; border:2px solid transparent; border-radius:6px; overflow:hidden; opacity:.55; background:#242424; }
.ry-es-gallery-thumbnails button[aria-current="true"] { opacity:1; border-color:#fff; }
.ry-es-gallery-thumbnails img { display:block; width:100%; height:100%; object-fit:cover; }
.ry-es-gallery button:focus-visible { outline:2px solid #fff; outline-offset:3px; }
@media(max-width:767px) { .ry-es-gallery-header { height:60px; padding:10px 14px; gap:8px; } .ry-es-gallery-header h2 { font-size:14px; } .ry-es-gallery-stage { margin:0 8px; } .ry-es-gallery-nav.is-prev { left:4px; } .ry-es-gallery-nav.is-next { right:4px; } .ry-es-gallery-thumbnails { height:82px; padding:12px 14px; } }

/* css/ry-responsive-refinements.css */
/* One continuous title scale; avoid a font-size jump at the tablet breakpoint. */
.ry-site-page { --ry-section-display-size: clamp(38px, calc(24px + 2.777778vw), 64px); }
/* Let heading containers grow along with their type, instead of wrapping sooner. */
#reviews .headline_home-testimonials { width: 100%; max-width: min(100%, 840px); }
#footer-preview .ry-mf-close h2 { max-width: 100%; }
@media (min-width: 901px) {
 #kyra-spotlight .ry-ks-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
}
@media (min-width: 768px) and (max-width: 991px) {
 #case-studies-section .container-large { max-width: 100%; }
}
/* The FAQ heading sizes to its actual column when the layout splits in two. */
@media (min-width: 992px) {
 #faq .headline_faq-left { container-type: inline-size; }
 #faq .headline_faq-left .ry-section-title { --ry-title-size: clamp(38px, 10cqi, var(--ry-section-display-size)); }
}

/* The current two-line hero fits at the largest approved title size. */
.ry-site-page #home .ry-float-content { width: min(100%, 1120px); }

/* css/ry-pricing-first-month.css */
/* First-month and renewal amounts share the selected volume. */
#pricing [data-plan-tile]:not(.max) .plan_price { flex-wrap: wrap; column-gap: 12px; row-gap: 6px; }
#pricing [data-plan-tile] [data-price-note] { max-width: 175px; }
#pricing [data-plan-tile] .plan_price h2 { white-space: nowrap; }
#pricing .ry-volume-summary > span { display: block; }
#pricing [data-plan-tile] .ry-pricing-monthly { font-size: 20px; }
@media (max-width: 767px) { #pricing [data-plan-tile] .ry-pricing-monthly { font-size: 18px; } }

/* css/ry-mobile-showcase-20260914.css */
/* Mobile refinements, 14 September 2026. Phones only; tablet and desktop keep their current layout. */

.ry-pp-strip-arrow { display: none; }
.ry-mobile-break { display: none; }

@media (max-width: 767px) {
  /* Listing thumbnails: larger tiles in a strip that scrolls with plain arrows. */
  .ry-phone-pop .ry-phone-pop-picker-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    padding-inline: 6px;
  }
  .ry-phone-pop .ry-phone-pop-picker {
    order: 2;
    flex: 1 1 0%;
    min-width: 0;
    justify-content: flex-start;
    gap: 6px;
    padding: 3px 2px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ry-phone-pop .ry-phone-pop-picker::-webkit-scrollbar { width: 0; height: 0; }
  .ry-phone-pop .ry-phone-pop-choice { flex: 0 0 76px; padding: 2px; }
  .ry-phone-pop .ry-phone-pop-selection-status { order: 4; flex: 0 0 100%; }

  .ry-phone-pop .ry-phone-pop-picker-wrap:not(.has-strip-scroll) .ry-phone-pop-picker { justify-content: center; }
  .ry-phone-pop .ry-phone-pop-picker-wrap.has-strip-scroll .ry-pp-strip-arrow { display: inline-flex; }
  .ry-phone-pop .ry-pp-strip-arrow {
    align-items: center;
    justify-content: center;
    flex: none;
    width: 20px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: #231f23;
    cursor: pointer;
  }
  .ry-phone-pop .ry-pp-strip-prev { order: 1; }
  .ry-phone-pop .ry-pp-strip-next { order: 3; }
  .ry-phone-pop .ry-pp-strip-arrow svg { width: 15px; height: 15px; }
  .ry-phone-pop .ry-pp-strip-arrow:disabled { opacity: .22; cursor: default; }
  .ry-phone-pop .ry-pp-strip-arrow:focus-visible { outline: 2px solid #000; outline-offset: 2px; border-radius: 4px; }

  /* Listing arrows move from under the phone to its left and right sides. */
  .ry-phone-pop-nav {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    min-height: 28px;
  }
  .ry-phone-pop-prev { right: calc(100% + 3px); left: auto; }
  .ry-phone-pop-next { left: calc(100% + 3px); right: auto; }
  .ry-phone-pop-nav svg { width: 13px; height: 13px; }

  /* Smallest phones: keep the invisible touch pad inside the viewport. */
  @media (max-width: 360px) {
    .ry-phone-pop-nav::after { inset: -6px -3px; }
  }

  /* Slightly larger finished listing photos. */
  .ry-phone-pop-photo { width: 29vw; max-width: 172px; }

  /* Kyra story points read from the left while the rest stays centred. */
  #kyra-spotlight .ry-ks-story-list {
    text-align: left;
    list-style-position: outside;
    padding-inline-start: 1.2em;
  }
  #kyra-spotlight .ry-ks-story-list > li { padding-inline-start: .25em; }
}

@media (max-width: 767px) {
  /* Line breaks that only apply on phones. */
  .ry-mobile-break { display: inline; }

  /* Built for: keeps the note beside it, centred above the platform names. */
  .ry-steps-built-inner { justify-content: center; }
  .ry-steps-built-label {
    flex: 0 1 auto;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    text-align: center;
  }
}

/* css/ry-a11y-20260914.css */
/* Accessibility fixes, 14 September 2026. Nothing here changes the visible design. */

/* Skip link: invisible until a keyboard user tabs to it. */
.ry-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 0 0 10px 0;
  background: #231f23;
  color: #f7f6f5;
  font: inherit;
  font-size: 14px;
  text-decoration: none;
}
.ry-skip-link:focus {
  left: 0;
  outline: 2px solid #c5ef57;
  outline-offset: 2px;
}

/* Moving text must be stoppable: the review rows pause while hovered or focused. */
.ry-motion-reviews:hover,
.ry-motion-reviews:focus-within,
.wrap_marquee-testimonials:hover .ry-motion-reviews,
.wrap_marquee-testimonials:focus-within .ry-motion-reviews {
  animation-play-state: paused;
}

/* Safari ignores -webkit-line-clamp on a <button>, so the three-line testimonial quotes
   rendered in full and pushed every card open on iPhone. The clamp moves to a span inside
   the button, which both engines honour. Measured 54px WebKit, 55px Chrome. */
.ry-vt-quote { display: block; overflow: hidden; }
.ry-vt-quote .ry-vt-quote-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* css/ry-home-mobile-20260915.css */
/* Homepage refinements for the owner's 15 September 2026 batch.
   Loaded only by index.html, hero-floating.html and hero-footer.html, and only after the last
   bundle, so every rule here is the last word on the property it sets. */

/* 1. Pre-hero pill: a little transparency so the hero collage reads through it. Phones only.
      color-mix keeps the site token instead of freezing today's value; a browser without it keeps
      the opaque background that is there now. */
@media (max-width: 767px) {
  .ry-float-content .ry-hero-pretitle.ry-pretitle-pill {
    background: color-mix(in srgb, var(--color-tokens-background-depth) 85%, transparent);
  }
}

/* 2. Hero CTA: phones read "Get my free listing", every other width keeps "Get free photos".
      display:none also keeps the hidden one out of the accessibility tree, so a screen reader
      hears exactly one label. The header CTA is a different button and is not selected here. */
.ry-hero-cta .ry-cta-label-phone { display: none; }
@media (max-width: 767px) {
  .ry-hero-cta .ry-cta-label-wide { display: none; }
  .ry-hero-cta .ry-cta-label-phone { display: inline; }
}

/* 5. iPad only: the listing arrows go back beside the phone, where desktop already puts them.
      css/ry-phone-pop.css drops them under it for everything below 1100px; phones override that
      themselves, tablets never did. Restored for 768-1024px, the widths the owner named. */
@media (min-width: 768px) and (max-width: 1024px) {
  .ry-phone-pop-nav { top: 50%; bottom: auto; transform: translateY(-50%); }
  .ry-phone-pop-prev { right: calc(100% + 12px); left: auto; }
  .ry-phone-pop-next { left: calc(100% + 12px); right: auto; }
}

/* 7. Closing band heading on phones: "getting more deals?" stays whole on its own line.
      The 32px is the size css/ry-mitra-footer.css already sets for this heading under 767px, and
      which .ry-site-page #footer-preview h2 had been overriding to 38px. */
@media (max-width: 767px) {
  #footer-preview .ry-mf-close h2 { font-size: 32px; }
  #footer-preview .ry-mf-close h2 .ry-phone-nowrap { white-space: nowrap; }
}

/* 8a. Step numbers on the card grid, which is what #three-steps renders up to 900px: the dark chip
       goes, the number grows 1.8x and turns white over the step photo. The photos are ordinary
       property shots, so a soft shadow carries the number over a light corner; where the photo is
       already dark it costs nothing. */
#three-steps .ry-steps-number {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #fff;
  font-size: 22px;
  line-height: 1.1;
  text-shadow: 0 1px 8px #0000008c;
}
@media (max-width: 767px) {
  #three-steps .ry-steps-number { font-size: 18px; }
}

/* 8b. From 901px the card grid is hidden and the scrollytelling steps take over. Their number is
       already chipless, but it is 12px and it sits on the page, not on a photo, so it only grows
       by the same 1.8x. It is deliberately not turned white: the page behind it is #f7f6f5. */
@media (min-width: 901px) {
  #three-steps .ry-how-step > .label-large { font-size: 22px; line-height: 1.1; }
}

/* 3. "A photoshoot, from a phone video." goes back on the shared title ladder between 768 and
      1100px, where css/ry-phone-pop.css gives it a clamp of its own and drops it to 34px against
      the 45px of "An AED 3.3M rental. From one phone video." This is not a chosen size: it is the
      declaration `.ry-site-page .ry-section-heading .ry-section-title` already makes, resolving to
      --ry-section-display-size, which is the token the other heading reads. Phones never saw the
      clamp and do not see this; above 1100 the clamp stops and both were already equal. */
@media (min-width: 768px) and (max-width: 1100px) {
  #showcase-phone-pop .ry-section-title { font-size: var(--ry-title-size, var(--typography-size-h2)); }
}

/* css/ry-home-mobile-20260916.css */
/* Owner's phones-only homepage batch, 16 September 2026.
   Loaded only by index.html, hero-floating.html and hero-footer.html, right after
   css/ry-home-mobile-20260915.css. Every rule is inside a phone media query, so tablet and
   desktop are untouched. See patch_home_mobile_20260916.py for what each letter refers to. */

/* A. The floating WhatsApp button is hidden on phones. js/ry-overlays.js only toggles the
      `hidden` attribute, so there is no inline display to fight, and this sits later in the
      cascade than `.ry-overlays-fab { display: grid }` in css/ry-overlays.css at the same
      specificity. The sticky phone CTA bar and the in-page WhatsApp buttons are untouched. */
@media (max-width: 767px) {
  .ry-overlays-fab { display: none; }
}

/* B. The paid-listing clock sentence in step 3, wrapped in the HTML so it can be dropped on
      phones only. The class does nothing at any other width. */
@media (max-width: 767px) {
  .ry-phone-hide { display: none; }
}

/* C. Review rows on phones: keep vertical page scrolling native while horizontal moves reach the
      pointer handlers in js/ry-home-mobile-20260916.js, which owns the rows at this width. */
@media (max-width: 767px) {
  #reviews .wrap_marquee-testimonials { touch-action: pan-y; }
}

/* F. Kyra's quote card goes above the CTA on phones and gets compact. Written with the
      #kyra-spotlight id because the rules it has to beat are id-qualified too. The story list is
      given margin-inline: 0 because the inherited `margin-inline: auto` would shrink-wrap it once
      its parent becomes a flex column, losing the full-width left-aligned bullets. */
@media (max-width: 767px) {
  #kyra-spotlight .ry-ks-copy { display: flex; flex-direction: column; }
  #kyra-spotlight .ry-ks-story-list { order: 0; margin-inline: 0; }
  /* A flex item is its own formatting context, so the last bullet's 12px bottom margin stops
     collapsing out of the list and the gap under it would grow by exactly that. Measured 264px
     tall before and 276px after without this line; with it the list is 264px again. */
  #kyra-spotlight .ry-ks-story-list > li:last-child { margin-bottom: 0; }
  #kyra-spotlight .ry-ks-quote {
    order: 1;
    margin: 0 0 20px;
    padding: 12px 14px;
    max-width: 100%;
    border-radius: 12px;
  }
  #kyra-spotlight .ry-ks-actions { order: 2; }
  #kyra-spotlight .ry-ks-quote blockquote { font-size: 14px; line-height: 1.4; }
  #kyra-spotlight .ry-ks-quote figcaption { gap: 8px; margin-top: 8px; }
  #kyra-spotlight .ry-ks-quote figcaption img { width: 28px; height: 28px; }
  #kyra-spotlight .ry-ks-quote figcaption > div {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  #kyra-spotlight .ry-ks-quote strong { display: inline; }
  #kyra-spotlight .ry-ks-quote .ry-ks-stars {
    display: inline;
    margin: 0;
    font-size: 12px;
  }
}

/* inline <style> kept in place */
.ry-float-hero[data-js] .ry-float-fallback{display:none}

/* inline <style> kept in place */
@media (min-width:768px){html.ry-boot body{opacity:0}}body{transition:opacity .15s ease-out}

/* css/ry-selected-glass-20260915.css */
/* Owner-selected transparent illustrations. Demo-only release, 15 Sep 2026. */
#three-steps .ry-steps-visual,
#three-steps .ry-how-stage {
  background: transparent;
  border: 0;
  box-shadow: none;
}
#three-steps .ry-steps-visual > img,
#three-steps .ry-how-panel > img {
  object-fit: contain;
}
#three-steps .ry-steps-number {
  color: #231f23;
}
#app-preview .ry-app-feature-visual {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
#app-preview .ry-selected-feature-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* css/ry-card-gradients-20260915.css */
/* uiGradients palettes, adapted with Ryselist ivory/charcoal overlays.
 * Source: https://github.com/ghosh/uiGradients
 * Copyright (c) 2017 Indrashish Ghosh, MIT.
 * License: /licenses/uigradients.txt
 */
#three-steps,
#app-preview {
  --ry-gradient-sage: radial-gradient(ellipse at 18% 14%, #f7f6f5cc, transparent 65%), linear-gradient(135deg, #f7f8f8 0%, #acbb78 100%);
  --ry-gradient-moss: radial-gradient(ellipse at 82% 88%, #c5ef5738, transparent 62%), linear-gradient(140deg, #231f237a, #231f2300), linear-gradient(135deg, #134e5e, #71b280);
  --ry-gradient-lush: radial-gradient(ellipse at 18% 14%, #f7f6f5db, transparent 72%), linear-gradient(145deg, #56ab2f, #a8e063);
  --ry-gradient-olive: linear-gradient(120deg, #f7f6f5c9, #f7f6f526), linear-gradient(135deg, #3ca55c, #b5ac49);
  --ry-gradient-forest: radial-gradient(ellipse at 85% 20%, #c5ef5729, transparent 64%), linear-gradient(120deg, #231f23d9, #231f2352), linear-gradient(135deg, #134e5e, #71b280);
}
#three-steps .ry-steps-visual,
#three-steps .ry-how-panel,
#app-preview .ry-app-feature-visual {
  background-image: var(--ry-card-gradient);
  background-color: #e6e9da;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-general-large, 20px);
  box-shadow: inset 0 0 0 1px #ffffff24;
  overflow: hidden;
}
#three-steps .ry-steps-card:nth-child(1) .ry-steps-visual,
#three-steps .ry-how-panel[data-how-panel="0"] { --ry-card-gradient: var(--ry-gradient-sage); }
#three-steps .ry-steps-card:nth-child(2) .ry-steps-visual,
#three-steps .ry-how-panel[data-how-panel="1"] { --ry-card-gradient: var(--ry-gradient-moss); }
#three-steps .ry-steps-card:nth-child(3) .ry-steps-visual,
#three-steps .ry-how-panel[data-how-panel="2"] { --ry-card-gradient: var(--ry-gradient-lush); }
#three-steps .ry-steps-card:nth-child(2) .ry-steps-number { color: #f7f6f5; }
#app-preview .ry-app-feature--submit .ry-app-feature-visual { --ry-card-gradient: var(--ry-gradient-moss); }
#app-preview .ry-app-feature--floor .ry-app-feature-visual { --ry-card-gradient: var(--ry-gradient-sage); }
#app-preview .ry-app-feature--copy .ry-app-feature-visual { --ry-card-gradient: var(--ry-gradient-olive); }
#app-preview .ry-app-feature--wide .ry-app-feature-visual { --ry-card-gradient: var(--ry-gradient-forest); }
#app-preview .ry-app-feature--whatsapp .ry-app-feature-visual { --ry-card-gradient: var(--ry-gradient-lush); }

/* css/ry-mixed-premium-gradients-20260916.css */
/* Approved custom premium gradients. Varied across the eight illustration cards. */
#three-steps,#app-preview{--ry-mesh-forest:radial-gradient(ellipse at 78% 5%,#adbc8552 0%,transparent 44%),radial-gradient(ellipse at 22% 98%,#467763 0%,#25443b 35%,transparent 70%),radial-gradient(ellipse at 78% 85%,#55734c70,transparent 55%),#121f1b;--ry-mesh-ivory:radial-gradient(ellipse at 100% 0%,#ffffff 0%,#fffffb90 30%,transparent 65%),radial-gradient(ellipse at 0% 85%,#a0a87b 0%,#bec4a370 32%,transparent 63%),radial-gradient(ellipse at 65% 100%,#d4bf97 0%,transparent 70%),#e9e6dc;--ry-mesh-graphite:radial-gradient(ellipse 100% 28% at 50% 110%,#c7e783a8 0%,#6b825847 45%,transparent 75%),radial-gradient(ellipse at 25% -30%,#706c7b90,transparent 70%),radial-gradient(ellipse at 95% 50%,#35423870,transparent 60%),#19191d;--ry-mesh-sage:radial-gradient(ellipse at 68% 5%,#fffbe8 0%,#ebe8cfb0 22%,transparent 63%),radial-gradient(ellipse at 12% 78%,#426559 0%,#769785 32%,transparent 72%),radial-gradient(ellipse at 110% 100%,#8d9c64,transparent 65%),#a9b9a1;--ry-mesh-olive:radial-gradient(ellipse at 110% 0%,#cebc7e 0%,#94875e75 34%,transparent 67%),radial-gradient(ellipse at 2% 100%,#566b43 0%,transparent 55%),radial-gradient(ellipse at 62% 120%,#7f805854,transparent 65%),#252b22;--ry-mesh-ribbon:radial-gradient(ellipse 130% 90% at 95% -10%,transparent 50%,#b8c78c6b 56%,#63846d8c 66%,transparent 79%),radial-gradient(ellipse at 0% 100%,#73967b 0%,#34564a 37%,transparent 70%),#152b25;}

#three-steps .ry-steps-visual,#three-steps .ry-how-panel,#app-preview .ry-app-feature-visual{
 background:var(--ry-mixed-gradient);isolation:isolate;
}
#three-steps .ry-steps-visual::before,#three-steps .ry-how-panel::before,#app-preview .ry-app-feature-visual::before{
 content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:url('/images/ry/premium-gradients-20260916/grain.svg') repeat;opacity:.12;mix-blend-mode:soft-light;border-radius:inherit;
}
#three-steps .ry-steps-visual>img,#three-steps .ry-how-panel>img,#app-preview .ry-selected-feature-art{position:relative;z-index:1}
#three-steps .ry-steps-number{z-index:2}
#three-steps .ry-steps-card:nth-child(1) .ry-steps-visual,#three-steps .ry-how-panel[data-how-panel="0"]{--ry-mixed-gradient:var(--ry-mesh-ivory)}
#three-steps .ry-steps-card:nth-child(2) .ry-steps-visual,#three-steps .ry-how-panel[data-how-panel="1"]{--ry-mixed-gradient:var(--ry-mesh-forest)}
#three-steps .ry-steps-card:nth-child(3) .ry-steps-visual,#three-steps .ry-how-panel[data-how-panel="2"]{--ry-mixed-gradient:var(--ry-mesh-graphite)}
#three-steps .ry-steps-card:nth-child(1) .ry-steps-number{color:#231f23}
#three-steps .ry-steps-card:nth-child(2) .ry-steps-number,#three-steps .ry-steps-card:nth-child(3) .ry-steps-number{color:#f7f6f5}
#app-preview .ry-app-feature--submit .ry-app-feature-visual{--ry-mixed-gradient:var(--ry-mesh-ribbon)}
#app-preview .ry-app-feature--floor .ry-app-feature-visual{--ry-mixed-gradient:var(--ry-mesh-sage)}
#app-preview .ry-app-feature--copy .ry-app-feature-visual{--ry-mixed-gradient:var(--ry-mesh-olive)}
#app-preview .ry-app-feature--wide .ry-app-feature-visual{
 --ry-mixed-gradient:radial-gradient(ellipse at 95% 100%,#adbc8563,transparent 47%),radial-gradient(ellipse at 10% 30%,#467763,#25443b 32%,transparent 70%),radial-gradient(ellipse at 75% 5%,#55734c55,transparent 60%),#121f1b;
}
#app-preview .ry-app-feature--whatsapp .ry-app-feature-visual{
 --ry-mixed-gradient:radial-gradient(ellipse at 5% 0%,#ffffff,#fffffb90 30%,transparent 65%),radial-gradient(ellipse at 100% 80%,#a0a87b,#bec4a370 32%,transparent 63%),radial-gradient(ellipse at 30% 100%,#d4bf97,transparent 70%),#e9e6dc;
}

/* css/ry-duel-3d-20260916.css */
/* Approved Old Way / New Way composition using existing 3D artwork. */
#duel .ry-ship-duel-art{position:relative;width:100%;max-width:480px;aspect-ratio:3/2;margin-inline:auto;overflow:hidden;border-radius:16px;isolation:isolate;box-shadow:inset 0 0 0 1px #ffffff24}
#duel .ry-ship-duel-old{background:radial-gradient(ellipse at 100% 0%,#fff,#fffffb90 30%,transparent 65%),radial-gradient(ellipse at 0% 85%,#a0a87b,#bec4a370 32%,transparent 63%),radial-gradient(ellipse at 65% 100%,#d4bf97,transparent 70%),#e9e6dc}
#duel .ry-ship-duel-new{background:radial-gradient(ellipse at 78% 5%,#adbc8552,transparent 44%),radial-gradient(ellipse at 22% 98%,#467763,#25443b 35%,transparent 70%),radial-gradient(ellipse at 78% 85%,#55734c70,transparent 55%),#121f1b}
#duel .ry-ship-duel-art::before{content:"";position:absolute;inset:0;background:url('/images/ry/premium-gradients-20260916/grain.svg') repeat;opacity:.12;mix-blend-mode:soft-light;pointer-events:none}
#duel .ry-ship-calendar{position:absolute;width:94%;height:92%;object-fit:contain;left:3%;top:-1%;filter:grayscale(1) brightness(1.08)}
#duel .ry-ship-phone{position:absolute;left:-7%;top:1%;width:69%;height:81%;object-fit:contain}
#duel .ry-ship-delivery{position:absolute;right:-3%;top:14%;width:62%;height:82%;object-fit:contain}
#duel .ry-ship-arrow{position:absolute;left:49%;top:24%;font-size:clamp(20px,2.6vw,34px);line-height:1;color:#c5ef57;text-shadow:0 2px 8px #25301844}
#duel .ry-ship-note{position:absolute;display:flex;align-items:center;gap:7px;left:50%;bottom:7%;transform:translateX(-50%);padding:9px 11px;background:#fffef9f5;border:1px solid #e2e6d6;border-radius:7px;box-shadow:0 9px 18px -10px #10241688;font-size:clamp(8px,.8vw,10px);line-height:1.2;color:#707961;white-space:nowrap}
#duel .ry-ship-note img{width:16px;height:16px;object-fit:contain}
#duel .ry-ship-check{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#e9f0dc;color:#779444;font-size:10px}
@media(max-width:480px){#duel .ry-ship-note{font-size:8px;padding:7px 8px;gap:5px}#duel .ry-ship-note img{width:13px;height:13px}#duel .ry-ship-check{width:14px;height:14px;font-size:9px}}

/* Selected comparison artwork: transparent, original geometry retained. */
#duel .ry-ship-duel-art.ry-duel-selected{background:none;box-shadow:none}
#duel .ry-ship-duel-art.ry-duel-selected::before{display:none;background:none}
#duel .ry-duel-selected>img{display:block;position:static;width:100%;height:100%;aspect-ratio:3/2;object-fit:contain;filter:none}