.content-letter { position: relative; padding: clamp(1.5rem, 5vw, 3.5rem); font-size: 1.05rem; line-height: 1.75; }
.letter-mark { margin-bottom: 1.5rem; color: var(--red) !important; font: 700 .78rem Georgia, serif; letter-spacing: .18em; }
.content-section { display: flex; gap: 1rem; align-items: flex-start; margin-top: 1.25rem; padding: 1.35rem 1.5rem; }
.content-section__heading { display: flex; align-items: center; gap: .65rem; min-width: 14rem; }
.content-section__heading h2 { margin: 0; font-size: 1.25rem; }
.content-section p { margin: 0; color: var(--brown-soft); }

/* Client fidelity layer: these visuals are rendered/cropped from the supplied PDF. */
body:has(.portal-card) { background: radial-gradient(circle at 15% 10%, #f3e2b7, transparent 38%), linear-gradient(135deg, #c9942e, #e6c987 48%, #8c5a22) !important; }
body:has(.portal-card)::after { content: ""; position: fixed; inset: 0; pointer-events: none; background: #2b160633; z-index: 0; }
body:has(.portal-card) .site-main { z-index: 1; }
body:has(.portal-card) .portal-card { position: relative; overflow: hidden; padding-top: 17rem; background-color: #f3e2b7e8 !important; background-image: url('/static/client_visuals/portal-page8-tight.png') !important; background-position: center top !important; background-size: 100% 16rem !important; background-repeat: no-repeat !important; border-color: #7e4e1e !important; }
body:has(.portal-card) .portal-mark { display: none; }

body:has(.route-card) .route-card { background: #f3e2b7ee url('/static/client_visuals/route-page3.png') center 7rem / 100% auto no-repeat !important; }
body:has(.route-card) .route-card::after { content: ""; display: block; height: clamp(9rem, 22vw, 15rem); margin-top: 1rem; background: url('/static/client_visuals/route-page3.png') center / contain no-repeat; }
body:has(.route-card) .route-reward::before { content: ""; display: inline-block; width: 4.5rem; height: 4.5rem; background: url('/static/client_visuals/chest-page3.png') center / contain no-repeat; vertical-align: middle; }
body:has(.route-card) .route-map { display: none; }
body:has(.route-card) .route-reward .icon { display: none; }

body:has(.wheel-panel) .wheel-panel { background: linear-gradient(145deg, #f3e2b7, #e6c987) !important; }
body:has(.wheel-panel) .wheel-disc { background: url('/static/client_visuals/wheel-page3.png') center / contain no-repeat !important; border-color: #7e4e1e !important; color: transparent; }
body:has(.wheel-panel) .wheel-disc span, body:has(.wheel-panel) .wheel-disc small { visibility: hidden; }
body:has(.wheel-panel) .wheel-pointer { color: #3a2414; }

body:has(.grid.md\\:grid-cols-2) .site-main { background: url('/static/client_visuals/wizard-page5.png') left 8rem / 13rem auto no-repeat; }
body:has(.grid.md\\:grid-cols-2) .card { border-radius: .2rem !important; background: #f3e2b7dd url('/static/client_visuals/parchment-texture-clean-v2.png') center / cover !important; }
body:has(.data-table) .table-frame { border-radius: .2rem; background: #f3e2b7ee url('/static/client_visuals/table-decor-page6.png') right bottom / 18rem auto no-repeat; }
body:has(.data-table) .data-table th, body:has(.data-table) .data-table td { border-color: #4a2e18aa !important; }

@media (max-width: 760px) {
  body:has(.portal-card) .portal-card { padding-top: 10rem; background-size: auto 10rem !important; }
  body:has(.route-card) .route-card { background-size: auto 12rem !important; background-position: center 9rem !important; }
  body:has(.grid.md\\:grid-cols-2) .site-main { background-size: 7rem auto; background-position: right 7rem; }
}

/* Profile master: the source artwork and its semantic overlays share one
   aspect-ratio canvas, so hotspots stay pinned to the original golden points
   even when the viewport crops the artwork on mobile. */
body:has(.profile-master) { min-width: 0; }
html:has(.profile-master) { overflow-x: clip; }
body:has(.profile-master) .site-header { z-index: 10; }
body:has(.profile-master) .site-header__inner { width: 100%; min-height: 0; padding: .7rem 1rem; justify-content: flex-end; }
body:has(.profile-master) .brand-lockup { display: none; }
body:has(.profile-master) .main-nav { gap: .25rem .8rem; padding: .42rem .7rem; font-size: clamp(.68rem, .9vw, .82rem); background: #21130dcc; border: 1px solid #f0c75e55; border-radius: 999px; backdrop-filter: blur(5px); }
body:has(.profile-master) .main-nav a, body:has(.profile-master) .main-nav button { color: #fff5d7 !important; }
body:has(.profile-master) .profile-master__art { height: 100svh; min-height: 0; aspect-ratio: auto; background: #2c170d; }
body:has(.profile-master) .profile-master__canvas { position: absolute; top: 0; left: 50%; width: auto; min-width: 100%; height: 100%; aspect-ratio: 16 / 9; transform: translateX(-50%); overflow: visible; }
body:has(.profile-master) .profile-master__canvas > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: fill; pointer-events: none; }
body:has(.profile-master) .profile-master__identity { left: 2.5%; bottom: 3.5%; }
body:has(.profile-master) .profile-master__hotspots { position: absolute; inset: 0; }
body:has(.profile-master) .profile-master__hotspot { width: 4.2%; top: var(--hotspot-y); }
body:has(.profile-master) .profile-master__hotspot-ring { inset: -24%; }
body:has(.profile-master) .profile-master__tooltip { z-index: 2; }
body:has(.profile-master) .profile-below-fold { width: min(1120px, calc(100% - 2rem)); }
@media (max-width: 760px) {
  body:has(.profile-master) .site-header__inner { padding: .6rem .75rem; }
  body:has(.profile-master) .main-nav { display: none; }
  body:has(.profile-master) .mobile-nav { display: block; }
  body:has(.profile-master) .mobile-nav summary { padding: .22rem .55rem; border: 1px solid #f0c75e88; border-radius: .4rem; background: #21130dcc; }
  body:has(.profile-master) .mobile-nav__menu { top: 2.65rem; right: 0; background: #21130dee; }
  body:has(.profile-master) .profile-master__canvas { left: 50%; }
  body:has(.profile-master__hotspot:nth-child(1).is-current) .profile-master__canvas { transform: translateX(-14%); }
  body:has(.profile-master__hotspot:nth-child(2).is-current) .profile-master__canvas { transform: translateX(-34%); }
  body:has(.profile-master__hotspot:nth-child(3).is-current) .profile-master__canvas { transform: translateX(-56%); }
  body:has(.profile-master__hotspot:nth-child(4).is-current) .profile-master__canvas { transform: translateX(-76%); }
  body:has(.profile-master__hotspot:nth-child(1).is-current) .profile-master__canvas { transform: translateX(-14%); }
  body:has(.profile-master__hotspot:nth-child(2).is-current) .profile-master__canvas { transform: translateX(-34%); }
  body:has(.profile-master__hotspot:nth-child(3).is-current) .profile-master__canvas { transform: translateX(-56%); }
  body:has(.profile-master__hotspot:nth-child(4).is-current) .profile-master__canvas { transform: translateX(-76%); }
  body:has(.profile-master) .profile-master__canvas.profile-focus-14 { transform: translateX(-14%); }
  body:has(.profile-master) .profile-master__canvas.profile-focus-34 { transform: translateX(-34%); }
  body:has(.profile-master) .profile-master__canvas.profile-focus-56 { transform: translateX(-56%); }
  body:has(.profile-master) .profile-master__canvas.profile-focus-76 { transform: translateX(-76%); }
  body:has(.profile-master) .profile-master__identity { left: 76%; bottom: 10%; transform: translateX(-50%); white-space: nowrap; }
  body:has(.profile-master) .profile-master__hotspot { width: 7%; }
}

/* The client route strip already contains the four canonical points and flags.
   Keep the semantic list available to assistive tech without rendering a second map. */
body:has(.route-card) .route-map { display: none !important; }

/* Big-task content stays readable over the client parchment scene. */
body:has(.grid) section.card {
  background: #f3e2b7f7 url('/static/client_visuals/parchment-texture-clean-v2.png') center / cover !important;
  color: #3a2414 !important;
  border: 1px solid #5b321999 !important;
  opacity: 1 !important;
}
body:has(.grid) section.card p,
body:has(.grid) section.card h2 { color: #3a2414 !important; }
body:has(.grid) section.card .text-slate-400,
body:has(.grid) .text-slate-400 { color: #704521 !important; }
body:has(.grid) .card,
body:has(h1 + p.text-slate-400) .card,
body:has(h1 + section.card) .card {
  background-color: #f3e2b7f7 !important;
  color: #3a2414 !important;
  border-color: #5b321999 !important;
  opacity: 1 !important;
}
body:has(.client-lock-card) .client-lock-card {
  max-width: 760px;
  padding: 2rem;
  background: #f3e2b7f7 url('/static/client_visuals/parchment-texture-clean-v2.png') center / cover !important;
  color: #3a2414 !important;
  box-shadow: inset 0 0 0 5px #5b321922, 0 10px 26px #3a241455;
}
body:has(.client-lock-card) .client-lock-card p { color: #3a2414 !important; }

/* Dashboard is a presentation-like page-3 scene, with the route and wheel sharing one hero. */
body:has(.route-card) .route-card { min-height: 78vh; }
body:has(.route-card) .route-card::before {
  inset: 37% 3% auto;
  height: 29%;
  background-size: 100% auto;
}
body:has(.route-card) .route-card::after {
  content: '';
  display: block;
  position: absolute;
  left: 50%; bottom: 1rem;
  width: min(25rem, 45vw); height: 16rem;
  transform: translateX(-50%);
  pointer-events: none;
  background: url('/static/client_visuals/wheel-client-transparent-v2.png') center / contain no-repeat;
  opacity: .9;
}
body:has(.route-card) .route-card .section-heading::before {
  content: '';
  position: absolute;
  left: 2rem; top: 1.5rem;
  width: 7rem; height: 7rem;
  background: url('/static/client_visuals/compass-page2.png') center / contain no-repeat;
  opacity: .9;
}
body:has(.route-card) .route-map { inset: 50% 4% auto; }
body:has(.route-card) .route-card > * { position: relative; z-index: 2; }
body:has(.route-card) .route-card::before,
body:has(.route-card) .route-card::after { z-index: 1; }

/* Keep history balanced instead of leaving a tall empty column beside micro history. */
body:has(.route-card) .history-grid { grid-template-columns: 1fr; gap: 2rem; }

/* Content pages keep the client art but reserve readable parchment for every text block. */
body:has(.content-letter) .content-letter,
body:has(.content-letter) .content-section {
  color: #3a2414 !important;
  background: #f3e2b7f7 url('/static/client_visuals/parchment-texture-clean-v2.png') center / cover !important;
}
body:has(.content-letter) .content-letter p,
body:has(.content-letter) .content-section p,
body:has(.content-letter) .content-section li,
body:has(.content-letter) .content-letter h2 { color: #3a2414 !important; }

/* Wheel remains open in the scene rather than inside a modern rounded SaaS panel. */
body:has(.wheel-panel) .wheel-panel { background: transparent !important; border: 0 !important; box-shadow: none !important; }
body:has(.wheel-panel) .wheel-layout { background-color: #b8792e; }

/* Replace visible generic icon glyphs with supplied client artwork where the PDF has a matching object. */
.brand-icon, .footer-icon { color: transparent !important; background: url('/static/client_visuals/compass-page2.png') center / contain no-repeat; }
body:has(.leaderboard-table) .page-intro .hero-icon { color: transparent; background: url('/static/client_visuals/compass-page2.png') center / contain no-repeat; }
body:has(.content-letter) .page-intro .hero-icon, body:has(.content-letter) .content-section__heading .icon { color: transparent; background: url('/static/client_visuals/compass-page2.png') center / contain no-repeat; }
body:has(.route-card) .progress-panel__icon .icon, body:has(.route-card) .mini-ticket__icon .icon { color: transparent; background: url('/static/client_visuals/chest-page3.png') center / contain no-repeat; }
@media (max-width: 760px) { .content-section { display: block; } .content-section__heading { min-width: 0; margin-bottom: .7rem; } }

/* Final manual-review refinements: one source crop per hero, no slide-sized backgrounds. */
body:has(.portal-card) .portal-card {
  padding-top: 27rem;
  background-image: url('/static/client_visuals/login-hero-page8-final.png') !important;
  background-size: auto 26rem !important;
  background-position: center top !important;
}
body:has(.route-card) .route-card {
  background: #f3e2b7ee !important;
}
body:has(.route-card) .route-card::after {
  height: clamp(8rem, 14vw, 11rem);
  margin: 1.25rem 0 .25rem;
  background-image: url('/static/client_visuals/route-page3-clean-v2.png');
  background-position: center;
  background-size: 100% auto;
  background-repeat: no-repeat;
}
body:has(.wheel-panel) .wheel-disc {
  width: min(330px, 88vw);
  height: min(240px, 64vw);
  aspect-ratio: auto;
  border: 0 !important;
  box-shadow: none !important;
  background-image: url('/static/client_visuals/wheel-client-transparent-v2.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}
body:has(.wheel-panel) .wheel-disc::after { display: none; }
body:has(.wheel-panel) .wheel-disc { clip-path: circle(47% at 50% 52%); }
body:has(.content-letter) .content-letter {
  border-radius: .25rem !important;
  background: #f3e2b7 url('/static/client_visuals/parchment-texture-clean-v2.png') center / cover !important;
  box-shadow: inset 0 0 0 10px #5b321933, inset 0 0 38px #3a241477, 0 10px 24px #3a241433;
}
body:has(.grid) .site-main { background-image: url('/static/client_visuals/wizard-page5-clean.png'); background-repeat: no-repeat; background-position: right 12rem; background-size: 11rem auto; }
body:has(.grid.md\\:grid-cols-2) .site-main { background: url('/static/client_visuals/wizard-page5-clean.png') right 12rem / 11rem auto no-repeat; }
body:has(.grid) .card { border-radius: .25rem !important; background: #f3e2b7 url('/static/client_visuals/parchment-texture-clean-v2.png') center / cover !important; box-shadow: inset 0 0 0 5px #5b321922, inset 0 0 24px #3a241455, 0 8px 20px #3a241433; }
body:has(.leaderboard-table) .rank-card { border-radius: .25rem; background: #f3e2b7 url('/static/client_visuals/parchment-texture-clean-v2.png') center / cover; box-shadow: inset 0 0 0 4px #5b321922, inset 0 0 18px #3a241455, 0 7px 15px #3a241422; }
body:has(.leaderboard-table) .table-frame { border-radius: .25rem; background-color: #f3e2b7ee; box-shadow: inset 0 0 0 5px #5b321922, inset 0 0 28px #3a241455; }
body:has(#participants) .site-main { background: url('/static/client_visuals/compass-page2.png') right 1rem / 8rem auto no-repeat; }
body:has(#participants) #participants { border-radius: .25rem !important; background: #f3e2b7ee; border: 1px solid #5b321999; box-shadow: inset 0 0 0 5px #5b321922, inset 0 0 28px #3a241455; }
@media (max-width: 760px) {
  body:has(.portal-card) .portal-card { padding-top: 19rem; background-size: auto 18rem !important; }
  body:has(.route-card) .route-card::after { height: 7rem; background-size: auto 7rem; }
  body:has(#participants) .site-main { background-size: 5rem auto; }
  body:has(.grid) .site-main { background-position: right 8rem; background-size: 8rem auto; }
}
body:has(.route-card) .route-reward::before { display: none; }

/* Full-page client presentation treatment. Functional controls remain overlays. */
body:has(.portal-card) { background: #2c170d url('/static/client_visuals/parchment-texture-clean-v2.png') center / cover fixed !important; }
body:has(.portal-card) .site-main { width: 100%; max-width: none; padding: 0; }
body:has(.portal-card) .portal-shell { min-height: calc(100vh - 87px); width: 100%; padding: clamp(2rem, 6vh, 5rem) 7vw; display: flex; align-items: center; justify-content: flex-start; background: linear-gradient(90deg, #2b160dcc 0%, #2b160d33 54%, #2b160d66 100%), url('/static/client_visuals/login-hero-page8-final.png') right center / auto 100% no-repeat; }
body:has(.portal-card) .portal-card { width: min(520px, 100%); margin: 0; padding: clamp(2rem, 4vw, 4rem); background: #f3e2b7dd !important; box-shadow: inset 0 0 0 8px #5b321933, inset 0 0 38px #3a241477, 0 18px 45px #170b0888; backdrop-filter: blur(2px); }

body:has(.route-card) .site-main, body:has(.wheel-panel) .site-main, body:has(.leaderboard-table) .site-main, body:has(#participants) .site-main { width: 100%; max-width: none; padding-inline: 0; }
body:has(.route-card) .page-intro, body:has(.route-card) .progress-grid, body:has(.route-card) .section-heading--tight, body:has(.route-card) .task-grid, body:has(.route-card) .mini-ticket, body:has(.route-card) .history-grid, body:has(.route-card) .quiet-link { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; }
body:has(.route-card) .route-card { position: relative; min-height: 62vh; width: 100%; margin: 0 0 2rem; padding: clamp(2rem, 6vw, 5rem) max(1rem, calc((100% - 1120px) / 2)); border-radius: 0 !important; overflow: hidden; background: #b8792e url('/static/client_visuals/parchment-texture-clean-v2.png') center / cover !important; box-shadow: inset 0 0 0 10px #3a241455, inset 0 0 70px #3a2414aa; }
body:has(.route-card) .route-card::before { content: ''; position: absolute; inset: 48% 0 auto; height: 24%; background: url('/static/client_visuals/route-page3-clean-v2.png') center / 100% auto no-repeat; opacity: .95; }
body:has(.route-card) .route-card::after { display: none; }
body:has(.route-card) .route-card > * { position: relative; z-index: 1; }
body:has(.route-card) .route-map { display: grid !important; margin-top: 13rem; }
body:has(.route-card) .route-stop { min-height: 6rem; }
body:has(.route-card) .route-stop--completed .route-marker, body:has(.route-card) .route-stop.has-choice .route-marker { background: #5d7b3dcc; color: #fff5d7; }
body:has(.route-card) .route-stop--current .route-marker, body:has(.route-card) .route-stop.is-current .route-marker { background: #f0c75eee; color: var(--brown); box-shadow: 0 0 0 5px #fff5d788, 0 0 20px #f0c75e; }
body:has(.route-card) .route-stop--failed .route-marker { background: #7e2e22dd; color: #fff5d7; }
body:has(.route-card) .route-stop--locked .route-marker { opacity: .72; }

body:has(.wheel-panel) .wheel-layout { min-height: calc(100vh - 180px); margin: 0; padding: clamp(2rem, 5vh, 4rem) max(1rem, calc((100% - 1120px) / 2)); align-items: center; grid-template-columns: minmax(0, 1fr) 280px; background: #b8792e url('/static/client_visuals/parchment-texture-clean-v2.png') center / cover; box-shadow: inset 0 0 0 10px #3a241455, inset 0 0 70px #3a2414aa; }
body:has(.wheel-panel) .wheel-panel { min-height: 66vh; padding: 3rem 2rem; background: #f3e2b744 !important; border: 0; border-radius: 0; box-shadow: none; }
body:has(.wheel-panel) .wheel-disc { width: min(58vh, 620px); height: min(58vh, 620px); max-width: 80vw; max-height: 80vw; }
body:has(.wheel-panel) .assignment-reveal { max-width: 620px; background: #f3e2b7ee; box-shadow: 0 10px 28px #3a241455; }
body:has(.wheel-panel) .compass-note { background: #f3e2b7dd; border-radius: .25rem; }

body:has(.content-letter) .site-main { width: 100%; max-width: none; padding-inline: max(1rem, 5vw); background: url('/static/client_visuals/parchment-texture-page4.png') center / cover; box-shadow: inset 0 0 60px #3a241488; }
body:has(.content-letter) .page-intro, body:has(.content-letter) .content-letter, body:has(.content-letter) .content-section { max-width: 1180px; margin-inline: auto; }
body:has(.content-letter) .content-letter { min-height: 68vh; border-radius: .2rem !important; background: #f3e2b7dd url('/static/client_visuals/parchment-texture-clean-v2.png') center / cover !important; box-shadow: inset 0 0 0 12px #5b321933, inset 0 0 46px #3a241477, 0 14px 34px #3a241455; }
body:has(.content-letter) .site-main { background: #b8792e url('/static/client_visuals/parchment-texture-clean-v2.png') center / cover; }

body:has(.grid.md\\:grid-cols-2) .site-main { width: 100%; max-width: none; min-height: calc(100vh - 87px); padding-inline: max(1rem, 5vw); background: #b8792e url('/static/client_visuals/parchment-texture-clean-v2.png') center / cover; box-shadow: inset 0 0 70px #3a241488; }
body:has(.grid.md\\:grid-cols-2) .card { background: #f3e2b7dd url('/static/client_visuals/parchment-texture-clean-v2.png') center / cover !important; box-shadow: 0 9px 24px #3a241466, inset 0 0 0 5px #5b321922; }
body:has(.grid.md\\:grid-cols-2) .site-main::after { content: ''; position: fixed; right: 2vw; bottom: 2rem; width: 16rem; height: 16rem; pointer-events: none; background: url('/static/client_visuals/chest-page5.png') bottom right / contain no-repeat; opacity: .95; }
body:has(h1 + p.text-slate-400) .site-main, body:has(h1 + section.card) .site-main { width: 100%; max-width: none; min-height: calc(100vh - 87px); padding-inline: clamp(12rem, 18vw, 20rem); background: #b8792e url('/static/client_visuals/parchment-texture-clean-v2.png') center / cover; box-shadow: inset 0 0 70px #3a241488; }
body:has(h1 + p.text-slate-400) .site-main > *, body:has(h1 + section.card) .site-main > * { position: relative; z-index: 2; }
body:has(h1 + p.text-slate-400) .card, body:has(h1 + section.card) .card { background: #f3e2b7f5 url('/static/client_visuals/parchment-texture-clean-v2.png') center / cover !important; box-shadow: inset 0 0 0 5px #5b321922, 0 10px 26px #3a241455; }
body:has(h1 + p.text-slate-400) .site-main::before, body:has(h1 + section.card) .site-main::before { content: ''; position: absolute; left: 3vw; bottom: 2rem; width: clamp(10rem, 15vw, 18rem); height: clamp(10rem, 15vw, 18rem); pointer-events: none; z-index: 1; background: url('/static/client_visuals/wizard-page5-clean.png') bottom left / contain no-repeat; opacity: .92; }
body:has(h1 + p.text-slate-400) .site-main::after, body:has(h1 + section.card) .site-main::after { content: ''; position: absolute; right: 2vw; bottom: 2rem; width: clamp(10rem, 15vw, 16rem); height: clamp(10rem, 15vw, 16rem); pointer-events: none; z-index: 1; background: url('/static/client_visuals/chest-page5.png') bottom right / contain no-repeat; opacity: .95; }
body:has(h1 + p.text-slate-400) .site-main, body:has(h1 + section.card) .site-main { color: #3a210f; }
body:has(h1 + p.text-slate-400) .site-main p, body:has(h1 + p.text-slate-400) .site-main label, body:has(h1 + p.text-slate-400) .site-main dt, body:has(h1 + p.text-slate-400) .site-main dd, body:has(h1 + p.text-slate-400) .site-main .text-slate-400, body:has(h1 + p.text-slate-400) .site-main .text-amber-300, body:has(h1 + section.card) .site-main p, body:has(h1 + section.card) .site-main label, body:has(h1 + section.card) .site-main dt, body:has(h1 + section.card) .site-main dd, body:has(h1 + section.card) .site-main .text-slate-400, body:has(h1 + section.card) .site-main .text-amber-300 { color: #3a210f !important; }

body:has(.leaderboard-table) .site-main { min-height: calc(100vh - 87px); padding: clamp(2rem, 5vh, 4rem) max(1rem, 5vw); background: #b8792e url('/static/client_visuals/parchment-texture-clean-v2.png') center / cover fixed; box-shadow: inset 0 0 80px #3a2414aa; }
body:has(.leaderboard-table) .rank-card, body:has(.leaderboard-table) .table-frame { border-radius: .2rem !important; background: #f3e2b7f5 url('/static/client_visuals/parchment-texture-clean-v2.png') center / cover !important; box-shadow: inset 0 0 0 5px #5b321922, inset 0 0 28px #3a241455, 0 10px 25px #3a241455; }
body:has(.leaderboard-table) .rank-card .icon { display: none; }
body:has(#participants) .site-main { min-height: calc(100vh - 87px); padding: clamp(2rem, 5vh, 4rem) max(1rem, 5vw); background: #b8792e url('/static/client_visuals/parchment-texture-clean-v2.png') center / cover fixed; box-shadow: inset 0 0 80px #3a2414aa; }
body:has(#participants) .site-main::before { content: ''; position: absolute; right: 3vw; top: 2rem; width: 9rem; height: 9rem; pointer-events: none; background: url('/static/client_visuals/compass-page2.png') center / contain no-repeat; opacity: .82; }
body:has(#participants) #participants { background: #f3e2b7f5 url('/static/client_visuals/parchment-texture-clean-v2.png') center / cover; box-shadow: inset 0 0 0 6px #5b321922, inset 0 0 30px #3a241455; }

/* Keep the four semantic route states on top of the single client strip. */
body:has(.route-card) .route-map {
  position: absolute;
  inset: 55% 4% auto;
  z-index: 2;
  display: flex !important;
  align-items: center;
  justify-content: space-around;
  gap: 0;
  margin: 0 !important;
  padding: 0;
  list-style: none;
}
body:has(.route-card) .route-map::before {
  content: '';
  position: absolute;
  left: 5%; right: 5%; top: 50%;
  border-top: 2px dashed #5b321988;
  z-index: -1;
}
body:has(.route-card) .route-stop {
  display: grid;
  place-items: center;
  min-height: 0;
  width: 4.5rem;
  text-align: center;
}
body:has(.route-card) .route-stop > div { display: none; }
body:has(.route-card) .route-marker {
  display: grid;
  place-items: center;
  width: 3.1rem; height: 3.1rem;
  border: 3px solid #fff5d7;
  border-radius: 50%;
  background: #9b6a27dd;
  box-shadow: 0 2px 8px #3a241488;
}
body:has(.route-card) .route-marker .icon { width: 1.5rem; height: 1.5rem; }

@media (max-width: 760px) {
  body:has(.portal-card) .portal-shell { min-height: calc(100vh - 72px); padding: 1rem; background-position: center; background-size: cover; }
  body:has(.portal-card) .portal-card { width: 100%; padding: 1.5rem; }
  body:has(.route-card) .route-card { min-height: 58vh; padding: 2rem 1rem; }
  body:has(.route-card) .route-card::before { inset: 44% 0 auto; height: 22%; background-size: auto 100%; }
  body:has(.route-card) .route-map { inset: 50% 2% auto; margin-top: 0; }
  body:has(.wheel-panel) .wheel-layout { min-height: calc(100vh - 150px); grid-template-columns: 1fr; padding: 1rem; }
  body:has(.wheel-panel) .wheel-panel { min-height: 70vh; padding: 1.5rem .5rem; }
  body:has(.wheel-panel) .wheel-disc { width: min(78vw, 420px); height: min(78vw, 420px); }
  body:has(.grid.md\\:grid-cols-2) .site-main::after { width: 8rem; height: 8rem; opacity: .75; }
  body:has(.route-card) .route-card { min-height: 76vh; }
  body:has(.route-card) .route-card::before { inset: 40% 0 auto; height: 22%; }
  body:has(.route-card) .route-map { inset: 47% 1% auto; }
  body:has(.route-card) .route-card::after { width: 12rem; height: 9rem; bottom: .5rem; }
  body:has(.route-card) .route-card .section-heading::before { width: 4rem; height: 4rem; left: .5rem; top: .5rem; }
}
/* Participant profile is an interactive presentation of client PDF page 1. */
body:has(.profile-master) { background: #2c170d !important; overflow-x: hidden; }
body:has(.profile-master) .site-header { position: absolute; inset: 0 0 auto; background: linear-gradient(180deg, #2b160d99, transparent) !important; border-bottom: 0 !important; box-shadow: none !important; }
body:has(.profile-master) .site-header__inner { width: min(100% - 2rem, 1540px); min-height: 72px; }
body:has(.profile-master) .site-main { width: 100%; max-width: none; padding: 0; }
.profile-master { width: 100%; background: #2c170d; }
.profile-master__art { position: relative; width: 100vw; max-width: none; min-height: 100vh; margin: 0; overflow: hidden; aspect-ratio: 16 / 9; box-shadow: inset 0 0 7rem #2c170d55; }
.profile-master__art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.profile-master__identity { position: absolute; z-index: 2; left: 2.5%; bottom: 3.5%; display: grid; gap: .12rem; padding: .45rem .75rem; color: #3a2414; background: #f3e2b7b8; border: 1px solid #7e4e1e88; box-shadow: 0 3px 12px #3a241433; font-size: clamp(.68rem, 1vw, .92rem); }
.profile-master__identity strong { font: 700 1em Georgia, serif; }
.profile-master__identity span { font-size: .82em; }
.profile-master__identity small { font-size: .72em; }
.profile-master__hotspots { position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; list-style: none; }
.profile-master__hotspot { position: absolute; left: var(--hotspot-x); top: var(--hotspot-y); width: 3.5%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.profile-master__hotspot a, .profile-master__hotspot button { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.profile-master__hotspot-ring { position: absolute; inset: -30%; border: 2px solid transparent; border-radius: 50%; transition: transform .2s, border-color .2s, box-shadow .2s; }
.profile-master__hotspot a:hover .profile-master__hotspot-ring, .profile-master__hotspot button:hover .profile-master__hotspot-ring, .profile-master__hotspot a:focus-visible .profile-master__hotspot-ring, .profile-master__hotspot button:focus-visible .profile-master__hotspot-ring { transform: scale(1.16); border-color: #f0c75e; box-shadow: 0 0 18px #f0c75ebb; }
.profile-master__hotspot.is-completed .profile-master__hotspot-ring { border-color: #f0c75eaa; box-shadow: 0 0 14px #f0c75e99; }
.profile-master__hotspot.is-current .profile-master__hotspot-ring { border-color: #f0c75e; animation: profile-hotspot-pulse 2.2s ease-in-out infinite; }
.profile-master__hotspot.is-failed .profile-master__hotspot-ring { border-color: #7e2e22cc; }
.profile-master__tooltip { position: absolute; left: 50%; bottom: 145%; display: grid; gap: .15rem; min-width: 9rem; padding: .55rem .7rem; color: #3a2414; text-align: left; background: #f3e2b7f2; border: 1px solid #7e4e1e; box-shadow: 0 5px 16px #2c170d55; opacity: 0; pointer-events: none; transform: translate(-50%, .35rem); transition: opacity .2s, transform .2s; }
.profile-master__tooltip b { font: 700 .72rem Georgia, serif; color: #7e2e22; }
.profile-master__tooltip strong { font-size: .78rem; }
.profile-master__tooltip small { font-size: .7rem; }
.profile-master__hotspot:hover .profile-master__tooltip, .profile-master__hotspot:focus-within .profile-master__tooltip { opacity: 1; transform: translate(-50%, 0); }
.profile-master__actions { position: absolute; z-index: 4; right: 2.5%; bottom: 3.5%; display: flex; gap: .35rem; }
.profile-master__actions a { padding: .38rem .6rem; color: #3a2414; font: 700 .76rem Georgia, serif; background: #f3e2b7c9; border: 1px solid #7e4e1e99; }
.profile-master__actions a:hover { background: #f0c75e; }
.profile-below-fold { width: min(1120px, 100% - 2rem); margin: 0 auto; padding: 4rem 0; }
@keyframes profile-hotspot-pulse { 0%, 100% { transform: scale(.95); opacity: .7; } 50% { transform: scale(1.12); opacity: 1; } }
@media (max-width: 760px) {
  body:has(.profile-master) .profile-master__art { width: 100%; }
  body:has(.profile-master) .profile-master__canvas { overflow: hidden; }
  body:has(.profile-master) .site-header__inner { min-height: 64px; }
  .profile-master__art { min-height: 100svh; height: 100svh; aspect-ratio: auto; }
  .profile-master__art > img { object-fit: cover; object-position: 77% center; }
  .profile-master__identity { left: 1rem; bottom: 1rem; }
  .profile-master__actions { right: 1rem; bottom: 1rem; }
  .profile-master__actions a { font-size: .66rem; padding: .32rem .42rem; }
  .profile-master__hotspot { width: 7%; top: 68%; }
  .profile-master__tooltip { min-width: 7.5rem; }
}

/* Wheel page is a clean, layered treatment of client PDF page 3. */
body:has(.game-page) { background: #2c170d !important; overflow-x: hidden; }
body:has(.game-page) .site-header { position: relative; inset: auto; z-index: 5; background: #2c170d !important; border-bottom: 0 !important; box-shadow: none !important; }
body:has(.game-page) .site-header__inner { width: min(100% - 2rem, 1540px); min-height: 72px; }
body:has(.game-page) .site-main { width: 100%; max-width: none; padding: 0; }
.game-page { width: 100%; background: #2c170d; }
.wheel-stage { position: relative; width: min(100%, 1600px); margin: 0 auto; aspect-ratio: 1600 / 900; overflow: hidden; }
.wheel-stage__reference { display: block; width: 100%; height: auto; }
.wheel-interactive { position: absolute; inset: 0; pointer-events: none; }
.wheel-disc { position: absolute; left: 50.3125%; top: 83.8889%; z-index: 1; display: block; width: 14.25%; height: auto; aspect-ratio: 1 / 1; margin: 0; border: 0; color: transparent; transform: translate(-50%, -50%) rotate(0deg); transform-origin: 50% 50%; border-radius: 50%; overflow: hidden; background: url('/static/client_visuals/wheel-disc-original.png?v=clean-rings-2-20260914') center / 100% 100% no-repeat; }
.wheel-disc.is-result { transform: translate(-50%, -50%) rotate(var(--wheel-final-angle, 0deg)); }
.wheel-disc.is-spinning { animation: wheel-master-spin 4.6s cubic-bezier(.12,.72,.17,1) forwards; }
.wheel-controls { width: min(1120px, 100% - 2rem); margin: 0 auto; padding: 1rem 0 0; }
.game-page__back { display: inline-block; padding: .45rem .7rem; color: #3a2414; font: 700 .82rem Georgia, serif; background: #f3e2b7cc; border: 1px solid #7e4e1e99; }
.game-page__panel { width: min(38rem, 100%); margin: 1rem 0 0; padding: .8rem 1rem; color: #3a2414; background: #f3e2b7e8; border: 1px solid #7e4e1e; box-shadow: 0 6px 20px #2c170d55; }
.game-page__hint { margin: 0 0 .65rem; font: 700 .82rem/1.35 Georgia, serif; }
.spin-button { width: 100%; padding: .65rem .8rem; color: #3a2414; font: 800 .9rem Georgia, serif; background: linear-gradient(#f0c75e, #c9942e); border: 1px solid #7e4e1e; box-shadow: 0 3px #7e4e1e; cursor: pointer; }
.spin-button:hover { filter: saturate(1.12) brightness(1.04); }
.spin-button:disabled { cursor: wait; opacity: .72; }
.game-page__error { margin: 0 0 .6rem; color: #7e2e22; font-size: .78rem; }
.wheel-result { display: grid; gap: .3rem; }
.wheel-result .eyebrow { margin: 0; font-size: .64rem; }
.wheel-result h2 { margin: 0; font: 700 1.2rem Georgia, serif; }
.wheel-result p { margin: 0; font-size: .78rem; line-height: 1.35; }
.wheel-result__meta { color: #7e2e22; font-weight: 700; }
.wheel-below-fold { width: min(1120px, 100% - 2rem); margin: 0 auto; padding: 4rem 0; }
.wheel-rules { max-width: 38rem; margin-bottom: 2.5rem; padding: 1.2rem 1.4rem; color: #3a2414; background: #f3e2b7e8 url('/static/client_visuals/parchment-texture-clean-v2.png') center / cover; border: 1px solid #7e4e1e; box-shadow: inset 0 0 22px #3a241455; }
.wheel-rules h2 { margin: 0 0 .4rem; font: 700 1.3rem Georgia, serif; }
.wheel-rules p { margin: 0; }
@keyframes wheel-master-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(1480deg); } }
@media (max-width: 760px) {
  body:has(.game-page) .site-header__inner { min-height: 64px; }
  .wheel-stage { width: 100%; aspect-ratio: 1600 / 900; }
  .wheel-disc { left: 50.3125%; top: 83.8889%; width: 14.25%; }
  .game-page__panel { left: 1rem; right: 1rem; bottom: 2.5rem; width: auto; }
  .game-page__back { font-size: .72rem; }
}
/* Login is the live, full-page version of the client portal slide. */
body:has(.login-master) { background: #2c170d !important; overflow-x: hidden; }
body:has(.login-master) .site-header { position: absolute; inset: 0 0 auto; z-index: 5; background: linear-gradient(180deg, #2b160daa, transparent) !important; border-bottom: 0 !important; box-shadow: none !important; }
body:has(.login-master) .site-header__inner { width: min(100% - 2rem, 1090px); min-height: 72px; }
body:has(.login-master) .site-main { width: 100%; max-width: none; padding: 0; }
.login-master { width: 100%; background: #2c170d; }
.login-master__art { position: relative; width: 100vw; max-width: none; min-height: 100vh; margin: 0; overflow: hidden; aspect-ratio: 16 / 9; }
.login-master__art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.login-master__date-fix { position: absolute; z-index: 3; left: 28.8%; top: 63.8%; width: 24%; height: 6.6%; display: grid; place-items: center; color: #5a2e18; background: #edbd61 url('/static/client_visuals/parchment-texture-clean-v2.png') center / cover; font: 700 clamp(1rem, 2.25vw, 2.35rem)/1 Georgia, serif; letter-spacing: .01em; white-space: nowrap; }
.login-master__form-wrap { position: absolute; z-index: 2; left: 5%; top: 58%; width: min(300px, 31vw); padding: clamp(1rem, 2vw, 1.7rem); color: #3a2414; background: #f3e2b7ed url('/static/client_visuals/parchment-texture-clean-v2.png') center / cover; border: 1px solid #7e4e1e; box-shadow: 0 8px 28px #2c170d66, inset 0 0 0 4px #7e4e1e22, inset 0 0 24px #3a241455; }
.login-master__form-wrap .eyebrow { margin-bottom: .55rem; font-size: .68rem; }
.login-master__form-wrap h1 { margin: 0 0 .45rem; font: 700 clamp(1.45rem, 2.7vw, 2.4rem)/1.05 Georgia, serif; }
.login-master__lead { margin: 0 0 1rem; font-size: .88rem; line-height: 1.35; }
.login-master__error { margin: 0 0 .8rem; padding: .55rem .7rem; color: #7e2e22; border-left: 3px solid #7e2e22; background: #7e2e2212; font-size: .8rem; }
.login-master__form-wrap .travel-form { max-width: none; }
.login-master__form-wrap .travel-form p { margin-bottom: .7rem; }
.login-master__form-wrap .travel-form label { margin-bottom: .25rem; font-size: .78rem; font-weight: 700; }
.login-master__form-wrap .travel-form input { padding: .62rem .7rem; background: #fff5d7dd !important; }
.login-master__cta { width: 100%; margin-top: .25rem; padding: .7rem .8rem; color: #3a2414; font: 800 .88rem Georgia, serif; background: linear-gradient(#f0c75e, #c9942e); border: 1px solid #7e4e1e; box-shadow: 0 3px #7e4e1e; cursor: pointer; }
.login-master__cta:hover { filter: saturate(1.12) brightness(1.04); }
.login-master__note { margin: .85rem 0 0; color: #4a2e18; font-size: .72rem; line-height: 1.3; }
@media (max-width: 760px) {
  body:has(.login-master) .site-header__inner { min-height: 64px; }
  .login-master__art { min-height: 100svh; height: 100svh; aspect-ratio: auto; }
  .login-master__art > img { object-position: 76% center; }
  .login-master__form-wrap { left: 1rem; right: 1rem; top: auto; bottom: 1rem; width: auto; padding: 1rem; }
  .login-master__form-wrap h1 { font-size: 1.5rem; }
  .login-master__lead { font-size: .78rem; margin-bottom: .65rem; }
}

/* Final profile overrides (kept last so the legacy presentation rules above
   cannot reintroduce a constrained frame or independently scaled image). */
body:has(.profile-master) .site-main { width: 100%; max-width: none; padding: 0; }
body:has(.profile-master) .profile-master__art { width: 100vw; height: 100svh; min-height: 0; aspect-ratio: auto; margin: 0; overflow: hidden; }
body:has(.profile-master) .profile-master__canvas { position: absolute; top: 0; left: 50%; width: auto; min-width: 100%; height: 100%; aspect-ratio: 16 / 9; transform: translateX(-50%); overflow: visible; }
body:has(.profile-master) .profile-master__canvas > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: fill; pointer-events: none; }
body:has(.profile-master) .profile-master__identity { left: 2.5%; bottom: 3.5%; }
body:has(.profile-master) .profile-master__hotspots { position: absolute; inset: 0; }
body:has(.profile-master) .profile-master__hotspot { width: 4.2%; top: var(--hotspot-y); }
body:has(.profile-master) .profile-master__hotspot-ring { inset: -24%; }
body:has(.profile-master) .profile-master__tooltip { z-index: 2; }
body:has(.profile-master) .profile-below-fold { width: min(1120px, calc(100% - 2rem)); }
body:has(.profile-master) .site-footer { margin-top: 0; }
@media (max-width: 760px) {
  body:has(.profile-master__hotspot:nth-child(1).is-current) .profile-master__canvas { transform: translateX(-14%); }
  body:has(.profile-master__hotspot:nth-child(2).is-current) .profile-master__canvas { transform: translateX(-34%); }
  body:has(.profile-master__hotspot:nth-child(3).is-current) .profile-master__canvas { transform: translateX(-56%); }
  body:has(.profile-master__hotspot:nth-child(4).is-current) .profile-master__canvas { transform: translateX(-76%); }
}
@media (min-width: 761px) {
  body:has(.profile-master) .site-header__inner { width: 100%; min-height: 0; padding: .7rem 1.2rem; justify-content: flex-end; }
  body:has(.profile-master) .brand-lockup { display: none; }
  body:has(.profile-master) .main-nav { gap: .25rem .8rem; padding: .42rem .7rem; font-size: clamp(.68rem, .9vw, .82rem); background: #21130dcc; border: 1px solid #f0c75e55; border-radius: 999px; backdrop-filter: blur(5px); }
  body:has(.profile-master) .main-nav a, body:has(.profile-master) .main-nav button { color: #fff5d7 !important; }
}
@media (max-width: 760px) {
  body:has(.profile-master) .site-header__inner { width: 100%; min-height: 0; padding: .6rem .75rem; justify-content: flex-end; }
  body:has(.profile-master) .brand-lockup, body:has(.profile-master) .main-nav { display: none; }
  body:has(.profile-master) .mobile-nav { display: block; }
  body:has(.profile-master) .mobile-nav summary { padding: .22rem .55rem; border: 1px solid #f0c75e88; border-radius: .4rem; background: #21130dcc; }
  body:has(.profile-master) .mobile-nav__menu { top: 2.65rem; right: 0; background: #21130dee; }
  body:has(.profile-master) .profile-master__canvas { left: 50%; }
  body:has(.profile-master) .profile-master__canvas.profile-focus-14 { transform: translateX(-14%); }
  body:has(.profile-master) .profile-master__canvas.profile-focus-34 { transform: translateX(-34%); }
  body:has(.profile-master) .profile-master__canvas.profile-focus-56 { transform: translateX(-56%); }
  body:has(.profile-master) .profile-master__canvas.profile-focus-76 { transform: translateX(-76%); }
  body:has(.profile-master) .profile-master__identity { left: 76%; bottom: 10%; transform: translateX(-50%); white-space: nowrap; }
  body:has(.profile-master) .profile-master__hotspot { width: 7%; }
}