/* ==========================================================================
   Marrinn — ground #08090d / cream #f7f5f0, navy type #1A1033,
   violet #7B58C5 / #7B58C5, amber #E88122.
   Newsreader (display) · Instrument Sans (text) · JetBrains Mono (labels)

   Every length and every type size comes from the scales in :root. If a value
   below is a raw px that isn't a hairline, a radius or an optical nudge, it is
   a bug — the previous pass had ~40 one-off paddings and 30 font sizes.
   ========================================================================== */

:root{
  /* dark ground */
  --ink:#08090d;
  --ink-panel-a:#12141c;
  --ink-panel-b:#0a0b10;
  --on-ink:#f4f3ef;
  --on-ink-2:#a5a9b4;
  --on-ink-3:#9ba0ad;
  --on-ink-4:#7c828e;
  --foot:#9296a1;
  --foot-dim:#6f7480;

  /* cream ground */
  --cream:#f7f5f0;
  --cream-2:#efece4;
  --card:#faf9f6;
  --card-hi:#fff;
  --ink-text:#1A1033;      /* navy — headings on cream */
  --on-cream:#574E6E;      /* navy body                */
  --on-cream-2:#655C7D;
  --on-cream-3:#6F6689;    /* the old #857BA0 muted is 3.6:1 — this holds 4.9 */
  --rule-cream:rgba(26,16,51,0.10);
  --rule-cream-2:rgba(26,16,51,0.07);
  --rule-ink:rgba(255,255,255,0.09);

  /* accent */
  --violet:#7B58C5;        /* on dark */
  --violet-ink:#7B58C5;    /* on cream */
  --violet-lite:#b6abff;
  --violet-pale:#c4c0e8;
  --amber:#E88122;         /* on dark  */
  --amber-ink:#A55510;     /* on cream — #E88122 is only 2.3:1 there */
  --ok:#16a34a;

  --display:Newsreader,Georgia,serif;
  --sans:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* ---- spacing scale (4px base, 8px rhythm) ---- */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-7:32px; --s-8:40px; --s-9:48px; --s-10:64px; --s-11:80px;

  /* fluid rhythm — the only vertical measures a section may use */
  --sec-y:clamp(76px,8vw,124px);      /* section top/bottom padding      */
  --head-y:clamp(36px,4vw,60px);      /* section heading → content       */
  --gap:clamp(12px,1.15vw,16px);      /* card-grid gutter                */
  --gap-lg:clamp(32px,4.2vw,64px);    /* two-column editorial gutter     */
  --card-p:clamp(22px,2.1vw,30px);    /* padding inside a card           */
  --panel-p:clamp(26px,3.2vw,46px);   /* padding inside a large panel    */

  /* ---- type scale ---- */
  --t-mono-s:10px;  --t-mono:11px;
  --t-xs:13px;  --t-sm:14px;  --t-md:15px;
  --t-lg:clamp(15.5px,1.1vw,17px);
  --t-xl:clamp(16px,1.35vw,18.5px);
  --d-xs:clamp(19px,1.7vw,22px);      /* fact / list headings            */
  --d-sm:clamp(21px,1.9vw,25px);      /* card headings                   */
  --d-md:clamp(25px,2.6vw,32px);      /* form heading                    */
  --d-lg:clamp(27px,3.1vw,44px);      /* panel + feature headings        */
  --d-xl:clamp(34px,4.6vw,66px);      /* section headings                */
  --d-2xl:clamp(40px,7vw,100px);      /* hero                            */

  --lh-display:1.05;  /* was 1.0 — a serif with descenders needs the room */
  --lh-head:1.18;
  --lh-body:1.62;
  --lh-snug:1.5;
  --track:0.16em;     /* mono label tracking, one value everywhere       */

  --r-sm:10px; --r:14px; --r-lg:18px; --r-pill:999px;
  --ease:cubic-bezier(.22,1,.36,1);

  --maxw:1440px;
  --pad:clamp(20px,3.4vw,44px);
  --hdr-h:74px;
  --hdr-h-sm:60px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + var(--s-4));}
body{
  background:var(--ink);color:var(--on-ink);font-family:var(--sans);
  font-size:var(--t-md);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
input,select,textarea,button{font-family:inherit;}
::selection{background:var(--violet);color:var(--ink);}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:6px;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}

/* --- type ---------------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:500;letter-spacing:-0.03em;line-height:var(--lh-display);}
h3,h4{line-height:var(--lh-head);letter-spacing:-0.02em;}
.mono{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:var(--track);text-transform:uppercase;}

.eyebrow-row{display:flex;align-items:center;gap:var(--s-4);margin-bottom:var(--s-7);}
.eyebrow-row .n{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:var(--track);color:var(--amber-ink);}
.eyebrow-row .t{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:var(--track);text-transform:uppercase;color:var(--on-cream-3);}
.eyebrow-row .line{flex:1;height:1px;background:var(--rule-cream);}
.sec-dark .eyebrow-row .n{color:var(--amber);}
.sec-dark .eyebrow-row .t{color:var(--on-ink-4);}
.sec-dark .eyebrow-row .line{background:var(--rule-ink);}

.head-2col{display:grid;grid-template-columns:1.05fr 1fr;gap:var(--gap-lg);align-items:end;margin-bottom:var(--head-y);}
.head-2col h2{font-size:var(--d-xl);}
.head-2col p{font-size:var(--t-xl);line-height:var(--lh-body);color:var(--on-cream);}
.sec-dark .head-2col p{color:var(--on-ink-2);}

/* ---- the section-headline italic -----------------------------------------
   Every section headline marks its turn with an <em>, and the em is always
   the same purple italic. One rule per ground rather than one per section:
   --violet-ink on cream, --violet-lite on ink, because the -ink value is
   3.0:1 on #08090d and the -lite value is 2.1:1 on cream. Neither works on
   both. Placed here on purpose — .reach-copy h2 em and .hero h1 em are
   gradient treatments defined further down the file, and they win on source
   order at equal specificity. */
.sec-cream h2 em,.sec-cream-2 h2 em{font-style:italic;color:var(--violet-ink);}
.sec-dark h2 em{font-style:italic;color:var(--violet-lite);}
/* .vmid: bottom-alignment strands the headline when the right column runs to two
   paragraphs (the suite). Centre those, leave every other head alone.
   NOT .mid — that name is already a comparison-table cell colour (#b45309) and
   the collision painted the suite headline rust. */
.head-2col.vmid{align-items:center;}

/* --- the Squids ---------------------------------------------------------- */
/* Rendered on pure black, then the screen matte is baked into the PNG's alpha
   (luminance alpha + unpremultiply). Composites over the ink AND its violet glow
   with no blend mode, so no stacking context can isolate it. Nothing is keyed,
   so nothing fringes. */
.squid-stage{position:relative;margin:0 0 var(--gap);}
.squid-stage img{display:block;width:100%;height:auto;}

/* The review layer sits on cream, but the render is lit on the ink ground the
   Squid lineup uses, so it gets its own dark stage rather than a cut-out. The
   plate's own corners read #03030b, so the panel is set just above that and the
   seam stays invisible at the radius. */
.review-stage{position:relative;margin:0 0 var(--gap-lg);border-radius:var(--r-lg);
  overflow:hidden;background:#05050c;box-shadow:0 var(--s-6) 60px rgba(26,16,51,0.16);}
.review-stage img{display:block;width:100%;height:auto;}
.review-stage figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:var(--s-8) var(--s-7) var(--s-5);text-align:center;
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:var(--track);
  text-transform:uppercase;color:var(--on-ink-3);
  background:linear-gradient(180deg,transparent,rgba(5,5,12,0.9) 55%);}
/* Narrow: the plate is too small to give the caption its own dark space, so it
   drops below the image instead of sitting across the figures. */
@media (max-width:760px){
  .review-stage figcaption{position:static;background:none;text-align:left;
    padding:var(--s-4) var(--s-5) var(--s-5);}
}

/* motes drifting up, same language as the reach section, but CSS so it costs
   nothing and stays deterministic across reloads and screenshots */
.squid-motes{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.squid-motes i{
  position:absolute;bottom:-6px;left:var(--x);width:var(--sz);height:var(--sz);
  border-radius:50%;background:var(--violet-lite);opacity:0;
  will-change:transform,opacity;
  animation:squidRise var(--dur) linear infinite;animation-delay:var(--dly);
}
/* Travel is a unitless px figure, not a percentage: a percentage translate
   resolves against the dot's own 3px box, and animating `top` instead forced
   layout on every frame and locked the renderer. Overshoot is clipped. */
@keyframes squidRise{
  0%   {transform:translate3d(0,0,0);opacity:0;}
  10%  {opacity:.5;}
  75%  {opacity:.24;}
  100% {transform:translate3d(var(--drift),calc(var(--rise) * -1px),0);opacity:0;}
}
@media (prefers-reduced-motion:reduce){
  .squid-motes i{animation:none;opacity:.2;transform:translateY(-160px);}
}
.squids-note{max-width:76ch;margin:0 auto var(--gap-lg);text-align:center;
  font-size:var(--t-sm);line-height:var(--lh-body);color:var(--on-ink-2);}
.squids-note b{color:var(--on-ink);font-weight:600;}
/* The CTA takes over the note's bottom gap so the two read as one unit.
   Without :has() the note keeps its own margin and the pair is merely airier. */
.squids-note:has(+ .squids-cta){margin-bottom:var(--s-5);}
.squids-cta{margin:0 auto var(--gap-lg);text-align:center;}
@media (max-width:760px){.squids-note{text-align:left;}.squids-cta{text-align:left;}}

/* --- sections ------------------------------------------------------------ */
.sec{position:relative;z-index:1;padding:var(--sec-y) 0;}
.sec-cream{background:var(--cream);color:var(--ink-text);}
.sec-cream-2{background:var(--cream-2);color:var(--ink-text);}
.sec-dark{background:var(--ink);color:var(--on-ink);}
/* a hairline of light along the leading edge, so the slab has a lit top face */
.sec::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(90deg,transparent,rgba(123,88,197,.55) 20%,rgba(123,88,197,.55) 80%,transparent);
  opacity:0;transform:scaleX(.2);
  transition:transform 1.1s var(--ease),opacity .6s ease;
}
.sec.in::before{opacity:1;transform:scaleX(1);}

/* Big media zooms in as it scrolls into frame. Scroll-linked where the browser
   supports it, so the motion is tied to the wheel rather than to a timer. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .sec .shot,.sec .frame,.sec .fmedia > .shot{
      animation:secZoom linear both;
      animation-timeline:view();
      animation-range:entry 4% entry 62%;
    }
    @keyframes secZoom{
      from{opacity:.35;transform:scale(.93) translateY(34px);}
      to{opacity:1;transform:none;}
    }
  }
}

/* --- header -------------------------------------------------------------- */
header{
  position:sticky;top:0;z-index:30;height:var(--hdr-h);
  /* No backdrop-filter. A sticky header re-blurs the full page width on every
     scroll frame, which is the single worst thing you can do to scroll feel —
     and at 92% opacity there is nothing behind it left to see anyway. */
  background:rgba(8,9,13,0.92);
  border-bottom:1px solid rgba(123,88,197,0.14);
  transition:height .35s var(--ease),background .35s ease,box-shadow .35s ease,border-color .35s ease;
}
header .bar{display:flex;align-items:center;justify-content:space-between;height:100%;gap:var(--s-5);}
header.scrolled{
  height:var(--hdr-h-sm);background:rgba(8,9,13,0.95);
  border-bottom-color:rgba(123,88,197,0.26);box-shadow:0 var(--s-3) var(--s-7) rgba(0,0,0,.38);
}
/* Reading position, drawn on the header's own bottom edge — the logo's arm
   reaching across the page as you read. The artwork is arm-progress.svg (real
   taper, curling tip, graded suckers, same palette as the reach tentacles);
   the reveal is clip-path rather than scaleX, so nothing gets stretched, and
   a small amber glow rides the cut edge as the advancing tip.
   The art stretches to the viewport, so there are two cuts of it — the narrow
   one keeps the suckers round on phones instead of squashing them to dashes,
   the same reason .reach-svg ships wide and tall. */
:root{--arm-art:url(/assets/img/arm-progress.svg);}
@media(max-width:760px){:root{--arm-art:url(/assets/img/arm-progress-sm.svg);}}
header::after{
  content:"";position:absolute;left:0;bottom:-4px;height:8px;width:100%;
  clip-path:inset(0 calc(100% - var(--sp,0) * 100%) 0 0);
  background:
    radial-gradient(closest-side,rgba(255,190,110,.95),rgba(232,129,34,0)) calc(var(--sp,0) * 100%) 58%/24px 8px no-repeat,
    var(--arm-art) 0 0/100% 100% no-repeat;
  /* the same silhouette as a mask, so the tip glow burns inside the arm
     instead of smudging the header above it */
  -webkit-mask:var(--arm-art) 0 0/100% 100% no-repeat;
          mask:var(--arm-art) 0 0/100% 100% no-repeat;
  pointer-events:none;
}
.logo{font-family:var(--display);font-size:var(--d-md);font-weight:600;letter-spacing:-0.01em;color:var(--on-ink);display:flex;align-items:center;transition:font-size .35s var(--ease);}
/* the mark is 256x202 — height off the spacing scale, width:auto, so it fills
   the box instead of being letterboxed inside a square and reading small */
.logo img{height:var(--s-7);width:auto;margin-right:var(--s-3);transition:height .35s var(--ease),transform .5s var(--ease);}
.logo:hover img{transform:rotate(-8deg) scale(1.08);}
.logo span{color:var(--violet);}
/* dotless ı carries its own tittle so the dot can be amber, like the octopus
   eyes. Zero-size inline-block: the dot hangs off the baseline rather than the
   line box, so it stays put whatever line-height or font-size the logo takes. */
.logo span i{display:inline-block;width:0;height:0;vertical-align:baseline;position:relative;}
.logo span i::before{content:"";position:absolute;left:.08em;bottom:.585em;width:.155em;height:.155em;border-radius:50%;background:var(--amber);}
header.scrolled .logo{font-size:var(--d-sm);}
header.scrolled .logo img{height:var(--s-6);}

/* --- primary navigation -------------------------------------------------- */
nav.links{display:flex;align-items:center;gap:var(--s-1);font-size:var(--t-sm);}
.nav-item{position:relative;display:flex;align-items:center;}
.nav-top{
  position:relative;display:inline-flex;align-items:center;gap:var(--s-2);
  background:none;border:0;cursor:pointer;font-size:var(--t-sm);font-weight:500;
  color:var(--on-ink-3);padding:var(--s-2) var(--s-3);border-radius:var(--s-2);
  transition:color .25s ease;
}
.nav-top::after{
  content:"";position:absolute;left:var(--s-3);right:var(--s-3);bottom:2px;height:1px;
  background:var(--violet);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .35s var(--ease);
}
.nav-top:hover,.nav-top.on,.nav-top[aria-expanded="true"]{color:var(--on-ink);}
.nav-top:hover::after,.nav-top.on::after,.nav-top[aria-expanded="true"]::after{transform:scaleX(1);}
/* the caret is drawn, not typed, so it can rotate */
.nav-top i{width:7px;height:7px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease);opacity:.7;}
.nav-top[aria-expanded="true"] i{transform:translateY(1px) rotate(-135deg);opacity:1;}

.menu{
  position:absolute;top:calc(100% + var(--s-3));left:calc(var(--s-3) * -1);z-index:40;
  width:min(420px,calc(100vw - var(--s-8)));
  background:linear-gradient(160deg,#14161f,#0b0c12);
  border:1px solid rgba(123,88,197,0.22);border-radius:var(--r-lg);
  box-shadow:0 var(--s-6) var(--s-10) rgba(0,0,0,.55);
  padding:var(--s-4);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s ease,transform .3s var(--ease),visibility .25s;
}
.nav-item:hover > .menu,.nav-top[aria-expanded="true"] + .menu{opacity:1;visibility:visible;transform:none;}
.menu-lead{font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:0.12em;text-transform:uppercase;
  color:var(--on-ink-4);padding:var(--s-2) var(--s-3) var(--s-3);line-height:1.7;}
.menu-list{display:flex;flex-direction:column;}
.menu-list a{display:block;padding:var(--s-3);border-radius:var(--r-sm);transition:background .22s ease,transform .28s var(--ease);}
.menu-list a:hover{background:rgba(123,88,197,.11);transform:translateX(3px);}
.menu-list b{display:block;font-family:var(--display);font-size:var(--d-xs);font-weight:500;letter-spacing:-0.02em;color:var(--on-ink);}
.menu-list span{display:block;margin-top:2px;font-size:var(--t-xs);line-height:var(--lh-snug);color:var(--on-ink-4);}
/* separates the Agent SDK, which builds software, from the Suite modules below it */
.menu-rule{height:1px;background:rgba(255,255,255,.09);margin:var(--s-2) var(--s-3);}
.menu-all{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  margin-top:var(--s-3);padding:var(--s-3);border-top:1px solid rgba(123,88,197,.18);
  font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:0.14em;text-transform:uppercase;color:var(--violet);}
.menu-all i{font-style:normal;transition:transform .3s var(--ease);}
.menu-all:hover i{transform:translateX(4px);}
.nav-cta{display:flex;align-items:center;gap:var(--s-2);}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:var(--s-2);}
.burger span{width:20px;height:1.5px;background:var(--on-ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s ease;}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* --- buttons ------------------------------------------------------------- */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  font-size:var(--t-md);font-weight:600;padding:var(--s-4) var(--s-7);
  border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;
  transition:background .3s ease,box-shadow .3s ease,transform .25s var(--ease),border-color .25s ease,color .25s ease;
}
.btn-light{color:var(--ink);background:linear-gradient(180deg,#fff,#e4e0f6);box-shadow:0 var(--s-3) var(--s-8) rgba(123,88,197,0.28);}
.btn-light:hover{background:linear-gradient(180deg,#c9bfff,#9c8bf4);color:var(--ink);transform:translateY(-2px);box-shadow:0 var(--s-4) var(--s-9) rgba(123,88,197,0.40);}
.btn-outline{color:#e8e7f2;border-color:rgba(255,255,255,0.16);background:rgba(255,255,255,0.03);font-weight:500;}
.btn-outline:hover{border-color:rgba(123,88,197,0.55);background:rgba(123,88,197,0.10);color:#fff;transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn-ghost-sm{font-size:var(--t-sm);color:#c9ccd4;border:1px solid rgba(255,255,255,0.14);padding:var(--s-2) var(--s-4);border-radius:var(--s-2);transition:border-color .25s ease,color .25s ease,background .25s ease;display:inline-flex;align-items:center;}
.btn-ghost-sm:hover{border-color:rgba(123,88,197,0.5);background:rgba(123,88,197,.08);color:#fff;}
.btn-solid-sm{font-size:var(--t-sm);font-weight:600;color:var(--ink);background:linear-gradient(180deg,#fff,#e7e4f7);padding:var(--s-3) var(--s-5);border-radius:var(--s-2);box-shadow:0 var(--s-1) var(--s-5) rgba(123,88,197,0.22);transition:background .3s ease,box-shadow .3s ease;display:inline-flex;align-items:center;}
.btn-solid-sm:hover{background:linear-gradient(180deg,#c9bfff,#a08ff5);color:var(--ink);box-shadow:0 var(--s-2) var(--s-6) rgba(123,88,197,0.38);}

.ulink{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--t-md);font-weight:600;
  border-bottom:1px solid var(--ink-text);padding-bottom:var(--s-1);color:var(--ink-text);
  transition:border-color .3s ease,gap .3s var(--ease);}
.ulink span{color:var(--amber-ink);transition:transform .3s var(--ease);display:inline-block;}
.ulink:hover{gap:var(--s-3);border-bottom-color:var(--violet-ink);}
.ulink:hover span{transform:translateX(3px);}
.sec-dark .ulink{border-bottom-color:var(--on-ink);color:var(--on-ink);}
.sec-dark .ulink:hover{border-bottom-color:var(--violet);}
.sec-dark .ulink span{color:var(--amber);}

/* --- hero ---------------------------------------------------------------- */
.hero{
  position:relative;overflow:hidden;padding:clamp(56px,7.2vw,104px) 0 0;
  background:radial-gradient(1100px 620px at 50% -18%,rgba(123,88,197,0.30),rgba(8,9,13,0) 62%),var(--ink);
}
/* The drift is one 88px tile, so translating the layer is the same loop — but
   background-position is a paint property, which repainted this full-screen
   element 60 times a second forever, on three sections at once. transform is
   composited: the same movement, no repaint. The mask stays on the parent so
   the vignette does not travel with the grid; the inner layer is oversized by
   one tile so the translation never exposes an edge. */
.grid-lines{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:radial-gradient(760px 460px at 50% 8%,#000,transparent 78%);
          mask-image:radial-gradient(760px 460px at 50% 8%,#000,transparent 78%);
}
.grid-lines::before{
  content:'';position:absolute;inset:-88px;
  background-image:linear-gradient(rgba(255,255,255,0.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,0.028) 1px,transparent 1px);
  background-size:88px 88px;
}
/* The same texture on a cream section: white lines vanish there, so the grid
   inverts to navy at the alpha that reads the same. */
.sec-cream .grid-lines::before,.sec-cream-2 .grid-lines::before{
  background-image:linear-gradient(rgba(26,16,51,0.042) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(26,16,51,0.042) 1px,transparent 1px);
}
/* The drift is gone. It moved 88px over 34 seconds — 2.6px a second, which
   nobody can see — in exchange for three full-screen animated layers, each
   with a mask, running forever on every page. Restore with one line here:
   animation:gridDrift 34s linear infinite;  @keyframes gridDrift{to{transform:translate3d(88px,88px,0)}} */
.hero-top{position:relative;text-align:center;}
.pill{display:inline-flex;align-items:center;gap:var(--s-3);}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 12px var(--amber);display:block;flex:none;animation:mrn-pulse 2.6s ease-out infinite;}
.pill span{font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:0.18em;text-transform:uppercase;color:var(--amber);}
.hero-flags{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--s-3) var(--s-6);margin-top:var(--s-6);}
.hero-flag{display:inline-flex;align-items:center;gap:var(--s-3);}
.hero-flag i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 12px var(--ok);display:block;flex:none;animation:mrn-pulse 2.2s ease-out infinite,mrn-flash 2.2s ease-in-out infinite;}
.hero-flag span{font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:0.16em;text-transform:uppercase;color:var(--on-ink-2);}
@keyframes mrn-flash{0%,100%{opacity:1}50%{opacity:.4}}
.hero h1{margin:var(--s-7) 0 0;font-size:var(--d-2xl);line-height:var(--lh-display);}
.hero h1 em{font-style:italic;font-weight:400;
  background:linear-gradient(94deg,#b6abff,#7B58C5 46%,#7B58C5);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  /* Twice, not forever. background-clip:text cannot be composited, so every
     frame of this re-rasterises the headline. Two passes covers the first
     impression, which is the only time anyone is looking at it. */
  animation:sheen 9s ease-in-out 2;}
@keyframes sheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero .sub{margin:var(--s-7) auto 0;max-width:730px;font-size:var(--t-xl);line-height:var(--lh-body);color:var(--on-ink-2);}
.hero-cta{display:flex;gap:var(--s-3);justify-content:center;margin-top:var(--s-8);flex-wrap:wrap;}
.hero-panel{position:relative;max-width:1180px;margin:clamp(40px,5vw,76px) auto 0;}
.hero-tail{height:clamp(40px,5vw,72px);}

/* page-load sequence — one orchestrated moment, then the page is still */
@keyframes heroIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero-top > *,.hero-panel{animation:heroIn .95s var(--ease) both;}
.hero-top > .pill{animation-delay:.10s;}
.hero-top > h1{animation-delay:.20s;}
.hero-top > .sub{animation-delay:.32s;}
.hero-top > .hero-flags{animation-delay:.38s;}
.hero-top > .hero-cta{animation-delay:.44s;}
.hero-panel{animation-delay:.58s;animation-duration:1.1s;}

/* build session — a light card on the dark hero */
.session{border-radius:var(--r);background:var(--card-hi);border:1px solid #e6e4de;box-shadow:0 var(--s-8) 100px rgba(0,0,0,0.45);overflow:hidden;color:var(--ink-text);}
.session-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) var(--card-p);border-bottom:1px solid #eceae4;}
.session-top .brand{font-family:var(--mono);font-size:var(--t-mono);font-weight:500;letter-spacing:var(--track);text-transform:uppercase;color:var(--ink-text);}
.session-top .what{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:var(--track);text-transform:uppercase;color:#8e9299;}
.session-top .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);display:block;animation:mrn-pulse 2.2s ease-out infinite;}
@keyframes mrn-pulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.5)}70%{box-shadow:0 0 0 9px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
.session-brief{padding:var(--s-4) var(--card-p);border-bottom:1px solid #eceae4;font-size:var(--t-sm);line-height:var(--lh-body);}
.session-brief b{color:var(--violet);margin-right:var(--s-2);font-weight:400;}
.session-rows{padding:0 var(--card-p);}
.srow{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:var(--s-2) 0;border-bottom:1px solid #f1efe9;opacity:.42;transition:opacity .38s ease;}
.srow:last-child{border-bottom:0;}
.srow.done,.srow.run{opacity:1;}
.srow .l{display:flex;align-items:baseline;gap:var(--s-3);min-width:0;flex-wrap:wrap;}
.srow .mark{font-size:var(--t-mono);width:11px;flex:none;color:#c7c9cf;transition:color .3s ease;}
.srow.done .mark{color:var(--ok);}
.srow.run .mark{color:var(--violet);}
.srow .name{font-size:var(--t-sm);font-weight:600;color:var(--ink-text);}
.srow .detail{font-size:var(--t-xs);color:var(--on-cream-3);}
.srow .caret{display:none;width:7px;height:13px;background:var(--amber);transform:translateY(2px);animation:mrn-blink .82s step-end infinite;}
.srow.run .caret{display:inline-block;}
@keyframes mrn-blink{0%,48%{opacity:1}49%,100%{opacity:0}}
.srow .day{font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:0.14em;text-transform:uppercase;color:#9296a1;white-space:nowrap;}
.session-foot{padding:var(--s-4) var(--card-p);font-size:var(--t-xs);line-height:var(--lh-body);color:var(--on-cream-3);}
.session-foot b{color:var(--ink-text);font-weight:600;}

.hero-chips{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-5);}
.hero-chips span{font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:0.14em;text-transform:uppercase;color:#c9ccd4;
  border:1px solid rgba(255,255,255,0.16);background:rgba(255,255,255,0.04);padding:var(--s-3) var(--s-4);border-radius:var(--r-pill);
  transition:border-color .3s ease,background .3s ease,transform .3s var(--ease);}
.hero-chips span:hover{border-color:rgba(123,88,197,.5);background:rgba(123,88,197,.10);transform:translateY(-2px);}

/* Closes the hero instead of floating between it and section 01. These are
   hero proof-points, so they sit on the hero's ground, inside the hero's wrap,
   on the same left edge as the headline — the chips row above sets the tone. */
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:var(--s-8);padding-top:var(--s-7);border-top:1px solid var(--rule-ink);}
.hero-stats > div{padding:0 var(--s-6);border-left:1px solid var(--rule-ink);}
.hero-stats > div:first-child{padding-left:0;border-left:0;}
.hero-stats b{display:block;font-family:var(--display);font-weight:500;font-size:var(--d-sm);
  letter-spacing:-0.025em;line-height:1;color:var(--on-ink);font-variant-numeric:tabular-nums;}
.hero-stats span{display:block;margin-top:var(--s-3);font-size:var(--t-xs);line-height:var(--lh-snug);color:var(--on-ink-4);}

/* --- the core: layer selector ------------------------------------------- */
.layers{display:grid;grid-template-columns:330px 1fr;gap:var(--s-7);align-items:start;}
.layer-btns{display:flex;flex-direction:column;gap:var(--s-2);}
.layer-btn{position:relative;overflow:hidden;display:block;width:100%;text-align:left;cursor:pointer;
  padding:var(--s-5);border-radius:var(--r);
  border:1px solid var(--rule-cream);background:var(--card);color:var(--ink-text);
  transition:background .3s ease,border-color .3s ease,transform .3s var(--ease);}
.layer-btn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--violet),var(--violet-ink));
  transform:scaleY(0);transform-origin:50% 0;transition:transform .45s var(--ease);}
.layer-btn:hover{border-color:rgba(123,88,197,0.45);transform:translateX(3px);}
.layer-btn[aria-selected="true"]{background:rgba(123,88,197,0.10);border-color:rgba(123,88,197,0.45);}
.layer-btn[aria-selected="true"]::before{transform:scaleY(1);}
.layer-btn .meta{display:flex;align-items:center;gap:var(--s-3);}
.layer-btn .no,.layer-btn .verb{font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:0.14em;text-transform:uppercase;color:var(--on-cream-3);}
.layer-btn[aria-selected="true"] .no{color:var(--violet-ink);}
.layer-btn .title{margin-top:var(--s-2);display:block;font-family:var(--display);font-size:var(--d-xs);font-weight:500;letter-spacing:-0.02em;}

.layer-panel{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:var(--panel-p);
  background:linear-gradient(150deg,var(--ink-panel-a),var(--ink-panel-b));
  border:1px solid rgba(123,88,197,0.20);box-shadow:0 var(--s-7) var(--s-11) rgba(0,0,0,0.28);color:var(--on-ink);min-height:400px;}
.layer-panel::before{content:"";position:absolute;top:-140px;right:-120px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(123,88,197,0.22),rgba(123,88,197,0) 66%);pointer-events:none;
  animation:aurora 16s ease-in-out infinite;}
@keyframes aurora{0%,100%{transform:translate(0,0) scale(1);opacity:.9}50%{transform:translate(-40px,30px) scale(1.15);opacity:1}}
.layer-panel > *{position:relative;}
.layer-panel .kicker{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:var(--track);text-transform:uppercase;color:var(--violet);}
.layer-panel h3{margin:var(--s-4) 0 var(--s-5);font-size:var(--d-lg);line-height:var(--lh-display);}
.layer-panel p{font-size:var(--t-lg);line-height:1.7;color:var(--on-ink-2);max-width:720px;}
/* the panel's contents cross-fade when a layer is picked */
.layer-panel.swap > *{animation:swapIn .5s var(--ease) both;}
.layer-panel.swap .kicker{animation-delay:0s}
.layer-panel.swap h3{animation-delay:.05s}
.layer-panel.swap p{animation-delay:.10s}
.layer-panel.swap .tags{animation-delay:.15s}
@keyframes swapIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.tags{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-7);}
.tags span{font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:0.12em;text-transform:uppercase;color:var(--violet-pale);
  border:1px solid rgba(123,88,197,0.30);background:rgba(123,88,197,0.08);padding:var(--s-2) var(--s-3);border-radius:var(--r-pill);}

/* --- the reach -----------------------------------------------------------
   The single octopus moment on the site, placed at the one join where it
   means something: the core (01) has eight arms and Marrinn builds eight
   surfaces (02), so the arms literally hand off to the grid below. Used once
   — repeated at every join it would read as a border pattern, not an idea.
   ------------------------------------------------------------------------ */
/* The section is a scroll track; the graphic inside it is sticky.

   This does what ScrollTrigger's pin did — holds the whole thing still and fully
   on screen while the run plays, and buys it a scroll budget of its own — but the
   browser does the holding. ScrollTrigger's pin broke this section three separate
   times (stranded in a black panel, yanking the scroll position back, and finally
   sitting position:fixed on top of the sections either side) because a pin's
   correctness depends on start/end being measured exactly right, and this page
   re-measures constantly. Sticky cannot mis-measure and cannot escape its track.

   Without any holding at all the run simply finished while the section was still
   climbing onto the screen, so you only ever arrived at the finished picture. */
.reach{
  position:relative;isolation:isolate;
  --reach-glow:.30;
  background:radial-gradient(880px 520px at 50% 6%,
    rgba(123,88,197,var(--reach-glow)),rgba(8,9,13,0) 64%),var(--ink);
  min-height:210vh;                 /* the track: how long the run gets to be */
  z-index:1;
}
.reach-stick{
  position:sticky;top:0;min-height:100vh;min-height:100dvh;overflow:hidden;
  padding:clamp(38px,4.2vw,62px) 0 clamp(20px,2.2vw,34px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.reach-copy{position:relative;text-align:center;z-index:3;padding:0 var(--pad);}
.reach-copy .mono{display:block;color:var(--violet);margin-bottom:var(--s-3);}
.reach-copy h2{font-size:var(--d-lg);color:var(--on-ink);line-height:var(--lh-display);}
.reach-copy h2 em{font-style:italic;font-weight:400;
  background:linear-gradient(94deg,#b6abff,#7B58C5 46%,#7B58C5);
  -webkit-background-clip:text;background-clip:text;color:transparent;}

/* no margin-top:auto — a flex spacer here just banks empty pixels */
.reach-svg{position:relative;z-index:2;width:100%;max-width:var(--maxw);
  margin-top:clamp(6px,1vw,18px);display:block;}
/* Capped so the whole section clears a laptop viewport, because it is pinned:
   a pinned section taller than the screen has its bottom cut off for the whole
   run, which is where the boxes are. At 980 the octopus still renders ~250px —
   a third bigger than it was before the frame was tightened. */
.reach-svg.wide{max-width:980px;}
/* The narrow screen gets its own composition, not the wide fan scaled to 27%.
   Only one is ever in the layout, so the other costs nothing but its markup. */
.reach-svg.tall{display:none;max-width:560px;margin-inline:auto;}
/* SVG text scales with the viewBox, so these are viewBox units, not pixels. The
   portrait frame is 360 wide and renders at ~342 on a 390px phone — near 1:1 —
   so 13 lands at ~12.4px on the device.
   Labels read left-to-right along their chip, starting or ending at the free end
   so the closing grip never lands on type. Set here rather than as an attribute
   because the shared text-anchor:middle further down is a stylesheet rule and
   would beat a presentation attribute. */
.reach-svg.tall .tile text{font-size:13px;letter-spacing:.14em;text-anchor:start;}
.reach-svg.tall .tile.r text{text-anchor:end;}
/* A viewBox unit is a device pixel only at the width this was drawn for. Below
   ~360 the whole graphic scales down with the screen and 13 lands under 11px,
   which is the point labels stop being read. AUTOMATION is the long one and
   still clears its icon at 15. */
@media(max-width:360px){.reach-svg.tall .tile text{font-size:15px;}}
/* The glyph group is scaled to icon/52, and stroke-width scales with it — at
   26/52 the shared 2.2 came out at 1.0px, a hairline. Pre-divided here. */
.reach-svg.tall .tile .ico path{stroke-width:4.6;}
@media(max-width:760px){
  .reach-svg.wide{display:none;}
  .reach-svg.tall{display:block;}
}
/* Filled outlines so they taper like an arm — and painted in the logo's own
   palette (body #7437c5, black outline, #56268f shade, #ac7fd9 highlight, all
   sampled off the traced artwork) so they are the logo's arms continuing, not a
   second octopus in a different style. */
/* No drop-shadow here. These paths are rewritten every frame, and a filter on
   them makes the browser re-rasterise and re-blur the whole group each time —
   the single most expensive thing on the page. The section's own glow does the
   job at no per-frame cost. */
/* Three inks per arm, stacked the way the logo's own arms are built: outline and
   shaded underside, body over it, lit ridge on top. One flat purple strip was
   the single loudest tell that the drawn arms were not the logo's — you can
   align a join perfectly and a flat shape still reads as a different drawing. */
.reach .tent .sh{fill:#56268f;stroke:#000;stroke-width:4.5;stroke-linejoin:round;}
.reach .tent .bd{fill:#7437c5;}
.reach .tent .hl{fill:#ac7fd9;}
.reach .suckers circle{fill:#c9a6ef;opacity:.55;}
/* the reveal grows out of the mantle, so the arms extend rather than appear */
/* Per layout: the reveal has to grow from that layout's own mantle. One shared
   origin was left on the wide fan's old centre, so on the portrait SVG the
   arms swept in from a point off to the side instead of out of the body. */
.reach .wave{transform-box:view-box;transform:scale(0);}
.reach-svg.wide .wave{transform-origin:600px 128px;}
.reach-svg.tall .wave{transform-origin:180px 140px;}
/* the eight boxes the arms close around, and the vector in each */
/* Opaque, deliberately. At 7% alpha the arm behind the box showed straight
   through it, so the arm read as slicing the box in half instead of holding it.
   Occlusion is the whole cue: the arm goes behind, the curling tip comes back
   over the front, and the eye reads that as grip. */
.reach .tile .box{fill:#1d1033;stroke:rgba(163,132,236,.45);stroke-width:1.6;}
.reach .motes circle{fill:var(--violet-lite);opacity:.22;}
.reach-count{
  margin-top:var(--s-3);font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:.18em;text-transform:uppercase;color:var(--on-ink-4);
}
.reach-count b{color:var(--violet-lite);font-weight:500;font-variant-numeric:tabular-nums;}
.reach .tile .ico path{
  fill:none;stroke:#cfc8f4;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
}
.reach .tile text{
  fill:var(--on-ink-3);font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-anchor:middle;
}
/* Dim but present without JS, since nothing will ever animate them there.
   With JS the boxes start absent and appear as each arm catches one, so they
   are hidden from the first paint rather than popping out when GSAP boots. */
.reach .tile{opacity:.45;transform-box:fill-box;transform-origin:50% 50%;}
.reach.js-reach .tile{opacity:0;}
/* the curling tip, on the front face — this is the half that reads as a grip */
.reach .grip{fill:#7437c5;stroke:#000;stroke-width:3.2;stroke-linejoin:round;opacity:0;
  transform-box:fill-box;transform-origin:50% 0;}
/* Vector now — a <use> of the #octo symbol, which is marrinn-octopus.png traced
   into five flat inks. It renders ~250px here and the 256px bitmap was soft at
   that size; more to the point, the drawn arms can be measured onto the real
   silhouette instead of having their join hidden behind a bitmap. */
/* The halo is a gradient ellipse behind the body (.core-glow), not a
   drop-shadow on it: a filter is re-run whenever anything in its own SVG
   repaints, and the arms repaint every frame. Worth a little, not a lot —
   median of five 60-frame samples at this section, one run, about:blank
   control on the same browser at 16.2ms: 34.3ms as it stands, 36.9ms with the
   drop-shadow put back, 18.7ms with the arms simply not painted. So the cost
   here is painting 24 filled paths a frame, and the filter was 2.6ms of it.
   A single sample said 66/35 — that was the loaded box, not the filter. */
.reach .core{transform-box:fill-box;transform-origin:50% 100%;}
/* GSAP drives the breathing when it is present — two transform sources on
   one element and the CSS one always wins, cancelling the scroll drift. */
.reach:not(.js-reach) .core{animation:reachBreathe 5s ease-in-out infinite;}
@keyframes reachBreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.05)}}

/* Two animation systems on one element is one too many. When reach.js takes
   over it stamps .js-reach on the section and every rule below stands down —
   CSS animations beat inline styles, so without this the mask below would keep
   clipping the very arms GSAP is drawing. Everything here is the no-JS path. */
.reach:not(.js-reach).in .wave{animation:reachWave 1.5s var(--ease) forwards;}
.reach:not(.js-reach).in .tile{animation:tipOn .5s var(--ease) forwards;}
.reach:not(.js-reach).in .grip{animation:gripOn .55s var(--ease) forwards;}
@keyframes reachWave{to{transform:scale(1);}}
@keyframes tipOn{from{opacity:.45;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes gripOn{from{opacity:0;transform:scaleY(.3)}to{opacity:1;transform:none}}
.reach:not(.js-reach) .tile:nth-child(1),.reach:not(.js-reach) .grip:nth-child(1){animation-delay:.00s}
.reach:not(.js-reach) .tile:nth-child(2),.reach:not(.js-reach) .grip:nth-child(2){animation-delay:.07s}
.reach:not(.js-reach) .tile:nth-child(3),.reach:not(.js-reach) .grip:nth-child(3){animation-delay:.14s}
.reach:not(.js-reach) .tile:nth-child(4),.reach:not(.js-reach) .grip:nth-child(4){animation-delay:.21s}
.reach:not(.js-reach) .tile:nth-child(5),.reach:not(.js-reach) .grip:nth-child(5){animation-delay:.28s}
.reach:not(.js-reach) .tile:nth-child(6),.reach:not(.js-reach) .grip:nth-child(6){animation-delay:.35s}
.reach:not(.js-reach) .tile:nth-child(7),.reach:not(.js-reach) .grip:nth-child(7){animation-delay:.42s}
.reach:not(.js-reach) .tile:nth-child(8),.reach:not(.js-reach) .grip:nth-child(8){animation-delay:.49s}

/* Without GSAP but with scroll-driven animations, the arms still extend under
   the wheel — just via the mask rather than by redrawing the geometry. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .reach:not(.js-reach) .wave,.reach:not(.js-reach).in .wave{
      animation:reachWave linear both;
      animation-timeline:view();animation-range:entry 12% cover 55%;animation-delay:0s;
    }
    .reach:not(.js-reach) .tile,.reach:not(.js-reach).in .tile{
      animation:tipOn linear both;
      animation-timeline:view();animation-range:cover 38% cover 62%;animation-delay:0s;
    }
    .reach:not(.js-reach) .grip,.reach:not(.js-reach).in .grip{
      animation:gripOn linear both;
      animation-timeline:view();animation-range:cover 52% cover 76%;animation-delay:0s;
    }
  }
}
@media (prefers-reduced-motion:reduce){
  .reach .wave{transform:scale(1);}
  .reach .tile,.reach .grip{opacity:1;}
}
/* No portrait overrides here. Both of them were dead: .reach .tile text lost to
   the .reach-svg.tall rule above on specificity, media query or not, and the
   icon stroke is now set there too — beside the icon/52 scale it has to cancel. */

/* --- surfaces ------------------------------------------------------------ */
.surfaces{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);}
/* six reviewers read better as 3x2 than as 4 plus an orphan row */
.surfaces.cols-3{grid-template-columns:repeat(3,1fr);}
.surface{position:relative;overflow:hidden;display:flex;flex-direction:column;
  padding:var(--card-p);background:var(--card);border:1px solid var(--rule-cream);border-radius:var(--r);
  box-shadow:0 1px 2px rgba(26,16,51,0.04);
  transition:border-color .3s ease,box-shadow .35s ease,transform .35s var(--ease),background .3s ease;}
.surface::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--violet),var(--violet-ink));
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease);}
.surface:hover{border-color:rgba(123,88,197,0.42);box-shadow:0 var(--s-4) var(--s-8) rgba(123,88,197,0.16);transform:translateY(-4px);background:var(--card-hi);}
.surface:hover::after{transform:scaleX(1);}
.surface .kind{align-self:flex-start;font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:0.14em;text-transform:uppercase;
  color:var(--violet-ink);background:rgba(123,88,197,.08);border:1px solid rgba(123,88,197,.18);
  padding:var(--s-1) var(--s-2);border-radius:var(--s-1);}
.surface h3{margin:var(--s-4) 0 var(--s-2);font-size:var(--d-sm);}
.surface p{font-size:var(--t-sm);line-height:var(--lh-body);color:var(--on-cream-2);}

/* --- the suite: product families ---------------------------------------- */
.fam-btns{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-6);}
.fam-btn{position:relative;display:inline-flex;align-items:center;gap:var(--s-2);cursor:pointer;
  padding:var(--s-3) var(--s-4);border-radius:var(--r-pill);
  border:1px solid var(--rule-cream);background:var(--card);color:var(--ink-text);
  font-size:var(--t-sm);font-weight:500;
  transition:background .3s ease,color .3s ease,border-color .3s ease,transform .3s var(--ease);}
.fam-btn:hover{border-color:rgba(123,88,197,0.5);transform:translateY(-2px);}
.fam-btn[aria-selected="true"]{background:var(--ink-text);color:var(--card);border-color:var(--ink-text);}
.fam-btn .no{font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:0.12em;color:var(--on-cream-3);}
.fam-btn[aria-selected="true"] .no{color:var(--violet-lite);}
.fam-btn .count{font-family:var(--mono);font-size:var(--t-mono-s);padding:2px var(--s-2);border-radius:var(--r-pill);background:rgba(26,16,51,0.06);color:var(--on-cream-2);}
.fam-btn[aria-selected="true"] .count{background:rgba(123,88,197,0.28);color:var(--violet-pale);}

.fam-panel{border:1px solid var(--rule-cream);border-radius:var(--r-lg);background:var(--card);overflow:hidden;box-shadow:0 2px 4px rgba(26,16,51,0.04);}
.fam-head{display:flex;gap:var(--s-6);padding:var(--card-p) var(--panel-p);border-bottom:1px solid var(--rule-cream);
  background:linear-gradient(180deg,rgba(123,88,197,0.07),rgba(123,88,197,0));}
.fam-head .bar{width:4px;border-radius:var(--r-pill);background:linear-gradient(180deg,var(--amber),var(--violet-ink));flex:none;}
.fam-head h3{font-size:var(--d-lg);line-height:var(--lh-display);}
.fam-head p{margin-top:var(--s-2);font-size:var(--t-lg);line-height:var(--lh-body);color:var(--on-cream);max-width:800px;}

/* One platform underneath: the cards sit on a single shared rule-coloured
   substrate and the 1px gaps are the seams. On hover a card lifts off it. */
.fam-items{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-cream-2);}
.fam-item{
  position:relative;display:flex;flex-direction:column;isolation:isolate;
  padding:var(--card-p);background:var(--card);color:var(--ink-text);
  transition:transform .4s var(--ease),box-shadow .4s ease,background .3s ease,border-radius .3s ease;
}
.fam-item::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--violet),var(--violet-ink));
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease);}
.fam-item:hover,.fam-item:focus-visible{
  transform:translateY(-5px);background:var(--card-hi);border-radius:var(--r);z-index:2;
  box-shadow:0 var(--s-6) var(--s-10) rgba(26,16,51,0.16);
}
.fam-item:hover::after,.fam-item:focus-visible::after{transform:scaleX(1);}
.fam-item .fi-kind{
  align-self:flex-start;font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:0.14em;text-transform:uppercase;
  color:var(--on-cream-3);border:1px solid var(--rule-cream);padding:var(--s-1) var(--s-2);border-radius:var(--s-1);
  transition:color .3s ease,border-color .3s ease,background .3s ease;}
.fam-item[data-kind="product"] .fi-kind{color:var(--violet-ink);border-color:rgba(123,88,197,.28);background:rgba(123,88,197,.07);}
.fam-item h4{margin:var(--s-4) 0 var(--s-2);font-size:var(--d-sm);}
.fam-item p{font-size:var(--t-sm);line-height:var(--lh-body);color:var(--on-cream-2);}
.fam-item .fi-go{
  display:inline-flex;align-items:center;gap:var(--s-2);margin-top:auto;padding-top:var(--s-5);
  font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:0.14em;text-transform:uppercase;
  color:var(--on-cream-3);transition:color .3s ease,gap .3s var(--ease);}
.fam-item .fi-go i{font-style:normal;transition:transform .35s var(--ease);}
.fam-item:hover .fi-go{color:var(--violet-ink);gap:var(--s-3);}
.fam-item:hover .fi-go i{transform:translateX(4px);}
/* cards flip in one after another when a family is chosen */
.fam-items.swap .fam-item{animation:cardIn .55s var(--ease) both;}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.fam-items.swap .fam-item:nth-child(1){animation-delay:.00s}
.fam-items.swap .fam-item:nth-child(2){animation-delay:.05s}
.fam-items.swap .fam-item:nth-child(3){animation-delay:.10s}
.fam-items.swap .fam-item:nth-child(4){animation-delay:.15s}
.fam-items.swap .fam-item:nth-child(5){animation-delay:.20s}
.fam-items.swap .fam-item:nth-child(6){animation-delay:.25s}
.fam-items.swap .fam-item:nth-child(n+7){animation-delay:.30s}

/* ---- The operating system inside a family panel -------------------------
   The seven layers are not modules and are never counted in the 35, so they
   cannot look like the cards you buy. Two full-width bands split the panel,
   and a layer card is marked amber against the violet the product cards use. */
.fam-band{grid-column:1/-1;background:var(--card);padding:var(--s-5) var(--card-p);
  border-top:2px solid rgba(165,85,16,.20);}
.fam-band:not(:first-child){border-top-color:rgba(123,88,197,.22);}
.fam-band h5{margin:0;font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:0.14em;
  text-transform:uppercase;color:var(--amber-ink);}
.fam-band:not(:first-child) h5{color:var(--violet-ink);}
.fam-band p{margin:var(--s-2) 0 0;font-size:var(--t-sm);line-height:var(--lh-body);color:var(--on-cream-2);}
.fam-item[data-kind="layer"] .fi-kind{color:var(--amber-ink);border-color:rgba(165,85,16,.28);
  background:rgba(165,85,16,.07);}
.fam-item[data-kind="layer"] .fi-kind b{font-weight:inherit;margin-right:var(--s-2);opacity:.75;}
.fam-item[data-kind="layer"]::after{background:linear-gradient(90deg,var(--amber),var(--amber-ink));}
.fam-item[data-kind="layer"]:hover .fi-go{color:var(--amber-ink);}
/* Seven layers never divide evenly by the column count, so the tail of the
   band would show the rule substrate as a hole. This closes whatever is left
   of that row at any breakpoint, and collapses to nothing when the row is
   already full or the grid is a single column. */
.fam-fill{grid-column:auto/-1;background:var(--card);}

/* ---- Section 07 on the dark ground --------------------------------------
   The suite reads as one chapter with the Squids section it argues from, so
   it moved from --cream-2 to --ink. Everything below is a token swap, not a
   layout change: --card -> --ink-panel-a, --card-hi -> #171a24,
   --rule-cream -> --rule-ink, and every --violet-ink / --amber-ink becomes
   its on-dark twin, because the -ink pair is mixed for cream and fails
   contrast here. Scoped to #products: .surface and .surfaces are shared with
   five cream sections and must not follow. */
#products .head-2col p b{color:var(--on-ink);}

#products .fam-btn{border-color:var(--rule-ink);background:rgba(255,255,255,0.035);color:var(--on-ink);}
#products .fam-btn .no{color:var(--on-ink-4);}
#products .fam-btn .count{background:rgba(255,255,255,0.07);color:var(--on-ink-2);}
#products .fam-btn[aria-selected="true"]{background:var(--on-ink);color:var(--ink);border-color:var(--on-ink);}
#products .fam-btn[aria-selected="true"] .no{color:var(--violet-ink);}
#products .fam-btn[aria-selected="true"] .count{background:rgba(123,88,197,0.20);color:var(--violet-ink);}

#products .fam-panel{background:var(--ink-panel-a);border-color:var(--rule-ink);box-shadow:none;}
#products .fam-head{border-bottom-color:var(--rule-ink);
  background:linear-gradient(180deg,rgba(123,88,197,0.15),rgba(123,88,197,0));}
#products .fam-head .bar{background:linear-gradient(180deg,var(--amber),var(--violet));}
#products .fam-head p{color:var(--on-ink-2);}

#products .fam-items{background:var(--rule-ink);}
#products .fam-item{background:var(--ink-panel-a);color:var(--on-ink);}
#products .fam-item:hover,#products .fam-item:focus-visible{
  background:#171a24;box-shadow:0 var(--s-6) var(--s-10) rgba(0,0,0,0.55);}
#products .fam-item p{color:var(--on-ink-2);}
#products .fam-item .fi-kind{color:var(--on-ink-4);border-color:var(--rule-ink);}
#products .fam-item .fi-go{color:var(--on-ink-4);}
#products .fam-item:hover .fi-go{color:var(--violet-lite);}
#products .fam-item[data-kind="product"] .fi-kind{color:var(--violet-lite);
  border-color:rgba(182,171,255,0.30);background:rgba(123,88,197,0.14);}

#products .fam-band{background:var(--ink-panel-a);border-top-color:rgba(232,129,34,0.32);}
#products .fam-band:not(:first-child){border-top-color:rgba(123,88,197,0.32);}
#products .fam-band h5{color:var(--amber);}
#products .fam-band:not(:first-child) h5{color:var(--violet-lite);}
#products .fam-band p{color:var(--on-ink-2);}
#products .fam-item[data-kind="layer"] .fi-kind{color:var(--amber);
  border-color:rgba(232,129,34,0.32);background:rgba(232,129,34,0.12);}
#products .fam-item[data-kind="layer"]::after{background:linear-gradient(90deg,var(--amber),#f2a559);}
#products .fam-item[data-kind="layer"]:hover .fi-go{color:var(--amber);}
#products .fam-fill{background:var(--ink-panel-a);}

/* the Module Builder card at the foot of the section */
#products .surface{background:var(--ink-panel-a);border-color:var(--rule-ink);box-shadow:none;}
#products .surface:hover{background:#171a24;border-color:rgba(182,171,255,0.34);
  box-shadow:0 var(--s-4) var(--s-8) rgba(0,0,0,0.50);}
#products .surface .kind{color:var(--violet-lite);
  background:rgba(123,88,197,0.14);border-color:rgba(182,171,255,0.28);}
#products .surface p{color:var(--on-ink-2);}

/* the TagFlow proof block at the very foot of the section */
#products .proof .kicker{color:var(--violet-lite);}
#products .proof p{color:var(--on-ink-2);}
/* The .shot chrome stays light on purpose — it is a mock of a light app, and
   .sec-dark .shot has already taken care of its border and shadow. */

/* #products and #deploy are now both ink and sit back to back, so the section
   boundary would be ~250px of unbroken dark. One hairline marks the seam. */
#deploy{border-top:1px solid var(--rule-ink);}

.proof{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-lg);align-items:center;margin-top:var(--head-y);}
.proof .kicker{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:var(--track);text-transform:uppercase;color:var(--violet-ink);margin-bottom:var(--s-4);}
.proof h3{font-size:var(--d-lg);line-height:var(--lh-display);}
.proof p{margin:var(--s-5) 0 var(--s-6);font-size:var(--t-lg);line-height:var(--lh-body);color:var(--on-cream);max-width:560px;}

/* --- speed --------------------------------------------------------------- */
.speed{position:relative;overflow:hidden;background:radial-gradient(900px 520px at 22% 0%,rgba(123,88,197,0.24),rgba(8,9,13,0) 62%),var(--ink);}
.speed .grid-lines{
  -webkit-mask-image:radial-gradient(720px 420px at 24% 6%,#000,transparent 76%);
          mask-image:radial-gradient(720px 420px at 24% 6%,#000,transparent 76%);
}
.speed .grid-lines::before{
  background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);
}
.speed .wrap{position:relative;}
.speed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);}
.speed-card{position:relative;overflow:hidden;padding:var(--card-p);border-radius:var(--r);border:1px solid var(--rule-ink);
  background:linear-gradient(180deg,rgba(255,255,255,0.045),rgba(255,255,255,0.012));
  transition:border-color .3s ease,background .3s ease,transform .35s var(--ease);}
.speed-card::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--violet-lite),var(--violet));
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease);}
.speed-card:hover{border-color:rgba(123,88,197,0.45);background:linear-gradient(180deg,rgba(123,88,197,0.12),rgba(255,255,255,0.015));transform:translateY(-4px);}
.speed-card:hover::after{transform:scaleX(1);}
.speed-card h3{margin-bottom:var(--s-2);font-size:var(--d-sm);}
/* which modules the Squid actually runs on, so the claim stays checkable
   against the suite in section 06 rather than floating free. */
.squid-mod{font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:0.12em;
  text-transform:uppercase;color:var(--violet-lite);margin-bottom:var(--s-3);}
.speed-card p{font-size:var(--t-sm);line-height:var(--lh-body);color:var(--on-ink-2);}

/* --- UK ------------------------------------------------------------------ */
.uk-h2{margin-bottom:var(--head-y);font-size:var(--d-xl);max-width:900px;}
.uk-band{display:grid;grid-template-columns:1.2fr 1fr;border:1px solid var(--rule-cream);border-radius:var(--r-lg);background:var(--card);overflow:hidden;box-shadow:0 2px 4px rgba(26,16,51,0.04);}
.uk-copy{padding:var(--panel-p);border-right:1px solid var(--rule-cream);}
.uk-flagpill{display:inline-flex;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-3);border-radius:var(--r-pill);border:1px solid rgba(123,88,197,0.28);background:rgba(123,88,197,0.07);margin-bottom:var(--s-6);}
.uk-flagpill em{font-style:normal;font-size:var(--t-md);line-height:1;}
.uk-flagpill span{font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:var(--track);text-transform:uppercase;color:var(--violet-ink);}
.uk-copy h3{font-size:var(--d-lg);line-height:var(--lh-display);}
.uk-copy p{margin-top:var(--s-6);font-size:var(--t-lg);line-height:1.68;color:var(--on-cream);max-width:580px;}
.uk-copy .ulink{margin-top:var(--s-7);}
.uk-facts > div{padding:var(--s-7) var(--card-p);border-bottom:1px solid var(--rule-cream-2);transition:background .3s ease;}
.uk-facts > div:hover{background:rgba(123,88,197,.05);}
.uk-facts > div:last-child{border-bottom:0;}
.uk-facts h4{margin-bottom:var(--s-2);font-size:var(--d-xs);}
.uk-facts p{font-size:var(--t-sm);line-height:var(--lh-body);color:var(--on-cream-2);}

/* --- demo ---------------------------------------------------------------- */
.demo-grid{display:grid;grid-template-columns:1fr 540px;gap:var(--gap-lg);}
.demo-kicker{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:var(--track);text-transform:uppercase;color:var(--violet-ink);margin-bottom:var(--s-6);}
.demo-copy h2{font-size:var(--d-xl);}
.demo-copy > p{margin:var(--s-6) 0 var(--s-8);font-size:var(--t-xl);line-height:var(--lh-body);color:var(--on-cream);max-width:580px;}
.step{display:flex;gap:var(--s-6);padding:var(--s-5) 0;border-top:1px solid var(--rule-cream);transition:padding-left .35s var(--ease);}
.step:hover{padding-left:var(--s-2);}
.step .n{font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:0.12em;color:var(--violet-ink);padding-top:var(--s-1);}
.step .t{font-family:var(--display);font-size:var(--d-xs);font-weight:500;letter-spacing:-0.02em;}
.step .b{margin-top:var(--s-1);font-size:var(--t-md);line-height:var(--lh-body);color:var(--on-cream-2);}
.demo-copy .ulink{margin-top:var(--s-6);}

.demo-form{align-self:start;position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:linear-gradient(155deg,var(--ink-panel-a),var(--ink-panel-b));
  border:1px solid rgba(123,88,197,0.22);box-shadow:0 var(--s-8) var(--s-11) rgba(26,16,51,0.24);
  padding:var(--panel-p);color:var(--on-ink);}
.demo-form::before{content:"";position:absolute;top:-150px;right:-130px;width:440px;height:440px;border-radius:50%;
  background:radial-gradient(circle,rgba(123,88,197,0.22),rgba(123,88,197,0) 66%);pointer-events:none;
  animation:aurora 18s ease-in-out infinite;}
.demo-form > div{position:relative;}
.demo-form h3{font-size:var(--d-md);}
.demo-form .hint{margin:var(--s-2) 0 var(--s-6);font-family:var(--mono);font-size:var(--t-mono);letter-spacing:0.08em;color:var(--violet);}
.fields{display:flex;flex-direction:column;gap:var(--s-5);}
.fields label{display:block;}
.fields .lbl{display:block;font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:0.14em;text-transform:uppercase;color:var(--on-ink-2);margin-bottom:var(--s-2);}
.fields input,.fields select,.fields textarea{width:100%;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.04);
  padding:var(--s-3) var(--s-4);font-size:var(--t-md);color:var(--on-ink);outline:none;border-radius:var(--r-sm);
  transition:border-color .22s ease,background .22s ease,box-shadow .22s ease;}
.fields input::placeholder,.fields textarea::placeholder{color:var(--on-ink-4);}
.fields input:focus,.fields select:focus,.fields textarea:focus{border-color:var(--violet);background:rgba(123,88,197,0.08);box-shadow:0 0 0 3px rgba(123,88,197,.14);}
.fields textarea{resize:vertical;min-height:104px;}
.fields option{color:var(--ink-text);}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);}
.submit{width:100%;border:0;background:linear-gradient(180deg,#fff,#e4e0f6);color:var(--ink);padding:var(--s-4);font-size:var(--t-md);font-weight:600;
  cursor:pointer;border-radius:var(--r-sm);box-shadow:0 var(--s-3) var(--s-7) rgba(123,88,197,0.26);transition:background .3s ease,transform .25s var(--ease),box-shadow .3s ease;}
.submit:hover{background:linear-gradient(180deg,#c9bfff,#9c8bf4);transform:translateY(-2px);box-shadow:0 var(--s-4) var(--s-9) rgba(123,88,197,0.36);}
.submit[disabled]{opacity:.6;cursor:not-allowed;transform:none;}
.fine{font-size:var(--t-xs);line-height:var(--lh-body);color:var(--on-ink-4);text-align:center;}
.form-msg{font-size:var(--t-sm);border-radius:var(--r-sm);padding:0;max-height:0;overflow:hidden;transition:.3s var(--ease);}
.form-msg.show{padding:var(--s-3) var(--s-4);max-height:200px;}
.form-msg.ok{background:rgba(22,163,74,.14);color:#86efac;border:1px solid rgba(22,163,74,.4);}
.form-msg.err{background:rgba(220,38,38,.12);color:#fca5a5;border:1px solid rgba(220,38,38,.4);}

/* --- footer -------------------------------------------------------------- */
footer{position:relative;overflow:hidden;background:var(--ink);color:var(--foot);padding:var(--sec-y) 0 var(--s-8);border-top:1px solid rgba(123,88,197,0.14);}
/* The octopus comes to rest under the end of the page — cropped by the corner,
   faint enough to be texture. It is the mark the header and the back-to-top
   button already loaded, so it costs nothing. (Not marrinn-octopus.svg: that
   art is solid #000 and a luminance mask of black masks everything out.)
   This is the one bold thing down here; the grid above it stays hairlines. */
footer::after{
  content:"";position:absolute;pointer-events:none;
  right:0;bottom:calc(var(--s-10) * -1);
  /* the overhang is a fraction of the mark, not a fixed offset, so the same
     third of it stays off the page at every width */
  transform:translateX(34%);
  width:clamp(300px,32vw,480px);aspect-ratio:256/202;opacity:.08;
  background:url(/assets/img/w/octopus-256.webp) 0 0/100% 100% no-repeat;
}
footer > .wrap{position:relative;z-index:1;}
/* the same hairline-column device as .hero-stats, so the ragged link lists
   read as one grid instead of five things floating */
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:var(--s-8);}
.foot-col{border-left:1px solid var(--rule-ink);padding-left:var(--s-7);}
.foot-brand .logo{font-size:var(--d-sm);}
.foot-brand p{margin-top:var(--s-5);font-size:var(--t-sm);line-height:1.68;max-width:34ch;color:var(--on-ink-3);}
/* the strapline is the company's actual positioning line — set it like one,
   in the display face, not as a 10px label */
.foot-tag{margin-top:var(--s-7);padding-top:var(--s-6);border-top:1px solid var(--rule-ink);
  font-family:var(--display);font-size:var(--d-xs);line-height:var(--lh-head);letter-spacing:-0.01em;}
.foot-tag .a{display:block;color:var(--on-ink-2);}
.foot-tag .b{display:block;color:var(--violet-lite);}
.foot-col .h{font-family:var(--mono);font-size:var(--t-mono-s);font-weight:500;letter-spacing:var(--track);text-transform:uppercase;color:var(--foot);margin-bottom:var(--s-5);}
.foot-col div{display:flex;flex-direction:column;gap:var(--s-3);align-items:flex-start;}
.foot-col a{font-size:var(--t-sm);color:var(--on-ink-2);transition:color .2s ease,transform .25s var(--ease);}
.foot-col a:hover{color:var(--on-ink);transform:translateX(3px);}
/* statutory trading disclosure — Reg 25, SI 2015/17. Must stay readable,
   so it sits above the copyright line rather than inside it. */
.foot-legal{margin-top:var(--s-9);padding-top:var(--s-6);border-top:1px solid var(--rule-ink);}
.foot-legal p{max-width:78ch;font-size:var(--t-xs);line-height:var(--lh-snug);color:var(--foot);}
.foot-legal + .foot-bot{margin-top:var(--s-5);padding-top:var(--s-5);border-top:0;}
.foot-bot{display:flex;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-9);padding-top:var(--s-6);border-top:1px solid var(--rule-ink);font-size:var(--t-xs);color:var(--foot);}

/* --- sub-page hero ------------------------------------------------------- */
.phero{position:relative;overflow:hidden;padding:clamp(48px,6.4vw,92px) 0 clamp(40px,5vw,72px);
  background:radial-gradient(1000px 560px at 50% -20%,rgba(123,88,197,0.26),rgba(8,9,13,0) 62%),var(--ink);}
.phero .crumbs{font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:0.14em;text-transform:uppercase;color:var(--on-ink-4);}
.phero .crumbs a{transition:color .25s ease;}
.phero .crumbs a:hover{color:var(--violet);}
.phero h1{margin-top:var(--s-6);font-size:clamp(36px,5.6vw,80px);line-height:var(--lh-display);max-width:18ch;}
.phero h1 em{font-style:italic;font-weight:400;color:var(--violet-lite);}
.phero .sub{margin-top:var(--s-6);max-width:62ch;font-size:var(--t-xl);line-height:var(--lh-body);color:var(--on-ink-2);}
.phero-cta{display:flex;gap:var(--s-3);margin-top:var(--s-8);flex-wrap:wrap;}
.phero-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-top:var(--head-y);}
.phero-meta div{padding:var(--s-5);border-radius:var(--r);border:1px solid var(--rule-ink);background:rgba(255,255,255,0.03);
  transition:border-color .3s ease,transform .3s var(--ease);}
.phero-meta div:hover{border-color:rgba(123,88,197,.4);transform:translateY(-3px);}
.phero-meta b{display:block;font-size:var(--t-sm);font-weight:600;color:var(--on-ink);margin-bottom:var(--s-1);}
.phero-meta span{font-size:var(--t-xs);color:var(--on-ink-4);line-height:var(--lh-snug);}

/* --- blocks reused by the product pages --------------------------------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);}
.feature{display:grid;grid-template-columns:1.02fr 1.18fr;gap:var(--gap-lg);align-items:center;padding:var(--head-y) 0;}
.feature.rev .ftext{order:2;} .feature.rev .fmedia{order:1;}
.ftext .kicker{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:var(--track);text-transform:uppercase;color:var(--violet-ink);margin-bottom:var(--s-3);display:block;}
.sec-dark .ftext .kicker{color:var(--violet);}
.ftext h3{font-size:var(--d-lg);margin-bottom:var(--s-5);line-height:var(--lh-display);}
.ftext p.lead{font-size:var(--t-lg);line-height:var(--lh-body);color:var(--on-cream);}
.sec-dark .ftext p.lead{color:var(--on-ink-2);}
.flist{list-style:none;margin-top:var(--s-6);}
.flist li{position:relative;padding:var(--s-3) 0 var(--s-3) var(--s-6);font-size:var(--t-sm);color:var(--on-cream);border-bottom:1px solid var(--rule-cream-2);}
.flist li:last-child{border-bottom:0;}
.flist li::before{content:"";position:absolute;left:0;top:calc(var(--s-3) + 0.55em);width:7px;height:7px;border-radius:50%;background:var(--violet-ink);}
.flist li b{font-weight:600;color:var(--ink-text);}
.sec-dark .flist li{color:var(--on-ink-2);border-bottom-color:var(--rule-ink);}
.sec-dark .flist li::before{background:var(--violet);}
.sec-dark .flist li b{color:var(--on-ink);}

.shot{border-radius:var(--r);border:1px solid var(--rule-cream);overflow:hidden;background:var(--card);box-shadow:0 var(--s-6) var(--s-10) rgba(26,16,51,0.16);
  transition:transform .5s var(--ease),box-shadow .5s ease;}
.shot:hover{transform:translateY(-4px);box-shadow:0 var(--s-8) var(--s-11) rgba(26,16,51,0.22);}
.sec-dark .shot,.hero .shot{border-color:var(--rule-ink);box-shadow:0 var(--s-8) var(--s-11) rgba(0,0,0,0.5);}
.shot .bar{display:flex;align-items:center;gap:var(--s-1);height:36px;padding:0 var(--s-3);background:#f0edf9;border-bottom:1px solid var(--rule-cream);}
.shot .bar i{width:9px;height:9px;border-radius:50%;background:#d9d5ea;}
.shot .bar .url{margin-left:var(--s-2);font-family:var(--mono);font-size:var(--t-mono-s);color:var(--on-cream-3);}
.shot img{cursor:zoom-in;}

.mini{padding:var(--card-p);background:var(--card);border:1px solid var(--rule-cream);border-radius:var(--r);
  transition:border-color .3s ease,box-shadow .35s ease,transform .35s var(--ease);}
.mini:hover{border-color:rgba(123,88,197,0.42);box-shadow:0 var(--s-4) var(--s-8) rgba(123,88,197,0.14);transform:translateY(-4px);}
.mini h4{font-size:var(--d-xs);margin-bottom:var(--s-2);}
.mini p{font-size:var(--t-sm);line-height:var(--lh-body);color:var(--on-cream-2);}
.sec-dark .mini{background:linear-gradient(180deg,rgba(255,255,255,0.045),rgba(255,255,255,0.012));border-color:var(--rule-ink);}
.sec-dark .mini:hover{border-color:rgba(123,88,197,0.45);}
.sec-dark .mini p{color:var(--on-ink-2);}

.cmp-wrap{overflow-x:auto;border:1px solid var(--rule-cream);border-radius:var(--r-lg);background:var(--card);}
table.cmp{width:100%;border-collapse:collapse;min-width:720px;}
table.cmp th,table.cmp td{padding:var(--s-4) var(--s-5);text-align:left;border-bottom:1px solid var(--rule-cream-2);font-size:var(--t-sm);color:var(--on-cream);}
table.cmp thead th{font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:var(--track);text-transform:uppercase;color:var(--on-cream-3);font-weight:500;}
table.cmp thead th.me{color:var(--violet-ink);}
table.cmp tbody tr{transition:background .25s ease;}
table.cmp tbody tr:hover{background:rgba(123,88,197,.04);}
table.cmp td:first-child,table.cmp th:first-child{font-weight:600;color:var(--ink-text);}
table.cmp td.me{background:rgba(123,88,197,0.08);font-weight:600;color:var(--violet-ink);}
.yes{color:var(--ok);font-weight:600;} .no{color:#b9bcc4;} .mid{color:#b45309;}

.cta-strip{background:linear-gradient(155deg,var(--ink-panel-a),var(--ink-panel-b));border-top:1px solid rgba(123,88,197,0.18);padding:var(--sec-y) 0;}
.cta-strip .in{display:flex;align-items:center;justify-content:space-between;gap:var(--s-7);flex-wrap:wrap;}
.cta-strip h3{font-size:var(--d-lg);max-width:20ch;color:var(--on-ink);line-height:var(--lh-display);}
.cta-strip p{margin-top:var(--s-3);font-size:var(--t-lg);color:var(--on-ink-2);max-width:54ch;}
.cta-actions{display:flex;gap:var(--s-3);flex-wrap:wrap;}

.contact-grid{display:grid;grid-template-columns:1fr 540px;gap:var(--gap-lg);align-items:start;}
/* a section head nested inside a column is single-column, and its display type
   has to come down or it sets one word per line */
.contact-grid .head-2col{grid-template-columns:1fr;gap:var(--s-4);}
.contact-grid h2{font-size:var(--d-lg);}
.cblock{border-top:1px solid var(--rule-cream);padding:var(--s-6) 0;}
.cblock .lbl{font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:var(--track);text-transform:uppercase;color:var(--violet-ink);}
.cblock .val{font-family:var(--display);font-size:var(--d-md);font-weight:500;margin-top:var(--s-3);letter-spacing:-0.025em;color:var(--ink-text);word-break:break-word;}
.cblock address{font-style:normal;font-family:var(--display);font-size:var(--d-xs);margin-top:var(--s-3);line-height:var(--lh-snug);color:var(--ink-text);}
.cblock p{margin-top:var(--s-3);font-size:var(--t-sm);color:var(--on-cream-2);}
.cblock .kv{list-style:none;margin-top:var(--s-3);}
.cblock .kv li{display:flex;justify-content:space-between;gap:var(--s-4);padding:var(--s-3) 0;border-bottom:1px solid var(--rule-cream-2);font-size:var(--t-sm);color:var(--on-cream-2);}
.cblock .kv li:last-child{border-bottom:0;}
.cblock .kv b{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-text);text-align:right;}
.placeholder{display:inline-block;background:rgba(123,88,197,0.10);color:var(--violet-ink);border:1px dashed rgba(123,88,197,0.5);border-radius:6px;padding:2px var(--s-2);font-family:var(--mono);font-size:var(--t-xs);}
.map-note{background:var(--cream-2);border:1px solid var(--rule-cream);border-radius:var(--r);padding:var(--card-p);text-align:center;font-size:var(--t-xs);color:var(--on-cream-2);}
.map-note img{display:block;width:100%;height:auto;border-radius:calc(var(--r) / 2);}
.map-note figcaption{margin-top:var(--s-4);line-height:var(--lh-snug);}

.uk-hero{position:relative;overflow:hidden;padding:var(--sec-y) 0;background:radial-gradient(900px 520px at 50% 0%,rgba(123,88,197,0.24),rgba(8,9,13,0) 62%),var(--ink);text-align:center;}
.uk-hero .flag{font-size:52px;line-height:1;}
.uk-hero h2{margin:var(--s-6) auto 0;font-size:clamp(34px,6.4vw,84px);max-width:15ch;line-height:1.0;color:var(--on-ink);}
.uk-hero h2 em{font-style:italic;color:var(--violet-lite);}
.uk-hero > .wrap > p{margin:var(--s-6) auto 0;max-width:64ch;font-size:var(--t-xl);line-height:var(--lh-body);color:var(--on-ink-2);}
.uk-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:var(--head-y);}
.uk-nums div{padding:var(--card-p);border-radius:var(--r);border:1px solid var(--rule-ink);background:rgba(255,255,255,0.03);
  transition:border-color .3s ease,transform .3s var(--ease);}
.uk-nums div:hover{border-color:rgba(123,88,197,.4);transform:translateY(-3px);}
.uk-nums b{display:block;font-family:var(--display);font-size:var(--d-xs);font-weight:500;color:var(--on-ink);letter-spacing:-0.02em;}
.uk-nums span{display:block;margin-top:var(--s-2);font-size:var(--t-xs);color:var(--on-ink-4);line-height:var(--lh-snug);}

/* ==========================================================================
   OUR STORY  (contact / company page)
   Replaced the old .uk-hero flag block. Image left, narrative right, so the
   copy reads as a column of prose rather than centred marketing lines. The
   image column takes the picture at its natural ratio — no crop, because the
   photograph is not ours to recompose.
   ========================================================================== */
.story{position:relative;overflow:hidden;padding:var(--sec-y) 0;
  background:radial-gradient(900px 620px at 18% 0%,rgba(123,88,197,0.22),rgba(8,9,13,0) 64%),var(--ink);
  color:var(--on-ink);}
.story-grid{max-width:104ch;margin:0 auto;text-align:center;}
.story-copy .shead-top{display:flex;justify-content:center;}
.story-copy h1,.story-copy h2{margin-left:auto;margin-right:auto;}
.story-copy p{margin-left:auto;margin-right:auto;}
.story.first{padding-top:clamp(48px,6.4vw,92px);}
.story-copy .crumbs{font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:0.14em;
  text-transform:uppercase;color:var(--on-ink-4);margin-bottom:var(--s-6);}
.story-copy .crumbs a{transition:color .25s ease;}
.story-copy .crumbs a:hover{color:var(--violet);}
.story-copy h1{margin-top:var(--s-4);font-family:var(--display);font-size:clamp(36px,5.6vw,80px);
  line-height:var(--lh-display);letter-spacing:-0.025em;color:var(--on-ink);max-width:18ch;}
.story-copy h1 em{font-style:italic;font-weight:400;color:var(--violet-lite);}
.story-copy h2{margin-top:var(--s-4);font-family:var(--display);font-size:var(--d-xl);
  line-height:var(--lh-display);letter-spacing:-0.025em;color:var(--on-ink);max-width:18ch;}
.story-copy h2 em{font-style:italic;color:var(--violet-lite);}
.story-copy p{margin-top:var(--s-6);max-width:62ch;font-size:var(--t-lg);
  line-height:var(--lh-body);color:var(--on-ink-2);}
.story-copy p b{color:var(--on-ink);font-weight:500;}
.story-copy .story-lead{margin-top:var(--head-y);font-size:var(--t-xl);color:var(--on-ink);}
.story-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:var(--head-y);text-align:left;}
.story-facts > div{padding:var(--card-p);border-radius:var(--r);border:1px solid var(--rule-ink);
  background:rgba(255,255,255,0.03);transition:border-color .4s var(--ease),transform .4s var(--ease);}
.story-facts > div:hover{border-color:rgba(123,88,197,.4);transform:translateY(-3px);}
.story-facts b{display:block;font-family:var(--display);font-size:var(--d-xs);font-weight:500;
  color:var(--on-ink);letter-spacing:-0.02em;}
.story-facts span{display:block;margin-top:var(--s-2);font-size:var(--t-xs);
  color:var(--on-ink-4);line-height:var(--lh-snug);}
.story-beat{margin-top:var(--sec-y);}

/* --- product-page components -------------------------------------------
   These classes were live in the markup but had lost their rules in an earlier
   rename, so they rendered as unstyled runs of text. Rebuilt on the same
   tokens as everything else rather than reinvented.
   ------------------------------------------------------------------------ */

/* the eyebrow sits above both columns of a two-column section head */
.head-2col .shead-top{grid-column:1/-1;margin-bottom:calc(var(--s-2) * -1);}
.shead-top .kicker{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:var(--track);
  text-transform:uppercase;color:var(--violet-ink);}
.sec-dark .shead-top .kicker{color:var(--violet);}

/* .frame is the same browser-chrome mock as .shot */
.frame{border-radius:var(--r);border:1px solid var(--rule-cream);overflow:hidden;background:var(--card);
  box-shadow:0 var(--s-6) var(--s-10) rgba(26,16,51,0.16);}
.frame .bar{display:flex;align-items:center;gap:var(--s-1);height:36px;padding:0 var(--s-3);
  background:#f0edf9;border-bottom:1px solid var(--rule-cream);}
.frame .bar i{width:9px;height:9px;border-radius:50%;background:#d9d5ea;}
.frame .bar .url{margin-left:var(--s-2);font-family:var(--mono);font-size:var(--t-mono-s);color:var(--on-cream-3);}

/* a titled panel — a labelled strip over a padded body */
.panel{border:1px solid var(--rule-cream);border-radius:var(--r-lg);background:var(--card);overflow:hidden;
  box-shadow:0 2px 4px rgba(26,16,51,0.04);}
.panel-bar{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-4) var(--card-p);
  border-bottom:1px solid var(--rule-cream);background:linear-gradient(180deg,rgba(123,88,197,0.07),rgba(123,88,197,0));
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:0.1em;text-transform:uppercase;color:var(--on-cream-3);}
.panel-bar b{font-weight:500;color:var(--ink-text);}
.panel-body{padding:var(--card-p);}
.sec-dark .panel{background:linear-gradient(155deg,var(--ink-panel-a),var(--ink-panel-b));border-color:rgba(123,88,197,0.22);}
.sec-dark .panel-bar{border-bottom-color:var(--rule-ink);color:var(--on-ink-4);}
.sec-dark .panel-bar b{color:var(--on-ink);}

.lede{font-size:var(--t-lg);line-height:var(--lh-body);color:var(--on-cream);margin-bottom:var(--s-5);}
.sec-dark .lede{color:var(--on-ink-2);}

/* status glyphs */
.tick{color:var(--ok);font-weight:600;flex:none;}
.x{display:inline-block;margin-right:var(--s-2);color:#c2544a;font-weight:600;}
.live{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block;
  animation:mrn-pulse 2.2s ease-out infinite;}

/* a run log inside a panel: glyph · description · status */
.cl-out{list-style:none;}
.cl-out li{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) 0;
  border-bottom:1px solid var(--rule-cream-2);font-size:var(--t-sm);color:var(--on-cream);}
.cl-out li:last-child{border-bottom:0;}
.cl-out li > span:nth-child(2){flex:1;min-width:0;}
.cl-out li b{font-weight:600;color:var(--ink-text);}
.cl-out .kind{font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:0.14em;text-transform:uppercase;
  color:var(--violet-ink);background:rgba(123,88,197,.08);border:1px solid rgba(123,88,197,.18);
  padding:var(--s-1) var(--s-2);border-radius:var(--s-1);flex:none;}

/* a typed query above its result */
.cl-prompt{display:flex;align-items:baseline;gap:var(--s-2);font-size:var(--t-md);line-height:var(--lh-body);
  color:var(--ink-text);padding-bottom:var(--s-5);border-bottom:1px solid var(--rule-cream-2);margin-bottom:var(--s-5);}
.cl-prompt .sig{color:var(--violet-ink);font-weight:600;flex:none;}

/* the bar chart is the bars themselves — no library, no axis furniture */
.chart{display:flex;align-items:flex-end;gap:var(--s-2);height:180px;}
.chart i{flex:1;border-radius:var(--r-sm) var(--r-sm) 2px 2px;
  background:linear-gradient(180deg,var(--violet),var(--violet-ink));opacity:.85;
  transition:opacity .25s ease;}
.chart i:hover{opacity:1;}
.chart-x{display:flex;gap:var(--s-2);margin-top:var(--s-2);}
.chart-x span{flex:1;text-align:center;font-family:var(--mono);font-size:var(--t-mono-s);
  letter-spacing:0.12em;color:var(--on-cream-3);}

/* numbered process steps, stacked */
.steps{display:grid;gap:var(--s-2);}
.steps .step{display:block;padding:var(--s-6) 0;}
.steps .num{display:block;font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:0.14em;
  text-transform:uppercase;color:var(--violet-ink);margin-bottom:var(--s-3);}
.steps .step h3{font-size:var(--d-sm);margin-bottom:var(--s-2);}
.steps .step p{font-size:var(--t-sm);line-height:var(--lh-body);color:var(--on-cream-2);}

/* what-happens-next list */
.demo-steps{list-style:none;counter-reset:dstep;}
.demo-steps li{counter-increment:dstep;position:relative;padding:var(--s-3) 0 var(--s-3) var(--s-7);
  font-size:var(--t-sm);line-height:var(--lh-body);color:var(--on-cream-2);
  border-bottom:1px solid var(--rule-cream-2);}
.demo-steps li:last-child{border-bottom:0;}
.demo-steps li::before{content:counter(dstep,decimal-leading-zero);position:absolute;left:0;top:var(--s-3);
  font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:0.12em;color:var(--violet-ink);}
.demo-steps li b{font-weight:600;color:var(--ink-text);}
.sec-dark .demo-steps li{color:var(--on-ink-2);border-bottom-color:var(--rule-ink);}
.sec-dark .demo-steps li b{color:var(--on-ink);}

/* contact page: the UK flag block */
.flagwrap{display:flex;justify-content:center;}
.uk-flag{display:block;line-height:0;border-radius:6px;overflow:hidden;
  box-shadow:0 var(--s-3) var(--s-7) rgba(0,0,0,.45);}

/* contact form — same field vocabulary as the homepage form, different markup */
.demo-form input,.demo-form select,.demo-form textarea{width:100%;
  border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.04);
  padding:var(--s-3) var(--s-4);font-size:var(--t-md);color:var(--on-ink);outline:none;border-radius:var(--r-sm);
  transition:border-color .22s ease,background .22s ease,box-shadow .22s ease;}
.demo-form input::placeholder,.demo-form textarea::placeholder{color:var(--on-ink-4);}
.demo-form input:focus,.demo-form select:focus,.demo-form textarea:focus{
  border-color:var(--violet);background:rgba(123,88,197,0.08);box-shadow:0 0 0 3px rgba(123,88,197,.14);}
.demo-form textarea{resize:vertical;min-height:104px;}
.demo-form option{color:var(--ink-text);}
.fieldrow{margin-bottom:var(--s-5);}
.fieldrow > label{display:block;font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:0.14em;
  text-transform:uppercase;color:var(--on-ink-2);margin-bottom:var(--s-2);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);}
.field-row .fieldrow{margin-bottom:var(--s-5);}
.demo-form form .btn{width:100%;margin-top:var(--s-1);}
.form-fine{margin-top:var(--s-4);font-size:var(--t-xs);line-height:var(--lh-body);color:var(--on-ink-4);text-align:center;}

@media(max-width:720px){ .field-row{grid-template-columns:1fr;} }

/* --- boot loader --------------------------------------------------------- */
.boot{position:fixed;inset:0;z-index:9999;display:grid;place-content:center;justify-items:center;gap:var(--s-6);background:var(--ink);
  animation:bootOut .55s cubic-bezier(.4,0,.2,1) 4s forwards;}
.boot.done{animation:bootOut .55s cubic-bezier(.4,0,.2,1) forwards;}
@keyframes bootOut{to{opacity:0;visibility:hidden;}}
.boot-stage{position:relative;display:grid;place-items:center;width:clamp(210px,60vw,260px);aspect-ratio:1;}
.boot-halo{position:absolute;width:77%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(123,88,197,.30) 0%,rgba(123,88,197,.18) 45%,transparent 70%);animation:bootHalo 2.8s ease-in-out infinite;}
@keyframes bootHalo{0%,100%{transform:scale(.82);opacity:.4}50%{transform:scale(1.08);opacity:.95}}
.boot-octo{position:relative;width:49%;animation:bootBreathe 2.8s ease-in-out infinite;filter:drop-shadow(0 12px 26px rgba(123,88,197,.4));}
@keyframes bootBreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.04)}}
.boot-octo i{position:absolute;top:51%;width:11px;height:11px;border-radius:50%;background:var(--amber);filter:blur(4px);
  transform:translate(-50%,-50%);animation:bootEye 2.8s ease-in-out infinite;}
.boot-octo i.l{left:44%;} .boot-octo i.r{left:56%;}
@keyframes bootEye{0%,100%{opacity:.2;transform:translate(-50%,-50%) scale(.7)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.25)}}
.boot-node{position:absolute;display:grid;place-items:center;width:12.3%;aspect-ratio:1;border-radius:var(--r-sm);
  font-size:clamp(12px,3.2vw,15px);background:rgba(123,88,197,.14);border:1px solid rgba(123,88,197,.3);color:var(--violet-pale);
  animation:bootPing 4s ease-in-out infinite;}
.boot-node:nth-child(2){top:0;left:43.8%}      .boot-node:nth-child(3){top:12.7%;left:75%}
.boot-node:nth-child(4){top:43.8%;left:87.7%}  .boot-node:nth-child(5){top:75%;left:75%}
.boot-node:nth-child(6){top:87.7%;left:43.8%}  .boot-node:nth-child(7){top:75%;left:12.7%}
.boot-node:nth-child(8){top:43.8%;left:0}      .boot-node:nth-child(9){top:12.7%;left:12.7%}
.boot-node:nth-child(2){animation-delay:0s}   .boot-node:nth-child(3){animation-delay:.5s}
.boot-node:nth-child(4){animation-delay:1s}   .boot-node:nth-child(5){animation-delay:1.5s}
.boot-node:nth-child(6){animation-delay:2s}   .boot-node:nth-child(7){animation-delay:2.5s}
.boot-node:nth-child(8){animation-delay:3s}   .boot-node:nth-child(9){animation-delay:3.5s}
@keyframes bootPing{
  0%,75%,100%{background:rgba(123,88,197,.14);border-color:rgba(123,88,197,.3);box-shadow:none;color:var(--violet-pale);transform:scale(1);}
  12%{background:var(--amber);border-color:var(--amber);box-shadow:0 0 18px rgba(232,129,34,.6);color:#170630;transform:scale(1.2);}
}
.boot-word{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-ink);}
.boot-word span{color:var(--amber);}
.boot-tag{font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:.34em;text-transform:uppercase;color:var(--violet);margin-top:calc(var(--s-4) * -1);}

/* The page-transition wipe was removed: it put a second full-screen loader
   in front of every internal navigation. Its CSS went with it. */

/* --- scrollbar ----------------------------------------------------------- */
/* The thumb is the same arm as the header's, seen end-on: a repeating body
   segment plus a tapered tip pinned to the far end — the one thing a native
   thumb cannot do by itself. Both layers are anchored to that end so the
   sucker rows always line up with the tip, whatever length the thumb is.
   No var() in here: WebKit's scrollbar pseudo-elements do not resolve it. */
/* scrollbar-color must stay behind @supports. Setting it unconditionally
   switches Chrome to the standard scrollbar and throws away every
   ::-webkit-scrollbar rule below — which is what used to happen here. */
@supports not selector(::-webkit-scrollbar){
  html{scrollbar-width:thin;scrollbar-color:#6c30c0 transparent;}
}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-button{display:none;}
/* a faint rail, so the arm reads as travelling along something */
::-webkit-scrollbar-track{
  background:linear-gradient(90deg,transparent calc(50% - 1px),
    rgba(139,124,246,.14) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px));
}
::-webkit-scrollbar-track:horizontal{
  background:linear-gradient(180deg,transparent calc(50% - 1px),
    rgba(139,124,246,.14) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px));
}
::-webkit-scrollbar-thumb{
  /* Chrome ignores mask on scrollbar parts, so the taper is a tall elliptical
     bottom radius. Outer radii run 2px over the inner ones we want, because
     background-clip:content-box paints inside the transparent border. */
  border-radius:5px / 5px 5px 21px 21px;border:2px solid transparent;
  background:
    url(/assets/img/arm-thumb-tip.svg) 50% 100%/100% 20px no-repeat,
    url(/assets/img/arm-thumb.svg) 50% 100%/100% 34px repeat-y;
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:horizontal{
  border-radius:5px 21px 21px 5px / 5px;
  background:
    url(/assets/img/arm-thumb-h-tip.svg) 100% 50%/20px 100% no-repeat,
    url(/assets/img/arm-thumb-h.svg) 100% 50%/34px 100% repeat-x;
  background-clip:content-box;
}
/* grabbing it brightens the arm rather than recolouring it */
::-webkit-scrollbar-thumb:hover{
  background:
    linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.16)),
    url(/assets/img/arm-thumb-tip.svg) 50% 100%/100% 20px no-repeat,
    url(/assets/img/arm-thumb.svg) 50% 100%/100% 34px repeat-y;
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:horizontal:hover{
  background:
    linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.16)),
    url(/assets/img/arm-thumb-h-tip.svg) 100% 50%/20px 100% no-repeat,
    url(/assets/img/arm-thumb-h.svg) 100% 50%/34px 100% repeat-x;
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:active{
  background:
    linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.3)),
    url(/assets/img/arm-thumb-tip.svg) 50% 100%/100% 20px no-repeat,
    url(/assets/img/arm-thumb.svg) 50% 100%/100% 34px repeat-y;
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:horizontal:active{
  background:
    linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.3)),
    url(/assets/img/arm-thumb-h-tip.svg) 100% 50%/20px 100% no-repeat,
    url(/assets/img/arm-thumb-h.svg) 100% 50%/34px 100% repeat-x;
  background-clip:content-box;
}
::-webkit-scrollbar-corner{background:transparent;}
/* scroll containers on cream keep the same arm against a faint groove */
.cmp-wrap::-webkit-scrollbar-track{background:var(--rule-cream-2);border-radius:var(--r-pill);}

/* --- back to the top ----------------------------------------------------- */
/* The head is the whole control: it lifts and a ring blooms around it on
   hover, and presses in on click. Nothing is drawn above it — an arm or an
   arrow there just crowds the corner.
   The label is sticky, not a hover tooltip: a control that only names itself
   once you are already on it has told you nothing. It rides along beside the
   head the whole time the button is up.
   Visibility hangs off header.far, set by the scroll handler that already
   drives --sp, so this adds no second listener. */
.totop{
  position:fixed;right:var(--s-6);bottom:var(--s-6);z-index:25;
  display:flex;align-items:center;gap:var(--s-3);text-decoration:none;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
}
header.far ~ .totop{opacity:1;visibility:visible;transform:none;}
.totop-tip{
  font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:.16em;
  text-transform:uppercase;color:var(--violet-lite);
  background:rgba(8,9,13,.95);border:1px solid rgba(139,124,246,.3);
  border-radius:var(--r-pill);padding:var(--s-2) var(--s-4);white-space:nowrap;
  box-shadow:0 var(--s-3) var(--s-6) rgba(0,0,0,.4);
  transition:color .3s ease,border-color .3s ease;
}
.totop-head{
  position:relative;display:grid;place-items:center;width:46px;height:46px;
  border-radius:50%;flex:none;
  background:radial-gradient(120% 120% at 30% 22%,#2b1358,#150729 70%);
  border:1px solid rgba(139,124,246,.34);
  box-shadow:0 var(--s-3) var(--s-7) rgba(0,0,0,.5);
  transition:transform .35s var(--ease),border-color .3s ease,box-shadow .3s ease;
}
/* the logo is 256x202 — height:auto keeps it from being squashed into a circle */
.totop-head img{width:30px;height:auto;transition:transform .45s var(--ease);}
/* a ring blooming outward from the head, contained inside the corner */
.totop-head::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid rgba(139,124,246,.55);opacity:0;transform:scale(.82);
  transition:opacity .35s ease,transform .35s var(--ease);
}
.totop:hover .totop-head,.totop:focus-visible .totop-head{
  transform:translateY(-4px);border-color:rgba(139,124,246,.75);
  box-shadow:0 var(--s-5) var(--s-8) rgba(108,48,192,.45);
}
.totop:hover .totop-head::after,.totop:focus-visible .totop-head::after{
  opacity:1;transform:scale(1);
}
.totop:hover .totop-head img,.totop:focus-visible .totop-head img{
  transform:rotate(-8deg) scale(1.08);
}
.totop:hover .totop-tip,.totop:focus-visible .totop-tip{
  color:#fff;border-color:rgba(139,124,246,.6);
}
/* the press: it settles back down and the ring goes amber for the beat */
.totop:active .totop-head{
  transform:translateY(0) scale(.94);
  transition-duration:.1s;border-color:var(--amber);
  box-shadow:0 var(--s-2) var(--s-5) rgba(255,138,0,.4);
}
.totop:active .totop-head::after{
  border-color:rgba(255,138,0,.7);transform:scale(1.08);transition-duration:.1s;
}
@media(max-width:760px){
  .totop{right:var(--s-4);bottom:var(--s-4);}
  .totop-tip{display:none;}          /* no room, and the head reads on its own */
  .totop-head{width:42px;height:42px;}
}

/* --- cursor -------------------------------------------------------------- */
/* The octopus is the cursor. Two rings so it stays legible on both grounds:
   a light ring on ink, a dark one on cream. 30px is inside every browser's
   custom-cursor limit; the hotspot sits on the head, not the canvas corner.
   Fields and zoomable images keep their native cursors — those carry meaning
   the octopus cannot, and the pointer halo does the job of signalling hover. */
:root{
  --cur:url(/assets/img/cursor-octo.png) 7 5, auto;
  --cur-dark:url(/assets/img/cursor-octo-dark.png) 7 5, auto;
}
body{cursor:var(--cur);}
.sec-cream,.sec-cream-2,.session,.uk-band,.panel,.frame,.shot,.cmp-wrap,.map-note{cursor:var(--cur-dark);}
.demo-form,.layer-panel,.sec-dark,.fam-panel,.cta-strip,.phero,.uk-hero,.story,.hero,footer,header{cursor:var(--cur);}
input,select,textarea{cursor:auto;}
textarea{cursor:auto;}
[data-zoom]{cursor:zoom-in;}
.lightbox{cursor:zoom-out;}
button[disabled],.submit[disabled]{cursor:not-allowed;}
/* Only touch pointers give it back — some desktop browsers report no hover type
   at all, and they should still get the octopus. */
@media (pointer:coarse){
  body,.sec-cream,.sec-cream-2,.session,.fam-panel,.uk-band,.panel,.frame,.shot,
  .cmp-wrap,.map-note,.demo-form,.layer-panel,.sec-dark,.cta-strip,.phero,.uk-hero,.hero,
  footer,header{cursor:auto;}
}

/* --- pointer halo -------------------------------------------------------- */
/* A soft violet light that trails the cursor and swells over anything
   clickable. Fine pointers only — it is meaningless on touch — and it sits
   behind everything, so it can never eat a click. */
.halo{
  position:fixed;top:0;left:0;z-index:1;pointer-events:none;
  width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;
  background:radial-gradient(circle,rgba(123,88,197,0.16),rgba(123,88,197,0) 68%);
  /* No transform transition — a rAF loop already eases this every frame, and
     the two fight each other into continuous compositor work. */
  opacity:0;transition:opacity .5s ease;
  will-change:transform;
}
.halo.on{opacity:1;}
.halo.hot{background:radial-gradient(circle,rgba(123,88,197,0.30),rgba(232,129,34,0.08) 40%,rgba(123,88,197,0) 70%);}
/* on cream the same light has to be denser to register at all */
.halo.light{background:radial-gradient(circle,rgba(123,88,197,0.13),rgba(123,88,197,0) 68%);}
.halo.light.hot{background:radial-gradient(circle,rgba(123,88,197,0.22),rgba(123,88,197,0) 70%);}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){ .halo{display:none;} }

/* --- utility ------------------------------------------------------------- */
.skip{position:fixed;top:var(--s-3);left:var(--s-3);z-index:10000;transform:translateY(-200%);background:var(--violet);color:var(--ink);
  padding:var(--s-3) var(--s-5);border-radius:var(--r-sm);font-size:var(--t-sm);font-weight:600;transition:transform .2s;}
.skip:focus{transform:none;}
.offline-bar{position:fixed;left:50%;bottom:var(--s-5);transform:translate(-50%,140%);z-index:9998;display:flex;align-items:center;gap:var(--s-2);
  max-width:calc(100vw - var(--s-7));background:var(--ink-panel-a);border:1px solid rgba(123,88,197,.3);color:var(--on-ink);
  padding:var(--s-3) var(--s-5);border-radius:var(--r-pill);font-size:var(--t-xs);box-shadow:0 var(--s-5) var(--s-9) rgba(0,0,0,.6);transition:transform .4s var(--ease);}
.offline-bar.show{transform:translate(-50%,0);}
.offline-bar::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--amber);flex:none;}
.offline-bar.online::before{background:var(--ok);}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(8,9,13,.94);backdrop-filter:blur(6px);display:none;
  align-items:center;justify-content:center;padding:clamp(16px,4vw,48px);cursor:zoom-out;}
.lightbox.open{display:flex;animation:fadeIn .3s ease both;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.lightbox img{max-width:95vw;max-height:92vh;border-radius:var(--r);animation:zoomIn .4s var(--ease) both;}
@keyframes zoomIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* --- scroll reveal ------------------------------------------------------- */
@keyframes mrn-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes mrn-riseScale{from{opacity:0;transform:translateY(24px) scale(.985)}to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(24px);}
.reveal.in{animation:mrn-rise .85s var(--ease) both;}
/* children of a [data-stagger] container come in one after another */
[data-stagger] > *{opacity:0;transform:translateY(24px);}
[data-stagger].in > *{animation:mrn-riseScale .8s var(--ease) both;}
[data-stagger].in > *:nth-child(1){animation-delay:.00s}
[data-stagger].in > *:nth-child(2){animation-delay:.07s}
[data-stagger].in > *:nth-child(3){animation-delay:.14s}
[data-stagger].in > *:nth-child(4){animation-delay:.21s}
[data-stagger].in > *:nth-child(5){animation-delay:.28s}
[data-stagger].in > *:nth-child(6){animation-delay:.35s}
[data-stagger].in > *:nth-child(7){animation-delay:.42s}
[data-stagger].in > *:nth-child(n+8){animation-delay:.49s}

@media (prefers-reduced-motion:reduce){
  .reveal,[data-stagger] > *{opacity:1;transform:none;}
  .reveal.in,[data-stagger].in > *{animation:none;}
  .sec::before{opacity:.5;transform:none;}
  *,*::before,*::after{animation:none!important;transition:none!important;}
  html{scroll-behavior:auto;}
  .boot{display:none;}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media(max-width:1180px){
  .surfaces,.grid-4{grid-template-columns:repeat(2,1fr);}
  .surfaces.cols-3{grid-template-columns:repeat(2,1fr);}
  .hero-stats{grid-template-columns:repeat(2,1fr);row-gap:var(--s-6);}
  .hero-stats > div:nth-child(odd){padding-left:0;border-left:0;}
  .fam-items{grid-template-columns:repeat(2,1fr);}
  .speed-grid,.grid-3{grid-template-columns:repeat(2,1fr);}
  .demo-grid,.contact-grid{grid-template-columns:1fr;}
  .demo-form{max-width:620px;}
  .phero-meta{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:960px){
  nav.links{display:none;}
  .burger{display:flex;}
  .nav-cta .btn-ghost-sm{display:none;}
  /* the burger panel: dropdowns flatten into labelled groups, no second tap */
  nav.links.open{
    display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;align-items:stretch;
    max-height:calc(100vh - var(--hdr-h-sm));max-height:calc(100dvh - var(--hdr-h-sm));overflow-y:auto;
    background:#0c0e14;border-bottom:1px solid rgba(123,88,197,0.18);padding:var(--s-2) var(--pad) var(--s-6);
    animation:mrn-rise .3s var(--ease) both;
  }
  nav.links.open .nav-item{display:block;}
  nav.links.open .nav-top{
    width:100%;justify-content:flex-start;padding:var(--s-4) 0;border-radius:0;font-size:var(--t-md);
    border-bottom:1px solid rgba(255,255,255,0.07);color:var(--on-ink);
  }
  nav.links.open .nav-top::after{display:none;}
  nav.links.open .nav-top i{display:none;}
  nav.links.open .menu{
    position:static;width:auto;opacity:1;visibility:visible;transform:none;
    background:none;border:0;border-bottom:1px solid rgba(255,255,255,0.07);border-radius:0;
    box-shadow:none;padding:var(--s-2) 0 var(--s-3) var(--s-4);
  }
  nav.links.open .menu-lead{display:none;}
  nav.links.open .menu-list a{padding:var(--s-3) var(--s-3) var(--s-3) 0;}
  nav.links.open .menu-rule{margin-left:0;}   /* items go flush left here */
  nav.links.open .menu-list b{font-size:var(--t-md);font-family:var(--sans);font-weight:600;}
  nav.links.open .menu-all{margin-top:var(--s-2);padding-left:0;}
  .head-2col{grid-template-columns:1fr;gap:var(--s-5);align-items:start;}
  .layers{grid-template-columns:1fr;}
  .layer-btns{flex-direction:row;flex-wrap:wrap;}
  .layer-btn{width:auto;flex:1 1 46%;}
  .proof,.uk-band{grid-template-columns:1fr;}
  .uk-copy{border-right:0;border-bottom:1px solid var(--rule-cream);}
  /* lead takes its own row, the three supports share the next — no orphan cell */
  .feature{grid-template-columns:1fr;gap:var(--s-7);}
  /* the narrative needs the full measure before the picture gets squeezed */
    .feature.rev .ftext{order:1;} .feature.rev .fmedia{order:2;}
  .foot-grid{grid-template-columns:1fr 1fr;gap:var(--s-8) var(--gap-lg);}
  /* two-up: a rule down the left of column one would just hug the page edge */
  .foot-col{border-left:0;padding-left:0;}
  footer::after{width:300px;opacity:.06;}
}
@media(max-width:720px){
  .surfaces,.grid-3,.grid-4,.speed-grid,.fam-items,.phero-meta,.uk-nums{grid-template-columns:1fr;}
  .story-facts{grid-template-columns:1fr;}
  .surfaces.cols-3{grid-template-columns:1fr;}
  .hero-stats{grid-template-columns:1fr;row-gap:var(--s-5);}
  .hero-stats > div{padding:0;border-left:0;}
  .layer-btn{flex:1 1 100%;}
  .hero-cta,.phero-cta{flex-direction:column;align-items:stretch;}
  .hero-cta .btn,.phero-cta .btn{width:100%;}
  .two{grid-template-columns:1fr;}
  .srow{flex-direction:column;align-items:flex-start;gap:var(--s-1);}
  .srow .day{padding-left:var(--s-6);}
  .fam-head{flex-direction:row;padding:var(--card-p);}
  .cta-strip .in{flex-direction:column;align-items:flex-start;}
  .cta-actions,.cta-actions .btn{width:100%;}
  .foot-grid{grid-template-columns:1fr;gap:var(--s-8);}
  .foot-bot{flex-direction:column;margin-top:var(--s-8);}
}
@media(max-width:420px){
  .logo{font-size:var(--d-sm);}
  .logo img{height:var(--s-6);}
  .btn-solid-sm{padding:var(--s-2) var(--s-3);font-size:var(--t-xs);}
}

/* --- touch targets ------------------------------------------------------- */
/* Discrete controls carry a 44px hit box on touch. Width covers the phone
   layout so it is measurable at 390px; pointer:coarse covers tablets and
   touch laptops that never hit the width breakpoint. Inline links inside
   running prose are deliberately excluded — they are exempt, and padding
   them out would break the line box they sit in. */
@media(max-width:760px),(pointer:coarse){
  .burger{min-width:44px;min-height:44px;justify-content:center;align-items:center;}
  .logo,.btn-solid-sm,.ulink,.fam-btn{min-height:44px;}
  /* footer link columns become a contiguous 44px tap list: the row height
     replaces the gap rather than adding to it, so the footer grows once. */
  .foot-col div{gap:0;}
  .foot-col a{display:inline-flex;align-items:center;min-height:44px;}
  .phero .crumbs a{display:inline-flex;align-items:center;min-height:44px;}
  /* the mailto is the page's primary action on contact — not prose */
  .cblock .val a{display:inline-flex;align-items:center;min-height:44px;}
}

/* ============================================================
   LEGAL DOCUMENTS — privacy notice, terms, DPA.
   One readable column on cream. No new colours, no new type
   sizes: everything below comes from the tokens in :root.
   ============================================================ */
.legal-doc{max-width:74ch;}
.legal-doc h2{
  font-family:var(--display);font-weight:400;
  font-size:var(--d-sm);line-height:var(--lh-head);
  color:var(--ink-text);
  margin:var(--s-10) 0 var(--s-4);
  padding-top:var(--s-6);
  border-top:1px solid var(--rule-cream);
}
.legal-doc h2:first-child{margin-top:0;padding-top:0;border-top:0;}
.legal-doc p{
  font-size:var(--t-lg);line-height:var(--lh-body);
  margin-bottom:var(--s-4);
}
.legal-doc p:last-child{margin-bottom:0;}
.legal-doc a{color:var(--violet-ink);text-decoration:underline;text-underline-offset:2px;}
.legal-doc a:hover{text-decoration-thickness:2px;}
.legal-doc b{font-weight:600;}
.legal-doc .kv-list{list-style:none;margin:0 0 var(--s-4);}
.legal-doc .kv-list li{
  position:relative;
  padding-left:var(--s-6);
  font-size:var(--t-lg);line-height:var(--lh-body);
  margin-bottom:var(--s-3);
}
.legal-doc .kv-list li:last-child{margin-bottom:0;}
.legal-doc .kv-list li::before{
  content:"";position:absolute;left:0;top:calc(var(--lh-body) * 0.5em - 2px);
  width:6px;height:6px;border-radius:var(--r-pill);
  background:var(--violet);
}
@media (max-width:640px){
  .legal-doc h2{margin-top:var(--s-9);}
}

/* ---- Worked example: the Pre-Approval Squid (section 05) -----------------
   A step flow, not a card grid. Each step names the module it happens in,
   and .ext marks the one system that is NOT one of the 35 — read-only, and
   the page has to say so rather than imply a connector exists. */
.squid-flow{margin-top:var(--gap-lg);border-radius:var(--r-lg);
  border:1px solid var(--rule-ink);
  background:linear-gradient(180deg,rgba(123,88,197,0.07),rgba(255,255,255,0.012));
  padding:var(--card-p);}
.sf-head{max-width:70ch;}
.sf-kicker{font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:0.16em;
  text-transform:uppercase;color:var(--amber);margin-bottom:var(--s-3);}
.sf-head h3{font-size:var(--d-sm);margin-bottom:var(--s-3);}
.sf-head p{font-size:var(--t-md);line-height:var(--lh-body);color:var(--on-ink-2);}
.sf-home{margin-top:var(--s-4);display:inline-block;padding:var(--s-2) var(--s-4);
  border-radius:var(--r-pill);border:1px solid rgba(123,88,197,0.35);
  background:rgba(123,88,197,0.10);font-size:var(--t-sm);color:var(--on-ink-2);}
.sf-home b{color:var(--on-ink);font-weight:600;}

.sf-steps{list-style:none;margin:var(--s-6,28px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);}
.sf-steps li{display:flex;gap:var(--s-4);padding:var(--s-5);
  border-radius:var(--r);border:1px solid var(--rule-ink);
  background:rgba(255,255,255,0.018);}
.sf-n{font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:0.1em;
  color:var(--violet-lite);flex:none;padding-top:3px;}
.sf-b h4{font-family:var(--display);font-size:var(--d-xs);font-weight:500;
  letter-spacing:-0.02em;margin-bottom:var(--s-2);}
.sf-mods{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--s-3);}
.sf-mods span{font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:0.08em;
  text-transform:uppercase;padding:3px 9px;border-radius:var(--r-pill);
  border:1px solid rgba(123,88,197,0.40);color:var(--violet-lite);
  background:rgba(123,88,197,0.10);}
/* the one step that leaves the platform reads differently on purpose */
.sf-mods span.ext{border-color:rgba(232,129,34,0.45);color:var(--amber);
  background:rgba(232,129,34,0.09);text-transform:none;letter-spacing:0.04em;}
.sf-b p{font-size:var(--t-sm);line-height:var(--lh-body);color:var(--on-ink-2);}

.sf-foot{margin-top:var(--s-5);max-width:88ch;font-size:var(--t-md);
  line-height:var(--lh-body);color:var(--on-ink-2);}
.sf-foot b{color:var(--on-ink);font-weight:600;}

@media (max-width:900px){
  .sf-steps{grid-template-columns:1fr;}
}

/* ---- Section 06: the AI OS architecture ---------------------------------
   A stack, not a grid — the parts are ordered and the order is the argument.
   One spine down the left ties them into a single system, which is the whole
   point being made against a five-product stack. */
/* Colour comes from the shared .sec-cream rule. This margin does not: the em
   opens on an italic "f", whose descender curls back left and all but touches
   the roman comma before it. */
#build h2 em{margin-left:.09em;}

.os-stack{list-style:none;margin:0;padding:0;position:relative;}
.os-stack::before{content:"";position:absolute;left:26px;top:14px;bottom:14px;width:1px;
  background:linear-gradient(180deg,rgba(123,88,197,0),var(--violet-ink) 12%,var(--violet-ink) 88%,rgba(123,88,197,0));}
.os-row{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr);
  gap:var(--s-5);padding:var(--s-5) 0;}
.os-row+.os-row{border-top:1px solid var(--rule-cream);}
.os-n{position:relative;z-index:2;font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:0.1em;color:var(--violet-ink);
  width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(123,88,197,0.42);background:var(--cream);}
.os-b h3{font-size:var(--d-sm);margin-bottom:var(--s-1);}
.os-lede{font-family:var(--display);font-style:italic;font-size:var(--t-xl);
  line-height:1.25;color:var(--violet-ink);margin-bottom:var(--s-3);}
.os-b>p:not(.os-lede){font-size:var(--t-md);line-height:var(--lh-body);
  color:var(--on-cream);max-width:78ch;}
.os-b .ulink{margin-top:var(--s-4);}

.os-foot{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--rule-cream);
  max-width:92ch;font-size:var(--t-lg,17px);line-height:var(--lh-body);color:var(--on-cream);}
.os-foot b{color:var(--ink-text);font-weight:600;}

@media (max-width:700px){
  .os-stack::before{left:18px;}
  .os-row{grid-template-columns:38px minmax(0,1fr);gap:var(--s-4);}
  .os-n{width:37px;height:37px;font-size:var(--t-mono-s);}
}

/* ---- The Memory worked example: entity resolution (section 06) -----------
   Left = the fragments as they exist today, right = the one resolved record.
   The arrow carries the argument, so it stays visible and becomes vertical
   rather than disappearing on narrow screens. */
.unify{margin-top:var(--s-7);border-radius:var(--r-lg);border:1px solid var(--rule-cream);
  background:linear-gradient(180deg,rgba(123,88,197,0.055),rgba(255,255,255,0.55));
  padding:var(--card-p);}
/* The kicker is amber on ink everywhere else; the panel is cream, so it needs
   the cream-ground amber or it drops to 2.3:1. */
.unify .sf-kicker{color:var(--amber-ink);}
.un-head{max-width:74ch;margin-bottom:var(--s-6);}
.un-head h3{font-size:var(--d-sm);margin-bottom:var(--s-3);}
.un-head p{font-size:var(--t-md);line-height:var(--lh-body);color:var(--on-cream);}
.un-lbl{font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:0.14em;
  text-transform:uppercase;color:var(--on-cream-3);margin-bottom:var(--s-4);}

.un-cols{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s-5);align-items:center;}
.un-frag ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2);}
.un-frag li{padding:var(--s-3) var(--s-4);border-radius:var(--r-sm);
  border:1px solid var(--rule-cream);background:var(--card-hi);}
.un-frag li span{display:block;font-family:var(--mono);font-size:var(--t-mono-s);
  letter-spacing:0.12em;text-transform:uppercase;color:var(--on-cream-3);margin-bottom:3px;}
.un-frag li b{display:block;font-family:var(--display);font-size:var(--d-xs);
  font-weight:500;letter-spacing:-0.02em;color:var(--ink-text);}
.un-frag li i{display:block;font-style:normal;font-size:var(--t-sm);color:var(--on-cream-2);margin-top:3px;}
.un-arrow{font-size:26px;color:var(--violet-ink);opacity:.85;padding:0 var(--s-2);}

.un-card{padding:var(--s-5);border-radius:var(--r);
  border:1px solid rgba(123,88,197,0.34);background:rgba(123,88,197,0.09);}
.un-card h4{font-family:var(--display);font-size:var(--d-xs);font-weight:500;
  letter-spacing:-0.02em;margin-bottom:var(--s-2);}
.un-card>p{font-size:var(--t-sm);line-height:var(--lh-body);color:var(--on-cream);}
.un-flag{margin-top:var(--s-4);padding:var(--s-3) var(--s-4);border-radius:var(--r-sm);
  border:1px solid rgba(165,85,16,0.34);background:rgba(232,129,34,0.10);
  font-size:var(--t-sm);line-height:var(--lh-body);color:var(--on-cream);}
.un-flag b{color:var(--amber-ink);font-weight:600;}

.un-solves{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--rule-cream);
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap) var(--gap-lg);}
.un-solves h4{font-family:var(--display);font-size:var(--d-xs);font-weight:500;
  letter-spacing:-0.02em;margin-bottom:var(--s-2);}
.un-solves p{font-size:var(--t-sm);line-height:var(--lh-body);color:var(--on-cream);}

@media (max-width:900px){
  .un-cols{grid-template-columns:1fr;}
  .un-arrow{transform:rotate(90deg);text-align:center;padding:var(--s-2) 0;}
  .un-solves{grid-template-columns:1fr;}
}

/* ==========================================================================
   DEPLOYMENT PICKER  ·  #deploy — model and hosting are separate choices
   ========================================================================== */
.camo-grid{display:grid;grid-template-columns:0.75fr 1.25fr;gap:var(--gap-lg);align-items:start;}
.camo-set{margin-bottom:var(--s-7);}
.camo-set > .cs-h{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:var(--track);
  text-transform:uppercase;color:var(--on-ink-4);display:block;margin-bottom:var(--s-3);}
.camo-opts{display:flex;gap:var(--s-2);flex-wrap:wrap;}
.camo-opt{background:transparent;border:1px solid var(--rule-ink);border-radius:var(--r-pill);
  color:var(--on-ink-2);padding:9px 15px;font:inherit;font-size:var(--t-sm);cursor:pointer;
  transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease);}
.camo-opt:hover{border-color:var(--violet);color:var(--on-ink);}
.camo-opt[aria-pressed="true"]{background:var(--on-ink);color:var(--ink);border-color:var(--on-ink);}
.camo-card{border:1px solid var(--rule-ink);border-radius:var(--r-lg);overflow:hidden;background:var(--ink-panel-b);}
.camo-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--rule-ink);}
.camo-head .camo-url{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.06em;color:var(--on-ink-4);}
.camo-rows > div{display:grid;grid-template-columns:0.6fr 1fr;gap:var(--s-4);align-items:baseline;
  padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--rule-ink);}
.camo-rows > div:last-child{border-bottom:0;}
.camo-rows .k{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:var(--track);
  text-transform:uppercase;color:var(--on-ink-4);}
.camo-rows .v{font-size:var(--t-md);color:var(--on-ink);}
.camo-rows .v.good{color:var(--violet-lite);}