/* ============================================================
   Golden Landscaping — 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.
   ============================================================ */

/* ---- "GL+" 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 "GL+" 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, #A87720 0%, #9C6E1B 45%, var(--teal-press) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- plans.html's own hero heading ("Save Big With GL+") — 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, #A87720 0%, #9C6E1B 45%, var(--teal-press) 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(2, 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(200,145,43,.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;
  /* 3 tiers since Fortnightly was withdrawn 2026-08-16 */
  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(200,145,43,.55);
}
.plan-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--teal-deep);
  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-deep);
  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;
  /* --teal is 3.38:1 on cream at this size — decorative teal can't carry text. */
  color: var(--teal-deep);
  vertical-align: bottom;
}
.plans-compare thead th.is-hero {
  color: var(--teal-press);
}
.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(35,32,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(35,32,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; }
}

/* Phone-only shared CTA, hidden everywhere else. This MUST sit before the media
   query that reveals it: both selectors are (1,1,0), so whichever comes last in
   the file wins wherever both apply — with the order reversed the button
   vanished on phones too, leaving the plans section with no CTA at all.
   The #plans scope is also load-bearing: index.html's inline <style> loads after
   this file and sets `.btn { display: inline-flex }`, which out-cascades a bare
   `.plans-shared-cta { display: none }` and shows the button on desktop. */
#plans .plans-shared-cta { display: none; }

/* ── Phone: compact plan rows ────────────────────────────────────────────────
   Stacked full-height, the cards ran long on a 390px viewport — a big chunk of
   the entire homepage to communicate a few numbers. This keeps all the content
   and just stops it sprawling: the card becomes a 2-column grid so the tier and
   the discount share the top line instead of eating two, and the type/padding
   tighten. No markup change, so plans.html gets the same treatment. The
   identical "Get your free quote" buttons are dealt with separately in
   index.html — they all pointed at the same #quote anchor. */
@media (max-width: 640px) {
  .plans-grid { gap: 14px; max-width: 460px; }

  .plan-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: 12px;
    padding: 18px 18px 16px;
    border-radius: 16px;
    text-align: left;
  }
  /* Quarterly first on a phone — it's the plan we most want people on, and on a
     narrow screen "first" carries the weight that "middle and bigger" does on
     desktop. */
  .plan-card.is-hero { order: -1; }

  .plan-tier      { grid-column: 1; margin: 0; font-size: 12.5px; }
  .plan-discount  { grid-column: 2; grid-row: 1; font-size: 28px; text-align: right; }
  .plan-discount-sub { grid-column: 1 / -1; margin: 4px 0 12px; font-size: 11.5px; letter-spacing: .05em; }
  .plan-benefits  { grid-column: 1 / -1; margin: 0; gap: 7px; }
  .plan-card .btn { grid-column: 1 / -1; }

  .plan-benefits li  { font-size: 13px; line-height: 1.3; gap: 8px; }
  .plan-benefits svg { width: 16px; height: 16px; margin-top: 0; }

  /* Badge moves out of the centre so it can't collide with the tier label. */
  .plan-badge { left: auto; right: 14px; transform: none; top: -10px; font-size: 10px; padding: 5px 11px; }

  /* Homepage only (#plans). plans.html keeps its per-card buttons — there the
     cards ARE the page, and it has no equivalent shared CTA above its footer. */
  #plans .plan-card .btn { display: none; }
  #plans .plans-shared-cta { display: inline-flex; margin-bottom: 14px; }
}

/* 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; }
}