/* Deal displays (static/ui/displays.js): the deal's 3D model on a dark stage, or the real map, with the deal's
   name, its figures on glass cards, pointers fixed to the model and a timeline ring round it. */
.dd { position: absolute; inset: 0; z-index: 5; pointer-events: none; color: #e8eefc; font-family: var(--sans, Manrope, sans-serif); }
.dd-rail, .dd-step, .dd-head, .dd-top { pointer-events: auto; }
/* The box the model stands in: the stage less the room kept for the title, the figures and the switch. */
#mappane { --bt: 78px; --bb: 76px; --br: 304px; }
.dd-box { position: absolute; top: var(--bt); bottom: var(--bb); left: 0; right: var(--br); pointer-events: none; }

/* The stage: the model on a deep blue floor, lit from the middle */
.dd-stage { position: absolute; inset: 0; z-index: 4; overflow: hidden; background: radial-gradient(ellipse 62% 48% at calc((100% - var(--br)) / 2) calc(var(--bt) + (100% - var(--bt) - var(--bb)) * .6), #25408a 0%, #142657 40%, #0a1330 100%); }
.dd-stage::before { content: ""; position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(140, 165, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(140, 165, 255, .07) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 58%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 60% 55% at 50% 58%, #000 20%, transparent 75%); pointer-events: none; }
.dd-stage model-viewer { position: absolute; top: var(--bt); bottom: var(--bb); left: 0; right: var(--br); width: auto; height: auto; background: transparent; --poster-color: transparent; --progress-bar-color: transparent; --min-hotspot-opacity: .35; z-index: 1; }
.dd-under { z-index: 0; }
body.dd-on .mapnav, body.dd-on #orbit, body.dd-on .mapfull, body.dd-on .ui-tag { display: none !important; }
@media (min-width: 561px) { body.dd-on .dcard { display: none; } }
/* On the real map the title needs something dark behind it. */
body.dd-on:not(.dd-model) .dd::before { content: ""; position: absolute; inset: 0 0 auto; height: 170px; background: linear-gradient(rgba(7, 13, 31, .82), rgba(7, 13, 31, 0)); }

/* The name of the deal, top left; the way out and the full deal, top right */
.dd-head { position: absolute; left: 22px; top: 16px; display: grid; justify-items: start; max-width: calc(100% - var(--br) - 300px); }
body.no-side .dd-head { left: 60px; }
.dd-head h2 { margin: 10px 0 1px; font: 500 27px/1.12 var(--serif, Georgia, serif); color: #fff; letter-spacing: -.01em; text-wrap: balance; }
.dd-head p { margin: 0; font-size: 13.5px; color: #a9b8dc; font-variant-numeric: tabular-nums; }
.dd-top { position: absolute; right: 20px; top: 16px; display: flex; align-items: center; gap: 8px; }
.dd-back, .dd-go, .dd-seg button { border: 0; cursor: pointer; font: 600 13px/1 var(--sans, Manrope, sans-serif); height: 32px; border-radius: 999px; white-space: nowrap; }
.dd-back { padding: 0 13px; background: rgba(255, 255, 255, .1); color: #dbe4ff; box-shadow: inset 0 0 0 1px rgba(160, 180, 255, .22); }
.dd-back:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.dd-go { padding: 0 16px; background: #2f5bff; color: #fff; box-shadow: 0 6px 18px -6px rgba(47, 91, 255, .9); }
.dd-go:hover { background: #4a71ff; }
.dd-seg { display: flex; padding: 3px; border-radius: 999px; background: rgba(7, 13, 31, .7); box-shadow: inset 0 0 0 1px rgba(140, 165, 255, .25); }
.dd-seg button { height: 26px; padding: 0 11px; background: none; color: #a9b8dc; font-weight: 500; }
.dd-seg button:hover { color: #fff; }
.dd-seg button[aria-pressed="true"] { background: rgba(255, 255, 255, .16); color: #fff; font-weight: 600; }

/* Glass cards */
.dd-rail { position: absolute; top: 78px; right: 20px; width: 268px; display: grid; gap: 10px; }
.dd-card { display: grid; gap: 6px; align-content: start; padding: 14px 16px; border-radius: 14px; background: rgba(9, 17, 40, .74); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: inset 0 0 0 1px rgba(140, 165, 255, .2), 0 14px 34px -18px rgba(0, 0, 0, .8); min-width: 0; }
.dd-card small { font-size: 12px; letter-spacing: .01em; color: #9fb0d6; }
.dd-card strong { font: 500 29px/1.1 var(--serif, Georgia, serif); color: #fff; font-variant-numeric: tabular-nums; }
.dd-card strong.bad { color: #ffb4a0; }
.dd-card span { font-size: 12.5px; line-height: 1.35; color: #c4cfea; }
.dd-split { display: flex; gap: 2px; height: 10px; margin: 2px 0 4px; border-radius: 5px; overflow: hidden; }
.dd-split i, .dd-key i, .dd-bar i { background: #4d7bff; }
.dd-split i.b, .dd-key i.b, .dd-bar i.b { background: #9db1ff; } .dd-split i.c, .dd-key i.c, .dd-bar i.c { background: #6a7aa6; } .dd-split i.g, .dd-key i.g, .dd-bar i.g { background: #5dcaa5; } .dd-split i.r, .dd-key i.r, .dd-bar i.r { background: #f0997b; }
.dd-key { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.dd-key li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.dd-key i { width: 8px; height: 8px; border-radius: 2px; }
.dd-key span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-key b, .dd-bar b { font-size: 13px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.dd-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; }
.dd-bar i { grid-column: 1 / -1; height: 7px; border-radius: 4px; }
.dd-bar span { font-size: 12.5px; color: #c4cfea; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-spark { display: block; width: 100%; height: 46px; overflow: visible; }
.dd-spark polyline { fill: none; stroke: #5dcaa5; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dd-spark circle { fill: #fff; stroke: #0b1630; stroke-width: 2; }
.dd-ends { display: flex; justify-content: space-between; gap: 8px; margin: 0; }
.dd-ends span { display: grid; font-size: 12.5px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.dd-ends span + span { text-align: right; }
.dd-ends em { font-style: normal; font-weight: 400; font-size: 11.5px; color: #9fb0d6; }
.dd-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding-top: 8px; border-top: 1px solid rgba(140, 165, 255, .18); }
.dd-line span { font-size: 12.5px; color: #c4cfea; } .dd-line b { font-size: 14px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }

/* Units: one square each */
.dd-grid { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; padding: 4px 0 2px; }
.dd-grid i { width: 14px; height: 14px; border-radius: 4px; background: #4d7bff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.dd-grid em { font-style: normal; font-size: 12px; color: #c4cfea; margin-left: 2px; }

/* Cases: a card each on the stage, a bar each in the phone card */
.dd-c > i { display: block; height: 6px; border-radius: 3px; background: rgba(140, 165, 255, .16); margin: 2px 0; }
.dd-c u { display: block; height: 100%; border-radius: 3px; background: #5dcaa5; }
.dd-c.neg u { background: #f0997b; }
.dd-c.base { box-shadow: inset 0 0 0 1.5px rgba(150, 175, 255, .7), 0 14px 34px -18px rgba(0, 0, 0, .8); }
.dd-case { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.dd-case span { font-size: 13px; color: #c4cfea; }
.dd-case i { position: relative; height: 10px; border-radius: 5px; background: rgba(140, 165, 255, .14); }
.dd-case i::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: rgba(205, 216, 255, .5); }
.dd-case u { position: absolute; left: 50%; top: 0; bottom: 0; border-radius: 0 5px 5px 0; background: #5dcaa5; }
.dd-case.neg u { left: auto; right: 50%; border-radius: 5px 0 0 5px; background: #f0997b; }
.dd-case b { font-size: 13.5px; font-weight: 600; color: #fff; min-width: 62px; text-align: right; font-variant-numeric: tabular-nums; }
.dd-case.neg b { color: #ffc2b0; }

/* Pointers fixed to the model */
.dd-spot { position: relative; width: 0; height: 0; pointer-events: none; transition: opacity .25s; }
.dd-spot::before { content: ""; position: absolute; left: -.5px; bottom: 0; width: 1px; height: var(--up, 60px); background: linear-gradient(to top, #fff, rgba(190, 205, 255, .55)); }
.dd-spot i { position: absolute; left: -4.5px; top: -4.5px; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(111, 147, 255, .4), 0 0 14px 3px rgba(111, 147, 255, .8); }
.dd-spot p, .dd-ring li p, .dd-pins li p { position: absolute; margin: 0; display: grid; gap: 1px; padding: 6px 11px; border-radius: 10px; background: rgba(9, 17, 40, .84); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(140, 165, 255, .28); white-space: nowrap; }
.dd-spot p { left: 0; bottom: var(--up, 60px); transform: translateX(-50%); text-align: center; }
.dd-spot b, .dd-ring li b, .dd-pins li b { font: 500 16px/1.15 var(--serif, Georgia, serif); color: #fff; font-variant-numeric: tabular-nums; }
.dd-spot span, .dd-ring li span, .dd-pins li span { font-size: 12px; color: #c4cfea; font-variant-numeric: tabular-nums; }
.dd-spot.lead p { padding: 8px 14px; background: #2f5bff; box-shadow: 0 10px 26px -10px rgba(47, 91, 255, .95); }
.dd-spot.lead b { font-size: 20px; } .dd-spot.lead span { color: #dfe7ff; }

.dd-spot.dot::before, .dd-spot.yr::before { content: none; }
.dd-spot.dot::after { content: ""; position: absolute; left: -2.5px; top: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: rgba(170, 188, 255, .35); }
.dd-spot.dot.lit::after { left: -3.5px; top: -3.5px; width: 7px; height: 7px; background: #7d9dff; box-shadow: 0 0 9px 2px rgba(91, 134, 255, .9); }
.dd-spot.yr u { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #0b1630; color: #dbe4ff; font: 600 10px/1 var(--sans, Manrope, sans-serif); text-decoration: none; box-shadow: 0 0 0 1.5px rgba(160, 180, 255, .8); }
.dd-spot.flag i { left: -8px; top: -8px; width: 16px; height: 16px; box-shadow: 0 0 0 4px #2f5bff, 0 0 18px 5px rgba(111, 147, 255, .9); }

/* Before and after: two pictures and a line to drag across */
.dd-ba { position: absolute; inset: 18px 16px 10px; margin: 0; border-radius: 16px; overflow: hidden; pointer-events: auto; background: #0a1330; box-shadow: 0 0 0 1px rgba(140, 165, 255, .3), 0 30px 60px -30px rgba(0, 0, 0, .9); }
.dd-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dd-ba img.was { clip-path: inset(0 calc(100% - var(--cut)) 0 0); }
.dd-ba > i { position: absolute; top: 0; bottom: 0; left: var(--cut); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, .6); }
.dd-ba > i::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; color: #0c1d33; font: 600 15px/40px var(--sans, Manrope, sans-serif); text-align: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
.dd-ba > span { position: absolute; top: 12px; padding: 5px 11px; border-radius: 999px; background: rgba(7, 13, 31, .78); color: #fff; font: 600 12px/1 var(--sans, Manrope, sans-serif); }
.dd-ba > span.l { left: 12px; } .dd-ba > span.r { right: 12px; }
.dd-ba input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.dd-note { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.dd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.dd-chips button { height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #c4cfea; font: 500 12.5px/1 var(--sans, Manrope, sans-serif); cursor: pointer; }
.dd-chips button[aria-pressed="true"] { background: #fff; color: #0c1d33; font-weight: 600; }
.dd-babox { position: relative; aspect-ratio: 4 / 3; } .dd-babox .dd-ba { inset: 0; }
.dd-in .dd-chips button { background: #f1efe8; color: var(--ink-2, #445266); } .dd-in .dd-chips button[aria-pressed="true"] { background: var(--ink, #0c1d33); color: #fff; }

/* Timeline: money out hangs below the line, money in stands above it */
.dd-flow { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; position: relative; }
.dd-flow::before { content: ""; position: absolute; left: 0; right: 0; top: calc(18px + 74px + 17px); height: 1px; background: rgba(160, 180, 255, .4); }
.dd-flow li { display: grid; grid-template-rows: 18px 74px 34px 74px 18px; justify-items: center; text-align: center; min-width: 0; }
.dd-flow li > i { width: min(34px, 70%); border-radius: 5px; }
.dd-flow li > i:first-of-type { align-self: end; background: #5dcaa5; border-radius: 5px 5px 0 0; }
.dd-flow li > i:last-of-type { align-self: start; background: #6f8dff; border-radius: 0 0 5px 5px; }
.dd-flow li.out > i:first-of-type, .dd-flow li.in > i:last-of-type { visibility: hidden; }
.dd-flow li > b { font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dd-flow li > span { align-self: center; display: grid; font-size: 12px; font-weight: 600; color: #fff; line-height: 1.2; position: relative; padding: 2px 4px; background: #0b1530; border-radius: 6px; white-space: nowrap; }
.dd-flow li > span em { font-style: normal; font-weight: 400; font-size: 11px; color: #9fb0d6; }
.dd-in .dd-flow li > b, .dd-in .dd-flow li > span { color: var(--ink, #0c1d33); } .dd-in .dd-flow li > span { background: #fff; } .dd-in .dd-flow li > span em { color: var(--ink-2, #445266); }

/* Compare: a dot for every deal along a line */
.dd-strip { position: relative; height: 22px; margin: 6px 8px 0; }
.dd-strip::before { content: ""; position: absolute; left: -8px; right: -8px; top: 10px; height: 2px; border-radius: 1px; background: rgba(140, 165, 255, .25); }
.dd-strip i { position: absolute; top: 6px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: rgba(160, 180, 255, .55); }
.dd-strip i.me { top: 2px; width: 18px; height: 18px; margin-left: -9px; background: #fff; box-shadow: 0 0 0 4px #2f5bff, 0 0 16px 4px rgba(111, 147, 255, .9); z-index: 1; }
.dd-key i:not([class]), .dd-key i[class=""] { background: rgba(160, 180, 255, .55); border-radius: 50%; }
.dd-in .dd-strip::before { background: #dcd9cf; } .dd-in .dd-strip i { background: #b9c3d6; } .dd-in .dd-strip i.me { background: #1f46d6; box-shadow: 0 0 0 3px #fff, 0 0 0 4px #1f46d6; }

/* The price slider */
.dd-mark { position: relative; height: 0; margin: 0 11px; } .dd-mark i { position: absolute; left: var(--at); top: 8px; width: 2px; height: 22px; margin-left: -1px; border-radius: 1px; background: #ffd98a; }
.dd-slide { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; margin: 2px 0; background: none; cursor: pointer; pointer-events: auto; }
.dd-slide::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #5dcaa5, #4d7bff 50%, #f0997b); }
.dd-slide::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(47, 91, 255, .55), 0 4px 12px rgba(0, 0, 0, .5); }
.dd-slide::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #5dcaa5, #4d7bff 50%, #f0997b); }
.dd-slide::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(47, 91, 255, .55); }
.dd-pr { display: grid; gap: 10px; } .dd-in .dd-card { background: none; box-shadow: none; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; } .dd-in .dd-card small, .dd-in .dd-card span { color: var(--ink-2, #445266); } .dd-in .dd-card strong { color: var(--ink, #0c1d33); font-size: 24px; }

/* The timeline round the model: the far half under it, the near half and the milestones over it */
.dd-ring { position: absolute; left: 50%; top: 66%; width: min(88%, 920px); aspect-ratio: 1000 / 400; transform: translate(-50%, -50%); }
.dd-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dd-ring.far { clip-path: inset(-40px -40px 50% -40px); }
.dd-ring.near { clip-path: inset(50% -40px -40px -40px); }
.dd-ring .rest { fill: none; stroke: rgba(150, 172, 255, .2); stroke-width: 14; vector-effect: non-scaling-stroke; }
.dd-ring .track { fill: none; stroke: #5b86ff; stroke-width: 14; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.dd-ring .glow { fill: none; stroke: #5b86ff; stroke-width: 30; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .35; filter: blur(8px); }
.dd-ring.far .track { stroke: #4467d6; } .dd-ring.far .glow { opacity: .2; }
.dd-ring ol, .dd-pins { list-style: none; margin: 0; padding: 0; }
.dd-ring li, .dd-pins li { position: absolute; width: 0; height: 0; }
.dd-pins li { left: 0; top: 0; }
.dd-ring u { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; display: grid; place-items: center; background: #0b1630; color: #cdd8ff; font: 600 10px/1 var(--sans, Manrope, sans-serif); text-decoration: none; box-shadow: 0 0 0 1.5px rgba(160, 180, 255, .7); }
.dd-ring li i { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px #2f5bff, 0 0 18px 5px rgba(111, 147, 255, .9); }
.dd-ring li.t p, .dd-pins li p { left: 0; bottom: 20px; transform: translateX(-50%); text-align: center; }
.dd-ring li.b p { left: 0; top: 20px; transform: translateX(-50%); text-align: center; }
.dd-ring li.r p { left: 22px; top: 0; transform: translateY(-50%); }
.dd-ring li.l p { left: 0; bottom: 20px; transform: translateX(-22%); text-align: center; }
.dd-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.dd-steps li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.dd-steps b { font-size: 13.5px; font-weight: 600; color: #fff; } .dd-steps span { font-size: 12.5px; color: #c4cfea; }

/* The switch between views: named tabs with an arrow at each end */
.dd-step { position: absolute; left: calc((100% - var(--br)) / 2); bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(7, 13, 31, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(140, 165, 255, .25), 0 10px 28px -12px rgba(0, 0, 0, .7); white-space: nowrap; max-width: calc(100% - 24px); }
.dd-tabs { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; } .dd-tabs::-webkit-scrollbar { display: none; }
.dd-tab { flex: none; }
.dd-tab, .dd-arrow { border: 0; cursor: pointer; font: 500 13.5px/1 var(--sans, Manrope, sans-serif); }
.dd-tab { height: 34px; padding: 0 15px; border-radius: 999px; background: none; color: #c4cfea; }
.dd-tab:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.dd-tab[aria-selected="true"] { background: #fff; color: #0c1d33; font-weight: 600; }
.dd-arrow { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 18px; display: grid; place-items: center; flex: none; }
.dd-arrow:hover { background: rgba(255, 255, 255, .24); }
.dd :is(button):focus-visible { outline: 2px solid #ffd98a; outline-offset: 2px; }

/* A short window: smaller cards so the rail never reaches the bottom. */
@media (max-height: 640px) and (min-width: 901px) { .dd-rail { gap: 6px; } .dd-card { padding: 9px 13px; gap: 3px; } .dd-card strong { font-size: 22px; } }

/* A narrower window (a side pane, a tablet): the figures become a row along the bottom, so the model has the
   whole width; the menu button sits top left, so the title starts beside it. */
@media (min-width: 561px) and (max-width: 900px) {
  #mappane { --bt: 96px; --bb: 236px; --br: 0px; }
  .dd-head, body.no-side .dd-head { left: 64px; top: 14px; max-width: calc(100% - 330px); }
  .dd-head h2 { font-size: 22px; margin-top: 8px; }
  .dd-top { right: 12px; top: 14px; gap: 6px; }
  .dd-rail { top: auto; bottom: 70px; left: 12px; right: 12px; width: auto; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; align-items: stretch; }
  .dd-card { padding: 12px 13px; }
  .dd-card strong { font-size: 24px; }
  .dd-wide { grid-column: span 2; }
  .dd-tab { padding: 0 10px; font-size: 13px; }
  .dd-step { bottom: 14px; }
  .dd-ring { width: 84%; top: 66%; }
  body.dd-on .mapside { z-index: 6; }
}

/* A phone: the same views live inside the deal card, in the card's own colours. */
.dd.dd-in { position: static; inset: auto; z-index: auto; pointer-events: auto; color: var(--ink, #0c1d33); display: grid; gap: 12px; margin: 14px 0 6px; padding-top: 14px; border-top: 1px solid var(--line, #e7e4dc); }
.dd.dd-in { min-width: 0; max-width: 100%; }
.dd-in .dd-arrow { display: none; }
.dd-in .dd-step { overflow-x: auto; scrollbar-width: none; position: static; transform: none; max-width: none; justify-content: space-between; background: #f1efe8; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 4px; }
.dd-in .dd-tab { flex: 1 0 auto; padding: 0 10px; height: 36px; color: var(--ink-2, #445266); font-size: 13px; }
.dd-in .dd-tab:hover { background: rgba(12, 29, 51, .06); color: var(--ink, #0c1d33); }
.dd-in .dd-tab[aria-selected="true"] { background: #fff; color: var(--ink, #0c1d33); box-shadow: 0 1px 3px rgba(12, 29, 51, .14); }
.dd-in .dd-arrow { background: none; color: var(--ink-2, #445266); width: 28px; height: 36px; border-radius: 10px; }
.dd-in .dd-arrow:hover { background: rgba(12, 29, 51, .06); }
.dd-in .dd-tab:focus-visible, .dd-in .dd-arrow:focus-visible { outline-color: var(--blue, #1439c6); }
.dd-body { display: grid; gap: 9px; }
.dd-in .dd-bar span, .dd-in .dd-line span, .dd-in .dd-case span, .dd-in .dd-steps span { font-size: 13.5px; color: var(--ink-2, #445266); }
.dd-in .dd-bar b, .dd-in .dd-line b, .dd-in .dd-case b, .dd-in .dd-steps b { font-size: 14px; font-weight: 600; color: var(--ink, #0c1d33); }
.dd-in .dd-case.neg b { color: #a3471c; }
.dd-in .dd-bar i { background: #1f46d6; } .dd-in .dd-bar i.b { background: #7f9cff; } .dd-in .dd-bar i.c { background: #b9c3d6; } .dd-in .dd-bar i.g { background: #2f9e77; } .dd-in .dd-bar i.r { background: #d0643f; }
.dd-in .dd-line { border-top-color: var(--line, #e7e4dc); }
.dd-in .dd-case i { background: #ece9e0; } .dd-in .dd-case i::before { background: #b9b4a6; } .dd-in .dd-case u { background: #2f9e77; } .dd-in .dd-case.neg u { background: #d0643f; }
.dd-in .dd-grid i { background: #1f46d6; box-shadow: none; } .dd-in .dd-grid em { color: var(--ink-2, #445266); }
@media (max-width: 560px) { .dcard { max-height: calc(100dvh - 84px); overflow-y: auto; overscroll-behavior: contain; } .dcard:has(.dd-in) .dc-img { display: none; } .dcard:has(.dd-in) .dc-x { background: #f1efe8; } }

.dd-in .dd-key b { color: var(--ink, #0c1d33); } .dd-in .dd-key span { color: var(--ink-2, #445266); font-size: 13.5px; } .dd-in .dd-ends span { color: var(--ink, #0c1d33); } .dd-in .dd-ends em { color: var(--ink-2, #445266); }

.dd-spot.step p { background: rgba(9, 17, 40, .9); } .dd-spot.step b { font-size: 17px; }

.dd-also { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 5px; font-size: 13px; color: #e8eefc; } .dd-also li { padding-left: 14px; position: relative; } .dd-also li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: #7d9dff; }
.dd-in .dd-also { color: var(--ink, #0c1d33); } .dd-in .dd-split { height: 8px; }

/* ---- The ten layouts ---- */
.dd-eg { display: block; margin-top: 4px; font-size: 11.5px !important; color: #9fb0d6 !important; }
.dd-card strong.dd-h { font-size: 21px; line-height: 1.2; text-wrap: balance; }
.dd-slide.dd-plain::-webkit-slider-runnable-track { background: linear-gradient(90deg, #4d7bff, #5dcaa5); } .dd-slide.dd-plain::-moz-range-track { background: linear-gradient(90deg, #4d7bff, #5dcaa5); }

/* Section through a city building */
.dd-secwrap { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; }
.dd-sec { display: grid; gap: 3px; }
.dd-sec i { display: block; height: 15px; border-radius: 2px; background: #4d7bff; background-image: repeating-linear-gradient(90deg, transparent 0 9px, rgba(7, 13, 31, .55) 9px 14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.dd-sec i.at { height: 13px; margin: 0 9px; clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%); background: #b5664a; background-image: none; }
.dd-sec i.gr { height: 19px; background: #e2b84a; background-image: repeating-linear-gradient(90deg, transparent 0 20px, rgba(7, 13, 31, .5) 20px 24px); }
.dd-secwrap .dd-key li { grid-template-columns: 8px minmax(0, auto) minmax(0, 1fr); } .dd-secwrap .dd-key b { text-align: right; white-space: nowrap; }

/* Room board: a key tag for every room */
.dd-board { gap: 10px; }
.dd-keys { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dd-keys em { flex: 0 0 100%; font-style: normal; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #9fb0d6; }
.dd-keys span { position: relative; padding: 5px 10px 5px 22px; border-radius: 7px; font-size: 12.5px !important; font-weight: 600; color: #0c1d33 !important; background: #6f93ff; white-space: nowrap; }
.dd-keys span::before { content: ""; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: rgba(7, 13, 31, .7); }
.dd-keys.k0 span { background: #e2b84a; } .dd-keys.k1 span { background: #7d9dff; } .dd-keys.k2 span { background: #5dcaa5; }
.dd-in .dd-keys em { color: var(--ink-2, #445266); }

/* Room for the taller cards */
@media (min-width: 901px) {
  #mappane:has(.dd:is([data-view="rooms"], [data-view="floors"])) { --br: 0px; --bb: 300px; }
  .dd:is([data-view="rooms"], [data-view="floors"]) .dd-rail { top: auto; bottom: 76px; right: auto; left: 50%; transform: translateX(-50%); width: min(880px, calc(100% - 40px)); }
}
@media (min-width: 561px) and (max-width: 900px) {
  #mappane:has(.dd[data-view="rooms"]) { --bb: 300px; }
  #mappane:has(.dd-mail) { --bb: 400px; }
  .dd-step { max-width: calc(100% - 20px); }
}

.dd-card strong em { font: 400 13px/1 var(--sans, Manrope, sans-serif); color: #c4cfea; } .dd-in .dd-card strong em { color: var(--ink-2, #445266); }
.dd-card .dd-line:first-of-type { margin-top: 4px; } .dd-card .dd-line { padding-top: 6px; }

/* Rooms: a numbered light for each on the model, and the same number on its key tag */
.dd-spot.room::before { content: none; }
.dd-spot.room b { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 var(--sans, Manrope, sans-serif); color: #0c1d33; background: #7d9dff; box-shadow: 0 0 0 2px rgba(7, 13, 31, .85), 0 0 12px 3px rgba(125, 157, 255, .75); pointer-events: auto; cursor: default; transition: transform .12s; }
.dd-spot.room.k0 b { background: #e2b84a; box-shadow: 0 0 0 2px rgba(7, 13, 31, .85), 0 0 12px 3px rgba(226, 184, 74, .75); } .dd-spot.room.k2 b { background: #5dcaa5; box-shadow: 0 0 0 2px rgba(7, 13, 31, .85), 0 0 12px 3px rgba(93, 202, 165, .75); }
.dd-spot.room b.on { transform: scale(1.7); z-index: 2; }
.dd-keys span { padding-left: 8px; display: inline-flex; align-items: center; gap: 7px; transition: transform .12s, box-shadow .12s; } .dd-keys span::before { content: none; }
.dd-keys span u { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 3px; border-radius: 9px; background: rgba(7, 13, 31, .78); color: #fff; font-size: 10.5px; font-weight: 700; text-decoration: none; }
.dd-keys span.on { transform: translateY(-2px); box-shadow: 0 0 0 2px #fff, 0 6px 16px rgba(0, 0, 0, .5); }

/* Floor plans: the ask and the email it writes */
.dd-btn { justify-self: start; margin-top: 6px; height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: #2f5bff; color: #fff; font: 600 13.5px/1 var(--sans, Manrope, sans-serif); cursor: pointer; box-shadow: 0 6px 18px -6px rgba(47, 91, 255, .9); pointer-events: auto; }
.dd-btn:hover { background: #4a71ff; } .dd-btn[disabled] { opacity: .65; cursor: default; }
.dd-btn.ghost { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(160, 180, 255, .3); }
.dd-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.dd-mail > b { font-size: 14px; font-weight: 600; color: #fff; }
.dd-mail pre { margin: 0; max-height: 150px; overflow: auto; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .06); font: 400 12.5px/1.5 var(--sans, Manrope, sans-serif); color: #e8eefc; white-space: pre-wrap; }
.dd-in .dd-btn.ghost { background: #f1efe8; color: var(--ink, #0c1d33); box-shadow: none; } .dd-in .dd-mail > b { color: var(--ink, #0c1d33); } .dd-in .dd-mail pre { background: #f6f4ee; color: var(--ink, #0c1d33); }
@media (min-width: 561px) and (max-width: 900px) { .dd[data-view="plans"] .dd-rail:has(.dd-mail) { grid-auto-columns: minmax(0, .8fr) minmax(0, 1.6fr); } }
.dd-in .dd-eg { color: var(--ink-2, #445266) !important; }

/* Comparison: this property in the middle, similar ones in a ring round it, and a chart of rate and occupancy */
.dd-stage model-viewer { transition: transform .55s cubic-bezier(.2, .7, .2, 1), opacity .18s ease; }
.dd-stage model-viewer.swap { opacity: 0; transform: scale(.35) !important; }
#mappane:has(.dd[data-view="cmp"]) .dd-stage model-viewer { transform: translateY(-4%) scale(.5); }
#mappane:has(.dd[data-view="cmp"][data-focus="1"]) .dd-stage model-viewer { transform: translateY(-2%) scale(.66); }
.dd-ring2 { pointer-events: none; }
.dd-orb { position: absolute; width: clamp(88px, 22%, 168px); transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 1px; padding: 0 0 6px; border: 0; border-radius: 16px; background: none; color: inherit; cursor: pointer; pointer-events: auto; transition: transform .2s, background .2s; }
.dd-orb:hover { background: rgba(120, 150, 255, .12); transform: translate(-50%, -50%) scale(1.06); }
.dd-orb model-viewer { width: 100%; aspect-ratio: 4 / 3; background: transparent; --poster-color: transparent; --progress-bar-color: transparent; pointer-events: none; }
.dd-orb b { font: 500 14px/1.15 var(--serif, Georgia, serif); color: #fff; text-align: center; text-wrap: balance; }
.dd-orb span { font-size: 11.5px; color: #c4cfea; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dd-orb.me b { color: #b9ccff; } .dd-orb.me { box-shadow: inset 0 0 0 1px rgba(125, 157, 255, .5); }
.dd-seen { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); width: max-content; max-width: 100%; padding: 8px 14px; border-radius: 14px; background: rgba(9, 17, 40, .82); box-shadow: inset 0 0 0 1px rgba(140, 165, 255, .25); z-index: 2; display: grid; justify-items: center; gap: 3px; text-align: center; pointer-events: auto; }
.dd-seen > b { font: 500 22px/1.15 var(--serif, Georgia, serif); color: #fff; margin-top: 6px; } .dd-seen > span { font-size: 12.5px; color: #c4cfea; }
.dd-chart { gap: 3px; }
.dd-chart .row { display: grid; grid-template-columns: minmax(96px, 1.5fr) minmax(0, 2fr) 46px minmax(0, 1.4fr) 38px; gap: 8px; align-items: center; width: 100%; padding: 4px 6px; border: 0; border-radius: 8px; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; pointer-events: auto; }
.dd-chart .row[disabled] { cursor: default; } .dd-chart .row:not([disabled]):hover { background: rgba(120, 150, 255, .14); }
.dd-chart .row.on { background: rgba(77, 123, 255, .22); box-shadow: inset 0 0 0 1px rgba(125, 157, 255, .6); }
.dd-chart .row > span { font-size: 12.5px; color: #e8eefc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-chart .row > i { height: 9px; border-radius: 5px; background: rgba(140, 165, 255, .12); overflow: hidden; } .dd-chart .row > i u { display: block; height: 100%; border-radius: 5px; background: #8ea6c8; }
.dd-chart .row.plan > i u { background: #5dcaa5; } .dd-chart .row.me > i u { background: #4d7bff; } .dd-chart .row.avg > i u { background: #ffd98a; } .dd-chart .row > i.o u { opacity: .75; }
.dd-chart .row > b { font-size: 12.5px; font-weight: 600; color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.dd-chart .row.avg > span { color: #ffd98a; } .dd-chart .row.me > span { font-weight: 700; }
.dd-chart .hd { cursor: default; padding-bottom: 0; } .dd-chart .hd small { font-size: 11px; color: #9fb0d6; }
.dd-chart { max-height: 100%; overflow-y: auto; scrollbar-width: thin; }
.dd-chart .row { grid-template-columns: minmax(88px, 1.4fr) minmax(0, 1.2fr) 42px minmax(0, .8fr) 34px; padding: 3px 6px; }
@media (min-width: 901px) {
  #mappane:has(.dd[data-view="cmp"]) { --br: 400px; }
  .dd[data-view="cmp"] .dd-rail { width: 372px; bottom: 76px; }
}
@media (min-width: 561px) and (max-width: 900px) { #mappane:has(.dd[data-view="cmp"]) { --bb: 330px; } .dd[data-view="cmp"] .dd-rail { height: 252px; } }
.dd[data-view="cmp"] .dd-head { max-width: calc(100% - var(--br) - 44px); }
@media (max-width: 900px) { .dd[data-view="cmp"] .dd-head { max-width: calc(100% - 330px); } }
.dd-seen > b { margin: 0; }
/* While one is being looked at, the ring steps back: smaller, names only */
.dd[data-focus="1"] .dd-orb { opacity: .7; } .dd[data-focus="1"] .dd-orb:hover, .dd[data-focus="1"] .dd-orb.me { opacity: 1; } .dd[data-focus="1"] .dd-orb span { display: none; }

/* The circle the other plots stand on */
.dd-orbit { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dd-orbit ellipse { fill: none; stroke: #7d9dff; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.dd-orbit ellipse.g { stroke: #4d7bff; stroke-width: 12; opacity: .28; filter: blur(7px); }
.dd-orbit ellipse.in { stroke: rgba(160, 185, 255, .35); stroke-width: 1; stroke-dasharray: 2 6; }
.dd-orb { transform: translate(-50%, -50%) scale(var(--s, 1)); }
.dd-orb b, .dd-orb span.m { text-shadow: 0 1px 6px rgba(5, 9, 22, .95); }
.dd-orb:hover { transform: translate(-50%, -50%) scale(calc(var(--s, 1) * 1.06)); background: rgba(47, 91, 255, .2); }
.dd-orb.me { box-shadow: inset 0 0 0 1.5px rgba(125, 157, 255, .85); }
.dd-orb span.m { display: grid; grid-template-columns: 34px auto; gap: 6px; align-items: center; justify-content: center; font-size: 11.5px; color: #e8eefc; }
.dd-orb span.m em { height: 5px; border-radius: 3px; background: rgba(160, 185, 255, .2); overflow: hidden; } .dd-orb span.m u { display: block; height: 100%; background: #7d9dff; border-radius: 3px; } .dd-orb span.m.o u { background: #5dcaa5; }
.dd[data-focus="1"] .dd-orb span.m { display: none; }
@media (max-width: 900px) { #mappane:has(.dd[data-view="cmp"]) .dd-stage model-viewer { transform: translateY(-2%) scale(.44); } #mappane:has(.dd[data-view="cmp"][data-focus="1"]) .dd-stage model-viewer { transform: translateY(-2%) scale(.6); } }

/* Comparison as a map: the others lie where they are from the middle one, north up, on a faint grid */
.dd-map::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(140, 165, 255, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(140, 165, 255, .1) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 62% 60% at 50% 48%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 62% 60% at 50% 48%, #000 55%, transparent 100%); }
.dd-map > i.n { position: absolute; right: 14%; top: 4%; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 var(--sans, Manrope, sans-serif); font-style: normal; color: #cdd8ff; box-shadow: inset 0 0 0 1px rgba(160, 180, 255, .5); }
.dd-map > i.n::before { content: ""; position: absolute; left: 50%; top: -8px; margin-left: -4px; border: 4px solid transparent; border-bottom: 7px solid #cdd8ff; }
.dd-orb span.km { font-size: 10.5px; color: #9fb0d6; } .dd[data-focus="1"] .dd-orb span.km { display: none; }
.dd-map .dd-orb { transform: translate(-50%, -50%); width: clamp(84px, 18%, 140px); } .dd-map .dd-orb:hover { transform: translate(-50%, -50%) scale(1.06); }
@media (max-width: 900px) { #mappane:has(.dd[data-view="cmp"]) .dd-stage model-viewer { transform: translateY(-2%) scale(.36); } }

/* Comparison with no table: the stage is all for the properties */
#mappane:has(.dd[data-view="cmp"]) { --br: 0px !important; --bb: 76px !important; }
#mappane:has(.dd[data-view="cmp"]) .dd-stage model-viewer { transform: scale(.42) !important; }
#mappane:has(.dd[data-view="cmp"][data-focus="1"]) .dd-stage model-viewer { transform: scale(.56) !important; }
.dd[data-view="cmp"] .dd-orb { width: clamp(110px, 21%, 210px); }
.dd-mine { position: absolute; left: 50%; top: calc(var(--bt) + (100% - var(--bt) - var(--bb)) * .7); transform: translateX(-50%); display: grid; justify-items: center; pointer-events: none; text-shadow: 0 1px 6px rgba(5, 9, 22, .95); }
.dd-mine b { font: 500 18px/1.2 var(--serif, Georgia, serif); color: #b9ccff; } .dd-mine span { font-size: 12.5px; color: #e8eefc; }
.dd[data-focus="1"] .dd-mine { display: none; }

/* ---- UI pass: clearer hierarchy on the Comparison, room for the email, a fuller phone card ---- */
.dd-orb { gap: 2px; }
.dd-orb b { font-size: clamp(14px, 1.25vw, 17px); }
.dd-orb span.fig { font-size: clamp(12px, 1vw, 13.5px); color: #e8eefc; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 1px 6px rgba(5, 9, 22, .95); }
.dd-orb span.gap, .dd-cmpl span.gap { font-size: 11.5px; font-weight: 600; color: #9fb0d6; white-space: nowrap; }
.dd-orb span.gap.up, .dd-cmpl span.gap.up { color: #7fe0c0; } .dd-orb span.gap.dn, .dd-cmpl span.gap.dn { color: #ffb99f; }
.dd[data-focus="1"] .dd-orb span.fig, .dd[data-focus="1"] .dd-orb span.gap { display: none; }
.dd-orb:focus-visible { outline: 2px solid #ffd98a; outline-offset: 4px; }
.dd-mine { padding: 7px 16px; border-radius: 999px; background: #2f5bff; box-shadow: 0 10px 26px -10px rgba(47, 91, 255, .95); text-shadow: none; }
.dd-mine b { color: #fff; font-size: 17px; } .dd-mine span { color: #dfe7ff; font-size: 12.5px; }
@media (min-width: 901px) {
  #mappane:has(.dd[data-view="cmp"]) .dd-stage model-viewer { transform: scale(.5) !important; }
  #mappane:has(.dd[data-view="plans"]) { --br: 444px; }
  .dd[data-view="plans"] .dd-rail { width: 408px; } .dd[data-view="plans"] .dd-mail pre { max-height: 260px; }
}
/* Phone */
.dd-in .dd-tab { height: 40px; }
.dcard:has(.dd-in[data-view="over"]) .dc-img { display: block; height: 92px; }
.dd-in .dd-step { scroll-padding: 0 12px; } .dd-in .dd-tab:last-of-type { margin-right: 6px; }
.dd-cmpl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dd-cmpl li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 10px; border-radius: 12px; background: #f6f4ee; }
.dd-cmpl li.me { background: #e8edff; box-shadow: inset 0 0 0 1.5px #1f46d6; }
.dd-cmpl img, .dd-cmpl li > i { width: 76px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: #0f1d40; }
.dd-cmpl div { display: grid; gap: 1px; min-width: 0; }
.dd-cmpl b { font: 500 16px/1.2 var(--serif, Georgia, serif); color: var(--ink, #0c1d33); }
.dd-cmpl span { font-size: 13px; color: var(--ink-2, #445266); }
.dd-cmpl span.gap.up { color: #1c7a57; } .dd-cmpl span.gap.dn { color: #a3471c; } .dd-cmpl span.gap { color: var(--ink-2, #445266); }

/* ---- Comparison, card style: each property carries a card (name, rate large, how full as a dial) and how it differs from ours ---- */
.dd-orb { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; width: clamp(150px, 22%, 230px) !important; transition: transform .43s cubic-bezier(.3, .7, .2, 1), opacity .25s, background .2s; }
.dd-orb model-viewer { order: 3; width: 88%; }
.dd-tag { order: 1; display: grid; gap: 2px; justify-items: start; width: 100%; box-sizing: border-box; padding: 9px 12px 10px; border-radius: 12px; text-align: left; background: rgba(16, 28, 62, .88); box-shadow: inset 0 0 0 1px rgba(150, 172, 255, .3), 0 12px 26px -14px rgba(0, 0, 0, .8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.dd-tag em { font: 500 13px/1.2 var(--sans, Manrope, sans-serif); font-style: normal; color: #dbe4ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dd-tag .r { display: flex; align-items: center; gap: 4px; width: 100%; }
.dd-tag .r b { font: 600 26px/1 var(--sans, Manrope, sans-serif); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.dd-tag .r small { font-size: 12px; color: #a9b8dc; align-self: flex-end; margin-bottom: 2px; }
.dd-tag .dial { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#f5a54a calc(var(--p) * 1%), rgba(160, 185, 255, .18) 0); position: relative; flex: none; }
.dd-tag .dial::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #111d40; }
.dd-tag .dial u { position: relative; font: 700 10.5px/1 var(--sans, Manrope, sans-serif); color: #fff; text-decoration: none; }
.dd-orb span.gap { order: 2; align-self: flex-start; margin: -2px 0 0 8px; padding: 3px 9px; border-radius: 7px; font-size: 11.5px; font-weight: 700; background: rgba(160, 185, 255, .2); color: #dbe4ff; text-shadow: none; }
.dd-orb span.gap.up { background: #f5a54a; color: #1b1300; } .dd-orb span.gap.dn { background: #4aa8f5; color: #03182b; }
.dd-orb:hover { background: none; } .dd-orb:hover .dd-tag { box-shadow: inset 0 0 0 1.5px #a9c0ff, 0 14px 30px -12px rgba(47, 91, 255, .8); }
.dd-orb.going { z-index: 30; } .dd-ring2.moving .dd-orb:not(.going), .dd-ring2.moving .dd-mine { opacity: 0; }
.dd[data-focus="1"] .dd-orb { opacity: 1; width: clamp(110px, 15%, 170px) !important; } .dd[data-focus="1"] .dd-orb .dd-tag .r, .dd[data-focus="1"] .dd-orb span.gap { display: none; } .dd[data-focus="1"] .dd-orb .dd-tag { padding: 6px 10px; } .dd[data-focus="1"] .dd-orb.me .dd-tag { box-shadow: inset 0 0 0 1.5px #ffd98a; }
.dd-mine { position: absolute; left: 50%; top: calc((100% ) * .13); transform: translateX(-50%); width: clamp(170px, 24%, 250px); padding: 0; border-radius: 0; background: none; box-shadow: none; pointer-events: none; transition: opacity .25s; }
.dd-ring2 .dd-mine { top: 9%; }
.dd-tag.mine { background: rgba(22, 38, 84, .95); box-shadow: inset 0 0 0 1.5px #ffd98a, 0 16px 34px -14px rgba(0, 0, 0, .85); }
.dd-tag.mine > small { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #ffd98a; }
.dd-tag.mine em { font: 500 17px/1.2 var(--serif, Georgia, serif); color: #fff; } .dd-tag.mine .r b { font-size: 32px; } .dd-tag.mine .dial { width: 46px; height: 46px; }
.dd-stage model-viewer { transition: transform .5s cubic-bezier(.3, .7, .2, 1), opacity .3s ease; }
.dd[data-focus="1"] .dd-orb span.dd-tag { display: grid; } .dd[data-focus="1"] .dd-orb span.dd-tag em { display: block; }

/* ---- Comparison: quick and calm. Pictures round a live middle model, a lit ring under it, fine lines out ---- */
.dd-orb img { order: 3; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; margin-top: -4px; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .55)); transition: transform .25s cubic-bezier(.3, .7, .2, 1); pointer-events: none; }
.dd-orb:hover img { transform: translateY(-4px) scale(1.05); }
.dd-orb { cursor: pointer; will-change: transform; }
.dd-halo { position: absolute; left: 50%; top: 58%; width: min(46%, 520px); aspect-ratio: 2.5 / 1; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(169, 192, 255, .85), inset 0 0 0 9px rgba(77, 123, 255, .16), 0 0 34px 6px rgba(77, 123, 255, .5), inset 0 0 40px rgba(77, 123, 255, .35); pointer-events: none; }
.dd-halo::after { content: ""; position: absolute; inset: -14%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(169, 192, 255, .28); }
.dd-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dd-links line { stroke: rgba(169, 192, 255, .4); stroke-width: 1; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.dd-ring2.moving .dd-links, .dd[data-focus="1"] .dd-links { opacity: 0; }
.dd-ring2 { z-index: 0; }
.dd-orb img { transform: scale(1.3); margin-top: 6px; } .dd-orb:hover img { transform: translateY(-4px) scale(1.38); }

/* ---- Comparison as a landscape: every property stands on one drawn map; going to another slides the map ---- */
.dd-halo, .dd-links, .dd-mine { display: none !important; }
.dd-land { overflow: visible; perspective: 1400px; }
.dd-world { position: absolute; inset: 0; transition: transform .62s cubic-bezier(.45, .05, .2, 1); will-change: transform; }
.dd-ground { position: absolute; left: 50%; top: 56%; width: 260%; aspect-ratio: 1; transform: translate(-50%, -50%) rotateX(62deg) rotateZ(-38deg); pointer-events: none; -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 68%); mask-image: radial-gradient(circle, #000 30%, transparent 68%); }
.dd-ground svg { width: 100%; height: 100%; display: block; }
.dd-ground path, .dd-ground ellipse { fill: none; vector-effect: non-scaling-stroke; }
.dd-ground .f path { stroke: rgba(130, 158, 255, .09); stroke-width: 1; }
.dd-ground .c ellipse { stroke: rgba(130, 170, 255, .2); stroke-width: 1; }
.dd-ground .r path { stroke: rgba(190, 208, 255, .5); stroke-width: 2.5; stroke-linecap: round; }
.dd-land .dd-orb { width: clamp(150px, 21%, 220px) !important; transform: translate(-50%, -58%) !important; opacity: 1 !important; transition: opacity .3s; }
.dd-land .dd-orb img { transform: scale(1.18); margin-top: 2px; transition: transform .25s cubic-bezier(.3, .7, .2, 1), opacity .25s; }
.dd-land .dd-orb:not(.here):hover img { transform: translateY(-5px) scale(1.26); }
.dd-land .dd-orb.here { cursor: default; width: clamp(180px, 24%, 250px) !important; transform: translate(-50%, -128%) !important; }
.dd-land .dd-orb.here img { display: none; }
.dd-land .dd-orb.here .dd-tag { box-shadow: inset 0 0 0 1.5px #a9c0ff, 0 16px 34px -14px rgba(0, 0, 0, .85); } .dd-land .dd-orb.me .dd-tag { box-shadow: inset 0 0 0 1.5px #ffd98a, 0 16px 34px -14px rgba(0, 0, 0, .85); }
.dd-land .dd-orb.here .dd-tag .r b { font-size: 32px; }
.dd-land .dd-orb .dd-tag .r, .dd-land .dd-orb span.gap { display: flex !important; } .dd-land .dd-orb span.gap { display: inline-block !important; } .dd-land .dd-orb .dd-tag { padding: 9px 12px 10px !important; }
.dd-world.sliding .dd-orb.here .dd-tag { opacity: .0; transition: opacity .2s; }
#mappane:has(.dd[data-view="cmp"]) .dd-stage model-viewer, #mappane:has(.dd[data-view="cmp"][data-focus="1"]) .dd-stage model-viewer { transform: translateY(2%) scale(.5) !important; }
@media (max-width: 900px) { #mappane:has(.dd[data-view="cmp"]) .dd-stage model-viewer, #mappane:has(.dd[data-view="cmp"][data-focus="1"]) .dd-stage model-viewer { transform: translateY(2%) scale(.46) !important; } }
#mappane:has(.dd[data-view="cmp"]) .dd-stage model-viewer.swap { opacity: 0; transform: translateY(2%) scale(.5) !important; }
#mappane:has(.dd[data-view="cmp"]) .dd-stage { overflow: hidden; }

.dd-ground { width: 210%; top: 60%; -webkit-mask-image: radial-gradient(circle, #000 38%, transparent 70%); mask-image: radial-gradient(circle, #000 38%, transparent 70%); }
.dd-ground .p path { fill: rgba(64, 104, 220, .13); stroke: rgba(150, 178, 255, .3); stroke-width: 1; } .dd-ground .p path:nth-child(even) { fill: rgba(60, 170, 150, .1); }
.dd-ground .f path { stroke: rgba(130, 158, 255, .12); } .dd-ground .c ellipse { stroke: rgba(130, 170, 255, .28); } .dd-ground .r path { stroke: rgba(205, 220, 255, .62); stroke-width: 3; }
.dd-land .dd-orb.here { transform: translate(-50%, -168%) !important; }
#mappane:has(.dd[data-view="cmp"]) .dd-stage model-viewer, #mappane:has(.dd[data-view="cmp"][data-focus="1"]) .dd-stage model-viewer, #mappane:has(.dd[data-view="cmp"]) .dd-stage model-viewer.swap { transform: translateY(4%) scale(.44) !important; }
.dd[data-view="cmp"] { overflow: hidden; }

/* ---- Comparison, after Gemini's version: a plain grid floor, a lit platform under each property, thin lines to ours ---- */
.dd-ground { display: none !important; }
#ddUnder { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.dd-grid2 { position: absolute; left: 50%; top: 56%; width: 240%; aspect-ratio: 1; transform: translate(-50%, -50%) rotateX(60deg) rotateZ(45deg); background-image: linear-gradient(rgba(120, 150, 255, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 150, 255, .13) 1px, transparent 1px); background-size: 4% 4%; -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 62%); mask-image: radial-gradient(circle, #000 25%, transparent 62%); }
.dd-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dd-wires line { stroke: rgba(170, 190, 255, .5); stroke-width: 1.5; vector-effect: non-scaling-stroke; } .dd-wires line.up { stroke: rgba(245, 165, 74, .75); } .dd-wires line.dn { stroke: rgba(74, 168, 245, .8); }
.dd-pad { position: absolute; width: clamp(150px, 19%, 230px); aspect-ratio: 1; transform: translate(-50%, -50%) rotateX(60deg) rotateZ(45deg); border-radius: 10px; background: linear-gradient(135deg, #1b2a57, #131f45); box-shadow: 0 0 0 2px rgba(170, 190, 255, .6), 0 0 26px rgba(120, 150, 255, .35), 10px 10px 0 -1px #0c1533, 10px 10px 0 1px rgba(170, 190, 255, .35); }
.dd-pad.up { box-shadow: 0 0 0 2px #f5a54a, 0 0 26px rgba(245, 165, 74, .45), 10px 10px 0 -1px #0c1533, 10px 10px 0 1px rgba(245, 165, 74, .5); }
.dd-pad.dn { box-shadow: 0 0 0 2px #4aa8f5, 0 0 26px rgba(74, 168, 245, .45), 10px 10px 0 -1px #0c1533, 10px 10px 0 1px rgba(74, 168, 245, .5); }
.dd-pad.me { box-shadow: 0 0 0 2px #ffd98a, 0 0 30px rgba(255, 217, 138, .45), 12px 12px 0 -1px #0c1533, 12px 12px 0 1px rgba(255, 217, 138, .55), 24px 24px 0 -1px #0c1533, 24px 24px 0 1px rgba(255, 217, 138, .3); }
.dd-pad.here { width: clamp(250px, 33%, 420px); }
.dd-land { perspective: none; }
.dd-land .dd-orb { transform: translate(-50%, -60%) !important; }
.dd-land .dd-orb img { transform: scale(1.05); margin-top: -2px; }
.dd-land .dd-orb.here { transform: translate(-50%, -190%) !important; }

/* ---- Comparison, simple: live model in the middle, pictures of the others round it, cards with rate and occupancy ---- */
#mappane:has(.dd[data-view="cmp"]) .dd-stage model-viewer, #mappane:has(.dd[data-view="cmp"][data-focus="1"]) .dd-stage model-viewer { transform: translateY(5%) scale(.46) !important; }
#mappane:has(.dd[data-view="cmp"]) .dd-stage model-viewer.swap { opacity: 0; transform: translateY(5%) scale(.42) !important; }
.cx { pointer-events: none; }
.cx-mid { position: absolute; left: 50%; top: 21%; transform: translate(-50%, -50%); width: clamp(180px, 22%, 250px); }
.cx-it { position: absolute; transform: translate(-50%, -50%); width: clamp(150px, 20%, 220px); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; pointer-events: auto; }
.cx-it img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transform: scale(1.15); filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .55)); transition: transform .25s cubic-bezier(.3, .7, .2, 1); pointer-events: none; }
.cx-it:hover img { transform: translateY(-4px) scale(1.22); } .cx-it:hover .dd-tag { box-shadow: inset 0 0 0 1.5px #a9c0ff, 0 14px 30px -12px rgba(47, 91, 255, .8); }
.cx-it:focus-visible { outline: 2px solid #ffd98a; outline-offset: 4px; border-radius: 12px; }
.cx-it span.gap { align-self: flex-start; margin: -2px 0 0 8px; padding: 3px 9px; border-radius: 7px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: rgba(160, 185, 255, .2); color: #dbe4ff; }
.cx-it span.gap.up { background: #f5a54a; color: #1b1300; } .cx-it span.gap.dn { background: #4aa8f5; color: #03182b; }
.cx .dd-tag .full { font-size: 12px; font-weight: 600; color: #ffd9a8; } .cx .dd-tag .r small { margin-right: 4px; }
/* They come in from the edges when the tab opens */
@keyframes cx-in { from { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))); } to { transform: translate(-50%, -50%); } }
.cx.enter .cx-it { animation: cx-in .7s cubic-bezier(.2, .8, .2, 1) var(--d) backwards; }
@keyframes cx-pop { from { transform: translate(-50%, -30%); } to { transform: translate(-50%, -50%); } }
.cx.enter .cx-mid { animation: cx-pop .5s cubic-bezier(.2, .8, .2, 1) backwards; }
@media (prefers-reduced-motion: reduce) { .cx.enter .cx-it, .cx.enter .cx-mid { animation: none; } }
.dd[data-view="cmp"] { overflow: hidden; }
.cx-it img { order: 0; } .cx-it .dd-tag { order: 1; } .cx-it span.gap { order: 2; margin: 0 0 0 8px; }

/* ==== Light skin (6 Oct): the stage wears the app's own colours, buttons and cards, and sits on the centre line ==== */
.dd { color: var(--ink, #1c2230); }
.dd-stage { background: var(--bg, #faf9f6); }
.dd-stage::before { opacity: 1; background-image: none; -webkit-mask-image: none; mask-image: none; background: radial-gradient(ellipse 44% 30% at calc((100% - var(--br)) / 2) calc(var(--bt) + (100% - var(--bt) - var(--bb)) * .7), rgba(28, 34, 48, .075), rgba(28, 34, 48, 0) 72%); }  /* a soft floor under the model */
body.dd-on:not(.dd-model) .dd::before { height: 190px; background: linear-gradient(rgba(250, 249, 246, .96) 45%, rgba(250, 249, 246, 0)); }

/* Title and the buttons round it */
.dd-head h2 { color: var(--ink, #1c2230); }
.dd-head p { color: var(--ink-2, #4b5261); }
.dd-back, .dd-go, .dd-seg button { height: 34px; border-radius: 9px; font: 600 13px/1 var(--sans, Manrope, sans-serif); }
.dd-back { padding: 0 13px; background: #fff; color: var(--ink-2, #4b5261); box-shadow: inset 0 0 0 1px var(--line, #e8e5dd); }
.dd-back:hover { background: #fff; color: var(--ink, #1c2230); box-shadow: inset 0 0 0 1px var(--ink-2, #4b5261); }
.dd-go { padding: 0 16px; background: var(--blue, #1f46d6); color: #fff; box-shadow: none; }
.dd-go:hover { background: #1a3bb8; }
.dd-seg { padding: 3px; border-radius: 11px; background: #f1efe8; box-shadow: none; }
.dd-seg button { height: 28px; padding: 0 12px; border-radius: 8px; color: var(--ink-2, #4b5261); font-weight: 500; }
.dd-seg button:hover { color: var(--ink, #1c2230); }
.dd-seg button[aria-pressed="true"] { background: #fff; color: var(--ink, #1c2230); font-weight: 600; box-shadow: 0 1px 3px rgba(12, 29, 51, .14); }
.dd :is(button):focus-visible, .dd-orb:focus-visible, .cx-it:focus-visible { outline-color: var(--blue, #1f46d6); }

/* Cards: white, one hairline, the same numerals as the rest of the app */
.dd-card { padding: 16px 18px; border-radius: 14px; background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--line, #e8e5dd); }
.dd-card small { color: var(--ink-2, #4b5261); }
.dd-card strong { color: var(--ink, #1c2230); } .dd-card strong.bad { color: #b3261e; }
.dd-card span, .dd-card strong em, .dd-bar span, .dd-line span, .dd-case span, .dd-steps span, .dd-grid em, .dd-ends em { color: var(--ink-2, #4b5261); }
.dd-line { border-top-color: var(--line, #e8e5dd); }
.dd-line b, .dd-key b, .dd-bar b, .dd-case b, .dd-steps b, .dd-ends span, .dd-mail > b { color: var(--ink, #1c2230); }
.dd-case.neg b { color: #a3471c; }
.dd-split i, .dd-key i, .dd-bar i, .dd-grid i { background: #1f46d6; box-shadow: none; }
.dd-split i.b, .dd-key i.b, .dd-bar i.b { background: #7f9cff; } .dd-split i.c, .dd-key i.c, .dd-bar i.c { background: #b9c3d6; } .dd-split i.g, .dd-key i.g, .dd-bar i.g { background: #2f9e77; } .dd-split i.r, .dd-key i.r, .dd-bar i.r { background: #d0643f; }
.dd-key i:not([class]), .dd-key i[class=""] { background: #b9c3d6; }
.dd-spark polyline { stroke: #2f9e77; } .dd-spark circle { fill: #1f46d6; stroke: #fff; }
.dd-c > i, .dd-case i { background: #ece9e0; } .dd-case i::before { background: #b9b4a6; }
.dd-c u, .dd-case u { background: #2f9e77; } .dd-c.neg u, .dd-case.neg u { background: #d0643f; }
.dd-c.base { box-shadow: inset 0 0 0 1.5px var(--blue, #1f46d6); }
.dd-also { color: var(--ink, #1c2230); } .dd-also li::before { background: var(--blue, #1f46d6); }
.dd-eg { color: var(--mute, #8a8f99) !important; }
.dd-keys em { color: var(--ink-2, #4b5261); }
.dd-keys span.on { box-shadow: 0 0 0 2px var(--ink, #1c2230), 0 6px 14px rgba(12, 29, 51, .18); }
.dd-chips button { background: #f1efe8; color: var(--ink-2, #4b5261); } .dd-chips button[aria-pressed="true"] { background: var(--ink, #1c2230); color: #fff; }
.dd-btn { border-radius: 9px; background: var(--blue, #1f46d6); box-shadow: none; } .dd-btn:hover { background: #1a3bb8; }
.dd-btn.ghost { background: #fff; color: var(--ink, #1c2230); box-shadow: inset 0 0 0 1px var(--line, #e8e5dd); } .dd-btn.ghost:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--ink-2, #4b5261); }
.dd-mail pre { background: #f6f4ee; color: var(--ink, #1c2230); }
.dd-chart .row > span { color: var(--ink, #1c2230); } .dd-chart .row > b { color: var(--ink, #1c2230); } .dd-chart .hd small { color: var(--mute, #8a8f99); }
.dd-chart .row > i { background: #ece9e0; } .dd-chart .row > i u { background: #b9c3d6; }
.dd-chart .row.plan > i u { background: #2f9e77; } .dd-chart .row.me > i u { background: #1f46d6; } .dd-chart .row.avg > i u { background: #d99a2b; } .dd-chart .row.avg > span { color: #8a5a00; }
.dd-chart .row:not([disabled]):hover { background: rgba(12, 29, 51, .05); } .dd-chart .row.on { background: var(--blue-soft, #eef2fe); box-shadow: inset 0 0 0 1px var(--blue, #1f46d6); }

/* The switch between views: the app's own segmented control */
.dd-step { padding: 4px; gap: 2px; border-radius: 13px; background: #f1efe8; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.dd-tab { height: 34px; border-radius: 9px; color: var(--ink-2, #4b5261); }
.dd-tab:hover { color: var(--ink, #1c2230); background: rgba(12, 29, 51, .06); }
.dd-tab[aria-selected="true"] { background: #fff; color: var(--ink, #1c2230); box-shadow: 0 1px 3px rgba(12, 29, 51, .14); }
.dd-arrow { border-radius: 9px; background: none; color: var(--ink-2, #4b5261); } .dd-arrow:hover { background: rgba(12, 29, 51, .06); color: var(--ink, #1c2230); }
body.dd-on:not(.dd-model) .dd-step, body.dd-on:not(.dd-model) .dd-seg { box-shadow: 0 0 0 1px var(--line, #e8e5dd), 0 6px 18px -10px rgba(12, 29, 51, .35); }  /* over the real map they need an edge */

/* Pointers on the model */
.dd-spot::before { background: rgba(28, 34, 48, .4); }
.dd-spot i { background: var(--blue, #1f46d6); box-shadow: 0 0 0 3px #fff, 0 1px 5px rgba(12, 29, 51, .4); }
.dd-spot p, .dd-ring li p, .dd-pins li p, .dd-spot.step p { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--line, #e8e5dd), 0 8px 18px -10px rgba(12, 29, 51, .35); }
.dd-spot b, .dd-ring li b, .dd-pins li b { color: var(--ink, #1c2230); }
.dd-spot span, .dd-ring li span, .dd-pins li span { color: var(--ink-2, #4b5261); }
.dd-spot.lead p { background: var(--blue, #1f46d6); box-shadow: 0 10px 20px -12px rgba(31, 70, 214, .85); } .dd-spot.lead b { color: #fff; } .dd-spot.lead span { color: #dfe7ff; }
.dd-spot.dot::after { background: rgba(28, 34, 48, .28); } .dd-spot.dot.lit::after { background: var(--blue, #1f46d6); box-shadow: 0 0 0 2px #fff; }
.dd-spot.yr u { background: #fff; color: var(--ink, #1c2230); box-shadow: 0 0 0 1.5px var(--ink-2, #4b5261); }
.dd-spot.flag i { box-shadow: 0 0 0 4px var(--blue, #1f46d6); }
.dd-spot.room b, .dd-spot.room.k0 b, .dd-spot.room.k2 b { box-shadow: 0 0 0 2px #fff, 0 1px 5px rgba(12, 29, 51, .4); }

/* Comparison */
.dd-tag, .dd-tag.mine { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--line, #e8e5dd), 0 10px 22px -16px rgba(12, 29, 51, .4); }
.dd-tag.mine { box-shadow: inset 0 0 0 1.5px var(--blue, #1f46d6), 0 12px 26px -16px rgba(12, 29, 51, .45); }
.dd-tag em { color: var(--ink-2, #4b5261); } .dd-tag.mine em, .dd-tag .r b, .dd-tag .dial u { color: var(--ink, #1c2230); }
.dd-tag .r small { color: var(--mute, #8a8f99); } .dd-tag.mine > small { color: var(--blue, #1f46d6); }
.dd-tag .dial { background: conic-gradient(#d98a2b calc(var(--p) * 1%), #ece9e0 0); } .dd-tag .dial::before { background: #fff; }
.cx .dd-tag .full { color: #8a5a00; }
.cx-it img { filter: drop-shadow(0 10px 12px rgba(12, 29, 51, .22)); }
.cx-it:hover .dd-tag { box-shadow: inset 0 0 0 1.5px var(--blue, #1f46d6), 0 12px 26px -14px rgba(31, 70, 214, .45); }
.cx-it span.gap { background: #eef0f4; color: var(--ink-2, #4b5261); } .cx-it span.gap.up { background: #fbe7cf; color: #8a4b00; } .cx-it span.gap.dn { background: #dbe7fb; color: #1e4fa3; }
.dd-grid2 { background-image: linear-gradient(rgba(28, 34, 48, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(28, 34, 48, .06) 1px, transparent 1px); }
.dd-wires line { stroke: rgba(28, 34, 48, .25); } .dd-wires line.up { stroke: rgba(217, 138, 43, .85); } .dd-wires line.dn { stroke: rgba(31, 70, 214, .6); }

/* A wide window: the model has the whole stage. The name on the centre line at the top, the way back top left, the
   switch and the full deal top right, the figures as cards in the two bottom corners, the tabs between them. */
@media (min-width: 901px) {
  #mappane { --bt: 124px; --bb: 92px; --br: 0px; }
  .dd-head, body.no-side .dd-head { left: 0; right: 0; top: 16px; max-width: none; padding: 0 24px; justify-items: center; text-align: center; pointer-events: none; }
  .dd[data-view="cmp"] .dd-head { max-width: none; }
  .dd-head > * { pointer-events: auto; }
  .dd-back { position: absolute; left: 24px; top: 0; } body.no-side .dd-back { left: 64px; }
  .dd-head h2 { margin: 44px 0 2px; font-size: 28px; }
  .dd-top { right: 24px; top: 16px; }
  .dd-step { left: 50%; bottom: 22px; }
  .dd-rail, .dd[data-view="plans"] .dd-rail, .dd[data-view="cmp"] .dd-rail, .dd:is([data-view="rooms"], [data-view="floors"]) .dd-rail { top: auto; bottom: 84px; left: 24px; right: 24px; width: auto; transform: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; pointer-events: none; }
  .dd-rail > * { pointer-events: auto; flex: 0 0 auto; width: 272px; }
  .dd-card { padding: 14px 16px; gap: 5px; } .dd-card strong { font-size: 26px; } .dd-card .dd-line { padding-top: 6px; }
  /* Three cases: side by side, under the model */
  #mappane:has(.dd[data-view="cases"]) { --bb: 214px; }
  .dd[data-view="cases"] .dd-rail { justify-content: center; } .dd[data-view="cases"] .dd-rail > * { width: 196px; }
  /* The room board, the floors and the floor-plan ask take the middle */
  .dd:is([data-view="rooms"], [data-view="floors"], [data-view="plans"], [data-view="cmp"]) .dd-rail { justify-content: center; }
  .dd:is([data-view="rooms"], [data-view="floors"]) .dd-rail > * { width: min(880px, 100%); }
  #mappane:has(.dd[data-view="plans"]) { --br: 0px; --bb: 236px; }
  .dd[data-view="plans"] .dd-rail > * { width: min(440px, 100%); }
  #mappane:has(.dd-mail) { --bb: 400px; }
  .dd[data-view="plans"] .dd-rail:has(.dd-mail) > .dd-mail { width: min(600px, 58%); } .dd[data-view="plans"] .dd-mail pre { max-height: 190px; }
  .dd[data-view="cmp"] .dd-rail > * { width: min(720px, 100%); }
}
/* Room to spare: the name moves up beside the buttons, and the corner cards line up with the tabs. */
@media (min-width: 1440px) {
  #mappane { --bt: 92px; --bb: 84px; }
  .dd-head h2 { margin-top: 1px; max-width: calc(100% - 660px); }
  .dd-rail { bottom: 22px; }
  .dd:is([data-view="cases"], [data-view="rooms"], [data-view="floors"], [data-view="plans"], [data-view="cmp"]) .dd-rail { bottom: 84px; }
}
@media (min-width: 901px) and (max-height: 700px) {
  .dd-card { padding: 10px 14px; gap: 3px; } .dd-card strong { font-size: 22px; } .dd-card .dd-line { padding-top: 4px; }
  .dd-head h2 { font-size: 24px; }
}
@media (max-width: 560px) { .dd-in .dd-tab { padding: 0 8px; font-size: 12.5px; } }

/* Comparison: ours in the middle and named at the top; the others in a column either side, one tidy card each
   (picture, name, rate, how full, and how it differs from ours). */
#mappane:has(.dd[data-view="cmp"]) .dd-stage model-viewer, #mappane:has(.dd[data-view="cmp"][data-focus="1"]) .dd-stage model-viewer { transform: translateY(4%) scale(.6) !important; }
#mappane:has(.dd[data-view="cmp"]) .dd-stage model-viewer.swap { opacity: 0; transform: translateY(4%) scale(.54) !important; }
.cx-mid { top: 0; transform: translate(-50%, 0); width: auto; max-width: min(420px, 60%); }
.cx-mid .dd-tag { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 14px; white-space: nowrap; }
.cx-mid .dd-tag > small { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cx-mid .dd-tag em { font: 500 16px/1.2 var(--serif, Georgia, serif); overflow: hidden; text-overflow: ellipsis; }
.cx-mid .dd-tag .r { width: auto; gap: 4px; } .cx-mid .dd-tag .r b, .dd-tag.mine .r b { font-size: 20px; } .cx-mid .dd-tag .dial, .dd-tag.mine .dial { width: 34px; height: 34px; margin-left: 6px; }
.cx .dd-tag .full { display: none; }  /* the dial already says it */
.cx-it { display: grid; grid-template-columns: 86px minmax(0, 1fr); grid-template-areas: "img tag" "img gap"; align-items: center; gap: 2px 12px; width: 268px; padding: 9px 12px 9px 9px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line, #e8e5dd); text-align: left; transform: translate(0, -50%); transition: box-shadow .15s; }
.cx-it.lt { left: 24px !important; } .cx-it.rt { left: auto !important; right: 24px; }
.cx-it:hover { box-shadow: inset 0 0 0 1.5px var(--blue, #1f46d6), 0 10px 22px -14px rgba(31, 70, 214, .5); }
.cx-it img, .cx-it:hover img { grid-area: img; width: 86px; aspect-ratio: 4 / 3; object-fit: cover; transform: none; filter: none; border-radius: 9px; background: #f6f4ee; }
.cx-it .dd-tag, .cx-it:hover .dd-tag { grid-area: tag; padding: 0; background: none; box-shadow: none; gap: 1px; min-width: 0; }
.cx-it .dd-tag em { font-size: 12.5px; }
.cx-it .dd-tag .r b { font-size: 20px; } .cx-it .dd-tag .dial { width: 32px; height: 32px; } .cx-it .dd-tag .dial u { font-size: 9.5px; }
.cx-it span.gap { grid-area: gap; justify-self: start; margin: 2px 0 0; padding: 2px 8px; font-size: 11px; font-weight: 600; }
@keyframes cx-side { from { opacity: 0; transform: translate(var(--from), -50%); } to { opacity: 1; transform: translate(0, -50%); } }
.cx.enter .cx-it { animation: cx-side .45s cubic-bezier(.2, .8, .2, 1) var(--d) backwards; } .cx-it.lt { --from: -28px; } .cx-it.rt { --from: 28px; }
@keyframes cx-top { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.cx.enter .cx-mid { animation: cx-top .4s cubic-bezier(.2, .8, .2, 1) backwards; }
@media (prefers-reduced-motion: reduce) { .cx.enter .cx-it, .cx.enter .cx-mid { animation: none; } }
@media (max-width: 1100px) { .cx-it { width: 228px; grid-template-columns: 64px minmax(0, 1fr); } .cx-it img, .cx-it:hover img { width: 64px; } .cx-it.lt { left: 12px !important; } .cx-it.rt { right: 12px; } #mappane:has(.dd[data-view="cmp"]) .dd-stage model-viewer, #mappane:has(.dd[data-view="cmp"][data-focus="1"]) .dd-stage model-viewer { transform: translateY(4%) scale(.46) !important; } }

/* A laptop: the corner cards would cover the model, so the Overview figures run as one slim strip under it. */
@media (min-width: 901px) and (max-width: 1439px) {
  #mappane:has(.dd[data-view="over"]) { --bb: 162px; }
  .dd[data-view="over"] .dd-rail { justify-content: center; gap: 10px; }
  .dd[data-view="over"] .dd-rail > .dd-card { width: auto; flex: 1 1 0; max-width: 540px; display: grid; grid-template-columns: minmax(0, 1.3fr); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 0 12px; padding: 10px 14px; }
  .dd[data-view="over"] .dd-card > small { grid-column: 1; grid-row: 1; line-height: 1.2; }
  .dd[data-view="over"] .dd-card > strong { grid-column: 1; grid-row: 2; font-size: 22px; white-space: nowrap; }
  .dd[data-view="over"] .dd-card > .dd-line { grid-row: 1 / span 2; display: grid; gap: 1px; align-content: center; justify-content: start; margin: 0; padding: 0 0 0 12px; border-top: 0; border-left: 1px solid var(--line, #e8e5dd); min-width: 0; }
  .dd[data-view="over"] .dd-card > .dd-line span { font-size: 11.5px; line-height: 1.2; } .dd[data-view="over"] .dd-card > .dd-line b { font-size: 14px; white-space: nowrap; }
  .dd[data-view="plan"] .dd-rail > * { width: 240px; } .dd[data-view="plan"] .dd-card strong { font-size: 22px; }
}

/* Phone: the comparison list in the app's colours */
.dd-cmpl li { background: #fff; box-shadow: inset 0 0 0 1px var(--line, #e8e5dd); }
.dd-cmpl li.me { background: var(--blue-soft, #eef2fe); box-shadow: inset 0 0 0 1.5px var(--blue, #1f46d6); }
.dd-cmpl img, .dd-cmpl li > i { background: #f1efe8; }

/* A big screen: ours stands larger between the two columns */
@media (min-width: 1440px) {
  #mappane:has(.dd[data-view="cmp"]) .dd-stage model-viewer, #mappane:has(.dd[data-view="cmp"][data-focus="1"]) .dd-stage model-viewer { transform: translateY(4%) scale(.72) !important; }
  #mappane:has(.dd[data-view="cmp"]) .dd-stage model-viewer.swap { opacity: 0; transform: translateY(4%) scale(.66) !important; }
}
/* ==== Sent straight to a deal's stage (?card=): the stage from the first frame, nothing of the map on the way in (8 Oct) ==== */
html.card-first .main, html.card-first .resizer, html.card-first .mapnav, html.card-first #orbit, html.card-first .mapfull, html.card-first .ui-tag, html.card-first .pcard, html.card-first #globe { display: none !important; } html.card-first .mappane { flex: 1 0 auto; width: auto !important; max-width: none; height: 100vh; height: 100dvh; margin: 0 !important; background: var(--bg, #faf9f6); } @media (min-width: 561px) { html.card-first .dcard { display: none; } } html.card-first .dcard[data-early] { animation: none; } .dd-stage .dd-poster0 { position: absolute; top: var(--bt); left: 0; width: calc(100% - var(--br)); height: calc(100% - var(--bt) - var(--bb)); object-fit: contain; pointer-events: none; }
/* ==== Known and our estimate on the stage's cards (8 Oct) ==== */
.dd-tr { display: inline-block; width: 7px; height: 7px; margin: 0 7px 1px 0; border-radius: 50%; background: #2e9e6b; vertical-align: middle; } .dd-tr.est { background: none; box-shadow: inset 0 0 0 1.5px #c58a1a; } strong > .dd-tr { margin: 0 0 .28em 9px; } .dd-trkey { margin: 8px 0 0; font-size: 11.5px; color: var(--ink-2, #6b7280); } .dd-trkey .dd-tr { margin-left: 0; } .dd-trkey .dd-tr + .dd-tr, .dd-trkey .dd-tr.est { margin-left: 12px; } .dd-trkey .dd-tr.known { margin-left: 0; }

/* ==== stage fixes 8 Oct, round 1 (stage_fixes_20261008/patch_stage.py) ==== */
/* A deal with no 3D model: its own picture, framed, on the app's background (no map, no pin, no Map switch). */
.dd-stage.dd-photo figure { position: absolute; top: var(--bt); bottom: var(--bb); left: 24px; right: 24px; margin: 0; display: grid; place-items: center; min-height: 0; }
.dd-stage.dd-photo img { display: block; width: min(100%, 1080px); height: 100%; min-height: 0; object-fit: cover; border-radius: 16px; background: #f1efe8; box-shadow: 0 0 0 1px var(--line, #e8e5dd), 0 18px 40px -28px rgba(12, 29, 51, .45); }
.dd-stage.dd-photo figcaption { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 5px 10px; border-radius: 8px; background: rgba(255, 255, 255, .92); color: var(--ink-2, #4b5261); font: 600 11.5px/1 var(--sans, Manrope, sans-serif); box-shadow: 0 0 0 1px var(--line, #e8e5dd); white-space: nowrap; }
.dd-stage.dd-photo.gone figure { display: none; }
.dd-stage.dd-photo::before { display: none; }
@media (min-width: 901px) { #mappane:has(.dd-photo) { --bb: 186px; } #mappane:has(.dd-photo):has(.dd:is([data-view="rooms"], [data-view="floors"])) { --bb: 330px; } #mappane:has(.dd-photo):has(.dd:is([data-view="cases"], [data-view="plans"])) { --bb: 250px; } }
@media (min-width: 1440px) { #mappane:has(.dd-photo):has(.dd[data-view="over"]) { --bb: 232px; } }
@media (min-width: 561px) and (max-width: 900px) { #mappane:has(.dd-photo) { --bt: 112px; --bb: 262px; } .dd-stage.dd-photo figure { left: 12px; right: 12px; } }
/* Comparison for a deal with no model: the ranked list alone, in the middle (no picture behind it). */
#mappane:has(.dd[data-view="cmp"]) .dd-stage.dd-photo figure { display: none; }
body.dd-model #mappane:has(.dd-photo) .cq { left: 50%; right: auto; transform: translateX(-50%); width: min(620px, calc(100% - 48px)); top: var(--bt); }
.dd-spot p { transition: transform .18s ease-out; }
/* A deal with nothing behind its figures (no model, no picture): the app's plain background, never the map. */
body.dd-plain #globe, body.dd-plain .cesium-viewer { visibility: hidden; } body.dd-plain .mappane { background: var(--bg, #faf9f6); }
body.dd-plain.dd-on .dd::before { display: none; }
/* ==== end stage fixes round 1 ==== */

/* ==== stage fixes 8 Oct, round 2 (stage_fixes_20261008/patch_stage.py) ==== */
@media (max-width: 560px) {
  /* The deal's card is the whole screen: nothing jumps from tab to tab, nothing is cut at the bottom. */
  body.portfolio .dcard { left: 0; right: 0; top: 0; bottom: 0; width: auto; max-width: none; max-height: none; border-radius: 0; box-shadow: none; background: var(--bg, #faf9f6); overflow-y: auto; overscroll-behavior: contain; animation: none; display: flex; flex-direction: column; padding: 60px 0 0; }
  .dcard .dc-x, .dcard:has(.dd-in) .dc-x { left: 60px; right: auto; top: 12px; width: 40px; height: 36px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--line, #e8e5dd); color: var(--ink-2, #4b5261); }
  .dcard .dc-x.dc-back { width: auto; padding: 0 13px; font: 600 13px/1 var(--sans, Manrope, sans-serif); white-space: nowrap; }
  body.no-side .dcard .dc-x, .dcard .dc-x { left: 64px; }
  .dcard .dc-img, .dcard:has(.dd-in) .dc-img, .dcard:has(.dd-in[data-view="over"]) .dc-img { display: block; flex: 0 0 auto; height: clamp(170px, 27dvh, 250px); margin: 0 16px; border-radius: 14px; background-color: #f1efe8; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px var(--line, #e8e5dd); }
  .dcard .dc-img.dc-model, .dcard:has(.dd-in) .dc-img.dc-model, .dcard:has(.dd-in[data-view="over"]) .dc-img.dc-model { background-size: contain; background-color: transparent; box-shadow: none; }
  body.portfolio.peek .mappane > .mapside { z-index: 7; }  /* the menu button stays in reach over the card */
  .dcard .dc-b { flex: 1 0 auto; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .dcard .dc-b h2 { padding-right: 0; font-size: 23px; text-wrap: balance; } .dcard .dc-sub { margin: -6px 0 0; }
  .dcard .dd.dd-in { flex: 1 0 auto; align-content: start; margin: 4px 0 6px; gap: 12px; }
  /* Every tab on the strip, none cut: they share the width. */
  .dd-in .dd-step { gap: 0; padding: 3px; border-radius: 11px; overflow-x: auto; }
  .dd-in .dd-tabs { display: flex; flex: 1 1 auto; min-width: 0; gap: 0; }
  .dd-in .dd-tab, .dd-in .dd-tab:last-of-type { flex: 1 1 auto; min-width: 0; height: 38px; margin: 0; padding: 0 6px; font-size: 12.5px; letter-spacing: -.01em; white-space: nowrap; border-radius: 8px; }
  .dcard .dc-go { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 2; flex: 0 0 auto; box-shadow: 0 0 0 8px var(--bg, #faf9f6), 0 -14px 16px 0 var(--bg, #faf9f6); }
  .dcard .dc-new { flex: 0 0 auto; align-self: center; min-height: 40px !important; }
  .dd-in .dd-keys span { max-width: 100%; }
}
/* ==== end stage fixes round 2 ==== */

/* ==== stage fixes 8 Oct, round 3 (stage_fixes_20261008/patch_stage.py) ==== */
/* 901 to 1199 wide: the two Overview cards as proper cards side by side (the slim strip squeezed them into tiny columns). */
@media (min-width: 901px) and (max-width: 1199px) {
  #mappane:has(.dd[data-view="over"]) { --bb: 262px; }
  #mappane:has(.dd-photo):has(.dd[data-view="over"]) { --bb: 276px; }
  .dd[data-view="over"] .dd-rail { align-items: stretch; }
  .dd[data-view="over"] .dd-rail > .dd-card { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; grid-auto-columns: auto; align-items: start; align-content: start; gap: 4px; padding: 12px 16px; max-width: 400px; }
  .dd[data-view="over"] .dd-card > small, .dd[data-view="over"] .dd-card > strong { grid-column: auto; grid-row: auto; }
  .dd[data-view="over"] .dd-card > strong { font-size: 24px; white-space: normal; }
  .dd[data-view="over"] .dd-card > .dd-line { grid-row: auto; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0; padding: 6px 0 0; border-left: 0; border-top: 1px solid var(--line, #e8e5dd); }
  .dd[data-view="over"] .dd-card > .dd-line:first-of-type { margin-top: 4px; }
  .dd[data-view="over"] .dd-card > .dd-line span { font-size: 13px; } .dd[data-view="over"] .dd-card > .dd-line b { font-size: 14px; }
}
/* 1200 to 1439: the strip stays; a long headline wraps inside its own column instead of running over the next figure. */
@media (min-width: 1200px) and (max-width: 1439px) { .dd[data-view="over"] .dd-rail > .dd-card { grid-template-columns: minmax(0, 1.7fr); } .dd[data-view="over"] .dd-card > strong { white-space: normal; font-size: 20px; line-height: 1.12; } }
.dd-card strong.bad em { color: inherit; }
/* Comparison: a name is never cut, it takes a second line; only the two neighbours stand beside ours. */
.cp .cp-lab em { white-space: normal; overflow: visible; text-overflow: clip; text-wrap: balance; }
.cp .cp-t.far { opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
/* A model that fills its frame fades out at the top and bottom instead of ending on a hard edge. */
.dd-stage model-viewer { -webkit-mask-image: linear-gradient(transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(transparent, #000 5%, #000 95%, transparent); }
/* The room board: what is not listed is counted. */
.dd-keys span.more { background: none; box-shadow: none; color: var(--ink-2, #4b5261); font-weight: 500; padding-left: 4px; }
/* ==== end stage fixes round 3 ==== */

/* The option switch under the deal's name (displays.js optBar). In the phone card it sits above the tabs. */
.dd-opts { position: absolute; left: 22px; top: 112px; pointer-events: auto; max-width: calc(100% - 44px); overflow-x: auto; }
body.no-side .dd-opts { left: 60px; }
.dd.dd-in .dd-opts { position: static; margin: 0 0 8px; max-width: 100%; }
@media (max-width: 900px) { .dd-opts, body.no-side .dd-opts { left: 64px; top: 92px; max-width: calc(100% - 76px); } }

/* A named hotel with no picture of its own: a plain tile that says what it charges, in place of an empty box. */
.cp-plain { position: absolute; left: 24%; right: 24%; top: 22%; bottom: 14%; border-radius: 14px; background: #f4f2ec; box-shadow: inset 0 0 0 1px #dedbd2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-style: normal; }
.cp-plain b { font: 600 clamp(18px, 2.1vw, 30px)/1 var(--serif, Georgia, serif); color: var(--ink, #1c2230); }
.cp-plain small { font: 500 11px/1.2 var(--sans, Manrope, sans-serif); color: var(--ink-3, #7a8090); }

/* ---------- 9 Oct 2026: quieter pointers; a plan that says what it needs ---------- */
.dd-spot p { padding: 5px 10px; } .dd-spot b { font-size: 14.5px; } .dd-spot span { font-size: 11.5px; }
.dd-spot.lead p { padding: 6px 12px; } .dd-spot.lead b { font-size: 16px; }
.dd-line b i { font-style: normal; } .dd-line b i.dd-gap { color: #b3261e; } .dd-line b i.dd-ok { color: #1f7a4f; }
.dd-card strong.dd-h { font-size: 22px; }

/* ---------- 10 Oct 2026, round two ---------- */
/* laptop widths: a pointer other than the first shows its name only, so two never sit on one another; the needed-rate card's figures wrap inside their own column; a layout's note runs along the foot of its card */
@media (max-width: 1439px) { .dd-spot:not(.room) p span { display: none; } .dd-spot:not(.room) p { padding: 3px 8px; } .dd-spot:not(.room) b { font-size: 13px; } }
@media (min-width: 1200px) and (max-width: 1439px) { .dd[data-view="over"] .dd-card > .dd-line b { white-space: normal; } .dd[data-view="over"] .dd-rail > .dd-card { grid-template-columns: minmax(min-content, 1.7fr); grid-auto-columns: minmax(min-content, 1fr); }
  .dd[data-view="over"] .dd-rail > .dd-card:has(> .dd-vnote) { position: relative; padding-bottom: 44px; } .dd[data-view="over"] .dd-card > .dd-vnote { position: absolute; left: 14px; right: 14px; bottom: 9px; margin: 0; } }
/* a phone: a case says its words on a line of its own, above its bar */
.dd-in .dd-case { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; } .dd-in .dd-case span { grid-column: 1 / -1; }

/* A deal that carries its own steps (a venture): each figure, and under it the few words that go with it */
.dd-vent .dd-line b { text-align: right; } .dd-vent .dd-line b em { display: block; font-style: normal; font-weight: 400; font-size: 12px; line-height: 1.3; color: var(--ink-2, #4b5261); }
@media (min-width: 901px) and (max-width: 1439px) { .dd-vent .dd-line b { text-align: left; } }
.dd-in .dd-vent > small, .dd-in .dd-vent > strong { display: none; }  /* a phone: the card's head already says it */
.dd-in .dd-vent .dd-line:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

/* hbu-20261010. Per m²: what we pay beside what it sells for (a sale deal with model.spread). Sand is what we pay, blue is what it sells for. */
.dd-sb { display: grid; grid-template-columns: 106px minmax(0, 1fr) 50px; align-items: center; gap: 8px; margin: 0; }
.dd-card .dd-sb span { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dd-sb b { font-size: 12.5px; font-weight: 700; text-align: right; color: var(--ink, #0c1d33); font-variant-numeric: tabular-nums; }
.dd-sb i { display: block; height: 10px; border-radius: 3px; background: #f4f2ec; overflow: hidden; } .dd-sb u { display: block; height: 100%; border-radius: 3px; text-decoration: none; }
.dd-sb.pa u { background: repeating-linear-gradient(135deg, #e3d3ab 0 4px, #f3ead0 4px 8px); } .dd-sb.po u { background: #c9ae6b; } .dd-sb.ps u { background: #9db0ee; } .dd-sb.pb u { background: var(--blue, #1439c6); }
.dd-card .dd-sb.po span { color: var(--ink, #0c1d33); font-weight: 700; }
.dd-spr .dd-line:first-of-type { margin-top: 4px; }

/* per-m2-v2 (10 Oct 2026). A developer's sum. Desktop: one strip, the answer the only coloured cell. Phone: a plain list, like a receipt. */
.spr.sv { display: block; padding: 22px 24px 18px; }
.sv .sv-hd { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.sv h3 { margin: 0; font: 600 20px/1.2 var(--serif, Georgia, serif); letter-spacing: -.01em; color: var(--ink, #0c1d33); } .sv h3 em { font: 400 14px/1.2 var(--sans, system-ui, sans-serif); font-style: normal; letter-spacing: 0; color: var(--ink-2, #445266); margin-left: 6px; }
.sv .sv-ask { margin: 0; padding: 6px 12px; border-radius: 999px; background: #f4f2ec; font-size: 14px; color: var(--ink-2, #445266); white-space: nowrap; } .sv .sv-ask.bad { background: #fdeeeb; color: #8f2a22; } .sv .sv-ask b { font-weight: 700; color: var(--ink, #0c1d33); font-variant-numeric: tabular-nums; } .sv .sv-ask small { margin-left: 8px; font-size: 13px; } .sv .sv-ask.bad b, .sv .sv-ask.bad small { color: var(--bad, #b3261e); }
.sv .sv-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1px solid #e9e4d6; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(12, 29, 51, .04), 0 8px 24px -18px rgba(12, 29, 51, .25); }
.sv .sv-c { position: relative; display: grid; align-content: center; gap: 4px; min-height: 92px; padding: 16px 20px 16px 24px; border-left: 1px solid var(--line, #e7e4dc); min-width: 0; }
.sv .sv-c:first-child { border-left: 0; border-radius: 15px 0 0 15px; } .sv .sv-c:last-child { border-radius: 0 15px 15px 0; }
.sv .sv-c span { font-size: 13px; line-height: 1.25; color: var(--ink-2, #445266); } .sv .sv-c b { font: 600 24px/1.1 var(--serif, Georgia, serif); letter-spacing: -.01em; color: var(--ink, #0c1d33); font-variant-numeric: tabular-nums; white-space: nowrap; } .sv .sv-c small { font-size: 12px; line-height: 1.3; color: var(--mute, #7a8191); }
.sv .sv-op { position: absolute; left: -11px; top: 50%; width: 22px; height: 22px; margin-top: -11px; display: grid; place-items: center; border: 1px solid var(--line, #e7e4dc); border-radius: 50%; background: #fff; font: 600 14px/1 var(--sans, system-ui, sans-serif); font-style: normal; color: var(--ink-2, #445266); z-index: 1; }
.sv .sv-c.sell { background: linear-gradient(180deg, #fbf7ea, #f5efdc); } .sv .sv-c.sell span { color: #7a6a3a; } .sv .sv-c.res { border-left-color: transparent; background: linear-gradient(135deg, #1b44dd, #1230a8); } .sv .sv-c.res span { color: rgba(255, 255, 255, .82); font-weight: 600; } .sv .sv-c.res b { color: #fff; font-size: 28px; } .sv .sv-c.res .sv-op { border-color: #1b44dd; background: #fff; color: var(--blue, #1538c8); }
.sv .sv-c.bad b, .sv .sv-c.bad small { color: var(--bad, #b3261e); }
.sv .sv-evd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; margin-top: 16px; font-size: 13px; color: var(--ink-2, #445266); }
.sv .sv-evd > em { font-style: normal; font-weight: 600; color: var(--ink, #0c1d33); } .sv .sv-evd p { margin: 0; display: flex; gap: 8px; align-items: baseline; } .sv .sv-evd p b { font-weight: 700; color: var(--ink, #0c1d33); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sv .sv-evd details { display: contents; } .sv .sv-evd summary { list-style: none; cursor: pointer; margin-left: auto; color: var(--blue, #1538c8); font-weight: 600; } .sv .sv-evd summary::-webkit-details-marker { display: none; } .sv .sv-evd summary:hover { text-decoration: underline; }
.sv .sv-evd table { flex-basis: 100%; width: 100%; margin-top: 6px; border-collapse: collapse; } .sv .sv-evd td { padding: 7px 0; border-top: 1px solid var(--line, #e7e4dc); white-space: nowrap; } .sv .sv-evd td:first-child { white-space: normal; color: var(--ink, #0c1d33); } .sv .sv-evd td:last-child { text-align: right; font-weight: 700; color: var(--ink, #0c1d33); font-variant-numeric: tabular-nums; } .sv .sv-evd td + td { padding-left: 16px; }
.sv .sv-evd details small { flex-basis: 100%; display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--mute, #7a8191); max-width: 880px; }
@media (max-width: 1180px) { .spr.sv { padding: 18px 20px 14px; } .sv .sv-c { padding: 12px 14px; } .sv .sv-c b { font-size: 21px; } .sv .sv-c.res b { font-size: 24px; } .sv .sv-c span { font-size: 12.5px; } }
@media (max-width: 900px) {
  .spr.sv { padding: 18px 16px 14px; } .sv .sv-hd { display: block; margin-bottom: 10px; } .sv h3 { font-size: 19px; } .sv h3 em { display: block; margin: 3px 0 0; font-size: 13px; }
  .sv .sv-strip { display: block; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .sv .sv-c, .sv .sv-c:first-child, .sv .sv-c:last-child { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; row-gap: 2px; min-height: 0; padding: 13px 0; border-left: 0; border-top: 1px solid var(--line, #e7e4dc); border-radius: 0; background: none; }
  .sv .sv-c:first-child { border-top: 0; } .sv .sv-c span { grid-column: 1; font-size: 15px; color: var(--ink, #0c1d33); } .sv .sv-c:has(.sv-op) span::before { content: '−'; display: inline-block; width: 18px; color: var(--mute, #7a8191); } .sv .sv-c.res span::before { content: none; } .sv .sv-c b { grid-column: 2; grid-row: 1; font: 600 16px/1.2 var(--sans, system-ui, sans-serif); letter-spacing: 0; } .sv .sv-c small { grid-column: 1 / -1; font-size: 13px; padding-left: 18px; } .sv .sv-c.sell small { padding-left: 0; }
  .sv .sv-op { display: none; }
  .sv .sv-c.sell, .sv .sv-c.sell:first-child { background: none; } .sv .sv-c.sell span { color: var(--ink, #0c1d33); }
  .sv .sv-c.res, .sv .sv-c.res:last-child { margin: 6px 0 0; padding: 14px 16px; border-top: 0; border-radius: 14px; background: linear-gradient(135deg, #1b44dd, #1230a8); box-shadow: 0 10px 22px -14px rgba(21, 56, 200, .7); } .sv .sv-c.res span { font-size: 16px; color: rgba(255, 255, 255, .86); } .sv .sv-c.res b { font: 600 26px/1.1 var(--serif, Georgia, serif); color: #fff; } 
  .sv .sv-ask { margin-top: 10px; padding: 10px 16px; border-radius: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; font-size: 15px; white-space: normal; order: 3; } .sv .sv-ask b { grid-column: 2; grid-row: 1; font-size: 16px; } .sv .sv-ask small { grid-column: 1 / -1; margin: 0; }
  .spr.sv { display: flex; flex-direction: column; align-items: stretch; justify-items: stretch; gap: 0; } .spr.sv > * { width: auto; max-width: none; } .sv .sv-hd { display: contents; } .sv h3 { order: 1; margin-bottom: 8px; } .sv .sv-strip { order: 2; } .sv .sv-evd { order: 4; }
  .sv .sv-evd { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line, #e7e4dc); font-size: 14px; } .sv .sv-evd > em { display: block; margin-bottom: 6px; } .sv .sv-evd p { justify-content: space-between; padding: 5px 0; } .sv .sv-evd summary { display: block; margin: 8px 0 0; padding: 6px 0; } .sv .sv-evd td { white-space: normal; font-size: 13px; } .sv .sv-evd td:nth-child(3), .sv .sv-evd td:nth-child(4) { display: none; }
}
.dd-spr.sv { display: block; } .dd-spr.sv > small:first-child { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mute, #7a8191); } .dd-spr.sv .sv-s { margin-top: 4px; }
.dd-spr.sv .sv-l { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding: 5px 0; border-top: 1px solid var(--line, #e7e4dc); font-size: 13px; color: var(--ink-2, #445266); } .dd-spr.sv .sv-l:first-child { border-top: 0; } .dd-spr.sv .sv-l span { display: grid; } .dd-spr.sv .sv-l small { font-size: 11.5px; color: var(--mute, #7a8191); }
.dd-spr.sv .sv-l b { font-weight: 600; font-size: 14px; color: var(--ink, #0c1d33); white-space: nowrap; font-variant-numeric: tabular-nums; } .dd-spr.sv .sv-l.res { border-top: 2px solid var(--ink, #0c1d33); color: var(--ink, #0c1d33); font-weight: 600; } .dd-spr.sv .sv-l.res b { font: 600 20px/1.1 var(--serif, Georgia, serif); color: var(--blue, #1538c8); } .dd-spr.sv .sv-l.ask { border-top: 0; padding-top: 0; } .dd-spr.sv .sv-l.bad b, .dd-spr.sv .sv-l.bad small { color: var(--bad, #b3261e); }
.dd-spr.sv .sv-o { display: flex; justify-content: space-between; gap: 12px; margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--line, #e7e4dc); font-size: 12.5px; color: var(--ink-2, #445266); } .dd-spr.sv .sv-o b { font-weight: 600; color: var(--ink, #0c1d33); white-space: nowrap; }
@media (max-width: 1180px) { .sv .sv-cap { width: 86px; } .sv .sv-t b { font-size: 17px; } .sv .sv-t.res b { font-size: 19px; } .sv .sv-t span { font-size: 11.5px; } .sv .sv-row { gap: 5px; } }
@media (max-width: 820px) { .spr.sv { padding: 12px 14px; } .sv .sv-row { flex-wrap: wrap; } .sv .sv-cap { width: 100%; display: flex; align-items: baseline; gap: 8px; } .sv .sv-op { display: none; } .sv .sv-t { flex: 1 1 28%; padding: 7px 4px 9px; } .sv .sv-t.ask { margin-left: 0; } .sv .sv-ev u { margin: 0 5px; } }

/* 10 Oct: between phone and desktop the line under the title wraps to two lines; the path buttons sit below it, not on it */
@media (min-width: 561px) and (max-width: 900px) { .dd-opts, body.no-side .dd-opts { top: 128px; } }
/* ...and the title and the line under it may run the full width there (they sit below the top buttons), so each stays on one line */
@media (min-width: 561px) and (max-width: 900px) { .dd-head h2, .dd-head p { width: calc(100% + 250px); max-width: none; } }
/* ...and the path buttons wrap onto a second line, so none is cut off */
@media (max-width: 900px) { .dd-opts, .dd.dd-in .dd-opts { flex-wrap: wrap; overflow-x: visible; } }


/* ==== the phone display, 11 Oct (display_mobile_20261011/patch.py) ==== */
@media (max-width: 560px) {
  /* The model, live, on its own stage at the top of the card. It stays put while the page scrolls under it. */
  .dcard { --ps: clamp(212px, 35dvh, 330px); }
  .dcard .dd.dd-in { grid-template-columns: minmax(0, 1fr); }
  .dcard:has(.dd-ps) .dd.dd-in { overflow: visible; }  /* so the tabs can hold under the stage */
  .dd-in .dd-body, .dd-in .dd-pr { min-width: 0; }
  body.portfolio .dcard:has(.dd-ps) { padding-top: 0; }
  .dcard:has(.dd-ps) .dc-img, .dcard:has(.dd-ps):has(.dd-in) .dc-img, .dcard:has(.dd-ps):has(.dd-in[data-view="over"]) .dc-img { display: none; }
  .dd-ps { position: sticky; top: 0; z-index: 6; flex: 0 0 auto; height: var(--ps); overflow: hidden; background: var(--bg, #fbfaf6); box-shadow: 0 1px 0 var(--line, #e8e5dd); }
  /* the same light stage as the wide screen */
  .dd-ps model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; --poster-color: transparent; --progress-bar-color: transparent; --min-hotspot-opacity: .35; }
  .dd-ps model-viewer { transform: translateY(var(--ps-shift, 14px)); }
  body.dd-pfull .dd-ps model-viewer { transform: none; }
  .dd-ps-hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); margin: 0; padding: 6px 12px; border-radius: 99px; background: #f1efe8; color: var(--ink-2, #3c4a5c); font: 500 11.5px/1 var(--sans, Manrope, sans-serif); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .5s; }
  .dd-ps.ready:not(.touched) .dd-ps-hint { opacity: 1; }
  .dd-ps-full { position: absolute; right: 16px; top: 16px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--line, #e4e2da); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .dd-ps-full::before { content: ""; position: absolute; inset: 0; background: no-repeat center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233c4a5c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 2H14v4.5M6.5 14H2V9.5M14 2 9.2 6.8M2 14l4.8-4.8'/%3E%3C/svg%3E"); }
  body.dd-pfull .dd-ps-full::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233c4a5c' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3.5 3.5l9 9M12.5 3.5l-9 9'/%3E%3C/svg%3E"); }
  .dd-ps-cap { position: absolute; left: 12px; right: 12px; bottom: 10px; display: flex; align-items: center; gap: 8px; pointer-events: none; }
  .dd-ps-cap:empty { display: none; } .dd-ps:has(.dd-ps-cap:not(:empty)) .dd-ps-hint { display: none; }
  .dd-ps-cap button { pointer-events: auto; flex: 0 1 auto; min-width: 0; height: 34px; padding: 0 13px; border: 0; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--line, #e4e2da); color: var(--ink-2, #3c4a5c); font: 600 13px/1 var(--sans, Manrope, sans-serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dd-ps-cap b { flex: 1 1 auto; min-width: 0; text-align: right; color: var(--ink, #0c1d33); font: 500 16px/1.2 var(--serif, Georgia, serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* The way back and the menu sit on the stage. */
  body .dcard:has(.dd-ps) .dc-x, body.no-side .dcard:has(.dd-ps) .dc-x, body .dcard:has(.dd-ps):has(.dd-in) .dc-x { z-index: 8; position: fixed; left: 64px; top: 16px; height: 40px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--line, #e4e2da); color: var(--ink-2, #3c4a5c); }
  body.portfolio.peek:has(.dd-ps) .mappane > .mapside { background: #fff; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--line, #e4e2da); }
  .dd-ps .dd-spot.room b { font-size: 11px; }
  /* The whole screen for the model. */
  body.dd-pfull .dd-ps { position: fixed; inset: 0; z-index: 60; height: auto; border-radius: 0; }
  body.dd-pfull .dd-ps model-viewer { inset: 56px 0 calc(40px + env(safe-area-inset-bottom, 0px)); height: auto; }
  body.dd-pfull .dd-ps-full { top: calc(16px + env(safe-area-inset-top, 0px)); }
  body.dd-pfull .dd-ps-hint { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  body.dd-pfull .dcard .dc-x, body.dd-pfull .dcard .dc-go, body.dd-pfull .mapside { display: none !important; }
  body.dd-pfull .dcard { overflow: hidden; }
  /* The tabs stay under the stage as the page scrolls. */
  .dcard:has(.dd-ps) .dd-in .dd-step { position: sticky; top: calc(var(--ps) + 8px); left: auto; right: auto; bottom: auto; z-index: 5; box-shadow: 0 0 0 8px var(--bg, #faf9f6); }
  .dcard:has(.dd-ps) .dd-in .dd-body { min-height: calc(100dvh - var(--ps) - 150px); }
  .dd-in .dd-body.from-r { animation: dd-in-r .24s ease-out; } .dd-in .dd-body.from-l { animation: dd-in-l .24s ease-out; }
  /* The options: one row, swiped, none cut in two. */
  .dd-in .dd-opts { display: flex; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none; width: 100%; box-sizing: border-box; min-width: 0; max-width: none; margin: 0; padding: 3px; gap: 0; background: #f1efe8; border-radius: 11px; }
  .dd-in .dd-opts::-webkit-scrollbar { display: none; }
  .dd-in .dd-opts button { flex: 1 0 auto; height: 36px; padding: 0 13px; border-radius: 8px; background: none; color: var(--ink-2, #3c4a5c); font-size: 13px; font-weight: 500; white-space: nowrap; box-shadow: none; }
  .dd-in .dd-opts { position: relative !important; top: auto; left: auto; transform: none; }
  body.portfolio .dcard:has(.dd-ps) { overflow-x: hidden; }
  .dd-in .dd-opts button[aria-pressed="true"] { background: #fff; color: var(--ink, #0c1d33); font-weight: 600; box-shadow: 0 1px 3px rgba(12, 29, 51, .14); }
  /* Rooms: tap a name, its number lights on the model. */
  .dd-in .dd-keys span { min-height: 34px; align-items: center; -webkit-tap-highlight-color: transparent; }
  .dd-in .dd-keys span.on { background: #1f46d6; color: #fff; } .dd-in .dd-keys span.on u { background: #fff; color: #1f46d6; }
  .dd-ps .dd-spot.room b.on { transform: scale(1.6); box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1439c6; z-index: 3; }
  /* Floor plans: one wide card each, swiped sideways. */
  .dd-pl { display: flex; gap: 12px; margin: 0 -16px; width: calc(100% + 32px); box-sizing: border-box; min-width: 0; padding: 2px 16px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .dd-pl::-webkit-scrollbar { display: none; }
  .dd-pl-c { flex: 0 0 86%; scroll-snap-align: center; display: grid; gap: 5px; align-content: start; padding: 10px 10px 12px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line, #e8e5dd); text-decoration: none; color: var(--ink, #0c1d33); -webkit-tap-highlight-color: transparent; }
  .dd-pl-c:only-child { flex-basis: 100%; }
  .dd-pl-c img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; border-radius: 10px; margin-bottom: 4px; }
  .dd-pl-c small { font: 500 17px/1.2 var(--serif, Georgia, serif); color: var(--ink, #0c1d33); }
  .dd-pl-c span { font-size: 13px; line-height: 1.4; color: var(--ink-2, #445266); }
  .dd-dots { display: flex; justify-content: center; gap: 6px; margin-top: 2px; } .dd-dots i { width: 6px; height: 6px; border-radius: 50%; background: #d5d1c5; transition: background .2s, width .2s; } .dd-dots i.on { width: 16px; border-radius: 3px; background: #1f46d6; }
  .dd-pl-tip { margin: 2px 0 0; text-align: center; font-size: 12.5px; }
  /* Comparison: a ladder by nightly rate. */
  .dd-lad { gap: 6px; }
  .dd-lad li { grid-template-columns: 58px minmax(0, 1fr); gap: 11px; padding: 7px 10px 7px 7px; -webkit-tap-highlight-color: transparent; }
  .dd-lad img, .dd-lad li > i { width: 58px; aspect-ratio: 1; }
  .dd-lad li > i { background: #e7e3d8; }
  .dd-lad b { font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dd-lad div { grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 3px; align-items: baseline; }
  .dd-lad div b, .dd-lad div em { grid-column: 1 / -1; }
  .dd-lad em { display: block; height: 6px; border-radius: 3px; background: #e7e3d8; overflow: hidden; }
  .dd-lad em u { display: block; height: 100%; border-radius: 3px; background: #b9c3d6; }
  .dd-lad li.me em u { background: #1f46d6; } .dd-lad li.me em { background: #cfd9ff; }
  .dd-lad span { font-size: 12.5px; white-space: nowrap; } .dd-lad span.gap { text-align: right; font-weight: 600; }
  .dd-lad li[data-dd-focus] { cursor: pointer; position: relative; }
  .dd-lad li[data-dd-focus] img { box-shadow: 0 0 0 1.5px #1f46d6; }
  .dd-lad li.on { background: #0c1d33; } .dd-lad li.on b { color: #fff; } .dd-lad li.on span { color: #c4cfea; } .dd-lad li.on em { background: rgba(255, 255, 255, .16); } .dd-lad li.on em u { background: #7f9cff; }
  /* Cases: the name on its own line, the bar and the figure under it. */
  .dd-in .dd-case { grid-template-columns: minmax(0, 1fr) auto; row-gap: 5px; padding: 11px 0; border-top: 1px solid var(--line, #e7e4dc); }
  .dd-in .dd-case:first-child { border-top: 0; padding-top: 2px; }
  .dd-in .dd-case span { grid-column: 1 / -1; font-size: 14px; color: var(--ink, #0c1d33); }
  .dd-in .dd-case b { font: 500 19px/1 var(--serif, Georgia, serif); min-width: 104px; }
}
@keyframes dd-in-r { from { opacity: .2; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes dd-in-l { from { opacity: .2; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dd-in .dd-body.from-r, .dd-in .dd-body.from-l { animation: none; } }
/* A plan, opened */
.dd-pv { position: fixed; inset: 0; z-index: 9999; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #faf9f6; color: var(--ink, #0c1d33); font-family: var(--sans, Manrope, sans-serif); overscroll-behavior: contain; }
.dd-pv header { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px 16px; }
.dd-pv header b { flex: 1 1 auto; min-width: 0; font: 500 18px/1.2 var(--serif, Georgia, serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-pv header span { flex: 0 0 auto; font-size: 12.5px; color: var(--ink-2, #445266); font-variant-numeric: tabular-nums; }
.dd-pv header button { flex: 0 0 auto; width: 44px; height: 40px; border: 0; border-radius: 10px; background: #f1efe8; color: var(--ink, #0c1d33); font-size: 16px; cursor: pointer; }
.dd-pv-im { position: relative; overflow: hidden; display: grid; place-items: center; background: #fff; touch-action: none; user-select: none; -webkit-user-select: none; box-shadow: inset 0 1px 0 #e8e5dd, inset 0 -1px 0 #e8e5dd; }
.dd-pv-im img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; will-change: transform; pointer-events: none; }
.dd-pv footer { display: grid; gap: 10px; padding: 12px 18px calc(16px + env(safe-area-inset-bottom, 0px)); min-height: 30px; }
.dd-pv footer p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2, #445266); text-align: center; text-wrap: balance; }
.dd-pv .dd-dots { display: flex; justify-content: center; gap: 6px; } .dd-pv .dd-dots i { width: 6px; height: 6px; border-radius: 50%; background: #d5d1c5; } .dd-pv .dd-dots i.on { width: 16px; border-radius: 3px; background: #1f46d6; }
/* A phone held sideways: the model on the left, the figures in one scrolling column on the right, the tabs under both. */
@media (max-height: 520px) and (min-width: 561px) and (max-width: 960px) {
  #mappane:has(.dd), #mappane:has(.dd):has(.dd-photo), #mappane:has(.dd[data-view]) { --bt: 54px !important; --bb: 60px !important; --br: 52% !important; }
  .dd .dd-head { top: 14px; left: 64px; right: 262px; bottom: auto; display: flex; align-items: center; gap: 10px; max-width: none !important; }
  .dd .dd-head h2 { width: auto !important; max-width: none; min-width: 0; flex: 1 1 auto; margin: 0; font-size: 18px; line-height: 34px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
  .dd .dd-head p { display: none; }
  .dd:has(.dd-top .dd-seg + .dd-seg) .dd-head { right: 470px; }  /* a version switch in the top row: the title gives way */
  .dd .dd-head .dd-back { flex: 0 0 auto; }
  .dd .dd-opts, body.no-side .dd .dd-opts { top: 56px !important; left: auto !important; right: 12px !important; width: calc(52% - 24px); max-width: none !important; box-sizing: border-box; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; transform: none; }
  .dd .dd-opts button { flex: 1 0 auto; white-space: nowrap; }
  .dd .dd-rail, .dd[data-view] .dd-rail { left: auto !important; right: 12px !important; top: 98px !important; bottom: 62px !important; width: calc(52% - 24px) !important; height: auto !important; max-height: none !important; transform: none !important; display: grid !important; grid-auto-flow: row !important; grid-template-columns: minmax(0, 1fr) !important; grid-auto-columns: auto !important; align-content: start; gap: 8px; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 4px; }
  .dd:not(:has(.dd-opts)) .dd-rail { top: 56px !important; }
  .dd .dd-rail > .dd-card, .dd .dd-rail > a.dd-card { width: auto !important; max-width: none !important; height: auto; flex: none !important; }
  .dd .dd-step { bottom: 10px; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; max-width: calc(100% - 24px); }
  #mappane:has(.dd) .dd-stage model-viewer, #mappane:has(.dd[data-view="cmp"]) .dd-stage model-viewer { transform: none !important; }
  .dd-stage.dd-photo figure { left: 12px !important; right: calc(52% + 6px) !important; top: 60px !important; bottom: 66px !important; }
}
/* ==== end the phone display ==== */