@font-face{font-family:"Space Grotesk";src:url("fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --navy:#0A1628;--black:#05080D;--panel:#0E1E35;--panel-2:#122744;--line:#1D3355;
  --green:#00CC6A;--green-dim:rgba(0,204,106,.12);--white:#FFFFFF;--gray:#A7B0BC;--red:#FF3B30;
  --display:"Space Grotesk",system-ui,sans-serif;--body:"Inter",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;
  --wrap:1160px;--gutter:clamp(16px,4vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:var(--white);font:400 1.0625rem/1.65 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--green);text-underline-offset:3px}
a:hover{color:#3BE08D}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--display);line-height:1.1;margin:0 0 .5em;letter-spacing:-.015em;font-weight:700}
h1{font-size:clamp(2.4rem,6.2vw,4.6rem);letter-spacing:-.03em}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:1.25rem;letter-spacing:-.005em}
p{margin:0 0 1em}
.muted{color:var(--gray)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:720px}
.skip{position:absolute;left:-999px;top:8px;background:var(--green);color:var(--black);padding:8px 14px;border-radius:6px;font-weight:600;z-index:10}
.skip:focus{left:8px}

/* header */
.site-header{position:sticky;top:0;z-index:5;background:rgba(10,22,40,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:24px;height:68px}
.brand{display:flex;align-items:center;gap:10px;color:var(--white);text-decoration:none;font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:.01em}
.brand img{width:34px}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav a{color:var(--gray);text-decoration:none;padding:8px 12px;border-radius:6px;font-size:.97rem}
.nav a:hover,.nav a[aria-current="page"]{color:var(--white)}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--green);border-radius:0}
.nav .btn{margin-left:8px}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line);color:var(--white);border-radius:8px;padding:8px 12px;font:inherit;cursor:pointer}
@media (max-width:860px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--black);border-bottom:1px solid var(--line);padding:8px var(--gutter) 16px}
  .nav.open{display:flex}
  .nav a{padding:12px 4px;border-bottom:1px solid var(--line)}
  .nav a[aria-current="page"]{box-shadow:none;color:var(--green)}
  .nav .btn{margin:12px 0 0;text-align:center}
}

/* buttons */
.btn{display:inline-block;background:var(--green);color:var(--black);font-weight:600;text-decoration:none;padding:12px 20px;border-radius:8px;border:0;font:600 1rem/1.2 var(--body);cursor:pointer}
.btn:hover{background:#2BDC85;color:var(--black)}
.btn.ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1px #3A5378}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--green);color:var(--white)}
.nav .btn{color:var(--black);padding:9px 16px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* sections */
section{padding:clamp(56px,8vw,96px) 0}
.band{background:var(--black)}
.lead{font-size:1.2rem;color:#D3D9E1;max-width:60ch}
.section-head{max-width:640px;margin-bottom:36px}

/* hero */
.hero{padding:clamp(48px,8vw,104px) 0 clamp(56px,8vw,96px);border-bottom:1px solid var(--line);background:
  radial-gradient(900px 420px at 85% 10%,rgba(0,204,106,.08),transparent 60%),var(--navy)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1 .line{display:block}
.hero h1 .go{color:var(--green)}
@media (max-width:920px){.hero .wrap{grid-template-columns:1fr;gap:40px}}

/* terminal */
.term{background:var(--black);border:1px solid var(--line);border-radius:12px;overflow:hidden;font:400 .92rem/1.7 var(--mono);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.term-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);color:var(--gray);font-size:.8rem}
.term-bar i{width:10px;height:10px;border-radius:50%;background:#24324A;display:block}
.term-bar span{margin-left:8px}
.term pre{margin:0;padding:18px 20px 22px;white-space:pre;overflow-x:auto;color:#D3D9E1}
.term .p{color:var(--green)}
.term .c{color:#6F7E93}
.term .h{color:var(--white)}
.term .cursor{display:inline-block;width:.6em;height:1.1em;background:var(--green);vertical-align:-.2em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.term .cursor{animation:none}html{scroll-behavior:auto}}

/* week strip */
.week{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.day{padding:18px 16px 20px;border-right:1px solid var(--line);min-height:150px;background:var(--navy)}
.day:last-child{border-right:0}
.day b{display:block;font:600 .9rem var(--display);color:var(--gray);margin-bottom:14px}
.day strong{display:block;font:600 1.02rem/1.25 var(--display)}
.day small{display:block;color:var(--gray);margin-top:6px;font-size:.86rem;line-height:1.45}
.day.sat{background:var(--green-dim)}
.day.sat strong{color:var(--green)}
@media (max-width:900px){.week{grid-template-columns:1fr}.day{min-height:0;border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:56px 1fr;column-gap:12px}.day:last-child{border-bottom:0}.day b{margin:0;grid-row:span 2}}

/* programme blocks */
.programmes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.prog{border:1px solid var(--line);border-radius:12px;padding:28px;background:var(--panel);display:flex;flex-direction:column}
.prog.main{background:var(--panel-2);border-color:#2A4670}
.prog .when{color:var(--green);font-weight:600;font-size:.95rem;margin-bottom:10px}
.prog p{color:#C9D0DA}
.prog .more{margin-top:auto;font-weight:600}
@media (max-width:900px){.programmes{grid-template-columns:1fr}}

/* why list */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.why div{padding:28px 28px 28px 0;border-bottom:1px solid var(--line)}
.why div:nth-child(3n+2),.why div:nth-child(3n){padding-left:28px;border-left:1px solid var(--line)}
.why h3{margin-bottom:8px}
.why p{color:var(--gray);margin:0}
@media (max-width:900px){.why{grid-template-columns:1fr}.why div,.why div:nth-child(3n+2),.why div:nth-child(3n){padding:22px 0;border-left:0}}

/* posts */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;padding:22px;background:var(--panel);text-decoration:none;color:var(--white)}
.post-card:hover{border-color:#2F5585;color:var(--white)}
.tag{font:500 .78rem/1 var(--mono);color:var(--green);letter-spacing:.02em}
.post-card h3{margin:14px 0 10px;font-size:1.12rem;line-height:1.3}
.post-card p{color:var(--gray);font-size:.95rem;margin:0}
.post-card code{margin-top:16px;align-self:flex-start}
@media (max-width:900px){.posts{grid-template-columns:1fr}}
code,kbd{font:400 .9em var(--mono);background:var(--black);border:1px solid var(--line);border-radius:6px;padding:2px 7px;color:#E6EBF1}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.filters button{font:500 .92rem var(--body);background:transparent;color:var(--gray);border:1px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--black)}

/* article */
.article-head{padding:clamp(40px,6vw,72px) 0 8px}
.article-head h1{font-size:clamp(2rem,4.6vw,3.2rem);margin-top:16px}
.article-head .lead{margin-top:8px}
.article{padding-top:24px}
.article h2{font-size:1.4rem;margin-top:1.8em}
.article p,.article li{color:#D3D9E1}
.article ol{padding-left:1.3em}
.article li{margin-bottom:.6em}
.cmd{position:relative;margin:28px 0}
.cmd pre{margin:0;background:var(--black);border:1px solid var(--line);border-radius:10px;padding:18px 90px 18px 20px;overflow-x:auto;font:400 1rem/1.5 var(--mono);color:var(--white)}
.cmd pre::before{content:"$ ";color:var(--green)}
.copy{position:absolute;top:10px;right:10px;font:500 .82rem var(--body);background:var(--panel-2);color:var(--white);border:1px solid var(--line);border-radius:6px;padding:6px 10px;cursor:pointer}
.try{margin-top:36px;padding:22px 24px;border-left:3px solid var(--green);background:var(--panel)}
.try h2{margin:0 0 6px;font-size:1.1rem}
.try p{margin:0}
.post-nav{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);margin-top:48px;padding-top:24px}
.post-nav a{text-decoration:none;max-width:48%}
.post-nav small{display:block;color:var(--gray)}

/* forms */
form .field{margin-bottom:18px}
label{display:block;font-weight:600;margin-bottom:6px}
label .opt{font-weight:400;color:var(--gray)}
input,select,textarea{width:100%;font:400 1rem var(--body);color:var(--white);background:var(--black);border:1px solid #2A3F60;border-radius:8px;padding:12px 14px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--green);outline-offset:1px;border-color:transparent}
textarea{min-height:140px;resize:vertical}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;color:#C9D0DA;font-size:.95rem}
.check input{width:18px;height:18px;margin-top:3px;flex:none;accent-color:var(--green)}
.hp{position:absolute;left:-9999px}
.form-card{border:1px solid var(--line);border-radius:12px;padding:clamp(20px,4vw,32px);background:var(--panel)}
.inline-form{display:flex;gap:10px;flex-wrap:wrap;max-width:520px}
.inline-form input[type=email]{flex:1 1 240px}

/* split layouts */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:32px}}
.list-plain{list-style:none;padding:0;margin:0}
.list-plain li{padding:14px 0;border-bottom:1px solid var(--line)}
.list-plain li:first-child{border-top:1px solid var(--line)}
.tracks{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.tracks h3{font-size:1.05rem;color:var(--gray);font-weight:600}
.tracks ul{list-style:none;padding:0;margin:0}
.tracks li{padding:9px 0;border-bottom:1px solid var(--line)}
@media (max-width:900px){.tracks{grid-template-columns:1fr}}
.cycle{counter-reset:c;list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.cycle li{counter-increment:c;border:1px solid var(--line);border-radius:999px;padding:8px 16px 8px 12px;background:var(--panel)}
.cycle li::before{content:counter(c);font:500 .8rem var(--mono);color:var(--green);margin-right:10px}
.rules{padding-left:1.3em}
.rules li{margin-bottom:.8em;color:#D3D9E1}
.rules strong{color:var(--white)}
.callout{border:1px solid #2A4670;background:var(--panel-2);border-radius:12px;padding:clamp(24px,4vw,40px);display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:center}
@media (max-width:900px){.callout{grid-template-columns:1fr}}
.callout h2{margin-bottom:12px}
.prose h2{font-size:1.45rem;margin-top:1.6em}
.prose p,.prose li{color:#D3D9E1}

/* footer */
.site-footer{background:var(--black);border-top:1px solid var(--line);padding:56px 0 32px;font-size:.95rem}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.foot h4{font-size:1rem;margin-bottom:12px}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:8px}
.foot a{color:var(--gray);text-decoration:none}
.foot a:hover{color:var(--white)}
.foot .brand img{width:40px}
.fine{border-top:1px solid var(--line);margin-top:40px;padding-top:20px;color:#6F7E93;font-size:.86rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
@media (max-width:900px){.foot{grid-template-columns:1fr 1fr}.foot>div:first-child{grid-column:1/-1}}
.foot-desc{margin-top:14px;max-width:34ch}
.note{font-size:.85rem;margin-top:8px}
.right{text-align:right}
.pt-sm{padding-top:24px}
.pt-xs{padding-top:8px}
.pb-0{padding-bottom:0}
.mt-28{margin-top:28px}
.mb-28{margin-bottom:28px}
.m0{margin:0}
.small{font-size:.9rem}
.mono{font-family:var(--mono);font-weight:400;letter-spacing:-.02em}
h1 .mono{font-size:.86em}
.article{padding-bottom:clamp(56px,8vw,96px)}
.article-head .lead{margin-bottom:0}
.article .cmd:first-child{margin-top:8px}
@media (max-width:600px){.term{font-size:.74rem}.term pre{padding:14px}}
.foot a.btn{color:var(--black);margin-top:4px}.foot a.btn:hover{color:var(--black)}.form-card h3{margin-bottom:10px}

/* =====================================================================
   RESPONSIVENESS
   Every interactive element answers the person using it (hover, press,
   keyboard focus, touch), and every layout adapts from 320px phones to
   wide desktop screens. Keep this standard for anything added later.
   ===================================================================== */
:root{--ease:cubic-bezier(.2,.7,.2,1);--fast:.18s;--glow:0 10px 24px -12px rgba(0,204,106,.55)}
html{-webkit-tap-highlight-color:transparent}
body{overflow-wrap:break-word}
a,.btn,button,.post-card,.prog,.form-card,.callout,.day,.why div,.tracks li,.list-plain li,.cycle li,input,select,textarea,.copy,.filters button,.menu-btn{
  transition:color var(--fast) var(--ease),background-color var(--fast) var(--ease),border-color var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease),transform var(--fast) var(--ease),opacity var(--fast) var(--ease)}

/* Text links inside content: the underline thickens and turns brighter */
p a,li a,.lead a,.note a,.check a{text-decoration-thickness:1px;text-decoration-color:rgba(0,204,106,.45)}
p a:hover,li a:hover,.lead a:hover,.note a:hover,.check a:hover{text-decoration-thickness:2px;text-decoration-color:currentColor}
a:active{opacity:.75}

/* Buttons: lift and glow on hover, press down on click, clear focus ring */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;position:relative}
.btn:hover{transform:translateY(-2px);box-shadow:var(--glow)}
.btn:active{transform:translateY(0) scale(.97);box-shadow:none;opacity:1}
.btn:focus-visible{outline:2px solid var(--white);outline-offset:3px;box-shadow:0 0 0 6px rgba(0,204,106,.35)}
.btn.ghost:hover{background:rgba(0,204,106,.10);box-shadow:inset 0 0 0 1px var(--green),var(--glow)}
.btn.ghost:active{background:rgba(0,204,106,.18)}
.nav .btn{min-height:40px}
.nav .btn:hover{box-shadow:var(--glow)}

/* Header navigation */
.brand{border-radius:8px;padding:4px 6px;margin-left:-6px}
.brand:hover{color:var(--white)}
.brand:hover img{transform:rotate(-8deg) scale(1.06)}
.brand img{transition:transform .25s var(--ease)}
.nav a:not(.btn):hover{background:rgba(255,255,255,.06)}
.nav a:not(.btn):active{background:rgba(0,204,106,.14)}
.menu-btn:hover{border-color:var(--green)}
.menu-btn[aria-expanded="true"]{background:var(--green);border-color:var(--green);color:var(--black)}
@media (max-width:860px){
  .menu-btn{min-height:44px;min-width:72px}
  .nav{opacity:0;transform:translateY(-8px);pointer-events:none;display:flex;visibility:hidden;transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s linear .2s}
  .nav.open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .2s var(--ease),transform .2s var(--ease)}
  .nav a:not(.btn){min-height:48px;display:flex;align-items:center;padding:12px 8px;border-radius:6px}
  .nav a:not(.btn):hover{padding-left:14px}
}

/* Clickable cards: the whole card is the link, it lifts and lights up */
.post-card{position:relative}
.post-card:hover,.post-card:focus-visible{border-color:var(--green);transform:translateY(-4px);box-shadow:0 18px 36px -22px rgba(0,0,0,.8),0 0 0 1px rgba(0,204,106,.25)}
.post-card:hover h3{color:var(--green)}
.post-card:active{transform:translateY(-1px) scale(.99)}
.post-card h3{transition:color var(--fast) var(--ease)}
.prog{position:relative}
.prog .more::after{content:"";position:absolute;inset:0;border-radius:12px}
.prog:hover,.prog:focus-within{border-color:var(--green);transform:translateY(-4px);box-shadow:0 18px 36px -22px rgba(0,0,0,.8)}
.prog:active{transform:translateY(-1px) scale(.99)}
.prog .more{text-decoration-thickness:1px}
.prog:hover .more{text-decoration-thickness:2px}
.post-nav a{border-radius:10px;padding:10px 12px;margin:-10px -12px}
.post-nav a:hover{background:var(--panel)}

/* Containers that are not links still respond gently on hover */
@media (hover:hover){
  .day:hover{background:var(--panel)}
  .day.sat:hover{background:rgba(0,204,106,.18)}
  .why div:hover h3{color:var(--green)}
  .why h3{transition:color var(--fast) var(--ease)}
  .tracks li:hover,.list-plain li:hover{background:rgba(255,255,255,.03);padding-left:8px}
  .form-card:hover,.callout:hover{border-color:#2F5585}
  .cycle li:hover{border-color:var(--green)}
}

/* Small controls */
.filters button:hover{border-color:var(--green);color:var(--white)}
.filters button:active{transform:scale(.96)}
.filters button[aria-pressed="true"]:hover{color:var(--black)}
.copy:hover{border-color:var(--green)}
.copy:active{transform:scale(.95)}
.copy.done{background:var(--green);color:var(--black);border-color:var(--green)}
input:hover,select:hover,textarea:hover{border-color:#3A5378}
.foot a:not(.btn){display:inline-block;padding:2px 0}
.foot a:not(.btn):hover{color:var(--white);transform:translateX(3px)}

/* Touch screens: no hover lifts, bigger tap targets, press feedback instead */
@media (hover:none){
  .btn:hover,.post-card:hover,.prog:hover,.nav .btn:hover{transform:none;box-shadow:none}
  .post-card:active,.prog:active{border-color:var(--green);transform:scale(.99)}
  .filters button{min-height:44px;padding:10px 16px}
  .copy{min-height:40px;padding:8px 12px}
  .foot a:not(.btn){padding:10px 0}
  .foot li{margin-bottom:0}
}

/* Layout at every screen size */
@media (max-width:1100px){
  .week{grid-template-columns:1fr 1fr}
  .day{min-height:0;border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:56px 1fr;column-gap:12px}
  .day:nth-child(odd){border-right:1px solid var(--line)}
  .day b{margin:0;grid-row:span 2}
}
@media (max-width:900px) and (min-width:601px){
  .posts{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .week{grid-template-columns:1fr}
  .day:nth-child(odd){border-right:0}
  .actions .btn,.callout .btn,.form-card .btn{width:100%}
  .post-nav{flex-direction:column}
  .post-nav a{max-width:none}
  .post-nav a.right{text-align:left}
  .hero h1{font-size:clamp(2.1rem,10vw,2.6rem)}
  .lead{font-size:1.08rem}
}
@media (max-width:520px){
  .foot{grid-template-columns:1fr}
  .foot>div:first-child{grid-column:auto}
  .foot .btn{width:100%}
  .fine{flex-direction:column}
}
@media (max-width:360px){
  .brand{font-size:1rem;gap:8px}
  .brand img{width:28px}
  .site-header .wrap{gap:12px}
}
@media (min-width:1600px){
  :root{--wrap:1280px}
  body{font-size:1.125rem}
}

/* People who ask their device for less motion get no lifts or slides */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .btn:hover,.post-card:hover,.prog:hover,.foot a:not(.btn):hover,.brand:hover img,.nav a:not(.btn):hover{transform:none}
}
.brand{padding:7px 6px}
.fine a{display:inline-block;padding:6px 2px}
@media (hover:none){.fine a{padding:12px 4px}.nav .btn{min-height:48px}}

/* =====================================================================
   HERO HEADLINE ANIMATION
   "Stop watching." decrypts itself; "Start building." is assembled letter
   by letter onto a build bar that keeps a slow progress pulse. Hovering
   (or tapping) a line replays it. A soft light follows the cursor.
   ===================================================================== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes show-anyway{to{visibility:visible;opacity:1;transform:none;filter:none}}
.hero{position:relative;isolation:isolate}
.hero .wrap{position:relative;z-index:1}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0;
  background:radial-gradient(460px circle at var(--mx,70%) var(--my,30%),rgba(0,204,106,.10),transparent 62%);transition:opacity .45s var(--ease)}
.hero.lit::before{opacity:1}
.hero h1 .word{display:inline-block;white-space:nowrap}
.hero h1 .ch{display:inline-block;text-align:center}
.hero h1 .line{cursor:default;user-select:none;-webkit-user-select:none}

/* Until the script takes over, keep the headline hidden (with a safety net) */
.js .hero:not(.hero-ready) h1 .line{visibility:hidden;animation:show-anyway 0s linear 2.5s forwards}

/* Line one: decrypt */
.hero .decode .ch.scr{color:var(--green);opacity:.8;font-family:var(--mono);font-weight:400;font-size:.82em}
.hero .decode .ch.hit{animation:hit .55s var(--ease)}
@keyframes hit{0%{color:#7DFFB8;text-shadow:0 0 22px rgba(0,204,106,.9)}100%{color:inherit;text-shadow:0 0 0 transparent}}

/* Line two: build */
.hero .line.build{position:relative;width:fit-content;max-width:100%;padding-bottom:.14em}
.js .hero .line.build .ch{opacity:0;transform:translateY(.6em) rotate(7deg);filter:blur(6px)}
.hero .line.build.building .ch{animation:rise .55s cubic-bezier(.2,.9,.25,1.25) forwards;animation-delay:calc(var(--i) * 35ms)}
@keyframes rise{to{opacity:1;transform:none;filter:blur(0)}}
.hero .line.build.built .ch{opacity:1;transform:none;filter:none;animation:none}
.hero .line.build.built.wave .ch{animation:wave .7s var(--ease) calc(var(--i) * 30ms)}
@keyframes wave{0%,100%{transform:none}40%{transform:translateY(-.16em);color:#7DFFB8;text-shadow:0 0 18px rgba(0,204,106,.6)}}
.hero .line.build::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.08em;min-height:4px;border-radius:4px;
  background:var(--green);transform:scaleX(0);transform-origin:left;transition:opacity .8s var(--ease)}
.hero .line.build.building::after{animation:bar .8s var(--ease) .1s forwards}
@keyframes bar{to{transform:scaleX(1)}}
.hero .line.build.built::after{transform:scaleX(1);opacity:.4}
.hero .line.build.built::before{content:"";position:absolute;left:0;bottom:0;width:20%;height:.08em;min-height:4px;border-radius:4px;z-index:1;
  background:linear-gradient(90deg,transparent,#9CFFC9,transparent);animation:pulse-run 3.4s ease-in-out .6s infinite;opacity:0}
@keyframes pulse-run{0%{left:0;opacity:0}15%,85%{opacity:1}100%{left:80%;opacity:0}}

/* The rest of the hero arrives after the headline */
.js .hero .lead,.js .hero .actions{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .hero:not(.hero-ready) .lead,.js .hero:not(.hero-ready) .actions{animation:show-anyway 0s linear 2.5s forwards}
.js .hero .term{opacity:0;transform:translateY(24px) scale(.98);transition:opacity .8s var(--ease) .35s,transform .8s var(--ease) .35s}
.js .hero:not(.hero-ready) .term{animation:show-anyway 0s linear 2.5s forwards}
.hero.hero-ready .term{opacity:1;transform:none}
.hero.hero-ready .lead{opacity:1;transform:none;transition-delay:.95s}
.hero.hero-ready .actions{opacity:1;transform:none;transition-delay:1.1s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-iteration-count:1!important}
  .hero .line.build.built::before,.hero::before{display:none}
  .js .hero .lead,.js .hero .actions,.js .hero .term{transform:none}
}