* {
    box-sizing: border-box;
}

html, body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* ================= SCREEN ================= */
.screen {
    position: relative;
    width: 100%;
    max-width: var(--screen-w);
    min-height: 100dvh;
    margin: 0 auto;
    padding: 0 var(--gutter);
    overflow: hidden;
    background: var(--bg);
}

.hairline {
    display: block;
    height: 1px;
    background: var(--hairline);
}

.trail_line {
    display: block;
    height: 2px;
    background: var(--gold);
}

/* back arrow — always physical left, like the design */
.back_btn {
    position: absolute;
    top: 24px;
    left: var(--gutter);
    width: 44px;
    height: 26px;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 20px;
    line-height: 27.2px;
    text-align: left;
    opacity: 0.72;
    z-index: 2;
}

.back_btn.dim {
    opacity: 0.58;
}

/* footer CTA: gold trail line from the left edge + centered label */
.cta_footer {
    position: absolute;
    inset-inline-end: 0;
    inset-inline-start: 0;
    bottom: 0;
    height: 78px;
}

.cta_footer .trail_line {
    position: absolute;
    inset-inline-end: 0;
    top: 0;
    width: 247px;
}

.cta_footer .cta_btn {
    position: absolute;
    inset-inline-end: var(--gutter);
    inset-inline-start: var(--gutter);
    top: 20px;
    height: 34px;
    font-size: 18px;
    line-height: 19.4px;
    text-align: center;
    white-space: pre;
}

.cta_footer.short {
    height: 88px;
}

.cta_footer.short .trail_line {
    width: 222px;
}

.cta_footer.short .cta_btn {
    top: 30px;
    height: 32px;
}

/* ================= OPENING ================= */
.opening {
    padding: 0;
}

.opening_bg {
    position: absolute;
    top: -16px;
    left: 0;
    width: 100%;
    height: calc(100% + 16px);
    object-fit: cover;
    object-position: center top;
    pointer-events: none;
}

.opening_logo {
    position: relative;
    width: 172px;
    height: 172px;
    margin: 136px auto 0;
}

.opening_logo img {
    display: block;
}

.opening_line {
    position: absolute;
    inset-inline-end: 0;
    bottom: 265px;
    width: 247px;
}

.opening_tagline {
    position: absolute;
    inset-inline-end: var(--gutter);
    inset-inline-start: var(--gutter);
    bottom: 220px;
    height: 32px;
    font-size: 18px;
    line-height: 19.4px;
    text-align: center;
}

.opening_langs {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 72px;
    height: 30px;
}

.opening_lang {
    position: absolute;
    top: 0;
    width: 100px;
    height: 30px;
    text-align: center;
}

.opening_lang.he {
    right: 55px;
    top: 2px;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 17.3px;
}

.opening_lang.en {
    left: 55px;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 14px;
    line-height: 19px;
}

.opening_lang.active::after {
    content: '';
    position: absolute;
    left: 25px;
    width: 50px;
    height: 2px;
    background: var(--gold);
}

.opening_lang.he.active::after {
    top: 21px;
}

.opening_lang.en.active::after {
    top: 23px;
}

/* ================= ONBOARDING (shared) ================= */
.onboarding {
    padding-bottom: 110px;
}

.onb_header {
    padding-top: 92px;
}

.onb_title {
    min-height: 58px;
    margin-bottom: 4px;
    font-family: var(--font-title);
    font-size: 34px;
    line-height: 44.6px;
    text-align: start;
}

[dir=ltr] .onb_title,
[dir=ltr] .onb_eyebrow,
[dir=ltr] .guide_intro,
[dir=ltr] .guide_step,
[dir=ltr] .terms_body {
    text-align: left;
}

.onb_eyebrow {
    position: absolute;
    top: 28px;
    inset-inline-end: var(--gutter);
    inset-inline-start: var(--gutter);
    height: 20px;
    font-size: 13px;
    line-height: 14px;
    color: var(--gold);
    text-align: start;
}

/* ================= TERMS ================= */
.terms_paper {
    position: relative;
    height: 419px;
    margin-top: 35px;
    background: var(--paper);
    border-radius: 2px;
}

.terms_scroll {
    height: 405px;
    padding: 18px;
    overflow-y: auto;
    background: var(--paper-field);
    scrollbar-width: none;
}

.terms_scroll::-webkit-scrollbar {
    display: none;
}

.terms_body {
    font-size: 16px;
    line-height: 17.3px;
    text-align: start;
    opacity: 0.72;
}

.terms_indicator {
    position: absolute;
    top: 28px;
    inset-inline-start: 0;
    width: 4px;
    height: 57px;
    background: var(--gold);
    transition: opacity .2s;
}

.terms_consent {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin: 17px 0 0;
    margin-inline-start: 24px;
    cursor: pointer;
}

.terms_consent input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.terms_checkbox {
    flex: 0 0 22px;
    height: 22px;
    background: var(--bg);
    border: 1px solid var(--gold);
    border-radius: 1px;
    position: relative;
}

.terms_consent input:checked + .terms_checkbox {
    background: var(--gold);
}

.terms_consent input:checked + .terms_checkbox::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid var(--bg);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.terms_consent input:focus-visible + .terms_checkbox {
    outline: 1px solid var(--ink);
    outline-offset: 2px;
}

.terms_consent_label {
    flex: 1;
    min-height: 34px;
    padding-top: 2px;
    font-size: 18px;
    line-height: 19.4px;
}

.terms_consent.shake .terms_checkbox {
    animation: shake .35s;
}

@keyframes shake {
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* ================= QUICK GUIDE ================= */
.guide_header {
    padding-top: 100px;
}

.guide .onb_title {
    min-height: 56px;
    margin-bottom: 14px;
    line-height: 42px;
}

.guide_intro {
    min-height: 30px;
    font-size: 16px;
    line-height: 17.3px;
    text-align: start;
    opacity: 0.70;
}

.guide_steps {
    margin-top: 62px;
    margin-inline-end: 28px;
}

.guide_step {
    display: block;
    text-align: start;
}

.guide_step + .guide_step {
    margin-top: 17px;
}

.guide_step:not(:last-child) {
    border-bottom: 1px solid var(--hairline);
}

.guide_step_num {
    display: block;
    height: 34px;
    font-size: 15px;
    line-height: 16.2px;
    color: var(--gold);
}

.guide_step_text {
    display: block;
    min-height: 64px;
    font-size: 20px;
    line-height: 28px;
}

/* ================= PREFERENCES ================= */
.pref_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pref_label {
    font-size: 21px;
    line-height: 22.7px;
    text-align: start;
}

.pref_avatar {
    padding: 45px 0 46px;
}

.pref_avatar .pref_label {
    align-self: flex-start;
    padding-top: 2px;
}

.pref_avatar_options {
    display: flex;
    flex-direction: row-reverse;
    gap: 10px;
}

[dir=ltr] .pref_avatar_options {
    flex-direction: row;
}

.avatar_opt {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--hairline);
    outline: 1px solid transparent;
    outline-offset: 2px;
    transition: outline-color .2s;
}

.avatar_opt img {
    display: block;
    width: 34px;
    height: 34px;
}

.avatar_opt.active {
    outline-color: var(--gold);
}

.pref_narration {
    display: block;
    padding: 17px 0 8px;
}

.pref_settings {
    padding: 11px 0 22px;
}

.pref_narration .pref_label {
    display: flex;
    align-items: center;
    height: 34px;
}

.narrators {
    display: flex;
    gap: 15px;
    padding-inline-start: 45px;
}

.narrator {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 96px;
}

.narrator_portrait {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--portrait-bg);
    box-shadow: inset 0 0 0 1px var(--muted-stroke);
    overflow: hidden;
}

.narrator.active .narrator_portrait {
    box-shadow: inset 0 0 0 2px var(--gold);
}

.narrator_portrait img {
    position: absolute;
    inset: 1px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.narrator.active .narrator_portrait img {
    inset: 2px;
    width: 38px;
    height: 38px;
}

.narrator_initial {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 17px;
}

.narrator_name {
    display: flex;
    align-items: center;
    height: 28px;
    margin-top: 4px;
    font-size: 11px;
    line-height: 11.9px;
}

.pref_mute {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 34px;
}

.pref_mute_label {
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 14px;
    line-height: 19px;
}

.toggle {
    position: relative;
    width: 52px;
    height: 28px;
    border-radius: 14px;
    background: var(--rail);
}

.toggle::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--portrait-bg);
    transition: left .2s, background .2s;
}

.toggle.on::after {
    left: 26px;
    background: var(--gold);
}

.pref_display {
    margin-top: 32px;
}

.segmented {
    display: flex;
    gap: 2px;
    width: 104px;
    height: 34px;
    padding-inline-start: 8px;
    padding-inline-end: 6px;
    background: var(--rail);
    border-radius: 2px;
}

.seg {
    position: relative;
    width: 44px;
    height: 34px;
    padding-top: 7px;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 13px;
    line-height: 17.7px;
    text-align: center;
    vertical-align: top;
}

.seg.active {
    color: var(--gold);
}

.seg.active::after {
    content: '';
    position: absolute;
    left: -2px;
    bottom: -1px;
    width: 48px;
    height: 2px;
    background: var(--gold);
}

.pref_link {
    padding-top: 23px;
}

.pref_chevron {
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 18px;
    line-height: 24.5px;
    opacity: 0.58;
}

/* ================= MAP ================= */
.map_screen {
    height: 100dvh;
    min-height: 0;
    padding: 0;
    background: #99b8c9;
    user-select: none;
    -webkit-user-select: none;
}

.map_screen.night {
    background: #000;
}

.map_viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
    touch-action: none;
    cursor: grab;
}

.map_viewport.dragging {
    cursor: grabbing;
}

.map_layer {
    position: absolute;
    left: 0;
    top: 0;
    will-change: transform;
}

.map_img {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
}

.map_screen.day .map_img_night,
.map_screen.night .map_img_day {
    display: none;
}

/* station markers — positioned by their centre in artboard coordinates */
.map_marker {
    position: absolute;
    width: 32px;
    height: 32px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.map_marker_dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 17.2px;
    height: 17.2px;
    border-radius: 50%;
    background: rgba(247, 243, 234, 0.85);
    box-shadow: inset 0 0 0 1.5px #b08a4a;
    font-family: 'Museo Sans', var(--font-ui);
    font-size: 8.95px;
    line-height: 1;
    color: #6e604b;
    direction: ltr;
}

.map_marker_focus {
    display: none;
    position: absolute;
    left: -7px;
    top: -7px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--gold);
}

.map_marker_focus span {
    position: absolute;
    left: 16px;
    top: 16px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #0e0e0d;
    border: 2px solid var(--bg);
}

.map_marker.selected .map_marker_dot {
    visibility: hidden;
}

.map_marker.selected .map_marker_focus {
    display: block;
}

/* user location */
.user_dot {
    position: absolute;
    width: 32px;
    height: 32px;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
}

.user_halo, .user_disc, .user_center {
    position: absolute;
    border-radius: 50%;
}

.user_halo {
    inset: 0;
    border: 1.5px solid var(--gold);
    opacity: 0.95;
    animation: user_pulse 2.4s ease-out infinite;
}

.user_disc {
    inset: 5px;
    background: var(--bg);
}

.user_center {
    left: 13px;
    top: 13px;
    width: 6px;
    height: 6px;
    background: var(--ink);
}

@keyframes user_pulse {
    0% { transform: scale(1); opacity: 0.95; }
    70% { transform: scale(1.45); opacity: 0; }
    100% { transform: scale(1.45); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .user_halo { animation: none; }
}

/* top nav */
.map_nav {
    position: absolute;
    inset-inline-end: 0;
    inset-inline-start: 0;
    top: 0;
    height: 74px;
    z-index: 5;
}

.map_nav::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #f3f0e6;
    opacity: 0.94;
}

.nav_btn {
    position: absolute;
    top: 20px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--gold);
}

.nav_btn img {
    display: block;
}

.nav_round {
    width: 36px;
    border-radius: 50%;
}

.nav_sound {
    inset-inline-end: 26px;
}

.nav_sound img {
    clip-path: inset(0 34% 0 0);
}

.nav_sound.muted img {
    clip-path: none;
}

#navMenu {
    inset-inline-start: 12px;
}

/* day / night toggle — always centred on the screen, in both modes */
.nav_pill {
    left: 50%;
    width: 58px;
    border-radius: 18px;
    transform: translateX(-50%);
}

.map_screen.day .icon_moon,
.map_screen.night .icon_sun {
    display: none;
}

/* bottom sheet */
.map_sheet {
    position: absolute;
    inset-inline-end: 0;
    inset-inline-start: 0;
    bottom: 0;
    height: 176px;
    z-index: 4;
}

.sheet_gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(243, 240, 230, 0), #f3f0e6);
    pointer-events: none;
}

.map_sheet[data-state=selected] .sheet_gradient,
.map_screen.night .sheet_gradient {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.72));
}

.sheet_body {
    position: absolute;
    inset: 0;
    width: 100%;
    text-align: start;
}

.sheet_body > * {
    position: absolute;
    inset-inline-start: var(--gutter);
    inset-inline-end: var(--gutter);
    display: block;
}

.sheet_label {
    top: 18px;
    font-size: 13px;
    line-height: 14px;
    color: #59574f;
}

.sheet_label_gold {
    color: #b08a4a;
}

.sheet_number {
    color: var(--gold);
    inset-inline-start: 23px;
}

.map_screen.night .sheet_number {
    color: #e6d5aa;
}

.sheet_title {
    top: 48px;
    font-family: var(--font-title);
    font-size: 19px;
    line-height: 24.9px;
    color: var(--ink);
}

.sheet_title_lg {
    font-size: 20px;
    line-height: 26.3px;
}

.sheet_title_light {
    inset-inline-end: 58px;
    color: #f4ecd9;
}

.sheet_distance {
    top: 90px;
    font-size: 13px;
    line-height: 14px;
    color: #59574f;
}

.sheet_distance_left {
    text-align: end;
}

.sheet_distance_light {
    inset-inline-start: 25px;
    color: #b2ab9c;
}

.sheet_divider {
    top: 93px;
    inset-inline-start: 25px;
    inset-inline-end: auto;
    width: 31px;
    height: 1px;
    background: rgba(198, 164, 104, 0.85);
}

.map_screen.night .sheet_divider {
    display: none;
}

.sheet_cta {
    top: 132px;
    inset-inline-start: 25px;
    font-size: 18px;
    line-height: 19.4px;
    color: #c6a468;
    white-space: pre;
}

.map_screen.night .sheet_cta {
    inset-inline-start: var(--gutter);
    font-size: 17px;
    line-height: 18.4px;
    color: var(--bg);
}

.sheet_pictogram {
    top: 40px;
    inset-inline-end: 34px !important;
    inset-inline-start: auto !important;
    width: 74px;
    height: 74px;
}

/* stations drawer */
.drawer {
    position: absolute;
    inset: 0;
    z-index: 10;
    visibility: hidden;
}

.drawer.open {
    visibility: visible;
}

.drawer_scrim {
    position: absolute;
    inset-inline-end: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: rgba(14, 14, 13, 0.62);
    opacity: 0;
    transition: opacity .25s;
}

.drawer.open .drawer_scrim {
    opacity: 1;
}

.drawer_panel {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    inset-inline-end: 64px;
    background: #171716;
    border-inline-end: 1px solid rgba(198, 168, 90, 0.30);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .3s ease;
}

.drawer.open .drawer_panel {
    transform: none;
}

.drawer_header {
    position: absolute;
    top: 48px;
    inset-inline-start: var(--gutter);
    font-size: 14px;
    line-height: 15.1px;
    color: #d8c691;
}

.drawer_close {
    position: absolute;
    top: 33px;
    inset-inline-end: 24px;
    width: 42px;
    height: 45px;
    font-family: var(--font-ui);
    font-weight: 300;
    font-size: 28px;
    line-height: 41px;
    color: var(--gold);
    text-align: end;
}

.drawer_util {
    position: absolute;
    top: 79px;
    font-size: 13px;
    line-height: 14px;
    color: var(--gold);
}

.drawer_settings {
    inset-inline-start: var(--gutter);
}

.drawer_about {
    inset-inline-start: 108px;
    font-family: var(--font-title);
    line-height: 17.1px;
}

.drawer_rule {
    position: absolute;
    top: 112px;
    inset-inline-end: 24px;
    inset-inline-start: var(--gutter);
    height: 1px;
    background: rgba(198, 168, 90, 0.45);
}

.drawer_rows {
    padding-top: 120px;
}

.drawer_row {
    position: relative;
    display: block;
    height: 62px;
    padding: 8px 0 0;
    padding-inline: var(--gutter) 24px;
    text-align: start;
}

.drawer_row::after {
    content: '';
    position: absolute;
    inset-inline-end: 24px;
    inset-inline-start: var(--gutter);
    bottom: 0;
    height: 1px;
    background: rgba(198, 168, 90, 0.18);
}

.drawer_row.current {
    background: rgba(176, 138, 74, 0.12);
    box-shadow: inset -2px 0 0 var(--gold);
}

.drawer_row_num {
    display: block;
    font-size: 13px;
    line-height: 14px;
    color: #d9b26b;
}

.drawer_row_title {
    display: block;
    margin-top: 4px;
    font-family: var(--font-title);
    font-size: 18px;
    line-height: 23.6px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ================= STATION · ARRIVAL ================= */
.arrival {
    height: 100dvh;
    min-height: 560px;
    padding: 0;
    background: #0e0e0d;
    color: #fff;
}

.arrival_hero {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.arrival_overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(10, 10, 13, 0.30) 0%,
        rgba(10, 10, 13, 0.03) 24%,
        rgba(8, 9, 10, 0.10) 55%,
        rgba(6, 8, 9, 0.55) 78%,
        rgba(5, 6, 8, 0.86) 100%);
}

.arrival_fade {
    position: absolute;
    inset-inline-end: 0;
    inset-inline-start: 0;
    bottom: 0;
    height: 20.85%;
    background: linear-gradient(to bottom, rgba(243, 240, 230, 0), #f3f0e6);
}

.arrival_back {
    position: absolute;
    top: 28px;
    left: var(--gutter);
    width: 100px;
    height: 24px;
    font-size: 14px;
    line-height: 15.1px;
    color: rgba(243, 240, 232, 0.72);
    text-align: left;
    white-space: pre;
    z-index: 2;
}

.arrival_icon {
    position: absolute;
    top: 43.13%;
    left: calc(50% - 78px);
    width: 156px;
    height: 156px;
}

.arrival_number {
    position: absolute;
    top: 63.27%;
    inset-inline-end: 0;
    inset-inline-start: 0;
    font-size: 13px;
    line-height: 14px;
    color: #d9b26b;
    text-align: center;
}

.arrival_title {
    position: absolute;
    top: 66.23%;
    inset-inline-end: 29px;
    inset-inline-start: 29px;
    font-family: var(--font-title);
    font-size: 30px;
    line-height: 39.4px;
    color: #fff;
    text-align: center;
}

.arrival_cta {
    position: absolute;
    top: 80.8%;
    left: calc(50% - 75px);
    width: 150px;
    height: 84px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 12px;
    gap: 16px;
    font-size: 18px;
    line-height: 19.4px;
    color: #f7edd9;
    z-index: 2;
}

.arrival_cta svg {
    animation: chevron_nudge 2.2s ease-in-out infinite;
}

@keyframes chevron_nudge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

@media (prefers-reduced-motion: reduce) {
    .arrival_cta svg { animation: none; }
}

/* ================= STATION · KNOWLEDGE ================= */
.knowledge {
    padding-bottom: 44px;
}

.knowledge .back_btn {
    opacity: 0.70;
}

.knowledge_crumb {
    position: absolute;
    top: 28px;
    inset-inline-end: var(--gutter);
    inset-inline-start: var(--gutter);
    font-family: var(--font-title);
    font-size: 13px;
    line-height: 17.1px;
    color: var(--gold);
    text-align: start;
}

.knowledge_nav {
    position: absolute;
    top: 72px;
    inset-inline-end: var(--gutter);
    inset-inline-start: var(--gutter);
    height: 1px;
    background: rgba(198, 164, 104, 0.32);
}

.knowledge_nav span {
    position: absolute;
    left: calc(50% - 4px);
    top: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c6a468;
}

.knowledge_body {
    padding-top: 73px;
    display: flex;
    flex-direction: column;
}

.kb {
    display: block;
    white-space: normal;
}

.kb_title {
    font-family: var(--font-title);
    font-size: 24px;
    line-height: 42px;
    color: #171716;
    text-align: center;
}

.kb_heading {
    font-family: var(--font-title);
    font-size: 20px;
    line-height: 30px;
    color: #292621;
    text-align: center;
}

.kb_body,
.kb_list {
    font-size: 15px;
    line-height: 24px;
    color: #292621;
    text-align: start;
}

.kb_list {
    line-height: 19px;
}

.kb b {
    font-weight: 700;
}

.kb_rule {
    align-self: center;
    width: 44px;
    height: 2px;
    background: #c7a859;
}

.kb_image {
    width: 100%;
    max-width: 342px;
    height: auto;
    align-self: center;
    object-fit: cover;
    background: #e8e2d2;
}

.knowledge_next {
    align-self: stretch;
    min-height: 32px;
    font-family: var(--font-title);
    font-size: 18px;
    line-height: 23.6px;
    color: var(--gold);
    text-align: start;
    white-space: pre;
}

.knowledge_next_arrow {
    font-size: 20px;
}

[dir=ltr] .kb_body,
[dir=ltr] .kb_list,
[dir=ltr] .knowledge_crumb,
[dir=ltr] .knowledge_next {
    text-align: left;
}

/* ================= UTILITY (settings / about / terms of use) ================= */
.back_btn.solid {
    opacity: 1;
}

.util_header {
    padding-top: 86px;
}

.utility .onb_title {
    margin-bottom: 10px;
}

/* about / terms of use: ink rule as in the Figma light masters; settings uses the same palette as onboarding preferences */
.utility:not(.settings) .hairline {
    background: var(--ink);
}

.util_row {
    height: 114px;
    padding: 35px 0 45px;
}

.settings .pref_avatar {
    padding: 45px 0 46px;
}

.settings .pref_chevron {
    opacity: 1;
}

.settings .pref_link {
    padding-top: 35px;
}

.util_trail {
    position: absolute;
    inset-inline-end: 0;
    bottom: 72px;
    width: 222px;
}

.util_copy {
    position: relative;
    margin-top: 63px;
    padding-inline-start: 42px;
    min-height: 156px;
}

.util_copy::after {
    content: '';
    position: absolute;
    inset-inline-start: 20px;
    top: 0;
    width: 2px;
    height: 118px;
    background: var(--gold);
}

.terms_of_use .util_copy::after {
    height: 156px;
}

.util_copy_text {
    font-size: 20px;
    line-height: 21.6px;
    text-align: start;
}

.terms_of_use .util_copy_text {
    font-size: 19px;
    line-height: 20.5px;
}

.util_consent {
    position: absolute;
    top: 626px;
    inset-inline-start: 48px;
    inset-inline-end: var(--gutter);
    margin: 0;
}

[dir=ltr] .util_copy {
    padding-right: 0;
    padding-left: 42px;
}

[dir=ltr] .util_copy::after {
    right: auto;
    left: 20px;
}

/* ================= LANDSCAPE STAGE (interactives / players) ================= */
.landscape {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: #0e0e0d;
}

.stage {
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: center;
    overflow: hidden;
}

/* ================= ST02 · GUTMAN ================= */
.gutman {
    background: #e9eef0;
}

.stage > * {
    position: absolute;
}

.g_bg {
    left: 0;
    top: 0;
    width: 844px;
    height: 389px;
    object-fit: cover;
}

.g_outside {
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: default;
}

.g_shadow {
    object-fit: cover;
    pointer-events: none;
    transition: opacity .35s ease;
}

.g_stone {
    padding: 0;
    transition: opacity .35s ease;
    -webkit-tap-highlight-color: transparent;
}

.g_stone img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.g_focus {
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    z-index: 3;
    transition: left .45s ease, top .45s ease, width .45s ease, height .45s ease, opacity .3s ease;
}

.g_focus.show {
    opacity: 1;
    pointer-events: auto;
}

.g_back {
    left: 24px;
    top: 20px;
    width: 44px;
    height: 26px;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 20px;
    line-height: 27.2px;
    color: rgba(23, 23, 22, 0.70);
    text-align: left;
    z-index: 4;
}

.g_crumb {
    inset-inline-end: 475px;
    top: 24px;
    width: 342px;
    font-family: var(--font-title);
    font-size: 13px;
    line-height: 19px;
    color: var(--gold);
    text-align: start;
    z-index: 4;
}

.g_continue {
    left: 380px;
    top: 330px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
}

.stage.focused .g_continue {
    top: 342px;
}

@media (prefers-reduced-motion: reduce) {
    .g_focus, .g_stone, .g_shadow { transition: none; }
}

/* ================= STATION · SELFIE ================= */
.selfie {
    padding: 0;
    background: #0e0e0d;
    color: var(--bg);
    min-height: 844px;
}

.selfie[data-state=capture] .only-approval,
.selfie[data-state=approval] .only-capture {
    display: none !important;
}

.selfie_back {
    position: absolute;
    top: 16px;
    left: var(--gutter);
    width: 44px;
    height: 26px;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 20px;
    line-height: 27.2px;
    color: #b08a4a;
    text-align: left;
    z-index: 3;
}

.selfie_crumb {
    position: absolute;
    top: 24px;
    inset-inline-end: var(--gutter);
    inset-inline-start: var(--gutter);
    font-family: var(--font-title);
    font-size: 13px;
    line-height: 19px;
    color: var(--gold);
    text-align: start;
}

.selfie_nav {
    position: absolute;
    top: 72px;
    inset-inline-end: 26px;
    inset-inline-start: 22px;
    height: 1px;
    background: #c6a468;
}

.selfie_nav span {
    position: absolute;
    inset-inline-start: -4px;
    top: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c6a468;
}

.selfie_title {
    position: absolute;
    top: 83px;
    inset-inline-end: 18px;
    inset-inline-start: 14px;
    font-family: var(--font-title);
    font-size: 30px;
    line-height: 44px;
    color: var(--bg);
    text-align: center;
}

.selfie_figures {
    position: absolute;
    top: 122px;
    left: 26px;
    display: flex;
    gap: 8px;
    direction: ltr;
}

.fig {
    width: 28px;
    height: 28px;
    opacity: 0.55;
}

.fig.active {
    opacity: 1;
}

/* one icon shape, colour by state: chosen = gold, other = white 40% (same look for male and female) */
.fig_icon {
    display: block;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.4);
    -webkit-mask: var(--fig-icon) center / contain no-repeat;
    mask: var(--fig-icon) center / contain no-repeat;
}

.fig.active .fig_icon {
    background: #d8c691;
}

.fig_male {
    --fig-icon: url('/assets/images/icons/selfie_figure_male_mask.svg');
}

.fig_female {
    --fig-icon: url('/assets/images/icons/selfie_figure_female_mask.svg');
}

.selfie_adjust {
    position: absolute;
    top: 131px;
    left: 48px;
    right: 47px;
    display: flex;
    justify-content: space-between;
    direction: ltr;
}

.adj {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 118px;
}

.adj input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 18px;
    background: transparent;
}

.adj input[type=range]::-webkit-slider-runnable-track { height: 1px; background: rgba(255, 255, 255, 0.28); }
.adj input[type=range]::-moz-range-track { height: 1px; background: rgba(255, 255, 255, 0.28); }
.adj input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 8px; height: 8px; margin-top: -3.5px; border-radius: 50%; background: #d8b66a; }
.adj input[type=range]::-moz-range-thumb { width: 8px; height: 8px; border: 0; border-radius: 50%; background: #d8b66a; }

.selfie_frame {
    position: absolute;
    top: 167px;
    left: 16px;
    right: 16px;
    height: 430px;
    background: #1f1f1d;
    box-shadow: inset 0 0 0 1px var(--gold);
    overflow: hidden;
}

.selfie[data-state=approval] .selfie_frame {
    box-shadow: inset 0 0 0 1px rgba(198, 168, 90, 0.35);
}

.selfie_blur {
    position: absolute;
    inset: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    object-fit: cover;
    opacity: 0.25;
    filter: blur(50px);
}

.selfie_window {
    position: absolute;
    top: 38px;
    left: 32px;
    width: 294px;
    height: 366px;
    background: #121211;
    box-shadow: 0 0 0 1px #b89442;
    overflow: hidden;
}

.selfie[data-state=approval] .selfie_window {
    background: transparent;
    box-shadow: none;
}

.selfie_window video,
.selfie_window canvas {
    position: absolute;
    left: 1px;
    top: 1px;
    width: 292px;
    height: 364px;
    object-fit: cover;
}

.selfie_window video.mirror {
    transform: scaleX(-1);
}

.selfie[data-state=approval] #selfieTemplate,
.selfie[data-state=approval] video {
    display: none;
}

.selfie_horizon {
    position: absolute;
    left: 32px;
    right: 32px;
    top: 195px;
    height: 1px;
    background: #d8c691;
}

.selfie_horizon span {
    position: absolute;
    left: calc(50% - 6px);
    top: -4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d8c691;
}

.corner {
    position: absolute;
    width: 24px;
    height: 24px;
    border: 0 solid rgba(216, 181, 106, 0.75);
    z-index: 2;
}

.corner.tl { top: 38px; left: 32px; border-top-width: 1px; border-left-width: 1px; }
.corner.tr { top: 38px; right: 32px; border-top-width: 1px; border-right-width: 1px; }
.corner.bl { top: 357px; left: 32px; border-bottom-width: 1px; border-left-width: 1px; }
.corner.br { top: 357px; right: 32px; border-bottom-width: 1px; border-right-width: 1px; }

.selfie_preview_label {
    position: absolute;
    top: 204px;
    inset-inline-end: 48px;
    inset-inline-start: 48px;
    font-size: 14px;
    line-height: 20px;
    color: #a6a399;
    text-align: center;
}

.selfie_instruction {
    position: absolute;
    top: 641px;
    inset-inline-end: var(--gutter);
    inset-inline-start: var(--gutter);
    height: 24px;
    overflow: hidden;
    font-size: 17px;
    line-height: 24px;
    text-align: center;
}

.selfie_copy {
    position: absolute;
    top: 628px;
    inset-inline-end: var(--gutter);
    inset-inline-start: var(--gutter);
    font-size: 17px;
    line-height: 25px;
    text-align: center;
}

.selfie_shutter {
    position: absolute;
    top: 725px;
    left: calc(50% - 31px);
    width: 62px;
    height: 62px;
}

.selfie_shutter img {
    display: block;
}

.selfie_actions {
    position: absolute;
    top: 725px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 30px;
    direction: ltr;
}

.selfie_action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 65px;
    font-size: 12px;
    line-height: 17px;
    color: #a6a399;
}

/* ================= ST05 · KALEIDOSCOPE ================= */
.kaleido {
    min-height: 760px;
}

.k_pano {
    direction: ltr;
    position: absolute;
    left: 0;
    right: 0;
    overflow: hidden;
    touch-action: pan-y;
    cursor: grab;
}

.k_pano img {
    display: block;
    max-width: none;
    pointer-events: none;
    user-select: none;
}

.kaleido .back_btn,
.kaleido .knowledge_crumb {
    z-index: 2;
}

.k_view {
    position: absolute;
    left: 65px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(243, 240, 232, 0.08);
    box-shadow: inset 0 0 0 1.5px rgba(198, 168, 90, 0.95);
    z-index: 3;
    isolation: isolate;
}

.k_view::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px rgba(198, 168, 90, 0.95);
    pointer-events: none;
    z-index: 5;
}

.k_shape {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    transition: transform .7s cubic-bezier(.45, .05, .25, 1), width .7s ease, height .7s ease;
    pointer-events: none;
}

.k_petal,
.k_facet {
    background-size: cover;
    background-position: center;
}

.k_petal {
    opacity: var(--img-o, 1);
    box-shadow: inset 0 0 0 var(--stroke-w, 0) rgba(243, 240, 232, 0.22);
}

.k_facet {
    opacity: var(--img-o, 1);
}

.k_ring {
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(243, 240, 232, 0.48);
}

.k_center {
    overflow: visible;
}

.k_line {
    position: absolute;
    left: 0;
    top: 688px;
    width: 222px;
}

.k_next {
    position: absolute;
    top: 690px;
    inset-inline-end: var(--gutter);
    inset-inline-start: var(--gutter);
    height: 32px;
    font-family: var(--font-title);
    font-size: 18px;
    line-height: 23.6px;
    color: var(--ink);
    text-align: start;
    white-space: pre;
}

@media (prefers-reduced-motion: reduce) {
    .k_shape { transition: none; }
}

/* ================= PLAYER (landscape) ================= */
.player {
    background: #0e0e0d;
}

.player_stage {
    background: #040404;
}

.player_poster,
.player_video {
    position: absolute;
    top: 0;
    height: 390px;
    object-fit: cover;
    background: #040404;
}

.player_poster.center,
.player_video.center {
    left: 131px;
    width: 590px;
    box-shadow: inset 0 0 0 1px rgba(187, 144, 66, 0.45);
}

.player_poster.full,
.player_video.full {
    left: 0;
    width: 844px;
}

.player_stage.playing .player_poster {
    display: none;
}

.player_cue {
    left: 0;
    top: 0;
    width: 224px;
    height: 2px;
    background: var(--gold);
    z-index: 2;
}

.player_close {
    left: 24px;
    top: 18px;
    width: 42px;
    height: 45px;
    font-family: var(--font-ui);
    font-size: 28px;
    line-height: 41px;
    color: var(--bg);
    text-align: left;
    z-index: 3;
}

.player_label {
    inset-inline-end: 462px;
    top: 20px;
    width: 350px;
    font-family: var(--font-title);
    font-size: 15px;
    line-height: 22px;
    color: var(--bg);
    text-align: start;
    z-index: 3;
}

.player_play {
    left: 392px;
    top: 164px;
    width: 60px;
    height: 60px;
    z-index: 3;
    transition: opacity .3s;
}

.player_play .glyph_pause {
    display: none;
}

.player_stage.playing .player_play {
    opacity: 0;
}

.player_stage.playing .player_play:hover,
.player_stage.playing .player_play:focus-visible {
    opacity: 1;
}

.player_stage.playing .glyph_play {
    display: none;
}

.player_stage.playing .glyph_pause {
    display: inline;
}

.player_progress {
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: rgba(243, 240, 232, 0.12);
    z-index: 3;
}

.player_progress span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--gold);
}

.player_index {
    left: 231px;
    top: 368px;
    display: flex;
    gap: 8px;
    direction: ltr;
    z-index: 3;
}

.player_index span {
    width: 48px;
    height: 2px;
    background: rgba(143, 140, 130, 0.35);
}

.player_index span.active {
    background: #bb9042;
}

/* ================= MEDIA SELECTORS (ST06 / ST10) ================= */
.selector {
    min-height: 844px;
}

.selector > * {
    position: absolute;
}

.selector .back_btn,
.selector .knowledge_crumb {
    position: absolute;
}

.selector_title {
    top: 92px;
    inset-inline-end: var(--gutter);
    inset-inline-start: var(--gutter);
    font-family: var(--font-title);
    font-size: 34px;
    line-height: 42px;
    text-align: start;
}

.selector_panel {
    background: rgba(14, 14, 13, 0.72);
    border-radius: 2px;
}

.layout_band .selector_panel {
    background: rgba(14, 14, 13, 0.74);
}

.layout_rail .selector_panel {
    background: none;
}

.selector_rail {
    inset-inline-end: 0;
    top: 291.5px;
    width: 342px;
    height: 1px;
    background: rgba(243, 240, 232, 0.06);
    background: rgba(23, 23, 22, 0.15);
}

.sel_item {
    display: block;
    overflow: hidden;
    border-radius: 1px;
    box-shadow: inset 0 0 0 1px rgba(184, 178, 163, 0.35);
}

.sel_item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.72;
    transition: opacity .2s;
}

.sel_item.active img {
    opacity: 1;
}

.sel_item.active {
    box-shadow: inset 0 0 0 1.5px #bb9042;
}

.sel_item.active img,
.sel_item:not(.active) img {
    mix-blend-mode: normal;
}

.sel_item::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inherit;
    pointer-events: none;
}

.sel_marker {
    height: 2px;
    background: rgba(143, 140, 130, 0.45);
}

.sel_marker.active {
    background: #bb9042;
}

/* band (ST10 films) */
.layout_band .sel_item { box-shadow: inset 0 0 0 0.75px rgba(198, 168, 90, 0.38); }
.layout_band .sel_item img { opacity: 0.82; }
.layout_band .sel_item.active { box-shadow: inset 0 0 0 1.5px var(--gold); }
.layout_band .sel_item.active img { opacity: 1; }
.layout_band .sel_marker { background: rgba(243, 240, 232, 0.18); }
.layout_band .sel_marker.active { background: var(--gold); }

/* rail (ST10 testimonies) */
.layout_rail .sel_item { border-radius: 50%; box-shadow: inset 0 0 0 1.25px rgba(198, 168, 90, 0.62); }
.layout_rail .sel_item img { opacity: 0.86; border-radius: 50%; }
.layout_rail .sel_item.active { box-shadow: inset 0 0 0 2px var(--gold); }
.layout_rail .sel_item.active img { opacity: 1; }

.selector_editorial {
    inset-inline-end: 344px;
    width: 2px;
    height: 118px;
    background: var(--gold);
}

.selector_instruction {
    inset-inline-end: var(--gutter);
    width: 296px;
    font-family: var(--font-title);
    font-size: 24px;
    line-height: 31.5px;
    text-align: start;
}

.selector_line {
    inset-inline-end: 0;
    width: 222px;
}

.selector_next {
    inset-inline-end: var(--gutter);
    inset-inline-start: var(--gutter);
    height: 32px;
    font-family: var(--font-title);
    font-size: 18px;
    line-height: 23.6px;
    color: var(--ink);
    text-align: start;
    white-space: pre;
}

.layout_grid .selector_instruction { top: 550px; font-family: var(--font-body); font-size: 24px; line-height: 25.9px; text-align: center; }
.layout_grid .selector_line { top: 579px; }
.layout_grid .selector_next { top: 800px; }

.layout_band .selector_editorial { top: 392px; }
.layout_band .selector_instruction { top: 392px; }
.layout_band .selector_line { top: 535px; }
.layout_band .selector_next { top: 565px; }

.layout_rail .selector_editorial { top: 346px; }
.layout_rail .selector_instruction { top: 346px; }
.layout_rail .selector_line { top: 522px; }
.layout_rail .selector_next { top: 552px; font-family: var(--font-body); line-height: 19.4px; }

/* ================= TRIVIA ================= */
.trivia {
    min-height: 844px;
}

.trivia .t_state {
    display: none;
}

.trivia[data-state=intro] [data-s=intro],
.trivia[data-state=routes] [data-s=routes],
.trivia[data-state=question] [data-s=question],
.trivia[data-state=answer] [data-s=answer],
.trivia[data-state=finish] [data-s=finish] {
    display: block;
}

.trivia[data-state=intro] .back_btn {
    visibility: hidden;
}

.t_state > *,
.t_eyebrow,
.t_rule,
.t_cta {
    position: absolute;
}

.t_eyebrow {
    top: 28px;
    inset-inline-end: var(--gutter);
    inset-inline-start: var(--gutter);
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 13px;
    line-height: 17.7px;
    color: var(--gold);
    text-align: start;
}

.t_title {
    top: 92px;
    inset-inline-end: var(--gutter);
    inset-inline-start: var(--gutter);
    font-family: var(--font-title);
    font-size: 34px;
    line-height: 42px;
    text-align: start;
}

.t_panel {
    inset-inline-end: var(--gutter);
    inset-inline-start: var(--gutter);
    background: rgba(23, 23, 22, 0.74);
    border-radius: 2px;
    color: var(--bg);
}

.t_intro {
    top: 212px;
    height: 362px;
    padding: 30px 24px;
    font-size: 19px;
    line-height: 28px;
    text-align: start;
}

.t_lead {
    inset-inline-end: var(--gutter);
    width: 296px;
    font-family: var(--font-title);
    font-size: 24px;
    line-height: 31.5px;
    text-align: start;
}

.t_lead::after {
    content: '';
    position: absolute;
    inset-inline-end: 320px;
    top: 0;
    width: 2px;
    background: var(--gold);
}

.t_lead_routes { top: 194px; }
.t_lead_routes::after { height: 86px; }

.t_lead_hint, .t_lead_restart {
    font-family: var(--font-ui);
    font-weight: 700;
    line-height: 32.6px;
}

.t_lead_hint { top: 462px; }
.t_lead_hint::after { height: 112px; }
.t_lead_restart { top: 526px; }
.t_lead_restart::after { height: 84px; }

.t_routes {
    top: 310px;
    height: 158px;
    padding: 16px 20px 0;
}

.t_route {
    position: relative;
    display: block;
    width: 100%;
    height: 72px;
    padding: 0;
    padding-inline-start: 34px;
    font-size: 21px;
    line-height: 22.7px;
    color: var(--bg);
    text-align: start;
}

.t_route + .t_route {
    border-top: 1px solid rgba(243, 240, 232, 0.18);
}

.t_route:first-child {
    height: 62px;
}

.t_route_cue {
    position: absolute;
    inset-inline-start: -20px;
    top: 50%;
    width: 20px;
    height: 2px;
    background: var(--gold);
}

.t_route.active {
    color: var(--gold);
}

.t_q_eyebrow {
    top: 188px;
    inset-inline-end: var(--gutter);
    inset-inline-start: var(--gutter);
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 13px;
    line-height: 17.7px;
    color: var(--gold);
    text-align: start;
}

.t_question {
    top: 230px;
    inset-inline-end: 52px;
    inset-inline-start: 70px;
    min-height: 90px;
    font-size: 27px;
    line-height: 36px;
    text-align: start;
}

.t_question::after {
    content: '';
    position: absolute;
    inset-inline-start: -24px;
    top: -2px;
    width: 2px;
    height: 104px;
    background: var(--gold);
}

.t_answers {
    top: 386px;
    inset-inline-end: var(--gutter);
    inset-inline-start: var(--gutter);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.t_answer {
    height: 56px;
    padding: 0 20px;
    background: var(--bg);
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgba(23, 23, 22, 0.14);
    font-size: 19px;
    line-height: 20.5px;
    text-align: start;
}

.t_answer.active {
    box-shadow: inset 0 0 0 1.5px var(--gold);
}

.t_feedback {
    top: 212px;
    height: 190px;
    padding: 30px 0 0;
    padding-inline: 40px 24px;
}

.t_feedback::after,
.t_finish::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gold);
}

.t_finish::after { display: none; }

.t_feedback_title {
    font-family: var(--font-title);
    font-size: 28px;
    line-height: 36.8px;
    text-align: start;
}

.t_feedback_text {
    margin-top: 20px;
    font-size: 17px;
    line-height: 27px;
    opacity: 0.82;
    text-align: start;
}

.t_hint {
    top: 516px;
    inset-inline-end: 52px;
    inset-inline-start: 70px;
    font-size: 19px;
    line-height: 28px;
    text-align: start;
}

.t_finish_mark {
    top: 218px;
    left: calc(50% - 9px);
    width: 18px;
    height: 60px;
}

.t_finish_mark::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--gold);
}

.t_finish_mark::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 18px;
    width: 2px;
    height: 42px;
    background: var(--gold);
}

.t_finish {
    top: 278px;
    height: 188px;
    padding: 38px 24px 0;
}

.t_result {
    margin-top: 22px;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 20px;
    line-height: 27.2px;
    text-align: start;
}

.t_rule {
    inset-inline-end: 0;
    top: 756px;
    width: 222px;
}

.t_cta {
    top: 786px;
    inset-inline-end: var(--gutter);
    inset-inline-start: var(--gutter);
    height: 32px;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 18px;
    line-height: 24.5px;
    text-align: start;
    white-space: pre;
}

.t_cta:disabled {
    opacity: 0.35;
}

/* ---- dev markers: missing translation / missing media file ---- */
.i18n-missing {
    color: #e00000 !important;
    -webkit-text-fill-color: #e00000;
}

.player_missing {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 28px;
    background: rgba(0, 0, 0, .78);
    border: 1.5px dashed #e00000;
    color: #fff;
    text-align: center;
    z-index: 5;
}
.player_missing[hidden] { display: none; }
.player_missing_title { color: #ff4d4d; font-size: 18px; font-weight: 700; }
.player_missing_hint { font-size: 13px; opacity: .85; }
.player_missing_next { margin-top: 6px; color: #c6a85a; font-size: 15px; text-decoration: underline; }
.player_stage.media-missing .player_play { display: none; }

/* ---- map: visited stations + GPS ---- */
.user_dot[hidden] { display: none; }

.map_marker.visited .map_marker_dot {
    background: #b08a4a;
    box-shadow: inset 0 0 0 1.5px #b08a4a;
    color: #f7f3ea;
}

.drawer_row.visited .drawer_row_num::after {
    content: ' \2713';
    color: var(--gold);
}

.sheet_note {
    top: 118px;
    font-size: 11px;
    line-height: 14px;
    color: #8a7a5e;
}

/* ================= 404 (off the trail) ================= */
/* logo + code in the sky area, copy on the light ground above the CTA (like the opening tagline) */
.not_found {
    text-align: center;
}

.nf_logo {
    position: relative;
    display: block;
    width: 120px;
    height: 120px;
    margin: 88px auto 0;
}

.nf_logo img {
    display: block;
}

.nf_code {
    position: relative;
    margin-top: 22px;
    font-family: var(--font-title);
    font-size: 60px;
    line-height: 1;
    color: var(--gold);
    direction: ltr;
}

.nf_text {
    position: absolute;
    inset-inline-end: var(--gutter);
    inset-inline-start: var(--gutter);
    bottom: 128px;
}

.nf_title {
    font-family: var(--font-title);
    font-size: 26px;
    line-height: 32px;
    color: var(--ink);
}

.nf_hairline {
    width: 48px;
    height: 2px;
    margin: 14px auto 0;
    background: var(--gold);
}

.nf_body {
    margin-top: 14px;
    font-size: 15px;
    line-height: 22px;
    color: var(--ink);
}

/* portrait clips (ST06 seven videos) are shown whole inside the player frame */
.player_video.contain {
    object-fit: contain;
}

/* ================= NIGHT THEME (onboarding + utility screens) =================
   Figma "MASTER / … — FROZEN v1" frames (dark) vs "LIGHT HERITAGE v1" (light). <html class="theme-night"> is set by the
   layout from pref_display only on the themed pages, and toggled live by the day/night control. */
.theme-night {
    --bg: #0e0e0d;
    --ink: #f3f0e8;
    --hairline: rgba(243, 240, 232, 0.18);
    --paper: transparent;
    --paper-field: transparent;
    --rail: rgba(243, 240, 232, 0.18);
    --portrait-bg: #1f1f1c;
    --muted-stroke: #f3f0e8;
}

.theme-night .avatar_opt {
    background: rgba(243, 240, 232, 0.16);
}

.theme-night .segmented {
    background: rgba(243, 240, 232, 0.1);
}

/* utility screens draw their rules in ink on light — on dark they use the soft hairline */
.theme-night .utility .hairline {
    background: rgba(243, 240, 232, 0.18);
}

.theme-night .back_btn.solid,
.theme-night .settings .pref_chevron {
    opacity: 0.58;
}

/* terms: no paper field — a thin gold frame instead */
.theme-night .terms_paper {
    margin-inline-end: 14px;
}

.theme-night .terms_scroll {
    border: 1px solid #d8c691;
}

.theme-night .terms_indicator {
    width: 2px;
    height: 156px;
}

/* opening: photo under a dark veil, gold logo set lower, no trail cue */
.theme-night .opening::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(14, 14, 13, 0.52);
    pointer-events: none;
}

:is(.opening_logo, .nf_logo) .logo_night,
.theme-night :is(.opening_logo, .nf_logo) .logo_day {
    display: none;
}

.theme-night :is(.opening_logo, .nf_logo) .logo_night {
    display: block;
}

.theme-night .opening_logo {
    margin-top: 296px;
    z-index: 1;
}

.theme-night .opening_line {
    display: none;
}

.theme-night .opening_tagline {
    bottom: 230px;
    z-index: 1;
}

.theme-night .opening_langs {
    bottom: 63px;
    z-index: 1;
}

/* 404 follows the same veil */
.theme-night .not_found::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(14, 14, 13, 0.52);
    pointer-events: none;
}

.theme-night .not_found > :not(.opening_bg) {
    z-index: 1;
}

/* screens with their own palette keep the light tokens inside them (landscape stages are always dark; the map has its own night) */
.theme-night .landscape,
.theme-night .map_screen,
.theme-night .selfie {
    --bg: #f3f0e8;
    --ink: #171716;
    --hairline: #daca9e;
}

/* station arrival: the photo fades into the night background */
.theme-night .arrival_fade {
    background: linear-gradient(to bottom, rgba(14, 14, 13, 0), #0e0e0d);
}

/* station knowledge: light text on the night background */
.theme-night .kb_title {
    color: #f3f0e8;
}

.theme-night .kb_heading,
.theme-night .kb_body,
.theme-night .kb_list {
    color: rgba(243, 240, 232, 0.86);
}

.theme-night .kb_image {
    background: #1f1f1c;
}

/* trivia: dark page, the panel keeps light text */
.theme-night .t_panel,
.theme-night .t_route {
    color: #f3f0e8;
}

.theme-night .t_answer {
    background: #1f1f1c;
    box-shadow: inset 0 0 0 1px rgba(243, 240, 232, 0.18);
}

/* ================= LTR (English) — mirror of the RTL design =================
   Layout uses logical properties (inline-start/end), so English mirrors Hebrew automatically.
   Kept physical on purpose: back/close arrows (top-left), language picker, switch knobs, map artboard,
   landscape art positions and anything centred on the screen. Below: the few effects that need an explicit flip. */
[dir=ltr] .drawer_panel {
    transform: translateX(-100%);
}

[dir=ltr] .drawer_row.current {
    box-shadow: inset 2px 0 0 var(--gold);
}

/* "forward" chevrons drawn as text */
[dir=ltr] .pref_chevron,
[dir=ltr] .knowledge_next_arrow {
    display: inline-block;
    transform: scaleX(-1);
}

/* boxes with their own direction:ltr keep physical insets — flipped here */
[dir=ltr] .selfie_figures {
    left: auto;
    right: 26px;
}

[dir=ltr] .selfie_adjust {
    left: 47px;
    right: 48px;
}

[dir=ltr] .player_index {
    left: auto;
    right: 231px;
}

/* English: back arrows and the player close (×) move to the top-right, arrows point right (full mirror) */
[dir=ltr] :is(.back_btn, .arrival_back, .selfie_back) {
    left: auto;
    right: var(--gutter);
    text-align: right;
}

[dir=ltr] :is(.g_back, .player_close) {
    left: auto;
    right: 24px;
    text-align: right;
}

[dir=ltr] :is(.back_btn, .selfie_back, .g_back) {
    scale: -1 1;
}

/* top-row labels (now on the left) keep clear of the arrow on the right */
[dir=ltr] :is(.onb_eyebrow, .knowledge_crumb, .selfie_crumb, .t_eyebrow) {
    padding-right: 56px;
}

/* settings — language segmented (עברית / English): same look as "מצב תצוגה", sized to its labels */
.seg_lang {
    width: auto;
}

.seg_lang .seg {
    width: auto;
    min-width: 44px;
    padding: 7px 6px 0;
}

.seg_lang .seg.active::after {
    left: 0;
    width: 100%;
}

/* TEMP (development): skip link in the player — bottom corner, on the "forward" side */
.player_skip {
    position: absolute;
    bottom: 22px;
    inset-inline-end: 24px;
    z-index: 6;
    padding: 6px 10px;
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1;
    color: #c6a85a;
    border: 1px solid rgba(198, 168, 90, 0.6);
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.35);
}

[dir=ltr] .player_skip_arrow {
    display: inline-block;
    scale: -1 1;
}

/* ST02 mosaic selfie: the live camera is shown only as mosaic (drawn on #selfieTemplate) */
.selfie.fx-mosaic #selfieVideo {
    opacity: 0;
}

/* historic selfie filter: live view in black & white (the saved photo gets the full print look in selfie.js) */
.selfie.fx-historic #selfieVideo {
    filter: grayscale(1) sepia(0.15) contrast(1.08) brightness(0.95);
}

.selfie_grain {
    mix-blend-mode: overlay;
    opacity: 0.22;
}

/* onboarding footer with back (Figma 2026-10-13): "חזרה →" at the start edge, "המשך ←" at the end edge */
.cta_footer.with_back .cta_btn {
    inset-inline-start: auto;
    inset-inline-end: 27px;
    top: 25px;
    text-align: end;
}

.cta_footer.with_back .cta_back {
    position: absolute;
    inset-inline-start: 26px;
    top: 25px;
    height: 34px;
    display: flex;
    gap: 11px;
    font-size: 18px;
    line-height: 19.4px;
}

.cta_footer.short.with_back :is(.cta_btn, .cta_back) {
    top: 35px;
}

.cta_footer.with_back .cta_btn {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.cta_arrow {
    flex: none;
    margin-top: 4px;
}

.cta_arrow.flip,
[dir=ltr] .cta_arrow {
    transform: scaleX(-1);
}

[dir=ltr] .cta_arrow.flip {
    transform: none;
}