.reg-shell{max-width:980px;padding:34px 20px 80px}.reg-progress{display:flex;gap:7px;overflow:auto;padding:0 0 16px}.reg-progress button{flex:0 0 auto;padding:7px 10px;border:0;border-radius:999px;background:#e8edf0;color:#52616b;font:inherit;font-size:12px;font-weight:700;cursor:pointer}.reg-progress button.active{background:#006f75;color:white}.reg-progress button.done{background:#d7f0e8;color:#075b46}.reg-progress button:disabled{cursor:default;opacity:.58}.reg-progress button:focus-visible{outline:2px solid #64c8c8;outline-offset:2px}.reg-card{background:#fff;border:1px solid #dfe7ea;border-radius:22px;padding:30px;box-shadow:0 18px 60px rgba(0,24,42,.08)}.reg-step{display:none}.reg-step.active{display:block}.reg-step h1{margin:.25rem 0 .5rem;color:#00182a}.reg-step p{color:#5b6870}.plan-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:22px 0}.plan-card{position:relative;text-align:left;border:2px solid #d8e3e6;background:#fff;border-radius:18px;padding:20px;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;color:#102b3a}.plan-card:hover{border-color:#73bfc0;transform:translateY(-1px)}.plan-card.selected{border-color:#087f7a;box-shadow:0 0 0 3px rgba(8,127,122,.12),0 14px 30px rgba(0,24,42,.08)}.plan-card:focus-visible{outline:3px solid #64c8c8;outline-offset:2px}.plan-card-check{position:absolute;right:16px;top:16px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#edf3f3;color:#6b7b82;font-weight:900}.plan-card.selected .plan-card-check{background:#087f7a;color:#fff}.plan-card-name{font-size:20px;font-weight:900;padding-right:34px}.plan-card-frequency{display:inline-block;margin-top:6px;font-size:11px;font-weight:800;text-transform:capitalize;color:#087f7a}.plan-card-price{font-size:28px;font-weight:950;color:#00182a;margin-top:16px}.plan-card-price small{font-size:12px;font-weight:700;color:#617078}.plan-card-meta{margin-top:10px;color:#617078;font-size:12px;line-height:1.55}.plan-loading{grid-column:1/-1;background:#f4f8f8;border:1px solid #d8e5e5;border-radius:14px;padding:18px;color:#53666e}.plan-quantity-grid{max-width:360px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}.field label{font-weight:750;color:#173343}.field input,.field select{width:100%;padding:13px 14px;border:1px solid #cdd8dd;border-radius:10px;background:#fff;color:#102b3a;font:inherit}.field input:focus,.field select:focus{outline:2px solid #64c8c8;outline-offset:1px;border-color:#167d82}.divider{border-top:1px solid #e5ecef;padding-top:18px;margin-top:4px}.divider small{color:#6d7b83}.actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.inline-actions{display:flex;gap:16px}.text-btn{border:0;background:none;color:#006f75;font-weight:700;cursor:pointer}.summary-box{background:#f4f8f8;border:1px solid #d8e5e5;border-radius:14px;padding:18px;line-height:1.7}.summary-box dl{display:grid;grid-template-columns:1fr auto;gap:8px 20px;margin:0}.summary-box dt{color:#53666e}.summary-box dd{margin:0;font-weight:750;color:#102b3a}.help{font-size:13px}.reg-notice{margin-bottom:18px;padding:12px 14px;border-radius:10px;background:#fff4d8;color:#654900;border:1px solid #f2d27a}.reg-notice.error{background:#fff0f0;color:#7d1c1c;border-color:#efb6b6}.reg-notice.ok{background:#eaf8f2;color:#145b43;border-color:#b9e5d3}.check a{color:#006f75}@media(max-width:680px){.reg-card{padding:20px 16px;border-radius:16px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.actions{flex-direction:column-reverse}.actions .primary-btn,.actions .ghost-btn{width:100%;text-align:center}.reg-shell{padding:20px 12px 100px}}
/* V5 parent international phone input */
.phone-composite{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(220px,1.2fr);gap:10px;align-items:center}
.phone-composite select,.phone-composite input{width:100%}
.field-help{display:block;margin-top:6px;opacity:.72;font-size:.82rem}
@media (max-width:640px){.phone-composite{grid-template-columns:1fr}}

.field-section-title {
  margin-top: .35rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(16, 42, 67, .12);
  font-weight: 800;
  letter-spacing: .02em;
  color: #17324d;
}

/* Registration resume */
.resume-entry{margin-top:18px;padding:16px 18px;border:1px solid var(--line,#d7e0e7);border-radius:16px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:#f8fbfc}
.resume-entry div{display:grid;gap:4px}.resume-entry strong{font-size:14px}.resume-entry span,.resume-login-head span{font-size:12px;color:var(--muted,#647481)}
.resume-login{margin-top:16px;padding:18px;border:1px solid var(--line,#d7e0e7);border-radius:16px;background:#fff}.resume-login[hidden]{display:none}
.resume-login-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.resume-login-head>div{display:grid;gap:4px}
@media(max-width:700px){.resume-entry{align-items:stretch;flex-direction:column}.resume-entry .ghost-btn{width:100%}}

/* Bilingual consent step */
.consent-intro{margin:8px 0 18px;font-size:11pt;color:#60717a}
.consent-form{display:grid;gap:18px}
.consent-select-all{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border:1px solid #b9d9d6;border-radius:16px;background:linear-gradient(135deg,#effaf8,#f8fcfc);cursor:pointer}
.consent-select-all input,.consent-card input{width:18px;height:18px;min-width:18px;margin:2px 0 0;accent-color:#087f7a;cursor:pointer}
.consent-select-all span{display:grid;gap:4px;color:#123642}
.consent-select-all strong{font-size:11pt;font-weight:850}
.consent-select-all bdi{font-size:11pt;color:#4a626b;font-weight:700}
.consent-list{display:grid;gap:14px}
.consent-card{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border:1px solid #dce7e9;border-radius:16px;background:#fff;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.consent-card:hover{border-color:#a9ceca;background:#fbfefe}
.consent-card:has(input:checked){border-color:#79bbb5;background:#f3fbf9;box-shadow:0 0 0 2px rgba(8,127,122,.06)}
.consent-card:focus-within{outline:2px solid #64c8c8;outline-offset:2px}
.consent-copy{display:grid;gap:8px;min-width:0;width:100%;font-size:11pt;line-height:1.65;color:#314952}
.consent-en{display:block;font-size:11pt}
.consent-ar{display:block;font-size:11pt;line-height:1.8;color:#425b64;border-top:1px solid #edf1f2;padding-top:8px;text-align:right}
.consent-copy em{font-style:normal;font-weight:800;color:#087f7a;margin-left:4px}
.consent-copy a{color:#006f75;font-weight:750;text-decoration:underline;text-underline-offset:2px}
.consent-optional{background:#fbfcfd}
.consent-optional .consent-copy em{color:#687b83}
.consent-help{margin:0;padding:12px 14px;border-radius:12px;background:#f7f9fa;line-height:1.7;font-size:11pt}
.consent-help span{display:block;margin-top:5px;text-align:right}
@media(max-width:680px){.consent-card,.consent-select-all{padding:14px}.consent-copy{font-size:11pt}.consent-en,.consent-ar{font-size:11pt}}

/* 2026-08-22 simplified approved registration flow */
.password-wrap{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.password-wrap .text-btn{padding:0 6px;white-space:nowrap}.stripe-boundary{margin:16px 0;padding:16px 18px;border-radius:14px;border:1px solid #cfe1e3;background:#f7fbfb}.stripe-boundary strong{color:#123642}.stripe-boundary p{margin:6px 0 0;font-size:13px}.student-location-summary{margin:18px 0 4px;padding:14px 16px;border-radius:14px;background:#f4f8f8;border:1px solid #d8e5e5;color:#314952;font-weight:750}.student-location-summary small{display:block;margin-top:3px;font-weight:500;color:#60717a}.reg-step a{color:#006f75}.signup-header small{font-size:12px;letter-spacing:.02em}

/* 2026-08-22 all-learners single-page registration */
.learner-forms{display:grid;gap:22px;margin-top:18px}.learner-card{padding:22px;border:1px solid #d6e4e5;border-radius:18px;background:#fbfdfd}.learner-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}.learner-card-heading h2{margin:4px 0 0}.learner-saved-badge{padding:6px 10px;border-radius:999px;background:#d9f1ea;color:#0b6653;font-weight:800;font-size:12px}.learner-card-complete{background:#f5faf8}.learner-location-block{margin-top:18px;padding-top:18px;border-top:1px solid #dce7e8}.learner-location-block h3{margin:0 0 4px}.learner-location-block .help{margin:0 0 14px}.learner-card .field.full{grid-column:1/-1}@media(max-width:680px){.learner-card{padding:16px}.learner-card-heading{align-items:center}.learner-forms{gap:16px}}

/* An element carrying the hidden attribute must actually be hidden.
   .field is display:flex and .ghost-btn is display:flex, and an author rule beats the browser
   default styling of [hidden], so "Please specify relationship" and the Stripe refresh button
   stayed on screen while marked hidden. */
[hidden]{display:none !important}


/* The welcome band on step 1 of registration.
   The artwork is a banner-shaped crop of the full picture, shown whole at its own proportions.
   Cropping in CSS instead would rescale the image and slide the painted board out from under the
   words, which is exactly what happened first time round. The Arabic is real text laid over a
   blank board, never painted into the picture, because image generators mangle Arabic script. */
.welcome-hero{position:relative;width:100%;aspect-ratio:1536/770;overflow:hidden;
  border-radius:16px;margin:0 0 22px;background:#E8C89A;container-type:inline-size}
.welcome-art{width:100%;height:100%;display:block}
/* The words and the mark wait for the artwork, then arrive in that order. Without this they
   paint instantly and hang in an empty box while the picture is still downloading. */
.welcome-sign,.welcome-mark{opacity:0;transition:opacity .5s ease}
.welcome-hero.ready .welcome-sign{opacity:1;transition-delay:.12s}
.welcome-hero.ready .welcome-mark{transition-delay:.62s}
.welcome-sign{position:absolute;left:21.5%;top:38.7%;width:34%;height:55.7%;
  display:grid;place-items:center;transform:rotate(-2.5deg);
  font-weight:900;font-size:4.6cqw;line-height:1.32;color:#33506B;
  text-align:center;direction:rtl}
.welcome-mark{position:absolute;right:4%;top:4%;width:24%;pointer-events:none}
.welcome-hero.ready .welcome-mark{animation:welcome-drift 13s ease-in-out infinite .62s}
@keyframes welcome-drift{
  0%,100%{opacity:.30;transform:translate3d(0,0,0) scale(1)}
  50%    {opacity:.52;transform:translate3d(-1.2%,1.4%,0) scale(1.035)}
}
@media(max-width:680px){
  .welcome-hero{border-radius:12px}
}
@media(prefers-reduced-motion:reduce){
  .welcome-hero.ready .welcome-mark{animation:none;opacity:.4}
  .welcome-sign,.welcome-mark{transition:none}
}

/* Number of Learners: starts empty, must be filled (PO 2026-10-03) */
.learner-count-field label{font-weight:900;font-size:14px}
.learner-count-field input{border:2px solid var(--gold,#f6a72e);border-radius:999px;padding:13px 20px}
.learner-count-field input:focus{outline:2px solid #f6a72e;outline-offset:2px;border-color:#e08a0b}

/* Step 1: two sign-up buttons and Continue registration, English line then Arabic line (PO 2026-10-27) */
.su-sub{margin:0 0 14px;font-weight:700;color:#41525e}
#googleSignup{text-align:center;border:0;background:none;padding:0}
#googleButton{display:flex;justify-content:center}
.su-entry{display:block;padding:0;border:0;background:none}
.su-btn{width:100%;display:flex;flex-direction:column;align-items:center;gap:2px;border-radius:14px;padding:12px 16px;font:inherit;font-weight:800;font-size:17px;cursor:pointer;line-height:1.3}
.su-btn small{font-size:15px;font-weight:700;opacity:.9}
.su-btn-email{background:#0d6f6c;color:#fff;border:0}
.su-btn-resume{background:#fff;color:#0d6f6c;border:2px solid #0d6f6c}
.su-btn span{font-size:17px;color:inherit}

/* One sign-in form for Log in and Continue registration (PO 2026-10-28): two boxes, "Or" in orange */
.signin-h{display:none;font-size:17px;font-weight:900;margin:0 0 12px;line-height:1.35;text-align:left}
.signin-mode .signin-h{display:block}
.or-w{color:#e2782b}
.signin-mode #googleSignup{border:1px solid var(--line,#dfe6e9);border-radius:16px;padding:14px;background:#fbfdfd;margin-top:16px}
.signin-mode #googleButton{justify-content:flex-start}
#resumeLoginForm{display:flex;flex-direction:column;background:#fbfdfd;padding:14px}
#resumeLoginForm[hidden]{display:none}
#resumeLoginForm .field{margin:0 0 12px}
#resumeLoginForm .actions{margin:4px 0 0;display:block}
.signin-btn{width:100%;justify-content:center}
.signin-forgot{margin:12px auto 0;display:block}
.signin-new{text-align:center;margin:18px 0 0;padding-top:14px;border-top:1px solid #eef2f3;font-size:14px;color:#41525e}
.signin-new .text-btn{font-weight:800;padding:0}