/* Lanaar tour: dark glass over the photoreal walk. Palette: Stencil Blue 2B587B is the school's; the gold E5B531 (the Hokki stools)
   marks the one action that matters. Glass = rgba(14,23,30,.66) + blur, a hairline of white. */
:root {
  --night: #0E171E; --glass: rgba(14, 23, 30, .66); --glass-strong: rgba(14, 23, 30, .82); --hair: rgba(255, 255, 255, .14);
  --text: #FFFFFF; --text-2: rgba(255, 255, 255, .86); --text-3: rgba(255, 255, 255, .6); --gold: #E5B531; --moss: #AEC8D1; --blue: #2B587B;
  --blur: blur(24px) saturate(1.3); --shadow: 0 24px 64px rgba(0, 0, 0, .22);
  --font: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--night); color: var(--text); font: 400 15px/1.4 var(--font); overflow: hidden; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

/* glass pieces */
.glass { background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--hair); color: var(--text); }
.chip { position: absolute; display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 10px; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; line-height: 1; white-space: nowrap; text-decoration: none; cursor: default; }
.chip-brand { left: calc(28px + var(--safe-l)); top: calc(28px + var(--safe-t)); }
button.chip { cursor: pointer; }
button.chip:hover { background: var(--glass-strong); }
.chip-icon { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
.chip-icon svg { width: 20px; height: 20px; }
.chip-note { right: calc(40px + var(--safe-r)); bottom: calc(40px + var(--safe-b)); height: 32px; padding: 0 14px; border-radius: 8px; font-size: 11px; font-weight: 300; letter-spacing: .14em; color: var(--text-2); }

/* landing: the front door */
.landing { position: fixed; inset: 0; z-index: 20; background: var(--night); transition: opacity 1.4s ease, transform 1.4s ease; }
.landing.is-leaving { opacity: 0; transform: scale(1.025); pointer-events: none; }
.landing.is-returning { opacity: 0; }
.landing-hero { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.landing-plan { right: calc(28px + var(--safe-r)); top: calc(28px + var(--safe-t)); }
.landing-actions { position: absolute; left: 50%; bottom: calc(86px + var(--safe-b)); transform: translateX(-50%); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(460px, calc(100% - 32px)); }
.walk-in, .tour-choice { position: relative; display: inline-flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; min-width: 0; min-height: 96px; padding: 18px 24px 20px; border-radius: 16px; box-shadow: 0 16px 48px rgba(0, 0, 0, .18); cursor: pointer; transition: background .2s, transform .2s; text-decoration: none; text-align: center; }
.walk-in:hover, .tour-choice:hover { background: var(--glass-strong); transform: translateY(-1px); }
.walk-in span, .tour-choice span { display: block; font-size: 26px; font-weight: 400; letter-spacing: .06em; line-height: 1; text-align: center; }
.walk-in small, .tour-choice small { font: 300 12px/1.2 var(--font); letter-spacing: .04em; color: var(--text-2); }
.walk-in-line { position: relative; display: block; height: 1px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.walk-in .walk-in-line { position: absolute; left: 24px; right: 24px; bottom: 10px; }
.walk-in-line i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255, 255, 255, .9); transition: width .3s ease; }
.walk-in.is-busy span { color: var(--text-2); }
@media (max-width: 640px) { .chip-note { display: none; } .landing-actions { bottom: calc(48px + var(--safe-b)); } .walk-in, .tour-choice { padding-inline: 12px; } .walk-in span, .tour-choice span { font-size: 22px; } }

/* the stage */
.stage { position: fixed; inset: 0; z-index: 10; background: var(--night); }
.canvas-host { position: absolute; inset: 0; touch-action: none; cursor: grab; }
.canvas-host:active { cursor: grabbing; }
.canvas-host canvas { display: block; width: 100% !important; height: 100% !important; }
.hud { position: absolute; inset: 0; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-brand { cursor: pointer; }
.pill { position: absolute; left: 50%; bottom: calc(40px + var(--safe-b)); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0; height: 52px; padding: 0 8px 0 0; border-radius: 999px; box-shadow: 0 12px 40px rgba(0, 0, 0, .18); white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; }
.pill-room { display: inline-flex; align-items: center; gap: 14px; height: 100%; padding: 0 14px 0 24px; margin: 0; background: none; border: 0; font-size: 15px; letter-spacing: .02em; line-height: 1; color: var(--text); cursor: default; }
.pill-room.is-link { cursor: pointer; }
.pill-room.is-link:hover #pill-name { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .5); text-underline-offset: 4px; }
.pill-room span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#pill-sub, #pill-dot { font-weight: 300; color: var(--text-2); }
.pill-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0; border-radius: 50%; background: none; border: 0; cursor: pointer; color: var(--text); }
.pill-icon:hover { background: rgba(255, 255, 255, .1); }
.pill-icon svg { width: 20px; height: 20px; }
.pill-progress { position: absolute; left: 24px; bottom: 0; height: 1px; width: 0; background: var(--gold); opacity: 0; transition: width .4s ease, opacity .3s; }
.pill-progress.is-on { opacity: 1; }
.pad { position: absolute; left: calc(64px + var(--safe-l)); bottom: calc(64px + var(--safe-b)); width: 104px; height: 104px; border-radius: 50%; border: 1.5px solid #fff; opacity: .4; display: none; align-items: center; justify-content: center; touch-action: none; }
.pad.is-live { transform: translate(-50%, -50%); opacity: .75; }
.pad i { display: block; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .05s linear; }
@media (pointer: coarse) { body.is-walking .pad { display: flex; } }
.hint { position: absolute; left: 50%; bottom: calc(112px + var(--safe-b)); transform: translateX(-50%); padding: 10px 16px; border-radius: 999px; font-size: 13px; font-weight: 300; letter-spacing: .03em; color: var(--text-2); opacity: 0; transition: opacity .6s; white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; }
.hint.is-on { opacity: 1; }
.toast { position: absolute; left: 50%; top: calc(88px + var(--safe-t)); transform: translateX(-50%); padding: 10px 16px; border-radius: 999px; font-size: 13.5px; letter-spacing: .02em; white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; }
.fade { position: fixed; inset: 0; z-index: 40; background: var(--night); opacity: 0; pointer-events: none; transition: opacity .42s ease; }
.fade.is-on { opacity: 1; pointer-events: auto; }

/* the price card */
.leader { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.leader line, .leader circle { stroke: #fff; stroke-width: 1.15; fill: none; stroke-linecap: round; }
.leader .leader-shadow { stroke: rgba(14, 23, 30, .35); stroke-width: 3; }
.leader .leader-dot { fill: #fff; stroke: none; }
.card { position: absolute; left: 0; top: 0; width: 300px; padding: 22px 24px 18px; border-radius: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; will-change: transform; }
.card.is-off { opacity: 0; pointer-events: none; }
.card-close { position: absolute; right: 6px; top: 6px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: none; border: 0; color: var(--text-3); cursor: pointer; border-radius: 50%; }
.card-close:hover { color: var(--text); background: rgba(255, 255, 255, .08); }
.card-close svg { width: 16px; height: 16px; }
.card-title { font-size: 17px; letter-spacing: .01em; line-height: 1.25; padding-right: 28px; }
.card-sub { font-size: 13px; font-weight: 300; letter-spacing: .04em; line-height: 1.4; color: var(--text-2); margin-top: -10px; }
.card-price { font-size: 36px; font-weight: 300; letter-spacing: -.01em; line-height: 1; font-variant-numeric: tabular-nums; }
.card-dedication { font-size: 15px; font-style: italic; color: var(--text-2); }
.card-action { display: inline-flex; flex-direction: column; align-items: stretch; gap: 8px; min-height: 44px; padding: 10px 0 0; margin: 0; background: none; border: 0; color: var(--text); font-size: 14px; letter-spacing: .04em; line-height: 1; text-align: left; cursor: pointer; }
.card-action i { display: block; height: 1px; background: var(--gold); transition: transform .2s; transform-origin: left; }
.card-action:hover i { transform: scaleX(1.06); }
.card-more { display: inline-flex; align-items: center; gap: 4px; padding: 0; margin: -4px 0 0; background: none; border: 0; color: var(--text-3); font-size: 12px; letter-spacing: .03em; cursor: pointer; }
.card-more:hover { color: var(--text); }
.card-more svg { width: 14px; height: 14px; }
@media (max-width: 480px) { .card { width: min(300px, calc(100vw - 32px)); } }

/* the plan */
.overlay { position: fixed; inset: 0; z-index: 30; background: rgba(14, 23, 30, .74); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); display: grid; place-items: center; padding: clamp(16px, 3vw, 32px); }
.map-panel { width: min(1180px, 100%); display: grid; gap: 14px; }
.map-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.map-head h2 { margin: 0; font-size: 12px; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; }
.map-head p { margin: 0; font-size: 13px; font-weight: 300; letter-spacing: .03em; color: var(--text-2); }
.map-close { position: static; width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; }
.map-close svg { width: 18px; height: 18px; }
.map-plan svg { display: block; width: 100%; height: auto; max-height: 76vh; }
.plan .silhouette { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .16); stroke-width: .12; }
.plan .room rect { fill: rgba(255, 255, 255, .03); stroke: rgba(255, 255, 255, .42); stroke-width: .1; stroke-dasharray: .55 .4; }
.plan .room:focus { outline: none; }
.plan .room:focus-visible rect { stroke: var(--gold); stroke-width: .3; stroke-dasharray: none; }
.plan .room.is-walkable rect { fill: rgba(174, 200, 209, .9); stroke: none; stroke-dasharray: none; cursor: pointer; transition: fill .15s; }
.plan .room.is-walkable:hover rect, .plan .room.is-walkable:focus-visible rect { fill: #fff; }
.plan .room.is-start rect { fill: rgba(229, 181, 49, .85); }
.plan .room.is-here rect { stroke: var(--gold); stroke-width: .32; stroke-dasharray: none; }
.plan text { font: 300 1.15px var(--font); fill: rgba(255, 255, 255, .78); text-anchor: middle; dominant-baseline: central; pointer-events: none; letter-spacing: .03em; paint-order: stroke; stroke: rgba(14, 23, 30, .55); stroke-width: .18px; stroke-linejoin: round; }
.plan .room.is-walkable text { fill: var(--night); font-weight: 400; stroke: none; }
.plan text .sub { font-size: .85px; fill: rgba(255, 255, 255, .5); }
.plan .room.is-walkable text .sub { fill: rgba(14, 23, 30, .6); }
.plan #map-visitor circle { fill: #fff; }
.plan #map-visitor path { fill: var(--gold); }
.map-legend { font-size: 12px; font-weight: 300; letter-spacing: .04em; color: var(--text-3); display: flex; gap: 18px; flex-wrap: wrap; }
.map-legend i { display: inline-block; width: 12px; height: 8px; border-radius: 2px; vertical-align: -1px; margin-right: 6px; }

/* sheets */
dialog.sheet { margin: auto; padding: 0; width: min(600px, calc(100vw - 32px)); max-height: min(86vh, 900px); border: 1px solid var(--hair); border-radius: 22px; background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); color: var(--text); box-shadow: var(--shadow); overflow: auto; }
dialog.sheet::backdrop { background: rgba(14, 23, 30, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sheet-close { position: sticky; top: 8px; float: right; margin: 8px 8px 0 0; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: var(--glass); border: 1px solid var(--hair); border-radius: 50%; color: var(--text-2); cursor: pointer; z-index: 2; }
.sheet-close svg { width: 16px; height: 16px; }
.sheet-body { padding: 28px 28px 28px; display: grid; gap: 20px; }
.sheet-body header { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; padding-right: 44px; }
.sheet-body header img { width: 132px; height: 88px; object-fit: cover; border-radius: 12px; flex: 0 0 auto; }
.sheet-body h2 { margin: 6px 0 8px; font-size: 26px; font-weight: 400; letter-spacing: -.005em; line-height: 1.15; }
.eyebrow { margin: 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
.desc { margin: 0; font-size: 14px; font-weight: 300; line-height: 1.5; color: var(--text-2); }
.sheet-bundle, .gift-amount { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.sheet-bundle > div, .gift-amount { display: grid; gap: 6px; }
.gift-amount { display: grid; }
.big { font-size: 32px; font-weight: 300; letter-spacing: -.01em; line-height: 1; font-variant-numeric: tabular-nums; }
.big.honoree { font-size: 22px; font-style: italic; }
.sheet-bundle small, .gift-amount small { font-size: 12.5px; font-weight: 300; color: var(--text-3); }
.glass-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 12px; background: var(--glass); border: 1px solid var(--hair); color: var(--text); font-size: 14px; letter-spacing: .03em; cursor: pointer; text-decoration: none; white-space: nowrap; }
.glass-btn:hover { background: rgba(255, 255, 255, .1); }
.glass-btn.is-primary { background: var(--gold); border-color: var(--gold); color: var(--night); font-weight: 500; }
.glass-btn.is-primary:hover { background: #F0C85A; }
.glass-btn:disabled { opacity: .5; cursor: default; }
.sheet-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.fine { margin: 0; font-size: 12.5px; font-weight: 300; line-height: 1.5; color: var(--text-3); }
.schedule { list-style: none; margin: 0; padding: 0; }
.schedule li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14px; }
.schedule li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.schedule .qty { font-family: var(--mono); font-size: 13px; color: var(--text-3); text-align: right; }
.schedule .what small { display: block; font-size: 12px; font-weight: 300; color: var(--text-3); }
.schedule .what .honoree { font-style: italic; color: var(--gold); }
.schedule .each { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.schedule .each small { display: block; font-size: 11px; color: var(--text-3); }
.schedule .mini { min-height: 32px; padding: 0 12px; border-radius: 8px; background: var(--glass); border: 1px solid var(--hair); font-size: 12.5px; letter-spacing: .03em; cursor: pointer; }
.schedule .mini:hover { background: rgba(255, 255, 255, .1); }
.schedule .tag { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.schedule li.is-dedicated .what { color: var(--text-2); }
.extras summary { cursor: pointer; font-size: 13px; color: var(--text-2); }
.extras ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--text-2); }
.extras li { display: flex; justify-content: space-between; gap: 12px; }
@media (max-width: 640px) {
  dialog.sheet { width: 100vw; max-width: 100vw; margin: auto 0 0; max-height: 88vh; border-radius: 22px 22px 0 0; border-bottom: 0; }
  .sheet-body { padding: 22px 20px calc(24px + var(--safe-b)); }
  .sheet-body header img { display: none; }
  .schedule li { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .schedule .mini, .schedule .tag { grid-column: 3; grid-row: 2; justify-self: end; }
  .schedule .each { grid-column: 3; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) { .landing, .fade, .pad i, .card-action i, .walk-in, .tour-choice { transition: none; } }

/* The panoramic donor tour is the primary entrance. */
.landing-actions .tour-choice{min-width:280px;padding:22px 30px;background:#efd497;color:#17272b;border-color:#efd497}.landing-actions .tour-choice span{font-size:25px}.landing-actions .tour-choice small{color:#34494b}.landing-actions .walk-in{min-width:160px;padding:15px 22px}.landing-actions .walk-in span:first-child{font-size:19px}.landing-cart{position:absolute;top:24px;right:84px;text-decoration:none}.walk-cart{position:absolute;right:24px;top:24px;text-decoration:none;pointer-events:auto}.landing-actions{align-items:center}@media(max-width:640px){.landing-actions{flex-direction:column}.landing-actions .tour-choice{min-width:260px}.landing-actions .walk-in{min-width:180px}.landing-cart{right:75px;top:20px;font-size:12px}.walk-cart{right:12px;top:85px;font-size:12px}}
.landing-actions .walk-in,.landing-actions .tour-choice{position:relative;inset:auto;transform:none;flex:0 0 auto}.landing-actions{display:flex;gap:16px;width:max-content;max-width:calc(100vw - 32px)}.landing-cart,.walk-cart{gap:8px}.landing-cart [data-cart-count],.walk-cart [data-cart-count]{letter-spacing:normal;padding:2px 6px;background:#efd497;color:#17272b;border-radius:12px}
/* School identity: typography and palette verified against lanaarschool.org. */
:root{--night:#042339;--glass:rgba(4,35,57,.9);--glass-strong:rgba(4,35,57,.97);--gold:#BC9E5D;--blue:#042339;--font:Inter,Arial,sans-serif;--text-3:rgba(255,255,255,.72)}
.school-logo{display:block;width:140px;height:48px;object-fit:contain}
.chip-brand{height:64px;padding:8px 16px;background:#fff;border-color:#fff;border-radius:2px}
button.chip-brand:hover{background:#f4f1eb}
.chip:not(.chip-icon):not(.chip-brand){letter-spacing:.06em;border-radius:2px}
.landing-cart,.walk-cart{min-height:44px}
.landing-actions{gap:12px;align-items:stretch}
.landing-actions .tour-choice,.landing-actions .walk-in{border-radius:2px;min-height:100px;padding:20px 28px;box-shadow:0 8px 28px #04233933}
.landing-actions .tour-choice{background:#BC9E5D;border-color:#BC9E5D;color:#042339}
.landing-actions .tour-choice:hover{background:#d3bc8e;border-color:#d3bc8e}
.landing-actions .tour-choice span{font-family:"PP Fragment Serif",Georgia,serif;font-size:32px;letter-spacing:0}
.landing-actions .tour-choice small{color:#042339}
.landing-actions .walk-in span:first-child{font-size:16px;letter-spacing:.05em}
.landing-cart [data-cart-count],.walk-cart [data-cart-count]{background:#BC9E5D;color:#042339}
.card,.glass-btn,.sheet-bundle,.gift-amount{border-radius:4px}
.sheet-body h2,.card-title{font-family:"PP Fragment Serif",Georgia,serif;font-weight:400}
.glass-btn.is-primary{color:#042339}.glass-btn.is-primary:hover{background:#d3bc8e}
#map.overlay{background:#042339;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:auto}
.map-panel{max-height:calc(100dvh - 32px)}
.map-plan svg{max-height:min(76vh,calc(100dvh - 160px))}
.plan .room.is-start rect{fill:#BC9E5D}
@media(max-width:640px){.chip-brand{left:16px;top:20px;height:48px;padding:5px 10px}.school-logo{width:104px;height:36px}.landing-actions{width:calc(100% - 48px);max-width:340px}.landing-actions .tour-choice,.landing-actions .walk-in{min-width:0;width:100%;min-height:76px}.landing-actions .tour-choice{padding:18px}.landing-cart{font-size:11px;padding:0 10px}.landing-plan{right:16px;top:20px}.walk-cart{top:24px}}
/* The pad is a visual guide; touch gestures belong to the canvas beneath it. */
#pad{pointer-events:none}
.pill-room{min-width:0;flex:1}.pill-icon{flex:0 0 44px}
@media(pointer:coarse){.pad:not(.is-live){left:calc(24px + var(--safe-l));bottom:calc(112px + var(--safe-b));width:88px;height:88px}.hint{bottom:calc(216px + var(--safe-b));white-space:normal;text-align:center;line-height:1.4}}
@media(max-width:640px){.pill{bottom:calc(24px + var(--safe-b))}.pill-room{padding-left:16px;gap:8px;font-size:14px}#pill-sub,#pill-dot{display:none}}
/* PROPOSED (site-polish): the walk HUD sits under the landing; keep it out of the tab order and screen readers until the walk starts. */
body:not(.is-walking) .hud{visibility:hidden}
/* PROPOSED: top chips respect safe areas on phones, and do not collide at 320px. */
@media(max-width:640px){.chip-brand{left:calc(16px + var(--safe-l));top:calc(20px + var(--safe-t))}.landing-plan{right:calc(16px + var(--safe-r));top:calc(20px + var(--safe-t))}.landing-cart{right:calc(68px + var(--safe-r));top:calc(20px + var(--safe-t))}.walk-cart{right:calc(12px + var(--safe-r));top:calc(24px + var(--safe-t))}}
@media(min-width:641px){.landing-cart{top:calc(24px + var(--safe-t));right:calc(84px + var(--safe-r))}.walk-cart{top:calc(24px + var(--safe-t));right:calc(24px + var(--safe-r))}}
@media(max-width:360px){.landing-cart{letter-spacing:0;padding:0 8px}.chip-brand .school-logo{width:92px}}
/* PROPOSED: visible load-failure message on the landing (the note chip is hidden on phones otherwise). */
.chip-note.is-error{display:inline-flex!important;white-space:normal;height:auto;padding:10px 14px;line-height:1.4;letter-spacing:.02em;text-transform:none;left:calc(16px + var(--safe-l));right:calc(16px + var(--safe-r));bottom:calc(16px + var(--safe-b));justify-content:center;text-align:center}
/* PROPOSED (low power): the low tier's one suggestion on the walk's loading screen, a calm line above the two choices.
   Navy glass without a backdrop blur (it is shown on the weakest devices), the gold hairline of the primary action. */
.walk-nudge{position:absolute;left:0;right:0;bottom:calc(100% + 12px);display:grid;gap:4px;padding:14px 18px 6px;border:1px solid var(--hair);border-radius:2px;background:var(--glass);box-shadow:0 8px 28px #04233933;color:var(--text-2);text-align:left;opacity:0;transform:translateY(4px);transition:opacity .6s ease,transform .6s ease}
.walk-nudge.is-on{opacity:1;transform:none}
.walk-nudge-line{margin:0;font-size:14px;font-weight:400;line-height:1.45;letter-spacing:.01em}
.walk-nudge-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 18px}
.walk-nudge-tour,.walk-nudge-go{display:inline-flex;align-items:center;min-height:44px;padding:0;margin:0;background:none;border:0;font:inherit;font-size:13px;letter-spacing:.04em;cursor:pointer}
.walk-nudge-tour{color:var(--text);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:1px;text-underline-offset:6px}
.walk-nudge-go{color:var(--text-3)}
.walk-nudge-tour:hover,.walk-nudge-go:hover{color:#fff}
.walk-nudge.is-compact{display:flex;flex-wrap:wrap;align-items:center;column-gap:18px;padding:4px 14px}
.walk-nudge.is-compact .walk-nudge-line{font-size:12.5px;line-height:1.35;padding-top:6px}
.walk-nudge.is-compact .walk-nudge-actions{flex:1 0 auto}
.walk-nudge.is-compact .walk-nudge-tour,.walk-nudge.is-compact .walk-nudge-go{min-height:36px;font-size:12.5px}
@media(max-width:640px){.walk-nudge{padding:12px 16px 4px}.walk-nudge-actions{gap:0 14px}.walk-nudge-tour,.walk-nudge-go{letter-spacing:.02em}}
.walk-nudge.is-below{bottom:auto;top:calc(100% + 8px)}
.landing.has-nudge-below .chip-note:not(.is-error){display:none}
@media (prefers-reduced-motion: reduce){.walk-nudge{transition:none;transform:none}}
/* The room gift in the walk (SW75): under "Your gifts", in the walk's own glass; 36 px to see, 44 px to tap. It waits over the
   floor plan and, on phones, while a toast is up (the toast is centred at the top). */
.walk-room{top:calc(24px + var(--safe-t) + 52px);right:calc(24px + var(--safe-r));height:36px;padding:0 14px;font-size:12.5px;letter-spacing:.02em;text-transform:none;pointer-events:auto}
.walk-room::after{content:"";position:absolute;inset:-4px 0}
@media(max-width:640px){.walk-room{right:calc(12px + var(--safe-r))}.hud:has(#toast:not([hidden])) .walk-room{visibility:hidden}}
.has-overlay .walk-room{visibility:hidden}
/* Phone fixes (the phone-fixes layer, 28 Sep 2026): the 3D walk on small phones. Only on phones (upright: max-width 480 px; on its
   side: 481-960 px wide and at most 520 px tall), so a computer and a tablet do not change.
   On its side the walk takes the phone's HUD (every rule above is width-based, so a phone on its side got the computer's): the
   chips at the phone's offsets inside the notch insets, the room button hidden under a toast as upright, the pill lower, the
   landing's two choices sharing the row (at 667 px "Walk in" ran 79 px off the screen), the floor plan inside the notch and
   home-bar insets, and the hint below the top chips (it covered the room button and the logo, and took their taps).
   Everywhere on a phone: the hint as wide as the screen allows (it was held to half the width: a four-line capsule at 320 px),
   the price card's close button 44 px and its "Everything in …" link a 44 px tap band (its look unchanged; the band stays
   inside the card and clear of the card's main button), and the nudge's
   compact buttons 44 px. */
@media (min-width:481px) and (max-width:960px) and (max-height:520px){
 .chip-brand{left:calc(16px + var(--safe-l));top:calc(20px + var(--safe-t));height:48px;padding:5px 10px}
 .school-logo{width:104px;height:36px}
 .landing-plan{right:calc(16px + var(--safe-r));top:calc(20px + var(--safe-t))}
 .landing-cart{right:calc(68px + var(--safe-r));top:calc(20px + var(--safe-t));font-size:11px;padding:0 10px}
 .walk-cart{right:calc(12px + var(--safe-r));top:calc(24px + var(--safe-t));font-size:12px}
 .walk-room{right:calc(12px + var(--safe-r))}
 .hud:has(#toast:not([hidden])) .walk-room{visibility:hidden}
 .pill{bottom:calc(24px + var(--safe-b))}
 .landing-actions{max-width:calc(100vw - 32px - var(--safe-l) - var(--safe-r))}
 .landing-actions .tour-choice,.landing-actions .walk-in{flex:1 1 0;min-width:0;min-height:76px}
 .landing-actions .tour-choice span{font-size:26px}
 #map.overlay{padding:max(12px,var(--safe-t)) max(16px,var(--safe-r)) max(12px,var(--safe-b)) max(16px,var(--safe-l))}
}
@media (pointer:coarse) and (min-width:481px) and (max-width:960px) and (max-height:520px){.hint{bottom:calc(96px + var(--safe-b))}}
@media (max-width:480px){#map.overlay{padding-top:max(16px,var(--safe-t));padding-bottom:max(16px,var(--safe-b))}}
@media (max-width:480px),(min-width:481px) and (max-width:960px) and (max-height:520px){
 .hint{left:16px;right:16px;width:fit-content;max-width:calc(100vw - 32px);margin:0 auto;transform:none}
 .card-close{width:44px;height:44px;right:4px;top:4px}
 .card-more{position:relative}
 .card-more::after{content:"";position:absolute;left:-6px;right:-6px;top:-10px;bottom:-18px}
 .walk-nudge.is-compact .walk-nudge-tour,.walk-nudge.is-compact .walk-nudge-go{min-height:44px}
}
/* The room's name in the walk's pill opens its gift list; on a computer a hover underlines it, on a phone nothing did (no hover):
   on a phone it is underlined as a link always (the owner: "full ui needs mobile optimization - including menues"). */
@media (max-width:480px),(min-width:481px) and (max-width:960px) and (max-height:520px){.pill-room.is-link #pill-name{text-decoration:underline;text-decoration-color:rgba(255,255,255,.5);text-underline-offset:4px}}
/* ===== ui-dedupe A (SW80) ===== The 3D walk's landing on a touch screen (J7): the nudge's "Open the 360° tour" repeats the gold
   "Explore the campus" card, so it goes; "Continue to the 3D walk" stays (the walk's own card is busy while the walk loads). */
@media (hover:none) and (pointer:coarse){.walk-nudge-tour{display:none}}
/* ===== end ui-dedupe A ===== */