/* All-Plans index — refined-luxury grid with cinematic motion + compare tool */

/* ---- Hero ---- */
.plans-hero{
  padding: calc(var(--space-96) + 64px) 0 var(--space-64);
  background:
    radial-gradient(ellipse at 12% 0%, rgba(var(--ward-citrus-rgb),0.07), transparent 55%),
    radial-gradient(ellipse at 100% 20%, rgba(var(--ward-newday-rgb),0.10), transparent 55%),
    rgba(var(--ward-sage-rgb),0.10);
  text-align:center;
}
.plans-hero__eyebrow{
  font-family:'Open Sans',sans-serif; font-size:var(--fs-12); font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ward-citrus); margin:0 0 var(--space-16);
}
.plans-hero__title{
  font-family:'Montserrat',sans-serif; font-weight:600; letter-spacing:-.02em;
  font-size:clamp(2rem,5vw,3.25rem); line-height:1.05; color:var(--ward-emerald);
  margin:0 auto var(--space-24); max-width:16ch;
}
.plans-hero__lede{
  font-family:'Open Sans',sans-serif; color:var(--ward-pebble);
  font-size:var(--fs-18); line-height:1.65; max-width:60ch; margin:0 auto;
}
.plans-hero__lede strong{ color:var(--ward-emerald); font-weight:700; }

/* ---- Board / toolbar ---- */
.plans-board{ padding: var(--space-48) 0 var(--space-96); }
.plans-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-24);
  flex-wrap:wrap; margin-bottom:var(--space-48);
  padding-bottom:var(--space-24); border-bottom:1px solid rgba(var(--ward-emerald-rgb),.10);
}
.plans-toolbar__count{
  font-family:'Montserrat',sans-serif; font-weight:600; color:var(--ward-emerald); font-size:var(--fs-18);
}
.plans-toolbar__count span{ color:var(--ward-citrus); }
.plans-toolbar__controls{ display:flex; align-items:center; gap:var(--space-16); flex-wrap:wrap; }

.seg{ display:inline-flex; background:rgba(var(--ward-sage-rgb),.22); border-radius:999px; padding:4px; }
.seg__btn{
  border:0; background:transparent; cursor:pointer;
  font-family:'Open Sans',sans-serif; font-size:var(--fs-14); font-weight:600; color:var(--ward-pebble);
  padding:8px 18px; border-radius:999px; transition:all var(--ease-standard) var(--ease-out);
}
.seg__btn.is-active{ background:var(--ward-cloud); color:var(--ward-emerald); box-shadow:0 2px 8px -2px rgba(var(--ward-emerald-rgb),.25); }

.sortwrap{ display:inline-flex; align-items:center; gap:var(--space-8); }
.sortwrap__label{ font-family:'Open Sans',sans-serif; font-size:var(--fs-12); font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--ward-pebble); }
.sortsel{
  font-family:'Open Sans',sans-serif; font-size:var(--fs-14); color:var(--ward-emerald);
  border:1px solid rgba(var(--ward-emerald-rgb),.18); border-radius:10px; padding:9px 34px 9px 14px;
  background:var(--ward-cloud) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23093F3C' d='M6 8 0 0h12z'/%3E%3C/svg%3E") no-repeat right 12px center;
  -webkit-appearance:none; appearance:none; cursor:pointer;
}

/* ---- Grid ---- */
.plans-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:var(--space-32);
}
.plans-empty{ text-align:center; color:var(--ward-pebble); font-family:'Open Sans',sans-serif; padding:var(--space-64) 0; }

/* ---- Card ---- */
.pcard{
  position:relative; background:var(--ward-cloud); border-radius:16px; overflow:hidden;
  border:1px solid rgba(var(--ward-emerald-rgb),.08);
  transition:transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
}
.pcard:hover{ transform:translateY(-8px); box-shadow:0 30px 60px -28px rgba(var(--ward-emerald-rgb),.34); }
.pcard__link{ display:block; color:inherit; text-decoration:none; }
.pcard__media{ position:relative; margin:0; aspect-ratio:4/3; background:rgba(var(--ward-sage-rgb),.20); overflow:hidden; }
.pcard__img{ width:100%; height:100%; object-fit:cover; transition:transform 800ms var(--ease-out); will-change:transform; }
.pcard:hover .pcard__img{ transform:scale(1.06); }
.pcard__price{
  position:absolute; left:14px; bottom:14px; z-index:2;
  font-family:'Montserrat',sans-serif; font-weight:600; font-size:var(--fs-18); color:var(--ward-cloud);
  background:rgba(var(--ward-emerald-rgb),.86); backdrop-filter:blur(6px);
  padding:7px 14px; border-radius:999px; letter-spacing:-.01em;
}
.pcard__price sup{ font-size:.6em; top:-.5em; }
.pcard__media::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(var(--ward-emerald-rgb),.28),transparent 42%); pointer-events:none; }

.pcard__body{ padding:var(--space-24); display:flex; flex-direction:column; gap:var(--space-16); }
.pcard__name{ font-family:'Montserrat',sans-serif; font-size:var(--fs-24); font-weight:600; color:var(--ward-emerald); letter-spacing:-.01em; }
.pcard__tag{ font-family:'Open Sans',sans-serif; font-size:var(--fs-14); line-height:1.5; color:var(--ward-pebble); margin:-6px 0 0; }
.pcard__specs{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-8); margin:0; padding:var(--space-16) 0; border-block:1px solid rgba(var(--ward-emerald-rgb),.08); }
.pcard__specs > div{ display:flex; flex-direction:column; gap:3px; text-align:center; }
.pcard__specs dt{ font-family:'Open Sans',sans-serif; font-size:10px; letter-spacing:.10em; text-transform:uppercase; color:var(--ward-pebble); }
.pcard__specs dd{ font-family:'Montserrat',sans-serif; font-size:var(--fs-14); font-weight:600; color:var(--ward-emerald); margin:0; }
.pcard__cta{ font-family:'Open Sans',sans-serif; font-size:var(--fs-12); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ward-emerald); position:relative; align-self:flex-start; padding-bottom:4px; }
.pcard__cta::after{ content:''; position:absolute; inset-inline:0; bottom:0; height:2px; background:var(--ward-citrus); transform:scaleX(.4); transform-origin:left; transition:transform var(--ease-standard) var(--ease-out); }
.pcard:hover .pcard__cta::after{ transform:scaleX(1); }

/* Compare toggle */
.pcard__compare{
  position:absolute; top:12px; right:12px; z-index:3; cursor:pointer;
  font-family:'Open Sans',sans-serif; font-size:var(--fs-12); font-weight:700; letter-spacing:.02em;
  border:0; border-radius:999px; padding:8px 14px;
  background:rgba(255,255,255,.92); color:var(--ward-emerald); backdrop-filter:blur(6px);
  box-shadow:0 4px 14px -4px rgba(var(--ward-emerald-rgb),.4);
  transition:all var(--ease-standard) var(--ease-out);
}
.pcard__compare:hover{ background:#fff; transform:translateY(-1px); }
.pcard__compare-on{ display:none; }
.pcard.is-comparing .pcard__compare{ background:var(--ward-emerald); color:var(--ward-cloud); }
.pcard.is-comparing .pcard__compare-add{ display:none; }
.pcard.is-comparing .pcard__compare-on{ display:inline; }
.pcard.is-comparing{ box-shadow:0 0 0 2px var(--ward-citrus), 0 30px 60px -28px rgba(var(--ward-emerald-rgb),.34); }

/* ---- Scroll reveal ---- */
.plans-index-page [data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay:var(--d,0ms); }
.plans-index-page [data-reveal].is-revealed{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){ .plans-index-page [data-reveal]{ opacity:1; transform:none; transition:none; } .pcard__img,.pcard{ transition:none; } }

/* ---- Compare tray ---- */
.compare-tray{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:rgba(var(--ward-emerald-rgb),.97); backdrop-filter:blur(10px);
  box-shadow:0 -12px 40px -16px rgba(0,0,0,.5);
  transform:translateY(100%); transition:transform 450ms var(--ease-out);
}
.compare-tray.is-open{ transform:translateY(0); }
.compare-tray__inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-24); padding:var(--space-16) 0; flex-wrap:wrap; }
.compare-tray__slots{ display:flex; gap:var(--space-16); flex-wrap:wrap; }
.tray-slot{ display:flex; align-items:center; gap:var(--space-8); background:rgba(255,255,255,.10); border-radius:10px; padding:6px 8px 6px 6px; }
.tray-slot img{ width:48px; height:36px; object-fit:cover; border-radius:6px; }
.tray-slot__name{ font-family:'Open Sans',sans-serif; font-size:var(--fs-14); color:var(--ward-cloud); font-weight:600; }
.tray-slot__remove{ border:0; background:transparent; color:rgba(255,255,255,.7); cursor:pointer; font-size:18px; line-height:1; padding:0 4px; }
.tray-slot__remove:hover{ color:#fff; }
.tray-slot--empty{ width:104px; height:48px; border:1px dashed rgba(255,255,255,.28); border-radius:10px; }
.compare-tray__actions{ display:flex; align-items:center; gap:var(--space-16); }
.compare-tray__hint{ font-family:'Open Sans',sans-serif; font-size:var(--fs-12); color:rgba(255,255,255,.7); }
.btn--ghost{ background:transparent; color:var(--ward-cloud); border:1px solid rgba(255,255,255,.3); }
.btn--ghost:hover{ background:rgba(255,255,255,.10); }
.compare-tray__go[disabled]{ opacity:.45; cursor:not-allowed; }

/* ---- Compare modal ---- */
.compare-modal{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:var(--space-24); }
.compare-modal[hidden]{ display:none; }
.compare-modal__backdrop{ position:absolute; inset:0; background:rgba(var(--ward-emerald-rgb),.55); backdrop-filter:blur(4px); animation:fadeIn 300ms var(--ease-out); }
.compare-modal__panel{
  position:relative; z-index:1; background:var(--ward-cloud); border-radius:18px; overflow:hidden;
  width:min(960px,100%); max-height:90vh; display:flex; flex-direction:column;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.5); animation:popIn 400ms var(--ease-out);
}
.compare-modal__head{ display:flex; align-items:center; justify-content:space-between; padding:var(--space-24) var(--space-32); border-bottom:1px solid rgba(var(--ward-emerald-rgb),.10); }
.compare-modal__title{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:var(--fs-24); color:var(--ward-emerald); margin:0; }
.compare-modal__close{ border:0; background:transparent; font-size:28px; line-height:1; color:var(--ward-pebble); cursor:pointer; padding:0 6px; }
.compare-modal__close:hover{ color:var(--ward-emerald); }
.compare-modal__scroll{ overflow:auto; padding:var(--space-24) var(--space-32) var(--space-32); }

.compare-table{ width:100%; border-collapse:collapse; }
.compare-table th, .compare-table td{ padding:var(--space-16) var(--space-16); text-align:left; vertical-align:top; border-bottom:1px solid rgba(var(--ward-emerald-rgb),.08); }
.compare-table thead th{ border-bottom:2px solid rgba(var(--ward-emerald-rgb),.12); }
.compare-table .ct-rowlabel{ font-family:'Open Sans',sans-serif; font-size:var(--fs-12); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ward-pebble); white-space:nowrap; width:120px; }
.ct-hero{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; background:rgba(var(--ward-sage-rgb),.2); }
.ct-name{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:var(--fs-18); color:var(--ward-emerald); margin:var(--space-8) 0 2px; }
.ct-price{ font-family:'Montserrat',sans-serif; font-weight:600; color:var(--ward-citrus); }
.compare-table td{ font-family:'Open Sans',sans-serif; font-size:var(--fs-16); color:var(--ward-emerald); }
.ct-val{ font-weight:600; }
.ct-view{ display:inline-block; margin-top:var(--space-8); font-family:'Open Sans',sans-serif; font-size:var(--fs-12); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ward-emerald); text-decoration:none; border-bottom:2px solid var(--ward-citrus); padding-bottom:2px; }

@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes popIn{ from{opacity:0; transform:translateY(20px) scale(.98)} to{opacity:1; transform:translateY(0) scale(1)} }

/* body lock when modal open */
body.compare-open{ overflow:hidden; }

/* ---- Mobile ---- */
@media (max-width:680px){
  .plans-toolbar{ justify-content:flex-start; }
  .plans-grid{ grid-template-columns:1fr; gap:var(--space-24); }
  .compare-table .ct-rowlabel{ width:88px; }
  .compare-modal__scroll{ padding:var(--space-16); }
  .compare-tray__inner{ justify-content:center; }
}

.plans-cta{ padding-bottom: var(--space-128) !important; }

/* Always-on Ken Burns drift on plan cards (subtle, respects reduced-motion) */
.pcard__img{ animation: kenburns-card 18s ease-in-out infinite alternate; will-change: transform; }
.pcard:hover .pcard__img{ animation-play-state: paused; transform: scale(1.06); }
@keyframes kenburns-card{
  0%   { transform: scale(1.04) translate(0,0); }
  100% { transform: scale(1.10) translate(-1.5%, -1%); }
}
@media (prefers-reduced-motion: reduce){
  .pcard__img{ animation: none; }
}

/* ---- Card spec icons: bold, distinct, citrus-accented ---- */
.pcard__specs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin:14px 0 0;
  padding-top:14px;
  border-top:1px solid rgba(var(--ward-emerald-rgb),0.12);
}
.pcard__specs > div, .pcard__spec{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:3px;
}
.pcard__spec-ic{ display:block; line-height:0; }
.pcard__spec-ic .spec-ic{ width:36px; height:36px; transition:transform 200ms var(--ease-out); }
.pcard__spec-ic .spec-ic--ward{ width:36px; height:auto; }
.pcard:hover .pcard__spec-ic .spec-ic{ width:36px; height:36px; transition:transform 200ms var(--ease-out); }
.pcard__specs dt{
  font:600 10px/1.2 'Open Sans',sans-serif;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ward-pebble,#555);
  margin:0;
}
.pcard__specs dd{
  font:600 14px/1.1 'Montserrat',sans-serif;
  color:var(--ward-emerald);
  margin:0;
}
@media (max-width:600px){
  .pcard__spec-ic .spec-ic{ width:36px; height:36px; transition:transform 200ms var(--ease-out); }
  .pcard__specs dd{ font-size:13px; }
}