/* ═══════════════════════════════════════════════════════════════
   Realust Homepage
   Location: /wp-content/themes/kadence-child/assets/realust-home.css

   Everything is scoped under .rl-home so nothing leaks into the
   rest of the site. Colors map to your Kadence global palette, so
   changing a swatch in the Customizer changes this page too.

   VERIFY the palette slots — open the Customizer, note which slot
   each color sits in, and adjust the fallbacks below if needed.
   ═══════════════════════════════════════════════════════════════ */

.rl-home{
  --rl-wine:      var(--global-palette2, #7A1F3D);
  --rl-raspberry: var(--global-palette1, #A32A5C);
  --rl-teal:      var(--global-palette3, #2D6E70);
  --rl-navy:      var(--global-palette4, #262B45);
  --rl-slate:     var(--global-palette6, #5C5F63);
  --rl-sand:      var(--global-palette8, #F0EEEA);
  --rl-card:      var(--global-palette9, #FFFFFF);

  --rl-slate-60: color-mix(in srgb, var(--rl-slate) 62%, transparent);
  --rl-slate-40: color-mix(in srgb, var(--rl-slate) 44%, transparent);
  --rl-line:     color-mix(in srgb, var(--rl-navy) 13%, transparent);
  --rl-wine-08:  color-mix(in srgb, var(--rl-wine) 9%, transparent);
  --rl-wine-30:  color-mix(in srgb, var(--rl-wine) 30%, transparent);

  background: var(--rl-sand);
  color: var(--rl-slate);
  line-height: 1.55;
}

/* Kadence container override — these sections go edge to edge. */
.rl-home{ width:100%; max-width:none; margin-inline:0; padding-inline:0 }
.rl-wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(20px,4vw,56px) }

.rl-home *{ box-sizing:border-box }
.rl-label{ font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase }

/* ══════════ HERO ══════════ */
.rl-hero{ text-align:center; padding:clamp(38px,6vh,66px) 0 clamp(38px,5vh,58px) }
.rl-eyebrow{ color:var(--rl-wine); display:inline-block; margin-bottom:24px }

.rl-home .rl-h1{
  font-weight:800; font-size:clamp(36px,5.6vw,72px); line-height:1.02;
  letter-spacing:-.035em; color:var(--rl-navy);
  margin:0 auto 20px; max-width:13ch;
}
.rl-deck{
  font-size:clamp(16px,1.25vw,19px); color:var(--rl-slate);
  max-width:56ch; margin:0 auto 32px;
}
.rl-deck b{ color:var(--rl-navy); font-weight:700 }

/* ── AI search ── */
.rl-ai{
  max-width:770px; margin:0 auto; background:var(--rl-card);
  border:2px solid var(--rl-navy); border-radius:12px;
  display:flex; align-items:center; gap:12px; padding:6px 6px 6px 18px;
  box-shadow:0 8px 28px color-mix(in srgb, var(--rl-navy) 10%, transparent);
  text-align:left;
}
.rl-spark{ flex:none; color:var(--rl-teal) }
.rl-ai input{
  flex:1; border:none; background:none; outline:none; padding:17px 0;
  font-family:inherit; font-size:16.5px; color:var(--rl-navy); box-shadow:none;
}
.rl-ai input::placeholder{ color:var(--rl-slate-40) }
.rl-ai button{
  flex:none; border:none; cursor:pointer; background:var(--rl-wine); color:#fff;
  font-family:inherit; font-size:14.5px; font-weight:600;
  padding:16px 30px; border-radius:8px; transition:background .15s;
}
.rl-ai button:hover{ background:var(--rl-raspberry) }
.rl-ai button[disabled]{ opacity:.6; cursor:wait }

.rl-tries{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; margin-top:18px }
.rl-lbl{ color:var(--rl-slate-40) }
.rl-try{
  font-size:14px; font-family:inherit; background:var(--rl-card);
  border:1px solid var(--rl-line); border-radius:100px; padding:9px 17px;
  color:var(--rl-slate); cursor:pointer; transition:all .15s;
}
.rl-try:hover{ border-color:var(--rl-wine); color:var(--rl-wine) }

/* ── AI results ── */
.rl-answer{ max-width:770px; margin:26px auto 0; text-align:left }
.rl-answer-note{ font-size:14.5px; color:var(--rl-slate-60); margin-bottom:12px; text-align:center }
.rl-answer-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.rl-answer-list a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--rl-card); border:1px solid var(--rl-line); border-radius:10px;
  padding:14px 18px; text-decoration:none; transition:all .15s;
}
.rl-answer-list a:hover{ border-color:var(--rl-wine); transform:translateY(-1px) }
.rl-answer-name{ font-weight:600; font-size:15.5px; color:var(--rl-navy) }
.rl-answer-meta{ font-size:12.5px; color:var(--rl-slate-40) }
.rl-answer-score{ font-weight:800; font-size:20px; color:var(--rl-wine) }
.rl-answer-error{ text-align:center; font-size:14.5px; color:var(--rl-slate-60) }

/* ══════════ COMPARE ══════════ */
.rl-compare-wrap{ padding-bottom:clamp(30px,4vh,48px) }
.rl-rule{ display:flex; align-items:center; gap:16px; margin:10px 0 26px }
.rl-rule::before,.rl-rule::after{ content:""; flex:1; height:1px; background:var(--rl-line) }
.rl-rule span{ color:var(--rl-slate-40) }

.rl-card{
  background:var(--rl-card); border-radius:16px; overflow:hidden;
  box-shadow:0 3px 24px color-mix(in srgb, var(--rl-navy) 7%, transparent);
}
.rl-head{ display:grid; grid-template-columns:1fr 62px 1fr; border-bottom:1px solid var(--rl-line) }
.rl-side{ padding:28px 26px 24px; text-align:center }
.rl-select{
  font-family:inherit; font-weight:800; font-size:28px; letter-spacing:-.025em;
  color:var(--rl-navy); border:none; background:none; cursor:pointer;
  text-align:center; text-align-last:center; outline:none; max-width:100%;
  padding:0; height:auto; box-shadow:none;
}
.rl-meta{ font-size:12.5px; color:var(--rl-slate-60); margin-top:2px }
.rl-big{
  font-weight:900; font-size:60px; line-height:1; letter-spacing:-.045em;
  color:var(--rl-wine); font-variant-numeric:tabular-nums; margin-top:14px;
}
.rl-gr{ color:var(--rl-slate-60); margin-top:6px }
.rl-mid{
  display:flex; align-items:center; justify-content:center;
  background:var(--rl-navy); color:#fff; font-size:12px; font-weight:700; letter-spacing:.12em;
}

.rl-rows{ list-style:none; margin:0; padding:0 }
.rl-row{
  display:grid; grid-template-columns:44px 1fr 132px 1fr 44px;
  align-items:center; gap:12px; padding:12px 26px;
  border-bottom:1px solid var(--rl-line); font-variant-numeric:tabular-nums;
}
.rl-row:last-child{ border-bottom:none }
.rl-num{ font-weight:700; font-size:15.5px; color:var(--rl-slate-40) }
.rl-num.l{ text-align:left } .rl-num.r{ text-align:right }
.rl-num.win{ color:var(--rl-navy) }
.rl-track{ height:8px; background:var(--rl-wine-08); border-radius:100px; overflow:hidden; display:flex }
.rl-track.l{ justify-content:flex-end }
.rl-bar{ height:100%; background:var(--rl-wine-30); border-radius:100px; width:0;
  transition:width .55s cubic-bezier(.4,0,.2,1) }
.rl-bar.win{ background:var(--rl-wine) }
.rl-cat{ text-align:center; font-size:11.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--rl-slate-60) }

.rl-foot{
  display:flex; justify-content:center; gap:10px; padding:20px;
  background:var(--rl-card); border-top:1px solid var(--rl-line); flex-wrap:wrap;
}
.rl-foot-link{
  font-size:14px; font-weight:600; border:1px solid var(--rl-line);
  background:var(--rl-sand); border-radius:100px; padding:10px 20px;
  color:var(--rl-slate); text-decoration:none; transition:all .15s;
}
.rl-foot-link:hover{ border-color:var(--rl-wine); color:var(--rl-wine) }

/* ══════════ CITY GRID ══════════ */
.rl-tease{ padding:clamp(42px,6vh,66px) 0 clamp(48px,7vh,80px) }
.rl-home .rl-h2{
  font-weight:800; font-size:clamp(25px,2.7vw,36px); letter-spacing:-.028em;
  color:var(--rl-navy); text-align:center; margin:0 0 7px;
}
.rl-sub{ text-align:center; color:var(--rl-slate-60); font-size:15.5px; margin-bottom:28px }
.rl-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:10px }
.rl-ccard{
  background:var(--rl-card); border-radius:10px; padding:15px 17px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  text-decoration:none; transition:all .15s;
  box-shadow:0 1px 3px color-mix(in srgb, var(--rl-navy) 6%, transparent);
}
.rl-ccard:hover{ transform:translateY(-2px);
  box-shadow:0 6px 16px color-mix(in srgb, var(--rl-navy) 11%, transparent) }
.rl-cname{ font-weight:600; font-size:15.5px; color:var(--rl-navy); display:block }
.rl-csub{ font-size:12px; color:var(--rl-slate-40); display:block; margin-top:1px }
.rl-cscore{ font-weight:800; font-size:20px; color:var(--rl-wine); font-variant-numeric:tabular-nums }
.rl-more{ text-align:center; margin-top:26px }
.rl-more a{
  font-size:15px; font-weight:600; background:var(--rl-wine); color:#fff;
  padding:15px 32px; border-radius:8px; display:inline-block;
  text-decoration:none; transition:background .15s;
}
.rl-more a:hover{ background:var(--rl-raspberry) }

/* ══════════ RESPONSIVE ══════════ */
@media(max-width:820px){
  .rl-row{ grid-template-columns:36px 1fr 92px 1fr 36px; gap:8px; padding:11px 14px }
  .rl-cat{ font-size:9.5px; letter-spacing:.04em }
  .rl-side{ padding:20px 12px 16px }
  .rl-select{ font-size:20px }
  .rl-big{ font-size:44px }
  .rl-ai{ flex-wrap:wrap; padding:12px }
  .rl-ai input{ width:100%; flex:1 1 100%; padding:6px 0 12px }
  .rl-ai button{ width:100% }
}

@media(prefers-reduced-motion:reduce){
  .rl-bar{ transition:none }
  .rl-ccard:hover,.rl-answer-list a:hover{ transform:none }
}

/* ═══════════════════════════════════════════════════════════════
   Revisions — 2026-09-30
   ═══════════════════════════════════════════════════════════════ */

/* Example-query chips: Kadence styles buttons on :hover and was winning,
   producing wine text on a wine background. Declare all three properties
   explicitly, scoped under .rl-home so the theme cannot override. */
.rl-home .rl-try:hover,
.rl-home .rl-try:focus-visible{
  background:var(--rl-wine);
  border-color:var(--rl-wine);
  color:#fff;
}

/* City selects: no visible affordance that they were dropdowns.
   Symmetric padding keeps the label optically centred while leaving
   room for the caret on the right. */
.rl-home .rl-select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  padding:0 26px;
  border-radius:8px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23262B45' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 2px center;
  background-size:15px 15px;
  transition:background-color .15s;
}
.rl-home .rl-select:hover,
.rl-home .rl-select:focus-visible{
  background-color:var(--rl-wine-08);
}

@media(max-width:720px){
  .rl-home .rl-select{ padding:0 20px; background-size:12px 12px }
}

/* ── Caret placement, revised ─────────────────────────────────────
   The select auto-sizes to its widest option, so a right-edge caret
   sat far from short names like "Krum". realust-home.js now sets the
   width to the selected label + 80px; with border-box and 40px side
   padding the label ends exactly 40px from the right edge, and the
   caret sits inside that gap. */
.rl-home .rl-select{
  padding:0 40px;
  background-position:right 14px center;
}
@media(max-width:720px){
  .rl-home .rl-select{ padding:0 30px; background-position:right 10px center }
}

/* ── Caret padding, revised again ─────────────────────────────────
   Caret pulled further in from the edge of the hover box. The JS
   width offset moves 80 -> 100 to match: side padding is now 44px
   each, so the label still has slack and the caret sits in the gap. */
.rl-home .rl-select{
  padding:0 44px;
  background-position:right 22px center;
}
@media(max-width:720px){
  .rl-home .rl-select{ padding:0 32px; background-position:right 14px center }
}

/* ═══════════════════════════════════════════════════════════════
   Full comparison page (/compare/)
   ═══════════════════════════════════════════════════════════════ */
.rl-cmp{ padding:clamp(28px,5vh,52px) 0 }
.rl-cmp .rl-h2{ margin-bottom:6px }
.rl-cmp .rl-sub{ margin-bottom:0 }

.rl-cmp-pick{ display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; justify-content:center; margin:24px 0 32px }
.rl-cmp-pick-l{ display:flex; flex-direction:column; gap:5px; text-align:left }
.rl-cmp-pick-l .rl-label{ color:var(--rl-slate-60) }
.rl-cmp-sel{
  font-family:inherit; font-size:15px; padding:9px 12px; min-width:172px;
  border:1px solid var(--rl-line); border-radius:8px;
  background:var(--rl-card); color:var(--rl-navy);
}
.rl-cmp-go{
  font-family:inherit; font-size:15px; font-weight:700; padding:11px 24px;
  border:none; border-radius:8px; background:var(--rl-wine); color:#fff; cursor:pointer;
  transition:background .15s;
}
.rl-cmp-go:hover{ background:var(--rl-raspberry) }

.rl-cmp-heads{ display:flex; flex-wrap:wrap; gap:20px; justify-content:center; margin-bottom:34px }
.rl-cmp-head{
  flex:1 1 210px; max-width:290px; text-align:center; padding:18px;
  background:var(--rl-card); border:1px solid var(--rl-line); border-radius:12px;
}
.rl-cmp-name{ font-weight:800; font-size:22px; color:var(--rl-navy); text-decoration:none }
.rl-cmp-name:hover{ color:var(--rl-wine) }
.rl-cmp-head .rl-big{ margin-top:8px; font-size:46px }

.rl-cmp-sec{ margin:0 0 26px }
.rl-cmp-table{
  width:100%; border-collapse:collapse; font-size:14.5px;
  background:var(--rl-card); border:1px solid var(--rl-line);
  border-radius:12px; overflow:hidden;
}
.rl-cmp-table th,
.rl-cmp-table td{ padding:9px 14px; text-align:right; border-bottom:1px solid var(--rl-line) }
.rl-cmp-table thead th{
  background:var(--rl-sand); color:var(--rl-navy);
  font-weight:800; font-size:12.5px; letter-spacing:.07em; text-transform:uppercase;
}
.rl-cmp-table th[scope="row"]{ text-align:left; font-weight:600; color:var(--rl-slate) }
.rl-cmp-f{ text-align:left }
.rl-cmp-table tbody tr:last-child th,
.rl-cmp-table tbody tr:last-child td{ border-bottom:none }
.rl-cmp-table tbody tr:hover{ background:var(--rl-wine-08) }
.rl-cmp-v{ color:var(--rl-navy); font-variant-numeric:tabular-nums }
.rl-cmp-v.win{ font-weight:800; color:var(--rl-wine) }
.rl-cmp-na{ color:var(--rl-slate-40) }

@media(max-width:720px){
  .rl-cmp-table{ font-size:13px }
  .rl-cmp-table th,.rl-cmp-table td{ padding:7px 9px }
  .rl-cmp-sel{ min-width:100%; }
  .rl-cmp-pick-l{ flex:1 1 100% }
}

/* ── Fixes, round 5 ───────────────────────────────────────────────

   1. Seam above "Or put two cities head to head".
      The blank lines between shortcode blocks become anonymous line
      boxes inside .entry-content, opening a ~10px gap between two
      full-bleed sections. Not a border — a whitespace line box.
      Collapse it; .rl-home restores its own line-height.            */
.entry-content:has(> .rl-home){ line-height:0 }
.entry-content > .rl-home{ line-height:1.55 }

/*  2. Compare page: the group title cell was losing to
       ".rl-cmp-table th" on specificity, so it stayed right-aligned. */
.rl-cmp-table .rl-cmp-f{ text-align:left }

/*  3. City grid: a three-digit score could wrap ("9" / "7" on
       University Park) when the name column got tight.              */
.rl-cscore{ white-space:nowrap; flex-shrink:0 }
.rl-ccard{ gap:10px }

/* ── Cities archive: compare mode ─────────────────────────────── */
.rl-cmpmode{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:center; margin:0 0 22px }
.rl-cmpmode-btn{
  font-family:inherit; font-size:14px; font-weight:700; padding:9px 20px;
  border:1px solid var(--rl-navy); border-radius:100px;
  background:transparent; color:var(--rl-navy); cursor:pointer; transition:all .15s;
}
.rl-cmpmode-btn:hover{ background:var(--rl-navy); color:#fff }
.rl-cmpmode-btn[aria-pressed="true"]{ background:var(--rl-wine); border-color:var(--rl-wine); color:#fff }
.rl-cmpmode-hint{ font-size:13px; color:var(--rl-slate-60) }

.rl-grid.rl-picking .rl-ccard{ cursor:pointer }
.rl-ccard.is-picked{ outline:2px solid var(--rl-wine); outline-offset:-2px }

.rl-cmpbar{
  position:sticky; bottom:16px; z-index:5;
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:center;
  margin-top:24px; padding:12px 20px;
  background:var(--rl-card); border:1px solid var(--rl-line); border-radius:100px;
  box-shadow:0 6px 26px color-mix(in srgb, var(--rl-navy) 16%, transparent);
}
.rl-cmpbar-list{ font-size:14px; font-weight:600; color:var(--rl-navy) }
.rl-cmpbar-clear{
  font-family:inherit; font-size:13px; background:none; border:none;
  color:var(--rl-slate-60); cursor:pointer; text-decoration:underline;
}
.rl-cmpbar-go{
  font-size:14px; font-weight:700; padding:9px 24px; border-radius:100px;
  background:var(--rl-wine); color:#fff; text-decoration:none; transition:background .15s;
}
.rl-cmpbar-go:hover{ background:var(--rl-raspberry); color:#fff }
.rl-cmpbar-go.is-off{ background:var(--rl-slate-40); cursor:not-allowed }
.rl-cmpbar-go.is-off:hover{ background:var(--rl-slate-40) }

/* Seam above "Or put two cities head to head", properly diagnosed.
   .rl-rule carries margin-top:10px. Neither .rl-wrap nor
   .rl-compare-wrap has top padding, so that margin collapses out
   through the section and becomes a 10px gap between two full-bleed
   bands - page background showing as a thin line. Remove the source;
   the hero's 45px bottom padding already provides the breathing room. */
.rl-home .rl-rule{ margin-top:0 }

/* ── Cities archive: compare banner (full width, top of page) ──── */
.rl-cbanner{
  background:var(--rl-card);
  border-top:1px solid var(--rl-line);
  border-bottom:1px solid var(--rl-line);
  margin-bottom:clamp(26px,4vh,42px);
  transition:background .15s;
}
.rl-cbanner.is-on{ background:var(--rl-wine-08) }
.rl-cbanner-in{
  display:flex; flex-wrap:wrap; gap:16px;
  align-items:center; justify-content:space-between;
  padding-top:16px; padding-bottom:16px;
}
.rl-cbanner-l{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.rl-cbanner-r{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-left:auto }
.rl-cbanner-title{ font-weight:800; font-size:17px; color:var(--rl-navy); letter-spacing:-.01em }
.rl-cbanner-sub{ font-size:13.5px; color:var(--rl-slate-60) }
.rl-cbanner-list{ font-size:14px; font-weight:600; color:var(--rl-wine) }

@media(max-width:620px){
  .rl-cbanner-in{ gap:12px }
  .rl-cbanner-r{ width:100%; margin-left:0 }
  .rl-cmpmode-btn{ flex:1 1 auto }
}

/* ── Homepage supporting sections ─────────────────────────────── */
.rl-sec{ padding:clamp(34px,5vh,58px) 0 }
.rl-sec + .rl-sec{ padding-top:0 }
.rl-sec .rl-h2{ text-align:center }
.rl-sec .rl-sub{ text-align:center }

/* weights */
.rl-wgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px }
.rl-wtile{ background:var(--rl-card); border:1px solid var(--rl-line); border-radius:12px; padding:16px 18px }
.rl-wpct{ font-weight:900; font-size:30px; line-height:1; color:var(--rl-wine); letter-spacing:-.03em; font-variant-numeric:tabular-nums }
.rl-wpct span{ font-size:15px; font-weight:800; margin-left:1px }
.rl-wname{ font-weight:800; font-size:15px; color:var(--rl-navy); margin-top:8px }
.rl-wdesc{ font-size:13px; color:var(--rl-slate-60); margin-top:3px; line-height:1.45 }

/* leaders */
.rl-lgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px }
.rl-ltile{
  display:flex; flex-direction:column; gap:2px; text-decoration:none;
  background:var(--rl-card); border:1px solid var(--rl-line); border-radius:12px; padding:16px 18px;
  transition:border-color .15s, transform .15s;
}
.rl-ltile:hover{ border-color:var(--rl-wine); transform:translateY(-2px) }
.rl-llabel{ color:var(--rl-slate-40) }
.rl-lcity{ font-weight:800; font-size:20px; color:var(--rl-navy); letter-spacing:-.02em; margin-top:6px }
.rl-lmeta{ font-size:12.5px; color:var(--rl-slate-60) }
.rl-lscore{ font-weight:900; font-size:26px; color:var(--rl-wine); margin-top:8px; font-variant-numeric:tabular-nums }
.rl-lscore span{ font-size:13px; font-weight:700; color:var(--rl-slate-40); margin-left:2px }

/* ── Weight sliders + price disclosure ────────────────────────── */
.rl-wtile{ display:flex; flex-direction:column }
.rl-wtile .rl-wdesc{ flex:1 1 auto; min-height:2.9em }
.rl-wrange{
  -webkit-appearance:none; appearance:none; width:100%; height:4px; margin:14px 0 2px;
  border-radius:99px; background:var(--rl-wine-30); accent-color:var(--rl-wine);
  cursor:grab; outline-offset:4px;
}
.rl-wrange:active{ cursor:grabbing }
.rl-wrange::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%;
  background:var(--rl-wine); border:2px solid var(--rl-card);
  box-shadow:0 1px 4px color-mix(in srgb, var(--rl-navy) 30%, transparent);
}
.rl-wrange::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; background:var(--rl-wine);
  border:2px solid var(--rl-card);
}
.rl-wtile.is-zero{ opacity:.5 }
.rl-wtile.is-zero .rl-wpct{ color:var(--rl-slate-40) }

.rl-wprice{
  display:flex; flex-wrap:wrap; gap:18px 30px; align-items:center; justify-content:space-between;
  margin-top:14px; padding:18px 22px; border-radius:12px;
  background:var(--rl-wine-08); border:1px solid var(--rl-wine-30);
}
.rl-wprice-l{ flex:1 1 320px; min-width:0 }
.rl-wprice-l .rl-label{ color:var(--rl-wine); display:block; margin-bottom:6px }
.rl-wprice-l p{ margin:0; font-size:13.5px; line-height:1.55; color:var(--rl-slate) }
.rl-wbrackets{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none }
.rl-wbrackets li{
  display:flex; flex-direction:column; align-items:center; gap:1px;
  background:var(--rl-card); border:1px solid var(--rl-line); border-radius:9px;
  padding:8px 12px; min-width:62px;
}
.rl-wbrackets b{ font-weight:900; font-size:17px; color:var(--rl-wine); line-height:1 }
.rl-wbrackets span{ font-size:11.5px; color:var(--rl-slate-60); white-space:nowrap }

.rl-wout{ margin-top:18px }
.rl-wout-h{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:8px }
.rl-wout-h .rl-label{ color:var(--rl-slate-60) }
.rl-wout-reset{
  border:1px solid var(--rl-line); background:var(--rl-card); color:var(--rl-navy);
  font:inherit; font-size:12.5px; font-weight:700; border-radius:99px;
  padding:5px 13px; cursor:pointer; transition:background .15s, color .15s, border-color .15s;
}
.rl-wout-reset:hover{ background:var(--rl-wine); border-color:var(--rl-wine); color:#fff }
.rl-wlist{ margin:0; padding:0; list-style:none; display:grid; gap:6px }
.rl-wrow{
  display:flex; align-items:center; gap:12px;
  background:var(--rl-card); border:1px solid var(--rl-line); border-radius:10px;
  padding:10px 16px;
}
.rl-wrank{
  flex:none; width:22px; font-weight:900; font-size:13px; color:var(--rl-slate-40);
  font-variant-numeric:tabular-nums;
}
.rl-wcity{ font-weight:800; font-size:16px; color:var(--rl-navy); text-decoration:none }
.rl-wcity:hover{ color:var(--rl-wine) }
.rl-wcounty{ font-size:12.5px; color:var(--rl-slate-60); margin-right:auto }
.rl-wscore{
  flex:none; font-weight:900; font-size:21px; color:var(--rl-wine);
  font-variant-numeric:tabular-nums;
}

/* ── Four-across leader and value grids ───────────────────────── */
.rl-lgrid{ grid-template-columns:repeat(auto-fit,minmax(178px,1fr)) }
.rl-vgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px }
.rl-value .rl-csub{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
@media (max-width:560px){
  .rl-wbrackets{ width:100% }
  .rl-wbrackets li{ flex:1 1 auto }
  .rl-wcounty{ display:none }
}

/* Explicit track styling — without it the browser paints its own control
   chrome over the input background and the rail reads as an empty box. */
.rl-wrange{ background:transparent; height:18px; padding:0; border:0 }
.rl-wrange::-webkit-slider-runnable-track{
  height:4px; border-radius:99px; background:var(--rl-wine-30);
}
.rl-wrange::-webkit-slider-thumb{ margin-top:-6px }
.rl-wrange::-moz-range-track{ height:4px; border-radius:99px; background:var(--rl-wine-30) }
.rl-wrange::-moz-range-progress{ height:4px; border-radius:99px; background:var(--rl-wine) }
.rl-wrange:focus-visible{ outline:2px solid var(--rl-wine); outline-offset:6px }

/* ══ Score section, condensed: controls left, ranking right ══════
   Supersedes the earlier full-width .rl-wgrid / .rl-wprice / .rl-wout
   block above. Same class names, new layout. */
.rl-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

.rl-wcols{
  display:grid; gap:clamp(18px,2.4vw,34px); align-items:start;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
}
@media(max-width:900px){ .rl-wcols{ grid-template-columns:1fr } }

/* Controls column — one compact row per category, full-width slider */
.rl-wctl{ display:flex; flex-direction:column; gap:2px }
.rl-wgrid{ display:contents }
.rl-wtile{
  background:transparent; border:0; border-radius:0;
  padding:9px 0 11px; display:block;
}
.rl-wtile + .rl-wtile{ border-top:1px solid var(--rl-line) }
.rl-wtop{ display:flex; align-items:baseline; gap:8px; margin-bottom:2px }
.rl-wname{ font-weight:700; font-size:15px; color:var(--rl-navy); margin:0 }
.rl-wpct{ margin-left:auto; font-size:17px; font-weight:800 }
.rl-wpct span{ font-size:11px; margin-left:0 }
.rl-wtile .rl-wdesc{ min-height:0; margin:0 }

/* Info disclosure — native <details>, no JS, works on tap */
.rl-wi{ position:relative; line-height:1 }
.rl-wi summary{
  list-style:none; cursor:help; width:15px; height:15px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800; font-style:italic;
  color:var(--rl-slate-60); border:1px solid var(--rl-line); background:var(--rl-card);
}
.rl-wi summary::-webkit-details-marker{ display:none }
.rl-wi summary:hover,.rl-wi[open] summary{ color:#fff; background:var(--rl-wine); border-color:var(--rl-wine) }
.rl-wi .rl-wdesc{
  position:absolute; left:-4px; top:22px; z-index:4; width:max-content; max-width:240px;
  background:var(--rl-navy); color:#fff; font-size:12.5px; line-height:1.45;
  padding:7px 11px; border-radius:8px;
  box-shadow:0 6px 20px color-mix(in srgb, var(--rl-navy) 30%, transparent);
}

/* Price adjustment — quiet by default, numbers on request */
.rl-wprice{
  display:block; margin-top:14px; padding:11px 14px; gap:0;
  background:transparent; border:1px dashed var(--rl-wine-30); border-radius:10px;
}
.rl-wprice summary{
  list-style:none; cursor:pointer; display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline;
  font-size:12.5px; line-height:1.5; color:var(--rl-slate-60);
}
.rl-wprice summary::-webkit-details-marker{ display:none }
.rl-wprice-txt{ flex:1 1 200px; min-width:0 }
.rl-wprice-more{ font-weight:700; color:var(--rl-wine); text-decoration:underline; white-space:nowrap }
.rl-wprice[open] .rl-wprice-more{ text-decoration:none }
.rl-wprice .rl-wbrackets{ margin-top:11px }
.rl-wbrackets li{ padding:6px 10px; min-width:54px }
.rl-wbrackets b{ font-size:15px }

/* Ranking column */
.rl-wout{ margin-top:0; position:sticky; top:16px }
@media(max-width:900px){ .rl-wout{ position:static } }
.rl-wout-h{ margin-bottom:6px }
.rl-wlist{ gap:3px }
.rl-wrow{ padding:8px 14px; border-radius:9px }
.rl-wrow:nth-child(1) .rl-wscore,
.rl-wrow:nth-child(2) .rl-wscore,
.rl-wrow:nth-child(3) .rl-wscore{ font-size:23px }
.rl-wcity{ font-size:15px }
.rl-wscore{ font-size:18px }
.rl-wall{
  display:inline-block; margin-top:12px; font-size:13.5px; font-weight:700;
  color:var(--rl-wine); text-decoration:none; border-bottom:1px solid var(--rl-wine-30);
}
.rl-wall:hover{ color:var(--rl-raspberry); border-bottom-color:var(--rl-raspberry) }

/* ══ Fixed four-across grids ════════════════════════════════════ */
.rl-lgrid{ grid-template-columns:repeat(4,minmax(0,1fr)) }
.rl-vgrid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px }
@media(max-width:860px){
  .rl-lgrid,.rl-vgrid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media(max-width:430px){
  .rl-lgrid,.rl-vgrid{ grid-template-columns:1fr }
}

/* Value cards lead with price, so they do not read as the leader tiles */
.rl-vcard{
  display:flex; flex-direction:column; gap:2px; text-decoration:none;
  background:var(--rl-card); border:1px solid var(--rl-line); border-radius:12px;
  padding:16px 18px; transition:border-color .15s, transform .15s;
}
.rl-vcard:hover{ border-color:var(--rl-wine); transform:translateY(-2px) }
.rl-vprice{ font-weight:900; font-size:26px; color:var(--rl-navy); letter-spacing:-.03em; line-height:1.1 }
.rl-vname{ font-weight:800; font-size:16px; color:var(--rl-wine); margin-top:6px }
.rl-vmeta{ font-size:12.5px; color:var(--rl-slate-60) }
.rl-vscore{ margin-top:8px; font-weight:800; font-size:17px; color:var(--rl-navy); font-variant-numeric:tabular-nums }
.rl-vscore span{ font-size:12px; font-weight:700; color:var(--rl-slate-40) }

/* ══ Cities archive: make "selected" survive the hover state ════
   .rl-ccard:hover already lifts the card and turns its border wine, so
   an inset wine outline was invisible until the pointer left. Selected
   now gets its own fill and a numbered badge showing compare order. */
.rl-ccard.is-picked{
  outline:2px solid var(--rl-wine); outline-offset:-2px;
  background:var(--rl-wine-08); border-color:var(--rl-wine);
  position:relative;
}
.rl-ccard.is-picked .rl-cname,
.rl-ccard.is-picked .rl-cscore{ color:var(--rl-wine) }
.rl-ccard.is-picked::before{
  content:attr(data-pick);
  position:absolute; top:-9px; left:-9px; z-index:2;
  width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--rl-wine); color:#fff; font-size:12px; font-weight:800;
  box-shadow:0 2px 8px color-mix(in srgb, var(--rl-navy) 28%, transparent);
}
.rl-grid.rl-picking .rl-ccard{ overflow:visible }

/* ══ Score section, stacked: steppers, note, ranking ═════════════
   Supersedes the two-column .rl-wcols layout above. The controls and
   the ranking were two tall columns of equal weight competing for
   attention; stacked, the ranking clearly belongs to the block above
   it. Sliders became steppers — four across leaves ~180px of track,
   which is a whole percentage point per drag step on a phone. */
.rl-wcols{ display:block }

.rl-wctl{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px;
  flex-direction:unset;
}
.rl-wtile{
  background:var(--rl-card); border:1px solid var(--rl-line); border-radius:12px;
  padding:13px 14px 14px; display:block;
}
.rl-wtile + .rl-wtile{ border-top:1px solid var(--rl-line) }
.rl-wtile.is-zero{ opacity:.55 }

.rl-wtop{ display:flex; align-items:center; gap:6px; margin-bottom:8px }
.rl-wname{
  font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--rl-slate-60); margin:0; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rl-wi{ margin-left:auto }

.rl-wstep{ display:flex; align-items:center; justify-content:space-between; gap:6px }
.rl-wbtn{
  flex:none; width:27px; height:27px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-family:inherit; font-size:15px; font-weight:800; line-height:1;
  border:1px solid var(--rl-line); background:var(--rl-card); color:var(--rl-navy);
  transition:background .12s, color .12s, border-color .12s;
}
.rl-wbtn:hover{ background:var(--rl-wine); border-color:var(--rl-wine); color:#fff }
.rl-wbtn:active{ transform:scale(.94) }
.rl-wbtn:disabled{ opacity:.35; cursor:default }
.rl-wbtn:disabled:hover{ background:var(--rl-card); border-color:var(--rl-line); color:var(--rl-navy) }
.rl-wtile .rl-wpct{
  margin:0; font-size:25px; font-weight:900; line-height:1; color:var(--rl-wine);
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.rl-wtile .rl-wpct span{ font-size:12px; font-weight:800; margin-left:1px }
.rl-wtile.is-zero .rl-wpct{ color:var(--rl-slate-40) }

.rl-wbar{ height:4px; border-radius:99px; background:var(--rl-wine-08); margin-top:11px; overflow:hidden }
.rl-wbar i{ display:block; height:100%; border-radius:99px; background:var(--rl-wine); transition:width .2s }

/* The range input stays as the value store; steppers are the UI. */
.rl-wrange{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none }

.rl-wprice{ margin-top:12px }

/* Ranking band — full width, two columns of five */
.rl-wout{ margin-top:22px; position:static }
.rl-wlist{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px 12px }
.rl-wrow{ padding:9px 15px }

@media(max-width:820px){
  .rl-wctl{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media(max-width:700px){
  .rl-wlist{ grid-template-columns:1fr }
}
@media(max-width:380px){
  .rl-wctl{ grid-template-columns:1fr }
}

/* ══ Head-to-head card: stop the header pushing off small screens ══
   realust-home.js sizes each select in pixels (label + 100). The head
   grid was 1fr 62px 1fr, and grid items default to min-width:auto, so
   a wide name like "University Park" forced the track wider than the
   card and pushed the whole header off-screen. Let the columns shrink
   and the select truncate instead. */
.rl-head{ grid-template-columns:minmax(0,1fr) 62px minmax(0,1fr) }
.rl-side{ min-width:0 }
.rl-home .rl-select{ max-width:100%; min-width:0 }

@media(max-width:560px){
  .rl-head{ grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr) }
  .rl-side{ padding:16px 6px 14px }
  .rl-home .rl-select{ font-size:17px; padding:0 24px; background-position:right 7px center }
  .rl-big{ font-size:34px; margin-top:10px }
  .rl-mid{ font-size:10px; letter-spacing:.06em }
  .rl-meta{ font-size:11px }
  .rl-gr{ font-size:10px }
  .rl-row{ grid-template-columns:28px 1fr 78px 1fr 28px; gap:6px; padding:10px 10px }
  .rl-num{ font-size:13.5px }
  .rl-foot{ padding:14px 10px }
}

/* ══ Stepper tiles, corrected ════════════════════════════════════
   1. Kadence puts padding:12px 24px on every <button>. With
      box-sizing:border-box a 27px width still cannot go below 48px
      of horizontal padding, so the "circles" rendered 49x27. Zero
      the padding and pin all three axes. */
.rl-home .rl-wbtn{
  padding:0; width:28px; height:28px; min-width:28px; min-height:28px;
  flex:0 0 28px; border-radius:50%; line-height:1; font-size:16px;
}

/* 2. The track is a real slider again — drag it or use the steppers,
      both write the same input. The filled portion is a gradient stop
      JS keeps in sync, because WebKit has no ::-moz-range-progress. */
.rl-wbar{ display:none }
.rl-home .rl-wrange{
  position:static; width:100%; height:16px; margin:11px 0 0; padding:0; border:0;
  opacity:1; pointer-events:auto; cursor:pointer; background:transparent;
  -webkit-appearance:none; appearance:none;
}
.rl-home .rl-wrange::-webkit-slider-runnable-track{
  height:5px; border-radius:99px;
  background:linear-gradient(to right,
    var(--rl-wine) 0 var(--p,50%), var(--rl-wine-08) var(--p,50%) 100%);
}
.rl-home .rl-wrange::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; margin-top:-4.5px;
  width:14px; height:14px; border-radius:50%;
  background:var(--rl-card); border:3px solid var(--rl-wine); box-shadow:none;
}
.rl-home .rl-wrange::-moz-range-track{ height:5px; border-radius:99px; background:var(--rl-wine-08) }
.rl-home .rl-wrange::-moz-range-progress{ height:5px; border-radius:99px; background:var(--rl-wine) }
.rl-home .rl-wrange::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%;
  background:var(--rl-card); border:3px solid var(--rl-wine);
}
.rl-home .rl-wrange:focus-visible{ outline:2px solid var(--rl-wine); outline-offset:4px }

/* ══ Ranking rows ════════════════════════════════════════════════
   The theme re-adds padding-left to <ol>, which beat the earlier
   padding:0 on specificity and indented every row 34px while the
   right edge stayed flush. Flush both, and give every rank the same
   type size — the top three were larger for no reason. */
.rl-home .rl-wlist{ padding-left:0; margin-left:0; list-style:none }
.rl-wrow{ padding:11px 16px; gap:10px }
.rl-wrank{ width:24px; font-size:15px; color:var(--rl-slate-40) }
.rl-wcity{ font-size:16.5px }
.rl-wcounty{ font-size:13px }
.rl-wrow .rl-wscore,
.rl-wrow:nth-child(1) .rl-wscore,
.rl-wrow:nth-child(2) .rl-wscore,
.rl-wrow:nth-child(3) .rl-wscore{ font-size:23px }

/* ══════════ Score section v3 — one split card (30 Sep 2026) ══════════
   Navy top: the eight sliders, each in its category colour (same palette as
   the city header dial). White bottom: Top 5 with the eight category scores. */
.rl-w3 .rl-wrap{ max-width:1296px }
.rl-wcard{ border-radius:28px; overflow:hidden; background:var(--rl-card); box-shadow:0 1px 2px rgba(38,43,69,.06),0 20px 50px rgba(38,43,69,.08) }
.rl-wcard-top{ background:var(--rl-navy); padding:48px 48px 36px }
.rl-w3 .rl-wcard-top .rl-h2{ color:#fff }
.rl-w3 .rl-wcard-top .rl-sub{ color:#C9CCDA; max-width:680px; margin-left:auto; margin-right:auto }
.rl-w3 .rl-wtile{ background:#2F3553; border:1px solid rgba(255,255,255,.08); border-radius:14px }
.rl-w3 .rl-wname{ display:inline-flex; align-items:center; gap:8px; color:#C9CCDA }
.rl-w3 .rl-wdot{ width:9px; height:9px; border-radius:50%; flex:none; background:var(--cat) }
.rl-w3 .rl-wpct{ color:#fff }
.rl-w3 .rl-wtile.is-zero .rl-wpct{ color:#8A8FA8 }
.rl-w3 .rl-wbtn{ background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.16) }
.rl-w3 .rl-wbtn:hover:not(:disabled){ background:var(--cat); border-color:var(--cat); color:#fff }
.rl-w3 .rl-wbtn:disabled{ opacity:.35 }
.rl-w3 .rl-wi summary{ color:#C9CCDA; border-color:rgba(255,255,255,.25) }
.rl-w3 .rl-wdesc{ color:#C9CCDA }
.rl-w3 .rl-wrange{ accent-color:var(--cat) }
.rl-w3 .rl-wrange::-webkit-slider-runnable-track{ background:linear-gradient(90deg,var(--cat) var(--p,0%),rgba(255,255,255,.16) var(--p,0%)) }
.rl-w3 .rl-wrange::-webkit-slider-thumb{ background:#fff; border:3px solid var(--cat); box-shadow:0 1px 4px rgba(0,0,0,.35) }
.rl-w3 .rl-wrange::-moz-range-track{ height:4px; border-radius:99px; background:rgba(255,255,255,.16) }
.rl-w3 .rl-wrange::-moz-range-progress{ height:4px; border-radius:99px; background:var(--cat) }
.rl-w3 .rl-wrange::-moz-range-thumb{ background:#fff; border:3px solid var(--cat) }
.rl-w3 .rl-wprice{ background:rgba(255,255,255,.06); border:0; color:#C9CCDA }
.rl-w3 .rl-wprice summary,.rl-w3 .rl-wprice-txt{ color:#C9CCDA }
.rl-w3 .rl-wprice-more{ color:#F2B8CC }
.rl-w3 .rl-wbrackets li{ background:#2F3553; border-color:rgba(255,255,255,.1) }
.rl-w3 .rl-wbrackets b{ color:#F2B8CC }
.rl-w3 .rl-wbrackets span{ color:#C9CCDA }

.rl-wcard-bot{ padding:28px 0 10px }
.rl-w3 .rl-wout{ margin-top:0; position:static }
.rl-w3 .rl-wout-h{ padding:0 24px 12px; margin:0 }
.rl-wout-act{ display:flex; align-items:center; gap:14px }
.rl-wout-all{ font-size:14px; font-weight:700; color:var(--rl-wine); text-decoration:none; white-space:nowrap }
.rl-wout-all:hover{ text-decoration:underline }
.rl-w3 .rl-whead,
.rl-w3 .rl-wrow{ display:grid; grid-template-columns:32px minmax(150px,1fr) 112px repeat(8,minmax(60px,84px)); gap:12px; align-items:center; padding:14px 24px }
.rl-w3 .rl-whead{ padding-top:0; padding-bottom:10px; border-bottom:1px solid var(--rl-line); font-size:12px; font-weight:700; color:var(--rl-slate-60) }
.rl-w3 .rl-whead span{ display:flex; align-items:center; gap:5px; white-space:nowrap; min-width:0 }
.rl-w3 .rl-whead i{ width:8px; height:8px; border-radius:50%; flex:none }
.rl-w3 .rl-whead span:nth-child(n+4){ font-size:11px; color:var(--rl-navy); overflow:hidden; text-overflow:ellipsis }
.rl-w3 .rl-wlist{ display:block; gap:0 }
.rl-w3 .rl-wrow{ background:none; border:0; border-bottom:1px solid color-mix(in srgb, var(--rl-navy) 7%, transparent); border-radius:0 }
.rl-w3 .rl-wrow:last-child{ border-bottom:0 }
.rl-w3 .rl-wrank{ width:auto; font-size:15px }
.rl-wwho{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.rl-w3 .rl-wcity{ font-size:17px }
.rl-w3 .rl-wcounty{ margin:0; font-size:12.5px; display:block }
.rl-w3 .rl-wscore{ display:flex; align-items:baseline; gap:6px; font-size:32px; line-height:1; letter-spacing:-.03em }
.rl-wgrade{ font-size:11px; font-weight:800; letter-spacing:0; padding:2px 6px; border-radius:5px; background:var(--rl-wine-08); color:var(--rl-wine) }
.rl-wcells{ display:contents }
.rl-wcell{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.rl-wcell em{ display:none }
.rl-wcell b{ font-size:17px; font-weight:800; color:var(--rl-navy); font-variant-numeric:tabular-nums; line-height:1 }
.rl-wbar{ display:block; height:4px; border-radius:2px; background:linear-gradient(90deg,var(--c) var(--v),#EDEAE4 var(--v)) }

@media (max-width:1000px){
  .rl-wcard-top{ padding:36px 24px 28px }
  .rl-w3 .rl-whead{ display:none }
  .rl-w3 .rl-wrow{ grid-template-columns:28px minmax(0,1fr) auto; row-gap:12px; padding:16px 20px }
  .rl-wcells{ display:grid; grid-column:1/-1; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px 12px }
  .rl-wcell em{ display:flex; align-items:center; gap:5px; font-style:normal; font-size:11px; font-weight:700; color:var(--rl-slate-60); white-space:nowrap; overflow:hidden }
  .rl-wcell em i{ width:7px; height:7px; border-radius:50%; flex:none }
}
@media (max-width:560px){
  .rl-wcard{ border-radius:20px }
  .rl-wcard-top{ padding:28px 16px 22px }
  .rl-w3 .rl-wout-h{ flex-wrap:wrap; padding:0 16px 10px }
  .rl-w3 .rl-wrow{ padding:14px 16px }
  .rl-w3 .rl-wscore{ font-size:26px }
  .rl-wcells{ gap:10px 8px }
  .rl-wcell em{ font-size:10px; gap:4px }
  .rl-wcell b{ font-size:15px }
}

/* ══════════ Homepage map — [realust_map] (30 Sep 2026) ══════════ */
.rl-map .rl-wrap{ max-width:1296px }
.rl-mapcard{ display:grid; grid-template-columns:minmax(260px,340px) minmax(0,1fr); gap:40px; background:var(--rl-navy); border-radius:28px; padding:44px; color:#C9CCDA; overflow:hidden }
.rl-map-l{ display:flex; flex-direction:column; gap:16px; min-width:0 }
.rl-map-kick{ color:#E7B8C9 }
.rl-home .rl-map-h{ margin:0; font-size:clamp(28px,3.2vw,40px); line-height:1.05; font-weight:800; letter-spacing:-.03em; color:#fff }
.rl-map-p{ margin:0; font-size:15px; line-height:1.55; color:#C9CCDA }
.rl-map-by{ color:#9EA2B8; margin-top:4px }
.rl-map-lens{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px }
.rl-home .rl-lens{ display:flex; align-items:center; gap:8px; min-height:40px; padding:0 12px; margin:0; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:transparent; color:#E6E7EE; font:inherit; font-size:13px; font-weight:600; line-height:1.1; text-align:left; cursor:pointer; transition:background .15s,border-color .15s }
.rl-home .rl-lens:hover{ border-color:rgba(255,255,255,.45) }
.rl-home .rl-lens.is-on{ background:#fff; border-color:#fff; color:var(--rl-navy) }
.rl-lens i{ width:9px; height:9px; border-radius:50%; flex:none }
.rl-map-legend{ display:grid; grid-template-columns:1fr auto; gap:6px 12px; font-size:12px; color:#9EA2B8; margin-top:4px }
.rl-map-ramp{ grid-column:1/-1; height:8px; border-radius:4px }
.rl-map-lo b{ font-weight:600 }
.rl-map-all{ margin-top:auto; font-size:15px; font-weight:700; color:#fff; text-decoration:none }
.rl-map-all:hover{ text-decoration:underline }
.rl-map-r{ display:flex; flex-direction:column; gap:10px; min-width:0 }
.rl-map-box{ position:relative; width:100%; aspect-ratio:840/700 }
.rl-map-box svg{ position:absolute; inset:0; width:100%; height:100% }
.rl-mwater path{ fill:#34406B; fill-opacity:.6 }
.rl-mroads path{ fill:none; stroke:#fff; stroke-opacity:.14; stroke-width:1.2; stroke-linejoin:round; stroke-linecap:round }
.rl-mroads path.rl-mi{ stroke-opacity:.22; stroke-width:1.8 }
.rl-map-dots{ position:absolute; inset:0 }
.rl-mdot{ position:absolute; transform:translate(-50%,-50%); border-radius:50%; transition:opacity .2s,width .2s,height .2s,box-shadow .15s }
.rl-mdot.is-top{ box-shadow:0 0 0 2px var(--rl-navy),0 0 0 4px currentColor; color:#fff }
.rl-mdot.is-hover,.rl-mdot:focus-visible{ opacity:1!important; z-index:4; box-shadow:0 0 0 2px var(--rl-navy),0 0 0 5px #fff; outline:none }
.rl-mlabel{ position:absolute; transform:translate(12px,calc(-50% + var(--dy,0px))); padding:3px 8px; border-radius:99px; background:#fff; color:var(--rl-navy); font-size:12px; line-height:1.3; white-space:nowrap; z-index:3; pointer-events:none; box-shadow:0 2px 8px rgba(0,0,0,.25) }
.rl-mlabel.is-left{ transform:translate(calc(-100% - 12px),calc(-50% + var(--dy,0px))) }
.rl-mlabel b{ font-weight:800 }
.rl-map-tip{ position:absolute; z-index:6; width:260px; transform:translate(16px,-12px); padding:14px 16px; border-radius:14px; background:#fff; color:var(--rl-navy); box-shadow:0 18px 40px rgba(10,12,30,.4); pointer-events:auto }
.rl-map-tip.is-left{ transform:translate(calc(-100% - 16px),-12px) }
.rl-map-tip.is-up{ transform:translate(16px,calc(-100% + 12px)) }
.rl-map-tip.is-left.is-up{ transform:translate(calc(-100% - 16px),calc(-100% + 12px)) }
.rl-map-tip[hidden]{ display:none }
.rl-tip-h{ display:flex; justify-content:space-between; gap:12px }
.rl-tip-h a{ display:block; font-size:16px; font-weight:800; color:var(--rl-navy); text-decoration:none }
.rl-tip-h small{ display:block; font-size:12px; color:var(--rl-slate-60) }
.rl-tip-s{ text-align:right; flex:none }
.rl-tip-s small{ white-space:nowrap }
.rl-tip-s b{ display:block; font-size:30px; font-weight:900; line-height:1; color:var(--rl-wine) }
.rl-tip-c{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 14px; margin-top:10px }
.rl-tip-c span{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--rl-slate) }
.rl-tip-c i{ width:8px; height:8px; border-radius:50%; flex:none }
.rl-tip-c b{ margin-left:auto; color:var(--rl-navy) }
.rl-map-src{ margin:0; font-size:12px; color:#8A8FA8 }
@media (max-width:960px){
  .rl-mapcard{ grid-template-columns:1fr; padding:32px 24px; gap:24px }
  .rl-map-lens{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .rl-map-all{ margin-top:0 }
}
@media (max-width:560px){
  .rl-mapcard{ border-radius:20px; padding:24px 16px }
  .rl-map-lens{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .rl-map-tip{ width:220px }
  .rl-mlabel{ font-size:11px }
}