/* ==========================================================================
   ORBT 2026 · scoped page styles for pricing / about / contact / changelog
   Maximalist sticker-zine. Cream paper, ink, rainbow. Uses orbt.css tokens.
   Everything namespaced .pg-* (+ reuses .hp-reveal from redesign.css/js).
   ========================================================================== */

.pg-main{ overflow-x:clip; }

/* ---------- shared poster page-head ---------- */
.pg-head{ position:relative; padding:clamp(120px,16vh,180px) 0 clamp(10px,3vw,28px); overflow:hidden; }
.pg-head .wrap{ position:relative; z-index:3; }
.pg-blobs{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.pg-blob{ position:absolute; fill:var(--text); }
.pg-blob.b1{ width:42vw; max-width:560px; top:-14%; right:-6%; opacity:1; }
.pg-blob.b2{ width:26vw; max-width:320px; bottom:-30%; left:-10%; opacity:.07; }
.pg-ribbon{ position:absolute; z-index:1; left:-6%; right:-6%; top:54%; height:clamp(30px,4vw,56px);
  background:var(--rainbow); transform:rotate(-3.5deg); opacity:.95; box-shadow:0 18px 44px -20px rgba(123,47,247,.5); }

.pg-eyebrow{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--mono); font-size:.74rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent-text); margin-bottom:1rem; }
.pg-eyebrow::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--accent); }
.pg-h1{ font-family:var(--display); font-weight:800; font-size:clamp(3rem,9vw,7rem); line-height:.84; letter-spacing:-.04em;
  text-transform:uppercase; margin:0 0 1.1rem; }
.pg-h1 .rb{ background:var(--rainbow-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.pg-h1 .out{ -webkit-text-stroke:2px var(--text); -webkit-text-fill-color:transparent; color:transparent; }
.pg-lead{ color:var(--muted); font-size:clamp(1.04rem,1.4vw,1.22rem); line-height:1.5; max-width:48ch; }
.pg-facts{ display:flex; flex-wrap:wrap; gap:.6rem .9rem; margin-top:1.4rem; }
.pg-facts span{ font-family:var(--mono); font-size:.78rem; color:var(--muted); background:#fff; border:2px solid var(--text);
  border-radius:999px; padding:.4rem .85rem; box-shadow:3px 3px 0 0 var(--text); }
.pg-facts span b{ color:var(--accent-text); }

.pg-rule{ height:6px; border-radius:6px; background:var(--accent); border:0; margin:0; } /* rainbow rationed */

/* section heading echo of homepage */
.pg-sec{ padding:clamp(48px,7vw,96px) 0; position:relative; }
.pg-sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:clamp(24px,3.5vw,44px); }
.pg-sec-head h2{ font-family:var(--display); font-weight:800; font-size:clamp(2rem,5vw,3.8rem); line-height:.92; letter-spacing:-.03em; text-transform:uppercase; max-width:20ch; }
.pg-sec-head h2 em{ font-style:normal; color:var(--accent); } /* rainbow rationed: flat accent */
.pg-sec-head p{ color:var(--muted); max-width:34ch; font-size:.96rem; }

/* ==========================================================================
   PRICING
   ========================================================================== */

/* giant savage strip: the page signature */
.pg-savage{ position:relative; border:3px solid var(--text); border-radius:var(--radius-lg); background:#fff;
  box-shadow:12px 12px 0 0 var(--text); padding:clamp(1.8rem,4vw,3.2rem); overflow:hidden; }
.pg-savage::before{ content:""; position:absolute; left:0; right:0; top:0; height:10px; background:var(--accent); } /* rainbow rationed */
.pg-savage-grid{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(1rem,4vw,3rem); }
.pg-savage .lbl{ font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.14em; color:var(--faint); margin-bottom:.5rem; }
.pg-savage .them{ font-family:var(--display); font-weight:800; font-size:clamp(2rem,5vw,3.6rem); color:var(--muted);
  text-decoration:line-through; text-decoration-color:var(--c-red); text-decoration-thickness:5px; line-height:.95; }
.pg-savage .us{ font-family:var(--display); font-weight:800; font-size:clamp(3rem,9vw,6.6rem); line-height:.88;
  background:var(--rainbow-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.pg-savage .vs{ font-family:var(--display); font-weight:800; font-size:1rem; color:var(--text); width:54px; height:54px;
  display:grid; place-items:center; border:3px solid var(--text); border-radius:50%; background:var(--c-yellow); box-shadow:3px 3px 0 0 var(--text); transform:rotate(-6deg); }
.pg-savage .sub{ font-family:var(--mono); font-size:.84rem; color:var(--muted); margin-top:.6rem; }
.pg-savage .delta{ font-family:var(--mono); font-size:.74rem; color:var(--ok); margin-top:.3rem; }
.pg-savage .them-col .delta{ color:var(--c-red); }
@media (max-width:680px){ .pg-savage-grid{ grid-template-columns:1fr; text-align:center; gap:1.4rem; } .pg-savage .vs{ justify-self:center; } }

/* chunky sticker plans: asymmetric, lifetime is hero */
.pg-plans{ display:grid; grid-template-columns:1fr 1fr 1.25fr; gap:clamp(14px,1.8vw,22px); align-items:stretch; }
.pg-plan{ position:relative; border:2.5px solid var(--text); border-radius:22px; background:#fff; padding:clamp(1.5rem,2.4vw,2.1rem);
  display:flex; flex-direction:column; gap:.55rem; box-shadow:6px 6px 0 0 var(--text);
  transition:transform .3s var(--spring), box-shadow .2s var(--ease); }
.pg-plan:hover{ transform:translate(-3px,-3px); box-shadow:11px 11px 0 0 var(--text); }
.pg-plan .tag{ font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--accent-text); font-weight:700; }
.pg-plan .amt{ font-family:var(--display); font-weight:800; font-size:clamp(2.4rem,4vw,3.2rem); letter-spacing:-.03em; line-height:.95; }
.pg-plan .amt small{ font-size:.8rem; color:var(--muted); font-family:var(--mono); letter-spacing:0; }
.pg-plan .amt-alt{ font-family:var(--mono); font-size:.8rem; color:var(--accent-text); }
.pg-plan .blurb{ color:var(--muted); font-size:.92rem; }
.pg-plan ul{ list-style:none; display:flex; flex-direction:column; gap:.55rem; margin:.5rem 0 1.2rem; padding:0; }
.pg-plan li{ display:flex; gap:.55rem; align-items:flex-start; color:var(--muted); font-size:.9rem; }
.pg-plan li svg{ width:17px; height:17px; flex:none; stroke:var(--c-green); fill:none; stroke-width:2.6; margin-top:.15rem; }
.pg-plan .btn, .pg-plan .btn-ghost{ margin-top:auto; width:100%; justify-content:center; }
/* featured lifetime card */
.pg-plan.feat{ border-width:3px; box-shadow:10px 10px 0 0 var(--text); transform:translateY(-14px); }
.pg-plan.feat:hover{ transform:translate(-3px,-17px); box-shadow:14px 14px 0 0 var(--text); }
/* rounded top bar instead of clipping the card (overflow:hidden was slicing the "Best value" badge) */
.pg-plan.feat::before{ content:""; position:absolute; left:0; right:0; top:0; height:8px; background:var(--accent); border-radius:19px 19px 0 0; } /* rainbow rationed */
.pg-plan.feat .amt{ color:var(--accent); } /* rainbow rationed: flat accent (page's gradient lives on the h1 + savage strip) */
.pg-plan.feat li svg{ stroke:var(--accent); }
.pg-badge{ position:absolute; top:-13px; right:18px; font-family:var(--mono); font-size:.68rem; font-weight:700; letter-spacing:.06em;
  background:var(--text); color:#fff; padding:.34rem .75rem; border-radius:999px; transform:rotate(3deg); box-shadow:2px 2px 0 0 var(--accent); }
@media (max-width:920px){ .pg-plans{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; } .pg-plan.feat{ transform:none; } .pg-plan.feat:hover{ transform:translate(-3px,-3px); } }

.pg-plan-foot{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 1.4rem; margin-top:1.8rem; font-family:var(--mono); font-size:.8rem; color:var(--muted); }
.pg-plan-foot span{ display:inline-flex; align-items:center; gap:.45rem; }
.pg-plan-foot svg{ width:15px; height:15px; stroke:var(--c-green); fill:none; stroke-width:2.6; }

/* comparison table: sticker frame */
.pg-cmp-wrap{ border:3px solid var(--text); border-radius:var(--radius-lg); overflow:hidden; background:#fff; box-shadow:8px 8px 0 0 var(--text); }
.pg-cmp{ width:100%; border-collapse:collapse; }
.pg-cmp th, .pg-cmp td{ padding:1rem 1.1rem; text-align:center; border-bottom:2px solid var(--line); font-size:.92rem; }
.pg-cmp tr:last-child td{ border-bottom:0; }
.pg-cmp th:first-child, .pg-cmp td:first-child{ text-align:left; color:var(--text); font-family:var(--body); }
.pg-cmp thead th{ font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); font-weight:700; border-bottom-width:3px; }
.pg-cmp thead th.us{ color:#fff; background:var(--text); }
.pg-cmp td.us{ background:var(--accent-dim); color:var(--text); font-weight:600; }
.pg-cmp td{ color:var(--muted); font-family:var(--mono); }
.pg-cmp .ck{ width:20px; height:20px; stroke:var(--c-green); fill:none; stroke-width:2.8; margin:0 auto; display:block; }
/* negative mark: the site-wide circled-dash token (matches the .cmp .dash used on the vs pages).
   padding:0 is required to cancel the dashboard's bare .dash rule (styles.css) which otherwise leaks padding in. */
.pg-cmp .dash{ display:inline-block; width:20px; height:20px; padding:0; box-sizing:border-box; margin:0 auto; border-radius:50%;
  background:color-mix(in srgb,var(--muted) 12%,transparent); border:1px solid color-mix(in srgb,var(--muted) 26%,transparent);
  stroke:var(--no); fill:none; stroke-width:2.6; opacity:.78; }
@media (max-width:560px){ .pg-cmp th, .pg-cmp td{ padding:.7rem .55rem; font-size:.82rem; } }

/* FAQ ledger */
.pg-faq{ max-width:860px; margin:0 auto; }
.pg-faq .q{ border:2.5px solid var(--text); border-radius:16px; background:#fff; margin-bottom:14px; overflow:hidden; box-shadow:4px 4px 0 0 var(--text); transition:box-shadow .18s var(--ease); }
.pg-faq .q:hover{ box-shadow:7px 7px 0 0 var(--text); }
.pg-faq .q.open{ box-shadow:7px 7px 0 0 var(--accent); }
.pg-faq .q button{ width:100%; display:flex; align-items:center; gap:1rem; padding:1.15rem 1.3rem; text-align:left;
  font-family:var(--display); font-weight:700; font-size:1.02rem; color:var(--text); background:none; border:0; cursor:pointer; }
.pg-faq .q .qn{ font-family:var(--mono); font-size:.8rem; color:var(--accent-text); flex:none; }
.pg-faq .q .plus{ position:relative; width:16px; height:16px; flex:none; margin-left:auto; transition:transform .5s var(--spring); }
.pg-faq .q .plus::before, .pg-faq .q .plus::after{ content:""; position:absolute; inset:0; margin:auto;
  background:var(--accent); transform:none; transition:transform .35s var(--spring); } /* transform:none beats styles.css's .q .plus::after rotate(90deg) (rendered "=" not "+") */
.pg-faq .q .plus::before{ width:16px; height:3px; } .pg-faq .q .plus::after{ width:3px; height:16px; }
.pg-faq .q.open .plus{ transform:rotate(180deg); }        /* springy half-spin … */
.pg-faq .q.open .plus::after{ transform:scaleY(0); }       /* … while + folds to - */
/* collapsed = fully hidden (0fr row + hidden overflow + zero min-height); smooth expand */
.pg-faq .q .ans{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease); }
.pg-faq .q.open .ans{ grid-template-rows:1fr; }
.pg-faq .q .ans-in{ overflow:hidden; min-height:0; } .pg-faq .q .ans p{ padding:0 1.3rem 1.2rem 1.3rem; color:var(--muted); font-size:.95rem; line-height:1.55; }
@media (prefers-reduced-motion:reduce){ .pg-faq .q .ans{ transition:none; } .pg-faq .q .plus{ transition:none; } }
.pg-faq .q .ans a{ color:var(--accent); }

/* ==========================================================================
   ABOUT: editorial zine
   ========================================================================== */
.pg-zine{ max-width:900px; margin:0 auto; }
.pg-chapter{ position:relative; display:grid; grid-template-columns:auto 1fr; gap:clamp(1rem,3vw,2.4rem); padding:clamp(2rem,5vw,3.4rem) 0; border-top:3px solid var(--text); }
.pg-chapter:first-of-type{ border-top:0; padding-top:0; }
.pg-chapter .num{ font-family:var(--display); font-weight:800; font-size:clamp(1.6rem,3vw,2.4rem); line-height:1;
  -webkit-text-stroke:2px var(--text); -webkit-text-fill-color:transparent; color:transparent; }
.pg-chapter h2{ font-family:var(--display); font-weight:800; font-size:clamp(1.7rem,3.6vw,2.8rem); text-transform:uppercase; letter-spacing:-.025em; line-height:.95; margin:0 0 1rem; }
.pg-spark{ display:inline-block; width:.68em; height:.68em; fill:var(--accent); vertical-align:-.03em; margin-left:.12em; } /* brand 4-point spark (replaces emoji; inline-block beats the global svg{display:block}) */
.pg-chapter h2 em{ font-style:normal; color:var(--accent); } /* rainbow rationed: flat accent */
.pg-chapter p{ color:var(--muted); font-size:1.05rem; line-height:1.65; margin:0 0 1rem; max-width:56ch; }
.pg-chapter p a{ color:var(--accent); }
.pg-chapter p b{ color:var(--text); }
@media (max-width:640px){ .pg-chapter{ grid-template-columns:1fr; gap:.6rem; } }

/* pull quote */
.pg-pull{ margin:clamp(2.5rem,6vw,4rem) 0; padding:clamp(1.6rem,4vw,2.6rem); border:3px solid var(--text); border-radius:var(--radius-lg);
  background:#fff; box-shadow:10px 10px 0 0 var(--text); position:relative; }
.pg-pull::before{ content:"“"; position:absolute; top:-.3em; left:.2em; font-family:var(--display); font-weight:800; font-size:6rem; color:var(--accent); opacity:.18; }
.pg-pull p{ font-family:var(--display); font-weight:700; font-size:clamp(1.4rem,3.2vw,2.4rem); line-height:1.1; letter-spacing:-.02em; color:var(--text); margin:0; position:relative; z-index:1; }
.pg-pull p em{ font-style:normal; color:var(--accent); } /* rainbow rationed: flat accent */

/* founder sign-off card with mascot */
.pg-founder{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1.2rem,3vw,2.2rem); align-items:center; margin-top:clamp(2rem,4vw,3rem);
  padding:clamp(1.6rem,3vw,2.4rem); border:2.5px solid var(--text); border-radius:var(--radius-lg); background:var(--bg-2); box-shadow:8px 8px 0 0 var(--text); }
.pg-founder .mug{ width:clamp(84px,12vw,120px); aspect-ratio:1; flex:none; }
.pg-founder .mug-disc{ width:100%; height:100%; border-radius:50%; background:var(--text); display:grid; place-items:center; box-shadow:4px 4px 0 0 var(--accent); }
.pg-founder .mug-disc img{ width:74%; height:auto; filter:drop-shadow(0 8px 16px rgba(123,47,247,.4)); }
.pg-founder .sig{ font-family:var(--display); font-weight:800; font-size:clamp(1.2rem,2.4vw,1.6rem); }
.pg-founder .role{ font-family:var(--mono); font-size:.78rem; color:var(--accent-text); text-transform:uppercase; letter-spacing:.1em; margin:.3rem 0 .8rem; }
@media (max-width:520px){ .pg-founder{ grid-template-columns:1fr; text-align:center; justify-items:center; } }

/* ==========================================================================
   CONTACT: branded split
   ========================================================================== */
.pg-contact{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(1.6rem,4vw,3.6rem); align-items:start; }
@media (max-width:880px){ .pg-contact{ grid-template-columns:1fr; } }

.pg-contact-aside .mascot{ width:clamp(110px,18vw,180px); height:auto; margin-bottom:1.4rem; filter:drop-shadow(0 18px 34px rgba(123,47,247,.4)); animation:hp-float 5s var(--ease) infinite; }
@media (prefers-reduced-motion:reduce){ .pg-contact-aside .mascot{ animation:none; } }
.pg-support{ display:flex; flex-direction:column; gap:.7rem; margin-top:1.6rem; }
/* interactive contact rows: ONLY the links get the sticker-button treatment (scoping to > a
   keeps the styling off the nested .dot spans, which were rendering as bordered ellipses) */
.pg-support a{ display:inline-flex; align-items:center; gap:.7rem; min-height:44px; box-sizing:border-box; font-family:var(--mono); font-size:.86rem; color:var(--text);
  background:#fff; border:2.5px solid var(--text); border-radius:14px; padding:.7rem 1rem; box-shadow:3px 3px 0 0 var(--text);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease); text-decoration:none; }
.pg-support a:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 0 var(--text); }
/* non-interactive status line: muted and borderless so it never reads as a tappable button */
.pg-support .note{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--mono); font-size:.82rem; color:var(--muted); padding:.25rem .1rem; }
.pg-support .dot{ width:11px; height:11px; border-radius:50%; flex:none; }

/* the form card */
.pg-form-card{ border:3px solid var(--text); border-radius:var(--radius-lg); background:#fff; box-shadow:12px 12px 0 0 var(--text);
  padding:clamp(1.6rem,3vw,2.6rem); position:relative; overflow:hidden; }
.pg-form-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:9px; background:var(--accent); } /* rainbow rationed */
.pg-form-card h2{ font-family:var(--display); font-weight:800; font-size:clamp(1.4rem,3vw,2rem); text-transform:uppercase; letter-spacing:-.02em; margin:.4rem 0 1.4rem; }
.pg-field{ margin-bottom:1.1rem; }
.pg-field label{ display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 .5rem; }
.pg-field label span{ text-transform:none; letter-spacing:0; opacity:.6; }
.pg-input{ width:100%; background:var(--bg); border:2.5px solid var(--text); border-radius:14px; color:var(--text);
  font-family:var(--body); font-size:1rem; padding:.85rem 1rem; box-shadow:3px 3px 0 0 var(--text); transition:box-shadow .15s var(--ease), border-color .15s; }
.pg-input::placeholder{ color:var(--faint); }
.pg-input:focus{ outline:none; box-shadow:3px 3px 0 0 var(--accent); }
textarea.pg-input{ min-height:140px; resize:vertical; line-height:1.5; }
.pg-form-card .btn{ width:100%; justify-content:center; }
.pg-contact-msg{ font-size:.9rem; margin-top:.8rem; font-family:var(--mono); }
.pg-contact-msg.bad{ color:var(--c-red); } .pg-contact-msg.ok{ color:var(--ok); }

/* ==========================================================================
   CHANGELOG: fun branded timeline
   ========================================================================== */
.pg-timeline{ max-width:820px; margin:0 auto; position:relative; }
/* connector drawn per log item so the line terminates exactly at the last node (no overshoot below it) */
.pg-log::after{ content:""; position:absolute; left:9px; top:6px; bottom:-6px; width:5px; border-radius:5px; background:var(--accent); z-index:0; } /* rainbow rationed */
.pg-log:last-child::after{ display:none; }
.pg-log{ position:relative; padding:0 0 clamp(1.6rem,3vw,2.4rem) clamp(2.6rem,5vw,3.4rem); }
.pg-log::before{ content:""; position:absolute; left:0; top:6px; width:23px; height:23px; border-radius:50%; background:var(--node,var(--accent));
  border:3px solid var(--text); box-shadow:3px 3px 0 0 var(--text); z-index:1; }
.pg-log-card{ border:2.5px solid var(--text); border-radius:20px; background:#fff; padding:clamp(1.3rem,2.4vw,1.8rem); box-shadow:6px 6px 0 0 var(--text);
  transition:transform .3s var(--spring), box-shadow .2s var(--ease); }
.pg-log-card:hover{ transform:translate(-3px,-3px); box-shadow:10px 10px 0 0 var(--text); }
.pg-log-meta{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:.8rem; }
.pg-log-date{ font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.pg-log-tag{ font-family:var(--mono); font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.28rem .65rem; border-radius:999px; border:2px solid var(--text); color:var(--text); background:var(--tagc,var(--c-yellow)); box-shadow:2px 2px 0 0 var(--text); }
.pg-log-card h3{ font-family:var(--display); font-weight:800; font-size:clamp(1.15rem,2vw,1.5rem); text-transform:uppercase; letter-spacing:-.02em; margin:0 0 .8rem; line-height:1; }
.pg-live-dot{ display:inline-block; width:.52em; height:.52em; border-radius:50%; background:var(--c-yellow);
  border:2px solid var(--text); box-shadow:2px 2px 0 0 var(--text); margin-left:.18em; } /* sticker status dot (replaces emoji) */
.pg-log-card ul{ margin:0; padding-left:1.1rem; color:var(--muted); line-height:1.65; font-size:.95rem; }
.pg-log-card ul li{ margin-bottom:.35rem; }
.pg-log-card ul li::marker{ color:var(--accent); }
.pg-log-card ul li b{ color:var(--text); font-weight:600; }
@media (max-width:520px){ .pg-log::after{ left:7px; } .pg-log::before{ width:18px; height:18px; } }

/* shared CTA echo (about/changelog) */
.pg-cta{ text-align:center; }
.pg-cta-card{ position:relative; border:3px solid var(--text); border-radius:var(--radius-lg); background:var(--bg-2); box-shadow:12px 12px 0 0 var(--text);
  padding:clamp(2.2rem,5vw,3.6rem); overflow:hidden; }
.pg-cta-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:9px; background:var(--accent); } /* rainbow rationed */
.pg-cta-card h2{ font-family:var(--display); font-weight:800; font-size:clamp(2rem,6vw,4rem); text-transform:uppercase; letter-spacing:-.03em; line-height:.9; }
.pg-cta-card h2 .rb{ color:var(--accent); } /* rainbow rationed: flat accent */
.pg-cta-card p{ color:var(--muted); margin:1rem auto 1.6rem; max-width:40ch; }
.pg-cta-card .mascot{ width:clamp(70px,10vw,110px); height:auto; margin:0 auto 1.2rem; display:block; filter:drop-shadow(0 14px 26px rgba(123,47,247,.4)); }