/* =============================================================
   rt-resources.css — Rent & Resource pages for roomterms.com
   Companion to: assets/css/styles.css
   ============================================================= */

/* ── Fonts ── */
/* NOTE: Fonts + Material Symbols Rounded loaded via <link> in each page's <head> */

/* ── CSS Variables / Palette ── */
:root {
  /* Brand colors */
  --rt-orange:        #FF7A3D;
  --rt-orange-hover:  #F0692B;
  --rt-orange-tint:   #FFF1E6;
  --rt-orange-ink:    #C24E15;

  --rt-green:         #1FA97A;
  --rt-green-tint:    #E6F6EF;
  --rt-green-ink:     #0B7A53;

  --rt-blue:          #4A7FE0;
  --rt-blue-tint:     #E8F0FC;
  --rt-blue-ink:      #2D5BB8;

  --rt-gold:          #E9B44C;
  --rt-gold-tint:     #FDF4DC;
  --rt-gold-ink:      #8A6410;

  --rt-purple:        #8B66D6;
  --rt-purple-tint:   #F0EAFB;
  --rt-purple-ink:    #6A44B8;

  --rt-teal:          #2A9DAA;
  --rt-teal-tint:     #E3F4F6;
  --rt-teal-ink:      #136F7A;

  /* Neutrals */
  --rt-navy:          #1E2A47;
  --rt-body:          #3F4A63;
  --rt-muted:         #5C6578;
  --rt-border:        #E8EAF0;
  --rt-light-band:    #F7F9FC;
  --rt-footer-bg:     #1C2537;

  /* Typography */
  --rt-font-head:     'Jost', sans-serif;
  --rt-font-body:     'Nunito Sans', sans-serif;
}

/* ── Material Symbols helper ── */
.ms {
  font-family: 'Material Symbols Rounded', sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.ms-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ── Page wrapper overrides ── */
body.yellow-skin .rt-page { font-family: var(--rt-font-body); }

/* ============================================================
   HERO
   ============================================================ */
.rt-hero {
  background: var(--rt-light-band);
  padding: 64px 0 0;
  overflow: hidden;
}
.rt-hero--orange { background: var(--rt-orange-tint); }

.rt-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 64px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
}

.rt-hero__content {
  flex: 1 1 400px;
  min-width: 0;
}

.rt-hero__eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rt-orange-ink);
  background: var(--rt-orange-tint);
  border: 1px solid rgba(255,122,61,.25);
  border-radius: 999px;
  padding: 4px 14px;
  margin-bottom: 16px;
}
.rt-hero__eyebrow--green { color: var(--rt-green-ink);  background: var(--rt-green-tint);  border-color: rgba(31,169,122,.25); }
.rt-hero__eyebrow--blue  { color: var(--rt-blue-ink);   background: var(--rt-blue-tint);   border-color: rgba(74,127,224,.25); }
.rt-hero__eyebrow--gold  { color: var(--rt-gold-ink);   background: var(--rt-gold-tint);   border-color: rgba(233,180,76,.25); }
.rt-hero__eyebrow--purple{ color: var(--rt-purple-ink); background: var(--rt-purple-tint); border-color: rgba(139,102,214,.25); }
.rt-hero__eyebrow--teal  { color: var(--rt-teal-ink);   background: var(--rt-teal-tint);   border-color: rgba(42,157,170,.25); }

.rt-hero__h1 {
  font-family: var(--rt-font-head);
  font-weight: 600;
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.15;
  color: var(--rt-navy);
  margin: 0 0 16px;
  text-wrap: balance;
}

.rt-hero__sub {
  font-size: 18px;
  line-height: 1.65;
  color: var(--rt-body);
  margin: 0 0 28px;
  max-width: 520px;
}

/* CTA buttons */
.rt-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  padding: 0 24px;
  border-radius: 4px;
  font-family: var(--rt-font-body);
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  transition: background .15s, color .15s;
  border: none;
  cursor: pointer;
}
.rt-btn--primary {
  background: var(--rt-orange);
  color: #fff;
}
.rt-btn--primary:hover { background: var(--rt-orange-hover); color: #fff; }

.rt-btn--outline {
  background: transparent;
  color: var(--rt-navy);
  border: 2px solid var(--rt-border);
}
.rt-btn--outline:hover { border-color: var(--rt-orange); color: var(--rt-orange); }

.rt-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Trust badges */
.rt-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}
.rt-trust-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--rt-green-ink);
}
.rt-trust-badge .ms { font-size: 18px; color: var(--rt-green); }

/* Hero image side */
.rt-hero__image-wrap {
  flex: 0 1 460px;
  min-width: 280px;
  position: relative;
  padding: 0 20px 20px 0;
}
.rt-hero__image-wrap::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 72%;
  height: 78%;
  border-radius: 14px;
  background: var(--rt-orange-tint);
  z-index: 0;
}
.rt-hero__image-wrap--green::after { background: var(--rt-green-tint); }
.rt-hero__image-wrap--blue::after  { background: var(--rt-blue-tint); }
.rt-hero__image-wrap--gold::after  { background: var(--rt-gold-tint); }
.rt-hero__image-wrap--purple::after{ background: var(--rt-purple-tint); }
.rt-hero__image-wrap--teal::after  { background: var(--rt-teal-tint); }

.rt-hero__image {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(30,42,71,.10);
  display: block;
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.rt-hiw {
  background: #fff;
  padding: 64px 0;
}
.rt-hiw__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
.rt-hiw__heading {
  font-family: var(--rt-font-head);
  font-weight: 600;
  font-size: 32px;
  color: var(--rt-navy);
  margin: 0 0 40px;
  text-align: center;
}
.rt-hiw__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 32px;
}
.rt-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rt-step__num {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--rt-orange-tint);
  color: var(--rt-orange-ink);
  font-family: var(--rt-font-head);
  font-weight: 600;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rt-step__title {
  font-family: var(--rt-font-head);
  font-weight: 600;
  font-size: 20px;
  color: var(--rt-navy);
  margin: 0;
}
.rt-step__desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--rt-muted);
  margin: 0;
}

/* ============================================================
   FEATURES GRID
   ============================================================ */
.rt-features {
  background: var(--rt-light-band);
  padding: 64px 0;
}
.rt-features__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
.rt-features__heading {
  font-family: var(--rt-font-head);
  font-weight: 600;
  font-size: 30px;
  color: var(--rt-navy);
  margin: 0 0 8px;
  text-align: center;
}
.rt-features__sub {
  font-size: 17px;
  color: var(--rt-muted);
  text-align: center;
  margin: 0 0 36px;
}
.rt-features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 20px;
}
.rt-feature {
  background: #fff;
  border: 1px solid var(--rt-border);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rt-feature__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--rt-orange-tint);
  color: var(--rt-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 4px;
}
.rt-feature__icon--green  { background: var(--rt-green-tint);  color: var(--rt-green); }
.rt-feature__icon--blue   { background: var(--rt-blue-tint);   color: var(--rt-blue); }
.rt-feature__icon--gold   { background: var(--rt-gold-tint);   color: var(--rt-gold); }
.rt-feature__icon--purple { background: var(--rt-purple-tint); color: var(--rt-purple); }
.rt-feature__icon--teal   { background: var(--rt-teal-tint);   color: var(--rt-teal); }

.rt-feature__title {
  font-family: var(--rt-font-head);
  font-weight: 600;
  font-size: 18px;
  color: var(--rt-navy);
  margin: 0;
}
.rt-feature__desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--rt-muted);
  margin: 0;
}

/* ============================================================
   GUIDE CARDS (on /rent/ and resource index)
   ============================================================ */
.rt-guides {
  padding: 64px 0;
  background: #fff;
}
.rt-guides__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
.rt-guides__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}
.rt-guides__heading {
  font-family: var(--rt-font-head);
  font-weight: 600;
  font-size: 28px;
  color: var(--rt-navy);
  margin: 0;
}
.rt-guides__link {
  font-weight: 800;
  font-size: 15px;
  color: var(--rt-orange);
  text-decoration: none;
}
.rt-guides__link:hover { text-decoration: underline; }

.rt-guides__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: 16px;
}

/* The card itself */
.rt-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  min-height: 200px;
  border-radius: 18px;
  background: var(--rt-orange-tint);
  color: var(--rt-navy);
  text-decoration: none;
  transition: transform .15s;
}
.rt-card:hover { transform: translateY(-3px); color: var(--rt-navy); }

.rt-card--green  { background: var(--rt-green-tint); }
.rt-card--blue   { background: var(--rt-blue-tint); }
.rt-card--gold   { background: var(--rt-gold-tint); }
.rt-card--purple { background: var(--rt-purple-tint); }
.rt-card--teal   { background: var(--rt-teal-tint); }

.rt-card__bg-icon {
  position: absolute;
  right: -14px;
  top: -14px;
  font-size: 120px;
  opacity: .18;
  pointer-events: none;
  color: var(--rt-orange);
}
.rt-card--green  .rt-card__bg-icon { color: var(--rt-green); }
.rt-card--blue   .rt-card__bg-icon { color: var(--rt-blue); }
.rt-card--gold   .rt-card__bg-icon { color: var(--rt-gold); }
.rt-card--purple .rt-card__bg-icon { color: var(--rt-purple); }
.rt-card--teal   .rt-card__bg-icon { color: var(--rt-teal); }

.rt-card__tag {
  position: relative;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rt-orange-ink);
}
.rt-card--green  .rt-card__tag { color: var(--rt-green-ink); }
.rt-card--blue   .rt-card__tag { color: var(--rt-blue-ink); }
.rt-card--gold   .rt-card__tag { color: var(--rt-gold-ink); }
.rt-card--purple .rt-card__tag { color: var(--rt-purple-ink); }
.rt-card--teal   .rt-card__tag { color: var(--rt-teal-ink); }

.rt-card__title {
  position: relative;
  font-family: var(--rt-font-head);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  color: var(--rt-navy);
  margin: auto 0 0;
  max-width: 88%;
}
.rt-card__desc {
  position: relative;
  font-size: 15px;
  line-height: 1.5;
  color: var(--rt-body);
  margin: 0;
}
.rt-card__arrow {
  position: relative;
  margin-top: 6px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--rt-orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.rt-card--green  .rt-card__arrow { background: var(--rt-green); }
.rt-card--blue   .rt-card__arrow { background: var(--rt-blue); }
.rt-card--gold   .rt-card__arrow { background: var(--rt-gold); }
.rt-card--purple .rt-card__arrow { background: var(--rt-purple); }
.rt-card--teal   .rt-card__arrow { background: var(--rt-teal); }

/* ============================================================
   FAQ ACCORDION  (uses <details>/<summary>)
   ============================================================ */
.rt-faq {
  padding: 64px 0;
  background: var(--rt-light-band);
}
.rt-faq__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px;
}
.rt-faq__heading {
  font-family: var(--rt-font-head);
  font-weight: 600;
  font-size: 30px;
  color: var(--rt-navy);
  margin: 0 0 32px;
  text-align: center;
}
.rt-faq__list {
  border-top: 1px solid var(--rt-border);
}
.rt-faq-item {
  border-bottom: 1px solid var(--rt-border);
}
.rt-faq-item summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  font-weight: 800;
  font-size: 17px;
  color: var(--rt-navy);
  user-select: none;
}
.rt-faq-item summary::-webkit-details-marker { display: none; }
.rt-faq-item summary .rt-faq-item__icon { flex: none; font-size: 22px; color: var(--rt-muted); transition: transform .2s; }
.rt-faq-item[open] summary .rt-faq-item__icon { transform: rotate(45deg); }
.rt-faq-item__answer {
  font-size: 16px;
  line-height: 1.65;
  color: var(--rt-muted);
  max-width: 680px;
  margin: 0 0 20px;
}

/* ============================================================
   NAVY CTA BAND
   ============================================================ */
.rt-cta-band {
  background: var(--rt-navy);
  padding: 64px 0;
}
.rt-cta-band__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.rt-cta-band__heading {
  font-family: var(--rt-font-head);
  font-weight: 600;
  font-size: 34px;
  color: #fff;
  margin: 0;
  text-wrap: balance;
}
.rt-cta-band__sub {
  font-size: 17px;
  color: #D5DAE5;
  margin: 0;
}

/* ============================================================
   NAVY SEARCH BAND (resources pages)
   ============================================================ */
.rt-search-band {
  background: var(--rt-navy);
  padding: 48px 0;
}
.rt-search-band__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.rt-search-band__heading {
  font-family: var(--rt-font-head);
  font-weight: 600;
  font-size: 28px;
  color: #fff;
  margin: 0;
}
.rt-search-band__sub {
  font-size: 16px;
  color: #D5DAE5;
  margin: 6px 0 0;
}
.rt-search-band__form {
  display: flex;
  flex: 0 1 420px;
  background: #fff;
  border-radius: 6px;
  padding: 5px;
}
.rt-search-band__input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 12px;
  border: 0;
  font-size: 16px;
  outline: none;
  background: transparent;
  color: var(--rt-navy);
}
.rt-search-band__btn {
  height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 4px;
  background: var(--rt-orange);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  transition: background .15s;
}
.rt-search-band__btn:hover { background: var(--rt-orange-hover); }

/* ============================================================
   RESOURCE PAGE LAYOUT (two-column: content + sidebar)
   ============================================================ */
.rt-body-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 16px 64px;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: flex-start;
}
.rt-body-wrap__main {
  flex: 1 1 560px;
  min-width: 0;
}
.rt-body-wrap__aside {
  flex: 0 1 280px;
  min-width: 240px;
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Sidebar nav */
.rt-sidebar-nav {
  border: 1px solid var(--rt-border);
  border-radius: 8px;
  padding: 20px;
}
.rt-sidebar-nav__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rt-muted);
  margin-bottom: 10px;
}
.rt-sidebar-nav__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rt-sidebar-nav__link {
  display: block;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 15px;
  color: var(--rt-body);
  text-decoration: none;
  transition: background .12s, color .12s;
}
.rt-sidebar-nav__link:hover { background: #F3F4F8; color: var(--rt-navy); }
.rt-sidebar-nav__link.is-active { color: var(--rt-orange-ink); background: var(--rt-orange-tint); }

/* Sidebar CTA box */
.rt-sidebar-cta {
  background: var(--rt-orange-tint);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rt-sidebar-cta__title {
  font-family: var(--rt-font-head);
  font-weight: 600;
  font-size: 19px;
  color: var(--rt-navy);
  margin: 0;
}
.rt-sidebar-cta__desc {
  font-size: 15px;
  line-height: 1.5;
  color: var(--rt-muted);
  margin: 0;
}
.rt-sidebar-cta .rt-btn {
  margin-top: 6px;
  height: 44px;
  font-size: 15px;
  justify-content: center;
}

/* ============================================================
   GUIDE ARTICLE body
   ============================================================ */
.rt-guide-article {
  max-width: 720px;
}
.rt-guide-article__intro {
  font-size: 18px;
  line-height: 1.7;
  color: var(--rt-body);
  margin: 0 0 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rt-border);
}
.rt-guide-section {
  margin-bottom: 36px;
}
.rt-guide-section__h2 {
  font-family: var(--rt-font-head);
  font-weight: 600;
  font-size: 24px;
  color: var(--rt-navy);
  line-height: 1.2;
  margin: 0 0 12px;
  text-wrap: balance;
}
.rt-guide-section p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--rt-body);
  margin: 0 0 12px;
}
.rt-guide-section p:last-child { margin-bottom: 0; }
.rt-guide-section__list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rt-guide-section__list li {
  display: flex;
  gap: 10px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--rt-body);
}
.rt-guide-section__list li .ms {
  flex: none;
  font-size: 20px;
  color: var(--rt-orange);
  margin-top: 2px;
}
.rt-guide-section__list li .ms--purple { color: var(--rt-purple); }
.rt-guide-section__list li .ms--teal   { color: var(--rt-teal); }

.rt-guide-calc-link {
  font-size: 17px;
  line-height: 1.7;
  color: var(--rt-body);
  margin: 0 0 36px;
}
.rt-guide-calc-link a { color: var(--rt-orange); }

/* Legal disclaimer */
.rt-legal-note {
  background: var(--rt-light-band);
  border-left: 3px solid var(--rt-orange);
  border-radius: 0 6px 6px 0;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--rt-muted);
  margin: 24px 0;
}

/* ============================================================
   PAGE TITLE BAND (standard Bootstrap page-title override)
   ============================================================ */
.rt-page-title {
  background: var(--rt-orange-tint);
  padding: 48px 0 40px;
  border-bottom: 1px solid var(--rt-border);
}
.rt-page-title--green  { background: var(--rt-green-tint); }
.rt-page-title--blue   { background: var(--rt-blue-tint); }
.rt-page-title--gold   { background: var(--rt-gold-tint); }
.rt-page-title--purple { background: var(--rt-purple-tint); }
.rt-page-title--teal   { background: var(--rt-teal-tint); }

/* ============================================================
   AMENITY FILTER
   ============================================================ */
.rt-amenity-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.rt-amenity-filter__field {
  flex: 1 1 280px;
  display: flex;
  align-items: center;
  border: 1.5px solid var(--rt-border);
  border-radius: 6px;
  padding: 0 10px;
  background: #fff;
}
.rt-amenity-filter__field .ms { font-size: 22px; color: var(--rt-muted); }
.rt-amenity-filter__input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 8px;
  border: 0;
  font-size: 16px;
  outline: none;
  background: transparent;
}
.rt-amenity-filter__count {
  font-weight: 800;
  font-size: 15px;
  color: var(--rt-muted);
  white-space: nowrap;
}
.rt-amenity-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rt-amenity-tag {
  padding: 8px 14px;
  background: var(--rt-green-tint);
  color: var(--rt-green-ink);
  border-radius: 999px;
  font-weight: 800;
  font-size: 15px;
}
.rt-amenity-tag.is-hidden { display: none; }

/* ============================================================
   RENT CALCULATOR
   ============================================================ */
.rt-calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
  align-items: stretch;
  margin-top: 24px;
}
.rt-calc-inputs {
  border: 1px solid var(--rt-border);
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #fff;
}
.rt-calc-field label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rt-calc-field__label-text {
  font-weight: 800;
  font-size: 15px;
}
.rt-calc-field__hint {
  font-weight: 600;
  color: var(--rt-muted);
}
.rt-calc-field__input-wrap {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--rt-border);
  border-radius: 6px;
  padding: 0 12px;
  background: #fff;
}
.rt-calc-field__prefix {
  font-weight: 800;
  color: var(--rt-muted);
}
.rt-calc-field__input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 8px;
  border: 0;
  font-size: 17px;
  outline: none;
  background: transparent;
}
.rt-calc-result {
  background: var(--rt-light-band);
  border: 1px solid var(--rt-border);
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rt-calc-result__label {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rt-orange-ink);
}
.rt-calc-result__amount {
  font-family: var(--rt-font-head);
  font-weight: 600;
  font-size: 46px;
  line-height: 1.1;
  color: var(--rt-green);
  margin-top: 6px;
}
.rt-calc-result__amount-unit {
  font-size: 17px;
  color: var(--rt-muted);
  font-weight: 500;
}
.rt-calc-result__sub {
  font-size: 15px;
  color: var(--rt-muted);
}
.rt-calc-result__rows {
  margin-top: 18px;
  border-top: 1px solid var(--rt-border);
}
.rt-calc-result__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rt-border);
  font-size: 15px;
}
.rt-calc-result__row-key   { color: var(--rt-muted); }
.rt-calc-result__row-value { font-weight: 800; }
.rt-calc-result__disclaimer {
  font-size: 13.5px;
  color: var(--rt-muted);
  line-height: 1.5;
  margin-top: 12px;
}
.rt-calc-result .rt-btn {
  margin-top: auto;
  justify-content: center;
  padding-top: 20px;
}

/* Warning variant — icon + message row */
.rt-calc-result--warning {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  background: #FEF3F2;
  border-color: #FECDCA;
}
.rt-calc-result--warning .material-symbols-rounded {
  color: #D92D20;
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 1px;
}
.rt-calc-result--warning p {
  font-size: 15px;
  line-height: 1.5;
  color: #B42318;
  margin: 0;
}

/* Label hint — inline note inside input labels */
.rt-calc-label-hint {
  font-weight: 400;
  font-size: 0.9em;
  color: var(--rt-muted);
}

/* "How this calculator works" explainer block */
.rt-calc-explainer {
  margin-top: 32px;
  padding: 20px 24px;
  background: var(--rt-light-band);
  border: 1px solid var(--rt-border);
  border-radius: 12px;
}
.rt-calc-explainer__heading {
  font-family: var(--rt-font-head);
  font-size: 16px;
  font-weight: 600;
  color: var(--rt-navy);
  margin: 0 0 12px;
}
.rt-calc-explainer p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--rt-body);
  margin: 0 0 10px;
}
.rt-calc-explainer p:last-child { margin-bottom: 0; }

/* ============================================================
   RESOURCES INDEX grid groups
   ============================================================ */
.rt-groups { max-width: 1200px; margin: 0 auto; padding: 56px 16px 24px; display: flex; flex-direction: column; gap: 56px; }
.rt-group__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 22px;
}
.rt-group__heading {
  font-family: var(--rt-font-head);
  font-weight: 600;
  font-size: 28px;
  color: var(--rt-navy);
  margin: 0;
}
.rt-group__link {
  font-weight: 800;
  font-size: 15px;
  color: var(--rt-orange);
  text-decoration: none;
}
.rt-group__link:hover { text-decoration: underline; }
.rt-resource-text {
  max-width: 820px;
  margin: 0 auto;
  padding: 48px 16px 64px;
}
.rt-resource-text h2 {
  font-family: var(--rt-font-head);
  font-weight: 600;
  font-size: 28px;
  margin: 0 0 16px;
  color: var(--rt-navy);
}
.rt-resource-text p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--rt-body);
  margin: 0 0 14px;
}

/* Rental types chips */
.rt-type-groups { display: flex; flex-direction: column; gap: 32px; }
.rt-type-group__heading {
  font-family: var(--rt-font-head);
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--rt-navy);
}
.rt-type-group__dot { width: 12px; height: 12px; border-radius: 4px; display: inline-block; flex-shrink: 0; }
.rt-type-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.rt-type-tag {
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 15px;
}

/* ============================================================
   FAQ page "How It Works" mini steps
   ============================================================ */
.rt-mini-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 16px;
  margin-top: 20px;
}
.rt-mini-step {
  border: 1px solid var(--rt-border);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rt-mini-step__num {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--rt-orange-tint);
  color: var(--rt-orange-ink);
  font-family: var(--rt-font-head);
  font-weight: 600;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rt-mini-step__title { font-family: var(--rt-font-head); font-weight: 600; font-size: 17px; color: var(--rt-navy); margin: 4px 0 0; }
.rt-mini-step__desc  { font-size: 14.5px; line-height: 1.5; color: var(--rt-muted); margin: 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
  .rt-hero { padding-top: 40px; }
  .rt-hero__h1 { font-size: 28px; }
  .rt-hiw__heading,
  .rt-features__heading,
  .rt-guides__heading,
  .rt-faq__heading { font-size: 24px; }
  .rt-cta-band__heading { font-size: 26px; }
  .rt-body-wrap__aside { position: static; }
}
@media (max-width: 480px) {
  .rt-hero__inner { padding-bottom: 40px; }
  .rt-hero__image-wrap { display: none; }
}

/* ============================================================
   ALIASES & ADDITIONS — bridges PHP template class names to
   the class names already in this file above.
   Added in build pass 2; do not edit the blocks above.
   ============================================================ */

/* ----------------------------------------------------------
   Hero aliases
   rt-hero__title  → was rt-hero__h1
   rt-hero__intro  → was rt-hero__sub
   ---------------------------------------------------------- */
.rt-hero__title { font-family: var(--rt-font-head); font-weight: 700; font-size: 42px; line-height: 1.15; color: #fff; margin: 0 0 16px; text-wrap: balance; }
.rt-hero__intro { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.88); margin: 0; max-width: 640px; }

/* Hero colour modifiers (orange already defined above) */
.rt-hero--green  { background: linear-gradient(135deg, #14875f 0%, #1FA97A 60%, #2abf8c 100%); }
.rt-hero--blue   { background: linear-gradient(135deg, #2d5bbf 0%, #4A7FE0 60%, #6496e8 100%); }
.rt-hero--gold   { background: linear-gradient(135deg, #c8922a 0%, #E9B44C 60%, #f0c466 100%); }
.rt-hero--purple { background: linear-gradient(135deg, #6A44B8 0%, #8B66D6 60%, #9e7fe0 100%); }
.rt-hero--teal   { background: linear-gradient(135deg, #1a7a87 0%, #2A9DAA 60%, #3db4c2 100%); }
.rt-hero--gold .rt-hero__title,
.rt-hero--gold .rt-hero__intro,
.rt-hero--gold .rt-hero__eyebrow { color: #1E2A47; }
.rt-hero--gold .rt-hero__intro   { color: rgba(30,42,71,.78); }

/* Small mobile tweak for new title class */
@media (max-width: 767px) { .rt-hero__title { font-size: 28px; } }

/* ----------------------------------------------------------
   Button aliases
   rt-btn-cta       → was rt-btn--primary
   rt-btn-secondary → was rt-btn--outline
   ---------------------------------------------------------- */
.rt-btn-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px; border-radius: 8px; font-family: var(--rt-font-head);
  font-weight: 600; font-size: 15px; text-decoration: none; transition: opacity .18s, transform .15s;
  background: var(--rt-orange); color: #fff; border: 2px solid transparent;
}
.rt-btn-cta:hover { opacity: .88; transform: translateY(-1px); color: #fff; text-decoration: none; }

.rt-btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 26px; border-radius: 8px; font-family: var(--rt-font-head);
  font-weight: 600; font-size: 15px; text-decoration: none; transition: background .18s, color .18s;
  background: transparent; color: var(--rt-orange); border: 2px solid var(--rt-orange);
}
.rt-btn-secondary:hover { background: var(--rt-orange-tint); text-decoration: none; }

/* ----------------------------------------------------------
   CTA Band aliases
   rt-cta-band__title  → was rt-cta-band__heading
   rt-cta-band__sub    → was rt-cta-band__text (already present)
   rt-cta-band--navy   → modifier (rt-cta-band is already navy bg)
   ---------------------------------------------------------- */
.rt-cta-band__title { font-family: var(--rt-font-head); font-weight: 700; font-size: 32px; line-height: 1.2; color: #fff; margin: 0 0 10px; text-wrap: balance; }
.rt-cta-band__sub   { font-size: 17px; color: rgba(255,255,255,.8); margin: 0 0 28px; }
.rt-cta-band--navy  { background: var(--rt-navy); } /* already navy — explicit modifier for clarity */

@media (max-width: 767px) { .rt-cta-band__title { font-size: 26px; } }

/* ----------------------------------------------------------
   Guide card body wrapper
   rt-card__body  (wraps title + desc inside a flex card)
   ---------------------------------------------------------- */
.rt-card__body { flex: 1; min-width: 0; }

/* ----------------------------------------------------------
   Features section modifier
   rt-features--light-band  (rt-features already has a light bg;
   modifier is a no-op alias kept for HTML clarity)
   ---------------------------------------------------------- */
.rt-features--light-band { background: var(--rt-light-band); }

/* ----------------------------------------------------------
   Guides section — alternate background + sub-heading
   ---------------------------------------------------------- */
.rt-guides--alt { background: var(--rt-light-band); }
.rt-guides__sub { font-size: 17px; color: var(--rt-muted); margin: -8px 0 32px; line-height: 1.6; max-width: 600px; }

/* ----------------------------------------------------------
   Rental Types sections (rt-types-*)
   ---------------------------------------------------------- */
.rt-types-section { padding: 56px 0; }
.rt-types-section--alt { background: var(--rt-light-band); }
.rt-types-section__heading {
  font-family: var(--rt-font-head); font-weight: 700; font-size: 26px;
  color: var(--rt-navy); margin: 0 0 28px;
}
.rt-types-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.rt-types-grid li {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 8px;
  background: #fff; border: 1px solid var(--rt-border);
  font-size: 14.5px; font-weight: 500; color: var(--rt-navy);
  transition: border-color .15s, box-shadow .15s;
}
.rt-types-grid li:hover { border-color: var(--rt-orange); box-shadow: 0 2px 8px rgba(255,122,61,.12); }
.rt-types-grid li .material-symbols-rounded { font-size: 20px; color: var(--rt-orange); flex-shrink: 0; }
.rt-types-section--alt .rt-types-grid li { background: #fff; }

@media (max-width: 600px) {
  .rt-types-grid { grid-template-columns: 1fr 1fr; }
}

/* ----------------------------------------------------------
   Amenity search + cloud (rt-amenity-search-wrap, rt-amenity-cloud, rt-amenity-empty)
   ---------------------------------------------------------- */
.rt-amenity-search-wrap { margin-bottom: 32px; }
.rt-amenity-search-wrap__label {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--rt-font-head); font-weight: 600; font-size: 15px;
  color: var(--rt-navy); margin-bottom: 10px;
}
.rt-amenity-search-wrap__label .material-symbols-rounded { font-size: 20px; color: var(--rt-orange); }
.rt-amenity-search-wrap__row { display: flex; align-items: center; gap: 8px; }
.rt-amenity-search-wrap__input {
  flex: 1; padding: 11px 16px; border-radius: 8px;
  border: 2px solid var(--rt-border); font-size: 15px;
  font-family: var(--rt-font-body); background: #fff; color: var(--rt-navy);
  transition: border-color .18s;
}
.rt-amenity-search-wrap__input:focus { outline: none; border-color: var(--rt-orange); }
.rt-amenity-search-wrap__clear {
  width: 40px; height: 40px; border-radius: 8px; border: 2px solid var(--rt-border);
  background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--rt-muted); transition: border-color .15s, color .15s;
}
.rt-amenity-search-wrap__clear:hover { border-color: var(--rt-orange); color: var(--rt-orange); }

.rt-amenity-cloud {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.rt-amenity-tag {
  display: inline-flex; align-items: center;
  padding: 7px 14px; border-radius: 999px;
  background: var(--rt-orange-tint); color: var(--rt-orange-ink);
  font-size: 14px; font-weight: 500; cursor: default;
  transition: background .15s, transform .12s;
  border: 1px solid rgba(255,122,61,.18);
}
.rt-amenity-tag:hover { background: var(--rt-orange); color: #fff; transform: translateY(-1px); }
.rt-amenity-tag[hidden] { display: none !important; }

.rt-amenity-empty {
  font-size: 16px; color: var(--rt-muted); text-align: center;
  padding: 40px 0; width: 100%;
}

/* ----------------------------------------------------------
   Guide body / article
   rt-guide-body  → was rt-guide-article
   ---------------------------------------------------------- */
.rt-guide-body { max-width: 760px; margin: 0 auto; padding: 56px 0 72px; }

/* ----------------------------------------------------------
   Guide lists
   rt-guide-list              → generic styled list
   rt-guide-list--check       → green check bullets
   rt-guide-list--questions   → Q-style list
   ---------------------------------------------------------- */
.rt-guide-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 8px; }
.rt-guide-list li {
  padding: 10px 14px 10px 40px; border-radius: 8px;
  position: relative; font-size: 15.5px; line-height: 1.55;
  background: var(--rt-light-band); color: var(--rt-navy);
}
.rt-guide-list li::before {
  content: "•";
  position: absolute; left: 16px; top: 10px;
  color: var(--rt-orange); font-size: 18px; line-height: 1;
}

.rt-guide-list--check li::before {
  content: "check_circle";
  font-family: "Material Symbols Rounded"; font-size: 18px;
  color: var(--rt-green); top: 9px;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.rt-guide-list--questions li { background: transparent; padding-left: 0; }
.rt-guide-list--questions li::before { display: none; }
.rt-guide-list--questions li + li { border-top: 1px solid var(--rt-border); padding-top: 10px; }

/* ----------------------------------------------------------
   Guide calculator CTA block
   ---------------------------------------------------------- */
.rt-guide-calc-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 24px 28px; border-radius: 12px;
  background: linear-gradient(135deg, var(--rt-navy) 0%, #2d3e6a 100%);
  margin: 32px 0;
}
.rt-guide-calc-cta__text { flex: 1; }
.rt-guide-calc-cta__text strong { display: block; font-family: var(--rt-font-head); font-size: 18px; color: #fff; margin-bottom: 4px; }
.rt-guide-calc-cta__text p { font-size: 14.5px; color: rgba(255,255,255,.78); margin: 0; }
@media (max-width: 540px) { .rt-guide-calc-cta { flex-direction: column; align-items: flex-start; } }

/* ----------------------------------------------------------
   Guide glossary term
   ---------------------------------------------------------- */
.rt-guide-term {
  display: block; padding: 16px 20px; border-left: 3px solid var(--rt-orange);
  background: var(--rt-orange-tint); border-radius: 0 8px 8px 0;
  margin: 8px 0;
}
.rt-guide-term strong { font-family: var(--rt-font-head); font-weight: 700; color: var(--rt-navy); display: block; margin-bottom: 4px; }
.rt-guide-term p, .rt-guide-term span { font-size: 14.5px; color: var(--rt-muted); margin: 0; line-height: 1.5; }

/* ----------------------------------------------------------
   Calculator section wrapper + inputs heading
   (rt-calc-section, rt-calc-inputs__heading already have base
    styles above; these fill any gaps)
   ---------------------------------------------------------- */
.rt-calc-section { padding: 64px 0; }
.rt-calc-inputs__heading {
  font-family: var(--rt-font-head); font-weight: 700; font-size: 22px;
  color: var(--rt-navy); margin: 0 0 28px;
}

/* ----------------------------------------------------------
   Responsive tweaks for new classes
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .rt-guide-body { padding: 40px 0 56px; }
  .rt-types-section { padding: 40px 0; }
  .rt-types-section__heading { font-size: 22px; }
  .rt-calc-section { padding: 40px 0; }
}

/* ============================================================
   CONFLICT RESOLUTION
   body.yellow-skin prefix beats styles.css global rules
   Append at bottom so specificity wins without !important
   where possible; !important used only for heading resets
   ============================================================ */

/* ── Hero backgrounds & padding ── */
body.yellow-skin .rt-hero                { padding: 64px 0 0 !important; background: var(--rt-light-band) !important; }
body.yellow-skin .rt-hero--orange        { background: var(--rt-orange-tint) !important; }
body.yellow-skin .rt-hero--green         { background: var(--rt-green-tint) !important; }
body.yellow-skin .rt-hero--blue          { background: var(--rt-blue-tint) !important; }
body.yellow-skin .rt-hero--gold          { background: var(--rt-gold-tint) !important; }
body.yellow-skin .rt-hero--purple        { background: var(--rt-purple-tint) !important; }
body.yellow-skin .rt-hero--teal          { background: var(--rt-teal-tint) !important; }
body.yellow-skin .rt-hero .container     { padding-bottom: 64px; }

/* ── Hero headings (reset Bootstrap/styles.css h1-h3 overrides) ── */
body.yellow-skin .rt-hero__title,
body.yellow-skin .rt-hero__h1 {
  font-family: var(--rt-font-head) !important;
  font-weight: 600 !important;
  font-size: clamp(30px, 5vw, 48px) !important;
  line-height: 1.15 !important;
  color: var(--rt-navy) !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  border: none !important;
}
body.yellow-skin .rt-hero--gold .rt-hero__title,
body.yellow-skin .rt-hero--gold .rt-hero__h1 { color: #1E2A47 !important; }

/* ── Hero eyebrow ── */
body.yellow-skin .rt-hero__eyebrow {
  display: inline-block !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  padding: 4px 14px !important;
  margin: 0 0 16px !important;
  line-height: 1.4 !important;
}

/* ── Hero intro / sub ── */
body.yellow-skin .rt-hero__intro,
body.yellow-skin .rt-hero__sub {
  font-size: 18px !important;
  line-height: 1.65 !important;
  color: var(--rt-body) !important;
  margin: 0 0 28px !important;
  max-width: 560px;
}
body.yellow-skin .rt-hero--gold .rt-hero__intro,
body.yellow-skin .rt-hero--gold .rt-hero__sub  { color: #3a4156 !important; }

/* ── Feature / How-It-Works section ── */
body.yellow-skin .rt-features             { padding: 64px 0 !important; background: #fff; }
body.yellow-skin .rt-features--light-band { background: var(--rt-light-band) !important; }
body.yellow-skin .rt-features__heading,
body.yellow-skin .rt-hiw__heading {
  font-family: var(--rt-font-head) !important;
  font-weight: 600 !important;
  font-size: 32px !important;
  color: var(--rt-navy) !important;
  text-align: center !important;
  margin: 0 0 40px !important;
  padding: 0 !important;
  border: none !important;
}
body.yellow-skin .rt-feature__title {
  font-family: var(--rt-font-head) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--rt-navy) !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: none !important;
}
body.yellow-skin .rt-feature__desc {
  font-size: 15px !important;
  color: var(--rt-muted) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* ── CTA Band ── */
body.yellow-skin .rt-cta-band            { padding: 64px 0 !important; text-align: center; }
body.yellow-skin .rt-cta-band--navy      { background: var(--rt-navy) !important; }
body.yellow-skin .rt-cta-band--orange    { background: var(--rt-orange) !important; }
body.yellow-skin .rt-cta-band__title,
body.yellow-skin .rt-cta-band__heading {
  font-family: var(--rt-font-head) !important;
  font-weight: 600 !important;
  font-size: clamp(24px, 4vw, 38px) !important;
  color: #fff !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: none !important;
}
body.yellow-skin .rt-cta-band__sub {
  font-size: 17px !important;
  color: rgba(255,255,255,.82) !important;
  margin: 0 0 28px !important;
}

/* ── Buttons ── */
body.yellow-skin .rt-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 50px !important;
  padding: 0 24px !important;
  border-radius: 4px !important;
  font-family: var(--rt-font-body) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  text-decoration: none !important;
  transition: background .15s, color .15s;
  cursor: pointer !important;
  line-height: 1 !important;
  vertical-align: middle;
}
body.yellow-skin .rt-btn-cta,
body.yellow-skin .rt-btn--primary {
  background: var(--rt-orange) !important;
  color: #fff !important;
  border: none !important;
}
body.yellow-skin .rt-btn-cta:hover,
body.yellow-skin .rt-btn--primary:hover {
  background: var(--rt-orange-hover) !important;
  color: #fff !important;
  text-decoration: none !important;
}
body.yellow-skin .rt-btn-secondary,
body.yellow-skin .rt-btn--outline {
  background: transparent !important;
  color: var(--rt-navy) !important;
  border: 2px solid var(--rt-border) !important;
}
body.yellow-skin .rt-btn-secondary:hover,
body.yellow-skin .rt-btn--outline:hover {
  border-color: var(--rt-orange) !important;
  color: var(--rt-orange) !important;
  text-decoration: none !important;
}

/* ── Calculator ── */
body.yellow-skin .rt-calc-section { padding: 64px 0 !important; background: #fff !important; }
body.yellow-skin .rt-calc-inputs__heading {
  font-family: var(--rt-font-head) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--rt-navy) !important;
  margin: 0 0 24px !important;
}
body.yellow-skin .rt-calc-field__label-text {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--rt-body) !important;
  display: block !important;
  margin-bottom: 6px !important;
}

/* ── Guides / Resources index ── */
body.yellow-skin .rt-guides              { padding: 56px 0 72px !important; }
body.yellow-skin .rt-guides--alt         { background: var(--rt-light-band) !important; }
body.yellow-skin .rt-guides__heading {
  font-family: var(--rt-font-head) !important;
  font-weight: 600 !important;
  font-size: clamp(26px, 4vw, 38px) !important;
  color: var(--rt-navy) !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: none !important;
}
body.yellow-skin .rt-guides__sub {
  font-size: 16px !important;
  color: var(--rt-muted) !important;
  margin: 0 0 36px !important;
}

/* ── Card headings ── */
body.yellow-skin .rt-card__title {
  font-family: var(--rt-font-head) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--rt-navy) !important;
  margin: 0 0 8px !important;
  line-height: 1.3 !important;
}
body.yellow-skin .rt-card__excerpt {
  font-size: 14.5px !important;
  color: var(--rt-muted) !important;
  line-height: 1.55 !important;
  margin: 0 0 16px !important;
}

/* ── How It Works steps ── */
body.yellow-skin .rt-hiw { padding: 64px 0 !important; background: #fff; }
body.yellow-skin .rt-step__title {
  font-family: var(--rt-font-head) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--rt-navy) !important;
  margin: 12px 0 8px !important;
}
body.yellow-skin .rt-step__desc {
  font-size: 15px !important;
  color: var(--rt-muted) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* ── Types / Amenities sections ── */
body.yellow-skin .rt-types-section          { padding: 56px 0 72px !important; background: #fff; }
body.yellow-skin .rt-types-section--alt     { background: var(--rt-light-band) !important; }
body.yellow-skin .rt-types-section__heading {
  font-family: var(--rt-font-head) !important;
  font-size: clamp(24px, 3.5vw, 36px) !important;
  font-weight: 600 !important;
  color: var(--rt-navy) !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: none !important;
}

/* ── FAQ accordion ── */
body.yellow-skin .rt-faq-item summary {
  font-family: var(--rt-font-head) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--rt-navy) !important;
}

/* ── Section sub-headings used inside guides ── */
body.yellow-skin .rt-guide-body h2 {
  font-family: var(--rt-font-head) !important;
  font-size: clamp(20px, 3vw, 28px) !important;
  font-weight: 600 !important;
  color: var(--rt-navy) !important;
  margin: 40px 0 12px !important;
  padding: 0 !important;
  border: none !important;
}
body.yellow-skin .rt-guide-body h3 {
  font-family: var(--rt-font-head) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--rt-navy) !important;
  margin: 28px 0 10px !important;
  padding: 0 !important;
  border: none !important;
}
body.yellow-skin .rt-guide-body p {
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: var(--rt-body) !important;
  margin: 0 0 20px !important;
}


/* ============================================================
   RESOURCES INDEX — Card grid, badge labels, circle buttons
   ============================================================ */

/* ── Section wrapper ── */
body.yellow-skin .rt-res-section {
  padding: 56px 0 72px !important;
  background: #fff;
}
body.yellow-skin .rt-res-section--alt {
  background: var(--rt-light-band) !important;
}
body.yellow-skin .rt-res-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 8px;
}
body.yellow-skin .rt-res-section__heading {
  font-family: var(--rt-font-head) !important;
  font-size: clamp(22px, 3vw, 30px) !important;
  font-weight: 600 !important;
  color: var(--rt-navy) !important;
  margin: 0 0 32px !important;
  padding: 0 !important;
  border: none !important;
  line-height: 1.2;
}
body.yellow-skin .rt-res-section__header .rt-res-section__heading {
  margin-bottom: 0 !important;
}
body.yellow-skin .rt-res-section__link {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--rt-orange) !important;
  text-decoration: none !important;
  white-space: nowrap;
}
body.yellow-skin .rt-res-section__link:hover {
  text-decoration: underline !important;
}

/* ── 4-column card grid ── */
.rt-res-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 991px) {
  .rt-res-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px) {
  .rt-res-grid { grid-template-columns: 1fr; }
}

/* ── Card base ── */
body.yellow-skin .rt-card {
  display: flex !important;
  flex-direction: column !important;
  padding: 22px 20px 20px !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  transition: transform .15s, box-shadow .15s;
  min-height: 185px;
}
body.yellow-skin .rt-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(30,42,71,.10);
  text-decoration: none !important;
}

/* ── Card color variants ── */
body.yellow-skin .rt-card--orange { background: var(--rt-orange-tint) !important; }
body.yellow-skin .rt-card--green  { background: var(--rt-green-tint)  !important; }
body.yellow-skin .rt-card--blue   { background: var(--rt-blue-tint)   !important; }
body.yellow-skin .rt-card--gold   { background: var(--rt-gold-tint)   !important; }
body.yellow-skin .rt-card--teal   { background: var(--rt-teal-tint)   !important; }
body.yellow-skin .rt-card--purple { background: var(--rt-purple-tint) !important; }

/* ── Badge label ── */
body.yellow-skin .rt-card__badge {
  display: block !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  line-height: 1;
}
body.yellow-skin .rt-card--orange .rt-card__badge { color: var(--rt-orange-ink) !important; }
body.yellow-skin .rt-card--green  .rt-card__badge { color: var(--rt-green-ink)  !important; }
body.yellow-skin .rt-card--blue   .rt-card__badge { color: var(--rt-blue-ink)   !important; }
body.yellow-skin .rt-card--gold   .rt-card__badge { color: var(--rt-gold-ink)   !important; }
body.yellow-skin .rt-card--teal   .rt-card__badge { color: var(--rt-teal-ink)   !important; }
body.yellow-skin .rt-card--purple .rt-card__badge { color: var(--rt-purple-ink) !important; }

/* ── Card title ── */
body.yellow-skin .rt-card__title {
  font-family: var(--rt-font-head) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--rt-navy) !important;
  margin: 0 0 8px !important;
  line-height: 1.3 !important;
  padding: 0 !important;
  border: none !important;
}

/* ── Card description ── */
body.yellow-skin .rt-card__desc {
  font-size: 13.5px !important;
  color: var(--rt-muted) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  flex: 1;
}

/* ── Circle arrow button ── */
body.yellow-skin .rt-card__btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  margin-top: 18px !important;
  color: #fff !important;
  flex-shrink: 0;
}
body.yellow-skin .rt-card__btn .material-symbols-rounded {
  font-size: 20px !important;
  color: #fff !important;
}
body.yellow-skin .rt-card__btn--orange { background: var(--rt-orange) !important; }
body.yellow-skin .rt-card__btn--green  { background: var(--rt-green)  !important; }
body.yellow-skin .rt-card__btn--blue   { background: var(--rt-blue)   !important; }
body.yellow-skin .rt-card__btn--gold   { background: var(--rt-gold)   !important; }
body.yellow-skin .rt-card__btn--teal   { background: var(--rt-teal)   !important; }
body.yellow-skin .rt-card__btn--purple { background: var(--rt-purple) !important; }

/* ── Breadcrumb ── */
body.yellow-skin .rt-breadcrumb { margin-bottom: 20px; }
body.yellow-skin .rt-breadcrumb ol {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}
body.yellow-skin .rt-breadcrumb li {
  font-size: 13px;
  color: var(--rt-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
body.yellow-skin .rt-breadcrumb li + li::before {
  content: '›';
  color: var(--rt-muted);
}
body.yellow-skin .rt-breadcrumb a {
  color: var(--rt-body) !important;
  text-decoration: none !important;
}
body.yellow-skin .rt-breadcrumb a:hover {
  color: var(--rt-orange) !important;
}

/* ── Editorial text section ── */
body.yellow-skin .rt-editorial {
  padding: 56px 0 72px !important;
  background: #fff;
}
body.yellow-skin .rt-editorial__inner {
  max-width: 760px;
}
body.yellow-skin .rt-editorial__heading {
  font-family: var(--rt-font-head) !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  color: var(--rt-navy) !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: none !important;
}
body.yellow-skin .rt-editorial p {
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: var(--rt-body) !important;
  margin: 0 0 18px !important;
}
body.yellow-skin .rt-editorial a {
  color: var(--rt-orange) !important;
  text-decoration: none !important;
}
body.yellow-skin .rt-editorial a:hover {
  text-decoration: underline !important;
}


/* ============================================================
   PATTERN A — Dark content area + Sidebar layout
   (resources/index.php card sections, rental-types.php,
    rental-amenities.php, rent-faqs.php, rent-calculator.php,
    all guide sub-pages)
   ============================================================ */

/* ── Dark band wrapper ── */
body.yellow-skin .rt-dark-band {
  background: #fff !important;
  padding: 56px 0 72px !important;
}

/* ── Page layout: main (65%) + sidebar (30%) ── */
body.yellow-skin .rt-page-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 36px;
  align-items: start;
}
@media (max-width: 991px) {
  body.yellow-skin .rt-page-layout {
    grid-template-columns: 1fr;
  }
  body.yellow-skin .rt-sidebar {
    order: -1;
  }
}

/* ── Main content area (inside dark band) ── */
body.yellow-skin .rt-main-content {
  min-width: 0;
}

/* ── Sidebar ── */
body.yellow-skin .rt-sidebar {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Sidebar box shared base */
body.yellow-skin .rt-sidebar__box {
  background: #fff !important;
  border: 1px solid var(--rt-border);
  border-radius: 12px;
  overflow: hidden;
}

/* Sidebar resources nav */
body.yellow-skin .rt-sidebar__nav-heading {
  font-family: var(--rt-font-head) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--rt-muted) !important;
  padding: 16px 18px 10px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--rt-border);
}
body.yellow-skin .rt-sidebar__nav-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 8px 0 !important;
}
body.yellow-skin .rt-sidebar__nav-list li {
  margin: 0 !important;
  padding: 0 !important;
}
body.yellow-skin .rt-sidebar__nav-list a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 18px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--rt-body) !important;
  text-decoration: none !important;
  transition: color .12s, background .12s;
  border-left: 3px solid transparent;
}
body.yellow-skin .rt-sidebar__nav-list a:hover {
  color: var(--rt-navy) !important;
  background: var(--rt-light-band) !important;
}
body.yellow-skin .rt-sidebar__nav-list a.active {
  color: var(--rt-orange-ink) !important;
  border-left-color: var(--rt-orange) !important;
  background: var(--rt-orange-tint) !important;
}
body.yellow-skin .rt-sidebar__nav-list a.active--green {
  color: var(--rt-green-ink) !important;
  border-left-color: var(--rt-green) !important;
  background: var(--rt-green-tint) !important;
}
body.yellow-skin .rt-sidebar__nav-list a.active--blue {
  color: var(--rt-blue-ink) !important;
  border-left-color: var(--rt-blue) !important;
  background: var(--rt-blue-tint) !important;
}
body.yellow-skin .rt-sidebar__nav-list a.active--gold {
  color: var(--rt-gold-ink) !important;
  border-left-color: var(--rt-gold) !important;
  background: var(--rt-gold-tint) !important;
}
body.yellow-skin .rt-sidebar__nav-list a.active--purple {
  color: var(--rt-purple-ink) !important;
  border-left-color: var(--rt-purple) !important;
  background: var(--rt-purple-tint) !important;
}
body.yellow-skin .rt-sidebar__nav-list a.active--teal {
  color: var(--rt-teal-ink) !important;
  border-left-color: var(--rt-teal) !important;
  background: var(--rt-teal-tint) !important;
}
body.yellow-skin .rt-sidebar__nav-list .material-symbols-rounded {
  font-size: 16px !important;
  flex-shrink: 0;
  opacity: .7;
}

/* Sidebar CTA box */
body.yellow-skin .rt-sidebar__cta {
  padding: 22px 18px 20px !important;
}
body.yellow-skin .rt-sidebar__cta-heading {
  font-family: var(--rt-font-head) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--rt-navy) !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: none !important;
}
body.yellow-skin .rt-sidebar__cta-text {
  font-size: 13px !important;
  color: var(--rt-muted) !important;
  line-height: 1.5 !important;
  margin: 0 0 16px !important;
}
body.yellow-skin .rt-sidebar__cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  height: 42px !important;
  padding: 0 18px !important;
  border-radius: 4px !important;
  background: var(--rt-orange) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: background .15s;
}
body.yellow-skin .rt-sidebar__cta-btn:hover {
  background: #F0692B !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* ── Dark-band section headings ── */
body.yellow-skin .rt-dark-band h2,
body.yellow-skin .rt-dark-heading {
  font-family: var(--rt-font-head) !important;
  font-size: clamp(20px, 2.5vw, 26px) !important;
  font-weight: 600 !important;
  color: var(--rt-navy) !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: none !important;
  line-height: 1.25;
}
body.yellow-skin .rt-dark-band p {
  color: var(--rt-body) !important;
  line-height: 1.7 !important;
}
body.yellow-skin .rt-dark-band a {
  color: var(--rt-orange) !important;
}

/* ── Pill tags (rental-types, rental-amenities) ── */
body.yellow-skin .rt-tags-section {
  margin-bottom: 36px;
}
body.yellow-skin .rt-tags-group-label {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  color: var(--rt-muted) !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: none !important;
}
body.yellow-skin .rt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
body.yellow-skin .rt-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  background: #fff !important;
  color: var(--rt-body) !important;
  text-decoration: none !important;
  border: 1px solid var(--rt-border) !important;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
body.yellow-skin .rt-tag:hover {
  background: var(--rt-light-band) !important;
  color: var(--rt-navy) !important;
}
body.yellow-skin .rt-tag .material-symbols-rounded {
  font-size: 15px !important;
  flex-shrink: 0;
}

/* ── Filter search box (rental-amenities) ── */
body.yellow-skin .rt-filter-wrap {
  position: relative;
  margin-bottom: 28px;
}
body.yellow-skin .rt-filter-wrap .material-symbols-rounded {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 20px !important;
  color: var(--rt-muted) !important;
  pointer-events: none;
}
body.yellow-skin #rt-amenity-filter {
  width: 100% !important;
  height: 46px !important;
  padding: 0 16px 0 44px !important;
  background: #fff !important;
  border: 1px solid var(--rt-border) !important;
  border-radius: 8px !important;
  color: var(--rt-body) !important;
  font-size: 15px !important;
  outline: none !important;
  box-shadow: none !important;
}
body.yellow-skin #rt-amenity-filter::placeholder {
  color: var(--rt-muted) !important;
}
body.yellow-skin #rt-amenity-filter:focus {
  border-color: var(--rt-blue) !important;
  background: #fff !important;
}

/* ── Dark-band FAQ accordions ── */
body.yellow-skin .rt-dark-faq {
  border-top: 1px solid var(--rt-border);
}
body.yellow-skin .rt-dark-faq details {
  border-bottom: 1px solid var(--rt-border) !important;
}
body.yellow-skin .rt-dark-faq summary {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 18px 0 !important;
  cursor: pointer !important;
  list-style: none !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--rt-navy) !important;
}
body.yellow-skin .rt-dark-faq summary::-webkit-details-marker { display: none !important; }
body.yellow-skin .rt-dark-faq summary .rt-faq-icon {
  font-size: 22px !important;
  color: var(--rt-muted) !important;
  flex-shrink: 0;
  transition: transform .2s;
}
body.yellow-skin .rt-dark-faq details[open] summary .rt-faq-icon {
  transform: rotate(45deg);
}
body.yellow-skin .rt-dark-faq details p {
  padding: 0 0 20px !important;
  margin: 0 !important;
  font-size: 15px !important;
  color: var(--rt-body) !important;
  line-height: 1.65 !important;
  max-width: 680px;
}

/* ── How It Works band (inside rent-faqs.php) ── */
body.yellow-skin .rt-how-it-works {
  margin-top: 40px;
  padding: 32px 0 0;
  border-top: 1px solid var(--rt-border);
}
body.yellow-skin .rt-how-it-works__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}
@media (max-width: 767px) {
  body.yellow-skin .rt-how-it-works__steps { grid-template-columns: 1fr; }
}
body.yellow-skin .rt-step-card {
  background: var(--rt-light-band) !important;
  border: 1px solid var(--rt-border) !important;
  border-radius: 10px !important;
  padding: 20px !important;
}
body.yellow-skin .rt-step-card__num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--rt-orange) !important;
  color: #fff !important;
  font-family: var(--rt-font-head) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
}
body.yellow-skin .rt-step-card h3 {
  font-family: var(--rt-font-head) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--rt-navy) !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: none !important;
}
body.yellow-skin .rt-step-card p {
  font-size: 14px !important;
  color: var(--rt-body) !important;
  margin: 0 !important;
  line-height: 1.55 !important;
}

/* ── Calculator (rent-calculator.php) ── */
body.yellow-skin .rt-calc-card {
  background: var(--rt-light-band) !important;
  border: 1px solid var(--rt-border) !important;
  border-radius: 14px !important;
  padding: 28px 24px !important;
}
body.yellow-skin .rt-calc-group {
  margin-bottom: 24px;
}
body.yellow-skin .rt-calc-group label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--rt-muted) !important;
  margin-bottom: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}
body.yellow-skin .rt-calc-input {
  width: 100% !important;
  height: 46px !important;
  padding: 0 14px !important;
  background: #fff !important;
  border: 1px solid var(--rt-border) !important;
  border-radius: 8px !important;
  color: var(--rt-body) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  outline: none !important;
  box-shadow: none !important;
  -moz-appearance: textfield;
}
body.yellow-skin .rt-calc-input:focus {
  border-color: var(--rt-gold) !important;
}
body.yellow-skin .rt-calc-input::-webkit-inner-spin-button,
body.yellow-skin .rt-calc-input::-webkit-outer-spin-button { -webkit-appearance: none; }
body.yellow-skin .rt-calc-result {
  background: var(--rt-light-band) !important;
  border: 1px solid var(--rt-border) !important;
  border-radius: 12px !important;
  padding: 20px 24px !important;
  margin-top: 28px !important;
}
body.yellow-skin .rt-calc-result__label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--rt-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  margin-bottom: 6px !important;
}
body.yellow-skin .rt-calc-result__amount {
  font-family: var(--rt-font-head) !important;
  font-size: 42px !important;
  font-weight: 700 !important;
  color: var(--rt-gold) !important;
  line-height: 1 !important;
}
body.yellow-skin .rt-calc-result__sub {
  font-size: 13px !important;
  color: var(--rt-muted) !important;
  margin-top: 8px !important;
  line-height: 1.5 !important;
}
body.yellow-skin .rt-calc-btn {
  width: 100%;
  height: 48px;
  border-radius: 8px;
  background: var(--rt-gold) !important;
  color: var(--rt-navy) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  border: none !important;
  cursor: pointer;
  margin-top: 20px;
  transition: background .15s;
}
body.yellow-skin .rt-calc-btn:hover { background: #D9A33C !important; }
body.yellow-skin .rt-calc-note {
  font-size: 13px !important;
  color: var(--rt-muted) !important;
  margin-top: 14px !important;
  line-height: 1.55 !important;
}
body.yellow-skin .rt-calc-label-hint {
  font-weight: 400 !important;
  font-size: 0.88em !important;
  color: var(--rt-muted) !important;
  opacity: 0.9;
}
body.yellow-skin .rt-calc-explainer {
  margin-top: 28px !important;
  padding: 20px 24px !important;
  background: var(--rt-light-band) !important;
  border: 1px solid var(--rt-border) !important;
  border-radius: 12px !important;
}
body.yellow-skin .rt-calc-explainer__heading {
  font-family: var(--rt-font-head) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--rt-navy) !important;
  margin: 0 0 10px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}
body.yellow-skin .rt-calc-explainer p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--rt-body) !important;
  margin-bottom: 10px !important;
}
body.yellow-skin .rt-calc-explainer p:last-child { margin-bottom: 0 !important; }
body.yellow-skin .rt-calc-result--warning {
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 12px !important;
  background: #FEF3F2 !important;
  border-color: #FECDCA !important;
  margin-top: 20px !important;
}
body.yellow-skin .rt-calc-result--warning p {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #B42318 !important;
  margin: 0 !important;
}
body.yellow-skin .rt-calc-result--warning .material-symbols-rounded {
  color: #D92D20 !important;
  font-size: 22px !important;
  flex-shrink: 0;
  margin-top: 0 !important;
}

/* ============================================================
   PATTERN B — Rent/* landing pages (white content)
   ============================================================ */

/* ── Hero ── */
body.yellow-skin .rt-rent-hero {
  background: #FFF4EC !important;
  border-bottom: 1px solid #E8EAF0 !important;
  padding: 56px 0 !important;
}
body.yellow-skin .rt-rent-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 991px) {
  body.yellow-skin .rt-rent-hero__inner { grid-template-columns: 1fr; }
  body.yellow-skin .rt-rent-hero__mock { display: none; }
}
body.yellow-skin .rt-rent-hero__eyebrow {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #C24E15 !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: none !important;
}
body.yellow-skin .rt-rent-hero__title {
  font-family: var(--rt-font-head) !important;
  font-size: clamp(32px, 4.5vw, 54px) !important;
  font-weight: 600 !important;
  color: var(--rt-navy) !important;
  line-height: 1.05 !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  border: none !important;
}
body.yellow-skin .rt-rent-hero__desc {
  font-size: 18px !important;
  color: var(--rt-muted) !important;
  line-height: 1.6 !important;
  margin: 0 0 28px !important;
  max-width: 500px;
}
body.yellow-skin .rt-rent-hero__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}
body.yellow-skin .rt-rent-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 54px !important;
  padding: 0 26px !important;
  border-radius: 4px !important;
  background: var(--rt-orange) !important;
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: background .15s;
  white-space: nowrap;
}
body.yellow-skin .rt-rent-btn-primary:hover {
  background: #F0692B !important;
  color: #fff !important;
  text-decoration: none !important;
}
body.yellow-skin .rt-rent-btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  height: 54px !important;
  padding: 0 22px !important;
  border-radius: 4px !important;
  border: 1.5px solid var(--rt-navy) !important;
  color: var(--rt-navy) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: background .15s;
  white-space: nowrap;
}
body.yellow-skin .rt-rent-btn-secondary:hover {
  background: rgba(30,42,71,.05) !important;
  color: var(--rt-navy) !important;
}
body.yellow-skin .rt-rent-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
body.yellow-skin .rt-rent-hero__badge {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #3F4A63 !important;
}
body.yellow-skin .rt-rent-hero__badge .material-symbols-rounded {
  font-size: 19px !important;
  color: #0B8A5E !important;
}

/* Mock room card (hero right column) */
body.yellow-skin .rt-mock-card {
  width: 100% !important;
  max-width: 420px !important;
  background: #fff !important;
  border: 1px solid #E8EAF0 !important;
  border-radius: 8px !important;
  padding: 10px !important;
  box-shadow: 0 12px 32px rgba(30,42,71,.10) !important;
  margin: 0 auto;
}
body.yellow-skin .rt-mock-card__photo {
  aspect-ratio: 4/3;
  border-radius: 6px;
  background: #E8DCCB;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
body.yellow-skin .rt-mock-card__photo-label {
  font-family: ui-monospace, Menlo, monospace !important;
  font-size: 12px !important;
  color: #7A6F60 !important;
  background: rgba(255,255,255,.7) !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
}
body.yellow-skin .rt-mock-card__body { padding: 2px 6px 6px; }
body.yellow-skin .rt-mock-card__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
body.yellow-skin .rt-mock-card__price {
  font-family: var(--rt-font-head) !important;
  font-weight: 600 !important;
  font-size: 24px !important;
  color: #0B8A5E !important;
}
body.yellow-skin .rt-mock-card__price span {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #6B7488 !important;
}
body.yellow-skin .rt-mock-card__type-badge {
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  background: #E5F6EE !important;
  color: #0B7A53 !important;
  white-space: nowrap;
}
body.yellow-skin .rt-mock-card__title {
  font-weight: 800 !important;
  font-size: 16px !important;
  color: var(--rt-navy) !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  border: none !important;
}
body.yellow-skin .rt-mock-card__meta {
  font-size: 14px !important;
  color: var(--rt-muted) !important;
}

/* ── How It Works section (white bg) ── */
body.yellow-skin .rt-how-section {
  padding: 64px 0 24px !important;
}
body.yellow-skin .rt-how-section__heading {
  font-family: var(--rt-font-head) !important;
  font-size: 34px !important;
  font-weight: 600 !important;
  color: var(--rt-navy) !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
  border: none !important;
}
body.yellow-skin .rt-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 767px) {
  body.yellow-skin .rt-steps-grid { grid-template-columns: 1fr; }
}
body.yellow-skin .rt-step {
  border: 1px solid #E8EAF0 !important;
  border-radius: 8px !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
body.yellow-skin .rt-step__num {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: #FFEDE3 !important;
  color: #C24E15 !important;
  font-family: var(--rt-font-head) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.yellow-skin .rt-step h3 {
  font-family: var(--rt-font-head) !important;
  font-size: 21px !important;
  font-weight: 600 !important;
  color: var(--rt-navy) !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  border: none !important;
}
body.yellow-skin .rt-step p {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: var(--rt-muted) !important;
}

/* ── Features / "What's included" band ── */
body.yellow-skin .rt-features-band {
  background: #F7F9FC !important;
  margin-top: 40px !important;
  padding: 56px 0 !important;
}
body.yellow-skin .rt-features-heading {
  font-family: var(--rt-font-head) !important;
  font-size: 34px !important;
  font-weight: 600 !important;
  color: var(--rt-navy) !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
  border: none !important;
}
body.yellow-skin .rt-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 32px;
}
@media (max-width: 767px) {
  body.yellow-skin .rt-features-grid { grid-template-columns: 1fr; }
}
body.yellow-skin .rt-feature {
  display: flex !important;
  gap: 14px !important;
}
body.yellow-skin .rt-feature .material-symbols-rounded {
  flex: none !important;
  font-size: 28px !important;
  color: var(--rt-orange) !important;
  margin-top: 2px !important;
}
body.yellow-skin .rt-feature__title {
  font-weight: 800 !important;
  font-size: 17px !important;
  color: var(--rt-navy) !important;
  margin: 0 0 4px !important;
}
body.yellow-skin .rt-feature__desc {
  font-size: 15.5px !important;
  line-height: 1.5 !important;
  color: var(--rt-muted) !important;
  margin: 0 !important;
}

/* ── Guide cards (3-col inside rent/* pages) ── */
body.yellow-skin .rt-guide-cards-section {
  padding: 64px 0 40px !important;
}
body.yellow-skin .rt-guide-cards-section__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
body.yellow-skin .rt-guide-cards-section__heading {
  font-family: var(--rt-font-head) !important;
  font-size: 34px !important;
  font-weight: 600 !important;
  color: var(--rt-navy) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
body.yellow-skin .rt-guide-cards-section__link {
  font-weight: 800 !important;
  font-size: 15.5px !important;
  color: var(--rt-orange) !important;
  text-decoration: none !important;
}
body.yellow-skin .rt-guide-cards-section__link:hover {
  text-decoration: underline !important;
}
body.yellow-skin .rt-guide-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 767px) {
  body.yellow-skin .rt-guide-cards-grid { grid-template-columns: 1fr; }
}
body.yellow-skin .rt-guide-card-link {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 22px !important;
  border: 1px solid #E8EAF0 !important;
  border-radius: 8px !important;
  color: var(--rt-navy) !important;
  text-decoration: none !important;
  transition: border-color .15s, box-shadow .15s;
}
body.yellow-skin .rt-guide-card-link:hover {
  border-color: #CDD2DE !important;
  box-shadow: 0 6px 18px rgba(30,42,71,.08) !important;
  color: var(--rt-navy) !important;
  text-decoration: none !important;
}
body.yellow-skin .rt-guide-card-link__label {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: #C24E15 !important;
}
body.yellow-skin .rt-guide-card-link__title {
  font-family: var(--rt-font-head) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--rt-navy) !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
body.yellow-skin .rt-guide-card-link__desc {
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: var(--rt-muted) !important;
  margin: 0 !important;
}

/* ── FAQ accordion (white bg, rent/* pages) ── */
body.yellow-skin .rt-faq-section {
  max-width: 820px;
  margin: 0 auto;
  padding: 40px 0 64px !important;
}
body.yellow-skin .rt-faq-section__heading {
  font-family: var(--rt-font-head) !important;
  font-size: 34px !important;
  font-weight: 600 !important;
  color: var(--rt-navy) !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: none !important;
}
body.yellow-skin .rt-faq-list {
  border-top: 1px solid #E8EAF0;
}
body.yellow-skin .rt-faq-list details {
  border-bottom: 1px solid #E8EAF0 !important;
}
body.yellow-skin .rt-faq-list summary {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 20px 0 !important;
  cursor: pointer !important;
  list-style: none !important;
  font-size: 17.5px !important;
  font-weight: 800 !important;
  color: var(--rt-navy) !important;
}
body.yellow-skin .rt-faq-list summary::-webkit-details-marker { display: none !important; }
body.yellow-skin .rt-faq-list summary .rt-faq-icon {
  font-size: 24px !important;
  color: #6B7488 !important;
  flex-shrink: 0;
  transition: transform .2s;
}
body.yellow-skin .rt-faq-list details[open] summary .rt-faq-icon {
  transform: rotate(45deg);
}
body.yellow-skin .rt-faq-list details p {
  margin: 0 0 20px !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--rt-muted) !important;
  max-width: 680px;
}

/* ── Navy CTA band (bottom of rent/* pages) ── */
body.yellow-skin .rt-cta-navy {
  background: var(--rt-navy) !important;
  padding: 56px 0 !important;
}
body.yellow-skin .rt-cta-navy__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
body.yellow-skin .rt-cta-navy__title {
  font-family: var(--rt-font-head) !important;
  font-size: 34px !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: none !important;
}
body.yellow-skin .rt-cta-navy__sub {
  font-size: 17px !important;
  color: #D5DAE5 !important;
  margin: 0 !important;
}
body.yellow-skin .rt-cta-navy__btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 54px !important;
  padding: 0 26px !important;
  border-radius: 4px !important;
  background: var(--rt-orange) !important;
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: background .15s;
  white-space: nowrap;
}
body.yellow-skin .rt-cta-navy__btn:hover {
  background: #F0692B !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* ── Guide sub-page: dark content area + sidebar override ── */
body.yellow-skin .rt-guide-body--dark {
  background: #fff !important;
  padding: 56px 0 72px !important;
}
body.yellow-skin .rt-guide-body--dark .rt-guide-section h2 {
  font-family: var(--rt-font-head) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--rt-navy) !important;
  margin: 32px 0 12px !important;
  padding: 0 !important;
  border: none !important;
}
body.yellow-skin .rt-guide-body--dark .rt-guide-section h2:first-child { margin-top: 0 !important; }
body.yellow-skin .rt-guide-body--dark .rt-guide-section p,
body.yellow-skin .rt-guide-body--dark .rt-guide-term p {
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: var(--rt-body) !important;
  margin: 0 0 16px !important;
}
body.yellow-skin .rt-guide-body--dark .rt-guide-term h2 {
  font-family: var(--rt-font-head) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--rt-navy) !important;
  margin: 28px 0 8px !important;
  padding: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--rt-border) !important;
  padding-bottom: 8px !important;
}
body.yellow-skin .rt-guide-body--dark .rt-guide-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
body.yellow-skin .rt-guide-body--dark .rt-guide-list li {
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
  font-size: 15.5px !important;
  color: var(--rt-body) !important;
  line-height: 1.55 !important;
}
body.yellow-skin .rt-guide-body--dark .rt-guide-list li::before {
  display: none !important;
}
body.yellow-skin .rt-guide-body--dark .rt-guide-list li .material-symbols-rounded {
  font-size: 18px !important;
  color: var(--rt-orange) !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}
body.yellow-skin .rt-guide-body--dark .rt-guide-list--questions li .material-symbols-rounded {
  color: var(--rt-teal) !important;
}
body.yellow-skin .rt-guide-body--dark .rt-guide-calc-cta {
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
  background: var(--rt-gold-tint) !important;
  border: 1px solid rgba(233,180,76,.40) !important;
  border-radius: 10px !important;
  padding: 18px !important;
  margin-top: 28px !important;
}
body.yellow-skin .rt-guide-body--dark .rt-guide-calc-cta .material-symbols-rounded {
  font-size: 26px !important;
  color: var(--rt-gold) !important;
  flex-shrink: 0 !important;
}
body.yellow-skin .rt-guide-body--dark .rt-guide-calc-cta strong {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--rt-navy) !important;
  display: block !important;
  margin-bottom: 4px !important;
}
body.yellow-skin .rt-guide-body--dark .rt-guide-calc-cta p {
  font-size: 14px !important;
  color: var(--rt-body) !important;
  margin: 0 !important;
}
body.yellow-skin .rt-guide-body--dark .rt-guide-calc-cta .rt-btn-secondary {
  margin-left: auto !important;
  white-space: nowrap !important;
  align-self: center !important;
  display: inline-flex !important;
  height: 38px !important;
  padding: 0 16px !important;
  border-radius: 6px !important;
  background: var(--rt-gold) !important;
  color: var(--rt-navy) !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  text-decoration: none !important;
  align-items: center !important;
}

/* ── Dark-band Related Guides ── */
body.yellow-skin .rt-guides--dark {
  background: var(--rt-light-band) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  margin-top: 40px !important;
}
body.yellow-skin .rt-guides--dark .rt-guides__heading {
  font-family: var(--rt-font-head) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--rt-muted) !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  border: none !important;
}
body.yellow-skin .rt-guides--dark .rt-guides__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
body.yellow-skin .rt-guides--dark .rt-card {
  background: #fff !important;
  border: 1px solid var(--rt-border) !important;
  border-radius: 10px !important;
  min-height: auto !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  align-items: center !important;
}
body.yellow-skin .rt-guides--dark .rt-card:hover {
  background: var(--rt-light-band) !important;
  transform: none !important;
  box-shadow: none !important;
}
body.yellow-skin .rt-guides--dark .rt-card__icon {
  font-size: 22px !important;
  flex-shrink: 0;
}
body.yellow-skin .rt-guides--dark .rt-card--orange .rt-card__icon { color: var(--rt-orange) !important; }
body.yellow-skin .rt-guides--dark .rt-card--purple .rt-card__icon { color: var(--rt-purple) !important; }
body.yellow-skin .rt-guides--dark .rt-card--teal   .rt-card__icon { color: var(--rt-teal) !important; }
body.yellow-skin .rt-guides--dark .rt-card__body { flex: 1; min-width: 0; }
body.yellow-skin .rt-guides--dark .rt-card__title {
  font-size: 15px !important;
  color: var(--rt-navy) !important;
  margin: 0 0 3px !important;
}
body.yellow-skin .rt-guides--dark .rt-card__desc {
  font-size: 13px !important;
  color: var(--rt-muted) !important;
}
body.yellow-skin .rt-guides--dark .rt-card__arrow {
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  font-size: 20px !important;
  color: var(--rt-muted) !important;
  flex-shrink: 0;
  margin-top: 0 !important;
}

/* ── Section divider inside dark band ── */
body.yellow-skin .rt-dark-divider {
  border: 0 !important;
  height: 1px !important;
  background: var(--rt-border) !important;
  margin: 40px 0 !important;
}