/* ============================================================
   PRICING PAGE SECTIONS
   ============================================================ */


/* ---------- PLAN EXPLAINER ---------- */
.plan-explainer{ padding-block: var(--space-lg) var(--space-xl); }
.plan-explainer-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.plan-tile{
  background: var(--bg-elevated);
  padding: var(--space-lg);
  position:relative;
}
.plan-tile h3{
  font-size: var(--step-1);
  display:flex;
  align-items:center;
  gap: 0.8em;
}
.plan-tile p{
  color: var(--ink-dim);
  margin-top: var(--space-sm);
  font-size: var(--step--1);
  max-width: 42ch;
}
.badge{
  display:inline-flex;
  align-items:center;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber-ink);
  background: var(--amber);
  padding: 0.35em 0.8em;
  border-radius: 999px;
}
@media (max-width: 760px){ .plan-explainer-grid{ grid-template-columns: 1fr; } }

/* ---------- PRICING CARDS ---------- */
.pricing-cards{ padding-block: var(--space-xl) var(--space-2xl); }
.cards-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-xl);
  align-items: stretch;
}
.price-card{
  min-width: 0;
  border: 1px solid var(--line-strong);
  background: var(--bg-elevated);
  padding: var(--space-lg);
  display:flex;
  flex-direction:column;
  position:relative;
}
.price-card--featured{
  border-color: var(--amber);
  background: linear-gradient(180deg, rgba(232,163,61,0.07), var(--bg-elevated) 40%);
}
.price-card--featured::before{
  content:"Most Requested";
  position:absolute;
  top:0; right: var(--space-lg);
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber-ink);
  background: var(--amber);
  padding: 0.35em 0.8em;
  border-radius: 999px;
}
.price-card .num{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--amber);
  letter-spacing: 0.1em;
}
.price-card h3{
  font-size: var(--step-2);
  margin-top: var(--space-sm);
}
.price-card .desc{
  color: var(--ink-dim);
  margin-top: var(--space-sm);
  font-size: var(--step--1);
  min-height: 4.4em;
}

.price-tiers{
  display:flex;
  flex-direction:column;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--line);
}
.price-tier{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: var(--space-sm);
}
.price-tier .tier-label{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.price-tier .tier-price{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  color: var(--ink);
  display:flex;
  align-items:baseline;
  gap: 0.25em;
  white-space: nowrap;
}
.price-tier .tier-price .unit{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight:400;
  color: var(--ink-dim);
}
.price-tier--monthly .tier-price{ color: var(--amber); }
.price-tier-note{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: -0.4rem;
}

.price-addon{
  margin-top: var(--space-md);
  padding: 0.9em 1em;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  color: var(--ink-dim);
  display:flex;
  justify-content:space-between;
  gap: 0.8em;
  align-items:baseline;
}
.price-addon .amt{ color: var(--amber); font-family: var(--font-mono); white-space:nowrap; }

/* ---------- delivery info (normal / urgent) ---------- */
.price-delivery{
  margin-top: var(--space-md);
  display:flex;
  flex-direction:column;
  gap: 0.5rem;
}
.delivery-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 0.5em 0.8em;
  flex-wrap: wrap;
  padding: 0.75em 1em;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
}
.delivery-row .d-label{
  display:inline-flex;
  align-items:center;
  gap: 0.55em;
  color: var(--ink-dim);
}
.delivery-row .d-label svg{ width:15px; height:15px; flex-shrink:0; color: var(--teal); }
.delivery-row .d-label em{ color: var(--muted); font-style:normal; font-size: 0.72rem; }
.delivery-row .d-val{
  font-family: var(--font-mono);
  color: var(--ink);
  white-space:nowrap;
  text-align:right;
}
.delivery-row.is-urgent{ border-style: dashed; border-color: var(--line-strong); }
.delivery-row.is-urgent .d-label svg{ color: var(--amber); }
.delivery-row.is-urgent .d-val .amt{ color: var(--amber); margin-left: 0.4em; }

.price-features{
  margin-top: var(--space-lg);
  display:flex;
  flex-direction:column;
  gap: 0.65em;
  flex-grow:1;
}
.price-features li{
  display:flex;
  gap: 0.7em;
  align-items:flex-start;
  font-size: 0.85rem;
  color: var(--ink-dim);
}
.price-features li svg{
  width:16px; height:16px;
  flex-shrink:0;
  margin-top: 0.2em;
  color: var(--teal);
}
.price-card .btn{ margin-top: var(--space-lg); justify-content:center; width:100%; }

@media (max-width: 980px){ .cards-grid{ grid-template-columns: minmax(0, 1fr); } }

/* ---------- COMPARISON ---------- */
.comparison{ padding-block: var(--space-2xl); background: var(--bg-elevated); }
.compare-table-wrap{
  margin-top: var(--space-xl);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.compare-table{
  width:100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.compare-table th, .compare-table td{
  padding: 1.1em var(--space-sm);
  text-align: right;
  border-bottom: 1px solid var(--line);
}
.compare-table th:first-child, .compare-table td:first-child{ text-align:left; }
.compare-table thead th{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight:400;
  border-bottom: 1px solid var(--line-strong);
}
.compare-table tbody th{
  font-family: var(--font-display);
  font-weight:600;
  color: var(--ink);
}
.compare-table td{ font-family: var(--font-mono); color: var(--ink-dim); }
.compare-table td.hi{ color: var(--amber); }
.compare-note{
  margin-top: var(--space-lg);
  color: var(--muted);
  font-size: var(--step--1);
}
.compare-note strong{ color: var(--ink-dim); font-weight:600; }

@media (max-width: 640px){
  .compare-table{ font-size: 0.78rem; }
  .compare-table th, .compare-table td{ padding: 0.8em 0.4em; }
}

/* ---------- MONTHLY / RECURRING CTA BAND ---------- */
.monthly-band{ padding-block: var(--space-2xl); }
.monthly-panel{
  border: 1px solid var(--line-strong);
  padding: var(--space-xl);
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-xl);
  align-items:center;
  position:relative;
  overflow:hidden;
}
.monthly-panel::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background: radial-gradient(ellipse 60% 80% at 100% 0%, var(--glow-amber), transparent 60%);
}
.monthly-copy h2{ font-size: var(--step-3); max-width: 14ch; }
.monthly-copy p{ color: var(--ink-dim); margin-top: var(--space-md); max-width: 46ch; }
.monthly-copy .btn{ margin-top: var(--space-lg); }
.monthly-rates{
  display:flex;
  flex-direction:column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.monthly-rate{
  background: var(--bg-elevated);
  padding: 1.1em var(--space-md);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}
.monthly-rate .service{ font-size: 0.85rem; color: var(--ink-dim); }
.monthly-rate .rate{
  font-family: var(--font-display);
  font-weight:700;
  color: var(--amber);
  font-size: var(--step-1);
}
.monthly-rate .rate .unit{ font-family: var(--font-mono); font-size: 0.65rem; color: var(--muted); }
.monthly-min{
  margin-top: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
  text-align:center;
}

@media (max-width: 860px){
  .monthly-panel{ grid-template-columns: 1fr; }
}

/* ---------- ADD-ONS ---------- */
.addons{ padding-block: var(--space-2xl); background: var(--bg-elevated); }
.addon-card{
  margin-top: var(--space-xl);
  border: 1px solid var(--line-strong);
  padding: var(--space-lg);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: var(--space-lg);
  flex-wrap:wrap;
}
.addon-info h3{ font-size: var(--step-1); }
.addon-info p{ color: var(--ink-dim); margin-top: 0.6em; font-size: var(--step--1); max-width: 44ch; }
.addon-avail{
  display:flex; gap: 0.6em; margin-top: 0.9em; flex-wrap:wrap;
}
.addon-avail span{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--ink-dim);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.35em 0.9em;
}
.addon-price{
  text-align:right;
  flex-shrink:0;
}
.addon-price .amt{
  font-family: var(--font-display);
  font-weight:700;
  font-size: var(--step-3);
  color: var(--amber);
}
.addon-price .unit{ font-family: var(--font-mono); font-size:0.7rem; color: var(--muted); }

/* ---------- CUSTOM NOTICE ---------- */
.custom-notice{ padding-block: var(--space-2xl); }
.custom-panel{
  border: 1px dashed var(--line-strong);
  padding: var(--space-xl);
  text-align:center;
  max-width: 760px;
  margin-inline:auto;
}
.custom-panel h2{ font-size: var(--step-2); }
.custom-panel p{ color: var(--ink-dim); margin-top: var(--space-sm); max-width: 52ch; margin-inline:auto; }
.custom-panel .btn{ margin-top: var(--space-lg); }

/* ---------- reveal stagger helper for cards ---------- */
.cards-grid > .reveal:nth-child(1){ transition-delay: 0ms; }
.cards-grid > .reveal:nth-child(2){ transition-delay: 90ms; }
.cards-grid > .reveal:nth-child(3){ transition-delay: 180ms; }