/* ===========================================================================
   v2 pricing — cards, billing toggle, and the comparison table.
   =========================================================================== */

.v2 .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ===== Billing toggle ===== */
.v2 .price-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin: 0 auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
}
.v2 .pricing-zone { text-align: center; }
.v2 .price-toggle-btn {
  all: unset;
  cursor: pointer;
  /* box-sizing is restored explicitly: `all: unset` resets it to content-box,
     which would make min-height below add to the padding instead of containing
     it. */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  transition: background 0.15s ease, color 0.15s ease;
}
.v2 .price-toggle-btn:hover { color: var(--text-primary); }
.v2 .price-toggle-btn.active {
  background: var(--bg-surface-alt);
  color: var(--text-primary);
}
/* A static saving label, so brand-voice blue rather than action coral. */
.v2 .price-toggle-badge {
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(108, 192, 255, 0.16);
  color: var(--accent-voice);
  font-size: 12px;
  font-weight: 600;
}
.v2 .price-vat-note {
  margin: var(--s-2) 0 var(--s-5);
  font-size: 13px;
  color: var(--text-muted);
}

/* ===== Cards ===== */
.v2 .pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  text-align: left;
  /* Equal-height cards. The tiers legitimately differ a lot in how many
     features they add (Pro adds 18, Agency adds 2), so letting the cards find
     their own heights would leave the row visibly ragged. */
  align-items: stretch;
}
@media (min-width: 700px)  { .v2 .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .v2 .pricing-grid { grid-template-columns: repeat(4, 1fr); } }

.v2 .pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-4);
  background: var(--bg-surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.25s ease;
}
/* The featured tier steps up a surface level rather than floating on a shadow —
   the reference's own mechanism for elevation. */
.v2 .pcard-featured {
  background: var(--bg-surface-alt);
  border-color: var(--hairline-strong);
}

/* --- cursor light, identical mechanism to the "why" cards (see cards.css) --- */
.v2 .pcard::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    400px circle at var(--mx, 50%) var(--my, 50%),
    rgba(221, 120, 103, 0.15),
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
  z-index: 0;
}
.v2 .pcard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    275px circle at var(--mx, 50%) var(--my, 50%),
    rgba(221, 120, 103, 0.6),
    rgba(108, 192, 255, 0.26) 42%,
    transparent 70%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
  z-index: 2;
}
/* Hovered card only — see the matching rules in cards.css for why both
   `:hover` and `.is-lit` are required rather than hover alone. */
.v2 .pricing-grid.is-lit .pcard:hover::before,
.v2 .pricing-grid.is-lit .pcard:hover::after { opacity: 1; }

/* Everything above the ::before wash. */
.v2 .pcard > * { position: relative; z-index: 1; }

/* Fixed-height slots so name / price / limits / CTA line up across all four
   cards regardless of which has a badge, a two-line note, or neither. */
.v2 .pcard-badge-slot { height: 22px; margin-bottom: var(--s-2); }
.v2 .pcard-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(108, 192, 255, 0.16);
  color: var(--accent-voice);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.v2 .pcard-name {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: var(--s-1);
}
.v2 .pcard-price { min-height: 46px; }
.v2 .pcard-amount {
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
/* Only the period matching the toggle is shown. */
.v2 .pricing-grid[data-billing="monthly"] .pcard-amount[data-period="yearly"],
.v2 .pricing-grid[data-billing="yearly"]  .pcard-amount[data-period="monthly"] { display: none; }
.v2 .pricing-grid[data-billing="monthly"] .pcard-note[data-period="yearly"] { visibility: hidden; }

/* Two lines' worth: the Agency note ("Billed yearly only · lifetime option
   available") wraps at card width, and a one-line slot would push its CTA out
   of line with the other three. */
.v2 .pcard-note {
  min-height: 34px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--accent-voice);
}
/* Keeps the slot's height when the note is hidden by the billing toggle. */
.v2 .pricing-grid[data-billing="monthly"] .pcard-note[data-period="yearly"] { visibility: hidden; }
.v2 .pcard-limits {
  margin: var(--s-2) 0 var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
  color: var(--text-muted);
}
.v2 .pcard-cta { width: 100%; margin-bottom: var(--s-3); }
.v2 .pcard-inherits {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--s-2);
}
.v2 .pcard-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v2 .pcard-features li {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
}
/* Pushed to the bottom of the card so it reads as the end of the list rather
   than another bullet; margin-top:auto works because .pcard is a flex column. */
.v2 .pcard-more {
  margin-top: auto;
  padding-top: var(--s-3);
  font-size: 12.5px;
}
.v2 .pcard-more a {
  color: var(--accent-voice);
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.v2 .pcard-more a:hover { border-bottom-color: currentColor; }

/* Touch devices: these two inline links sit at their text's own height (16px
   and 20px), well under a comfortable tap target. Padded vertically rather
   than enlarged, so the type size and the underline stay as designed.
   `.pricing-more` is centred, so the extra height is absorbed either side of
   the text instead of shifting the layout. */
@media (pointer: coarse) {
  .v2 .pcard-more a,
  .v2 .pricing-more a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

.v2 .pcard-features svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 3px;
  color: var(--accent-voice);
}

/* The landing page's link through to the full comparison. The generous top
   margin is deliberate: at a tighter gap it read as part of the last card's
   content rather than as a separate action below the whole grid. */
.v2 .pricing-more {
  margin-top: var(--s-7);
  text-align: center;
  font-size: 15px;
}
.v2 .pricing-more a {
  color: var(--accent-voice);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.v2 .pricing-more a:hover { border-bottom-color: currentColor; }

/* ===== Comparison table ===== */
/* NO overflow on wide screens, deliberately.

   `overflow-x: auto` makes this element the nearest scrolling ancestor, and a
   position:sticky descendant then sticks relative to IT rather than the
   viewport. Since this box only ever scrolls horizontally, a vertically sticky
   table header inside it simply never sticks — the header scrolls away and you
   read 38 rows with no idea which column is which. That is exactly what
   happened on the first build of this page.

   The table's min-width (780px) fits inside the 1200px container, so no
   horizontal scrolling is needed above the breakpoint and sticky works. Below
   it, scrolling is genuinely required, so overflow comes back and the sticky
   header is traded away — an acceptable loss on a phone, where the header is
   only two columns from whatever you are looking at anyway. */
.v2 .compare-wrap { position: relative; }

@media (max-width: 1023px) {
  .v2 .compare-wrap {
    overflow-x: auto;
    /* Edge fades marking that the table scrolls sideways. background-attachment
       local + scroll means the inner shadows only show when there is actually
       more table in that direction — the classic pure-CSS scroll shadow.
       The cover layers must stay WIDER than the fade layers they hide (76 vs
       68), or a sliver of fade survives at the scroll extremes.

       Three deliberate choices here, all of which were wrong before:

       1. Linear, not radial. A `radial-gradient(farthest-side ...)` in a
          full-height box is an ellipse whose vertical radius is half the
          table — so on a table this tall the fade was strongest across the
          middle rows and faded to nothing top and bottom. Linear is even for
          every row, which is the only thing that reads as deliberate.

       2. The page's own colour, not black. `rgba(0,0,0,.55)` over a blue-grey
          surface greys it out rather than deepening it, which is what made
          the edge read as a smudge sitting on top of the table instead of the
          table receding into the page.

       3. Wide enough to be a fade. At 24px it was a hard band that sliced
          through whichever checkmark happened to sit under it; 68px gives the
          gradient room to actually be gradual.

       Both ends of every gradient name the same RGB and vary only alpha —
       never the bare `transparent` keyword, which is rgba(0,0,0,0) and can
       drag the midpoint toward grey. */
    background:
      linear-gradient(to right, var(--bg-void) 55%, rgba(19, 27, 46, 0)) left center / 76px 100% no-repeat local,
      linear-gradient(to left,  var(--bg-void) 55%, rgba(19, 27, 46, 0)) right center / 76px 100% no-repeat local,
      linear-gradient(to right, rgba(19, 27, 46, 0.92), rgba(19, 27, 46, 0)) left center / 68px 100% no-repeat scroll,
      linear-gradient(to left,  rgba(19, 27, 46, 0.92), rgba(19, 27, 46, 0)) right center / 68px 100% no-repeat scroll;
  }
  /* Sticky is inert inside a scroll container; say so explicitly rather than
     leaving a rule that looks like it works. */
  .v2 .compare-table thead th { position: static; }
}

.v2 .compare-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  text-align: left;
}

/* Sticky tier header, pinned just under the nav so you never lose track of
   which column is which while reading 38 rows. */
.v2 .compare-table thead th {
  position: sticky;
  top: var(--nav-height);
  z-index: 3;
  background: var(--bg-void);
  padding: var(--s-3) var(--s-2);
  vertical-align: top;
  border-bottom: 1px solid var(--hairline-strong);
}
.v2 .compare-tier-name {
  display: block;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}
/* nowrap plus a slightly wider column: at 130px, "Start Business" and "Start
   Agency" broke onto two lines while "Start Free" and "Start Pro" stayed on
   one, so the four header buttons rendered at two different heights. */
.v2 .compare-cta {
  width: 100%;
  padding: 9px 10px;
  font-size: 12.5px;
  white-space: nowrap;
}
.v2 .compare-feature-col { min-width: 300px; }

/* Group heading rows. */
.v2 .compare-group th {
  padding: var(--s-4) var(--s-2) var(--s-2);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-voice);
  background: transparent;
}

.v2 .compare-table tbody th[scope="row"] {
  padding: 14px var(--s-2);
  font-weight: 400;
  font-size: 14px;
  color: var(--text-primary);
}
.v2 .compare-table td {
  padding: 14px var(--s-2);
  text-align: center;
  width: 148px;
}

/* --- The fading stripe ---
   Alternating rows are a horizontal gradient that fades out at both ends
   rather than a flat block of colour. A hard-edged stripe draws a box around
   every other row and makes a long table read as a grid of cells; a stripe
   that dissolves at the edges reads as a soft band of light behind the row,
   which is the treatment on the reference page. */
.v2 .compare-table tbody tr:nth-of-type(even):not(.compare-group) {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(238, 241, 248, 0.045) 14%,
    rgba(238, 241, 248, 0.045) 86%,
    transparent 100%
  );
}
.v2 .compare-table tbody tr:not(.compare-group):hover {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(108, 192, 255, 0.10) 12%,
    rgba(108, 192, 255, 0.10) 88%,
    transparent 100%
  );
}

/* The featured column gets a continuous faint band down the whole table, so
   the recommended tier stays visually tracked across 38 rows. */
.v2 .compare-table td.is-featured { background: rgba(108, 192, 255, 0.05); }
.v2 .compare-table thead th.is-featured { box-shadow: inset 0 -2px 0 var(--accent-voice); }

.v2 .compare-yes { width: 18px; height: 18px; color: var(--accent-voice); }
.v2 .compare-no { color: var(--text-muted); opacity: 0.5; }
.v2 .compare-value { font-size: 13px; color: var(--text-primary); }

.v2 .compare-foot {
  margin-top: var(--s-4);
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .v2 .pcard,
  .v2 .pcard::before,
  .v2 .pcard::after,
  .v2 .price-toggle-btn { transition: none; }
}