/* ══════════════════════════════════════════════════════════════════════════
   /apply — the standalone application page (resources/views/site/apply.blade.php
   and its partials under site/apply/), the landing page of the free-bootcamp
   ad (owner, 2026-10: «عايزها حاجة خرافية»).

   Loaded only by that view, through @push('styles') on the shared public
   shell (site/page.blade.php), the way the blog loads site-blog.css. Built
   from site.css's own tokens and primitives (.btn, .eyebrow, .lead, the
   .form/.field/.row2 kit) — no second palette: the brand navy/azure/orange,
   both themes via the token flip on html[data-theme="dark"], and logical
   properties throughout so one ruleset serves Arabic (RTL) and English (LTR).

   Motion is transform/opacity only (no layout property is ever animated),
   and all of it stops under prefers-reduced-motion (end of file).

   Nothing here may target `#contact`: that id belongs to the landing's
   apply section and carries its curtain rules (site.css). This page's
   anchor is #apply.
   ══════════════════════════════════════════════════════════════════════════ */

.apply{
  /* the content measure, and the sticky offset below the shell's bar
     (.page__top measures 68px at desktop widths, plus 20px of air) */
  --apply-max:1200px;
  --apply-top:88px;
  /* how far the form card rises over the hero's bottom edge */
  --apply-rise:clamp(48px,6vw,96px);
  --apply-r:28px;
  /* The free bootcamp's warm accent AS TEXT. --orange-dk is 4.6:1 on white
     but drops under 4.5 on a tinted chip, so text takes one step deeper;
     the dark theme lifts it to a peach that reads on the near-black. */
  --apply-warm:#b13b09;
  /* the hero band: the brand's deep navy into its sapphire */
  --apply-h1:#00254f;
  --apply-h2:var(--deep);
  --apply-h3:var(--navy);
  --apply-h4:var(--sapphire);
  /* No companion mascot here: the view opts out of it (no_companion on the
     shell), so nothing fixed walks across the form and no stacking tricks
     are needed to keep it off the fields. */
}
html[data-theme="dark"] .apply{
  --apply-warm:#ffa274;
  --apply-h1:#010a18;
  --apply-h2:#021733;
  --apply-h3:#04295c;
  --apply-h4:#0b3f8a;
}

/* the seal's <symbol> host: in the DOM so <use> can reach it, never seen */
.apply-defs{position:absolute;inline-size:0;block-size:0;overflow:hidden}

/* One container for the hero and the body so the H1 and the form card share
   a reading edge. From 1024px up both side gutters are at least 96px: the
   WhatsApp float (24px + 58px, inline-end corner, site.css .wa) and the toast
   stack's edge then sit in the gutter instead of on the form. */
.apply-wrap{width:min(var(--apply-max),100% - 2 * var(--pad));margin-inline:auto}
@media (min-width:1024px){
  .apply-wrap{width:min(var(--apply-max),100% - 2 * max(var(--pad),96px))}
}

/* ── the kind on show: free bootcamp or full course ───────────────────── */
/* Both kinds' copy, track lists and asides are in the markup
   (data-kind-only); the checked kind radio decides which shows. :has() does
   it with JavaScript off; a browser without :has() reads .apply[data-kind],
   which the view prints and site-apply.js keeps in step. Two separate rules
   on purpose: one unsupported selector would void a shared list. */
@supports selector(:has(*)){
  .apply:has(#f-kind-bootcamp:checked) [data-kind-only="course"],
  .apply:has(#f-kind-course:checked) [data-kind-only="bootcamp"]{display:none}
  /* …except inside a STACK (the hero's rows): there the other variant only
     fades out and keeps its cell, so the row holds the taller variant's
     height and switching the kind moves nothing below it. A `hidden` lead
     (the named/generic pair) stays out of the cell either way. */
  .apply:has(#f-kind-bootcamp:checked) .apply-stack > [data-kind-only="course"]:not([hidden]),
  .apply:has(#f-kind-course:checked) .apply-stack > [data-kind-only="bootcamp"]:not([hidden]){
    display:var(--stack-display,block);visibility:hidden;opacity:0}
}
@supports not selector(:has(*)){
  .apply[data-kind="bootcamp"] [data-kind-only="course"],
  .apply[data-kind="course"] [data-kind-only="bootcamp"]{display:none}
}
/* a stack: every variant in the same grid cell */
.apply-stack{display:grid}
.apply-stack > *{grid-area:1/1;min-inline-size:0;
  transition:opacity .35s var(--ease),visibility .35s var(--ease)}
/* a card or a track list that appears on a switch cross-fades in (an
   animation restarts whenever an element gets its box back) */
@keyframes applyFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.apply-sec[data-kind-only],.apply-side[data-kind-only]{animation:applyFade .4s var(--ease) both}

/* ══ hero ══════════════════════════════════════════════════════════════ */
.apply-head{position:relative;overflow:hidden;isolation:isolate;color:#fff;
  background:linear-gradient(165deg,var(--apply-h1) 0%,var(--apply-h2) 34%,var(--apply-h3) 70%,var(--apply-h4) 100%);
  padding-block:clamp(36px,4.4vw,64px) calc(var(--apply-rise) + clamp(32px,3.4vw,52px))}
/* a faint blueprint grid, strongest under the copy and gone by the edges */
.apply-head::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:56px 56px;background-position:50% 0;
  -webkit-mask-image:radial-gradient(ellipse 90% 100% at 50% 0%,#000 25%,transparent 78%);
          mask-image:radial-gradient(ellipse 90% 100% at 50% 0%,#000 25%,transparent 78%)}
/* a hairline of light where the band meets the page */
.apply-head::after{content:'';position:absolute;inset-inline:0;inset-block-end:0;block-size:1px;z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(88,176,245,.55) 30%,rgba(255,107,53,.45) 70%,transparent)}
/* the glows and the seal live on the inline-end half, away from the copy */
.apply-head__fx{position:absolute;inset-block:0;inset-inline-end:0;inline-size:min(60%,900px);z-index:-1;pointer-events:none}
.apply-head__fx::before{content:'';position:absolute;inset-block-start:-45%;inset-inline-end:-25%;inline-size:115%;aspect-ratio:1;
  background:radial-gradient(closest-side,rgba(88,176,245,.42),rgba(20,102,224,.16) 52%,transparent)}
.apply-head__fx::after{content:'';position:absolute;inset-block-end:-30%;inset-inline-start:0;inline-size:60%;aspect-ratio:1;
  background:radial-gradient(closest-side,rgba(255,107,53,.20),transparent)}
.apply-head__seal{position:absolute;inset-block-start:50%;inset-inline-end:clamp(-90px,1vw,40px);
  inline-size:clamp(280px,32vw,460px);aspect-ratio:1;translate:0 -54%;rotate:-14deg;
  color:#fff;opacity:.085}
.apply-head__in{position:relative;display:grid;justify-items:start;gap:0}
.apply-head__in > *{max-inline-size:760px;inline-size:100%}

/* the eyebrow as a glass pill with the brand's orange dot */
.apply-head__k > *{justify-self:start;--stack-display:flex}
.apply-head .eyebrow{color:#fff;gap:10px;padding:7px 16px;padding-inline-start:12px;border-radius:999px;
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.apply-head .eyebrow::before{inline-size:8px;block-size:8px;border-radius:50%;opacity:1;
  background:var(--orange);box-shadow:0 0 0 4px rgba(255,107,53,.22),0 0 14px rgba(255,107,53,.75)}

/* the size is the shared .h-xl scale (the view's H1 carries it, as /contact's
   does); this only places it */
/* 13em: narrower than either language's bootcamp title on one line and
   wide enough for either course title on two, so both variants of the stack
   break into two balanced lines and the row reserves no empty line */
.apply-head__t{margin-block:20px 18px;color:#fff;max-inline-size:13em;text-wrap:balance}
.apply-head__t em{font-style:normal;white-space:nowrap;color:#ffb48f;
  background:linear-gradient(90deg,#ffc4a6,var(--orange) 85%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.apply-head__t em.is-cool{color:#9fd2ff;background:linear-gradient(90deg,#cfe8ff,var(--sky) 85%);
  -webkit-background-clip:text;background-clip:text}
.apply-head__lead{max-inline-size:60ch;color:rgba(255,255,255,.84);text-wrap:pretty}
.apply-head__lead b{color:#fff;font-weight:700}

/* the lead and its three trust chips, one block per kind */
.apply-head__more{max-inline-size:880px}
.apply-head__v{--stack-display:grid;display:grid;gap:26px;align-content:start}
.apply-chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.apply-chips li{display:inline-flex;align-items:center;gap:9px;padding-block:7px;padding-inline:8px 15px;border-radius:999px;
  font-size:.9rem;font-weight:600;line-height:1.4;color:#fff;
  background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.apply-chips__i{flex:none;inline-size:24px;block-size:24px;border-radius:50%;display:grid;place-items:center;
  color:#ffc4a6;background:rgba(255,107,53,.22)}
.apply-chips__i .ico{inline-size:13px;block-size:13px;stroke-width:2.4}

/* the hero's staggered entrance: transform + opacity, under 400ms */
@keyframes applyIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.apply-head__in > *{animation:applyIn .4s var(--ease) both}
.apply-head__in > :nth-child(2){animation-delay:.06s}
.apply-head__in > :nth-child(3){animation-delay:.12s}
.apply-head__in > :nth-child(4){animation-delay:.18s}

/* ══ body + grid ═══════════════════════════════════════════════════════ */
/* the body rises over the hero's bottom edge */
.apply-body{position:relative;z-index:1;margin-block-start:calc(-1 * var(--apply-rise));
  padding-block-end:clamp(72px,8vw,128px)}
/* the redirect fragment (#apply) is the grid: the card lands 20px under the
   sticky bar, with the hero fully scrolled away behind it */
.apply-grid{display:grid;gap:clamp(20px,2.4vw,32px);align-items:start;
  scroll-margin-block-start:var(--apply-top)}
/* The form takes the rest; the aside ~34% of the measure (400px at 1200),
   never under 340px. Not before 1180px: between 1024 and 1180 the 96px
   gutters leave the form column ~460px, which stacked the two kind cards
   and every track list into one long column (QA 2026-10) — there the aside
   follows the form, as on a tablet, and lays itself out wide (below). */
@media (min-width:1180px){
  .apply-grid{grid-template-columns:minmax(0,1fr) clamp(340px,34%,400px)}
}
.apply-card,.apply-done,.apply-aside{animation:applyIn .4s var(--ease) .12s both}
.apply-aside{animation-delay:.2s}

/* ── the form card ─────────────────────────────────────────────────────── */
.apply-card{position:relative;container-type:inline-size;
  background:var(--bg2);border-radius:var(--apply-r);
  box-shadow:0 0 0 1px var(--line),0 2px 4px rgba(8,20,38,.04),
             0 18px 40px -14px rgba(8,20,38,.16),0 50px 100px -40px rgba(0,51,102,.34);
  padding:clamp(22px,3.2vw,44px)}
html[data-theme="dark"] .apply-card{
  box-shadow:0 0 0 1px var(--line),0 24px 60px -18px rgba(0,0,0,.75),0 0 0 1px rgba(88,176,245,.06) inset}
.apply-card .form{margin:0;display:block}

/* ── the steps: numbered, joined by a line that fills as they complete ── */
/* Each step is a fieldset with a real legend. Its number sits in a gutter
   on the inline-start side, and its connector runs from under the number
   down to the next step's; site-apply.js sets --sec-fill (0|1) and
   data-done / data-current as the visitor completes each one. */
.apply-sec{position:relative;border:0;margin:0;padding:0;padding-inline-start:56px;min-inline-size:0}
.apply-sec + .apply-sec{margin-block-start:40px}
.apply-sec::before,.apply-sec::after{content:'';position:absolute;pointer-events:none;
  inset-inline-start:17px;inset-block:46px -34px;inline-size:2px;border-radius:2px}
.apply-sec::before{background:var(--line)}
.apply-sec::after{background:linear-gradient(to bottom,var(--focus),var(--azure));
  transform:scaleY(var(--sec-fill,0));transform-origin:top;transition:transform .6s var(--ease)}
/* the last step has nothing to join */
.apply-sec[data-step="details"]::before,.apply-sec[data-step="details"]::after{content:none}

.apply-sec__h{display:flex;align-items:center;min-block-size:36px;padding:0;margin-block-end:20px;
  inline-size:100%;float:none}
.apply-sec__n{position:absolute;inset-inline-start:0;inset-block-start:0;
  inline-size:36px;block-size:36px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--ff-m);font-size:14px;font-weight:700;color:var(--focus);background:var(--bg2);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--focus) 45%,transparent);
  transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
.apply-sec__n > *{grid-area:1/1;transition:opacity .25s var(--ease),scale .3s var(--ease)}
.apply-sec__n .ico{inline-size:17px;block-size:17px;stroke-width:3;opacity:0;scale:.4}
.apply-sec[data-current] .apply-sec__n{color:var(--focus);
  box-shadow:inset 0 0 0 2px var(--focus),0 0 0 5px var(--focus-ring)}
.apply-sec[data-done] .apply-sec__n{color:#fff;background:var(--focus);
  box-shadow:0 8px 18px -8px var(--focus)}
html[data-theme="dark"] .apply-sec[data-done] .apply-sec__n{color:var(--dark)}
.apply-sec[data-done] .apply-sec__n b{opacity:0;scale:.4}
.apply-sec[data-done] .apply-sec__n .ico{opacity:1;scale:1}
.apply-sec__t{font-family:var(--ff-d);font-size:1.22rem;font-weight:700;color:var(--ink);line-height:1.3;letter-spacing:-.01em}
[lang="ar"] .apply-sec__t{font-family:var(--ff-a);letter-spacing:0}
.apply-sec__hint{font-size:.92rem;color:var(--mut);line-height:1.7;margin-block:-12px 18px}

/* a narrow card (a phone, ~<520px of card): the number joins its title in
   the legend and the gutter goes to the content */
@container (max-width:520px){
  .apply-sec{padding-inline-start:0}
  .apply-sec + .apply-sec{margin-block-start:32px}
  .apply-sec::before,.apply-sec::after{content:none}
  .apply-sec__h{gap:12px}
  .apply-sec__n{position:static;flex:none;inline-size:32px;block-size:32px;font-size:13px}
  .apply-sec__t{font-size:1.1rem}
  .apply-sec__hint{margin-block-start:-10px}
}

/* ── the field kit, tuned for this page ───────────────────────────────── */
.apply-fields{display:grid;gap:16px}
.apply .row2{gap:16px}
/* education | age: the age is two digits, and a native <select> clips its
   text with no ellipsis, so the select takes the room an even split gave
   the age (EN «Secondary school or equivalent» was cut at 1280 and 1440) */
.apply .apply-row--edu{grid-template-columns:minmax(0,1fr) minmax(0,10.5rem)}
/* the card is the container, so a narrow FORM column stacks its pairs —
   not only a narrow screen */
@container (max-width:460px){
  .apply .row2,.apply .apply-row--edu{grid-template-columns:1fr}
}
/* One height for every control (58px), the value on a 24px line under a
   raised 11.5px label. A floating label inherits the body's 1.72
   line-height, which made its box reach into the value line it floats
   above; a fixed line box and a reserved inline-end edge keep it off the
   value and off the select's chevron. */
.apply .field input,.apply .field select,.apply .field textarea{
  border-radius:14px;padding:24px 18px 8px;line-height:24px;
  background:color-mix(in srgb,var(--bg) 45%,var(--bg2));
  box-shadow:inset 0 0 0 1px var(--line2);
  transition:box-shadow .25s var(--ease),background .25s var(--ease)}
.apply .field input,.apply .field select{block-size:58px}
.apply .field select{padding-inline-end:48px}
.apply .field textarea{min-block-size:112px;padding-block-start:28px}
.apply .field input:hover,.apply .field select:hover,.apply .field textarea:hover{
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 34%,transparent)}
.apply .field input:focus,.apply .field select:focus,.apply .field textarea:focus{
  background:var(--bg2);box-shadow:inset 0 0 0 2px var(--focus),0 0 0 4px var(--focus-ring)}
.apply .field label{inset-block-start:17px;inset-inline-start:18px;inset-inline-end:18px;
  font-size:.96rem;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apply .field select + label{inset-inline-end:48px}
.apply .field select + label,
.apply .field input:focus + label,.apply .field input:not(:placeholder-shown) + label,
.apply .field textarea:focus + label,.apply .field textarea:not(:placeholder-shown) + label{
  inset-block-start:7px;font-size:11.5px;line-height:16px;letter-spacing:.04em}
[lang="ar"] .apply .field select + label,
[lang="ar"] .apply .field input:focus + label,[lang="ar"] .apply .field input:not(:placeholder-shown) + label,
[lang="ar"] .apply .field textarea:focus + label,[lang="ar"] .apply .field textarea:not(:placeholder-shown) + label{
  font-size:12px;letter-spacing:0}
/* the chevron rides the select's own value line */
.apply .field:has(select){--sel-line:24px}
.apply .field:has(select)::after{inset-block-start:24px}
/* refused fields keep site.css's orange ring over the softer page border */
.apply .field.is-bad :is(input,select,textarea),
.apply .field.is-bad :is(input,select,textarea):hover,
.apply .field.is-bad :is(input,select,textarea):focus{
  box-shadow:inset 0 0 0 2px var(--orange-dk),0 0 0 4px rgba(204,74,18,.14)}

/* ── 1 · the kind cards (real radios) ─────────────────────────────────── */
.kind-grid{display:grid;gap:16px;grid-template-columns:1fr}
@container (min-width:500px){
  .kind-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* each kind's accent: the free bootcamp the brand orange, the course azure;
   --k-solid is the fill a white check stays legible on */
.kind{--k:var(--azure);--k-solid:var(--azure);--k-ink:var(--azure)}
.kind--bootcamp{--k:var(--orange);--k-solid:#e4561f;--k-ink:var(--apply-warm)}
html[data-theme="dark"] .kind--bootcamp{--k-solid:var(--orange)}
.kind__box{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;block-size:100%;
  padding:24px 22px 18px;border-radius:22px;background:var(--bg2);
  box-shadow:inset 0 0 0 1px var(--line2),0 1px 2px rgba(8,20,38,.05);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease)}
.kind:hover .kind__box{transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--k) 45%,var(--line2)),0 16px 34px -20px rgba(8,20,38,.4)}
.kind__in:checked + .kind__box{transform:translateY(-3px);
  background:linear-gradient(180deg,color-mix(in srgb,var(--k) 7%,var(--bg2)),var(--bg2) 70%);
  box-shadow:inset 0 0 0 2px var(--k),0 22px 44px -22px color-mix(in srgb,var(--k) 75%,transparent)}
.kind__in:focus-visible + .kind__box{outline:3px solid var(--focus);outline-offset:3px}
.kind__ico{flex:none;inline-size:52px;block-size:52px;border-radius:16px;display:grid;place-items:center;margin-block-end:8px;
  color:#fff;background:linear-gradient(140deg,color-mix(in srgb,var(--k) 72%,#fff),var(--k-solid) 70%);
  box-shadow:0 12px 24px -12px var(--k),inset 0 1px 0 rgba(255,255,255,.35)}
.kind__ico .ico{inline-size:24px;block-size:24px}
.kind__t{font-family:var(--ff-d);font-weight:700;font-size:1.14rem;line-height:1.35;color:var(--ink)}
[lang="ar"] .kind__t{font-family:var(--ff-a)}
.kind__d{font-size:.9rem;line-height:1.65;color:var(--mut)}
.kind__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;inline-size:100%;
  margin-block-start:auto;padding-block-start:12px}
.kind__chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;
  font-size:.82rem;font-weight:700;line-height:1.5;color:var(--k-ink);
  background:color-mix(in srgb,var(--k) 11%,transparent)}
.kind__chip .ico{inline-size:14px;block-size:14px}
html[data-theme="dark"] .kind:not(.kind--bootcamp) .kind__chip{color:var(--sky)}

/* «مجاني» as a tab hung on the card's top edge — never a rotated corner
   band, which clips its own word in one of the two directions */
.apply-ribbon{position:absolute;inset-block-start:-1px;inset-inline-end:22px;z-index:1;
  padding:4px 13px 6px;border-end-start-radius:10px;border-end-end-radius:10px;
  font-size:.78rem;font-weight:800;line-height:1.3;letter-spacing:.02em;color:#2a0c02;
  background:linear-gradient(180deg,#ff9466,var(--orange));
  box-shadow:0 8px 18px -8px rgba(255,107,53,.85)}

/* «no bootcamp is open right now» — one quiet line above the course list */
.apply-note{margin-block:-6px 16px;padding:10px 14px;border-radius:14px;
  font-size:.92rem;line-height:1.7;color:var(--ink);
  background:color-mix(in srgb,var(--orange) 8%,var(--bg));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--orange) 26%,transparent)}

/* ── 2 · the track cards (real radios) ────────────────────────────────── */
/* two equal-height columns wherever the card has the room, one on a phone */
.trk-grid{display:grid;gap:12px;grid-template-columns:1fr}
@container (min-width:540px){
  .trk-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr}
}

/* `.field label` (site.css) floats every label inside a .field; these labels
   ARE the cards, so they are put back into the flow. */
.apply .field--choice label.trk,
.apply .field--choice label.kind{position:relative;inset:auto;display:block;
  font-size:inherit;letter-spacing:normal;color:inherit;white-space:normal;overflow:visible;
  pointer-events:auto;transition:none;line-height:inherit;cursor:pointer}
/* the track's catalogue accent, deepened toward the ink so it reads on the
   card in light, and lifted toward it in dark (where --ink is near-white) */
.trk,.apply-pick__item{--trk-c:color-mix(in srgb,var(--accent,var(--azure)) 82%,var(--ink))}
html[data-theme="dark"] .trk,
html[data-theme="dark"] .apply-pick__item{--trk-c:color-mix(in srgb,var(--accent,var(--azure)) 52%,var(--ink))}

/* The radio itself is the whole card: transparent, on top, so a click, a tap
   and the keyboard all reach a native control. */
.apply .field .trk__in,
.apply .field .kind__in{position:absolute;inset:0;z-index:2;inline-size:100%;block-size:100%;
  margin:0;padding:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;
  box-shadow:none;border-radius:20px}
.trk__box{display:flex;align-items:center;gap:14px;block-size:100%;min-block-size:84px;
  padding:16px;border-radius:18px;background:var(--bg2);
  box-shadow:inset 0 0 0 1px var(--line2);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease)}
.trk:hover .trk__box{transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--trk-c) 50%,var(--line2)),0 14px 28px -20px rgba(8,20,38,.45)}
.trk__in:checked + .trk__box{
  background:linear-gradient(180deg,color-mix(in srgb,var(--trk-c) 7%,var(--bg2)),var(--bg2));
  box-shadow:inset 0 0 0 2px var(--trk-c),0 16px 32px -20px var(--trk-c)}
.trk__in:focus-visible + .trk__box{outline:3px solid var(--focus);outline-offset:3px}

.trk__ico{flex:none;inline-size:46px;block-size:46px;border-radius:14px;display:grid;place-items:center;
  color:var(--trk-c);background:color-mix(in srgb,var(--trk-c) 12%,transparent);
  transition:background .3s var(--ease),color .3s var(--ease)}
.trk__ico .ico{inline-size:21px;block-size:21px}
.trk__in:checked + .trk__box .trk__ico{color:#fff;
  background:linear-gradient(140deg,color-mix(in srgb,var(--trk-c) 70%,#fff),var(--trk-c));
  box-shadow:0 10px 20px -10px var(--trk-c)}
html[data-theme="dark"] .trk__in:checked + .trk__box .trk__ico{color:var(--dark)}
.trk__txt{flex:1;min-inline-size:0;display:grid;gap:6px}
.trk__t{font-weight:600;font-size:.98rem;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.trk__row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.trk__m{font-size:.84rem;line-height:1.4;color:var(--mut)}

/* «مجاني» — the one price fact this page states (every bootcamp, and a
   course the catalogue sells at 0). The site's warm accent as a quiet pill. */
.apply-free{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;
  font-size:.76rem;font-weight:700;line-height:1.6;letter-spacing:.02em;white-space:nowrap;
  color:var(--apply-warm);background:color-mix(in srgb,var(--orange) 12%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--orange) 30%,transparent)}
html[data-theme="dark"] .apply-free{background:color-mix(in srgb,var(--orange) 16%,transparent)}
.trk__chk{flex:none;inline-size:26px;block-size:26px;border-radius:50%;display:grid;place-items:center;
  color:transparent;box-shadow:inset 0 0 0 1.5px var(--line2);
  transition:background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease),scale .3s var(--ease)}
.trk__chk .ico{inline-size:14px;block-size:14px;stroke-width:3}
.trk__in:checked + .trk__box .trk__chk{background:var(--trk-c);color:#fff;box-shadow:none}
.kind__in:checked + .kind__box .trk__chk{background:var(--k-solid);color:#fff;box-shadow:none}
html[data-theme="dark"] .trk__in:checked + .trk__box .trk__chk,
html[data-theme="dark"] .kind__in:checked + .kind__box .trk__chk{color:var(--dark)}

/* refused (server or live validator): the cards say so, the text stays ink */
.apply .field--choice.is-bad label.trk,
.apply .field--choice.is-bad label.kind{color:inherit}
.field--choice.is-bad .trk__box,
.field--choice.is-bad .kind__box{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--orange-dk) 60%,transparent)}
.field--choice.is-bad .trk__in:checked + .trk__box,
.field--choice.is-bad .kind__in:checked + .kind__box{box-shadow:inset 0 0 0 2px var(--focus)}
.field--choice .field__err{margin-block-start:10px}

/* ── 2b · a free bootcamp's card: an EVENT, not a track ───────────────── */
/* (owner, 2026-10) The card says what the event is — the split, the short
   description, the dates — and, under it, the real course it leads into.
   The whole .camp is the card: the radio's own box (.trk__box) lends it its
   click area and focus ring and drops its own chrome, and the checked ring
   moves out to .camp through :has(), so the course strip under the label
   reads as part of the same selected card. Without :has() the box keeps its
   own ring, as every other track card does. ONE column at every width: an
   event card carries a split line, a description, dated parts and a course
   strip, and two ~300px columns crammed all four into ragged, unequal
   cards (QA 2026-10) — a full-width card instead lays its dates side by
   side (.camp__when below). */
.trk-grid--camp{grid-auto-rows:auto;gap:14px}
@container (min-width:540px){.trk-grid--camp{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}}
.camp{--trk-c:color-mix(in srgb,var(--accent,var(--azure)) 82%,var(--ink));
  position:relative;display:flex;flex-direction:column;min-inline-size:0;border-radius:20px;
  background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line2),0 1px 2px rgba(8,20,38,.05);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease)}
html[data-theme="dark"] .camp{--trk-c:color-mix(in srgb,var(--accent,var(--azure)) 52%,var(--ink))}
.camp:hover{transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--trk-c) 50%,var(--line2)),0 18px 36px -22px rgba(8,20,38,.45)}
.apply .field--choice .camp > label.trk{flex:1 1 auto;display:flex}
.camp .trk__box,
.camp .trk:hover .trk__box,
.camp .trk__in:checked + .trk__box{flex:1 1 auto;flex-direction:column;align-items:stretch;gap:12px;
  min-block-size:0;padding:18px 18px 16px;border-radius:20px;background:none;box-shadow:none;transform:none}
.camp:has(.camp__course) .trk__box{border-end-start-radius:0;border-end-end-radius:0}
@supports selector(:has(*)){
  .camp:has(.trk__in:checked){transform:translateY(-3px);
    background:linear-gradient(180deg,color-mix(in srgb,var(--trk-c) 8%,var(--bg2)),var(--bg2) 62%);
    box-shadow:inset 0 0 0 2px var(--trk-c),0 22px 44px -24px var(--trk-c)}
}
@supports not selector(:has(*)){
  .camp .trk__in:checked + .trk__box{box-shadow:inset 0 0 0 2px var(--trk-c)}
}
/* refused: the card says so, not the box inside it */
.field--choice.is-bad .camp{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--orange-dk) 60%,transparent)}
.field--choice.is-bad .camp .trk__box{box-shadow:none}

.camp__head{display:flex;align-items:center;gap:14px}
.camp .trk__t{font-size:1rem;font-weight:700}
/* the length: one tinted strip under the head, the full card wide — the
   split line is the fact the ad promises */
/* sized to its line (fit-content), never a half-empty tinted bar */
.camp__meta{flex-wrap:nowrap;align-items:flex-start;gap:8px;padding:7px 12px;border-radius:12px;
  inline-size:fit-content;max-inline-size:100%;
  background:color-mix(in srgb,var(--trk-c) 6%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--trk-c) 14%,transparent)}
.camp__mi{flex:none;display:grid;place-items:center;block-size:21px;color:var(--trk-c)}
.camp__mi .ico{inline-size:15px;block-size:15px}
.camp .trk__m{flex:1 1 auto;min-inline-size:0;font-size:.84rem;font-weight:700;line-height:1.5;color:var(--ink)}
/* one line wherever the card has the room (every desktop width); a phone
   card wraps it rather than cut a fact the ad promises */
@container (min-width:440px){.camp .trk__m{white-space:nowrap}}
.camp__d{font-size:.88rem;line-height:1.7;color:var(--mut);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}

/* the dates: one row per part — its mode's icon, the day, then its hours
   with the mode in a word beside them */
.camp__when{display:grid;gap:10px;margin-block-start:auto;padding-block-start:12px;
  border-block-start:1px dashed var(--line2)}
/* the full-width card sets its parts side by side (an online and an
   academy day read as one pair), each on its own two short lines */
@container (min-width:540px){
  .camp__when{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:10px 18px}
}
.camp__part{display:flex;align-items:flex-start;gap:10px;font-size:.86rem;line-height:1.5;color:var(--ink)}
.camp__pi{flex:none;inline-size:28px;block-size:28px;border-radius:9px;display:grid;place-items:center;
  color:var(--trk-c);background:color-mix(in srgb,var(--trk-c) 11%,transparent)}
.camp__pi .ico{inline-size:14px;block-size:14px}
.camp__pw{flex:1;min-inline-size:0;display:grid;gap:2px;font-variant-numeric:tabular-nums}
.camp__pd{font-weight:700;color:var(--ink)}
.camp__pl{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
.camp__pt{font-size:.8rem;color:var(--mut)}
.camp__pm{flex:none;padding:0 8px;border-radius:999px;
  font-size:.72rem;font-weight:700;line-height:1.7;white-space:nowrap;
  color:var(--focus);background:color-mix(in srgb,var(--azure) 11%,transparent)}
.camp__part--onsite .camp__pm{color:var(--apply-warm);background:color-mix(in srgb,var(--orange) 12%,transparent)}
html[data-theme="dark"] .camp__pm{color:var(--sky)}
html[data-theme="dark"] .camp__part--onsite .camp__pm{color:var(--apply-warm)}
.camp__part--soon .camp__pw{padding-block-start:4px}
.camp__part--soon .camp__pw{color:var(--mut)}
.camp__part--soon{grid-column:1/-1}

/* the real course, as the card's footer strip */
.camp__course{position:relative;display:flex;align-items:center;gap:10px;margin:0;padding:12px 18px;
  border-block-start:1px solid var(--line);border-end-start-radius:20px;border-end-end-radius:20px;
  font-size:.86rem;font-weight:600;line-height:1.5;color:var(--ink);text-decoration:none;
  background:color-mix(in srgb,var(--trk-c) 5%,transparent);
  transition:color .25s var(--ease),background .25s var(--ease)}
.camp__ci{flex:none;display:grid;place-items:center;color:var(--trk-c)}
.camp__ci .ico{inline-size:16px;block-size:16px}
.camp__ct{flex:1;min-inline-size:0}
.camp__go{flex:none;display:grid;place-items:center;color:var(--mut);transition:transform .35s var(--ease),color .25s var(--ease)}
.camp__go .ico{inline-size:16px;block-size:16px}
[dir="rtl"] .camp__go .ico{transform:scaleX(-1)}
a.camp__course:hover{color:var(--focus);background:color-mix(in srgb,var(--trk-c) 10%,transparent)}
a.camp__course:hover .camp__go{color:var(--focus);transform:translateX(3px)}
[dir="rtl"] a.camp__course:hover .camp__go{transform:translateX(-3px)}
a.camp__course:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.camp__course.is-static{color:var(--mut)}

/* ── send ─────────────────────────────────────────────────────────────── */
/* The brand's warm CTA, as a gradient. Ink text, as on every .btn--acc:
   white on the orange is 2.8:1, the dark ink is over 5:1 across the ramp. */
.apply-submit{inline-size:100%;margin-block-start:24px;min-block-size:60px;padding-block:17px;
  font-size:1.08rem;font-weight:700;color:#2a0c02;
  background:linear-gradient(120deg,#ff9160 0%,var(--orange) 48%,#f25a22 100%);
  box-shadow:0 18px 36px -14px rgba(255,107,53,.8),inset 0 1px 0 rgba(255,255,255,.4)}
.apply-submit:hover{box-shadow:0 22px 44px -14px rgba(255,107,53,.9),inset 0 1px 0 rgba(255,255,255,.45)}
.apply-submit:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.apply-submit__busy{display:none;align-items:center;gap:10px}
.apply .form[data-busy="1"] .apply-submit{opacity:.9}
.apply .form[data-busy="1"] .apply-submit__idle,
.apply .form[data-busy="1"] .apply-submit > .ico{display:none}
.apply .form[data-busy="1"] .apply-submit__busy{display:inline-flex}
.apply-spin{inline-size:16px;block-size:16px;border-radius:50%;
  border:2px solid currentColor;border-inline-end-color:transparent;animation:applySpin .8s linear infinite}
@keyframes applySpin{to{transform:rotate(1turn)}}
.apply-legal{display:flex;align-items:flex-start;justify-content:center;gap:8px;margin-block-start:14px;
  text-align:center;font-size:.86rem;line-height:1.7;color:var(--mut)}
.apply-legal .ico{flex:none;inline-size:16px;block-size:16px;margin-block-start:3px;color:var(--azure)}
.apply-legal a,.apply-privacy a{color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--line2);text-underline-offset:3px;transition:text-decoration-color .2s}
/* «سياسة الخصوصية» is one link, never split over two lines */
.apply-privacy a{white-space:nowrap}
.apply-legal a:hover,.apply-privacy a:hover{text-decoration-color:currentColor}

/* ══ the aside ═════════════════════════════════════════════════════════ */
.apply-aside{display:grid;gap:16px;align-content:start;min-inline-size:0}
/* Sticky beside the form (1180px up). A sticky column taller than the
   viewport would hide its own bottom — the phone / WhatsApp buttons the
   owner asked for — until the page ends, so site-apply.js measures it and,
   when it does not fit, sets --apply-stick to a NEGATIVE top: the card then
   scrolls until its bottom edge is in view and sticks there. Without
   JavaScript a short viewport simply does not stick. */
@media (min-width:1180px) and (min-height:700px){
  .apply-aside{position:sticky;inset-block-start:var(--apply-stick,var(--apply-top))}
}

/* ── (a) the free bootcamp: the owner's dark «احجز مكانك» card ─────────── */
.apply-boot{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--apply-r);color:#fff;
  padding:clamp(24px,2.4vw,32px);
  background:linear-gradient(160deg,#03183a 0%,#052a5e 52%,#0b3f8f 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 2px 4px rgba(0,20,50,.12),
             0 34px 70px -30px rgba(0,30,72,.75)}
/* a soft azure light in the lower corner, as on the reference */
.apply-boot::before{content:'';position:absolute;z-index:-1;pointer-events:none;
  inset-block-end:-40%;inset-inline-start:-30%;inline-size:110%;aspect-ratio:1;
  background:radial-gradient(closest-side,rgba(20,102,224,.42),transparent)}
html[data-theme="dark"] .apply-boot{
  background:linear-gradient(160deg,#020c1f 0%,#041d44 52%,#08306e 100%);
  box-shadow:inset 0 0 0 1px rgba(88,176,245,.16),0 34px 70px -30px rgba(0,0,0,.85)}
.apply-boot__seal{position:absolute;z-index:-1;pointer-events:none;inset-block-end:-46px;inset-inline-end:-46px;
  inline-size:210px;block-size:210px;rotate:-14deg;color:#fff;opacity:.075}
.apply-boot__k{display:inline-flex;align-items:center;gap:10px;font-size:.88rem;font-weight:700;letter-spacing:.02em;color:#ffc4a6}
.apply-boot__k::before{content:'';flex:none;inline-size:9px;block-size:9px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 4px rgba(255,107,53,.24),0 0 12px rgba(255,107,53,.7)}
[lang="en"] .apply-boot__k{font-family:var(--ff-m);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase}
.apply-boot__t{margin-block:12px 20px;font-size:clamp(1.5rem,2.1vw,1.9rem);font-weight:700;line-height:1.3;color:#fff;text-wrap:balance}
.apply-boot__list{list-style:none;display:grid;gap:14px;margin:0;padding:0}
.apply-boot__list li{display:flex;align-items:flex-start;gap:12px;font-size:.96rem;line-height:1.6;color:rgba(255,255,255,.92)}
.apply-boot__chk{flex:none;inline-size:26px;block-size:26px;border-radius:50%;display:grid;place-items:center;margin-block-start:-1px;
  color:#a9d6ff;background:rgba(88,176,245,.16);box-shadow:inset 0 0 0 1px rgba(88,176,245,.32)}
.apply-boot__chk .ico{inline-size:13px;block-size:13px;stroke-width:3}
/* phone + WhatsApp, white ghost buttons for the dark card */
.apply-boot__help{display:grid;gap:10px;margin-block-start:24px}
.apply-boot__hk{font-size:.86rem;font-weight:600;color:rgba(255,255,255,.72)}
.apply-boot__acts{display:flex;flex-wrap:wrap;gap:10px}
.apply-dk{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-block-size:46px;
  padding:10px 16px;border-radius:999px;font-size:.92rem;font-weight:700;color:#fff;white-space:nowrap;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);
  transition:background .25s var(--ease),box-shadow .25s var(--ease),transform .35s var(--ease)}
.apply-dk:hover{background:rgba(255,255,255,.13);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6);transform:translateY(-1px)}
.apply-dk:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.apply-dk .ico{inline-size:18px;block-size:18px;color:#a9d6ff}
.apply-dk--wa .ico{color:#5fe08f}
.apply-dk [dir="ltr"]{font-family:var(--ff-m)}
.apply-boot__priv{display:flex;align-items:flex-start;gap:10px;margin-block-start:24px;padding-block-start:20px;
  border-block-start:1px solid rgba(255,255,255,.13);font-size:.86rem;line-height:1.75;color:rgba(255,255,255,.74)}
.apply-boot__priv .ico{flex:none;inline-size:18px;block-size:18px;margin-block-start:3px;color:#a9d6ff}
.apply-boot__priv a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px;white-space:nowrap}
.apply-boot__priv a:hover{text-decoration-color:#fff}
.apply-boot__priv a:focus-visible{outline:2px solid var(--sky);outline-offset:2px}

/* The picked bootcamp, as a compact glass row UNDER the four promises: the
   eyebrow and the title stay at the top of the card, as on the owner's
   reference (images/4.png). Its name and split on one block, its dates one
   short line each. */
.apply-boot .apply-pick__item{--trk-c:color-mix(in srgb,var(--accent,var(--sky)) 45%,#fff);
  margin-block-start:22px;padding:12px 14px;border-radius:18px;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.apply-boot .apply-pick__id{align-items:flex-start}
.apply-boot .trk__ico{inline-size:40px;block-size:40px;border-radius:12px;color:var(--trk-c);background:rgba(255,255,255,.1)}
.apply-boot .trk__ico .ico{inline-size:19px;block-size:19px}
.apply-boot .apply-pick__kind{color:#ffc4a6}
.apply-boot .apply-pick__t{color:#fff;font-size:.98rem;line-height:1.4}
.apply-boot .apply-free,html[data-theme="dark"] .apply-boot .apply-free{color:#2a0c02;background:linear-gradient(180deg,#ff9466,var(--orange));box-shadow:none}
/* the picked bootcamp's label and «مجاني» on one row */
.apply-pick__kr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.apply-pick__kr .apply-free{padding:1px 9px;font-size:.72rem}
/* the split as a plain line under the name — a pill wrapped to two lines
   inside a full radius at narrow asides */
.apply-boot .apply-pick__facts{margin:2px 0 0;gap:2px 8px}
.apply-boot .apply-pick__facts li{padding:0;border-radius:0;background:none;box-shadow:none;
  font-size:.8rem;font-weight:600;line-height:1.5;color:rgba(255,255,255,.8)}
/* the picked bootcamp's dates, under its name */
.apply-pick__when{list-style:none;display:grid;gap:6px;margin:10px 0 0;padding:10px 0 0;
  border-block-start:1px dashed rgba(255,255,255,.18)}
.apply-pick__when li{display:flex;align-items:center;gap:10px;font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.9)}
.apply-pick__when li > span:last-child{min-inline-size:0}
.apply-pick__when b{margin-inline-start:6px;font-size:.74rem;font-weight:700;color:#ffc4a6;white-space:nowrap}
.apply-pick__wi{flex:none;inline-size:22px;block-size:22px;border-radius:7px;display:grid;place-items:center;
  color:var(--trk-c);background:rgba(255,255,255,.1)}
.apply-pick__wi .ico{inline-size:12px;block-size:12px}

/* ── (b) the full course: a refined light card ────────────────────────── */
.apply-box{position:relative;overflow:hidden;background:var(--bg2);border-radius:var(--apply-r);
  padding:clamp(22px,2.2vw,28px);
  box-shadow:0 0 0 1px var(--line),0 2px 4px rgba(8,20,38,.04),0 30px 60px -36px rgba(8,20,38,.4)}
/* the course's azure, as a hairline across the card's top */
.apply-course::before{content:'';position:absolute;inset-block-start:0;inset-inline:0;block-size:3px;
  background:linear-gradient(90deg,var(--sky),var(--azure),var(--navy))}
html[data-theme="dark"] .apply-box{box-shadow:0 0 0 1px var(--line),0 30px 60px -36px rgba(0,0,0,.8)}
.apply-box__k{display:block;font-size:.8rem;font-weight:700;letter-spacing:.02em;color:var(--mut);margin-block-end:12px}
.apply-box__h{font-size:1.06rem;font-weight:700;color:var(--ink);line-height:1.35}
.apply-pick{padding-block-end:20px;margin-block-end:20px;border-block-end:1px solid var(--line)}

/* the chosen track */
.apply-pick__empty{font-size:.93rem;color:var(--mut);line-height:1.7;padding:12px 14px;border-radius:14px;
  background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);border:1px dashed transparent}
.apply-pick__id{display:flex;align-items:center;gap:12px}
.apply-pick__name{display:grid;gap:2px;min-inline-size:0}
.apply-pick__kind{font-size:.78rem;font-weight:700;letter-spacing:.02em;color:var(--apply-warm)}
.apply-pick__t{font-size:1.02rem;font-weight:700;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.apply-pick__facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0}
.apply-pick__facts li{display:inline-flex;align-items:baseline;gap:5px;padding:5px 12px;border-radius:999px;
  font-size:.86rem;font-weight:600;color:var(--ink);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
/* the badge is its own pill; the list item only places it */
.apply-pick__facts li.apply-pick__free{padding:0;background:none;box-shadow:none}
.apply-pick__free .apply-free{padding:5px 12px;font-size:.84rem}

/* what happens next — a short vertical timeline */
.apply-steps{list-style:none;display:grid;gap:16px;margin:16px 0 0;padding:0}
.apply-steps li{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start}
.apply-steps li:not(:last-child)::before{content:'';position:absolute;inset-inline-start:14.5px;
  inset-block:34px -14px;inline-size:1px;background:var(--line2)}
.apply-steps__n{inline-size:30px;block-size:30px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--ff-m);font-size:12.5px;font-weight:700;color:var(--focus);
  background:var(--bg2);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--focus) 40%,transparent)}
.apply-steps__n .ico{inline-size:14px;block-size:14px;stroke-width:3}
.apply-steps b{display:block;font-size:.95rem;font-weight:700;line-height:1.5;color:var(--ink)}
.apply-steps div > span{display:block;font-size:.87rem;line-height:1.65;color:var(--mut)}
.apply-steps li.is-done .apply-steps__n{background:var(--focus);color:#fff;box-shadow:none}
html[data-theme="dark"] .apply-steps li.is-done .apply-steps__n{color:var(--dark)}

/* After sending, on the bootcamp's dark card: what happens next, in white.
   AFTER the base rules and one class heavier (.apply-boot), so the light
   card's ink/muted text and navy done-circle never win on the navy panel —
   in either theme (the dark theme's done-circle rule carries html[…]). */
.apply-boot .apply-steps--dk{margin-block-start:4px}
.apply-boot .apply-steps--dk .apply-steps__n{color:#fff;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.apply-boot .apply-steps--dk li:not(:last-child)::before{background:rgba(255,255,255,.22)}
.apply-boot .apply-steps--dk b{color:#fff}
.apply-boot .apply-steps--dk div > span{color:rgba(255,255,255,.74)}
.apply-boot .apply-steps--dk li.is-done .apply-steps__n,
html[data-theme="dark"] .apply-boot .apply-steps--dk li.is-done .apply-steps__n{color:#2a0c02;background:var(--orange);box-shadow:0 8px 18px -8px rgba(255,107,53,.8)}

/* quick help — the label on its own line and both ways to reach us next */
.apply-help{display:grid;gap:10px;margin-block-start:20px;padding-block-start:18px;border-block-start:1px solid var(--line)}
.apply-help__k{font-size:.88rem;font-weight:700;color:var(--ink)}
.apply-help__row{display:flex;flex-wrap:wrap;gap:8px}
.apply-help__a{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-block-size:44px;
  padding:9px 14px;border-radius:999px;font-size:.9rem;font-weight:700;color:var(--ink);white-space:nowrap;
  background:var(--bg2);box-shadow:inset 0 0 0 1.5px var(--line2);
  transition:box-shadow .25s var(--ease),color .25s var(--ease),transform .35s var(--ease)}
.apply-help__a:hover{color:var(--focus);box-shadow:inset 0 0 0 1.5px var(--focus);transform:translateY(-1px)}
.apply-help__a .ico{inline-size:17px;block-size:17px;color:var(--azure)}
.apply-help__a:first-child .ico{color:#1fa855}
/* the number in the site's numeral face, which is also what lets both
   buttons share one row in the 340px aside */
.apply-help__a [dir="ltr"]{font-family:var(--ff-m)}
.apply-help__a:focus-visible,.apply-legal a:focus-visible,.apply-privacy a:focus-visible,
.apply-done__again:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* privacy */
.apply-privacy{display:flex;gap:10px;align-items:flex-start;margin-block-start:18px;
  font-size:.84rem;line-height:1.7;color:var(--mut)}
.apply-privacy .ico{flex:none;inline-size:16px;block-size:16px;margin-block-start:3px;color:var(--azure)}

/* A short desktop viewport (1024x768, 1366x768, 1280x720): the sticky aside
   keeps what it is for and drops the second lines and the privacy note
   (the legal line under the send button links the same policy). */
@media (min-width:1180px) and (max-height:820px){
  .apply-course .apply-steps div > span,.apply-course .apply-privacy{display:none}
  .apply-steps{gap:12px}
  .apply-steps li{align-items:center}
  .apply-steps li:not(:last-child)::before{inset-block-end:-10px}
  .apply-boot__list{gap:10px}
  .apply-boot__t{margin-block-end:16px}
  .apply-boot__help,.apply-boot__priv{margin-block-start:18px}
  .apply-boot__priv{padding-block-start:16px}
}

/* A desktop up to 960px tall (1440x900, 1536x864, 1280x800): the bootcamp
   card also carries the picked bootcamp's dates, so it takes the tighter
   rhythm a little earlier than the course card; under 900px its dates drop
   their hours (the card in the form beside it lists them) so the whole card
   still fits while it sticks. */
@media (min-width:1180px) and (max-height:960px){
  .apply-boot .apply-pick__item{margin-block-start:16px}
  .apply-boot__list{gap:10px}
  .apply-boot__t{margin-block:10px 14px}
  .apply-boot__help,.apply-boot__priv{margin-block-start:16px}
  .apply-boot__priv{padding-block-start:14px}
}
@media (min-width:1180px) and (max-height:900px){
  .apply-pick__h{display:none}
  .apply-boot__list li{line-height:1.5}
}

/* Below the two-column layout the aside follows the form; the live summary
   is a desktop aid and steps aside there. */
@media (max-width:1179px){
  .apply-pick,.apply-boot__pick{display:none}
}
/* …and where it follows the form at a tablet / small-laptop width, the
   dark card spends that width instead of its height: the eyebrow, title and
   promises on one side, the help buttons and the privacy line on the other. */
@media (min-width:720px) and (max-width:1179px){
  .apply-boot{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
    grid-template-areas:"k help" "t help" "list priv";column-gap:clamp(28px,4vw,56px);align-items:start}
  .apply-boot__k{grid-area:k;justify-self:start}
  .apply-boot__t{grid-area:t}
  .apply-boot__list,.apply-boot .apply-steps--dk{grid-area:list}
  .apply-boot__help{grid-area:help;margin:0;align-self:start}
  .apply-boot__priv{grid-area:priv;margin:0;align-self:end}
}

/* ── success ──────────────────────────────────────────────────────────── */
/* It takes the form's own column, so the aside beside it does not move. */
.apply-done{--k:var(--azure);position:relative;overflow:hidden;isolation:isolate;text-align:center;
  background:var(--bg2);border-radius:var(--apply-r);
  box-shadow:0 0 0 1px var(--line),0 18px 40px -14px rgba(8,20,38,.16),0 50px 100px -40px rgba(0,51,102,.34);
  padding:clamp(36px,5vw,68px) clamp(22px,4vw,56px)}
.apply-done[data-done="bootcamp"]{--k:var(--orange)}
.apply-done::before{content:'';position:absolute;z-index:-1;inset-block-start:-60%;inset-inline:-10%;block-size:120%;
  background:radial-gradient(50% 50% at 50% 50%,color-mix(in srgb,var(--k) 16%,transparent),transparent 70%)}
@keyframes applyPop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:none}}
.apply-done__ico{inline-size:80px;block-size:80px;margin:0 auto 22px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,var(--sky),var(--azure) 60%,var(--navy));
  box-shadow:0 0 0 10px var(--focus-ring),0 20px 40px -16px var(--azure);
  animation:applyPop .5s var(--ease) .15s both}
.apply-done[data-done="bootcamp"] .apply-done__ico{color:#2a0c02;
  background:linear-gradient(140deg,#ffb08a,var(--orange) 60%,#e4561f);
  box-shadow:0 0 0 10px rgba(255,107,53,.16),0 20px 40px -16px var(--orange)}
.apply-done__ico .ico{inline-size:34px;block-size:34px;stroke-width:2.6}
.apply-done__t{font-size:clamp(1.55rem,2.5vw,2.1rem);color:var(--ink);text-wrap:balance}
.apply-done__p{max-inline-size:54ch;margin:12px auto 0;color:var(--mut);font-size:1.03rem;line-height:1.8}
.apply-done__acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-block-start:30px}
/* the WhatsApp button's wrapper only carries its English twin (data-en);
   the button inside is the flex item */
.apply-done__wa{display:contents}
/* a brand logo is never mirrored, nor nudged like an arrow (site.css .btn .ico) */
[dir] .apply-done__wa .ico,[dir] .apply-done__wa .btn:hover .ico{transform:none}
.apply-done__again{display:inline-block;margin-block-start:20px;font-size:.9rem;color:var(--mut);
  text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.apply-done__again:hover{color:var(--ink)}

/* ── phones ───────────────────────────────────────────────────────────── */
@media (max-width:640px){
  .apply{--apply-r:22px}
  .apply-head__seal{inset-block-start:0;inset-inline-end:-80px;translate:0 -18%;inline-size:260px;opacity:.07}
  .apply-head__v{gap:20px}
  .apply-chips{gap:8px}
  .apply-chips li{font-size:.84rem}
  .kind__box{padding:22px 18px 16px}
}

/* ── fixed overlays on this page ─────────────────────────────────────── */
/* The toast stack lives in the inline-end corner — the aside's side — and on
   every other page it rises from 96px up to clear the WhatsApp float. Here
   that put a refusal toast on the aside's help links at 1024x768. So from
   1024px up it moves BESIDE the float instead of above it: 24px from the
   bottom, 96px in from the edge (the float is 24 + 58px), and no wider than
   the aside column. */
@media (min-width:1024px){
  body:has(.apply) .site-toasts{inset-block-end:24px;inset-inline-end:96px;width:min(320px,calc(100vw - 116px))}
}
/* Below 1024px there is no 96px gutter, so the WhatsApp float (58px, fixed in
   the inline-end corner) sits over the full-width fields. While the visitor
   is filling the form it steps out of the way, and it is back the moment
   focus leaves the card. */
@media (max-width:1023px){
  body:has(.apply) .wa{transition:transform .4s var(--ease),opacity .2s var(--ease2)}
  body:has(.apply-card:focus-within) .wa{opacity:0;pointer-events:none}
  /* …and while the first choice (the kind cards — else the first track
     list) passes under it, so on a phone's first view it never covers a
     card's check mark; site-apply.js sets the flag (data-apply-wa-off). */
  html[data-apply-wa-off] .wa{opacity:0;pointer-events:none}
}

/* ── reduced motion: nothing moves, nothing fades ─────────────────────── */
@media (prefers-reduced-motion:reduce){
  .apply *,.apply *::before,.apply *::after{animation:none!important;transition:none!important}
  .apply .kind:hover .kind__box,.apply .trk:hover .trk__box,
  .apply .kind__in:checked + .kind__box,.apply-dk:hover,.apply-help__a:hover,
  .apply .camp,.apply .camp:hover,.apply a.camp__course:hover .camp__go{transform:none}
  [dir="rtl"] .apply a.camp__course:hover .camp__go{transform:none}
  /* its own rule: an unsupported :has() voids only this one */
  .apply .camp:has(.trk__in:checked){transform:none}
  .apply-spin{animation:applySpin 2.4s linear infinite!important}
}