/* ═══════════════════════════════════════════════════════════════════════════
   Automate Advisors — shared app design layer (2026-10-15)
   Used by pay/index.html, pay/view.html and portal/index.html. Mirrors the
   marketing site (css/modern.css): same palette, serif headings, pill buttons,
   rounded cards, dark feature rail. Presentation only — no markup/logic changes.
   Keep pay/aa-app.css and portal/aa-app.css identical.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── TOKENS (override the apps' own) ── */
html:not([data-theme="dark"]){
  --bg:#f5f7fb;--bg2:#ffffff;--bg3:#eef2f8;--bg-rgb:245,247,251;
  --cyan:#00a396;--cyan-rgb:0,163,150;--cyan-pale:rgba(0,163,150,.09);--cyan-border:rgba(0,163,150,.3);
  --silver:#2c3646;--silver2:#6b7689;--white:#0b1220;--fg-rgb:11,18,32;
  --muted:rgba(11,18,32,.58);--border:rgba(11,18,32,.09);
  --success:#12a150;--danger:#d92d2d;--danger-rgb:217,45,45;
  --toast-bg:#e8faf7;--rail-deep:#0d1a24;
}
html[data-theme="dark"]{
  --bg:#070b14;--bg2:#0d1422;--bg3:#111a2c;--bg-rgb:7,11,20;
  --cyan:#19d9c8;--cyan-rgb:25,217,200;--cyan-pale:rgba(25,217,200,.1);--cyan-border:rgba(25,217,200,.28);
  --silver:#c8cdd6;--silver2:#8a94a8;--white:#f3f6fb;--fg-rgb:243,246,251;
  --muted:rgba(224,231,245,.58);--border:rgba(255,255,255,.09);
  --success:#3ecf8e;--danger:#f87171;--danger-rgb:248,113,113;
  --toast-bg:#0d1f1d;--rail-deep:#0a1620;
}
@media(prefers-color-scheme:dark){
  html:not([data-theme]){
    --bg:#070b14;--bg2:#0d1422;--bg3:#111a2c;--bg-rgb:7,11,20;
    --cyan:#19d9c8;--cyan-rgb:25,217,200;--cyan-pale:rgba(25,217,200,.1);--cyan-border:rgba(25,217,200,.28);
    --silver:#c8cdd6;--silver2:#8a94a8;--white:#f3f6fb;--fg-rgb:243,246,251;
    --muted:rgba(224,231,245,.58);--border:rgba(255,255,255,.09);
    --success:#3ecf8e;--danger:#f87171;--danger-rgb:248,113,113;
    --toast-bg:#0d1f1d;--rail-deep:#0a1620;
  }
}
:root{--serif:'Fraunces',Georgia,'Times New Roman',serif;--ease:cubic-bezier(.22,1,.36,1);--cta:#FF7A1A;--cta-ink:#1a0c00;--radius:22px;--radius-sm:14px;
  --shadow-card:0 1px 2px rgba(20,35,70,.05),0 12px 36px rgba(20,35,70,.06);}
html[data-theme="dark"]{--shadow-card:0 12px 40px rgba(0,0,0,.35);}
::selection{background:var(--cyan);color:#04070d;}
html,body{background:var(--bg);}

/* ── RAIL: dark feature panel (same in light and dark) ── */
.rail{
  --white:#f3f6fb;--fg-rgb:243,246,251;--muted:rgba(224,231,245,.62);--border:rgba(255,255,255,.1);
  --cyan:#19d9c8;--cyan-rgb:25,217,200;--cyan-pale:rgba(25,217,200,.1);--cyan-border:rgba(25,217,200,.3);
  --bg2:rgba(255,255,255,.06);--bg3:rgba(255,255,255,.1);--silver2:#9aa6bb;
  background:radial-gradient(120% 90% at 0% 0%,rgba(25,217,200,.22),transparent 55%),linear-gradient(170deg,#0f2230 0%,#070b14 70%);
  color:var(--white);border:1px solid rgba(255,255,255,.08);
  border-radius:28px;margin:14px 0 14px 14px;height:calc(100vh - 28px);top:14px;padding:30px 30px 26px;
  box-shadow:0 24px 60px rgba(7,11,20,.25);
}
html[data-theme="dark"] .rail{box-shadow:none;}
.rail-title{font-family:var(--serif);font-weight:500;font-size:clamp(26px,2.4vw,32px);line-height:1.1;letter-spacing:-.025em;color:#fff;}
.rail-lead{color:var(--muted);}
.rstep.active{color:#fff;}
.rstep.done .dot,.theme-btn.active{background:var(--cyan);color:#04070d;}
.logo-img{height:46px;}
.secure-badge{border-radius:999px;padding:5px 12px;}
.theme-toggle{border-radius:999px;}

/* ── MAIN ── */
.main{background:radial-gradient(900px 460px at 85% -8%,rgba(var(--cyan-rgb),.1),transparent 62%);}
.screen{padding-top:clamp(44px,7vh,76px);}
.screen-eyebrow,.section-hdr{letter-spacing:2px;color:var(--cyan);}
.screen-title,.home-title,.success-title,.lo-ready-title,.step-title,.fee-amt,.ms-title{
  font-family:var(--serif);font-weight:500;letter-spacing:-.025em;color:var(--white);}
.screen-title,.home-title{font-size:clamp(32px,4.2vw,46px);line-height:1.05;margin-bottom:12px;}
.screen-sub,.home-sub{font-size:14.5px;color:var(--muted);}
.fee-amt{font-size:clamp(40px,5vw,56px);font-weight:500;}

/* ── CARDS ── */
.choice-card,.product-card,.service-card,.step-card,.info-box,.stripe-box,.success-card,.upload-area,.tc-checkbox-row,.paid-banner,.save-banner,.modal-card,.err-card,.pay-step{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card);}
.info-box,.tc-checkbox-row,.paid-banner,.save-banner{border-radius:var(--radius-sm);box-shadow:none;}
.choice-card,.product-card,.service-card{transition:transform .3s var(--ease),border-color .25s,box-shadow .3s,background .25s;}
.choice-card:hover,.product-card:hover,.service-card:hover{transform:translateY(-3px);border-color:var(--cyan-border);background:var(--bg2);
  box-shadow:0 18px 50px rgba(var(--cyan-rgb),.14),var(--shadow-card);}
.choice-icon,.product-icon{border-radius:50%;background:var(--cyan-pale);border-color:var(--cyan-border);}
.choice-arrow{color:var(--cyan);}
.product-name,.svc-name,.choice-title{font-weight:700;color:var(--white);}
.product-badge,.badge-fin,.badge-ins,.pill{border-radius:999px;}
.fee-box{border-radius:var(--radius);background:linear-gradient(155deg,rgba(var(--cyan-rgb),.12),var(--bg2) 70%);box-shadow:var(--shadow-card);}
.warn-box{border-radius:var(--radius-sm);}
.success-ring{background:rgba(var(--cyan-rgb),.1);}

/* ── FORMS ── */
.field label{letter-spacing:.8px;color:var(--silver2);}
.field input,.field select,.field textarea,.form-wrap input,.form-wrap select,.form-wrap textarea{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;font-size:15px;color:var(--white);
  transition:border-color .2s,box-shadow .2s;}
.field input:focus,.field select:focus,.field textarea:focus,.form-wrap input:focus,.form-wrap select:focus,.form-wrap textarea:focus{
  outline:none;border-color:var(--cyan);box-shadow:0 0 0 4px rgba(var(--cyan-rgb),.14);}
.field input.error,.field select.error{box-shadow:0 0 0 4px rgba(var(--danger-rgb),.12);}
.radio-opt,.pill-group .pill{background:var(--bg2);border:1px solid var(--border);}
.radio-opt.active,.pill.active,.pill-group .pill.active{border-color:var(--cyan);background:var(--cyan-pale);color:var(--cyan);}
.tc-checkbox-row input[type=checkbox]{accent-color:var(--cyan);}

/* ── BUTTONS: orange pill CTA, ghost pill, green WhatsApp ── */
.btn-primary,.tc-btn-accept,.btn-submit,.btn-submit-hero,.btn-next{
  background:var(--cta);color:var(--cta-ink);border:none;border-radius:999px;
  font-family:'Inter',sans-serif;font-weight:800;font-size:15.5px;letter-spacing:.1px;text-transform:none;
  padding:16px 28px;box-shadow:0 8px 28px rgba(255,122,26,.3);
  transition:transform .25s var(--ease),box-shadow .25s,background .2s,opacity .2s;}
.btn-primary:hover,.tc-btn-accept:hover,.btn-submit:hover,.btn-submit-hero:hover,.btn-next:hover{
  background:#ff8a35;opacity:1;transform:translateY(-2px);box-shadow:0 14px 38px rgba(255,122,26,.45);}
.btn-primary[disabled],.btn-submit[disabled],.btn-next[disabled]{box-shadow:none;}
.btn-ghost,.btn-prev,.lo-copy-fallback,.back-btn.pill{border-radius:999px;background:transparent;border:1px solid var(--border);color:var(--white);}
.btn-ghost:hover,.btn-prev:hover,.lo-copy-fallback:hover{border-color:var(--cyan);color:var(--cyan);}
.btn-whatsapp,.btn-wa{border-radius:999px;font-family:'Inter',sans-serif;font-weight:800;letter-spacing:.1px;text-transform:none;box-shadow:0 8px 26px rgba(37,211,102,.28);}
.btn-stripe{border-radius:999px;}
.lo-close,.tc-close{border-radius:999px;}

/* ── OVERLAYS / MODALS / TOAST ── */
.link-overlay,.tc-modal{background:var(--bg);}
.lo-header,.tc-modal-header{background:var(--bg2);}
.tc-body h3{font-family:var(--serif);font-weight:500;font-size:19px;letter-spacing:-.01em;}
.toast{border-radius:999px;}
.spinner{border-top-color:var(--cyan);}

/* ── PROGRESS (portal forms) ── */
.progress-wrap,.progress-steps{border-radius:999px;}

/* ── STAFF VIEW PAGE (pay/view.html) ── */
.top-bar{--white:#f3f6fb;--muted:rgba(224,231,245,.62);--border:rgba(255,255,255,.1);--bg2:rgba(255,255,255,.06);
  --cyan:#19d9c8;--cyan-rgb:25,217,200;--cyan-pale:rgba(25,217,200,.1);--cyan-border:rgba(25,217,200,.3);
  margin:14px 14px 0;padding:12px 18px!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:999px;
  background:radial-gradient(120% 160% at 0% 0%,rgba(25,217,200,.22),transparent 55%),linear-gradient(170deg,#0f2230,#070b14 80%);box-shadow:0 18px 44px rgba(7,11,20,.22);}
.top-bar img{height:50px!important;}
#app:has(.top-bar){max-width:640px!important;}
.details-header h1,.details-header h2,.section-title{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;}
.section{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card);}
.warn-banner{border-radius:var(--radius-sm);}

/* ── MOBILE ── */
@media(max-width:900px){
  .rail{width:auto;margin:12px;height:auto;position:relative;top:0;border-radius:24px;padding:22px 20px 20px;}
  .screen{padding-top:28px;}
}
@media(max-width:520px){.rail{margin:10px;padding:18px 16px;}.logo-img{height:40px;}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

/* keep the rail pinned: overflow-x:hidden on html+body turns body into a scroll container and breaks sticky */
html,body{overflow-x:clip!important;}
.logo-img{height:54px;}

/* secondary action (pay: "I've already paid", "No, I still need to pay") */
.btn-cont{background:var(--cyan-pale);color:var(--cyan);border:1px solid var(--cyan-border);border-radius:999px;font-family:'Inter',sans-serif;font-weight:700;font-size:15px;letter-spacing:.1px;text-transform:none;padding:15px 24px;box-shadow:none;transition:background .2s,color .2s,transform .25s var(--ease);}
.btn-cont:hover{background:var(--cyan);color:#04070d;opacity:1;transform:translateY(-2px);}