/* Fonts are self-hosted (the security policy allows nothing from other sites) and both are free for commercial use
   under the SIL Open Font License. See fonts/LICENSES.txt. Fondamento has one weight, so never bold it. */
@font-face { font-family: "Fondamento"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/fondamento-normal-400.woff2) format("woff2"); }
@font-face { font-family: "Fondamento"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/fondamento-italic-400.woff2) format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/fraunces-normal-700.woff2) format("woff2"); }

/* MouseVacancy: a storybook night sky over cream paper. No inline styles anywhere: the security policy forbids them. */
:root {
  --ink: #231f3a; --muted: #625d79; --paper: #fbf6ec; --tint: #f3ead8; --card: #fffdf8; --line: #e3d7bf;
  --night: #1d1b52; --night-deep: #0f0e2c; --indigo: #2a2766; --gold: #e8a93a; --gold-hi: #f1b84f; --gold-text: #8a5a0a;
  --teal: #1f7f7a; --coral: #e0583f; --green: #1c8f63; --red: #c9382f; --cream: #f6efdc;
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --display: "Fondamento", "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 14px; --cycle: 16s;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 17px/1.6 var(--sans); color: var(--ink); background: var(--paper); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
a { color: var(--teal); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.12; margin: 0 0 .45em; letter-spacing: -.01em; }
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: 0; }
h1 { font-size: clamp(2.5rem, 6.2vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); }
h3 { font-size: 1.2rem; font-weight: 700; }
.h-sm { font-size: 1.45rem; }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 22px; }
.narrow-col { max-width: 720px; }
.muted { color: var(--muted); }
.tight { margin: .3em 0 0; }
.hint { color: var(--muted); font-size: .9rem; margin: .3em 0 0; }
.hint.warn { color: #9a5b00; }
.hint.pull { margin-top: -8px; margin-bottom: 14px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.defs { position: absolute; }

/* header */
.top { position: relative; z-index: 5; border-bottom: 1px solid var(--line); background: var(--paper); }
.top .wrap { display: flex; align-items: center; gap: 22px; padding-top: 16px; padding-bottom: 16px; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; gap: 9px; font: 400 1.55rem var(--display); color: var(--ink); text-decoration: none; }
.logo b { font-weight: 400; color: var(--gold-text); }
.logo-star { width: 22px; height: 22px; fill: var(--gold); animation: glint 4s ease-in-out infinite; }
.nav { display: flex; gap: 22px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.nav a:not(.btn) { color: var(--muted); text-decoration: none; font-size: .95rem; }
.nav a:not(.btn):hover { color: var(--ink); }
.nav form { margin: 0; }
.hero-page .top { position: absolute; inset: 0 0 auto 0; background: transparent; border-bottom-color: rgba(246,239,220,.14); }
.hero-page .logo { color: var(--cream); }
.hero-page .logo b { color: var(--gold); }
.hero-page .nav a:not(.btn) { color: #d3cfec; }
.hero-page .nav a:not(.btn):hover { color: #fff; }
.hero-page .top .btn.secondary { color: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(246,239,220,.45); }

/* buttons and forms */
.btn { display: inline-block; font: inherit; font-weight: 700; cursor: pointer; border: 0; border-radius: 10px; padding: .72em 1.3em;
  background: var(--gold); color: var(--night-deep); text-decoration: none; transition: background .15s, box-shadow .15s, transform .08s; }
.btn:hover { background: var(--gold-hi); }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(35,31,58,.28); }
.btn.secondary:hover { background: rgba(35,31,58,.05); box-shadow: inset 0 0 0 1.5px var(--teal); }
.btn.danger { background: transparent; color: var(--red); box-shadow: inset 0 0 0 1.5px rgba(201,56,47,.5); }
.btn.danger:hover { background: rgba(201,56,47,.07); }
.btn.small { padding: .42em .95em; font-size: .9rem; }
input[type=text], input[type=email], input[type=date], input[type=tel], input[type=url], input:not([type]), select {
  width: 100%; font: inherit; color: var(--ink); background: #fff; border: 1.5px solid #cdbf9f; border-radius: 10px; padding: .65em .85em; }
input::placeholder { color: #8f8aa6; }
input:focus-visible, select:focus-visible { outline: 3px solid rgba(31,127,122,.35); border-color: var(--teal); }
.btn:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 14px; }
label > input, label > select { margin-top: 6px; font-weight: 400; }
fieldset { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
legend { font-weight: 600; font-size: .95rem; padding: 0; margin-bottom: 6px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: .95rem; margin: 0 0 6px; cursor: pointer; }
.check input { margin-top: .3em; accent-color: var(--indigo); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inline { display: flex; gap: 10px; align-items: stretch; }
.inline input { flex: 1; min-width: 0; }

/* flashes and notices */
.flashes { padding-top: 16px; }
.hero-page .flashes { position: relative; z-index: 6; margin-top: 84px; margin-bottom: -60px; }
.flash, .notice { border-radius: 10px; padding: .8em 1.1em; margin: 0 0 10px; border: 1.5px solid var(--line); background: #fff; }
.flash.ok { background: #eaf7f1; border-color: #8fd1b3; }
.flash.error { background: #fdeceb; border-color: #eba39d; }
.notice { background: #fff4dc; border-color: #e9c46f; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.notice form { margin: 0; }

/* hero */
.hero { background: linear-gradient(180deg, #0e0d28 0%, #1d1b52 70%); color: var(--cream); padding-top: 128px; overflow: hidden; }
.hero-copy { text-align: center; max-width: 780px; }
.eyebrow { color: var(--gold); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; margin-bottom: 18px; }
.hero h1 { color: #fff7e3; font-size: clamp(2.3rem, 5.6vw, 4rem); text-wrap: balance; }
.hero .lead { text-wrap: pretty; }
.h1-sub { display: block; margin-top: .12em; color: var(--gold); font-style: italic; }
.lead { font-size: 1.2rem; color: #d3cfec; max-width: 36em; margin: 0 auto 1.6em; }
.signup { display: flex; gap: 10px; max-width: 480px; margin: 0 auto; flex-wrap: wrap; }
.signup input { flex: 1 1 230px; border-color: transparent; }
.fine { color: #aeaad0; font-size: .88rem; margin-top: 12px; }
.hero-scene { margin-top: 34px; line-height: 0; }
.scene { width: 100%; max-width: 1700px; height: auto; display: block; margin: 0 auto; }

/* the scene: one 16 second loop. Each window and dust cloud waits for the fairy via a delay class. */
.scene text, .resort-card text { font-family: var(--sans); font-weight: 800; text-anchor: middle; letter-spacing: .04em; }
.stars circle { animation: twinkle 4s ease-in-out infinite; }
.stars circle:nth-child(3n) { animation-delay: -1.3s; }
.stars circle:nth-child(3n+1) { animation-delay: -2.6s; }
.win { fill: #232a5e; }
.win.on { fill: #f3c15e; }
.win.target { animation: win-target var(--cycle) infinite backwards; }
.dust { opacity: 0; animation: dust var(--cycle) infinite backwards; }
.fairy-path { animation: fly var(--cycle) cubic-bezier(.45, .05, .55, .95) infinite; opacity: 0; }
.fairy-bob { animation: bob 1.3s ease-in-out infinite alternate; }
.wing-l, .wing-l2 { transform-box: fill-box; transform-origin: 100% 60%; animation: flap .2s ease-in-out infinite alternate; }
.wing-r { transform-box: fill-box; transform-origin: 0 60%; animation: flap-r .2s ease-in-out infinite alternate; }
.wand-star { transform-box: fill-box; transform-origin: center; animation: pulse .7s ease-in-out infinite alternate; }
.trail circle { animation: trail 1.1s ease-out infinite; }
.trail circle:nth-child(2) { animation-delay: .25s; } .trail circle:nth-child(3) { animation-delay: .5s; } .trail circle:nth-child(4) { animation-delay: .75s; }
.sign-text.no { fill: #ff6b6b; } .sign-text.yes { fill: #54e0b4; }
.sign-no { animation: sign-no var(--cycle) infinite backwards; }
.sign-yes { opacity: 0; animation: sign-yes var(--cycle) infinite backwards; }
/* Each resort's window, dust and sign wait for her arrival. These come after the animation shorthands above and
   use two classes, so they win: the shorthand would otherwise reset the delay to zero. */
.win.t1 { animation-delay: 2.1s; } .win.t2 { animation-delay: 4.1s; } .win.t3 { animation-delay: 6.1s; }
.win.t4 { animation-delay: 8.1s; } .win.t5 { animation-delay: 10.1s; } .win.t6 { animation-delay: 12.1s; }
.sign-no.t5, .sign-yes.t5 { animation-delay: 10.1s; }
.dust.u1 { animation-delay: 2.9s; } .dust.u2 { animation-delay: 4.9s; } .dust.u3 { animation-delay: 6.9s; }
.dust.u4 { animation-delay: 8.9s; } .dust.u5 { animation-delay: 10.9s; } .dust.u6 { animation-delay: 12.9s; }
.wheel { transform-box: fill-box; transform-origin: center; animation: spin 70s linear infinite; }
.train { animation: ride 14s linear infinite; }

@keyframes win-target { 0%, 1.5% { fill: #232a5e } 2.5%, 18% { fill: #ffe08a } 22%, 100% { fill: #232a5e } }
@keyframes dust { 0% { opacity: 0; transform: translateY(-6px) scale(.5) } 1.5% { opacity: 1; transform: translateY(0) scale(1) } 9% { opacity: 0; transform: translateY(34px) scale(1.05) } 100% { opacity: 0; transform: translateY(34px) } }
@keyframes fly {
  0% { transform: translate(-80px, 170px); opacity: 0 } 3% { transform: translate(-30px, 185px); opacity: 1 }
  15%, 21.25% { transform: translate(80px, 240px) } 27.5%, 33.75% { transform: translate(297px, 260px) }
  40%, 46.25% { transform: translate(544px, 236px) } 52.5%, 58.75% { transform: translate(709px, 252px) }
  65%, 71.25% { transform: translate(984px, 232px) } 77.5%, 83.75% { transform: translate(1130px, 214px) }
  90% { transform: translate(1360px, 110px); opacity: 1 } 91.5%, 100% { transform: translate(1380px, 100px); opacity: 0 } }
@keyframes bob { from { transform: translateY(-3px) } to { transform: translateY(4px) } }
@keyframes flap { from { transform: rotate(-9deg) } to { transform: rotate(9deg) } }
@keyframes flap-r { from { transform: rotate(9deg) } to { transform: rotate(-9deg) } }
@keyframes pulse { from { transform: scale(.85) } to { transform: scale(1.2) } }
@keyframes trail { 0% { opacity: .9; transform: translate(0, 0) scale(1) } 100% { opacity: 0; transform: translate(-12px, 6px) scale(.4) } }
@keyframes twinkle { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }
@keyframes glint { 0%, 100% { transform: rotate(0) scale(1) } 50% { transform: rotate(18deg) scale(1.15) } }
@keyframes sign-no { 0%, 1.5% { opacity: 1 } 2.5%, 18% { opacity: 0 } 22%, 100% { opacity: 1 } }
@keyframes sign-yes { 0%, 1.5% { opacity: 0 } 2.5%, 18% { opacity: 1 } 22%, 100% { opacity: 0 } }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes ride { from { transform: translateX(-80px) } to { transform: translateX(210px) } }

/* the still cards show the happy ending: lit windows, VACANCY, no motion */
.resort-card .win.target { animation: none; fill: #ffe08a; }
.resort-card .sign-no { animation: none; opacity: 0; }
.resort-card .sign-yes { animation: none; opacity: 1; }
.resort-card .wheel, .resort-card .train, .resort-card .logo-star { animation: none; }
.resort-card .train { transform: translateX(70px); }

@media (prefers-reduced-motion: reduce) {
  .scene *, .logo-star, .resort-card * { animation: none !important; }
  .fairy-path { opacity: 1; transform: translate(544px, 236px); }
  .win.target { fill: #ffe08a; }
  .dust { opacity: 0; } .dust.u3 { opacity: 1; transform: translateY(16px); }
  .sign-no { opacity: 0; } .sign-yes { opacity: 1; }
  .train { transform: translateX(70px); }
}

/* sections */
.block { padding: 76px 0; }
.block.tint { background: var(--tint); border-block: 1px solid var(--line); }
.kicker { text-transform: uppercase; letter-spacing: .15em; font-size: .78rem; font-weight: 700; color: var(--gold-text); margin: 0 0 .7em; }
.sub { color: var(--muted); max-width: 42em; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.step p { color: var(--muted); margin: 0; }
.icon { width: 84px; height: 64px; display: block; margin-bottom: 16px; }
.resort-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 30px; }
.resort-card { flex: 0 1 232px; margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.resort-card svg { width: 100%; height: auto; display: block; }
.resort-card figcaption { padding: 14px 18px 18px; }
.resort-card b { display: block; font: 700 1.1rem var(--serif); }
.resort-card span { color: var(--muted); font-size: .93rem; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 26px 0 22px; }
.facts div { border-left: 3px solid var(--gold); padding: 4px 0 4px 18px; }
.facts b { display: block; font: 700 1.35rem var(--serif); }
.facts span { color: var(--muted); }
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 28px; }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 22px; position: relative; }
@media (max-width: 1080px) { .plans { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
.plan.featured { border: 2px solid var(--indigo); box-shadow: 0 14px 34px rgba(42,39,102,.14); }
.ribbon { position: absolute; top: -13px; left: 28px; background: var(--indigo); color: var(--cream); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .3em .9em; border-radius: 999px; }
.price { font: 700 2.4rem var(--serif); margin: .1em 0 .5em; white-space: nowrap; }
.price small { font: 500 .95rem var(--sans); color: var(--muted); margin-left: .35em; }
.plan-note { background: #fff4dc; border: 1px solid #e9c46f; border-radius: 10px; padding: .7em .9em; font-size: .9rem; color: #5b4a1a; margin: 0 0 1.2em; }
.option .plan-note { margin: .6em 0 0; font-size: .85rem; }
.ticks { list-style: none; padding: 0; margin: 0 0 1.4em; }
.ticks li { padding-left: 1.7em; position: relative; margin-bottom: .5em; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .5em; width: .9em; height: .5em; border-left: 2.5px solid var(--green); border-bottom: 2.5px solid var(--green); transform: rotate(-45deg) scale(.8); }
.ticks li.no { color: var(--muted); }
.ticks li.no::before { border: 0; border-top: 2px solid #b3aec6; width: .8em; height: 0; transform: none; top: .8em; }
details { border-bottom: 1px solid var(--line); padding: 16px 0; }
summary { cursor: pointer; font: 700 1.1rem var(--serif); }
details p { margin: .7em 0 0; color: var(--muted); }
.cta { background: linear-gradient(180deg, #1d1b52, #0f0e2c); color: var(--cream); text-align: center; padding: 76px 0; }
.cta h2 { color: #fff7e3; }
.cta p { color: #c9c5e6; }

/* plan scene: all the plans in one night sky, drawn like the hero. Fairies fly with SMIL, so reduced motion swaps in the still groups. */
.plan-figure { margin: 28px 0 0; border-radius: 18px; overflow: hidden; background: #16143f; box-shadow: 0 18px 44px rgba(42,39,102,.22); line-height: 0; }
.plan-scene { display: block; width: 100%; height: auto; }
.plan-tall { display: none; }
.plan-scene .win.target { animation: none; }
.plan-scene .sign-no { animation: none; opacity: 0; }
.plan-scene .sign-yes { animation: none; opacity: 1; }
.plan-scene .win.on, .plan-scene .win.target { fill: #f3c15e; }
.plan-scene text { letter-spacing: 0; }
.zone-0 { fill: rgba(255,255,255,.035); } .zone-1 { fill: rgba(255,255,255,.08); }
.pn-zone { fill: #d3cfec; font: 600 12.5px var(--sans); text-anchor: middle; }
.pn-cad { fill: #c9c5e6; font: 600 12.5px var(--sans); text-anchor: middle; }
.pn-reach { fill: #ffe49a; font: 700 12.5px var(--sans); }
.pn-start { text-anchor: start; } .pn-end { text-anchor: end; }
.pn-lock { fill: #f6efdc; font: 700 14px var(--serif); text-anchor: middle; opacity: .85; }
.pl-name { fill: #fff7e3; font: 400 22px var(--display); text-anchor: start; }
.pl-price { fill: #ffe49a; font: 700 15px var(--serif); text-anchor: start; }
.pl-meta { fill: #d3cfec; font: 600 13px var(--sans); text-anchor: start; }
.pl-end { text-anchor: end; }
.lane-band { fill: rgba(10,9,40,.32); }
.lane-band.is-premium { stroke: rgba(255,226,154,.55); stroke-width: 1.5; }
.flight { fill: none; stroke: #ffe49a; stroke-width: 1.6; stroke-dasharray: 2 6; stroke-linecap: round; opacity: .75; }
.reach { stroke: #ffe49a; stroke-width: 1.5; stroke-dasharray: 4 4; }
.beyond { fill: #0b0a22; opacity: .6; }
.bar-track { fill: rgba(255,255,255,.16); }
.bar-fill { fill: var(--gold); }
.plan-tall .pn-zone, .plan-tall .pn-cad, .plan-tall .pn-reach { font-size: 13.5px; }
.plan-tall .pl-meta { font-size: 14px; }
.plan-tall .pl-name { font-size: 24px; }
.plan-key { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 22px; color: var(--muted); font-size: .94rem; }
.plan-key b { color: var(--ink); }
.motion-note { margin-top: 12px; }
.still { display: none; }
@media (prefers-reduced-motion: reduce) { .anim { display: none; } .still { display: inline; } .plan-scene * { animation: none !important; } }
.speed-wrap { overflow-x: auto; margin: 22px 0 18px; }
.speed-wrap .speed { margin: 0; }
@media (max-width: 700px) { .speed, .speed tbody, .speed tr, .speed th, .speed td { display: block; }
  .speed { background: none; border: 0; margin: 0; }
  .speed thead { position: absolute; left: -9999px; }
  .speed tr { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; padding: 6px 0; overflow: hidden; }
  .speed tbody th { padding: 10px 16px 6px; font-size: 1rem; border: 0; }
  .speed td { display: flex; justify-content: space-between; gap: 12px; padding: 7px 16px; border: 0; font-size: .92rem; }
  .speed td::before { content: attr(data-label); color: var(--muted); }
  .speed td { text-align: right; } }
@media (max-width: 700px) { .plan-wide { display: none; } .plan-tall { display: block; } .plan-key { grid-template-columns: 1fr; } }

.speed { border-collapse: collapse; width: 100%; max-width: 920px; margin: 22px 0 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.speed th, .speed td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.speed thead th { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--tint); }
.speed tbody th { font-weight: 600; }
.speed tbody tr:last-child th, .speed tbody tr:last-child td { border-bottom: 0; }
.speed td.fast { font-weight: 700; color: var(--indigo); }

/* dashboard */
.dash { padding-top: 34px; padding-bottom: 64px; }
.dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.dash-head h1 { font-size: 2.1rem; margin: 0; }
.dash-head form { margin: 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: 0 1px 0 rgba(35,31,58,.03); }
.card h3 { margin-bottom: .35em; }
.badge { display: inline-block; font-size: .74rem; font-weight: 700; padding: .18em .75em; border-radius: 999px; background: var(--indigo); color: var(--cream); letter-spacing: .05em; text-transform: uppercase; }
.badge.premium { background: var(--gold); color: var(--night-deep); }
.dash-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; align-items: start; margin-bottom: 26px; }
.watch { margin-bottom: 16px; }
.watch-top { display: flex; align-items: center; gap: 10px; }
.watch h3 { margin: 0; flex: 1; }
.light { width: 13px; height: 13px; border-radius: 50%; flex: none; background: #a9a4bd; }
.light.red { background: var(--red); box-shadow: 0 0 0 4px rgba(201,56,47,.15); }
.light.green { background: var(--green); box-shadow: 0 0 0 4px rgba(28,143,99,.18); }
.light.amber { background: var(--gold); box-shadow: 0 0 0 4px rgba(232,169,58,.22); }
.watch dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 16px; margin: 14px 0 4px; font-size: .95rem; }
.watch dt { color: var(--muted); }
.watch dd { margin: 0; }
.state { font-weight: 700; }
.state.green { color: var(--green); } .state.red { color: var(--red); } .state.amber { color: #9a5b00; }
.watch form { margin: 0; }
.resort-list { max-height: 220px; overflow: auto; border: 1.5px solid #cdbf9f; border-radius: 10px; padding: 10px 12px; background: #fff; }
.nights { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.nights .pill { margin: 0; }
.pill input { position: absolute; opacity: 0; }
.pill span { display: grid; place-items: center; height: 38px; border-radius: 9px; border: 1.5px solid #cdbf9f; background: #fff; cursor: pointer; font-weight: 700; }
.pill input:checked + span { background: var(--indigo); color: var(--cream); border-color: var(--indigo); }
.pill input:focus-visible + span { outline: 3px solid var(--teal); outline-offset: 2px; }
.pill.locked span { opacity: .5; cursor: not-allowed; background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Crect x='1.5' y='4.5' width='7' height='5' rx='1' fill='%23625d79'/%3E%3Cpath d='M3 4.5V3a2 2 0 0 1 4 0v1.5' fill='none' stroke='%23625d79' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat 90% 14% / 9px; }
#watch-form button.btn { margin-top: 12px; }
.options { display: grid; gap: 12px; margin-top: 14px; }
.option { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; margin: 0; }
.option p { margin: .2em 0 0; }
.channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-bottom: 22px; }
.channel .tag { float: right; }
.locked-card { background: #faf4e6; }
.danger-zone { margin-top: 28px; border-color: rgba(201,56,47,.35); }
.empty { text-align: center; padding: 34px 20px; }
.empty .mini { width: 150px; height: auto; margin: 0 auto 10px; display: block; }

/* centred pages */
.center-page { max-width: 540px; margin: 0 auto; padding: 64px 22px; text-align: center; }
.center-page .card { text-align: left; }
.center-page h1 { font-size: clamp(2rem, 5vw, 2.9rem); }
.big-code { font: 700 4.5rem var(--serif); color: var(--coral); line-height: 1; margin-bottom: 10px; }
.legal { max-width: 760px; padding: 44px 22px 64px; }
.legal h2 { margin-top: 1.6em; font-size: 1.35rem; }
.stat { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); }

/* footer */
.foot { background: #14123a; color: #b9b5d6; margin-top: 0; padding: 34px 0 40px; font-size: .88rem; }
.foot-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.foot .logo { color: var(--cream); } .foot .logo b { color: var(--gold); }
.foot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.foot a { color: #d3cfec; }
.foot p { margin: 0; max-width: 62em; }

@media (max-width: 860px) {
  .dash-grid, .steps, .plans, .facts { grid-template-columns: 1fr; }
  .scene { height: 310px; }
  .nav { margin-left: 0; width: 100%; gap: 14px; }
  .hero { padding-top: 168px; }
  .block { padding: 56px 0; }
  body { font-size: 16px; }
}
@media (max-width: 560px) { .resort-card { flex-basis: calc(50% - 10px); } }
@media (max-width: 420px) { .row2 { grid-template-columns: 1fr; } .nights { grid-template-columns: repeat(5, 1fr); } }