/* ==========================================================================
   NSFAS 2027 Applications — landing block
   v2.1 · namespaced for embedding in www.nsfas.org.za

   EVERY selector is scoped under the .nsfas27 wrapper and every class,
   custom property and id carries the nsfas27 / n27 prefix. Nothing in this
   file can match an element outside the block, and nothing the host site
   declares globally (resets, tag styles, utility classes) reaches inside it.

   Naming
     .nsfas27                 root wrapper — REQUIRED, everything is scoped to it
     .nsfas27-<block>         section-level block          (nsfas27-hero)
     .nsfas27-<block>__<el>   element inside a block       (nsfas27-hero__title)
     .nsfas27-<block>--<mod>  modifier                     (nsfas27-btn--gold)
     --n27-*                  custom properties, declared on .nsfas27, not :root

   Specificity: component rules are written as `.nsfas27 .nsfas27-x` (0,2,0)
   so ordinary theme selectors (`.content p`, `.entry a`) cannot outrank them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — on the wrapper, NOT :root, so the host's own :root is untouched
   -------------------------------------------------------------------------- */
.nsfas27{
  /* sunburst ground */
  --n27-sun-1:#FECC51;      /* top-left gold      */
  --n27-sun-2:#F6B739;
  --n27-sun-3:#EE9B28;
  --n27-sun-4:#DE7D27;      /* right burnt orange */

  --n27-ink:#130F0B;        /* headline           */
  --n27-ink-body:#3B2A12;   /* body copy          */
  --n27-ink-eyebrow:#6C3E0A;
  --n27-rust:#A0480F;       /* primary button     */
  --n27-rust-dark:#83380A;
  --n27-rust-rule:#9F470E;

  --n27-panel:#241C0D;      /* countdown tiles    */
  --n27-panel-bar:#291D0E;  /* safety bar         */
  --n27-gold:#FFC94F;

  --n27-card:#FDF1DE;       /* QR card            */
  --n27-card-line:#EFD6AE;
  --n27-cream:#FFFCF5;      /* how-to-apply ground */
  --n27-cream-line:#EEE2CB;
  --n27-white:#FFFFFF;

  --n27-max:1320px;
  --n27-gutter:clamp(20px,calc(5.5 * var(--n27-u)),80px);
  --n27-radius:10px;
  --n27-chip:clamp(44px,calc(4 * var(--n27-u)),56px);
  /* Image sizes live in tokens. The breakpoints change the token and the
     armour pins height:var(--token), so a host's `img{height:auto!important}`
     cannot collapse them while the responsive steps still apply. */
  --n27-badge-h:60px;                                  /* Google requires >=60px */
  --n27-phone-h:clamp(330px,calc(37 * var(--n27-u)),545px);
  --n27-focus:3px solid var(--n27-ink);
  --n27-font:Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;

  /* Fluid-sizing unit. Every clamp() below is written against this instead of
     vw, so type and spacing track the BLOCK's width. In a 740px CMS column on
     a 1920 screen, vw would size the type for 1920 and the block would look
     blown up. Falls back to vw where container queries are unsupported. */
  --n27-u:1vw;

  /* the block reflows on ITS OWN width, not the viewport's, so it behaves
     the same in a full-bleed row and in a narrow CMS column */
  container-type:inline-size;
  container-name:nsfas27;

  /* host-proofing: re-establish a predictable baseline inside the block */
  font-family:var(--n27-font);
  font-size:16px;
  line-height:1.5;
  color:var(--n27-ink);
  text-align:start;
  letter-spacing:normal;
  word-spacing:normal;
  font-style:normal;
  text-transform:none;
}

@supports (container-type:inline-size){
  .nsfas27{--n27-u:1cqi}
}

/* --------------------------------------------------------------------------
   2. Scoped reset — replaces the old global `*` reset, which would otherwise
      have changed box-sizing for the entire host page.
      :where() keeps these at specificity 0 internally, so the component
      rules below always win, while `.nsfas27` still outranks bare tag rules.
   -------------------------------------------------------------------------- */
.nsfas27,
.nsfas27 *,
.nsfas27 *::before,
.nsfas27 *::after{box-sizing:border-box}

.nsfas27 :where(section,div,h1,h2,h3,h4,p,ul,ol,li,dl,dt,dd,figure,blockquote,pre,span){
  margin:0;padding:0;border:0;background:none;
  font-family:inherit;font-style:normal;        /* beats a bare `h2{font-family:…}` */
  text-align:inherit;letter-spacing:inherit;
}
.nsfas27 :where(ul,ol,li){list-style:none}
.nsfas27 :where(a){
  text-decoration:none;color:inherit;background:none;border:0;
  font-family:inherit;font-style:normal;
  font-weight:inherit;font-size:inherit;line-height:inherit;
}
/* a theme's `img{width:100%}` / `svg{width:100%}` would otherwise blow up every
   icon and badge in the block */
.nsfas27 :where(img,video){width:auto;height:auto;max-width:100%;border:0}
.nsfas27 :where(svg){width:auto;height:auto;max-width:100%;border:0;flex-shrink:0}
.nsfas27 :where(b,strong){font-weight:900;font-style:normal}
.nsfas27 :where(h1,h2,h3,h4){
  font-weight:900;line-height:1.1;letter-spacing:normal;text-transform:none;
}
.nsfas27 :where(section){display:block;border:0}

.nsfas27 .nsfas27-sr{
  position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.nsfas27 a:focus-visible{outline:var(--n27-focus);outline-offset:4px;border-radius:8px}

.nsfas27 .nsfas27-wrap{
  max-width:var(--n27-max);margin-inline:auto;
  padding-inline:var(--n27-gutter);
}
.nsfas27 .nsfas27-eyebrow{
  display:flex;align-items:center;gap:11px;margin:0 0 clamp(12px,calc(1.4 * var(--n27-u)),18px);
  font-size:clamp(10.5px,calc(.92 * var(--n27-u)),12px);font-weight:900;letter-spacing:.17em;
  text-transform:uppercase;color:var(--n27-ink-eyebrow);
}
.nsfas27 .nsfas27-eyebrow::before{
  content:"";width:26px;height:3px;border-radius:2px;
  background:var(--n27-rust-rule);flex-shrink:0;
}
.nsfas27 .nsfas27-brand{text-transform:none}   /* "myNSFAS" must never flatten */

/* --------------------------------------------------------------------------
   3. Section 1 — hero
   -------------------------------------------------------------------------- */
.nsfas27 .nsfas27-hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(112deg,var(--n27-sun-1) 0%,var(--n27-sun-2) 25%,
                                    var(--n27-sun-3) 60%,var(--n27-sun-4) 100%);
  padding-block:clamp(38px,calc(5.4 * var(--n27-u)),74px);
}
/* radiating rays, then a soft centre wash so they never fight the copy */
.nsfas27 .nsfas27-hero::before{
  content:"";position:absolute;inset:-25% -12%;z-index:-2;pointer-events:none;
  background:repeating-conic-gradient(from 5deg at 44% 46%,
    rgba(255,255,255,.125) 0deg 3.4deg,
    rgba(255,255,255,0) 3.4deg 7deg);
}
.nsfas27 .nsfas27-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 60% 74% at 40% 46%,
    rgba(255,216,124,.60) 0%,
    rgba(255,205,95,.22) 48%,
    rgba(255,200,90,0) 76%);
}
.nsfas27 .nsfas27-hero__dots{
  position:absolute;inset-block:0;inset-inline-end:0;z-index:0;pointer-events:none;
  width:clamp(24px,calc(3 * var(--n27-u)),46px);
  background-image:radial-gradient(rgba(122,56,10,.32) 1.4px,transparent 1.5px);
  background-size:10px 10px;
}
.nsfas27 .nsfas27-hero__grid{
  position:relative;z-index:2;
  max-width:var(--n27-max);margin-inline:auto;padding-inline:var(--n27-gutter);
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,430px);
  gap:clamp(28px,calc(4 * var(--n27-u)),64px);align-items:start;
}
/* the media column runs taller; drop the copy so both columns end together */
.nsfas27 .nsfas27-hero__copy{padding-top:clamp(0px,calc(2.4 * var(--n27-u)),36px)}

.nsfas27 .nsfas27-hero__title{
  margin:0;font-size:clamp(32px,calc(4.4 * var(--n27-u)),63px);line-height:.97;font-stretch:82%;
  font-weight:900;letter-spacing:-.021em;text-transform:none;  /* keeps "myNSFAS" cased */
  text-wrap:balance;color:var(--n27-ink);
}
.nsfas27 .nsfas27-hero__lede{
  margin:clamp(16px,calc(1.9 * var(--n27-u)),26px) 0 0;max-width:48ch;
  font-size:clamp(15px,calc(1.35 * var(--n27-u)),20px);line-height:1.5;font-weight:500;color:var(--n27-ink-body);
}
.nsfas27 .nsfas27-hero__lede b{font-weight:900;color:var(--n27-ink)}

/* ---- countdown ---- */
.nsfas27 .nsfas27-countdown{margin-top:clamp(22px,calc(2.9 * var(--n27-u)),40px)}
.nsfas27 .nsfas27-countdown__label{
  display:block;margin-bottom:9px;
  font-size:clamp(10px,calc(.9 * var(--n27-u)),11.5px);font-weight:900;letter-spacing:.15em;
  text-transform:uppercase;color:var(--n27-ink-eyebrow);
}
.nsfas27 .nsfas27-countdown__tiles{display:flex;gap:clamp(7px,calc(.8 * var(--n27-u)),11px);flex-wrap:wrap}
.nsfas27 .nsfas27-countdown__tile{
  flex:0 1 clamp(70px,calc(6.6 * var(--n27-u)),95px);min-width:0;
  background:var(--n27-panel);border-radius:var(--n27-radius);
  padding:clamp(9px,calc(1 * var(--n27-u)),13px) 6px clamp(8px,calc(.9 * var(--n27-u)),11px);text-align:center;
  box-shadow:0 5px 12px rgba(80,38,4,.22);
}
.nsfas27 .nsfas27-countdown__num{
  display:block;font-size:clamp(21px,calc(2.3 * var(--n27-u)),31px);line-height:1;
  font-weight:900;color:var(--n27-white);font-variant-numeric:tabular-nums;
}
.nsfas27 .nsfas27-countdown__tile:first-child .nsfas27-countdown__num{color:var(--n27-gold)}
.nsfas27 .nsfas27-countdown__unit{
  display:block;margin-top:5px;font-size:clamp(7.5px,calc(.68 * var(--n27-u)),9px);
  font-weight:900;letter-spacing:.11em;text-transform:uppercase;color:#B7A78D;
}
.nsfas27 .nsfas27-countdown[data-n27-state="closed"] .nsfas27-countdown__tiles{display:none}
.nsfas27 .nsfas27-countdown[data-n27-state="closed"] .nsfas27-countdown__label{
  margin-bottom:0;font-size:clamp(13px,calc(1.2 * var(--n27-u)),16px);letter-spacing:.02em;color:var(--n27-ink);
}
.nsfas27 .nsfas27-countdown__fallback{margin:8px 0 0;font-size:14px;font-weight:700}

/* ---- buttons ---- */
.nsfas27 .nsfas27-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:13px;
  min-height:clamp(54px,calc(4.5 * var(--n27-u)),70px);padding:0 clamp(24px,calc(2.6 * var(--n27-u)),38px);
  border-radius:var(--n27-radius);background:var(--n27-rust);color:var(--n27-white);
  text-decoration:none;font-family:inherit;
  font-size:clamp(16px,calc(1.42 * var(--n27-u)),21px);font-weight:900;letter-spacing:.005em;
  box-shadow:0 10px 22px rgba(90,40,6,.3);
  transition:background .16s ease,transform .16s ease;
}
.nsfas27 .nsfas27-btn:hover{background:var(--n27-rust-dark);color:var(--n27-white);text-decoration:none}
.nsfas27 .nsfas27-btn:active{transform:translateY(1px)}
.nsfas27 .nsfas27-btn svg{flex-shrink:0}
.nsfas27 .nsfas27-hero__copy .nsfas27-btn{margin-top:clamp(20px,calc(2.7 * var(--n27-u)),37px)}

.nsfas27 .nsfas27-btn--gold{
  background:var(--n27-gold);color:var(--n27-ink);
  box-shadow:0 12px 26px rgba(40,16,2,.34);white-space:nowrap;
}
.nsfas27 .nsfas27-btn--gold:hover{background:#FFD976;color:var(--n27-ink)}

/* ---- store badges ---- */
.nsfas27 .nsfas27-stores{
  margin-top:clamp(20px,calc(2.7 * var(--n27-u)),37px);
  display:flex;align-items:center;gap:clamp(11px,calc(1.3 * var(--n27-u)),18px);flex-wrap:wrap;
}
.nsfas27 .nsfas27-stores__label{
  font-size:clamp(9.5px,calc(.85 * var(--n27-u)),11px);font-weight:900;letter-spacing:.15em;
  text-transform:uppercase;color:var(--n27-ink-eyebrow);
}
.nsfas27 .nsfas27-stores a{display:block;border-radius:8px}
.nsfas27 .nsfas27-stores img{height:var(--n27-badge-h);width:auto;display:block}

/* ---- safety bar ---- */
.nsfas27 .nsfas27-safety{
  margin-top:clamp(22px,calc(2.9 * var(--n27-u)),40px);
  display:flex;align-items:center;gap:11px;
  padding:clamp(11px,calc(1.1 * var(--n27-u)),15px) clamp(14px,calc(1.4 * var(--n27-u)),20px);
  border-radius:var(--n27-radius);background:var(--n27-panel-bar);color:var(--n27-white);
}
.nsfas27 .nsfas27-safety svg{flex-shrink:0}
.nsfas27 .nsfas27-safety p{margin:0;font-size:clamp(12.5px,calc(1.05 * var(--n27-u)),15px);line-height:1.35;font-weight:700}

/* ---- media column ---- */
.nsfas27 .nsfas27-hero__media{
  display:flex;flex-direction:column;align-items:center;gap:clamp(20px,calc(2.6 * var(--n27-u)),34px);
}
.nsfas27 .nsfas27-hero__phone{
  width:auto;height:var(--n27-phone-h);display:block;max-width:100%;
  filter:drop-shadow(0 22px 36px rgba(84,38,5,.38));
}
.nsfas27 .nsfas27-qr{
  width:fit-content;margin-inline:auto;
  background:var(--n27-card);border:1px solid var(--n27-card-line);
  border-radius:14px;padding:clamp(13px,calc(1.4 * var(--n27-u)),18px);
  box-shadow:0 12px 26px rgba(88,40,6,.18);
}
.nsfas27 .nsfas27-qr__title{
  display:block;text-align:center;margin-bottom:clamp(10px,calc(1.1 * var(--n27-u)),14px);
  font-size:clamp(10px,calc(.9 * var(--n27-u)),11.5px);font-weight:900;letter-spacing:.11em;
  text-transform:uppercase;color:var(--n27-rust);
}
.nsfas27 .nsfas27-qr__grid{display:flex;gap:clamp(10px,calc(1.2 * var(--n27-u)),16px);justify-content:center}
.nsfas27 .nsfas27-qr__item{flex:0 0 auto;text-align:center}
.nsfas27 .nsfas27-qr__item img{
  /* native 180px, 4px per module: any non-integer scale blurs the modules and
     the code stops decoding, so this size is fixed, not fluid. */
  width:180px;height:180px;max-width:180px;display:block;margin-inline:auto;
  background:var(--n27-white);border:1px solid var(--n27-card-line);border-radius:6px;
  image-rendering:pixelated;                       /* keeps module edges crisp */
}
.nsfas27 .nsfas27-qr__item span{
  display:block;margin-top:8px;font-size:clamp(8.5px,calc(.76 * var(--n27-u)),10px);font-weight:900;
  letter-spacing:.13em;text-transform:uppercase;color:var(--n27-ink-eyebrow);
}

/* --------------------------------------------------------------------------
   4. Section 2 — how to apply
   -------------------------------------------------------------------------- */
.nsfas27 .nsfas27-apply{
  background:var(--n27-cream);color:var(--n27-ink);
  padding-block:clamp(46px,calc(6 * var(--n27-u)),88px);
}
.nsfas27 .nsfas27-h2{
  margin:0;font-size:clamp(28px,calc(3.4 * var(--n27-u)),48px);line-height:1;
  font-weight:900;font-stretch:84%;letter-spacing:-.018em;
}
.nsfas27 .nsfas27-apply__intro{max-width:56ch}
.nsfas27 .nsfas27-apply__intro p{
  margin:clamp(12px,calc(1.4 * var(--n27-u)),18px) 0 0;
  font-size:clamp(15px,calc(1.25 * var(--n27-u)),18px);line-height:1.55;font-weight:500;color:var(--n27-ink-body);
}

.nsfas27 .nsfas27-steplist{
  margin:clamp(28px,calc(3.4 * var(--n27-u)),48px) 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,calc(2 * var(--n27-u)),28px);
  counter-reset:n27step;
}
.nsfas27 .nsfas27-step{
  position:relative;counter-increment:n27step;overflow:hidden;
  background:var(--n27-white);border:1px solid var(--n27-cream-line);border-radius:16px;
  box-shadow:0 6px 18px rgba(96,54,10,.07);
  transition:transform .2s ease,box-shadow .2s ease;
}
.nsfas27 .nsfas27-step:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(96,54,10,.14)}

.nsfas27 .nsfas27-step__media{
  position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--n27-cream-line);
}
.nsfas27 .nsfas27-step__media img{
  width:100%;height:100%;max-width:none;object-fit:cover;display:block;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.nsfas27 .nsfas27-step:hover .nsfas27-step__media img{transform:scale(1.045)}
/* a whisper of warmth so the gold chip always has something to sit on */
.nsfas27 .nsfas27-step__media::after{
  content:"";position:absolute;inset:auto 0 0 0;height:42%;pointer-events:none;
  background:linear-gradient(to top,rgba(26,16,6,.34),rgba(26,16,6,0));
}
/* The step number rides the image / body seam. Anchoring it to the TOP of
   .nsfas27-step__body puts it exactly on that seam at any card width, without
   hardcoding the image height. */
.nsfas27 .nsfas27-step__body{
  position:relative;
  padding:calc(var(--n27-chip) * .62 + clamp(14px,calc(1.4 * var(--n27-u)),20px))
          clamp(18px,calc(2 * var(--n27-u)),26px)
          clamp(20px,calc(2.2 * var(--n27-u)),28px);
}
.nsfas27 .nsfas27-step__body::before{
  content:counter(n27step,decimal-leading-zero);
  position:absolute;z-index:2;top:calc(var(--n27-chip) / -2);
  inset-inline-start:clamp(16px,calc(1.8 * var(--n27-u)),24px);
  display:grid;place-items:center;width:var(--n27-chip);height:var(--n27-chip);
  border-radius:13px;background:var(--n27-gold);color:var(--n27-ink);
  font-size:clamp(17px,calc(1.6 * var(--n27-u)),23px);line-height:1;
  font-weight:900;font-stretch:80%;
  box-shadow:0 6px 14px rgba(60,28,2,.26);
}
.nsfas27 .nsfas27-step__title{
  margin:0 0 7px;font-size:clamp(16px,calc(1.42 * var(--n27-u)),21px);line-height:1.15;
  font-weight:900;letter-spacing:-.01em;
}
.nsfas27 .nsfas27-step__text{
  margin:0;font-size:clamp(13.5px,calc(1.12 * var(--n27-u)),16px);line-height:1.5;
  font-weight:500;color:var(--n27-ink-body);
}
.nsfas27 .nsfas27-step__text b{font-weight:900;color:var(--n27-ink)}

/* ---- documents ---- */
.nsfas27 .nsfas27-docs{
  margin-top:clamp(26px,calc(3 * var(--n27-u)),42px);
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(16px,calc(2 * var(--n27-u)),28px);
  align-items:start;      /* the two panels carry different loads; don't pad one out */
}
.nsfas27 .nsfas27-docs__panel{
  display:flex;flex-direction:column;
  background:var(--n27-white);border:1px solid var(--n27-cream-line);border-radius:14px;
  padding:clamp(20px,calc(2.2 * var(--n27-u)),30px);
}
.nsfas27 .nsfas27-docs__panel--all{background:var(--n27-card);border-color:var(--n27-card-line)}
.nsfas27 .nsfas27-docs__label{
  margin:0 0 4px;font-size:clamp(10px,calc(.88 * var(--n27-u)),11.5px);font-weight:900;letter-spacing:.15em;
  text-transform:uppercase;color:var(--n27-rust);
}
.nsfas27 .nsfas27-docs__note{
  margin:0 0 clamp(12px,calc(1.3 * var(--n27-u)),17px);
  font-size:clamp(12.5px,calc(1.02 * var(--n27-u)),14.5px);line-height:1.45;font-weight:500;color:var(--n27-ink-body);
}
.nsfas27 .nsfas27-docs__list{
  margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px;
}
.nsfas27 .nsfas27-docs__item{
  display:flex;gap:10px;align-items:flex-start;
  font-size:clamp(13px,calc(1.08 * var(--n27-u)),15.5px);line-height:1.42;
}
.nsfas27 .nsfas27-docs__item svg{flex-shrink:0;margin-top:3px}
.nsfas27 .nsfas27-docs__item b{display:block;font-weight:900;color:var(--n27-ink);margin-bottom:1px}
.nsfas27 .nsfas27-docs__item span{font-weight:500;color:var(--n27-ink-body)}
.nsfas27 .nsfas27-docs__tip{
  margin:clamp(14px,calc(1.5 * var(--n27-u)),20px) 0 0;padding-top:clamp(12px,calc(1.3 * var(--n27-u)),17px);
  border-top:1px dashed var(--n27-cream-line);
  font-size:clamp(12px,calc(1 * var(--n27-u)),14px);line-height:1.45;font-weight:500;color:var(--n27-ink-body);
}
.nsfas27 .nsfas27-docs__tip b{font-weight:900;color:var(--n27-ink)}

/* --------------------------------------------------------------------------
   5. Section 3 — closing call to action
   -------------------------------------------------------------------------- */
.nsfas27 .nsfas27-cta{
  position:relative;isolation:isolate;overflow:hidden;color:var(--n27-white);
  background:linear-gradient(105deg,var(--n27-rust) 0%,#92400D 55%,#7A320A 100%);
  padding-block:clamp(44px,calc(5.6 * var(--n27-u)),80px);
}
.nsfas27 .nsfas27-cta::before{      /* same ray language as the hero, much quieter */
  content:"";position:absolute;inset:-30% -12%;z-index:-1;pointer-events:none;
  background:repeating-conic-gradient(from 5deg at 38% 50%,
    rgba(255,255,255,.035) 0deg 3.4deg,
    rgba(255,255,255,0) 3.4deg 7deg);
}
.nsfas27 .nsfas27-cta__grid{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px,calc(3.4 * var(--n27-u)),56px);align-items:center;
}
.nsfas27 .nsfas27-cta .nsfas27-eyebrow{color:#FFD9A8}
.nsfas27 .nsfas27-cta .nsfas27-eyebrow::before{background:var(--n27-gold)}
.nsfas27 .nsfas27-cta .nsfas27-h2{color:var(--n27-white)}
.nsfas27 .nsfas27-cta__lede{
  margin:clamp(12px,calc(1.4 * var(--n27-u)),18px) 0 0;max-width:52ch;
  font-size:clamp(14.5px,calc(1.25 * var(--n27-u)),18px);line-height:1.55;font-weight:500;color:#FFE7CC;
}
.nsfas27 .nsfas27-cta__lede b{font-weight:900;color:var(--n27-white)}

.nsfas27 .nsfas27-cta__meta{
  margin-top:clamp(22px,calc(2.6 * var(--n27-u)),34px);padding-top:clamp(16px,calc(1.8 * var(--n27-u)),24px);
  border-top:1px solid rgba(255,255,255,.22);
  display:flex;flex-wrap:wrap;gap:clamp(14px,calc(2 * var(--n27-u)),32px);
}
.nsfas27 .nsfas27-cta__item{display:flex;align-items:center;gap:10px}
.nsfas27 .nsfas27-cta__ico{
  width:32px;height:32px;border-radius:50%;background:var(--n27-gold);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.nsfas27 .nsfas27-cta__meta dl{margin:0}
.nsfas27 .nsfas27-cta__meta dt{
  margin:0;font-size:10px;font-weight:900;letter-spacing:.13em;
  text-transform:uppercase;color:#FFD9A8;
}
.nsfas27 .nsfas27-cta__meta dd{margin:0;font-size:clamp(14px,calc(1.15 * var(--n27-u)),16px);font-weight:900}
.nsfas27 .nsfas27-cta__meta dd a{color:inherit;text-decoration:none}
.nsfas27 .nsfas27-cta__meta dd a:hover{text-decoration:underline}

/* ==========================================================================
   6. Responsive
   The block reflows on its OWN width (container queries), so it looks right
   whether it sits full-bleed or inside a 740px CMS column on a 1920 screen.
   Browsers without container-query support fall back to viewport media
   queries, in the @supports block at the end — the two never both apply.
   ========================================================================== */
@container nsfas27 (max-width:1180px){
  .nsfas27 .nsfas27-steplist{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container nsfas27 (max-width:1000px){
  .nsfas27 .nsfas27-docs{grid-template-columns:minmax(0,1fr)}
  .nsfas27 .nsfas27-cta__grid{grid-template-columns:minmax(0,1fr);gap:clamp(22px,calc(3 * var(--n27-u)),32px)}
  .nsfas27 .nsfas27-hero__copy{padding-top:0}
  .nsfas27 .nsfas27-hero__grid{grid-template-columns:minmax(0,1fr);gap:clamp(26px,calc(4 * var(--n27-u)),40px)}
  .nsfas27 .nsfas27-hero__media{
    flex-direction:row;align-items:flex-end;justify-content:center;flex-wrap:wrap;
  }
  .nsfas27 .nsfas27-hero,.nsfas27 .nsfas27-apply,.nsfas27 .nsfas27-cta{--n27-phone-h:clamp(300px,42cqi,420px)}
  .nsfas27 .nsfas27-qr{flex:0 1 auto;min-width:fit-content}
}
@container nsfas27 (max-width:760px){
  .nsfas27 .nsfas27-steplist{grid-template-columns:minmax(0,1fr)}
  .nsfas27 .nsfas27-hero__dots{display:none}
  .nsfas27 .nsfas27-hero__media{flex-direction:column;align-items:center}
  .nsfas27 .nsfas27-qr{display:none}        /* a phone cannot scan its own screen */
  .nsfas27 .nsfas27-hero,.nsfas27 .nsfas27-apply,.nsfas27 .nsfas27-cta{--n27-phone-h:clamp(280px,64cqi,380px)}
  .nsfas27 .nsfas27-countdown__tile{flex:1 1 0}
  .nsfas27 .nsfas27-btn{width:100%}
  .nsfas27 .nsfas27-stores{gap:12px}
  .nsfas27 .nsfas27-hero,.nsfas27 .nsfas27-apply,.nsfas27 .nsfas27-cta{--n27-badge-h:52px}
  .nsfas27 .nsfas27-stores__label{flex:1 0 100%}
  .nsfas27 .nsfas27-cta__meta{gap:14px;flex-direction:column;align-items:flex-start}
}
@container nsfas27 (max-width:480px){
  .nsfas27 .nsfas27-hero,.nsfas27 .nsfas27-apply,.nsfas27 .nsfas27-cta{--n27-gutter:18px}
  .nsfas27 .nsfas27-countdown__tile{padding-inline:3px}
  .nsfas27 .nsfas27-hero,.nsfas27 .nsfas27-apply,.nsfas27 .nsfas27-cta{--n27-badge-h:46px}
  .nsfas27 .nsfas27-hero__title{font-size:clamp(27px,8.6cqi,36px)}
}

/* ---- fallback for browsers without container queries (pre-2023) ---------- */
@supports not (container-type:inline-size){
  @media (max-width:1180px){
    .nsfas27 .nsfas27-steplist{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (max-width:1000px){
    .nsfas27 .nsfas27-docs{grid-template-columns:minmax(0,1fr)}
    .nsfas27 .nsfas27-cta__grid{grid-template-columns:minmax(0,1fr);gap:clamp(22px,calc(3 * var(--n27-u)),32px)}
    .nsfas27 .nsfas27-hero__copy{padding-top:0}
    .nsfas27 .nsfas27-hero__grid{grid-template-columns:minmax(0,1fr);gap:clamp(26px,calc(4 * var(--n27-u)),40px)}
    .nsfas27 .nsfas27-hero__media{
      flex-direction:row;align-items:flex-end;justify-content:center;flex-wrap:wrap;
    }
    .nsfas27 .nsfas27-hero,.nsfas27 .nsfas27-apply,.nsfas27 .nsfas27-cta{--n27-phone-h:clamp(300px,calc(42 * var(--n27-u)),420px)}
    .nsfas27 .nsfas27-qr{flex:0 1 auto;min-width:fit-content}
  }
  @media (max-width:760px){
    .nsfas27 .nsfas27-steplist{grid-template-columns:minmax(0,1fr)}
    .nsfas27 .nsfas27-hero__dots{display:none}
    .nsfas27 .nsfas27-hero__media{flex-direction:column;align-items:center}
    .nsfas27 .nsfas27-qr{display:none}
    .nsfas27 .nsfas27-hero,.nsfas27 .nsfas27-apply,.nsfas27 .nsfas27-cta{--n27-phone-h:clamp(280px,calc(64 * var(--n27-u)),380px)}
    .nsfas27 .nsfas27-countdown__tile{flex:1 1 0}
    .nsfas27 .nsfas27-btn{width:100%}
    .nsfas27 .nsfas27-stores{gap:12px}
    .nsfas27 .nsfas27-hero,.nsfas27 .nsfas27-apply,.nsfas27 .nsfas27-cta{--n27-badge-h:52px}
    .nsfas27 .nsfas27-stores__label{flex:1 0 100%}
    .nsfas27 .nsfas27-cta__meta{gap:14px;flex-direction:column;align-items:flex-start}
  }
  @media (max-width:480px){
    .nsfas27 .nsfas27-hero,.nsfas27 .nsfas27-apply,.nsfas27 .nsfas27-cta{--n27-gutter:18px}
    .nsfas27 .nsfas27-countdown__tile{padding-inline:3px}
    .nsfas27 .nsfas27-hero,.nsfas27 .nsfas27-apply,.nsfas27 .nsfas27-cta{--n27-badge-h:46px}
    .nsfas27 .nsfas27-hero__title{font-size:clamp(27px,calc(8.6 * var(--n27-u)),36px)}
  }
}

/* scoped: the old global rule would have killed animation on the whole site */
@media (prefers-reduced-motion:reduce){
  .nsfas27 *{transition:none !important;animation:none !important}
}

/* ==========================================================================
   7. Armour (optional)

   Everything above is enough for a well-behaved theme. Some older CMS themes
   ship !important content rules — `.page .content p{font-size:11px!important}`,
   `.content a{color:#c00!important}` and so on. A normal declaration can never
   outrank those, whatever its specificity, so this layer re-asserts only the
   properties that would visibly break the brand if a host forced them.

   It touches nothing outside .nsfas27. If www.nsfas.org.za does not use
   !important in its content styles, this whole section can be deleted with
   no visual change.
   NOTE ON THE TRIPLED CLASS: `.nsfas27.nsfas27.nsfas27` is the same element,
   written three times only to raise specificity to 0,4,0 — above the
   `.page .content p{...!important}` shape that themes use. It changes nothing
   about the markup; the block still needs just one class="nsfas27" wrapper.
   ==========================================================================*/
.nsfas27.nsfas27.nsfas27,
.nsfas27.nsfas27.nsfas27 .nsfas27-hero__title,
.nsfas27.nsfas27.nsfas27 .nsfas27-h2,
.nsfas27.nsfas27.nsfas27 .nsfas27-step__title,
.nsfas27.nsfas27.nsfas27 .nsfas27-docs__label,
.nsfas27.nsfas27.nsfas27 .nsfas27-btn{font-family:var(--n27-font) !important}

.nsfas27.nsfas27.nsfas27 .nsfas27-hero__title,
.nsfas27.nsfas27.nsfas27 .nsfas27-h2,
.nsfas27.nsfas27.nsfas27 .nsfas27-step__title,
.nsfas27.nsfas27.nsfas27 .nsfas27-docs__item b,
.nsfas27.nsfas27.nsfas27 .nsfas27-docs__tip b{color:var(--n27-ink) !important}

/* headings: themes very often force a size on h1–h4 */
.nsfas27.nsfas27.nsfas27 .nsfas27-hero__title{font-size:clamp(32px,calc(4.4 * var(--n27-u)),63px) !important;line-height:.97 !important}
.nsfas27.nsfas27.nsfas27 .nsfas27-h2{font-size:clamp(28px,calc(3.4 * var(--n27-u)),48px) !important;line-height:1 !important}
.nsfas27.nsfas27.nsfas27 .nsfas27-step__title{font-size:clamp(16px,calc(1.42 * var(--n27-u)),21px) !important}
.nsfas27.nsfas27.nsfas27 .nsfas27-docs__label{font-size:clamp(10px,calc(.88 * var(--n27-u)),11.5px) !important;color:var(--n27-rust) !important}

.nsfas27.nsfas27.nsfas27 .nsfas27-eyebrow{font-size:clamp(10.5px,calc(.92 * var(--n27-u)),12px) !important;color:var(--n27-ink-eyebrow) !important}
.nsfas27.nsfas27.nsfas27 .nsfas27-hero__lede{font-size:clamp(15px,calc(1.35 * var(--n27-u)),20px) !important;color:var(--n27-ink-body) !important}
.nsfas27.nsfas27.nsfas27 .nsfas27-apply__intro p{font-size:clamp(15px,calc(1.25 * var(--n27-u)),18px) !important;color:var(--n27-ink-body) !important}
.nsfas27.nsfas27.nsfas27 .nsfas27-step__text{font-size:clamp(13.5px,calc(1.12 * var(--n27-u)),16px) !important;color:var(--n27-ink-body) !important}
.nsfas27.nsfas27.nsfas27 .nsfas27-docs__note{font-size:clamp(12.5px,calc(1.02 * var(--n27-u)),14.5px) !important;color:var(--n27-ink-body) !important}
.nsfas27.nsfas27.nsfas27 .nsfas27-docs__tip{font-size:clamp(12px,calc(1 * var(--n27-u)),14px) !important;color:var(--n27-ink-body) !important}
.nsfas27.nsfas27.nsfas27 .nsfas27-docs__item{font-size:clamp(13px,calc(1.08 * var(--n27-u)),15.5px) !important}
.nsfas27.nsfas27.nsfas27 .nsfas27-safety p{font-size:clamp(12.5px,calc(1.05 * var(--n27-u)),15px) !important;color:var(--n27-white) !important}
.nsfas27.nsfas27.nsfas27 .nsfas27-cta__lede{font-size:clamp(14.5px,calc(1.25 * var(--n27-u)),18px) !important;color:#FFE7CC !important}
.nsfas27.nsfas27.nsfas27 .nsfas27-cta .nsfas27-h2{color:var(--n27-white) !important}
.nsfas27.nsfas27.nsfas27 .nsfas27-cta .nsfas27-eyebrow{color:#FFD9A8 !important}
.nsfas27.nsfas27.nsfas27 .nsfas27-countdown__fallback{color:var(--n27-ink) !important}

/* links and buttons: themes love to force colour and underlines on these */
.nsfas27.nsfas27.nsfas27 .nsfas27-btn{color:var(--n27-white) !important;text-decoration:none !important}
.nsfas27.nsfas27.nsfas27 .nsfas27-btn--gold,
.nsfas27.nsfas27.nsfas27 .nsfas27-btn--gold:hover{color:var(--n27-ink) !important}
.nsfas27.nsfas27.nsfas27 .nsfas27-stores a,
.nsfas27.nsfas27.nsfas27 .nsfas27-cta__meta dd a{text-decoration:none !important}
.nsfas27.nsfas27.nsfas27 .nsfas27-cta__meta dd,
.nsfas27.nsfas27.nsfas27 .nsfas27-cta__meta dd a{color:var(--n27-white) !important}
.nsfas27.nsfas27.nsfas27 .nsfas27-cta__meta dt{color:#FFD9A8 !important}

/* structure that must not be reflowed by the host */
.nsfas27.nsfas27.nsfas27 .nsfas27-hero,
.nsfas27.nsfas27.nsfas27 .nsfas27-apply,
.nsfas27.nsfas27.nsfas27 .nsfas27-cta{padding-inline:0 !important;border:0 !important;margin:0 !important}
.nsfas27.nsfas27.nsfas27 .nsfas27-steplist,
.nsfas27.nsfas27.nsfas27 .nsfas27-docs__list{list-style:none !important;padding-left:0 !important}
.nsfas27.nsfas27.nsfas27 .nsfas27-step,
.nsfas27.nsfas27.nsfas27 .nsfas27-docs__item{list-style:none !important;margin-inline:0 !important}
/* a theme's `li{display:list-item!important}` would collapse these flex rows */
.nsfas27.nsfas27.nsfas27 .nsfas27-docs__item{display:flex !important}
.nsfas27.nsfas27.nsfas27 .nsfas27-step{display:block !important}
.nsfas27.nsfas27.nsfas27 .nsfas27-steplist{display:grid !important}
.nsfas27.nsfas27.nsfas27 .nsfas27-docs__list{display:flex !important;flex-direction:column !important}
.nsfas27.nsfas27.nsfas27 img,
.nsfas27.nsfas27.nsfas27 svg{border:0 !important;filter:none !important}
.nsfas27.nsfas27.nsfas27 .nsfas27-hero__phone{filter:drop-shadow(0 22px 36px rgba(84,38,5,.38)) !important}
.nsfas27.nsfas27.nsfas27 .nsfas27-qr__item img{
  width:180px !important;height:180px !important;max-width:none !important;
  object-fit:fill !important;border-radius:6px !important;
}
.nsfas27.nsfas27.nsfas27 .nsfas27-stores img{height:var(--n27-badge-h) !important;width:auto !important;max-width:none !important}
.nsfas27.nsfas27.nsfas27 .nsfas27-hero__phone{height:var(--n27-phone-h) !important;width:auto !important;max-width:100% !important}
.nsfas27.nsfas27.nsfas27 .nsfas27-step__media{aspect-ratio:3/2 !important;overflow:hidden !important}
.nsfas27.nsfas27.nsfas27 .nsfas27-step__media img{
  width:100% !important;height:100% !important;max-width:none !important;
  object-fit:cover !important;border-radius:0 !important;
}
.nsfas27.nsfas27.nsfas27 .nsfas27-hero__title{text-transform:none !important}   /* keeps "myNSFAS" cased */
.nsfas27.nsfas27.nsfas27 .nsfas27-brand{text-transform:none !important}