:root{--ai-accent:#bf5af2;--halo-edge:linear-gradient(45deg,#37d2ff 0%,#a27cff 55%,#ff8fe0 100%);--halo-ring:1.5px;--halo-ring-active:2px;--halo-glow-blue:rgba(111,176,255,.30);--halo-glow-violet:rgba(162,124,255,.16);--halo-surface:#16161b}
/* the AI halo, mirrored from the app: ::before is the surface with the gradient ring, ::after is the blurred bloom on its own layer */
:where(.ai-halo){position:relative}
.ai-halo.ai-halo{--ring:var(--halo-ring);isolation:isolate;border:var(--halo-ring) solid transparent;background:none}
.ai-halo.ai-halo:is(:hover,:focus-within){--ring:var(--halo-ring-active)}
.ai-halo::before,.ai-halo::after{content:"";position:absolute;inset:calc(-1*var(--halo-ring));border-radius:inherit;pointer-events:none;transition:inset .2s ease-out,border-width .2s ease-out,opacity .2s ease-out}
.ai-halo::before{z-index:-1;inset:calc(-1*var(--ring));border:var(--ring) solid transparent;background:linear-gradient(var(--halo-surface),var(--halo-surface)) padding-box,var(--halo-edge) border-box;box-shadow:inset 0 0 6px var(--halo-glow-blue),inset 0 0 20px var(--halo-glow-violet)}
.ai-halo::after{z-index:-2;background:var(--halo-edge);filter:blur(6px);opacity:.42}
@media (forced-colors:active),(prefers-reduced-transparency:reduce){.ai-halo.ai-halo{border:1px solid CanvasText}.ai-halo::before,.ai-halo::after{display:none}}
.lab-eye{display:flex;align-items:center;gap:12px;margin-bottom:6px}.lab-eye svg{filter:drop-shadow(0 0 12px rgba(162,124,255,.55))}
.lab-nav-ic{vertical-align:-2px;margin-right:6px;filter:drop-shadow(0 0 5px rgba(162,124,255,.6))}
/* Mach Labs page: demo cards with rainbow-framed screenshots */
.lab-hero .tile-copy{max-width:640px}
.lab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 22px}
.lab-card{display:flex;flex-direction:column;gap:16px}
.lab-card.feat{grid-column:span 3;display:grid;grid-template-columns:1.35fr 1fr;gap:34px;align-items:center;padding-bottom:26px;border-bottom:1px solid var(--stroke)}
section.sec#demos{padding-top:34px}
.lab-shot{position:relative;display:block}
.lab-frame{border-radius:26px;transition:transform .25s}
.lab-frame>div{background:var(--halo-surface);border-radius:24px;padding:8px;position:relative}
.lab-frame img{border-radius:17px;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;display:block}
.lab-card.feat .lab-frame img{aspect-ratio:16/9}
.lab-card:hover .lab-frame{transform:translateY(-4px)}
.lab-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.92);display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 26px;border-radius:999px;background:var(--blue);color:#fff;font-weight:600;box-shadow:0 0 34px rgba(47,107,245,.6);opacity:0;transition:.25s}
.lab-play i{border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.lab-card:hover .lab-play,.lab-card:focus-within .lab-play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.lab-n{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--c)}
.lab-card h3{font-size:23px;letter-spacing:-.025em;margin:8px 0;line-height:1.2}.lab-card.feat h3{font-size:34px}
.lab-card p{color:var(--text2);font-size:15.5px;line-height:1.55}.lab-card.feat p{font-size:18px;font-weight:300}
.lab-go{display:inline-block;margin-top:14px;color:var(--link);font-weight:500}
.lab-go:hover{text-decoration:underline;text-underline-offset:4px}
.lab-card.feat .lab-go{display:inline-flex;align-items:center;height:46px;padding:0 24px;border-radius:999px;background:var(--blue);color:#fff;font-weight:600;box-shadow:0 0 28px rgba(47,107,245,.5)}
.lab-three{display:grid;grid-template-columns:repeat(3,1fr)}
.lab-three>div{padding:0 32px;border-left:1px solid var(--stroke)}.lab-three>div:first-child{padding-left:0;border:0}
.lab-three .n{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}.lab-three h3{font-size:22px;margin:8px 0;letter-spacing:-.02em}.lab-three p{color:var(--text2);font-size:15.5px;line-height:1.6}
@media(min-width:1001px){.lab-card.wide{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}}
@media(max-width:1000px){.lab-grid{grid-template-columns:1fr 1fr}.lab-card.feat{grid-column:span 2;grid-template-columns:1fr}.lab-three{grid-template-columns:1fr}.lab-three>div{border:0;padding:16px 0}}
@media(max-width:640px){.lab-grid{grid-template-columns:1fr}.lab-card.feat{grid-column:span 1}}

.lab-logo{margin:0 0 14px}.lab-logo img{display:block;height:34px;width:auto;max-width:100%;filter:drop-shadow(0 0 18px rgba(162,124,255,.35))}
@media(max-width:640px){.lab-logo img{height:25px}}
.lab-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
@media(max-width:1000px){.lab-bg{opacity:.4}}

.lab-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:14px 0 8px;padding:0}.lab-tags li{font-size:12.5px;color:var(--text);border:1px solid var(--stroke);border-radius:999px;padding:4px 12px;background:rgba(255,255,255,.04)}
.lab-card.hosted .lab-tags li:last-child{border-color:rgba(118,185,0,.5);color:#d6f0a0;background:rgba(118,185,0,.10)}
.lab-card .lab-note{font-size:13.5px!important;color:var(--text2);margin:6px 0 16px;max-width:46ch}

.lab-card .lab-tags{margin:10px 0 4px}.lab-card:not(.hosted) .lab-tags li{font-size:11.5px;padding:3px 10px}
.lab-card .lab-tags li:first-child{border-color:rgba(55,210,255,.4);color:#bfeaff}
.lab-card.hosted .lab-tags li:first-child{border-color:rgba(118,185,0,.5);color:#d6f0a0;background:rgba(118,185,0,.10)}
.lab-card.hosted .lab-tags li:nth-child(2){border-color:rgba(118,185,0,.5);color:#d6f0a0;background:rgba(118,185,0,.10)}

/* responsive hero: on tablet and phone the copy flows in the tile instead of floating in a fixed-height box */
@media(max-width:1000px){.lab-hero .tile{aspect-ratio:auto;min-height:0}.lab-hero .tile-copy{position:relative;left:auto;top:auto;bottom:auto;max-width:none;padding:42px 30px 38px;justify-content:flex-start}.lab-hero .tile-copy h1{line-height:1.06}}
@media(max-width:640px){.lab-hero .tile-copy{padding:34px 22px 30px}.lab-hero .ctas{flex-direction:column;align-items:stretch}.lab-hero .ctas .btn{justify-content:center;width:100%}}
/* touch targets: 44px minimum */
.lab-go{display:inline-flex;align-items:center;min-height:44px;margin-top:6px}
.lab-card:not(.feat) .lab-go{padding-right:6px}
/* quick answers (facts + FAQ) */
.lab-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0 0 40px;border-top:1px solid var(--stroke)}
.lab-facts>div{padding:18px 24px 18px 0;border-bottom:1px solid var(--stroke)}
.lab-facts dt{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);margin-bottom:6px}
.lab-facts dd{margin:0;color:var(--text);font-size:16px;line-height:1.45}
.lab-faq{display:grid;grid-template-columns:1fr 1fr;gap:34px 48px}
.lab-faq h3{font-size:20px;letter-spacing:-.02em;line-height:1.25;margin:0 0 8px}
.lab-faq p{color:var(--text2);font-size:15.5px;line-height:1.6;margin:0}
@media(max-width:1000px){.lab-facts{grid-template-columns:1fr 1fr}.lab-faq{grid-template-columns:1fr;gap:28px}}
@media(max-width:640px){.lab-facts{grid-template-columns:1fr}.lab-facts>div{padding:14px 0}.lab-faq h3{font-size:18px}}
@media(prefers-reduced-motion:reduce){.lab-frame,.lab-play{transition:none}.lab-card:hover .lab-frame{transform:none}}

/* PHONE hero: art banner on top, clean copy below (no ghosted screenshots behind the text) */
@media(max-width:640px){
 .lab-hero{padding-top:20px!important;padding-bottom:0!important}
 .lab-hero .tile{display:flex;flex-direction:column;border-radius:28px;background:#050506}
 .lab-hero .lab-bg{position:relative;inset:auto;display:block;width:auto;max-width:none;height:226px;align-self:flex-end;margin-right:-2%;opacity:1;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
 .lab-hero .tile{overflow:hidden}
 .lab-hero .tile-fade{display:none}
 .lab-hero .tile-copy{padding:0 22px 26px;margin-top:-18px;z-index:3}
 .lab-hero .lab-logo{margin:0 0 12px}.lab-hero .lab-logo img{height:22px}
 .lab-hero .tile-copy h1{font-size:clamp(29px,8.4vw,36px);line-height:1.06;margin-bottom:12px}
 .lab-hero .tile-copy .lede{font-size:16px;line-height:1.5;margin-bottom:0}
 .lab-hero .ctas{margin-top:20px;gap:10px}
 .lab-hero .ctas .btn{height:50px}
 .lab-hero .ctas .btn-ghost{height:44px;background:none;border-color:transparent;color:var(--link);box-shadow:none;text-decoration:underline;text-underline-offset:4px;font-weight:500}
 .lab-featured{padding-top:34px}
 .lab-featured .sec-head h2{font-size:clamp(28px,8vw,34px)}
}

/* demo cards: one vertical rhythm. eyebrow > name + tagline > description > tags > link.
   The description row takes any spare height, so tags and links sit on one shared line and no gap is reserved above the text. */
.lab-card p{text-align:justify;-webkit-hyphens:auto;hyphens:auto;text-justify:inter-word}
@media(min-width:1001px){
 .lab-card:not(.feat):not(.wide){display:grid;grid-template-rows:auto 1fr}
 .lab-card:not(.feat):not(.wide)>div:last-child{display:grid;grid-template-rows:auto auto 1fr auto auto;align-content:stretch;row-gap:0}
 .lab-card:not(.feat):not(.wide) .lab-n{margin:2px 0 8px}
 .lab-card:not(.feat):not(.wide) h3{margin:0 0 10px;min-height:2.4em;line-height:1.2}
 .lab-card:not(.feat):not(.wide) p{margin:0;font-size:15.5px;line-height:1.55;align-self:start}
 .lab-card:not(.feat):not(.wide) .lab-tags{margin:14px 0 0;min-height:30px;align-items:flex-start}
 .lab-card:not(.feat):not(.wide) .lab-go{margin-top:8px;align-self:start}
}

/* Featured demos share one two-column grid; the fourth space previews a future demo without a launch action. */
.lab-featured{padding-bottom:34px}
.lab-featured-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 28px}
.lab-featured-grid > #sky-above-you{margin-block:clamp(28px,3vw,48px)}
.lab-featured-grid .lab-card.feat{grid-column:auto;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;border:0;min-width:0}
.lab-featured-grid .lab-card-copy{display:flex;flex:1;flex-direction:column;padding:22px 4px 0}
.lab-featured-grid .lab-card h3{font-size:clamp(27px,2.6vw,34px);margin:8px 0 14px}
.lab-featured-grid .lab-card p{font-size:16px;line-height:1.55;font-weight:400;text-align:left;-webkit-hyphens:none;hyphens:none;text-justify:auto;margin:0}
.lab-featured-grid .lab-card .lab-tags{margin:16px 0 12px}
.lab-featured-grid .lab-card .lab-note{margin:0 0 16px;max-width:none}
.lab-featured-grid .lab-card .lab-go{align-self:flex-start;margin-top:auto}
.sky-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:auto}
.lab-featured-grid .lab-card.sky .sky-actions .lab-go{margin:0}
.sky-how-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 24px;border:1px solid var(--stroke);border-radius:999px;background:#202025;color:var(--text);font:inherit;font-weight:600;cursor:pointer}
.sky-how-button:hover{border-color:var(--cyan);background:#272a35}
.sky-how-button:focus-visible,.sky-dialog-close:focus-visible,.sky-diagram-scroll:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.sky-architecture-dialog{width:min(1120px,calc(100% - 32px));max-width:none;max-height:min(94dvh,1100px);padding:0;border:1px solid #3b3f52;border-radius:22px;background:#101116;color:var(--text);box-shadow:0 30px 100px #000b;overflow:auto}
.sky-architecture-dialog::backdrop{background:#03040be6;backdrop-filter:blur(5px)}
.sky-dialog-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:28px 32px 0}
.sky-dialog-eyebrow{display:block;color:var(--cyan);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.sky-dialog-head h2{margin:6px 0 0;font-size:clamp(26px,3.4vw,40px);line-height:1.13;letter-spacing:-.035em}
.sky-dialog-close{flex:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--stroke);border-radius:50%;background:#21232b;color:var(--text);font:inherit;font-size:29px;line-height:1;cursor:pointer}
.sky-dialog-close:hover{background:#303442}
.sky-dialog-summary{margin:10px 32px 22px;color:var(--text2);font-size:17px;line-height:1.5}
.sky-diagram{margin:0 32px}
.sky-diagram-scroll{overflow-x:auto;border:1px solid #b7bfcb;border-radius:13px;background:#fff}
.sky-diagram img{display:block;width:100%;min-width:850px;height:auto}
.sky-diagram figcaption{margin:8px 0 0;color:var(--text2);font-size:13px;line-height:1.45}
.sky-dialog-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:23px 32px 30px;padding:0;list-style:none;counter-reset:sky-step}
.sky-dialog-steps li{position:relative;counter-increment:sky-step;padding:0 0 0 34px;color:var(--text2);font-size:14px;line-height:1.5}
.sky-dialog-steps li::before{content:counter(sky-step,decimal-leading-zero);position:absolute;top:0;left:0;color:var(--cyan);font-size:12px;font-weight:700;letter-spacing:.03em}
.sky-dialog-steps strong{display:block;margin-bottom:3px;color:var(--text);font-size:15px}
@media(max-width:760px){.sky-dialog-head{padding:22px 20px 0}.sky-dialog-summary{margin:10px 20px 18px;font-size:15px}.sky-diagram{margin:0 20px}.sky-dialog-steps{grid-template-columns:1fr;gap:15px;margin:20px 20px 26px}.sky-diagram figcaption{font-size:12px}}
@media(max-width:480px){.sky-actions{align-items:stretch}.sky-actions .lab-go,.sky-how-button{justify-content:center;width:100%}}
@media(min-width:761px){.lab-featured-grid .lab-card.sky{grid-column:1/-1;display:grid;grid-template-columns:1.35fr 1fr;gap:34px;align-items:center}.lab-featured-grid .lab-card.sky .lab-card-copy{padding:0 4px}}
.lab-coming-art{position:relative;display:grid;place-items:center;aspect-ratio:16/9;overflow:hidden;border:1px solid rgba(162,124,255,.45);border-radius:26px;background:radial-gradient(circle at 50% 45%,rgba(109,102,255,.28),transparent 30%),linear-gradient(135deg,#111728,#080b16 62%,#15102a)}
.lab-coming-art::before{content:"";position:absolute;inset:0;opacity:.25;background-image:linear-gradient(rgba(162,124,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(162,124,255,.16) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(transparent,#000 60%)}
.lab-coming-rings{position:relative;width:min(43%,210px);aspect-ratio:1;display:grid;place-items:center}
.lab-coming-rings span{position:absolute;border:1px solid rgba(171,163,255,.65);border-radius:50%;box-shadow:0 0 22px rgba(142,116,255,.22),inset 0 0 20px rgba(142,116,255,.14)}
.lab-coming-rings span:nth-child(1){inset:0;transform:rotate(-28deg) scaleX(.48)}
.lab-coming-rings span:nth-child(2){inset:0;transform:rotate(55deg) scaleX(.48)}
.lab-coming-rings span:nth-child(3){width:26%;aspect-ratio:1;background:radial-gradient(circle at 35% 30%,#eff4ff,#8b7dff 45%,#38336f);border:0;box-shadow:0 0 38px rgba(159,141,255,.65)}
.lab-coming-art-label{position:absolute;bottom:12%;left:0;right:0;text-align:center;font-size:11px;font-weight:700;letter-spacing:.2em;color:#c8c9ff}
.lab-coming-status{align-self:flex-start;margin-top:auto;padding:10px 15px;border:1px solid rgba(162,124,255,.45);border-radius:999px;color:#c8c9ff;background:rgba(162,124,255,.10);font-size:13px;font-weight:600}
@media(max-width:760px){.lab-featured-grid{grid-template-columns:1fr;gap:38px}.lab-featured-grid .lab-card-copy{padding:18px 2px 0}}