/* AMLA, lifted from design/app/_src-01-tokens.html by scripts/extract_design.py.
 *
 * DO NOT EDIT THIS FILE. Edit the contract and run the script again; a hand
 * edit here is wiped by the next run and the live site stops matching the
 * drawing it is supposed to be.
 *
 * The only change the script makes is the one this repo requires: every custom
 * property is prefixed --amla-, because skillteam-kit is network activated and
 * loads beside this on amla.world. 46 of them. Every value, selector,
 * media query and rule order is the contract's.
 *
 * TEMPORARY, AND WRITTEN DOWN AS SUCH: kit.css on the network is still v1 and
 * AMLA is drawn on kit v2, so the v2 tokens are carried here. When kit v2 lands
 * network wide, everything kit.css already provides comes out and only AMLA's
 * accent stays. The job is on the board.
 */

/* ==========================================================================
   AMLA on SkillTeam kit v2.

   The kit's rule is that the accent is THE COMPANY'S OWN COLOUR and indigo is
   only what a company that never chose one gets. AMLA chose. So every token
   below is kit v2's shape with AMLA's palette poured into it: Geert's navy
   #0D2B5B and gold #C8A84B, the off-white #F5F7FA, one family, three weights,
   the 8pt scale, 20px cards, two shadows, one curve.

   Two places where the brief and the kit disagreed, and how it was settled:
   - The brief asks for Inter or Montserrat. The kit says Plus Jakarta Sans and
     the kit wins on type, because a second family on the platform is how a
     platform stops looking like one product.
   - Gold at #C8A84B on white is 2.3:1. It is a FILL, never text on white.
     --gold-deep exists for the times a gold word has to be readable.
   ========================================================================== */
:root{
  --amla-canvas:#F5F7FA; --amla-surface:#FFFFFF; --amla-surface-2:#EEF2F8;
  --amla-navy:#0D2B5B; --amla-navy-deep:#08203F; --amla-navy-2:#143A73; --amla-navy-3:#1B4A8F;
  --amla-ink:#132241; --amla-ink-2:#454F68; --amla-ink-3:#6D7793; --amla-ink-4:#98A2B8; --amla-ink-5:#C6CDDC;
  --amla-line:#E7EBF3; --amla-line-2:#D6DCE8;
  --amla-gold:#C8A84B; --amla-gold-2:#B3933A; --amla-gold-deep:#8A6D19; --amla-gold-wash:#FBF5E4;
  --amla-sea:#0E6F86; --amla-sea-wash:#E2F1F5;
  --amla-danger:#C43C58; --amla-danger-wash:#FBECEF;
  --amla-on-gold:#22190A;
  --amla-sh-1:0 1px 2px rgba(13,43,91,.05), 0 6px 18px -6px rgba(13,43,91,.13);
  --amla-sh-2:0 1px 2px rgba(13,43,91,.06), 0 14px 32px -12px rgba(13,43,91,.24);
  --amla-sh-gold:0 8px 22px -10px rgba(200,168,75,.85);
  --amla-font:'Plus Jakarta Sans','Manrope','Inter',-apple-system,'Segoe UI',Arial,sans-serif;
  --amla-e:cubic-bezier(.16,1,.3,1);
  --amla-r-card:20px; --amla-r:12px; --amla-r-sm:8px; --amla-r-pill:999px;
  --amla-s1:4px; --amla-s2:8px; --amla-s3:12px; --amla-s4:16px; --amla-s5:20px; --amla-s6:24px;
  --amla-s7:32px; --amla-s8:40px; --amla-s9:48px; --amla-s10:64px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --amla-canvas:#0A1526; --amla-surface:#0F1D33; --amla-surface-2:#15263F;
    --amla-navy:#0F2E62; --amla-navy-deep:#07172D; --amla-navy-2:#1A4586; --amla-navy-3:#4E8BD8;
    --amla-ink:#E8EDF6; --amla-ink-2:#AFBACF; --amla-ink-3:#8792AA; --amla-ink-4:#68738C; --amla-ink-5:#3D4A63;
    --amla-line:#1C2C47; --amla-line-2:#263754;
    --amla-gold:#D9BC63; --amla-gold-2:#C8A84B; --amla-gold-deep:#E3CB84; --amla-gold-wash:#241E0E;
    --amla-sea:#4FB3C9; --amla-sea-wash:#0E2B33;
    --amla-danger:#E8697F; --amla-danger-wash:#33181D;
    --amla-sh-1:0 1px 2px rgba(0,0,0,.4), 0 6px 18px -6px rgba(0,0,0,.6);
    --amla-sh-2:0 1px 2px rgba(0,0,0,.45), 0 14px 32px -12px rgba(0,0,0,.7);
    --amla-sh-gold:0 8px 22px -10px rgba(217,188,99,.5);
  }
}
:root[data-theme="dark"]{
  --amla-canvas:#0A1526; --amla-surface:#0F1D33; --amla-surface-2:#15263F;
  --amla-navy:#0F2E62; --amla-navy-deep:#07172D; --amla-navy-2:#1A4586; --amla-navy-3:#4E8BD8;
  --amla-ink:#E8EDF6; --amla-ink-2:#AFBACF; --amla-ink-3:#8792AA; --amla-ink-4:#68738C; --amla-ink-5:#3D4A63;
  --amla-line:#1C2C47; --amla-line-2:#263754;
  --amla-gold:#D9BC63; --amla-gold-2:#C8A84B; --amla-gold-deep:#E3CB84; --amla-gold-wash:#241E0E;
  --amla-sea:#4FB3C9; --amla-sea-wash:#0E2B33;
  --amla-danger:#E8697F; --amla-danger-wash:#33181D;
  --amla-sh-1:0 1px 2px rgba(0,0,0,.4), 0 6px 18px -6px rgba(0,0,0,.6);
  --amla-sh-2:0 1px 2px rgba(0,0,0,.45), 0 14px 32px -12px rgba(0,0,0,.7);
  --amla-sh-gold:0 8px 22px -10px rgba(217,188,99,.5);
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--amla-canvas);color:var(--amla-ink);font-family:var(--amla-font);
  font-weight:500;font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--amla-gold);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em;line-height:1.16;text-wrap:balance}
p{margin:0;line-height:1.65}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
a{color:var(--amla-navy-3);text-decoration:none}
img,svg{max-width:100%}
table{border-collapse:collapse}
.num{font-variant-numeric:tabular-nums}

/* ---------- type ---------- */
.display{font-size:clamp(30px,4.6vw,52px);font-weight:800;letter-spacing:-.025em;line-height:1.04}
.h1{font-size:clamp(26px,3.4vw,36px);font-weight:700;letter-spacing:-.02em}
.h2{font-size:22px;font-weight:700;letter-spacing:-.015em}
.h3{font-size:16px;font-weight:600;letter-spacing:-.01em}
.lead{font-size:16px;color:var(--amla-ink-2);line-height:1.62;max-width:60ch}
.meta{font-size:12.5px;color:var(--amla-ink-3)}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amla-gold-deep)}
.eyebrow--on-navy{color:var(--amla-gold)}

/* ---------- layout ---------- */
.wrap{max-width:1180px;margin:0 auto;padding-left:20px;padding-right:20px}
.sec{padding-block:var(--amla-s10)}
.sec--tight{padding-block:var(--amla-s9)}
.sec--navy{background:var(--amla-navy);color:#fff}
.sec--deep{background:var(--amla-navy-deep);color:#fff}
.sec--tint{background:var(--amla-surface-2)}
.sec--navy .lead,.sec--deep .lead{color:#AFC0DC}
.grid{display:grid;gap:var(--amla-s5)}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.cluster{display:flex;align-items:center;gap:var(--amla-s3);flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:var(--amla-s3)}
.sp{flex:1}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--amla-s2);
  padding:12px 22px;border-radius:var(--amla-r-pill);font-size:14px;font-weight:600;
  white-space:nowrap;background:var(--amla-gold);color:var(--amla-on-gold);box-shadow:var(--amla-sh-gold);
  transition:background .18s var(--amla-e),transform .18s var(--amla-e),box-shadow .18s var(--amla-e)}
.btn:hover{background:var(--amla-gold-2);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.btn--navy{background:var(--amla-navy);color:#fff;box-shadow:0 8px 22px -10px var(--amla-navy)}
.btn--amla-navy:hover{background:var(--amla-navy-2)}
.btn--ghost{background:var(--amla-surface);color:var(--amla-ink);
  box-shadow:inset 0 0 0 1px var(--amla-line-2),0 1px 2px rgba(13,43,91,.04)}
.btn--amla-ghost:hover{background:var(--amla-surface);box-shadow:inset 0 0 0 1px var(--amla-ink-4)}
.btn--onnavy{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.btn--amla-onnavy:hover{background:rgba(255,255,255,.1)}
.btn--goldline{background:transparent;color:var(--amla-gold);box-shadow:inset 0 0 0 1.5px var(--amla-gold)}
.btn--amla-goldline:hover{background:rgba(200,168,75,.14)}
.btn--sm{padding:8px 15px;font-size:12.5px}
.btn--lg{padding:15px 28px;font-size:15px}
.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.arrow{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:14px;
  color:var(--amla-navy-3)}
.arrow svg{width:24px;height:8px;fill:none;stroke:currentColor;stroke-width:1.6;
  transition:width .26s var(--amla-e)}
.arrow:hover svg{width:38px}
.sec--navy .arrow,.sec--deep .arrow{color:var(--amla-gold)}

/* ---------- tags ---------- */
.tag{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:var(--amla-r-pill);
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  background:var(--amla-surface-2);color:var(--amla-ink-3)}
.tag--free{background:var(--amla-gold);color:var(--amla-on-gold)}
.tag--sea{background:var(--amla-sea-wash);color:var(--amla-sea)}
.tag--navy{background:rgba(13,43,91,.08);color:var(--amla-navy-3)}
.tag--soon{background:var(--amla-surface-2);color:var(--amla-ink-4)}
.tag--app{background:var(--amla-danger-wash);color:var(--amla-danger)}

/* ---------- cards ---------- */
.card{background:var(--amla-surface);border-radius:var(--amla-r-card);box-shadow:var(--amla-sh-1);padding:var(--amla-s6)}
.card--flat{box-shadow:none;border:1px solid var(--amla-line)}
.hov{transition:box-shadow .26s var(--amla-e),transform .26s var(--amla-e)}
.hov:hover{box-shadow:var(--amla-sh-2);transform:translateY(-3px)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--amla-canvas) 86%,transparent);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--amla-line-2)}
.hdr__in{display:flex;align-items:center;gap:var(--amla-s5);height:70px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand__m{width:34px;height:34px;flex:none}
.brand__t b{display:block;font-size:17px;font-weight:800;letter-spacing:.02em;line-height:1;
  color:var(--amla-ink)}
.brand__t span{display:block;font-size:8.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--amla-ink-4);margin-top:3px}
.nav{display:flex;gap:2px;align-items:center}
.nav > button{position:relative;padding:9px 12px;border-radius:var(--amla-r);font-size:13.5px;
  font-weight:600;color:var(--amla-ink-2);transition:all .18s var(--amla-e);white-space:nowrap}
.nav > button:hover{background:var(--amla-surface);color:var(--amla-ink)}
.nav > button[aria-current=page]{color:var(--amla-navy)}
.nav > button[aria-current=page]::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;
  height:2px;border-radius:2px;background:var(--amla-gold)}
.lang{display:inline-flex;background:var(--amla-surface-2);border-radius:var(--amla-r-pill);padding:3px;flex:none}
.lang button{padding:0 12px;height:28px;border-radius:var(--amla-r-pill);font-size:12px;font-weight:700;
  color:var(--amla-ink-3)}
.lang button[aria-pressed=true]{background:var(--amla-surface);color:var(--amla-navy);box-shadow:var(--amla-sh-1)}
.burger{display:none;width:40px;height:40px;border-radius:var(--amla-r);align-items:center;
  justify-content:center;background:var(--amla-surface);box-shadow:var(--amla-sh-1);flex:none}
.burger svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* the courses mega menu */
.mega{position:absolute;top:66px;left:0;right:0;z-index:49;background:var(--amla-surface);
  border-radius:var(--amla-r-card);box-shadow:var(--amla-sh-2);padding:var(--amla-s6);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--amla-s2)}
.mega a{display:block;padding:11px 13px;border-radius:var(--amla-r);color:var(--amla-ink-2);
  transition:background .18s var(--amla-e)}
.mega a:hover{background:var(--amla-surface-2);color:var(--amla-ink)}
.mega b{display:block;font-size:13.5px;font-weight:600;color:var(--amla-ink)}
.mega span{display:block;font-size:11.5px;color:var(--amla-ink-4);margin-top:2px}
.megawrap{position:relative;max-width:1180px;margin:0 auto;padding:0 20px}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--amla-navy-deep);color:#fff}
.hero__art{position:absolute;inset:0;width:100%;height:100%}
.hero__in{position:relative;padding-block:var(--amla-s10) var(--amla-s10);text-align:center}
.hero .display{color:#fff;max-width:20ch;margin:0 auto}
.hero__sub{font-size:17px;color:#B9C8E2;max-width:60ch;margin:var(--amla-s6) auto 0;line-height:1.6}
.trust{display:inline-flex;gap:var(--amla-s5);flex-wrap:wrap;justify-content:center;
  margin-top:var(--amla-s6);font-size:12.5px;color:#9FB2D0}
.trust b{color:var(--amla-gold);font-weight:700}

/* page hero, the smaller one */
.phero{background:var(--amla-navy);color:#fff;position:relative;overflow:hidden}
.phero__in{position:relative;padding-block:var(--amla-s9)}
.phero .h1{color:#fff}
.phero p{color:#AFC0DC;max-width:60ch;margin-top:var(--amla-s4)}
.crumb{font-size:12px;color:#8CA3C6;margin-bottom:var(--amla-s4)}
.crumb b{color:var(--amla-gold);font-weight:600}

/* ---------- value strip ---------- */
.vals{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--amla-s5)}
.val__i{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:var(--amla-gold-wash);color:var(--amla-gold-deep);margin-bottom:var(--amla-s4)}
.val__i svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.val h3{margin-bottom:var(--amla-s2)}
.val p{font-size:13.5px;color:var(--amla-ink-2)}

/* ---------- course card ---------- */
.cc{display:block;width:100%;text-align:left;background:var(--amla-surface);border-radius:var(--amla-r-card);
  overflow:hidden;box-shadow:var(--amla-sh-1)}
.cc__c{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--amla-navy)}
.cc__c svg{position:absolute;inset:0;width:100%;height:100%}
.cc__badges{position:absolute;top:var(--amla-s3);left:var(--amla-s3);right:var(--amla-s3);display:flex;
  gap:6px;flex-wrap:wrap}
.cc__b{padding:var(--amla-s5)}
.cc__b h3{margin:var(--amla-s3) 0 var(--amla-s2);font-size:16.5px}
.cc__b p{font-size:13px;color:var(--amla-ink-2)}
.cc__f{display:flex;align-items:center;gap:var(--amla-s3);margin-top:var(--amla-s4);
  padding-top:var(--amla-s4);border-top:1px solid var(--amla-line);font-size:12px;color:var(--amla-ink-3)}

/* ---------- sector tile ---------- */
.st{display:block;width:100%;text-align:left;background:var(--amla-surface);border-radius:var(--amla-r-card);
  padding:var(--amla-s5);box-shadow:var(--amla-sh-1);position:relative}
.st__i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:var(--amla-navy);color:var(--amla-gold);margin-bottom:var(--amla-s4)}
.st__i svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.st h3{font-size:15.5px;margin-bottom:6px}
.st p{font-size:12.5px;color:var(--amla-ink-3);line-height:1.55}
.st__n{position:absolute;top:var(--amla-s5);right:var(--amla-s5);font-size:11px;font-weight:700;
  padding:4px 10px;border-radius:var(--amla-r-pill);background:var(--amla-surface-2);color:var(--amla-ink-3)}
.st__n.has{background:var(--amla-gold-wash);color:var(--amla-gold-deep)}

/* ---------- progress ---------- */
.bar{display:block;height:7px;border-radius:var(--amla-r-pill);background:var(--amla-line-2);overflow:hidden}
.bar i{display:block;height:100%;border-radius:var(--amla-r-pill);background:var(--amla-gold);
  transition:width .5s var(--amla-e)}
.bar--navy i{background:var(--amla-navy-3)}
.ring{--amla-p:0;width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(var(--amla-gold) calc(var(--amla-p)*1%),var(--amla-line-2) 0)}
.ring b{width:40px;height:40px;border-radius:50%;background:var(--amla-surface);display:grid;
  place-items:center;font-size:12px;font-weight:700}

/* ---------- forms ---------- */
.field{display:block;margin-bottom:var(--amla-s4)}
.field > span{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--amla-ink-3);margin-bottom:7px}
.input{width:100%;padding:12px 15px;border-radius:var(--amla-r);background:var(--amla-surface);
  border:1px solid var(--amla-line-2);font:inherit;font-size:14px;color:var(--amla-ink);outline:0;
  transition:border-color .18s var(--amla-e),box-shadow .18s var(--amla-e)}
.input::placeholder{color:var(--amla-ink-4)}
.input:focus{border-color:var(--amla-gold);box-shadow:0 0 0 3px var(--amla-gold-wash)}
.hint{font-size:12px;color:var(--amla-ink-3);margin-top:7px}

/* ---------- misc ---------- */
.pill-row{display:flex;gap:var(--amla-s2);flex-wrap:wrap}
.kv{display:flex;gap:var(--amla-s4);padding:13px 0;border-top:1px solid var(--amla-line)}
.kv:first-child{border-top:0}
.kv dt{flex:0 0 34%;font-weight:600;color:var(--amla-ink);margin:0;font-size:13.5px}
.kv dd{flex:1;margin:0;color:var(--amla-ink-2);font-size:13.5px}
.acc{border-top:1px solid var(--amla-line)}
.acc:first-child{border-top:0}
.acc__q{display:flex;align-items:center;gap:var(--amla-s4);width:100%;padding:17px 0;
  font-size:15px;font-weight:600}
.acc__q svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--amla-ink-4);stroke-width:2;
  stroke-linecap:round;transition:transform .26s var(--amla-e)}
.acc.on .acc__q svg{transform:rotate(180deg)}
.acc__a{padding:0 0 18px;color:var(--amla-ink-2);font-size:13.5px;max-width:74ch}
.slotrow{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--amla-s4)}
.slot{aspect-ratio:5/3;border-radius:var(--amla-r);border:1.5px dashed var(--amla-ink-5);display:grid;
  place-items:center;text-align:center;padding:var(--amla-s3);font-size:10.5px;color:var(--amla-ink-4);
  line-height:1.4}
.foot{background:var(--amla-navy-deep);color:#93A6C4;padding-block:var(--amla-s9) var(--amla-s6);
  position:relative;overflow:hidden}
.foot__g{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:var(--amla-s7);
  margin-bottom:var(--amla-s8);position:relative}
.foot h4{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--amla-gold);margin:0 0 var(--amla-s4)}
.foot button{display:block;color:#C3D0E4;font-size:13.5px;padding:6px 0}
.foot button:hover{color:#fff}
.foot__b{border-top:1px solid rgba(255,255,255,.12);padding-top:var(--amla-s5);display:flex;
  gap:var(--amla-s5);flex-wrap:wrap;font-size:12px;position:relative}

/* ---------- app shell, the signed in side ---------- */
.app{display:grid;grid-template-columns:236px 1fr;min-height:100vh;background:var(--amla-canvas)}
.rail{position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--amla-navy-deep);
  padding:var(--amla-s5) var(--amla-s4);display:flex;flex-direction:column;gap:var(--amla-s5)}
.rail .brand__t b{color:#fff}
.rail .brand__t span{color:#7E90AE}
.rnav{display:flex;flex-direction:column;gap:3px}
.rnav button{display:flex;align-items:center;gap:var(--amla-s3);padding:10px 12px;border-radius:var(--amla-r);
  color:#A8B7D0;font-size:13.5px;font-weight:500;transition:all .18s var(--amla-e)}
.rnav button:hover{background:rgba(255,255,255,.07);color:#fff}
.rnav button[aria-current=page]{background:var(--amla-gold);color:var(--amla-on-gold);font-weight:600}
.rnav svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.rnav em{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;
  background:rgba(255,255,255,.12);padding:2px 8px;border-radius:var(--amla-r-pill)}
.rnav button[aria-current=page] em{background:rgba(34,25,10,.18)}
.apptop{display:flex;align-items:center;gap:var(--amla-s4);padding:var(--amla-s6) var(--amla-s7) var(--amla-s5)}
.apppage{padding:0 var(--amla-s7) var(--amla-s9);min-width:0}
.row{display:flex;align-items:center;gap:var(--amla-s4);padding:var(--amla-s4);border-radius:var(--amla-r);
  background:var(--amla-surface);box-shadow:var(--amla-sh-1)}
/* A cover SVG has no intrinsic size. Inside .cc__c one rule gives it one; a
   thumbnail anywhere else needs its own, or it collapses to a few pixels. */
.thumb{display:block;overflow:hidden;flex:none;border-radius:9px}
.thumb svg{display:block;width:100%;height:100%}
.row__t{flex:1;min-width:0}
.row__t b{display:block;font-size:14px;font-weight:600}
.row__t span{display:block;font-size:12px;color:var(--amla-ink-3);margin-top:3px}
.tile{border-radius:var(--amla-r-card);padding:var(--amla-s5);box-shadow:var(--amla-sh-1);background:var(--amla-surface)}
.tile__n{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums}
.tile__t{font-size:13px;color:var(--amla-ink-3);margin-top:8px}
.tile--gold{background:var(--amla-gold-wash)} .tile--sea{background:var(--amla-sea-wash)}
.tile--navy{background:var(--amla-navy);color:#fff}
.tile--navy .tile__t{color:#AFC0DC}
.badgegrid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--amla-s4)}
.bdg{text-align:center}
.bdg__d{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;margin-bottom:10px;
  background:var(--amla-gold-wash);color:var(--amla-gold-deep)}
.bdg__d svg{width:44%;height:44%;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.bdg.off .bdg__d{background:var(--amla-surface-2);color:var(--amla-ink-5)}
.bdg.off b{color:var(--amla-ink-4)}
.bdg b{display:block;font-size:12px;font-weight:600}
.bdg span{display:block;font-size:10.5px;color:var(--amla-ink-4);margin-top:2px;line-height:1.35}

/* ---------- auth ---------- */
.auth{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.auth__l{background:var(--amla-navy-deep);color:#fff;padding:var(--amla-s10) var(--amla-s8);position:relative;
  overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.auth__r{display:flex;align-items:center;justify-content:center;padding:var(--amla-s8) var(--amla-s6);
  background:var(--amla-canvas)}
.auth__box{width:100%;max-width:420px}
.checkline{display:flex;gap:var(--amla-s3);align-items:flex-start;color:#B9C8E2;font-size:14px;
  padding:9px 0;position:relative}
.checkline svg{width:18px;height:18px;flex:none;margin-top:2px;fill:none;stroke:var(--amla-gold);
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- rules table at the foot ---------- */
.rules{background:var(--amla-surface-2);padding-block:var(--amla-s9) var(--amla-s10)}
.rules table{width:100%;background:var(--amla-surface);border-radius:var(--amla-r-card);overflow:hidden;
  box-shadow:var(--amla-sh-1)}
.rules th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--amla-ink-4);padding:var(--amla-s4) var(--amla-s5);background:var(--amla-surface-2)}
.rules td{padding:var(--amla-s4) var(--amla-s5);border-top:1px solid var(--amla-line);font-size:13px;
  vertical-align:top;line-height:1.6;color:var(--amla-ink-2)}
.rules td:first-child{font-weight:600;width:29%;color:var(--amla-ink)}
.rules code{background:var(--amla-surface-2);padding:1px 6px;border-radius:5px;font-size:12px}

@media (max-width:1080px){
  .nav{display:none} .burger{display:flex}
  .vals,.g4{grid-template-columns:repeat(2,1fr)}
  .mega{grid-template-columns:repeat(2,1fr)}
  .app{grid-template-columns:1fr}
  .rail{position:fixed;left:0;top:0;width:250px;z-index:60;transform:translateX(-100%);
    transition:transform .26s var(--amla-e)}
  .rail.on{transform:none;box-shadow:var(--amla-sh-2)}
  .badgegrid{grid-template-columns:repeat(4,1fr)}
}
/* At phone width the header keeps what the brief says must always be there,
   the language switcher and Start Free, and drops the rest. Sign in lives one
   tap away inside Start Free, which is where somebody who already has an
   account is going to look anyway. */
@media (max-width:620px){
  .hdr__in{gap:10px;height:62px}
  .brand__t span{display:none}
  .brand__t b{font-size:16px}
  .hdr .btn--ghost{display:none}
  .lang button{padding:0 9px;font-size:11.5px}
  .hdr .btn--sm{padding:8px 13px}
}
@media (max-width:760px){
  .g3,.g2,.g4,.vals,.auth,.foot__g{grid-template-columns:1fr}
  .slotrow{grid-template-columns:repeat(2,1fr)}
  .badgegrid{grid-template-columns:repeat(3,1fr)}
  .sec{padding-block:var(--amla-s8)}
  .apptop,.apppage{padding-left:var(--amla-s4);padding-right:var(--amla-s4)}
  .kv{flex-direction:column;gap:4px} .kv dt{flex:none}
  .auth__l{padding:var(--amla-s8) var(--amla-s5)}
  .rules td:first-child{width:auto}
  .rules table,.rules tbody,.rules tr,.rules td{display:block;width:100%}
  .rules thead{display:none}
  .rules td{border-top:0;padding:4px var(--amla-s4)}
  .rules td:first-child{padding-top:var(--amla-s4);border-top:1px solid var(--amla-line)}
  .rules td:last-child{padding-bottom:var(--amla-s4)}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation:none!important}}

.scrim{position:fixed;inset:0;background:rgba(8,32,63,.5);z-index:55}