/* pay.minimum.global checkout page.
 *
 * Standalone and self-contained: this origin's bucket holds only site/pay/**, so the page
 * cannot reach the apex /assets. The brand tokens and the two type families are therefore
 * declared here, and the woff2 faces ship next to this file under /fonts/. Keeping styles and
 * fonts local is what lets the CSP stay tight (style-src/font-src 'self'); the only external
 * thing this page loads is Paddle.js. External file, never an inline <style> block, so no
 * 'unsafe-inline' is needed for our own styles (Paddle injects its own overlay styles).
 */

/* ---- Fonts (self-hosted, subset latin; mirror of the apex faces) ---- */
@font-face{font-family:Montserrat;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/montserrat-600.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/montserrat-700.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-400.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-500.woff2) format("woff2")}

:root{
  --cal:#F4EDE1;
  --cal-2:#EFE7D7;
  --ink:#211B1A;
  --ink-soft:rgba(33,27,26,.72);
  --ink-faint:rgba(33,27,26,.66);
  --hair:rgba(33,27,26,.14);
  --barro:#A85C42;
  --barro-deep:#8F4A33;
  --azulejo:#3F6B87;
  --font-display:Montserrat,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-body:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r-sm:10px; --r-lg:20px;
  --shadow:0 1px 2px rgba(33,27,26,.04),0 10px 34px rgba(33,27,26,.07);
  --pad:clamp(1.25rem,5vw,2.25rem);
}

*{box-sizing:border-box}

body.pay{
  min-height:100svh;
  margin:0;
  display:grid;
  grid-template-rows:auto 1fr;
  background:var(--cal);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.6;
}

.pay__header{padding:clamp(1rem,3vw,1.75rem) var(--pad)}

.brand{display:inline-flex;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none}
.brand .mark{width:2.4rem;height:auto;overflow:visible}
.brand .mark path{stroke:var(--barro)}
.brand .mark circle{fill:var(--barro)}
.brand .name{font-family:var(--font-display);font-weight:600;font-size:.95rem;letter-spacing:.01em}

.pay__main{
  display:grid;
  place-items:center;
  align-content:center;
  gap:1.5rem;
  padding:var(--pad);
  padding-bottom:clamp(3rem,12vh,8rem);
}

.card{
  width:min(30rem,100%);
  padding:clamp(1.75rem,5vw,2.5rem);
  background:var(--cal-2);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  text-align:left;
}

.eyebrow{
  font-family:var(--font-body);
  font-weight:500;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--barro-deep);
  margin:0 0 .6rem;
}

h1#heading{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.4rem,3.5vw,1.8rem);
  line-height:1.12;
  letter-spacing:-.01em;
  margin:0 0 .75rem;
}

.message{color:var(--ink-soft);margin:0 0 1.25rem}

.card.is-error{border-color:rgba(168,92,66,.5)}
.card.is-error h1#heading{color:var(--barro-deep)}

.pay__btn{
  font-family:var(--font-display);
  font-weight:600;
  font-size:.98rem;
  letter-spacing:.01em;
  color:#fff;
  background:var(--barro);
  border:none;
  border-radius:var(--r-sm);
  padding:.8rem 1.3rem;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(168,92,66,.22);
  transition:background .18s ease,transform .18s ease;
}
.pay__btn:hover{background:var(--barro-deep);transform:translateY(-1px)}
.pay__btn:focus-visible{outline:2.5px solid var(--azulejo);outline-offset:3px}

.pay__back{
  display:inline-block;
  margin-top:1rem;
  color:var(--azulejo);
  text-decoration:none;
  font-size:.95rem;
}
.pay__back:hover{text-decoration:underline;text-underline-offset:.18em}

.pay__legal{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem 1.1rem;
  justify-content:center;
  width:min(30rem,100%);
  font-size:.85rem;
}
.pay__legal a{color:var(--ink-faint);text-decoration:none}
.pay__legal a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.18em}

:focus-visible{outline:2.5px solid var(--azulejo);outline-offset:3px;border-radius:3px}