/* ==========================================================================
   NEXO campaign — pledge flow styling.
   --------------------------------------------------------------------------
   Loaded AFTER back.css / back-theme.css by the campaign page and by the
   /p/<REF> pledge page. Uses the same tokens as the rest of the site
   (style.css :root + back.css surfaces) so nothing new is invented here.
   ========================================================================== */

/* ==========================================================================
   Step 1 — availability on the tier cards
   ========================================================================== */
.b-tier-slots{
  margin-top:.25rem;font-size:.75rem;font-weight:600;letter-spacing:.02em;
  color:var(--gray-mute);
}
.b-tier-slots.is-low{color:var(--warning)}
.b-tier-slots.is-gone{color:var(--gray-mute)}

/* A claimed-out tier stays legible on purpose — it is evidence the campaign is
   real. It just reads as spent. */
.b-tier.is-unavailable{opacity:.55}
.b-tier.is-unavailable .b-limit{background:rgba(255,255,255,.07);color:var(--gray-mute)}
.b-tier[data-tier] button[disabled],
.b-tier button[disabled]{
  background:transparent;border-color:#3A3A38;color:var(--gray-mute);cursor:not-allowed;
}
.b-tier button[disabled]:hover{background:transparent;border-color:#3A3A38}

/* ==========================================================================
   Tier comparison table
   --------------------------------------------------------------------------
   The cards sell each tier; this answers "what does the dearer one actually
   add". Four columns will never fit a phone, so the table scrolls sideways
   inside its own container and the page body never does.
   ========================================================================== */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.b-compare{margin-top:2.5rem}
.b-compare-scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--hairline);border-radius:18px;background:var(--surface);
}
.b-compare-scroll:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.b-compare-hint{
  margin-top:.75rem;font-size:.75rem;color:var(--gray-mute);text-align:center;
}
@media (min-width:56rem){ .b-compare-hint{display:none} }

/* ---------- responsive tiers ----------
   Cards are built from the table by pledge.js, which adds .has-cards. Every
   rule below is gated on that class: if the script never runs, the table stays
   and nothing disappears. */
.b-tcards{display:none}

@media (max-width:47.99rem){
  .b-compare.has-cards .b-compare-scroll,
  .b-compare.has-cards .b-compare-hint{display:none}   /* no sideways swiping */
  .b-compare.has-cards .b-tcards{
    display:grid;grid-template-columns:1fr;gap:.875rem;margin-top:.25rem;
  }
}

.b-tcard{
  display:flex;flex-direction:column;align-items:flex-start;gap:.625rem;
  padding:1.25rem;border-radius:16px;
  background:var(--surface);border:1px solid var(--hairline);
}
.b-tcard.is-featured{
  border-color:var(--teal);background:rgba(29,158,117,.07);
}
.b-tcard-chip{
  display:inline-block;padding:.1875rem .5rem;border-radius:999px;
  background:rgba(29,158,117,.18);color:var(--teal);
  font-size:.5625rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}
.b-tcard-name{font-size:1.0625rem;font-weight:800;letter-spacing:-.02em;color:var(--white)}
.b-tcard .b-th-price{margin-top:0}
.b-tcard-rewards{list-style:none;margin:.125rem 0 0;padding:0;display:grid;gap:.4375rem;width:100%}
.b-tcard-rewards li{display:flex;align-items:flex-start;gap:.5rem}
.b-tcard-rewards .b-yes{flex:none;margin-top:.0625rem}
.b-tcard-rewards .b-yes svg{width:.9375rem;height:.9375rem}
.b-tcard-reward{font-size:.8125rem;line-height:1.45;color:var(--gray-sub)}
.b-tcard-slots{margin-top:.125rem}
.b-tcard-cta{width:100%;margin-top:.375rem}
.b-tcard.is-spent{opacity:.6}
.b-compare-fx{
  margin-top:1rem;font-size:.8125rem;line-height:1.65;color:var(--gray-sub);
}
.b-compare-fx b{color:var(--teal);font-weight:800}
.b-compare-note{
  margin-top:.625rem;font-size:.8125rem;line-height:1.65;color:var(--gray-mute);
}
.b-compare-note b{color:var(--gray-sub)}

.b-table{width:100%;border-collapse:collapse;min-width:46rem}
.b-table th,.b-table td{
  padding:.875rem 1rem;text-align:center;vertical-align:middle;
  border-bottom:1px solid var(--hairline);
  transition:background .14s var(--ease,ease);
}
.b-table tbody tr:last-child th,
.b-table tbody tr:last-child td{border-bottom:0}

/* row headers — the reward names */
.b-table tbody th[scope="row"]{
  text-align:left;font-size:.8125rem;font-weight:600;color:var(--gray-sub);
  min-width:15rem;
}

/* column headers — the tier names */
.b-table thead th{
  position:sticky;top:0;z-index:2;background:#171716;
  border-bottom:1px solid var(--hairline);padding-top:1.125rem;padding-bottom:1.125rem;
}
.b-th-name{
  display:block;font-size:.875rem;font-weight:800;letter-spacing:-.02em;color:var(--white);
}
.b-th-rowlabel{
  font-size:.625rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray-mute);
}
.b-table thead th:first-child{text-align:left}
.b-th-chip{
  display:inline-block;margin-bottom:.4375rem;padding:.1875rem .5rem;border-radius:999px;
  background:rgba(29,158,117,.18);color:var(--teal);
  font-size:.5625rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}

/* price under each tier name — chosen currency big, the other two small.
   Authored in ₱; pledge.js rewrites both lines when the toggle changes.
   Named b-thp-* and NOT b-price-*: the monthly pricing grid above already owns
   .b-price-main/.b-price-alt, and pledge.css loads last, so reusing those names
   silently restyled ₱149/mo. */
.b-th-price{display:block;margin-top:.5rem}
.b-thp-main{
  display:block;font-size:1.375rem;font-weight:800;letter-spacing:-.03em;
  line-height:1.1;color:var(--white);
}
.b-thp-alt{
  display:block;margin-top:.1875rem;font-size:.6875rem;font-weight:600;
  letter-spacing:0;color:var(--gray-mute);
}
.b-table thead th.is-featured .b-thp-main{color:var(--teal)}

/* currency toggle */
.b-curswitch{
  display:inline-flex;gap:.25rem;margin-top:1.75rem;padding:.25rem;
  background:var(--surface);border:1px solid var(--hairline);border-radius:999px;
}
.b-cur{
  appearance:none;border:0;cursor:pointer;border-radius:999px;
  padding:.5rem .875rem;background:transparent;color:var(--gray-sub);
  font:inherit;font-size:.8125rem;font-weight:700;letter-spacing:.01em;
  transition:background .14s var(--ease,ease),color .14s var(--ease,ease);
}
.b-cur:hover{color:var(--white)}
.b-cur.is-on{background:var(--teal);color:#04140F}
.b-cur:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* the recommended column */
.b-table .is-featured{background:rgba(29,158,117,.05)}
.b-table thead th.is-featured{background:rgba(29,158,117,.11)}

/* Included / not-included marks.
   --------------------------------------------------------------------------
   Two things had to be got right here, both learned the hard way:

   1. They are inline SVG, not text glyphs. `✓` (U+2713) has an emoji
      presentation and Windows falls back to Segoe UI Emoji for it, rendering a
      glossy green 3D checkmark that ignores `color` entirely — while `✕` has no
      emoji form and stayed flat. As text the two marks could never match.

   2. They are NOT called .tick / .cross. back.css already defines a global
      `.tick` (a teal disc with a CSS-drawn checkmark in ::after) used by the
      "finished app" list further up this page. Reusing that name put its circle
      and its pseudo-element checkmark *underneath* the SVG — two checkmarks
      stacked. Scoping under .b-table did not help: the background, size and
      ::after all still applied. Distinct names are the fix; don't rename these
      back to something generic. */
.b-yes,
.b-no{display:inline-flex;align-items:center;justify-content:center;line-height:1}
.b-yes{color:var(--teal)}
.b-no{color:#4A4A46}
.b-yes svg{width:1.125rem;height:1.125rem}
.b-no svg{width:.9375rem;height:.9375rem}

/* "Doesn't apply, and that's good news." Teal, like the ticks, because a grey
   cross next to Lifetime Premium reads as a loss when it is the opposite —
   these tiers skip the discounted year by being better than it. */
.b-na{
  display:inline-block;max-width:11rem;
  font-size:.6875rem;font-weight:600;line-height:1.45;letter-spacing:-.005em;
  color:var(--teal);text-wrap:balance;
}
/* inline-block in the BASE rule, not only while pressed: a plain inline span is
   not transformable, and switching it at press time changed the column width. */
.b-cell-note{display:inline-block;font-size:.8125rem;font-weight:600;color:var(--gray-sub)}
.b-cell-note.is-strong{color:var(--white);font-weight:800}
.b-cell-note.is-low{color:var(--warning)}
.b-cell-note.is-gone{color:var(--gray-mute)}

/* The CTA IS the price row — "Pledge $45" — so the button carries a little more
   weight than a plain label would. */
.b-table tfoot td{padding:1.25rem 1rem;border-bottom:0}
.b-table-cta{
  width:100%;padding:.75rem .75rem;font-size:.875rem;font-weight:800;
  letter-spacing:-.015em;border-radius:10px;font-variant-numeric:tabular-nums;
}
.b-table-cta[disabled]{
  background:transparent;border-color:#3A3A38;color:var(--gray-mute);cursor:not-allowed;
}
.b-table-cta[disabled]:hover{background:transparent;border-color:#3A3A38}

/* ---------- column highlight ----------
   Driven by JS (see initColumnHighlight): :hover on a <col> is not honoured by
   any browser, so `.is-hot` is applied to every cell sharing a data-col. */
.b-table .is-hot{background:rgba(255,255,255,.055)}
.b-table thead th.is-hot{background:#22221F}
.b-table .is-featured.is-hot{background:rgba(29,158,117,.12)}
.b-table thead th.is-featured.is-hot{background:rgba(29,158,117,.2)}

/* a spent tier reads as spent even while its column is lit */
.b-table .is-spent .b-yes{color:#3E6B5C}
.b-table .is-spent{opacity:.6}

/* Tap feedback. There is no hover on a phone, so the column gives a short
   press-in nudge to confirm the tap landed on something.

   The animation runs on the cells' CONTENTS, not the cells: `transform` is not
   honoured on `display:table-cell`, and a plain inline <span> is not
   transformable either — hence the inline-block. Animating the cell itself
   silently does nothing in Chrome. */
@keyframes bColPress{
  0%   {transform:scale(1)}
  40%  {transform:scale(.94)}
  100% {transform:scale(1)}
}

/* NEVER animate the CTA button. It was in this selector originally and it ate
   single clicks: pointerdown swapped its display and scaled it down, so the
   button moved out from under the cursor and pointerup landed on the cell
   instead — no click event at all. Holding the press until the animation
   finished let it settle back, which is why press-and-hold "worked". Any
   interactive element must keep its geometry still between press and release.

   The press rule therefore changes NOTHING but `transform`. Setting `display`
   here — even on the non-button cells — resized the column and relaid out the
   whole table, which shoved the button 55px sideways mid-press and ate the
   click just as surely. Everything that animates is already block, inline-block
   or inline-flex in its base rule, so there is nothing to switch. */
.b-table .is-pressed > *:not(.b-table-cta){
  transform-origin:center;
  animation:bColPress .26s cubic-bezier(.2,.7,.3,1);
}
.b-table .is-pressed{background:rgba(255,255,255,.085)}
.b-table .is-featured.is-pressed{background:rgba(29,158,117,.17)}

@media (prefers-reduced-motion:reduce){
  .b-table .is-pressed > *{animation:none}
  .b-table th,.b-table td{transition:none}
}

/* ==========================================================================
   Shared form furniture (step 2 and step 4)
   ========================================================================== */
.pf-panel{
  margin-top:2rem;background:var(--surface);border:1px solid var(--hairline);
  border-radius:20px;padding:clamp(1.25rem,4vw,2rem);
}
.pf-panel[hidden]{display:none}

.pf-head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.5rem 1rem;padding-bottom:1rem;border-bottom:1px solid var(--hairline);
}
.pf-head h3{margin-top:.25rem;font-size:1.375rem;font-weight:800;letter-spacing:-.03em}
.pf-tiername{color:var(--teal)}
.pf-head .pf-chosen{
  font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray-mute);
}
/* No "change tier" control here on purpose: picking a different "Back this" in
   the comparison table just retitles this panel, so a second way out would be
   one control too many. The form's own "Back to tiers" covers the rest. */
/* The panel header carries no price. The button the backer just pressed said
   "Pledge $45", and the local amount appears under the country field the moment
   they answer it — repeating a currency triple up here added a number nobody
   was looking for. */

/* The country field's hint becomes the conversion answer once a country is
   picked, so the figure changes in the place the question was asked. */
.pf-hint.is-converted{color:var(--gray-sub)}
.pf-hint.is-converted b{
  color:var(--teal);font-weight:800;font-size:.875rem;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}

.pf-grid{margin-top:1.5rem;display:grid;gap:1.125rem}
@media (min-width:40rem){
  .pf-grid{grid-template-columns:1fr 1fr}
  .pf-grid .pf-field--wide{grid-column:1 / -1}
}

.pf-field{display:flex;flex-direction:column;gap:.4375rem}
.pf-field label{font-size:.8125rem;font-weight:600;color:var(--white)}
.pf-field .pf-hint{font-size:.75rem;line-height:1.5;color:var(--gray-mute)}
.pf-field .pf-opt{font-weight:500;color:var(--gray-mute)}

.pf-input{
  width:100%;background:var(--surface-2);border:1px solid var(--hairline);
  border-radius:12px;padding:.8125rem .875rem;font:inherit;font-size:1rem;
  color:var(--white);transition:border-color .16s,background .16s;
  -webkit-appearance:none;appearance:none;
}
.pf-input::placeholder{color:#6A6A66}
.pf-input:focus{outline:none;border-color:var(--teal);background:#1E1E1C}
.pf-input:user-invalid{border-color:var(--danger)}

select.pf-input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23B4B2A9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.25rem;
}
select.pf-input option{background:#141414;color:var(--white)}

/* file input — the native control is unstyleable, so the button half is */
.pf-file{
  width:100%;background:var(--surface-2);border:1px dashed #3A3A38;border-radius:12px;
  padding:.8125rem .875rem;font:inherit;font-size:.875rem;color:var(--gray-sub);cursor:pointer;
}
.pf-file:focus{outline:none;border-color:var(--teal)}
.pf-file::file-selector-button{
  margin-right:.875rem;background:rgba(255,255,255,.06);border:1px solid #3A3A38;
  border-radius:8px;padding:.4375rem .875rem;font:inherit;font-size:.8125rem;font-weight:600;
  color:var(--white);cursor:pointer;
}
.pf-file::file-selector-button:hover{background:rgba(255,255,255,.1)}
.pf-filenote{font-size:.75rem;color:var(--teal);min-height:1rem}

/* The amount block under the panel head. align-items:flex-start keeps the
   filled chip sized to its own number — stretched full-width it reads as a
   banner announcing a figure rather than as the figure itself. */
.pf-amount{
  margin-top:1.5rem;display:flex;flex-direction:column;align-items:flex-start;gap:.4375rem;
}

/* What the amount buys, cloned in from the tier card. */
.pf-rewards{margin-top:1.25rem;display:flex;flex-direction:column;gap:.5rem}
.pf-rewards[hidden]{display:none}
.pf-rewards-list{list-style:none;margin:0;padding:0;display:grid;gap:.4375rem}
.pf-rewards-list li{display:flex;align-items:flex-start;gap:.5rem}
.pf-rewards-list .b-yes{flex:none;margin-top:.0625rem;color:var(--teal)}
.pf-rewards-list .b-yes svg{width:.9375rem;height:.9375rem}
.pf-rewards-list .b-tcard-reward{font-size:.8125rem;line-height:1.45;color:var(--gray-sub)}

/* Inline field error. Red is the border; the words are lifted to #FF9C9B,
   which is legible on this surface where the border colour is not. */
.pf-fielderr{display:none;font-size:.75rem;line-height:1.5;color:#FF9C9B}
.pf-fielderr.is-on{display:block}
/* The gate checkbox is a flex row, so its error has to claim a full line of its
   own and align with the text rather than the box. */
.pf-check{flex-wrap:wrap}
.pf-check .pf-fielderr{flex:1 0 100%;margin-left:1.875rem}

/* a derived value the backer reads but cannot set */
.pf-label{font-size:.8125rem;font-weight:600;color:var(--white)}
.pf-readonly{
  background:rgba(255,255,255,.03);border:1px solid var(--hairline);border-radius:12px;
  padding:.8125rem .875rem;font-size:1rem;font-weight:700;letter-spacing:.02em;
  color:var(--teal);
}
/* the pledge amount is the anchor of this whole screen, so it is stated once,
   large, and cannot be mistyped */
.pf-readonly--amount{
  padding:1rem 1.125rem;font-size:1.75rem;font-weight:800;letter-spacing:-.03em;
  line-height:1;font-variant-numeric:tabular-nums;
  background:rgba(29,158,117,.07);border-color:rgba(29,158,117,.34);
}
.pf-field[hidden]{display:none}

/* quiet disclosure — present for the few who need it, invisible to everyone else */
.pf-linkbtn{
  align-self:flex-start;background:none;border:0;padding:0;font:inherit;
  font-size:.75rem;font-weight:600;color:var(--gray-mute);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;transition:color .16s;
}
.pf-linkbtn:hover{color:var(--white)}
.pf-linkbtn[hidden]{display:none}

/* checkboxes — the acknowledgement one is a gate, so it gets a surface */
.pf-check{
  display:flex;gap:.75rem;align-items:flex-start;
  font-size:.8125rem;line-height:1.55;color:var(--gray-sub);cursor:pointer;
}
.pf-check input{
  flex:none;width:1.125rem;height:1.125rem;margin-top:.1rem;accent-color:var(--teal);cursor:pointer;
}
.pf-check--gate{
  grid-column:1 / -1;background:var(--surface-2);border:1px solid var(--hairline);
  border-radius:12px;padding:.9375rem 1rem;
}
.pf-check--gate b{color:var(--white)}

.pf-actions{
  margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;
}
.pf-actions .b-btn{flex:1 1 14rem}
.pf-actions .b-btn.ghost{flex:0 0 auto}

/* Cloudflare Turnstile slot. Takes no space until pledge.js adds .is-live
   immediately before rendering — the widget is injected on first interaction,
   so a permanently reserved box would sit visibly empty in the tester form,
   while reserving nothing would shove the button down mid-typing. 65px is the
   widget's own height in flexible size. */
.pf-turnstile.is-live{margin-top:1.5rem;min-height:65px}

.pf-error{
  margin-top:1.125rem;background:rgba(226,75,74,.1);border:1px solid rgba(226,75,74,.42);
  border-radius:12px;padding:.875rem 1rem;font-size:.875rem;line-height:1.5;color:#FF9C9B;
}
.pf-error[hidden]{display:none}
.pf-progress{
  margin-top:1.125rem;font-size:.875rem;font-weight:600;color:var(--teal);
}
.pf-progress[hidden]{display:none}

/* ==========================================================================
   Legal + privacy copy blocks
   ========================================================================== */
/* Bare inside the pledge panel: the panel is already a bordered, filled card,
   so a second bordered fill here was a box inside a box. A hairline rule and
   the panel's own padding separate it just as well, and the block stops reading
   as a wall bolted into the middle of the form. It keeps the card treatment
   anywhere else it is used. */
.pf-policy{
  margin-top:1.5rem;background:var(--surface-2);border:1px solid var(--hairline);
  border-radius:14px;padding:1.125rem 1.25rem;
}
#pledgePanel .pf-policy{
  background:none;border:0;border-top:1px solid var(--hairline);
  border-radius:0;padding:1.375rem 0 0;
}
.pf-policy h4{
  font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray-mute);
}
.pf-policy p{margin-top:.625rem;font-size:.8125rem;line-height:1.65;color:var(--gray-sub)}
.pf-policy p + p{margin-top:.5rem}
.pf-policy a{color:var(--teal)}

/* Reassurance at the button, in the landing page's check-row idiom. Quiet
   enough not to compete with the submit, present enough that nobody has to
   scroll back a thousand pixels to remember the refund promise. */
.pf-assure{
  margin-top:1rem;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;list-style:none;padding:0;
}
.pf-assure li{
  display:inline-flex;align-items:center;gap:.4375rem;
  font-size:.8125rem;line-height:1.4;color:var(--gray-sub);
}
.pf-assure svg{width:14px;height:14px;color:var(--teal);flex:none}

.pf-privacy{
  margin-top:.875rem;font-size:.75rem;line-height:1.6;color:var(--gray-mute);
}
.pf-privacy a{color:var(--gray-sub)}

/* ==========================================================================
   Tester signup
   --------------------------------------------------------------------------
   One row on desktop, stacked on a phone. Reuses .pf-field / .pf-input so it
   matches the pledge form rather than inventing a second input style.
   ========================================================================== */
.ts-form{margin-top:1.75rem}
.ts-form[hidden]{display:none}

.ts-row{display:grid;gap:.875rem}
@media (min-width:44rem){
  /* email takes the slack; the select sizes to its longest option and the
     button to its label, so nothing stretches oddly */
  .ts-row{grid-template-columns:minmax(0,1fr) auto auto;align-items:end}
}
.ts-submit{white-space:nowrap}
@media (max-width:44rem){ .ts-submit{width:100%} }

.ts-note{
  margin-top:1.125rem;font-size:.8125rem;line-height:1.65;color:var(--gray-sub);
  background:var(--surface-2);border:1px solid var(--hairline);border-radius:12px;
  padding:.875rem 1rem;
}
.ts-note b{color:var(--teal)}
.ts-privacy{margin-top:.875rem;font-size:.75rem;line-height:1.6;color:var(--gray-mute)}
.ts-privacy a{color:var(--gray-sub)}

.ts-done{
  margin-top:1.75rem;background:var(--surface);
  border:1px solid rgba(29,158,117,.42);border-radius:18px;
  padding:1.5rem 1.375rem;text-align:center;
}
.ts-done[hidden]{display:none}
.ts-donemark{
  width:2.75rem;height:2.75rem;margin:0 auto .875rem;border-radius:50%;
  background:rgba(29,158,117,.16);display:flex;align-items:center;justify-content:center;
}
.ts-donemark svg{width:1.375rem;height:1.375rem;stroke:var(--teal)}
.ts-done h3{font-size:1.125rem;font-weight:800;letter-spacing:-.025em}
.ts-done p{margin-top:.625rem;font-size:.875rem;line-height:1.65;color:var(--gray-sub)}

/* ==========================================================================
   Pledge page (/p/<REF>)
   ========================================================================== */
.pp-main{display:block;padding-bottom:4rem}

.pp-hero{
  padding:clamp(2.5rem,7vw,4rem) 1.25rem clamp(2rem,5vw,3rem);
  position:relative;overflow:hidden;text-align:center;
}
.pp-hero::before{
  content:"";position:absolute;top:-40%;left:50%;transform:translateX(-50%);
  width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(29,158,117,.14),rgba(29,158,117,0) 62%);
  pointer-events:none;
}
.pp-hero > *{position:relative}
.pp-hero h1{
  margin-top:.875rem;font-size:clamp(1.75rem,5vw,2.5rem);font-weight:800;
  letter-spacing:-.035em;line-height:1.12;
}
.pp-hero .b-lede{margin-left:auto;margin-right:auto;text-align:center}

/* the reference — the single most important thing on the page */
.pp-refcard{
  max-width:30rem;margin:2rem auto 0;background:var(--surface);
  border:1px solid rgba(29,158,117,.42);border-radius:20px;
  padding:1.5rem 1.25rem;
  box-shadow:0 0 0 1px rgba(29,158,117,.08),0 18px 48px -24px rgba(29,158,117,.5);
}
.pp-reflabel{
  font-size:.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal);
}
.pp-refrow{
  margin-top:.75rem;display:flex;align-items:center;justify-content:center;gap:.75rem;
  flex-wrap:wrap;
}
.pp-ref{
  font-size:clamp(1.875rem,7vw,2.75rem);font-weight:800;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;line-height:1;
}
.pp-copy{
  background:rgba(255,255,255,.06);border:1px solid #3A3A38;border-radius:9px;
  padding:.4375rem .875rem;font:inherit;font-size:.8125rem;font-weight:600;
  color:var(--white);cursor:pointer;transition:background .16s,border-color .16s;
}
.pp-copy:hover{background:rgba(255,255,255,.11);border-color:#5A5A56}
.pp-refnote{margin-top:.875rem;font-size:.8125rem;line-height:1.6;color:var(--gray-sub)}

.pp-meta{
  margin-top:1.25rem;padding-top:1.125rem;border-top:1px solid var(--hairline);
  display:grid;gap:.875rem;
}
@media (min-width:30rem){ .pp-meta{grid-template-columns:1fr 1fr} }
.pp-meta > div[hidden]{display:none}
.pp-metalabel{
  font-size:.625rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray-mute);
}
.pp-metaval{margin-top:.3125rem;font-size:1rem;font-weight:700;letter-spacing:-.01em}
.pp-metasub{margin-top:.1875rem;font-size:.75rem;color:var(--gray-mute)}
#ppClock{font-variant-numeric:tabular-nums;color:var(--teal)}
#ppClock.is-low{color:var(--warning)}
#ppClock.is-out{color:var(--danger)}

/* ---------- payment rails ---------- */
.pp-rails{margin-top:1.5rem;display:grid;gap:1rem}

.pp-rail{
  background:var(--surface);border:1px solid var(--hairline);border-radius:18px;
  padding:1.25rem;
}
.pp-rail-head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1rem;
}
.pp-rail-head h3{font-size:1.0625rem;font-weight:800;letter-spacing:-.02em}
.pp-rail-amt{font-size:1.125rem;font-weight:800;letter-spacing:-.02em;color:var(--teal)}
.pp-rail-note{margin-top:.375rem;font-size:.8125rem;color:var(--gray-mute)}

.pp-rail-body{
  margin-top:1.125rem;display:flex;flex-wrap:wrap;gap:1.25rem;align-items:flex-start;
}
.pp-qr{flex:none;text-align:center}
.pp-qr img{
  display:block;width:176px;height:176px;border-radius:12px;background:var(--white);
  padding:8px;
}
.pp-qr-cap{
  margin-top:.5rem;font-size:.6875rem;font-weight:600;letter-spacing:.04em;
  color:var(--warning);
}

.pp-fields{flex:1 1 15rem;display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.25rem;align-items:baseline}
.pp-fields dt{font-size:.75rem;color:var(--gray-mute);white-space:nowrap}
.pp-fields dd{min-width:0}
.pp-field-val{
  font-size:.9375rem;font-weight:700;letter-spacing:-.005em;word-break:break-all;
}
.pp-field-val--amt{color:var(--teal)}

.pp-warn{
  margin-top:.875rem;background:rgba(226,75,74,.09);border:1px solid rgba(226,75,74,.4);
  border-radius:12px;padding:.875rem 1rem;display:flex;flex-direction:column;gap:.375rem;
}
.pp-warn b{font-size:.8125rem;font-weight:800;letter-spacing:.02em;color:#FF9C9B}
.pp-warn span{font-size:.8125rem;line-height:1.6;color:var(--gray-sub)}

.pp-other{margin-top:1.25rem;border:1px solid var(--hairline);border-radius:18px;background:var(--surface-2)}
.pp-other > summary{
  padding:1rem 1.25rem;font-size:.9375rem;font-weight:700;cursor:pointer;
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.pp-other > summary::-webkit-details-marker{display:none}
.pp-other > summary::after{
  content:"";width:.5rem;height:.5rem;flex:none;
  border-right:2px solid var(--gray-mute);border-bottom:2px solid var(--gray-mute);
  transform:rotate(45deg);transition:transform .18s;
}
.pp-other[open] > summary::after{transform:rotate(-135deg)}
.pp-other-in{padding:0 1.25rem 1.25rem}

.pp-callout{
  margin-top:1.25rem;background:rgba(239,159,39,.1);border:1px solid rgba(239,159,39,.4);
  border-radius:12px;padding:.875rem 1rem;font-size:.8125rem;line-height:1.6;color:#F0C486;
}
.pp-callout[hidden]{display:none}

/* Scoped advice that belongs to one rail, sitting inside that rail's card. */
.pp-rail-tip{
  margin-top:.875rem;background:var(--surface-2);border:1px solid var(--hairline);
  border-radius:12px;padding:.8125rem 1rem;font-size:.8125rem;line-height:1.6;
  color:var(--gray-sub);
}
.pp-rail-tip b{color:var(--white)}

.pp-regionnote{
  margin-top:1rem;font-size:.8125rem;color:var(--gray-mute);
}
.pp-regionnote[hidden]{display:none}
.pp-other[hidden]{display:none}

/* ---------- confirmation ---------- */
.pp-done{
  max-width:38rem;margin:0 auto;background:var(--surface);
  border:1px solid rgba(29,158,117,.42);border-radius:20px;
  padding:clamp(1.5rem,5vw,2.25rem);text-align:center;
}
.pp-done[hidden]{display:none}
.pp-donemark{
  width:3.25rem;height:3.25rem;margin:0 auto;border-radius:50%;
  background:rgba(29,158,117,.16);display:flex;align-items:center;justify-content:center;
}
.pp-donemark svg{width:1.625rem;height:1.625rem;stroke:var(--teal)}
.pp-done h2{margin-top:1.125rem;font-size:1.5rem;font-weight:800;letter-spacing:-.03em}
.pp-done p{margin-top:.875rem;font-size:.9375rem;line-height:1.65;color:var(--gray-sub)}
.pp-done .pp-doneref{
  display:inline-block;margin-top:1.125rem;background:var(--surface-2);
  border:1px solid var(--hairline);border-radius:10px;padding:.5rem 1rem;
  font-size:1.125rem;font-weight:800;letter-spacing:.04em;
}
.pp-donelist{
  margin-top:1.5rem;text-align:left;display:grid;gap:.75rem;
  padding-top:1.375rem;border-top:1px solid var(--hairline);
}
.pp-donelist li{
  list-style:none;font-size:.875rem;line-height:1.6;color:var(--gray-sub);
  padding-left:1.375rem;position:relative;
}
.pp-donelist li::before{
  content:"";position:absolute;left:.25rem;top:.5rem;width:.375rem;height:.375rem;
  border-radius:50%;background:var(--teal);
}

.pp-unknown{
  max-width:34rem;margin:clamp(3rem,10vw,6rem) auto;padding:0 1.25rem;text-align:center;
}
.pp-unknown[hidden]{display:none}
.pp-unknown h1{font-size:1.75rem;font-weight:800;letter-spacing:-.03em}
.pp-unknown p{margin-top:1rem;font-size:.9375rem;line-height:1.65;color:var(--gray-sub)}
.pp-unknown .b-btn{margin-top:1.75rem}