/* Theme Park Alert — "phone-free park day"
   Same land, quieter street. This page argues for less, so it is built with
   more air and fewer objects than the home page. */

body{ line-height:1.7; }

.hero{ padding-block:clamp(48px,7vw,86px) clamp(42px,6vw,72px); background:#FFF; }
.hero h1{ font-size:clamp(2.4rem, 6.4vw, 4.4rem); margin-top:16px; }
.hero h1 em{ font-style:normal; color:var(--pink-deep); }
.hero-sub{ margin-top:22px; font-size:clamp(1.06rem,1.6vw,1.24rem); color:var(--ink-2); max-width:56ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }

/* the two day-strips: the page's central image */
.strips{ margin:clamp(38px,5vw,60px) 0 0; display:flex; flex-direction:column; gap:22px; }
.strip-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:9px; flex-wrap:wrap; }
.strip-label{ font-family:var(--font-display); font-weight:600; font-size:1.02rem; color:var(--ink); }
.strip-count{ margin-left:auto; font-size:var(--fs-small); color:var(--ink-dim); }
.strip{
  position:relative; height:66px; border-radius:12px;
  background:var(--sky-wash); border:2px solid var(--sky-line); overflow:hidden;
}
.strip.quiet{ background:#F3FCFA; border-color:#B6E8DF; }
.tick{
  position:absolute; top:10px; bottom:10px; width:2px; border-radius:1px;
  background:var(--coral-deep); opacity:.72;
}
.strip.quiet .tick{ background:var(--teal-deep); width:4px; border-radius:2px; opacity:1; }
:root.js-motion .tick.enter{ animation:tickIn .3s ease both; }
@keyframes tickIn{ from{ opacity:0; transform:scaleY(.3); } }
.strip-hours{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--ink-dim); margin-top:6px; }
.strip-caption{ font-size:var(--fs-small); color:var(--ink-dim); margin-top:8px; }

/* calculator */
.calc{
  border:2px solid var(--sky-line); border-radius:var(--radius); background:#FFF;
  box-shadow:0 22px 48px -32px rgba(23,54,79,.5); overflow:hidden;
}
.calc-head{ background:var(--sky-deep); color:#FFF; padding:15px 20px; }
.calc-head h3{ font-family:var(--font-display); font-weight:600; font-size:1.14rem; color:#FFF; }
.calc-head p{ margin-top:4px; font-size:var(--fs-small); color:rgba(255,255,255,.92); }
.calc-body{ padding:22px 20px; display:flex; flex-direction:column; gap:22px; }
.slider-row label{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:var(--fs-micro);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:9px;
}
.slider-row .val{ margin-left:auto; font-size:.95rem; letter-spacing:0; text-transform:none; color:var(--pink-deep); font-weight:500; }
input[type="range"]{
  -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:99px;
  background:var(--sky-line); margin:0; cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:26px; height:26px; border-radius:50%;
  background:var(--pink-deep); border:3px solid #FFF; box-shadow:0 2px 8px rgba(23,54,79,.35);
}
input[type="range"]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  background:var(--pink-deep); border:3px solid #FFF; box-shadow:0 2px 8px rgba(23,54,79,.35);
}
.calc-out{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:2px;
  background:var(--sky-line); border:2px solid var(--sky-line); border-radius:12px; overflow:hidden;
}
.calc-cell{ background:#FFF; padding:18px 16px; }
.calc-num{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.7rem,3.6vw,2.3rem); color:var(--pink-deep); line-height:1; font-variant-numeric:tabular-nums;
}
.calc-num small{ font-size:.4em; color:var(--ink-dim); margin-left:3px; font-weight:500; }
.calc-lab{ margin-top:7px; font-size:var(--fs-small); color:var(--ink-dim); line-height:1.45; }
.calc-kicker{ padding:15px 17px; border-radius:12px; background:var(--pink-wash); border:2px solid var(--pink); font-size:.97rem; color:var(--ink); }
.calc-kicker b{ color:var(--pink-deep); }
.calc-note{ font-size:var(--fs-micro); color:var(--ink-dim); }

/* quotes */
.quote-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:18px; }
.quote{
  margin:0; border:2px solid var(--sky-line); border-radius:var(--radius); background:#FFF;
  padding:24px 22px; box-shadow:0 16px 36px -30px rgba(23,54,79,.5);
}
.quote .q{ font-family:var(--font-display); font-weight:500; font-size:1.16rem; color:var(--ink); line-height:1.35; }
.quote .who{ margin-top:14px; font-size:var(--fs-small); color:var(--ink-dim); }
.quote .who b{ color:var(--ink); display:block; font-weight:800; }

/* push vs pull */
.versus{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:720px){ .versus{ grid-template-columns:1fr; } }
.vs-card{ border-radius:var(--radius); padding:24px 22px; border:2px solid; }
.vs-bad{ border-color:var(--coral); background:#FFF6F5; }
.vs-good{ border-color:var(--teal); background:#F1FBF9; }
.vs-card h3{ font-family:var(--font-display); font-weight:600; font-size:1.2rem; color:var(--ink); }
.vs-tag{
  font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.14em;
  text-transform:uppercase; display:inline-block; padding:4px 10px; border-radius:6px; margin-bottom:11px;
}
.vs-bad .vs-tag{ background:rgba(240,87,78,.15); color:var(--coral-deep); }
.vs-good .vs-tag{ background:rgba(63,196,176,.2); color:var(--teal-deep); }
.vs-card ul{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.vs-card li{ display:flex; gap:10px; font-size:.94rem; color:var(--ink-2); }
.vs-card li span:first-child{ flex:0 0 auto; font-weight:800; }
.vs-bad li span:first-child{ color:var(--coral-deep); }
.vs-good li span:first-child{ color:var(--teal-deep); }

/* tips */
.tips{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; border-top:2px solid var(--sky-line); }
.tip{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px; align-items:start; padding-block:26px; border-bottom:2px solid var(--sky-line); }
.tip-num{
  width:40px; height:40px; border-radius:50%; background:var(--sky-deep); color:#FFF;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:1.18rem;
}
.tip.ours .tip-num{ background:var(--pink-deep); }
.tip h3{ font-size:var(--fs-h3); color:var(--ink); font-weight:800; font-family:var(--font-body); }
.tip p{ margin-top:8px; color:var(--ink-dim); font-size:.97rem; }

/* the honest section */
.honest{ border:2px dashed var(--pink); border-radius:var(--radius); background:var(--pink-wash); padding:clamp(24px,4vw,36px); }
.honest h2{ font-size:clamp(1.4rem,3vw,2rem); margin-top:10px; }
.honest p{ color:var(--ink-2); margin-top:16px; }