/* ============================================================
   /unlimited — Companion Unlimited on the web.

   Built from the approved canvas (docs/design/unlimited-paywall).
   Tokens are styles.css's own; the page adds only what a pricing
   page needs and reuses .btn / .btn-gold / .eyebrow / .section-head
   from there rather than restating them.
   ============================================================ */

/* .navbar / .nav-inner / .brand / .nav-links are styles.css's own — this page
   uses them as they are. The navbar is fixed, so the page clears it the same
   way .page-wrap does (150px). */
[hidden]{display:none !important}

.unl{position:relative;z-index:2;padding-bottom:90px}
.unl-hero{max-width:1140px;margin:0 auto;padding:150px 28px 0;text-align:center}
.unl-sage{display:block;margin:0 auto 18px;height:112px;width:auto;
  filter:drop-shadow(0 0 26px rgba(232,184,115,.28))}
.unl-hero h1{font-family:var(--font-display);margin:0 0 18px;
  font-size:clamp(34px,5vw,52px);line-height:1.14;letter-spacing:.02em;
  color:var(--starlight);font-weight:600;text-wrap:balance}
.unl-lede{max-width:620px;margin:0 auto 14px;font-size:clamp(14.5px,1.7vw,16.5px);
  line-height:1.7;color:#B4BDDD;font-weight:300}
.unl-sub{max-width:560px;margin:0 auto 40px;font-size:13px;line-height:1.6;
  color:var(--faint);font-weight:300}

/* ---- the state banner (signed out, already subscribed, back from checkout) ---- */
/* width, not max-width: at 430px a bare max-width:660px box is wider than the
   viewport and drags the whole page into a horizontal scroll */
.unl-state{width:calc(100% - 56px);max-width:660px;box-sizing:border-box;
  margin:0 auto 34px;padding:24px 26px;border-radius:18px;
  border:1px solid var(--line-faint);background:rgba(12,17,38,.88);text-align:center}
.unl-state.good{border-color:rgba(232,184,115,.5)}
.unl-state.info{border-color:rgba(91,227,213,.35)}
.unl-state.warn{border-color:rgba(232,106,154,.4)}
.unl-state .unl-sage{height:84px;margin-bottom:12px}
.unl-state h2{font-family:var(--font-display);font-size:19px;letter-spacing:.05em;
  color:var(--starlight);font-weight:600;margin:0 0 8px}
.unl-state p{margin:0;font-size:13.5px;line-height:1.65;color:#B4BDDD;font-weight:300}
.unl-state .btn{margin-top:16px}
.unl-pill{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;
  border-radius:999px;border:1px solid rgba(232,184,115,.5);color:var(--gold);
  font-size:11px;margin-bottom:14px}

/* ---- plans ---- */
.unl-plans{max-width:880px;margin:0 auto;padding:0 28px;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.plan{position:relative;padding:34px 30px;border-radius:18px;text-align:left;
  border:1px solid var(--line-faint);background:rgba(12,17,38,.88);
  font-family:var(--font-body);cursor:pointer;display:block;width:100%;
  transition:border-color .3s,background .3s,transform .3s}
.plan:hover{transform:translateY(-2px);border-color:rgba(232,184,115,.35)}
.plan.on{border-color:rgba(232,184,115,.55);
  background:linear-gradient(180deg,rgba(232,184,115,.09),rgba(12,17,38,.88))}
.plan-badge{position:absolute;top:-11px;left:30px;padding:4px 12px;border-radius:999px;
  background:linear-gradient(120deg,#F5D9A8,var(--gold) 45%,var(--bronze));color:#1A1206;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.plan-name{display:block;font-family:var(--font-display);font-size:19px;
  letter-spacing:.06em;color:var(--starlight);font-weight:600;margin-bottom:4px}
.plan-sub{display:block;font-size:12.5px;color:var(--faint);margin-bottom:18px}
.plan-price{display:flex;align-items:baseline;gap:4px}
.plan-price b{font-family:var(--font-display);font-size:clamp(30px,4vw,44px);
  color:var(--starlight);font-weight:600;font-variant-numeric:tabular-nums}
.plan.on .plan-price b{color:var(--gold)}
.plan-price i{font-style:normal;font-size:15px;color:var(--faint)}

.unl-go{max-width:880px;margin:26px auto 0;padding:0 28px;
  display:flex;flex-direction:column;align-items:center;gap:14px}
.unl-go .btn{border:0;cursor:pointer;font-family:var(--font-body)}
.unl-go .btn[disabled]{opacity:.6;cursor:default}
.unl-fine{margin:0;font-size:12px;color:var(--faint);font-weight:300;text-align:center}
.unl-err{margin:0;font-size:13px;line-height:1.6;color:var(--rose);
  font-weight:300;text-align:center;max-width:460px}

/* ---- what changes ---- */
.unl-what{max-width:940px;margin:76px auto 0;padding:0 28px}
.unl-what .section-head{margin-bottom:44px}
.unl-what h2{font-family:var(--font-display);margin:0;font-size:clamp(24px,3vw,31px);
  letter-spacing:.03em;color:var(--starlight);font-weight:600}
.unl-benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0;
  background:var(--line-faint);border:1px solid var(--line-faint);
  border-radius:18px;overflow:hidden}
.unl-benefits > div{background:rgba(7,11,28,.92);padding:28px 26px}
.unl-benefits dt{font-size:14.5px;color:var(--starlight);font-weight:500;margin-bottom:5px}
.unl-benefits dd{margin:0;font-size:13px;line-height:1.6;color:#B4BDDD;font-weight:300}

/* ---- the honest small print ---- */
.unl-terms{max-width:760px;margin:60px auto 0;padding:0 28px;text-align:center}
.unl-terms p{margin:0 0 10px;font-size:13px;line-height:1.75;color:var(--faint);font-weight:300}
.unl-links{font-size:12.5px !important;line-height:1.7 !important}
.unl-links a{color:var(--gold)}

@media(max-width:760px){
  .nav-links{gap:16px}
  .nav-links a{font-size:11.5px;letter-spacing:.08em}
  .unl-plans{grid-template-columns:1fr;gap:12px}
  .plan{padding:22px 20px;display:grid;grid-template-columns:1fr auto;
    align-items:end;column-gap:14px;row-gap:2px}
  .plan-badge{left:20px}
  .plan-name{grid-column:1;margin-bottom:0}
  .plan-sub{grid-column:1;margin-bottom:0}
  .plan-price{grid-column:2;grid-row:1 / span 2;align-self:center}
  .unl-benefits{grid-template-columns:1fr}
  .unl-sage{height:88px;margin-bottom:14px}
  .unl-go .btn{width:100%;justify-content:center;min-height:52px}
}