/* ---------- Tokens ---------- */
:root{
  --forest:#1e5b43;
  --forest-2:#2f7a58;
  --forest-deep:#123a2b;
  --charcoal:#171a1c;
  --charcoal-2:#1f2426;
  --ink:#141719;
  --paper:#ffffff;
  --mist:#f4f6f5;
  --sage:#dcebe2;
  --muted:#54605a;
  --muted-dark:#c3cec8;
  --line:rgba(18,40,30,.12);
  --r-sm:12px;
  --r:18px;
  --r-lg:26px;
  --shadow-card:0 1px 2px rgba(16,24,20,.05), 0 20px 44px -20px rgba(16,30,22,.35);
  --shadow-deep:0 2px 4px rgba(16,24,20,.08), 0 34px 70px -24px rgba(10,26,18,.5);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html,body{overflow-x:clip;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block;}
h1,h2,h3,p,ul{margin:0;}
a{color:inherit;}
ul{padding:0;}
section[id]{scroll-margin-top:84px;}

/* ---------- Utilities ---------- */
.wrap{width:min(1120px,100% - 3rem);margin-inline:auto;}
.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;}
.eyebrow{
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;
  font-size:.78rem;font-weight:600;color:var(--forest-2);margin-bottom:1rem;display:inline-block;
}
.eyebrow--dark{color:#8fd4b3;}

/* Skip link */
.skip{position:absolute;left:-999px;top:0;z-index:200;background:#fff;color:var(--charcoal);
  padding:.7rem 1rem;border-radius:10px;font-weight:700;text-decoration:none;box-shadow:var(--shadow-card);}
.skip:focus{left:1rem;top:1rem;}

/* Focus visibility */
a:focus-visible,button:focus-visible{outline:3px solid var(--forest-2);outline-offset:3px;border-radius:8px;}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-weight:700;line-height:1;
  padding:.95rem 1.5rem;border-radius:14px;text-decoration:none;border:1px solid transparent;
  cursor:pointer;font-size:1rem;font-family:inherit;
  transition:transform .15s ease,background .2s ease,box-shadow .2s ease,color .2s ease;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--forest);color:#fff;box-shadow:0 12px 26px -12px rgba(30,91,67,.65);}
.btn-primary:hover{background:var(--forest-deep);}
.btn-light{background:#fff;color:var(--charcoal);box-shadow:0 14px 30px -14px rgba(0,0,0,.55);}
.btn-light:hover{background:var(--sage);}
.btn-ghost{background:transparent;color:inherit;border-color:currentColor;}
.btn-ghost:hover{background:rgba(255,255,255,.08);}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;
  background:rgba(23,26,28,.9);backdrop-filter:blur(9px);
  border-bottom:1px solid rgba(255,255,255,.08);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0;}
.brand{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;color:#fff;font-weight:800;letter-spacing:-.01em;font-size:1.12rem;}
.logo-mark{width:34px;height:34px;padding:5px;border-radius:10px;background:rgba(47,122,88,.22);border:1px solid rgba(143,212,179,.35);}
.logo-mark svg{width:100%;height:100%;stroke:#a9e6c6;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.brand .jc{color:#8fd4b3;}

.primary-nav ul{display:flex;align-items:center;gap:.25rem;list-style:none;}
.primary-nav a{display:inline-block;padding:.6rem .9rem;border-radius:10px;text-decoration:none;
  color:#dfe7e2;font-weight:600;font-size:.98rem;transition:background .2s ease,color .2s ease;}
.primary-nav a:hover{background:rgba(255,255,255,.08);color:#fff;}

.nav-toggle{width:46px;height:46px;display:none;align-items:center;justify-content:center;
  background:transparent;border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:12px;cursor:pointer;}
.nav-toggle:hover{background:rgba(255,255,255,.07);}
.burger{width:24px;height:24px;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;fill:none;}
.burger line{transform-box:fill-box;transform-origin:center;transition:transform .2s ease,opacity .2s ease;}
.site-header.menu-open .b1{transform:translateY(4px) rotate(45deg);}
.site-header.menu-open .b3{transform:translateY(-4px) rotate(-45deg);}
.site-header.menu-open .b2{opacity:0;}

/* ---------- Hero ---------- */
.hero{position:relative;color:#fff;
  background-color:var(--charcoal);
  background-image:
    radial-gradient(1100px 480px at 82% -12%, rgba(47,122,88,.30), transparent 60%),
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:auto,42px 42px,42px 42px;}
.hero .wrap{padding:clamp(3.5rem,8vw,6.5rem) 0 clamp(3.5rem,7vw,6rem);}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,4rem);align-items:center;}
.hero h1{font-size:clamp(2.4rem,6vw + 1rem,4.3rem);line-height:1.03;font-weight:800;letter-spacing:-.025em;margin-bottom:1.1rem;}
.hero .lead{font-size:clamp(1.05rem,.5vw + .95rem,1.28rem);color:var(--muted-dark);max-width:46ch;margin-bottom:1.9rem;}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-bottom:1.6rem;}
.hero-teaser{font-family:var(--mono);font-size:.82rem;color:#a9e6c6;display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;border-bottom:1px solid rgba(143,212,179,.4);padding-bottom:2px;}
.hero-teaser:hover{color:#fff;}
.hero-art{width:100%;height:auto;}

/* Hero art styling */
.hero-art .link{stroke:var(--forest-2);stroke-width:2;opacity:.55;}
.hero-art .mesh{stroke:var(--forest-2);stroke-width:1.4;opacity:.32;stroke-dasharray:4 8;}
.hero-art .node{fill:#0f1412;stroke:var(--forest-2);stroke-width:2;}
.hero-art .node-core{fill:var(--forest-2);}
.hero-art .hub-ring{fill:none;stroke:rgba(143,212,179,.35);stroke-width:1.5;}
.hero-art .hub{fill:var(--forest);stroke:#0f1412;stroke-width:2;}
.hero-art .hub-core{fill:#eafff4;}
.hero-art .packet{fill:#a9e6c6;opacity:0;}

/* ---------- Featured (FieldStack) ---------- */
.featured{background:var(--mist);padding:clamp(3.5rem,7vw,6rem) 0;}
.card-featured{background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--shadow-deep);
  border:1px solid var(--line);overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr;}
.feat-body{padding:clamp(1.8rem,3.5vw,3rem);}
.badge{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.76rem;font-weight:600;
  letter-spacing:.04em;color:var(--forest-deep);background:var(--sage);border:1px solid rgba(30,91,67,.25);
  padding:.4rem .8rem;border-radius:999px;margin-bottom:1.1rem;}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--forest-2);}
.feat-body h2{font-size:clamp(1.9rem,3vw,2.6rem);font-weight:800;letter-spacing:-.02em;line-height:1.05;margin-bottom:.9rem;}
.feat-body .desc{color:var(--muted);max-width:48ch;margin-bottom:1.4rem;}
.specs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem;}
.spec{font-family:var(--mono);font-size:.76rem;color:var(--forest-deep);background:#eef3f0;border:1px solid var(--line);padding:.35rem .7rem;border-radius:999px;}
.feature-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.2rem;margin-bottom:1.8rem;}
.feature-list li{position:relative;padding-left:1.9rem;font-weight:600;font-size:.98rem;}
.feature-list li::before{content:"";position:absolute;left:0;top:.32em;width:.8rem;height:.8rem;border-radius:50%;background:var(--forest);box-shadow:inset 0 0 0 3px var(--sage);}
.feat-cta{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;}
.feat-link{font-weight:700;text-decoration:none;color:var(--forest-deep);border-bottom:2px solid var(--forest-2);padding-bottom:2px;}
.feat-link:hover{color:var(--forest);}
.feat-art{background:linear-gradient(160deg,#eef5f0,#dcebe2);display:flex;align-items:center;justify-content:center;padding:clamp(1.5rem,3vw,2.5rem);border-left:1px solid var(--line);}
.stack-art{width:min(420px,90%);height:auto;}


/* ---------- Software from the lab ---------- */
.software{background:var(--paper);padding:clamp(3.5rem,7vw,6rem) 0;border-bottom:1px solid var(--line);}
.software-head{max-width:66ch;margin-bottom:2.4rem;}
.software-head h2{font-size:clamp(1.9rem,3.2vw,2.7rem);font-weight:800;letter-spacing:-.02em;line-height:1.08;margin-bottom:.85rem;}
.software-head p{color:var(--muted);}
.software-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;align-items:start;}
.software-card{border:1px solid var(--line);border-radius:var(--r);padding:1.65rem;background:linear-gradient(155deg,#fff,var(--mist));box-shadow:var(--shadow-card);min-width:0;}
.software-card-head{display:flex;gap:1rem;align-items:center;margin-bottom:1.25rem;}
.software-icon{width:56px;height:56px;flex:0 0 56px;border:1px solid rgba(30,91,67,.16);border-radius:15px;background:var(--sage);display:grid;place-items:center;color:var(--forest-deep);}
.software-icon svg{width:32px;height:32px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.software-icon--studio{background:#101418;color:#9be5c0;font-size:2rem;font-weight:800;border-color:#315344;}
.software-kind{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--forest);margin-bottom:.35rem;}
.software-card h3{font-size:1.48rem;line-height:1.12;font-weight:800;letter-spacing:-.025em;}
.software-card .software-desc{color:var(--muted);font-size:.97rem;min-height:9.3em;}
.software-status{display:inline-block;margin:1rem 0;font-family:var(--mono);font-size:.72rem;color:var(--forest);background:#edf4ef;border-radius:999px;padding:.3rem .7rem;}
.software-details{border-top:1px solid var(--line);padding-top:1rem;}
.software-details summary{font-weight:700;color:var(--forest);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:.8rem;}
.software-details summary::-webkit-details-marker{display:none;}
.software-details summary::after{content:'+';font-family:var(--mono);font-size:1.25rem;line-height:1;}
.software-details[open] summary::after{content:'−';}
.software-details summary:focus-visible{outline:3px solid var(--forest-2);outline-offset:5px;border-radius:5px;}
.software-details ul{list-style:none;display:grid;gap:.65rem;margin-top:1rem;}
.software-details li{font-size:.92rem;color:var(--muted);padding-left:1rem;position:relative;}
.software-details li::before{content:'•';position:absolute;left:0;color:var(--forest);}
@media(max-width:1000px){.software-grid{grid-template-columns:1fr;}.software-card .software-desc{min-height:0;}.software-card{padding:1.5rem;}}

/* ---------- Inside the Lab (bento) ---------- */
.lab{background:var(--paper);padding:clamp(3.5rem,7vw,6rem) 0;}
.lab-head{max-width:60ch;margin-bottom:2.4rem;}
.lab-head h2{font-size:clamp(1.9rem,3.2vw,2.7rem);font-weight:800;letter-spacing:-.02em;line-height:1.05;margin-bottom:.7rem;}
.lab-head p{color:var(--muted);max-width:56ch;}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:1.1rem;}
.tile{background:var(--mist);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.4rem,2.5vw,2rem);
  box-shadow:var(--shadow-card);transition:transform .2s ease,box-shadow .2s ease;}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-deep);}
.tile h3{font-size:1.28rem;font-weight:800;letter-spacing:-.01em;margin:.9rem 0 .5rem;}
.tile p{color:var(--muted);font-size:.98rem;}
.tile .icon{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);}
.tile .icon svg{width:26px;height:26px;stroke:var(--forest);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.tile .icon .f{fill:var(--forest);stroke:none;}
.tile--a{grid-column:span 4;background:linear-gradient(150deg,#eef5f0,#dcebe2);}
.tile--b{grid-column:span 2;}
.tile--c{grid-column:span 2;}
.tile--d{grid-column:span 4;}

/* ---------- About ---------- */
.about{background:var(--charcoal);color:#fff;padding:clamp(3.5rem,7vw,6rem) 0;position:relative;
  background-image:radial-gradient(900px 420px at 15% 0%, rgba(47,122,88,.28), transparent 60%);}
.about .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start;}
.about h2{font-size:clamp(1.9rem,3.2vw,2.7rem);font-weight:800;letter-spacing:-.02em;line-height:1.08;margin-bottom:1rem;}
.about .statement{font-size:clamp(1.15rem,.6vw + 1rem,1.4rem);color:#eaf3ee;font-weight:600;}
.about p.body{color:var(--muted-dark);margin-top:1.2rem;max-width:58ch;}
.principles{list-style:none;display:grid;gap:.9rem;margin-top:1.8rem;}
.principles li{display:flex;gap:.8rem;align-items:flex-start;font-weight:600;}
.principles .num{font-family:var(--mono);flex:0 0 auto;width:2rem;height:2rem;border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgba(47,122,88,.35);border:1px solid rgba(143,212,179,.4);color:#a9e6c6;font-size:.85rem;}

/* ---------- CTA ---------- */
.cta{background:var(--forest-deep);color:#fff;padding:clamp(3.5rem,7vw,6rem) 0;text-align:center;position:relative;
  background-image:radial-gradient(700px 320px at 50% 120%, rgba(47,122,88,.5), transparent 70%);}
.cta .wrap{max-width:760px;}
.cta h2{font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-.02em;line-height:1.05;margin-bottom:1rem;}
.cta p{color:#cfe6d9;font-size:1.1rem;max-width:52ch;margin:0 auto 1.8rem;}
.cta .devnote{font-family:var(--mono);font-size:.8rem;color:#8fd4b3;margin-top:1.2rem;display:inline-block;}

/* ---------- Footer ---------- */
.footer{background:var(--charcoal-2);color:#cdd6d1;padding:2.6rem 0 2rem;border-top:1px solid rgba(255,255,255,.08);}
.footer .wrap{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:flex-start;}
.footer .brand{color:#fff;margin-bottom:.6rem;}
.footer .tag{max-width:34ch;font-size:.92rem;color:var(--muted-dark);}
.footer nav ul{list-style:none;display:flex;flex-direction:column;gap:.5rem;}
.footer nav a{text-decoration:none;color:#cdd6d1;font-weight:600;font-size:.95rem;}
.footer nav a:hover{color:#fff;}
.footer .meta{width:100%;border-top:1px solid rgba(255,255,255,.08);margin-top:1.4rem;padding-top:1.2rem;
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between;font-size:.85rem;color:#9fb0a7;}
.footer .meta .dom{font-family:var(--mono);}

/* ---------- Animations (only when motion is OK) ---------- */
@keyframes hubPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes nodeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes meshDash{to{stroke-dashoffset:-48}}
@keyframes flowA{0%{transform:translate(0,0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translate(-160px,-120px);opacity:0}}
@keyframes flowD{0%{transform:translate(0,0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translate(190px,105px);opacity:0}}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth;}
  .hero-art .hub-group{transform-box:fill-box;transform-origin:center;animation:hubPulse 5s ease-in-out infinite;}
  .hero-art .node-float{transform-box:fill-box;transform-origin:center;animation:nodeFloat 6s ease-in-out infinite;}
  .hero-art .mesh{animation:meshDash 2.4s linear infinite;}
  .hero-art .packet-a{animation:flowA 3.2s ease-in-out infinite;}
  .hero-art .packet-d{animation:flowD 3.8s ease-in-out infinite .6s;}
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .card-featured{grid-template-columns:1fr;}
  .feat-art{border-left:none;border-top:1px solid var(--line);order:-1;}
  .about .wrap{grid-template-columns:1fr;}
}
@media (max-width:819px){
  .nav-toggle{display:inline-flex;}
  .primary-nav{
    position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:.25rem;
    background:var(--charcoal-2);border-bottom:1px solid rgba(255,255,255,.08);
    padding:.7rem 1.25rem 1.25rem;box-shadow:var(--shadow-deep);}
  .primary-nav ul{flex-direction:column;align-items:stretch;gap:.3rem;}
  .primary-nav a{padding:.9rem 1rem;font-size:1.05rem;border-radius:12px;}
  .site-header.menu-open .primary-nav{display:flex;}
  .hero-grid{grid-template-columns:1fr;}
  .hero-art{max-width:460px;margin-inline:auto;}
  .bento{grid-template-columns:1fr;}
  .tile--a,.tile--b,.tile--c,.tile--d{grid-column:span 1;}
  .feature-list{grid-template-columns:1fr;}
}

/* ---------- Reduced motion fallback ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  html{scroll-behavior:auto;}
  .hero-art .packet{opacity:0 !important;}
}

/* ---------- Product pages ---------- */
.product-hero{background:var(--charcoal);color:#fff;padding:clamp(3.5rem,7vw,6rem) 0;background-image:radial-gradient(900px 400px at 85% 10%,rgba(47,122,88,.32),transparent 65%);}
.product-hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:3rem;align-items:center;}
.product-name{display:flex;gap:.8rem;align-items:center;margin-bottom:1.7rem;color:#a9e6c6;font-weight:700;}
.product-name .software-icon{width:48px;height:48px;flex-basis:48px;border-radius:13px;}
.product-hero h1{font-size:clamp(2.4rem,5vw,4rem);line-height:1.05;letter-spacing:-.035em;max-width:16ch;margin-bottom:1.2rem;}
.product-hero .lead{max-width:55ch;color:var(--muted-dark);font-size:1.13rem;margin-bottom:1.8rem;}
.product-hero .badge{color:#b5e9cd;background:rgba(47,122,88,.2);border-color:#466354;}
.product-hero .hero-actions{margin-bottom:0;}
.product-route{padding:2rem;border:1px solid #385247;border-radius:var(--r-lg);background:linear-gradient(150deg,rgba(47,122,88,.19),rgba(255,255,255,.03));}
.product-route .eyebrow{margin-bottom:1.6rem;}
.product-route ol{list-style:none;margin:0;padding:0;display:grid;gap:1.7rem;}
.product-route li{display:flex;gap:1rem;align-items:flex-start;}
.product-route .step-num{font-family:var(--mono);color:#a9e6c6;font-size:.82rem;border:1px solid #3c6150;border-radius:10px;padding:.45rem .65rem;flex:0 0 auto;}
.product-route h2{font-size:1.23rem;line-height:1.3;margin-bottom:.3rem;}
.product-route p{font-size:.94rem;color:var(--muted-dark);}
.product-section{padding:clamp(3.5rem,7vw,5rem) 0;}
.product-section--mist{background:var(--mist);}
.product-section h2,.product-status h2{font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.1;letter-spacing:-.025em;margin-bottom:.9rem;}
.section-intro{color:var(--muted);max-width:62ch;margin-bottom:2rem;}
.product-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem;}
.product-feature{padding:1.6rem;border:1px solid var(--line);border-radius:var(--r);background:#fff;}
.product-feature h3{font-size:1.2rem;margin-bottom:.65rem;line-height:1.3;}
.product-feature p{color:var(--muted);}
.product-workflow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;gap:2rem;padding:0;margin:2rem 0 0;}
.product-workflow .step-index{font-family:var(--mono);color:var(--forest);font-size:.85rem;display:block;margin-bottom:.7rem;}
.product-workflow h3{font-size:1.2rem;line-height:1.3;margin-bottom:.7rem;}
.product-workflow p{color:var(--muted);}
.product-status{background:var(--forest-deep);color:#fff;padding:3rem 0;}
.product-status .wrap{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;}
.product-status p{color:#cfe6d9;}
.product-status h3{font-size:1.2rem;margin-bottom:.7rem;}
.related-projects{padding:2.4rem 0;background:var(--mist);border-bottom:1px solid var(--line);}
.related-projects .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;}
.related-projects h2{font-size:1.1rem;}
.related-projects nav{display:flex;gap:1rem;flex-wrap:wrap;}
.related-projects a,.software-link{color:var(--forest);font-weight:700;text-decoration:none;}
.related-projects a:hover,.software-link:hover{text-decoration:underline;}
.software-link{display:inline-block;margin-top:1.1rem;font-size:.94rem;}
.screenshot-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;}
.screenshot-gallery figure{margin:0;}.screenshot-gallery img{width:100%;border-radius:var(--r);border:1px solid var(--line);}.screenshot-gallery figcaption{margin-top:.8rem;color:var(--muted);}
@media(max-width:900px){.product-hero-grid,.product-status .wrap{grid-template-columns:1fr;gap:2rem;}.product-hero h1{max-width:20ch;}}
@media(max-width:650px){.product-features,.product-workflow,.screenshot-gallery{grid-template-columns:1fr;}.product-feature,.product-route{padding:1.3rem;}}

.screenshot-gallery img{display:block;height:auto;background:#111;transition:box-shadow .2s;}
.screenshot-gallery a{display:block;border-radius:var(--r);}
.screenshot-gallery a:hover img{box-shadow:0 8px 28px #102b2426;}
.screenshot-gallery figure:first-child{grid-column:1/-1;}
.screenshot-hint{display:block;font-size:.85rem;margin-top:.35rem;}
.screenshot-viewer{border:1px solid #45534d;border-radius:16px;background:#121918;color:#fff;padding:1rem;width:min(1400px,94vw);max-height:94vh;}
.screenshot-viewer::backdrop{background:#000c;}
.screenshot-viewer button{display:block;margin:0 0 .75rem auto;background:#e0f4e8;color:#16392b;border:0;border-radius:8px;padding:.6rem 1rem;font:inherit;cursor:pointer;}
.screenshot-viewer img{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain;}
.screenshot-viewer p{margin:.75rem 0 0;}