/* ====================================================================
   STEP by PGC — ECAT / FUNGAT / Long FUNGAT
   Early Regular Session 2027 campaign landing page

   Contents
     1.  Design tokens            11. Learning modes
     2.  Base + reset             12. Features
     3.  Utilities                13. Scholarships
     4.  Buttons                  14. Lead capture
     5.  Header                   15. Enrol
     6.  Hero                     16. Footer
     7.  Shared section styles    17. Mobile action bar
     8.  About the exam           18. Scroll reveal
     9.  Course structure         19. Responsive
     10. Track record             20. Reduced motion
                                  21. Host-level rules

   Conventions
     - EVERYTHING IS SCOPED. This page is embedded inside a live
       WordPress site, so nothing here may reach the host page.
       Two rules, no exceptions:
         a) Every class is prefixed  s-27-
         b) Every selector sits under the root wrapper .s-27
            (the <div class="s-27"> in index.html).
       That includes bare element selectors. The only rules allowed
       to touch the host document live in section 21.
     - Style elements through classes, not tags. The page landmarks
       carry their own: .s-27-section and .s-27-footer. Never write
       `section {}` or `.s-27 section {}` — use `.s-27-section {}`.
       The only tag-level rules left are the UA resets in section 2.
     - The design tokens are defined on .s-27, NOT on :root, for the
       same reason: names like --line, --page and --r are generic
       enough to collide with a theme's own tokens. Scoped to the
       wrapper they override the theme inside this page and nowhere
       else.
     - All colour, spacing and type values come from the custom
       properties in section 1. Do not hard-code hex values or px
       spacing; add a token instead.
     - A var() reference to a property that does not exist silently
       voids the whole declaration, with no console error. If a rule
       appears to do nothing, check the token name first.
     - --yellow is the brand gold and is used for fills, rules and
       icons. It fails WCAG AA as text, so text uses --gold-t
       (small) and --gold-lg (display). Keep that separation.
   ==================================================================== */

/* ---------- 1. design tokens + root wrapper ---------- */
.s-27{
  --navy:#232F58;--navy-d:#1B2544;--navy-x:#131A31;--navy-m:#5A6489;--navy-t:#A9B2CC;
  --navy-05:#EDEFF6;--navy-02:#F8F9FC;
  --yellow:#FCBA17;--yellow-d:#C08600;--yellow-l:#FFEFC7;--yellow-02:#FFFBF0;
  --page:#FFFFFF;--soft:#F7F6F2;--line:#E6E4DE;--muted:#666C7E;
  --gold-t:#946600;--gold-lg:#A87200;
  --f:"Galano Grotesque","Poppins",system-ui,sans-serif;
  --mega:clamp(2.4rem,4.4vw,3.5rem);--big:clamp(2.6rem,5.6vw,4.4rem);
  --disp:clamp(1.85rem,3.2vw,2.6rem);--h1:clamp(1.55rem,2.5vw,2rem);
  --h2:clamp(1.3rem,2vw,1.6rem);--h3:1.12rem;
  --lg:1.0625rem;--base:1rem;--md:.9375rem;--sm:.875rem;--xs:.75rem;
  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.25rem;--s6:1.5rem;--s8:2rem;
  --s10:2.5rem;--s12:3rem;--s16:4rem;--s20:5rem;--s24:6rem;
  --R:32px;--r:18px;--rs:12px;--pill:999px;--wrap:1240px;
  /* Height of the fixed mobile action bar. .s-27-bar sizes itself from
     its own content, so this is a measured value, not a source of
     truth — it exists so the wrapper can reserve matching clearance at
     the bottom of the page. Re-measure if the bar's padding or button
     size changes. */
  --bar:76px;
  --sh:0 2px 6px rgba(35,47,88,.05),0 18px 44px rgba(35,47,88,.08);

  /* base typography — these were on body{} before the page was scoped */
  font-family:var(--f);color:var(--navy);background:var(--page);
  font-size:var(--base);line-height:1.65;-webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}

/* ---------- 2. base + reset (scoped) ----------
   Every element selector below is wrapped in :where(), which
   contributes no specificity of its own. Each rule therefore scores
   (0,1,0) — the weight of .s-27 alone — instead of (0,1,1).

   That detail is load-bearing. Written plainly as `.s-27 p{margin:0}`
   the reset scores (0,1,1) and silently outranks every single-class
   component rule, so `.s-27-hlead{margin-top:var(--s5)}` (0,1,0) stops
   applying and the page loses its vertical rhythm. At (0,1,0) the two
   tie, source order decides, and the component rule — always further
   down this file — wins, exactly as it did before namespacing.

   (0,1,0) also still outranks a host theme's bare `p{}` at (0,0,1),
   which is the reason for scoping in the first place.

   These six are UA resets, which is the one job a tag selector still
   does here. Everything else is styled through a class — the page
   landmarks included (.s-27-section, .s-27-footer). If you do need to
   add a reset, put it inside :where() too.                          */
.s-27,.s-27 *,.s-27 *::before,.s-27 *::after{box-sizing:border-box}
.s-27 :where(img){max-width:100%;display:block}
.s-27 :where(a){color:inherit}
.s-27 :where(h1,h2,h3,h4){margin:0 !important;line-height:1.1 !important;letter-spacing:-.02em}
.s-27 :where(p){margin:0 !important}
.s-27 :where(ul){margin:0 !important;padding:0 !important;list-style:none !important}
.s-27 :where(:focus-visible){outline:3px solid var(--yellow-d);outline-offset:2px;border-radius:4px}

/* ---------- 3. utilities ---------- */
.s-27-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s5)}
.s-27-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.s-27-skip{position:absolute;left:var(--s4);top:-100px;z-index:100;background:var(--navy);
  color:#fff;padding:.75rem 1.25rem;border-radius:0 0 var(--rs) var(--rs);
  text-decoration:none;font-weight:700;font-size:var(--md)}
.s-27-skip:focus{top:0}

/* ---------- 4. buttons ---------- */
.s-27-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-family:inherit;font-weight:700;font-size:var(--md);text-decoration:none;
  padding:.72rem 1.35rem;border-radius:var(--pill) !important;border:2px solid transparent;
  transition:transform .15s,background .15s,color .15s;cursor:pointer}
.s-27-btn:active{transform:translateY(1px)}
.s-27-btn-y{background:var(--yellow) !important; color:var(--navy) !important}
.s-27-btn-y:hover{background:var(--gold-t) !important;color:#fff !important}
.s-27-btn-n{background:var(--navy);color:#fff}
.s-27-btn-n:hover{background:var(--navy-d)}
.s-27-btn-o{border-color:var(--navy);color:var(--navy)}
.s-27-btn-o:hover{background:var(--navy);color:#fff}
.s-27-btn-lg{padding:.95rem 1.9rem;font-size:var(--lg)}

/* ---------- 5. header ---------- */
.s-27 header.s-27-site{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:box-shadow .2s,border-color .2s;
  border-bottom:1px solid transparent}
.s-27 header.s-27-site.s-27-up{border-bottom-color:var(--line);box-shadow:0 6px 22px rgba(35,47,88,.07)}
.s-27 header.s-27-site .s-27-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--s5);height:72px;
  display:flex;align-items:center;gap:var(--s5)}
.s-27-brandlock{display:flex;align-items:center;gap:var(--s3);text-decoration:none;flex:1;
  min-width:0;min-height:44px}
.s-27-brandlock img{height:36px;width:auto}
.s-27-endo{font-size:.56rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);padding-left:var(--s3);border-left:1px solid var(--line);line-height:1.35}
.s-27-endo b{display:block;color:var(--navy);font-weight:700}
.s-27-hcall{display:flex;align-items:center;gap:var(--s2);text-decoration:none;font-weight:700;
  font-size:var(--md);white-space:nowrap;min-height:44px;padding:0 var(--s2)}
.s-27-hcall svg{width:16px;height:16px;fill:var(--gold-t);flex:none}

/* ---------- 6. hero ---------- */
.s-27-hero{background:var(--soft)}
.s-27-hgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s16);
  align-items:center;padding:var(--s20) 0}
.s-27-eyebrow{display:inline-block;font-size:var(--sm);font-weight:700;
  padding-bottom:var(--s2);border-bottom:3px solid var(--yellow);margin-bottom:var(--s6) !important}
.s-27 h1.s-27-hh{font-size:var(--big);font-weight:800;letter-spacing:-.035em;line-height:.98;
  text-transform:uppercase}
.s-27 h1.s-27-hh em{font-style:normal;color:var(--gold-lg);display:block}
.s-27-hlead{max-width:44ch;margin-top:var(--s5);color:var(--muted);font-size:var(--lg)}
.s-27-hcta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5);margin-top:var(--s8)}
.s-27-tlink{display:inline-flex;align-items:center;min-height:44px;font-weight:700;
  font-size:var(--md);color:var(--navy);text-decoration:none;
  box-shadow:inset 0 -2px 0 var(--yellow)}
.s-27-tlink:hover{color:var(--gold-t)}
.s-27-hmeta{display:flex;flex-wrap:wrap;gap:var(--s10);margin-top:var(--s10) !important;
  padding-top:var(--s5) !important;border-top:1px solid var(--line)}
.s-27-hmeta b{display:block;font-size:var(--md);font-weight:700}
.s-27-hmeta span{display:block;font-size:var(--sm);color:var(--muted)}
.s-27-hshot img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  object-position:60% center;border-radius:var(--R)}

/* ---------- 7. shared section styles ---------- */
.s-27-section{padding:var(--s20) 0}
.s-27-sec-soft{background:var(--soft)}
.s-27-sec-navy{background:var(--navy);color:#fff}
.s-27-sec-navy .s-27-lead{color:var(--navy-t)}
.s-27-shead{max-width:68ch;margin-bottom:var(--s10)}
.s-27-shead h2{font-size:var(--disp);font-weight:800;letter-spacing:-.03em}
.s-27-lead{color:var(--muted);margin-top:var(--s4) !important;font-size:var(--lg)}
.s-27-kicker{font-size:var(--sm);font-weight:700;color:var(--gold-t);margin-bottom:var(--s3) !important;
  display:flex;align-items:center;gap:var(--s2)}
.s-27-kicker:before{content:"";width:22px;height:3px;background:var(--yellow);border-radius:2px}
.s-27-sec-navy .s-27-kicker{color:var(--yellow)}
.s-27-prose{max-width:70ch;color:var(--muted);font-size:var(--lg)}
.s-27-prose b{color:var(--navy);font-weight:600}

/* ---------- 8. about the exam ---------- */
.s-27-abgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s16);align-items:start}
.s-27-ab-h{font-size:var(--disp) !important;font-weight:800 !important;letter-spacing:-.03em}
.s-27-abgrid .s-27-prose{margin-top:var(--s5) !important}
.s-27-spec{margin:0}
.s-27-spec>div{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s6);
  padding:var(--s4) 0;border-top:1px solid var(--line)}
.s-27-spec>div:last-child{border-bottom:1px solid var(--line)}
.s-27-spec dt{font-size:var(--sm);color:var(--muted);white-space:nowrap}
.s-27-spec dd{margin:0;font-size:var(--md);font-weight:600;line-height:1.5}
.s-27-spec dd em{font-style:normal;color:var(--gold-t)}

/* the stake */
.s-27-stake{margin-top:var(--s16);padding-top:var(--s10);border-top:2px solid var(--navy);
  display:grid;grid-template-columns:minmax(0,auto) 1fr;gap:var(--s12) var(--s16);
  align-items:start}
.s-27-stake-n b{display:block;font-size:clamp(4.2rem,8.5vw,7rem);font-weight:800;
  letter-spacing:-.055em;line-height:.82;font-variant-numeric:lining-nums}
.s-27-stake-n .s-27-rule{display:block;height:4px;width:64px;background:var(--yellow);
  margin:var(--s4) 0 var(--s3)}
.s-27-stake-n span{display:block;font-size:var(--md);color:var(--muted)}
.s-27-stake-say{font-size:var(--disp);font-weight:600;line-height:1.3;letter-spacing:-.025em;
  max-width:27ch}
.s-27-stake-close{margin-top:var(--s6) !important;font-size:var(--h3);font-weight:700;color:var(--gold-t)}

/* ---------- 9. course structure ---------- */
.s-27-cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:var(--s5)}
.s-27-ccard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:var(--s6)}
.s-27-ccard .s-27-n{font-size:2.6rem;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--navy)}
.s-27-ccard .s-27-n small{font-size:var(--h3);font-weight:700;color:var(--yellow-d);letter-spacing:0}
.s-27-ccard h3{margin:var(--s3) 0 var(--s2) !important;font-size:var(--h3);font-weight:700; text-transform: inherit; color: var(--navy);}
.s-27-ccard p{color:var(--muted);font-size:var(--md)}
.s-27-ccard.s-27-wide .s-27-n{font-size:1.5rem;letter-spacing:-.02em}
.s-27-note{display:flex;align-items:flex-start;gap:var(--s3);margin-top:var(--s6) !important;
  background:var(--yellow-02);border:1px solid var(--yellow-l);border-radius:var(--rs);
  padding:var(--s4) var(--s5);font-size:var(--md);font-weight:500}
.s-27-note:before{content:"";flex:none;width:8px;height:8px;border-radius:50%;
  background:var(--yellow-d);margin-top:.55rem}

/* ---------- 10. track record ---------- */
.s-27-rgroup h3{font-size:var(--h3);font-weight:700;display:flex;align-items:center;
  gap:var(--s3);margin-bottom:var(--s5) !important; text-transform: inherit; color: inherit;}
.s-27-rgroup h3 span{background:rgba(255,255,255,.12);border-radius:var(--pill);
  padding:.1rem .6rem;font-size:var(--xs);color:var(--yellow)}
.s-27-rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(316px,1fr));gap:var(--s4)}
.s-27-rgrid.s-27-solo{grid-template-columns:minmax(0,392px)}
.s-27-rcard{display:flex;align-items:center;gap:var(--s4);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:var(--s4) var(--s5)}
.s-27-av{flex:none;width:44px;height:44px;border-radius:50%;background:var(--yellow);
  color:var(--navy);display:grid;place-items:center;font-weight:800;font-size:var(--sm)}
.s-27-rcard .s-27-b{flex:1;min-width:0}
.s-27-rcard .s-27-b b{display:block;font-weight:700;line-height:1.25}
.s-27-rcard .s-27-b span{display:block;font-size:var(--sm);color:var(--navy-t);line-height:1.3}
.s-27-marks{flex:none;font-weight:800;font-size:var(--h3);color:var(--yellow);white-space:nowrap}
.s-27-marks small{font-size:var(--xs);font-weight:600;color:var(--navy-t)}
.s-27-rsep{margin-top:var(--s10)}

/* ---------- 11. learning modes ---------- */
.s-27-tgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6)}
.s-27-tcard{background:#fff;border:1px solid var(--line);border-radius:var(--R);overflow:hidden;
  display:flex;flex-direction:column}
.s-27-tcard .s-27-ph{aspect-ratio:16/10;overflow:hidden;background:var(--navy-05)}
.s-27-tcard .s-27-ph img{width:100%;height:100%;object-fit:cover}
.s-27-tbody{padding:var(--s6);flex:1;display:flex;flex-direction:column}
.s-27-tbody h3{font-size:var(--h1);font-weight:800;letter-spacing:-.02em;color: var(--navy);text-transform: inherit;}
.s-27-tbody>p{color:var(--muted);margin-top:var(--s3) !important;font-size:var(--md)}
.s-27-tlist{margin-top:var(--s5) !important;display:grid;gap:var(--s2)}
.s-27-tlist li{position:relative;padding-left:var(--s6);font-size:var(--md)}
.s-27-tlist li:before{content:"";position:absolute;left:0;top:.62em;width:12px;height:2px;
  background:var(--yellow-d);border-radius:2px}
.s-27-tfoot{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line)}

/* ---------- 12. features ---------- */
.s-27-fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s6) var(--s8)}
.s-27-fitem{border-top:2px solid var(--navy-05);padding-top:var(--s4)}
.s-27-fitem h3{font-size:var(--h3);font-weight:700;margin-bottom:var(--s2) !important;color: var(--navy);text-transform: inherit;}
.s-27-fitem p{color:var(--muted);font-size:var(--md)}
.s-27-fitem h3 em{font-style:normal;color:var(--gold-t)}

/* ---------- 13. scholarships ---------- */
.s-27-scgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s16);align-items:center}
.s-27-sch-h{font-size:var(--disp) !important;font-weight:800 !important;letter-spacing:-.03em}
.s-27-scpanel{background:var(--soft);border:1px solid var(--line);border-radius:var(--R);
  padding:var(--s8);box-shadow:var(--sh)}
.s-27-scrows li{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) 0;
  border-bottom:1px solid var(--line)}
.s-27-scrows li:first-child{padding-top:0}
.s-27-scrows li:last-child{border-bottom:0}
.s-27-scn{flex:none;width:32px;height:32px;border-radius:50%;background:var(--yellow);
  display:grid;place-items:center}
.s-27-scn svg{width:15px;height:15px;fill:none;stroke:var(--navy);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.s-27-scrows b{font-size:var(--h3);font-weight:700}
.s-27-scfoot{margin-top:var(--s6)}
.s-27-scfoot p{margin-top:var(--s4) !important;color:var(--muted);font-size:var(--md)}
.s-27-scfoot p a{color:var(--gold-t);font-weight:700;text-decoration:none}
.s-27-scfoot p a:hover{text-decoration:underline}

/* ---------- 14. lead capture ---------- */
.s-27-leadcap{margin-top:var(--s10);background:var(--navy);color:#fff;border-radius:var(--R);
  padding:var(--s10);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:var(--s10);align-items:center}
.s-27-leadcap>*{min-width:0}
.s-27-leadcap h3{font-size:var(--h1);font-weight:800;letter-spacing:-.02em;
  color: inherit;
  text-transform: inherit;
  margin: inherit;
}
.s-27-leadcap>div>p{color:var(--navy-t);margin-top:var(--s3) !important;font-size:var(--md)}
.s-27-lc-fields p {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s3)}
.s-27-lc-fields input{width:100%;min-width:0;height:52px;padding:0 var(--s4);font-family:inherit;font-size:16px;
  color:var(--navy);background:#fff;border:2px solid transparent;border-radius:var(--rs)}
.s-27-lc-fields input::placeholder{color:var(--muted)}
.s-27-lc-fields input:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.s-27-lc-fields input.s-27-bad{border-color:#E0483B}
.s-27-lc-fields .s-27-btn{grid-column:1/-1;min-height:52px}
.s-27-lc-msg{grid-column:1/-1;margin-top:var(--s3);font-size:var(--md);min-height:1.5em}
.s-27-lc-msg.s-27-ok{color:var(--yellow)}
.s-27-lc-msg.s-27-err{color:#FFB3AC}

/* ---------- 15. enrol ---------- */
.s-27-egrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6)}
.s-27-ecard{border:1px solid var(--line);border-radius:var(--R);padding:var(--s8);background:#fff}
.s-27-ecard h3{font-size:var(--h1);font-weight:800;letter-spacing:-.02em;
  color: inherit;
  text-transform: inherit;
  margin: inherit;
}
.s-27-ecard p{color:var(--muted);margin-top:var(--s3); margin-bottom: inherit;}
.s-27-ecard .s-27-btn{margin-top:var(--s6)}
.s-27-cgrid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--s6);margin-top:var(--s10)}
.s-27-cbox b{display:block;font-size:var(--md);font-weight:700;margin-bottom:var(--s1)}
.s-27-cbox p{color:var(--muted);font-size:var(--md);margin-top:var(--s1)}
.s-27-cbox a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);
  font-size:var(--md);text-decoration:none}
.s-27-cbox a:hover{color:var(--gold-t)}

/* ---------- 16. footer ---------- */
.s-27-footer{background:var(--navy-x);color:#fff;padding:var(--s12) 0 var(--s8)}
.s-27-frow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s16);
  align-items:start}
.s-27-frow img{height:40px;width:auto}
.s-27-footer .s-27-end{font-size:var(--xs);letter-spacing:.09em;text-transform:uppercase;
  color:var(--navy-t);margin-top:var(--s3)}
.s-27-footer .s-27-fc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s6);font-size:var(--md)}
.s-27-footer .s-27-fc a{display:inline-flex;align-items:center;min-height:44px;color:var(--yellow);
  text-decoration:none;font-weight:600}
.s-27-footer .s-27-fc b{display:block;color:var(--navy-t);font-weight:500;font-size:var(--sm)}
.s-27-fbot{margin-top:var(--s10);padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.12);
  font-size:var(--sm);color:var(--navy-t);display:flex;flex-wrap:wrap;gap:var(--s4);
  justify-content:space-between}

/* ---------- 17. mobile action bar ---------- */
.s-27-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:var(--s3);
  padding:var(--s3) var(--s4);background:rgba(255,255,255,.94);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--line)}
.s-27-bar .s-27-btn{flex:1}

/* ---------- 18. scroll reveal ---------- */
/* .s-27-js is put on <html> by the inline script in index.html. */
.s-27-js .s-27-rv{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.s-27-js .s-27-rv.s-27-in{opacity:1;transform:none}

/* ---------- 19. responsive ---------- */
@media(max-width:960px){
  .s-27-hgrid{grid-template-columns:1fr;gap:var(--s8);padding:var(--s10) 0 var(--s16)}
  .s-27-hshot{order:-1}
  .s-27-hshot img{aspect-ratio:3/2;object-position:58% 38%;border-radius:var(--r)}
  .s-27-hmeta{gap:var(--s6);margin-top:var(--s8) !important}
  .s-27-tgrid,.s-27-egrid{grid-template-columns:1fr}
  .s-27-abgrid{grid-template-columns:1fr;gap:var(--s8)}
  .s-27-stake{grid-template-columns:1fr;gap:var(--s6);margin-top:var(--s12);
    padding-top:var(--s8)}
  .s-27-stake-say{max-width:none}
  .s-27-stake-say br {display: none;}
  .s-27-scgrid{grid-template-columns:1fr;gap:var(--s8)}
  .s-27-frow{grid-template-columns:minmax(0,1fr);gap:var(--s8)}
  .s-27-footer .s-27-fc{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .s-27-leadcap{grid-template-columns:minmax(0,1fr);gap:var(--s6);padding:var(--s6)}
  .s-27-lc-fields p {grid-template-columns:minmax(0,1fr)}
  .s-27-scpanel{padding:var(--s6)}
  .s-27-section{padding:var(--s16) 0}
  .s-27-endo{display:none}
  .s-27 header.s-27-site .s-27-in{height:64px}
  .s-27-hcall span{display:none}
  .s-27-bar{display:flex}
  .s-27-lc-msg {min-height: inherit;}
  .s-27-lc-msg:empty {line-height: 0;margin-top: 0;}
  /* Clearance for the fixed bar, on the wrapper rather than on body so
     it cannot follow the stylesheet onto any other page. */
  .s-27{padding-bottom:var(--bar)}
}
@media(max-width:520px){
  .s-27-btn{padding:.68rem 1.1rem}
  .s-27-ecard{padding:var(--s6)}
  /* Stack the spec list label over its value. The auto/1fr split needs
     more width than a phone has: the nowrap label reserves about 130px
     of roughly 335px of content box, so every value wraps three or four
     times against a ragged left edge. Stacked, each value gets the full
     width. nowrap is dropped with it — it exists only to stop the label
     wrapping inside the narrow first column, and at full width it just
     risks overflow on a 320px screen. */
  .s-27-spec>div{grid-template-columns:1fr}
  .s-27-spec dt{white-space:normal}
}

/* ---------- 20. reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .s-27-js .s-27-rv{opacity:1;transform:none;transition:none}
  .s-27,.s-27 *{scroll-behavior:auto!important}
}

/* ====================================================================
   21. HOST-LEVEL RULES — the only rule here that touches the host page

   body{margin:0}
     Only needed when index.html is opened standalone; without it the
     browser default margin frames the page. A WordPress theme already
     resets this, so DELETE this rule when embedding.

   The clearance for the fixed mobile action bar used to live here as
   body{padding-bottom:76px}. It is now .s-27{padding-bottom:var(--bar)}
   in section 19, so it belongs to this page and cannot appear on
   another one if the stylesheet is ever enqueued site-wide.

   That padding sits inside .s-27, so it is painted in --page rather
   than the footer's navy — but it is exactly the strip the fixed bar
   covers, so it is not visible. If --bar is ever set lower than the
   bar's real height, the shortfall shows as a pale sliver above the
   bar; re-measure rather than padding the footer instead.
   ==================================================================== */
body{margin:0}