/* Prague winter landing — page sections.
   Mobile first (base = 375px phone), enhanced at 768px and 1024px. Values come only from tokens.css; buttons, pills,
   headings, paper ellipses, stamps, the FAQ and dialogs come from components.css.
   Hebrew RTL only: logical properties for layout; physical transforms only where an animation is physical. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--space-5); }
img { max-width: 100%; }
a { color: inherit; text-underline-offset: 4px; text-decoration-skip-ink: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.skip { position: absolute; top: -100px; inset-inline-start: var(--space-4); z-index: 60; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); font-weight: 700; }
.skip:focus { top: var(--space-3); }
.wrap { width: min(var(--page-max), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
main > section { position: relative; isolation: isolate; min-width: 0; }

/* Section rhythm: one vertical padding scale and a hairline rule between sections. */
.section, .offer-includes { padding-block: var(--space-7); }
.guide-preview, .desktop-planning, .map-showcase, .stories-hook, .intro { border-top: 1px solid var(--line); }
@media (min-width: 1024px) { .section, .offer-includes { padding-block: var(--space-8); } }

/* Seasonal drawings from the guide: decorative, faint on small screens, beside the heading on wide ones. */
.winter-trim { position: absolute; z-index: -1; top: var(--space-6); inset-inline-end: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-3); width: 115px; height: 70px; opacity: .2; pointer-events: none; user-select: none; }
.offer-copy > .winter-trim, .map-features-intro > .winter-trim, .about-copy > .winter-trim { top: 0; }
.winter-trim > .seasonal-art { display: block; flex: none; width: 52px; height: 66px; transform: rotate(-5deg); }
.winter-trim > .seasonal-art[viewBox="0 0 60 60"] { width: 38px; height: 38px; }
.winter-flurry { display: block; width: 27px; height: 27px; opacity: .65; transform: rotate(16deg); }
.winter-flurry .seasonal-art { display: block; width: 100%; height: 100%; }
.winter-flurry:last-child { width: 19px; height: 19px; align-self: flex-start; margin-top: var(--space-3); transform: rotate(-12deg); }
@media (min-width: 1024px) {
  .winter-trim { width: 150px; height: 86px; opacity: .65; top: var(--space-7); }
  .offer-copy > .winter-trim, .map-features-intro > .winter-trim { top: 0; }
  .about-copy > .winter-trim { top: auto; bottom: var(--space-2); opacity: .4; }
  .winter-trim > .seasonal-art { width: 66px; height: 86px; }
  .winter-trim > .seasonal-art[viewBox="0 0 60 60"] { width: 48px; height: 48px; }
  .winter-flurry { width: 34px; height: 34px; }
  .winter-flurry:last-child { width: 23px; height: 23px; }
}

/* ---------- Hero ---------- */
.hero { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); padding-block: var(--space-4) var(--space-7); text-align: center; }
.hero-signature { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); width: min(100%, 900px); }
.prague-drawing { width: 100%; height: 52px; pointer-events: none; }
.prague-drawing svg { display: block; width: 100%; height: 100%; overflow: visible; }
.skyline-draw { stroke: var(--stamp); stroke-dasharray: 2500; stroke-dashoffset: 2500; animation: draw-prague 3s ease forwards; }
.flight-trail { stroke: var(--stamp); opacity: .65; }
.travel-plane path { fill: var(--accent); }
.travel-plane { offset-path: path('M60 55 C240 0 400 10 515 38 S780 80 920 35'); offset-rotate: auto; animation: fly-prague 4.5s ease-in-out both; }
@keyframes draw-prague { to { stroke-dashoffset: 0; } }
@keyframes fly-prague { from { offset-distance: 0%; opacity: 0; } 15% { opacity: 1; } to { offset-distance: 100%; opacity: 1; } }

.instagram-profile { display: flex; align-items: center; gap: var(--space-3); max-width: 100%; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); text-align: start; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.instagram-profile:active { background: var(--rose); }
.instagram-avatar { display: flex; flex: none; flex-direction: column; align-items: center; gap: var(--space-1); }
.instagram-avatar-photo { position: relative; display: block; width: 52px; height: 52px; padding: 2px; border-radius: var(--radius-pill); background: var(--gradient-instagram); }
.instagram-avatar-photo img { display: block; width: 48px; height: 48px; object-fit: cover; border: 2px solid var(--surface); border-radius: var(--radius-pill); }
.instagram-profile-icon { position: absolute; bottom: -4px; inset-inline-end: -4px; width: 20px; height: 20px; padding: 2px; border-radius: var(--radius-pill); background: var(--surface); color: var(--accent); }
.instagram-avatar bdi { font: 700 14px/1.3 var(--font-sans); color: var(--accent); }
.instagram-profile-copy strong { display: block; font: 700 17px/1.35 var(--font-display); color: var(--ink); }
.creator-mobile-line { display: block; }
@media (hover: hover) and (pointer: fine) { .instagram-profile:hover strong { text-decoration: underline; text-underline-offset: 4px; } }

.offer-visual { width: min(100%, 520px); margin: 0; }
.offer-visual img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }
.product-reveal { animation: product-rise .24s ease-out both; }
@keyframes product-rise { from { transform: translateY(12px); } to { transform: none; } }

.offer-copy { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); width: 100%; max-width: 900px; }
.hero-opening { display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--measure); }
.hero-opening-question { font: 700 clamp(22px, 5.6vw, 28px)/1.35 var(--font-display); text-wrap: balance; }
.hero-opening-summary { font: 700 clamp(19px, 4.6vw, 22px)/1.45 var(--font-display); text-wrap: balance; }

.offer-buy { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); width: 100%; }
.launch-offer { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.launch-prices { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1) var(--space-4); }
.launch-prices strong { font: 850 clamp(42px, 10vw, 52px)/1.15 var(--font-display); letter-spacing: -0.02em; }
.launch-prices small { font: 700 22px/1 var(--font-display); letter-spacing: 0; }
.launch-was { font: 700 21px/1.3 var(--font-sans); color: var(--ink-muted); white-space: nowrap; }
.launch-saving { font: 700 17px/1.4 var(--font-sans); color: var(--accent); }
.offer-buy .buy-cta { margin-top: var(--space-2); }
.buy-note { font: 400 var(--text-small)/1.5 var(--font-sans); color: var(--ink-muted); }

@media (min-width: 768px) {
  .hero { gap: var(--space-6); padding-top: var(--space-5); }
  .prague-drawing { height: 100px; }
  .instagram-profile-copy strong { font-size: 20px; }
  .creator-mobile-line { display: inline; }
  .offer-visual { width: min(100%, 680px); }
  .launch-prices small { font-size: 24px; }
  .launch-was { font-size: 24px; }
  .launch-saving { font-size: 18px; }
}

/* ---------- What the package includes: paper ovals, each sending out its phone ---------- */
.offer-includes { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); padding-top: 0; text-align: center; }
.offer-products { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); width: 100%; max-width: 390px; }
.product-orbit { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 390px; }
/* Each label sits at the edge opposite its phone, so the phone stays in view. */
.product-orbit:first-child { justify-content: flex-end; }
.product-orbit:nth-child(2) { justify-content: flex-start; }
.product-orbit > .co-blob { z-index: 2; width: 65%; max-width: 290px; min-height: 190px; justify-content: center; }
.product-orbit .orbit-phone {
  --orbit-distance: 85px;
  position: absolute; top: var(--space-3); inset-inline-start: calc(50% - 80px); z-index: 1;
  display: flex; flex-direction: column; width: 160px; height: 346px; padding-top: 22px; overflow: hidden;
  border: 6px solid var(--ink); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-lift);
  opacity: 0; transform: translate(0, 70px);
}
.product-orbit .orbit-phone::after { content: ""; position: absolute; top: 5px; inset-inline: 32%; height: 11px; border-radius: var(--radius-pill); background: var(--ink); }
.product-orbit .orbit-phone img { display: block; flex: 1; width: 100%; height: 100%; min-height: 0; object-fit: contain; object-position: top; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.product-orbit.orbit-revealed .orbit-phone { animation: orbit-phone-right 1.15s cubic-bezier(.2, .7, .3, 1) both; }
.product-orbit:nth-child(2).orbit-revealed .orbit-phone { animation-name: orbit-phone-left; }
@keyframes orbit-phone-right { 0% { opacity: 0; transform: translate(0, 70px) rotate(-25deg); } 35% { opacity: 1; transform: translate(60px, -35px) rotate(8deg); } 100% { opacity: 1; transform: translate(var(--orbit-distance), 0) rotate(8deg); } }
@keyframes orbit-phone-left { 0% { opacity: 0; transform: translate(0, 70px) rotate(25deg); } 35% { opacity: 1; transform: translate(-60px, -35px) rotate(-8deg); } 100% { opacity: 1; transform: translate(calc(-1 * var(--orbit-distance)), 0) rotate(-8deg); } }
.offer-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); max-width: 680px; }
.offer-badge-row { display: contents; }
@media (max-width: 380px) { .product-orbit .orbit-phone { --orbit-distance: 65px; } }
/* Phones: the five badges form two deliberate rows, three over two. */
@media (max-width: 767px) {
  .offer-badges { flex-direction: column; align-items: center; }
  .offer-badge-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); max-width: 100%; }
  .offer-badge-row > .co-badge { padding-inline: var(--space-3); font-size: 14px; white-space: nowrap; }
}
@media (min-width: 768px) {
  .offer-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); max-width: 780px; }
  .product-orbit > .co-blob { width: 78%; }
  .product-orbit .orbit-phone { --orbit-distance: 90px; }
}
@media (min-width: 1024px) { .product-orbit .orbit-phone { --orbit-distance: clamp(110px, 15vw, 200px); } }

/* ---------- Inside the guide: phone captures ---------- */
.guide-preview { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.guide-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
/* Phones: a sideways rail that bleeds to the screen edge, so the next capture peeks in. */
.preview-grid {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(66%, 260px); gap: var(--space-4); align-items: start;
  width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); padding: var(--space-2) var(--gutter) var(--space-5);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
}
.preview-grid::-webkit-scrollbar { display: none; }
.preview-grid figure { display: flex; flex-direction: column; min-width: 0; margin: 0; scroll-snap-align: center; }
.phone-shot {
  position: relative; isolation: isolate; display: flex; flex-direction: column; width: 100%; max-width: 250px; margin: 0 auto;
  aspect-ratio: 600 / 1299; padding: 30px 6px 10px; overflow: hidden;
  border: 6px solid var(--ink); border-radius: var(--radius-device); background: var(--surface); box-shadow: var(--shadow-lift);
}
.phone-shot::before { content: ""; position: absolute; top: 7px; inset-inline: 33%; z-index: 2; height: 17px; border-radius: var(--radius-pill); background: var(--ink); }
.phone-shot::after { content: ""; position: absolute; bottom: 4px; inset-inline: 35%; height: 4px; border-radius: var(--radius-pill); background: var(--ink); }
.phone-shot img { display: block; flex: 1; width: 100%; height: 100%; min-height: 0; object-fit: contain; object-position: top; }
.preview-grid figcaption { margin-top: var(--space-4); font: 400 16px/1.55 var(--font-sans); color: var(--ink-muted); text-align: center; }
.preview-grid figcaption strong { display: inline-block; margin-bottom: var(--space-1); font: 700 19px/1.3 var(--font-display); color: var(--ink); }
@media (min-width: 768px) {
  .preview-grid { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); width: 100%; margin-inline: 0; padding: 0; overflow: visible; }
  .preview-grid figcaption { font-size: 17px; }
  .preview-grid figcaption strong { font-size: 21px; }
}

/* ---------- Desktop planning: the same day on a laptop and a phone ---------- */
.desktop-planning { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.cross-device-preview { position: relative; box-sizing: border-box; width: 100%; max-width: 1040px; padding-bottom: var(--space-7); padding-inline-end: 100px; }
.desktop-planner-frame { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-soft); }
.desktop-browser-bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; direction: ltr; border-bottom: 1px solid var(--line); background: var(--beige); }
.desktop-browser-bar > span { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--line-warm); }
.desktop-planner-frame > img, .matching-mobile-frame img { display: block; width: 100%; height: auto; }
.desktop-planner-frame > figcaption { padding: var(--space-2) var(--space-4); font: 400 var(--text-small)/1.5 var(--font-sans); color: var(--ink-muted); text-align: center; }
.matching-mobile-preview { position: absolute; bottom: 0; inset-inline-end: 0; z-index: 2; width: 190px; margin: 0; transform: rotate(-4deg); }
.matching-mobile-frame { position: relative; overflow: hidden; padding: 23px 0 9px; border: 6px solid var(--ink); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-lift); }
.matching-mobile-frame::before { content: ""; position: absolute; top: 5px; inset-inline: 32%; height: 13px; border-radius: var(--radius-pill); background: var(--ink); }
.matching-mobile-frame::after { content: ""; position: absolute; bottom: 3px; inset-inline: 35%; height: 4px; border-radius: var(--radius-pill); background: var(--ink); }
.matching-mobile-preview > figcaption { padding-top: var(--space-2); font: 600 var(--text-small)/1.4 var(--font-sans); color: var(--ink-muted); text-align: center; }
/* Phones: the phone overlaps the laptop's lower corner; the caption keeps clear of it. */
@media (max-width: 767px) {
  .cross-device-preview { padding: 0 0 105px; }
  .desktop-browser-bar { height: 24px; }
  .desktop-planner-frame { border-radius: var(--radius-md); }
  .desktop-planner-frame > figcaption { padding-inline-end: 34%; text-align: start; }
  .matching-mobile-preview { inset-inline-end: 4px; width: 31%; min-width: 110px; max-width: 160px; }
  .matching-mobile-frame { padding-top: 18px; border-width: 4px; border-radius: var(--radius-lg); }
  .matching-mobile-frame::before { top: 4px; height: 10px; }
}

/* ---------- Map showcase ---------- */
.map-showcase { display: flex; flex-direction: column; gap: var(--space-6); }
.map-features-intro { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--space-6); }
.map-steps { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.map-step { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.map-step-num { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--rose); font: 700 15px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.map-step h3 { margin-bottom: var(--space-1); font: 700 22px/1.3 var(--font-display); }
.map-step p { font-size: var(--text-body); line-height: 1.5; }
@media (min-width: 768px) {
  .map-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
  .map-step h3 { font-size: 23px; }
  .map-step p { font-size: 19px; }
}

.actual-guide-map { position: relative; isolation: isolate; width: 100%; min-width: 0; margin: 0; }
.map-canvas { position: relative; isolation: isolate; width: 100%; height: 340px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.map-canvas > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.map-canvas > svg.map-wide-background { pointer-events: none; }
.map-canvas > svg:not(.map-wide-background) { z-index: 1; }
@media (min-width: 768px) {
  .map-canvas { height: min(50vw, 480px); min-height: 320px; }
  .map-canvas > svg:not(.map-wide-background) { inset-inline-start: auto; width: 62%; }
}

/* Illustrated stops: rose halo, accent drawing, cream label; selected and hovered labels turn rose. */
.illustrated-map-stop { cursor: pointer; }
.illustrated-map-stop:focus-visible { outline: none; }
.illustrated-map-stop > circle { fill: var(--rose); opacity: .8; transition: fill .14s ease, opacity .14s ease; }
.illustrated-map-stop > g { stroke: var(--accent); fill: var(--surface); }
.illustrated-map-stop > path { stroke: var(--stamp); }
.illustrated-map-stop > rect:not(.pin-hit-area) { fill: var(--surface); stroke: var(--line-warm); transition: fill .14s ease, stroke .14s ease; }
.illustrated-map-stop > text { fill: var(--accent); font-family: var(--font-sans); }
.illustrated-map-stop .pin-hit-area { fill: transparent; stroke: none; }
.illustrated-map-stop.selected-stop > rect:not(.pin-hit-area), .illustrated-map-stop:focus-visible > rect:not(.pin-hit-area) { fill: var(--rose); stroke: var(--accent); stroke-width: 2.5; }
.illustrated-map-stop:active > rect:not(.pin-hit-area) { fill: var(--rose-strong); }
@media (hover: hover) and (pointer: fine) {
  .illustrated-map-stop:hover > rect:not(.pin-hit-area) { fill: var(--rose); stroke: var(--accent); stroke-width: 2.5; }
  .illustrated-map-stop:hover > circle { fill: var(--salmon); opacity: 1; }
}
@media (max-width: 767px) { .illustrated-map-stop text { font-size: 27px; } }
.actual-guide-map.motion-enter .illustrated-map-stop { animation: pin-stage .5s ease-out both; transform-box: fill-box; transform-origin: center; }
.actual-guide-map.motion-enter .illustrated-map-stop:nth-of-type(2n) { animation-delay: .15s; }
.actual-guide-map.motion-enter .illustrated-map-stop:nth-of-type(3n) { animation-delay: .3s; }
@keyframes pin-stage { from { opacity: 0; transform: translateY(-15px) scale(.8); } to { opacity: 1; transform: none; } }

/* Hints: a pointer and note on desktop, a pulsing ring around one stop on phones. */
.map-tap-hint { display: none; }
.map-pointer-cursor { position: absolute; z-index: 7; display: block; pointer-events: none; }
.map-pointer-cursor svg { display: block; width: 28px; height: 35px; }
.map-tap-ring { display: none; position: absolute; z-index: 9; width: 54px; height: 54px; border: 2px solid var(--accent); border-radius: var(--radius-pill); pointer-events: none; transform: translate(-50%, -50%); }
@keyframes transparent-tap { 0%, 100% { transform: translate(-50%, -50%) scale(.8); opacity: .35; } 50% { transform: translate(-50%, -50%) scale(1.35); opacity: .9; } }
@keyframes cursor-click { 0%, 65%, 100% { transform: translate(8px, 10px) scale(1); } 30%, 45% { transform: translate(0, 0) scale(.9); } }
.map-in-view:not(.map-explored) .map-pointer-cursor { animation: cursor-click 1.8s ease-in-out infinite; }
.map-explored .map-pointer-cursor { display: none; }
@media (min-width: 768px) {
  .map-canvas .map-tap-hint {
    position: absolute; z-index: 8; top: calc(31% + 25px); inset-inline-end: calc(48% - 25px); display: block; width: calc(15% + 16px); max-width: 166px; padding: var(--space-3);
    border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); font: 600 16px/1.4 var(--font-sans); text-align: center; pointer-events: none;
  }
  .map-pointer-cursor { position: absolute; z-index: 7; display: block; pointer-events: none; }
  .map-in-view:not(.map-explored) .map-pointer-cursor { animation: cursor-click 1.8s ease-in-out infinite; }
  .map-explored .map-tap-hint, .map-explored .map-pointer-cursor { position: absolute; z-index: 7; display: block; pointer-events: none; }
}

/* Place details: a side panel inside the map from 768px, a card above the page on phones. */
.map-place-panel {
  position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column; overflow: hidden;
  width: calc(100% - 2 * var(--space-4)); max-width: 420px; height: min(680px, calc(100dvh - var(--space-7))); max-height: calc(100dvh - var(--space-7));
  margin: auto; padding: 0; border: 1px solid var(--line-warm); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-dialog);
}
.map-place-panel[hidden] { display: none; }
.map-place-panel::backdrop { background: var(--scrim); }
.map-place-panel .modal-close { position: absolute; top: var(--space-3); inset-inline-start: var(--space-3); z-index: 8; }
.map-place-panel .map-place-detail { flex: 1; height: 100%; min-height: 0; overflow: hidden; }
.map-place-panel .map-place-detail:focus { outline: none; }
.map-place-panel .place { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
.map-place-panel .place-media { flex: 0 0 180px; height: 180px; margin: 0; overflow: hidden; }
.map-place-panel .place-photo { width: 100%; height: 100%; margin: 0; overflow: hidden; }
.map-place-panel .place-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.map-place-panel .address-map-link, .map-place-panel .media-place-name { display: none; }
.map-place-panel .place-copy { flex: 1; min-height: 0; padding: var(--space-5); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.map-place-panel h3 { margin: 0 0 var(--space-3); font: 700 20px/1.35 var(--font-display); overflow-wrap: anywhere; }
.map-place-panel h4 { margin: 0 0 var(--space-2); font: 700 15px/1.4 var(--font-display); color: var(--accent); }
.map-place-panel p { margin: 0 0 var(--space-3); font: 400 16px/1.6 var(--font-sans); }
.map-place-panel strong { font-weight: 700; }
.map-place-panel a { color: var(--accent); font-weight: 700; text-underline-offset: 3px; }
.map-place-panel .place-copy svg { display: inline-block; width: 16px; height: 16px; margin-inline: var(--space-1); vertical-align: middle; }
.map-place-panel .static-detail { margin: var(--space-4) 0; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.map-place-panel .family-tip, .map-place-panel .combination-tip, .map-place-panel .kids { padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface-sunken); }
.map-place-panel .place-crossfade-out { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; background: var(--surface); pointer-events: none; }
@media (min-width: 768px) {
  .map-place-panel {
    position: absolute; inset-block: 0; inset-inline-start: 0; inset-inline-end: auto; width: 38%; max-width: none; height: 100%; max-height: 100%;
    margin: 0; border: 0; border-inline-end: 1px solid var(--line-warm); border-radius: 0; box-shadow: var(--shadow-soft);
  }
  .map-place-panel .modal-close { display: none; }
  .map-place-panel .place-media { flex-basis: 150px; height: 150px; }
  .map-place-panel .place-copy { padding: var(--space-4); }
  .map-place-panel h3 { font-size: 19px; }
  .map-place-panel p { font-size: 15px; line-height: 1.55; }
}

.section-purchase { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }

/* ---------- Stories ---------- */
.stories-hook { display: grid; justify-items: center; gap: var(--space-6); }
.stories-copy { align-items: center; text-align: center; }
@media (min-width: 1024px) {
  .stories-hook { grid-template-columns: minmax(0, 1fr) minmax(0, 350px); align-items: center; gap: var(--space-8); max-width: 960px; margin-inline: auto; }
  .stories-copy { align-items: flex-start; text-align: start; }
}

/* ---------- About ---------- */
.intro { display: grid; gap: var(--space-5); }
.about-copy { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.about-copy > .co-heading { margin-bottom: var(--space-2); }
.about-closing { margin-top: var(--space-2); font: 700 clamp(19px, 4.6vw, 22px)/1.4 var(--font-display); color: var(--accent); }
.about-photo { justify-self: center; width: 100%; }
/* The portrait keeps its hand-cut outline on a rose paper backing. */
.coral-intro-photo { position: relative; width: min(100%, 250px); margin: var(--space-5) auto var(--space-3); padding: var(--space-2); border-radius: var(--shape-portrait); background: var(--rose); box-shadow: var(--shadow-paper); transform: rotate(-5deg); }
.coral-intro-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1.08; object-fit: cover; object-position: 55% 42%; border-radius: var(--shape-portrait); }

.winter-scenes { grid-column: 1 / -1; min-width: 0; width: 100%; padding-top: var(--space-6); border-top: 1px solid var(--line); }
.scene-controls { display: flex; justify-content: center; margin-bottom: var(--space-2); }
.scene-controls span { font: 800 22px/1.3 var(--font-display); }
/* Phones: the trip photographs become a swipeable strip of prints. */
.scene-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(58%, 240px); gap: var(--space-4); align-items: center;
  width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); padding: var(--space-5) var(--gutter);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
}
.scene-track::-webkit-scrollbar { display: none; }
.scene-track figure {
  position: relative; width: 100%; margin: 0; padding: var(--space-2) var(--space-2) 0; scroll-snap-align: center;
  border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface-raised); box-shadow: var(--shadow-print);
  transform: translateY(var(--print-y, 0px)) rotate(calc(var(--print-angle) + var(--print-turn, 0deg))); will-change: transform;
}
.scene-track figure:nth-child(1) { --print-angle: 4deg; }
.scene-track figure:nth-child(2) { --print-angle: -3deg; }
.scene-track figure:nth-child(3) { --print-angle: 2deg; }
.scene-track img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.scene-track figcaption { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--space-2) 0; font: 700 16px/1.4 var(--font-sans); color: var(--ink-muted); text-align: center; }
@media (min-width: 768px) {
  .scene-controls span { font-size: 23px; }
  .scene-track { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); width: 100%; margin-inline: 0; padding: var(--space-5) var(--space-4) var(--space-6); overflow: visible; }
  .scene-track figure { padding: var(--space-3) var(--space-3) 0; }
  .scene-track figcaption { min-height: 58px; font-size: 19px; }
}
@media (min-width: 1024px) {
  .intro { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; column-gap: var(--space-7); }
  .about-copy { grid-column: 1; grid-row: 1; }
  .about-photo { grid-column: 2; grid-row: 1; }
  .coral-intro-photo { width: min(100%, 310px); }
}

/* ---------- Purchase: one panel, a loose board of stamps, the price and the action ---------- */
.purchase { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); margin-block: var(--space-2) var(--space-5); padding: var(--space-6) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface-sunken); text-align: center; }
.package-features { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); width: 100%; max-width: 520px; padding: var(--space-2) 0; }
.package-features > .co-stamp { width: 82%; }
.package-features > :nth-child(1) { justify-self: start; transform: rotate(-3deg); }
.package-features > :nth-child(2) { justify-self: end; transform: rotate(4deg); }
.package-features > :nth-child(3) { justify-self: start; transform: rotate(-3deg); }
.package-value-footnote { max-width: var(--measure); font: 400 var(--text-small)/1.6 var(--font-sans); color: var(--ink-muted); }
.package-price { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.launch-price-label { margin: 0; font: 700 22px/1.4 var(--font-display); }
.package-price > strong { font: 850 56px/1.15 var(--font-display); letter-spacing: -0.02em; }
.package-price .old-price { font: 700 22px/1.4 var(--font-sans); white-space: nowrap; }
.package-price .buy-note { margin-top: var(--space-2); }
@media (min-width: 768px) {
  .purchase { padding: var(--space-7) var(--space-6); }
  .package-features { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--space-4) var(--space-6); max-width: 680px; padding: var(--space-3); }
  .package-features > .co-stamp { width: auto; justify-self: stretch; }
  .package-features > :nth-child(1) { transform: rotate(-4deg); }
  .package-features > :nth-child(2) { margin-top: var(--space-6); transform: rotate(5deg); }
  .package-features > :nth-child(3) { grid-column: 1 / -1; width: 57%; justify-self: center; transform: rotate(-3deg); }
  .launch-price-label { font-size: 26px; }
  .package-price > strong { font-size: 64px; }
  .package-price .old-price { font-size: 26px; }
}

/* ---------- FAQ ---------- */
.faq-section { display: flex; flex-direction: column; gap: var(--space-5); }
@media (min-width: 768px) { .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; column-gap: var(--space-6); } }

/* ---------- Footer ---------- */
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font: 400 14px/1.4 var(--font-sans); color: var(--ink-muted); }
.footer-handle { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; color: var(--ink); text-underline-offset: 4px; }
.footer-handle svg { flex: none; width: 20px; height: 20px; }

/* ---------- Purchase and terms dialogs ---------- */
.checkout-dialog .sheet-close { position: absolute; top: var(--space-3); inset-inline-end: var(--space-3); }
.checkout-dialog h2 { margin: var(--space-2) 0 var(--space-3); padding-inline-end: var(--space-7); font: 700 24px/1.3 var(--font-display); }
.checkout-dialog h3 { margin: var(--space-5) 0 var(--space-2); font: 700 18px/1.4 var(--font-display); }
.checkout-dialog > p { margin: 0 0 var(--space-4); font: 400 17px/1.6 var(--font-sans); }
.checkout-dialog a { color: var(--accent); font-weight: 700; text-underline-offset: 3px; }
.checkout-form { display: grid; gap: var(--space-3); margin-top: var(--space-5); text-align: start; }
.checkout-form .co-help { margin-top: calc(-1 * var(--space-1)); }
.purchase-consent { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; font: 400 15px/1.5 var(--font-sans); }
.purchase-consent input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.checkout-form .co-btn { margin-top: var(--space-2); }
.terms-back { margin-inline-start: calc(-1 * var(--space-3)); }
@media (min-width: 768px) { .checkout-dialog h2 { margin-top: 0; font-size: 26px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .skyline-draw { animation: none; stroke-dashoffset: 0; }
  .travel-plane { animation: none; offset-distance: 100%; }
  .product-reveal, .actual-guide-map.motion-enter .illustrated-map-stop { animation: none; }
  .product-orbit.orbit-revealed .orbit-phone { animation: none; opacity: 1; transform: translate(var(--orbit-distance), 0) rotate(8deg); }
  .product-orbit:nth-child(2).orbit-revealed .orbit-phone { transform: translate(calc(-1 * var(--orbit-distance)), 0) rotate(-8deg); }
  .map-in-view:not(.map-explored) .map-tap-ring, .map-in-view:not(.map-explored) .map-pointer-cursor { animation: none; }
  .illustrated-map-stop > circle, .illustrated-map-stop > rect { transition: none; }
  .scene-track figure { will-change: auto; transform: rotate(var(--print-angle)); }
}

/* Embedded checkout uses the same purchase sheet and keeps its summary visible. */
.payment-methods { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.payment-methods legend { margin-block-end: var(--space-1); font-weight: 700; }
.payment-methods label { position: relative; display: flex; align-items: center; justify-content: center; min-block-size: 48px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-md); cursor: pointer; font: 600 14px/1.2 var(--font-sans); text-align: center; }
.payment-methods label:has(:checked) { background: var(--rose); border-color: var(--ink); }
.payment-methods label:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.payment-methods input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.payment-methods label:hover { border-color: var(--accent); }
.checkout-form[hidden] { display: none; }
.embedded-payment { display: grid; gap: var(--space-3); }
.payment-frame { inline-size: 100%; block-size: min(65dvh,660px); min-block-size: 440px; border: 0; background: var(--surface-raised); }
.checkout-dialog.has-payment { inline-size: min(100%,680px); }

/* Keep the mobile checkout action visible while details scroll independently. */
.checkout-fields, .checkout-actions { display: grid; gap: var(--space-3); }
.checkout-coupon summary { cursor: pointer; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: flex; align-items: center; }
.checkout-coupon[open] { display: grid; gap: var(--space-3); }
.checkout-actions > .co-status:empty, .embedded-payment > .co-status:empty { display: none; }
@media (max-width: 767px) {
  #purchase-dialog[open] { display: flex; flex-direction: column; overflow: hidden; max-height: 94dvh; }
  #purchase-dialog > h2, #purchase-dialog > .purchase-summary { flex: none; }
  #purchase-dialog > h2 { margin-bottom: 0; }
  #purchase-dialog > .purchase-summary { margin-top: var(--space-2); margin-bottom: var(--space-2); }
  .checkout-form { min-height: 0; grid-template-rows: minmax(0,1fr) auto; margin-top: var(--space-2); overflow: hidden; }
  .checkout-fields { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--space-2); }
  .checkout-actions { background: var(--surface); border-top: 1px solid var(--line); padding-top: var(--space-2); gap: var(--space-1); }
  .checkout-actions .co-btn { margin-top: 0; }
  .payment-methods { gap: var(--space-2); }
  #purchase-dialog.has-payment { height: 94dvh; }
  #purchase-dialog.has-payment > h2 { display: none; }
  #purchase-dialog.has-payment > .purchase-summary { padding-inline-end: var(--space-7); }
  .embedded-payment { flex: 1; min-height: 0; grid-template-rows: auto minmax(0,1fr) auto; }
  .embedded-payment:has(> .co-status:empty) { grid-template-rows: minmax(0,1fr) auto; }
  .payment-frame { height: 100%; min-height: 0; }
}

.purchase-summary { margin: var(--space-3) 0 var(--space-4); padding: var(--space-2) var(--space-3); background: var(--beige); border-radius: var(--radius-md); display: grid; gap: var(--space-1); font: 400 16px/1.4 var(--font-sans); }
.checkout-summary-line { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
#checkout-original-price { color: var(--ink-muted); white-space: nowrap; }
.checkout-discount { color: var(--accent); font-size: 15px; }
.checkout-discount[hidden] { display: none; }
.checkout-discount > span:first-child { display: inline-flex; align-items: center; gap: var(--space-2); }
.checkout-coupon-chip { padding: 2px 8px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); font: 700 12px/1.4 var(--font-sans); letter-spacing: .03em; }
.checkout-summary-total { padding-top: var(--space-2); border-top: 1px solid var(--line); font-weight: 700; }
#checkout-total { font: 700 30px/1.1 var(--font-display); white-space: nowrap; }
.checkout-field { display: grid; gap: 6px; }
.checkout-fields { gap: var(--space-3); }
.checkout-coupon { font-size: 15px; }
.checkout-actions > button[type=submit] { font-size: 19px; }
@media (max-width: 767px) {
  .checkout-fields { gap: var(--space-2); }
  .payment-methods { gap: 6px; }
  #purchase-dialog.has-payment > .purchase-summary { padding: var(--space-2) var(--space-3); margin-top: var(--space-5); }
  #purchase-dialog.has-payment .purchase-summary > :not(.checkout-summary-total) { display: none; }
  #purchase-dialog.has-payment .checkout-summary-total { padding-top: 0; border: 0; }
}

.payment-mark { display: block; height: 24px; width: auto; max-width: 100%; object-fit: contain; }
.payment-mark-bit { height: 32px; }

.co-subtitle { font: 700 clamp(21px,5vw,28px)/1.4 var(--font-display); text-wrap: balance; }
.scene-loop, .scene-group { display: contents; }
.scene-group[aria-hidden="true"] { display: none; }
@media (max-width:767px) {
  .planning-caption-detail { display: block; }
  .scene-track.scene-marquee { display: block; direction: ltr; overflow: hidden; scroll-snap-type: none; padding-inline: 0; }
  .scene-marquee .scene-loop { display: flex; direction: ltr; width: max-content; gap: var(--space-4); animation: scene-drift 38s linear infinite; }
  .scene-marquee .scene-group { display: flex; gap: var(--space-4); }
  .scene-marquee figure { flex: none; width: min(58vw,240px); direction: rtl; }
  .scene-controls { align-items: center; gap: var(--space-3); }
  .scene-marquee:focus-within .scene-loop { animation-play-state: paused; }
  @keyframes scene-drift { to { transform: translateX(calc(-50% - var(--space-2))); } }
}
@media (prefers-reduced-motion:reduce) {
  .scene-marquee .scene-loop { animation: none; }
  .scene-marquee .scene-group[aria-hidden="true"] { display: none; }
  .scene-track.scene-marquee { overflow-x: auto; }
}
/* Leave room for focus rings and the salmon action's hover/pressed offset. */
.checkout-fields { padding-inline: 6px; margin-inline: -6px; }
.checkout-actions { padding-inline: 6px; margin-inline: -6px; padding-bottom: var(--space-2); }
@media(max-width:767px) {
  #purchase-dialog .checkout-actions > button[type=submit]:hover { transform: none; }
  #purchase-dialog .checkout-actions > button[type=submit]:active { transform: none; box-shadow: var(--shadow-offset); }
}
/* Final payment: the provider gets the full mobile viewport, not a nested card. */
#purchase-dialog.has-payment { display: flex; flex-direction: column; height: min(95dvh,900px); max-height: 95dvh; padding: 0; overflow: hidden; }
#purchase-dialog.has-payment::before, #purchase-dialog.has-payment > h2, #purchase-dialog.has-payment > .purchase-summary { display: none; }
#purchase-dialog.has-payment > .sheet-close { top: var(--space-2); inset-inline-end: var(--space-2); z-index: 2; }
.has-payment .embedded-payment { display: flex; flex-direction: column; flex: 1; gap: 0; min-height: 0; }
.payment-toolbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 60px; padding: var(--space-2); border-bottom: 1px solid var(--line); flex: none; }
.payment-toolbar > button { justify-self: start; font-size: 15px; }
.payment-toolbar > strong { grid-column: 2; font-size: 16px; }
.has-payment .embedded-payment > .co-status:not(:empty) { flex: none; padding: var(--space-2) var(--space-3); font-size: 14px; }
.has-payment .payment-frame { display: block; flex: 1; height: 0; min-height: 0; width: 100%; }
@media(max-width:767px) {
  #purchase-dialog.has-payment { position: fixed; inset: 0; width: 100%; max-width: none; height: var(--payment-viewport-height,100dvh); max-height: none; margin: 0; padding: 0 0 env(safe-area-inset-bottom); border: 0; border-radius: 0; }
}

.checkout-form { padding: 6px 8px 8px; margin-inline: -8px; }
#purchase-dialog .checkout-actions > .co-btn-primary:hover { transform: none; box-shadow: var(--shadow-offset); }
#purchase-dialog .checkout-actions > .co-btn-primary:active { transform: none; box-shadow: var(--shadow-offset-sm); }