/* Nationals programme (/nationals, /ar/nationals). Loaded after site.css (v3.css) on these pages only.
   Mobile first: most talent visitors arrive from WhatsApp and LinkedIn on a phone.
   RTL: logical properties where this file sets them, plus [dir=rtl] overrides for the v3 rules that use left/right. */

/* ---------------------------------------------------------------- language toggle */
.lang-t{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;border:1px solid var(--line-strong);text-decoration:none;font-size:14.5px;font-weight:500;color:var(--ink);white-space:nowrap}
.lang-t:hover{border-color:rgba(236,241,238,.5)}
.lang-t[lang=ar]{font-family:"IBM Plex Sans Arabic",var(--font);font-size:15.5px}
.lang-t[lang=en]{font-family:var(--font)}
.mnav .lang-t{align-self:flex-start;margin-bottom:8px}

/* ---------------------------------------------------------------- two doors */
.nat-split-hero h1{max-width:18ch}
.doors{display:grid;grid-template-columns:1fr;gap:16px;margin-top:clamp(32px,5vw,56px)}
.door{display:flex;flex-direction:column;min-height:260px;padding:clamp(28px,4vw,48px);border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);text-decoration:none;color:var(--ink);transition:background .2s,border-color .2s,transform .2s}
.door:hover,.door:focus-visible{background:var(--surface-2);border-color:var(--accent);transform:translateY(-2px)}
.door h2{font-size:clamp(28px,3.2vw,42px);max-width:16ch;margin-bottom:.4em}
.door-p{color:var(--ink-2);max-width:46ch;margin:0 0 28px}
.door .more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--accent)}
@media (min-width:760px){.doors{grid-template-columns:1fr 1fr}}

/* ---------------------------------------------------------------- backed by + partners */
.nat-backed{display:flex;flex-wrap:wrap;gap:24px 56px;align-items:flex-start;margin-top:clamp(40px,6vw,72px);padding-top:28px;border-top:1px solid var(--line)}
.nat-msbc img{height:34px;width:auto;margin-top:12px;opacity:.9}
.nat-partners ul{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:14px 32px}
.nat-partners li{display:flex;align-items:center;gap:9px;color:var(--ink)}
.nat-partners .pm{display:inline-flex;width:22px;height:22px}
.nat-partners .pm svg{width:100%;height:100%}
.nat-partners strong{font-size:18px;font-weight:600;letter-spacing:-.01em}
.nat-partners li>span:last-child:not(.pm){font-size:12.5px;color:var(--ink-3)}

/* ---------------------------------------------------------------- lists */
.nat-cols{grid-template-columns:1fr}
.nat-learn,.nat-why,.nat-cases{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;border-top:1px solid var(--line-strong)}
.nat-learn li,.nat-why li,.nat-cases li{padding:24px 0;border-bottom:1px solid var(--line)}
.nat-learn h3,.nat-why h3,.nat-cases h3{font-size:20px;margin-bottom:6px}
.nat-learn p,.nat-why p,.nat-cases p{color:var(--ink-2);margin:0}
.nat-cases .num{display:block;font-size:13px;color:var(--accent);margin-bottom:8px;text-transform:uppercase}
@media (min-width:760px){
  .nat-cols{grid-template-columns:repeat(2,1fr)}
  .nat-learn{grid-template-columns:repeat(2,1fr);column-gap:48px}
  .nat-cases{grid-template-columns:repeat(2,1fr);column-gap:48px}
  .nat-why{grid-template-columns:repeat(3,1fr);column-gap:40px}
}
@media (min-width:1100px){.nat-cols{grid-template-columns:repeat(4,1fr)}.nat-learn{grid-template-columns:repeat(3,1fr)}.nat-cases{grid-template-columns:repeat(3,1fr)}}

/* tracks */
.nat-routes{display:grid;grid-template-columns:1fr;gap:16px}
.nat-routes .route-head{margin-bottom:20px}
.nat-mods{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.nat-mods li{display:grid;grid-template-columns:1fr;gap:2px;padding:14px 0;border-bottom:1px solid var(--line)}
.nat-mods .wk{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
@media (min-width:760px){.nat-routes{grid-template-columns:1fr 1fr}.nat-mods li{grid-template-columns:150px 1fr;gap:16px}}
.nat-phases{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.nat-phases{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- stats */
.nstats-grid{display:grid;grid-template-columns:1fr;gap:clamp(40px,5vw,64px)}
.nstats-col h3{font-size:15px;font-weight:500;color:var(--ink-2);letter-spacing:0;margin:0 0 4px;text-transform:none}
.nstats{list-style:none;padding:0;margin:0;border-top:1px solid var(--line-strong)}
.nstat{padding:22px 0;border-bottom:1px solid var(--line)}
.nstat strong{display:block;font-size:clamp(28px,3vw,38px);font-weight:500;letter-spacing:-.03em;line-height:1.1;color:var(--ink);margin-bottom:8px}
.nstat p{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.5}
.nstat .nstat-src{margin-top:8px;font-size:12.5px;color:var(--ink-3)}
.nstat-src a{color:var(--ink-2);text-underline-offset:2px}
.nstats-foot{margin-top:28px;max-width:70ch}
@media (min-width:900px){.nstats-grid{grid-template-columns:1fr 1fr}}

/* ---------------------------------------------------------------- placeholders (preview only; the prod build fails on them) */
mark.ph{background:rgba(255,196,0,.12);color:#FFD66B;border:1px dashed rgba(255,214,107,.5);border-radius:6px;padding:1px 6px;font-size:.92em}
mark.ph b{font-weight:600;margin-inline-end:4px;text-transform:uppercase;font-size:.78em;letter-spacing:.04em}
.nstat-src mark.ph{margin-inline-end:6px}

/* ---------------------------------------------------------------- forms */
.nat-form-wrap{max-width:820px}
.nat-form{gap:18px}
.nat-form .f2{grid-template-columns:minmax(0,1fr)}
.nat-form .f2>*,.mob-in>*{min-width:0}
@media (min-width:640px){.nat-form .f2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.nat-form select{font:inherit;font-weight:400;font-size:16px;padding:13px 40px 13px 14px;border-radius:12px;border:1px solid var(--line-strong);background:var(--bg);color:var(--ink);appearance:none;-webkit-appearance:none;width:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23A1ADA8' stroke-width='1.6'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.nat-form select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(85,230,165,.2)}
.nat-form input[type=file]{padding:10px;font-size:14.5px}
.nat-form input[type=file]::file-selector-button{font:inherit;font-weight:500;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--ink);border-radius:999px;padding:7px 14px;margin-inline-end:12px;cursor:pointer}
.nat-form .opt{font-weight:400;color:var(--ink-3)}
.nat-form .hint{font-size:13px;color:var(--ink-3);font-weight:400;margin:0}
.mob{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500}
.mob-in{display:grid;grid-template-columns:104px 1fr;gap:8px}
.fs{border:0;padding:0;margin:0;min-width:0}
.fs legend{font-size:14px;font-weight:500;padding:0;margin-bottom:4px}
.chipboxes{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chipbox{position:relative;flex-direction:row!important;font-weight:400!important}
.chipbox input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chipbox span{display:inline-flex;align-items:center;min-height:44px;padding:9px 16px;border-radius:999px;border:1px solid var(--line-strong);font-size:15px;color:var(--ink-2);transition:all .15s}
.chipbox input:checked+span{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.chipbox input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.consent{flex-direction:row!important;align-items:flex-start;gap:12px!important;font-weight:400!important;font-size:14.5px!important;color:var(--ink-2);line-height:1.5}
.consent input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--accent)}
.consent a{color:var(--accent)}
.nat-form .is-invalid input,.nat-form .is-invalid select,.nat-form .is-invalid textarea,.nat-form .is-invalid .chipbox span{border-color:#FF8A7A}
.nat-form .is-invalid>legend,.nat-form label.is-invalid,.mob.is-invalid .lbl,.consent.is-invalid{color:#FF8A7A}
.form-status.ok{color:var(--accent)}
.form-status.err{color:#FF8A7A}
.nat-form .btn{min-height:50px}
@media (max-width:640px){.nat-form .btn{align-self:stretch}}

/* ---------------------------------------------------------------- RTL */
/* v3 parks .hp and .skip at left:-9999px; in RTL the left is the scrollable side, so park them off the right instead. */
.nat-form .hp{left:auto;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
html[dir=rtl] .skip{left:auto;right:-9999px}
html[dir=rtl] .skip:focus{right:16px}
html[dir=rtl] body{font-family:"IBM Plex Sans Arabic",var(--font);font-feature-settings:normal}
/* v3's display face (Plus Jakarta Sans) has no Arabic glyphs: Arabic headings use Plex Arabic, Plex Arabic has its own Latin, so it goes first. */
html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3,html[dir=rtl] .route-len,html[dir=rtl] .nstat strong{font-family:"IBM Plex Sans Arabic",var(--display,var(--font))}
html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3,html[dir=rtl] .route-len,html[dir=rtl] .nstat strong,html[dir=rtl] .door h2{letter-spacing:0;line-height:1.3}
html[dir=rtl] h1{font-weight:600}
html[dir=rtl] h2,html[dir=rtl] h3{font-weight:600}
html[dir=rtl] .eyebrow,html[dir=rtl] .model-k,html[dir=rtl] .glance-k,html[dir=rtl] .chips-k{letter-spacing:0;text-transform:none}
html[dir=rtl] .wm{margin-right:0;margin-left:-.36em}
html[dir=rtl] .logo{direction:ltr}
html[dir=rtl] .nav-links{margin-left:0;margin-right:24px}
html[dir=rtl] .nav-cta,html[dir=rtl] .burger{margin-left:0;margin-right:auto}
html[dir=rtl] .chips-k{margin-right:0;margin-left:8px}
html[dir=rtl] .btn .ic,html[dir=rtl] .more .ic,html[dir=rtl] .door .ic{transform:scaleX(-1)}
html[dir=rtl] .btn:hover .ic{transform:scaleX(-1) translateX(3px)}
html[dir=rtl] .acc summary .ic{margin-left:0;margin-right:auto}
html[dir=rtl] .acc p{padding-right:0;padding-left:40px}
html[dir=rtl] .phases li::before{left:auto;right:0}
html[dir=rtl] .route .outcome{text-align:left}
html[dir=rtl] .nat-form select{padding:13px 14px 13px 40px;background-position:left 14px center}
html[dir=rtl] .mob-in select{padding:13px 40px 13px 14px;background-position:right 14px center}
html[dir=rtl] .nstat strong{font-variant-numeric:tabular-nums}
html[dir=rtl] .lede,html[dir=rtl] p{line-height:1.8}
@media (max-width:900px){
  html[dir=rtl] .phases{border-left:0;border-right:1px solid var(--line-strong);padding-left:0;padding-right:28px}
  html[dir=rtl] .phases li::before{left:auto;right:-33px}
  html[dir=rtl] .route .outcome{text-align:right}
}
html[dir=rtl] p[dir=ltr],html[dir=rtl] .foot-meta{text-align:right}

/* ---------------------------------------------------------------- monochrome (George 2026-10-19: "cleaner, monochrome for now")
   Scoped to the Nationals pages (body.natp). The rest of the site keeps the live-site mint.
   To go back to colour, delete this block. */
body.natp{
  --accent:#F2F2F2;--accent-ink:#121516;--accent-soft:rgba(242,242,242,.06);
  --glow:none;--glow-hover:none;
  --live:var(--ink);--live-bg:rgba(242,242,242,.06);--live-ink:var(--ink);
}
body.natp .hl{color:var(--ink-2)}
body.natp .hero::before,body.natp .nat-split-hero::before{display:none}
body.natp .eyebrow{border-color:var(--line-strong);color:var(--ink-2);background:none}
body.natp .ic-box{background:var(--surface-2);color:var(--ink)}
body.natp .social{border-color:var(--line-strong);color:var(--ink)}
body.natp .btn-primary{background:var(--ink);color:var(--bg);box-shadow:none}
body.natp .btn-primary:hover{background:#FFFFFF}
body.natp .btn-ghost{border-color:var(--line-strong)}
body.natp .weeks li{border-top-color:var(--line-strong)}
body.natp .flow::before{background:var(--line-strong)}
body.natp .form input:focus,body.natp .form textarea:focus,body.natp .nat-form select:focus{border-color:var(--ink-2);box-shadow:0 0 0 3px rgba(242,242,242,.12)}
body.natp .chipbox input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--bg)}
body.natp .consent a,body.natp .form-status.ok{color:var(--ink)}
body.natp .nat-cases .num{color:var(--ink-3)}
body.natp .door .more{color:var(--ink)}
body.natp .door:hover,body.natp .door:focus-visible{border-color:var(--ink-2)}
/* cleaner: flat cards, no glow */
body.natp .card,body.natp .route,body.natp .phase,body.natp .acc details,body.natp .glance{box-shadow:none}
/* partner and MSBC marks in monochrome (George 2026-10-21: logos fine to keep, in monochrome) */
body.natp .nat-backed img,body.natp .nat-partners .pm{filter:grayscale(1)}
body.natp .nat-partners li{color:var(--ink-2)}
/* placeholders stay visible but in grey, not yellow */
body.natp mark.ph{background:rgba(242,242,242,.06);color:var(--ink);border-color:var(--line-strong)}
/* 2026-10-19: big numbers in the display face like the rest of the site; door links centred under centred copy */
.nstat strong{font-family:var(--display,var(--font));font-weight:700}
.door .more{align-self:center}

/* Saudi applicants see name and email only: hidden fields must win over the grid/flex display rules */
.nat-form [hidden]{display:none!important}
.nat-form .f2:not(:has(> :not([hidden]))){display:none}

/* George 2026-10-22: "add some of the green" back. Accents only (headline highlights, eyebrows, icons, big numbers, links);
   buttons, cards and logos stay monochrome. Same greens as the rest of the site: #55E6A5 dark, #217C56 text on light. */
body.natp{--nat-g:#55E6A5}
html[data-theme=light] body.natp{--nat-g:#217C56}
body.natp .hl,body.natp .nstat strong,body.natp .door .more,body.natp .nat-cases .num,body.natp .consent a{color:var(--nat-g)}
body.natp .eyebrow{color:var(--nat-g);border-color:color-mix(in srgb,var(--nat-g) 30%,transparent)}
body.natp .eyebrow::before{background:var(--nat-g)}
body.natp .ic-box{color:var(--nat-g);background:color-mix(in srgb,var(--nat-g) 10%,transparent)}
body.natp .door:hover,body.natp .door:focus-visible{border-color:var(--nat-g)}

/* George 2026-10-22: "Backed by" and "Partners and platforms" centred, and the MSBC mark as a clean single-colour
   logo: white on dark, black on light (the PNG is white artwork; brightness(0) makes it a solid silhouette). */
.nat-backed{flex-direction:column;align-items:center;text-align:center;gap:28px}
.nat-partners ul{justify-content:center}
body.natp .nat-backed img{filter:brightness(0) invert(1);opacity:.9}
html[data-theme=light] body.natp .nat-backed img{filter:brightness(0);opacity:.85}