/* ============================================================
   RadioGrub — pricing.css
   The tier ladder (home + /pricing), the /pricing page, and the
   application form's plan picker. Tokens only.
   ============================================================ */

.tierGrid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; align-items:stretch; }
.tier{
  display:flex; flex-direction:column; min-width:0;
  background:var(--surface); border:1px solid var(--line2); border-radius:var(--r20);
  padding:26px 24px; box-shadow:var(--shadow2);
}
.tier--highlight{ border-color:var(--accentText); box-shadow:0 18px 40px rgba(226,27,35,.14); }
.tierTop{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.tierName{ margin:0; font-size:20px; font-weight:980; letter-spacing:-.3px; }
.tierLaunch{ font-size:11px; font-weight:950; letter-spacing:.06em; text-transform:uppercase; color:var(--text);
  background:var(--warmSoft); border:1px solid rgba(255,198,26,.5); padding:4px 9px; border-radius:999px; white-space:nowrap; }
.tierPrice{ margin:18px 0 0; display:flex; align-items:baseline; gap:6px; }
.tierAmt{ font-size:clamp(34px, 3.4vw, 44px); font-weight:980; letter-spacing:-1.2px; line-height:1; }
.tierPer{ color:var(--muted); font-weight:800; }
.tierBlurb{ margin:10px 0 0; color:var(--muted); font-weight:650; font-size:14.5px; line-height:1.5; }
.tierList{ list-style:none; margin:20px 0 24px; padding:0; display:flex; flex-direction:column; gap:11px; font-size:14px; font-weight:750; line-height:1.4; }
.tierList li{ display:flex; gap:10px; align-items:flex-start; }
.tierList svg{ width:16px; height:16px; flex:0 0 auto; margin-top:2px; color:var(--accentText); }
.tierCta{ margin-top:auto; justify-content:center; }
.tierNote{ margin:14px 0 0; color:var(--muted2); font-weight:700; font-size:13px; }

/* /pricing */
#view-pricing .wrap{ padding-top:26px; }
.prHero{ text-align:center; padding:34px 10px 38px; }
.prKicker{ color:var(--accentText); display:inline-block; font-size:12px; font-weight:950; letter-spacing:.08em; text-transform:uppercase;
  background:var(--accentSoft); border:1px solid var(--accentLine); padding:6px 12px; border-radius:999px; }
.prHero h1{ margin:16px 0 0; font-size:clamp(34px, 5vw, 56px); font-weight:980; letter-spacing:-1.4px; line-height:1.03; }
.prHero p{ margin:16px auto 0; max-width:58ch; color:var(--muted); font-weight:650; font-size:17px; line-height:1.55; }
.prSteps{ list-style:none; counter-reset:step; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
.prSteps li{ counter-increment:step; background:var(--surface); border:1px solid var(--line2); border-radius:var(--r16); padding:20px; display:flex; flex-direction:column; gap:8px; }
.prSteps li::before{ content:counter(step); width:32px; height:32px; border-radius:50%; background:var(--accent); color:#fff; font-weight:950; display:flex; align-items:center; justify-content:center; }
.prSteps b{ font-size:16px; font-weight:950; }
.prSteps span{ color:var(--muted); font-weight:650; font-size:14px; line-height:1.5; }
.prFaq details{ border-bottom:1px solid var(--line2); padding:14px 0; }
.prFaq summary{ cursor:pointer; font-weight:900; font-size:16px; }
.prFaq details p{ margin:10px 0 0; color:var(--muted); font-weight:650; line-height:1.6; max-width:70ch; }
.prFaq a{ color:var(--accentText); font-weight:900; }
.prCta{ margin-top:56px; text-align:center; padding:42px 20px; border-radius:var(--r20); background:linear-gradient(135deg, var(--accent), var(--accent2)); color:#fff; }
.prCta h2{ margin:0 0 18px; font-size:clamp(24px, 3vw, 32px); font-weight:980; letter-spacing:-.6px; }

/* application form: plan picker */
.cwTiers{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-bottom:26px; }
.cwTier{ text-align:left; border:1.5px solid var(--line2); border-radius:14px; padding:14px; background:var(--surface); cursor:pointer; font-family:inherit; color:inherit; }
.cwTier:hover{ border-color:var(--accentLine); }
.cwTier.sel{ border-color:var(--accentText); background:var(--accentSoft); box-shadow:0 0 0 3px var(--accentSoft); }
.cwTier b{ display:block; font-size:15px; font-weight:950; }
.cwTier span{ display:block; margin-top:4px; font-weight:900; font-size:14px; }
.cwTier small{ display:block; margin-top:6px; color:var(--muted); font-weight:650; font-size:12px; line-height:1.4; }
#view-create .cwH2{ margin:8px 0 4px; font-size:18px; font-weight:950; letter-spacing:-.2px; }
#view-create .cwSuccessArt svg{ width:46px; height:46px; color:#fff; }
.cwMail{ margin-top:14px; }

/* home: the Near you panel */
.nearPanel{
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
  padding:30px; border-radius:var(--r20); border:1px solid var(--line2);
  background:
    radial-gradient(420px 220px at 90% 0%, rgba(226,27,35,.10), transparent 60%),
    repeating-radial-gradient(circle at 100% 50%, transparent 0 38px, rgba(0,0,0,.92) 38px 39px),
    var(--surface);
}
.nearPanel h2{ margin:0; font-size:clamp(22px, 2.4vw, 28px); font-weight:980; letter-spacing:-.6px; }
.nearPanel p{ margin:6px 0 0; color:var(--muted); font-weight:650; max-width:52ch; line-height:1.5; }
.nearPanelForm{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.nearPanelForm .btn svg{ width:18px; height:18px; }
.nearPanelForm .ctrl{ width:120px; }
.nearOr{ color:var(--muted2); font-weight:850; font-size:13px; }

@media (max-width:900px){
  .tierGrid, .prSteps{ grid-template-columns:1fr; }
  .cwTiers{ grid-template-columns:1fr; }
}

/* ---- "Coming soon" — announced, not shipped. A quiet outline, not a colour:
   red is for the thing to press, amber is for LIVE. ---- */
.tierSoon{
  display:inline-block; vertical-align:2px; margin-left:4px;
  font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  padding:2px 7px; border-radius:999px;
  color:var(--text); border:1px solid var(--line3); background:rgba(255,255,255,.04);
}
.tierSoonLine span{ color:var(--text); }

/* ---- add-on rows: part of the ladder, under the tiers ---- */
.tierAddon{
  margin-top:18px;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:20px; align-items:center;
  background:var(--surface); border:1px dashed var(--line3); border-radius:var(--r20);
  padding:20px 24px;
}
.tierAddonIcon{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--accentSoft); border:1px solid var(--accentLine); color:var(--accentText);
}
.tierAddonIcon svg{ width:26px; height:26px; }
.tierAddonKicker{ margin:0; font-size:12px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:var(--muted2); }
.tierAddonName{ margin:6px 0 0; font-size:18px; font-weight:950; letter-spacing:-.3px; line-height:1.3; }
.tierAddonDetail{ margin:6px 0 0; color:var(--muted); font-weight:650; font-size:14px; line-height:1.5; max-width:70ch; }
.tierAddonSide{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; text-align:right; }
.tierAddonPrice{ font-size:20px; font-weight:980; letter-spacing:-.4px; white-space:nowrap; }
.tierAddonCta{ white-space:nowrap; }

@media (max-width:760px){
  .tierAddon{ grid-template-columns:auto minmax(0,1fr); padding:18px; }
  .tierAddonSide{ grid-column:1 / -1; flex-direction:row; justify-content:space-between; align-items:center; text-align:left; }
}