/* Exceed 2026 — shared site layer.
   x- classes: site chrome used on every marketing page (announcement, nav, drawer, buttons, footer, sticky CTA, logo panels).
   body.x26: restyles the legacy support-page template (.hero/.sec/.reassure/.adapt/.steps/...) to the 2026 look. */
:root{
  --x-navy:#0F2A78;--x-navy2:#15308A;--x-deep:#0A1D57;--x-ink:#0B1733;--x-text:#2B3550;--x-muted:#5D6880;
  --x-aqua:#2FD8E6;--x-aqua2:#7FE9F2;--x-aqua-d:#0B7F8A;--x-aqua-bg:#E5F9FB;
  --x-green:#1FAE7A;--x-green-bg:#E3F6EE;--x-amber-bg:#FFF4E0;
  --x-bg:#F5F7FB;--x-line:#E2E7F0;
  --x-r:10px;--x-r-lg:12px;
  --x-sh:0 1px 2px rgba(11,23,51,.05),0 8px 24px rgba(11,23,51,.07);
  --x-sh-lg:0 2px 6px rgba(11,23,51,.06),0 24px 60px rgba(11,23,51,.14);
  --x-wrap:1180px;--x-g:20px;
}

/* ---------- Buttons ---------- */
.x-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border-radius:var(--x-r);font:700 16.5px/1 'Work Sans',system-ui,sans-serif;text-decoration:none;border:0;cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s;white-space:nowrap}
.x-btn svg{width:18px;height:18px;transition:transform .2s}
.x-btn:hover svg{transform:translateX(3px)}
.x-btn-p{background:var(--x-aqua);color:var(--x-deep);box-shadow:0 8px 24px rgba(47,216,230,.35),inset 0 -2px 0 rgba(0,0,0,.08)}
.x-btn-p:hover{background:#4FE3EF;transform:translateY(-1px)}
.x-btn-n{background:var(--x-navy2);color:#fff;box-shadow:0 8px 22px rgba(21,48,138,.22)}
.x-btn-n:hover{background:var(--x-navy);transform:translateY(-1px)}
.x-btn-g{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.x-btn-g:hover{box-shadow:inset 0 0 0 1.5px #fff}
.x-btn-o{background:#fff;color:var(--x-navy2);box-shadow:inset 0 0 0 1.5px var(--x-line)}
.x-btn-o:hover{box-shadow:inset 0 0 0 1.5px var(--x-navy2)}
.x-btn-block{width:100%}

/* ---------- Announcement + nav ---------- */
.x-ann{display:block;background:var(--x-deep);color:#DDE6FF;font:500 13.5px/1.35 'Work Sans',system-ui,sans-serif;text-align:center;padding:9px 16px;text-decoration:none}
.x-ann b{color:var(--x-aqua2);font-weight:700}
.x-ann u{text-underline-offset:3px;white-space:nowrap}
.x-ann-l{display:none}
.x-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--x-aqua);margin-right:8px;vertical-align:1px;animation:x-pulse 2s infinite}
@keyframes x-pulse{0%{box-shadow:0 0 0 0 rgba(47,216,230,.7)}70%{box-shadow:0 0 0 8px rgba(47,216,230,0)}100%{box-shadow:0 0 0 0 rgba(47,216,230,0)}}
@media(min-width:600px){.x-ann-l{display:inline}}
.x-nav{position:sticky;top:0;z-index:150;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid transparent;font-family:'Work Sans',system-ui,sans-serif;transition:border-color .2s,box-shadow .2s}
.x-nav.scrolled{border-color:var(--x-line);box-shadow:0 4px 20px rgba(11,23,51,.06)}
.x-nav-in{max-width:var(--x-wrap);margin:0 auto;padding:0 var(--x-g);display:flex;align-items:center;gap:20px;height:64px}
.x-logo img{height:30px;width:auto;display:block}
.x-menu{display:none!important;gap:28px;margin-left:24px}
.x-l-full{display:none}
.x-menu a,.x-navr .x-lk{font-size:15px;font-weight:500;color:var(--x-text);text-decoration:none}
.x-menu a:hover,.x-navr .x-lk:hover{color:var(--x-navy2)}
.x-navr{margin-left:auto;display:flex;align-items:center;gap:18px}
.x-navr .x-lk{display:none}
.x-navr .x-btn{min-height:42px;padding:0 16px;font-size:14.5px}
@media(min-width:420px){.x-l-full{display:inline}.x-l-short{display:none}}
.x-nav-in>*{min-width:0}.x-logo{flex:none}
.x-burger{width:42px;height:42px;border:0;background:var(--x-bg);border-radius:var(--x-r);display:grid;place-items:center;cursor:pointer;padding:0}
.x-burger span{display:block;width:18px;height:2px;background:var(--x-ink);border-radius:2px;position:relative}
.x-burger span::before,.x-burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--x-ink);border-radius:2px;transition:transform .2s}
.x-burger span::before{top:-6px}.x-burger span::after{top:6px}
.x-burger[aria-expanded=true] span{background:transparent}
.x-burger[aria-expanded=true] span::before{transform:translateY(6px) rotate(45deg)}
.x-burger[aria-expanded=true] span::after{transform:translateY(-6px) rotate(-45deg)}
.x-drawer{display:none;position:fixed;left:0;right:0;top:64px;z-index:149;background:#fff;border-bottom:1px solid var(--x-line);padding:8px var(--x-g) 20px;box-shadow:0 20px 40px rgba(11,23,51,.12);font-family:'Work Sans',system-ui,sans-serif}
.x-drawer.open{display:block;max-height:calc(100vh - 110px);overflow:auto}
.x-drawer a{display:block;padding:14px 4px;font-size:17px;font-weight:600;color:var(--x-ink);text-decoration:none;border-bottom:1px solid var(--x-line)}
.x-drawer a.x-btn{display:flex;margin-top:16px;border:0;color:var(--x-deep)}
@media(min-width:960px){.x-menu{display:flex!important}.x-navr .x-lk{display:inline}.x-burger,.x-drawer{display:none!important}.x-nav-in{height:74px}.x-logo img{height:34px}}

/* ---------- Footer ---------- */
.x-footer{background:var(--x-deep);color:#AFC0E6;padding:56px 0 calc(96px + env(safe-area-inset-bottom));font:14.5px/1.6 'Work Sans',system-ui,sans-serif}
.x-footer-in{max-width:var(--x-wrap);margin:0 auto;padding:0 var(--x-g)}
.x-fcols{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.x-footer h5{color:#fff;font-size:14px;margin:0 0 12px;font-weight:700}
.x-footer a{display:block;color:#AFC0E6;text-decoration:none;padding:4px 0}
.x-footer a:hover{color:#fff}
.x-flegal{display:flex;flex-wrap:wrap;gap:4px 20px;border-top:1px solid rgba(255,255,255,.1);margin-top:36px;padding-top:22px}
.x-fcopy{display:flex;flex-direction:column;gap:16px;margin-top:16px;font-size:13px;color:#8496C8}
.x-fcopy img{height:28px;width:124px;aspect-ratio:1323/300;max-width:none;flex:none;align-self:flex-start;object-fit:contain}
@media(min-width:860px){.x-fcols{grid-template-columns:repeat(5,1fr)}.x-fcopy{flex-direction:row;justify-content:space-between;align-items:center}}
@media(min-width:960px){.x-footer{padding-bottom:40px}}

/* ---------- Sticky mobile CTA ---------- */
.x-sticky{position:fixed;left:0;right:0;bottom:0;z-index:160;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--x-line);padding:10px 14px calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;transform:translateY(110%);transition:transform .3s ease;font-family:'Work Sans',system-ui,sans-serif}
.x-sticky.show{transform:none}
.x-sticky .t{flex:1;font-size:12.5px;line-height:1.3;color:var(--x-muted)}
.x-sticky .t b{display:block;color:var(--x-ink);font-size:14px}
.x-sticky .x-btn{min-height:48px;padding:0 18px;font-size:15px}
@media(min-width:960px){.x-sticky{display:none}}

/* ---------- Logo panels (exam boards, universities) ---------- */
.x-logos{font-family:'Work Sans',system-ui,sans-serif;padding:28px 0}
.x-logos-in{max-width:var(--x-wrap);margin:0 auto;padding:0 var(--x-g);display:grid;gap:14px;align-items:center}
.x-logos-k{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--x-muted);text-align:center;margin:0}
.x-logos-k b{display:block;color:var(--x-ink);font-size:16px;letter-spacing:-.01em;text-transform:none;margin-top:2px}
.dark .x-logos-k,.x-dark .x-logos-k{color:#8FA2D6}.dark .x-logos-k b,.x-dark .x-logos-k b{color:#fff}
.x-logos-row{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--x-line);border:1px solid var(--x-line);border-radius:var(--x-r);overflow:hidden;box-shadow:var(--x-sh);margin:0;padding:0;list-style:none}
.x-logos-row li{grid-column:span 2;background:#fff;display:grid;place-items:center;height:76px;padding:4px 6px}
.x-logos-row:not(.u) li:nth-child(n+4){grid-column:span 3}
.x-logos-row img{height:68px;max-width:100%;width:auto;object-fit:contain}
.x-logos-row.u img{height:60px}
@media(min-width:760px){
  .x-logos{padding:36px 0}
  .x-logos-in{grid-template-columns:220px 1fr;gap:28px}
  .x-logos-k{text-align:left}
  .x-logos-row{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:1fr}
  .x-logos-row li,.x-logos-row:not(.u) li:nth-child(n+4){grid-column:auto;height:88px}
  .x-logos-row img{height:76px}.x-logos-row.u img{height:66px}
}

/* ================= Legacy support-page template, restyled ================= */
body.x26{font-family:'Work Sans',system-ui,sans-serif;color:var(--x-text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.x26 h1,body.x26 h2,body.x26 h3{color:var(--x-ink);font-weight:800;letter-spacing:-.022em}
body.x26 h2{font-size:clamp(27px,6.4vw,44px);line-height:1.12}
body.x26 .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--x-aqua-d)}
body.x26 .eyebrow::before{content:"";width:18px;height:2px;background:currentColor;border-radius:2px}
body.x26 .sec:not(.dark) h2 .acc{color:var(--x-navy2);background:linear-gradient(180deg,transparent 62%,rgba(47,216,230,.35) 62%);padding:0 .06em}
body.x26 .dark .acc,body.x26 .hero .acc{color:var(--x-aqua)}
body.x26 .dark .eyebrow{color:var(--x-aqua2)}
body.x26 .dark h2,body.x26 .dark h3,body.x26 .hero h1,body.x26 .dark b{color:#fff}
body.x26 .hero .trust{overflow:hidden}
body.x26 .hero .trust>div{padding:14px 8px!important;text-align:center}
body.x26 .hero .trust span{font-size:12px}
body.x26 .sub{color:var(--x-muted)}
body.x26 .tint{background:var(--x-bg)}
body.x26 .dark{background:radial-gradient(1100px 480px at 85% -10%,rgba(47,216,230,.16),transparent 60%),linear-gradient(180deg,var(--x-navy2),var(--x-deep))}

/* Hero */
body.x26 .hero{background:radial-gradient(900px 500px at 85% 10%,rgba(47,216,230,.2),transparent 60%),linear-gradient(180deg,var(--x-navy2),var(--x-deep))}
body.x26 .hero h1{color:#fff;font-size:clamp(33px,8.6vw,56px);line-height:1.05;letter-spacing:-.03em}
body.x26 .hero .intro{color:#C3CFF0}
body.x26 .hero .tick svg{background:var(--x-aqua);color:var(--x-deep);border-radius:50%;padding:3px}
body.x26 .hero .photo{border-radius:var(--x-r-lg);box-shadow:0 30px 60px rgba(0,0,0,.3)}
body.x26 .hero .trust{background:#fff;border-radius:var(--x-r);box-shadow:var(--x-sh-lg)}
body.x26 .hero .trust b{color:var(--x-ink)}
body.x26 .hero .trust span{color:var(--x-muted)}
body.x26 .hero .rule{display:none}

/* Buttons (legacy classes) */
body.x26 .btn{border-radius:var(--x-r);font-weight:700;min-height:52px}
body.x26 .btn.p,body.x26 .btn.w{background:var(--x-aqua);color:var(--x-deep);border-color:var(--x-aqua);box-shadow:0 8px 24px rgba(47,216,230,.3)}
body.x26 .btn.p:hover,body.x26 .btn.w:hover{background:#4FE3EF}

/* Cards: squarer, consistent */
body.x26 .reassure>div,body.x26 .adapt>div,body.x26 .commit>div,body.x26 .roles>div,body.x26 .who>div,body.x26 .ctacard{border-radius:var(--x-r)!important;border:1px solid var(--x-line);background:#fff;box-shadow:var(--x-sh)}
body.x26 .reassure>div{padding:24px}
body.x26 .reassure .q{color:var(--x-aqua-d);font-weight:700}
body.x26 .adapt>div{overflow:hidden}
body.x26 .adapt .ph,body.x26 .adapt .ph img{border-radius:0}
body.x26 .split .pic img,body.x26 .who .ph img{border-radius:var(--x-r-lg)}
body.x26 .split .pic .chip{border-radius:var(--x-r);box-shadow:var(--x-sh-lg)}
body.x26 .split .tick svg,body.x26 .tick svg{color:var(--x-aqua-d)}
body.x26 .gs-card{border-radius:var(--x-r-lg)!important;box-shadow:var(--x-sh-lg)!important;border:1px solid var(--x-line)!important;overflow:hidden}
body.x26 .commit i{border-radius:var(--x-r);background:var(--x-aqua-bg);color:var(--x-aqua-d)}
body.x26 .step{border-radius:var(--x-r);overflow:hidden;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
body.x26 .step .pic,body.x26 .step .pic img{border-radius:0}
body.x26 .step .line{padding:20px 22px 24px}
body.x26 .step .n{color:var(--x-aqua)}
body.x26 .step p{color:#BFCBEA}
body.x26 .ctacard{overflow:hidden}
body.x26 .ctacard h3{font-size:clamp(22px,4vw,30px)}

/* FAQ */
body.x26 .faq details{background:#fff;border:1px solid var(--x-line);border-radius:var(--x-r);margin-bottom:10px;overflow:hidden}
body.x26 .faq summary{font-weight:700;color:var(--x-ink)}

/* Hide the legacy chrome once the x- chrome is present */
body.x26 > nav.nav,body.x26 > .drawer,body.x26 > footer:not(.x-footer){display:none!important}

@media(prefers-reduced-motion:reduce){.x-dot{animation:none}}