/* The public landing page at / (the app is at /accommodation). Builds on styles.css + vuelto.css. */

.landing .brand{margin:0}
.landing .header-inner{align-items:center}
.landing-open{padding:9px 16px; font-size:13.5px; text-decoration:none}

/* Hero: taller than the app's band, the tickets dealt in straight away (no splash here) */
.landing-hero{padding:48px 24px 28px}
.landing-hero .hero-inner{min-height:min(52vh, 460px)}
.landing-hero .tagline{font-size:clamp(40px, 6.4vw, 84px)}
.landing .fan-ticket{animation-delay:calc(.5s + var(--i) * 90ms)}
.landing-lede{margin:6px 0 10px; max-width:34ch; font-size:clamp(16px, 1.6vw, 19px); line-height:1.45; color:rgb(251 246 234 / .86)}
.landing-hero .hero-fan{height:240px}
.landing-sample-note{max-width:1200px; margin:0 auto; text-align:right; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:rgb(251 246 234 / .6)}

/* Sections */
.landing-section{max-width:1100px; margin:0 auto; padding:72px 24px 24px}
.landing-kicker{margin:0 0 8px; font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--v-ink-soft)}
.landing-title{margin:0 0 28px; font-family:var(--display); font-weight:600; font-size:clamp(28px, 3.6vw, 44px); letter-spacing:-.02em; line-height:1.05; color:var(--v-ink)}

/* How it works: three tickets in a row */
.landing-steps{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin:0; padding:0; list-style:none}
.landing-step{position:relative; padding:22px 22px 24px; background:var(--v-ticket); border:1px solid var(--v-line); border-radius:var(--radius); box-shadow:var(--v-shadow)}
.landing-step::after{content:""; position:absolute; left:18px; right:18px; top:54px; border-top:1.5px dashed var(--v-line)}
.landing-step-no{font-family:var(--mono); font-weight:600; font-size:12px; letter-spacing:.1em; color:var(--v-violet)}
.landing-step h3{margin:6px 0 22px; font-family:var(--display); font-weight:600; font-size:22px; color:var(--v-ink)}
.landing-step p{margin:0; font-size:15px; line-height:1.55; color:var(--v-ink-soft)}

/* Honest by design */
.landing-points{display:grid; grid-template-columns:repeat(2, 1fr); gap:14px 32px; margin:0; padding:0; list-style:none}
.landing-points li{padding:14px 0 14px 18px; border-left:2px solid var(--v-line); font-size:15.5px; line-height:1.55; color:var(--v-ink-soft)}
.landing-points strong{display:block; margin-bottom:2px; font-family:var(--display); font-weight:600; font-size:17px; color:var(--v-ink)}

/* Closing call to action */
.landing-cta{max-width:720px; margin:64px auto 0; padding:44px 24px; text-align:center;
  background:var(--v-ticket); border:1px solid var(--v-line); border-radius:var(--radius); box-shadow:var(--v-shadow)}
.landing-cta .landing-title{margin-bottom:20px}
.landing-cta .run-button{display:inline-flex; text-decoration:none}
.landing-note{margin:14px 0 0; font-size:13px; color:var(--v-ink-soft)}

.landing-footer p{margin:0}
.landing-disclosure{margin-top:10px !important; max-width:60ch; margin-left:auto !important; margin-right:auto !important;
  font-family:var(--body); font-style:normal; font-size:12px; color:var(--v-ink-soft)}

@media (max-width:720px){
  .landing-hero{padding:28px 16px 18px}
  .landing-steps, .landing-points{grid-template-columns:1fr}
  .landing-section{padding:48px 16px 16px}
  .landing-sample-note{text-align:left}
}
.landing .brand{color:#FBF6EA}
.landing-hero .tagline{font-size:clamp(38px, 5.4vw, 72px)}
.landing-hero .tagline{max-width:7.2em}  /* two deliberate lines: "Go further." / "Spend less." */

/* The same-price promise: straight under the hero, can't be missed */
.landing-promise{background:var(--v-ticket); border-bottom:1px solid var(--v-line)}
.landing-promise-inner{max-width:1100px; margin:0 auto; padding:26px 24px; display:flex; align-items:center; gap:24px}
.landing-promise-title{margin:0 0 6px; font-family:var(--display); font-weight:600; font-size:clamp(22px, 2.6vw, 30px); letter-spacing:-.01em; color:var(--v-ink)}
.landing-promise-text{margin:0; max-width:70ch; font-size:16px; line-height:1.55; color:var(--v-ink-soft)}
.landing-promise-text strong, .landing-step strong, .landing-lede strong{color:inherit; font-weight:700}
.landing-lede strong{color:#FBF6EA}
/* Opinionated */
.landing-opinion > p{max-width:62ch; margin:0 0 20px; font-size:17px; line-height:1.6; color:var(--v-ink-soft)}
@media (max-width:720px){
  .landing-promise-inner{flex-direction:column; align-items:flex-start; gap:14px}
  .receipt{width:100%; max-width:300px}
}
.landing-contact{margin-top:12px !important; font-family:var(--body); font-style:normal; font-size:14px; color:var(--v-ink-soft)}
.landing-contact a{color:var(--v-violet); font-weight:600; text-decoration:none; word-break:break-all}
.landing-contact a:hover{text-decoration:underline}

/* Same price: a paper receipt, two identical mono prices, a perforation, and the violet stamp */
.receipt{position:relative; flex:none; width:280px; margin:0; padding:14px 16px 12px;
  background:var(--v-paper); border:1px solid var(--v-line); border-radius:10px; box-shadow:var(--v-shadow);
  font-family:var(--mono); font-size:12px; color:var(--v-ink-soft)}
.receipt::before, .receipt::after{content:""; position:absolute; top:calc(66% - 7px); width:14px; height:14px; border-radius:50%;
  background:var(--v-ticket); border:1px solid var(--v-line)}
.receipt::before{left:-8px} .receipt::after{right:-8px}
.receipt-row{display:flex; justify-content:space-between; align-items:baseline; padding:4px 0; letter-spacing:.04em; text-transform:uppercase; font-size:10.5px}
.receipt-price{font-size:17px; font-weight:600; letter-spacing:-.01em; text-transform:none; color:var(--v-ink)}
.receipt-perf{margin:8px -4px; border-top:1.5px dashed var(--v-line)}
.receipt-total{color:var(--v-ink)}
.receipt-total .receipt-price{color:var(--v-violet)}
.receipt-stamp{position:absolute; top:-30px; right:-44px; display:grid; place-items:center; width:72px; height:72px; border-radius:50%;
  border:2px solid var(--v-violet); background:color-mix(in srgb, var(--v-ticket) 88%, transparent); color:var(--v-violet);
  transform:rotate(-12deg); font-weight:600; font-size:11px; letter-spacing:.12em; text-transform:uppercase; text-align:center; line-height:1.25;
  box-shadow:inset 0 0 0 4px color-mix(in srgb, var(--v-violet) 14%, transparent)}
.landing-promise-inner{gap:40px; padding-top:34px; padding-bottom:30px}

/* Vuelto, by name, with a real slip */
.landing-vuelto-body{display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); gap:32px; align-items:center}
.landing-vuelto-body > p{margin:0; font-size:17px; line-height:1.6; color:var(--v-ink-soft)}
.landing-vuelto-example{display:flex; flex-direction:column; gap:4px; max-width:260px; padding:16px 18px 14px; transform:rotate(-2deg);
  background:var(--v-ticket); border:1px solid var(--v-line); border-radius:12px; box-shadow:var(--v-shadow-lift)}
.landing-vuelto-example .fan-money{margin-top:12px; padding-top:10px; border-top:1.5px dashed var(--v-line)}
.landing-soon{display:inline-block; margin-top:6px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--v-violet)}
@media (max-width:720px){ .landing-vuelto-body{grid-template-columns:1fr} }

.receipt{margin-right:28px}   /* room for the stamp off the corner */
.landing-points .landing-hl{display:inline; font-family:inherit; font-size:inherit; color:var(--v-ink); font-weight:700}

/* Coming soon: watched journeys and tours */
.landing-soon-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:20px}
.landing-soon-card{position:relative; padding:24px 24px 26px; background:var(--v-ticket); border:1.5px dashed var(--v-line); border-radius:var(--radius)}
.landing-soon-card h3{margin:10px 0 10px; font-family:var(--display); font-weight:600; font-size:22px; color:var(--v-ink)}
.landing-soon-card p{margin:0; font-size:15.5px; line-height:1.6; color:var(--v-ink-soft)}
.landing-soon-card strong{color:var(--v-ink)}
.landing-soon-tag{display:inline-block; padding:3px 9px; border-radius:999px; border:1px solid var(--v-violet); color:var(--v-violet);
  font-family:var(--mono); font-weight:600; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase}
@media (max-width:720px){ .landing-soon-grid{grid-template-columns:1fr} }