/* ===================================================================
   UNCLAIMED — liquid glass.

   Dark, cinematic, near-invisible panels whose edges are drawn by a
   masked gradient stroke rather than a border. The canvas is a soft warm
   slate rather than pure black; sections butt against each other and the
   ambient gradient field does the separating.

   The class API is unchanged from the previous light theme on purpose —
   4,300 generated pages use these names, so restyling here restyles the
   whole site without touching the generator.

   Rules that matter, in order:
     - fill is ~1% white. Past 0.02 it reads as milky 2016 glassmorphism.
     - no `border` anywhere. The edge is a ::before ring, bright at top
       and bottom, gone at the sides — light catching the lip of a pane.
     - Comic Sans carries the identity, headings and body alike.
     - motion is entry-only and never bounces.
   =================================================================== */

/* Comic Neue is loaded alongside Comic Sans MS because Comic Sans ships with
   Windows and macOS but not with Linux or Android — without a webfont, a
   third of visitors would silently fall back to a system sans and see a
   different site from everyone else. Comic Neue is the same shapes, drawn
   properly, so the two are near-indistinguishable at body size. */
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,400;1,700&display=swap');

:root {
  --lg-fill: rgba(255, 255, 255, 0.72);
  --lg-blur: 4px;
  --lg-blur-strong: 50px;
  --lg-stroke: 1.4px;

  --font-heading: 'Comic Sans MS', 'Comic Neue', 'Chalkboard SE', cursive;
  --font-body: 'Comic Sans MS', 'Comic Neue', 'Chalkboard SE', cursive;

  --ink:   #12303a;
  --ink-2: rgba(18, 48, 58, 0.82);
  --ink-3: rgba(18, 48, 58, 0.68);
  --ink-4: rgba(18, 48, 58, 0.54);
  --line:   rgba(18, 48, 58, 0.13);
  --line-2: rgba(18, 48, 58, 0.19);

  /* Turquoise through blue to green, kept pale so text carries the contrast
     and the colour is atmosphere rather than decoration. */
  --paper:   #eef7f7;
  --cream:   #f6fbfa;
  --paper-2: #ffffff;
  --teal:    #0f6f76;
  --teal-2:  #14868d;
  --blue:    #1f5fa8;
  --green:   #1f7a52;
  --terracotta: #a8442a;
  --sage: #1f7a52;
  --gold: #715c0d;

  --shell: 1180px;
  --r-card: 1.25rem;
  --r-media: 1.5rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ambient field. Glass over flat black is invisible — it needs something
   behind it. Two slow, very dark colour washes give the panels something
   to refract without ever reading as a "gradient background". */
body::before {
  content: '';
  position: fixed;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(52rem 52rem at 10% -10%, rgba(45, 190, 190, 0.30), transparent 62%),
    radial-gradient(46rem 46rem at 92% 2%, rgba(80, 170, 235, 0.24), transparent 64%),
    radial-gradient(58rem 58rem at 46% 106%, rgba(60, 185, 145, 0.24), transparent 62%),
    linear-gradient(165deg, #f2fbfa 0%, #eef7f7 48%, #e7f2f4 100%);
  animation: drift 34s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2%, 2%, 0) scale(1.08); }
}

/* Fine grain stops the large dark areas from banding on cheap panels. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ */
/* Liquid glass                                                        */
/* ------------------------------------------------------------------ */

.liquid-glass, .card, .callout, .pill, .badge, .tag, .btn, .stat, .masthead__inner, .flag-chip {
  position: relative;
  border: none;
  background: var(--lg-fill);
  backdrop-filter: blur(var(--lg-blur));
  -webkit-backdrop-filter: blur(var(--lg-blur));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(29, 36, 48, 0.05);
}

.liquid-glass::before, .card::before, .callout::before, .pill::before,
.badge::before, .tag::before, .btn::before, .stat::before,
.masthead__inner::before, .flag-chip::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--lg-stroke);
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255,255,255,.45) 0%, rgba(29, 36, 48, 0.14) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(29, 36, 48, 0.14) 80%, rgba(255,255,255,.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.liquid-glass-strong {
  backdrop-filter: blur(var(--lg-blur-strong));
  -webkit-backdrop-filter: blur(var(--lg-blur-strong));
}

/* ------------------------------------------------------------------ */
/* Type                                                                */
/* ------------------------------------------------------------------ */

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.02;
  margin: 0 0 .6rem;
  color: var(--ink);
}
h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); letter-spacing: -.035em; line-height: .95; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); letter-spacing: -.028em; }
h3 { font-size: 1.3rem; letter-spacing: -.018em; }
h4 { font-size: .82rem; font-family: var(--font-body); font-weight: 500;
     text-transform: uppercase; letter-spacing: .18em; color: var(--ink-4); }

/* The signature move: one clause upright, one italic at reduced opacity. */
.serif-italic, em.display { font-style: italic; color: var(--ink-3); }

p { margin: 0 0 1rem; color: var(--ink-2); }
.lede { font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: var(--ink-2); line-height: 1.5; }
.small { font-size: .92rem; color: var(--ink-3); line-height: 1.6; }
.tiny  { font-size: .8rem;  color: var(--ink-4); line-height: 1.6; }

a { color: var(--teal); text-decoration: none; transition: color .2s ease, opacity .2s ease; }
a:hover { opacity: .72; }
.link-underline { text-decoration: underline; text-underline-offset: 3px;
                  text-decoration-color: rgba(29,36,48,.35); }
.link-underline:hover { text-decoration-color: rgba(29,36,48,.85); }

:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; border-radius: 4px; }

/* ------------------------------------------------------------------ */
/* Layout                                                              */
/* ------------------------------------------------------------------ */

.shell { width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; }
/* A reading column. Used by /methodology/, /privacy/ and every blog post —
   and never defined, so all three rendered flush to the left edge of the
   viewport with lines running the full width of a desktop screen. */
.shell-narrow { width: min(100% - 2.5rem, 72ch); margin-inline: auto; }
.shell-narrow p, .shell-narrow li { max-width: 68ch; }
.section { padding: clamp(4rem, 9vw, 8rem) 0; }
.section-tight { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
.section-rule { border-top: 1px solid var(--line); }

.grid { display: grid; gap: 1.1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* A genuine two-up. .grid-2 is auto-fit at 280px, which becomes four columns
   on a wide screen — right for cards, wrong for a paragraph, which turns into
   a 200px-wide column of two-word lines. */
.grid-2x { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.row { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ------------------------------------------------------------------ */
/* Components                                                          */
/* ------------------------------------------------------------------ */

.card {
  border-radius: var(--r-card);
  padding: 1.4rem;
  overflow: hidden;
  transition: background .3s ease, transform .3s ease;
}
.card:hover { background: #fff; }
.card-link { display: block; }
.card-link:hover { transform: translateY(-2px); opacity: 1; }
.card-flat { background: transparent; box-shadow: none; }
.card-flat::before { display: none; }

.callout { border-radius: var(--r-card); padding: 1.2rem 1.4rem; }
.callout p:last-child { margin-bottom: 0; }
.callout--sage::before {
  background: linear-gradient(180deg, rgba(127,209,174,.6) 0%, rgba(127,209,174,.18) 22%,
    transparent 42%, transparent 58%, rgba(127,209,174,.18) 78%, rgba(127,209,174,.6) 100%);
}

.pill, .badge, .tag {
  display: inline-flex; align-items: center; gap: .4rem;
  border-radius: 9999px; padding: .3rem .8rem;
  font-size: .78rem; font-weight: 400; color: var(--ink-2);
  letter-spacing: .01em; white-space: nowrap;
}
.pill-accent, .badge-verified { color: var(--sage); }
.badge-auto { color: var(--ink-4); }
.eyebrow {
  display: inline-block; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .2em; color: var(--ink-4); margin-bottom: .7rem;
}
.eyebrow-accent { color: var(--terracotta); }

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 9999px; padding: .72rem 1.4rem;
  font-family: var(--font-body); font-size: .95rem; font-weight: 400;
  color: var(--ink); cursor: pointer; transition: background .2s ease, transform .2s ease;
}
.btn:hover { background: #fff; transform: scale(1.02); opacity: 1; }
.btn-sm { padding: .48rem 1rem; font-size: .87rem; }
.btn-primary { background: var(--teal); color: #fff; box-shadow: none; }
.btn-primary::before {
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.4));
}
.btn-primary:hover { background: var(--teal-2); }
.btn-ghost { background: transparent; }

.stat { border-radius: var(--r-card); padding: 1.1rem 1.2rem; }
.stat__n { font-family: var(--font-heading); font-size: 2.4rem; line-height: 1; color: var(--ink); display: block; }
.stat__l { font-size: .8rem; color: var(--ink-4); text-transform: uppercase; letter-spacing: .14em; }
.figure-sm { font-family: var(--font-heading); font-size: 2rem; line-height: 1.05; color: var(--ink); margin: .3rem 0 .5rem; }

.flag-chip { display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px; padding: .3rem .8rem .3rem .4rem; }
.flag-chip__flag { font-size: 1.05rem; }

/* Programme rows. Deliberately not cards — a list of 200 wants density. */
.list-rows { display: flex; flex-direction: column; }
.list-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .95rem .2rem;
  border-bottom: 1px solid var(--line);
  transition: background .2s ease, padding-left .2s ease;
}
.list-row:hover { background: #fff; padding-left: .7rem; }
.list-row__name { font-size: 1.02rem; color: var(--ink); }
.list-row__meta { font-size: .82rem; color: var(--ink-4); margin-top: .15rem; }
.list-row__right { text-align: right; flex-shrink: 0; }
.list-row__amount { font-family: var(--font-heading); font-size: 1.25rem; color: var(--ink); }

/* ------------------------------------------------------------------ */
/* Chrome                                                              */
/* ------------------------------------------------------------------ */

.masthead { position: sticky; top: 0; z-index: 60; padding: .9rem 0; }
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-radius: 9999px; padding: .5rem .5rem .5rem 1.2rem;
  backdrop-filter: blur(var(--lg-blur-strong));
  -webkit-backdrop-filter: blur(var(--lg-blur-strong));
  width: min(100% - 2.5rem, var(--shell)); margin-inline: auto;
}
.wordmark { display: inline-flex; align-items: center; gap: .55rem;
            font-family: var(--font-heading); font-size: 1.3rem; letter-spacing: -.02em; color: var(--ink); }
.wordmark__seal { width: 1.35rem; height: 1.35rem; opacity: .9; }
.nav { display: flex; align-items: center; gap: .35rem; }
.nav--links { gap: 1.3rem; font-size: .92rem; color: var(--ink-3); }
.nav--links a { color: var(--ink-3); }
.nav--links a:hover { color: var(--ink); opacity: 1; }
@media (max-width: 820px) { .nav--links { display: none; } }

.disclaimer-bar {
  background: rgba(255,255,255,.75);
  border-block: 1px solid var(--line);
  padding: .5rem 0; text-align: center; font-size: .8rem; color: var(--ink-3);
}

footer.site { padding: 4rem 0 3rem; margin-top: 5rem; border-top: 1px solid var(--line); }
footer.site ul { list-style: none; padding: 0; margin: .6rem 0 0; }
footer.site li { margin-bottom: .4rem; font-size: .9rem; }
footer.site a { color: var(--ink-3); }
footer.site a:hover { color: var(--ink); opacity: 1; }

/* ------------------------------------------------------------------ */
/* Language switcher                                                   */
/* ------------------------------------------------------------------ */

.langbar { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.langbar a {
  border-radius: 9999px; padding: .25rem .7rem;
  font-size: .8rem; color: var(--ink-4);
  transition: color .2s ease, background .2s ease;
}
.langbar a:hover { color: var(--ink); background: #fff; opacity: 1; }
.langbar a[aria-current="true"] { color: var(--ink); background: #fff; }

.lang-select {
  appearance: none; border: none; cursor: pointer;
  background: #fff; color: var(--ink);
  border-radius: 9999px; padding: .4rem 2rem .4rem .9rem;
  font-family: var(--font-body); font-size: .85rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center;
}
.lang-select option { background: #fff; color: var(--ink); }

/* ------------------------------------------------------------------ */
/* Deadline status                                                     */
/* ------------------------------------------------------------------ */

.status { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem;
          border-radius: 9999px; padding: .26rem .7rem; white-space: nowrap; }
.status::after { content: ''; width: 6px; height: 6px; border-radius: 50%; order: -1; }
.status--closing { color: #8c3413; background: rgba(180,73,31,.12); }
.status--closing::after { background: var(--terracotta); animation: pulse 2s ease-in-out infinite; }
.status--open    { color: var(--sage); background: rgba(46,125,91,.12); }
.status--open::after { background: var(--sage); }
.status--soon    { color: #7a5a05; background: rgba(227,178,60,.16); }
.status--soon::after { background: var(--gold); }
.status--later   { color: var(--ink-3); background: rgba(29,36,48,.06); }
.status--later::after { background: var(--ink-4); }
.status--stalled { color: var(--ink-4); background: rgba(29,36,48,.05); }
.status--stalled::after { background: var(--ink-4); }
.status--unknown { color: var(--ink-4); background: rgba(29,36,48,.04); }
.status--unknown::after { background: var(--ink-4); }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }

/* ------------------------------------------------------------------ */
/* Motion — entry only, staggered, never on scroll-up                  */
/* ------------------------------------------------------------------ */

.reveal { opacity: 0; filter: blur(10px); transform: translateY(20px);
          transition: opacity .8s ease-out, filter .8s ease-out, transform .8s ease-out; }
.reveal.in { opacity: 1; filter: blur(0); transform: none; }

.blur-word { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(14px);
             transition: opacity .7s ease-out, filter .7s ease-out, transform .7s ease-out; }
.blur-word.in { opacity: 1; filter: blur(0); transform: none; }

/* How-it-works: a line that draws itself as the steps arrive. */
.flow { position: relative; display: grid; gap: 1.1rem; }
.flow::before {
  content: ''; position: absolute; left: 1.35rem; top: 1.6rem; bottom: 1.6rem;
  width: 1px; background: linear-gradient(180deg, transparent, var(--line-2) 12%, var(--line-2) 88%, transparent);
  transform: scaleY(0); transform-origin: top; transition: transform 1.4s ease-out .2s;
}
.flow.in::before { transform: scaleY(1); }
.flow__step { display: flex; gap: 1.1rem; align-items: flex-start; }
.flow__dot {
  flex: 0 0 auto; width: 2.7rem; height: 2.7rem; border-radius: 9999px;
  display: grid; place-items: center; font-family: var(--font-heading); font-size: 1.05rem;
  background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); position: relative; z-index: 1;
}
.flow__step.in .flow__dot { box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }

/* Counting figure for the hero. */
.tally { font-family: var(--font-heading); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ */
/* Audience switch — individual vs company                             */
/*                                                                     */
/* Radio inputs and sibling selectors, not a click handler. Both panels */
/* are real HTML, so the page works with scripting off, both halves are */
/* indexed, and no price ever flashes wrong while a script boots.       */
/* ------------------------------------------------------------------ */

.audience__radio { position: absolute; opacity: 0; pointer-events: none; }

.audience__switch {
  display: inline-flex; gap: .25rem; margin-top: 2.4rem; padding: .28rem;
  border-radius: 9999px; position: relative; isolation: isolate;
  background: rgba(255, 255, 255, 0.6);
}
/* Same masked gradient ring as every other surface — never a border. */
.audience__switch::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, rgba(15,111,118,.26), rgba(15,111,118,.08) 42%, rgba(15,111,118,.18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

.audience__tab {
  padding: .62rem 1.35rem; border-radius: 9999px; cursor: pointer;
  font-size: .92rem; letter-spacing: .01em; color: var(--ink-4);
  transition: color .3s ease, background .3s ease;
  white-space: nowrap;
}
.audience__tab:hover { color: var(--ink); }

/* The selected tab reads as the active surface.

   Matched through `~ *` as well as `~`, because the switch now lives inside
   the hero block rather than as a bare sibling of the radios. The earlier
   sibling-only selector silently stopped matching the moment the switch was
   nested, which looks exactly like "the toggle does nothing". */
#aud-me:checked  ~ .audience__switch label[for="aud-me"],
#aud-ent:checked ~ .audience__switch label[for="aud-ent"],
#aud-biz:checked ~ .audience__switch label[for="aud-biz"],
#aud-me:checked  ~ * .audience__switch label[for="aud-me"],
#aud-ent:checked ~ * .audience__switch label[for="aud-ent"],
#aud-biz:checked ~ * .audience__switch label[for="aud-biz"] {
  background: var(--teal); color: #fff;
}

/* Keyboard focus has to land somewhere visible, since the input itself is
   off-screen — without this the switch is unusable without a mouse. */
#aud-me:focus-visible  ~ .audience__switch label[for="aud-me"],
#aud-ent:focus-visible ~ .audience__switch label[for="aud-ent"],
#aud-biz:focus-visible ~ .audience__switch label[for="aud-biz"],
#aud-me:focus-visible  ~ * .audience__switch label[for="aud-me"],
#aud-ent:focus-visible ~ * .audience__switch label[for="aud-ent"],
#aud-biz:focus-visible ~ * .audience__switch label[for="aud-biz"] {
  outline: 2px solid rgba(29,36,48,.6); outline-offset: 3px;
}

/* The hero placement: centred under the lede, and the thing you notice next
   after the headline rather than a tab strip further down the page. */
.audience__switch--hero { margin: 1.8rem auto 0; }

.audience__panel { display: none; }
#aud-me:checked  ~ .audience__panel--me,
#aud-biz:checked ~ .audience__panel--biz,
#aud-ent:checked ~ .audience__panel--ent { display: block; }

@media (max-width: 560px) {
  .audience__switch { display: flex; width: 100%; }
  .audience__tab { flex: 1; text-align: center; padding: .62rem .5rem; font-size: .84rem; }
}

/* Printing a page whose alternative half is hidden loses half the pricing. */
@media print {
  .audience__panel { display: block !important; }
  .audience__switch { display: none; }
}

/* ------------------------------------------------------------------ */
/* Form fields on the marketing site                                   */
/*                                                                     */
/* .field is defined in the app stylesheet, which the site does not     */
/* load — so the sign-in input rendered as a browser-default white box  */
/* on a black page. Restated here rather than importing the app CSS,    */
/* which would drag the whole app layer onto every marketing page.     */
/* ------------------------------------------------------------------ */

/* Scoped to real form controls: the wizard also uses .field on the DIV that
   wraps a label and its input, and styling that as an input box produced a
   box-inside-a-box with the label sitting inside the field. */
input.field, select.field, textarea.field {
  width: 100%; min-height: 50px; border-radius: .9rem; padding: .8rem 1rem;
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: #fff;
  border: 0; box-shadow: inset 0 0 0 1px var(--line-2);
  transition: box-shadow .25s ease, background .25s ease;
  -webkit-appearance: none; appearance: none;
}

/* The wrapper form: a label above its control. */
.field:not(input):not(select):not(textarea) {
  display: block; margin-bottom: 1.4rem;
}
.field > label {
  display: block; margin-bottom: .4rem;
  font-size: .82rem; letter-spacing: .04em; color: var(--ink-3);
}
.field > input, .field > select, .field > textarea {
  width: 100%; min-height: 50px; border-radius: .9rem; padding: .8rem 1rem;
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: #fff;
  border: 0; box-shadow: inset 0 0 0 1px var(--line-2);
  -webkit-appearance: none; appearance: none;
}
.field > input::placeholder { color: rgba(29,36,48,.38); }
.field > input:focus, .field > select:focus {
  outline: none; background: #fff;
  box-shadow: inset 0 0 0 2px rgba(29,36,48,.5);
}
input.field::placeholder, textarea.field::placeholder { color: rgba(29, 36, 48, 0.38); }
input.field:focus, select.field:focus, textarea.field:focus {
  outline: none;
  background: #fff;
  box-shadow: inset 0 0 0 2px rgba(29, 36, 48, 0.5);
}
/* Chrome paints a blue-white block over autofilled inputs; the inset
   shadow is the only way to repaint it without !important on colour. */
input.field:-webkit-autofill,
input.field:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: inset 0 0 0 1px var(--line-2), inset 0 0 0 100px #fff;
  caret-color: var(--ink);
}
select.field option, .field select option { background: #fff; }

/* An honest failure state, styled like the rest of the system. */
.notice {
  border-radius: .9rem; padding: .85rem 1rem; margin-top: 1rem;
  font-size: .92rem; line-height: 1.55;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line-2);
}

@media print {
  body::before, body::after { display: none; }
  body { background: #fff; color: #111; }
  .masthead, footer.site, .btn { display: none; }
}

/* ==================================================================== */
/* The eligibility check                                                */
/*                                                                      */
/* These classes had no rules at all. The wizard was rendering with      */
/* default browser buttons on a dark page — which is why the country     */
/* picker read as "Australia83 programmes" with the label and the count  */
/* jammed together, and why filling the form felt like filling a form    */
/* from 1998. Everything here is layout and spacing in the existing      */
/* glass language; no new colours, no new components.                    */
/* ==================================================================== */

.wizard { max-width: 62rem; margin-inline: auto; }

.step {
  font-size: .82rem; letter-spacing: .04em; color: var(--ink-4);
  margin-bottom: 1.6rem;
}

/* .q is the question HEADING in this wizard, not a wrapper. */
h1.q, h2.q { margin: 0 0 .45rem; }
div.q { margin-bottom: 2.4rem; }
.q-why, .hint { color: var(--ink-3); margin: 0 0 1.6rem; max-width: 62ch; }

/* --- options ------------------------------------------------------- */

.opts {
  display: grid; gap: .75rem; margin: 0 0 1.6rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
/* A short list of two- or three-word answers should not be forced into a
   15rem grid — it leaves a shelf of empty space beside each one. */
.opts--tight { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }

.opt {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: .7rem;
  width: 100%; min-height: 60px;
  padding: .85rem 1.05rem;
  border: 0; border-radius: .95rem;
  background: rgba(255, 255, 255, 0.75);
  color: var(--ink); font-family: var(--font-body); font-size: 1rem;
  text-align: left; cursor: pointer;
  transition: background .22s ease, transform .22s ease;
}
.opt::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, rgba(15,111,118,.22), rgba(15,111,118,.07) 45%, rgba(15,111,118,.18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.opt:hover { background: #fff; }
.opt:focus-visible { outline: 2px solid rgba(29,36,48,.6); outline-offset: 3px; }
.opt[aria-pressed="true"] { background: var(--teal); color: #fff; }
.opt[aria-pressed="true"]::before { opacity: 0; }

/* The label and its count were running together as one string. */
.opt > span { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.opt__sub {
  display: block; font-size: .8rem; line-height: 1.35;
  color: var(--ink-4); font-variant-numeric: tabular-nums;
}
.opt[aria-pressed="true"] .opt__sub { color: var(--ink-3); }

/* The two-letter country code, set apart rather than glued to the name. */
.opt__key {
  flex: 0 0 auto; display: grid; place-items: center;
  min-width: 2.1rem; height: 1.55rem; padding: 0 .4rem;
  border-radius: .42rem; font-size: .74rem; letter-spacing: .06em;
  background: rgba(29, 36, 48, 0.08); color: var(--ink-3);
}
.opt[aria-pressed="true"] .opt__key { background: rgba(255,255,255,.18); color: var(--ink-3); }

/* --- inputs and nav ------------------------------------------------ */

.field-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin-bottom: 1.4rem; }

.wizard-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 2.4rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.wizard-nav .row { display: flex; gap: .6rem; align-items: center; }

.progress-rail { display: flex; gap: .35rem; margin-bottom: 2rem; }
.progress-rail i {
  flex: 1; height: 3px; border-radius: 2px; background: rgba(29,36,48,.12);
  transition: background .3s ease;
}
.progress-rail i.done { background: rgba(15,111,118,.45); }
.progress-rail i.current { background: var(--teal); }

/* --- results ------------------------------------------------------- */

.result-hero { margin-bottom: 2.6rem; }
.figure { font-family: var(--font-heading); font-size: clamp(2.6rem, 9vw, 5.5rem);
          line-height: 1.02; margin: .6rem 0 0; }
.figure-unit { color: var(--ink-3); max-width: 46ch; }

.bucket { margin: 2.6rem 0; }
.bucket__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem;
}
.bucket__head h2 { margin: 0; }
.bucket__count { font-size: .85rem; color: var(--ink-4); }
.bucket-list { display: grid; gap: .8rem; }

.prog-card { position: relative; isolation: isolate; border-radius: 1rem; padding: 1.1rem 1.2rem;
             background: rgba(255,255,255,.7); }
.prog-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, rgba(15,111,118,.26), rgba(15,111,118,.08) 45%, rgba(29,36,48,.14));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.prog-card__head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.prog-card__title { margin: 0; font-size: 1.08rem; }
.prog-card__sub, .prog-card__meta { font-size: .84rem; color: var(--ink-4); margin: .25rem 0 0; }
.prog-card__amount { text-align: right; white-space: nowrap; }
.prog-card__value { font-family: var(--font-heading); font-size: 1.35rem; }

.why { margin: .8rem 0 0; padding: .7rem .9rem; border-radius: .7rem; font-size: .87rem;
       background: rgba(29,36,48,.04); color: var(--ink-3); }
.why--fail { color: #8c3413; background: rgba(180,73,31,.09); }
.why--ask  { color: #1f5a41; background: rgba(46,125,91,.1); }
.q-why { margin-top: .5rem; }

.fold { margin-top: 2.6rem; }
.fold > summary { cursor: pointer; color: var(--ink-3); padding: .6rem 0; }

.locked-bucket { margin: 2.6rem 0; padding: 1.4rem; border-radius: 1.1rem;
                 position: relative; isolation: isolate; background: rgba(255,255,255,.72); }
.locked-bucket::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, rgba(15,111,118,.26), rgba(15,111,118,.08) 45%, rgba(29,36,48,.14));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.locked-bucket .btn { margin-right: .5rem; }

.locked__rows { display: grid; gap: .5rem; margin: 1.1rem 0 1.3rem; }
.locked__row { height: 3.4rem; border-radius: .8rem;
  background: linear-gradient(90deg, rgba(29,36,48,.10), rgba(29,36,48,.045) 60%, rgba(29,36,48,.085)); }
.locked__row:nth-child(2) { opacity: .72; }
.locked__row:nth-child(3) { opacity: .48; }
.locked__row:nth-child(4) { opacity: .26; }

@media (max-width: 640px) {
  .opts { grid-template-columns: 1fr; }
  .wizard-nav { flex-direction: column-reverse; align-items: stretch; }
  .wizard-nav .row { justify-content: space-between; }
}

/* The locked amount on a browse row: reads as a value that exists and is
   withheld, rather than as missing data. */
.lock-chip {
  letter-spacing: .18em; color: var(--ink-4);
  font-family: var(--font-body); font-size: .8rem;
}

/* ==================================================================== */
/* Hero: centred, with the rotating orbit behind it                     */
/* ==================================================================== */

.hero-centre { text-align: center; }
/* The headline must sit above the graphic, not inside it. */
.hero-centre .shell > *:not(.orbit) { position: relative; z-index: 1; }
.hero-centre .eyebrow { display: block; }

.orbit {
  position: absolute; inset: 0; margin: auto;
  width: min(52rem, 96vw); height: min(52rem, 96vw);
  top: -8%; z-index: -1; pointer-events: none;
  /* Low enough that the headline is never competing with it. This started at
     .85 and the marks read as foreground objects sitting on the words. */
  opacity: .55;
}
.orbit svg { width: 100%; height: 100%; overflow: visible; }

.orbit__ring {
  fill: none; stroke: url(#orbitStroke); stroke-width: 1.4;
  stroke-dasharray: 3 10; transform-origin: 160px 160px;
}
/* Three speeds, two directions — a single rotating ring reads as a loading
   spinner, which is the last thing a landing page should suggest. */
.orbit__ring--slow { animation: spin 68s linear infinite; }
.orbit__ring--mid  { animation: spin 44s linear infinite reverse; stroke-dasharray: 2 14; }
.orbit__ring--fast { animation: spin 30s linear infinite; stroke-dasharray: 1 9; }

.orbit__marks { transform-origin: 160px 160px; }
.orbit__chip {
  fill: rgba(255,255,255,.34);
  stroke: rgba(15,111,118,.13); stroke-width: 1;
}
.orbit__mark {
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  fill: rgba(15,111,118,.38);
}


@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 720px) { .orbit { opacity: .2; top: -1%; } }

/* ==================================================================== */
/* Sections in boxes, with a slow float                                 */
/* ==================================================================== */

.panel {
  position: relative; isolation: isolate;
  border-radius: 1.5rem; padding: clamp(1.6rem, 3.5vw, 3rem);
  margin: clamp(1.4rem, 3vw, 2.4rem) 0;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
}
.panel::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, rgba(15,111,118,.26), rgba(15,111,118,.07) 45%, rgba(31,95,168,.2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

/* The float is deliberately tiny and slow. Anything faster than ~11s or
   further than ~7px stops reading as "floating" and starts reading as
   "drifting", which makes text harder to track while reading. */
@media (prefers-reduced-motion: no-preference) {
  .panel--float { animation: float 13s ease-in-out infinite; }
  .panel--float:nth-of-type(even) { animation-duration: 16s; animation-delay: -4s; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* ==================================================================== */
/* The four steps                                                       */
/* ==================================================================== */

.steps4 { display: grid; gap: 1rem; margin-top: 1.8rem;
          grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); position: relative; }

.step4 {
  position: relative; isolation: isolate;
  border-radius: 1.15rem; padding: 1.4rem 1.3rem 1.5rem;
  background: rgba(255,255,255,.66);
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.step4::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, rgba(15,111,118,.24), rgba(15,111,118,.06) 45%, rgba(31,122,82,.2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.steps4.in .step4 { opacity: 1; transform: none; }
/* Staggered so the eye is walked 1 → 4 rather than shown four things at once. */
.steps4.in .step4:nth-child(1) { transition-delay: .05s; }
.steps4.in .step4:nth-child(2) { transition-delay: .22s; }
.steps4.in .step4:nth-child(3) { transition-delay: .39s; }
.steps4.in .step4:nth-child(4) { transition-delay: .56s; }

.step4__n {
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem; border-radius: 9999px;
  font-family: var(--font-heading); font-size: 1.15rem;
  color: #fff; background: var(--teal);
  margin-bottom: .9rem;
  transform: scale(.6); opacity: 0;
  transition: transform .55s cubic-bezier(.2,.9,.3,1.2), opacity .45s ease-out;
}
.steps4.in .step4 .step4__n { transform: scale(1); opacity: 1; }
.steps4.in .step4:nth-child(2) .step4__n { transition-delay: .3s; }
.steps4.in .step4:nth-child(3) .step4__n { transition-delay: .47s; }
.steps4.in .step4:nth-child(4) .step4__n { transition-delay: .64s; }

.step4 h3 { margin: 0 0 .35rem; font-size: 1.12rem; }
.step4 p  { margin: 0; font-size: .93rem; color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  .step4, .step4__n { opacity: 1; transform: none; }
}

/* Numbered job rows on /enterprise/ — a grants team buys a way through
   find → apply → manage → report, so the page is arranged that way and the
   number is the thing the eye lands on first. */
.jobrow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.jobrow__n {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--teal);
  opacity: .35;
}
@media (max-width: 620px) {
  .jobrow { grid-template-columns: 1fr; gap: .4rem; }
  .jobrow__n { font-size: 1.6rem; }
}

/* An inline lock, for the remainder of a list whose first two rows are shown.
   Flatter than .locked-bucket because it sits directly under real rows and
   should read as the same list continuing, not as a separate advert. */
.locked-bucket--inline {
  margin-top: 0;
  border-top: 0;
  border-radius: 0 0 12px 12px;
  padding-top: .8rem;
}


/* Feature lists on the pricing cards. A tick and a cross rather than two
   bullet lists, because "what you do not get" is the half people scan for and
   an unmarked list buries it. */
.ticks { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.ticks li {
  position: relative; padding-left: 1.5rem; margin-bottom: .45rem;
  font-size: .9rem; line-height: 1.45;
}
.ticks li::before {
  content: '✓'; position: absolute; left: 0; top: -.05em;
  color: var(--green); font-weight: 700;
}
.ticks--no { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.ticks--no li { color: var(--ink-4); }
.ticks--no li::before { content: '×'; color: var(--terracotta); }

/* The recommended card, lifted just enough to be the default read. */
.card--featured { outline: 2px solid rgba(15,111,118,.35); outline-offset: -1px; }