/*
 * PRICING CARDS — shared by the public pricing page and the Te Wairoa page.
 *
 * Authored for te-wairoa on 20 Sep 2026 and lifted out on 23 Sep when the public pricing page
 * needed the same cards. ONE definition on purpose: two copies of a card style drift, and the
 * whole reason these pages look like Tohu is that they do not re-implement Tohu.
 *
 * Depends on the variables the site stylesheet defines (--line, --ink, --blue, --green, --terra,
 * --cream, --serif, --sans), so it is linked AFTER it.
 */
  .wprice{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px;align-items:stretch}
  @media(max-width:980px){.wprice{grid-template-columns:1fr;max-width:30rem;margin-inline:auto}}
  .pplan{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px}
  .pplan h3{font-size:1.9rem}
  .pplan .desc{margin-top:.25em;font-size:.93rem;color:#54606a}
  .pplan .was{margin-top:18px;font-size:.88rem;color:#8a929a;text-decoration:line-through}
  .pplan .now{font-family:var(--serif);font-size:2.6rem;font-weight:600;line-height:1.1;color:var(--ink)}
  .pplan .now small{font-family:var(--sans);font-size:.95rem;font-weight:500;color:#54606a}
  /* The other cycle, under the headline figure — added 23 Sep 2026 when the public pricing page
     needed to show monthly as well as annual. */
  .pplan .cycle{margin-top:.35em;font-size:.86rem;color:#54606a}
  .pplan .save{display:inline-block;margin-top:10px;font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;color:#fff;background:var(--terra);border-radius:999px;padding:5px 12px}
  .pplan ul{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:.94rem;color:#54606a;flex:1}
  .pplan ul li::before{content:"✓";color:var(--green);font-weight:700;margin-right:.6em}
  .pplan .yeartwo{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
  .pplan .yeartwo strong{display:block;font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;color:var(--green)}
  .pplan .yeartwo p{margin-top:.4em;font-size:.88rem;color:#54606a}
  /* §6/§7: the dollar figure is SECONDARY — the entitlement is the 30%, and today's price moves. */
  .pplan .yeartwo .atprice{margin-top:.5em;font-size:.82rem;color:#7b848c}
  .pplan .trial{margin-top:16px;font-size:.88rem;font-weight:600;color:var(--blue)}
  .pplan .btn{margin-top:14px;justify-content:center;width:100%}
  /* 24 Sep 2026 — the same card, two ways in: the trial button and, beneath it, straight to payment. */
  .pplan .paynow{display:block;margin-top:10px;text-align:center;font-size:.86rem;font-weight:600;color:#54606a}
  .pplan .paynow:hover{color:var(--blue);text-decoration:underline}
  /*
   * §8 — Rūnanga should read as an intentional upcoming tier, not a disabled card: same border,
   * radius, shadow, padding and column layout as the other two, only a calmer ground.
   */
  .pplan.soon{background:var(--cream)}
  .pplan.soon .soonline{margin-top:22px;font-family:var(--serif);font-size:1.5rem;color:#54606a}
  .pplan.soon ul li::before{content:none}
  .pplan.soon ul li{color:#54606a}
  /*
   * §13 — one row, one height, and the buttons on a line.
   * The cards stretch to the tallest (align-items:stretch on the grid), the feature list takes the
   * slack (flex:1 above), and `margin-top:auto` pins the trial line and the button to the bottom
   * whatever the list length. No per-card spacing, so a feature added later cannot knock a CTA out
   * of line — which is how the row drifted in the first place.
   */
  .wprice{align-items:stretch}
  .pplan .trial{margin-top:auto;padding-top:16px}
  .pplan.soon .btn{margin-top:auto}
  /* §12 — the SAME declaration the public site uses for <em>tikanga</em> in its hero (.hero h1 em),
     applied to the subheading where 'mana' lives. Reused, not re-invented. */
  .hero p.lead em{font-style:italic;color:var(--blue)}
  .terms{margin-top:34px;font-size:.82rem;line-height:1.6;color:#6d777f;max-width:60em}

  .wcontact{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:18px;font-size:1rem}
  .wcontact a{color:var(--blue);font-weight:600}