/* Per-tier plan pages (/pricing/free, /pro, /business, /agency).
 *
 * Built entirely on the existing tokens rather than new values: these pages sit
 * one click from /pricing and must read as the same site, not a variant of it.
 *
 * Colour grammar, which tools/verify-v2.mjs enforces: coral is ACTION ONLY and
 * appears here on exactly one thing, the buy button. Marine blue is brand voice
 * and appears on the eyebrow. Group titles and feature ticks stay neutral --
 * a page of coral ticks would spend the one colour that means "press this".
 */

.tier-intro { max-width: 640px; }

/* .section-title centres itself, which is right for the centred section heads
   this site uses everywhere else and wrong here: the eyebrow, positioning line,
   price and button are all left-aligned, so a centred h1 sat visibly off-axis
   from its own block. Three classes to win outright rather than relying on
   tier.css loading after sections.css. */
.v2 .tier-intro .section-title { text-align: left; margin-bottom: var(--s-3); }

/* The intro is short, so the standard section padding -- applied at both the
   bottom of this one and the top of the next -- left a large empty band between
   the buy button and the feature list. Both sides are trimmed because either
   alone still leaves most of the gap.
   .v2-prefixed: the site's own rule is `.v2 .section`, and a bare .tier-head
   loses to it on specificity, which is why the first attempt did nothing. */
.v2 .tier-head { padding-bottom: var(--s-4); }
.v2 .tier-features { padding-top: var(--s-4); }

.tier-positioning {
  font-size: 1.05rem;
  color: var(--text-muted);
  margin: 0 0 var(--s-4);
}

.tier-price {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  line-height: 1.1;
  margin: 0 0 var(--s-1);
}

/* The alternative billing period, deliberately quiet: showing both at equal
   weight makes a buyer compare two of our own numbers instead of deciding. */
.tier-price-alt {
  font-family: inherit;
  font-size: 1rem;
  color: var(--text-muted);
  margin-left: var(--s-2);
}

.tier-limits { margin: 0 0 var(--s-1); color: var(--text-primary); }

.tier-vat { margin: 0 0 var(--s-4); color: var(--text-muted); font-size: 0.85rem; }

.tier-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }

/* Free's state until a signup flow exists. Styled as a button that plainly
   cannot be pressed rather than hidden, because the tier IS available -- it is
   the download that is not yet, and a missing button would read as a missing
   plan. */
.btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.tier-cta-note {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  flex: 1 1 260px;
}
/* The global .v2 a reset strips colour and underline, which leaves a link
   inside a paragraph indistinguishable from the sentence around it. Already
   fixed once for the legal pages and once for the account pages. */
.tier-cta-note a { color: var(--accent-voice); text-decoration: underline; }

.tier-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-5);
}

.tier-group {
  background: var(--bg-surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: var(--s-4);
}

.tier-group-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  margin: 0 0 var(--s-3);
}

.tier-list { list-style: none; margin: 0; padding: 0; }

.tier-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: var(--s-2);
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* A tick drawn in text rather than an icon file: one glyph, no request, and it
   inherits the list's own colour so it cannot drift from it. */
.tier-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--text-primary);
}

.tier-compare-link { margin-top: var(--s-5); }
.tier-compare-link a { color: var(--accent-voice); text-decoration: underline; }

@media (max-width: 600px) {
  .tier-price { font-size: 1.9rem; }
  /* One column below 600px: two 280px tracks plus the gap overflow a 375px
     screen, and the grid would otherwise keep trying to fit them. */
  .tier-groups { grid-template-columns: 1fr; }
}

/* --- Free's signup form ---------------------------------------------------
   Only the Free plan page renders this; the other three go to /checkout.

   Palette grammar, which tools/verify-v2.mjs enforces: CORAL IS ACTION ONLY,
   and there is one filled coral button per viewport -- here, the submit. Marine
   is brand voice and is spent on the focus ring and links. The error notice
   takes a muted red of its own rather than borrowing coral: coral means "press
   me" everywhere on this site, and spending it on a warning would blunt that
   signal on every other page. */
/* The top margin replaces spacing that .tier-vat used to provide. Free hides
   that line -- there is no VAT on EUR 0 -- and without this the plan's limits
   ("1 site - 1 seat") crowd the first form label. s-3 here plus .tier-limits'
   own s-1 comes to the s-4 the VAT paragraph gave. */
.signup-form,
.signup-sent {
  margin-top: var(--s-3);
}

.signup-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  flex: 1 1 320px;
  max-width: 420px;
}

.signup-form label { font-size: 14px; color: var(--text-muted); }

/* Matched to .account-form's input rather than restyled, so the two places a
   visitor types an email into this site look like the same product. */
.signup-form input[type="email"] {
  padding: 12px var(--s-2);
  border-radius: var(--radius-btn);
  border: 1px solid var(--border-strong);
  background: var(--bg-void);
  color: var(--text-primary);
  font: inherit;
  font-size: 15px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.signup-form input[type="email"]::placeholder { color: var(--text-muted); opacity: .6; }

/* Marine, not coral: a focus ring is feedback, not an action. */
.signup-form input[type="email"]:focus {
  outline: none;
  border-color: var(--accent-voice);
  box-shadow: 0 0 0 3px rgba(108, 192, 255, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  .signup-form input[type="email"] { transition: none; }
}

.signup-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: var(--s-1);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  cursor: pointer;
}

/* Custom-drawn rather than left to the browser. accent-color only paints the
   CHECKED state, so an unchecked native box renders as a stark white square --
   which made it the brightest object in the form and pulled the eye off the
   submit button, the one thing this page wants pressed. Optional consent must
   not outshout the primary action. */
.signup-consent input[type="checkbox"] {
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--bg-void);
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: border-color .15s ease;
}

.signup-consent input[type="checkbox"]::before {
  content: "";
  width: 9px;
  height: 9px;
  transform: scale(0);
  transition: transform .12s ease;
  box-shadow: inset 1em 1em var(--accent);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.signup-consent input[type="checkbox"]:checked::before { transform: scale(1); }
.signup-consent input[type="checkbox"]:checked { border-color: var(--accent); }
.signup-consent:hover input[type="checkbox"] { border-color: var(--hairline-strong); }

.signup-consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent-voice);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .signup-consent input[type="checkbox"],
  .signup-consent input[type="checkbox"]::before { transition: none; }
}

.signup-form .btn-primary { align-self: flex-start; margin-top: var(--s-1); }

.signup-reassure { flex-basis: 100%; margin-top: var(--s-2); }

/* Muted red, and low-key on purpose. The only error a visitor can actually see
   here is a failed challenge, which is nobody's fault and is fixed by trying
   again -- so it reads as information rather than as an alarm. */
.signup-error {
  flex-basis: 100%;
  margin: 0 0 var(--s-2);
  padding: 10px 14px;
  border: 1px solid rgba(224, 122, 122, 0.34);
  border-left: 3px solid #e07a7a;
  border-radius: var(--radius-btn);
  background: rgba(224, 122, 122, 0.08);
  color: #f0b8b8;
  font-size: 14px;
}

/* The sent state replaces the form rather than sitting beside it: the visitor
   has exactly one thing to do now, and it is in their inbox. */
.signup-sent {
  flex: 1 1 100%;
  padding: var(--s-3);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-card, 14px);
  background: var(--bg-surface-alt);
}

.signup-sent-title {
  margin: 0 0 6px;
  font-size: 1.15rem;
  color: var(--text-primary);
}

.signup-sent-body { margin: 0 0 var(--s-1); color: var(--text-primary); }