/* Hero CTA row + status line */
.runtime-ctas{display:flex;align-items:center;justify-content:center;gap:13px;flex-wrap:wrap;margin-top:30px;}

/* Terminal-style output blocks replacing light dashboard mockups */
.term-window{background:#05080f;border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 -8px 36px -20px #99d7dd70,0 24px 65px #0006;}
.term-titlebar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line);background:#0a0f18;}
.term-titlebar span:not(:last-child){width:9px;height:9px;border-radius:50%;background:#333;}
.term-titlebar span:nth-child(1){background:#e5605a;}
.term-titlebar span:nth-child(2){background:#e5b84f;}
.term-titlebar span:nth-child(3){background:#5ec98a;}
.term-titlebar span:last-child{margin-left:8px;font:11px var(--mono);color:var(--muted);}
.term-body{padding:20px;font:12px/1.85 var(--mono);color:#c9d6e0;overflow-x:auto;}
.term-line{margin:0;white-space:pre;}
.term-muted{color:var(--muted);}
.term-ok{color:#8ed2b0;}
.term-warn{color:#e2c392;}

@media(max-width:520px){.term-body{font-size:11px;padding:14px;}}

/* Hero CLI terminal (clone + read) */
.hero-cli{max-width:780px;margin:194px auto 0;width:100%;}
.hero-cli .visual-stage{border-radius:12px;}

.hero-term .term-body{font-size:12.5px;}
.term-prompt{color:var(--accent);margin-right:2px;}
@media(max-width:800px){.hero-cli{max-width:100%;margin-top:152px;}}
@media(max-width:520px){.hero-cli{margin-top:130px;}}
@media(max-width:520px){.hero-term .term-body{font-size:11px;padding:14px;}}

/* IDE-style JSON config mockups replacing dashboard-like panels */
.ide-window{background:#05080f;border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 -8px 36px -20px #99d7dd70,0 24px 65px #0006;}
.ide-tabbar{display:flex;padding:0 4px;border-bottom:1px solid var(--line);background:#0a0f18;}
.ide-tab{padding:10px 18px 9px;font:12px var(--mono);color:var(--ink);border-bottom:2px solid var(--accent);}
.ide-code{counter-reset:line;padding:18px 20px 18px 0;font:12px/1.85 var(--mono);overflow-x:auto;}
.ide-line{position:relative;margin:0;padding-left:44px;white-space:pre;color:#c9d6e0;counter-increment:line;}
.ide-line::before{content:counter(line);position:absolute;left:0;width:30px;text-align:right;color:#3d4a5c;}
.tok-key{color:var(--accent);}
.tok-str{color:#8ed2b0;}
.tok-num{color:#e2c392;}

.tok-ok{color:#8ed2b0;}
.tok-deny{color:#f0a0aa;}
@media(max-width:520px){.ide-code{font-size:11px;padding:14px 14px 14px 0;}.ide-line{padding-left:40px;}.ide-line::before{width:24px;}}

/* Hero notify form (local preview — non-functional) */
.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;}
.notify-form{display:flex;flex:0 1 380px;min-width:0;margin:0;}
.notify-form input{flex:1;min-width:0;height:48px;padding:0 16px;border:1px solid var(--line);border-right:none;border-radius:6px 0 0 6px;background:var(--panel);color:var(--ink);font:13px var(--sans);}
.notify-form input::placeholder{color:var(--muted);}
.notify-form button{flex:0 0 auto;height:48px;padding:0 20px;border:1px solid var(--button-bg);border-radius:0 6px 6px 0;background:var(--button-bg);color:var(--button-ink);font:13px var(--sans);font-weight:500;cursor:pointer;white-space:nowrap;transition:background 140ms,border-color 140ms;}
.notify-form button:hover{background:var(--ice);border-color:var(--ice);}
@media(max-width:520px){.notify-form{flex-direction:column;max-width:100%;}.notify-form input{border-right:1px solid var(--line);border-radius:6px 6px 0 0;}.notify-form button{border-radius:0 0 6px 6px;}}

/* Orca relocated to sit above the hero CLI terminal instead of the architecture diagram.
   The terminal sits at z-index:2, sandwiched between the orca body (z:1, behind) and
   the clipped flipper layer (z:3, in front) -- this makes the flipper read as holding
   or presenting the terminal instead of the whole orca stamping over its corner. */
.hero-cli .term-window{position:relative;z-index:2;}
.hero-cli .stage-overview{--orca-size:252px;--orca-top:-171px;--orca-right:9%;padding-top:18px;}
.hero-cli .orca-light{width:656px;height:658px;top:-403px;right:calc(9% - 117px);background:radial-gradient(ellipse 14.8% 24.7% at 50% 58.2%,#9bdce564,transparent 95%),radial-gradient(ellipse 29.6% 28.2% at 53% 57.6%,#7c77d244,transparent 95%),radial-gradient(ellipse 44.5% 32.3% at 48.5% 67.6%,#38bebc2b,transparent 95%);}
/* the framed terminal grows up from its bottom edge, which is where the dark begins; the orca rides along, centred */
.hero-cli .stage-overview{transform:scale(var(--overview-scale,1));transform-origin:50% 100%;}
/* Scroll-driven where supported: the compositor applies the grow in the same frame as the scroll,
   so it cannot lag behind it. site.js supplies the range and the ceiling; the easing is smoothstep. */
@supports (animation-timeline:scroll()){.hero-cli .stage-overview{animation:overview-grow cubic-bezier(.3333,0,.6667,1) both;animation-timeline:scroll(root);animation-range:0 var(--zoom-distance,1px);}}
@keyframes overview-grow{from{transform:scale(1)}to{transform:scale(var(--overview-max,1))}}
.hero-cli .floating-orca,.hero-cli .orca-light{left:0;right:0;margin-inline:auto;}
@media(prefers-reduced-motion:reduce){.hero-cli .term-window{transform:none;}}
@media(max-width:800px){.hero-cli .stage-overview{--orca-size:184px;--orca-top:-144px;padding-top:14px;}.hero-cli .orca-light{width:479px;height:485px;top:-305px;right:calc(9% - 85px);}}
@media(max-width:520px){.hero-cli .stage-overview{--orca-size:157px;--orca-top:-122px;padding-top:11px;}.hero-cli .orca-light{width:405px;height:408px;top:-259px;right:calc(9% - 71px);}.notify-form{gap:10px;}}

/* Hero CTA row: align the text link optically with the primary button. */
/* Hero and the first chapter were butting directly together (both had 0 padding on the shared edge). */
@media(max-width:520px){.runtime-ctas{flex-direction:column;gap:10px;}.notify-form{flex:0 0 auto;width:100%;}}
/* hero + section type scale */
.runtime-message h1{max-width:1200px;font-size:40px;line-height:1.08;}
@media(min-width:768px){.runtime-message h1{font-size:56px;}}
@media(min-width:1012px){.runtime-message h1{font-size:64px;}}
.runtime-summary{margin-top:20px;max-width:600px;font-size:18px;line-height:1.5;letter-spacing:.01em;color:var(--ink);}
.runtime-ctas{margin-top:38px;}
.notify-form{flex:0 1 460px;}
.notify-form input,.notify-form button{height:56px;font-size:15px;}
.notify-form input{padding:0 18px;}
.notify-form button{padding:0 24px;}
.chapter h2{font-size:clamp(38px,3.9vw,55px);}
.feature-heading h2{font-size:clamp(42px,4.5vw,64px);}
.integration h2{font-size:clamp(38px,3.9vw,55px);}
@media(max-width:800px){.runtime-ctas{margin-top:32px;}.notify-form input,.notify-form button{height:52px;font-size:14px;}.chapter h2{font-size:44px;}.feature-heading h2{font-size:48px;}.integration h2{font-size:44px;}}
@media(max-width:520px){.runtime-ctas{margin-top:26px;}.notify-form input,.notify-form button{height:50px;font-size:14px;}.chapter h2{font-size:39px;}.feature-heading h2{font-size:40px;}.integration h2{font-size:39px;}}
#permissions{padding-top:150px;}
@media(max-width:800px){#permissions{padding-top:110px;}}
@media(max-width:520px){#permissions{padding-top:88px;}}
/* showcase scale: buzz heading, github stage width */
@media(min-width:1101px){
.feature-layout{max-width:min(1600px,92vw);}
.feature-heading{max-width:1280px;margin-bottom:72px;}
.feature-heading h2{font-size:clamp(48px,3.87vw,80px);line-height:.97;}
.feature-copy{max-width:540px;}
}
/* header scale + bare mark + lighter h1 */
.brand-mark{width:38px;height:38px;padding:0;background:none;border-radius:0;}
.page-signature>span:not(.brand-mark){font-size:15px;}
.page-header nav a{font-size:15px;}
.page-header nav{gap:36px;}
.landing .page-header{height:78px;min-height:78px;margin-bottom:-78px;}
.landing .runtime-intro{padding-top:78px;}
.runtime-message h1{font-weight:450;}
@media(max-width:800px){.brand-mark{width:32px;height:32px;}.page-signature>span:not(.brand-mark){font-size:14px;}.page-header nav a{font-size:14px;}.page-header nav{gap:26px;}.landing .page-header{height:68px;min-height:68px;margin-bottom:-68px;}.landing .runtime-intro{padding-top:68px;}}
/* glow stays inside the card */
.feature-scene::before{inset:0;border-radius:inherit;background:radial-gradient(ellipse 46% 40% at 50% 22%,#92ebef4a,transparent 100%),radial-gradient(ellipse 64% 56% at 50% 30%,#3b7fbc30,transparent 100%);}
/* hero drop + repo button = github sign-up box */
/* github: gap(92) / h1(64) = 1.438 -> 1.438 * 8.8vw = 12.65vw, 1.438*136 = 196 */
/* github h1Top=236 @1488x807; our header is 78 -> 236-78=158 */
.runtime-frame{padding-top:110px;}
@media(min-width:768px){.runtime-frame{padding-top:120px;}}
@media(min-width:1012px){.runtime-frame{padding-top:158px;}}
/* github header text = 16px */
.page-signature>span:not(.brand-mark){font-size:16px;}
.page-header nav a{font-size:16px;}
/* github sign-up box 77.5x32 r6 pad 0 12px -> ours, a tad larger */
.page-header .repository-link{width:auto;height:36px;min-height:36px;gap:8px;padding:0 12px;font-size:16px;font-weight:400;}
.page-header .repository-link::before{inset:0;border-radius:6px;}
.page-header .repository-link img{width:20px;height:20px;}
/* github logo 32px in a 72px bar; ours larger by request */
.brand-mark{width:42px;height:42px;}
@media(max-width:800px){.brand-mark{width:34px;height:34px;}.page-signature>span:not(.brand-mark){font-size:15px;}.page-header nav a{font-size:15px;}.page-header .repository-link{height:32px;min-height:32px;padding:0 10px;font-size:14px;}.page-header .repository-link img{width:18px;height:18px;}}

/* explanatory copy sits outside the card; the card frames only the example */
.feature-body{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:72px;}
/* A fixed distance from the card, as github.com spaces this copy from its panel: 136px at every
   width. The grid gap covers part of it, so the copy's own margin makes up the rest. */
.feature-body .feature-copy{max-width:370px;margin-left:auto;margin-right:64px;}
@media(min-width:801px) and (max-width:1100px){.feature-body .feature-copy{margin-right:60px;}}
@media(max-width:800px){.feature-body .feature-copy{margin-inline:auto;}}
@media(min-width:801px) and (max-width:1100px){.feature-body{gap:36px;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);}.feature-scene{padding:28px;}}
@media(max-width:800px){.feature-body{grid-template-columns:minmax(0,1fr);gap:40px;}.feature-scene{padding:28px;}}
@media(max-width:520px){.feature-scene{padding:14px 10px;}}

/* email focus ring drawn inside the field, not 5px outside it */
.notify-form input:focus,.notify-form input:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
.notify-form button:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;}

/* secure+measure stack like github: p 12px under h2, 22/30.8, max 652; visual 56px below */
/* explanation under the title at github's measure (max 535px, 652px from 1012), free to run wider than the title */
.feature-stacked .feature-heading{margin-bottom:56px;}
.feature-stacked .feature-body{display:flex;flex-direction:column;align-items:center;}
.feature-stacked .feature-copy{max-width:535px;margin:12px auto 0;text-align:center;}
@media(min-width:1012px){.feature-stacked .feature-copy{max-width:652px;}}
.feature-stacked .feature-copy .chapter-intro{max-width:none;font-size:22px;line-height:1.4;letter-spacing:0;color:#ffffffd9;text-wrap:pretty;}
.feature-stacked .feature-scene{width:100%;max-width:1100px;padding:56px;}
.feature-stacked .ide-tab{font-size:14px;}
.feature-stacked .ide-code,.feature-stacked .term-body{font-size:16px;}
@media(max-width:800px){.feature-stacked .feature-heading{margin-bottom:40px;}.feature-stacked .feature-scene{padding:28px;}.feature-stacked .ide-code,.feature-stacked .term-body{font-size:13px;}}
@media(max-width:520px){.feature-stacked .feature-copy .chapter-intro{font-size:18px;}.feature-stacked .feature-scene{padding:14px 10px;}.feature-stacked .ide-code,.feature-stacked .term-body{font-size:11px;}}

/* the hero zoom scales the terminal past the hero edge; keep it above the next section */
.runtime-intro{z-index:1;}
.nowrap{white-space:nowrap;}

/* hero ends on a divider; below it the page is one flat, very dark blue */
.runtime-intro{border-bottom:1px solid #21435b;}
/* on phones the ctas stack, so the 460px basis would become a height */
@media(max-width:520px){.notify-form{flex:0 0 auto;}.notify-form input{flex:none;}}
@media(max-width:800px){.hero-cli{width:calc(100% - 40px);}}
/* landing: the title starts slightly big, then hops into place (the back-out curve overshoots a touch) */
@media(prefers-reduced-motion:no-preference){.runtime-message h1{animation:title-hop .8s cubic-bezier(.34,1.56,.64,1) .1s both;}}
@keyframes title-hop{from{transform:translateY(-6px) scale(1.08)}to{transform:none}}
/* github visual frame: 8px rim, 24px outer radius around a 16px inner radius */
.feature-scene,.feature-stacked .feature-scene{padding:8px;border-radius:24px;}
.feature-scene .ide-window,.feature-scene .term-window{border-radius:16px;}
/* hero terminal in the cards' 8px frame: 780px terminal inside; orca raised by the 10px the old 18px top gap gave up */
.hero-cli{max-width:798px;}
.hero-cli .stage-overview{padding:8px;border-radius:24px;--orca-top:-181px;}
.hero-cli{position:relative;}
.hero-cli::before{content:'';position:absolute;inset:-9% -5% -14%;z-index:-1;pointer-events:none;filter:blur(48px);opacity:.55;background:radial-gradient(ellipse 38% 30% at 28% 6%,#9ff5e4 0%,#38bebc 30%,transparent 72%),radial-gradient(ellipse 40% 32% at 72% 4%,#c4b5ff 0%,#6d5ee0 30%,transparent 72%),radial-gradient(ellipse 62% 36% at 50% 100%,#5aa8e8 0%,#2d62c0 34%,transparent 76%);}
/* The frame band is painted again above the orca, so nothing of it crosses the terminal's edge:
   the orca is cut at the outer edge, while the clipped fin layer still drapes over the title bar. */
.hero-cli .stage-overview::after{content:"";position:absolute;inset:-1px;z-index:2;pointer-events:none;border:1px solid #2c4a5c;border-radius:25px;padding:8px;background:radial-gradient(120% 130% at 16% 0%,#5fd6d07a,transparent 62%),radial-gradient(120% 130% at 84% 0%,#8f86ef73,transparent 62%),radial-gradient(150% 120% at 50% 100%,#4a86d64d,transparent 65%),linear-gradient(180deg,#080e17 30%,#0d2031 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;}
.hero-cli .feature-scene::before{filter:none;opacity:1;}
@media(max-width:800px){.hero-cli .stage-overview{--orca-top:-150px;}}
@media(max-width:520px){.hero-cli .stage-overview{--orca-top:-125px;}}
@media(min-width:801px){.hero-cli{margin-top:230px;}}
/* section title + explanation on github's "accelerate your entire workflow" scale, measured at every width:
   h2 32/38.4 -> 40/48 at 768, weight 460; p 18/25.2 -> 22/30.8 at 1012, .24px tracking, 85% white; p 12px under h2 */
.feature-heading h2{font-size:32px;line-height:1.2;font-weight:460;}
@media(min-width:768px){.feature-heading h2{font-size:40px;}}
.feature-copy .chapter-intro,.feature-stacked .feature-copy .chapter-intro{font-size:18px;line-height:1.4;letter-spacing:.24px;color:#ffffffd9;}
@media(min-width:1012px){.feature-copy .chapter-intro,.feature-stacked .feature-copy .chapter-intro{font-size:22px;}}
/* aurora behind each card, after github's: blurred colour blooms that spill past the frame and light its rim
   (teal and violet over the top edge, blue beneath), painted under the code window */
.feature-snippet{position:relative;}
.feature-snippet::before{content:'';position:absolute;inset:-14% -7% -20%;z-index:-1;pointer-events:none;filter:blur(48px);opacity:.6;
background:radial-gradient(ellipse 38% 30% at 28% 4%,#9ff5e4 0%,#38bebc 30%,transparent 72%),radial-gradient(ellipse 40% 32% at 72% 2%,#c4b5ff 0%,#6d5ee0 30%,transparent 72%),radial-gradient(ellipse 62% 36% at 50% 100%,#5aa8e8 0%,#2d62c0 34%,transparent 76%);}
/* clip sideways only, so the aurora can fade out vertically instead of stopping at the section edge */
.feature-chapter{overflow-y:visible;}
/* orca mark at github header logo size: 32px at every width */
.brand-mark{width:32px;height:32px;}
.term-deny{color:#f0a0aa;}
/* closing section on github's "millions of developers" scale, measured at every width:
   h2 28/33.6 -> 34/40.8 at 768 -> 40/48 at 1012, weight 460; copy 18/27 everywhere, .18px tracking, max 720px, 16px under */
.integration h2{font-size:28px;line-height:1.2;font-weight:460;}
@media(min-width:768px){.integration h2{font-size:34px;}}
@media(min-width:1012px){.integration h2{font-size:40px;}}
.integration p:not(.section-label){max-width:720px;margin:16px auto 0;font-size:18px;line-height:1.5;letter-spacing:.01em;}
/* long terminal and code lines wrap on narrow screens instead of running off the edge;
   continuation lines hang in from the first so they read as one line */
.term-line{white-space:pre-wrap;overflow-wrap:anywhere;padding-left:2ch;text-indent:-2ch;}
.hero-term .term-line:has(.term-label){padding-left:13ch;text-indent:-13ch;}
.ide-line{white-space:pre-wrap;overflow-wrap:anywhere;padding-left:calc(44px + 4ch);text-indent:-4ch;}
@media(max-width:520px){.ide-line{padding-left:calc(36px + 4ch);}}
.hero-term .term-body{color:#9fb3c3;}
/* hero session: one colour per feature (Secure green, Deploy blue, Telemetry amber); labels quiet, key items bright, details dim */
.term-label{color:#7f95a8;}.term-hi{color:#f3fbff;}.term-dim{color:#5f7488;}
#telemetry .term-body{color:#9fb3c3;}
/* notify: once the address is saved the form shrinks away and a thank-you takes its place */
.runtime-ctas{display:grid;justify-items:center;align-items:center;gap:10px;}
.notify-form,.notify-thanks{grid-area:1/1;}
.notify-form{width:min(460px,100%);transition:transform .45s cubic-bezier(.5,0,.75,0),opacity .3s ease .12s;}
.notify-thanks{display:flex;align-items:center;gap:14px;visibility:hidden;}
.notify-thanks img{width:76px;height:76px;margin:-12px 0;opacity:0;transform:scale(.3) translateY(18px);transform-origin:50% 90%;transition:opacity .2s ease .32s,transform .6s cubic-bezier(.34,1.56,.64,1) .32s;filter:drop-shadow(0 4px 10px #57e0e73b);}
.notify-text{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-size:18px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .35s ease .5s,transform .5s cubic-bezier(.22,1,.36,1) .5s;}
.notify-check{width:18px;height:18px;flex:none;fill:none;stroke:#8ed2b0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .45s cubic-bezier(.65,0,.35,1) .6s;}
.runtime-ctas.is-sent .notify-form{transform:scale(.4);opacity:0;visibility:hidden;transition:transform .45s cubic-bezier(.5,0,.75,0),opacity .3s ease .12s,visibility 0s .45s;}
.runtime-ctas.is-sent .notify-thanks{visibility:visible;}
.runtime-ctas.is-sent .notify-thanks img,.runtime-ctas.is-sent .notify-text{opacity:1;transform:none;}
.runtime-ctas.is-sent .notify-check{stroke-dashoffset:0;}
.notify-error{margin:0;font-size:14px;color:#f0a0aa;}
/* hero sign-up: the orca dives behind the terminal and resurfaces splashing */
.orca-splash{display:none;width:calc(var(--orca-size)*.92);height:auto;top:calc(var(--orca-top) - var(--orca-size)*.04);z-index:1;filter:drop-shadow(0 5px 13px #57e0e73b);}
.runtime-frame:has(.is-sent) .orca-splash{display:block;animation:orca-resurface .7s cubic-bezier(.34,1.56,.64,1) .3s both,orca-float 9s ease-in-out 1s infinite;}
.runtime-frame:has(.is-sent) .orca-body{translate:0 60%;opacity:0;transition:translate .35s cubic-bezier(.5,0,.75,0),opacity .15s ease .2s;}
.runtime-frame:has(.is-sent) .orca-fin{opacity:0;transition:opacity .1s;}
@keyframes orca-resurface{from{translate:0 60%;opacity:0}}
@media(prefers-reduced-motion:reduce){.notify-form,.notify-thanks img,.notify-text,.notify-check{transition:none;}}
.term-deploy{color:#6cb6ff;}.term-measure{color:#f2c46d;}
/* Phones scroll in one direction only. The Secure and Measure rows carry three or four columns,
   so there the trailing detail drops onto its own indented line: the status column still reads
   straight down the left edge, and nothing is hidden off-screen. */
@media(max-width:800px){
.secure-scene .term-line,.measure-scene .term-line{white-space:normal;padding-left:0;text-indent:0;min-height:1em;}
.secure-scene .term-sub,.measure-scene .term-sub{padding-left:2ch;}
.secure-scene .term-detail,.measure-scene .term-detail{display:block;margin-left:2ch;}
}