/* ============================================================
   Bsporty Cloud — low-fi clickable prototype
   On-brand (Bsporty green) but intentionally schematic.
   ============================================================ */
@import url('colors_and_type.css');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink: var(--bs-ink);
  --green: var(--bs-primary);
  --green-press: var(--bs-primary-press);
  --muted: #6B7785;
  --hair: var(--bs-divider);
  --surface: #FFFFFF;
  --page: #FAFAFA;
  --wire: #E6E8EB;       /* low-fi placeholder fill */
  --wire-line: #CDD2D8;  /* low-fi placeholder stroke */
}

html, body {
  font-family: var(--bs-font);
  color: var(--ink);
  background: #EDEFF2;
  -webkit-font-smoothing: antialiased;
}

.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; user-select: none; vertical-align: middle; }

/* ---------- prototype chrome ---------- */
.screen { display: none; min-height: 100vh; }
.screen.active { display: block; }

.proto-nav {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; gap: 4px; align-items: center;
  background: #12181E; padding: 6px; border-radius: var(--bs-r-pill);
  box-shadow: 0 8px 30px rgba(0,0,0,.28);
}
.proto-nav .pn-label { color: #8C97A3; font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; padding: 0 8px 0 10px; }
.proto-nav button {
  font-family: inherit; border: 0; cursor: pointer; color: #C7CDD4;
  background: transparent; padding: 8px 14px; border-radius: var(--bs-r-pill);
  font-size: 13px; font-weight: 500; transition: all .15s;
}
.proto-nav button:hover { color: #fff; background: rgba(255,255,255,.08); }
.proto-nav button.on { color: #fff; background: var(--green); }

/* ---------- shared buttons ---------- */
.btn { font-family: inherit; cursor: pointer; border: 0; border-radius: var(--bs-r-pill);
  font-size: 15px; font-weight: 600; padding: 14px 26px; transition: all .15s; display: inline-flex;
  align-items: center; gap: 8px; justify-content: center; }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-press); }
.btn-dark { background: #12181E; color: #fff; }
.btn-dark:hover { background: #000; }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--bs-border-grey); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-block { width: 100%; }
.btn-lg { padding: 17px 32px; font-size: 16px; }

/* ---------- marketing: page frame ---------- */
.mk { background: var(--page); }
.mk-wrap { max-width: 1240px; margin: 0 auto; padding: 0 48px; }

.announce {
  background: var(--green); color: #fff; font-size: 14px; font-weight: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 48px;
}
.announce a { color: #fff; text-decoration: none; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.announce .close { opacity: .8; cursor: pointer; }

.mk-header {
  position: sticky; top: 0; z-index: 50; background: rgba(250,250,250,.92);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--hair);
}
.mk-header .row { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.brandmark { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.brandmark img { height: 26px; }
/* The Bsporty Cloud lockup sets both words as one image, so it is far wider
   than the bare wordmark and has to be sized by width. Scoped to its own class
   rather than changing .brandmark img, because the coach pages still compose
   the old wordmark with a "Coaches" span and would be stretched by it. */
.brandmark img.brandlockup { height: auto; width: 168px; }
.brandmark .cloud { font-size: 24px; font-weight: 700; color: var(--ink); letter-spacing: -.5px; }
.mk-nav { display: flex; gap: 38px; }
.mk-nav a { color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 500; cursor: pointer; }
.mk-nav a:hover { color: var(--green); }
.mk-actions { display: flex; align-items: center; gap: 22px; }
.lang { display: flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; font-size: 15px; }
.lang .material-symbols-outlined { font-size: 18px; color: var(--muted); }

/* hero */
.hero { padding: 86px 0 96px; }
.hero .grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.hero h1 { font-size: 76px; line-height: .98; font-weight: 700; letter-spacing: -2px; }
.hero h1 .g { color: var(--green); }
.hero p.sub { margin-top: 28px; font-size: 21px; line-height: 1.5; color: var(--muted); max-width: 540px; }
.hero .cta-row { margin-top: 38px; display: flex; gap: 14px; }

/* hero visual — phone + brand chips (schematic) */
.hero-visual { position: relative; height: 520px; display: flex; align-items: center; justify-content: center; }
.phone {
  width: 252px; height: 510px; background: #fff; border-radius: 34px;
  border: 2px solid var(--ink); box-shadow: 0 24px 60px rgba(0,0,0,.16);
  position: relative; overflow: hidden;
}
.phone .notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 110px; height: 22px; background: var(--ink); border-radius: 0 0 14px 14px; z-index: 3; }

/* floating brand swatch chips around hero phone */
.swatch-float { position: absolute; background: #fff; border: 1px solid var(--hair); border-radius: var(--bs-r-lg);
  box-shadow: var(--bs-elev-md); padding: 10px 13px; display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; }
.swatch-float .dot { width: 18px; height: 18px; border-radius: 6px; }
.sf-1 { top: 38px; left: -8px; }
.sf-2 { top: 200px; right: -22px; }
.sf-3 { bottom: 66px; left: -28px; }

/* low-fi mini app inside phone (reused as live preview) */
.miniapp { --brand: var(--green); --brand-light: #9AD915; --splash: #E8F5E9;
  position: absolute; inset: 0; background: var(--page); padding: 30px 14px 0; display: flex; flex-direction: column; }
.ma-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ma-logo { width: 30px; height: 30px; border-radius: 8px; background: var(--brand); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; flex-shrink: 0; overflow: hidden; }
.ma-logo img { width: 100%; height: 100%; object-fit: cover; }
.ma-greet { font-size: 9px; color: var(--muted); line-height: 1.2; }
.ma-greet b { display: block; font-size: 13px; color: var(--ink); font-weight: 700; }
.ma-search { background: #fff; border: 1px solid var(--hair); border-radius: var(--bs-r-pill); height: 28px; display: flex; align-items: center; padding: 0 10px; gap: 6px; color: var(--bs-text-grey); font-size: 9px; margin-bottom: 12px; }
.ma-search .material-symbols-outlined { font-size: 13px; }
.ma-banner { background: linear-gradient(120deg, var(--brand), var(--brand-light)); border-radius: var(--bs-r-lg); height: 64px; margin-bottom: 14px; padding: 10px 12px; color: #fff; display: flex; flex-direction: column; justify-content: center; }
.ma-banner b { font-size: 12px; font-weight: 700; }
.ma-banner span { font-size: 8.5px; opacity: .92; }
.ma-sec { font-size: 10px; font-weight: 700; margin-bottom: 8px; }
.ma-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.ma-tile { background: var(--splash); border-radius: var(--bs-r-lg); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px; }
.ma-tile img { width: 26px; height: 26px; object-fit: contain; }
.ma-tile span { font-size: 6.5px; font-weight: 600; color: var(--ink); }
.ma-tile.sel { background: #fff; border: 1.5px solid var(--brand); }
.ma-cta { margin: auto 0 0; }
.ma-cta .pill { background: var(--brand); color: #fff; text-align: center; border-radius: var(--bs-r-pill); padding: 9px; font-size: 10px; font-weight: 700; }
.ma-nav { display: flex; padding: 8px 0 10px; gap: 0; }
.ma-nav .n { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 7px; color: var(--muted); font-weight: 600; }
.ma-nav .n.on { color: var(--brand); }
.ma-nav .n .material-symbols-outlined { font-size: 15px; }

/* section heading */
.sec { padding: 92px 0; }
.sec-dark { background: #0E1317; color: #fff; }
.eyebrow { color: var(--green); font-size: 14px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 14px; }
.sec h2 { font-size: 56px; font-weight: 700; letter-spacing: -1.2px; line-height: 1.02; }
.sec .sub { margin-top: 16px; font-size: 20px; color: var(--muted); }
.sec-dark .sub { color: #9AA4AE; }

/* modules */
.mod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 56px; }
.mod-card { background: #fff; border: 1px solid var(--hair); border-radius: var(--bs-r-xxl); padding: 40px 40px 30px; }
.mod-card h3 { font-size: 26px; font-weight: 700; margin-bottom: 8px; }
.mod-row { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--hair); }
.mod-row:last-child { border-bottom: 0; }
.mod-ico { width: 46px; height: 46px; border-radius: var(--bs-r-lg); background: var(--bs-mint-bg); color: var(--green); display: grid; place-items: center; flex-shrink: 0; }
.mod-ico .material-symbols-outlined { font-size: 24px; }
.mod-row .mt { font-size: 18px; font-weight: 600; }
.mod-row .md { font-size: 14px; color: var(--muted); margin-top: 2px; }
.mod-row.soon { opacity: .55; }
.mod-row.soon .mod-ico { background: var(--bs-off-white-1); color: var(--muted); }
.soon-pill { font-size: 10px; font-weight: 700; color: var(--green); background: var(--bs-mint-bg); padding: 2px 8px; border-radius: var(--bs-r-pill); margin-left: 8px; vertical-align: middle; }

/* how it works — connected step flow */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 60px; }
.step { position: relative; }
.step-top { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; }
.step-num { width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  font-size: 23px; font-weight: 700; background: #161C22; color: #fff; border: 2px solid #2A323A; transition: all .2s; }
.step.hot .step-num { background: var(--green); border-color: var(--green); box-shadow: 0 0 0 6px rgba(26,175,49,.18); }
.step-conn { flex: 1; display: flex; align-items: center; color: var(--green); opacity: .55; overflow: hidden; }
.step-conn .material-symbols-outlined { font-size: 30px; margin-left: -9px; }
.step-conn .material-symbols-outlined:first-child { margin-left: 0; }
.step:last-child .step-top .step-conn { display: none; }
.step .lbl { color: var(--green); font-size: 13px; font-weight: 700; letter-spacing: 1.4px; }
.step h3 { font-size: 27px; font-weight: 700; margin: 12px 0 12px; }
.step p { color: #9AA4AE; font-size: 17px; line-height: 1.55; max-width: 330px; }
[dir="rtl"] .step-conn { transform: scaleX(-1); }

/* pricing */
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 56px; max-width: 880px; }
.tier { background: #fff; border: 1px solid var(--hair); border-radius: var(--bs-r-xxl); padding: 40px; position: relative; display: flex; flex-direction: column; }
.tier.feat { border: 2px solid var(--green); box-shadow: var(--bs-elev-lg); }
.tier .ribbon { position: absolute; top: -13px; left: 40px; background: var(--green); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .5px; padding: 5px 14px; border-radius: var(--bs-r-pill); }
.tier h3 { font-size: 30px; font-weight: 700; }
.tier .svc-count { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 4px; }
.tier .svc-count b { font-size: 46px; font-weight: 700; color: var(--green); letter-spacing: -1px; }
.tier .svc-count span { font-size: 17px; color: var(--muted); font-weight: 500; }
.tier .desc { color: var(--muted); font-size: 16px; line-height: 1.5; margin-bottom: 26px; min-height: 48px; }
.tier ul { list-style: none; display: flex; flex-direction: column; gap: 15px; margin-bottom: 30px; }
.tier li { display: flex; gap: 11px; align-items: center; font-size: 16px; }
.tier li .material-symbols-outlined { color: var(--green); font-size: 21px; }
.tier .btn { margin-top: auto; }
.ent-strip { display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-top: 26px; max-width: 880px; background: #12181E; color: #fff; border-radius: var(--bs-r-xxl); padding: 28px 36px; }
.ent-strip .et h3 { font-size: 22px; font-weight: 700; }
.ent-strip .et p { color: #9AA4AE; font-size: 15px; margin-top: 4px; }

/* apply */
.apply-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 56px; margin-top: 52px; }
.apply-left ul { list-style: none; display: flex; flex-direction: column; gap: 18px; margin-top: 34px; }
.apply-left li { display: flex; gap: 12px; align-items: center; font-size: 18px; }
.apply-left li .material-symbols-outlined { color: var(--green); }
.apply-card { background: #fff; border: 1px solid var(--hair); border-radius: var(--bs-r-xxl); padding: 40px; box-shadow: var(--bs-elev-md); }
.field { margin-bottom: 22px; }
.field > label { display: block; font-size: 15px; font-weight: 500; margin-bottom: 9px; }
.field .lbl-row { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.field .lbl-row label { margin-bottom: 0; }
.field input, .field textarea, .field select {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--ink);
  border: 1.5px solid var(--bs-border-grey); border-radius: var(--bs-r-input);
  padding: 14px 15px; background: #fff; outline: none; transition: border .15s;
}
.field input:focus, .field textarea:focus { border-color: var(--green); }

/* Password reveal: the button sits inside the field, so the input needs room
   for it and RTL has to flip which side that room is on. */
.pw-wrap { position: relative; }
.pw-wrap input { padding-inline-end: 46px; width: 100%; }
.pw-eye {
  position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  color: var(--bs-text-grey);
}
.pw-eye:hover { background: var(--bs-mint-bg); color: var(--green); }
.pw-eye .material-symbols-outlined { font-size: 20px; }
.fhint { margin-top: 6px; font-size: 13px; color: var(--bs-text-grey); }
.field input.code-input { font-size: 26px; letter-spacing: 10px; text-align: center; font-weight: 600; }
.field > label .opt { font-weight: 400; color: var(--bs-text-grey); }
.field.consent { margin-bottom: 18px; }
.consent-row { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; cursor: pointer; }
.consent-row input[type="checkbox"] { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--green); }
.consent-row a { color: var(--green); text-decoration: underline; }

/* Shown on every wizard panel once the application is submitted. */
.readonly-note {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--bs-mint-bg); color: var(--bs-text-grey); font-size: 14px;
}
.readonly-note .material-symbols-outlined { font-size: 20px; }

/* Per-plan bullets on the plan step. */
.plan-features { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.plan-features li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--bs-text-grey); }
.plan-features .material-symbols-outlined { font-size: 18px; color: var(--green); }
.field input::placeholder, .field textarea::placeholder { color: var(--bs-text-grey); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { font-family: inherit; cursor: pointer; border: 1.5px solid var(--bs-border-grey); background: #fff;
  border-radius: var(--bs-r-pill); padding: 11px 18px; font-size: 14px; font-weight: 500; color: var(--ink); transition: all .15s; }
.chip:hover { border-color: var(--ink); }
.chip.on { border-color: var(--green); background: var(--bs-mint-bg); color: var(--green-press); }

/* footer */
.mk-footer { background: #0E1317; color: #9AA4AE; padding: 56px 0 40px; }
.mk-footer .row { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.mk-footer .brandmark .cloud { color: #fff; }
.mk-footer .fnav { display: flex; gap: 60px; }
.mk-footer .fcol h4 { color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.mk-footer .fcol a { display: block; color: #9AA4AE; text-decoration: none; font-size: 14px; margin-bottom: 9px; cursor: pointer; }
.mk-footer .fcol a:hover { color: #fff; }
.mk-footer .copy { margin-top: 40px; padding-top: 24px; border-top: 1px solid #232C35; font-size: 13px; }

/* ============================================================
   AUTH screens (signup / login)
   ============================================================ */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-side { background: #0E1317; color: #fff; padding: 64px; display: flex; flex-direction: column; }
.auth-side .brandmark .cloud { color: #fff; }
.auth-side .as-body { margin: auto 0; }
.auth-side h2 { font-size: 44px; font-weight: 700; letter-spacing: -1px; line-height: 1.05; }
.auth-side p { color: #9AA4AE; font-size: 19px; margin-top: 18px; line-height: 1.5; max-width: 400px; }
.auth-side .as-steps { margin-top: 40px; display: flex; flex-direction: column; gap: 16px; }
.auth-side .as-steps .s { display: flex; gap: 14px; align-items: center; font-size: 16px; }
.auth-side .as-steps .n { width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.auth-main { background: var(--page); display: flex; align-items: center; justify-content: center; padding: 48px; }
.auth-form { width: 100%; max-width: 420px; }
.auth-form h1 { font-size: 34px; font-weight: 700; letter-spacing: -.5px; }
.auth-form .lead { color: var(--muted); font-size: 16px; margin: 8px 0 32px; }
.auth-form .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.auth-form .alt { text-align: center; margin-top: 22px; font-size: 15px; color: var(--muted); }
.auth-form .alt a { color: var(--green); font-weight: 600; cursor: pointer; text-decoration: none; }
.auth-form .or { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 13px; margin: 22px 0; }
.auth-form .or::before, .auth-form .or::after { content: ''; flex: 1; height: 1px; background: var(--hair); }

/* ============================================================
   PORTAL
   ============================================================ */
.portal { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; background: var(--page); }
.p-side { background: #0E1317; color: #C7CDD4; padding: 26px 18px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.p-side .brandmark { padding: 0 10px 26px; }
.p-side .brandmark .cloud { color: #fff; font-size: 20px; }
.p-side .brandmark img { height: 22px; }
.p-nav { display: flex; flex-direction: column; gap: 3px; }
.p-nav .pi { display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-radius: var(--bs-r-lg); cursor: pointer; font-size: 15px; font-weight: 500; color: #C7CDD4; transition: all .15s; }
.p-nav .pi:hover { background: rgba(255,255,255,.06); color: #fff; }
.p-nav .pi.on { background: var(--green); color: #fff; }
.p-nav .pi .material-symbols-outlined { font-size: 21px; }
.p-nav .pi .check { margin-left: auto; font-size: 17px; color: var(--green); }
.p-nav .pi.on .check { color: #fff; }

/* sequential-setup status indicators */
.p-nav .pi .pi-status { margin-inline-start: auto; font-size: 19px; color: #5A6470; transition: color .15s; }
.p-nav .pi.cur:not(.on) { background: rgba(26,175,49,.12); color: #fff; }
.p-nav .pi.cur .pi-status { color: var(--green); }
.p-nav .pi.locked { opacity: .42; cursor: not-allowed; }
.p-nav .pi.locked:hover { background: transparent; color: #C7CDD4; }
.p-nav .pi:not(.locked):not(.cur) .pi-status { color: var(--green); }  /* done = green check */
.p-nav .pi.on .pi-status { color: #fff; }

/* checklist locked rows */
.cl-row.locked { opacity: .5; cursor: not-allowed; }
.cl-row.locked .cgo { color: var(--muted); }

/* disabled buttons */
.btn:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.3); }
.btn:disabled:hover { background: var(--green); }
.btn-ghost:disabled:hover { border-color: var(--bs-border-grey); }
.btn-green:disabled:hover { background: var(--green); }
.btn-dark:disabled:hover { background: #12181E; }

/* onboarded → merchant portal CTA */
.onboarded-cta { display: flex; align-items: center; gap: 18px; margin-top: 16px; padding: 22px 24px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--green) 12%, #fff), #fff);
  border: 1.5px solid var(--green); border-radius: var(--bs-r-xl); animation: fade .3s ease; }
.onboarded-cta .oc-ico { width: 50px; height: 50px; border-radius: 14px; background: var(--green); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.onboarded-cta .oc-ico .material-symbols-outlined { font-size: 27px; }
.onboarded-cta .oc-txt { flex: 1; }
.onboarded-cta .oc-t { font-size: 18px; font-weight: 700; }
.onboarded-cta .oc-p { font-size: 14px; color: var(--muted); margin-top: 2px; }
@media (max-width: 720px) {
  .onboarded-cta { flex-direction: column; align-items: flex-start; }
  .onboarded-cta .btn { width: 100%; }
}
.p-side .p-foot { margin-top: auto; padding: 14px; border-top: 1px solid #232C35; display: flex; align-items: center; gap: 11px; }
.p-side .p-foot .av { width: 36px; height: 36px; border-radius: 50%; background: #2A333D; display: grid; place-items: center; color: #fff; font-weight: 700; }
.p-side .p-foot .nm { font-size: 14px; color: #fff; font-weight: 600; line-height: 1.2; }
.p-side .p-foot .nm span { display: block; font-size: 12px; color: #8C97A3; font-weight: 400; }

.p-main { padding: 40px 52px 90px; overflow-y: auto; max-height: 100vh; }
.p-panel { display: none; max-width: 920px; }
.p-panel.on { display: block; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.p-head { margin-bottom: 30px; }
.p-head h1 { font-size: 34px; font-weight: 700; letter-spacing: -.5px; }
.p-head p { color: var(--muted); font-size: 16px; margin-top: 6px; }

.card { background: #fff; border: 1px solid var(--hair); border-radius: var(--bs-r-xl); padding: 26px; margin-bottom: 20px; }
.card > h3 { font-size: 19px; font-weight: 600; margin-bottom: 4px; }
.card > .ch-sub { color: var(--muted); font-size: 14px; margin-bottom: 20px; }

/* checklist (overview) */
.checklist { display: flex; flex-direction: column; gap: 2px; }
.cl-row { display: flex; align-items: center; gap: 14px; padding: 16px 4px; border-bottom: 1px solid var(--hair); cursor: pointer; }
.cl-row:last-child { border-bottom: 0; }
.cl-row .cb { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--bs-border-grey); display: grid; place-items: center; flex-shrink: 0; color: transparent; }
.cl-row.done .cb { background: var(--green); border-color: var(--green); color: #fff; }
.cl-row .ct { font-size: 16px; font-weight: 500; }
.cl-row.done .ct { color: var(--muted); }
.cl-row .cgo { margin-left: auto; color: var(--muted); }
.progress { height: 8px; background: var(--bs-off-white-1); border-radius: var(--bs-r-pill); overflow: hidden; margin-top: 6px; }
.progress > i { display: block; height: 100%; background: var(--green); border-radius: var(--bs-r-pill); transition: width .3s; }
.stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 20px; }
.stat { background: #fff; border: 1px solid var(--hair); border-radius: var(--bs-r-xl); padding: 22px; }
.stat .sl { font-size: 13px; color: var(--muted); font-weight: 500; }
.stat .sv { font-size: 30px; font-weight: 700; margin-top: 4px; letter-spacing: -.5px; }
.stat .sv.g { color: var(--green); }

/* document upload */
.doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.drop { border: 2px dashed var(--bs-border-grey); border-radius: var(--bs-r-lg); padding: 26px; text-align: center; cursor: pointer; transition: all .15s; background: #fff; }
.drop:hover { border-color: var(--green); background: var(--bs-mint-bg); }
.drop .material-symbols-outlined { font-size: 34px; color: var(--muted); }
.drop .dt { font-weight: 600; font-size: 15px; margin-top: 8px; }
.drop .dh { font-size: 13px; color: var(--muted); margin-top: 3px; }
.drop.filled { border-style: solid; border-color: var(--green); background: var(--bs-mint-bg); }
.drop.rejected { border-style: solid; border-color: #D63230; background: #FDF2F2; }
.drop.rejected .material-symbols-outlined, .drop.rejected .dh { color: #D63230; }
.drop.filled .material-symbols-outlined { color: var(--green); }
.drop .dt-ar { display: block; font-weight: 500; font-size: 13px; color: var(--muted); margin-top: 2px; direction: rtl; }

/* brand colors */
.brand-layout { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; }
/* The brand and identity steps preview the real app (not the small mock), so
   give their rails the room the device needs
   (388 - 44 card padding = 344 = 430 x .80). */
.brand-layout.has-live-app,
.id-grid.has-live-app { grid-template-columns: minmax(0, 1fr) 388px; }
.token { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.token:last-child { border-bottom: 0; }
.token .tk-sw { width: 52px; height: 52px; border-radius: var(--bs-r-lg); border: 1px solid var(--bs-border); flex-shrink: 0; cursor: pointer; position: relative; overflow: hidden; }
.token .tk-sw input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.token .tk-info { flex: 1; text-align: center; }
.token .tk-name { font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; }
.token .tk-req { font-size: 10px; font-weight: 700; color: var(--green); background: var(--bs-mint-bg); padding: 2px 7px; border-radius: var(--bs-r-pill); }
.token .tk-opt { font-size: 10px; font-weight: 600; color: var(--muted); background: var(--bs-off-white-1); padding: 2px 7px; border-radius: var(--bs-r-pill); }
.token .tk-desc { font-size: 13px; color: var(--muted); margin-top: 2px; }
.token .tk-hex { font-family: ui-monospace, Menlo, monospace; font-size: 14px; font-weight: 600; text-transform: uppercase;
  border: 1.5px solid var(--bs-border-grey); border-radius: var(--bs-r-input); padding: 9px 12px; width: 116px; text-align: center; outline: none; }
.token .tk-hex:focus { border-color: var(--green); }
.presets { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.preset { cursor: pointer; border: 1.5px solid var(--bs-border-grey); border-radius: var(--bs-r-pill); padding: 7px 9px 7px 12px; display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; background: #fff; transition: all .15s; }
.preset:hover { border-color: var(--ink); }
.preset.on { border-color: var(--ink); }
.preset .pd { display: flex; gap: 3px; }
.preset .pd i { width: 14px; height: 14px; border-radius: 4px; }

/* live preview rail */
.preview-rail { position: sticky; top: 20px; }
.preview-rail .pr-card { background: #fff; border: 1px solid var(--hair); border-radius: var(--bs-r-xl); padding: 22px; text-align: center; }
.preview-rail .pr-card .phone { margin: 0 auto; transform: scale(.92); }
.preview-rail .pr-hint { font-size: 13px; color: var(--muted); margin-top: 14px; display: flex; align-items: center; gap: 6px; justify-content: center; }
.preview-rail .pr-hint .material-symbols-outlined { font-size: 16px; color: var(--green); }
.preview-rail .pr-spec { font-size: 12.5px; color: var(--muted); margin-top: 8px; display: flex;
  align-items: center; gap: 6px; justify-content: center; text-align: center; line-height: 1.35; }
.preview-rail .pr-spec .material-symbols-outlined { font-size: 15px; color: var(--muted); flex-shrink: 0; }

/* Interactive live preview — the real app prototype in an iframe (/miniapp).
   The iframe is given the device's exact natural box (430×902) so the
   prototype's own fit() resolves to scale 1 and renders 1:1; we then scale the
   whole iframe down to the rail. Scaling here rather than inside keeps text
   crisp and avoids sub-pixel drift. --ma-k is tuned so the device occupies the
   same footprint (232×487) the static mock did — the rail doesn't reflow. */
.ma-live { --ma-k: .80; --ma-w: 430; --ma-h: 902;
  width: calc(var(--ma-w) * var(--ma-k) * 1px); height: calc(var(--ma-h) * var(--ma-k) * 1px);
  margin: 0 auto; position: relative; }
/* Short viewports: shrink so the device still fits beside the form. */
@media (max-height: 940px) { .ma-live { --ma-k: .68; } }
@media (max-height: 820px) { .ma-live { --ma-k: .58; } }
.ma-live iframe { position: absolute; top: 0; left: 0; border: 0; background: transparent;
  width: calc(var(--ma-w) * 1px); height: calc(var(--ma-h) * 1px);
  transform: scale(var(--ma-k)); transform-origin: top left; }

/* identity */
.id-grid { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; }
.logo-drop { width: 96px; height: 96px; border-radius: var(--bs-r-xl); border: 2px dashed var(--bs-border-grey); display: grid; place-items: center; cursor: pointer; background: #fff; overflow: hidden; position: relative; }
.logo-drop:hover { border-color: var(--green); }
.logo-drop img { width: 100%; height: 100%; object-fit: cover; }
.logo-drop .material-symbols-outlined { color: var(--muted); font-size: 30px; }
.id-row { display: flex; gap: 20px; align-items: center; margin-bottom: 24px; }
.count { font-size: 12px; color: var(--muted); text-align: right; margin-top: 6px; }

/* plan / services */
.svc-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.svc-opt { border: 1.5px solid var(--bs-border-grey); border-radius: var(--bs-r-lg); padding: 18px 14px; text-align: center; cursor: pointer; transition: all .15s; background: #fff; position: relative; }
.svc-opt:hover { border-color: var(--ink); }
.svc-opt.on { border-color: var(--green); background: var(--bs-mint-bg); }
.svc-opt img { width: 46px; height: 46px; object-fit: contain; }
.svc-opt .sn { font-size: 14px; font-weight: 600; margin-top: 8px; }
.svc-opt .sck { position: absolute; top: 8px; right: 8px; color: var(--green); font-size: 20px; display: none; }
.svc-opt.on .sck { display: block; }
.svc-opt.lock { opacity: .5; cursor: not-allowed; }
.plan-banner { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: linear-gradient(120deg, var(--green), #16962a); color: #fff; border-radius: var(--bs-r-xl); padding: 24px 28px; margin-bottom: 20px; }
.plan-banner h3 { font-size: 22px; font-weight: 700; }
.plan-banner p { font-size: 14px; opacity: .92; margin-top: 3px; }
.plan-banner .pill-tag { background: rgba(255,255,255,.22); padding: 8px 16px; border-radius: var(--bs-r-pill); font-weight: 700; font-size: 14px; }

.toast { position: fixed; bottom: 88px; left: 50%; transform: translateX(-50%) translateY(20px); opacity: 0;
  background: #12181E; color: #fff; padding: 13px 22px; border-radius: var(--bs-r-pill); font-size: 14px; font-weight: 500;
  z-index: 300; pointer-events: none; transition: all .3s; display: flex; gap: 9px; align-items: center; }
.toast .material-symbols-outlined { color: var(--green); font-size: 19px; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   Language toggle + portal sub-label
   ============================================================ */
.lang { cursor: pointer; user-select: none; }
.lang:hover { color: var(--green); }
.p-side-sub { color: #8C97A3; font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; padding: 0 10px 18px; margin-top: -16px; }
.proto-nav { direction: ltr; }
.pn-div { width: 1px; height: 22px; background: rgba(255,255,255,.16); margin: 0 4px; }
.pn-lang { display: inline-flex; align-items: center; gap: 6px; }
.pn-lang .material-symbols-outlined { font-size: 17px; }

/* ============================================================
   RTL — Arabic mirror
   ============================================================ */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .brandmark { direction: ltr; }          /* logo stays physically LTR */
[dir="rtl"] .hero h1,
[dir="rtl"] .sec h2,
[dir="rtl"] .auth-side h2,
[dir="rtl"] .auth-form h1,
[dir="rtl"] .p-head h1 { letter-spacing: 0; line-height: 1.12; }
[dir="rtl"] .eyebrow { letter-spacing: 0; }
[dir="rtl"] .cl-row .cgo,
[dir="rtl"] .announce .arr { transform: scaleX(-1); }   /* flip directional chevrons */
[dir="rtl"] .p-nav .pi .check { margin-left: 0; margin-right: auto; }
[dir="rtl"] .cl-row .cgo { margin-left: 0; margin-right: auto; }
[dir="rtl"] .tier .ribbon { left: auto; right: 40px; }
[dir="rtl"] .svc-opt .sck,
[dir="rtl"] .svc-opt .soon-pill { right: auto; left: 8px; }
[dir="rtl"] .count { text-align: left; }
[dir="rtl"] .dt-ar { direction: rtl; }
/* keep email/password inputs LTR for readability */
[dir="rtl"] input[type="email"], [dir="rtl"] input[type="password"] { direction: ltr; text-align: right; }
[dir="rtl"] .tk-hex { direction: ltr; }

/* ============================================================
   Plan switcher (adjustable)
   ============================================================ */
.plan-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.plan-choice { font-family: inherit; cursor: pointer; text-align: left; background: #fff; position: relative;
  border: 1.5px solid var(--bs-border-grey); border-radius: var(--bs-r-lg); padding: 18px 18px 16px; transition: all .15s; }
.plan-choice:hover { border-color: var(--ink); }
.plan-choice.on { border-color: var(--green); background: var(--bs-mint-bg); }
.plan-choice .pc-radio { position: absolute; top: 18px; right: 18px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--bs-border-grey); transition: all .15s; }
.plan-choice.on .pc-radio { border-color: var(--green); background: radial-gradient(circle, var(--green) 0 5px, transparent 6px); }
.plan-choice .pc-name { display: block; font-size: 18px; font-weight: 700; }
.plan-choice .pc-count { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); }
.plan-choice .pc-count b { font-size: 22px; color: var(--green); font-weight: 700; }
[dir="rtl"] .plan-choice { text-align: right; }
[dir="rtl"] .plan-choice .pc-radio { right: auto; left: 18px; }

/* ============================================================
   Portal: logout + mobile top bar + responsive sidebar
   ============================================================ */
.p-logout { font-family: inherit; cursor: pointer; display: flex; align-items: center; gap: 11px; width: 100%;
  margin-top: 8px; padding: 12px 14px; border: 0; background: transparent; color: #C7CDD4;
  border-radius: var(--bs-r-lg); font-size: 15px; font-weight: 500; transition: all .15s; }
.p-logout:hover { background: rgba(255,82,82,.14); color: #FF8B8B; }
.p-logout .material-symbols-outlined { font-size: 21px; }
/* The language row shares .p-logout's shape but not its "destructive" hover. */
.p-logout[data-lang-toggle]:hover { background: rgba(255,255,255,.08); color: #fff; }

/* Topbar right cluster: language + log out sit together on mobile. */
.p-topbar-actions { display: flex; align-items: center; gap: 2px; }

.p-topbar { display: none; align-items: center; justify-content: space-between; gap: 10px;
  position: sticky; top: 0; z-index: 60; background: #0E1317; padding: 10px 14px; }
.p-topbar .brandmark .cloud { color: #fff; font-size: 18px; }
.p-topbar .brandmark img { height: 20px; }
.p-burger { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: #fff; padding: 6px; display: grid; place-items: center; border-radius: var(--bs-r-sm); }
.p-burger:hover { background: rgba(255,255,255,.1); }
.p-scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 90; }
.p-scrim.show { display: block; }

/* ============================================================
   RESPONSIVE — tablet & mobile
   ============================================================ */
@media (max-width: 1080px) {
  .hero .grid { grid-template-columns: 1fr; gap: 8px; }
  .hero h1 { font-size: 58px; }
  .hero-visual { height: 440px; order: -1; }
  .mod-grid { grid-template-columns: 1fr; }
  /* `.has-live-app` is a two-class selector, so the single-class rule above
     never beat it: the brand and identity steps kept their 388px preview rail
     below 1080px, and the device drew straight over the form it was meant to
     sit beside. Both variants collapse here. */
  .brand-layout, .id-grid,
  .brand-layout.has-live-app, .id-grid.has-live-app { grid-template-columns: minmax(0, 1fr); }
  .preview-rail { position: static; max-width: 320px; }
  .brand-layout.has-live-app .preview-rail,
  .id-grid.has-live-app .preview-rail { max-width: 388px; }
}

@media (max-width: 720px) {
  .mk-wrap { padding: 0 22px; }
  .announce { padding: 9px 22px; font-size: 12.5px; }
  .announce > div:first-child { max-width: 60%; }
  /* The header carried logo + language + log in + Get Your App at their
     desktop sizes, which needs ~450px: on a phone it overflowed and pushed
     the whole document 73px wider than the viewport. Allowed to wrap onto a
     second line rather than dropping any of it — a returning merchant needs
     Log in as much as a new one needs the CTA. */
  /* padding-block, not the `padding` shorthand: .row is also .mk-wrap, whose
     22px inline padding is what keeps the header off the screen edges. */
  .mk-header .row { height: auto; min-height: 64px; flex-wrap: wrap; row-gap: 8px; padding-block: 10px; }
  /* `.brandmark img.brandlockup` (0-2-1) outranks `.brandmark img` (0-1-1),
     so the height override below never reached the lockup — it stayed 168px
     wide on every phone. Size the lockup itself. */
  .brandmark img { height: 22px; }
  .brandmark img.brandlockup { width: 128px; }
  .brandmark .cloud { font-size: 20px; }
  .mk-nav { display: none; }
  .mk-actions { gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
  /* nowrap, and NO `min-width: 0` on the cluster: allowed to shrink below its
     content, the flex row squeezes the CTA instead of wrapping — which is how
     "احصل على تطبيقك" ended up as three stacked words in a pill half off the
     screen. Keeping the buttons at their natural width forces the wrap. */
  .mk-actions .btn { padding: 9px 14px; font-size: 13.5px; white-space: nowrap; }

  .hero { padding: 44px 0 56px; }
  .hero h1 { font-size: 40px; letter-spacing: -1px; }
  .hero p.sub { font-size: 17px; margin-top: 18px; }
  .hero .cta-row { flex-direction: column; }
  .hero .cta-row .btn { width: 100%; }
  /* The phone is 510px tall inside a 400px box, so it spilled 110px over the
     headline underneath it (the hero stacks with the visual first on mobile).
     Let the box take the phone's own height instead of clipping to a number
     that was chosen for the two-column desktop layout. */
  .hero-visual { height: auto; padding: 6px 0 14px; }
  /* The floating brand chips need ~110px of clearance beside the 252px phone.
     A phone column is 331px wide, so all three ended up half-buried under the
     device — decoration that only made the hero look broken. Dropped below
     720px; the same idea is spelled out in words in the section beneath. */
  .swatch-float { display: none; }

  /* Announce bar: the message and the CTA/close cluster collided because the
     message was capped at 60% and neither side could wrap. */
  .announce { flex-wrap: wrap; gap: 6px 12px; }
  .announce > div:first-child { max-width: none; flex: 1 1 100%; }
  .announce > div:last-child { gap: 16px !important; margin-inline-start: auto; }

  .sec { padding: 52px 0; }
  .sec h2 { font-size: 34px; }
  .sec .sub { font-size: 16px; }
  .eyebrow { font-size: 12px; }
  .mod-card { padding: 26px 22px 18px; }
  .mod-card h3 { font-size: 22px; }
  .steps { grid-template-columns: 1fr; gap: 14px; }
  .step { display: grid; grid-template-columns: 54px 1fr; column-gap: 16px; align-items: start; }
  .step-top { flex-direction: column; margin-bottom: 0; grid-row: 1 / 3; height: 100%; gap: 6px; }
  .step-conn { flex-direction: column; flex: 1; min-height: 30px; }
  .step-conn .material-symbols-outlined { transform: rotate(90deg); margin-left: 0; margin-top: -9px; font-size: 26px; }
  .step-conn .material-symbols-outlined:first-child { margin-top: 0; }
  .step:last-child .step-top { height: auto; }
  .step .lbl { margin-top: 4px; }
  .step h3 { font-size: 22px; margin: 6px 0 8px; }
  .step p { padding-bottom: 14px; }
  [dir="rtl"] .step-conn { transform: none; }
  [dir="rtl"] .step-conn .material-symbols-outlined { transform: rotate(90deg); }

  .tiers { grid-template-columns: 1fr; gap: 30px; }
  .tier { padding: 30px 26px; }
  .ent-strip { flex-direction: column; align-items: flex-start; padding: 24px; }
  .ent-strip .btn { width: 100%; }

  .apply-grid { grid-template-columns: 1fr; gap: 30px; }
  .apply-left h2 { font-size: 32px !important; }
  .apply-card { padding: 26px 22px; }

  .mk-footer .row { flex-direction: column; gap: 28px; }
  .mk-footer .fnav { gap: 40px; }

  /* auth → single column */
  .auth { grid-template-columns: 1fr; }
  .auth-side { display: none; }
  .auth-main { padding: 32px 22px; min-height: 100vh; }

  /* portal → off-canvas sidebar */
  .portal { grid-template-columns: 1fr; }
  .p-topbar { display: flex; }
  .p-side { position: fixed; top: 0; bottom: 0; left: 0; width: 274px; height: 100vh;
    transform: translateX(-100%); transition: transform .25s ease; z-index: 100; }
  .p-side.open { transform: translateX(0); }
  [dir="rtl"] .p-side { left: auto; right: 0; transform: translateX(100%); }
  [dir="rtl"] .p-side.open { transform: translateX(0); }
  .p-main { padding: 26px 22px 70px; max-height: none; }
  .p-head h1 { font-size: 27px; }
  .stat-row { grid-template-columns: 1fr; gap: 12px; }
  .stat { padding: 18px; display: flex; align-items: baseline; justify-content: space-between; }
  .stat .sv { margin-top: 0; }
  .doc-grid { grid-template-columns: 1fr; }
  .svc-pick { grid-template-columns: repeat(2, 1fr); }

  /* The preview device is a fixed 430px box scaled by --ma-k; on a phone the
     .80 desktop scale (344px) is wider than the card holding it (viewport
     − 44px page padding − 44px card padding). --ma-k must stay UNITLESS —
     it is multiplied into a px width and fed to scale(), so deriving it from
     100vw yields a length and silently invalidates both, which renders the
     device at full size straight off the screen. Hence fixed steps.
     Declared after the max-height rules above so width wins on a phone,
     which is the axis that actually clips. */
  .brand-layout.has-live-app .preview-rail,
  .id-grid.has-live-app .preview-rail { max-width: none; }
  .ma-live { --ma-k: .62; }   /* 267px — fits a 360–430px viewport */

  /* Colour rows: swatch + label on one line, hex field full width beneath.
     The 116px hex input used to push the row past the viewport edge. */
  .token { flex-wrap: wrap; gap: 12px; }
  /* `1 1 0` + min-width:0 keeps the label beside the swatch and lets the
     description wrap inside it; `auto` sized it to the text and pushed the
     whole block onto its own line under the swatch. */
  .token .tk-info { flex: 1 1 0; min-width: 0; text-align: start; }
  .token .tk-name { justify-content: flex-start; }
  .token .tk-hex { width: 100%; order: 3; }

  /* Logo drop + name field stack instead of squeezing side by side. */
  .id-row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .id-row > * { width: 100%; }
  .logo-drop { width: 88px; height: 88px; }

  /* Wizard footers: full-width buttons rather than two half-clipped pills. */
  .p-main .btn-lg { width: 100%; }
  .p-main form > .btn + .btn { margin-top: 10px; }
  .plan-banner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .plan-toggle { grid-template-columns: 1fr; }

  /* keep prototype screen-switcher usable */
  .proto-nav { bottom: 10px; padding: 5px; gap: 2px; max-width: 94vw; overflow-x: auto; }
  .proto-nav .pn-label { display: none; }
  .proto-nav button { padding: 8px 11px; font-size: 12px; white-space: nowrap; }
}

@media (max-width: 420px) {
  .svc-pick { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 34px; }
  /* Globe only — the language name is the widest single item in the header
     row and the icon already says what the control does. */
  .mk-actions .lang [data-lang-label] { display: none; }
  .brandmark img.brandlockup { width: 112px; }
  /* Tight enough that the English header stays on one line; Arabic still
     wraps to two, which is why the row is allowed to wrap at all. */
  .mk-header .row { min-height: 56px; }
  .mk-actions { gap: 8px; }
  .mk-actions .btn { padding: 8px 12px; font-size: 13px; }
}

/* Smallest phones (320–360): the device needs another step down to clear the
   card padding. */
@media (max-width: 360px) {
  .ma-live { --ma-k: .52; }
}