/* /prices: the price pill and the live estimator. Loaded only by prices.html, on top of site.css.
   The opener is the map's own search bar (the same ask box as the home's hero) and its price pill; the eight bands
   settle onto the held map street by street, each opening its card; money, plainly is the one yellow ground. */

/* ---------- opener: the map, its search bar, its price pill ---------- */
.p-open { position: relative; background: var(--map); --halo: var(--map); --tk-fs: var(--tk-hero); overflow: hidden; overflow: clip; }
.p-open-in { position: relative; z-index: 2; min-height: max(100vh, 780px); min-height: max(100svh, 780px); display: flex; flex-direction: column; align-items: flex-start; padding-top: calc(var(--nav-h) + clamp(20px, 4vh, 40px)); padding-bottom: 56px; --cx: 76%; --cy: 56%; }
.p-open .crumb { order: -2; margin-bottom: clamp(12px, 2vh, 20px); }
.p-open .ask { order: -1; }
.p-open .pg-h1 { width: max-content; max-width: 100%; }
.p-lead { margin-top: clamp(18px, 3vh, 28px); max-width: 30ch; font: 600 var(--fs-lead)/1.4 var(--text); text-shadow: 0 0 .2em #fff, 0 0 .4em #fff, 0 0 .7em #fff; }
.p-mk { --px: var(--cx); --py: var(--cy); z-index: 3; }
.p-mk .tk { transition: opacity .25s var(--out); }
.p-mk.is-wait .tk { opacity: .55; }
html.motion .p-mk.is-drop .tk { animation: pin-drop .55s var(--out) both; animation-delay: var(--drop-delay, 0s); }
html.motion .p-mk.is-drop .ring { animation: ring-out .6s var(--out) forwards; animation-delay: calc(var(--drop-delay, 0s) + .32s); }
html.motion .p-mk { --drop-delay: .45s; }
html.motion .p-mk.is-answer { --drop-delay: 0s; }
.p-open .ask-out { z-index: 4; }

/* ---------- the one struck line ---------- */
.haggle-sec { padding: clamp(96px, 12vw, 200px) 0 clamp(56px, 7vw, 120px); }
.haggle { font: 800 clamp(30px, 4.45vw, 64px)/1.02 var(--display); letter-spacing: -.025em; max-width: 18em; }
.haggle .strike { position: relative; display: inline-block; font-size: clamp(88px, 13.9vw, 200px); line-height: .9; letter-spacing: -.04em; color: var(--mute); }
.haggle s { text-decoration: none; }
/* the struck word is drawn, not written: readers and crawlers get "No haggling." from the sr-only twin */
.haggle s::before { content: attr(data-w); content: attr(data-w) / ""; }
.haggle .strike::after { content: ""; position: absolute; left: -.05em; right: -.05em; top: 50%; height: .1em; margin-top: -.05em; background: var(--ink); border-radius: .05em; transform: rotate(-4deg); }
html.motion .haggle .strike::after { transform: rotate(-4deg) scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--inout) .55s; }
html.motion .haggle.is-in .strike::after { transform: rotate(-4deg) scaleX(1); }
.haggle-2 { margin-top: .3em; }

/* ---------- the eight bands, held 340vh: the pills settle onto the map street by street; the band on top opens its
   card bottom left (desktop) or along the bottom (phone). Pills not reached yet wait above the map ---------- */
.bands { height: 340vh; height: 340svh; --halo: var(--map); }
.bands .frame { background: var(--map); }
.bands-head { position: relative; z-index: 3; display: grid; justify-items: start; gap: 6px; padding-top: calc(var(--nav-h) + clamp(20px, 4vh, 44px)); pointer-events: none; }
.bands-head > * { pointer-events: auto; }
.bands-head .arrow-link { background: var(--map); border-radius: 999px; box-shadow: 0 0 0 8px var(--map); }
.bands-list { position: absolute; inset: 0; z-index: 2; }
.band-pin { position: absolute; left: calc(var(--fx) * 100%); top: calc(var(--fy) * 100%); translate: -50% -50%; z-index: 1; display: grid; justify-items: center; gap: 8px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; border-radius: 999px; }
.band-pin .pill { font-size: clamp(28px, min(2.8vw, 4.6vh), 44px); transition: transform .35s var(--out), background-color .25s var(--out), color .25s var(--out), opacity .25s var(--out); }
.band.is-on .band-pin { z-index: 2; }
/* each settled pill carries its band name, the way the app labels a pin; the band on top says it in its card */
.band-nm { font: 600 14px/1.15 var(--text); background: var(--ink); color: #fff; border-radius: 8px; padding: 6px 9px 5px; white-space: nowrap; rotate: 2deg; transition: opacity .2s var(--out); }
.band:nth-child(even) .band-nm { rotate: -2deg; }
.band.is-on .band-nm { opacity: 0; }
.band.is-on .band-pin .pill { background: var(--ink); color: var(--y); transform: scale(1.22) rotate(-3deg); }
@media (hover: hover) { .band-pin:hover .pill { transform: translateY(-3px); } .band.is-on .band-pin:hover .pill { transform: scale(1.22) rotate(-3deg) translateY(-3px); } }
.band-pin:active .pill { transform: scale(.97); transition-duration: .1s; }
/* not reached yet: the pill waits above the street, then drops into place */
html.js .band.is-ahead .band-pin { opacity: 0; transform: translateY(-48px); pointer-events: none; }
.band-pin { transition: opacity .2s var(--in), transform .3s var(--in); }
html.motion .band:not(.is-ahead) .band-pin { animation: pin-drop .55s var(--out) both; }
/* the card of the band on top */
.band-card { position: absolute; left: var(--gutter); bottom: clamp(24px, 5vh, 56px); z-index: 3; width: min(540px, 38vw); display: grid; grid-template-columns: minmax(0, 1fr) clamp(96px, 9vw, 132px); grid-template-areas: "i img" "h img" "p p" "pr pr"; gap: 8px 16px; align-items: start; padding: 22px 24px 24px; background: var(--ink); color: #fff; border-radius: 30px 30px 30px 8px; }
.band-card img { grid-area: img; width: 100%; height: auto; margin: -34px -10px 0 0; rotate: 6deg; }
.band-i { grid-area: i; font: 600 13px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.66); font-variant-numeric: tabular-nums; }
.band-card h3 { grid-area: h; font: 800 clamp(30px, min(3.3vw, 5.6vh), 50px)/.98 var(--display); letter-spacing: -.025em; }
.band-card p { grid-area: p; font-size: 17px; line-height: 1.5; color: rgba(255,255,255,.86); }
.band-p { grid-area: pr; justify-self: start; margin-top: 6px; font-size: clamp(36px, min(4.2vw, 7vh), 64px); transform: rotate(-2deg); }
html.js .band-card { opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .2s var(--in), transform .3s var(--in); }
html.js .band.is-on .band-card { opacity: 1; transform: none; pointer-events: auto; transition: opacity .3s var(--out) .05s, transform .45s var(--out) .05s; }
/* without script the bands are a plain list */
html:not(.js) .bands { height: auto; }
html:not(.js) .bands .frame { position: relative; height: auto; }
html:not(.js) .bands-list { position: static; display: grid; gap: 16px; padding: 24px var(--gutter) 48px; }
html:not(.js) .band-pin, html:not(.js) .band-card { position: static; translate: none; width: auto; }

@media (max-width: 959px) {
  .bands { height: 300vh; height: 300svh; }
  .bands-head { padding-top: calc(var(--nav-h) + 18px); }
  .bands-head .pg-h2 { font-size: 40px; }
  .band-pin { left: calc(var(--fxp) * 100%); top: calc(var(--fyp) * 100%); }
  .band-pin .pill { font-size: 22px; border-width: 2.5px; }
  .band-nm { display: none; }
  .band-card { left: var(--gutter); right: var(--gutter); bottom: 16px; width: auto; grid-template-columns: minmax(0, 1fr) 84px; padding: 16px 18px 18px; border-radius: 22px; gap: 6px 12px; }
  .band-card img { margin-top: -26px; }
  .band-card h3 { font-size: 26px; }
  .band-card p { font-size: 15px; line-height: 1.4; }
  .band-p { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .band-pin, .band-pin .pill, .band-card { transition-duration: .2s !important; transition-delay: 0s !important; }
  html.js .band.is-ahead .band-pin { transform: none; }
}

/* ---------- money, plainly: the yellow ground ---------- */
.p-money { position: relative; background: var(--y); overflow: hidden; overflow: clip; padding: clamp(84px, 10vw, 160px) 0 clamp(72px, 8vw, 128px); }
.p-lock { position: absolute; right: max(var(--gutter), 5vw); top: clamp(56px, 7vw, 112px); width: min(320px, 23vw); height: auto; rotate: 8deg; }
.p-money-in { position: relative; z-index: 1; }
.p-money-sub { margin-top: 20px; max-width: 34ch; font-size: var(--fs-lead); font-weight: 600; line-height: 1.4; }
.p-fee { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font: 600 var(--fs-lead)/1.35 var(--text); }
.p-fee .pill { font-size: clamp(36px, 3.6vw, 52px); padding: .12em .38em .02em; background: var(--ink); color: var(--y); border-color: var(--ink); transform: rotate(-3deg); }
.p-fee > span:last-child { max-width: 40ch; }
.p-money-lead { margin-top: 18px; max-width: 54ch; font-size: 17px; line-height: 1.55; }
.p-rules { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 48px); border-top: 2.5px solid var(--ink); }
.p-rules li { display: grid; align-content: start; justify-items: start; gap: 14px; padding: 28px 0 32px; border-bottom: 1px solid rgba(18,18,18,.28); }
.p-rules .pill { font-size: clamp(48px, 6.1vw, 88px); background: var(--ink); color: var(--y); border-color: var(--ink); padding: .14em .38em .04em; }
.p-rules li > span:last-child { font-size: 17px; line-height: 1.45; max-width: 30ch; }
.p-urgent { margin-top: clamp(40px, 5vw, 64px); display: grid; gap: 12px; }
.p-urgent-h { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font: 800 clamp(30px, 3.6vw, 52px)/1 var(--display); letter-spacing: -.02em; }
.p-urgent-h .pill { font-size: 1em; background: #fff; transform: rotate(-2deg); }
.p-urgent p { font-size: 17px; max-width: 44ch; }
.p-notes { margin-top: 24px; display: grid; gap: 4px; font-weight: 600; }
.p-links { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 0 28px; }

@media (max-width: 959px) {
  .p-open-in { min-height: 0; padding-top: calc(var(--nav-h) + 20px); padding-bottom: 32px; }
  .p-open .ask { order: 0; margin: 0 0 22px; }
  .p-open .crumb { order: 0; }
  .p-open .pg-h1 { width: auto; }
  .p-lead { font-size: 17px; }
  .p-mk { position: relative; left: 50%; top: auto; align-self: stretch; height: 0; margin: 96px 0 92px; }
  .p-lock { width: 132px; right: 8px; top: 40px; }
  .p-money .pg-h2 { padding-right: 120px; }
  .p-rules { grid-template-columns: minmax(0, 1fr); }
  .p-rules li { gap: 10px; padding: 22px 0 24px; }
  .p-rules .pill { font-size: 56px; }
}
@media (prefers-contrast: more) {
  .p-rules li { border-bottom-color: rgba(18,18,18,.6); }
}

/* the FAQ statement at the inner H2 size, so "About the money." holds two lines beside the questions */
.faq .statement { font-size: var(--fs-ih2); }