/* ============================================================
   HIDE /rent — v5  ·  promo-campaign landing template
   Single time-limited offer. Reuses css/v4.css for tokens/type/buttons.
   Swap the campaign in js/v5.js (OFFERS config) — layout stays.
   ============================================================ */

/* hero */
.phero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; padding:92px 0 60px; }
.phero-bg{ position:absolute; inset:0; z-index:0; }
.phero-bg img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); animation:kenburns 24s ease-out infinite alternate; }
.phero-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top,var(--bg) 3%,rgba(11,10,9,.42) 46%,rgba(11,10,9,.66) 100%),
             linear-gradient(to right,rgba(11,10,9,.74),rgba(11,10,9,.22) 64%); }
.phero-in{ position:relative; z-index:2; width:100%; max-width:760px; }

/* offer ticket badge */
/* No backdrop-filter here, and the background carries the weight instead (.5 → .72).
   This badge and the four .cd-cell below it sit directly on top of #phero-img, which
   runs `kenburns 24s infinite alternate` — so a blur layer here has its input change
   every frame, forever, and Chrome/Safari answer that with visible flicker and banding.
   Over a dark photo the opaque version reads the same; the flicker doesn't. */
.ticket{ display:inline-flex; align-items:center; gap:12px; padding:9px 8px 9px 16px; border-radius:var(--pill);
  border:1px solid var(--line-2); background:rgba(20,18,14,.72); margin-bottom:24px; }
.ticket .tk-dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); position:relative; flex:none; }
.ticket .tk-dot::after{ content:""; position:absolute; inset:-5px; border-radius:50%; border:1px solid var(--accent); animation:pulse 2.2s var(--ease-io) infinite; }
.ticket .tk-txt{ font-size:12.5px; font-weight:600; letter-spacing:.06em; color:var(--ink); text-transform:uppercase; }
.ticket .tk-pill{ font-size:11px; font-weight:700; letter-spacing:.04em; color:#14110c; background:var(--accent); border-radius:var(--pill); padding:6px 12px; }

.phero h1{ font-family:var(--display); font-weight:400; font-size:clamp(42px,7vw,82px); line-height:0.98; letter-spacing:-0.022em; }
.phero h1 em{ font-style:italic; color:var(--accent); }
.phero .psub{ font-size:clamp(16px,1.8vw,20px); color:var(--ink-soft); max-width:46ch; margin-top:20px; line-height:1.5; }
.phero .psub b{ color:var(--ink); font-weight:600; }

/* value chip */
.valuechip{ display:inline-flex; align-items:baseline; gap:9px; margin-top:22px; padding:12px 18px; border-radius:14px; border:1px dashed var(--line-2); background:rgba(231,200,154,.06); }
.valuechip .vlabel{ font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-soft); font-weight:700; }
.valuechip .vnum{ font-family:var(--display); font-size:26px; color:var(--accent); letter-spacing:-0.01em; }

/* countdown */
.countdown{ margin-top:30px; }
.cd-label{ font-size:12px; text-transform:uppercase; letter-spacing:.16em; color:var(--ink-soft); font-weight:700; margin-bottom:12px; display:flex; align-items:center; gap:9px; }
.cd-label .lp{ width:7px; height:7px; border-radius:50%; background:var(--accent); position:relative; }
.cd-label .lp::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--accent); animation:pulse 2.2s var(--ease-io) infinite; }
.cd-grid{ display:inline-flex; gap:10px; }
/* same reason as .ticket: no blur over the ken-burns hero, opacity instead (.45 → .72) */
.cd-cell{ min-width:74px; padding:14px 12px; border:1px solid var(--line-2); border-radius:14px; background:rgba(20,18,14,.72); text-align:center; }
.cd-cell .v{ font-family:var(--display); font-size:clamp(30px,5vw,42px); line-height:1; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.cd-cell .l{ font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-soft); margin-top:7px; font-weight:600; }
.cd-sep{ display:none; }
.phero-cta{ display:flex; gap:13px; flex-wrap:wrap; margin-top:32px; }
.spots{ margin-top:20px; font-size:13.5px; color:var(--ink-soft); display:inline-flex; align-items:center; gap:9px; }
.spots b{ color:var(--accent); font-weight:700; }
.spots .sp{ width:6px; height:6px; border-radius:50%; background:var(--accent); }

/* sticky offer bar (after scroll) */
.offerbar{ position:fixed; left:0; right:0; bottom:0; z-index:60; transform:translateY(120%); transition:transform var(--d) var(--ease);
  background:color-mix(in srgb,var(--surface) 94%,transparent); backdrop-filter:blur(16px); border-top:1px solid var(--line-2); }
.offerbar.show{ transform:translateY(0); }
.offerbar-in{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 0 calc(11px + env(safe-area-inset-bottom)); }
.offerbar .ob-l{ min-width:0; }
.offerbar .ob-t{ font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.offerbar .ob-cd{ font-size:12px; color:var(--ink-soft); font-variant-numeric:tabular-nums; margin-top:1px; }
.offerbar .ob-cd b{ color:var(--accent); }

/* section scaffold (reuse v4 .sec) */
.psec-head{ max-width:60ch; margin-bottom:42px; }
.psec-head .eyebrow{ margin-bottom:16px; }
.psec-head h2{ font-family:var(--display); font-size:clamp(30px,4.4vw,50px); line-height:1.02; letter-spacing:-0.02em; }
.psec-head p{ font-size:16px; color:var(--ink-soft); margin-top:14px; max-width:52ch; }

/* steps */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.step{ border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px; background:linear-gradient(160deg,var(--surface),var(--bg)); position:relative; overflow:hidden; }
.step .sn{ font-family:var(--display); font-size:46px; line-height:1; color:var(--accent); letter-spacing:-0.02em; }
.step h3{ font-size:18px; font-weight:700; margin:14px 0 8px; }
.step p{ font-size:14px; color:var(--ink-soft); line-height:1.55; }

/* value stack */
.vstack{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.vcard{ border:1px solid var(--line-2); border-radius:var(--r-lg); padding:30px 32px; background:linear-gradient(150deg,var(--surface),var(--bg)); }
.vcard .vc-h{ font-family:var(--display); font-size:clamp(26px,3vw,34px); line-height:1.04; letter-spacing:-0.015em; margin-bottom:18px; }
.vlist{ list-style:none; display:grid; gap:0; }
.vlist li{ display:flex; align-items:center; gap:13px; padding:14px 0; border-top:1px solid var(--line); font-size:15px; }
.vlist li:first-child{ border-top:0; }
.vlist li.lead span{ color:var(--accent); font-weight:700; }
.vlist li .ck{ width:20px; height:20px; flex:none; color:var(--accent); }
.vlist li .amt{ margin-left:auto; font-variant-numeric:tabular-nums; color:var(--ink-soft); font-size:13.5px; font-weight:600; }
.vtotal{ display:flex; align-items:baseline; justify-content:space-between; margin-top:8px; padding-top:18px; border-top:1px solid var(--line-2); }
.vtotal .l{ font-weight:700; }
.vtotal .n{ font-family:var(--display); font-size:32px; color:var(--accent); letter-spacing:-0.02em; }
.vfig{ border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/5; background:var(--surface-2); }
.vfig img{ width:100%; height:100%; object-fit:cover; }

/* fine print */
.fineprint{ font-size:12.5px; color:var(--ink-faint); max-width:70ch; line-height:1.6; margin-top:8px; }

/* final cta with countdown */
.pfinal{ position:relative; overflow:hidden; border-radius:var(--r-lg); padding:74px 36px; text-align:center; }
.pfinal-bg{ position:absolute; inset:0; z-index:0; }
.pfinal-bg img{ width:100%; height:100%; object-fit:cover; }
.pfinal-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(rgba(11,10,9,.62),rgba(11,10,9,.8)); }
.pfinal-in{ position:relative; z-index:1; }
.pfinal .eyebrow{ justify-content:center; color:var(--accent); margin-bottom:16px; }
.pfinal h2{ font-family:var(--display); font-size:clamp(34px,5.2vw,60px); line-height:1.0; letter-spacing:-0.02em; margin-bottom:16px; }
.pfinal p{ font-size:17px; color:var(--ink-soft); max-width:48ch; margin:0 auto 26px; }
.pfinal .countdown{ display:inline-block; margin:6px auto 28px; }
.pfinal .cd-label{ justify-content:center; }

@media(max-width:820px){
  .vstack{ grid-template-columns:1fr; gap:28px; }
  .vfig{ order:-1; aspect-ratio:16/11; }
  .steps{ grid-template-columns:1fr; }
}
@media(max-width:560px){
  .cd-cell{ min-width:0; flex:1; padding:13px 6px; }
  .cd-grid{ display:flex; width:100%; }
  .phero-cta .btn{ flex:1; }
}