/* THE HOME PAGE (home-only sections; the shared look is in site.css)
   -------------
   One hero, one product tour, three plans, one close. Scoped to `.home` (the
   body class templates/landing.html sets through marketing_base's `body_class`
   block); the colours, type, header, buttons and closing panel it uses are
   defined in site.css, which every marketing page shares.

   THE TOUR needs no script to be readable. The tab strip is hidden, and the
   panels all shown, until the script adds `.js-ready` to <body>, so without
   JavaScript a visitor still sees all four screens, stacked. */

/* The colour and type variables, header, buttons and closing panel are shared with every
   marketing page: see site.css. */

/* ---------- hero ---------- */
.home .h-hero{padding:4.5rem 0 0}
.home .h-hero h1{font-family:var(--h-display); font-weight:800; font-size:clamp(3.4rem, 10vw, 8.5rem);
  line-height:.92; letter-spacing:-.05em; text-wrap:balance; max-width:11ch}
.home .h-hero h1 .hl{color:var(--h-wine)}
.home .h-lede{font-size:clamp(1.15rem, 2.2vw, 1.5rem); font-weight:500; color:var(--h-mute); line-height:1.4;
  max-width:24em; margin-top:2rem}
.home .h-cta{display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin-top:2.2rem}
.home .h-hero .offer{margin-top:1.2rem}

/* ---------- the tour ---------- */
.home .h-tour{padding:5rem 0 0}
.home .h-tabs{display:flex; gap:.75rem; flex-wrap:wrap}
.home .h-tab{font:inherit; font-weight:700; font-size:1.2rem; display:inline-flex; align-items:center; gap:.65rem;
  min-height:56px; padding:.7rem 1.6rem; border-radius:999px; border:2px solid var(--h-line); background:#fff;
  color:var(--h-ink); cursor:pointer}
.home .h-tab i{display:block; width:12px; height:12px; border-radius:50%}
.home .h-tab:hover{border-color:var(--h-ink)}
.home .h-tab:focus-visible{outline:3px solid var(--h-wine); outline-offset:3px}
.home .h-tab[aria-selected="true"]{background:var(--h-wine); border-color:var(--h-wine); color:#fff}
.home .h-tab[aria-selected="true"] i{background:#fff !important}
.home .h-cap{margin-top:1.8rem; font-family:var(--h-display); font-weight:800; letter-spacing:-.04em; line-height:1.05;
  font-size:clamp(1.9rem, 3.6vw, 2.9rem); max-width:20em; min-height:1.1em}

.home .h-stage{margin-top:1.5rem; border-radius:40px; padding:4.5rem 4rem 0; position:relative; overflow:hidden;
  display:flex; justify-content:center; min-height:600px; background:var(--h-wine)}
.home .h-stage[data-tone="register"]{background:var(--h-wine)}
.home .h-stage[data-tone="floor"]{background:var(--h-teal)}
.home .h-stage[data-tone="club"]{background:var(--h-gold)}
.home .h-stage[data-tone="shop"]{background:var(--h-deep)}
.home .h-stage[data-tone="cellar"]{background:var(--h-teal)}
.home .h-stage[data-tone="reports"]{background:var(--h-wine)}
.home .h-stage[data-tone="campaigns"]{background:var(--h-gold)}
.home .h-panel{display:flex; justify-content:center; width:100%; align-self:flex-end}
.home .h-win{width:min(920px,100%); height:540px; background:#fff; border-radius:20px 20px 0 0; overflow:hidden;
  box-shadow:0 30px 80px rgba(20,17,26,.3); display:flex; flex-direction:column}
.home .h-chrome{flex:none; height:44px; background:#f0eef4; display:flex; align-items:center; gap:8px; padding:0 18px;
  border-bottom:1px solid var(--h-line)}
.home .h-chrome i{display:block; width:12px; height:12px; border-radius:50%; background:#d6d2de}
.home .h-chrome span{margin-left:14px; background:#fff; border-radius:999px; padding:4px 16px; font-size:.8rem;
  font-weight:600; color:var(--h-mute)}
.home .h-win img{display:block; width:100%; flex:1; min-height:0; object-fit:cover; object-position:top center}
.home .h-chip{position:absolute; z-index:2; display:flex; align-items:center; gap:.6rem; padding:.7rem 1.2rem;
  border-radius:999px; font-weight:700; font-size:.95rem; background:var(--h-ink); color:#fff;
  box-shadow:0 14px 40px rgba(20,17,26,.3)}
.home .h-chip.alt{background:#fff; color:var(--h-ink)}
.home .h-chip .dot{width:10px; height:10px; border-radius:50%; background:#46d38a}
.home .h-chip.l{left:40px; top:16px} .home .h-chip.r{right:48px; top:96px}

/* With JS the panels swap; without it all four stack, each on its own stage. */
.home.js-ready .h-panel[hidden]{display:none}
.home:not(.js-ready) .h-panel+.h-panel{margin-top:3rem}
.home:not(.js-ready) .h-tabs{display:none}

.home .h-more{margin-top:1.6rem; display:flex; gap:1rem 2rem; flex-wrap:wrap; align-items:center; color:var(--h-mute);
  font-weight:600; font-size:1rem}

/* ---------- behind the bar: a second tour, introduced by its own heading ---------- */
.home .h-behind{padding:7rem 0 0}
.home .h-head{font-family:var(--h-display); font-weight:800; letter-spacing:-.045em; line-height:.98; text-wrap:balance;
  font-size:clamp(2.6rem, 6vw, 5.2rem)}
.home .h-behind .h-sub{margin:1rem 0 2rem; color:var(--h-mute); font-weight:500; font-size:1.15rem}

/* ---------- plans ---------- */
.home .h-plans{padding:7rem 0 0}
.home .h-plans h2, .home .h-close h2{font-family:var(--h-display); font-weight:800; letter-spacing:-.045em;
  line-height:.98; text-wrap:balance; font-size:clamp(2.6rem, 6vw, 5.2rem)}
.home .h-plans .h-sub{margin-top:1rem; color:var(--h-mute); font-weight:500; font-size:1.15rem}
.home .h-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:2.6rem}
.home .h-plan{border-radius:32px; padding:2.2rem 2rem; display:flex; flex-direction:column; gap:.5rem;
  background:var(--h-teal); color:#fff; position:relative}
.home .h-plan.pop{background:var(--h-wine)}
.home .h-plan.pop .h-price{color:var(--h-saffron)}
.home .h-plan.last{background:var(--h-saffron); color:var(--h-ink)}
.home .h-plan b{font-size:1.25rem}
.home .h-tag{display:inline-block; margin-left:.5rem; background:var(--h-saffron); color:var(--h-ink); font-size:.75rem;
  font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:.2rem .65rem; border-radius:999px;
  vertical-align:middle}
.home .h-price{font-family:var(--h-display); font-weight:800; font-size:clamp(3.6rem, 7vw, 5.5rem); line-height:.95;
  letter-spacing:-.06em}
.home .h-price small{font-family:var(--h-body); font-weight:600; font-size:1.05rem; letter-spacing:0; opacity:.75}
.home .h-blurb{font-size:1.1rem; font-weight:500; opacity:.92}
.home .h-yr{font-size:.95rem; font-weight:600; opacity:.8}
.home .h-plan details{margin-top:1rem; border-top:1px solid rgba(255,255,255,.28); padding-top:.9rem; font-size:.98rem}
.home .h-plan.last details{border-top-color:rgba(20,17,26,.25)}
.home .h-plan summary{cursor:pointer; font-weight:700; min-height:44px; display:flex; align-items:center}
.home .h-plan summary:focus-visible{outline:3px solid #fff; outline-offset:3px; border-radius:6px}
.home .h-plan.last summary:focus-visible{outline-color:var(--h-ink)}
.home .h-plan ul{list-style:none; padding:0; margin:.5rem 0 0; display:flex; flex-direction:column; gap:.55rem}
.home .h-plan li{display:flex; gap:.6rem; align-items:flex-start}
.home .h-plan li svg{flex:none; margin-top:.25rem}
.home .h-plan .h-btn{margin-top:auto; background:#fff; color:var(--h-ink)}
.home .h-plan.last .h-btn{background:var(--h-ink); color:#fff}
.home .h-plan .h-btn{margin-top:1.4rem}
.home .h-addons{margin-top:1.4rem; display:flex; flex-direction:column; gap:.8rem}
.home .h-addon{border:2px solid var(--h-line); border-radius:24px; padding:1.3rem 1.6rem; display:flex;
  align-items:center; justify-content:space-between; gap:1rem 2rem; flex-wrap:wrap}
.home .h-addon b{font-size:1.15rem}
.home .h-addon span{color:var(--h-mute); font-weight:500}
.home .h-addon .amt{font-family:var(--h-display); font-weight:800; font-size:1.8rem; color:var(--h-ink); letter-spacing:-.04em}
.home .h-note{margin-top:1.6rem; color:var(--h-mute); font-weight:500; max-width:56em}
.home .h-note a{color:var(--h-wine); font-weight:700}

@media (max-width:860px){
  .home .h-hero{padding-top:3rem}
  .home .h-stage{padding:2rem 12px 0; min-height:440px; border-radius:28px}
  .home .h-win{height:360px}
  .home .h-chip{display:none}
  /* The screenshots are desktop-wide; on a phone show the top-left at a size you can read. */
  .home .h-win img{width:175%; max-width:none; flex:none; height:auto}
  .home .h-grid{grid-template-columns:1fr}
  .home .h-tab{font-size:1.05rem; padding:.6rem 1.2rem; min-height:48px}
  .home .h-plans{padding-top:4.5rem}
  .home .h-behind{padding-top:4.5rem}
}
@media (prefers-reduced-motion:reduce){ .home *{transition:none !important} }