/* Shared shell for the interactive checkout pages (subscribe / return / failed).
   index.html keeps its own inline styles — it is the static merchant-information
   page and is deliberately self-contained. */

@font-face{font-family:'Syne';font-style:normal;font-weight:400 800;font-display:swap;src:url('/fonts/syne-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Syne';font-style:normal;font-weight:400 800;font-display:swap;src:url('/fonts/syne-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/space-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/space-mono-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  --bg:#0a0a0f;
  --card:#12121a;
  --card-2:#171722;
  --primary:#00ff88;
  --primary-dim:#00cc6a;
  --blue:#00d4ff;
  --danger:#ff5c6a;
  --text:#ffffff;
  --text-2:#a8a8b8;
  --text-3:#6f6f80;
  --border:#2a2a3a;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Syne',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--primary);text-decoration:none;border-bottom:1px solid rgba(0,255,136,.3);}
a:hover{border-bottom-color:var(--primary);}
a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px;}

.mono{font-family:'Space Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
.ar{direction:rtl;text-align:right;font-size:.95em;color:var(--text-2);}

header{border-bottom:1px solid var(--border);background:rgba(10,10,15,.9);}
.head-in{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;justify-content:space-between;padding:18px 24px;max-width:720px;margin:0 auto;}
.brand{font-weight:800;letter-spacing:-.01em;}
.brand span{color:var(--primary);}
.secure{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);}

main{max-width:720px;margin:0 auto;padding:44px 24px 72px;}

h1{font-size:clamp(1.6rem,4vw,2.1rem);line-height:1.25;margin:0 0 10px;letter-spacing:-.02em;}
.eyebrow{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--primary);margin:0 0 14px;}
.lede{color:var(--text-2);margin:0 0 28px;}

.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:26px 24px;margin-bottom:22px;}
.card h2{font-size:1.05rem;margin:0 0 16px;letter-spacing:-.01em;}

.summary{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.summary .plan-name{font-size:1.35rem;font-weight:700;}
.summary .plan-price{font-size:1.35rem;font-weight:700;color:var(--primary);}
.summary .plan-meta{width:100%;color:var(--text-2);font-size:.92rem;margin-top:4px;}

label{display:block;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);margin:0 0 6px;}
.field{margin-bottom:18px;}
input[type=text],input[type=email],input[type=tel]{
  width:100%;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text);
  font:inherit;
  font-size:1rem;
  padding:12px 14px;
}
input:focus{outline:none;border-color:var(--primary-dim);box-shadow:0 0 0 3px rgba(0,255,136,.12);}
input[aria-invalid="true"]{border-color:var(--danger);}

.consent{display:flex;gap:12px;align-items:flex-start;background:var(--card-2);border:1px solid var(--border);border-radius:10px;padding:16px 18px;}
.consent input{margin-top:5px;width:18px;height:18px;accent-color:var(--primary);flex:0 0 auto;}
.consent p{margin:0;font-size:.9rem;color:var(--text-2);}

button.pay{
  width:100%;
  margin-top:22px;
  background:var(--primary);
  color:#04120a;
  border:0;
  border-radius:9px;
  font:inherit;
  font-weight:800;
  font-size:1.02rem;
  padding:15px 20px;
  cursor:pointer;
}
button.pay:hover:not(:disabled){background:var(--primary-dim);}
button.pay:disabled{opacity:.55;cursor:progress;}

.note{font-size:.82rem;color:var(--text-3);margin-top:16px;}
.error{background:rgba(255,92,106,.08);border:1px solid rgba(255,92,106,.4);color:#ffc9ce;border-radius:9px;padding:14px 16px;margin-bottom:20px;font-size:.94rem;}

.state{text-align:center;padding:40px 0;}
.spinner{width:56px;height:56px;margin:0 auto 22px;border-radius:50%;border:4px solid rgba(0,255,136,.18);border-top-color:var(--primary);animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.tick,.cross{width:64px;height:64px;margin:0 auto 22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;}
.tick{background:rgba(0,255,136,.14);color:var(--primary);}
.cross{background:rgba(255,92,106,.12);color:var(--danger);}
.hidden{display:none;}

footer{border-top:1px solid var(--border);padding:26px 24px 40px;text-align:center;color:var(--text-3);font-size:.82rem;}
footer p{margin:6px 0;}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}