/* Isolated RIDE prototype. Brand values follow docs/ui-kit/01-design-tokens.md. */
:root {
  --red: #ed1c24;
  --red-dark: #bd1017;
  --black: #111111;
  --white: #ffffff;
  --mint: #c8e6e0;
  --mint-light: #e8f5f1;
  --paper: #f7f7f2;
  --ink-muted: #62665f;
  --line: #e4e5dd;
  --display: 'Unbounded', sans-serif;
  --body: 'Onest', sans-serif;
  --ease-spring: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; background: var(--paper); }
body.calc-page { color: var(--black); background: var(--paper); font-family: var(--body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
::selection { color: var(--white); background: var(--red); }
button, input { font: inherit; }
button, label:has(input), input[type='range'] { cursor: pointer; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
button { border: 0; background: none; }
img { max-width: 100%; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
fieldset { min-width: 0; margin: 0; border: 0; padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 5px; }
label:has(input:focus-visible) { outline: 3px solid var(--red); outline-offset: 4px; border-radius: 8px; }
.container { width: min(1320px, calc(100% - 96px)); margin: 0 auto; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 50; transform: translateY(-150%); padding: 12px 20px; color: var(--white); background: var(--black); border-radius: 8px; }
.skip-link:focus { transform: none; }
.calc-page .calc-header { position: relative; color: var(--white); background: var(--black); }
.calc-page .placeholder-container { width: min(1320px, calc(100% - 96px)); padding: 0; }
.calc-page .placeholder-header__inner { min-height: 76px; gap: 24px; }
.calc-page .placeholder-logo__image { width: 85px; height: 31px; object-fit: contain; }
.header-divider { width: 1px; height: 25px; background: #3a3a3a; }
.header-section { font-size: 13px; font-weight: 500; }
.header-section span { margin-left: 10px; color: #b9bbb6; }
.header-lab { display: flex; align-items: center; gap: 9px; margin-left: auto; color: #c2c4bb; font-size: 11px; }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px #c8e6e013; }
.header-share { display: flex; align-items: center; gap: 10px; padding: 10px 17px; border: 1px solid #5b5c56; border-radius: 30px; color: var(--white); font-size: 12px; transition: background .2s; }
.header-share:hover { background: #30312b; }
.header-share .icon { width: 16px; height: 16px; }
.intro { display: flex; align-items: center; justify-content: space-between; padding: 44px 0 38px; }
.eyebrow, .mini-label { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: var(--ink-muted); }
.red-dot { display: inline-block; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.version-tag { margin-left: 3px; border: 1px solid #d7d8cf; border-radius: 4px; padding: 1px 4px; font-size: 8px; }
h1 { margin: 17px 0 18px; font-family: var(--display); font-size: clamp(36px, 3.75vw, 55px); font-weight: 700; letter-spacing: -.065em; line-height: 1.2; }
.title-accent { position: relative; display: inline-block; color: var(--red); }
.title-accent svg { position: absolute; bottom: -12px; left: -8%; width: 110%; height: 22px; fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 470; animation: scribble 1.6s var(--ease-spring) both; }
.intro-description { color: var(--ink-muted); font-size: 14px; line-height: 1.65; }
.intro-note { position: relative; display: flex; align-items: center; gap: 20px; margin-right: 66px; transform: rotate(-7deg); }
.intro-note p { font-size: 18px; font-weight: 500; line-height: 1.5; }
.intro-note strong { color: var(--red-dark); font-weight: 500; }
.note-arrow { margin-top: 45px; font-size: 66px; font-weight: 300; line-height: 1; }
.note-star { position: absolute; top: -21px; right: -59px; color: var(--red); font-size: 62px; line-height: 1; animation: star-turn 24s linear infinite; }
.builder { display: grid; grid-template-columns: minmax(340px, .85fr) minmax(0, 1.45fr); gap: 20px; align-items: stretch; }
.interview { display: flex; flex-direction: column; min-width: 0; background: var(--white); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 6px 20px #28382504; }
.step-nav { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 20px; border-bottom: 1px solid var(--line); }
.step-nav button { position: relative; min-height: 66px; color: var(--ink-muted); font-size: 10px; text-align: left; white-space: nowrap; }
.step-nav button span { display: block; font-size: 9px; margin-bottom: 2px; color: #888c83; }
.step-nav button[aria-current='step'] { color: var(--black); font-weight: 700; }
.step-nav button[aria-current='step'] span { color: var(--red-dark); }
.step-nav button[aria-current='step']::after { position: absolute; bottom: -1px; left: 0; width: calc(100% - 14px); height: 3px; border-radius: 4px; content: ''; background: var(--red); animation: tab-in .3s var(--ease-spring); }
.interview-body { flex: 1; padding: 25px 28px 22px; }
.step-panel { animation: panel-in .42s var(--ease-spring); }
.mini-label { color: var(--ink-muted); font-size: 9px; }
.step-panel h2 { margin: 9px 0 12px; outline: none; font-family: var(--display); font-size: clamp(20px, 1.85vw, 27px); font-weight: 600; letter-spacing: -.055em; line-height: 1.35; }
.panel-description { color: var(--ink-muted); font-size: 12px; line-height: 1.6; }
.people-selector { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 19px 10px 15px; }
.round-button { display: inline-flex; justify-content: center; align-items: center; width: 43px; height: 43px; border: 1px solid #dfe1d7; border-radius: 50%; background: var(--white); font-size: 26px; font-weight: 300; line-height: 1; transition: transform .25s var(--ease-spring), color .2s, background .2s; }
.round-button:hover:not(:disabled) { transform: rotate(-8deg) scale(1.1); color: var(--white); border-color: var(--black); background: var(--black); }
button:disabled { opacity: .35; cursor: not-allowed; }
.people-value { display: flex; align-items: center; flex-direction: column; }
.people-value output { font-family: var(--display); font-size: 78px; font-weight: 600; letter-spacing: -.07em; line-height: 1.1; }
.people-value > span { color: var(--ink-muted); font-size: 11px; }
.range { width: 100%; height: 24px; padding: 0; margin: 0; accent-color: var(--red); appearance: none; background: transparent; }
.range::-webkit-slider-runnable-track { height: 5px; border-radius: 10px; background: #dedfd7; }
.range::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -8px; border: 4px solid var(--white); border-radius: 50%; background: var(--red); box-shadow: 0 0 0 1px var(--red), 0 2px 6px #ed1c2430; appearance: none; transition: transform .15s; }
.range:active::-webkit-slider-thumb { transform: scale(1.2); }
.range::-moz-range-track { height: 5px; border-radius: 10px; background: #dedfd7; }
.range::-moz-range-thumb { width: 16px; height: 16px; border: 4px solid var(--white); border-radius: 50%; background: var(--red); box-shadow: 0 0 0 1px var(--red); }
.group-note { display: flex; align-items: center; gap: 8px; margin: 14px 0 22px; padding: 11px; border-radius: 8px; background: var(--mint-light); font-size: 10px; line-height: 1.45; }
.group-note .icon { width: 18px; height: 18px; }
.choice-field { margin-top: 19px; }
.choice-field legend, .small-label { display: block; color: var(--ink-muted); font-size: 10px; }
.choice-field legend { margin-bottom: 9px; font-weight: 500; }
.origin-options { display: flex; flex-wrap: wrap; gap: 6px; }
label input[type='radio'], .experience-card > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.origin-options label span { display: block; padding: 8px 10px; border: 1px solid #dedfd7; border-radius: 6px; font-size: 10px; transition: background .2s, color .2s, border-color .2s; }
.origin-options input:checked + span { color: var(--white); border-color: var(--black); background: var(--black); }
.interview-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 17px 22px; border-top: 1px solid var(--line); }
.back-button { width: 35px; height: 35px; border-radius: 50%; border: 1px solid var(--line); font-size: 20px; }
.interview-footer > span { color: var(--ink-muted); font-size: 10px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 43px; padding: 12px 20px; border-radius: 8px; font-size: 12px; font-weight: 600; line-height: 1.25; transition: transform .22s var(--ease-spring), background .22s, box-shadow .22s; }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(1px) scale(.97); }
.button .icon { width: 17px; height: 17px; }
.button-red { color: var(--white); background: var(--red); }
.button-red:hover { background: var(--red-dark); box-shadow: 0 5px 12px #ed1c2419; }
.button-outline { border: 1px solid #424640; color: var(--white); }
.button-outline:hover { background: #30362e; }
.trip-preview { display: flex; flex-direction: column; min-width: 0; gap: 14px; }
.mountain-scene { position: relative; flex: 1; min-height: 330px; overflow: hidden; border-radius: 16px; background: var(--mint); isolation: isolate; }
.mountain-art { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 1.4s var(--ease-spring); }
.mountain-scene:hover .mountain-art { transform: scale(1.035); }
.scene-top { display: flex; justify-content: space-between; gap: 12px; position: relative; z-index: 3; padding: 24px 25px; }
.scene-location { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.scene-season { display: flex; align-items: center; gap: 6px; font-size: 10px; }
.scene-season > span { width: 5px; height: 5px; border-radius: 50%; background: var(--black); }
.scene-compass { position: absolute; right: 24px; top: 88px; width: 52px; height: 70px; text-align: center; }
.scene-compass > span { font-size: 9px; }
.scene-compass svg { width: 46px; height: 46px; transform: rotate(25deg); transition: transform 1s var(--ease-spring); }
.scene-compass path:first-child { fill: var(--red); }
.scene-compass path:last-child { fill: #386052; }
.mountain-scene:hover .scene-compass svg { transform: rotate(385deg); }
.scene-sticker { position: absolute; left: 25px; top: 84px; display: flex; align-items: center; gap: 10px; transform: rotate(-7deg); padding: 11px 14px; background: #fffef4; border-radius: 3px; box-shadow: 3px 5px 0 #30504115; font-size: 11px; font-weight: 500; line-height: 1.3; }
.scene-sticker .icon { color: var(--red); width: 24px; height: 24px; }
.scene-metrics { position: absolute; bottom: 19px; left: 21px; display: flex; align-items: center; gap: 15px; padding: 12px 17px; border: 1px solid #ffffff55; border-radius: 8px; color: var(--white); background: #17271ded; font-size: 10px; }
.scene-metrics strong { font-size: 16px; font-weight: 600; margin-right: 3px; font-variant-numeric: tabular-nums; }
.scene-metrics > i { width: 1px; height: 16px; background: #ffffff35; }
.scene-route { position: absolute; right: 10%; bottom: 10%; width: 70%; height: 55%; opacity: .8; pointer-events: none; }
.scene-route svg { width: 100%; height: 100%; fill: none; stroke: var(--red); stroke-width: 1.7; stroke-dasharray: 6 7; }
.scene-route circle { fill: var(--red); stroke: #fff; stroke-width: 3; stroke-dasharray: none; }
.route-skier { position: absolute; left: 66%; top: 55%; color: var(--red); font-size: 24px; animation: ski-swish 7s ease-in-out infinite; }
.scene-gondola { position: absolute; top: 43%; left: 38%; width: 43%; height: 60px; transform: rotate(-14deg); }
.gondola-wire { position: absolute; inset: 0 0 auto; height: 1px; background: #214b3f70; }
.gondola-cabin { position: absolute; left: 15%; top: 0; display: flex; gap: 3px; width: 24px; height: 19px; margin-top: 18px; padding: 4px; border: 1px solid #17271d; border-radius: 3px 3px 7px 7px; background: var(--red); transform: rotate(14deg); animation: gondola 18s linear infinite; }
.gondola-cabin i { position: absolute; left: 10px; top: -18px; width: 1px; height: 18px; background: #214b3f; }
.gondola-cabin b { display: block; flex: 1; height: 7px; background: #ddeee3; }
.sound-button { position: absolute; bottom: 21px; right: 20px; width: 39px; height: 39px; border: 1px solid #39504655; border-radius: 50%; background: #fffef3ce; font-size: 21px; transition: transform .3s; }
.sound-button:hover { transform: rotate(60deg); }
.sound-button[aria-pressed='false'] { opacity: .55; }
.snow-layer { position: absolute; z-index: 2; inset: 0; pointer-events: none; overflow: hidden; }
.snowflake { position: absolute; top: -10px; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: .7; animation: snow-drift 9s linear infinite; }
.snowflake:nth-child(6n + 1) { left: 10%; animation-delay: -5s; animation-duration: 12s; }
.snowflake:nth-child(6n + 2) { left: 27%; animation-delay: -2s; animation-duration: 10s; }
.snowflake:nth-child(6n + 3) { left: 42%; animation-delay: -8s; animation-duration: 14s; }
.snowflake:nth-child(6n + 4) { left: 60%; animation-delay: -4s; animation-duration: 11s; }
.snowflake:nth-child(6n + 5) { left: 75%; animation-delay: -7s; animation-duration: 15s; }
.snowflake:nth-child(6n) { left: 90%; animation-delay: -1s; }
.snowflake:nth-child(n + 7) { width: 2px; height: 2px; margin-left: 5%; animation-delay: -3s; }
.live-summary { padding: 20px 25px 19px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.summary-heading { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 18px; }
.summary-heading h2 { margin-top: 5px; font-family: var(--display); font-size: 15px; font-weight: 500; letter-spacing: -.04em; }
.live-tag { display: flex; gap: 7px; align-items: center; color: var(--ink-muted); font-size: 8px; font-weight: 600; letter-spacing: .12em; }
.live-tag .status-dot { background: #338150; box-shadow: 0 0 0 4px #3381500b; animation: live-pulse 2.5s ease infinite; }
.recommendations { display: grid; gap: 13px; }
.recommendation { display: flex; align-items: center; gap: 11px; }
.recommendation-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 9px; }
.recommendation-icon .icon { width: 23px; height: 23px; }
.recommendation > div { min-width: 0; }
.recommendation strong { display: block; margin: 2px 0; font-size: 12px; font-weight: 600; }
.recommendation small { display: block; color: var(--ink-muted); font-size: 9px; line-height: 1.45; }
.auto-tag { margin-left: auto; flex: 0 0 auto; padding: 4px 7px; border-radius: 4px; color: #375147; background: var(--mint-light); font-size: 8px; }
.summary-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.live-price > div { display: flex; gap: 6px; align-items: baseline; margin-top: 2px; }
.live-price strong { font-family: var(--display); font-size: 28px; font-weight: 500; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.live-price > div > span { font-size: 17px; }
.live-price .price-pop { opacity: 0; color: var(--red-dark); }
.budget-status { display: flex; align-items: center; gap: 5px; max-width: 190px; margin-bottom: 6px; color: #316046; font-size: 9px; }
.budget-status .icon { width: 14px; height: 14px; }
.budget-status.over-budget { color: var(--red-dark); }
.duration-control { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 23px 0 7px; }
.compact-stepper { display: flex; align-items: center; gap: 20px; }
.compact-stepper button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; font-size: 20px; }
.compact-stepper output { font-family: var(--display); font-size: 28px; }
.duration-control > strong { font-size: 20px; }
.duration-control > strong span { color: var(--red); }
.field-hint { margin-top: 5px; color: var(--ink-muted); font-size: 10px; }
.transport-options, .level-options { display: grid; gap: 6px; }
.transport-options label > span, .level-options label > span { display: block; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; font-size: 11px; transition: border-color .2s, background .2s; }
.transport-options b, .level-options b { display: inline-block; width: 22px; color: var(--red-dark); font-size: 17px; font-weight: 500; }
.transport-options small { display: block; margin-left: 26px; color: var(--ink-muted); font-size: 9px; }
.transport-options input:checked + span, .level-options input:checked + span { border-color: #577064; background: var(--mint-light); }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 4px; border-radius: 8px; background: #f0f1eb; }
.segmented label > span { display: block; padding: 9px 3px; border-radius: 5px; font-size: 10px; text-align: center; transition: background .2s, box-shadow .2s; }
.segmented input:checked + span { color: var(--white); background: var(--black); box-shadow: 0 2px 5px #00000012; }
.toggle-row { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 17px; border-top: 1px solid var(--line); }
.toggle-row > span:first-child { flex: 1; }
.toggle-row strong { display: block; font-size: 12px; font-weight: 500; }
.toggle-row small { display: block; margin-top: 3px; color: var(--ink-muted); font-size: 10px; }
.toggle-row input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.toggle { position: relative; width: 39px; height: 23px; border-radius: 25px; background: #d5d8cf; transition: background .2s; }
.toggle::after { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--white); content: ''; box-shadow: 0 1px 3px #0002; transition: transform .3s var(--ease-spring); }
.toggle-row input:checked + .toggle { background: var(--red); }
.toggle-row input:checked + .toggle::after { transform: translateX(16px); }
.budget-dial { position: relative; width: 245px; max-width: 100%; height: 215px; margin: 16px auto 2px; cursor: grab; touch-action: none; }
.budget-dial:active { cursor: grabbing; }
.budget-dial svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dial-track, .dial-progress { fill: none; stroke-width: 12px; stroke-linecap: round; }
.dial-track { stroke: #eeefe7; }
.dial-progress { stroke: var(--red); }
#dialPointer circle { fill: var(--black); stroke: var(--white); stroke-width: 3; }
.dial-value { position: absolute; inset: 70px 0 auto; display: flex; flex-direction: column; text-align: center; pointer-events: none; }
.dial-value > span { font-family: var(--display); font-size: 31px; font-weight: 500; letter-spacing: -.06em; }
.dial-value > small { margin-top: 3px; color: var(--ink-muted); font-size: 11px; }
.dial-min, .dial-max { position: absolute; bottom: 0; font-size: 9px; color: var(--ink-muted); }
.dial-min { left: 19px; }.dial-max { right: 19px; }
.budget-presets { display: flex; justify-content: space-between; gap: 5px; margin-top: 10px; }
.budget-presets button { flex: 1; padding: 7px 2px; border: 1px solid var(--line); border-radius: 5px; font-size: 10px; }
.budget-presets button[aria-pressed='true'] { border-color: var(--black); background: var(--black); color: var(--white); }
.budget-hint { display: flex; gap: 10px; align-items: flex-start; margin-top: 19px; padding: 12px; border-radius: 8px; background: var(--mint-light); font-size: 10px; }
.budget-hint .icon { width: 18px; height: 18px; }
.fit-budget { width: 100%; margin-top: 12px; background: var(--mint-light); }
.fit-result { margin-top: 10px; color: var(--ink-muted); font-size: 10px; line-height: 1.6; }
.fit-result:empty { display: none; }
.estimate-note { margin-top: 11px; color: var(--ink-muted); font-size: 8px; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
.section-space { margin-top: 64px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 25px; }
.section-heading h2, .money-overview h2 { margin-top: 11px; font-family: var(--display); font-size: clamp(23px, 2.2vw, 33px); font-weight: 500; letter-spacing: -.055em; line-height: 1.25; }
.serif-accent { font-family: Georgia, 'Times New Roman', serif; font-size: 1.18em; font-weight: 400; font-style: italic; letter-spacing: -.05em; }
.section-heading > p { color: var(--ink-muted); font-size: 11px; line-height: 1.6; }
.experience-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.experience-card { position: relative; display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--white); transition: transform .35s var(--ease-spring), border-color .2s, box-shadow .3s; }
.experience-card:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 12px 28px #23341f0b; }
.experience-card:has(input:checked) { border-color: #526b5c; }
.experience-art { position: relative; display: flex; justify-content: center; height: 130px; overflow: hidden; background: #e8eee3; }
.experience-art > svg { width: 155px; height: 116px; margin-top: 2px; transition: transform .5s var(--ease-spring); }
.experience-card:hover .experience-art > svg { transform: rotate(3deg) scale(1.07); }
.art-line { fill: none; stroke: #294539; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.art-ink { fill: #294539; }
.art-red-line { fill: none; stroke: var(--red); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.experience-sauna .experience-art { background: #efe4ce; }
.experience-massage .experience-art { background: #e4e0ee; }
.experience-event .experience-art { background: #f0dbd6; }
.experience-badge { position: absolute; bottom: 9px; left: 10px; padding: 3px 6px; border: 1px solid #ffffff95; border-radius: 4px; background: #ffffffc0; font-size: 8px; }
.experience-content { display: flex; flex: 1; flex-direction: column; padding: 15px; }
.experience-title { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 14px; font-weight: 600; }
.card-check { display: flex; align-items: center; justify-content: center; width: 23px; height: 23px; border: 1px solid #d7dbd0; border-radius: 50%; }
.card-check .icon { width: 13px; height: 13px; opacity: 0; transition: opacity .2s, transform .3s; transform: scale(.5); }
.experience-card input:checked ~ .experience-content .card-check { border-color: var(--black); background: var(--black); color: var(--white); }
.experience-card input:checked ~ .experience-content .card-check .icon { opacity: 1; transform: scale(1); }
.experience-description { display: block; margin-top: 9px; color: var(--ink-muted); font-size: 10px; line-height: 1.65; }
.experience-price { display: block; margin-top: auto; padding-top: 15px; font-size: 11px; font-weight: 600; }
.text-button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 39px; padding: 9px 13px; border: 1px solid #cccec4; border-radius: 6px; font-size: 11px; }
.text-button .icon { width: 15px; height: 15px; }
.text-button:hover .icon { transform: rotate(90deg); transition: transform .5s; }
.plan-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: 10px; overflow-x: auto; padding: 2px 1px 14px; overscroll-behavior-inline: contain; scrollbar-color: #b6c3b7 transparent; scrollbar-width: thin; }
.day-card { position: relative; min-height: 205px; padding: 17px 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); animation: panel-in .4s var(--ease-spring); }
.day-card:first-child { border-color: #abc5b7; background: #e3eee4; }
.day-number { display: flex; justify-content: space-between; align-items: center; font-size: 9px; color: var(--ink-muted); }
.day-number span:first-child { font-family: var(--display); font-size: 22px; font-weight: 500; color: var(--black); }
.day-card h3 { margin: 13px 0 17px; font-size: 13px; font-weight: 600; }
.day-items { display: grid; gap: 8px; }
.day-item { display: flex; align-items: flex-start; gap: 6px; color: #555f52; font-size: 10px; line-height: 1.5; }
.day-item .icon { width: 14px; height: 14px; margin-top: 1px; color: #405740; }
.day-item.activity .icon { color: var(--red-dark); }
.plan-caption { display: flex; align-items: center; gap: 8px; margin-top: 7px; color: var(--ink-muted); font-size: 10px; }
.money-section { position: relative; display: grid; grid-template-columns: 1fr .85fr; gap: 70px; padding: 41px 45px 50px; border: 1px solid #d9dfd2; border-radius: 16px; background: #eef0e8; }
.money-share { position: absolute; z-index: 2; top: 14px; right: 14px; display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid #bd1119; border-radius: 10px; color: #fff; background: var(--red); box-shadow: 0 5px 14px #8c111b30; cursor: pointer; transition: background .18s, transform .18s, box-shadow .18s; }
.money-share .icon { width: 21px; height: 21px; }
.money-share:hover { transform: translateY(-2px); background: #bd1119; box-shadow: 0 7px 17px #8c111b40; }
.money-share:focus-visible { outline: 3px solid #173e30; outline-offset: 3px; }
.money-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.money-total > strong { font-family: var(--display); font-size: clamp(35px, 3.5vw, 50px); font-weight: 500; letter-spacing: -.06em; }
.money-total > span { color: var(--ink-muted); font-size: 13px; }
.money-group { color: var(--ink-muted); font-size: 11px; }
.money-group strong { color: var(--black); font-weight: 500; }
.cost-chart { margin-top: 29px; overflow: hidden; border-radius: 5px; }
.cost-chart svg { display: block; width: 100%; height: 24px; }
.chart-stay { fill: var(--red); }.chart-transfer { fill: #305346; }.chart-ski { fill: #86a998; }.chart-food { fill: #d6bd90; }.chart-gear { fill: #a4a0c1; }.chart-activities { fill: #505852; }
.cost-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px 14px; margin-top: 14px; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 9px; color: var(--ink-muted); }
.legend-item svg { width: 7px; height: 7px; border-radius: 2px; }
.budget-line { margin-top: 24px; padding-top: 19px; border-top: 1px solid #d3d9cc; }
.budget-line label { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-muted); font-size: 10px; }
.budget-line label strong { color: var(--black); font-weight: 500; }
.budget-line progress { display: block; width: 100%; height: 5px; margin-top: 9px; border: 0; border-radius: 5px; appearance: none; }
.budget-line progress::-webkit-progress-bar { background: #d5dccd; border-radius: 5px; }
.budget-line progress::-webkit-progress-value { background: #3b6550; border-radius: 5px; transition: width .4s; }
.budget-line progress.over-budget::-webkit-progress-value { background: var(--red); }
.budget-line progress::-moz-progress-bar { background: #3b6550; border-radius: 5px; }
.budget-line progress.over-budget::-moz-progress-bar { background: var(--red); }
.budget-line > span { display: block; margin-top: 8px; color: #3b6550; font-size: 10px; }
.budget-line:has(.over-budget) > span { color: var(--red-dark); }
.money-details { position: relative; align-self: center; padding: 23px 25px 21px; background: var(--white); box-shadow: 0 6px 0 #d8ded140, 0 14px 20px #19231406; transform: rotate(1.2deg); }
.bill-top { display: flex; align-items: center; gap: 7px; padding-bottom: 17px; border-bottom: 1px dashed #d4d7cd; font-size: 8px; font-weight: 500; letter-spacing: .06em; }
.bill-top .icon { width: 18px; height: 18px; }
.bill-top > span:last-child { margin-left: auto; white-space: nowrap; }
.bill-top #billDates { margin-left: auto; color: #203a30; font-size: 10px; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
.bill-top #billPeople { margin-left: 0; }
.cost-rows { display: grid; gap: 15px; padding: 19px 0; }
.cost-row { display: grid; gap: 4px; min-width: 0; font-size: 11px; }
.cost-row__main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cost-row .icon { width: 14px; height: 14px; flex: 0 0 14px; color: var(--ink-muted); }
.cost-row__main > span { min-width: 0; flex: 1 1 auto; color: var(--ink-muted); }
.cost-row__main strong { flex: 0 0 auto; margin-left: auto; font-weight: 500; white-space: nowrap; }
.cost-row__breakdown { display: block; margin-left: 22px; color: var(--ink-muted); font-size: max(14px, .875em); line-height: 1.45; overflow-wrap: anywhere; white-space: pre-line; }
.bill-total { display: flex; justify-content: space-between; gap: 10px; padding-top: 16px; border-top: 1px dashed #d4d7cd; font-size: 12px; }
.bill-total strong { font-family: var(--display); font-size: 16px; font-weight: 500; letter-spacing: -.04em; }
.bill-per-person { display: flex; justify-content: flex-end; margin-top: 8px; color: var(--ink-muted); font-size: 11px; font-weight: 600; }
.bill-note { margin-top: 17px; color: var(--ink-muted); font-size: 8px; line-height: 1.65; }
.bill-teeth { position: absolute; bottom: -8px; left: 0; width: 100%; height: 8px; background: linear-gradient(135deg, var(--white) 25%, transparent 25%) -8px 0 / 16px 16px, linear-gradient(225deg, var(--white) 25%, transparent 25%) -8px 0 / 16px 16px; }
.tips-section { margin-top: 42px; }
.tips-heading { display: flex; align-items: center; gap: 17px; margin-bottom: 21px; }
.tips-star { color: var(--red); font-size: 45px; animation: star-turn 25s linear infinite; }
.tips-heading h2 { margin-top: 5px; font-family: var(--display); font-size: 22px; font-weight: 500; letter-spacing: -.05em; }
.tips-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tip-card { display: flex; flex-direction: column; gap: 9px; padding: 20px; border: 1px solid #d5dfd1; border-radius: 10px; background: #e7eee1; }
.tip-card h3 { font-size: 13px; font-weight: 600; }
.tip-card p { color: #586253; font-size: 10px; line-height: 1.7; }
.tip-card button { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding: 13px 0 0; text-align: left; font-size: 11px; font-weight: 600; }
.tip-card button .icon { width: 17px; height: 17px; }
.tip-card button:hover { color: var(--red-dark); }
.finish-section { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 30px; overflow: hidden; margin-top: 64px; padding: 47px 55px; border-radius: 16px; color: var(--white); background: #19231c; isolation: isolate; }
.finish-copy .eyebrow { color: #b6c3b4; font-size: 9px; }
.finish-copy h2 { margin: 15px 0 14px; font-family: var(--display); font-size: clamp(27px, 2.8vw, 42px); font-weight: 500; letter-spacing: -.06em; line-height: 1.2; }
.finish-copy h2 .serif-accent { color: var(--mint); }
.finish-copy > p:last-child { color: #bac3b7; font-size: 12px; }
.finish-actions { position: relative; z-index: 1; display: flex; align-items: stretch; flex-direction: column; gap: 11px; width: 280px; }
.button-big { min-height: 54px; font-size: 14px; }
.finish-note { margin-top: 3px; color: #c0c8ba; font-size: 10px; text-align: center; }
.finish-stamp { position: absolute; z-index: -1; bottom: -19px; left: 50%; transform: rotate(-14deg); color: #29362b; font-family: var(--display); font-size: 65px; line-height: .95; }
.finish-stamp span { position: absolute; bottom: -8px; right: -40px; font-size: 90px; }
.calc-footer { display: flex; align-items: center; gap: 25px; margin: 0 -48px; padding: 36px 48px; color: #5d6458; font-size: 10px; }
.calc-footer img { width: 65px; height: auto; filter: brightness(0); }
.calc-footer > span { margin-left: auto; color: var(--ink-muted); }
.mobile-total { display: none; }
.toast { position: fixed; z-index: 60; left: 50%; bottom: 24px; width: max-content; max-width: calc(100% - 32px); transform: translateX(-50%); border: 1px solid #ffffff22; border-radius: 10px; padding: 14px 22px; color: var(--white); background: var(--black); box-shadow: 0 8px 35px #0002; font-size: 12px; animation: toast-in .3s var(--ease-spring); }
.confetti { position: fixed; z-index: 70; inset: 0; overflow: hidden; pointer-events: none; }
.confetti-piece { position: absolute; top: -20px; left: 50%; width: 9px; height: 17px; border-radius: 2px; background: var(--red); }
.confetti-piece:nth-child(3n) { background: var(--mint); }.confetti-piece:nth-child(3n+1) { background: #e2b57b; }
.share-dialog { width: min(480px, calc(100% - 32px)); padding: 27px; border: 1px solid var(--line); border-radius: 15px; color: var(--black); background: var(--paper); }
.share-dialog::backdrop { background: #1111119c; backdrop-filter: blur(5px); }
.dialog-heading { display: flex; align-items: center; gap: 15px; margin-bottom: 14px; }
.dialog-heading h2 { font-family: var(--display); font-size: 20px; line-height: 1.4; letter-spacing: -.04em; }
.dialog-heading .round-button { flex: 0 0 auto; }
.share-dialog > p { color: var(--ink-muted); font-size: 12px; }
.share-dialog > label { display: block; margin-top: 18px; color: var(--ink-muted); font-size: 10px; }
.share-dialog input { width: 100%; margin: 6px 0 15px; padding: 12px; border: 1px solid #d4d9ce; border-radius: 5px; color: var(--black); background: var(--white); font-size: 12px; }
.share-dialog > .button { width: 100%; }
.share-result { min-height: 18px; margin-top: 10px; }
.noscript-note { margin: 24px; padding: 20px; border: 1px solid var(--red); background: var(--white); }
@keyframes panel-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes tab-in { from { transform: scaleX(.3); transform-origin: left; } to { transform: scaleX(1); } }
@keyframes scribble { from { stroke-dashoffset: 470; } to { stroke-dashoffset: 0; } }
@keyframes star-turn { to { transform: rotate(360deg); } }
@keyframes snow-drift { to { transform: translate(35px, 500px); } }
@keyframes ski-swish { 0%, 100% { transform: translate(5px, -4px) rotate(5deg); } 50% { transform: translate(-45px, 30px) rotate(-12deg); } }
@keyframes gondola { 0%, 100% { left: 10%; } 50% { left: 90%; } }
@keyframes live-pulse { 50% { box-shadow: 0 0 0 5px #33815013; } }
@keyframes toast-in { from { opacity: 0; translate: 0 15px; } to { opacity: 1; translate: 0 0; } }
@media (min-width: 1500px) { .intro { padding-top: 53px; } .mountain-scene { min-height: 360px; } }
@media (max-width: 1100px) {
  .container, .calc-page .placeholder-container { width: calc(100% - 56px); }
  .builder { grid-template-columns: minmax(320px, .9fr) minmax(0, 1.2fr); gap: 15px; }
  .intro-note { margin-right: 35px; }
  .interview-body { padding: 22px; }
  .live-summary { padding: 20px; }
  .auto-tag { display: none; }
  .summary-bottom { align-items: flex-start; flex-direction: column; gap: 5px; }
  .experience-content { padding: 13px; }.experience-title { font-size: 12px; }
  .money-section { gap: 35px; padding: 35px; }
  .calc-footer { margin: 0 -28px; padding: 32px 28px; }
}
@media (max-width: 800px) {
  .header-lab { display: none; }.header-share { margin-left: auto; }
  .intro-note { margin-right: 30px; }.intro-note p { font-size: 15px; }.note-arrow { font-size: 45px; }.note-star { right: -35px; font-size: 42px; }
  .builder { grid-template-columns: minmax(290px, .9fr) minmax(0, 1fr); gap: 12px; }
  .step-nav { padding: 0 15px; }.step-nav button { font-size: 9px; }
  .interview-body { padding: 22px 18px; }.interview-footer { padding: 15px; }
  .mountain-scene { min-height: 300px; }.scene-top { padding: 18px; }.scene-season { display: none; }
  .scene-sticker { left: 18px; top: 70px; font-size: 10px; }.scene-metrics { left: 14px; gap: 8px; padding: 9px; }.scene-metrics strong { font-size: 13px; }.scene-metrics { font-size: 8px; }
  .sound-button { right: 12px; bottom: 16px; width: 29px; height: 29px; font-size: 15px; }
  .live-summary { padding: 17px; }.summary-heading h2 { font-size: 12px; }.live-tag { display: none; }
  .recommendation-icon { width: 31px; height: 31px; }.recommendation strong { font-size: 11px; }
  .experience-grid { grid-template-columns: repeat(2, 1fr); }.experience-title { font-size: 14px; }
  .money-section { gap: 25px; padding: 27px; grid-template-columns: 1fr 1fr; }.money-details { padding: 18px; }.bill-total { flex-direction: column; gap: 8px; }
  .tips-grid { gap: 9px; }.tip-card { padding: 15px; }
  .finish-section { padding: 35px; }.finish-actions { width: 240px; }.finish-copy h2 { font-size: 30px; }
}
@media (max-width: 640px) {
  .container, .calc-page .placeholder-container { width: calc(100% - 32px); }
  .calc-page .placeholder-header__inner { min-height: 65px; gap: 15px; }.calc-page .placeholder-logo__image { width: 70px; }
  .header-divider { height: 20px; }.header-section { font-size: 11px; }.header-section span { display: none; }.header-share { padding: 8px 10px; border: 0; }.header-share > span { display: none; }.header-share .icon { width: 19px; height: 19px; }
  .intro { padding: 30px 0 26px; }.intro .eyebrow { font-size: 8px; letter-spacing: .08em; gap: 6px; } h1 { margin: 15px 0 19px; font-size: clamp(30px, 7.8vw, 46px); }.intro-description { font-size: 12px; }.intro-note { display: none; }
  .builder { display: flex; flex-direction: column; gap: 16px; }.interview { border-radius: 13px; }.step-nav { padding: 0 20px; }.step-nav button { min-height: 56px; font-size: 10px; }.interview-body { padding: 24px; }.step-panel h2 { font-size: 25px; }
  .people-selector { margin: 18px 16px 14px; }.people-value output { font-size: 74px; }.group-note { font-size: 11px; }.origin-options label span { padding: 8px 10px; font-size: 10px; }
  .interview-footer { padding: 16px 20px; }.button { min-height: 44px; }.step-nav button, .origin-options label { min-height: 38px; }
  .trip-preview { gap: 12px; }.mountain-scene { min-height: 275px; }.scene-top { padding: 21px; }.scene-season { display: flex; }.scene-sticker { top: 68px; left: 20px; }.scene-metrics { bottom: 18px; left: 18px; font-size: 10px; gap: 12px; padding: 10px 12px; }.scene-metrics strong { font-size: 15px; }.sound-button { width: 34px; height: 34px; bottom: 19px; right: 18px; font-size: 18px; }
  .live-summary { padding: 22px; }.summary-heading h2 { font-size: 15px; }.live-tag { display: flex; }.recommendation-icon { width: 38px; height: 38px; }.recommendation strong { font-size: 12px; }.recommendation small { font-size: 10px; }.summary-bottom { flex-direction: row; align-items: end; }.live-price strong { font-size: 27px; }.budget-status { max-width: 130px; }.auto-tag { display: inline; font-size: 7px; }
  .section-space { margin-top: 43px; }.section-heading { align-items: flex-start; gap: 14px; margin-bottom: 19px; }.section-heading h2, .money-overview h2 { font-size: 23px; }.section-heading > p { display: none; }.section-heading .eyebrow { font-size: 9px; }.section-heading .text-button { padding: 8px; font-size: 9px; gap: 6px; flex: 0 0 auto; margin-top: 26px; }.section-heading .text-button .icon { width: 13px; height: 13px; }
  .experience-grid { gap: 9px; }.experience-art { height: 113px; }.experience-art > svg { height: 100px; width: 138px; }.experience-content { padding: 13px 11px; }.experience-title { font-size: 12px; }.experience-description { font-size: 10px; }.experience-badge { font-size: 7px; left: 7px; }.experience-price { font-size: 10px; }.card-check { width: 20px; height: 20px; flex: 0 0 auto; }
  .plan-strip { grid-auto-columns: 175px; margin-right: -16px; padding-right: 16px; }.plan-caption { font-size: 9px; align-items: flex-start; }.plan-caption .red-dot { margin-top: 4px; }
  .money-section { grid-template-columns: 1fr; gap: 30px; padding: 26px 23px 32px; }.money-total { margin-top: 17px; }.money-total > strong { font-size: 39px; }.money-details { margin: 0 3px; padding: 24px; }.bill-total { flex-direction: row; }.bill-note { font-size: 9px; }.cost-legend { gap: 9px; }.cost-row { font-size: 12px; }
  .tips-section { margin-top: 30px; }.tips-heading { gap: 12px; }.tips-heading h2 { font-size: 20px; }.tips-grid { grid-template-columns: 1fr; gap: 9px; }.tip-card { padding: 18px; }.tip-card h3 { font-size: 14px; }.tip-card p { font-size: 11px; }.tip-card button { font-size: 12px; }
  .finish-section { align-items: stretch; flex-direction: column; gap: 25px; margin-top: 40px; padding: 30px 25px; }.finish-copy .eyebrow { font-size: 8px; }.finish-copy h2 { font-size: 32px; }.finish-actions { width: 100%; }.finish-stamp { left: auto; right: -20px; bottom: 155px; }
  .calc-footer { flex-wrap: wrap; gap: 15px; margin: 0; padding: 26px 0 110px; }.calc-footer p { font-size: 9px; }.calc-footer > span { margin-left: 0; flex-basis: 100%; font-size: 9px; }
  .mobile-total { position: fixed; z-index: 25; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 20px calc(11px + env(safe-area-inset-bottom)); border-top: 1px solid #d9ddd2; color: var(--black); background: #fffffff5; box-shadow: 0 -5px 25px #23351b07; }.mobile-total small { display: block; font-size: 9px; color: var(--ink-muted); }.mobile-total strong { display: block; font-family: var(--display); font-size: 18px; font-weight: 500; letter-spacing: -.05em; }.mobile-total .button { min-height: 40px; padding: 10px 16px; font-size: 11px; }.toast { bottom: 90px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .snow-layer, .confetti { display: none; }
}
.money-actions { display: flex; max-width: 1320px; justify-content: flex-end; gap: 10px; margin: 18px auto 0; }
.money-actions .button { min-width: 180px; }
.money-actions__share { border: 1px solid #173e30; color: #173e30; background: #edf4ec; }
.money-actions__share:hover { border-color: #0c2d20; color: #fff; background: #173e30; }
.money-actions__share:focus-visible { outline: 3px solid #ed1c24; outline-offset: 3px; }
.cost-row__services { display: grid; gap: 8px; margin-left: 22px; }
.cost-row__service { display: grid; gap: 2px; min-width: 0; }
.cost-row__service-head { display: flex; min-width: 0; justify-content: space-between; gap: 10px; color: var(--black); font-size: max(12px, .9em); line-height: 1.4; }
.cost-row__service-name { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.cost-row__service-cost { flex: 0 0 auto; font-weight: 600; white-space: nowrap; }
.cost-row__service-breakdown { color: var(--ink-muted); font-size: max(12px, .82em); line-height: 1.4; overflow-wrap: anywhere; }
#copyLink { border: 1px solid #526e5e; color: #173e30; background: #edf4ec; }
#copyLink:disabled { border-color: #a9b7ab; color: #526356; background: #e7ede6; opacity: 1; }
#copyLink:not(:disabled):hover { border-color: #0c2d20; color: #fff; background: #173e30; }
#copyLink:focus-visible { outline: 3px solid #173e30; outline-offset: 3px; }
@media (max-width: 640px) {
  .money-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .money-actions .button { width: 100%; min-width: 0; }
}