/* ============================================================
   KEENPIPE — stylesheet (extracted from index.html)
   Part 1: design system + all page sections
   ============================================================ */
/* ============================================================
   KEENPIPE · certification house
   The law: nothing floats in. Things are RULED, DRAWN, PRESSED
   or COUNTERSIGNED. Three planes, one fixed light (top-left).
   Butter is the only material that carries light.
   ============================================================ */
:root{
  --ink:#14172B; --deep:#F7F7F4; --card:#FFFFFF; --indigo:#5B4CD8;
  /* one hue line (H232 S38) for every dark surface: lightness = elevation.
     Panels drifted to H223-237 / S33-60 across three authors; this is the ladder. */
  --e-plate:255,255,255;  /* L23  raised, content-bearing card face */
  --e-row:252,252,250;    /* L19  a row inside a plate */
  --e-mid:248,248,245;    /* L16  chips, small tiles, the console */
  --e-well:243,243,239;   /* L12  quiet containers and rows */
  --e-foot:236,236,231;   /* L9   the shadowed underside of a plate */
  --e-sink:230,230,224;   /* L7   inset wells */
  --e-veil:224,224,217;     /* L5   scrim over imagery */
  /* one glow scale. Gold is the only material that emits; three rungs, no more. */
  --glow-s:0 0 0 1px rgba(91,76,216,.18);   /* a lit point */
  --glow-m:0 .375rem 1.125rem -.5rem rgba(91,76,216,.30);   /* a lit plate edge */
  --glow-l:0 1.125rem 3rem -1.5rem rgba(91,76,216,.18);   /* ambient bloom behind a large object */
  --second:#5A6070; --line:#E4E3DC; --paper2:#EFEFEA; --ground:#14172B;
  --butter:#5B4CD8; --butter-d:#4A3DB5; --butter-tint:#EEEAF8;
  --butter-lit:#7B6FE0;   /* the one lighter gold: highlights, specular, lit points */
  --plate:#FFFFFF;
  /* one light, top-left, fixed. objects tilt into it. */
  --lift-1: 0 1px .125rem rgba(23,26,46,.04), 0 1px .1875rem rgba(23,26,46,.06), 0 .25rem .5rem -.125rem rgba(23,26,46,.08);
  --lift-2: 0 1px .125rem rgba(23,26,46,.04), 0 .25rem .5rem -.125rem rgba(23,26,46,.08), 0 1rem 2rem -.5rem rgba(23,26,46,.12);
  --lift-3: 0 1px .125rem rgba(23,26,46,.04), 0 .5rem 1rem -.25rem rgba(23,26,46,.08), 0 2rem 4rem -1rem rgba(23,26,46,.16);
  --press:  inset 0 1px .125rem rgba(23,26,46,.10), inset 0 -1px 0 rgba(255,255,255,.7);
  --press-dark: inset 0 1px .125rem rgba(20,23,43,.08), inset 0 -1px 0 rgba(255,255,255,.85);
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --mono:'Fragment Mono',ui-monospace,SFMono-Regular,monospace;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --gutter:clamp(1.375rem,5.4vw,5.25rem);
  --hdr-h:4.25rem;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;overflow-x:clip;background:var(--deep);color-scheme:dark}
/* page scale: every length is in rem, so this one value sizes the whole design.
   110% on tablet and desktop (the page read small at 100%); phones keep the base.
   Width breakpoints are already scaled x1.1 to match. */
html{font-size:100%}
@media (min-width:836px){html{font-size:110%}}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{
  /* the page is one dark document end to end: the ground must be dark too, or the
     overscroll rubber-band, the pre-paint frame and any transparent section flash white */
  background:var(--deep); color:var(--ground);
  font:400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
::selection{background:var(--butter); color:#FFFFFF}
a{color:inherit}
a,button,.btn,summary,[role="button"]{touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(91,76,216,.18)}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
/* every surface on this page is dark, so butter is the focus colour everywhere;
   indigo only applies if a light surface is ever reintroduced. */
:focus-visible{outline:.125rem solid var(--butter);outline-offset:.1875rem;border-radius:.125rem}
.paper :focus-visible{outline-color:var(--indigo)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:.75rem;top:.75rem;z-index:200;background:var(--ink);color:var(--ground);
  padding:.625rem 1rem;border-radius:.375rem;font:600 .875rem var(--sans);
  transform:translateY(-160%);transition:transform .2s var(--ease-out)}
.skip:focus-visible{transform:none}

/* ambient depth · plane 0 · fixed, pointer-transparent
   Built to minimalist-ui's spec, not by eye: opacity 0.02-0.04, 20s+ drift,
   position:fixed, pointer-events:none, never on a scrolling container. The
   earlier attempt at this ran 0.09-0.20 on scrolling sections, which took the
   ground from luminance 18.6 to 54.6 and read as khaki. At 0.03 it reaches
   23.6: the ground lifts, nothing becomes an object. */
.atmos{position:fixed;inset:-15%;z-index:0;pointer-events:none;
  background:
    radial-gradient(36% 30% at 24% 28%, rgba(91,76,216,.035), transparent 70%),
    radial-gradient(32% 26% at 76% 66%, rgba(91,76,216,.026), transparent 70%)}
@media (prefers-reduced-motion: no-preference){
  .atmos{animation:drift 34s ease-in-out infinite alternate;will-change:transform}
  @keyframes drift{to{transform:translate3d(1.8%,-1.2%,0) scale(1.05)}}
}

/* paper grain · plane 0 · fixed, pointer-transparent */
.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* type */
.mono{font-family:var(--mono);font-weight:400}
.tag{font:400 .6875rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase}
.serif{font-family:var(--serif);font-weight:400}
h1,h2,h3{font-weight:400}
.sect-h{font:400 clamp(2.125rem,4.3vw,3.625rem)/1.1 var(--serif);letter-spacing:-.012em;
  -webkit-text-stroke:.4px currentColor;text-wrap:balance}
.sect-h em{font-style:italic}
.sect-sub{margin-top:1.25rem;max-width:52ch;color:rgba(23,26,46,.74)}
.sect-tag{color:var(--indigo);margin-bottom:1.375rem}
.sect-head{max-width:51.25rem}

/* layout */
.wrap{max-width:80rem;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
/* the header is fixed, so an anchored section would otherwise land beneath it */
[id]{scroll-margin-top:calc(var(--hdr-h) + .875rem)}
.sect{padding:clamp(3.375rem,9vw,7.5rem) 0}
.paper{background:var(--ground)}
.ruling{background-image:linear-gradient(rgba(23,26,46,.028) 1px,transparent 1px);background-size:100% 6rem}
.dark{background:var(--deep);color:var(--ground)}
.dark .sect-sub{color:rgba(20,23,43,.72)}
.dark .sect-tag{color:var(--butter)}

/* planes */
.pressed{box-shadow:var(--press);background:rgba(255,255,255,.42);border:1px solid rgba(23,26,46,.07);border-radius:.625rem}
.dark .pressed{box-shadow:var(--press-dark);background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.07)}
.lift1{box-shadow:var(--lift-1)}
.lift2{box-shadow:var(--lift-2)}
.lift3{box-shadow:var(--lift-3)}
.tilt-stage{perspective:87.5rem}
.tilt{transform-style:preserve-3d}

/* foil · butter is the only specular material on the page */
.foil{position:relative;overflow:hidden}
.foil::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 46%,rgba(255,255,255,.15) 54%,transparent 70%);
  transform:translateX(var(--sheen,-80%));
  transition:transform .5s var(--ease-out);
  mix-blend-mode:soft-light}
@media (hover:hover) and (pointer:fine){
  .foil:hover::after{--sheen:80%}
}

/* buttons · SHAPE RULE, followed everywhere:
   2px marks (rules, bars) · 4px chips · 6px every button, no exceptions
   10-16px panels and cards · 18-22px full-bleed surfaces (start panel)
   · 20-30px the hero console, which is the one surface at that scale */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.625rem;
  min-height:3rem;padding:.75rem 1.625rem;border-radius:.375rem;
  font:600 .9688rem/1 var(--sans);text-decoration:none;white-space:nowrap;
  transition:transform .16s var(--ease-out),box-shadow .25s var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn-butter{background:var(--butter);color:#FFFFFF;box-shadow:var(--lift-1)}
.btn-butter:hover{box-shadow:var(--lift-2)}
.btn-ghost{border:1px solid rgba(23,26,46,.28);color:var(--ink);background:transparent}
.dark .btn-ghost,.hero .btn-ghost{border-color:rgba(20,23,43,.32);color:var(--ground)}
.btn-ghost:hover{border-color:currentColor}

/* ============ header ============
   One light page end to end, so the rail is always the pale frost and the ink
   is always dark. Two states: floating (transparent, at the top) and lifted
   (the frosted rail drops in and the bar condenses a few px on scroll). */
.hdr{position:fixed;inset:0 0 auto 0;z-index:120;height:var(--hdr-h);
  display:flex;align-items:center;justify-content:center;
  padding:0 max(clamp(1rem,3.4vw,2.5rem),env(safe-area-inset-right))
          0 max(clamp(1rem,3.4vw,2.5rem),env(safe-area-inset-left));
  color:var(--ground);
  transition:height .34s var(--ease-out),color .3s var(--ease-out)}
.hdr-inner{display:flex;align-items:center;gap:clamp(1.125rem,2.6vw,2rem);
  width:100%;max-width:80rem}

/* the rail lives on a pseudo so it can slide + fade in on its own; on scroll it
   is a solid bar, not a see-through frost */
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;
  opacity:0;transform:translateY(-100%);
  background:linear-gradient(180deg,#F8F8F5,#F4F4F0);
  border-bottom:1px solid rgba(20,23,43,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),
             0 .625rem 1.875rem -1rem rgba(20,23,43,.18);
  transition:opacity .4s var(--ease-out),transform .45s var(--ease-out)}
.hdr.lifted{height:calc(var(--hdr-h) - .5rem)}
.hdr.lifted::before,.hdr.on-dark.lifted::before{opacity:1;transform:none}
/* the old dark-rail branch was a leftover from the dark theme — neutralised */
.hdr.lifted,.hdr.on-dark.lifted{color:var(--ground)}

.hdr-logo{display:block;width:7.5rem;color:currentColor;
  transition:width .34s var(--ease-out),opacity .2s var(--ease-out)}
.hdr.lifted .hdr-logo{width:6.625rem}
.hdr-logo svg{width:100%;height:auto;display:block}
.hdr-logo:hover{opacity:.68}

.hdr-nav{margin-left:auto;display:flex;gap:clamp(1.25rem,2.4vw,2.125rem)}
.hdr-nav a{position:relative;font:500 .875rem/1 var(--sans);text-decoration:none;
  letter-spacing:.005em;color:currentColor;opacity:.72;padding:.5rem 1px;
  transition:opacity .2s var(--ease-out)}
.hdr-nav a::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:1.5px;
  border-radius:.125rem;background:var(--butter);
  transform:scaleX(0);transform-origin:right;
  transition:transform .3s var(--ease-out)}
.hdr-nav a:hover{opacity:1}
.hdr-nav a:hover::after,.hdr-nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.hdr-nav a[aria-current]{opacity:1}

.hdr-actions{display:flex;align-items:center;gap:clamp(.75rem,1.4vw,1.125rem)}
.hdr-login{font:500 .875rem/1 var(--sans);text-decoration:none;color:currentColor;
  opacity:.72;transition:opacity .2s var(--ease-out)}
.hdr-login:hover{opacity:1}
.hdr .btn{min-height:2.375rem;padding:.5625rem 1.375rem;font-size:.875rem;border-radius:.5rem}
.hdr .btn-butter{box-shadow:0 1px .125rem rgba(20,23,43,.12),
  0 .5rem 1.25rem -.625rem rgba(91,76,216,.55)}

/* the menu control — a contained icon button so it balances the CTA pill and
   reads as tappable on the transparent header. Bottom bar is short and grows
   to meet the top on hover; both snap to an X when the sheet is open. */
.hdr-burger{display:none;width:2.75rem;height:2.75rem;position:relative;border-radius:.75rem;
  color:currentColor;
  border:1px solid rgba(20,23,43,.16);background:rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);
  transition:background-color .2s var(--ease-out),border-color .2s var(--ease-out),
             transform .16s var(--ease-out)}
.hdr.lifted .hdr-burger{background:rgba(20,23,43,.04)}
.hdr-burger:hover{background:rgba(91,76,216,.09);border-color:rgba(91,76,216,.34)}
.hdr-burger:active{transform:scale(.9)}
.hdr-burger i{position:absolute;left:.8125rem;height:.125rem;background:currentColor;border-radius:.125rem;
  transition:transform .34s var(--ease-in-out),width .3s var(--ease-out),opacity .18s}
.hdr-burger i:nth-child(1){top:1rem;width:1.125rem}
.hdr-burger i:nth-child(2){top:1.5625rem;width:.75rem}
.hdr-burger:hover i:nth-child(2){width:1.125rem}
.hdr-burger[aria-expanded="true"] i{width:1.125rem}
.hdr-burger[aria-expanded="true"] i:nth-child(1){transform:translateY(.2813rem) rotate(45deg)}
.hdr-burger[aria-expanded="true"] i:nth-child(2){transform:translateY(-.2813rem) rotate(-45deg)}

/* mobile sheet */
.msheet{position:fixed;inset:0 0 0 auto;width:min(25.25rem,88vw);z-index:140;
  background:linear-gradient(180deg,rgb(var(--e-plate)) 0%,rgb(var(--e-mid)) 100%);
  color:var(--ground);box-shadow:-1.5rem 0 3.75rem -1.25rem rgba(20,23,43,.28),var(--lift-3);
  transform:translateX(104%);transition:transform .46s var(--ease-in-out);
  overscroll-behavior:contain;display:flex;flex-direction:column;
  padding:max(1.125rem,env(safe-area-inset-top)) clamp(1.375rem,6vw,1.875rem)
          max(1.625rem,env(safe-area-inset-bottom));
  visibility:hidden}
.msheet.open{transform:none;visibility:visible}
/* the pipe running behind the panel edge */
.msheet::before{content:"";position:absolute;left:0;top:0;bottom:0;width:.125rem;pointer-events:none;
  background:linear-gradient(180deg,rgba(91,76,216,0),var(--butter) 16%,var(--butter) 84%,rgba(91,76,216,0));
  opacity:.5}

.msheet-head{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:1.125rem;border-bottom:1px solid rgba(20,23,43,.09);
  opacity:0;transform:translateY(-.5rem);
  transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
.msheet.open .msheet-head{opacity:1;transform:none;transition-delay:.06s}
.msheet-head .hdr-logo{order:0;width:7rem;transition:opacity .2s var(--ease-out)}
.msheet-head .msheet-close{order:1}

.msheet nav{counter-reset:mnav;display:flex;flex-direction:column;
  margin-top:clamp(1rem,4vh,2rem)}
.msheet nav a{position:relative;display:flex;align-items:center;gap:1rem;
  font:600 clamp(1.25rem,5.4vw,1.5rem)/1.2 var(--sans);letter-spacing:-.022em;
  text-decoration:none;color:var(--ink);
  padding:clamp(.875rem,3.7vw,1.125rem) .25rem;border-bottom:1px solid rgba(20,23,43,.08);
  opacity:0;transform:translateX(1.25rem);
  transition:opacity .34s var(--ease-out),transform .34s var(--ease-out),
             color .18s var(--ease-out),padding-left .22s var(--ease-out)}
.msheet nav a::before{counter-increment:mnav;content:counter(mnav,decimal-leading-zero);
  flex:none;font:400 .75rem/1 var(--mono);letter-spacing:.04em;color:rgba(20,23,43,.3);
  transition:color .18s var(--ease-out)}
.msheet nav a::after{content:"";width:.9375rem;height:.9375rem;flex:none;margin-left:auto;
  background:currentColor;opacity:.24;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:opacity .2s var(--ease-out),transform .2s var(--ease-out)}
.msheet nav a:hover,.msheet nav a:active,.msheet nav a[aria-current]{
  color:var(--butter);padding-left:.75rem}
.msheet nav a:hover::before,.msheet nav a:active::before,.msheet nav a[aria-current]::before{
  color:var(--butter)}
.msheet nav a:hover::after,.msheet nav a:active::after,.msheet nav a[aria-current]::after{
  opacity:1;transform:translateX(.1875rem)}
.msheet.open nav a{opacity:1;transform:none}
.msheet.open nav a:nth-child(1){transition-delay:.1s}
.msheet.open nav a:nth-child(2){transition-delay:.15s}
.msheet.open nav a:nth-child(3){transition-delay:.2s}
.msheet.open nav a:nth-child(4){transition-delay:.25s}

.msheet-tag{margin-top:auto;padding-top:1.625rem;
  font:500 clamp(.9375rem,4vw,1.0625rem)/1.5 var(--sans);letter-spacing:-.005em;
  color:rgba(20,23,43,.5);
  opacity:0;transform:translateX(1rem);
  transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
.msheet-tag em{font-style:normal;color:var(--butter);opacity:.95}
.msheet.open .msheet-tag{opacity:1;transform:none;transition-delay:.3s}

.msheet-foot{display:flex;flex-direction:column;align-items:stretch;gap:.875rem;
  margin-top:1.25rem;padding-top:1.375rem;border-top:1px solid rgba(20,23,43,.1);
  opacity:0;transition:opacity .34s var(--ease-out)}
.msheet.open .msheet-foot{opacity:1;transition-delay:.34s}
.msheet-foot .msheet-login{align-self:center;display:inline-flex;align-items:center;gap:.5rem;
  font:600 .875rem/1 var(--sans);letter-spacing:.01em;text-decoration:none;color:var(--ground);
  opacity:.66;padding:.5rem .625rem;transition:opacity .2s var(--ease-out),color .2s var(--ease-out)}
.msheet-foot .msheet-login::after{content:"";width:.8125rem;height:.8125rem;background:var(--butter);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s var(--ease-out)}
.msheet-foot .msheet-login:hover{opacity:1;color:var(--butter)}
.msheet-foot .msheet-login:hover::after{transform:translateX(.1875rem)}
.msheet-foot .btn{width:100%;min-height:3.375rem;font-size:1rem;border-radius:.5rem}

.msheet-close{width:2.75rem;height:2.75rem;border-radius:.75rem;position:relative;flex:none;
  color:var(--ground);
  border:1px solid rgba(20,23,43,.14);background:rgba(20,23,43,.02);
  transition:background-color .2s var(--ease-out),border-color .2s var(--ease-out),
             transform .22s var(--ease-out)}
.msheet-close:hover{background:rgba(91,76,216,.09);border-color:rgba(91,76,216,.32);
  transform:rotate(90deg)}
.msheet-close:active{transform:scale(.9)}
.msheet-close::before,.msheet-close::after{content:"";position:absolute;left:.8125rem;right:.8125rem;top:1.3125rem;
  height:.125rem;border-radius:.125rem;background:currentColor}
.msheet-close::before{transform:rotate(45deg)}
.msheet-close::after{transform:rotate(-45deg)}
.scrim{position:fixed;inset:0;z-index:130;background:rgba(20,23,43,.46);
  -webkit-backdrop-filter:blur(.1875rem);backdrop-filter:blur(.1875rem);
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease-out)}
.scrim.on{opacity:1;pointer-events:auto}

/* ============ hero ============
   Claude Design's "Keenpipe Hero", implemented on the locked brand. The cover
   is the Earth, filling the frame; a radial vignette and a top scrim buy the
   copy its contrast so the picture stays vivid underneath it. The page's own
   fixed header is kept, so the design's inline nav is not duplicated here. */
.hero{position:relative;min-height:100dvh;display:flex;flex-direction:column;
  overflow:clip;background:var(--deep);color:var(--ground)}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--deep)}
/* The cover carried a photographic globe until 2026-08-31. It was dropped: a
   night-earth with glowing arcs is the category's stock "global reach" cliche,
   it is none of the four verbs the motion brief allows, and it cost 10.9 MB of
   autoplay video on a North-African connection. In its place: engraved ruling,
   the security paper a certificate is printed on. Ruled, not floated. */
.hero-media .rule-field{position:absolute;inset:-20%;display:block;
  background:
    repeating-linear-gradient(0deg,
      rgba(91,76,216,.055) 0 1px, rgba(91,76,216,0) 1px .4375rem),
    repeating-linear-gradient(90deg,
      rgba(91,76,216,.030) 0 1px, rgba(91,76,216,0) 1px 5.5rem),
    radial-gradient(120% 80% at 50% 34%,
      rgba(220,220,230,.62) 0%, rgba(241,241,237,.30) 46%, rgba(247,247,244,0) 78%);
  transform:rotate(-1.2deg);
  -webkit-mask-image:radial-gradient(110% 78% at 50% 40%,#000 0%,rgba(0,0,0,.55) 58%,transparent 88%);
  mask-image:radial-gradient(110% 78% at 50% 40%,#000 0%,rgba(0,0,0,.55) 58%,transparent 88%)}
/* the vignette, then the scrim the header and eyebrow sit on */
.hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  /* Two layers. The radial is the reading vignette. The linear one exists
     because a radial's 100% stop sits outside the element, so the bottom edge
     never actually reaches the ground colour: measured, the hero's foot sat at
     luminance 14 against a page ground of 22, and that 8-point step was the
     line between the cover and Sect. 01. This resolves the last fifth to
     --deep exactly. */
  background:
    linear-gradient(180deg,rgba(247,247,244,0) 74%,rgba(247,247,244,.55) 88%,var(--deep) 100%),
    radial-gradient(120% 90% at 50% 55%,
      rgba(247,247,244,0) 0%, rgba(247,247,244,.35) 55%, rgba(247,247,244,.86) 100%)}
.hero-scrim{position:absolute;left:0;right:0;top:0;height:13.75rem;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(247,247,244,.92) 0%,rgba(247,247,244,.55) 45%,rgba(247,247,244,0) 100%)}

.hero-inner{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;
  align-items:center;text-align:center;
  padding:calc(var(--hdr-h) + clamp(1.5rem,4vh,3.25rem))
          max(var(--gutter),env(safe-area-inset-right))
          max(clamp(2.5rem,5vh,3.75rem),env(safe-area-inset-bottom))
          max(var(--gutter),env(safe-area-inset-left))}
.eyebrow{color:var(--butter);font:400 .7813rem/1 var(--mono);letter-spacing:.36em}
.hero-h{margin-top:clamp(1rem,2.4vh,1.5rem);
  font:600 clamp(2.375rem,5vw,4.25rem)/1.12 var(--sans);letter-spacing:-.026em;
  color:var(--ground);text-wrap:balance}
.hero-h em{font-style:normal;color:var(--butter)}
/* one masked band per clause. Without display:block the two .hl spans reflow as
   a single paragraph and the sentence break lands wherever the width happens to
   put it; without overflow:hidden the .hl-in slide-up reveal has no edge to come
   out from. The padding/negative-margin pair gives the italic descenders in
   "You approve every step." room inside the clip without growing the line box. */
.hl{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.hl-in{display:inline-block}
.hero-rule{width:4.625rem;height:.125rem;margin:clamp(1rem,2.2vh,1.375rem) 0 0;background:var(--butter);border-radius:.125rem}
.hero-sub{margin-top:clamp(1.125rem,2.8vh,1.75rem);max-width:38.75rem;
  font-size:clamp(1rem,1.35vw,1.1875rem);line-height:1.62;color:rgba(20,23,43,.72)}

/* ============ the console ============
   Rebuilt from the Claude Design "Workflow Panel". Two deliberate departures
   from that file, both to keep it inside this page's own locked systems:
   - its cool edge is rgb(132,165,255), hue 224. Every raised surface here sits
     on the H232 line the elevation ladder is cut from, so the same tint is
     used at H232: rgb(148,162,249). The 8-degree shift is invisible; a ninth
     hue on a page with one hue line would not be.
   - its buttons are 13px. Buttons on this page are 6px, no exceptions, and the
     hero CTA sits directly below these two. The reference's scale is adopted,
     its radius is not. */
.hstage{position:relative;width:100%;max-width:min(41.25rem,92vw);
  margin:clamp(1.75rem,3.6vh,2.75rem) auto 0}


.console{--cr:clamp(.9375rem,1.7vw,1.3125rem);
  position:relative;border-radius:var(--cr);
  padding:clamp(1.375rem,2.2vw,1.75rem) clamp(1.125rem,2.1vw,1.75rem) clamp(1.125rem,1.7vw,1.4375rem);
  border:1px solid rgba(148,162,249,.18);
  background:linear-gradient(165deg,
    rgb(250,250,248) 0%, rgb(253,253,251) 55%, rgb(255,255,255) 100%);
  box-shadow:0 1px .125rem rgba(23,26,46,.04),
             0 .25rem .5rem -.125rem rgba(23,26,46,.06),
             0 1rem 2rem -.5rem rgba(23,26,46,.10),
             0 2rem 4rem -1rem rgba(23,26,46,.12),
             inset 0 1px 0 rgba(255,255,255,.9);
  text-align:left}
/* the light that lands on the panel's own top edge */
.console::before{content:"";position:absolute;inset:1px;pointer-events:none;
  border-radius:calc(var(--cr) - 1px);
  background:radial-gradient(60% 45% at 50% 8%,rgba(160,185,255,.03) 0%,transparent 70%)}
.hsteps{position:relative;display:grid;align-items:start;padding:0 .375rem;
  /* the chevron gutters are kept narrow so the step columns stay wide enough
     for every title to hold one line; "Awaits your approval" is the longest */
  grid-template-columns:1fr clamp(.8125rem,1.35vw,1.1875rem) 1fr clamp(.8125rem,1.35vw,1.1875rem)
                        1fr clamp(.8125rem,1.35vw,1.1875rem) 1fr}
.hstep{display:flex;flex-direction:column;align-items:center;text-align:center}
.hstep-ico{--is:clamp(2.5rem,3.6vw,3rem);
  width:var(--is);height:var(--is);border-radius:50%;flex:none;
  background:radial-gradient(70% 70% at 50% 30%,
    rgba(255,255,255,.055),rgba(240,240,236,.35));
  border:1px solid rgba(148,162,249,.10);
  display:flex;align-items:center;justify-content:center;color:var(--butter)}
.hstep-ico svg{width:calc(var(--is)*.44);height:auto;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 .5rem rgba(91,76,216,.22))}
.hstep b{margin-top:clamp(.625rem,1.05vw,.875rem);letter-spacing:-.01em;color:var(--ground);
  /* sized to keep all four titles on one line at the panel's column width:
     "Awaits your approval" is the longest and needs ~128px of a ~136px column */
  font:600 clamp(.7188rem,1.03vw,.8438rem)/1.3 var(--sans)}
/* .hstep-t, never `.hstep span`: .hstep-ico is a span too, and a descendant
   selector (0,1,1) outranks its own class (0,1,0) - which is why these icons
   were once stroked in grey body-copy colour instead of butter. */
.hstep-t{margin-top:clamp(.375rem,.7vw,.5625rem);max-width:clamp(6.875rem,10vw,8.25rem);
  font-size:clamp(.6875rem,.96vw,.7813rem);line-height:1.55;
  color:rgba(20,23,43,.76);text-wrap:balance}
/* the chevron hangs level with the foot of the medallions, not their centre */
.hstep-sep{display:flex;justify-content:center;padding-top:clamp(1.5rem,2.4vw,2rem)}
.hstep-sep svg{width:clamp(.5rem,.78vw,.625rem);height:auto;fill:none;stroke:var(--butter);
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 .375rem rgba(91,76,216,.25))}

.review{position:relative;display:flex;align-items:center;
  margin-top:clamp(1.125rem,2.2vw,1.75rem);border-radius:clamp(.5625rem,1vw,.8125rem);
  min-height:clamp(3.5rem,5.2vw,4.25rem);
  padding:clamp(.5625rem,.95vw,.75rem) clamp(.75rem,1.35vw,1.0625rem);
  gap:clamp(.625rem,1.2vw,1rem);
  /* a well sunk into the panel, so the record reads as the thing being handed up */
  background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.12));
  border:1px solid rgba(148,162,249,.14);
  box-shadow:inset 0 1px 0 rgba(180,200,255,.08)}
.rv-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:clamp(.3125rem,.55vw,.4375rem)}
.rv-id .lab{font:400 clamp(.5313rem,.75vw,.6125rem)/1 var(--mono);letter-spacing:.2em;
  color:rgba(20,23,43,.62)}
.rv-id b{font:500 clamp(.7188rem,1.05vw,.8438rem)/1.35 var(--sans);color:var(--ground);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-demo{position:absolute;top:clamp(.6875rem,1.1vw,.875rem);right:clamp(.75rem,1.4vw,1.0625rem);z-index:2;
  font:400 .5rem/1 var(--mono);letter-spacing:.15em;color:rgba(20,23,43,.62);
  border:1px solid rgba(20,23,43,.16);border-radius:.25rem;padding:.3125rem .5rem;white-space:nowrap;
  /* its own fill, not just a stroke: this chip sits in the panel's brightest
     strip, and the label is a disclosure - it has to stay readable on every
     frame of the loop, not only the dark ones. */
  background:rgba(247,247,244,.72)}

/* the dial is drawn, not filled: a conic gradient cannot round the arc's cap */
.ring{--rs:clamp(2.375rem,3.5vw,2.875rem);position:relative;flex:none;
  width:var(--rs);height:var(--rs);display:flex;align-items:center;justify-content:center}
.ring svg{position:absolute;inset:0;width:100%;height:100%;
  transform:rotate(-90deg);fill:none;stroke-width:3.4}
.ring .track{stroke:rgba(20,23,43,.20)}
/* the circumference at r=32 is 201.06, so an offset of 16 leaves the arc at 92% */
.ring .arc{stroke:var(--butter);stroke-linecap:round;
  stroke-dasharray:201;stroke-dashoffset:16}
.ring b{position:relative;font:400 clamp(.6563rem,.98vw,.7813rem)/1 var(--mono);color:var(--ground)}

.rv-act{display:flex;gap:clamp(.4375rem,.75vw,.625rem);flex:none}
.rv-act .btn{min-height:clamp(2.125rem,3.1vw,2.5rem);padding:0 clamp(.875rem,1.55vw,1.25rem);
  font-size:clamp(.7188rem,1.05vw,.8438rem);border-radius:.375rem}
.rv-act .btn-butter{
  background:linear-gradient(180deg,#7B6FE0 0%,var(--butter) 55%,#4A3DB5 100%);
  box-shadow:0 0 1.625rem rgba(91,76,216,.20),
             inset 0 1px 0 rgba(255,255,255,.4),
             0 .625rem 1.5rem -.875rem rgba(91,76,216,.8)}
.rv-act .btn-ghost{background:rgba(252,252,250,.38);
  border-color:rgba(148,162,249,.24);color:rgba(20,23,43,.88)}
.rv-act .btn-ghost:hover{background:rgba(244,244,240,.55);
  border-color:rgba(148,162,249,.42);color:var(--ground)}

.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:1.125rem;margin-top:clamp(1.5rem,3.4vh,2rem)}
.hero-cta .btn{padding:1rem 3.375rem;font-size:1.0625rem;border-radius:.375rem}
.hero-cta .btn-ghost{padding:1rem 2.125rem;background:rgba(255,255,255,.5)}
.hero-assure-line{margin-top:clamp(.625rem,1.4vh,.875rem);
  font:400 .8438rem/1 var(--sans);color:rgba(20,23,43,.50);letter-spacing:.01em}

@media (max-width:835px){
  .hsteps{grid-template-columns:1fr 1fr;gap:1.375rem 0}
  .hstep-sep{display:none}
  .console{padding:clamp(2.75rem,13vw,3.625rem) 1.125rem 1.25rem}
  .review{flex-wrap:wrap;gap:.75rem}
  .rv-id{flex:1 1 100%}
  .rv-act{flex:1;justify-content:flex-end}
  .hero-cta{flex-direction:column;align-items:stretch;width:100%;max-width:21.25rem}
  .hero-cta .btn{justify-content:center;padding:1rem 1.5rem}
}

/* ============ SECT. 01 · procedure (scroll-pinned, lemlist mechanics) ============
   A tall runway (100vh per step) holds one sticky viewport-height stage. Every
   step is an absolutely-stacked panel carrying its own rail, its previous number
   above and its next number below; they cross-fade against each other while the
   rail fill runs 0→100 inside each step's hold. */
.proc-glow{display:none}
.proc-globe{display:none}

.proc-runway{position:relative;width:100%}            /* height set inline: nSteps * 100vh */
.proc-stage{position:sticky;top:var(--hdr-h);
  height:calc(100vh - var(--hdr-h));overflow:hidden;
  display:flex;flex-direction:column;
  margin:0 clamp(1rem,5vw,5rem)}

/* ---- left column ---- */
.proc-left{flex:1 1 auto;width:100%;min-height:0;order:2;
  display:flex;flex-direction:column;gap:1rem;padding:1rem}
.proc-headwrap{display:none}
/* the house grotesk at heading weight — same treatment as The Standard,
   Pricing and FAQ, so the section titles read as one system. Sized against vh
   rather than vw because this heading lives inside a fixed-height pinned stage
   and must not push the steps out of it. */
.proc-headwrap .sect-h{margin:0;font:600 clamp(1.5625rem,4.5vh,2.875rem)/1.18 var(--sans);
  letter-spacing:-.022em;color:var(--ink);text-wrap:balance;-webkit-text-stroke:0}
.proc-headwrap .sect-h em{font-style:normal;color:var(--butter)}

/* mobile step tabs */
.proc-tabs{display:flex;gap:.75rem;flex-shrink:0}
.proc-tab{flex:1;display:flex;flex-direction:column;gap:.375rem;text-align:left;
  cursor:pointer;background:none;border:0;padding:0;font:inherit}
.proc-tab-n{font:400 1.25rem/1 var(--sans);color:#D1D5DB}
.proc-tab.on .proc-tab-n{font-weight:600;color:var(--butter)}
.proc-tab-track{height:.125rem;background:#E5E7EB;border-radius:62.4375rem;position:relative;overflow:hidden}
.proc-tab-fill{position:absolute;top:0;left:0;height:100%;width:0;background:var(--butter)}

/* ---- the stacked step panels ---- */
.proc-steps{position:relative;flex:1 1 0;min-height:0}
.step{position:absolute;inset:0;display:flex;align-items:flex-start;list-style:none}
.step-row{width:100%;display:flex;gap:1.5rem}

/* rail */
.step-rail{display:none;width:.75rem;align-self:stretch;flex-direction:column;
  align-items:center;flex-shrink:0}
.step-rail-pad{height:1.875rem;flex-shrink:0}
.step-rail-pad.top{margin-bottom:.5rem}
.step-rail-pad.bot{margin-top:2rem}
.step-dot{width:.8125rem;height:.8125rem;border-radius:50%;background:var(--butter);flex-shrink:0;
  margin-top:.5rem;
  box-shadow:0 0 0 .25rem var(--deep),0 0 0 .3125rem rgba(91,76,216,.2),
             0 0 1rem rgba(91,76,216,.45)}
.step-track{position:relative;width:.1875rem;flex:1 1 0;background:rgba(20,23,43,.1);
  border-radius:62.4375rem;overflow:hidden;margin-top:.3125rem}
.step-fill{position:absolute;top:0;left:0;right:0;height:0;background:var(--butter);
  box-shadow:0 0 .625rem rgba(91,76,216,.55)}

/* content */
.step-col{flex:1 1 0;display:flex;flex-direction:column;min-width:0}
.step-n-prev,.step-n-next{display:none;font:400 .75rem/1 var(--mono);letter-spacing:.16em;
  color:rgba(20,23,43,.22);flex-shrink:0}
.step-n-prev{margin-bottom:.875rem}
.step-n-next{margin-top:1.625rem}
.step-body{flex:1 1 0;display:flex;flex-direction:column;gap:.75rem}
/* the step index, on the house numbering: a drawn rule, the number, the count */
.step-n{display:none;align-items:center;gap:.625rem;margin-bottom:.125rem;
  font:400 .75rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--butter)}
.step-n::before{content:"";width:1.5rem;height:1.5px;border-radius:.125rem;background:var(--butter)}
.step-n::after{content:"/ 04";color:rgba(20,23,43,.3);letter-spacing:.1em}
.step h3{margin:0;font:600 clamp(1.25rem,1.7vw,1.5625rem)/1.22 var(--sans);color:var(--ink);
  letter-spacing:-.015em}
.step p{margin:0;font:400 clamp(.9063rem,1.05vw,1rem)/1.55 var(--sans);color:rgba(20,23,43,.6);
  text-wrap:pretty}
.step-act{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:.375rem}
.step-more{display:inline-flex;align-items:center;gap:.5rem;
  font:600 .8438rem/1 var(--sans);letter-spacing:.01em;color:var(--butter);text-decoration:none;
  padding:0;background:none;box-shadow:none;border-radius:0;
  transition:gap .2s var(--ease-out)}
.step-more::after{content:"";width:.9375rem;height:.9375rem;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s var(--ease-out)}
.step-more:hover{gap:.6875rem}
.step-more:hover::after{transform:translateX(.1875rem)}

/* ---- right panel ---- */
.proc-right{display:flex;flex:0 0 auto;justify-content:center;min-height:0;order:1;padding:1rem}
/* the panel is lit, not flat: the light lands top-left (the page rule), so the
   fill runs from a lighter indigo there to a deeper one bottom-right, and it
   throws a soft bloom onto the page around it */
.proc-panel{position:relative;width:auto;max-width:100%;height:35vh;
  aspect-ratio:1/1.2426;border-radius:1rem;overflow:clip;
  background:
    radial-gradient(135% 100% at 10% -8%, rgba(255,255,255,.24), rgba(255,255,255,0) 52%),
    linear-gradient(158deg, #6E60DD 0%, var(--butter) 44%, #4636A6 100%);
  box-shadow:0 3.125rem 5.625rem -2.875rem rgba(74,61,181,.55)}
.proc-panel-grid{position:absolute;inset:0;pointer-events:none;opacity:.7;
  background-image:linear-gradient(rgba(255,255,255,.11) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.11) 1px,transparent 1px);
  background-size:2.125rem 2.125rem;
  -webkit-mask-image:radial-gradient(130% 100% at 14% 0%,#000 0%,rgba(0,0,0,.15) 70%,transparent 100%);
  mask-image:radial-gradient(130% 100% at 14% 0%,#000 0%,rgba(0,0,0,.15) 70%,transparent 100%)}
/* a hairline of caught light on the panel's own top edge */
.proc-panel::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.proc-shot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:clamp(1.125rem,2.4vw,2.125rem)}
/* ---- the mock console riding each step ---- */
.mock{width:100%;max-width:32.5rem;max-height:100%;background:#FFF;border-radius:1rem;
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 1.625rem 3.75rem rgba(12,16,45,.30),0 .125rem .375rem rgba(12,16,45,.14)}
.mock-top{display:flex;align-items:center;gap:.5rem;padding:.8125rem 1rem;
  border-bottom:1px solid rgba(20,23,43,.07)}
.mock-top b{font:600 .6875rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:rgba(20,23,43,.52)}
.mock-count{margin-left:auto;font:600 .6875rem/1 var(--sans);color:var(--butter);
  background:rgba(91,76,216,.09);padding:.3125rem .5rem;border-radius:.375rem;
  white-space:nowrap;flex:none}
/* the body clips its own overflow: on a short panel the extra rows would
   otherwise run out under the footer instead of stopping above it */
.mock-body{padding:.875rem 1rem;display:flex;flex-direction:column;gap:.5625rem;
  flex:1 1 auto;min-height:0;overflow:hidden}
.mock-row{display:flex;align-items:center;gap:.6875rem;padding:.6875rem .75rem;border-radius:.625rem;
  background:rgba(20,23,43,.032)}
.mock-row.lit{background:rgba(91,76,216,.07);box-shadow:inset 0 0 0 1px rgba(91,76,216,.18)}
.mock-row.out{opacity:.42}
.mock-sq{width:1.75rem;height:1.75rem;border-radius:.5rem;flex:none;background:rgba(91,76,216,.16);
  display:grid;place-items:center;font:700 .625rem/1 var(--sans);color:rgba(20,23,43,.50)}
.mock-sq.a{background:#D9E4FB}.mock-sq.b{background:#E7DDFB}
.mock-sq.c{background:#FBE6D2}.mock-sq.d{background:#D6EEDF}
.mock-lines{flex:1 1 auto;display:flex;flex-direction:column;gap:.375rem;min-width:0}
.mock-l{height:.4375rem;border-radius:6.1875rem;background:rgba(20,23,43,.14)}
.mock-l.s{height:.375rem;background:rgba(20,23,43,.09)}
.mock-tag{flex:none;font:600 .625rem/1 var(--sans);padding:.3125rem .5rem;border-radius:.375rem;
  letter-spacing:.03em}
.mock-tag.ok{color:#1F7A4D;background:rgba(31,122,77,.11)}
.mock-tag.no{color:rgba(20,23,43,.42);background:rgba(20,23,43,.06)}
.mock-tag.pi{color:var(--butter);background:rgba(91,76,216,.11)}
.mock-score{flex:none;width:2.125rem;height:2.125rem;border-radius:50%;display:grid;place-items:center;
  font:700 .75rem/1 var(--sans)}
.mock-score.hi{color:#1F7A4D;background:rgba(31,122,77,.12);box-shadow:inset 0 0 0 .125rem rgba(31,122,77,.32)}
.mock-score.mid{color:#B4761B;background:rgba(180,118,27,.12);box-shadow:inset 0 0 0 .125rem rgba(180,118,27,.30)}
.mock-score.lo{color:rgba(20,23,43,.40);background:rgba(20,23,43,.05);box-shadow:inset 0 0 0 .125rem rgba(20,23,43,.12)}
/* the draft */
.mock-field{display:flex;align-items:center;gap:.5625rem;padding:.5625rem 0;
  border-bottom:1px solid rgba(20,23,43,.07);font:500 .75rem/1 var(--sans);color:rgba(20,23,43,.40)}
.mock-field span{color:rgba(20,23,43,.72);font-weight:600}
.mock-draft{display:flex;flex-direction:column;gap:.5rem;padding-top:.75rem}
.mock-draft .mock-l{height:.5rem}
.mock-hl{height:.5rem;border-radius:6.1875rem;background:rgba(91,76,216,.30)}
/* the queue */
.mock-btns{display:flex;gap:.375rem;flex:none}
.mock-btn{font:600 .625rem/1 var(--sans);padding:.375rem .5625rem;border-radius:.375rem}
.mock-btn.go{color:#FFF;background:var(--butter)}
.mock-btn.skip{color:rgba(20,23,43,.46);background:rgba(20,23,43,.06)}
.mock-foot{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;
  border-top:1px solid rgba(20,23,43,.07);font:500 .6875rem/1 var(--sans);color:rgba(20,23,43,.44)}
.mock-foot i{width:.375rem;height:.375rem;border-radius:50%;background:var(--butter);flex:none}
/* named rows, sources and signal bars — the detail that makes the console read
   as a product surface rather than a grey skeleton. Every name is invented. */
.mock-ico{width:1.25rem;height:1.25rem;border-radius:.375rem;flex:none;background:rgba(91,76,216,.12);
  display:grid;place-items:center}
.mock-ico svg{width:.75rem;height:.75rem;fill:none;stroke:var(--butter);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* the column header and the source chips are desktop-only: on the narrow panel
   they steal the width the company name needs and truncate it to "Verh…" */
.mock-cols{display:none;align-items:center;gap:.6875rem;padding:0 .75rem 1px;
  font:600 .5625rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  color:rgba(20,23,43,.30);flex:none}
.mock-cols b{flex:1;font-weight:600}
.mock-nm{font:600 .75rem/1.3 var(--sans);color:rgba(20,23,43,.84);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-sb{font:400 .6875rem/1.3 var(--sans);color:rgba(20,23,43,.44);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-src{display:none;gap:.25rem;flex:none}
.mock-src i{width:1.0625rem;height:1.0625rem;border-radius:.3125rem;background:rgba(20,23,43,.06);
  display:grid;place-items:center;font:700 .5rem/1 var(--sans);font-style:normal;
  color:rgba(20,23,43,.46)}
.mock-sig{display:flex;gap:.1875rem;margin-top:.4375rem}
.mock-sig i{height:.25rem;flex:1 1 0;border-radius:6.1875rem;background:rgba(20,23,43,.10)}
.mock-sig i.on{background:var(--butter)}
.mock-sig i.half{background:rgba(91,76,216,.40)}
.mock-chan{display:flex;gap:.25rem;margin-left:auto;flex:none}
.mock-ch{font:600 .625rem/1 var(--sans);padding:.375rem .5625rem;border-radius:.375rem;
  color:rgba(20,23,43,.42);background:rgba(20,23,43,.05)}
.mock-ch.on{color:#FFF;background:var(--butter)}
.mock-txt{font:400 .75rem/1.65 var(--sans);color:rgba(20,23,43,.60);margin:0}
.mock-txt b{font-weight:600;color:var(--butter);background:rgba(91,76,216,.10);
  border-radius:.1875rem;padding:0 .1875rem}
.mock-sign{font:400 .75rem/1.65 var(--sans);color:rgba(20,23,43,.38);margin:0}
.proc-dots{display:none;position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);
  align-items:center;gap:.375rem}
.proc-dot{height:.25rem;width:.5rem;border-radius:62.4375rem;background:rgba(255,255,255,.4);
  transition:width .2s,background .2s}
.proc-dot.on{width:1.5rem;background:#FFF}

@media (min-width:1126px){
  .proc-stage{flex-direction:row}
  /* the copy is one composed block — heading, then the step ladder — vertically
     centred in the column beside the full-height panel, rather than pinned to
     the top with the steps floating in a void beneath it */
  .proc-left{flex:0 0 auto;width:50%;order:1;justify-content:center;
    gap:clamp(1.375rem,3.4vh,2.5rem);padding:3rem 3.5rem 3rem 0}
  .proc-headwrap{display:flex;flex:0 0 auto;min-height:0;overflow:visible}
  .proc-tabs{display:none}
  .proc-steps{flex:0 0 auto;height:clamp(14.875rem,30vh,18.75rem)}
  .step{align-items:center}
  .step-row{gap:2.25rem}
  .step-rail{display:flex}
  .step-n-prev,.step-n-next{display:block}
  .step-n{display:inline-flex}
  /* the panel runs off the right edge of the screen: the stage keeps its left
     margin for the copy, gives up its right one, and the panel drops the
     portrait aspect so it fills the half it is given */
  .proc-stage{margin-right:0}
  .proc-right{width:50%;order:2;flex:0 0 auto;justify-content:flex-end;
    align-self:stretch;padding:1.5rem 0}
  .proc-panel{height:100%;width:100%;aspect-ratio:auto;border-radius:2.5rem 0 0 2.5rem}
  .proc-dots{display:flex}
  /* the desktop type is fixed, not fluid: it is the ladder the rail spacers
     (30px number slots) are cut against, so it must not drift with the viewport */
  .step-body{gap:1rem}
  .step h3{font-size:1.5rem;line-height:1.25}
  .step p{font-size:1rem;line-height:1.5}

  /* the console fills the panel rather than floating in the middle of it. The
     rows share the leftover height between them (flex:1 each), so the card
     reaches the bottom at any panel height without a magic number to tune. */
  .proc-shot{align-items:stretch}
  .mock{max-width:none;height:100%;border-radius:1.125rem}
  .mock-top{padding:1.125rem 1.375rem}
  .mock-top b{font-size:.75rem}
  .mock-count{font-size:.75rem;padding:.4375rem .625rem}
  .mock-body{padding:1.125rem 1.375rem;gap:.75rem}
  .mock-row{flex:1 1 0;min-height:0;padding:.875rem 1rem;gap:.875rem;border-radius:.75rem}
  .mock-sq{width:2.375rem;height:2.375rem;border-radius:.625rem}
  .mock-lines{gap:.5rem}
  .mock-l{height:.5625rem}
  .mock-l.s{height:.5rem}
  .mock-tag{font-size:.6875rem;padding:.4375rem .625rem}
  .mock-score{width:2.75rem;height:2.75rem;font-size:.875rem}
  .mock-btn{font-size:.6875rem;padding:.5rem .75rem}
  .mock-btns{gap:.5rem}
  .mock-foot{padding:1rem 1.375rem;font-size:.75rem}
  .mock-field{padding:.875rem 0;font-size:.875rem}
  .mock-draft{flex:1 1 auto;justify-content:center;gap:.75rem;padding-top:1rem}
  .mock-draft .mock-l,.mock-draft .mock-hl{height:.625rem}
  .mock-ico{width:1.5rem;height:1.5rem;border-radius:.4375rem}
  .mock-ico svg{width:.875rem;height:.875rem}
  .mock-cols{display:flex;font-size:.625rem;padding:0 1rem .125rem}
  .mock-src{display:flex}
  .mock-sq{font-size:.75rem}
  .mock-nm{font-size:.875rem}
  .mock-sb{font-size:.7813rem}
  .mock-src i{width:1.25rem;height:1.25rem;border-radius:.375rem;font-size:.5625rem}
  .mock-sig{margin-top:.5625rem}
  .mock-sig i{height:.3125rem}
  .mock-ch{font-size:.6875rem;padding:.4375rem .6875rem}
  .mock-txt,.mock-sign{font-size:.875rem;line-height:1.7}
}

/* reduced motion: no pin, no stack — the four steps simply read down the page.
   These must also undo the min-width:1024 pinned layout, since media queries
   still apply under reduced motion. */
html.rm .proc-runway{height:auto!important;padding:clamp(3.5rem,9vw,6rem) 0}
html.rm .proc-stage{position:static;height:auto;overflow:visible;flex-direction:column;
  align-items:center;margin:0 clamp(1rem,5vw,5rem)}
html.rm .proc-left{width:100%;max-width:45rem;padding:0;order:1;gap:2.5rem;
  justify-content:flex-start}
html.rm .proc-headwrap{display:flex;flex:none;overflow:visible;max-width:none}
html.rm .proc-tabs{display:none}
html.rm .proc-steps{flex:none;height:auto;display:flex;flex-direction:column;gap:2.5rem}
html.rm .step{position:static;inset:auto;opacity:1!important;align-items:flex-start}
html.rm .step-row{gap:0}
html.rm .step-body{max-width:37.5rem}
html.rm .step-rail,html.rm .step-n-prev,html.rm .step-n-next{display:none}
html.rm .step-n{display:inline-flex}
html.rm .proc-right{width:100%;max-width:45rem;order:2;padding:2.25rem 0 0;justify-content:center}
html.rm .proc-panel{height:auto;width:100%;max-width:35rem;aspect-ratio:auto;border-radius:1.375rem}
html.rm .proc-shot{position:static;display:none;align-items:center;padding:clamp(1.25rem,5vw,2rem)}
html.rm .proc-shots .proc-shot:first-child{display:flex}
html.rm .mock{max-width:32.5rem;height:auto;border-radius:1rem}
html.rm .mock-body{flex:none}
html.rm .mock-row{flex:none;min-height:0}
html.rm .mock-draft{flex:none}
html.rm .proc-dots{display:none}

/* ============ SECT. 02 · provisions ============
   Three proofs, each holding a working object. Dark ground so the butter
   is the only material carrying light; the left edge of every card is lit
   as if the pipe runs behind it. */
.prov-sect{position:relative}
.prov-sect .sect-h{font:600 clamp(2rem,4.4vw,3.375rem)/1.15 var(--sans);
  letter-spacing:-.02em;-webkit-text-stroke:0}
.prov-sect .sect-h em{font-style:normal;color:var(--butter)}
.prov-floor{position:absolute;left:50%;bottom:-6rem;transform:translateX(-50%);
  width:min(77.5rem,96%);height:16.875rem;pointer-events:none;z-index:0;
  background:none}
.prov-sect .wrap{position:relative;z-index:2}
.prov-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.125rem,2.2vw,2rem);
  margin-top:clamp(2rem,4.4vw,4.5rem);position:relative}
.fcard{display:flex}
.fcard-in{position:relative;width:100%;display:flex;flex-direction:column;
  border-radius:.75rem;border:1px solid rgba(91,76,216,.12);
  background:linear-gradient(180deg,#FFFFFF,#FDFDFE);overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--lift-1);
  transition:border-color .24s var(--ease-out),box-shadow .24s var(--ease-out),transform .24s var(--ease-out)}
/* the pipe runs behind the row: every plate is ruled with butter down its left edge */
.fcard-in::before{content:"";position:absolute;left:0;top:0;bottom:0;width:.125rem;z-index:4;
  background:linear-gradient(180deg,var(--butter-lit),var(--butter) 42%,rgba(91,76,216,.35));
  transform:scaleX(1);transform-origin:left;
  transition:width .24s var(--ease-out),background .24s var(--ease-out)}
.fcard-in:hover{border-color:rgba(91,76,216,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--lift-2)}
.fcard-in:hover::before{width:.1875rem}
.f-obj,.f-body,.f-ticks{position:relative;z-index:2}
.f-obj{min-height:13.125rem;padding:clamp(1.375rem,2.1vw,1.75rem) clamp(1.375rem,2.1vw,1.75rem) clamp(1.125rem,1.7vw,1.375rem);
  border-bottom:1px solid rgba(20,23,43,.08);
  background:linear-gradient(180deg,rgba(20,23,43,.022),rgba(20,23,43,0));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  display:flex;flex-direction:column;color:var(--ground)}
.f-lab{font:600 .6875rem/1 var(--sans);letter-spacing:.08em;
  color:var(--butter);margin-bottom:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f-rows{display:flex;flex-direction:column;gap:clamp(.5625rem,1vw,.75rem)}
.f-row{display:flex;align-items:center;justify-content:space-between;gap:.625rem;
  padding:.6875rem .8125rem;border-radius:.5rem;
  background:rgba(var(--e-row),.46);border:1px solid rgba(20,23,43,.06);
  transition:border-color .2s var(--ease-out),background-color .2s var(--ease-out)}
.fcard-in:hover .f-row:not(.dim){border-color:rgba(91,76,216,.20);background:rgba(91,76,216,.035)}
.f-row span{display:flex;align-items:center;gap:.6875rem;font:400 .8438rem/1.35 var(--sans);color:rgba(20,23,43,.86)}
.f-row span svg{flex:none;width:1rem;height:1rem;fill:none;stroke:rgba(91,76,216,.78);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.f-row em{display:flex;align-items:center;gap:.4375rem;flex:none;
  font:400 .6563rem/1 var(--mono);font-style:normal;letter-spacing:.14em;color:var(--butter)}
.f-row em i{display:grid;place-items:center;width:.9375rem;height:.9375rem;flex:none;
  border-radius:.3125rem;background:rgba(91,76,216,.12);font-size:.5625rem;font-style:normal}
.f-row.dim{background:rgba(var(--e-row),.32);border-color:rgba(20,23,43,.045)}
.f-row.dim span{color:rgba(20,23,43,.52)}
.f-row.dim em{color:rgba(20,23,43,.54)}
/* the live score */
.f-ring{flex:1;display:flex;align-items:center;gap:clamp(1rem,2vw,1.75rem);padding-left:.125rem}
.f-dial{position:relative;width:clamp(5.25rem,6.8vw,6.375rem);height:clamp(5.25rem,6.8vw,6.375rem);flex:none}
.f-dial svg{width:100%;height:100%;transform:rotate(-90deg)}
.f-dial .tr{fill:none;stroke:rgba(91,76,216,.14);stroke-width:2.6}
.f-dial .pr{fill:none;stroke:var(--butter);stroke-width:3;stroke-linecap:round;
  filter:drop-shadow(0 0 .375rem rgba(91,76,216,.5))}
.f-dial b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:400 clamp(1.6875rem,2.3vw,2.0625rem)/1 var(--serif);color:var(--ground)}
.fr-sig{flex:1;min-width:0;display:flex;flex-direction:column;gap:.6875rem;
  font:400 clamp(.5375rem,.68vw,.6563rem)/1.4 var(--mono);letter-spacing:.09em}
.fr-sig li{display:flex;align-items:center;justify-content:space-between;gap:.625rem;list-style:none;
  padding-bottom:.625rem;border-bottom:1px solid rgba(20,23,43,.06)}
.fr-sig li:last-child{padding-bottom:0;border-bottom:0}
.fr-sig li span{color:rgba(20,23,43,.82)}
.fr-sig li i{display:grid;place-items:center;width:1rem;height:1rem;flex:none;
  border-radius:.3125rem;background:rgba(91,76,216,.12);
  font-style:normal;font-family:var(--sans);font-size:.625rem;color:var(--butter)}
.f-body{display:flex;flex-direction:column;gap:clamp(.75rem,1.4vw,1rem);
  padding:clamp(1.375rem,2.1vw,1.75rem);flex:1;min-height:0}
.f-medal{flex:none;width:2.875rem;height:2.875rem;border-radius:.8125rem;
  background:rgba(91,76,216,.08);
  box-shadow:inset 0 0 0 1px rgba(91,76,216,.16),var(--lift-1);
  display:flex;align-items:center;justify-content:center;
  transition:box-shadow .24s var(--ease-out)}
.fcard-in:hover .f-medal{box-shadow:inset 0 0 0 1px rgba(91,76,216,.30),var(--lift-2)}
.f-medal svg{width:1.375rem;height:1.375rem;fill:none;stroke:var(--butter);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.f-text{flex:1;min-width:0}
.f-tag{display:block;font:600 .6875rem/1 var(--sans);letter-spacing:.06em;
  color:var(--butter);margin-bottom:.375rem}
.fcard h3{font:600 clamp(1.125rem,1.5vw,1.375rem)/1.3 var(--sans);color:var(--ground)}
.fcard h3 em{font-style:normal;color:var(--ground)}
.f-text p{margin-top:.5rem;font-size:.875rem;line-height:1.72;color:rgba(20,23,43,.60);text-wrap:pretty}
.f-ticks{list-style:none;flex:none;padding:0 clamp(1.375rem,2.1vw,1.75rem) clamp(1.375rem,2.1vw,1.75rem);margin-top:auto}
.f-ticks hr{border:0;height:1px;background:rgba(20,23,43,.06);margin:0 0 1.125rem}
.f-ticks ul{list-style:none;display:flex;flex-direction:column;gap:.625rem}
.f-ticks li{display:flex;align-items:center;gap:.6875rem;font:400 .875rem/1.4 var(--sans);color:rgba(20,23,43,.72)}
.f-ticks li::before{content:"✓";flex:none;display:grid;place-items:center;
  width:1.0625rem;height:1.0625rem;border-radius:.375rem;background:rgba(91,76,216,.10);
  color:var(--butter);font-size:.625rem;line-height:1}
/* the answer the technical buyer is looking for */
.prov-note{position:relative;z-index:2;margin:clamp(1.875rem,3.8vw,3.75rem) auto 0;max-width:64rem;
  display:flex;align-items:center;gap:clamp(1.25rem,2.4vw,2.125rem);overflow:hidden;
  padding:clamp(1.625rem,2.8vw,2.125rem) clamp(1.5rem,2.8vw,2.375rem);border-radius:.875rem;
  border:1px solid rgba(91,76,216,.18);
  background:linear-gradient(180deg,#FFFFFF,rgba(var(--e-foot),.75));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--lift-1)}
.prov-note::before{content:"";position:absolute;left:0;top:0;bottom:0;width:.125rem;
  background:linear-gradient(180deg,var(--butter-lit),var(--butter) 42%,rgba(91,76,216,.35))}
.prov-note .f-text{flex:1}
.prov-note .f-medal{width:3.25rem;height:3.25rem}
.prov-note h3{margin-top:.5625rem;font:400 clamp(1.3125rem,1.8vw,1.6875rem)/1.2 var(--serif);color:var(--ground)}
.prov-note h3 em{font-style:italic;color:var(--butter)}
.prov-note .rule{flex:none;width:1px;align-self:stretch;background:rgba(20,23,43,.08);margin:.125rem 0}
.prov-note ul{flex:0 0 18.75rem;list-style:none;display:flex;flex-direction:column;gap:.6875rem}
.prov-note li{display:flex;align-items:center;gap:.75rem;font-size:.9063rem;color:rgba(20,23,43,.78)}
.prov-note li::before{content:"✓";flex:none;display:grid;place-items:center;
  width:1.125rem;height:1.125rem;border-radius:.375rem;background:rgba(91,76,216,.10);
  color:var(--butter);font-size:.625rem;line-height:1}

/* ============ SECT. 03 · scope ============
   The product's own input, cut into the dark. Two words is the whole brief,
   so the field is the object and the list is the proof it has range. */
.scope-sect{position:relative}
.scope-sect .sect-h{font:600 clamp(2rem,4.4vw,3.375rem)/1.15 var(--sans);
  letter-spacing:-.02em;-webkit-text-stroke:0}
.scope-sect .sect-h em{font-style:normal;color:var(--butter)}
.scope-glow{position:absolute;left:50%;top:38%;transform:translateX(-50%);
  width:min(68.75rem,92%);height:26.25rem;pointer-events:none;z-index:0;
  background:none}
.scope-sect .wrap{position:relative;z-index:2}
.scope-rule{width:3.25rem;height:.1875rem;border-radius:.125rem;background:var(--butter);
  margin:clamp(1.125rem,2vw,1.5rem) 0 0}
.scope-sect .sect-sub{margin-top:clamp(1rem,1.8vw,1.375rem);max-width:72ch}

.scope-field{display:flex;align-items:center;gap:clamp(.625rem,1.2vw,1rem);
  margin-top:clamp(1.625rem,3.4vw,3rem);padding:.75rem .75rem .75rem clamp(1.125rem,1.8vw,1.5rem);
  border-radius:.75rem;border:1px solid rgba(91,76,216,.22);
  background:linear-gradient(180deg,rgba(var(--e-plate),.50),rgba(var(--e-foot),.72));
  box-shadow:var(--glow-l), inset 0 1px 0 rgba(20,23,43,.04)}
.sf-ico{flex:none;width:1.3125rem;height:1.3125rem;fill:none;stroke:rgba(91,76,216,.72);
  stroke-width:1.7;stroke-linecap:round}
.sf-line{flex:1;min-width:0;display:flex;align-items:center;overflow:hidden;
  font:400 clamp(.8438rem,1.35vw,1.0313rem)/1.5 var(--sans);color:var(--ground);white-space:nowrap}
.sf-caret{flex:none;width:.125rem;height:1.3em;margin-left:.1875rem;background:var(--butter);
  box-shadow:var(--glow-s)}
.sf-run{flex:none}

.scope-list{list-style:none;margin-top:clamp(1.125rem,2.4vw,2.125rem);
  display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(1.25rem,2.6vw,2.5rem)}
.scope-list li{min-width:0}
.scope-list button{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;
  font:400 clamp(.7813rem,1.05vw,.9375rem)/1.5 var(--sans);color:rgba(20,23,43,.72);
  padding:.9375rem .25rem;border-bottom:1px solid rgba(20,23,43,.09);
  transition:color .2s var(--ease-out),border-color .2s var(--ease-out),
             transform .16s var(--ease-out)}
.scope-list button:active{transform:scale(.97)}
.scope-list button::before{content:"»";flex:none;color:rgba(91,76,216,.5);
  font-size:.875rem;line-height:1;transition:color .2s var(--ease-out)}
.scope-list button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scope-list button:hover,.scope-list button.on{color:var(--butter);border-bottom-color:rgba(91,76,216,.55)}
.scope-list button:hover::before,.scope-list button.on::before{color:var(--butter)}

.scope-bound{margin-top:clamp(1.875rem,3.8vw,3.75rem);max-width:51.25rem;
  padding:clamp(1.25rem,2.2vw,1.875rem) clamp(1.375rem,2.5vw,2.125rem);
  border-radius:.75rem;border:1px solid rgba(91,76,216,.16);
  background:linear-gradient(180deg,rgba(var(--e-plate),.45),rgba(var(--e-foot),.66));
  font-size:.9688rem;line-height:1.66;color:rgba(20,23,43,.72)}
.scope-bound b{font-weight:600;color:var(--ground)}

/* ============ REJECTS ============
   The discard pile, shown. A field of everything looked at, narrowing into
   the few that clear. The ratio is the hero; the slips are the proof. */
.rej-sect{position:relative}
.rej-sect .wrap{position:relative;z-index:2}
.rej-top{display:grid;grid-template-columns:minmax(0,0.86fr) minmax(0,1.14fr);
  gap:clamp(1.5rem,3.4vw,3.5rem);align-items:start}
.rej-copy{max-width:38.75rem}
.rej-copy .sect-h{white-space:normal;font:600 clamp(2rem,4.4vw,3.25rem)/1.15 var(--sans);
  letter-spacing:-.02em;color:var(--ink)}
.rej-copy .sect-h em{font-style:normal;color:var(--butter)}
.rej-fil{display:none}
.rej-sect .sect-sub{margin-top:clamp(1rem,2vw,1.5rem);max-width:27.5rem;
  font:400 clamp(.9375rem,1.3vw,1.125rem)/1.6 var(--sans);color:rgba(20,23,43,.58)}

.rej-diagram{min-width:0;padding-top:clamp(.375rem,1vw,.875rem)}
.rej-lab{font:500 clamp(.6875rem,.9vw,.8125rem)/1 var(--sans);letter-spacing:.04em;
  color:rgba(20,23,43,.48)}
.rej-swarm{display:flex;align-items:center;gap:clamp(.625rem,1.4vw,1.375rem);margin-top:clamp(.875rem,1.6vw,1.375rem)}
#rejfield{flex:1;min-width:0;width:100%;height:auto;aspect-ratio:700/240;display:block}
.rej-cells{position:relative;flex:none;display:grid;grid-template-columns:repeat(10,clamp(.3125rem,.52vw,.5rem));
  gap:clamp(.1625rem,.28vw,.2625rem)}
.rej-cells::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:12.5rem;height:10rem;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(91,76,216,.14) 0%,rgba(91,76,216,.05) 34%,rgba(91,76,216,0) 70%)}
.rej-cells span{position:relative;width:clamp(.3125rem,.52vw,.5rem);height:clamp(.3125rem,.52vw,.5rem);
  background:var(--butter);border-radius:.125rem}

/* the ratio */
.rej-ratio{display:flex;align-items:center;justify-content:center;gap:clamp(.875rem,2.4vw,2.125rem);
  margin-top:clamp(2.25rem,4.8vw,4.75rem)}
.rej-ratio .fil{flex:1;min-width:0;position:relative;height:1px;
  background:rgba(91,76,216,.12)}
.rej-ratio .fil::after{display:none}
.rej-ratio .fil-l{background:linear-gradient(90deg,transparent,rgba(91,76,216,.12))}
.rej-ratio .fil-r{background:linear-gradient(90deg,rgba(91,76,216,.12),transparent)}
.rej-fig{flex:none;text-align:center;min-width:clamp(8.75rem,17vw,18.125rem)}
.rej-fig b{display:block;font:700 clamp(3rem,7vw,5.5rem)/.9 var(--sans);color:var(--ink);letter-spacing:-.03em}
.rej-fig span{display:block;margin-top:clamp(.625rem,1.2vw,1rem);
  font:500 clamp(.6875rem,.9vw,.8125rem)/1 var(--sans);letter-spacing:.04em;color:rgba(20,23,43,.45);text-transform:uppercase}
.rej-fig.clear b{color:var(--butter)}
.rej-fig.clear span{color:rgba(91,76,216,.60)}
.rej-arrow{flex:none;width:clamp(3.25rem,7vw,6.25rem);height:.875rem;overflow:visible}
.rej-arrow .ra{stroke:var(--butter);stroke-width:1.3;fill:none}

/* verification card */
.dockets{max-width:35rem;margin:clamp(2rem,4.4vw,4.25rem) auto 0}
.slip{display:flex;flex-direction:column;padding:clamp(1.625rem,2.9vw,2.375rem) clamp(1.5rem,2.6vw,2.125rem);
  border-radius:.75rem;border:1px solid rgba(91,76,216,.10);
  background:#FFFFFF;box-shadow:var(--lift-1)}
.slip-h{display:flex;justify-content:space-between;gap:.625rem;padding-bottom:1.125rem;
  border-bottom:1px solid rgba(91,76,216,.08);
  font:600 clamp(.75rem,1vw,.875rem)/1 var(--sans);color:rgba(20,23,43,.50)}
.slip-row{display:flex;align-items:center;gap:clamp(.75rem,1.2vw,1rem);min-height:3.5rem;
  border-top:1px solid rgba(91,76,216,.06)}
.slip-row:first-of-type{border-top:0}
.slip-row .n{flex:none;width:1.75rem;height:1.75rem;border-radius:.5rem;
  background:rgba(91,76,216,.06);display:grid;place-items:center;
  font:600 .8125rem/1 var(--sans);color:var(--butter)}
.slip-row .g{flex:1;min-width:0;font:500 clamp(.875rem,1.1vw,1rem)/1.3 var(--sans);color:var(--ink)}
.slip-row .bx{flex:none;min-width:2.5rem;height:1.75rem;display:flex;align-items:center;justify-content:center;
  padding:0 .625rem;border-radius:.375rem;
  font-size:.8125rem;line-height:1;font-weight:600;
  border:1px solid rgba(91,76,216,.20);background:rgba(91,76,216,.04);color:var(--butter)}
.slip-outcomes{display:grid;grid-template-columns:1fr 1fr;gap:.875rem;margin-top:1.5rem;padding-top:1.5rem;
  border-top:1px solid rgba(91,76,216,.08)}
.slip-outcome{display:flex;flex-direction:column;align-items:center;gap:.5rem;
  padding:clamp(1.125rem,1.9vw,1.5rem) 1rem;border-radius:.625rem;text-align:center}
.slip-outcome-pass{background:rgba(91,76,216,.05);border:1px solid rgba(91,76,216,.15)}
.slip-outcome-fail{background:rgba(20,23,43,.025);border:1px solid rgba(20,23,43,.08)}
.slip-outcome-label{font:700 clamp(.8125rem,1vw,.9375rem)/1 var(--sans)}
.slip-outcome-pass .slip-outcome-label{color:var(--butter)}
.slip-outcome-fail .slip-outcome-label{color:rgba(20,23,43,.45)}
.slip-outcome-desc{font:400 clamp(.75rem,.9vw,.8125rem)/1.4 var(--sans)}
.slip-outcome-pass .slip-outcome-desc{color:rgba(91,76,216,.60)}
.slip-outcome-fail .slip-outcome-desc{color:rgba(20,23,43,.40)}
/* keep stamp animation targets alive but hidden in new layout */
.slip-stamp{display:none}
.slip-stamp span{transform:rotate(-3deg);border-radius:.375rem;padding:.5rem 1.25rem;
  font:600 clamp(.75rem,1vw,.8125rem)/1 var(--sans);letter-spacing:.06em}
.slip-stamp .ok{border:.125rem solid var(--butter);color:var(--butter);background:rgba(91,76,216,.04)}
.slip-stamp .no{border:1px solid rgba(20,23,43,.15);color:rgba(20,23,43,.45)}

/* ---- the closer's meetings panel ----------------------------------------
   Keenpipe qualifies and books meetings, so the page ends on a week of them.
   The panel is cropped by the section's lower edge and fades out, so it reads
   as a week that keeps going rather than one that stops neatly. */
/* .start-copy is the only in-flow child of the flex .start-panel, so it sized
   to content (~579px) and sat at the flex start. Letting it fill the panel
   gives the meetings image a full-width containing block and centres the copy
   properly at the same time. */
.start-copy{flex:1;min-width:0;text-align:center}
/* the copy block used to be a narrow flex child, so left-aligned text read as
   centred. Now that it fills the panel every child has to be centred itself. */
.start-copy .sp-sub{margin-inline:auto}
.start-copy .sp-cta{display:flex;justify-content:center;margin-inline:auto}
.start-copy .sp-tag,.start-copy .sp-h{text-align:center}
.start-copy .sp-rule{margin-inline:auto}

/* the meetings panel bleeds past the copy padding so it reads at full size.
   The containing block is now the full panel width, so centring on 50% and
   pulling back half its own width lands it dead centre. */
/* the plate is overflow:hidden again, so the panel bleeds to the plate edges
   rather than past them. Still far wider than the copy column above it. */
.mtg-panel{position:relative;line-height:0;padding:0;
  width:min(69.625rem,calc(100vw - 2*var(--gutter)));
  margin:clamp(1.875rem,3.8vw,2.875rem) 0 0 50%;
  transform:translateX(-50%)}
.mtg-panel img{width:100%;height:auto;display:block;border-radius:.75rem;
  box-shadow:var(--lift-3);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 74%,rgba(0,0,0,.45) 90%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 74%,rgba(0,0,0,.45) 90%,transparent 100%)}
.mtg-tag{position:absolute;top:.875rem;right:1rem;z-index:2;
  font:400 .5938rem/1 var(--mono);letter-spacing:.14em;color:rgba(20,23,43,.42);
  border:1px solid rgba(20,23,43,.14);border-radius:.25rem;padding:.3125rem .5rem;
  background:rgba(247,247,244,.55);backdrop-filter:blur(.25rem)}

/* the one row worth keeping from the ledger: the first run costs nothing */
.sp-ledger{margin:clamp(1rem,2vw,1.375rem) auto 0;text-align:center;
  font:400 clamp(.5625rem,.78vw,.6563rem)/1.7 var(--mono);letter-spacing:.13em;
  color:rgba(20,23,43,.42)}
.sp-ledger em{font-style:normal;color:var(--butter);text-shadow:var(--glow-s)}

/* the section's closing rule, and the mark pressed across it. The gold plate
   the mark used to sit on is gone: it is now the page ground with a hairline
   ring, so the rule appears to pass behind it and break. This rule is also
   what separates the closer from the footer. */
.sect-close{position:relative;margin-top:clamp(3.25rem,6.4vw,5.75rem);height:1px;
  background:linear-gradient(90deg,
    rgba(20,23,43,0) 0%,
    rgba(20,23,43,.13) 14%,
    rgba(20,23,43,.13) 86%,
    rgba(20,23,43,0) 100%)}
.sect-close-mark{position:absolute;left:50%;top:50%;z-index:2;
  transform:translate(-50%,-50%);
  width:clamp(3.25rem,4.6vw,3.75rem);height:clamp(3.25rem,4.6vw,3.75rem);
  display:grid;place-items:center;border-radius:.9375rem;
  background:var(--deep);
  box-shadow:inset 0 0 0 1px rgba(20,23,43,.12)}
.sect-close-mark svg{width:42%;height:42%;display:block;
  fill:var(--butter);stroke:var(--butter);
  stroke-width:3;stroke-linejoin:round}

.rej-foot{display:flex;align-items:center;justify-content:center;
  margin-top:clamp(2rem,4.4vw,4rem)}
.rej-foot i{display:none}
.rej-foot p{flex:none;font:600 clamp(1.125rem,1.8vw,1.5rem)/1.4 var(--sans);
  color:var(--ink);text-align:center;
  padding:1rem 2rem;border-radius:.625rem;background:rgba(91,76,216,.06)}
.rej-foot em{font-style:normal;color:var(--butter)}

/* ============ THE STANDARD · trust banner ============ */
.cert-sect{position:relative;padding:clamp(3.375rem,9vw,7.5rem) var(--gutter);overflow:clip}
.trust-wrap{max-width:47.5rem;margin:0 auto;text-align:center}
.trust-badge{display:inline-flex;align-items:center;gap:.5rem;
  padding:.375rem .875rem;border-radius:.375rem;
  font:600 .8125rem/1 var(--sans);color:var(--butter);background:rgba(91,76,216,.08)}
.trust-h{margin-top:clamp(1.125rem,2.2vw,1.75rem);
  font:600 clamp(1.875rem,4vw,3.25rem)/1.2 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.trust-sub{margin-top:clamp(.625rem,1.4vw,1.125rem);max-width:36.25rem;margin-left:auto;margin-right:auto;
  font:400 clamp(.9375rem,1.3vw,1.125rem)/1.6 var(--sans);color:rgba(20,23,43,.62)}
.trust-promises{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(.75rem,1.7vw,1.375rem);margin-top:clamp(1.625rem,3.6vw,3.25rem)}
.trust-promise{display:flex;align-items:center;gap:.875rem;
  padding:clamp(1rem,1.9vw,1.5rem) clamp(1.25rem,2.2vw,1.875rem);
  border-radius:.75rem;background:#FFFFFF;box-shadow:var(--lift-1);
  border:1px solid rgba(91,76,216,.10);flex:1 1 12.5rem;max-width:17.5rem;text-align:left}
.trust-promise-icon{flex:none;width:2.5rem;height:2.5rem;border-radius:.625rem;
  background:rgba(91,76,216,.08);display:grid;place-items:center}
.trust-promise-icon svg{width:1.25rem;height:1.25rem;color:var(--butter)}
.trust-promise-text{font:600 clamp(.875rem,1.1vw,1rem)/1.4 var(--sans);color:var(--ink)}

/* ============ PRICING ============ */
.tariff-sect{position:relative;overflow:clip;background:transparent;isolation:isolate;
  padding:clamp(3.375rem,9vw,7.5rem) 0}
.tariff-veil{display:none}
.tariff-sect .wrap{position:relative;z-index:2}
.tariff-head{text-align:center}
.tariff-mark{display:none}
.tariff-h{margin-top:0;
  font:600 clamp(1.875rem,4vw,3.25rem)/1.2 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.tariff-h em{font-style:normal;color:var(--butter)}
.tariff-sub{margin:clamp(.625rem,1.4vw,1.125rem) auto 0;max-width:36.25rem;
  font:400 clamp(.9375rem,1.3vw,1.125rem)/1.6 var(--sans);color:rgba(20,23,43,.62);text-wrap:pretty}

.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:stretch;gap:clamp(.875rem,1.8vw,1.375rem);margin-top:clamp(2.375rem,4.6vw,4.5rem)}
.plan{position:relative;padding:clamp(1.625rem,2.5vw,2.125rem) clamp(1.375rem,2vw,1.875rem) clamp(1.5rem,2.2vw,1.875rem);
  border-radius:.875rem;border:1px solid rgba(91,76,216,.13);
  background:linear-gradient(180deg,#FFFFFF 0%,rgba(var(--e-foot),.5) 100%);
  box-shadow:var(--lift-1),inset 0 1px 0 rgba(255,255,255,.9);
  display:flex;flex-direction:column;will-change:transform}
@media (hover:hover) and (pointer:fine){
  .plan{transition:transform .24s var(--ease-out),
                   box-shadow .24s var(--ease-out),
                   border-color .24s var(--ease-out)}
  .plan:hover{transform:translateY(-.375rem);box-shadow:var(--lift-2);
    border-color:rgba(91,76,216,.32)}
  .plan-team:hover{transform:translateY(-.375rem)}
}
.plan:active{transform:translateY(-.125rem) scale(.997);transition-duration:.12s}
.plan-name{font:700 .7188rem/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--butter)}
.plan-for{margin-top:.5625rem;font:400 clamp(.75rem,.95vw,.8125rem)/1.4 var(--sans);
  color:rgba(20,23,43,.55)}
.plan-price{margin-top:clamp(.875rem,1.6vw,1.125rem);margin-bottom:-.08em;
  display:flex;align-items:baseline;gap:.1875rem;
  font:700 clamp(2.375rem,4.2vw,3.25rem)/1 var(--sans);color:var(--ink);
  letter-spacing:-.022em;font-variant-numeric:tabular-nums}
.plan-cur{font-size:.5em;font-weight:600;color:rgba(20,23,43,.5);
  align-self:flex-start;margin-top:.14em}
.plan-price sub{font:500 clamp(.8125rem,1.2vw,.9375rem)/1 var(--sans);
  color:rgba(20,23,43,.44);vertical-align:baseline;margin-left:.125rem}
.plan-caps{list-style:none;margin-top:clamp(.875rem,1.6vw,1.125rem);padding-top:clamp(.9375rem,1.7vw,1.25rem);
  margin-bottom:clamp(1.125rem,2vw,1.5rem);
  border-top:1px solid rgba(91,76,216,.14);
  display:flex;flex-direction:column;gap:clamp(.6875rem,1.3vw,.875rem);
  font:400 clamp(.8125rem,1vw,.9063rem)/1.45 var(--sans);color:rgba(20,23,43,.66)}
.plan-caps li{display:flex;align-items:flex-start;gap:.625rem}
.plan-caps li::before{content:"\2713";flex:none;width:1.125rem;height:1.125rem;margin-top:.5px;
  border-radius:50%;background:rgba(91,76,216,.11);color:var(--butter);
  display:grid;place-items:center;font:700 .5938rem/1 var(--sans)}
.plan-caps b{font-weight:700;color:var(--ink)}
.plan .btn{margin-top:auto;width:100%;justify-content:center;border-radius:.5rem;
  padding:.9375rem 0;font-size:.9375rem;font-weight:600}
.plan .btn-quiet{border:1px solid rgba(91,76,216,.24);background:rgba(91,76,216,.035);
  color:var(--butter);font-weight:600}
.plan .btn-quiet:hover{border-color:var(--butter);background:rgba(91,76,216,.08)}

/* the recommended tier — the one surface here allowed to be lit */
.plan-team{border:1.5px solid var(--butter);z-index:2;
  background:linear-gradient(180deg,var(--butter-tint) 0%,#FFFFFF 46%,rgba(var(--e-foot),.5) 100%);
  box-shadow:var(--lift-3),var(--glow-l)}
.plan-team::before,.plan-team::after{display:none}
.plan-team .plan-caps{border-top-color:rgba(91,76,216,.22)}
.plan-team .plan-caps li::before{background:#FFFFFF}
.plan-team .btn-butter{box-shadow:var(--glow-m),0 .625rem 1.5rem -.75rem rgba(91,76,216,.6)}

/* badge — three treatments: in-flow above the name on a 1-col phone, a corner
   pill on the 2-col tablet, a pill straddling the raised card on 4-col desktop */
.plan-flag{align-self:flex-start;display:inline-flex;align-items:center;margin-bottom:.6875rem;
  padding:.375rem .8125rem;border-radius:62.4375rem;white-space:nowrap;
  background:var(--butter-tint);color:var(--butter);
  font:700 .5938rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
@media (min-width:836px){
  .plan-flag{position:absolute;top:clamp(1.25rem,2vw,1.625rem);right:clamp(1.25rem,2vw,1.625rem);
    margin:0;font-size:.5625rem;letter-spacing:.12em;padding:.3125rem .6875rem}
}
@media (min-width:1188px){
  .plan-team{transform:translateY(-.75rem)}
  .plan-team:hover{transform:translateY(-1.125rem)}
  .plan-flag{top:0;right:auto;left:50%;transform:translate(-50%,-50%);
    padding:.4375rem 1rem;color:#FFFFFF;font-size:.625rem;letter-spacing:.16em;
    background:linear-gradient(180deg,var(--butter-lit),var(--butter));
    box-shadow:0 .5rem 1.25rem -.4375rem rgba(91,76,216,.5),inset 0 1px 0 rgba(255,255,255,.35)}
}

.plan-fine{margin:clamp(1.5rem,3vw,2.75rem) auto 0;max-width:70ch;text-align:center;
  font:400 clamp(.8125rem,1vw,.9063rem)/1.7 var(--sans);color:rgba(20,23,43,.52)}
.assur{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:.625rem clamp(.875rem,1.6vw,1.25rem);margin-top:clamp(1.25rem,2.6vw,2.375rem)}
.assur li{display:flex;gap:.5rem;align-items:center;
  padding:.625rem 1.125rem;border-radius:.5rem;background:rgba(91,76,216,.06);
  font:500 clamp(.8125rem,1vw,.875rem)/1.4 var(--sans);color:rgba(20,23,43,.72)}
.assur li::before{content:"\2713";flex:none;color:var(--butter);font-size:.8125rem;font-weight:700;line-height:1}

/* ============ FAQ ============ */
.faq-sect{position:relative;padding:clamp(3.375rem,9vw,7.5rem) 0}
.faq-sect .wrap{position:relative;z-index:2}
.faq-sect .sect-head{text-align:center;margin-left:auto;margin-right:auto}
.faq-sect .sect-h{font:600 clamp(1.875rem,4vw,3.25rem)/1.2 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.faq-rule{display:none}
.faq{margin-top:clamp(1.75rem,3.8vw,3.75rem);max-width:50rem;margin-left:auto;margin-right:auto;
  display:flex;flex-direction:column;gap:clamp(.5625rem,1vw,.875rem)}
.faq-it{position:relative;border-radius:.625rem;
  border:none;background:rgba(91,76,216,.04);
  transition:background .22s var(--ease-out)}
.faq-it::before{display:none}
.faq-it.open{background:rgba(91,76,216,.07)}
@media (hover:hover) and (pointer:fine){
  .faq-it:hover{background:rgba(91,76,216,.07)}
}
.faq-q{display:flex;align-items:center;gap:clamp(.75rem,1.4vw,1.125rem);width:100%;text-align:left;
  padding:clamp(1.125rem,2vw,1.5rem) clamp(1.25rem,2.2vw,1.75rem);
  font:500 clamp(.9375rem,1.2vw,1.125rem)/1.4 var(--sans);color:var(--ink);
  transition:transform .12s var(--ease-out)}
.faq-q:active{transform:scale(.998)}
.faq-ico{display:none}
.faq-qt{flex:1;min-width:0}
.faq-plus{flex:none;width:1.25rem;height:1.25rem;position:relative}
.faq-plus::before,.faq-plus::after{content:"";position:absolute;left:50%;top:50%;
  background:rgba(20,23,43,.35);border-radius:1px;
  transition:transform .3s var(--ease-in-out),opacity .3s var(--ease-out)}
.faq-plus::before{width:.875rem;height:1.5px;transform:translate(-50%,-50%)}
.faq-plus::after{width:1.5px;height:.875rem;transform:translate(-50%,-50%)}
.faq-it.open .faq-plus::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq-a{overflow:hidden;height:0}
.faq-a p{padding:0 clamp(1.25rem,2.2vw,1.75rem) clamp(1.25rem,2.2vw,1.625rem);
  max-width:68ch;font:400 clamp(.875rem,1.1vw,1rem)/1.7 var(--sans);color:rgba(20,23,43,.58)}

/* ============ START · the last thing on the page ============ */
.start-sect{position:relative;
  padding:clamp(3rem,4.4vw,4.5rem) 0 clamp(3rem,4.4vw,4.5rem)}
/* The plate background is restored. What stays gone is the gold outline that
   .start-panel::after used to draw: the plate has depth, not a frame. */
.start-panel{position:relative;border-radius:1.375rem;overflow:hidden;
  min-height:clamp(28.75rem,44vw,49.3125rem);display:flex;align-items:center}
/* The plate lives on a pseudo-element so its edges can be feathered into the
   page ground without also fading the copy sitting on top of it. Same tone as
   .faq-it; what changes is that it has no hard rectangle edge. */
.start-panel::before{content:"";position:absolute;inset:0;z-index:0;
  pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(var(--e-well),.62),rgba(var(--e-sink),.80));
  -webkit-mask-image:
    linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%),
    linear-gradient(90deg,transparent 0%,#000 9%,#000 91%,transparent 100%);
  mask-image:
    linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%),
    linear-gradient(90deg,transparent 0%,#000 9%,#000 91%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
/* the glow the panel throws onto the page above it */
.start-halo{position:absolute;left:8%;right:8%;top:-2.875rem;height:2.875rem;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse 60% 100% at 52% 100%,rgba(91,76,216,.16),rgba(91,76,216,0) 70%);
  filter:blur(.375rem)}
.sp-globe{position:absolute;left:26%;right:-4%;top:-12%;bottom:-8%;overflow:hidden;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 62% 78% at 62% 52%,#000 18%,rgba(0,0,0,.42) 56%,rgba(0,0,0,0) 82%);
  mask-image:radial-gradient(ellipse 62% 78% at 62% 52%,#000 18%,rgba(0,0,0,.42) 56%,rgba(0,0,0,0) 82%)}
.sp-globe img{width:100%;height:100%;object-fit:cover;object-position:38% 46%;
  opacity:.66;filter:contrast(.92) saturate(.95)}
.sp-wave{position:absolute;left:0;right:0;bottom:-3%;width:100%;height:62%;object-fit:cover;
  object-position:50% 100%;mix-blend-mode:screen;opacity:.82;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 16%,rgba(0,0,0,.34) 26%,#000 40%,#000 84%,rgba(0,0,0,.35) 92%,rgba(0,0,0,0) 97%),
    linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 22%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 16%,rgba(0,0,0,.34) 26%,#000 40%,#000 84%,rgba(0,0,0,.35) 92%,rgba(0,0,0,0) 97%),
    linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 22%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.sp-topline{position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;z-index:3;
  background:linear-gradient(90deg,rgba(91,76,216,0) 4%,rgba(91,76,216,.55) 34%,
    rgba(91,76,216,.95) 56%,rgba(91,76,216,.5) 74%,rgba(91,76,216,0) 97%)}
/* the gold frame that outlined the closer was removed 2026-09-01 along with
   the panel's plate: the section sits flat on the page ground now. */
.start-copy{position:relative;z-index:4;width:min(52%,40rem);
  padding:clamp(2.125rem,4.6vw,5rem) clamp(1.625rem,4vw,4.5rem)}
.sp-tag{font:500 clamp(.6875rem,.9vw,.8125rem)/1 var(--mono);letter-spacing:.3em;
  text-transform:uppercase;color:rgba(91,76,216,.78)}
.sp-rule{display:block;width:2.125rem;height:1px;background:var(--butter);opacity:.85;margin-top:1.25rem}
.sp-h{margin-top:clamp(1.25rem,2.4vw,2rem);
  font:600 clamp(2.5rem,6vw,5.75rem)/1.04 var(--sans);letter-spacing:-.025em;
  color:var(--ground);text-wrap:balance;-webkit-text-stroke:0}
.sp-h em{font-style:normal;color:var(--butter)}
.sp-sub{margin-top:clamp(1.375rem,2.8vw,2.625rem);max-width:44ch;
  font-size:clamp(.9375rem,1.25vw,1.1875rem);line-height:1.62;color:rgba(20,23,43,.66)}
.sp-cta{position:relative;display:inline-block;margin-top:clamp(1.625rem,3.2vw,2.75rem)}
.sp-glow{position:absolute;left:50%;top:50%;width:18.75rem;height:9.375rem;
  transform:translate(-50%,-46%);border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(91,76,216,.34),rgba(91,76,216,0) 68%);
  filter:blur(1rem)}
.sp-btn{position:relative;min-width:clamp(11.875rem,17vw,14.8125rem);min-height:clamp(3.75rem,5.4vw,5.125rem);
  border-radius:.375rem;font-size:clamp(1rem,1.35vw,1.125rem);font-weight:600;letter-spacing:.01em;
  background:linear-gradient(180deg,#7B6FE0,#5B4CD8 46%,#5B4CD8);color:var(--ink);
  box-shadow:var(--glow-m),0 .625rem 1.625rem rgba(91,76,216,.14)}
.sp-btn:hover{filter:brightness(1.05);box-shadow:var(--glow-s),0 .75rem 1.875rem rgba(91,76,216,.18)}

/* ============ footer ============ */
.footer{position:relative;padding:clamp(3rem,6vw,5.5rem) 0 2.5rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(1.75rem,4vw,3.75rem)}
.foot-brand svg{width:8.25rem;color:var(--ground)}
.foot-brand p{margin-top:1.125rem;max-width:30ch;font:400 1.0625rem/1.55 var(--serif);font-style:italic;
  color:rgba(20,23,43,.54)}
.foot-col b{display:block;font:400 .625rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
  color:rgba(91,76,216,.66);margin-bottom:1.125rem}
.foot-col a{display:block;font:500 .9063rem/2.2 var(--sans);text-decoration:none;color:rgba(20,23,43,.66);
  transition:color .2s var(--ease-out)}
.foot-col a:hover{color:var(--butter)}
.foot-legal{margin-top:clamp(2.5rem,4vw,3.75rem);padding-top:1.5rem;
  border-top:1px solid rgba(91,76,216,.12);
  display:flex;justify-content:space-between;gap:1rem;font-size:.7813rem;color:rgba(20,23,43,.58)}

/* ============ the page's light ============
   The page was ten opaque dark panels, each clipping its own glow at its own
   edge: that is what drew the lines and left the flat sections empty. So:

   - every section is transparent. A seam is now ground-on-ground, a zero step,
     which is why the bands are gone rather than merely softened.
   - every section clips horizontally only. Light crosses the seam into the
     next section instead of being cut off at it.
   - every section carries one pool of light, placed low so it falls downward
     into its neighbour, the way light actually behaves.

   One material: butter. Three strengths. Every pool resolves to fully
   transparent, so no pool can ever produce an edge. */
[data-sect]{background:transparent}
[data-sect]{overflow-x:clip;overflow-y:visible}
[data-sect] > .wrap{position:relative;z-index:2}
/* ---- ambient washes removed ----
   Butter is a warm yellow and the ground is a cool navy, so a butter wash over
   it does not read as light: at these alphas it composites to khaki. The two
   skills agree independently. The taste skill bans outer glows as a default
   tell; minimalist-ui puts ambient radials at opacity 0.02-0.04, and these ran
   0.09-0.20, three to five times that.

   Light on this page now comes only from things that are actually lit: the
   medallions, the pipe behind a card edge, the seal, the recommended tier, the
   start panel and its button. Nothing glows on its own account.

   The layers below are kept as inert hooks so any of them can be restored by
   putting its background back. */
[data-sect]::before{content:none}

/* these two hold full-bleed media, so they keep clipping on both axes.
   the footer clips because it is last: an unclipped pool box there would add
   dead scroll below the page. Its gradient reaches zero well inside the
   footer, so the clip removes nothing that is visible. */
.hero,.tariff-sect,.footer{overflow:clip}


/* ---- the joints ----
   A seam shows when one side of it is lit and the other is not: Sect. 02's
   floor glow meeting Sect. 03's plain top read as a line, and so did the panel
   meeting the footer. Rather than dimming the glows that cause it, every
   section carries a shallow glow at its head AND at its foot, in one element,
   so both sides of every joint are lit by the same amount. Symmetric by
   construction, so it cannot introduce a step of its own. */
[data-sect]::after{content:none}

/* ============ responsive ============ */
@media (max-width:1385px){
  .proc-left{padding-right:2rem;gap:2rem}
}
@media (max-width:1187px){
  /* narrower than the frame's own proportion: the sides are trimmed so the
     planet keeps its scale. Still shown below 1:1, never above. */
  .hero-media video,.hero-media .still{width:152%}
  .prov-grid{grid-template-columns:1fr;max-width:40rem}
  .prov-note{flex-wrap:wrap;max-width:40rem}
  .prov-note .rule{display:none}
  .prov-note ul{flex:1 1 100%}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
  .plan-team{transform:none}
  .assur{justify-content:center}
  .trust-promises{flex-direction:column;align-items:center}
  .trust-promise{max-width:25rem;width:100%}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1011px){
  .console{width:min(38.75rem,100%);margin-left:auto;margin-right:auto}
  .hsteps{grid-template-columns:repeat(2,1fr);gap:1.125rem 0}
  .scope-list{grid-template-columns:1fr}
  .hdr-nav,.hdr .hdr-login{display:none}
  /* nav is gone, so nothing carries the margin-left:auto any more — pin the
     action cluster (Start free + menu) hard to the right and let it sit as one
     balanced unit against the burger */
  .hdr-actions{margin-left:auto;gap:.625rem}
  .hdr-burger{display:block}
  /* match the CTA pill's height so the two read as a pair, and give a bigger
     tap target on touch */
  .hdr .btn{min-height:2.75rem;padding:.6875rem 1.25rem}
  .hdr-burger{width:2.75rem;height:2.75rem;border-radius:.5625rem}
  .hdr-sect{display:none}
  .rej-top{grid-template-columns:1fr}
  .rej-swarm{flex-direction:column;align-items:flex-start}
  .dockets{max-width:100%}
}
@media (max-width:835px){
  .hero-media video,.hero-media .still{width:215%}
  .hero{padding-bottom:clamp(1.625rem,4vh,2.75rem)}
  .hero-h{font-size:clamp(2.125rem,9.6vw,2.875rem)}
  .hero-sub{font-size:.9063rem;max-width:46ch}
  .hstage{margin-top:clamp(1.375rem,3.4vh,2.125rem)}
  .hsteps{padding-top:.875rem;padding-bottom:.25rem}
  /* .hstep-t, not `.hstep span`: that selector also matches .hstep-ico and
     took the medallions down with the copy. */
  .hstep-t{display:none}
  .hstep b{font-size:.8125rem;margin-top:.75rem}
  .hstep-ico{--is:3.25rem}
  .hero-cta{flex-direction:column;align-items:stretch;width:100%;max-width:20.625rem}
  .hero-cta .btn{flex:1 1 auto;justify-content:center}
  .review{flex-wrap:wrap;gap:.75rem}
  .rv-id{flex:1 1 100%;order:1}
  .ring-sm{order:2}
  .rv-act{order:3;flex:1;justify-content:flex-end}
  .sf-line{justify-content:flex-end}
  .trust-promise{flex:1 1 100%;max-width:100%}
  .rej-ratio{flex-wrap:wrap;justify-content:flex-start;gap:.875rem}
  .rej-ratio .fil{display:none}
  .rej-fig{min-width:0;text-align:left}
  .rej-arrow{transform:rotate(90deg);margin:.375rem 0 .375rem 1.625rem}
  .rej-foot{justify-content:center}
  .f-body{flex-direction:column;gap:.875rem}
  .f-ring{flex-direction:column;align-items:flex-start;gap:1rem;padding-top:.75rem}
  .f-ticks{padding:0 clamp(1.125rem,5vw,1.5rem) clamp(1.25rem,5.5vw,1.625rem)}
  .prov-note{padding:1.5rem}
  .proc-globe{width:100%;min-width:0;height:20rem;opacity:.85}
  .scope-list{grid-template-columns:1fr}
  .scope-field{flex-wrap:wrap}
  .sf-run{width:100%;justify-content:center}
  .plans{grid-template-columns:1fr;align-items:stretch}
  .plan{min-height:0}
  .assur{justify-content:flex-start}
  .foot-grid{grid-template-columns:1fr}
  .foot-legal{flex-direction:column}
}
@media (max-width:571px){
  .hero-media video,.hero-media .still{width:270%}
  /* the four stations are told properly in Sect. 01; here the record
     awaiting approval is the whole point */
  .hsteps{display:none}
  .review{margin-top:.75rem}
  .rv-act .btn{flex:1}
  .t-brand{display:none}
}
/* tightest phones — keep logo + Start free + menu on one uncramped line */
@media (max-width:483px){
  .hdr-inner{gap:.75rem}
  .hdr-logo,.hdr.lifted .hdr-logo{width:5.875rem}
  .hdr-actions{gap:.5rem}
  .hdr .btn{padding:.6875rem .9375rem;font-size:.8438rem}
}

/* ============ reduced motion · every reveal resolves, every loop stops ============ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .foil::after{display:none}
  .sf-caret{display:none}
}


/* ============================================================
   Part 2: behaviour-stage styles, light-theme corrections,
   consistency sweep, mobile responsive pass, hero stage
   ============================================================ */
/* behaviour-stage styles */
.sh-mask{display:block;overflow:clip}
.sf-caret{animation:kp-blink 1.1s steps(1) infinite}
@keyframes kp-blink{50%{opacity:0}}
html.js:not(.rm) :is(.hero-sub,.hero-cta .btn,.hero-assure-line,.console,.hero-rule){opacity:0}
html.js.anim-timeout :is(.hero-sub,.hero-cta .btn,.hero-assure-line,.console,.hero-rule){opacity:1!important}
html.js:not(.rm) .hl-in{transform:translateY(112%)}
html.js.anim-timeout .hl-in{transform:none!important}
@media (hover:hover) and (pointer:fine){
  .fcard-in:hover{border-color:rgba(91,76,216,.18);box-shadow:var(--lift-2)}
}

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT THEME CORRECTIONS
   Appended after the sheet so these win on cascade. Each block fixes a defect
   the dark-to-light conversion introduced, measured with a contrast audit.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1 · the primary button. It was gold with dark text; the accent is now indigo,
      so the dark text fell to 1.63:1. White on indigo measures 8.6:1. */
.btn-butter{background:var(--butter);color:#FFFFFF}
.btn-butter:hover{background:var(--butter-lit);color:#FFFFFF}
.btn-butter .btn-ico,.btn-butter svg{fill:currentColor;stroke:currentColor}

/* 6 · the skip link sits on a genuinely dark chip, so it needs light text.
      --ground now resolves dark, which made it dark-on-dark at 1.0:1. */
.skip{background:var(--ink);color:#F7F7F4}

/* 4 · muted text. The dark theme used low-alpha LIGHT text, which reads fine on
      a dark ground. The same alphas as DARK text on a light ground go weak, so
      the floor moves to .72 (about 5.6:1). */
.hero-assure-line,
.foot-brand p,
.rej-lab,
.foot-legal span,
.foot-legal .tag{color:rgba(20,23,43,.72)}

/* 5 · hairlines. White at 5% reads on dark; black at 5% does not read on light.
      The ruled lines carry the register language, so they have to be visible. */
.f-obj,.f-row{border-color:rgba(20,23,43,.14)}
.f-row.dim{border-color:rgba(20,23,43,.10)}

/* 3 · the decorative glows were "gold emitting light on a dark ground". Nothing
      emits on a light ground, so they become almost-neutral tints instead of
      indigo washes, which read as bruising. */
.atmos{opacity:.5}
.f-medal{
  background:rgba(91,76,216,.08)}
.hero-media .rule-field{opacity:.55}

/* ── further light-theme corrections ─────────────────────────────────────── */

/* the closer's CTA is .sp-btn, a different class from .btn-butter, with its own
   gradient and its own colour. It kept --ink and fell to 2.31:1. */
.sp-btn{color:#FFFFFF}
.sp-btn:hover{color:#FFFFFF}

/* the accent glowed on a dark ground. On light a blurred radial is a smudge,
   so the halo behind the CTA becomes a soft contact shadow instead. */
.sp-glow{background:radial-gradient(ellipse at 50% 50%,rgba(91,76,216,.10),rgba(91,76,216,0) 70%);
  filter:blur(1.25rem)}
.start-halo,.proc-glow,.scope-glow{opacity:.28}

/* the filets carried a lit point at the rule's end. Lit points do not read on
   paper, so they become a plain drawn rule. */

/* the closer's ask sits under the headline and above the outcome: read the
   claim, take the action, then see what the action produces. */
.sp-lede{margin:clamp(.875rem,1.8vw,1.25rem) auto 0;text-align:center;max-width:46ch;
  font:400 clamp(.9375rem,1.25vw,1.0938rem)/1.6 var(--sans);color:var(--second)}
.sp-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(.625rem,1.2vw,.875rem);margin-top:clamp(1.25rem,2.4vw,1.875rem)}
.sp-btn2{min-height:clamp(3.75rem,5.4vw,5.125rem);padding:0 clamp(1.375rem,2.2vw,2rem);
  border-radius:.375rem;font-size:clamp(.9375rem,1.2vw,1.0625rem);font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(20,23,43,.22);color:var(--ink);background:transparent;
  transition:border-color .22s var(--ease-out)}
.sp-btn2:hover{border-color:currentColor}

/* The closer's buttons were 82px tall and force-widened to 237px, against 51px
   everywhere else on the page. Width is content-driven now, and the height sits
   just above the hero's so the final CTA still reads as the primary one. */
.sp-btn,.sp-btn2{min-width:0;min-height:0;height:3.375rem;padding:0 1.875rem;
  font-size:clamp(.9375rem,1.1vw,1.0313rem);line-height:1;
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.sp-cta{gap:.75rem}
.sp-glow{width:13.125rem;height:6rem}

/* ══════════════════════════════════════════════════════════════════════════
   CONSISTENCY SWEEP  ·  one scale for labels, headings, buttons, radii, rules
   ══════════════════════════════════════════════════════════════════════════ */

/* 1 · section labels. Three treatments existed: .sect-tag 11/2.64, .eyebrow
      13/4.5, .sp-tag 13/3.9. They are the same element, so one treatment. */
.sect-tag,.eyebrow,.sp-tag{font-size:.6875rem;letter-spacing:.24em;line-height:1.4}

/* 2 · headline scale. The closer was 101px, larger than the hero at 68, and the
      standard was 76. The hero stays the biggest thing on the page. */
.hero-h{font-size:clamp(2.375rem,5.2vw,4.25rem)}
.sect-h{font-size:clamp(2rem,4.4vw,3.625rem)}
.sp-h{font-size:clamp(2.125rem,4.6vw,3.875rem)}

/* 3 · buttons. Five heights existed (40/48/51/54). Nav stays 40, every content
      CTA is 48, and the closer sits at 52 so it still reads as the last word. */
.hero-cta .btn{min-height:3rem;height:3rem;font-size:1rem}
.sf-run,.tariff-sect .btn{min-height:3rem;height:3rem;font-size:1rem}
.sp-btn,.sp-btn2{height:3.25rem;font-size:1rem}

/* 4 · radii on a three-step scale: 8 small, 12 card, 20 panel. Six values
      existed (8/10/12/14/21/22). */
.slip,.f-obj,.plan{border-radius:.75rem}
.console,.start-panel{border-radius:1.25rem}

.slip,.f-obj,.plan,.console{border-color:rgba(91,76,216,.15)}

/* 6 · section rhythm. The closer sat at 68 against 96 everywhere else; it now
      rides the same clamp as .sect so the whole page breathes on one scale. */
#cta{padding-top:clamp(3.375rem,9vw,7.5rem);padding-bottom:clamp(2.75rem,6vw,5.25rem)}

/* .start-panel draws no border, but its colour was the odd one out */
.start-panel{border-color:rgba(91,76,216,.15)}

/* The rejects section carried lit points and 122px radial halos: a gold spark
   at the end of each filet, and soft blooms behind the two figures. Those read
   as light emitted onto a dark ground. On paper they read as smudges, so the
   filets become plain drawn rules and the blooms go. */


/* ── the seal's face keeps its gold, on both grounds ──────────────────────
   The face is a navy enamel disc in the light cut as well as the dark one, so
   the legend and the k must stay gold: they sit on navy, not on the page. The
   palette sweep recoloured them to the accent, which put indigo on navy and
   made the legend unreadable.

/* ══════════════════════════════════════════════════════════════════════════
   HERO STAGE  ·  four tabs, one product, tab 01 animated
   The stage replaces the old static four-step strip, which duplicated the
   Art. I-IV cards two screens further down.
   ══════════════════════════════════════════════════════════════════════════ */
.hstage{max-width:min(71.25rem,94vw)}
.console{padding:clamp(2.125rem,3vw,2.625rem) clamp(1.25rem,2.4vw,2rem) clamp(1.125rem,1.9vw,1.625rem)}

/* --- the tab strip ------------------------------------------------------- */
.stg-tabs{display:flex;gap:.125rem;border-bottom:1px solid var(--line);
  margin:0 0 clamp(1.125rem,2vw,1.625rem);overflow-x:auto;scrollbar-width:none}
.stg-tabs::-webkit-scrollbar{display:none}
.stg-tab{position:relative;flex:1 1 0;min-width:8.25rem;background:none;border:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;
  padding:.625rem .75rem .75rem;cursor:pointer;text-align:left;
  border-bottom:.125rem solid transparent;margin-bottom:-1px;
  transition:color .22s var(--ease-out),border-color .22s var(--ease-out)}
.stg-tab i{font:400 .625rem/1 var(--mono);letter-spacing:.18em;color:var(--second);font-style:normal}
.stg-tab span{font:500 clamp(.75rem,1.05vw,.8438rem)/1.25 var(--sans);color:var(--second)}
.stg-tab.is-on{border-bottom-color:var(--butter)}
.stg-tab.is-on i{color:var(--butter)}
.stg-tab.is-on span{color:var(--ink);font-weight:600}
.stg-tab:hover span{color:var(--ink)}
.stg-tab:focus-visible{outline:.125rem solid var(--butter);outline-offset:-.125rem;border-radius:.25rem}

.stg-body{position:relative;min-height:clamp(17.25rem,25vw,20rem)}
/* !important because the panels set display via an ID selector (#stgP2 is
   display:flex) and an ID outranks .stg-panel[hidden] - without this the
   hidden tab renders underneath the active one. */
.stg-panel[hidden]{display:none!important}
.stg-soon{font:400 .75rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--second);text-align:center;padding:6rem 0}

/* --- 01 · THE SPLIT STAGE ------------------------------------------------
   Left: the site being looked through. Right: the record being written.
   Act 3 is NOT extraction - the customer profile is reasoned by Keenpipe, not
   read off the site, so the pane sheds its browser chrome and becomes ours.
   Full beat sheet in stage-prototype/BRIEF.md.
   Everything is prefixed s1- and scoped to #stgP1 so nothing leaks either way.
   -------------------------------------------------------------------------- */
#stgP1{position:relative;
  --s1-faint:#8B90A0; --s1-line2:#D6D5CC; --s1-rail:#FCFCFA;
  --s1-ok:#1B7F5A; --s1-ok-wash:#E7F3EC;
  --s1-warn:#B45309; --s1-warn-wash:#FDF3E7;
  --s1-ph:25rem; --s1-rh:27.1875rem}
#stgP1 *{box-sizing:border-box}
#stgP1 p{margin:0}

/* --- the run status, all that survives of the prototype's left rail ------- */
.s1-status{display:flex;align-items:center;gap:.5625rem;margin-bottom:.6875rem}
.s1-crumb{font:400 .6563rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--s1-faint)}
.s1-state{margin-left:auto;display:flex;align-items:center;gap:.5rem;
  font:400 .6563rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--second)}
.s1-dot{width:.4375rem;height:.4375rem;border-radius:50%;background:var(--s1-faint);flex:none;
  transition:background .25s}
.s1-dot.is-live{animation:s1-pulse 1.4s ease-in-out infinite}
@keyframes s1-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* --- the address field ---------------------------------------------------- */
.s1-field{display:flex;align-items:center;gap:.75rem;border:1px solid var(--s1-line2);
  border-radius:.6875rem;background:var(--plate);padding:.6875rem .6875rem .6875rem 1.0625rem;
  box-shadow:var(--lift-1);transition:border-color .25s,box-shadow .25s}
.s1-field.is-hot{border-color:var(--butter);box-shadow:0 0 0 .1875rem var(--butter-tint),var(--lift-1)}
.s1-glob{width:1.125rem;height:1.125rem;flex:none;fill:none;stroke:var(--second);stroke-width:1.5}
.s1-fav{width:1.125rem;height:1.125rem;border-radius:.3125rem;background:var(--butter);color:#fff;
  display:none;place-items:center;font:600 .625rem/1 var(--sans);flex:none}
.s1-fav.is-on{display:grid}
.s1-url{font:400 1rem/1 var(--mono);color:var(--ink);white-space:nowrap;min-height:.9375rem}
.s1-caret{width:.125rem;height:1.125rem;background:var(--butter);flex:none;opacity:0}
.s1-go{margin-left:auto;flex:none;font:600 .875rem/1 var(--sans);color:#fff;
  background:var(--butter);border:0;border-radius:.5rem;padding:.8125rem 1.25rem;
  box-shadow:var(--lift-1);display:flex;align-items:center;gap:.5rem;min-width:8.75rem;
  justify-content:center;transition:background .2s}
.s1-go.is-hov{background:var(--butter-lit)}
.s1-go .s1-sp{display:none;width:.75rem;height:.75rem;border-radius:50%;
  border:.125rem solid rgba(255,255,255,.35);border-top-color:#fff;animation:s1-spin .7s linear infinite}
.s1-go.is-busy .s1-sp{display:block}
.s1-go.is-busy .s1-lbl{display:none}
@keyframes s1-spin{to{transform:rotate(360deg)}}

/* --- the stage: two columns ----------------------------------------------- */
.s1-stage{height:0;opacity:0;overflow:hidden}
.s1-stage-in{display:grid;grid-template-columns:1fr 1.06fr;gap:.875rem;padding-top:.875rem}

/* --- left: the site viewer ------------------------------------------------ */
.s1-viewer{align-self:start;border:1px solid var(--line);border-radius:.6875rem;background:var(--plate);
  box-shadow:var(--lift-1);overflow:hidden}
.s1-vbar{display:flex;align-items:center;gap:.5625rem;padding:.6875rem .875rem;
  border-bottom:1px solid var(--line);background:var(--s1-rail)}
.s1-lock{width:.8125rem;height:.8125rem;flex:none;fill:none;stroke:var(--s1-faint);stroke-width:1.8}
.s1-vpath{font:400 .75rem/1 var(--mono);color:var(--second);white-space:nowrap;overflow:hidden}
.s1-vcount{margin-left:auto;font:400 .7188rem/1 var(--mono);color:var(--s1-faint);flex:none}
.s1-screen{position:relative;height:var(--s1-ph);overflow:hidden;background:var(--plate)}
.s1-roll{position:absolute;inset:0}
.s1-page{height:var(--s1-ph);padding:1.125rem 1.0625rem;display:flex;flex-direction:column;gap:.8125rem}

/* the skeleton vocabulary the fake pages are built from */
.s1-band{display:flex;align-items:center;gap:.4375rem;padding-bottom:.5625rem;border-bottom:1px solid var(--line)}
.s1-band .s1-m{width:1.1875rem;height:1.1875rem;border-radius:.3125rem;background:var(--butter);color:#fff;
  display:grid;place-items:center;font:600 .6875rem/1 var(--sans)}
.s1-band em{font:600 .7188rem/1 var(--sans);font-style:normal;color:var(--ink)}
.s1-band .s1-nn{margin-left:auto;display:flex;gap:.375rem}
.s1-band .s1-nn i{display:block;width:1.625rem;height:.3125rem;border-radius:.1875rem;background:var(--line)}
.s1-h{font:600 .9688rem/1.2 var(--sans);color:var(--ink)}
.s1-ln{height:.375rem;border-radius:.1875rem;background:var(--paper2)}
.s1-ln.is-s{width:62%} .s1-ln.is-m{width:84%} .s1-ln.is-xs{width:40%}
.s1-lead{font:400 .7813rem/1.5 var(--sans);color:var(--second);position:relative;z-index:2}
.s1-stats{display:flex;gap:.5rem;margin-top:auto}
.s1-stats div{flex:1;border:1px solid var(--line);border-radius:.5rem;padding:.625rem;text-align:center}
.s1-stats b{display:block;font:400 .9688rem/1 var(--mono);color:var(--butter)}
.s1-stats span{display:block;margin-top:.3125rem;font:400 .5938rem/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--s1-faint)}
.s1-svc{display:flex;flex-direction:column;gap:.5rem;position:relative;z-index:2}
.s1-svc .s1-s{display:flex;align-items:center;gap:.6875rem;border:1px solid var(--line);
  border-radius:.5625rem;padding:.6875rem .8125rem;background:var(--plate)}
.s1-svc .s1-s .s1-sq{width:1.5625rem;height:1.5625rem;border-radius:.375rem;flex:none;display:grid;place-items:center}
.s1-svc .s1-s .s1-sq svg{width:.875rem;height:.875rem;fill:none;stroke:#fff;stroke-width:1.9}
.s1-svc .s1-s strong{font:600 .7813rem/1 var(--sans)}
.s1-svc .s1-s .s1-ln{flex:1;margin-left:.375rem}
.s1-cases{display:flex;flex-direction:column;gap:.5625rem}
.s1-cases .s1-c{display:flex;gap:.5625rem;align-items:flex-start}
.s1-cases .s1-c .s1-img{width:4.25rem;height:2.875rem;border-radius:.4375rem;flex:none;
  background:linear-gradient(135deg,var(--paper2),var(--line))}
.s1-cases .s1-c .s1-co{flex:1;display:flex;flex-direction:column;gap:.3125rem;padding-top:.1875rem}
/* a client wall is small quiet marks, not colour slabs: saturated colour on
   this page belongs to us, not to placeholders for other people's companies */
.s1-clients{display:grid;grid-template-columns:repeat(2,1fr);gap:.4375rem;position:relative;z-index:2}
.s1-clients .s1-cl{display:flex;align-items:center;gap:.625rem;border:1px solid var(--line);
  border-radius:.5rem;padding:.625rem .75rem;background:var(--plate)}
.s1-clients .s1-cl i{width:1.375rem;height:1.375rem;border-radius:.375rem;flex:none;display:grid;
  place-items:center;color:#fff;font:600 .6875rem/1 var(--sans);font-style:normal}
.s1-clients .s1-cl .s1-ln{flex:1}


/* the scanned company's own mark, and the marks of the clients it lists.
   Each sits over its initial, so a missing file degrades to a monogram. */
.s1-fav,.s1-band .s1-m,.s1-idhead .s1-mono,.s1-clients .s1-cl i,.s1-tm i{position:relative;overflow:hidden}
.s1-fav img,.s1-band .s1-m img,.s1-idhead .s1-mono img,.s1-clients .s1-cl i img,.s1-tm i img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s1-clients .s1-cl b{min-width:0;font:500 .6875rem/1.2 var(--sans);color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* a real About page has a team on it */
.s1-team{display:flex;gap:.875rem;flex-wrap:wrap}
.s1-tm{display:flex;align-items:center;gap:.5rem;min-width:0}
.s1-tm i{width:1.625rem;height:1.625rem;border-radius:50%;flex:none;display:grid;place-items:center;
  color:#fff;font:600 .5938rem/1 var(--sans);font-style:normal}
.s1-tm b{display:block;font:600 .6563rem/1.2 var(--sans);color:var(--ink);white-space:nowrap}
.s1-tm em{display:block;margin-top:.125rem;font:400 .5938rem/1.2 var(--sans);font-style:normal;
  color:var(--s1-faint);white-space:nowrap}
/* the highlight sweep that locks onto what is worth taking */
.s1-sweep{position:absolute;left:.5625rem;right:.5625rem;height:1.375rem;border-radius:.375rem;opacity:0;
  background:rgba(91,76,216,.11);box-shadow:inset 0 0 0 1.5px rgba(91,76,216,.42);
  z-index:3;pointer-events:none}
.s1-sweep.is-hit{background:rgba(27,127,90,.13);box-shadow:inset 0 0 0 1.5px rgba(27,127,90,.5)}

/* --- act 3: the same pane, no longer a browser ---------------------------- */
.s1-reason{position:absolute;inset:0;background:var(--plate);padding:1.125rem;opacity:0;
  display:flex;flex-direction:column;z-index:4}
.s1-rhead{display:flex;align-items:center;gap:.5rem;padding-bottom:.5625rem;border-bottom:1px solid var(--line)}
.s1-rk{width:1.375rem;height:1.375rem;border-radius:.375rem;background:var(--butter);color:#fff;
  display:grid;place-items:center;font:600 .75rem/1 var(--sans);flex:none}
.s1-rhead b{font:600 .8438rem/1 var(--sans)}
.s1-rhead .s1-think{margin-left:auto}
.s1-rsrc{display:flex;flex-wrap:wrap;gap:.4375rem;margin:.8125rem 0 1.0625rem}
.s1-rsrc span{font:400 .6563rem/1 var(--mono);color:var(--second);background:var(--paper2);
  border:1px solid var(--line);border-radius:.3125rem;padding:.3125rem .4375rem;opacity:0}
.s1-rlines{position:relative;padding-left:1.1875rem;display:flex;flex-direction:column;gap:.9375rem}
.s1-rlines:before{content:'';position:absolute;left:.1875rem;top:.3125rem;bottom:.3125rem;width:1px;
  background:var(--s1-line2)}
.s1-rstep{position:relative;opacity:0}
.s1-rstep .s1-rd{position:absolute;left:-1.1875rem;top:.3125rem;width:.5rem;height:.5rem;border-radius:50%;
  background:var(--plate);box-shadow:inset 0 0 0 .125rem var(--butter)}
.s1-rstep p{font:400 .7813rem/1.45 var(--sans);color:var(--ink)}
#stgP1 .s1-rnote{margin-top:auto;padding-top:.8125rem;border-top:1px solid var(--line);opacity:0;
  font:400 .6563rem/1.45 var(--mono);color:var(--s1-faint)}

/* --- right: the record being written -------------------------------------- */
.s1-record{position:relative;height:var(--s1-rh);overflow:hidden;
  scrollbar-width:none;-ms-overflow-style:none}
.s1-record::-webkit-scrollbar{display:none}
.s1-recin{display:flex;flex-direction:column;gap:.625rem}
.s1-panel{border:1px solid var(--line);border-radius:.6875rem;background:var(--plate);
  box-shadow:var(--lift-1);overflow:hidden;height:0;opacity:0}
.s1-ph2{display:flex;align-items:center;gap:.5625rem;padding:.75rem .9375rem;
  border-bottom:1px solid var(--line);background:var(--s1-rail)}
.s1-ph2 .s1-no{font:400 .6875rem/1 var(--mono);color:#fff;background:var(--butter);
  border-radius:.3125rem;padding:.3125rem .375rem;flex:none}
.s1-ph2 .s1-kk{font:400 .6875rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--second)}
/* where each panel came from. 01 and 02 name a page, 03 names us. */
.s1-ph2 .s1-prov{flex:none;opacity:0;font:400 .625rem/1 var(--mono);color:var(--s1-faint);
  background:var(--paper2);border-radius:.25rem;padding:.25rem .375rem}
.s1-ph2 .s1-prov.is-own{margin-left:auto;color:var(--butter);background:var(--butter-tint);
  display:flex;align-items:center;gap:.3125rem}
.s1-ph2 .s1-prov.is-own em{width:.8125rem;height:.8125rem;border-radius:.25rem;background:var(--butter);
  color:#fff;display:grid;place-items:center;font:600 .5rem/1 var(--sans);font-style:normal}
.s1-ph2 .s1-sum{margin-left:auto;font:500 .75rem/1 var(--sans);color:var(--ink);opacity:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s1-ph2 .s1-ck{margin-left:.5rem;width:.9375rem;height:.9375rem;flex:none;fill:none;stroke:var(--s1-ok);
  stroke-width:2.6;stroke-dasharray:22;stroke-dashoffset:22}
.s1-pb{padding:.9375rem;overflow:hidden}

.s1-idhead{display:flex;align-items:center;gap:.625rem;margin-bottom:.6875rem}
.s1-idhead .s1-mono{width:2.375rem;height:2.375rem;border-radius:.5625rem;background:var(--butter);color:#fff;
  display:grid;place-items:center;font:600 1.125rem/1 var(--sans);flex:none}
.s1-idhead b{display:block;font:600 .9688rem/1.2 var(--sans)}
.s1-idhead span span{display:block;margin-top:.25rem;font:400 .75rem/1.35 var(--sans);color:var(--second)}
.s1-fields{display:grid;grid-template-columns:1fr 1fr;gap:.75rem 1.125rem}
.s1-f{opacity:0}
.s1-f i{display:block;font:400 .5938rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--s1-faint);font-style:normal;margin-bottom:.25rem}
.s1-f b{font:500 .7813rem/1.3 var(--sans)}

.s1-prod{display:flex;flex-direction:column;gap:.625rem}
.s1-pr{display:flex;align-items:center;gap:.75rem;border:1px solid var(--line);border-radius:.5625rem;
  padding:.6875rem .8125rem;opacity:0}
.s1-pr .s1-well{width:1.9375rem;height:1.9375rem;border-radius:.5rem;flex:none;display:grid;place-items:center}
.s1-pr .s1-well svg{width:1.0625rem;height:1.0625rem;fill:none;stroke-width:1.8}
.s1-pr b{display:block;font:600 .8125rem/1.2 var(--sans)}
.s1-pr span span{display:block;margin-top:.25rem;font:400 .7188rem/1.3 var(--sans);color:var(--second)}
.s1-pr .s1-tag{margin-left:auto;flex:none;font:400 .625rem/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--second);background:var(--paper2);border-radius:.25rem;padding:.3125rem .375rem}
.s1-w1{background:var(--butter-tint)} .s1-w1 svg{stroke:var(--butter)}
.s1-w2{background:var(--s1-ok-wash)}  .s1-w2 svg{stroke:var(--s1-ok)}
.s1-w3{background:var(--s1-warn-wash)}.s1-w3 svg{stroke:var(--s1-warn)}

.s1-icp{display:flex;flex-direction:column;gap:.625rem}
.s1-ir{display:flex;align-items:baseline;gap:.5625rem;opacity:0}
.s1-ir .s1-ok{width:.9375rem;height:.9375rem;flex:none;fill:none;stroke:var(--s1-ok);stroke-width:2.6;
  stroke-dasharray:22;stroke-dashoffset:22;position:relative;top:.125rem}
.s1-ir i{width:6rem;flex:none;font:400 .5938rem/1.3 var(--mono);letter-spacing:.11em;
  text-transform:uppercase;color:var(--s1-faint);font-style:normal}
.s1-ir b{font:500 .7813rem/1.35 var(--sans)}
.s1-chips{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.75rem}
.s1-chip{font:400 .6563rem/1 var(--mono);color:var(--butter);background:var(--butter-tint);
  border-radius:.3125rem;padding:.375rem .5625rem;opacity:0}

/* --- working strip and hand off ------------------------------------------- */
.s1-strip{display:flex;align-items:center;gap:.5625rem;margin-top:.75rem;opacity:0;height:0;overflow:hidden}
.s1-strip .s1-lb{font:500 .8438rem/1 var(--sans);color:var(--second)}
.s1-think{display:flex;gap:.1875rem;align-items:center}
.s1-think i{width:.3125rem;height:.3125rem;border-radius:50%;background:var(--butter);
  animation:s1-th 1s ease-in-out infinite}
.s1-think i:nth-child(2){animation-delay:.15s}
.s1-think i:nth-child(3){animation-delay:.3s}
@keyframes s1-th{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-.125rem)}}

.s1-foot{display:flex;align-items:center;gap:.6875rem;margin-top:.875rem;opacity:0;height:0;overflow:hidden}
.s1-foot p{font:400 .875rem/1.4 var(--sans);color:var(--second)}
.s1-edit{font:500 .8125rem/1 var(--sans);color:var(--ink);border:1px solid var(--s1-line2);
  border-radius:.4375rem;padding:.625rem .9375rem;background:var(--plate)}
.s1-next{margin-left:auto;font:600 .875rem/1 var(--sans);color:#fff;background:var(--butter);
  border:0;border-radius:.5rem;padding:.75rem 1.125rem;box-shadow:var(--lift-1);transition:background .2s}
.s1-next.is-hov{background:var(--butter-lit);box-shadow:var(--lift-2)}

/* --- the actor, and the extracts that fly ---------------------------------
   top/left MUST be pinned. Without them these sit at their static position in
   the flow and every x/y transform is offset by it, so the cursor points
   nowhere near what it is meant to be clicking. */
.s1-cursor{position:absolute;top:0;left:0;z-index:60;width:1.4375rem;height:1.4375rem;
  pointer-events:none;opacity:0;filter:drop-shadow(0 .125rem .25rem rgba(20,23,43,.35))}
.s1-cursor svg{width:100%;height:100%;fill:#14172B;stroke:#fff;stroke-width:1.2}
.s1-ripple{position:absolute;top:0;left:0;z-index:59;width:2.125rem;height:2.125rem;border-radius:50%;
  border:.125rem solid var(--butter);opacity:0;pointer-events:none}
.s1-ghost{position:absolute;z-index:50;pointer-events:none;max-width:15.625rem;
  font:400 .7188rem/1.3 var(--mono);color:var(--butter);background:#fff;
  border:1px solid rgba(91,76,216,.35);border-radius:.375rem;padding:.375rem .5rem;
  box-shadow:var(--lift-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* the stage opens from height 0. Without a reservation the hero grows ~150px
   mid-animation and shoves the CTA down the page while it is being read. */
#stgP1{min-height:39.625rem}
@media (max-width:1155px){ #stgP1{--s1-rh:32.5rem;min-height:44.5625rem} }
@media (max-width:968px){
  #stgP1{--s1-rh:32.5rem;min-height:45.375rem}
  .s1-stage-in{grid-template-columns:1fr}
  .s1-viewer{display:none}
}
@media (max-width:792px){
  .stg-tab span{font-size:.75rem}
  .s1-fields{grid-template-columns:1fr}
}
/* the sequence is decorative narration: with reduced motion it simply exists,
   already handed over, with every seal struck */
@media (prefers-reduced-motion:reduce){
  .s1-stage,.s1-panel,.s1-foot{height:auto!important;opacity:1!important}
  .s1-strip{display:none!important}
  .s1-record{height:auto!important;overflow:visible!important}
  #stgP1{min-height:0!important}
  .s1-ph2 .s1-sum{display:none!important}
  .s1-ph2 .s1-prov{opacity:1!important}
  .s1-reason{opacity:1!important} .s1-roll{opacity:0!important}
  .s1-rstep,.s1-rsrc span,.s1-rnote{opacity:1!important}
  .s1-f,.s1-pr,.s1-ir,.s1-chip{opacity:1!important;transform:none!important}
  .s1-ph2 .s1-ck,.s1-ir .s1-ok{stroke-dashoffset:0!important}
  .s1-cursor,.s1-ripple,.s1-sweep{display:none!important}
  .s1-dot.is-live,.s1-think i{animation:none}
}

/* --- 02 · THE AGENT RUNS IT ----------------------------------------------
   Built to 02-analysis/landing-research/lemlist-hero-teardown/HERO-SPEC.md.
   Mechanics from the spec, argument ours: theirs shows 158 leads found, ours
   shows 2,041 looked at and 1,729 thrown away, each one saying why.
   Spec rule honoured throughout: only transform and opacity animate. The
   rejected rows do NOT collapse their height - the survivors translate up
   over them (FLIP), which is why the roll has no layout animation at all.
   NB: no #stgP2 element reset - an ID-scoped reset outranks every class here
   and silently kills things like margin-top:auto. --------------------------- */
#stgP2{position:relative;display:flex;flex-direction:column;height:39.625rem;
  --s2-faint:#8B90A0; --s2-line2:#D6D5CC; --s2-rail:#FCFCFA;
  --s2-ok:#1B7F5A; --s2-ok-wash:#EAF4EE;
  --s2-no:#C0281F; --s2-no-wash:#FBECEA;
  --s2-rh:2.75rem;
  --s2-swap:cubic-bezier(.32,.72,0,1)}
#stgP2 *{box-sizing:border-box}

.s2-app{position:relative;flex:1;display:flex;flex-direction:column;min-width:0;
  border:1px solid var(--line);border-radius:1.125rem;background:var(--plate);
  box-shadow:0 1px .125rem rgba(20,23,43,.05),0 .75rem 1.75rem -1.125rem rgba(20,23,43,.16);
  overflow:hidden}

/* --- card header, 60px per the spec -------------------------------------- */
.s2-bar{flex:none;display:flex;align-items:center;gap:.6875rem;height:3.5rem;padding:0 1rem;
  border-bottom:1px solid var(--line);background:var(--plate)}
.s2-logo{width:1.625rem;height:1.625rem;border-radius:.5rem;flex:none;background:var(--butter);
  display:grid;place-items:center}
.s2-logo svg{width:.6875rem;height:auto;color:#fff;fill:currentColor}
.s2-brand{font:600 .8438rem/1 var(--sans);color:var(--ink);flex:none}
.s2-sep{width:1px;height:1rem;background:var(--s2-line2);flex:none}
.s2-title{font:400 .8125rem/1 var(--sans);color:var(--second);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s2-icons{margin-left:auto;flex:none;display:flex;gap:.875rem}
.s2-icons svg{width:.9375rem;height:.9375rem;fill:none;stroke:var(--s2-faint);stroke-width:1.7}

/* --- the split: ONE grid transition, 300ms, per spec §4 ------------------- */
.s2-body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0fr);min-height:0;
  transition:grid-template-columns .3s var(--s2-swap)}
.s2-body.is-split{grid-template-columns:minmax(0,38.3fr) minmax(0,61.7fr)}

/* --- the chat ------------------------------------------------------------ */
.s2-chat{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--s2-rail);
  border-right:1px solid var(--line);padding:1rem}
.s2-scroll{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.s2-chat.is-talking .s2-scroll{justify-content:flex-end}

/* Act I · the empty state, centred until the first click */
.s2-empty{text-align:center;max-width:40rem;margin:0 auto}
.s2-eh{margin:0;font:600 1.625rem/1.25 var(--sans);color:var(--ink)}
.s2-es{margin:.5625rem 0 0;font:400 .9375rem/1.4 var(--sans);color:var(--second)}
.s2-sug{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1.625rem}
.s2-sc{font:500 .8125rem/1 var(--sans);color:var(--ink);background:var(--plate);
  border:1px solid var(--line);border-radius:.5625rem;padding:.6875rem .9375rem;box-shadow:var(--lift-1);
  transition:background .12s ease-out,border-color .12s ease-out}
.s2-sc.is-hov{border-color:var(--s2-line2);background:var(--paper2)}
.s2-sc.s2-dash{border-style:dashed;box-shadow:none;background:none;color:var(--second)}

.s2-thread{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:40rem;margin:0 auto}
.s2-body.is-split .s2-thread{max-width:none;margin:0}
.s2-say{display:flex;flex-direction:column;gap:.25rem}
.s2-say p{margin:0;font:400 .9375rem/1.5 var(--sans);color:var(--ink)}
/* a continuation line is the aside, not the point */
.s2-say p + p{font-size:.875rem;color:var(--second)}
.s2-fig{font-family:var(--mono);font-weight:400;font-size:.94em;color:var(--ink)}
.s2-fok{color:var(--s2-ok)}
.s2-fno{color:var(--s2-no)}

/* the run totals: three figures, not a sentence */
.s2-stats{display:flex;flex-wrap:wrap;gap:.5rem}
.s2-stat{flex:1 1 auto;min-width:6rem;border:1px solid var(--line);border-radius:.625rem;
  background:var(--plate);box-shadow:var(--lift-1);padding:.6875rem .75rem}
.s2-stat b{display:block;font:400 1.1875rem/1 var(--mono);color:var(--ink)}
.s2-stat em{display:block;margin-top:.3125rem;font:400 .625rem/1.3 var(--sans);font-style:normal;
  color:var(--s2-faint)}
.s2-stat.is-no{background:var(--s2-no-wash);border-color:#F3D6D2}
.s2-stat.is-no b{color:var(--s2-no)}
.s2-stat.is-ok{background:var(--s2-ok-wash);border-color:#CFE6D8}
.s2-stat.is-ok b{color:var(--s2-ok)}
.s2-bub{align-self:flex-end;max-width:88%;border-radius:.625rem;background:var(--paper2);
  padding:.6875rem .875rem;font:400 .8438rem/1.4 var(--sans);color:var(--ink);opacity:0}

/* option rows: hover -> select -> collapse to a bubble */
/* the derived profile, shown as a record rather than asserted in prose */
.s2-icp{border:1px solid var(--line);border-radius:.6875rem;background:var(--plate);
  box-shadow:var(--lift-1);overflow:hidden}
.s2-ich{display:flex;align-items:center;gap:.5rem;padding:.5625rem .8125rem;
  border-bottom:1px solid var(--line);background:var(--butter-tint)}
.s2-ich b{font:400 .5938rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--butter)}
.s2-icb{padding:.3125rem .8125rem .6875rem}
.s2-icr{display:flex;align-items:baseline;gap:.625rem;padding-top:.5625rem;opacity:0}
.s2-icr i{width:5.375rem;flex:none;font:400 .5625rem/1.3 var(--mono);letter-spacing:.11em;
  text-transform:uppercase;color:var(--s2-faint);font-style:normal}
.s2-icr b{font:500 .75rem/1.35 var(--sans);color:var(--ink)}

.s2-opts{display:flex;flex-direction:column;gap:.4375rem}
.s2-op{display:flex;align-items:center;gap:.6875rem;border:1px solid transparent;border-radius:.5625rem;
  background:var(--paper2);padding:.6875rem .8125rem;opacity:0;
  transition:background .12s ease-out,border-color .15s ease-out}
.s2-op.is-hov{background:var(--plate);border-color:var(--line)}
.s2-op.is-sel{background:var(--butter-tint);border-color:var(--butter)}
.s2-ob{width:.9375rem;height:.9375rem;border-radius:.25rem;flex:none;background:var(--plate);
  box-shadow:inset 0 0 0 1.5px var(--s2-line2);display:grid;place-items:center}
.s2-op.is-sel .s2-ob{background:var(--butter);box-shadow:none}
.s2-ob svg{width:.625rem;height:.625rem;fill:none;stroke:#fff;stroke-width:3;opacity:0;transform:scale(.5)}
.s2-op.is-sel .s2-ob svg{opacity:1;transform:scale(1);transition:opacity .15s,transform .15s ease-out}
.s2-op span{font:400 .8438rem/1.3 var(--sans);color:var(--ink)}
.s2-op em{font-style:normal;color:var(--s2-faint);margin-left:.3125rem}

/* thinking: a 3x3 grid of dots, each on its own offset - spec §4 */
.s2-think{display:none;grid-template-columns:repeat(3,.25rem);gap:.1875rem;padding:.1875rem 0}
.s2-think.is-on{display:grid}
.s2-think i{width:.25rem;height:.25rem;border-radius:1px;background:#DFE1EE;
  animation:s2-blink 1.1s steps(1,end) infinite}
@keyframes s2-blink{0%,100%{background:#DFE1EE}45%{background:var(--butter)}}

.s2-comp{flex:none;display:flex;align-items:flex-end;gap:.625rem;margin-top:.75rem;
  border:1px solid var(--line);border-radius:.75rem;background:var(--plate);
  padding:.75rem .75rem .75rem .9375rem;min-height:3.875rem}
.s2-ph{flex:1;font:400 .8125rem/1.4 var(--sans);color:var(--s2-faint)}
.s2-send{width:2rem;height:2rem;border-radius:.625rem;flex:none;border:0;background:var(--butter);
  display:grid;place-items:center;position:relative;transition:background .18s}
.s2-send svg{width:.9375rem;height:.9375rem;fill:none;stroke:#fff;stroke-width:2.2}
.s2-sq{display:none;width:.625rem;height:.625rem;border-radius:.125rem;background:#fff}
.s2-send.is-stop{background:var(--s2-no)}
.s2-send.is-stop .s2-arrow{display:none}
.s2-send.is-stop .s2-sq{display:block}

/* --- the stage ----------------------------------------------------------- */
.s2-stage{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;
  background:var(--plate)}
.s2-ptabs{flex:none;display:flex;gap:.125rem;padding:.5625rem .75rem 0;border-bottom:1px solid var(--line)}
.s2-pt1{display:flex;align-items:center;gap:.4375rem;border-radius:.5rem .5rem 0 0;padding:.5625rem .75rem;
  font:500 .7188rem/1 var(--sans);color:var(--second);border:1px solid transparent;border-bottom:0;
  margin-bottom:-1px;opacity:0}
.s2-pt1 svg{width:.8125rem;height:.8125rem;fill:none;stroke:currentColor;stroke-width:1.7}
.s2-pt1 b{font:400 .6563rem/1 var(--mono);color:var(--s2-faint);background:var(--paper2);
  border-radius:.25rem;padding:.1875rem .3125rem}
.s2-pt1.is-on{background:var(--plate);border-color:var(--line);color:var(--ink)}
.s2-pt1.is-on b{color:var(--butter);background:var(--butter-tint)}

.s2-table,.s2-queue{position:absolute;left:0;right:0;top:2.5625rem;bottom:0;
  display:flex;flex-direction:column;min-height:0}
.s2-queue{background:var(--plate);z-index:3;transform:translateX(100%)}

.s2-head,.s2-row{display:grid;
  grid-template-columns:1.75rem minmax(0,1.5fr) minmax(0,1.3fr) minmax(0,.85fr) 3.125rem minmax(0,.9fr);
  align-items:center;gap:.625rem;padding:0 .875rem}
.s2-head{flex:none;height:2.125rem;border-bottom:1px solid var(--line);background:var(--s2-rail)}
.s2-head span{font:400 .5938rem/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--s2-faint);white-space:nowrap;overflow:hidden}
.s2-rows{position:relative;flex:1;overflow:hidden;min-height:0}
.s2-roll{position:absolute;left:0;right:0;top:0}
.s2-row{height:var(--s2-rh);border-bottom:1px solid var(--line)}
.s2-ck{width:.875rem;height:.875rem;border-radius:.25rem;background:var(--butter);position:relative}
.s2-ck:after{content:'';position:absolute;left:.25rem;top:.125rem;width:.25rem;height:.4375rem;
  border:solid #fff;border-width:0 .1rem .1rem 0;transform:rotate(42deg)}
.s2-ckh{background:var(--s2-line2)}

.s2-face{position:relative;width:1.875rem;height:1.875rem;border-radius:50%;flex:none;overflow:hidden;
  display:grid;place-items:center;color:#fff;font:600 .6563rem/1 var(--sans)}
.s2-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s2-nof{background:var(--paper2);color:var(--s2-faint);font-size:.75rem}
.s2-per,.s2-com{display:flex;align-items:center;gap:.5625rem;min-width:0}
.s2-pt{min-width:0}
.s2-pt b{display:block;font:600 .75rem/1.25 var(--sans);color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s2-pt em{display:block;margin-top:.125rem;font:400 .6563rem/1.25 var(--sans);font-style:normal;
  color:var(--s2-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s2-dim{color:var(--s2-faint)!important;font-weight:500!important}
.s2-mk{position:relative;width:1.25rem;height:1.25rem;border-radius:.375rem;flex:none;overflow:hidden;
  display:grid;place-items:center;color:#fff;font:600 .625rem/1 var(--sans)}
.s2-mk img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s2-com .s2-pt b{text-decoration:underline;text-decoration-color:var(--line);
  text-underline-offset:.125rem}
.s2-role{font:400 .7188rem/1.3 var(--sans);color:var(--second);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s2-checks{display:flex;gap:.1875rem}
.s2-checks i{width:.6875rem;height:.6875rem;border-radius:.1875rem;flex:none;background:var(--paper2);
  box-shadow:inset 0 0 0 1px var(--line)}
.s2-checks i.is-ok{background:var(--s2-ok);box-shadow:none}
.s2-checks i.is-no{background:var(--s2-no);box-shadow:none}
.s2-vd{font:400 .625rem/1.25 var(--mono);color:var(--s2-no);opacity:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s2-sweep{position:absolute;left:0;right:0;top:0;height:.125rem;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--butter),transparent)}

.s2-foot{flex:none;display:flex;align-items:center;gap:.875rem;height:2.375rem;padding:0 .875rem;
  border-top:1px solid var(--line);background:var(--s2-rail)}
.s2-pg{font:400 .6563rem/1 var(--mono);color:var(--second)}
.s2-pg b{color:var(--ink)}
.s2-pager{display:flex;align-items:center;gap:.25rem}
.s2-pager i,.s2-pager b{font:400 .625rem/1 var(--mono);font-style:normal;color:var(--s2-faint);
  border-radius:.25rem;padding:.25rem .375rem}
.s2-pager b{background:var(--butter-tint);color:var(--butter)}
.s2-stamp{margin-left:auto;flex:none;opacity:0;font:400 .5938rem/1 var(--mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--s2-no);
  background:var(--s2-no-wash);border-radius:.375rem;padding:.375rem .5625rem}
.s2-stamp b{font-size:.75rem;letter-spacing:0;margin-right:.3125rem}


/* the campaign, as a flow canvas rather than a list. Enumerated from
   frames/16.90-sequence-settled.png: dotted ground, a Start pill, two-part
   action nodes, branch pills, Yes/No on the connectors, 1px orthogonals. */
.s2-seq{position:absolute;left:0;right:0;top:2.5625rem;bottom:0;z-index:2;background:var(--plate);
  display:flex;flex-direction:column;transform:translateX(100%)}
.s2-sqh{flex:none;padding:.6875rem .9375rem;border-bottom:1px solid var(--line);background:var(--butter-tint)}
.s2-sqh b{display:block;font:600 .7813rem/1 var(--sans);color:var(--ink)}
.s2-sqh span{display:block;margin-top:.25rem;font:400 .6875rem/1 var(--sans);color:var(--second)}
.s2-sqb{flex:1;min-height:0;overflow:hidden;padding:.625rem 1rem;
  background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:.9375rem .9375rem}
.s2-canvas{position:relative;width:100%;height:30.125rem}

.s2-node{position:absolute;left:var(--x);top:var(--y);width:var(--w);opacity:0}
.s2-st{width:var(--w);text-align:center;border:1px solid var(--line);border-radius:.5rem;
  background:var(--plate);padding:.5625rem 0;font:500 .7188rem/1 var(--sans);color:var(--s2-faint)}
.s2-nd{border:1px solid var(--line);border-radius:.5625rem;background:var(--plate);
  box-shadow:var(--lift-1);overflow:hidden}
/* the meta line is split the way the reference does it: the wait is muted and
   only the duration is coloured, so the eye reads the timing first */
.s2-ndm{display:block;padding:.375rem .6875rem;border-bottom:1px solid var(--line);
  font:400 .5938rem/1 var(--mono);letter-spacing:.06em;color:var(--s2-faint);background:var(--plate)}
.s2-ndm b{font-weight:400;color:var(--butter)}
/* the icon well carries the channel, which is what puts colour on the canvas */
.s2-nd.is-mail .s2-ndb i{background:var(--butter-tint);border-color:transparent}
.s2-nd.is-mail .s2-ndb i svg{stroke:var(--butter)}
.s2-nd.is-li   .s2-ndb i{background:#E4F1F4;border-color:transparent}
.s2-nd.is-li   .s2-ndb i svg{stroke:#2E7D8F}
.s2-nd.is-li   .s2-ndm b{color:#2E7D8F}
.s2-nd.is-stop .s2-ndb i{background:var(--s2-no-wash);border-color:transparent}
.s2-nd.is-stop .s2-ndb i svg{stroke:var(--s2-no)}
.s2-nd.is-stop .s2-ndm b{color:var(--s2-no)}
/* branch nodes get the amber of a decision, not the grey of a label */
.s2-nb i svg{stroke:#B45309}
.s2-ndb{display:flex;align-items:center;gap:.5625rem;padding:.5625rem .6875rem;
  font:500 .7188rem/1.25 var(--sans);color:var(--ink)}
.s2-ndb i{width:1.5rem;height:1.5rem;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1px solid var(--line)}
.s2-ndb i svg{width:.8125rem;height:.8125rem;fill:none;stroke:var(--second);stroke-width:1.7}
.s2-nb{display:flex;align-items:center;gap:.5rem;border:1px solid var(--line);border-radius:.5625rem;
  background:var(--plate);box-shadow:var(--lift-1);padding:.5625rem .6875rem;
  font:500 .7188rem/1 var(--sans);color:var(--ink)}
.s2-nb i{width:.875rem;height:.875rem;flex:none}
.s2-nb i svg{width:.875rem;height:.875rem;fill:none;stroke-width:1.6}
.s2-pl{width:auto;border-radius:6.1875rem;padding:.25rem .5625rem;font:500 .625rem/1 var(--sans)}
.s2-yes{color:var(--s2-ok);background:#E9FAF1}
.s2-no{color:var(--s2-no);background:#FDECEF}
.s2-cx{position:absolute;left:var(--x);top:var(--y);background:var(--s2-line2);opacity:0}
.s2-cv{width:1px;height:var(--h)}
.s2-ch{height:1px;width:var(--w)}
/* --- the queue, which slides OVER the table ------------------------------ */
.s2-qh{flex:none;padding:.75rem .9375rem;border-bottom:1px solid var(--line);background:var(--s2-ok-wash)}
.s2-qh b{display:block;font:600 .7813rem/1 var(--sans);color:var(--ink)}
.s2-qh span{display:block;margin-top:.25rem;font:400 .6875rem/1 var(--sans);color:var(--second)}
.s2-qs{flex:1;overflow:hidden}
.s2-q{display:flex;align-items:center;gap:.6875rem;height:var(--s2-rh);padding:0 .9375rem;
  border-bottom:1px solid var(--line)}
.s2-qf{width:1.75rem;height:1.75rem}
.s2-qt{flex:1;min-width:0}
.s2-qt b{display:block;font:600 .75rem/1.25 var(--sans);color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s2-qt em{display:block;margin-top:.125rem;font:400 .6563rem/1.25 var(--sans);font-style:normal;
  color:var(--s2-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s2-qd{flex:none;font:400 .5938rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--s2-ok);background:var(--s2-ok-wash);border-radius:.3125rem;padding:.375rem .5rem}
.s2-qc{flex:none;display:flex;gap:.375rem}
.s2-qc svg{width:.875rem;height:.875rem;fill:none;stroke:var(--butter);stroke-width:1.7}

/* --- the channel burst: crosses BOTH panes, clipped by the card ---------- */
.s2-burst{position:absolute;inset:0;z-index:40;pointer-events:none;overflow:hidden}
.s2-chip{position:absolute;width:3.125rem;height:3.125rem;border-radius:50%;background:#fff;
  border:1px solid var(--line);box-shadow:var(--lift-2);display:grid;place-items:center;opacity:0}
.s2-chip svg{width:1.3125rem;height:1.3125rem;fill:none;stroke:var(--butter);stroke-width:1.8}

.s2-cursor{position:absolute;top:0;left:0;z-index:60;width:1.4375rem;height:1.4375rem;
  pointer-events:none;opacity:0;filter:drop-shadow(0 .125rem .25rem rgba(20,23,43,.35))}
.s2-cursor svg{width:100%;height:100%;fill:#14172B;stroke:#fff;stroke-width:1.2}
.s2-ripple{position:absolute;top:0;left:0;z-index:59;width:2.125rem;height:2.125rem;border-radius:50%;
  border:.125rem solid var(--butter);opacity:0;pointer-events:none}

@media (max-width:1155px){ #stgP2{height:43.75rem} }
@media (max-width:968px){
  #stgP2{height:45rem;--s2-rh:3.25rem}
  .s2-body,.s2-body.is-split{grid-template-columns:minmax(0,1fr)}
  .s2-chat{border-right:0;border-bottom:1px solid var(--line)}
  .s2-head,.s2-row{grid-template-columns:1.5rem minmax(0,1.5fr) 3.125rem minmax(0,1fr)}
  .s2-com,.s2-role,.s2-head span:nth-child(3),.s2-head span:nth-child(4){display:none}
  .s2-title,.s2-sep,.s2-icons{display:none}
  .s2-eh{font-size:1.3125rem}
}
@media (prefers-reduced-motion:reduce){
  .s2-body{grid-template-columns:minmax(0,38.3fr) minmax(0,61.7fr)!important}
  .s2-empty{display:none!important}
  .s2-thread{opacity:1!important}
  .s2-bub,.s2-op,.s2-vd,.s2-stamp,.s2-pt1,.s2-node,.s2-cx{opacity:1!important;transform:none!important}
  .s2-queue,.s2-seq{transform:none!important}
  .s2-think{display:none!important}
  .s2-cursor,.s2-ripple,.s2-sweep,.s2-burst{display:none!important}
  .s2-think i{animation:none}
}
/* reduced-motion forces the agent panel into its two-column split; on a phone
   that squeezes the chat to an unreadable sliver, so single-column wins back */
@media (prefers-reduced-motion:reduce) and (max-width:968px){
  #stgP2 .s2-body,
  #stgP2 .s2-body.is-split{grid-template-columns:minmax(0,1fr)!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE PASS
   Small-screen corrections layered last so they win on the cascade. Each
   block fixes something that clipped, overflowed or squashed below ~1024px.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1 · the procedure section below the desktop two-column layout.
      The scroll-pinned stage packed a full viewport with ~half a screen of
      content, leaving a void above and below the copy on every phone and
      tablet, and squeezing the console. Below 1024 it un-pins and reads as a
      natural list: the heading, the four steps stacked, one product shot.
      (The JS drops the 400vh runway for this width — see the runway module.) */
@media (max-width:1125px){
  .proc-runway{height:auto!important;padding:clamp(3.25rem,10vw,5.5rem) 0}
  .proc-stage{position:static;height:auto;overflow:visible;flex-direction:column;
    align-items:center;margin:0 var(--gutter)}
  .proc-left{width:100%;max-width:45rem;order:1;padding:0;gap:clamp(1.75rem,6vw,2.625rem)}
  .proc-headwrap{display:flex;flex:none;overflow:visible;max-width:none}
  .proc-headwrap .sect-h{font-size:clamp(1.6875rem,6.4vw,2.625rem)}
  .proc-tabs{display:none}
  .proc-steps{flex:none;height:auto;display:flex;flex-direction:column;gap:clamp(1.625rem,6vw,2.375rem)}
  .step{position:static;inset:auto;opacity:1!important;align-items:flex-start}
  .step-row{gap:0}
  .step-rail,.step-n-prev,.step-n-next{display:none}
  .step-body{max-width:37.5rem}
  .step-n{display:inline-flex}
  .step h3{font-size:clamp(1.25rem,5vw,1.5rem)}
  .step p{font-size:clamp(.9063rem,3.6vw,1rem)}
  .proc-right{width:100%;max-width:45rem;order:2;justify-content:center;
    padding:clamp(1.75rem,7vw,2.75rem) 0 0}
  .proc-panel{height:auto;width:100%;max-width:35rem;aspect-ratio:auto;border-radius:1.375rem}
  .proc-shot{position:static;display:none;padding:clamp(1.25rem,5vw,2rem)}
  .proc-shots .proc-shot:first-child{display:flex}
  .proc-dots{display:none}
}

/* 2 · the hero stage tab strip. Four 132px tabs overflowed a phone and the
      last one or two were clipped off the right edge with no scroll cue. On
      narrow screens they wrap to a 2x2 grid of cards instead. */
@media (max-width:616px){
  #stg .stg-tabs{flex-wrap:wrap;gap:.375rem;border-bottom:0;overflow:visible;
    margin-bottom:clamp(.875rem,4vw,1.25rem)}
  #stg .stg-tab{flex:1 1 44%;min-width:0;margin-bottom:0;padding:.5625rem .6875rem;
    border:1px solid var(--line);border-radius:.5rem}
  #stg .stg-tab.is-on{border-color:var(--butter);background:var(--butter-tint)}
  #stg .stg-tab span{font-size:.75rem}
}

/* 3 · the address field in stage 01. The URL text plus the fixed 140px
      "Read my site" button ran past the console edge below ~560px. Wrap the
      button under the field. */
@media (max-width:616px){
  #stgP1 .s1-field{flex-wrap:wrap;gap:.5625rem .75rem}
  #stgP1 .s1-url{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  #stgP1 .s1-go{margin-left:0;width:100%}
  /* the hand-off row wrapped its button mid-word */
  #stgP1 .s1-foot{flex-wrap:wrap;gap:.5625rem}
  #stgP1 .s1-foot p{flex:1 1 100%}
  #stgP1 .s1-next{white-space:nowrap}
  /* the decorative summary crowds the panel label out on a phone */
  #stgP1 .s1-ph2 .s1-sum{display:none}
  #stgP1 .s1-ph2 .s1-ck{margin-left:auto}
}
@media (max-width:440px){
  /* the "Runs / New run" breadcrumb collides with the status pill */
  #stgP1 .s1-crumb{display:none}
  #stgP1 .s1-state{margin-left:0}
  /* let the "Reasoned, not read" badge keep its whole label */
  #stgP1 .s1-ph2{flex-wrap:wrap}
  #stgP1 .s1-ph2 .s1-prov.is-own{white-space:normal}
}

/* 4 · the search field in Sect. 03 was right-aligned and clipped its own
      start ("...rectors at mid-size manufacturers"). Let the query wrap so
      the whole line is legible on a phone. */
@media (max-width:835px){
  .sf-line{white-space:normal;overflow:visible;justify-content:flex-start}
}

/* 5 · the stage "Replay" control had no styling at all and rendered as bare
      text under the console. Give it the quiet-button treatment. */
.stg-replay{display:inline-flex;align-items:center;gap:.4375rem;margin-top:.875rem;
  padding:.5625rem 1rem;border-radius:.375rem;border:1px solid var(--line);
  background:var(--plate);font:600 .75rem/1 var(--sans);color:var(--second);
  transition:color .2s var(--ease-out),border-color .2s var(--ease-out)}
.stg-replay:hover{color:var(--ink);border-color:var(--second)}