/* ============================================================================
   Subscription screen — the in-app upgrade path.

   Lives as a full-screen overlay opened from the header "Upgrade" button and
   from the landing's ?plan= deep-link. The design mirrors the landing pricing
   cards (same copy, same order, Pro = Most Popular) so a visitor who came from
   the landing sees the same thing after signing in.

   Two hard rules carried over from the landing bugs:
     (a) [hidden] must WIN. The panel is shown/hidden with the `hidden`
         attribute; the guard below makes sure our own display:flex can never
         override it and leak the panel on screen.
     (b) Never render an unverified value — that lives in the JS (elements start
         hidden and are only revealed once a fetch resolves).
   ============================================================================ */

/* The header Upgrade CTA. It carries class="ghost" like Projects/Studio, so it blends in;
   override to a brand-gradient pill so it reads as the one upgrade action — without taking the
   lime accent, which Export owns (the "one lime per screen" rule). */
#upgradeBtn{
  background:var(--grad); color:#fff; border:1px solid transparent; font-weight:700;
  box-shadow:0 4px 14px -5px rgba(139,92,246,.55);
}
#upgradeBtn:hover{ filter:brightness(1.08); background:var(--grad); color:#fff; border-color:transparent; }

/* (a) the guard — [hidden] beats every display rule in this file */
#subPanel[hidden]{ display:none !important; }

#subPanel{
  position:fixed; inset:0; z-index:1200;
  display:flex; flex-direction:column;
  background:rgba(7,6,9,.86); backdrop-filter:blur(10px);
  overflow:auto; overscroll-behavior:contain;
  animation:subFade .18s ease;
}
@keyframes subFade{ from{opacity:0} to{opacity:1} }

.sub-wrap{
  width:100%; max-width:1000px; margin:auto;
  padding:clamp(20px,5vw,56px) clamp(16px,4vw,40px);
}

/* Centered header block; close button pulled out to an absolute corner so it doesn't offset the
   centering. Side padding keeps a long centered title clear of the button. */
.sub-top{ position:relative; text-align:center; margin-bottom:22px; padding:0 46px; }
.sub-title{ font-family:var(--font-disp); font-size:1.6rem; font-weight:700; letter-spacing:-.025em; color:var(--tx); }
.sub-sub{ color:var(--tx2); font-size:.92rem; margin-top:6px; }
/* A REAL CONTROL, not a floating glyph. This was a 38px circle holding a bare "×" — chrome that
   reads as unfinished on the one screen where we ask for money. It is now a .c-btn ghost like
   every other dismissal in the product; all this rule does is place it. The circle geometry is
   gone deliberately: the component library owns how a button looks, and a second opinion about
   that is how four upgrade surfaces ended up looking like four products. */
.sub-close{ position:absolute; top:0; right:0; }

/* ---- current plan + usage strip (hidden until /api/billing resolves) ---- */
.sub-current{
  margin:22px 0 26px; padding:16px 18px;
  background:var(--srf); border:1px solid var(--bd); border-radius:var(--r-lg);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 26px;
}
.sub-current .cur-plan{ font-weight:800; color:var(--tx); font-size:1.02rem; }
.sub-current .cur-plan b{ color:var(--brand-2); text-transform:capitalize; }
.sub-current .cur-usage{ color:var(--tx2); font-size:.88rem; }
.sub-current .cur-usage b{ color:var(--tx); }
.sub-current .cur-spacer{ display:none; }   /* centered layout — no push-right needed */
.sub-manage{
  background:var(--srf2); border:1px solid var(--bd); color:var(--tx2);
  border-radius:var(--r-sm); padding:9px 16px; font-weight:600; font-size:.86rem; cursor:pointer;
}
.sub-manage:disabled{ opacity:.5; cursor:not-allowed; }

/* ---- "billing opens at launch" quiet state ---- */
.sub-soon{
  margin:22px 0; padding:22px; text-align:center;
  background:var(--srf); border:1px dashed var(--bd2); border-radius:var(--r-lg);
  color:var(--tx2);
}
.sub-soon b{ color:var(--tx); display:block; font-size:1.05rem; margin-bottom:4px; }

/* ---- founding banner ---- */
/* Founder counter — the landing's HERO PILL, matched exactly (v3.css .cta-lockup .founder-pill):
   gradient fill, lime border + soft glow, a glowing dot with an expanding ring, and a shimmer
   sweep. */
.sub-founding{ text-align:center; margin:2px 0 24px; }
.sub-founding .fpill{
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 18px 9px 15px; border-radius:999px;
  position:relative; overflow:hidden; isolation:isolate;
  font-size:13px; font-weight:700; letter-spacing:.012em; color:#e8ffb4;
  background:linear-gradient(180deg,rgba(217,255,75,.12),rgba(217,255,75,.04));
  border:1px solid rgba(217,255,75,.34);
  box-shadow:0 8px 26px rgba(217,255,75,.10),inset 0 1px 0 rgba(255,255,255,.06);
}
.sub-founding .fpill::after{
  content:''; position:absolute; top:-60%; bottom:-60%; left:-40%; width:24%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg); pointer-events:none;
  animation:subShimmer 5.6s ease-in-out infinite;
}
.sub-founding .dot{
  position:relative; width:8px; height:8px; border-radius:50%; flex:0 0 auto;
  background:var(--accent); box-shadow:0 0 10px rgba(217,255,75,.85);
  animation:subFoundpulse 2.4s ease-in-out infinite;
}
.sub-founding .dot::after{
  content:''; position:absolute; inset:-5px; border-radius:50%;
  border:1px solid rgba(217,255,75,.55);
  animation:subSeatRing 2.6s cubic-bezier(.2,.7,.3,1) infinite;
}
@keyframes subFoundpulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes subSeatRing{0%{transform:scale(.55);opacity:.9}100%{transform:scale(1.75);opacity:0}}
@keyframes subShimmer{0%{left:-40%}55%{left:120%}100%{left:120%}}
@media (prefers-reduced-motion:reduce){
  .sub-founding .fpill::after,.sub-founding .dot::after{ animation:none; opacity:0; }
}

/* ---- the two plan cards ---- */
.sub-tiers{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:680px){ .sub-tiers{ grid-template-columns:1fr; } }

/* Card geometry + colors copied from the landing (styles.css .tier / .tier-best / .tier-badge). */
.sub-tier{
  position:relative; padding:28px 24px;
  background:var(--srf); border:1px solid rgba(255,255,255,.08); border-radius:18px;
  display:flex; flex-direction:column;
}
.sub-tier--best{
  border-color:rgba(217,255,75,.34);
  background:linear-gradient(180deg,rgba(217,255,75,.05),transparent 46%),var(--srf);
  box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 60px rgba(217,255,75,.06);
}
.sub-badge{
  position:absolute; top:-11px; left:24px;
  background:var(--accent); color:#0a0a0a; font-size:10.5px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; padding:5px 11px; border-radius:100px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.sub-tier .t-name{ font-family:var(--font-disp); font-weight:700; font-size:17px; color:var(--tx); letter-spacing:-.01em; margin-bottom:10px; }
.sub-tier .t-tag{ font-size:.8rem; color:var(--tx2); line-height:1.4; margin:-4px 0 12px; max-width:30ch; }
/* PRICE — the landing's treatment, exactly: the full price small and struck, the real founding
   number big and lime beside it. The panel previously showed only the struck full price with a
   "50% off" badge, which asked the buyer to do arithmetic at the one moment we want the number to
   feel small. */
.sub-tier .t-price{ display:flex; align-items:baseline; gap:9px; margin:8px 0 2px; }
.sub-tier .t-price .amt{ font-family:var(--font-disp); font-size:40px; font-weight:700; color:var(--tx); letter-spacing:-.03em; }
.sub-tier .t-price .per{ color:var(--dim); font-size:14px; }
.sub-tier .t-price.is-founding .was{
  position:relative; font-family:var(--font-disp); font-size:23px; font-weight:700;
  color:var(--tx); opacity:.45; letter-spacing:-.02em;
}
/* A drawn diagonal rather than line-through: a strike through a display face at this size reads as
   a rendering fault, while an angled rule reads as deliberate. */
.sub-tier .t-price.is-founding .was::after{
  content:''; position:absolute; left:-8%; right:-8%; top:52%; height:2px;
  background:var(--accent); transform:rotate(-13deg); border-radius:2px;
}
.sub-tier .t-price.is-founding .now{
  font-family:var(--font-disp); font-size:40px; font-weight:700;
  color:var(--accent); letter-spacing:-.03em;
}
.sub-tier .t-found{ font-size:.78rem; color:var(--accent); font-weight:700; margin-bottom:14px; }
.sub-tier .t-found span{ color:var(--tx2); font-weight:500; margin-left:6px; }

/* USAGE — three columns, number over label. The run-on sentence wrapped mid-unit and read as
   prose; these are the figures a buyer checks against their own posting rhythm. */
.sub-tier .t-vol3{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px; text-align:center;
  margin:2px 0 16px; padding:12px 8px; border-radius:12px;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.07);
  font-variant-numeric:tabular-nums;
}
.sub-tier .t-vol3 > span{ display:flex; flex-direction:column; gap:3px; align-items:center; }
.sub-tier .t-vol3 > span + span{ border-left:1px solid rgba(255,255,255,.07); }
.sub-tier .t-vol3 b{ font-size:18px; font-weight:800; color:var(--tx); letter-spacing:-.02em; line-height:1; }
.sub-tier .t-vol3 i{
  font-style:normal; font-size:10.5px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--tx2); opacity:.8; white-space:nowrap;
}

/* The carry-over line is the hinge of the Pro card — everything under it sits on top of a
   complete product — so it gets weight and a rule the feature rows do not. */
.sub-tier ul li:first-child{ font-weight:700; color:var(--tx); padding-bottom:11px; margin-bottom:5px; border-bottom:1px solid rgba(255,255,255,.09); }
.sub-tier:not(.sub-tier--best) ul li:first-child{ font-weight:inherit; color:inherit; padding-bottom:0; margin-bottom:0; border-bottom:0; }

/* PRO HAS TO BE THE SUBJECT. Two cards of equal weight make the reader do the choosing; the lime
   edge and lift say which one we mean without a word of copy. */
.sub-tier--best{ border-color:rgba(217,255,75,.45); box-shadow:0 0 0 1px rgba(217,255,75,.14), 0 26px 70px -30px rgba(217,255,75,.22); }
/* The metered numbers (videos/footage/export). Deliberately quieter than a bullet and separated
   by a rule: it is the SHAPE of the plan, not one of its features, and mixing it into the list
   made Creator read as a quota with a few extras rather than a complete product. */
.sub-tier .t-vol{
  font-size:.78rem; color:var(--tx3,var(--dim)); line-height:1.45; margin:0 0 14px; padding-bottom:13px;
  border-bottom:1px solid var(--bd,rgba(255,255,255,.09));
}
.sub-tier ul{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:9px; flex:1; }
.sub-tier li{ display:flex; gap:9px; align-items:flex-start; color:var(--tx2); font-size:.88rem; line-height:1.35; }
.sub-tier li .ck{ color:var(--brand-2); font-weight:800; flex:none; }
.sub-tier--best li .ck{ color:var(--accent); }

/* Buttons copied from the landing (styles.css .btn / .btn-primary / .btn-ghost): the primary CTA is
   the LIME gradient, the secondary is the ghost. The panel is a full-screen overlay so lime here
   doesn't break the editor's "one lime = Export" rule. */
.sub-btn{
  width:100%; padding:15px 24px; border-radius:13px; font-weight:700; font-size:15px;
  cursor:pointer; border:0; transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.sub-btn--ghost{ background:rgba(255,255,255,.05); color:var(--tx); border:1px solid rgba(255,255,255,.14); }
.sub-btn--ghost:hover{ background:rgba(255,255,255,.09); transform:translateY(-2px); }
.sub-btn--primary{
  background:linear-gradient(180deg,#E8FF7A 0%,#D9FF4B 46%,#C2EE28 100%); color:#0a0a0a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(0,0,0,.10),
             0 1px 2px rgba(0,0,0,.35),0 6px 18px rgba(217,255,75,.22),0 0 46px rgba(217,255,75,.16);
}
.sub-btn--primary:hover{ transform:translateY(-2px); }
.sub-btn:disabled{ opacity:.55; cursor:default; transform:none; }
.sub-btn.is-current{ background:var(--srf2); color:var(--tx3); border:1px solid rgba(255,255,255,.08); cursor:default; }

.sub-note{ text-align:center; color:var(--tx3); font-size:.8rem; margin-top:18px; }
.sub-skip-wrap{ text-align:center; margin-top:16px; }
.sub-skip{
  background:none; border:none; color:var(--tx2); font-size:.9rem; font-weight:600; cursor:pointer;
  padding:8px 12px; border-radius:8px; transition:.15s;
}
.sub-skip:hover{ color:var(--tx); background:var(--srf2); }
.sub-err{ text-align:center; color:#ff6b6b; font-size:.85rem; margin-top:14px; }

/* ---- embedded Stripe Checkout modal ---- */
#subCheckout[hidden]{ display:none !important; }
#subCheckout{
  position:fixed; inset:0; z-index:1300;
  display:flex; align-items:flex-start; justify-content:center;
  background:rgba(7,6,9,.9); backdrop-filter:blur(12px); overflow:auto; padding:28px 16px;
}
.sub-co-card{
  width:100%; max-width:1040px; margin:auto;   /* >984px inner so Stripe uses its 2-column layout */
  background:#fff; border-radius:var(--r-lg); padding:14px; position:relative;
}
/* Instant feedback while the Stripe session is created + mounted (no dead click). */
.sub-co-loading{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:340px; }
.sub-co-loadmsg{ margin-top:16px; color:#333; font-size:.92rem; font-weight:600; }
.sub-spin{
  width:34px; height:34px; border-radius:50%;
  border:3px solid rgba(0,0,0,.12); border-top-color:#635bff;
  animation:subSpin .8s linear infinite;
}
@keyframes subSpin{ to{ transform:rotate(360deg); } }
.sub-co-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:4px 6px 12px; color:#111;
}
.sub-co-head .h{ font-weight:800; }
/* Sits on Stripe's WHITE embedded card, so this one is styled for a light surface
   rather than the app's dark chrome. box-shadow:none for the same reason as
   .sub-close — the global button{} purple brand glow has no business on a plain
   neutral close, and against white it read as a lavender halo. */
.sub-co-close{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background:transparent; border:1px solid rgba(0,0,0,.12); color:#5b5b66;
  font-size:1.15rem; line-height:1; cursor:pointer; transition:.15s;
  box-shadow:none;
}
.sub-co-close:hover{ background:rgba(0,0,0,.055); color:#111; border-color:rgba(0,0,0,.22); }
.sub-co-close:active{ background:rgba(0,0,0,.10); }
.sub-co-close:focus-visible{ outline:2px solid #635bff; outline-offset:2px; }
#subCheckoutMount{ min-height:60px; }

/* ---- BILLING INTERVAL TOGGLE (Patrik 2026-08-03) -------------------------------------------
   Spans both tier columns and sits above them, because it governs BOTH cards — placed inside a
   card it would read as a property of that plan. The saving rides on the Annual button itself so
   it is visible before the click, not as a reward for guessing. */
.sub-interval{ grid-column:1 / -1; display:flex; justify-content:center; gap:6px;
  background:var(--srf2); border:1px solid var(--bd); border-radius:999px;
  padding:4px; margin:0 auto 4px; width:max-content; max-width:100%; }
.si-opt{ appearance:none; border:0; background:transparent; color:var(--tx2);
  font:inherit; font-weight:600; font-size:.86rem; padding:8px 18px; border-radius:999px;
  cursor:pointer; display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  transition:background .15s, color .15s; }
.si-opt:hover{ color:var(--tx); }
.si-opt.on{ background:var(--tx); color:var(--bg); }
/* The saving keeps its contrast when the button is NOT selected — it is the reason to select it. */
.si-save{ font-size:.72rem; font-weight:700; letter-spacing:.01em; padding:2px 8px;
  border-radius:999px; background:var(--lime,#c8f24c); color:#10130a; }
.si-opt.on .si-save{ background:var(--bg); color:var(--tx); }
@media (max-width:680px){ .si-opt{ padding:8px 12px; font-size:.8rem; } }

/* What an annual founding price renews at. Quiet by design: it must be READABLE before purchase,
   not compete with the number being sold. */
.t-renew{ font-size:.76rem; color:var(--tx2); margin:-4px 0 10px; }

/* The note is two sentences with different jobs — billing terms, then the re-export promise. On one
   line they read as a single long disclaimer and the second half is never reached. */
.sub-note .note-bill, .sub-note .note-reex{display:block}
.sub-note .note-reex{margin-top:4px;opacity:.8}

/* ⭐ THE POST-PAYMENT SCREEN. Deliberately sparse: one tick, one sentence, one way forward. The
   pricing ladder is hidden entirely at this moment — someone who has just paid has no decision
   left to make, and re-showing the table they bought from reads as though the purchase did not
   register (Patrik, seconds after paying: "not to see that UI payment again").
   ⚠ [hidden] MUST WIN — display:flex outranks the attribute's UA display:none, the same trap the
   gate forms and #subPanel already carry a guard for. */
.sub-won{ display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:34px 20px 30px; text-align:center; }
.sub-won[hidden]{ display:none !important; }
.sub-won .won-tick{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  font-size:26px; font-weight:800; color:#12121A; background:#C7F94A;
  box-shadow:0 8px 30px rgba(199,249,74,.28);
}
.sub-won .won-h{ font-size:24px; font-weight:800; letter-spacing:-.02em; color:#F5F4F8; }
.sub-won .won-p{ font-size:14px; color:#9d9caa; max-width:34ch; line-height:1.5; }
.sub-won .sub-btn{ margin-top:8px; min-width:200px; }

/* ⚠ [hidden] MUST WIN, AND ON EVERY BLOCK THAT SETS display. .sub-tiers is display:grid and
   .sub-current is display:flex, so `n.hidden = true` in render() did nothing to them — the
   attribute's UA display:none loses to a class rule. It never showed because the ladder is
   visible in almost every state; the post-payment screen is the first state that needs it gone,
   and it duly rendered ON TOP of the pricing table it was meant to replace.
   This is the third place in this codebase to hit it (the gate forms, #subPanel, now here). Any
   toggled element that sets display needs this line beside it. */
.sub-tiers[hidden], .sub-current[hidden], .sub-note[hidden],
.sub-founding[hidden], .sub-soon[hidden], .sub-err[hidden]{ display:none !important; }