/* ---- demo: guide view ---- */
.gx-progress{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);height:3px;z-index:1001;pointer-events:none}
.gx-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--purple),#00d4ff)}
.gx-head{background:var(--bg-soft);border-bottom:1px solid #e8e8f2;padding-block:128px 36px}
.gx-crumbs{display:flex;gap:10px;align-items:center;font-size:.86rem;font-weight:600;color:var(--muted);flex-wrap:wrap}
.gx-crumbs a{color:var(--purple);text-decoration:none}.gx-crumbs a:hover{text-decoration:underline}
.gx-head h1{font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.12;letter-spacing:-.025em;color:var(--ink);font-weight:800;margin-top:16px;max-width:22ch;text-wrap:balance}
.gx-sub{font-size:1.15rem;color:var(--slate);margin-top:14px;max-width:62ch;line-height:1.5}
.gx-meta{display:flex;gap:14px;align-items:center;margin-top:18px;color:var(--muted);font-size:.88rem;font-weight:600}
.gx-wrap{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:56px;padding-block:40px 64px;align-items:start}
.gx-article{min-width:0;max-width:740px}
.gx-hero{width:100%;height:auto;aspect-ratio:1200/630;border-radius:18px;display:block;background:var(--navy);box-shadow:0 30px 60px -30px rgba(10,37,64,.35)}
.gx-body{margin-top:36px;color:#1f2d3d;font-size:1.06rem;line-height:1.75}
.gx-body>*+*{margin-top:1.05em}
.gx-body h2{font-size:1.55rem;line-height:1.25;letter-spacing:-.015em;color:var(--ink);font-weight:800;margin-top:2.2em;scroll-margin-top:96px;text-wrap:balance}
.gx-body h3{font-size:1.15rem;color:var(--ink);font-weight:700;margin-top:1.6em}
.gx-body a{color:var(--purple);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.gx-body a:hover{text-decoration-thickness:2px}
.gx-body strong{color:var(--ink)}
.gx-body ul,.gx-body ol{padding-left:1.3em}.gx-body li+li{margin-top:.45em}
.gx-body blockquote{border-left:3px solid #d9dcf5;padding-left:18px;color:var(--slate)}
.gx-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:#f1f2fb;padding:.1em .35em;border-radius:5px}
.gx-body pre{background:var(--navy);color:#e6ebf5;padding:18px 20px;border-radius:12px;overflow-x:auto;font-size:.88rem;line-height:1.55}
.gx-body pre code{background:none;padding:0;color:inherit}
.gx-table{overflow-x:auto;border:1px solid #e6e8f2;border-radius:12px}
.gx-body table{border-collapse:collapse;width:100%;font-size:.93rem;line-height:1.5;font-variant-numeric:tabular-nums}
.gx-body th{background:var(--bg-soft);color:var(--ink);text-align:left;font-weight:700}
.gx-body th,.gx-body td{padding:11px 14px;border-bottom:1px solid #eceef6;vertical-align:top}
.gx-body tr:last-child td{border-bottom:none}
.gx-kt{background:#f3f2ff;border-radius:16px;padding:26px 28px;margin-top:2.4em!important}
.gx-kt h2{margin-top:0!important;font-size:1.25rem}
.gx-kt ul{margin-top:12px}
.gx-faq .faq-a p{padding-bottom:18px;margin:0;font-size:1rem;line-height:1.7}
.gx-faq .faq-item.open .faq-a{max-height:600px}
.gx-src ul{font-size:.9rem;line-height:1.55;color:var(--slate)}
.gx-src a{word-break:break-word}
/* The programme card is the one dark object on a long light page, so it borrows
   the light the homepage's closing band makes with its animated aurora: the same
   violet, purple and cyan sources, over the same navy, painted as static radial
   gradients instead of blurred blobs. The blobs are 40 to 55vw circles behind a
   100px blur, which is the single most expensive thing a phone composites on
   this site; there is one of these cards on every one of 231 guides, so it gets
   the look without the layer. The light sits top-right and the copy sits left,
   so nothing brightens behind the text. */
.gx-cta{margin-top:44px;position:relative;isolation:isolate;overflow:hidden;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;color:#dfe6f3;border-radius:18px;padding:28px 30px;
  background:
    radial-gradient(112% 150% at 96% -30%, rgba(169,96,238,.50), rgba(169,96,238,0) 60%),
    radial-gradient(86% 120% at 78% -6%, rgba(99,91,255,.55), rgba(99,91,255,0) 64%),
    radial-gradient(90% 130% at 0% 118%, rgba(0,212,255,.16), rgba(0,212,255,0) 62%),
    linear-gradient(142deg,#12335a 0%,var(--navy) 46%,#06182b 100%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 26px 60px -34px rgba(6,24,43,.8)}
/* A single lit edge along the top, the way the site's dark bands catch light. */
.gx-cta::before{content:"";position:absolute;left:26px;right:26px;top:0;height:1px;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.42) 38%,rgba(255,255,255,.16) 78%,rgba(255,255,255,0))}
.gx-cta strong{color:#fff}.gx-cta p+p{margin-top:8px!important}.gx-cta p{margin:0;line-height:1.55;max-width:48ch}.gx-cta-k{color:#fff;font-weight:800;font-size:1.15rem;margin-bottom:6px!important}
/* The accent button can land on the lit corner when it sits beside the copy, so
   it carries its own glow to stay a distinct object rather than a purple patch
   on a purple wash. */
.gx-cta .btn-accent{box-shadow:0 14px 34px -16px rgba(99,91,255,.95),0 0 0 1px rgba(255,255,255,.14) inset}
.gx-disc{margin-top:22px;font-size:.84rem;line-height:1.6;color:var(--muted)}
.gx-toc{position:sticky;top:96px;font-size:.88rem;border-left:1px solid #e6e8f2;padding-left:18px}
.gx-toc-h{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.gx-toc ol{list-style:none;padding:0;margin-top:12px;display:grid;gap:9px;max-height:60vh;overflow:auto}
.gx-toc a{color:var(--slate);text-decoration:none;line-height:1.35;display:block}
.gx-toc a:hover,.gx-toc a.on{color:var(--purple)}
.gx-toc a.on{font-weight:700}
.gx-back{display:inline-block;margin-top:22px;color:var(--purple);font-weight:700;text-decoration:none}
.gx-rel-h{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.gx-rel-h h2{font-size:1.7rem;color:var(--ink);font-weight:800;letter-spacing:-.02em}
@media (max-width:1000px){.gx-wrap{grid-template-columns:1fr}.gx-toc{display:none}}
@media (max-width:600px){.gx-head{padding-block:104px 28px}.gx-body{font-size:1rem}.gx-kt{padding:20px}.gx-cta{padding:22px}}
@media (prefers-reduced-motion:reduce){.bpost{transition:none}}
/* Guide pages have no dark hero, so keep the site nav in its solid (scrolled) look from the top. */
.page-guide .nav{background:rgba(255,255,255,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(10,37,64,.08)}
.page-guide .nav .brand-img{filter:invert(1) brightness(.25)}
.page-guide .nav .nav-logo,.page-guide .nav .nav-link{color:var(--navy)}
.page-guide .nav .nav-logo span{color:var(--purple)}
@media (prefers-reduced-motion:reduce){.gx-faq .faq-a,.faq-q::after{transition:none}}
.gx-body table:has(tr > :nth-child(3)){min-width:520px}
.gx-lab{display:none}
/* Stacked comparison tables on phones. guide.js labels each body cell with its
   column heading below three columns wide, then adds .gx-stack; these rules
   turn each row into a card so nothing is hidden past the screen edge. They are
   scoped to .gx-stack, which only exists once those labels are in place, so a
   page whose script never runs keeps the scrolling frame rather than losing the
   headings. The min-width that forces the scroll is undone here, since a card
   has no columns to hold apart. */
@media (max-width:600px){
.gx-table.gx-stack{overflow:visible;border:0;border-radius:0}
.gx-stack table,.gx-body .gx-stack table:has(tr > :nth-child(3)){min-width:0;width:100%;display:block;font-size:1rem}
.gx-stack thead{display:none}
.gx-stack tbody,.gx-stack tr{display:block}
.gx-stack tr{border:1px solid #e6e8f2;border-radius:12px;padding:14px 16px;background:#fff}
.gx-stack tr+tr{margin-top:12px}
.gx-body .gx-stack td{display:block;padding:0;border-bottom:0}
.gx-body .gx-stack td[data-empty]{display:none}
.gx-body .gx-stack td:first-child{font-weight:700;color:var(--ink);font-size:1.05rem;letter-spacing:-.01em;padding-bottom:11px;margin-bottom:11px;border-bottom:1px solid #eceef6}
.gx-stack td+td{margin-top:11px}
.gx-stack td .gx-lab{display:block;font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--slate);margin-bottom:4px}
}