/* Pricing page (live from 26/09/2026; generated by marketing/pricing-page/build_pricing_page.py; edit the mockup, not this file).
   The plans sit on the dark hero ground (the site's dark bookend carried down),
   as dark glass cards outlined in their metal. The recommended card carries a
   ring that travels its outline continuously. The ring is drawn in the border
   box only, so it can never pass over the card's text. */

@property --ring {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

:root {
  --bronze: #C8895A; --bronze-lo: #8A5A30;
  --silver: #B9C3CF; --silver-lo: #6E7A89;
  --gold:   #D9B45A; --gold-lo:   #8F7020;
}

/* ── Plans, on dark ── */
.plans {
  position: relative; background: var(--ink); color: var(--d-text);
  padding-block: clamp(24px, 3vw, 40px) clamp(80px, 10vw, 128px);
  isolation: isolate;
}
.plans::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 35%, rgba(0,166,204,.10), transparent 70%);
}

.tier-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 26px); align-items: center;
}

.tier {
  --m: var(--silver); --m-lo: var(--silver-lo);
  --ring-base: color-mix(in srgb, var(--m) 55%, transparent);
  position: relative; display: flex; flex-direction: column;
  padding: 36px 32px 32px;
  border-radius: var(--r-lg);
  border: 3px solid color-mix(in srgb, var(--m) 80%, transparent);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  transition: transform .5s cubic-bezier(.2,.7,.3,1), border-color .3s;
}
.tier--bronze { --m: var(--bronze); --m-lo: var(--bronze-lo); }
.tier--gold   { --m: var(--gold);   --m-lo: var(--gold-lo); }
.tier:hover { transform: translateY(-3px); border-color: var(--m); }

.tier-name {
  text-align: center;
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(24px, 2.4vw, 28px); letter-spacing: -0.02em; line-height: 1.1;
  font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 1;
  color: var(--d-text); margin-bottom: 8px;
}
.tier-who { text-align: center; font-size: 15px; line-height: 1.5; color: var(--d-muted); margin-bottom: 28px; }

.tier-price { display: flex; justify-content: center; align-items: baseline; gap: 10px; margin-bottom: 28px; }
.tier-price .amt {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(48px, 5vw, 62px); line-height: 1; letter-spacing: -0.035em;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
  color: var(--d-text);
}
.tier-price .per { font-size: 15px; color: var(--d-muted); }

.tier-limits {
  list-style: none; margin: 0 0 30px; padding-top: 22px;
  border-top: 1px solid var(--d-line); display: grid; gap: 12px;
}
.tier-limits li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.5; color: var(--d-muted); }
.tier-limits li::before {
  content: ""; position: absolute; left: 3px; top: 5px; width: 5px; height: 9px;
  border: solid var(--cyan); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.tier-limits strong { color: var(--d-text); font-weight: 600; }

.tier-cta {
  width: 100%; color: var(--d-text);
  border: 1px solid var(--d-line); background: rgba(255,255,255,.04);
}
.tier-cta:hover { border-color: rgba(0,212,255,.5); background: rgba(0,212,255,.08); transform: translateY(-1px); }

/* ── Recommended card ── */
.tier-badge {
  display: none; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  padding: 7px 16px; border-radius: 999px; white-space: nowrap; z-index: 2;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: #04121C; background: linear-gradient(180deg, #00E0FF 0%, var(--cyan-deep) 100%);
  box-shadow: 0 8px 22px rgba(0,166,204,.35);
}
.tier.is-featured {
  padding-block: 50px 40px;
  border: 3.5px solid var(--m);
  background:
    linear-gradient(180deg, #13223A, #0B1628) padding-box,
    linear-gradient(var(--m), var(--m)) border-box;
  box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 60px -10px color-mix(in srgb, var(--m) 30%, transparent);
  z-index: 1;
}
.tier.is-featured .tier-badge { display: block; }
.tier.is-featured .tier-cta {
  border: none; color: #04121C;
  background: linear-gradient(180deg, #00E0FF 0%, var(--cyan-deep) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 10px 26px rgba(0,166,204,.28);
}
/* The moving ring: a conic gradient painted in the border box only, turning
   continuously. The card's own background covers the padding box, so the ring
   shows in the border and nowhere else. */
.tier.is-featured.has-ring {
  border-color: transparent;
  background:
    linear-gradient(180deg, #13223A, #0B1628) padding-box,
    conic-gradient(from var(--ring),
      var(--ring-base) 0deg, var(--ring-base) 220deg,
      #fff 290deg, var(--cyan) 320deg,
      var(--ring-base) 360deg) border-box;
  animation: tier-ring 4.5s linear infinite;
}
@keyframes tier-ring { to { --ring: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .tier.is-featured.has-ring { animation: none; }
  .tier, .tier:hover { transition: none; transform: none; }
}

.plans-fine {
  margin: 40px auto 0; max-width: 720px; text-align: center;
  font-size: 13px; line-height: 1.6; color: var(--d-faint);
}

/* ── Every plan includes (the site's feature-card look) ── */
.includes { background: var(--paper-sunk); padding-block: clamp(80px, 10vw, 128px); }
.includes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 26px); }
.inc {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px 28px; box-shadow: var(--sh-sm); transition: box-shadow .4s, border-color .4s;
}
.inc:hover { box-shadow: var(--sh-md); border-color: rgba(0,166,204,.3); }
.inc h3 {
  font-family: var(--f-display); font-weight: 600; font-size: clamp(18px, 1.8vw, 21px);
  line-height: 1.2; letter-spacing: -0.018em; margin-bottom: 10px; font-variation-settings: "opsz" 40;
}
.inc p { font-size: 15px; line-height: 1.64; color: var(--text-muted); }

/* ── How calls are counted ── */
.counted { padding-block: clamp(56px, 7vw, 96px); }

/* ── Setup banner ── */
.setup { background: var(--paper); padding-block: 0 clamp(80px, 10vw, 120px); }
.setup-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: 28px 48px;
  padding: clamp(32px, 4.5vw, 56px);
  border-radius: var(--r-lg); background: var(--ink); color: var(--d-text);
  box-shadow: var(--sh-lg);
}
.setup-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(70% 120% at 100% 50%, rgba(0,166,204,.18), transparent 60%);
}
.setup-card .eyebrow { color: var(--cyan); }
.setup-card h2 {
  font-family: var(--f-display); font-weight: 600; font-size: clamp(26px, 3vw, 36px);
  line-height: 1.1; letter-spacing: -0.022em; margin-bottom: 14px;
  font-variation-settings: "opsz" 96, "SOFT" 0, "WONK" 1;
}
.setup-card h2 em { font-style: italic; font-weight: 500; color: var(--cyan); }
.setup-copy p:last-child { font-size: 15.5px; line-height: 1.65; color: var(--d-muted); max-width: 56ch; }
.setup-action { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; justify-self: end; }
.setup-fine { font-size: 13.5px; color: var(--d-faint); }

@media (max-width: 900px) {
  .tier-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; gap: 34px; }
  .includes-grid { grid-template-columns: 1fr 1fr; }
  .setup-card { grid-template-columns: 1fr; }
  .setup-action { justify-self: start; }
}
@media (max-width: 620px) {
  .includes-grid { grid-template-columns: 1fr; }
}

/* ══ Card style options (chosen in the mockup controls) ══ */

/* Each plan's metal as a fill, with text colours that read on it */
.tier--bronze { --fill: linear-gradient(160deg, #D9A273, #A8683A 55%, #7A4A22); --ft: #FFFFFF; --fm: rgba(255,255,255,.84); --fl: rgba(255,255,255,.3); }
.tier--silver { --fill: linear-gradient(160deg, #F1F4F8, #C6CED8 55%, #97A2B0); --ft: #0A1628; --fm: #3B4759; --fl: rgba(10,22,40,.16); }
.tier--gold   { --fill: linear-gradient(160deg, #F7E6A8, #D9B45A 55%, #AE8729); --ft: #261B04; --fm: #4A3A12; --fl: rgba(38,27,4,.18); }

/* Option 1: metal card backgrounds */
.plans.fill-metal .tier { background: var(--fill); border-color: var(--m-lo); --ring-base: var(--m-lo); }
.plans.fill-metal .tier.is-featured { background: var(--fill) padding-box, linear-gradient(var(--m-lo), var(--m-lo)) border-box; }
.plans.fill-metal .tier.is-featured.has-ring {
  background:
    var(--fill) padding-box,
    conic-gradient(from var(--ring), var(--ring-base) 0deg, var(--ring-base) 220deg, #fff 290deg, var(--cyan) 320deg, var(--ring-base) 360deg) border-box;
}
.plans.fill-metal .tier-name,
.plans.fill-metal .tier-price .amt,
.plans.fill-metal .tier-limits strong { color: var(--ft); }
.plans.fill-metal .tier-who,
.plans.fill-metal .tier-price .per,
.plans.fill-metal .tier-limits li { color: var(--fm); }
.plans.fill-metal .tier-limits { border-top-color: var(--fl); }
.plans.fill-metal .tier-limits li::before { border-color: var(--ft); }
.plans.fill-metal .tier-cta { color: var(--ft); border-color: var(--fl); background: rgba(255,255,255,.18); }
.plans.fill-metal .tier-cta:hover { background: rgba(255,255,255,.3); border-color: var(--ft); }
.plans.fill-metal .tier.is-featured .tier-cta { color: #04121C; }

/* Option 2: the plan name sits in its own metal box */
.plans.name-plate .tier-name {
  display: table; margin: 0 auto 14px; padding: 8px 26px 9px; border-radius: 12px;
  background: var(--fill); color: var(--ft);
  border: 1.5px solid rgba(255,255,255,.45);
  box-shadow: 0 8px 20px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.35);
}
.plans.fill-metal.name-plate .tier-name { border-color: var(--fl); box-shadow: 0 6px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.4); }

/* ══ Rev 5 (26/09/2026): every plan button in WeTalk blue; the recommended card
   framed in WeTalk blue all round, with a bright arc circling it like a loader.
   Placed last so it wins in every card-style option. ══ */
.plans .tier .tier-cta,
.plans.fill-metal .tier .tier-cta {
  border: none; color: #04121C;
  background: linear-gradient(180deg, #00E0FF 0%, var(--cyan-deep) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 10px 24px -6px rgba(0,166,204,.45);
}
.plans .tier .tier-cta:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 16px 30px -6px rgba(0,166,204,.55); }

.plans .tier.is-featured {
  border: 4px solid transparent;
  --blue-frame: linear-gradient(var(--cyan), var(--cyan));
  box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(0,212,255,.25), 0 0 46px -4px rgba(0,212,255,.55);
}
.plans .tier.is-featured:not(.has-ring) { background: var(--card-fill, linear-gradient(180deg, #13223A, #0B1628)) padding-box, var(--blue-frame) border-box; }
.plans.fill-metal .tier.is-featured:not(.has-ring) { background: var(--fill) padding-box, var(--blue-frame) border-box; }
.plans .tier.is-featured.has-ring {
  --loader: conic-gradient(from var(--ring),
    var(--cyan-deep) 0deg, var(--cyan-deep) 250deg,
    #7FEFFF 300deg, #FFFFFF 340deg, var(--cyan) 358deg, var(--cyan-deep) 360deg);
  background: linear-gradient(180deg, #13223A, #0B1628) padding-box, var(--loader) border-box;
  animation: tier-ring 2.8s linear infinite;
}
.plans.fill-metal .tier.is-featured.has-ring { background: var(--fill) padding-box, var(--loader) border-box; }
.plans .tier.is-featured .tier-badge { border: none; }

@media (prefers-reduced-motion: reduce) { .plans .tier.is-featured.has-ring { animation: none; } }

/* Bronze: black writing on a lighter bronze */
.tier--bronze {
  --fill: linear-gradient(160deg, #EBBE93, #CC8C57 55%, #A56C3E);
  --ft: #0A0A0A; --fm: #2E1A0A; --fl: rgba(10,10,10,.2);
}

/* ══ Rev 6 (26/09/2026): white cards held in a thick metal band; taller,
   narrower cards with wider gaps. The recommended card's blue loader ring
   sits outside its silver band. Placed last so it wins in every option. ══ */
.tier--bronze { --band: linear-gradient(145deg, #F0C9A0 0%, #C8895A 35%, #8A5A30 70%, #D9A273 100%); }
.tier--silver { --band: linear-gradient(145deg, #E4E9EF 0%, #B9C3CF 35%, #8491A1 70%, #CDD4DD 100%); }
.tier--gold   { --band: linear-gradient(145deg, #FBEBB0 0%, #D9B45A 35%, #A8801F 70%, #F0D78A 100%); }

.plans .tier-grid {
  grid-template-columns: repeat(3, minmax(0, 330px));
  justify-content: center; align-items: stretch;
  gap: clamp(40px, 5vw, 72px);
  padding-top: 24px;
}
.plans .tier { min-height: 560px; }
.plans .tier .tier-name { margin-bottom: 12px; }
.plans .tier .tier-who { min-height: 3em; margin-bottom: 36px; }
.plans .tier .tier-price { margin-bottom: 40px; }
.plans .tier .tier-limits { padding-top: 28px; gap: 16px; margin-bottom: 40px; }
.plans.fill-metal .tier,
.plans .tier,
.plans.fill-metal .tier.is-featured:not(.has-ring),
.plans .tier.is-featured:not(.has-ring),
.plans.fill-metal .tier.is-featured.has-ring,
.plans .tier.is-featured.has-ring {
  padding: 60px 30px 36px;
  border: 14px solid transparent;
  border-radius: 30px;
  background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, var(--band) border-box;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  animation: none;
}
.plans .tier.is-featured { box-shadow: 0 24px 60px rgba(0,0,0,.35), 0 0 60px -6px rgba(0,212,255,.45); }

.plans .tier .tier-name,
.plans .tier .tier-price .amt,
.plans .tier .tier-limits strong { color: #0A1628; }
.plans .tier .tier-who,
.plans .tier .tier-price .per,
.plans .tier .tier-limits li { color: #4A5568; }
.plans .tier .tier-limits { border-top-color: rgba(10,22,40,.12); }
.plans .tier .tier-limits li::before { border-color: var(--cyan-deep); }
.plans .tier .tier-cta { margin-top: auto; }

/* Plan names in the site's sans (DM Sans, bold); prices in a slightly narrow
   semi-bold sans, with "a fortnight" underneath. The number font is switchable
   in the mockup controls until one is chosen. */
.plans .tier .tier-name {
  font-family: var(--f-body); font-weight: 700;
  font-size: clamp(26px, 2.4vw, 30px); letter-spacing: -0.02em; line-height: 1.1;
  font-variation-settings: normal;
}
.plans .tier .tier-price { flex-direction: column; align-items: center; gap: 6px; margin-bottom: 32px; }
.plans .tier .tier-price .amt {
  font-family: 'Inter Tight', var(--f-body); font-weight: 600;
  font-size: clamp(52px, 5.2vw, 64px); letter-spacing: -0.035em;
  font-variation-settings: normal;
}
.plans .tier .tier-price .per { font-size: 17px; }

/* Cards sit just under the headline (this file loads on the pricing page only). */
.page-head { padding-bottom: clamp(16px, 2vw, 24px); }
.plans { padding-top: 0; }

/* The ring is its own box, masked to a hollow band. It shows 7px outside the
   silver band and overlaps the band by 2px so no hairline of page shows
   between them: outer edge 21px out from the padding edge, 9px thick. */
.plans .tier.is-featured.has-ring::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -21px;
  border-radius: 37px;
  padding: 9px;
  background: conic-gradient(from var(--ring),
    var(--cyan-deep) 0deg, var(--cyan-deep) 250deg,
    #7FEFFF 300deg, #FFFFFF 340deg, var(--cyan) 358deg, var(--cyan-deep) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: tier-ring 2.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .plans .tier.is-featured.has-ring::after { animation: none; }
}

/* Badge: bigger, centred on the ring line so it hangs off the top of the card
   and the spinning ring passes behind it (ring z -1, badge z 3). */
.plans .tier.is-featured .tier-badge {
  top: -18px; z-index: 3;
  padding: 10px 26px; font-size: 15px; font-weight: 700; letter-spacing: .02em;
}
.plans .tier-grid { padding-top: 40px; }

@media (max-width: 900px) {
  .plans .tier-grid { grid-template-columns: minmax(0, 360px); gap: 56px; }
  .plans .tier { min-height: 0; }
}