/* ============================================================
   TGG SYD — recurring plans + price estimator
   Loaded on index.html (home estimator + plans section) and
   plans.html (full comparison). Hand-authored — NOT generated
   by build-site.mjs, unlike service.css.
   ============================================================ */

/* ---- "TGG+" brand mark — used wherever the plan name is shown -----------
   Same gradient fill as the rest of the site's "GRADIENT TEXT ON HEADINGS"
   convention (see index.html — every centred section heading highlights one
   word this way via <em>), so "TGG+" reads as one cohesive premium wordmark
   instead of a plain word plus a separately-coloured symbol. Applied here
   (not just inherited from a parent em) so .plus-mark also looks right
   wherever it appears on its own, e.g. inside plan-tier labels. */
.plus-mark {
  display: inline-block;
  font-weight: 900;
  font-size: 1.25em;
  transform: translateY(-1px);
  margin-left: 3px;
  background: linear-gradient(130deg, #5CA4DA 0%, #2E86C8 45%, var(--teal-deep) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- plans.html's own hero heading ("Save Big With TGG+") — legal-hero is
   shared with the plain T&C/privacy pages via legal.css, none of which use
   <em> in their h1, so scoping the gradient to `em` here can't leak onto
   them. Matches the home page's identical heading exactly (see index.html's
   "GRADIENT TEXT ON HEADINGS" block) so the wordmark looks the same wherever
   it appears, not just in the "+" symbol. ---- */
.legal-hero h1 em {
  font-style: normal;
  background: linear-gradient(130deg, #5CA4DA 0%, #2E86C8 45%, var(--teal-deep) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- Plans FAQ accordion — scoped to .plans-faq (not a bare .faq/details
   rule) since this stylesheet also loads on index.html, which already styles
   its own home-page FAQ accordion differently. Matches the simple
   underline-list accordion used on service pages (service.css). ---- */
.plans-faq .faq{max-width:760px;margin:0 auto}
.plans-faq .faq details{border-bottom:1px solid var(--line)}
.plans-faq .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 4px;font-size:16px;font-weight:600;color:var(--ink)}
.plans-faq .faq summary::-webkit-details-marker{display:none}
.plans-faq .faq summary::after{content:"+";color:var(--teal-deep);font-weight:700;font-size:21px;line-height:1}
.plans-faq .faq details[open] summary::after{content:"\2013"}
.plans-faq .faq details p{padding:0 4px 18px;color:var(--ink-soft);line-height:1.6}

/* ---- Quote wizard: 4-step form (type → details → services → plan) ------ */
/* Every step's direct children get the same vertical rhythm automatically —
   this is what "evenly spaced" actually means here: one gap value, applied
   once, instead of each field/note/label carrying its own ad-hoc margin. */
.qt-step {
  display: grid;
  gap: 18px;
  align-content: start;
}
/* An author "display" declaration always beats the browser's built-in
   [hidden]{display:none} default, regardless of the hidden attribute — so
   .qt-step{display:grid} above was silently un-hiding every step at once,
   stacking all four on top of each other instead of showing one at a time.
   This re-asserts display:none whenever hidden is actually set. */
.qt-step[hidden] {
  display: none;
}
.qt-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}
.qt-progress-step {
  flex: 1;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-soft);
  padding-bottom: 8px;
  border-bottom: 3px solid var(--line);
}
.qt-progress-step i {
  display: block;
  font-style: normal;
  font-size: 15px;
  margin-bottom: 2px;
}
.qt-progress-step.active,
.qt-progress-step.done {
  color: var(--teal-deep);
  border-color: var(--teal);
}
.qt-type-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 14px 0;
}
.qt-type-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 10px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.qt-type-opt:hover {
  border-color: rgba(46,134,200,.4);
}
.qt-type-opt.selected {
  border-color: var(--teal);
  background: var(--teal-tint);
  color: var(--teal-deep);
}
.qt-type-emoji {
  font-size: 26px;
}
.qt-type-error {
  color: #b3261e;
  font-size: 13px;
  margin: 6px 0 0;
}
.qt-step-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Back is compact (just needs to fit its label); Next/Submit takes the rest
   of the row so the pair always fills the width evenly, however narrow the
   form is — this replaces a fixed-width layout that could overflow. */
.qt-step-nav .btn-ghost {
  flex: none;
  padding-left: 18px;
  padding-right: 18px;
}
.qt-step-nav .btn-solid {
  flex: 1;
  min-width: 0;
}
/* Step 1 has no Back button, just an empty spacer + Next — let Next take
   the full row itself instead of being squeezed by the spacer. */
.qt-step-nav > span:empty {
  display: none;
}
@media (max-width: 640px) {
  .qt-type-row { grid-template-columns: 1fr; }
}
/* The "How did you hear about us?" select was inheriting the site-wide
   input/select size (15px text, 48px min-height, full label spacing) which
   reads oversized sitting among step 4's much more compact plan cards and
   benefit lists — shrink it to match. */
.qt-step select[name="lead-source"] {
  font-size: 13.5px;
  padding: 10px 36px 10px 12px;
  min-height: 40px;
  max-width: 320px;
}

/* ---- Price estimator (home quote form only) ---------------------------- */
.estimate-block {
  margin-top: 4px;
}
.estimate-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream-2);
}
.estimate-shade-label {
  display: grid;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.estimate-shade-label select {
  font-weight: 400;
}
.estimate-note {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0;
}
/* "Pressure washing from $149" headline + per-service anchor list — replaced
   the live slider calculator (felt like too much friction up front); this is
   just a reassuring starting price, the real number is confirmed in person. */
.estimate-anchor {
  font-size: 16px;
  font-weight: 700;
  color: var(--teal-deep);
  margin: 0;
}
.estimate-anchor-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.estimate-anchor-list li {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--ink);
  padding: 8px 12px;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 10px;
}
.estimate-anchor-list li b {
  color: var(--teal-deep);
}
.estimate-plans {
  display: grid;
  gap: 8px;
}
.estimate-plan-opt {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  cursor: pointer;
  font-size: 13.5px;
}
.estimate-plan-opt input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.estimate-plan-opt:has(input:checked) {
  border-color: var(--teal);
  background: var(--teal-tint);
}
.estimate-plan-opt .plan-name {
  font-weight: 700;
}
.estimate-plan-opt.is-recommended .plan-name em {
  color: var(--teal-deep);
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-left: 6px;
}
.estimate-plan-opt .plan-price {
  color: var(--teal-deep);
  font-weight: 700;
}
.plan-mini-benefits {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 3px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.plan-mini-benefits li::before {
  content: '✓ ';
  color: var(--teal-deep);
}

/* ---- Plan cards (home section + plans page) ---------------------------- */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 28px 30px;
  background: var(--white, #fff);
  border: 1.5px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  text-align: center;
}
/* Quarterly = the plan we most want people on, so it's visually the hero */
.plan-card.is-hero {
  border-color: var(--teal);
  box-shadow: 0 18px 44px -18px rgba(46,134,200,.55);
}
.plan-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--teal);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.plan-tier {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 10px;
}
.plan-discount {
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}
.plan-discount-sub {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 8px 0 22px;
}
.plan-benefits {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 14px;
  text-align: left;
}
.plan-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.35;
}
.plan-benefits svg {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  color: var(--teal);
}
.plan-card .btn {
  margin-top: auto;
  width: 100%;
  justify-content: center;
}
.plans-readmore {
  text-align: center;
  margin-top: 34px;
}

/* ---- Full comparison table (plans page + read-more target) ------------- */
.plans-compare {
  width: 100%;
  border-collapse: collapse;
  margin: 0 auto;
  font-size: 14.5px;
}
.plans-compare th,
.plans-compare td {
  padding: 15px 14px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.plans-compare thead th {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal);
  vertical-align: bottom;
}
.plans-compare thead th.is-hero {
  color: var(--teal-deep);
}
.plans-compare tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--ink);
}
.plans-compare .cmp-yes { color: var(--teal-deep); font-weight: 700; }
.plans-compare .cmp-no  { color: rgba(20,24,27,.30); }
.plans-compare .cmp-discount { font-weight: 800; font-size: 16px; color: var(--ink); }
.cmp-icon { width: 20px; height: 20px; display: block; margin: 0 auto; }
.cmp-yes .cmp-icon { color: var(--teal-deep); }
.cmp-no .cmp-icon { color: rgba(20,24,27,.30); }
.plans-compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 900px) {
  .plans-grid { grid-template-columns: 1fr; gap: 30px; max-width: 420px; margin: 0 auto; }
}

/* Below ~680px the 5-column table can't fit on screen at a readable size —
   shrink it into a fixed-width grid with a sticky label column so the user
   scrolls horizontally to compare plans instead of everything squeezing
   down illegibly small. */
@media (max-width: 680px) {
  .plans-compare-wrap {
    position: relative;
    border-radius: 12px;
    /* right-edge fade hints there's more to scroll to */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
  }
  .plans-compare { table-layout: fixed; font-size: 13px; min-width: 560px; }
  .plans-compare th, .plans-compare td { padding: 13px 8px; }
  .plans-compare thead th { font-size: 10.5px; letter-spacing: .06em; }
  .plans-compare tbody th {
    width: 150px;
    font-size: 13px;
    line-height: 1.25;
    position: sticky;
    left: 0;
    background: var(--white);
    box-shadow: 1px 0 0 var(--line);
  }
  .plans-compare thead th:first-child { position: sticky; left: 0; background: var(--white); z-index: 1; }
  .cmp-icon { width: 22px; height: 22px; }
  .plans-compare .cmp-discount { font-size: 15px; }
}