/* Theme Park Alert — home page */

/* ============================================================
   HERO — midday sky over rolling hills
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, #8FD9F2 0%, #B4E7F7 34%, #D9F3FB 62%, #F2FBFE 84%, #FFF 100%);
  padding-block:clamp(44px,6.5vw,76px) clamp(120px,15vw,210px);
}
.hero-sky{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.skyline{ position:absolute; left:50%; bottom:-2px; width:min(1600px,190%); max-width:none; transform:translateX(-50%); display:block; }

.hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(30px,4.5vw,64px); align-items:center;
}
@media (max-width:940px){ .hero-grid{ grid-template-columns:1fr; gap:38px; } }

.hero h1{ font-size:var(--fs-display); margin-top:14px; }
.hero h1 .hot{ color:var(--pink-deep); display:inline-block; }
.hero-sub{ margin-top:22px; max-width:52ch; font-size:clamp(1.02rem,1.5vw,1.2rem); color:var(--ink-2); }
.hero-sub strong{ color:var(--pink-deep); font-weight:800; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; align-items:center; }
.hero-note{ margin-top:13px; font-size:var(--fs-small); color:var(--ink-dim); }

.ticker{
  display:inline-flex; align-items:center; gap:10px; margin-top:24px; max-width:100%;
  padding:7px 15px 7px 11px; border:2px solid #FFF;
  border-radius:999px; background:rgba(255,255,255,.8);
  font-size:var(--fs-small); color:var(--ink-2);
  box-shadow:0 6px 18px -10px rgba(23,54,79,.4);
}

/* ============================================================
   WAIT BOARD — a white marquee in a blue frame
   ============================================================ */
.board{
  position:relative; border-radius:var(--radius);
  background:#FFF; border:3px solid var(--sky-mid);
  box-shadow:0 30px 60px -26px rgba(23,54,79,.45);
  overflow:hidden;
}
.board-head{ display:flex; align-items:baseline; gap:10px; padding:13px 18px; background:var(--sky-deep); color:#FFF; }
.board-title{ font-family:var(--font-display); font-weight:600; font-size:1rem; letter-spacing:.02em; color:#FFF; }
.board-stamp{ margin-left:auto; font-size:var(--fs-micro); color:rgba(255,255,255,.88); letter-spacing:.1em; text-transform:uppercase; }
.board-row{
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:12px;
  padding:11px 18px; border-bottom:1px solid var(--rule);
}
.board-row:last-child{ border-bottom:none; }
.board-row:nth-child(even){ background:var(--sky-wash); }
.board-empty{ padding:28px 18px; color:var(--ink-dim); font-size:var(--fs-small); text-align:center; }
.row-name{ min-width:0; font-size:.9rem; font-weight:600; color:var(--ink); overflow-wrap:anywhere; }
.row-park{ display:block; font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.14em; color:var(--ink-dim); text-transform:uppercase; margin-top:1px; }
.row-note{ display:block; font-size:var(--fs-micro); color:var(--pink-deep); margin-top:3px; font-weight:600; }
@media (max-width:420px){
  .board-row{ grid-template-columns:1fr auto; }
  .board-row .pill{ grid-column:1; justify-self:start; }
  .board-row .flapset{ grid-row:1 / span 2; grid-column:2; }
}

.pill{
  font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.1em;
  text-transform:uppercase; padding:4px 9px; border-radius:6px; border:1.5px solid; white-space:nowrap; font-weight:500;
}
.pill-open{   color:var(--teal-deep);  border-color:var(--teal);  background:rgba(63,196,176,.14); }
.pill-down{   color:var(--coral-deep); border-color:var(--coral); background:rgba(240,87,78,.12); }
.pill-refurb{ color:var(--grape-deep); border-color:var(--grape); background:rgba(139,111,212,.13); }
.pill-closed{ color:var(--ink-dim);    border-color:var(--ink-far); background:var(--sky-wash); }

/* split-flap tiles stay dark: a real board's flaps are */
.flapset{ display:flex; gap:3px; justify-content:flex-end; min-width:78px; }
.flap{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:33px; border-radius:5px;
  background:linear-gradient(180deg,#2C5273 0%,#1D4060 49%,#173751 50%,#12293D 100%);
  border:1px solid #0E2336;
  font-family:var(--font-mono); font-size:1.04rem; font-variant-numeric:tabular-nums;
  color:#FFF; box-shadow:inset 0 0 8px rgba(0,0,0,.4);
}
.flap::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(0,0,0,.45); }
.flap.flip{ animation:flapTurn .34s var(--ease-ride); }
@keyframes flapTurn{
  0%{ transform:rotateX(0deg); filter:brightness(1); }
  49%{ transform:rotateX(-88deg); filter:brightness(.5); }
  50%{ transform:rotateX(88deg); filter:brightness(.5); }
  100%{ transform:rotateX(0deg); filter:brightness(1); }
}
.flap-unit{ align-self:center; font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--ink-dim); margin-left:4px; letter-spacing:.08em; }
.board-foot{
  display:flex; align-items:center; gap:8px; padding:11px 18px;
  background:var(--sand); border-top:1px solid var(--sand-2);
  font-size:var(--fs-micro); color:var(--ink-dim); letter-spacing:.04em;
}
.board[data-stale="1"] .board-foot{ color:var(--coral-deep); }

/* ============================================================
   01–05 SEQUENCE
   ============================================================ */
.steps{ list-style:none; margin:0; padding:0; display:grid; border-top:2px solid var(--sky-line); }
.step{
  display:grid; grid-template-columns:auto minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(16px,3vw,40px); align-items:start;
  padding-block:clamp(24px,3.4vw,38px); border-bottom:2px solid var(--sky-line);
  transition:background .3s ease;
}
.step:hover{ background:var(--sky-wash); }
@media (max-width:820px){
  .step{ grid-template-columns:auto minmax(0,1fr); }
  .step-demo{ grid-column:1 / -1; }
}
.step-num{
  font-family:var(--font-display); font-weight:600; font-size:1.15rem; color:#FFF;
  width:38px; height:38px; border-radius:50%; background:var(--sky-deep);
  display:flex; align-items:center; justify-content:center;
}
.step h3{ font-size:var(--fs-h3); color:var(--ink); font-weight:800; font-family:var(--font-body); }
.step p{ color:var(--ink-dim); margin-top:9px; font-size:.97rem; }
.step-demo{
  font-family:var(--font-mono); font-size:var(--fs-small);
  color:var(--ink-2); background:#FFF;
  border:1px solid var(--rule); border-left:4px solid var(--pink);
  border-radius:0 12px 12px 0; padding:14px 16px; line-height:1.75;
  box-shadow:0 10px 24px -20px rgba(23,54,79,.6);
  overflow-wrap:anywhere;
}
.step-demo b{ color:var(--ink); font-weight:500; }
.step-demo .t{ color:var(--ink-dim); }
.step-demo .g{ color:var(--teal-deep); }
.step-demo .r{ color:var(--coral-deep); }
.step-demo .y{ color:var(--pink-deep); }

/* ============================================================
   PHONE / SMS THREAD
   ============================================================ */
.phone-wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,320px); gap:clamp(30px,5vw,70px); align-items:center; }
@media (max-width:880px){ .phone-wrap{ grid-template-columns:1fr; } .phone{ justify-self:center; } }
.alert-kinds{ margin-top:28px; }
.alert-kinds p{ font-size:.95rem; color:var(--ink-2); margin-bottom:14px; }
.alert-kinds b{ color:var(--ink); }
.alert-kinds b.accent{ color:var(--pink-deep); }

.phone{
  width:100%; max-width:320px; border-radius:36px; padding:12px;
  background:var(--sky-mid); border:3px solid var(--sky-deep);
  box-shadow:0 34px 64px -28px rgba(23,54,79,.55);
}
.phone-screen{ background:#FFF; border-radius:26px; padding:16px 13px 20px; min-height:404px; display:flex; flex-direction:column; gap:11px; }
.phone-bar{ display:flex; align-items:center; gap:7px; padding-bottom:11px; border-bottom:1px solid var(--rule); font-size:var(--fs-micro); color:var(--ink-dim); letter-spacing:.1em; text-transform:uppercase; font-weight:600; }
.phone-day{ margin-left:auto; }
.phone-thread{ display:flex; flex-direction:column; gap:11px; }
.bubble{
  max-width:88%; padding:11px 14px; border-radius:18px 18px 18px 5px;
  background:var(--sky-wash); border:1.5px solid var(--sky-line);
  font-size:.86rem; line-height:1.55; color:var(--ink-2); align-self:flex-start;
}
.bubble b{ color:var(--ink); }
.bubble.good{ border-color:var(--teal); background:rgba(63,196,176,.14); }
.bubble.bad{  border-color:var(--coral); background:rgba(240,87,78,.12); }
.bubble.ll{   border-color:var(--pink); background:var(--pink-wash); }
.bubble-time{ display:block; font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--ink-dim); margin-top:6px; letter-spacing:.06em; }
:root.js-motion .bubble{ transition:opacity .5s ease, transform .5s var(--ease-ride); }
:root.js-motion .phone-thread.armed .bubble{ opacity:0; transform:translateY(14px) scale(.97); }
:root.js-motion .phone-thread.armed .bubble.in{ opacity:1; transform:none; }

.tokens{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.token{
  font-family:var(--font-mono); font-size:var(--fs-micro); padding:4px 9px;
  border-radius:6px; background:var(--pink-wash); border:1.5px solid var(--pink); color:var(--pink-deep);
}

/* ============================================================
   CHART
   ============================================================ */
.chart-card{
  margin:34px 0 0; border:2px solid var(--sky-line); border-radius:var(--radius);
  background:#FFF; padding:22px 20px 16px;
  box-shadow:0 20px 44px -30px rgba(23,54,79,.5);
}
.chart-card h3{ font-size:.98rem; color:var(--ink); font-weight:800; font-family:var(--font-body); }
.chart-card .sub{ font-size:var(--fs-small); color:var(--ink-dim); margin-top:4px; }
.chart-scroll{ overflow-x:auto; margin-top:18px; }
.chart-scroll svg{ width:100%; min-width:520px; max-width:none; display:block; }

/* ============================================================
   ACCURACY STATS
   ============================================================ */
.stat-row{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(168px,1fr)); gap:2px;
  background:var(--sky-line); border:2px solid var(--sky-line); border-radius:var(--radius); overflow:hidden;
}
.stat{ background:#FFF; padding:24px 20px; }
.stat-val{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2rem,4.2vw,2.9rem); color:var(--pink-deep);
  line-height:1; font-variant-numeric:tabular-nums;
}
.stat-val small{ font-size:.42em; color:var(--ink-dim); margin-left:3px; font-weight:500; }
.stat-lab{ margin-top:9px; font-size:var(--fs-small); color:var(--ink-dim); }

/* ============================================================
   PRICING — ticket stubs
   ============================================================ */
.tiers{ display:grid; grid-template-columns:repeat(auto-fit, minmax(252px,1fr)); gap:20px; align-items:start; }
.tier{
  position:relative; border-radius:var(--radius); border:2px solid var(--sky-line);
  background:#FFF; padding:26px 24px 28px;
  box-shadow:0 16px 36px -28px rgba(23,54,79,.5);
  transition:transform .35s var(--ease-ride), border-color .25s ease, box-shadow .35s ease;
}
.tier:hover{ transform:translateY(-7px); border-color:var(--sky); box-shadow:0 32px 56px -30px rgba(23,54,79,.5); }
.tier.feature{ border-color:var(--pink); box-shadow:0 0 0 3px var(--pink-wash), 0 32px 60px -30px rgba(201,46,123,.45); }
.tier::before{
  content:""; position:absolute; left:0; right:0; top:78px; height:2px;
  background:repeating-linear-gradient(90deg, var(--sky-line) 0 6px, transparent 6px 12px);
}
.tier-flag{
  position:absolute; top:-13px; right:20px;
  font-family:var(--font-display); font-weight:600; font-size:var(--fs-micro);
  letter-spacing:.1em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px; background:var(--pink-deep); color:#FFF;
}
.tier-name{ font-family:var(--font-display); font-weight:600; font-size:1.42rem; color:var(--ink); }
.tier-for{ font-size:var(--fs-micro); color:var(--sky-deep); letter-spacing:.1em; text-transform:uppercase; margin-top:5px; font-weight:600; }
.tier-price{ margin-top:26px; font-family:var(--font-display); font-weight:700; font-size:2.6rem; color:var(--pink-deep); line-height:1; }
.tier-price small{ font-family:var(--font-body); font-size:.29em; color:var(--ink-dim); font-weight:600; margin-left:5px; letter-spacing:.04em; }
.tier ul{ list-style:none; margin:22px 0 26px; padding:0; display:flex; flex-direction:column; gap:11px; }
.tier li{ display:flex; gap:10px; font-size:.91rem; color:var(--ink-2); }
.tier li .tick{ color:var(--teal-deep); flex:0 0 auto; font-weight:800; }
.tier li.off{ color:var(--ink-dim); }
.tier li.off .tick{ color:var(--ink-far); }
.tier .btn{ width:100%; }

.breaks{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.brk{
  font-family:var(--font-mono); font-size:var(--fs-small);
  padding:8px 15px; border-radius:999px;
  border:2px dashed var(--sky); color:var(--sky-deep); background:#FFF;
}
.billing-note{
  margin-top:22px; padding:18px 20px; border-radius:var(--radius);
  border:2px dashed var(--sky-line); background:#FFF;
  font-size:var(--fs-small); color:var(--ink-dim); max-width:74ch;
}
.billing-note b{ color:var(--ink); }

/* A plan that isn't ready: present, explained, not buyable. */
.tier.soon{ background:var(--sand); border-style:dashed; }
.tier.soon .tier-price, .tier.soon .tier-name{ color:var(--ink-dim); }
.tier.soon li{ color:var(--ink-dim); }
/* A plan that cannot be bought yet should not show live green ticks:
   the list is what it will include, not what you are getting today. */
.tier.soon li .tick{ color:var(--ink-far); }
.tier-flag-soon{ background:var(--ink); color:#FFF; }
.tier-soon{ font-size:var(--fs-small); color:var(--ink-dim); margin-top:4px; }

/* The board, when it is the point of the section rather than hero furniture */
.board-section{ max-width:760px; }
.board-more{ margin-top:16px; }
.board-cta{
  margin-top:26px; padding:20px 22px; border-radius:var(--radius);
  background:var(--sand); border:2px dashed var(--pink);
  display:flex; gap:18px; align-items:center; flex-wrap:wrap;
}
.board-cta p{ flex:1 1 320px; font-size:.97rem; color:var(--ink-2); }
.board-cta b{ color:var(--ink); }

/* The hero's phone sits where the board used to */
.hero-phone{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.hero-phone-cap{
  font-size:var(--fs-small); color:var(--ink-2); text-align:center; max-width:30ch;
  background:rgba(255,255,255,.75); border-radius:10px; padding:7px 12px;
}