:root{
  /* Palette: three colours, all flat. 60% Chalk White, 30% Onyx Black, 10% Mint Rush. */
  --chalk:#F2F1EE;
  --onyx:#121214;
  --mint:#22E3A2;
  /* Tints of the same colours, for cards, lines and hover. Mint is never used as text on Chalk (1.5:1). */
  --chalk-2:#E8E7E3;
  --chalk-3:#D5D4CF;
  --onyx-2:#1E1E22;
  --onyx-3:#18181B;
  --onyx-line:#3A3A41;
  --mint-2:#1BCB91;
  /* Status colours: used only for traffic-light signals, never as brand colour. Green is Mint. */
  --red:#FF6B5E;
  --amber:#FFB938;
  --text:#121214;
  --text-2:#54534F;
  --ui-edge:#85847E;
  --on-dark:#F2F1EE;
  --on-dark-2:#B4B3AE;
  /* Shadows are tinted with Onyx, never flat black */
  --shadow:rgba(18,18,20,.34);
  --shadow-soft:rgba(18,18,20,.18);
  /* Buttons are rectangles with a small radius, not pills */
  --r-btn:10px;
  --r-tag:6px;
  --display:'Geist',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --body:'Geist',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  /* Type scale: each step is the last one x 1.25 */
  --s-1:.85rem;
  --s0:1.0625rem;
  --s1:1.328rem;
  --s2:1.66rem;
  --s3:2.075rem;
  --s4:2.594rem;
  --s5:3.243rem;
  --s6:4.053rem;
  /* Spacing: multiples of 8px */
  --r:24px;
  --pad:clamp(4rem,8vw,6.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem;-webkit-text-size-adjust:100%;background:var(--onyx)}
body{
  margin:0;color:var(--text);background:var(--chalk);
  font-family:var(--body);font-size:var(--s0);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:var(--display);font-weight:700;line-height:1.08;
  letter-spacing:-0.035em;margin:0;text-wrap:balance;
}
h2{font-size:clamp(var(--s3),4.2vw,var(--s5))}
h3{font-size:var(--s1);line-height:1.2;letter-spacing:-0.025em;font-weight:650}
p{margin:0 0 1rem;max-width:62ch}
ul,ol,dl{margin:0;padding:0}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:1rem;top:-4rem;z-index:50;background:var(--mint);color:var(--onyx);padding:.5rem 1rem;border-radius:8px;font-weight:600}
.skip:focus{top:1rem}

.wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}
@media(min-width:720px){.wrap{width:min(1120px,100% - 4rem)}}

/* Highlights: lime text on dark, a lime marker behind gunmetal text on light */
.hl{color:var(--mint)}
.mk{
  background-image:linear-gradient(var(--mint),var(--mint));background-repeat:no-repeat;background-size:100% 100%;
  color:var(--onyx);padding:0 .14em;border-radius:.14em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* Focus */
.dark,.hero,.top,.calc-out,.panel,.thanks{--focus:var(--mint)}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--focus,var(--onyx));outline-offset:3px;
}

/* Sections: flat blocks, cut cleanly */
.sec{padding:var(--pad) 0;background:var(--chalk)}
.alt{background:var(--chalk-2)}
.sec.dark{color:var(--on-dark);background:var(--onyx)}
.dark h2,.dark h3{color:var(--chalk)}

/* Header: fixed, clear over the hero, solid once you scroll */
.top{
  position:fixed;inset:0 0 auto 0;z-index:20;padding:1rem 0;
  border-bottom:1px solid transparent;
  transition:background-color .25s ease,padding .25s ease,border-color .25s ease;
}
.top.is-stuck{background:var(--onyx);padding:.5rem 0;border-bottom-color:var(--onyx-line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.mark{
  font-family:var(--display);font-weight:800;font-size:var(--s2);
  letter-spacing:-0.04em;text-decoration:none;line-height:1;color:var(--chalk);
}
.mark .amp{color:var(--mint)}
.nav{display:none;gap:2rem;align-items:center}
.nav a{text-decoration:none;font-size:var(--s0);color:var(--on-dark);transition:color .2s ease}
.nav a:hover{color:var(--mint)}
@media(min-width:900px){.nav{display:flex}}

/* Buttons: Laser Lime, flat */
.btn{
  display:inline-block;color:var(--onyx);
  font:650 var(--s0)/1.2 var(--body);letter-spacing:-0.01em;text-decoration:none;
  padding:1rem 1.5rem;border:0;border-radius:var(--r-btn);cursor:pointer;background:var(--mint);
  box-shadow:0 8px 24px rgba(18,18,20,.28);
  transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.btn:hover{background:var(--mint-2);transform:translateY(-2px);box-shadow:0 12px 28px rgba(18,18,20,.34)}
.btn--small{padding:.5rem 1rem;font-size:1rem;box-shadow:none}
.link{
  color:var(--chalk);text-decoration:none;font-weight:600;
  border-bottom:2px solid var(--mint);padding-bottom:2px;transition:color .2s ease;
}
.link:hover{color:var(--mint)}

/* Hero */
.hero{
  position:relative;overflow:hidden;color:var(--on-dark);background:var(--onyx);
  padding:calc(clamp(2rem,4vw,3rem) + 4.5rem) 0 clamp(1rem,2vw,2rem);
}
.hero .wrap{position:relative;display:grid;gap:3rem 4rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){
  .hero .wrap{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center}
}
.hero-copy{position:relative;z-index:2}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1.5rem;padding:.25rem 1rem;border-radius:var(--r-tag);
  border:1px solid var(--onyx-line);font-family:var(--mono);
  font-size:var(--s-1);letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark);
}
.eyebrow::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--mint)}
.hero h1{
  font-size:clamp(var(--s4),5vw,var(--s6));line-height:1.02;
  letter-spacing:-0.045em;margin-bottom:1.5rem;color:var(--chalk);
}
.lead{font-size:var(--s1);line-height:1.45;max-width:32ch;margin-bottom:2rem;color:var(--on-dark)}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem}
.fine{font-size:var(--s-1);color:var(--text-2);margin:1rem 0 0}
.hero .fine,.dark .fine{color:var(--on-dark-2)}

/* Hero stage: dots swarm into the ampersand */
.hero-stage{position:relative;height:300px;min-width:0}
.amp-art{
  position:absolute;inset:0;display:grid;place-items:center;z-index:0;user-select:none;
  font-family:var(--display);font-weight:800;line-height:1;font-size:clamp(11rem,60vw,16rem);color:var(--mint);
  transition:opacity .8s ease;
}
.amp3d{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .9s ease}
.amp3d canvas{display:block;width:100%;height:100%}
.has-amp .amp3d{opacity:1}
.has-amp .amp-art{opacity:0}
@media(min-width:900px){
  .hero-stage{height:min(540px,64vh);min-height:440px}
  .amp-art{font-size:clamp(16rem,28vw,26rem)}
}

/* Example workflow: copy left, live card right */
.show{padding-top:clamp(2rem,4vw,3rem)}
.show .wrap{display:grid;gap:2.5rem 4rem;align-items:center}
@media(min-width:900px){
  .show .wrap{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .show .demo{justify-self:end;width:100%;max-width:540px}
}
.show-copy h2{margin-bottom:1.5rem}
.show-copy .eyebrow{margin-bottom:1.5rem}

/* Live demo card: a flat Frost White card on the Gunmetal hero */
.demo{
  position:relative;z-index:1;border-radius:var(--r);overflow:hidden;
  background:var(--chalk);color:var(--text);
  box-shadow:0 32px 80px var(--shadow);
}
.demo-head{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.25rem 1rem;
  padding:1rem 1.5rem;border-bottom:1px solid var(--chalk-3);
  font-family:var(--mono);font-size:var(--s-1);letter-spacing:.04em;color:var(--text-2);
}
.live{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;text-transform:uppercase;letter-spacing:.08em;font-weight:600;color:var(--onyx)}
.live::before{
  content:"";width:.625rem;height:.625rem;border-radius:50%;background:var(--mint);
  border:1.5px solid var(--onyx);animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(18,18,20,.35)}70%,100%{box-shadow:0 0 0 .5rem rgba(18,18,20,0)}}
.evs{list-style:none;margin:0;padding:1.5rem 1.5rem 1rem;display:grid;gap:1rem}
.ev{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:0 1rem;align-items:start}
.ev .t{font-family:var(--mono);font-size:var(--s-1);color:var(--text-2);padding-top:.5rem;line-height:1.3}
.ev .who{display:block;font-family:var(--mono);font-size:var(--s-1);letter-spacing:.02em;color:var(--text-2);margin:0 0 .25rem;line-height:1.3}
.msg{
  position:relative;margin:0;max-width:none;padding:.5rem 1rem;border-radius:16px;
  background:var(--chalk-3);color:var(--onyx);line-height:1.45;
}
.ev--ai .msg{background:var(--onyx);color:var(--chalk)}
.ev--cal .msg{background:transparent;border:1.5px dashed var(--ui-edge)}
.ev--cal .msg::before{content:"\2713\00a0";font-weight:700}
.ev--you .msg{background:var(--mint);color:var(--onyx);font-weight:600}
.chip{
  display:inline-block;margin:.25rem .5rem .25rem 0;padding:0 .75rem;border-radius:var(--r-tag);
  background:var(--mint);color:var(--onyx);font-family:var(--mono);font-size:var(--s-1);line-height:1.8;font-weight:500;
}
.quote{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.quote strong{font-size:var(--s1);letter-spacing:-0.02em;color:var(--mint);white-space:nowrap}
.msg small{display:block;font-family:var(--mono);font-size:var(--s-1);color:var(--on-dark-2);margin-top:.25rem}
.dots{display:none;gap:.25rem;padding:.5rem 0}
.dots i{width:.5rem;height:.5rem;border-radius:50%;background:var(--mint);animation:blink 1s ease-in-out infinite both}
.dots i:nth-child(2){animation-delay:.15s}
.dots i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.ev.pending .dots{display:inline-flex}
.ev.pending .msg-body{display:none}
html.js .ev{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
html.js .ev.on{opacity:1;transform:none}
.demo-foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;
  padding:1rem 1.5rem 1.5rem;border-top:1px solid var(--chalk-3);
}
.demo-total{margin:0;font-size:var(--s0);color:var(--text-2)}
.demo-total strong{font-size:var(--s1);letter-spacing:-0.02em;color:var(--onyx)}
html.js .demo-total{opacity:.3;transition:opacity .7s ease}
html.js .demo.done .demo-total{opacity:1}
.replay{
  font:600 var(--s-1)/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--onyx);
  background:transparent;border:1.5px solid var(--onyx);border-radius:var(--r-btn);padding:.5rem 1rem;cursor:pointer;
  transition:background-color .2s ease,color .2s ease;
}
.replay:hover{background:var(--onyx);color:var(--mint)}
.demo .replay:focus-visible{outline-color:var(--onyx)}
.demo-note{flex-basis:100%;margin:0;font-size:var(--s-1);color:var(--text-2);max-width:none}

/* Proof row under the hero */
.hero-proof{
  grid-column:1 / -1;display:grid;gap:1.5rem 3rem;margin-top:1rem;padding-top:2rem;
  border-top:1px solid var(--onyx-line);counter-reset:pf;
}
@media(min-width:760px){.hero-proof{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hero-proof > div{counter-increment:pf}
.hero-proof p{margin:0;max-width:34ch}
.pf-title{font-weight:650;font-size:var(--s1);line-height:1.2;letter-spacing:-0.025em;color:var(--chalk);margin-bottom:.5rem !important}
.pf-title::before{
  content:"0" counter(pf);display:block;margin-bottom:.5rem;
  font-family:var(--mono);font-size:var(--s-1);font-weight:500;letter-spacing:.08em;color:var(--mint);
}
.hero-proof .pf-desc{color:var(--on-dark-2)}

/* Tagline band: the one big block of lime */
.tagline{background:var(--mint);color:var(--onyx);padding:1.5rem 0}
.tagline p{
  font-weight:750;letter-spacing:-0.04em;line-height:1.1;
  font-size:clamp(var(--s2),3.4vw,var(--s4));margin:0;max-width:none;
}

/* Two-column split */
.split{display:grid;gap:1.5rem 4rem}
@media(min-width:820px){.split{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.split p:last-child{margin-bottom:0}

/* Calculator */
.calc{display:grid;gap:3rem 4rem;margin-top:3rem}
@media(min-width:900px){.calc{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:start}}
.sliders{display:grid;gap:2rem}
.sl label{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-weight:600;color:var(--text);margin:0 0 .5rem;
}
.sl output{font-weight:750;font-size:var(--s1);letter-spacing:-0.03em;color:var(--onyx);white-space:nowrap}
.sl .hint{font-size:var(--s-1);color:var(--text-2);margin:.5rem 0 0}
.calc input[type=range]{
  -webkit-appearance:none;appearance:none;display:block;width:100%;height:2rem;margin:0;padding:0;
  border:0;border-radius:8px;background:transparent;--v:30%;cursor:pointer;
}
.calc input[type=range]::-webkit-slider-runnable-track{
  height:8px;border-radius:999px;background:linear-gradient(90deg,var(--onyx) var(--v),var(--chalk-3) var(--v));
}
.calc input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;
  background:var(--mint);border:3px solid var(--onyx);box-shadow:0 2px 8px var(--shadow-soft);
  transition:transform .2s ease;
}
.calc input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12)}
.calc input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:var(--chalk-3)}
.calc input[type=range]::-moz-range-progress{height:8px;border-radius:999px;background:var(--onyx)}
.calc input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--mint);border:3px solid var(--onyx);
  box-shadow:0 2px 8px var(--shadow-soft);
}
.calc input[type=range]:focus-visible{outline:3px solid var(--onyx);outline-offset:4px}
.calc-out{
  border-radius:var(--r);padding:2rem;color:var(--on-dark);background:var(--onyx);
  box-shadow:0 24px 64px var(--shadow-soft);
}
.calc-out p{margin:0;max-width:none}
.calc-out .k{font-family:var(--mono);font-size:var(--s-1);letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-2)}
.calc-out .big{
  font-weight:800;line-height:1.02;letter-spacing:-0.05em;color:var(--mint);
  font-size:clamp(var(--s5),7vw,var(--s6));margin:.5rem 0 0;
}
.calc-out .unit{font-size:var(--s3);letter-spacing:-0.035em}
.calc-out .row{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.5rem;
  margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--onyx-line);
}
.calc-out .mid{font-weight:700;font-size:var(--s2);line-height:1.2;letter-spacing:-0.035em;color:var(--chalk);margin-top:.25rem}
.calc-out .sub{font-size:var(--s-1);color:var(--on-dark-2)}
.calc-note{font-size:var(--s-1);color:var(--on-dark-2);margin:1.5rem 0 1.5rem !important;max-width:44ch !important}

/* Job explorer */
.explore{display:grid;gap:2rem 4rem;margin-top:3rem}
@media(min-width:880px){.explore{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}}
.tabs{display:flex;gap:.5rem;overflow-x:auto;padding:0 0 .5rem;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.tab{
  flex:0 0 auto;scroll-snap-align:start;font:550 var(--s0)/1.3 var(--body);color:var(--text);
  background:transparent;border:1.5px solid var(--ui-edge);border-radius:var(--r-btn);padding:.5rem 1rem;cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease;
}
.tab[aria-selected="true"]{background:var(--mint);border-color:var(--onyx);color:var(--onyx)}
@media(min-width:880px){
  .tabs{flex-direction:column;overflow:visible;gap:.5rem;padding:0}
  .tab{
    text-align:left;border:0;border-radius:var(--r-btn);background:transparent;padding:1rem;
    font:650 var(--s1)/1.25 var(--display);letter-spacing:-0.03em;color:var(--text-2);
  }
  .tab:hover{background:var(--chalk-3)}
  .tab[aria-selected="true"]{background:var(--mint);color:var(--onyx)}
}
.panels{display:grid;gap:1.5rem;position:relative;isolation:isolate;margin-bottom:2rem}
.panels::before,.panels::after{
  content:"";position:absolute;z-index:-1;height:100%;border-radius:var(--r);pointer-events:none;
}
.panels::before{left:1rem;right:1rem;bottom:-.75rem;background:var(--onyx-line)}
.panels::after{left:2rem;right:2rem;bottom:-1.5rem;z-index:-2;background:var(--ui-edge)}
html.js .panel{grid-area:1 / 1}
.panel{
  border-radius:var(--r);padding:2rem;color:var(--on-dark);background:var(--onyx);
  box-shadow:0 24px 64px var(--shadow-soft);
}
html.js .panel{transition:opacity .3s ease,transform .3s ease,visibility .3s}
html.js .panel.is-off{opacity:0;visibility:hidden;transform:translate(-1.5rem,.5rem) rotate(-1.5deg);pointer-events:none}
html.js .panel.deal{animation:deal .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes deal{
  0%{opacity:0;transform:translate(1rem,1.5rem) rotate(1.5deg) scale(.97)}
  45%{opacity:1}
  100%{opacity:1;transform:none}
}
.panel h3{color:var(--chalk);margin-bottom:1.5rem;font-size:var(--s2);letter-spacing:-0.035em}
.ba .k{
  display:inline-block;margin-bottom:.5rem;font-family:var(--mono);font-size:var(--s-1);
  letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-2);
}
.ba p{margin:0;max-width:50ch}
.ba + .ba{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--onyx-line)}
.ba--after .k{background:var(--mint);color:var(--onyx);padding:0 .5rem;border-radius:6px;font-weight:600}
.ba--after p{font-weight:600;font-size:var(--s1);line-height:1.4;letter-spacing:-0.02em;color:var(--chalk)}

/* Steps: a rail that fills as you scroll */
.steps{list-style:none;margin:3rem 0 0;counter-reset:step;position:relative;--p:0}
.steps li{counter-increment:step;position:relative;padding:1.5rem 0;border-top:3px solid var(--chalk-3);transition:border-color .4s ease}
.steps li::before{
  content:counter(step);display:block;font-weight:800;font-size:var(--s5);line-height:1;
  letter-spacing:-0.05em;margin-bottom:.5rem;color:var(--onyx);transition:opacity .4s ease;
}
html.js .steps li::before{opacity:.25}
html.js .steps li.on::before{opacity:1}
.steps li.on{border-color:var(--onyx)}
.steps h3{margin-bottom:.5rem}
.steps p{margin:0}
@media(min-width:820px){
  .steps{display:grid;grid-template-columns:repeat(3,1fr);padding-top:2rem}
  .steps::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:2px;background:var(--chalk-3)}
  .steps::after{
    content:"";position:absolute;left:0;top:0;height:4px;border-radius:2px;
    width:calc(var(--p) * 100%);background:var(--onyx);
  }
  .steps li{border-top:0;border-left:1px solid var(--chalk-3);padding:0 2rem}
  .steps li:first-child{border-left:0;padding-left:0}
  .steps li::after{
    content:"";position:absolute;top:calc(-2rem - 8px);left:-8px;width:20px;height:20px;border-radius:50%;
    background:var(--chalk);border:3px solid var(--chalk-3);transition:background-color .4s ease,border-color .4s ease,transform .4s ease;
  }
  .steps li:first-child::after{left:0}
  .steps li.on::after{background:var(--mint);border-color:var(--onyx);transform:scale(1.15)}
  .steps li.on{border-left-color:var(--onyx)}
}

/* Dark offer section */
.offer-intro{font-size:var(--s1);max-width:40ch;margin:1rem 0 0;color:var(--chalk);font-weight:500;letter-spacing:-0.015em}
.offer-grid{display:grid;gap:3rem 4rem;margin-top:3rem}
@media(min-width:900px){.offer-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.weeks dt{
  display:inline-block;font-family:var(--mono);font-weight:500;font-size:var(--s-1);letter-spacing:.08em;
  text-transform:uppercase;margin-top:1.5rem;padding:0 .5rem;border-radius:6px;background:var(--mint);color:var(--onyx);
}
.weeks dt:first-child{margin-top:0}
.weeks dd{margin:.5rem 0 0;max-width:42ch;color:var(--on-dark)}
.pay h3{margin-bottom:.5rem}
.pay > p{color:var(--on-dark)}
.stages{list-style:none;margin-top:1.5rem;counter-reset:s;display:grid;gap:1rem}
.stages li{
  counter-increment:s;padding:1rem 1.5rem;border-radius:var(--r);
  background:var(--onyx-2);border:1px solid var(--onyx-line);
  display:grid;grid-template-columns:2rem minmax(0,1fr) auto;gap:0 1rem;
}
.stages li::before{
  content:counter(s);grid-column:1;grid-row:1;font-family:var(--mono);
  font-weight:500;font-size:var(--s0);line-height:1.6;color:var(--mint);
}
.st-name{grid-column:2;grid-row:1;font-weight:700;font-size:var(--s1);line-height:1.3;letter-spacing:-0.025em;color:var(--chalk)}
.st-share{grid-column:3;grid-row:1;font-weight:800;font-size:var(--s1);line-height:1.3;letter-spacing:-0.03em;color:var(--mint)}
.st-when{grid-column:2 / 4;grid-row:2;font-family:var(--mono);font-size:var(--s-1);color:var(--on-dark-2)}
.st-desc{grid-column:2 / 4;grid-row:3;margin:.5rem 0 0;color:var(--on-dark)}
.roi{
  margin-top:3rem;padding:1.5rem 2rem;max-width:64ch;border-radius:var(--r);
  background:var(--onyx-2);border:1px solid var(--onyx-line);
}
.roi h3{margin-bottom:.5rem}
.roi p{margin:0 0 1rem;color:var(--on-dark)}
.roi p:last-child{margin-bottom:0}
.roi strong{color:var(--mint);font-weight:650}

/* Team adoption */
.team-intro{font-size:var(--s1);margin:1rem 0 0;max-width:56ch;line-height:1.5;letter-spacing:-0.01em}
.adopt{list-style:none;margin-top:2.5rem;counter-reset:a}
.adopt li{counter-increment:a;display:grid;gap:.5rem 2rem;padding:1rem 0;border-top:1px solid var(--ui-edge);align-items:start}
.adopt li:last-child{border-bottom:1px solid var(--ui-edge)}
.adopt li::before{
  content:counter(a);display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;
  background:var(--mint);color:var(--onyx);font-family:var(--mono);font-weight:600;font-size:var(--s0);
}
.adopt h3{font-size:var(--s1)}
.adopt p{margin:0;max-width:52ch}
@media(min-width:760px){.adopt li{grid-template-columns:3rem minmax(0,15rem) 1fr}}

.after-list{margin:2rem 0 0}

/* Proof */
.statement{
  font-weight:600;letter-spacing:-0.03em;
  font-size:clamp(var(--s1),2.6vw,var(--s3));line-height:1.28;max-width:34ch;margin:0;color:var(--onyx);
}

/* Not another consultant: a side-by-side card */
.vs{
  margin-top:2.5rem;border-radius:var(--r);overflow:hidden;background:var(--chalk);color:var(--text);
  border:1px solid var(--onyx-line);box-shadow:0 24px 64px var(--shadow);
}
.vs-row{display:grid;grid-template-columns:minmax(0,1fr)}
.vs-row > *{display:block;padding:1rem 1.5rem}
.vs-head{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vs-k{
  font-family:var(--display);font-weight:700;font-size:var(--s1);line-height:1.2;
  letter-spacing:-0.025em;color:var(--onyx);padding-bottom:.25rem !important;
}
.vs-a{color:var(--text-2)}
.vs-b{background:var(--onyx-2);color:var(--chalk);font-weight:550}
.vs-b strong{color:var(--mint);font-weight:650}
.vs-a::before,.vs-b::before{
  display:block;margin-bottom:.25rem;font-family:var(--mono);font-size:var(--s-1);font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
}
.vs-a::before{content:"The usual consultant";color:var(--text-2)}
.vs-b::before{content:"AI&I";color:var(--mint)}
.vs-row:nth-child(n+3) > .vs-k{border-top:1px solid var(--chalk-3)}
@media(min-width:760px){
  .vs-row{grid-template-columns:minmax(8rem,.8fr) minmax(0,1.3fr) minmax(0,1.3fr)}
  .vs-row > *{padding:1.25rem 1.5rem}
  .vs-k{padding-bottom:1.25rem !important}
  .vs-head{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
  .vs-head > *{
    font-family:var(--mono);font-size:var(--s-1);font-weight:500;letter-spacing:.08em;
    text-transform:uppercase;color:var(--text-2);padding-block:1rem;
  }
  .vs-head > .vs-b{color:var(--mint)}
  .vs-a::before,.vs-b::before{display:none}
  .vs-row:nth-child(n+3) > *{border-top:1px solid var(--chalk-3)}
  .vs-row:nth-child(n+3) > .vs-b{border-top-color:var(--onyx-line)}
  .vs-b{box-shadow:inset 4px 0 0 var(--mint)}
}

/* Why */
.why{list-style:none;margin-top:2rem}
.why li{display:grid;gap:.5rem 2rem;padding:1rem 0;border-top:1px solid var(--chalk-3)}
.why strong{font-weight:700;font-size:var(--s1);letter-spacing:-0.025em}
.why span{max-width:52ch}
@media(min-width:760px){.why li{grid-template-columns:minmax(0,15rem) 1fr}}

/* FAQ */
.faq{margin-top:2rem;max-width:760px}
.faq details{border-top:1px solid var(--chalk-3);padding:1rem 0}
.faq details:last-child{border-bottom:1px solid var(--chalk-3)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-weight:600;font-size:var(--s1);line-height:1.3;letter-spacing:-0.025em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";flex:0 0 auto;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;
  background:var(--mint);color:var(--onyx);font-weight:500;font-size:var(--s1);line-height:1;
}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin:.5rem 0 0}

/* Contact form (dark) */
.contact h2{margin-bottom:1rem}
.contact .intro{font-size:var(--s1);margin-bottom:2rem;color:var(--on-dark)}
.form-wrap{max-width:760px}
.fields{display:grid;gap:1.5rem;margin-bottom:2rem}
@media(min-width:720px){.fields{grid-template-columns:1fr 1fr}.field--wide{grid-column:1 / -1}}
label{display:block;font-weight:600;margin-bottom:.5rem;color:var(--chalk)}
.sl label{color:var(--text)}
.opt{font-weight:400;color:var(--on-dark-2)}
input:not([type=range]),textarea{
  width:100%;padding:1rem;border:1.5px solid var(--onyx-line);border-radius:var(--r-btn);
  background:var(--onyx-3);color:var(--chalk);font:inherit;
  transition:border-color .2s ease;
}
input:not([type=range]):focus,textarea:focus{border-color:var(--mint)}
textarea{resize:vertical;min-height:8rem}

/* Footer */
.foot{background:var(--onyx-3);padding:2rem 0 2.5rem;color:var(--on-dark-2);font-size:var(--s-1)}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem}
.foot p{margin:0;max-width:none}

/* Thank-you page */
.thanks{
  color:var(--on-dark);background:var(--onyx);min-height:100vh;
  padding:calc(clamp(4rem,12vw,9rem) + 3rem) 0 clamp(4rem,12vw,9rem);
}
.thanks h1{font-size:clamp(var(--s4),5.5vw,var(--s6));letter-spacing:-0.045em;margin-bottom:1rem;color:var(--chalk)}
.thanks p{font-size:var(--s1)}

/* Entrance + reveal (only when motion is allowed) */
.fx{animation:rise .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}


/* Kinetic headline: words rise in one after another */
html.js .k .w{
  display:inline-block;transform-origin:0 100%;
  animation:word .85s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * .07s + .1s);
}
@keyframes word{from{opacity:0;transform:translateY(.5em) rotate(2.5deg)}to{opacity:1;transform:none}}

/* Marker sweep: the lime block draws itself once the heading is in view */
html.js .rv .mk{background-size:0 100%}
html.js .rv.in .mk{background-size:100% 100%;transition:background-size .8s cubic-bezier(.2,.7,.2,1) .35s}

/* Number roll: every digit is a small odometer wheel */
.roll{display:inline-flex;align-items:flex-start;font-variant-numeric:tabular-nums}
.rd{display:inline-block;height:1.1em;line-height:1.1;overflow:hidden;vertical-align:top}
.rd i{
  display:block;font-style:normal;
  transform:translateY(calc(var(--n,0) * -1.1em));
  transition:transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--c,0) * 45ms);
}
.rd b{display:block;height:1.1em;font-weight:inherit}
.rs{display:inline-block;height:1.1em;line-height:1.1;white-space:pre}
.roll.still .rd i{transition:none}

/* ===== Motion scenes: eight small live pictures, flat colour only, drawn in code ===== */
.scn-grid{list-style:none;margin:3rem 0 0;padding:0 0 1rem;display:grid;gap:1.25rem;grid-auto-flow:column;grid-auto-columns:82%;
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--onyx-line) transparent}
.scn-grid > .scn{scroll-snap-align:start}
.scn-grid:focus-visible{outline:3px solid var(--mint);outline-offset:4px}
@media(min-width:560px){.scn-grid{grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;padding-bottom:0;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.scn-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.scn{
  margin:0;display:flex;flex-direction:column;overflow:hidden;border-radius:20px;
  background:var(--onyx-2);border:1px solid var(--onyx-line);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .25s ease;
}
.scn:hover{transform:translateY(-4px);border-color:var(--mint)}
.scn-stage{
  position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--onyx-2);color:var(--chalk);
  container-type:inline-size;font-size:11px;
}
.scn-stage .fill{position:absolute;inset:0;width:100%;height:100%;display:block}
.scn-cap{padding:1rem 1.25rem 1.25rem;border-top:1px solid var(--onyx-line);flex:1}
.scn-n{font-family:var(--mono);font-size:var(--s-1);color:var(--on-dark-2);letter-spacing:.08em}
.scn-cap h3{font-size:var(--s1);margin:.25rem 0 .5rem}
.scn-cap h3 i{font-style:normal;color:var(--mint);margin:0 .1em}
.scn-cap p{font-size:var(--s-1);line-height:1.5;color:var(--on-dark-2);margin:0;max-width:none}
.scn-note{margin:1.5rem 0 0;font-family:var(--mono);font-size:var(--s-1);color:var(--on-dark-2);letter-spacing:.02em}

/* Only animate what is on screen */
html.js .scn:not(.on) .scn-stage *,
html.js .scn:not(.on) .scn-stage *::before{animation-play-state:paused}

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

/* 01 Tools to one hub: rings orbit a lime core */
.scn-orbit text{font-family:var(--mono);font-weight:700;font-size:8px;text-anchor:middle;fill:var(--onyx)}
.scn-orbit .rg{fill:none;stroke:var(--onyx-line);stroke-width:1;stroke-dasharray:2 5}
.scn-orbit .orb{transform-box:view-box;transform-origin:50% 50%;animation:sc-spin var(--t,12s) linear infinite}
.scn-orbit .orb.rev{animation-direction:reverse}
.scn-orbit .ctr{transform-box:fill-box;transform-origin:center;animation:sc-spin var(--t,12s) linear infinite reverse}
.scn-orbit .rev .ctr{animation-direction:normal}
.scn-orbit .ctr circle{fill:var(--chalk)}
.scn-orbit .ctr.lm circle{fill:var(--mint)}
.scn-orbit .core circle{fill:var(--mint);transform-box:fill-box;transform-origin:center;animation:sc-beat 3s ease-in-out infinite}
.scn-orbit .core text{font-family:var(--display);font-size:28px;font-weight:800}
.scn-orbit .ping{fill:none;stroke:var(--mint);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center;animation:sc-ping 3s ease-out infinite}
@keyframes sc-beat{50%{transform:scale(1.12)}}
@keyframes sc-ping{0%{transform:scale(1);opacity:.9}100%{transform:scale(4.4);opacity:0}}

/* 02 Hours back: a line draws itself, the area fills, the chip lands */
.scn-line .card{fill:var(--chalk)}
.scn-line text{font-family:var(--mono);font-size:8px;letter-spacing:.06em;fill:var(--text-2)}
.scn-line .fig{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.04em;fill:var(--onyx)}
.scn-line .gl{stroke:var(--chalk-3);stroke-width:1;stroke-dasharray:2 3}
.scn-line .area{fill:var(--mint);opacity:.6}
.scn-line .ln{fill:none;stroke:var(--onyx);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;animation:sc-draw 7s cubic-bezier(.4,0,.2,1) infinite}
.scn-line .hd{fill:var(--mint);stroke:var(--onyx);stroke-width:2.4;transform-box:fill-box;transform-origin:center;animation:sc-pop 7s ease-out infinite}
.scn-line .chip rect{fill:var(--onyx)}
.scn-line .chip text{fill:var(--mint);font-weight:700;font-size:8.5px;text-anchor:middle;letter-spacing:.02em}
.scn-line .chip{animation:sc-chip 7s ease-out infinite}
.scn-line .grp{animation:sc-grp 7s linear infinite}
.scn-line .clipr{transform-box:fill-box;transform-origin:0 50%;animation:sc-clip 7s cubic-bezier(.4,0,.2,1) infinite}
@keyframes sc-draw{0%{stroke-dashoffset:1}33%,100%{stroke-dashoffset:0}}
@keyframes sc-clip{0%{transform:scaleX(0)}33%,100%{transform:scaleX(1)}}
@keyframes sc-pop{0%,30%{transform:scale(0)}36%{transform:scale(1.35)}42%,100%{transform:scale(1)}}
@keyframes sc-chip{0%,34%{opacity:0;transform:translateY(8px)}44%,100%{opacity:1;transform:none}}
@keyframes sc-grp{0%,88%{opacity:1}95%,100%{opacity:0}}

/* 03 Quotes drafted: a deck of cards that keeps shuffling */
.scn-cards .cd{
  position:absolute;left:17%;top:38%;width:66%;height:42%;border-radius:5.5cqw;padding:5cqw 5.5cqw;
  display:flex;flex-direction:column;justify-content:space-between;transform-origin:50% 100%;
  font-family:var(--mono);animation:sc-shuf 8s cubic-bezier(.5,0,.2,1) infinite;
}
.scn-cards .cl{font-size:3.1cqw;letter-spacing:.12em;opacity:.7}
.scn-cards .cd b{font-family:var(--display);font-weight:800;font-size:6.4cqw;line-height:1;letter-spacing:-.03em}
.scn-cards .cp{font-size:4.6cqw;font-weight:600}
.scn-cards .c1{background:var(--mint);color:var(--onyx);transform:translate(0,0) scale(1);z-index:4}
.scn-cards .c2{background:var(--chalk);color:var(--onyx);transform:translate(0,-17%) scale(.94);z-index:3;animation-delay:-6s}
.scn-cards .c3{background:var(--onyx-line);color:var(--chalk);transform:translate(0,-34%) scale(.88);z-index:2;animation-delay:-4s}
.scn-cards .c4{background:var(--chalk-2);color:var(--onyx);transform:translate(0,-51%) scale(.82);z-index:1;animation-delay:-2s}
@keyframes sc-shuf{
  0%,12%{transform:translate(0,0) scale(1);z-index:4}
  18%{transform:translate(80%,8%) rotate(9deg) scale(1);z-index:5}
  19%{transform:translate(80%,8%) rotate(9deg) scale(1);z-index:1}
  25%,37%{transform:translate(0,-51%) scale(.82);z-index:1}
  50%,62%{transform:translate(0,-34%) scale(.88);z-index:2}
  75%,87%{transform:translate(0,-17%) scale(.94);z-index:3}
  100%{transform:translate(0,0) scale(1);z-index:4}
}

/* 04 Enquiry to layers: a flat phone that comes apart and snaps back */
.scn-phone .ph{
  position:absolute;left:50%;top:50%;width:34cqw;height:62cqw;margin:-31cqw 0 0 -17cqw;
  transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-38deg);
}
.scn-phone .ly{position:absolute;transform:translateZ(calc(var(--k,0) * 6cqw));animation:sc-lay 7s ease-in-out infinite}
.scn-phone .l0{inset:0;background:var(--chalk);border-radius:6cqw}
.scn-phone .l1{--k:1;inset:2.4cqw;background:var(--onyx);border-radius:4.2cqw}
.scn-phone .l2{--k:2;left:5cqw;right:5cqw;top:7cqw;height:10cqw;background:var(--mint);color:var(--onyx);border-radius:2.2cqw;padding:1.6cqw 2cqw}
.scn-phone .l3{--k:3;left:5cqw;right:5cqw;top:22cqw;height:12cqw;background:var(--chalk);color:var(--onyx);border-radius:2.2cqw;padding:1.6cqw 2cqw;display:flex;flex-direction:column;justify-content:space-between}
.scn-phone .l4{--k:4;left:7cqw;right:7cqw;bottom:6cqw;height:7cqw;background:var(--mint);color:var(--onyx);border-radius:1.8cqw;display:grid;place-items:center}
.scn-phone .ly b{display:block;font-family:var(--display);font-weight:800;font-size:2.9cqw;line-height:1.1;letter-spacing:-.02em}
.scn-phone .ly span{display:block;font-family:var(--mono);font-size:2.3cqw;line-height:1.3}
@keyframes sc-lay{
  0%,16%{transform:translateZ(calc(var(--k,0) * .5cqw))}
  36%,66%{transform:translateZ(calc(var(--k,0) * 7.5cqw))}
  84%,100%{transform:translateZ(calc(var(--k,0) * .5cqw))}
}

/* 05 Invoice paid: the button is pressed, spins, ticks and bursts */
.scn-pay .pb{
  position:absolute;left:50%;top:46%;width:62cqw;height:15cqw;border-radius:3cqw;
  background:var(--mint);color:var(--onyx);display:grid;place-items:center;transform:translate(-50%,-50%);
  font-family:var(--display);font-weight:800;font-size:5.4cqw;line-height:1;letter-spacing:-.02em;
  animation:sc-pb 6s ease-in-out infinite;
}
.scn-pay .pbt{display:inline-flex;align-items:center;gap:2cqw;white-space:nowrap;animation:sc-pbt 6s linear infinite}
.scn-pay .pbt svg{width:5.2cqw;height:5.2cqw;fill:none;stroke:var(--onyx);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.scn-pay .sp{position:absolute;inset:0;margin:auto;width:10cqw;height:10cqw;opacity:0;animation:sc-sp 6s linear infinite}
.scn-pay .sp circle{fill:none;stroke:var(--onyx);stroke-width:4.5;stroke-linecap:round;stroke-dasharray:62 100;transform-box:fill-box;transform-origin:center;animation:sc-spin .8s linear infinite}
.scn-pay .tk{position:absolute;inset:0;margin:auto;width:9cqw;height:9cqw;fill:none;stroke:var(--onyx);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.scn-pay .tk path{stroke-dasharray:1;stroke-dashoffset:1;animation:sc-tk 6s ease-out infinite}
.scn-pay .cf i{
  position:absolute;left:50%;top:46%;width:2.2cqw;height:2.2cqw;margin:-1.1cqw 0 0 -1.1cqw;opacity:0;
  background:var(--mint);animation:sc-cf 6s cubic-bezier(.2,.7,.3,1) infinite;
}
.scn-pay .cf i:nth-child(even){background:var(--chalk);border-radius:50%}
.scn-pay .pd{
  position:absolute;left:0;right:0;top:64%;text-align:center;font-family:var(--mono);font-weight:600;
  font-size:4.2cqw;letter-spacing:.06em;text-transform:uppercase;color:var(--chalk);opacity:0;animation:sc-pd 6s ease-out infinite;
}
.scn-pay .cur{
  position:absolute;left:50%;top:46%;width:8cqw;height:8cqw;fill:var(--chalk);stroke:var(--onyx);stroke-width:1.4;stroke-linejoin:round;
  opacity:0;transform:translate(10cqw,4cqw);animation:sc-cur 6s ease-in-out infinite;
}
@keyframes sc-pb{
  0%{width:62cqw;opacity:0;transform:translate(-50%,-50%) scale(.9)}
  6%,28%{width:62cqw;opacity:1;transform:translate(-50%,-50%) scale(1)}
  31%{width:62cqw;opacity:1;transform:translate(-50%,-50%) scale(.94)}
  34%{width:62cqw;opacity:1;transform:translate(-50%,-50%) scale(1)}
  44%,88%{width:15cqw;opacity:1;transform:translate(-50%,-50%) scale(1)}
  95%,100%{width:15cqw;opacity:0;transform:translate(-50%,-50%) scale(.9)}
}
@keyframes sc-pbt{0%,31%{opacity:1}38%,100%{opacity:0}}
@keyframes sc-sp{0%,40%{opacity:0}44%,60%{opacity:1}64%,100%{opacity:0}}
@keyframes sc-tk{0%,60%{stroke-dashoffset:1}70%,100%{stroke-dashoffset:0}}
@keyframes sc-cf{
  0%,62%{opacity:0;transform:rotate(var(--a)) translateY(0) rotate(0)}
  65%{opacity:1}
  82%,100%{opacity:0;transform:rotate(var(--a)) translateY(-27cqw) rotate(200deg)}
}
@keyframes sc-pd{0%,70%{opacity:0;transform:translateY(2cqw)}78%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes sc-cur{
  0%{opacity:0;transform:translate(36cqw,30cqw)}
  8%{opacity:1}
  27%{opacity:1;transform:translate(10cqw,4cqw)}
  31%{transform:translate(10cqw,4cqw) scale(.82)}
  35%{opacity:1;transform:translate(10cqw,4cqw) scale(1)}
  42%,100%{opacity:0;transform:translate(22cqw,16cqw)}
}

/* 06 Month-end calm: a dot field rolls like a sea (canvas, see site.js) */
.scn-wave canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
html.js .scn-wave .still{display:none}

/* 07 Three steps to one fix: one lime shape morphs, labels follow the steps */
.scn-morph .mo{
  position:absolute;left:50%;top:44%;width:52cqw;height:52cqw;margin:-26cqw 0 0 -26cqw;background:var(--mint);
  clip-path:polygon(100.0% 50.0%,99.0% 59.8%,96.2% 69.1%,91.6% 77.8%,85.4% 85.4%,77.8% 91.6%,69.1% 96.2%,59.8% 99.0%,50.0% 100.0%,40.2% 99.0%,30.9% 96.2%,22.2% 91.6%,14.6% 85.4%,8.4% 77.8%,3.8% 69.1%,1.0% 59.8%,0.0% 50.0%,1.0% 40.2%,3.8% 30.9%,8.4% 22.2%,14.6% 14.6%,22.2% 8.4%,30.9% 3.8%,40.2% 1.0%,50.0% 0.0%,59.8% 1.0%,69.1% 3.8%,77.8% 8.4%,85.4% 14.6%,91.6% 22.2%,96.2% 30.9%,99.0% 40.2%);animation:sc-morph 9s ease-in-out infinite;
}
.scn-morph .ml{
  position:absolute;left:0;right:0;bottom:12%;text-align:center;font-family:var(--mono);font-weight:600;font-size:4.2cqw;
  letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-2);opacity:0;
}
.scn-morph .m1{opacity:1;animation:sc-l1 9s ease-in-out infinite}
.scn-morph .m2{animation:sc-l2 9s ease-in-out infinite}
.scn-morph .m3{animation:sc-l3 9s ease-in-out infinite}
@keyframes sc-morph{
  0%,26%{clip-path:polygon(100.0% 50.0%,99.0% 59.8%,96.2% 69.1%,91.6% 77.8%,85.4% 85.4%,77.8% 91.6%,69.1% 96.2%,59.8% 99.0%,50.0% 100.0%,40.2% 99.0%,30.9% 96.2%,22.2% 91.6%,14.6% 85.4%,8.4% 77.8%,3.8% 69.1%,1.0% 59.8%,0.0% 50.0%,1.0% 40.2%,3.8% 30.9%,8.4% 22.2%,14.6% 14.6%,22.2% 8.4%,30.9% 3.8%,40.2% 1.0%,50.0% 0.0%,59.8% 1.0%,69.1% 3.8%,77.8% 8.4%,85.4% 14.6%,91.6% 22.2%,96.2% 30.9%,99.0% 40.2%);transform:rotate(0)}
  38%,60%{clip-path:polygon(93.0% 50.0%,93.0% 58.6%,93.0% 67.8%,93.0% 78.7%,93.0% 93.0%,78.7% 93.0%,67.8% 93.0%,58.6% 93.0%,50.0% 93.0%,41.4% 93.0%,32.2% 93.0%,21.3% 93.0%,7.0% 93.0%,7.0% 78.7%,7.0% 67.8%,7.0% 58.6%,7.0% 50.0%,7.0% 41.4%,7.0% 32.2%,7.0% 21.3%,7.0% 7.0%,21.3% 7.0%,32.2% 7.0%,41.4% 7.0%,50.0% 7.0%,58.6% 7.0%,67.8% 7.0%,78.7% 7.0%,93.0% 7.0%,93.0% 21.3%,93.0% 32.2%,93.0% 41.4%);transform:rotate(90deg)}
  72%,92%{clip-path:polygon(100.0% 50.0%,87.8% 57.5%,74.9% 60.3%,82.0% 71.4%,85.4% 85.4%,71.4% 82.0%,60.3% 74.9%,57.5% 87.8%,50.0% 100.0%,42.5% 87.8%,39.7% 74.9%,28.6% 82.0%,14.6% 85.4%,18.0% 71.4%,25.1% 60.3%,12.2% 57.5%,0.0% 50.0%,12.2% 42.5%,25.1% 39.7%,18.0% 28.6%,14.6% 14.6%,28.6% 18.0%,39.7% 25.1%,42.5% 12.2%,50.0% 0.0%,57.5% 12.2%,60.3% 25.1%,71.4% 18.0%,85.4% 14.6%,82.0% 28.6%,74.9% 39.7%,87.8% 42.5%);transform:rotate(180deg)}
  100%{clip-path:polygon(100.0% 50.0%,99.0% 59.8%,96.2% 69.1%,91.6% 77.8%,85.4% 85.4%,77.8% 91.6%,69.1% 96.2%,59.8% 99.0%,50.0% 100.0%,40.2% 99.0%,30.9% 96.2%,22.2% 91.6%,14.6% 85.4%,8.4% 77.8%,3.8% 69.1%,1.0% 59.8%,0.0% 50.0%,1.0% 40.2%,3.8% 30.9%,8.4% 22.2%,14.6% 14.6%,22.2% 8.4%,30.9% 3.8%,40.2% 1.0%,50.0% 0.0%,59.8% 1.0%,69.1% 3.8%,77.8% 8.4%,85.4% 14.6%,91.6% 22.2%,96.2% 30.9%,99.0% 40.2%);transform:rotate(360deg)}
}
@keyframes sc-l1{0%,28%{opacity:1}33%,92%{opacity:0}97%,100%{opacity:1}}
@keyframes sc-l2{0%,32%{opacity:0}38%,60%{opacity:1}66%,100%{opacity:0}}
@keyframes sc-l3{0%,68%{opacity:0}74%,92%{opacity:1}97%,100%{opacity:0}}

/* 08 Words sorted: the tagline slams in line by line */
.scn-kin .kt{position:absolute;left:9cqw;right:5cqw;top:50%;transform:translateY(-54%)}
.scn-kin .kl{display:block;overflow:hidden;padding-bottom:.05em;font-family:var(--display);font-weight:800;font-size:11.5cqw;line-height:1.02;letter-spacing:-.05em;color:var(--chalk)}
.scn-kin .kl.hl{color:var(--mint)}
.scn-kin .kw{display:block;animation:sc-slam 6s cubic-bezier(.2,.9,.25,1) infinite;animation-delay:calc(var(--i) * .16s)}
.scn-kin .kbar{display:block;width:44cqw;height:1.4cqw;margin-top:4cqw;background:var(--mint);transform-origin:0 50%;animation:sc-bar 6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes sc-slam{0%{transform:translateY(105%)}9%,78%{transform:translateY(0)}88%,100%{transform:translateY(-105%)}}
@keyframes sc-bar{0%,10%{transform:scaleX(0)}22%,78%{transform:scaleX(1)}88%,100%{transform:scaleX(0)}}

/* Tools we know: plain text tags, no logos */
.tools-block{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--chalk-3)}
.tools-block p{margin:.5rem 0 1.25rem;color:var(--text-2)}
.tools{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem}
.tools li{padding:.5rem 1rem;background:var(--chalk-2);border:1px solid var(--chalk-3);border-radius:var(--r-tag);font:600 var(--s0)/1.2 var(--display);letter-spacing:-0.01em;color:var(--onyx)}
.tools .more{background:transparent;border-style:dashed;color:var(--text-2);font-weight:500}

/* Traffic-light view: red and amber first, green is a pat on the back */
.lights{display:grid;gap:2.5rem 4rem;grid-template-columns:minmax(0,1fr);align-items:center}
.lights-copy{min-width:0}
.lights-copy p:not(.eyebrow){max-width:52ch}
.lights-note{grid-column:1 / -1;margin:0;color:var(--text-2)}
@media(min-width:900px){.lights{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.tl{min-width:0;border-radius:var(--r);padding:1.5rem;background:var(--onyx);color:var(--on-dark);box-shadow:0 24px 64px var(--shadow-soft)}
.tl-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem 1rem;padding-bottom:1rem;border-bottom:1px solid var(--onyx-line);font-family:var(--mono);font-size:var(--s-1);letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-2)}
.tl-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;margin-top:1rem}
.tl-row{display:grid;grid-template-columns:auto 4.5rem minmax(0,1fr) auto;align-items:center;gap:.25rem 1rem;padding:.75rem 1rem;border-radius:var(--r-btn);background:var(--onyx-2);border:1px solid var(--onyx-line)}
.tl-dot{width:.875rem;height:.875rem;border-radius:50%;background:var(--c)}
.tl-tag{font-family:var(--mono);font-size:var(--s-1);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c)}
.tl-what{font-weight:600;line-height:1.3}
.tl-val{font-family:var(--mono);font-size:var(--s-1);color:var(--on-dark-2);text-align:right}
.tl-red{--c:var(--red)} .tl-amber{--c:var(--amber)} .tl-green{--c:var(--mint)}
.tl-red,.tl-amber{border-color:var(--c)}
.tl-red .tl-dot,.tl-amber .tl-dot{animation:tl-pulse 2s ease-out infinite}
.tl-amber .tl-dot{animation-delay:.5s}
.tl-green{opacity:.55}
.tl-foot{margin:1rem 0 0;font-family:var(--mono);font-size:var(--s-1);letter-spacing:.04em;color:var(--mint);max-width:none}
@keyframes tl-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 55%,transparent)}70%,100%{box-shadow:0 0 0 .6rem transparent}}
html.js .tl:not(.on) .tl-row{opacity:0;transform:translateY(10px)}
html.js .tl .tl-row{transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * .14s)}
html.js .tl.on .tl-row{transform:none}
html.js .tl.on .tl-green{opacity:.55}
html.js .tl.on .tl-red,html.js .tl.on .tl-amber{opacity:1}
@media(max-width:520px){
  .tl-row{grid-template-columns:auto minmax(0,1fr) auto}
  .tl-tag{grid-column:2;grid-row:1}
  .tl-what{grid-column:2;grid-row:2}
  .tl-val{grid-column:3;grid-row:1 / 3;align-self:center;max-width:9rem}
  .tl-dot{grid-row:1 / 3}
}
.sec:not(.dark) .eyebrow{color:var(--onyx);border-color:var(--ui-edge)}
.lights-copy h2{margin-bottom:1.25rem}