/* COPIED from Design-System/components.css by src/build.py: do not edit here. */
/* Binaa components. Read tokens.css only: no colour, size or font typed here beside a token that exists.
   Logical properties throughout, so one stylesheet serves the Arabic (rtl) and English (ltr) pages.
   Plain class names, so the build team can carry them into packages/ui-web.
   Shown, with their states, in index.html (ar) and en.html (en). Behaviour for the interest form: components.js. */

/* ---------------------------------------------------------------- icons and helpers */
.ico { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .ico.flip { transform: scaleX(-1); }
.vh { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--r-pill);
  background: var(--b); color: var(--t); font: var(--type-caption); vertical-align: middle; max-inline-size: 100%; }
.badge .ico { color: var(--c); }
/* markers: draft (on-hold colours), example (in-practice), coming soon (not-started: not in the launch build yet).
   The word carries the meaning; the icon is optional. */
.badge-soon { --c: var(--status-not-started); --b: var(--status-not-started-bg); --t: var(--status-not-started-text); }
.badge-soon, .badge-example { white-space: nowrap; }      /* one or two words: never split */
/* a draft note can be a sentence: it wraps, so it takes softer corners and keeps its icon on the first line */
.badge-draft { border-radius: var(--r); align-items: flex-start; }
.badge-draft .ico { margin-block-start: .1em; }
.badge-draft { --c: var(--status-on-hold); --b: var(--status-on-hold-bg); --t: var(--status-on-hold-text); }
.badge-example { --c: var(--status-in-practice); --b: var(--status-in-practice-bg); --t: var(--status-in-practice-text); }

/* ---------------------------------------------------------------- buttons */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-block-size: 48px; padding-inline: var(--space-6); border-radius: var(--r); border: 1px solid transparent; overflow: hidden;
  font: 600 var(--fs-body)/1.2 var(--font-body); text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn-1 { background: var(--primary); color: var(--on-primary); }
.btn-1:hover { background: var(--primary-hover); }
.btn-2 { background: var(--surface); color: var(--fg); border-color: var(--line-strong); }
.btn-2:hover { background: var(--raised); }
.btn:disabled { background: var(--raised); color: var(--fg-3); border-color: transparent; cursor: not-allowed; }
.btn-block { inline-size: 100%; }
.btn-form { min-block-size: var(--fld-cta-h); font-size: var(--fld-cta-font); }   /* a form's submit: interest, login, register */
/* busy: the label changes and a thin bar runs along the bottom edge; with reduced motion, the label alone */
.btn .when-busy { display: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"] .when-busy { display: inline; }
.btn[aria-busy="true"] .when-idle, .btn[aria-busy="true"] .when-idle ~ .ico { display: none; }
.btn .busy { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 3px; background: currentColor; opacity: 0;
  transform: scaleX(0); transform-origin: 0 50%; }
[dir="rtl"] .btn .busy { transform-origin: 100% 50%; }
.btn[aria-busy="true"] .busy { opacity: .5; animation: btn-busy calc(var(--dur-slow) * 4) var(--ease) infinite; }
@keyframes btn-busy { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .btn[aria-busy="true"] .busy { animation: none; opacity: 0; } }

/* ---------------------------------------------------------------- fields
   The landing's own field (91326dd), now the standard: an underline, a label that rests in the field and floats above
   it on focus or once filled, and a teal line that draws across on focus. Login, register and the interest form share it.
   Markup: .fld > label + .ctl > (input placeholder=" ") + i, then .err. The label floats by CSS (:placeholder-shown);
   the .filled class that site.js and auth.js set works too. Errors: data-invalid (components.js) or .bad (the auth pages). */

/* The form's own metrics: the original landing form's (91326dd), kept exact by the person's decision (28 Oct).
   The spacing and type scales have no 22, 30, 31 or 9/18 step, so the numbers live here, once, as component tokens. */
:root {
  --fld-top: 22px;          /* room above the line for the floated label */
  --fld-label-top: 31px;    /* where the label rests, inside the control */
  --fld-h: 44px;            /* the control's height */
  --fld-font: 1.05rem;      /* typed text */
  --fld-label-font: 1rem;   /* the label at rest; it floats at .84 of this */
  --fld-gap: 30px;          /* between fields in a form */
  --fld-cta-h: 54px;        /* a form's submit button (.btn-form): taller than other buttons */
  --fld-cta-font: 1.05rem;
  --tel-pre-gap: 10px;      /* +966's padding and margin either side of its rule */
  --tel-label-start: 66px;  /* English: the resting label starts after +966 */
  --fld-chev: 16px;         /* a select's chevron; the select keeps 24px clear for it */
  --pick-pad: 9px 18px;     /* a picker option */
  --pick-font: .92rem;
  --pick-lh: 1.62;          /* the original body's line heights: Latin 1.62, Arabic 1.8 */
  --pick-lh-ar: 1.8;
  --pick-legend-font: .9rem;
  --fld-ease-label: calc(var(--dur-slow) * .875);   /* .28s at full motion; 0 with reduced motion */
  --fld-ease-line: calc(var(--dur-slow) * 1.4);     /* .45s */
}
.fld { position: relative; padding-block-start: var(--fld-top); min-inline-size: 0; }
.fld > label { position: absolute; inset-block-start: var(--fld-label-top); inset-inline-start: 0; font-size: var(--fld-label-font);
  color: var(--fg-3); pointer-events: none; transform-origin: 100% 0;
  transition: transform var(--fld-ease-label) var(--ease), color var(--dur) var(--ease), inset-block-start var(--fld-ease-label) var(--ease),
    inset-inline-start var(--fld-ease-label) var(--ease); }
[dir="ltr"] .fld > label { transform-origin: 0 0; }
.fld:focus-within > label, .fld.filled > label, .fld:has(.ctl input:not(:placeholder-shown)) > label {
  inset-block-start: 0; inset-inline-start: 0; transform: scale(.84); color: var(--fg-2); }
.fld:focus-within > label { color: var(--link); }
.ctl { position: relative; display: flex; align-items: center; border-block-end: 1px solid var(--line-strong);
  transition: border-color var(--dur) var(--ease); }
.ctl input, .ctl select { flex: 1; min-inline-size: 0; block-size: var(--fld-h); padding: 0; border: 0; border-radius: 0; background: none;
  color: var(--fg); font: 400 var(--fld-font)/1 var(--font-body); outline: none; -webkit-appearance: none; appearance: none; }
.ctl input::placeholder { color: transparent; }
/* a select: the empty first option is <option value="" selected disabled hidden>, so the label rests until a choice */
.ctl select { cursor: pointer; padding-inline-end: var(--space-6); }
.ctl select option { color: var(--fg); background: var(--surface); }
.ctl .chev { position: absolute; inset-inline-end: 0; inline-size: var(--fld-chev); block-size: var(--fld-chev); fill: none; stroke: var(--fg-3);
  stroke-width: 1.6; pointer-events: none; }
.fld:has(.ctl select option:checked:not([value=""])) > label { inset-block-start: 0; inset-inline-start: 0; transform: scale(.84); color: var(--fg-2); }
.ctl > i { position: absolute; inset-inline: 0; inset-block-end: -1px; block-size: 2px; background: var(--focus); transform: scaleX(0);
  transform-origin: 100% 50%; transition: transform var(--fld-ease-line) var(--ease); }
[dir="ltr"] .ctl > i, .ctl.tel > i { transform-origin: 0 50%; }
[dir="rtl"] .ctl.tel > i { transform-origin: 100% 50%; }
.fld:focus-within .ctl > i { transform: scaleX(1); }
.fld[data-invalid] .ctl, .fld.bad .ctl { border-color: var(--status-needs-attention-text); }
/* Saudi mobile: +966 then the number, always left to right; in English the resting label starts after the prefix */
.ctl.tel { direction: ltr; }
.ctl.tel input { text-align: left; letter-spacing: .02em; }
.ctl .pre { flex: none; padding-inline-end: var(--tel-pre-gap); margin-inline-end: var(--tel-pre-gap); border-inline-end: 1px solid var(--line);
  font: 500 var(--fld-label-font)/1 var(--f-mono); color: var(--fg-3); }
[dir="ltr"] .fld:has(.ctl.tel) > label { inset-inline-start: var(--tel-label-start); }
[dir="ltr"] .fld:has(.ctl.tel):focus-within > label, [dir="ltr"] .fld.filled:has(.ctl.tel) > label,
[dir="ltr"] .fld:has(.ctl.tel input:not(:placeholder-shown)) > label { inset-inline-start: 0; }

/* Form errors are orange, the needs-attention colour, as the original form had them (the person's decision, 28 Oct);
   red (--danger) stays for destructive actions. */
/* a field's message: the problem and how to fix it. The icon is drawn by CSS, so a script that writes plain text
   (auth.js, components.js) gets it too and colour is never alone. A Latin example inside stays on one line. */
.err { display: flex; align-items: flex-start; gap: var(--space-2); margin-block-start: var(--space-2); font: var(--type-caption); color: var(--status-needs-attention-text); }
.err:empty { display: none; }
.err::before { content: ""; flex: none; inline-size: 16px; block-size: 16px; margin-block-start: .1em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.8l8.8 15.7H3.2z M12 10v4 M12 17v.4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.8l8.8 15.7H3.2z M12 10v4 M12 17v.4'/%3E%3C/svg%3E") center / contain no-repeat; }
.err bdi { white-space: nowrap; }

/* one choice from a short list: a soft track, the chosen option raised on a pill that slides to it (components.js).
   Without the script, the chosen option is raised on its own. On phones the options share the width; --cols sets
   how many per row there (3 by default; 2 for four options). */
.pick { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.pick > legend { padding: 0; margin-block-end: var(--space-3); font-size: var(--pick-legend-font); color: var(--fg-2); }
.pick-row { position: relative; display: inline-flex; flex-wrap: wrap; gap: 2px; max-inline-size: 100%; padding: var(--space-1);
  border-radius: var(--r-pill); background: var(--raised); }
.pick-row label { position: relative; z-index: 1; cursor: pointer; }
.pick-row input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.pick-row span { display: block; padding: var(--pick-pad); border-radius: var(--r-pill); font-size: var(--pick-font); line-height: var(--pick-lh); color: var(--fg-2);
  white-space: nowrap; transition: color var(--dur) var(--ease); }
:lang(ar) .pick-row span { line-height: var(--pick-lh-ar); }
.pick-row label:hover span { color: var(--fg); }
.pick-row input:checked + span { color: var(--fg); font-weight: 600; }
.pick-row:not([data-ind]) input:checked + span { background: var(--surface); box-shadow: var(--shadow-1), 0 0 0 1px var(--line); }
.pick-row input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
/* physical left/top on purpose: the script measures offsetLeft/offsetTop, which are physical in both directions */
.pick-ind { position: absolute; left: 0; top: 0; inline-size: 0; block-size: 0; border-radius: var(--r-pill);
  background: var(--surface); box-shadow: var(--shadow-1), 0 0 0 1px var(--line); opacity: 0; pointer-events: none;
  transition: left calc(var(--dur-slow) * 1.3) var(--ease), top calc(var(--dur-slow) * 1.3) var(--ease),
    width calc(var(--dur-slow) * 1.3) var(--ease), height calc(var(--dur-slow) * 1.3) var(--ease), opacity var(--dur) var(--ease); }
.pick[data-invalid] .pick-row, .pick.bad .pick-row { box-shadow: 0 0 0 1px var(--status-needs-attention-text); }
@media (max-width: 480px) {
  .pick-row { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); inline-size: 100%; }
  .pick-row[style*="--cols:2"] { border-radius: var(--r-card); }
  .pick-row span { padding-inline: var(--space-2); text-align: center; white-space: normal; }
}

/* an alert inside a form: the problem and what to do, with an icon */
.alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--r);
  background: var(--status-needs-attention-bg); color: var(--status-needs-attention-text); font: var(--type-body); }
.alert .ico { margin-block-start: .2em; }
.alert[hidden] { display: none; }

/* ---------------------------------------------------------------- interest form
   One card, two panels: the form, and the confirmation that replaces it.
   States live on [data-interest] as data-state: empty, invalid, sending, sent, failed (components.js). */
.interest { display: grid; max-inline-size: 36rem; padding: var(--space-6) var(--space-4); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-1); }
@media (min-width: 480px) { .interest { padding: var(--space-8) var(--space-6); } }
.interest [hidden] { display: none !important; }
.interest-form { display: grid; gap: var(--fld-gap); }
.interest-head { display: grid; justify-items: start; gap: var(--space-3); }
.interest-head p { color: var(--fg-2); }
.interest-send { display: grid; gap: var(--space-4); padding-block-start: var(--space-2); }
.interest-next { color: var(--fg-2); }
.interest-note { font: var(--type-caption); color: var(--fg-2); }
.interest-done { display: grid; justify-items: start; gap: var(--space-3); outline: none; padding-block: var(--space-4); }
.interest-done img { inline-size: auto; block-size: 56px; margin-block-end: var(--space-2); }
.interest-done p { color: var(--fg-2); }
.interest-done .badge { margin-block-start: var(--space-2); }
[data-state="sent"] .interest-done { animation: settle var(--dur-slow) var(--ease-settle) both; }
@keyframes settle { from { opacity: 0; transform: translateY(var(--space-2)); } }

/* ---------------------------------------------------------------- audience card
   The home page's three paths and the use-cases overview. Each card takes its ring:
   --ring (a logo colour) and --ring-w (the ring's width in D: 4, 3 or 2), so the three cards read as the mark's steps. */
.audiences { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--space-4); }
@media (min-width: 768px) { .audiences { gap: var(--space-6); } }
.aud { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-1);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.aud-ring { display: block; inline-size: calc(var(--space-3) * var(--ring-w, 3)); block-size: var(--space-3); border-radius: var(--r-pill);
  background: var(--ring, var(--brand-teal)); margin-block-end: var(--space-3); }
.aud-for { font: var(--type-caption); color: var(--fg-2); }    /* optional: who the page is for, above the title */
.aud-title { font: var(--type-h3); color: var(--fg); text-wrap: balance; }
.aud-line { color: var(--fg-2); max-inline-size: 32em; }
.aud-line { margin-block-end: var(--space-3); }
.aud .btn { position: static; align-self: flex-start; margin-block-start: auto; }   /* static, so the card holds the ::after */
.aud .btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* the whole card is the link's target */
.aud:hover { border-color: var(--line-strong); }
.aud:has(.btn:focus-visible) { border-color: var(--focus); box-shadow: var(--glow); }
.aud .btn .ico { transition: translate var(--dur) var(--ease); }
.aud:hover .btn .ico { translate: var(--space-1) 0; }
[dir="rtl"] .aud:hover .btn .ico { translate: calc(-1 * var(--space-1)) 0; }

/* ---------------------------------------------------------------- notification example
   A phone notification from WhatsApp, the family channel at launch. The icon is WhatsApp's own glyph, unmodified, white
   on WhatsApp green, used only to show the channel (the person's decision, 28 Oct); the rest of the notification is
   generic, not WhatsApp's interface. It says only that something is ready: never a beneficiary's name or a session's
   content. */
.notif-ex { display: grid; gap: var(--space-3); justify-items: start; max-inline-size: 26rem; margin: 0; }
.notif-stage { inline-size: 100%; padding: var(--space-6) var(--space-4); background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-sheet); }
/* a fixed icon column and a text column that may shrink to zero, so the text always starts clear of the icon */
.notif { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) var(--space-4);
  background: var(--surface); border-radius: var(--r-sheet); box-shadow: var(--shadow-2); }
.notif > div { min-inline-size: 0; }
.notif-icon { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: var(--r); background: var(--bg);
  border: 1px solid var(--line); }
.notif-icon img { inline-size: auto; block-size: 26px; }
/* WhatsApp's own colours, from its brand rules; not Binaa colours, and used nowhere else */
.notif-icon.wa { --wa-green: #25D366; --wa-glyph: #FFFFFF; background: var(--wa-green); border-color: transparent; }
.notif-icon.wa svg { inline-size: 24px; block-size: 24px; fill: var(--wa-glyph); }
.notif-head { display: flex; justify-content: space-between; gap: var(--space-3); font: var(--type-caption); color: var(--fg-2); }
.notif-head b { color: var(--fg); font-weight: 600; }
.notif-text { margin-block-start: var(--space-1); font: var(--type-body); color: var(--fg); overflow-wrap: anywhere; }
.notif-ex figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.notif-ex figcaption small { font: var(--type-caption); color: var(--fg-2); }