/* ============================================================
   DEYKON — self-hosted typefaces
   Served from /assets/fonts rather than fonts.googleapis.com, so no
   visitor IP address reaches Google and the CSP needs no external
   style or font origin. Latin and latin-ext subsets only: the page is
   British English. Archivo and IBM Plex are both SIL OFL 1.1.
   Regenerate with: node tools/fetch-fonts.mjs
   ============================================================ */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 800;
  font-stretch:100% 125%;
  font-display:swap;
  src:url("/assets/fonts/archivo-400-800-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 800;
  font-stretch:100% 125%;
  font-display:swap;
  src:url("/assets/fonts/archivo-400-800-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/assets/fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("/assets/fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400;
  font-stretch:100%;
  font-display:swap;
  src:url("/assets/fonts/ibm-plex-sans-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400;
  font-stretch:100%;
  font-display:swap;
  src:url("/assets/fonts/ibm-plex-sans-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:500;
  font-stretch:100%;
  font-display:swap;
  src:url("/assets/fonts/ibm-plex-sans-500-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:500;
  font-stretch:100%;
  font-display:swap;
  src:url("/assets/fonts/ibm-plex-sans-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:600;
  font-stretch:100%;
  font-display:swap;
  src:url("/assets/fonts/ibm-plex-sans-600-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:600;
  font-stretch:100%;
  font-display:swap;
  src:url("/assets/fonts/ibm-plex-sans-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   DEYKON — design tokens
   Fixed dark brand surface. The palette does not follow the
   viewer's light/dark preference by design; colour-scheme and an
   explicit body background stop host themes bleeding through.
   ============================================================ */
:root{
  color-scheme: dark;

  --ink:        #06090B;
  --ink-raise:  #0B1013;
  --ink-fill:   #101619;
  --line:       rgba(237,231,220,.13);
  --line-soft:  rgba(237,231,220,.07);

  --text:       #EDE7DC;
  --text-2:     #BBB7AD;
  --text-3:     #9E9B91;

  --signal:     #3FE0C8;
  --signal-ink: #06090B;
  --signal-wash:rgba(63,224,200,.12);
  --signal-line:rgba(63,224,200,.34);

  --approve:    #E8A55C;
  --approve-wash:rgba(232,165,92,.12);

  --danger:     #FF9B8A;

  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ui: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --shell: 1160px;
  --gut: clamp(20px, 5vw, 40px);
  --rhythm: clamp(52px, 6.4vw, 94px);

  --ease: cubic-bezier(.22,.61,.36,1);
}
:root:not([data-theme="light"]){ color-scheme: dark; }
:root[data-theme="dark"]{ color-scheme: dark; }

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--ui);
  font-size:1.0625rem;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,video{ max-width:100%; height:auto; display:block; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  font-stretch:108%;
  line-height:1.04;
  letter-spacing:-.028em;
  margin:0;
  text-wrap:balance;
}
h1{ font-size:clamp(2.3rem,5.2vw,3.95rem); font-weight:800; letter-spacing:-.035em; }
h2{ font-size:clamp(1.85rem,3.7vw,2.95rem); }
h3{ font-size:clamp(1.1rem,1.7vw,1.32rem); font-stretch:104%; letter-spacing:-.018em; line-height:1.2; }
p{ margin:0; }

a{ color:inherit; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--signal);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- layout primitives ---------- */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }
.band{ padding-block:var(--rhythm); position:relative; }
.band--hair{ border-top:1px solid var(--line-soft); }
.measure{ max-width:63ch; }
.measure-tight{ max-width:54ch; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--signal); color:var(--signal-ink);
  padding:12px 18px; font-weight:600; border-radius:0 0 4px 0;
}
.skip:focus{ left:0; }

/* ---------- lineage rail (the page's structural motif) ----------
   Fragments at the top of the document resolve into one continuous,
   checkpointed line as the reader descends. Decorative: aria-hidden. */
.rail{ display:none; }
@media (min-width:1340px) and (prefers-reduced-motion: no-preference){
  .rail{
    display:block; position:fixed; top:0; bottom:0;
    left:calc((100vw - var(--shell))/2 - 46px);
    width:14px; z-index:2; pointer-events:none;
  }
  .rail__track{
    position:absolute; left:6px; top:11vh; bottom:11vh; width:1px;
    background:repeating-linear-gradient(
      to bottom,
      var(--line) 0 6px,
      transparent 6px 15px);
  }
  .rail__fill{
    position:absolute; left:6px; top:11vh; width:1px; height:0;
    background:linear-gradient(to bottom,var(--signal-line),var(--signal));
    transition:height .12s linear;
  }
  .rail__node{
    position:absolute; left:2.5px; width:8px; height:8px;
    border:1px solid var(--line); border-radius:50%;
    background:var(--ink); transform:translateY(-50%);
    transition:border-color .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease);
  }
  .rail__node.is-passed{
    border-color:var(--signal);
    background:var(--signal);
    box-shadow:0 0 0 4px var(--signal-wash);
  }
}

/* ---------- navigation ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(6,9,11,.78);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.nav.is-stuck{ border-bottom-color:var(--line-soft); }
.nav__in{
  display:flex; align-items:center; gap:28px;
  min-height:68px;
}
.wordmark{
  font-family:var(--display); font-weight:800; font-stretch:115%;
  font-size:1.18rem; letter-spacing:.1em; text-decoration:none;
  display:inline-flex; align-items:center; gap:9px; color:var(--text);
}
.wordmark__dot{
  width:7px; height:7px; background:var(--signal); border-radius:50%;
  flex:none; margin-top:1px;
}
.nav__links{ display:none; margin-left:auto; gap:30px; align-items:center; }
.nav__links a{
  text-decoration:none; color:var(--text-2); font-size:.94rem;
  padding:6px 0; transition:color .22s var(--ease);
}
.nav__links a:hover{ color:var(--text); }
.nav__cta{ margin-left:auto; }
@media (min-width:920px){
  .nav__links{ display:flex; }
  .nav__cta{ margin-left:0; }
}

/* ---------- buttons ---------- */
.btn{
  --btn-bg:transparent; --btn-fg:var(--text); --btn-bd:var(--line);
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; min-height:46px; padding:12px 22px;
  font-family:var(--ui); font-size:.97rem; font-weight:500;
  line-height:1.1; text-decoration:none; cursor:pointer;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd); border-radius:3px;
  transition:background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.btn--primary{ --btn-bg:var(--signal); --btn-fg:var(--signal-ink); --btn-bd:var(--signal); font-weight:600; }
.btn--primary:hover{ --btn-bg:#5BEAD5; --btn-bd:#5BEAD5; }
.btn--ghost:hover{ --btn-bd:rgba(237,231,220,.36); }
.btn--lg{ min-height:54px; padding:15px 30px; font-size:1.02rem; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }

/* ---------- hero ---------- */
.hero{ position:relative; padding-block:clamp(52px,8vw,96px) clamp(58px,9vw,108px); overflow:hidden; }
.hero__grid{ display:grid; gap:clamp(40px,5vw,56px); align-items:center; }
@media (min-width:1040px){
  .hero__grid{ grid-template-columns:minmax(0,1.14fr) minmax(0,1fr); gap:52px; }
}
.eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  color:var(--signal); margin:0 0 22px; font-weight:500;
  display:flex; align-items:center; gap:11px;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--signal); flex:none; }
.hero h1{ margin-bottom:24px; }
.hero__sub{ font-size:clamp(1.06rem,1.5vw,1.22rem); color:var(--text-2); max-width:47ch; line-height:1.55; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:13px; margin-top:34px; }
.hero__trust{
  margin-top:30px; padding-top:20px; border-top:1px solid var(--line-soft);
  font-size:.9rem; color:var(--text-3); max-width:44ch;
}
.hero__art{ position:relative; }
.hero__art-video{
  width:100%; height:auto; display:block;
  /* the loop is square; the still it replaced was 1.25:1 */
  aspect-ratio:1 / 1; background:var(--ink);
  /* The artwork's black is a shade lighter than --ink, so the frame reads
     as a box sitting on the page. `screen` makes black transparent
     against the background while leaving the glowing parts untouched,
     which is exactly right for light-on-black artwork. The mask then
     softens the outer edge where the blend alone is not enough. */
  mix-blend-mode:screen;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 11%, #000 89%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 11%, #000 89%, transparent 100%);
  mask-composite:intersect;
}

/* ---------- product proof ----------
   Light product UI on the dark brand surface. The screenshots are
   unretouched crops of real screens; the crop regions are chosen in
   tools/social-card/product-shots.mjs to keep internal paths and
   pre-release naming off a public page. */
.worked{
  list-style:none; margin:0 0 clamp(30px,4vw,46px); padding:0;
  display:grid; gap:16px 26px;
}
@media (min-width:820px){ .worked{ grid-template-columns:repeat(4,1fr); } }
.worked li{
  padding-top:13px; border-top:1px solid var(--line);
  font-size:.94rem; line-height:1.5; color:var(--text-2);
}
.worked li span{
  display:block; margin-bottom:8px;
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.13em; color:var(--signal);
}
.shot{ margin:0 0 clamp(34px,4.5vw,54px); }
.shot img{
  width:100%; height:auto; display:block;
  border:1px solid var(--line); border-radius:4px;
}
/* These crops are ~4:1. Squeezed into a phone they become unreadable
   texture, so below the breakpoint the frame scrolls instead. */
.shot__frame{ max-width:100%; }
@media (max-width:759px){
  .shot__frame{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .shot__frame img{ min-width:760px; }
}
.shot figcaption{ margin-bottom:22px; max-width:70ch; }
.shot figcaption h3{ margin-bottom:10px; }
.shot figcaption p{ color:var(--text-2); font-size:1rem; line-height:1.6; }
.shot__value{ margin-top:12px; font-size:.93rem; color:var(--text-3); }
.shot__value b{ color:var(--signal); font-weight:600; margin-right:9px; }
.shot__note{
  padding:16px 20px; border-left:2px solid var(--line);
  background:var(--ink-raise); color:var(--text-2);
  font-size:.92rem; border-radius:0 3px 3px 0;
}

/* ---------- section headings ---------- */
.sec-head{ margin-bottom:clamp(26px,3.4vw,40px); }
.sec-head h2{ margin-bottom:18px; }
.sec-head p{ color:var(--text-2); }

/* ---------- problem ---------- */
.problem__body{ display:grid; gap:26px; max-width:64ch; }
.problem__body p{ font-size:1.09rem; color:var(--text-2); }
.problem__body p:first-child{ color:var(--text); }
.pull{
  margin-top:44px; padding:26px 0 0; border-top:1px solid var(--line);
  font-family:var(--display); font-stretch:106%; font-weight:600;
  font-size:clamp(1.2rem,2.3vw,1.65rem); letter-spacing:-.02em;
  line-height:1.28; max-width:34ch;
}
.pull b{ color:var(--signal); font-weight:600; }

/* ---------- journey ---------- */
.steps{ display:grid; gap:0; border-top:1px solid var(--line); }
.step{
  display:grid; gap:8px 30px; padding:32px 0;
  border-bottom:1px solid var(--line); position:relative;
}
@media (min-width:840px){
  .step{ grid-template-columns:88px minmax(0,17ch) minmax(0,1fr); align-items:start; gap:36px; padding:38px 0; }
}
.step__num{
  font-family:var(--mono); font-size:.78rem; color:var(--text-3);
  letter-spacing:.06em; padding-top:.42em;
}
.step__name{ color:var(--text); }
.step__name em{
  display:block; font-style:normal; font-family:var(--mono);
  font-size:.7rem; letter-spacing:.11em; color:var(--signal);
  margin-top:9px; font-weight:500;
}
.step__text{ color:var(--text-2); max-width:58ch; }
.step__marker{
  position:absolute; left:-1px; top:38px; width:2px; height:0;
  background:var(--signal); transition:height .6s var(--ease);
}
@media (min-width:840px){
  .step.is-live .step__marker{ height:calc(100% - 76px); }
}
.steps__close{
  margin-top:36px; font-family:var(--display); font-stretch:106%;
  font-weight:600; font-size:clamp(1.1rem,2vw,1.42rem);
  letter-spacing:-.02em; line-height:1.3;
}

/* ---------- control plane diagram ---------- */
.plane{ margin-top:8px; }
.plane__frame{
  border:1px solid var(--line); border-radius:4px;
  background:
    linear-gradient(180deg,var(--ink-raise),var(--ink));
  padding:clamp(18px,3vw,34px);
  overflow:hidden;
}
.plane__frame svg{ width:100%; height:auto; }
.plane__stack{ display:grid; gap:26px; }
.plane__stack h3{
  font-family:var(--mono); font-size:.7rem; font-weight:500; letter-spacing:.13em;
  color:var(--text-3); font-stretch:normal; margin-bottom:12px;
}
.plane__stack ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.plane__stack li{ padding-left:16px; position:relative; font-size:.97rem; }
.plane__stack li::before{
  content:""; position:absolute; left:0; top:.62em; width:6px; height:1px; background:var(--signal);
}
.plane__stack .is-core li::before{ background:var(--text-3); }
.plane__stack .is-core li.is-gate::before{ background:var(--approve); }
.plane__stack .is-exec li::before{ background:var(--signal); opacity:.6; }
@media (max-width:759px){ .plane__svg{ display:none; } }
@media (min-width:760px){ .plane__stack{ display:none; } }
.plane__legend{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:24px;
  font-size:.85rem; color:var(--text-3);
}
.plane__legend span{ display:inline-flex; align-items:center; gap:9px; }
.swatch{ width:9px; height:9px; border-radius:2px; flex:none; }
.swatch--sig{ background:var(--signal); }
.swatch--app{ background:var(--approve); }
.swatch--mut{ background:var(--text-3); }

/* ---------- benefits ---------- */
.benefits{ display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:4px; }
@media (min-width:700px){ .benefits{ grid-template-columns:1fr 1fr; } }
@media (min-width:1040px){ .benefits{ grid-template-columns:repeat(3,1fr); } }
.benefit{ background:var(--ink); padding:clamp(24px,2.6vw,32px); }
.benefit h3{ margin-bottom:12px; }
.benefit p{ color:var(--text-2); font-size:.97rem; }
.benefit__tick{ width:15px; height:15px; margin-bottom:18px; display:block; }

/* ---------- comparison ---------- */
.compare{ width:100%; border-collapse:collapse; text-align:left; margin-top:8px; }
.compare caption{ text-align:left; color:var(--text-3); font-size:.88rem; padding-bottom:14px; }
.compare th,.compare td{
  padding:17px 20px; border-bottom:1px solid var(--line);
  vertical-align:top; font-size:.985rem;
}
.compare th{ font-family:var(--ui); font-weight:600; font-size:.83rem; letter-spacing:.05em; color:var(--text-3); }
.compare thead th{ border-bottom-color:var(--line); padding-block:0 14px; }
.compare th:first-child,.compare td:first-child{ padding-left:0; color:var(--text-2); }
.compare td:last-child{ color:var(--text); }
.compare thead th:last-child{ color:var(--signal); }
.compare tbody tr:last-child th,.compare tbody tr:last-child td{ border-bottom:none; }
.compare__wrap{ overflow-x:auto; }
.compare col.is-deykon{ background:rgba(63,224,200,.035); }
.compare__close{
  margin-top:32px; font-family:var(--display); font-stretch:106%;
  font-weight:600; font-size:clamp(1.1rem,2vw,1.42rem); letter-spacing:-.02em;
}

/* ---------- programme ---------- */
.prog{ display:grid; gap:clamp(36px,4vw,54px); }
@media (min-width:960px){ .prog{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.prog__col h3{ margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.prog__list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.prog__list li{ display:grid; grid-template-columns:16px 1fr; gap:13px; color:var(--text-2); font-size:.99rem; }
.prog__list svg{ margin-top:.42em; }
.prog__cta{ margin-top:32px; }
/* A neutral programme note. It used to be an amber callout, which both
   grabbed attention immediately before the form and spent --approve on
   something that is not an approval or review state. */
.prog__note{
  margin-top:36px; padding:18px 22px; border-left:2px solid var(--line);
  background:var(--ink-raise); color:var(--text-2); font-size:.95rem; border-radius:0 3px 3px 0;
}

/* ---------- registration form ---------- */
/* Not every interested visitor is ready to apply; give them somewhere to go. */
.reg__aside{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--line-soft);
  font-size:.92rem; color:var(--text-3);
}
.reg__aside a{ color:var(--signal); text-decoration:none; border-bottom:1px solid var(--signal-line); }
.reg__aside a:hover{ border-bottom-color:var(--signal); }
.reg{ display:grid; gap:clamp(36px,5vw,64px); align-items:start; }
@media (min-width:1000px){ .reg{ grid-template-columns:minmax(0,.82fr) minmax(0,1fr); gap:70px; } }
.reg__intro p{ color:var(--text-2); margin-top:20px; }
.form{ display:grid; gap:20px; }
.field{ display:grid; gap:7px; }
.field > label{ font-size:.9rem; font-weight:500; color:var(--text); }
.field .opt{ color:var(--text-3); font-weight:400; }
.req{ color:var(--signal); }
.hint{ font-size:.82rem; color:var(--text-3); }
.input,.select,.textarea{
  width:100%; font-family:var(--ui); font-size:1rem; color:var(--text);
  background:var(--ink-raise); border:1px solid var(--line);
  border-radius:3px; padding:12px 14px; min-height:46px;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.input::placeholder,.textarea::placeholder{ color:var(--text-3); }
.input:hover,.select:hover,.textarea:hover{ border-color:rgba(237,231,220,.24); }
.textarea{ resize:vertical; min-height:88px; line-height:1.55; }
.select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23A3A097' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;
}
.select option{ background:var(--ink-raise); color:var(--text); }
.field.is-invalid .input,.field.is-invalid .select,.field.is-invalid .textarea{ border-color:var(--danger); }
.err{ font-size:.84rem; color:var(--danger); display:none; }
.field.is-invalid .err,.err.is-shown{ display:block; }
/* the consent error sits under a checkbox row, not a labelled field,
   so it pulls up to keep the same gap as the others. Kept here rather
   than as a style attribute: CSP has no unsafe-inline for styles. */
#e-consent{ margin-top:-10px; }
.row2{ display:grid; gap:20px; }
@media (min-width:620px){ .row2{ grid-template-columns:1fr 1fr; } }

.disclose{ border:1px solid var(--line); border-radius:3px; background:var(--ink-raise); }
.disclose > summary{
  cursor:pointer; padding:14px 16px; font-size:.93rem; font-weight:500;
  list-style:none; display:flex; align-items:center; gap:11px; min-height:46px;
}
.disclose > summary::-webkit-details-marker{ display:none; }
.disclose > summary::before{
  content:""; width:9px; height:9px; border-right:1.5px solid var(--signal);
  border-bottom:1.5px solid var(--signal); transform:rotate(-45deg); margin-left:3px;
  transition:transform .22s var(--ease);
}
.disclose[open] > summary::before{ transform:rotate(45deg); }
.disclose__body{ padding:4px 16px 18px; display:grid; gap:18px; }

.consent{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; }
.consent input{ width:19px; height:19px; margin:2px 0 0; accent-color:var(--signal); flex:none; }
.consent label{ font-size:.9rem; color:var(--text-2); line-height:1.5; }
.consent a{ color:var(--signal); }
.consent.is-invalid label{ color:var(--danger); }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__foot{ display:grid; gap:14px; }
.status{ font-size:.9rem; color:var(--text-3); }
.status[data-tone="error"]{ color:var(--danger); }

.done{
  border:1px solid var(--signal-line); background:var(--signal-wash);
  border-radius:4px; padding:clamp(26px,3vw,36px);
}
.done h3{ margin-bottom:14px; }
.done p{ color:var(--text-2); }
.done__meta{ margin-top:20px; padding-top:18px; border-top:1px solid var(--signal-line); font-family:var(--mono); font-size:.78rem; color:var(--text-3); }

/* ---------- faq ---------- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; padding:22px 44px 22px 0; position:relative;
  font-family:var(--display); font-stretch:104%; font-weight:600;
  font-size:clamp(1.02rem,1.5vw,1.16rem); letter-spacing:-.015em; line-height:1.3;
  min-height:44px; display:flex; align-items:center;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:6px; top:50%; width:12px; height:12px;
  margin-top:-6px;
  background:
    linear-gradient(var(--text-2),var(--text-2)) center/12px 1.5px no-repeat,
    linear-gradient(var(--text-2),var(--text-2)) center/1.5px 12px no-repeat;
  transition:transform .24s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(90deg); background-size:0 0, 1.5px 12px; }
.faq__a{ padding:0 0 26px; color:var(--text-2); max-width:66ch; }

/* ---------- final cta ---------- */
.final{ border-top:1px solid var(--line); }
.final__in{ display:grid; gap:30px; align-items:end; }
@media (min-width:900px){ .final__in{ grid-template-columns:minmax(0,1fr) auto; gap:56px; } }
.final h2{ max-width:18ch; margin-bottom:20px; }
.final p{ color:var(--text-2); max-width:48ch; }

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--line); padding-block:44px 56px; }
.foot__in{ display:grid; gap:26px; }
@media (min-width:820px){ .foot__in{ grid-template-columns:1fr auto; align-items:start; } }
.foot__desc{ color:var(--text-3); font-size:.92rem; margin-top:16px; max-width:40ch; }
.foot__links{ display:flex; flex-wrap:wrap; gap:24px; }
.foot__links a{ color:var(--text-2); text-decoration:none; font-size:.92rem; }
.foot__links a:hover{ color:var(--text); text-decoration:underline; text-underline-offset:4px; }
.foot__legal{ margin-top:36px; padding-top:22px; border-top:1px solid var(--line-soft); font-size:.84rem; color:var(--text-3); display:flex; flex-wrap:wrap; gap:8px 18px; }
.tag{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em;
  color:var(--text-3); border:1px solid var(--line); border-radius:2px; padding:3px 7px;
}

/* ---------- legal pages (privacy, terms) ----------
   These lived in an inline <style> block on each page, which the CSP
   blocks outright: style-src is 'self' with no unsafe-inline and no
   hash. The pages rendered unstyled in production. Keep them here. */
.legal{ padding-block:clamp(56px,8vw,96px); }
.legal h1{ font-size:clamp(2rem,4.4vw,3.1rem); margin-bottom:28px; }
.legal h2{ font-size:clamp(1.2rem,2.1vw,1.5rem); margin:44px 0 14px; }
.legal p, .legal li{ color:var(--text-2); max-width:68ch; }
/* Companies Act 2006 trading disclosure. Required on the site, not just in
   the legal pages, so it sits in the footer of every page. */
.foot__reg{ margin-top:10px; font-size:.8rem; color:var(--text-3); max-width:70ch; }
/* p{margin:0} is global, so successive paragraphs need their own rhythm */
.legal p + p, .legal p + ul, .legal ul + p, .legal dl + p{ margin-top:14px; }
.legal ul{ padding-left:20px; display:grid; gap:8px; margin:0; }
.legal dl{ max-width:68ch; margin:0; }
.legal dt{ color:var(--text); font-weight:600; margin-top:16px; }
.legal dd{ color:var(--text-2); margin:4px 0 0; padding-left:0; }
.legal .lede{ color:var(--text); font-size:1.05rem; }
.legal a{ color:var(--signal); }
.todo{
  border-left:2px solid var(--approve); background:var(--approve-wash);
  padding:18px 22px; border-radius:0 3px 3px 0; margin:0 0 40px; color:var(--text);
}

/* ---------- motion ---------- */
/* .rise is a structural hook only. The page deliberately has no
   per-section fade-in: the lineage rail and the step markers are the
   only motion, so they carry meaning. The hero is now a still image,
   so the convergence-field keyframes it used to drive are gone. */
.rise{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .step__marker{ transition:none; }
}
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
[hidden]{ display:none !important; }